From 51cd249f1b528ea754705ba0594012da6d72d1d6 Mon Sep 17 00:00:00 2001
From: Christoph Pader <christoph@margelo.io>
Date: Tue, 27 Jun 2023 13:27:01 +0200
Subject: [PATCH 001/102] add preferences entry for color theme page

---
 src/pages/settings/Preferences/PreferencesPage.js | 15 +++++++++++++++
 1 file changed, 15 insertions(+)

diff --git a/src/pages/settings/Preferences/PreferencesPage.js b/src/pages/settings/Preferences/PreferencesPage.js
index 81b129439e96..44baf2be54c4 100755
--- a/src/pages/settings/Preferences/PreferencesPage.js
+++ b/src/pages/settings/Preferences/PreferencesPage.js
@@ -24,6 +24,9 @@ const propTypes = {
     /** The chat priority mode */
     priorityMode: PropTypes.string,
 
+    /** The app's color theme */
+    colorTheme: PropTypes.string,
+
     /** The details about the user that is signed in */
     user: PropTypes.shape({
         /** Whether or not the user is subscribed to news updates */
@@ -39,12 +42,14 @@ const propTypes = {
 
 const defaultProps = {
     priorityMode: CONST.PRIORITY_MODE.DEFAULT,
+    colorTheme: CONST.COLOR_THEME.DARK,
     user: {},
 };
 
 function PreferencesPage(props) {
     const priorityModes = props.translate('priorityModePage.priorityModes');
     const languages = props.translate('languagePage.languages');
+    const colorThemes = props.translate('colorThemePage.colorThemes');
 
     // Enable additional test features in the staging or dev environments
     const shouldShowTestToolMenu = _.contains([CONST.ENVIRONMENT.STAGING, CONST.ENVIRONMENT.ADHOC, CONST.ENVIRONMENT.DEV], props.environment);
@@ -87,6 +92,13 @@ function PreferencesPage(props) {
                         description={props.translate('languagePage.language')}
                         onPress={() => Navigation.navigate(ROUTES.SETTINGS_LANGUAGE)}
                     />
+                    <MenuItemWithTopDescription
+                        shouldShowRightIcon
+                        title={colorThemes[props.colorTheme].label}
+                        description={props.translate('colorThemePage.colorTheme')}
+                        onPress={() => Navigation.navigate(ROUTES.SETTINGS_COLOR_THEME)}
+                    />
+
                     {shouldShowTestToolMenu && (
                         <View style={[styles.ml5, styles.mr8, styles.mt6]}>
                             <TestToolMenu />
@@ -109,6 +121,9 @@ export default compose(
         priorityMode: {
             key: ONYXKEYS.NVP_PRIORITY_MODE,
         },
+        colorTheme: {
+            key: ONYXKEYS.COLOR_THEME,
+        },
         user: {
             key: ONYXKEYS.USER,
         },

From bb6dae1a3a3db7238aff632474c84221cfdd2d56 Mon Sep 17 00:00:00 2001
From: Christoph Pader <christoph.pader@outlook.com>
Date: Wed, 5 Jul 2023 12:43:29 +0200
Subject: [PATCH 002/102] update theme naming

---
 .../settings/Preferences/PreferencesPage.js     | 17 ++++++++---------
 1 file changed, 8 insertions(+), 9 deletions(-)

diff --git a/src/pages/settings/Preferences/PreferencesPage.js b/src/pages/settings/Preferences/PreferencesPage.js
index 44baf2be54c4..2e133e7c7802 100755
--- a/src/pages/settings/Preferences/PreferencesPage.js
+++ b/src/pages/settings/Preferences/PreferencesPage.js
@@ -25,7 +25,7 @@ const propTypes = {
     priorityMode: PropTypes.string,
 
     /** The app's color theme */
-    colorTheme: PropTypes.string,
+    preferredTheme: PropTypes.string,
 
     /** The details about the user that is signed in */
     user: PropTypes.shape({
@@ -42,14 +42,14 @@ const propTypes = {
 
 const defaultProps = {
     priorityMode: CONST.PRIORITY_MODE.DEFAULT,
-    colorTheme: CONST.COLOR_THEME.DARK,
+    preferredTheme: CONST.DEFAULT_THEME,
     user: {},
 };
 
 function PreferencesPage(props) {
     const priorityModes = props.translate('priorityModePage.priorityModes');
     const languages = props.translate('languagePage.languages');
-    const colorThemes = props.translate('colorThemePage.colorThemes');
+    const themes = props.translate('themePage.themes');
 
     // Enable additional test features in the staging or dev environments
     const shouldShowTestToolMenu = _.contains([CONST.ENVIRONMENT.STAGING, CONST.ENVIRONMENT.ADHOC, CONST.ENVIRONMENT.DEV], props.environment);
@@ -94,11 +94,10 @@ function PreferencesPage(props) {
                     />
                     <MenuItemWithTopDescription
                         shouldShowRightIcon
-                        title={colorThemes[props.colorTheme].label}
-                        description={props.translate('colorThemePage.colorTheme')}
-                        onPress={() => Navigation.navigate(ROUTES.SETTINGS_COLOR_THEME)}
+                        title={themes[props.preferredTheme].label}
+                        description={props.translate('themePage.theme')}
+                        onPress={() => Navigation.navigate(ROUTES.SETTINGS_THEME)}
                     />
-
                     {shouldShowTestToolMenu && (
                         <View style={[styles.ml5, styles.mr8, styles.mt6]}>
                             <TestToolMenu />
@@ -121,8 +120,8 @@ export default compose(
         priorityMode: {
             key: ONYXKEYS.NVP_PRIORITY_MODE,
         },
-        colorTheme: {
-            key: ONYXKEYS.COLOR_THEME,
+        preferredTheme: {
+            key: ONYXKEYS.PREFERRED_THEME,
         },
         user: {
             key: ONYXKEYS.USER,

From 0f6a0d99a4a2eaec8ce7fa2771b5f6d3b0b8ae43 Mon Sep 17 00:00:00 2001
From: Christoph Pader <christoph.pader@outlook.com>
Date: Tue, 11 Jul 2023 11:34:49 +0200
Subject: [PATCH 003/102] default to DEFAULT_THEME if onyx key is not set

---
 src/pages/settings/Preferences/PreferencesPage.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/settings/Preferences/PreferencesPage.js b/src/pages/settings/Preferences/PreferencesPage.js
index 2e133e7c7802..5ec13453d05d 100755
--- a/src/pages/settings/Preferences/PreferencesPage.js
+++ b/src/pages/settings/Preferences/PreferencesPage.js
@@ -94,7 +94,7 @@ function PreferencesPage(props) {
                     />
                     <MenuItemWithTopDescription
                         shouldShowRightIcon
-                        title={themes[props.preferredTheme].label}
+                        title={themes[props.preferredTheme || CONST.THEME.DEFAULT].label}
                         description={props.translate('themePage.theme')}
                         onPress={() => Navigation.navigate(ROUTES.SETTINGS_THEME)}
                     />

From cfc058f5f0818cbab00973d4761386284459db46 Mon Sep 17 00:00:00 2001
From: Someshwar Tripathi <someshwartripathi8@gmail.com>
Date: Sat, 4 Nov 2023 11:35:21 +0530
Subject: [PATCH 004/102] Add popover with overlay to confirm Bank Account
 deletion

---
 src/pages/settings/Wallet/WalletPage/WalletPage.js | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/pages/settings/Wallet/WalletPage/WalletPage.js b/src/pages/settings/Wallet/WalletPage/WalletPage.js
index 2387f5f23e6c..5d89f8a6943c 100644
--- a/src/pages/settings/Wallet/WalletPage/WalletPage.js
+++ b/src/pages/settings/Wallet/WalletPage/WalletPage.js
@@ -5,7 +5,6 @@ import {withOnyx} from 'react-native-onyx';
 import _ from 'underscore';
 import AddPaymentMethodMenu from '@components/AddPaymentMethodMenu';
 import Button from '@components/Button';
-import ConfirmContent from '@components/ConfirmContent';
 import CurrentWalletBalance from '@components/CurrentWalletBalance';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import Icon from '@components/Icon';
@@ -37,6 +36,7 @@ import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
 import {defaultProps, propTypes} from './walletPagePropTypes';
+import ConfirmModal from '@components/ConfirmModal';
 
 function WalletPage({bankAccountList, betas, cardList, fundList, isLoadingPaymentMethods, network, shouldListenForResize, userWallet, walletTerms}) {
     const {translate} = useLocalize();
@@ -513,7 +513,8 @@ function WalletPage({bankAccountList, betas, cardList, fundList, isLoadingPaymen
                                 />
                             </View>
                         ) : (
-                            <ConfirmContent
+                            <ConfirmModal
+                                isVisible
                                 onConfirm={() => {
                                     deletePaymentMethod();
                                     hideDefaultDeleteMenu();

From c098335efbcd8855489501cad4cea03e5e36993e Mon Sep 17 00:00:00 2001
From: Someshwar Tripathi <someshwartripathi8@gmail.com>
Date: Mon, 6 Nov 2023 23:17:49 +0530
Subject: [PATCH 005/102] lint fix

---
 src/pages/settings/Wallet/WalletPage/WalletPage.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/settings/Wallet/WalletPage/WalletPage.js b/src/pages/settings/Wallet/WalletPage/WalletPage.js
index 5d89f8a6943c..1b6e70b5e807 100644
--- a/src/pages/settings/Wallet/WalletPage/WalletPage.js
+++ b/src/pages/settings/Wallet/WalletPage/WalletPage.js
@@ -5,6 +5,7 @@ import {withOnyx} from 'react-native-onyx';
 import _ from 'underscore';
 import AddPaymentMethodMenu from '@components/AddPaymentMethodMenu';
 import Button from '@components/Button';
+import ConfirmModal from '@components/ConfirmModal';
 import CurrentWalletBalance from '@components/CurrentWalletBalance';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import Icon from '@components/Icon';
@@ -36,7 +37,6 @@ import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
 import {defaultProps, propTypes} from './walletPagePropTypes';
-import ConfirmModal from '@components/ConfirmModal';
 
 function WalletPage({bankAccountList, betas, cardList, fundList, isLoadingPaymentMethods, network, shouldListenForResize, userWallet, walletTerms}) {
     const {translate} = useLocalize();

From 9f464234cb9ef4a702311b214e7d248b726457da Mon Sep 17 00:00:00 2001
From: Someshwar Tripathi <someshwartripathi8@gmail.com>
Date: Thu, 16 Nov 2023 17:24:05 +0530
Subject: [PATCH 006/102] Move onModalHide to ConfirmModal prop

---
 src/pages/settings/Wallet/WalletPage/WalletPage.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/settings/Wallet/WalletPage/WalletPage.js b/src/pages/settings/Wallet/WalletPage/WalletPage.js
index 1b6e70b5e807..35ce5dd5158e 100644
--- a/src/pages/settings/Wallet/WalletPage/WalletPage.js
+++ b/src/pages/settings/Wallet/WalletPage/WalletPage.js
@@ -481,7 +481,6 @@ function WalletPage({bankAccountList, betas, cardList, fundList, isLoadingPaymen
                         }}
                         withoutOverlay
                         anchorRef={paymentMethodButtonRef}
-                        onModalHide={resetSelectedPaymentMethodData}
                     >
                         {!showConfirmDeleteContent ? (
                             <View style={[styles.m5, !isSmallScreenWidth ? styles.sidebarPopover : '']}>
@@ -531,6 +530,7 @@ function WalletPage({bankAccountList, betas, cardList, fundList, isLoadingPaymen
                                 }}
                                 shouldShowCancelButton
                                 danger
+                                onModalHide={resetSelectedPaymentMethodData}
                             />
                         )}
                     </Popover>

From 146570deef4aa0db98d4fe45990cdfcad01e9642 Mon Sep 17 00:00:00 2001
From: Someshwar Tripathi <someshwartripathi8@gmail.com>
Date: Thu, 16 Nov 2023 17:35:05 +0530
Subject: [PATCH 007/102] Improve Confirm Modal Visibility logic

---
 .../settings/Wallet/WalletPage/WalletPage.js  | 80 +++++++++----------
 1 file changed, 36 insertions(+), 44 deletions(-)

diff --git a/src/pages/settings/Wallet/WalletPage/WalletPage.js b/src/pages/settings/Wallet/WalletPage/WalletPage.js
index 35ce5dd5158e..780c6d767c12 100644
--- a/src/pages/settings/Wallet/WalletPage/WalletPage.js
+++ b/src/pages/settings/Wallet/WalletPage/WalletPage.js
@@ -482,60 +482,52 @@ function WalletPage({bankAccountList, betas, cardList, fundList, isLoadingPaymen
                         withoutOverlay
                         anchorRef={paymentMethodButtonRef}
                     >
-                        {!showConfirmDeleteContent ? (
-                            <View style={[styles.m5, !isSmallScreenWidth ? styles.sidebarPopover : '']}>
-                                {isPopoverBottomMount && (
-                                    <MenuItem
-                                        title={paymentMethod.formattedSelectedPaymentMethod.title || ''}
-                                        icon={paymentMethod.formattedSelectedPaymentMethod.icon}
-                                        description={paymentMethod.formattedSelectedPaymentMethod.description}
-                                        wrapperStyle={[styles.pv0, styles.ph0, styles.mb4]}
-                                        interactive={false}
-                                    />
-                                )}
-                                {shouldShowMakeDefaultButton && (
-                                    <Button
-                                        onPress={() => {
-                                            makeDefaultPaymentMethod();
-                                            setShouldShowDefaultDeleteMenu(false);
-                                        }}
-                                        text={translate('walletPage.setDefaultConfirmation')}
-                                    />
-                                )}
+                        <View style={[styles.m5, !isSmallScreenWidth ? styles.sidebarPopover : '']}>
+                            {isPopoverBottomMount && (
+                                <MenuItem
+                                    title={paymentMethod.formattedSelectedPaymentMethod.title || ''}
+                                    icon={paymentMethod.formattedSelectedPaymentMethod.icon}
+                                    description={paymentMethod.formattedSelectedPaymentMethod.description}
+                                    wrapperStyle={[styles.pv0, styles.ph0, styles.mb4]}
+                                    interactive={false}
+                                />
+                            )}
+                            {shouldShowMakeDefaultButton && (
                                 <Button
                                     onPress={() => {
-                                        setShowConfirmDeleteContent(true);
+                                        makeDefaultPaymentMethod();
+                                        setShouldShowDefaultDeleteMenu(false);
                                     }}
-                                    style={[shouldShowMakeDefaultButton ? styles.mt4 : {}]}
-                                    text={translate('common.delete')}
-                                    danger
+                                    text={translate('walletPage.setDefaultConfirmation')}
                                 />
-                            </View>
-                        ) : (
-                            <ConfirmModal
-                                isVisible
-                                onConfirm={() => {
-                                    deletePaymentMethod();
-                                    hideDefaultDeleteMenu();
-                                }}
-                                onCancel={hideDefaultDeleteMenu}
-                                contentStyles={!isSmallScreenWidth ? [styles.sidebarPopover, styles.willChangeTransform] : undefined}
-                                title={translate('walletPage.deleteAccount')}
-                                prompt={translate('walletPage.deleteConfirmation')}
-                                confirmText={translate('common.delete')}
-                                cancelText={translate('common.cancel')}
-                                anchorPosition={{
-                                    top: anchorPosition.anchorPositionTop,
-                                    right: anchorPosition.anchorPositionRight,
+                            )}
+                            <Button
+                                onPress={() => {
+                                    setShowConfirmDeleteContent(true);
                                 }}
-                                shouldShowCancelButton
+                                style={[shouldShowMakeDefaultButton ? styles.mt4 : {}]}
+                                text={translate('common.delete')}
                                 danger
-                                onModalHide={resetSelectedPaymentMethodData}
                             />
-                        )}
+                        </View>
                     </Popover>
                 </ScreenWrapper>
             )}
+            <ConfirmModal
+                isVisible={showConfirmDeleteContent}
+                onConfirm={() => {
+                    deletePaymentMethod();
+                    hideDefaultDeleteMenu();
+                }}
+                onCancel={hideDefaultDeleteMenu}
+                title={translate('walletPage.deleteAccount')}
+                prompt={translate('walletPage.deleteConfirmation')}
+                confirmText={translate('common.delete')}
+                cancelText={translate('common.cancel')}
+                shouldShowCancelButton
+                danger
+                onModalHide={resetSelectedPaymentMethodData}
+            />
             <AddPaymentMethodMenu
                 isVisible={shouldShowAddPaymentMenu}
                 onClose={hideAddPaymentMenu}

From 07ea059f274bf87080d939200f36b89aab6df19e Mon Sep 17 00:00:00 2001
From: Someshwar Tripathi <someshwartripathi8@gmail.com>
Date: Thu, 16 Nov 2023 17:48:21 +0530
Subject: [PATCH 008/102] Improve State Variable name

We change showConfirmDeleteContent to showConfirmDeleteModal to better reflect its purpose
---
 src/pages/settings/Wallet/WalletPage/WalletPage.js | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/pages/settings/Wallet/WalletPage/WalletPage.js b/src/pages/settings/Wallet/WalletPage/WalletPage.js
index 780c6d767c12..ee75842b61c3 100644
--- a/src/pages/settings/Wallet/WalletPage/WalletPage.js
+++ b/src/pages/settings/Wallet/WalletPage/WalletPage.js
@@ -61,7 +61,7 @@ function WalletPage({bankAccountList, betas, cardList, fundList, isLoadingPaymen
         anchorPositionTop: 0,
         anchorPositionRight: 0,
     });
-    const [showConfirmDeleteContent, setShowConfirmDeleteContent] = useState(false);
+    const [showConfirmDeleteModal, setShowConfirmDeleteModal] = useState(false);
 
     const hasBankAccount = !_.isEmpty(bankAccountList) || !_.isEmpty(fundList);
     const hasWallet = !_.isEmpty(userWallet);
@@ -215,9 +215,9 @@ function WalletPage({bankAccountList, betas, cardList, fundList, isLoadingPaymen
     const hideDefaultDeleteMenu = useCallback(() => {
         setShouldShowDefaultDeleteMenu(false);
         InteractionManager.runAfterInteractions(() => {
-            setShowConfirmDeleteContent(false);
+            setShowConfirmDeleteModal(false);
         });
-    }, [setShouldShowDefaultDeleteMenu, setShowConfirmDeleteContent]);
+    }, [setShouldShowDefaultDeleteMenu, setShowConfirmDeleteModal]);
 
     const makeDefaultPaymentMethod = useCallback(() => {
         const paymentCardList = fundList || {};
@@ -503,7 +503,7 @@ function WalletPage({bankAccountList, betas, cardList, fundList, isLoadingPaymen
                             )}
                             <Button
                                 onPress={() => {
-                                    setShowConfirmDeleteContent(true);
+                                    setShowConfirmDeleteModal(true);
                                 }}
                                 style={[shouldShowMakeDefaultButton ? styles.mt4 : {}]}
                                 text={translate('common.delete')}
@@ -514,7 +514,7 @@ function WalletPage({bankAccountList, betas, cardList, fundList, isLoadingPaymen
                 </ScreenWrapper>
             )}
             <ConfirmModal
-                isVisible={showConfirmDeleteContent}
+                isVisible={showConfirmDeleteModal}
                 onConfirm={() => {
                     deletePaymentMethod();
                     hideDefaultDeleteMenu();

From d7ead9f51fb4409c5a0c99c0721db27e45d2a588 Mon Sep 17 00:00:00 2001
From: Someshwar Tripathi <someshwartripathi8@gmail.com>
Date: Mon, 27 Nov 2023 03:57:26 +0530
Subject: [PATCH 009/102] Move ConfirmModal inside Popover

---
 .../settings/Wallet/WalletPage/WalletPage.js  | 75 ++++++++++---------
 1 file changed, 39 insertions(+), 36 deletions(-)

diff --git a/src/pages/settings/Wallet/WalletPage/WalletPage.js b/src/pages/settings/Wallet/WalletPage/WalletPage.js
index 3a6af1be51dc..5f11fd853745 100644
--- a/src/pages/settings/Wallet/WalletPage/WalletPage.js
+++ b/src/pages/settings/Wallet/WalletPage/WalletPage.js
@@ -489,53 +489,56 @@ function WalletPage({bankAccountList, betas, cardList, fundList, isLoadingPaymen
                         }}
                         withoutOverlay
                         anchorRef={paymentMethodButtonRef}
+                        onModalHide={resetSelectedPaymentMethodData}
                     >
-                        <View style={[styles.m5, !isSmallScreenWidth ? styles.sidebarPopover : '']}>
-                            {isPopoverBottomMount && (
-                                <MenuItem
-                                    title={paymentMethod.formattedSelectedPaymentMethod.title || ''}
-                                    icon={paymentMethod.formattedSelectedPaymentMethod.icon}
-                                    description={paymentMethod.formattedSelectedPaymentMethod.description}
-                                    wrapperStyle={[styles.pv0, styles.ph0, styles.mb4]}
-                                    interactive={false}
-                                />
-                            )}
-                            {shouldShowMakeDefaultButton && (
+                        {!showConfirmDeleteModal ? (
+                            <View style={[styles.m5, !isSmallScreenWidth ? styles.sidebarPopover : '']}>
+                                {isPopoverBottomMount && (
+                                    <MenuItem
+                                        title={paymentMethod.formattedSelectedPaymentMethod.title || ''}
+                                        icon={paymentMethod.formattedSelectedPaymentMethod.icon}
+                                        description={paymentMethod.formattedSelectedPaymentMethod.description}
+                                        wrapperStyle={[styles.pv0, styles.ph0, styles.mb4]}
+                                        interactive={false}
+                                    />
+                                )}
+                                {shouldShowMakeDefaultButton && (
+                                    <Button
+                                        onPress={() => {
+                                            makeDefaultPaymentMethod();
+                                            setShouldShowDefaultDeleteMenu(false);
+                                        }}
+                                        text={translate('walletPage.setDefaultConfirmation')}
+                                    />
+                                )}
                                 <Button
                                     onPress={() => {
-                                        makeDefaultPaymentMethod();
-                                        setShouldShowDefaultDeleteMenu(false);
+                                        setShowConfirmDeleteModal(true);
                                     }}
-                                    text={translate('walletPage.setDefaultConfirmation')}
+                                    style={[shouldShowMakeDefaultButton ? styles.mt4 : {}]}
+                                    text={translate('common.delete')}
+                                    danger
                                 />
-                            )}
-                            <Button
-                                onPress={() => {
-                                    setShowConfirmDeleteModal(true);
+                            </View> 
+                        ) : (
+                            <ConfirmModal
+                                isVisible
+                                onConfirm={() => {
+                                    deletePaymentMethod();
+                                    hideDefaultDeleteMenu();
                                 }}
-                                style={[shouldShowMakeDefaultButton ? styles.mt4 : {}]}
-                                text={translate('common.delete')}
+                                onCancel={hideDefaultDeleteMenu}
+                                title={translate('walletPage.deleteAccount')}
+                                prompt={translate('walletPage.deleteConfirmation')}
+                                confirmText={translate('common.delete')}
+                                cancelText={translate('common.cancel')}
+                                shouldShowCancelButton
                                 danger
                             />
-                        </View>
+                        )}
                     </Popover>
                 </ScreenWrapper>
             )}
-            <ConfirmModal
-                isVisible={showConfirmDeleteModal}
-                onConfirm={() => {
-                    deletePaymentMethod();
-                    hideDefaultDeleteMenu();
-                }}
-                onCancel={hideDefaultDeleteMenu}
-                title={translate('walletPage.deleteAccount')}
-                prompt={translate('walletPage.deleteConfirmation')}
-                confirmText={translate('common.delete')}
-                cancelText={translate('common.cancel')}
-                shouldShowCancelButton
-                danger
-                onModalHide={resetSelectedPaymentMethodData}
-            />
             <AddPaymentMethodMenu
                 isVisible={shouldShowAddPaymentMenu}
                 onClose={hideAddPaymentMenu}

From fe6f5a9377b88479f6e9463f73c2159c186854da Mon Sep 17 00:00:00 2001
From: Someshwar Tripathi <someshwartripathi8@gmail.com>
Date: Mon, 27 Nov 2023 05:35:27 +0530
Subject: [PATCH 010/102] Revert "Move ConfirmModal inside Popover"

This reverts commit d7ead9f51fb4409c5a0c99c0721db27e45d2a588.
---
 .../settings/Wallet/WalletPage/WalletPage.js  | 75 +++++++++----------
 1 file changed, 36 insertions(+), 39 deletions(-)

diff --git a/src/pages/settings/Wallet/WalletPage/WalletPage.js b/src/pages/settings/Wallet/WalletPage/WalletPage.js
index 5f11fd853745..3a6af1be51dc 100644
--- a/src/pages/settings/Wallet/WalletPage/WalletPage.js
+++ b/src/pages/settings/Wallet/WalletPage/WalletPage.js
@@ -489,56 +489,53 @@ function WalletPage({bankAccountList, betas, cardList, fundList, isLoadingPaymen
                         }}
                         withoutOverlay
                         anchorRef={paymentMethodButtonRef}
-                        onModalHide={resetSelectedPaymentMethodData}
                     >
-                        {!showConfirmDeleteModal ? (
-                            <View style={[styles.m5, !isSmallScreenWidth ? styles.sidebarPopover : '']}>
-                                {isPopoverBottomMount && (
-                                    <MenuItem
-                                        title={paymentMethod.formattedSelectedPaymentMethod.title || ''}
-                                        icon={paymentMethod.formattedSelectedPaymentMethod.icon}
-                                        description={paymentMethod.formattedSelectedPaymentMethod.description}
-                                        wrapperStyle={[styles.pv0, styles.ph0, styles.mb4]}
-                                        interactive={false}
-                                    />
-                                )}
-                                {shouldShowMakeDefaultButton && (
-                                    <Button
-                                        onPress={() => {
-                                            makeDefaultPaymentMethod();
-                                            setShouldShowDefaultDeleteMenu(false);
-                                        }}
-                                        text={translate('walletPage.setDefaultConfirmation')}
-                                    />
-                                )}
+                        <View style={[styles.m5, !isSmallScreenWidth ? styles.sidebarPopover : '']}>
+                            {isPopoverBottomMount && (
+                                <MenuItem
+                                    title={paymentMethod.formattedSelectedPaymentMethod.title || ''}
+                                    icon={paymentMethod.formattedSelectedPaymentMethod.icon}
+                                    description={paymentMethod.formattedSelectedPaymentMethod.description}
+                                    wrapperStyle={[styles.pv0, styles.ph0, styles.mb4]}
+                                    interactive={false}
+                                />
+                            )}
+                            {shouldShowMakeDefaultButton && (
                                 <Button
                                     onPress={() => {
-                                        setShowConfirmDeleteModal(true);
+                                        makeDefaultPaymentMethod();
+                                        setShouldShowDefaultDeleteMenu(false);
                                     }}
-                                    style={[shouldShowMakeDefaultButton ? styles.mt4 : {}]}
-                                    text={translate('common.delete')}
-                                    danger
+                                    text={translate('walletPage.setDefaultConfirmation')}
                                 />
-                            </View> 
-                        ) : (
-                            <ConfirmModal
-                                isVisible
-                                onConfirm={() => {
-                                    deletePaymentMethod();
-                                    hideDefaultDeleteMenu();
+                            )}
+                            <Button
+                                onPress={() => {
+                                    setShowConfirmDeleteModal(true);
                                 }}
-                                onCancel={hideDefaultDeleteMenu}
-                                title={translate('walletPage.deleteAccount')}
-                                prompt={translate('walletPage.deleteConfirmation')}
-                                confirmText={translate('common.delete')}
-                                cancelText={translate('common.cancel')}
-                                shouldShowCancelButton
+                                style={[shouldShowMakeDefaultButton ? styles.mt4 : {}]}
+                                text={translate('common.delete')}
                                 danger
                             />
-                        )}
+                        </View>
                     </Popover>
                 </ScreenWrapper>
             )}
+            <ConfirmModal
+                isVisible={showConfirmDeleteModal}
+                onConfirm={() => {
+                    deletePaymentMethod();
+                    hideDefaultDeleteMenu();
+                }}
+                onCancel={hideDefaultDeleteMenu}
+                title={translate('walletPage.deleteAccount')}
+                prompt={translate('walletPage.deleteConfirmation')}
+                confirmText={translate('common.delete')}
+                cancelText={translate('common.cancel')}
+                shouldShowCancelButton
+                danger
+                onModalHide={resetSelectedPaymentMethodData}
+            />
             <AddPaymentMethodMenu
                 isVisible={shouldShowAddPaymentMenu}
                 onClose={hideAddPaymentMenu}

From b80cbc76fc864c34ef3a626a2d9163cb5940b1ee Mon Sep 17 00:00:00 2001
From: Someshwar Tripathi <someshwartripathi8@gmail.com>
Date: Mon, 27 Nov 2023 06:43:22 +0530
Subject: [PATCH 011/102] Move Confirmation Modal component

This moves ConfirmModal as child of Popover while preserving its visibility logic
---
 .../settings/Wallet/WalletPage/WalletPage.js  | 30 +++++++++----------
 1 file changed, 15 insertions(+), 15 deletions(-)

diff --git a/src/pages/settings/Wallet/WalletPage/WalletPage.js b/src/pages/settings/Wallet/WalletPage/WalletPage.js
index 3a6af1be51dc..f7d6cfbaffdc 100644
--- a/src/pages/settings/Wallet/WalletPage/WalletPage.js
+++ b/src/pages/settings/Wallet/WalletPage/WalletPage.js
@@ -518,24 +518,24 @@ function WalletPage({bankAccountList, betas, cardList, fundList, isLoadingPaymen
                                 danger
                             />
                         </View>
+                        <ConfirmModal
+                            isVisible={showConfirmDeleteModal}
+                            onConfirm={() => {
+                                deletePaymentMethod();
+                                hideDefaultDeleteMenu();
+                            }}
+                            onCancel={hideDefaultDeleteMenu}
+                            title={translate('walletPage.deleteAccount')}
+                            prompt={translate('walletPage.deleteConfirmation')}
+                            confirmText={translate('common.delete')}
+                            cancelText={translate('common.cancel')}
+                            shouldShowCancelButton
+                            danger
+                            onModalHide={resetSelectedPaymentMethodData}
+                        />
                     </Popover>
                 </ScreenWrapper>
             )}
-            <ConfirmModal
-                isVisible={showConfirmDeleteModal}
-                onConfirm={() => {
-                    deletePaymentMethod();
-                    hideDefaultDeleteMenu();
-                }}
-                onCancel={hideDefaultDeleteMenu}
-                title={translate('walletPage.deleteAccount')}
-                prompt={translate('walletPage.deleteConfirmation')}
-                confirmText={translate('common.delete')}
-                cancelText={translate('common.cancel')}
-                shouldShowCancelButton
-                danger
-                onModalHide={resetSelectedPaymentMethodData}
-            />
             <AddPaymentMethodMenu
                 isVisible={shouldShowAddPaymentMenu}
                 onClose={hideAddPaymentMenu}

From f14b9b489d2e62ff6d98170e7644f41522526b39 Mon Sep 17 00:00:00 2001
From: dukenv0307 <dukenv0307@gmail.com>
Date: Tue, 28 Nov 2023 11:52:10 +0700
Subject: [PATCH 012/102] update @react-navigation/native version

---
 package-lock.json | 62 +++++++++++++++++++++++------------------------
 package.json      |  2 +-
 2 files changed, 32 insertions(+), 32 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 1712b8110a61..846bec116983 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -36,7 +36,7 @@
         "@react-native-google-signin/google-signin": "^10.0.1",
         "@react-native-picker/picker": "^2.4.3",
         "@react-navigation/material-top-tabs": "^6.6.3",
-        "@react-navigation/native": "6.1.6",
+        "@react-navigation/native": "6.1.8",
         "@react-navigation/stack": "6.3.16",
         "@react-ng/bounds-observer": "^0.2.1",
         "@rnmapbox/maps": "^10.0.11",
@@ -8573,16 +8573,16 @@
       }
     },
     "node_modules/@react-navigation/core": {
-      "version": "6.4.8",
-      "resolved": "https://registry.npmjs.org/@react-navigation/core/-/core-6.4.8.tgz",
-      "integrity": "sha512-klZ9Mcf/P2j+5cHMoGyIeurEzyBM2Uq9+NoSFrF6sdV5iCWHLFhrCXuhbBiQ5wVLCKf4lavlkd/DDs47PXs9RQ==",
+      "version": "6.4.10",
+      "resolved": "https://registry.npmjs.org/@react-navigation/core/-/core-6.4.10.tgz",
+      "integrity": "sha512-oYhqxETRHNHKsipm/BtGL0LI43Hs2VSFoWMbBdHK9OqgQPjTVUitslgLcPpo4zApCcmBWoOLX2qPxhsBda644A==",
       "dependencies": {
-        "@react-navigation/routers": "^6.1.8",
+        "@react-navigation/routers": "^6.1.9",
         "escape-string-regexp": "^4.0.0",
         "nanoid": "^3.1.23",
         "query-string": "^7.1.3",
         "react-is": "^16.13.0",
-        "use-latest-callback": "^0.1.5"
+        "use-latest-callback": "^0.1.7"
       },
       "peerDependencies": {
         "react": "*"
@@ -8618,11 +8618,11 @@
       }
     },
     "node_modules/@react-navigation/native": {
-      "version": "6.1.6",
-      "resolved": "https://registry.npmjs.org/@react-navigation/native/-/native-6.1.6.tgz",
-      "integrity": "sha512-14PmSy4JR8HHEk04QkxQ0ZLuqtiQfb4BV9kkMXD2/jI4TZ+yc43OnO6fQ2o9wm+Bq8pY3DxyerC2AjNUz+oH7Q==",
+      "version": "6.1.8",
+      "resolved": "https://registry.npmjs.org/@react-navigation/native/-/native-6.1.8.tgz",
+      "integrity": "sha512-0alti852nV+8oCVm9H80G6kZvrHoy51+rXBvVCRUs2rNDDozC/xPZs8tyeCJkqdw3cpxZDK8ndXF22uWq28+0Q==",
       "dependencies": {
-        "@react-navigation/core": "^6.4.8",
+        "@react-navigation/core": "^6.4.9",
         "escape-string-regexp": "^4.0.0",
         "fast-deep-equal": "^3.1.3",
         "nanoid": "^3.1.23"
@@ -8633,9 +8633,9 @@
       }
     },
     "node_modules/@react-navigation/routers": {
-      "version": "6.1.8",
-      "resolved": "https://registry.npmjs.org/@react-navigation/routers/-/routers-6.1.8.tgz",
-      "integrity": "sha512-CEge+ZLhb1HBrSvv4RwOol7EKLW1QoqVIQlE9TN5MpxS/+VoQvP+cLbuz0Op53/iJfYhtXRFd1ZAd3RTRqto9w==",
+      "version": "6.1.9",
+      "resolved": "https://registry.npmjs.org/@react-navigation/routers/-/routers-6.1.9.tgz",
+      "integrity": "sha512-lTM8gSFHSfkJvQkxacGM6VJtBt61ip2XO54aNfswD+KMw6eeZ4oehl7m0me3CR9hnDE4+60iAZR8sAhvCiI3NA==",
       "dependencies": {
         "nanoid": "^3.1.23"
       }
@@ -50729,9 +50729,9 @@
       }
     },
     "node_modules/use-latest-callback": {
-      "version": "0.1.6",
-      "resolved": "https://registry.npmjs.org/use-latest-callback/-/use-latest-callback-0.1.6.tgz",
-      "integrity": "sha512-VO/P91A/PmKH9bcN9a7O3duSuxe6M14ZoYXgA6a8dab8doWNdhiIHzEkX/jFeTTRBsX0Ubk6nG4q2NIjNsj+bg==",
+      "version": "0.1.9",
+      "resolved": "https://registry.npmjs.org/use-latest-callback/-/use-latest-callback-0.1.9.tgz",
+      "integrity": "sha512-CL/29uS74AwreI/f2oz2hLTW7ZqVeV5+gxFeGudzQrgkCytrHw33G4KbnQOrRlAEzzAFXi7dDLMC9zhWcVpzmw==",
       "peerDependencies": {
         "react": ">=16.8"
       }
@@ -58898,16 +58898,16 @@
       }
     },
     "@react-navigation/core": {
-      "version": "6.4.8",
-      "resolved": "https://registry.npmjs.org/@react-navigation/core/-/core-6.4.8.tgz",
-      "integrity": "sha512-klZ9Mcf/P2j+5cHMoGyIeurEzyBM2Uq9+NoSFrF6sdV5iCWHLFhrCXuhbBiQ5wVLCKf4lavlkd/DDs47PXs9RQ==",
+      "version": "6.4.10",
+      "resolved": "https://registry.npmjs.org/@react-navigation/core/-/core-6.4.10.tgz",
+      "integrity": "sha512-oYhqxETRHNHKsipm/BtGL0LI43Hs2VSFoWMbBdHK9OqgQPjTVUitslgLcPpo4zApCcmBWoOLX2qPxhsBda644A==",
       "requires": {
-        "@react-navigation/routers": "^6.1.8",
+        "@react-navigation/routers": "^6.1.9",
         "escape-string-regexp": "^4.0.0",
         "nanoid": "^3.1.23",
         "query-string": "^7.1.3",
         "react-is": "^16.13.0",
-        "use-latest-callback": "^0.1.5"
+        "use-latest-callback": "^0.1.7"
       }
     },
     "@react-navigation/devtools": {
@@ -58929,20 +58929,20 @@
       }
     },
     "@react-navigation/native": {
-      "version": "6.1.6",
-      "resolved": "https://registry.npmjs.org/@react-navigation/native/-/native-6.1.6.tgz",
-      "integrity": "sha512-14PmSy4JR8HHEk04QkxQ0ZLuqtiQfb4BV9kkMXD2/jI4TZ+yc43OnO6fQ2o9wm+Bq8pY3DxyerC2AjNUz+oH7Q==",
+      "version": "6.1.8",
+      "resolved": "https://registry.npmjs.org/@react-navigation/native/-/native-6.1.8.tgz",
+      "integrity": "sha512-0alti852nV+8oCVm9H80G6kZvrHoy51+rXBvVCRUs2rNDDozC/xPZs8tyeCJkqdw3cpxZDK8ndXF22uWq28+0Q==",
       "requires": {
-        "@react-navigation/core": "^6.4.8",
+        "@react-navigation/core": "^6.4.9",
         "escape-string-regexp": "^4.0.0",
         "fast-deep-equal": "^3.1.3",
         "nanoid": "^3.1.23"
       }
     },
     "@react-navigation/routers": {
-      "version": "6.1.8",
-      "resolved": "https://registry.npmjs.org/@react-navigation/routers/-/routers-6.1.8.tgz",
-      "integrity": "sha512-CEge+ZLhb1HBrSvv4RwOol7EKLW1QoqVIQlE9TN5MpxS/+VoQvP+cLbuz0Op53/iJfYhtXRFd1ZAd3RTRqto9w==",
+      "version": "6.1.9",
+      "resolved": "https://registry.npmjs.org/@react-navigation/routers/-/routers-6.1.9.tgz",
+      "integrity": "sha512-lTM8gSFHSfkJvQkxacGM6VJtBt61ip2XO54aNfswD+KMw6eeZ4oehl7m0me3CR9hnDE4+60iAZR8sAhvCiI3NA==",
       "requires": {
         "nanoid": "^3.1.23"
       }
@@ -89248,9 +89248,9 @@
       }
     },
     "use-latest-callback": {
-      "version": "0.1.6",
-      "resolved": "https://registry.npmjs.org/use-latest-callback/-/use-latest-callback-0.1.6.tgz",
-      "integrity": "sha512-VO/P91A/PmKH9bcN9a7O3duSuxe6M14ZoYXgA6a8dab8doWNdhiIHzEkX/jFeTTRBsX0Ubk6nG4q2NIjNsj+bg==",
+      "version": "0.1.9",
+      "resolved": "https://registry.npmjs.org/use-latest-callback/-/use-latest-callback-0.1.9.tgz",
+      "integrity": "sha512-CL/29uS74AwreI/f2oz2hLTW7ZqVeV5+gxFeGudzQrgkCytrHw33G4KbnQOrRlAEzzAFXi7dDLMC9zhWcVpzmw==",
       "requires": {}
     },
     "use-memo-one": {
diff --git a/package.json b/package.json
index a674c6f840c3..94d134bf20c8 100644
--- a/package.json
+++ b/package.json
@@ -83,7 +83,7 @@
     "@react-native-google-signin/google-signin": "^10.0.1",
     "@react-native-picker/picker": "^2.4.3",
     "@react-navigation/material-top-tabs": "^6.6.3",
-    "@react-navigation/native": "6.1.6",
+    "@react-navigation/native": "6.1.8",
     "@react-navigation/stack": "6.3.16",
     "@react-ng/bounds-observer": "^0.2.1",
     "@rnmapbox/maps": "^10.0.11",

From 228b349c224b4f288d87f7c1fcda72ae2c7bba21 Mon Sep 17 00:00:00 2001
From: Someshwar Tripathi <someshwartripathi8@gmail.com>
Date: Wed, 29 Nov 2023 22:12:35 +0530
Subject: [PATCH 013/102] Seperate closing logic for Popover and Confirm Modal

---
 .../settings/Wallet/WalletPage/WalletPage.js  | 38 +++++++++----------
 1 file changed, 18 insertions(+), 20 deletions(-)

diff --git a/src/pages/settings/Wallet/WalletPage/WalletPage.js b/src/pages/settings/Wallet/WalletPage/WalletPage.js
index 981331559333..a5b20f30946e 100644
--- a/src/pages/settings/Wallet/WalletPage/WalletPage.js
+++ b/src/pages/settings/Wallet/WalletPage/WalletPage.js
@@ -1,6 +1,6 @@
 import lodashGet from 'lodash/get';
 import React, {useCallback, useEffect, useRef, useState} from 'react';
-import {ActivityIndicator, InteractionManager, ScrollView, View} from 'react-native';
+import {ActivityIndicator, ScrollView, View} from 'react-native';
 import {withOnyx} from 'react-native-onyx';
 import _ from 'underscore';
 import AddPaymentMethodMenu from '@components/AddPaymentMethodMenu';
@@ -215,10 +215,7 @@ function WalletPage({bankAccountList, cardList, fundList, isLoadingPaymentMethod
      */
     const hideDefaultDeleteMenu = useCallback(() => {
         setShouldShowDefaultDeleteMenu(false);
-        InteractionManager.runAfterInteractions(() => {
-            setShowConfirmDeleteModal(false);
-        });
-    }, [setShouldShowDefaultDeleteMenu, setShowConfirmDeleteModal]);
+    }, [setShouldShowDefaultDeleteMenu]);
 
     const makeDefaultPaymentMethod = useCallback(() => {
         const paymentCardList = fundList || {};
@@ -510,6 +507,7 @@ function WalletPage({bankAccountList, cardList, fundList, isLoadingPaymentMethod
                             )}
                             <Button
                                 onPress={() => {
+                                    setShouldShowDefaultDeleteMenu(false);
                                     setShowConfirmDeleteModal(true);
                                 }}
                                 style={[shouldShowMakeDefaultButton ? styles.mt4 : {}]}
@@ -517,24 +515,24 @@ function WalletPage({bankAccountList, cardList, fundList, isLoadingPaymentMethod
                                 danger
                             />
                         </View>
-                        <ConfirmModal
-                            isVisible={showConfirmDeleteModal}
-                            onConfirm={() => {
-                                deletePaymentMethod();
-                                hideDefaultDeleteMenu();
-                            }}
-                            onCancel={hideDefaultDeleteMenu}
-                            title={translate('walletPage.deleteAccount')}
-                            prompt={translate('walletPage.deleteConfirmation')}
-                            confirmText={translate('common.delete')}
-                            cancelText={translate('common.cancel')}
-                            shouldShowCancelButton
-                            danger
-                            onModalHide={resetSelectedPaymentMethodData}
-                        />
                     </Popover>
                 </ScreenWrapper>
             )}
+            <ConfirmModal
+                isVisible={showConfirmDeleteModal}
+                onConfirm={() => {
+                    deletePaymentMethod();
+                    setShowConfirmDeleteModal(false);
+                }}
+                onCancel={() => setShowConfirmDeleteModal(false)}
+                title={translate('walletPage.deleteAccount')}
+                prompt={translate('walletPage.deleteConfirmation')}
+                confirmText={translate('common.delete')}
+                cancelText={translate('common.cancel')}
+                shouldShowCancelButton
+                danger
+                onModalHide={resetSelectedPaymentMethodData}
+            />
             <AddPaymentMethodMenu
                 isVisible={shouldShowAddPaymentMenu}
                 onClose={hideAddPaymentMenu}

From 0ea03d27b39c2174ca1b4623a5ad3a78daee4d0a Mon Sep 17 00:00:00 2001
From: dukenv0307 <dukenv0307@gmail.com>
Date: Thu, 30 Nov 2023 17:13:18 +0700
Subject: [PATCH 014/102] add new patch

---
 ...h => @react-navigation+native+6.1.8.patch} | 113 ++++++------------
 1 file changed, 36 insertions(+), 77 deletions(-)
 rename patches/{@react-navigation+native+6.1.6.patch => @react-navigation+native+6.1.8.patch} (77%)

diff --git a/patches/@react-navigation+native+6.1.6.patch b/patches/@react-navigation+native+6.1.8.patch
similarity index 77%
rename from patches/@react-navigation+native+6.1.6.patch
rename to patches/@react-navigation+native+6.1.8.patch
index eb933683c850..a7ebe704f8d0 100644
--- a/patches/@react-navigation+native+6.1.6.patch
+++ b/patches/@react-navigation+native+6.1.8.patch
@@ -1,14 +1,15 @@
 diff --git a/node_modules/@react-navigation/native/lib/module/createMemoryHistory.js b/node_modules/@react-navigation/native/lib/module/createMemoryHistory.js
-index 16fdbef..bc2c96a 100644
+index 16fdbef..7cc5da8 100644
 --- a/node_modules/@react-navigation/native/lib/module/createMemoryHistory.js
 +++ b/node_modules/@react-navigation/native/lib/module/createMemoryHistory.js
-@@ -1,8 +1,23 @@
+@@ -1,8 +1,25 @@
  import { nanoid } from 'nanoid/non-secure';
 +import { findFocusedRouteKey } from './findFocusedRouteKey';
++
  export default function createMemoryHistory() {
    let index = 0;
    let items = [];
--
+ 
 +  const log = () => {
 +    console.log(JSON.stringify({
 +      index,
@@ -27,7 +28,7 @@ index 16fdbef..bc2c96a 100644
    // Pending callbacks for `history.go(n)`
    // We might modify the callback stored if it was interrupted, so we have a ref to identify it
    const pending = [];
-@@ -16,6 +31,9 @@ export default function createMemoryHistory() {
+@@ -16,6 +33,9 @@ export default function createMemoryHistory() {
      });
    };
    const history = {
@@ -37,7 +38,7 @@ index 16fdbef..bc2c96a 100644
      get index() {
        var _window$history$state;
        // We store an id in the state instead of an index
-@@ -32,12 +50,13 @@ export default function createMemoryHistory() {
+@@ -32,12 +52,13 @@ export default function createMemoryHistory() {
      },
      backIndex(_ref) {
        let {
@@ -53,26 +54,22 @@ index 16fdbef..bc2c96a 100644
            return i;
          }
        }
-@@ -68,7 +87,9 @@ export default function createMemoryHistory() {
+@@ -68,6 +89,7 @@ export default function createMemoryHistory() {
        window.history.pushState({
          id
        }, '', path);
 +      // log();
      },
-+
      replace(_ref3) {
        var _window$history$state2;
-       let {
-@@ -108,7 +129,9 @@ export default function createMemoryHistory() {
+@@ -108,6 +130,7 @@ export default function createMemoryHistory() {
        window.history.replaceState({
          id
        }, '', pathWithHash);
 +      // log();
      },
-+
      // `history.go(n)` is asynchronous, there are couple of things to keep in mind:
      // - it won't do anything if we can't go `n` steps, the `popstate` event won't fire.
-     // - each `history.go(n)` call will trigger a separate `popstate` event with correct location.
 @@ -175,20 +198,17 @@ export default function createMemoryHistory() {
          // But on Firefox, it seems to take much longer, around 50ms from our testing
          // We're using a hacky timeout since there doesn't seem to be way to know for sure
@@ -100,13 +97,14 @@ index 16fdbef..bc2c96a 100644
            const last = pending.pop();
            window.removeEventListener('popstate', onPopState);
            last === null || last === void 0 ? void 0 : last.cb();
-@@ -202,12 +222,17 @@ export default function createMemoryHistory() {
+@@ -201,13 +221,18 @@ export default function createMemoryHistory() {
+     // If we call `history.go(n)` ourselves, we don't want it to trigger the listener
      // Here we normalize it so that only external changes (e.g. user pressing back/forward) trigger the listener
      listen(listener) {
++      // Fix createMemoryHistory.index variable's value
++      // as it may go out of sync when navigating in the browser.
++      index = this.index;
        const onPopState = () => {
-+        // Fix createMemoryHistory.index variable's value
-+        // as it may go out of sync when navigating in the browser.
-+        index = this.index;
          if (pending.length) {
            // This was triggered by `history.go(n)`, we shouldn't call the listener
            return;
@@ -114,7 +112,7 @@ index 16fdbef..bc2c96a 100644
          listener();
 +        // log();
        };
-+
++      
        window.addEventListener('popstate', onPopState);
        return () => window.removeEventListener('popstate', onPopState);
      }
@@ -133,7 +131,7 @@ index 0000000..16da117
 +//# sourceMappingURL=findFocusedRouteKey.js.map
 \ No newline at end of file
 diff --git a/node_modules/@react-navigation/native/lib/module/useLinking.js b/node_modules/@react-navigation/native/lib/module/useLinking.js
-index 5bf2a88..a4318ef 100644
+index 6f0ac51..42f1c31 100644
 --- a/node_modules/@react-navigation/native/lib/module/useLinking.js
 +++ b/node_modules/@react-navigation/native/lib/module/useLinking.js
 @@ -2,6 +2,7 @@ import { findFocusedRoute, getActionFromState as getActionFromStateDefault, getP
@@ -144,37 +142,7 @@ index 5bf2a88..a4318ef 100644
  import ServerContext from './ServerContext';
  /**
   * Find the matching navigation state that changed between 2 navigation states
-@@ -34,32 +35,52 @@ const findMatchingState = (a, b) => {
- /**
-  * Run async function in series as it's called.
-  */
--const series = cb => {
--  // Whether we're currently handling a callback
--  let handling = false;
--  let queue = [];
--  const callback = async () => {
--    try {
--      if (handling) {
--        // If we're currently handling a previous event, wait before handling this one
--        // Add the callback to the beginning of the queue
--        queue.unshift(callback);
--        return;
--      }
--      handling = true;
--      await cb();
--    } finally {
--      handling = false;
--      if (queue.length) {
--        // If we have queued items, handle the last one
--        const last = queue.pop();
--        last === null || last === void 0 ? void 0 : last();
--      }
--    }
-+const series = (cb) => {
-+  let queue = Promise.resolve();
-+  const callback = () => {
-+    queue = queue.then(cb);
-   };
+@@ -42,6 +43,44 @@ export const series = cb => {
    return callback;
  };
  let linkingHandlers = [];
@@ -219,17 +187,17 @@ index 5bf2a88..a4318ef 100644
  export default function useLinking(ref, _ref) {
    let {
      independent,
-@@ -251,6 +272,9 @@ export default function useLinking(ref, _ref) {
+@@ -231,6 +270,9 @@ export default function useLinking(ref, _ref) {
        // Otherwise it's likely a change triggered by `popstate`
        path !== pendingPath) {
          const historyDelta = (focusedState.history ? focusedState.history.length : focusedState.routes.length) - (previousFocusedState.history ? previousFocusedState.history.length : previousFocusedState.routes.length);
-+
++        
 +        // The historyDelta and historyDeltaByKeys may differ if the new state has an entry that didn't exist in previous state
 +        const historyDeltaByKeys = getHistoryDeltaByKeys(focusedState, previousFocusedState);
          if (historyDelta > 0) {
            // If history length is increased, we should pushState
            // Note that path might not actually change here, for example, drawer open should pushState
-@@ -262,34 +286,55 @@ export default function useLinking(ref, _ref) {
+@@ -242,25 +284,52 @@ export default function useLinking(ref, _ref) {
            // If history length is decreased, i.e. entries were removed, we want to go back
  
            const nextIndex = history.backIndex({
@@ -264,36 +232,27 @@ index 5bf2a88..a4318ef 100644
 +                });
 +              }
              }
--
--            // Store the updated state as well as fix the path if incorrect
+ 
+             // Store the updated state as well as fix the path if incorrect
 -            history.replace({
 -              path,
 -              state
 -            });
++            // and remove any entries from history which focued route no longer exists in state
++            // That may happen if we replace a whole navigator.
++            const staleHistoryDiff = getStaleHistoryDiff(history.items.slice(0, history.index + 1), state);
++            if (staleHistoryDiff <= 0) {
++              history.replace({
++                path,
++                state
++              });
++            } else {
++              await history.go(-staleHistoryDiff);
++              history.push({
++                path,
++                state
++              });
++            }
            } catch (e) {
              // The navigation was interrupted
            }
-         } else {
-           // If history length is unchanged, we want to replaceState
--          history.replace({
--            path,
--            state
--          });
-+          // and remove any entries from history which focued route no longer exists in state
-+          // That may happen if we replace a whole navigator.
-+          const staleHistoryDiff = getStaleHistoryDiff(history.items.slice(0, history.index + 1), state);
-+          if (staleHistoryDiff <= 0) {
-+            history.replace({
-+              path,
-+              state
-+            });
-+          } else {
-+            await history.go(-staleHistoryDiff);
-+            history.push({
-+              path,
-+              state
-+            });
-+          }
-         }
-       } else {
-         // If no common navigation state was found, assume it's a replace

From 1aa5fe09474d56c570c7767f71bc05d606e54a0a Mon Sep 17 00:00:00 2001
From: Someshwar Tripathi <someshwartripathi8@gmail.com>
Date: Mon, 4 Dec 2023 19:26:15 +0530
Subject: [PATCH 015/102] Speed up Modal Visibility Time

We use a check to hide the delete menu View when the Confirm Modal is visible.
---
 .../settings/Wallet/WalletPage/WalletPage.js  | 87 ++++++++++---------
 1 file changed, 46 insertions(+), 41 deletions(-)

diff --git a/src/pages/settings/Wallet/WalletPage/WalletPage.js b/src/pages/settings/Wallet/WalletPage/WalletPage.js
index a5b20f30946e..659b7b2c9d9c 100644
--- a/src/pages/settings/Wallet/WalletPage/WalletPage.js
+++ b/src/pages/settings/Wallet/WalletPage/WalletPage.js
@@ -215,7 +215,8 @@ function WalletPage({bankAccountList, cardList, fundList, isLoadingPaymentMethod
      */
     const hideDefaultDeleteMenu = useCallback(() => {
         setShouldShowDefaultDeleteMenu(false);
-    }, [setShouldShowDefaultDeleteMenu]);
+        setShowConfirmDeleteModal(false);
+    }, [setShouldShowDefaultDeleteMenu, setShowConfirmDeleteModal]);
 
     const makeDefaultPaymentMethod = useCallback(() => {
         const paymentCardList = fundList || {};
@@ -483,56 +484,60 @@ function WalletPage({bankAccountList, cardList, fundList, isLoadingPaymentMethod
                             top: anchorPosition.anchorPositionTop,
                             right: anchorPosition.anchorPositionRight,
                         }}
-                        withoutOverlay
                         anchorRef={paymentMethodButtonRef}
                     >
-                        <View style={[styles.m5, !isSmallScreenWidth ? styles.sidebarPopover : '']}>
-                            {isPopoverBottomMount && (
-                                <MenuItem
-                                    title={paymentMethod.formattedSelectedPaymentMethod.title || ''}
-                                    icon={paymentMethod.formattedSelectedPaymentMethod.icon}
-                                    description={paymentMethod.formattedSelectedPaymentMethod.description}
-                                    wrapperStyle={[styles.pv0, styles.ph0, styles.mb4]}
-                                    interactive={false}
-                                />
-                            )}
-                            {shouldShowMakeDefaultButton && (
+                        {!showConfirmDeleteModal && (
+                            <View style={[styles.m5, !isSmallScreenWidth ? styles.sidebarPopover : '']}>
+                                {isPopoverBottomMount && (
+                                    <MenuItem
+                                        title={paymentMethod.formattedSelectedPaymentMethod.title || ''}
+                                        icon={paymentMethod.formattedSelectedPaymentMethod.icon}
+                                        description={paymentMethod.formattedSelectedPaymentMethod.description}
+                                        wrapperStyle={[styles.pv0, styles.ph0, styles.mb4]}
+                                        interactive={false}
+                                    />
+                                )}
+                                {shouldShowMakeDefaultButton && (
+                                    <Button
+                                        onPress={() => {
+                                            makeDefaultPaymentMethod();
+                                            setShouldShowDefaultDeleteMenu(false);
+                                        }}
+                                        text={translate('walletPage.setDefaultConfirmation')}
+                                    />
+                                )}
                                 <Button
                                     onPress={() => {
-                                        makeDefaultPaymentMethod();
                                         setShouldShowDefaultDeleteMenu(false);
+                                        setShowConfirmDeleteModal(true);
                                     }}
-                                    text={translate('walletPage.setDefaultConfirmation')}
+                                    style={[shouldShowMakeDefaultButton ? styles.mt4 : {}]}
+                                    text={translate('common.delete')}
+                                    danger
                                 />
-                            )}
-                            <Button
-                                onPress={() => {
-                                    setShouldShowDefaultDeleteMenu(false);
-                                    setShowConfirmDeleteModal(true);
-                                }}
-                                style={[shouldShowMakeDefaultButton ? styles.mt4 : {}]}
-                                text={translate('common.delete')}
-                                danger
-                            />
-                        </View>
+                            </View>
+                        )}
+                        <ConfirmModal
+                            isVisible={showConfirmDeleteModal}
+                            onConfirm={() => {
+                                deletePaymentMethod();
+                                hideDefaultDeleteMenu();
+                            }}
+                            onCancel={hideDefaultDeleteMenu}
+                            title={translate('walletPage.deleteAccount')}
+                            prompt={translate('walletPage.deleteConfirmation')}
+                            confirmText={translate('common.delete')}
+                            cancelText={translate('common.cancel')}
+                            shouldShowCancelButton
+                            danger
+                            onModalHide={() => {
+                                hideDefaultDeleteMenu();
+                                resetSelectedPaymentMethodData();
+                            }}
+                        />
                     </Popover>
                 </ScreenWrapper>
             )}
-            <ConfirmModal
-                isVisible={showConfirmDeleteModal}
-                onConfirm={() => {
-                    deletePaymentMethod();
-                    setShowConfirmDeleteModal(false);
-                }}
-                onCancel={() => setShowConfirmDeleteModal(false)}
-                title={translate('walletPage.deleteAccount')}
-                prompt={translate('walletPage.deleteConfirmation')}
-                confirmText={translate('common.delete')}
-                cancelText={translate('common.cancel')}
-                shouldShowCancelButton
-                danger
-                onModalHide={resetSelectedPaymentMethodData}
-            />
             <AddPaymentMethodMenu
                 isVisible={shouldShowAddPaymentMenu}
                 onClose={hideAddPaymentMenu}

From de41c2e7c41ef1b823796ebe2ec5da4a33416da4 Mon Sep 17 00:00:00 2001
From: Someshwar Tripathi <someshwartripathi8@gmail.com>
Date: Mon, 4 Dec 2023 19:39:05 +0530
Subject: [PATCH 016/102] Fix Button onPress action

---
 src/pages/settings/Wallet/WalletPage/WalletPage.js | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/src/pages/settings/Wallet/WalletPage/WalletPage.js b/src/pages/settings/Wallet/WalletPage/WalletPage.js
index 659b7b2c9d9c..912392531cef 100644
--- a/src/pages/settings/Wallet/WalletPage/WalletPage.js
+++ b/src/pages/settings/Wallet/WalletPage/WalletPage.js
@@ -507,10 +507,7 @@ function WalletPage({bankAccountList, cardList, fundList, isLoadingPaymentMethod
                                     />
                                 )}
                                 <Button
-                                    onPress={() => {
-                                        setShouldShowDefaultDeleteMenu(false);
-                                        setShowConfirmDeleteModal(true);
-                                    }}
+                                    onPress={() => setShowConfirmDeleteModal(true)}
                                     style={[shouldShowMakeDefaultButton ? styles.mt4 : {}]}
                                     text={translate('common.delete')}
                                     danger

From 504eed2b74182dfd805b903d27152671db499381 Mon Sep 17 00:00:00 2001
From: Dylan <dylandylan9112@gmail.com>
Date: Tue, 5 Dec 2023 12:40:18 +0700
Subject: [PATCH 017/102] update recently used tag and categoy when editing
 request

---
 src/libs/actions/IOU.js | 54 +++++++++++++++++++++++++++++++++++------
 1 file changed, 46 insertions(+), 8 deletions(-)

diff --git a/src/libs/actions/IOU.js b/src/libs/actions/IOU.js
index ed43569c360a..8a387c23e661 100644
--- a/src/libs/actions/IOU.js
+++ b/src/libs/actions/IOU.js
@@ -752,6 +752,30 @@ function editDistanceMoneyRequest(transactionID, transactionThreadReportID, tran
         },
     });
 
+    // Update recently used categories if the category is changed
+    if (_.has(transactionChanges, 'category')) {
+        const optimisticPolicyRecentlyUsedCategories = Policy.buildOptimisticPolicyRecentlyUsedCategories(iouReport.policyID, transactionChanges.category);
+        if (!_.isEmpty(optimisticPolicyRecentlyUsedCategories)) {
+            optimisticData.push({
+                onyxMethod: Onyx.METHOD.SET,
+                key: `${ONYXKEYS.COLLECTION.POLICY_RECENTLY_USED_CATEGORIES}${iouReport.policyID}`,
+                value: optimisticPolicyRecentlyUsedCategories,
+            });
+        }
+    }
+
+    // Update recently used categories if the tag is changed
+    if (_.has(transactionChanges, 'tag')) {
+        const optimisticPolicyRecentlyUsedTags = Policy.buildOptimisticPolicyRecentlyUsedTags(iouReport.policyID, tag);
+        if (!_.isEmpty(optimisticPolicyRecentlyUsedTags)) {
+            optimisticData.push({
+                onyxMethod: Onyx.METHOD.MERGE,
+                key: `${ONYXKEYS.COLLECTION.POLICY_RECENTLY_USED_TAGS}${iouReport.policyID}`,
+                value: optimisticPolicyRecentlyUsedTags,
+            });
+        }
+    }
+
     // Clear out the error fields and loading states on success
     successData.push({
         onyxMethod: Onyx.METHOD.MERGE,
@@ -1809,8 +1833,6 @@ function editRegularMoneyRequest(transactionID, transactionThreadReportID, trans
         updatedChatReport.lastMessageHtml = messageText;
     }
 
-    const optimisticPolicyRecentlyUsedTags = Policy.buildOptimisticPolicyRecentlyUsedTags(iouReport.policyID, transactionChanges.tag);
-
     const isScanning = TransactionUtils.hasReceipt(updatedTransaction) && TransactionUtils.isReceiptBeingScanned(updatedTransaction);
 
     // STEP 4: Compose the optimistic data
@@ -1870,12 +1892,28 @@ function editRegularMoneyRequest(transactionID, transactionThreadReportID, trans
             : []),
     ];
 
-    if (!_.isEmpty(optimisticPolicyRecentlyUsedTags)) {
-        optimisticData.push({
-            onyxMethod: Onyx.METHOD.MERGE,
-            key: `${ONYXKEYS.COLLECTION.POLICY_RECENTLY_USED_TAGS}${iouReport.policyID}`,
-            value: optimisticPolicyRecentlyUsedTags,
-        });
+    // Update recently used categories if the category is changed
+    if (_.has(transactionChanges, 'category')) {
+        const optimisticPolicyRecentlyUsedCategories = Policy.buildOptimisticPolicyRecentlyUsedCategories(iouReport.policyID, transactionChanges.category);
+        if (!_.isEmpty(optimisticPolicyRecentlyUsedCategories)) {
+            optimisticData.push({
+                onyxMethod: Onyx.METHOD.SET,
+                key: `${ONYXKEYS.COLLECTION.POLICY_RECENTLY_USED_CATEGORIES}${iouReport.policyID}`,
+                value: optimisticPolicyRecentlyUsedCategories,
+            });
+        }
+    }
+
+    // Update recently used categories if the tag is changed
+    if (_.has(transactionChanges, 'tag')) {
+        const optimisticPolicyRecentlyUsedTags = Policy.buildOptimisticPolicyRecentlyUsedTags(iouReport.policyID, tag);
+        if (!_.isEmpty(optimisticPolicyRecentlyUsedTags)) {
+            optimisticData.push({
+                onyxMethod: Onyx.METHOD.MERGE,
+                key: `${ONYXKEYS.COLLECTION.POLICY_RECENTLY_USED_TAGS}${iouReport.policyID}`,
+                value: optimisticPolicyRecentlyUsedTags,
+            });
+        }
     }
 
     const successData = [

From 5910285a87b82e1779cfae69aa58262e56adbc1e Mon Sep 17 00:00:00 2001
From: Dylan <dylandylan9112@gmail.com>
Date: Tue, 5 Dec 2023 13:08:52 +0700
Subject: [PATCH 018/102] fix lint

---
 src/libs/actions/IOU.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/libs/actions/IOU.js b/src/libs/actions/IOU.js
index 8a387c23e661..95ab37e5d9e4 100644
--- a/src/libs/actions/IOU.js
+++ b/src/libs/actions/IOU.js
@@ -766,7 +766,7 @@ function editDistanceMoneyRequest(transactionID, transactionThreadReportID, tran
 
     // Update recently used categories if the tag is changed
     if (_.has(transactionChanges, 'tag')) {
-        const optimisticPolicyRecentlyUsedTags = Policy.buildOptimisticPolicyRecentlyUsedTags(iouReport.policyID, tag);
+        const optimisticPolicyRecentlyUsedTags = Policy.buildOptimisticPolicyRecentlyUsedTags(iouReport.policyID, transactionChanges.tag);
         if (!_.isEmpty(optimisticPolicyRecentlyUsedTags)) {
             optimisticData.push({
                 onyxMethod: Onyx.METHOD.MERGE,
@@ -1906,7 +1906,7 @@ function editRegularMoneyRequest(transactionID, transactionThreadReportID, trans
 
     // Update recently used categories if the tag is changed
     if (_.has(transactionChanges, 'tag')) {
-        const optimisticPolicyRecentlyUsedTags = Policy.buildOptimisticPolicyRecentlyUsedTags(iouReport.policyID, tag);
+        const optimisticPolicyRecentlyUsedTags = Policy.buildOptimisticPolicyRecentlyUsedTags(iouReport.policyID, transactionChanges.tag);
         if (!_.isEmpty(optimisticPolicyRecentlyUsedTags)) {
             optimisticData.push({
                 onyxMethod: Onyx.METHOD.MERGE,

From e6ec283a0e0f05de6cb106209c33b02c89aebcac Mon Sep 17 00:00:00 2001
From: s-alves10 <sangar.work1028@gmail.com>
Date: Tue, 5 Dec 2023 06:23:16 -0600
Subject: [PATCH 019/102] fix: hide pending deleted actions

---
 src/libs/ReportActionsUtils.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/libs/ReportActionsUtils.ts b/src/libs/ReportActionsUtils.ts
index f58021e17064..af3402716654 100644
--- a/src/libs/ReportActionsUtils.ts
+++ b/src/libs/ReportActionsUtils.ts
@@ -341,7 +341,7 @@ function shouldReportActionBeVisible(reportAction: OnyxEntry<ReportAction>, key:
 
     // All other actions are displayed except thread parents, deleted, or non-pending actions
     const isDeleted = isDeletedAction(reportAction);
-    const isPending = !!reportAction.pendingAction;
+    const isPending = !!reportAction.pendingAction && !(!isNetworkOffline && reportAction.pendingAction === CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE);
     return !isDeleted || isPending || isDeletedParentAction(reportAction) || isReversedTransaction(reportAction);
 }
 

From e111654988b1f3848a779b40228614495fc04775 Mon Sep 17 00:00:00 2001
From: s-alves10 <sangar.work1028@gmail.com>
Date: Tue, 5 Dec 2023 07:07:24 -0600
Subject: [PATCH 020/102] fix: update test case - we're hiding pending deleted
 ccomments in online mode

---
 tests/unit/ReportActionsUtilsTest.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/tests/unit/ReportActionsUtilsTest.js b/tests/unit/ReportActionsUtilsTest.js
index 9973515c44de..b9a3fc31d809 100644
--- a/tests/unit/ReportActionsUtilsTest.js
+++ b/tests/unit/ReportActionsUtilsTest.js
@@ -227,7 +227,7 @@ describe('ReportActionsUtils', () => {
             expect(result).toStrictEqual(input);
         });
 
-        it('should filter out deleted, non-pending comments', () => {
+        it('should filter out deleted and delete-pending comments', () => {
             const input = [
                 {
                     created: '2022-11-13 22:27:01.825',
@@ -251,6 +251,7 @@ describe('ReportActionsUtils', () => {
             ];
             const result = ReportActionsUtils.getSortedReportActionsForDisplay(input);
             input.pop();
+            input.pop();
             expect(result).toStrictEqual(input);
         });
     });

From 4f5e3062e65bb4d50c9e1abdf7666bb6f0d02dab Mon Sep 17 00:00:00 2001
From: Jakub Szymczak <szymczak.jakub12@gmail.com>
Date: Tue, 5 Dec 2023 15:22:00 +0100
Subject: [PATCH 021/102] migrate HeaderGap to TS

---
 src/components/HeaderGap/index.desktop.js  | 25 ----------------------
 src/components/HeaderGap/index.desktop.tsx | 15 +++++++++++++
 2 files changed, 15 insertions(+), 25 deletions(-)
 delete mode 100644 src/components/HeaderGap/index.desktop.js
 create mode 100644 src/components/HeaderGap/index.desktop.tsx

diff --git a/src/components/HeaderGap/index.desktop.js b/src/components/HeaderGap/index.desktop.js
deleted file mode 100644
index 07ea1ea6f48d..000000000000
--- a/src/components/HeaderGap/index.desktop.js
+++ /dev/null
@@ -1,25 +0,0 @@
-import PropTypes from 'prop-types';
-import React, {memo} from 'react';
-import {View} from 'react-native';
-import withThemeStyles, {withThemeStylesPropTypes} from '@components/withThemeStyles';
-import compose from '@libs/compose';
-
-const propTypes = {
-    /** Styles to apply to the HeaderGap */
-    // eslint-disable-next-line react/forbid-prop-types
-    styles: PropTypes.arrayOf(PropTypes.object),
-    ...withThemeStylesPropTypes,
-};
-
-const defaultProps = {
-    styles: [],
-};
-
-function HeaderGap(props) {
-    return <View style={[props.themeStyles.headerGap, ...props.styles]} />;
-}
-
-HeaderGap.displayName = 'HeaderGap';
-HeaderGap.propTypes = propTypes;
-HeaderGap.defaultProps = defaultProps;
-export default compose(memo, withThemeStyles)(HeaderGap);
diff --git a/src/components/HeaderGap/index.desktop.tsx b/src/components/HeaderGap/index.desktop.tsx
new file mode 100644
index 000000000000..5b02d3cf1fbc
--- /dev/null
+++ b/src/components/HeaderGap/index.desktop.tsx
@@ -0,0 +1,15 @@
+import React, {memo} from 'react';
+import {StyleProp, View, ViewStyle} from 'react-native';
+import useThemeStyles from '@styles/useThemeStyles';
+
+type HeaderGapProps = {
+    style: StyleProp<ViewStyle>;
+};
+
+function HeaderGap({style}: HeaderGapProps) {
+    const themeStyles = useThemeStyles();
+    return <View style={[themeStyles.headerGap, style]} />;
+}
+
+HeaderGap.displayName = 'HeaderGap';
+export default memo(HeaderGap);

From 34bf1da893c07a75c82c79cf5060d99d2026b27d Mon Sep 17 00:00:00 2001
From: Someshwar Tripathi <someshwartripathi8@gmail.com>
Date: Wed, 6 Dec 2023 00:47:22 +0530
Subject: [PATCH 022/102] Remove redundant state change.

This removes the redundant call to hide DefaultDeleteMenu from Confirm Modal's onModalHide prop.
---
 src/pages/settings/Wallet/WalletPage/WalletPage.js | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/src/pages/settings/Wallet/WalletPage/WalletPage.js b/src/pages/settings/Wallet/WalletPage/WalletPage.js
index 912392531cef..941d74799170 100644
--- a/src/pages/settings/Wallet/WalletPage/WalletPage.js
+++ b/src/pages/settings/Wallet/WalletPage/WalletPage.js
@@ -527,10 +527,7 @@ function WalletPage({bankAccountList, cardList, fundList, isLoadingPaymentMethod
                             cancelText={translate('common.cancel')}
                             shouldShowCancelButton
                             danger
-                            onModalHide={() => {
-                                hideDefaultDeleteMenu();
-                                resetSelectedPaymentMethodData();
-                            }}
+                            onModalHide={resetSelectedPaymentMethodData}
                         />
                     </Popover>
                 </ScreenWrapper>

From e311ced6b81fa25b998b5ebcceba76602d46fb40 Mon Sep 17 00:00:00 2001
From: Jakub Szymczak <szymczak.jakub12@gmail.com>
Date: Wed, 6 Dec 2023 15:23:04 +0100
Subject: [PATCH 023/102] fix PR comments

---
 src/components/HeaderGap/index.desktop.tsx       | 12 +++++-------
 src/components/HeaderGap/{index.js => index.tsx} |  0
 src/components/HeaderGap/types.ts                |  7 +++++++
 3 files changed, 12 insertions(+), 7 deletions(-)
 rename src/components/HeaderGap/{index.js => index.tsx} (100%)
 create mode 100644 src/components/HeaderGap/types.ts

diff --git a/src/components/HeaderGap/index.desktop.tsx b/src/components/HeaderGap/index.desktop.tsx
index 5b02d3cf1fbc..84f42142942e 100644
--- a/src/components/HeaderGap/index.desktop.tsx
+++ b/src/components/HeaderGap/index.desktop.tsx
@@ -1,15 +1,13 @@
 import React, {memo} from 'react';
-import {StyleProp, View, ViewStyle} from 'react-native';
+import {View} from 'react-native';
 import useThemeStyles from '@styles/useThemeStyles';
+import HeaderGapProps from './types';
 
-type HeaderGapProps = {
-    style: StyleProp<ViewStyle>;
-};
-
-function HeaderGap({style}: HeaderGapProps) {
+function HeaderGap({styles}: HeaderGapProps) {
     const themeStyles = useThemeStyles();
-    return <View style={[themeStyles.headerGap, style]} />;
+    return <View style={[themeStyles.headerGap, styles]} />;
 }
 
 HeaderGap.displayName = 'HeaderGap';
+
 export default memo(HeaderGap);
diff --git a/src/components/HeaderGap/index.js b/src/components/HeaderGap/index.tsx
similarity index 100%
rename from src/components/HeaderGap/index.js
rename to src/components/HeaderGap/index.tsx
diff --git a/src/components/HeaderGap/types.ts b/src/components/HeaderGap/types.ts
new file mode 100644
index 000000000000..6ed527b1c1f2
--- /dev/null
+++ b/src/components/HeaderGap/types.ts
@@ -0,0 +1,7 @@
+import {StyleProp, ViewStyle} from 'react-native';
+
+type HeaderGapProps = {
+    styles?: StyleProp<ViewStyle>;
+};
+
+export default HeaderGapProps;

From 3090827577612c1cf60e6213b21c8ae6e995ee2f Mon Sep 17 00:00:00 2001
From: Christoph Pader <christoph.pader@outlook.com>
Date: Wed, 6 Dec 2023 16:46:41 +0100
Subject: [PATCH 024/102] add eslitn rule

---
 .eslintrc.js | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/.eslintrc.js b/.eslintrc.js
index b71338d0c1a5..90afddf817ad 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -19,6 +19,14 @@ const restrictedImportPaths = [
         importNames: ['useSafeAreaInsets', 'SafeAreaConsumer', 'SafeAreaInsetsContext'],
         message: "Please use 'useSafeAreaInsets' from 'src/hooks/useSafeAreaInset' and/or 'SafeAreaConsumer' from 'src/components/SafeAreaConsumer' instead.",
     },
+    {
+        name: '@styles/styles',
+        message: 'Do not import styles directly. Please use the `useThemeStyles` hook or `withThemeStyles` HOC instead.`',
+    },
+    {
+        name: '@styles/StyleUtils',
+        message: 'Do not import style utils directly. Please use the `useStyleUtils` hook or `withStyleUtils` HOC instead.`',
+    },
 ];
 
 const restrictedImportPatterns = [
@@ -26,6 +34,10 @@ const restrictedImportPatterns = [
         group: ['**/assets/animations/**/*.json'],
         message: "Do not import animations directly. Please use the 'src/components/LottieAnimations' import instead.",
     },
+    {
+        group: ['@styles/theme/themes/**/*'],
+        message: 'Do not import theme colors directly. Please use the `useTheme` hook or `withTheme` HOC instead.`',
+    },
 ];
 
 module.exports = {

From e71544b01b453697488b758b3661058799348348 Mon Sep 17 00:00:00 2001
From: Christoph Pader <christoph.pader@outlook.com>
Date: Wed, 6 Dec 2023 16:47:14 +0100
Subject: [PATCH 025/102] rename folder and move themes

---
 src/App.js                                                    | 2 +-
 src/components/AddPlaidBankAccount.js                         | 2 +-
 src/components/AddressSearch/CurrentLocationButton.js         | 2 +-
 src/components/AddressSearch/index.js                         | 2 +-
 src/components/AttachmentModal.js                             | 2 +-
 .../Attachments/AttachmentCarousel/CarouselButtons.js         | 2 +-
 src/components/Attachments/AttachmentView/index.js            | 2 +-
 .../AutoCompleteSuggestions/BaseAutoCompleteSuggestions.tsx   | 2 +-
 src/components/Avatar.tsx                                     | 2 +-
 src/components/AvatarCropModal/AvatarCropModal.js             | 2 +-
 src/components/AvatarSkeleton.tsx                             | 2 +-
 src/components/AvatarWithDisplayName.tsx                      | 2 +-
 src/components/AvatarWithImagePicker.js                       | 2 +-
 src/components/Banner.tsx                                     | 2 +-
 src/components/BaseMiniContextMenuItem.js                     | 2 +-
 src/components/BlockingViews/BlockingView.js                  | 2 +-
 src/components/Button/index.tsx                               | 2 +-
 src/components/ButtonWithDropdownMenu.js                      | 2 +-
 src/components/Checkbox.tsx                                   | 2 +-
 src/components/ColorSchemeWrapper/index.tsx                   | 2 +-
 src/components/Composer/index.android.js                      | 2 +-
 src/components/Composer/index.ios.js                          | 2 +-
 src/components/Composer/index.js                              | 2 +-
 src/components/ConfirmedRoute.js                              | 2 +-
 src/components/ContextMenuItem.js                             | 2 +-
 .../CurrentUserPersonalDetailsSkeletonView/index.tsx          | 2 +-
 src/components/CustomStatusBar/index.tsx                      | 2 +-
 .../DeeplinkWrapper/DeeplinkRedirectLoadingIndicator.js       | 2 +-
 src/components/DistanceEReceipt.js                            | 2 +-
 src/components/DistanceRequest/DistanceRequestFooter.js       | 2 +-
 src/components/DistanceRequest/DistanceRequestRenderItem.js   | 2 +-
 src/components/DotIndicatorMessage.tsx                        | 2 +-
 src/components/EmojiPicker/CategoryShortcutButton.js          | 2 +-
 src/components/EmojiPicker/EmojiPickerButton.js               | 2 +-
 src/components/EmojiPicker/EmojiPickerButtonDropdown.js       | 2 +-
 src/components/EmojiSuggestions.tsx                           | 2 +-
 src/components/ExpensifyWordmark.tsx                          | 2 +-
 src/components/FormHelpMessage.js                             | 2 +-
 src/components/FullscreenLoadingIndicator.tsx                 | 2 +-
 src/components/GrowlNotification/index.js                     | 2 +-
 .../HTMLEngineProvider/HTMLRenderers/EditedRenderer.js        | 2 +-
 .../HTMLEngineProvider/HTMLRenderers/MentionHereRenderer.js   | 2 +-
 .../HTMLEngineProvider/HTMLRenderers/MentionUserRenderer.js   | 2 +-
 src/components/HeaderPageLayout.js                            | 2 +-
 src/components/HeaderWithBackButton/index.js                  | 2 +-
 src/components/Icon/svgs/LoungeAccessIcon.tsx                 | 2 +-
 src/components/IllustratedHeaderPageLayout.js                 | 2 +-
 src/components/Indicator.js                                   | 2 +-
 src/components/InlineSystemMessage.tsx                        | 2 +-
 src/components/LHNOptionsList/OptionRowLHN.js                 | 2 +-
 src/components/LocalePicker.tsx                               | 2 +-
 src/components/MapView/MapView.web.tsx                        | 2 +-
 src/components/MentionSuggestions.tsx                         | 2 +-
 src/components/MenuItem.js                                    | 2 +-
 src/components/Modal/BaseModal.tsx                            | 2 +-
 src/components/Modal/index.tsx                                | 2 +-
 src/components/MoneyRequestConfirmationList.js                | 2 +-
 src/components/MoneyRequestSkeletonView.tsx                   | 2 +-
 src/components/MultipleAvatars.tsx                            | 2 +-
 src/components/Onfido/BaseOnfidoWeb.js                        | 2 +-
 src/components/OptionRow.js                                   | 2 +-
 src/components/Picker/BasePicker.tsx                          | 2 +-
 src/components/PinButton.js                                   | 2 +-
 src/components/PopoverWithoutOverlay/index.js                 | 2 +-
 src/components/Pressable/PressableWithDelayToggle.tsx         | 2 +-
 src/components/QRCode.tsx                                     | 2 +-
 src/components/RadioButton.tsx                                | 2 +-
 src/components/Reactions/AddReactionBubble.js                 | 2 +-
 src/components/Reactions/EmojiReactionBubble.js               | 2 +-
 src/components/Reactions/MiniQuickEmojiReactions.js           | 2 +-
 src/components/ReportActionItem/MoneyReportView.js            | 2 +-
 src/components/ReportActionItem/MoneyRequestPreview.js        | 2 +-
 src/components/ReportActionItem/MoneyRequestView.js           | 2 +-
 src/components/ReportActionItem/ReportActionItemImages.js     | 2 +-
 src/components/ReportActionItem/ReportPreview.js              | 2 +-
 src/components/ReportActionItem/TaskPreview.js                | 2 +-
 src/components/ReportActionItem/TaskView.js                   | 2 +-
 .../ReportActionsSkeletonView/SkeletonViewLines.tsx           | 2 +-
 src/components/ReportHeaderSkeletonView.tsx                   | 2 +-
 src/components/RoomHeaderAvatars.js                           | 2 +-
 src/components/SAMLLoadingIndicator.js                        | 2 +-
 src/components/SelectCircle.tsx                               | 2 +-
 src/components/SelectionList/BaseListItem.js                  | 2 +-
 src/components/SelectionList/BaseSelectionList.js             | 2 +-
 src/components/ShowMoreButton/index.js                        | 2 +-
 src/components/SubscriptAvatar.tsx                            | 2 +-
 src/components/TabSelector/TabIcon.js                         | 2 +-
 src/components/TabSelector/TabSelector.js                     | 2 +-
 src/components/Text.tsx                                       | 2 +-
 src/components/TextInput/BaseTextInput/index.js               | 2 +-
 src/components/TextInput/BaseTextInput/index.native.js        | 2 +-
 src/components/Tooltip/TooltipRenderedOnPageBody.js           | 2 +-
 src/components/ValidateCode/ExpiredValidateCodeModal.js       | 2 +-
 src/components/ValidateCode/JustSignedInModal.js              | 2 +-
 src/components/ValidateCode/ValidateCodeModal.js              | 2 +-
 .../VideoChatButtonAndMenu/BaseVideoChatButtonAndMenu.js      | 2 +-
 src/components/withTheme.tsx                                  | 4 ++--
 src/libs/Navigation/NavigationRoot.tsx                        | 2 +-
 src/pages/ErrorPage/GenericErrorPage.js                       | 2 +-
 src/pages/LogInWithShortLivedAuthTokenPage.js                 | 2 +-
 src/pages/ReimbursementAccount/BankAccountStep.js             | 2 +-
 src/pages/TeachersUnite/SaveTheWorldPage.js                   | 2 +-
 src/pages/home/HeaderView.js                                  | 2 +-
 .../home/report/ContextMenu/BaseReportActionContextMenu.js    | 2 +-
 src/pages/home/report/FloatingMessageCounter/index.js         | 2 +-
 src/pages/home/report/LinkPreviewer.js                        | 2 +-
 .../home/report/ListBoundaryLoader/ListBoundaryLoader.js      | 2 +-
 src/pages/home/report/ReactionList/HeaderReactionList.js      | 2 +-
 .../ComposerWithSuggestions/ComposerWithSuggestions.js        | 2 +-
 src/pages/home/report/ReportActionCompose/SendButton.js       | 2 +-
 src/pages/home/report/ReportActionItem.js                     | 2 +-
 src/pages/home/report/ReportActionItemMessageEdit.js          | 2 +-
 src/pages/home/report/ReportActionItemSingle.js               | 2 +-
 src/pages/home/report/comment/TextCommentFragment.js          | 2 +-
 src/pages/home/sidebar/SidebarLinks.js                        | 2 +-
 src/pages/iou/ReceiptSelector/index.js                        | 2 +-
 src/pages/iou/ReceiptSelector/index.native.js                 | 2 +-
 src/pages/settings/InitialSettingsPage.js                     | 2 +-
 src/pages/settings/Preferences/PreferencesPage.js             | 2 +-
 .../Profile/Contacts/ValidateCodeForm/BaseValidateCodeForm.js | 2 +-
 src/pages/settings/Profile/CustomStatus/StatusPage.js         | 2 +-
 src/pages/settings/Security/SecuritySettingsPage.js           | 2 +-
 src/pages/settings/Security/TwoFactorAuth/Steps/CodesStep.js  | 2 +-
 .../settings/Security/TwoFactorAuth/Steps/EnabledStep.js      | 2 +-
 src/pages/settings/Wallet/ActivatePhysicalCardPage.js         | 2 +-
 src/pages/settings/Wallet/ExpensifyCardPage.js                | 2 +-
 src/pages/settings/Wallet/PaymentMethodList.js                | 2 +-
 src/pages/settings/Wallet/WalletEmptyState.js                 | 2 +-
 src/pages/settings/Wallet/WalletPage/WalletPage.js            | 2 +-
 src/pages/signin/SignInPage.js                                | 2 +-
 src/pages/signin/SignInPageLayout/Footer.js                   | 2 +-
 src/pages/signin/SignInPageLayout/index.js                    | 2 +-
 src/pages/signin/Socials.js                                   | 2 +-
 src/pages/signin/ValidateCodeForm/BaseValidateCodeForm.js     | 2 +-
 src/pages/workspace/WorkspacesListPage.js                     | 2 +-
 src/pages/workspace/reimburse/WorkspaceReimburseSection.js    | 2 +-
 src/stories/Composer.stories.js                               | 2 +-
 src/stories/PopoverMenu.stories.js                            | 2 +-
 src/styles/StyleUtils.ts                                      | 2 +-
 src/styles/ThemeStylesContext.ts                              | 2 +-
 src/styles/ThemeStylesProvider.tsx                            | 2 +-
 src/styles/addOutlineWidth/types.ts                           | 2 +-
 src/styles/colors.ts                                          | 2 +-
 src/styles/getModalStyles.ts                                  | 2 +-
 src/styles/getReportActionContextMenuStyles.ts                | 2 +-
 src/styles/getTooltipStyles.ts                                | 2 +-
 src/styles/illustrations/ThemeIllustrationsProvider.tsx       | 2 +-
 src/styles/styles.ts                                          | 4 ++--
 src/styles/{themes => theme}/ThemeContext.ts                  | 2 +-
 src/styles/{themes => theme}/ThemeProvider.tsx                | 0
 src/styles/{themes => theme}/Themes.ts                        | 4 ++--
 src/styles/{themes/default.ts => theme/themes/dark.ts}        | 2 +-
 src/styles/{ => theme}/themes/light.ts                        | 2 +-
 src/styles/{themes => theme}/types.ts                         | 0
 src/styles/{themes => theme}/useTheme.ts                      | 0
 src/styles/{themes => theme}/useThemePreference.ts            | 0
 .../{themes => theme}/useThemePreferenceWithStaticOverride.ts | 0
 157 files changed, 155 insertions(+), 155 deletions(-)
 rename src/styles/{themes => theme}/ThemeContext.ts (80%)
 rename src/styles/{themes => theme}/ThemeProvider.tsx (100%)
 rename src/styles/{themes => theme}/Themes.ts (77%)
 rename src/styles/{themes/default.ts => theme/themes/dark.ts} (98%)
 rename src/styles/{ => theme}/themes/light.ts (99%)
 rename src/styles/{themes => theme}/types.ts (100%)
 rename src/styles/{themes => theme}/useTheme.ts (100%)
 rename src/styles/{themes => theme}/useThemePreference.ts (100%)
 rename src/styles/{themes => theme}/useThemePreferenceWithStaticOverride.ts (100%)

diff --git a/src/App.js b/src/App.js
index e273dcce1e47..bc92b63ef2a3 100644
--- a/src/App.js
+++ b/src/App.js
@@ -27,7 +27,7 @@ import * as Session from './libs/actions/Session';
 import * as Environment from './libs/Environment/Environment';
 import {ReportAttachmentsProvider} from './pages/home/report/ReportAttachmentsContext';
 import ThemeIllustrationsProvider from './styles/illustrations/ThemeIllustrationsProvider';
-import ThemeProvider from './styles/themes/ThemeProvider';
+import ThemeProvider from './styles/theme/ThemeProvider';
 import ThemeStylesProvider from './styles/ThemeStylesProvider';
 
 // For easier debugging and development, when we are in web we expose Onyx to the window, so you can more easily set data into Onyx
diff --git a/src/components/AddPlaidBankAccount.js b/src/components/AddPlaidBankAccount.js
index 68d529c4a78d..ef5025838e6d 100644
--- a/src/components/AddPlaidBankAccount.js
+++ b/src/components/AddPlaidBankAccount.js
@@ -9,7 +9,7 @@ import useNetwork from '@hooks/useNetwork';
 import KeyboardShortcut from '@libs/KeyboardShortcut';
 import Log from '@libs/Log';
 import {plaidDataPropTypes} from '@pages/ReimbursementAccount/plaidDataPropTypes';
-import useTheme from '@styles/themes/useTheme';
+import useTheme from '@styles/theme/useTheme';
 import useThemeStyles from '@styles/useThemeStyles';
 import * as App from '@userActions/App';
 import * as BankAccounts from '@userActions/BankAccounts';
diff --git a/src/components/AddressSearch/CurrentLocationButton.js b/src/components/AddressSearch/CurrentLocationButton.js
index 6f5148edd436..23800248c9ea 100644
--- a/src/components/AddressSearch/CurrentLocationButton.js
+++ b/src/components/AddressSearch/CurrentLocationButton.js
@@ -8,7 +8,7 @@ import useLocalize from '@hooks/useLocalize';
 import getButtonState from '@libs/getButtonState';
 import colors from '@styles/colors';
 import * as StyleUtils from '@styles/StyleUtils';
-import useTheme from '@styles/themes/useTheme';
+import useTheme from '@styles/theme/useTheme';
 import useThemeStyles from '@styles/useThemeStyles';
 
 const propTypes = {
diff --git a/src/components/AddressSearch/index.js b/src/components/AddressSearch/index.js
index 9f16766a22ae..eb130d85913f 100644
--- a/src/components/AddressSearch/index.js
+++ b/src/components/AddressSearch/index.js
@@ -15,7 +15,7 @@ import compose from '@libs/compose';
 import getCurrentPosition from '@libs/getCurrentPosition';
 import * as GooglePlacesUtils from '@libs/GooglePlacesUtils';
 import * as StyleUtils from '@styles/StyleUtils';
-import useTheme from '@styles/themes/useTheme';
+import useTheme from '@styles/theme/useTheme';
 import useThemeStyles from '@styles/useThemeStyles';
 import variables from '@styles/variables';
 import CONST from '@src/CONST';
diff --git a/src/components/AttachmentModal.js b/src/components/AttachmentModal.js
index 57b0c6466a7f..ed2dfa2892de 100755
--- a/src/components/AttachmentModal.js
+++ b/src/components/AttachmentModal.js
@@ -20,7 +20,7 @@ import * as TransactionUtils from '@libs/TransactionUtils';
 import useNativeDriver from '@libs/useNativeDriver';
 import reportPropTypes from '@pages/reportPropTypes';
 import * as StyleUtils from '@styles/StyleUtils';
-import useTheme from '@styles/themes/useTheme';
+import useTheme from '@styles/theme/useTheme';
 import useThemeStyles from '@styles/useThemeStyles';
 import * as IOU from '@userActions/IOU';
 import CONST from '@src/CONST';
diff --git a/src/components/Attachments/AttachmentCarousel/CarouselButtons.js b/src/components/Attachments/AttachmentCarousel/CarouselButtons.js
index 14a6ea268468..52d175ff37fb 100644
--- a/src/components/Attachments/AttachmentCarousel/CarouselButtons.js
+++ b/src/components/Attachments/AttachmentCarousel/CarouselButtons.js
@@ -8,7 +8,7 @@ import * as Expensicons from '@components/Icon/Expensicons';
 import Tooltip from '@components/Tooltip';
 import useLocalize from '@hooks/useLocalize';
 import useWindowDimensions from '@hooks/useWindowDimensions';
-import useTheme from '@styles/themes/useTheme';
+import useTheme from '@styles/theme/useTheme';
 import useThemeStyles from '@styles/useThemeStyles';
 
 const propTypes = {
diff --git a/src/components/Attachments/AttachmentView/index.js b/src/components/Attachments/AttachmentView/index.js
index e484abe041b9..5ef6b4fccdd8 100755
--- a/src/components/Attachments/AttachmentView/index.js
+++ b/src/components/Attachments/AttachmentView/index.js
@@ -16,7 +16,7 @@ import addEncryptedAuthTokenToURL from '@libs/addEncryptedAuthTokenToURL';
 import compose from '@libs/compose';
 import * as TransactionUtils from '@libs/TransactionUtils';
 import * as StyleUtils from '@styles/StyleUtils';
-import useTheme from '@styles/themes/useTheme';
+import useTheme from '@styles/theme/useTheme';
 import useThemeStyles from '@styles/useThemeStyles';
 import cursor from '@styles/utilities/cursor';
 import variables from '@styles/variables';
diff --git a/src/components/AutoCompleteSuggestions/BaseAutoCompleteSuggestions.tsx b/src/components/AutoCompleteSuggestions/BaseAutoCompleteSuggestions.tsx
index efde2b24992f..89d420c640a0 100644
--- a/src/components/AutoCompleteSuggestions/BaseAutoCompleteSuggestions.tsx
+++ b/src/components/AutoCompleteSuggestions/BaseAutoCompleteSuggestions.tsx
@@ -6,7 +6,7 @@ import {ScrollView} from 'react-native-gesture-handler';
 import Animated, {Easing, FadeOutDown, useAnimatedStyle, useSharedValue, withTiming} from 'react-native-reanimated';
 import PressableWithFeedback from '@components/Pressable/PressableWithFeedback';
 import * as StyleUtils from '@styles/StyleUtils';
-import useTheme from '@styles/themes/useTheme';
+import useTheme from '@styles/theme/useTheme';
 import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 import viewForwardedRef from '@src/types/utils/viewForwardedRef';
diff --git a/src/components/Avatar.tsx b/src/components/Avatar.tsx
index d394a84bd207..3237fb83f2aa 100644
--- a/src/components/Avatar.tsx
+++ b/src/components/Avatar.tsx
@@ -5,7 +5,7 @@ import * as ReportUtils from '@libs/ReportUtils';
 import {AvatarSource} from '@libs/UserUtils';
 import * as StyleUtils from '@styles/StyleUtils';
 import type {AvatarSizeName} from '@styles/StyleUtils';
-import useTheme from '@styles/themes/useTheme';
+import useTheme from '@styles/theme/useTheme';
 import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 import {AvatarType} from '@src/types/onyx/OnyxCommon';
diff --git a/src/components/AvatarCropModal/AvatarCropModal.js b/src/components/AvatarCropModal/AvatarCropModal.js
index a37f228a0d0d..ca70681ccdf9 100644
--- a/src/components/AvatarCropModal/AvatarCropModal.js
+++ b/src/components/AvatarCropModal/AvatarCropModal.js
@@ -18,7 +18,7 @@ import withWindowDimensions, {windowDimensionsPropTypes} from '@components/withW
 import compose from '@libs/compose';
 import cropOrRotateImage from '@libs/cropOrRotateImage';
 import * as StyleUtils from '@styles/StyleUtils';
-import useTheme from '@styles/themes/useTheme';
+import useTheme from '@styles/theme/useTheme';
 import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 import ImageCropView from './ImageCropView';
diff --git a/src/components/AvatarSkeleton.tsx b/src/components/AvatarSkeleton.tsx
index d2706447f756..12808ee5e110 100644
--- a/src/components/AvatarSkeleton.tsx
+++ b/src/components/AvatarSkeleton.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import {Circle} from 'react-native-svg';
-import useTheme from '@styles/themes/useTheme';
+import useTheme from '@styles/theme/useTheme';
 import SkeletonViewContentLoader from './SkeletonViewContentLoader';
 
 function AvatarSkeleton() {
diff --git a/src/components/AvatarWithDisplayName.tsx b/src/components/AvatarWithDisplayName.tsx
index 9229cb80cf4c..d997759f6c7c 100644
--- a/src/components/AvatarWithDisplayName.tsx
+++ b/src/components/AvatarWithDisplayName.tsx
@@ -6,7 +6,7 @@ import Navigation from '@libs/Navigation/Navigation';
 import * as OptionsListUtils from '@libs/OptionsListUtils';
 import * as ReportUtils from '@libs/ReportUtils';
 import * as StyleUtils from '@styles/StyleUtils';
-import useTheme from '@styles/themes/useTheme';
+import useTheme from '@styles/theme/useTheme';
 import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
diff --git a/src/components/AvatarWithImagePicker.js b/src/components/AvatarWithImagePicker.js
index eabcd3aa85c5..cc7f1137901c 100644
--- a/src/components/AvatarWithImagePicker.js
+++ b/src/components/AvatarWithImagePicker.js
@@ -8,7 +8,7 @@ import * as Browser from '@libs/Browser';
 import * as FileUtils from '@libs/fileDownload/FileUtils';
 import getImageResolution from '@libs/fileDownload/getImageResolution';
 import stylePropTypes from '@styles/stylePropTypes';
-import useTheme from '@styles/themes/useTheme';
+import useTheme from '@styles/theme/useTheme';
 import useThemeStyles from '@styles/useThemeStyles';
 import variables from '@styles/variables';
 import CONST from '@src/CONST';
diff --git a/src/components/Banner.tsx b/src/components/Banner.tsx
index 6e5ad8970f1a..d9b4bcb2aa2e 100644
--- a/src/components/Banner.tsx
+++ b/src/components/Banner.tsx
@@ -3,7 +3,7 @@ import {StyleProp, TextStyle, View, ViewStyle} from 'react-native';
 import useLocalize from '@hooks/useLocalize';
 import getButtonState from '@libs/getButtonState';
 import * as StyleUtils from '@styles/StyleUtils';
-import useTheme from '@styles/themes/useTheme';
+import useTheme from '@styles/theme/useTheme';
 import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 import Hoverable from './Hoverable';
diff --git a/src/components/BaseMiniContextMenuItem.js b/src/components/BaseMiniContextMenuItem.js
index 3252938e4ca5..73533cde546c 100644
--- a/src/components/BaseMiniContextMenuItem.js
+++ b/src/components/BaseMiniContextMenuItem.js
@@ -6,7 +6,7 @@ import DomUtils from '@libs/DomUtils';
 import getButtonState from '@libs/getButtonState';
 import ReportActionComposeFocusManager from '@libs/ReportActionComposeFocusManager';
 import * as StyleUtils from '@styles/StyleUtils';
-import useTheme from '@styles/themes/useTheme';
+import useTheme from '@styles/theme/useTheme';
 import useThemeStyles from '@styles/useThemeStyles';
 import variables from '@styles/variables';
 import PressableWithoutFeedback from './Pressable/PressableWithoutFeedback';
diff --git a/src/components/BlockingViews/BlockingView.js b/src/components/BlockingViews/BlockingView.js
index aec414cdeb74..bec0d1b7e1b7 100644
--- a/src/components/BlockingViews/BlockingView.js
+++ b/src/components/BlockingViews/BlockingView.js
@@ -7,7 +7,7 @@ import Text from '@components/Text';
 import TextLink from '@components/TextLink';
 import useLocalize from '@hooks/useLocalize';
 import Navigation from '@libs/Navigation/Navigation';
-import useTheme from '@styles/themes/useTheme';
+import useTheme from '@styles/theme/useTheme';
 import useThemeStyles from '@styles/useThemeStyles';
 import variables from '@styles/variables';
 
diff --git a/src/components/Button/index.tsx b/src/components/Button/index.tsx
index 9cbd19e03dc7..d4c03ab1cedf 100644
--- a/src/components/Button/index.tsx
+++ b/src/components/Button/index.tsx
@@ -10,7 +10,7 @@ import withNavigationFallback from '@components/withNavigationFallback';
 import useActiveElement from '@hooks/useActiveElement';
 import useKeyboardShortcut from '@hooks/useKeyboardShortcut';
 import HapticFeedback from '@libs/HapticFeedback';
-import useTheme from '@styles/themes/useTheme';
+import useTheme from '@styles/theme/useTheme';
 import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 import ChildrenProps from '@src/types/utils/ChildrenProps';
diff --git a/src/components/ButtonWithDropdownMenu.js b/src/components/ButtonWithDropdownMenu.js
index 15f2e2f4d6de..99f235d73ad8 100644
--- a/src/components/ButtonWithDropdownMenu.js
+++ b/src/components/ButtonWithDropdownMenu.js
@@ -4,7 +4,7 @@ import {View} from 'react-native';
 import _ from 'underscore';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import * as StyleUtils from '@styles/StyleUtils';
-import useTheme from '@styles/themes/useTheme';
+import useTheme from '@styles/theme/useTheme';
 import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 import Button from './Button';
diff --git a/src/components/Checkbox.tsx b/src/components/Checkbox.tsx
index 22577ec2b7f9..2dbf1a616a92 100644
--- a/src/components/Checkbox.tsx
+++ b/src/components/Checkbox.tsx
@@ -1,7 +1,7 @@
 import React, {ForwardedRef, forwardRef, KeyboardEvent as ReactKeyboardEvent} from 'react';
 import {GestureResponderEvent, StyleProp, View, ViewStyle} from 'react-native';
 import * as StyleUtils from '@styles/StyleUtils';
-import useTheme from '@styles/themes/useTheme';
+import useTheme from '@styles/theme/useTheme';
 import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 import ChildrenProps from '@src/types/utils/ChildrenProps';
diff --git a/src/components/ColorSchemeWrapper/index.tsx b/src/components/ColorSchemeWrapper/index.tsx
index 2909f1ffbe9f..8f2f6362fc19 100644
--- a/src/components/ColorSchemeWrapper/index.tsx
+++ b/src/components/ColorSchemeWrapper/index.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import {View} from 'react-native';
-import useTheme from '@styles/themes/useTheme';
+import useTheme from '@styles/theme/useTheme';
 import useThemeStyles from '@styles/useThemeStyles';
 
 function ColorSchemeWrapper({children}: React.PropsWithChildren): React.ReactElement {
diff --git a/src/components/Composer/index.android.js b/src/components/Composer/index.android.js
index 698c68cc78e9..248d880a60f4 100644
--- a/src/components/Composer/index.android.js
+++ b/src/components/Composer/index.android.js
@@ -4,7 +4,7 @@ import {StyleSheet} from 'react-native';
 import _ from 'underscore';
 import RNTextInput from '@components/RNTextInput';
 import * as ComposerUtils from '@libs/ComposerUtils';
-import useTheme from '@styles/themes/useTheme';
+import useTheme from '@styles/theme/useTheme';
 import useThemeStyles from '@styles/useThemeStyles';
 
 const propTypes = {
diff --git a/src/components/Composer/index.ios.js b/src/components/Composer/index.ios.js
index 9852e607562b..8874f2b5ecb0 100644
--- a/src/components/Composer/index.ios.js
+++ b/src/components/Composer/index.ios.js
@@ -4,7 +4,7 @@ import {StyleSheet} from 'react-native';
 import _ from 'underscore';
 import RNTextInput from '@components/RNTextInput';
 import * as ComposerUtils from '@libs/ComposerUtils';
-import useTheme from '@styles/themes/useTheme';
+import useTheme from '@styles/theme/useTheme';
 import useThemeStyles from '@styles/useThemeStyles';
 
 const propTypes = {
diff --git a/src/components/Composer/index.js b/src/components/Composer/index.js
index 48eb89bb0296..ef943f02089f 100755
--- a/src/components/Composer/index.js
+++ b/src/components/Composer/index.js
@@ -16,7 +16,7 @@ import updateIsFullComposerAvailable from '@libs/ComposerUtils/updateIsFullCompo
 import isEnterWhileComposition from '@libs/KeyboardShortcut/isEnterWhileComposition';
 import ReportActionComposeFocusManager from '@libs/ReportActionComposeFocusManager';
 import * as StyleUtils from '@styles/StyleUtils';
-import useTheme from '@styles/themes/useTheme';
+import useTheme from '@styles/theme/useTheme';
 import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 
diff --git a/src/components/ConfirmedRoute.js b/src/components/ConfirmedRoute.js
index 4ddd537fdd7d..57e91ac137cf 100644
--- a/src/components/ConfirmedRoute.js
+++ b/src/components/ConfirmedRoute.js
@@ -6,7 +6,7 @@ import {withOnyx} from 'react-native-onyx';
 import _ from 'underscore';
 import useNetwork from '@hooks/useNetwork';
 import * as TransactionUtils from '@libs/TransactionUtils';
-import useTheme from '@styles/themes/useTheme';
+import useTheme from '@styles/theme/useTheme';
 import useThemeStyles from '@styles/useThemeStyles';
 import * as MapboxToken from '@userActions/MapboxToken';
 import CONST from '@src/CONST';
diff --git a/src/components/ContextMenuItem.js b/src/components/ContextMenuItem.js
index a5a8985e3978..b479db5deb4b 100644
--- a/src/components/ContextMenuItem.js
+++ b/src/components/ContextMenuItem.js
@@ -5,7 +5,7 @@ import useWindowDimensions from '@hooks/useWindowDimensions';
 import getButtonState from '@libs/getButtonState';
 import getContextMenuItemStyles from '@styles/getContextMenuItemStyles';
 import * as StyleUtils from '@styles/StyleUtils';
-import useTheme from '@styles/themes/useTheme';
+import useTheme from '@styles/theme/useTheme';
 import useThemeStyles from '@styles/useThemeStyles';
 import BaseMiniContextMenuItem from './BaseMiniContextMenuItem';
 import Icon from './Icon';
diff --git a/src/components/CurrentUserPersonalDetailsSkeletonView/index.tsx b/src/components/CurrentUserPersonalDetailsSkeletonView/index.tsx
index 685db8031330..bb8bbd8f0b15 100644
--- a/src/components/CurrentUserPersonalDetailsSkeletonView/index.tsx
+++ b/src/components/CurrentUserPersonalDetailsSkeletonView/index.tsx
@@ -4,7 +4,7 @@ import {Circle, Rect} from 'react-native-svg';
 import {ValueOf} from 'type-fest';
 import SkeletonViewContentLoader from '@components/SkeletonViewContentLoader';
 import * as StyleUtils from '@styles/StyleUtils';
-import useTheme from '@styles/themes/useTheme';
+import useTheme from '@styles/theme/useTheme';
 import useThemeStyles from '@styles/useThemeStyles';
 import variables from '@styles/variables';
 import CONST from '@src/CONST';
diff --git a/src/components/CustomStatusBar/index.tsx b/src/components/CustomStatusBar/index.tsx
index 3b5022c60898..8df48ecc80a5 100644
--- a/src/components/CustomStatusBar/index.tsx
+++ b/src/components/CustomStatusBar/index.tsx
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import React, {useCallback, useContext, useEffect} from 'react';
 import {navigationRef} from '@libs/Navigation/Navigation';
 import StatusBar from '@libs/StatusBar';
-import useTheme from '@styles/themes/useTheme';
+import useTheme from '@styles/theme/useTheme';
 import CustomStatusBarContext from './CustomStatusBarContext';
 import updateStatusBarAppearance from './updateStatusBarAppearance';
 
diff --git a/src/components/DeeplinkWrapper/DeeplinkRedirectLoadingIndicator.js b/src/components/DeeplinkWrapper/DeeplinkRedirectLoadingIndicator.js
index 3c7366949ac1..0fc61a965e31 100644
--- a/src/components/DeeplinkWrapper/DeeplinkRedirectLoadingIndicator.js
+++ b/src/components/DeeplinkWrapper/DeeplinkRedirectLoadingIndicator.js
@@ -10,7 +10,7 @@ import TextLink from '@components/TextLink';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
 import compose from '@libs/compose';
 import Navigation from '@libs/Navigation/Navigation';
-import useTheme from '@styles/themes/useTheme';
+import useTheme from '@styles/theme/useTheme';
 import useThemeStyles from '@styles/useThemeStyles';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
diff --git a/src/components/DistanceEReceipt.js b/src/components/DistanceEReceipt.js
index cbf25fd2753b..514e68913e07 100644
--- a/src/components/DistanceEReceipt.js
+++ b/src/components/DistanceEReceipt.js
@@ -10,7 +10,7 @@ import * as ReceiptUtils from '@libs/ReceiptUtils';
 import * as ReportUtils from '@libs/ReportUtils';
 import * as TransactionUtils from '@libs/TransactionUtils';
 import tryResolveUrlFromApiRoot from '@libs/tryResolveUrlFromApiRoot';
-import useTheme from '@styles/themes/useTheme';
+import useTheme from '@styles/theme/useTheme';
 import useThemeStyles from '@styles/useThemeStyles';
 import Icon from './Icon';
 import * as Expensicons from './Icon/Expensicons';
diff --git a/src/components/DistanceRequest/DistanceRequestFooter.js b/src/components/DistanceRequest/DistanceRequestFooter.js
index b212dae615e4..133754f0711f 100644
--- a/src/components/DistanceRequest/DistanceRequestFooter.js
+++ b/src/components/DistanceRequest/DistanceRequestFooter.js
@@ -11,7 +11,7 @@ import * as Expensicons from '@components/Icon/Expensicons';
 import transactionPropTypes from '@components/transactionPropTypes';
 import useLocalize from '@hooks/useLocalize';
 import * as TransactionUtils from '@libs/TransactionUtils';
-import useTheme from '@styles/themes/useTheme';
+import useTheme from '@styles/theme/useTheme';
 import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
diff --git a/src/components/DistanceRequest/DistanceRequestRenderItem.js b/src/components/DistanceRequest/DistanceRequestRenderItem.js
index 1735e244a347..1eb3050ad07a 100644
--- a/src/components/DistanceRequest/DistanceRequestRenderItem.js
+++ b/src/components/DistanceRequest/DistanceRequestRenderItem.js
@@ -5,7 +5,7 @@ import _ from 'underscore';
 import * as Expensicons from '@components/Icon/Expensicons';
 import MenuItemWithTopDescription from '@components/MenuItemWithTopDescription';
 import useLocalize from '@hooks/useLocalize';
-import useTheme from '@styles/themes/useTheme';
+import useTheme from '@styles/theme/useTheme';
 
 const propTypes = {
     /** The waypoints for the distance request */
diff --git a/src/components/DotIndicatorMessage.tsx b/src/components/DotIndicatorMessage.tsx
index b90093e20fc3..4670c63df2cc 100644
--- a/src/components/DotIndicatorMessage.tsx
+++ b/src/components/DotIndicatorMessage.tsx
@@ -4,7 +4,7 @@ import {StyleProp, TextStyle, View, ViewStyle} from 'react-native';
 import fileDownload from '@libs/fileDownload';
 import * as Localize from '@libs/Localize';
 import * as StyleUtils from '@styles/StyleUtils';
-import useTheme from '@styles/themes/useTheme';
+import useTheme from '@styles/theme/useTheme';
 import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 import Icon from './Icon';
diff --git a/src/components/EmojiPicker/CategoryShortcutButton.js b/src/components/EmojiPicker/CategoryShortcutButton.js
index aeb31dd87397..bc614c08230a 100644
--- a/src/components/EmojiPicker/CategoryShortcutButton.js
+++ b/src/components/EmojiPicker/CategoryShortcutButton.js
@@ -6,7 +6,7 @@ import Tooltip from '@components/Tooltip';
 import useLocalize from '@hooks/useLocalize';
 import getButtonState from '@libs/getButtonState';
 import * as StyleUtils from '@styles/StyleUtils';
-import useTheme from '@styles/themes/useTheme';
+import useTheme from '@styles/theme/useTheme';
 import useThemeStyles from '@styles/useThemeStyles';
 import variables from '@styles/variables';
 import CONST from '@src/CONST';
diff --git a/src/components/EmojiPicker/EmojiPickerButton.js b/src/components/EmojiPicker/EmojiPickerButton.js
index 2926d6346b1b..1d4e49ee67e5 100644
--- a/src/components/EmojiPicker/EmojiPickerButton.js
+++ b/src/components/EmojiPicker/EmojiPickerButton.js
@@ -7,7 +7,7 @@ import Tooltip from '@components/Tooltip/PopoverAnchorTooltip';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
 import getButtonState from '@libs/getButtonState';
 import * as StyleUtils from '@styles/StyleUtils';
-import useTheme from '@styles/themes/useTheme';
+import useTheme from '@styles/theme/useTheme';
 import useThemeStyles from '@styles/useThemeStyles';
 import * as EmojiPickerAction from '@userActions/EmojiPickerAction';
 
diff --git a/src/components/EmojiPicker/EmojiPickerButtonDropdown.js b/src/components/EmojiPicker/EmojiPickerButtonDropdown.js
index 6fd24adf04aa..541efd4f0436 100644
--- a/src/components/EmojiPicker/EmojiPickerButtonDropdown.js
+++ b/src/components/EmojiPicker/EmojiPickerButtonDropdown.js
@@ -9,7 +9,7 @@ import Tooltip from '@components/Tooltip';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
 import getButtonState from '@libs/getButtonState';
 import * as StyleUtils from '@styles/StyleUtils';
-import useTheme from '@styles/themes/useTheme';
+import useTheme from '@styles/theme/useTheme';
 import useThemeStyles from '@styles/useThemeStyles';
 import * as EmojiPickerAction from '@userActions/EmojiPickerAction';
 import CONST from '@src/CONST';
diff --git a/src/components/EmojiSuggestions.tsx b/src/components/EmojiSuggestions.tsx
index 6917d3dec185..bc534e98773b 100644
--- a/src/components/EmojiSuggestions.tsx
+++ b/src/components/EmojiSuggestions.tsx
@@ -4,7 +4,7 @@ import type {SimpleEmoji} from '@libs/EmojiTrie';
 import * as EmojiUtils from '@libs/EmojiUtils';
 import getStyledTextArray from '@libs/GetStyledTextArray';
 import * as StyleUtils from '@styles/StyleUtils';
-import useTheme from '@styles/themes/useTheme';
+import useTheme from '@styles/theme/useTheme';
 import useThemeStyles from '@styles/useThemeStyles';
 import AutoCompleteSuggestions from './AutoCompleteSuggestions';
 import Text from './Text';
diff --git a/src/components/ExpensifyWordmark.tsx b/src/components/ExpensifyWordmark.tsx
index 1402b48df0d9..64b41b4cadb2 100644
--- a/src/components/ExpensifyWordmark.tsx
+++ b/src/components/ExpensifyWordmark.tsx
@@ -6,7 +6,7 @@ import StagingLogo from '@assets/images/expensify-logo--staging.svg';
 import ProductionLogo from '@assets/images/expensify-wordmark.svg';
 import useEnvironment from '@hooks/useEnvironment';
 import * as StyleUtils from '@styles/StyleUtils';
-import useTheme from '@styles/themes/useTheme';
+import useTheme from '@styles/theme/useTheme';
 import useThemeStyles from '@styles/useThemeStyles';
 import variables from '@styles/variables';
 import CONST from '@src/CONST';
diff --git a/src/components/FormHelpMessage.js b/src/components/FormHelpMessage.js
index bec02c3d51f0..c4315e4e4576 100644
--- a/src/components/FormHelpMessage.js
+++ b/src/components/FormHelpMessage.js
@@ -4,7 +4,7 @@ import {View} from 'react-native';
 import _ from 'underscore';
 import * as Localize from '@libs/Localize';
 import stylePropTypes from '@styles/stylePropTypes';
-import useTheme from '@styles/themes/useTheme';
+import useTheme from '@styles/theme/useTheme';
 import useThemeStyles from '@styles/useThemeStyles';
 import Icon from './Icon';
 import * as Expensicons from './Icon/Expensicons';
diff --git a/src/components/FullscreenLoadingIndicator.tsx b/src/components/FullscreenLoadingIndicator.tsx
index fc0687f6da18..0d38a5f1d7f8 100644
--- a/src/components/FullscreenLoadingIndicator.tsx
+++ b/src/components/FullscreenLoadingIndicator.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import {ActivityIndicator, StyleProp, StyleSheet, View, ViewStyle} from 'react-native';
-import useTheme from '@styles/themes/useTheme';
+import useTheme from '@styles/theme/useTheme';
 import useThemeStyles from '@styles/useThemeStyles';
 
 type FullScreenLoadingIndicatorProps = {
diff --git a/src/components/GrowlNotification/index.js b/src/components/GrowlNotification/index.js
index faf1ec9cfa16..dfdd00ac11bb 100644
--- a/src/components/GrowlNotification/index.js
+++ b/src/components/GrowlNotification/index.js
@@ -7,7 +7,7 @@ import * as Pressables from '@components/Pressable';
 import Text from '@components/Text';
 import * as Growl from '@libs/Growl';
 import useNativeDriver from '@libs/useNativeDriver';
-import useTheme from '@styles/themes/useTheme';
+import useTheme from '@styles/theme/useTheme';
 import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 import GrowlNotificationContainer from './GrowlNotificationContainer';
diff --git a/src/components/HTMLEngineProvider/HTMLRenderers/EditedRenderer.js b/src/components/HTMLEngineProvider/HTMLRenderers/EditedRenderer.js
index e97d01808a6e..bf00713c73fe 100644
--- a/src/components/HTMLEngineProvider/HTMLRenderers/EditedRenderer.js
+++ b/src/components/HTMLEngineProvider/HTMLRenderers/EditedRenderer.js
@@ -3,7 +3,7 @@ import _ from 'underscore';
 import Text from '@components/Text';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
 import editedLabelStyles from '@styles/editedLabelStyles';
-import useTheme from '@styles/themes/useTheme';
+import useTheme from '@styles/theme/useTheme';
 import useThemeStyles from '@styles/useThemeStyles';
 import variables from '@styles/variables';
 import CONST from '@src/CONST';
diff --git a/src/components/HTMLEngineProvider/HTMLRenderers/MentionHereRenderer.js b/src/components/HTMLEngineProvider/HTMLRenderers/MentionHereRenderer.js
index 65c287b8e86b..674a320a382e 100644
--- a/src/components/HTMLEngineProvider/HTMLRenderers/MentionHereRenderer.js
+++ b/src/components/HTMLEngineProvider/HTMLRenderers/MentionHereRenderer.js
@@ -3,7 +3,7 @@ import {TNodeChildrenRenderer} from 'react-native-render-html';
 import _ from 'underscore';
 import Text from '@components/Text';
 import * as StyleUtils from '@styles/StyleUtils';
-import useTheme from '@styles/themes/useTheme';
+import useTheme from '@styles/theme/useTheme';
 import htmlRendererPropTypes from './htmlRendererPropTypes';
 
 function MentionHereRenderer(props) {
diff --git a/src/components/HTMLEngineProvider/HTMLRenderers/MentionUserRenderer.js b/src/components/HTMLEngineProvider/HTMLRenderers/MentionUserRenderer.js
index 0027a557ab02..09a992544556 100644
--- a/src/components/HTMLEngineProvider/HTMLRenderers/MentionUserRenderer.js
+++ b/src/components/HTMLEngineProvider/HTMLRenderers/MentionUserRenderer.js
@@ -14,7 +14,7 @@ import * as PersonalDetailsUtils from '@libs/PersonalDetailsUtils';
 import * as ReportUtils from '@libs/ReportUtils';
 import personalDetailsPropType from '@pages/personalDetailsPropType';
 import * as StyleUtils from '@styles/StyleUtils';
-import useTheme from '@styles/themes/useTheme';
+import useTheme from '@styles/theme/useTheme';
 import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 import ROUTES from '@src/ROUTES';
diff --git a/src/components/HeaderPageLayout.js b/src/components/HeaderPageLayout.js
index 35b03f925831..e3181b5d51cb 100644
--- a/src/components/HeaderPageLayout.js
+++ b/src/components/HeaderPageLayout.js
@@ -6,7 +6,7 @@ import useNetwork from '@hooks/useNetwork';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import * as Browser from '@libs/Browser';
 import * as StyleUtils from '@styles/StyleUtils';
-import useTheme from '@styles/themes/useTheme';
+import useTheme from '@styles/theme/useTheme';
 import useThemeStyles from '@styles/useThemeStyles';
 import FixedFooter from './FixedFooter';
 import HeaderWithBackButton from './HeaderWithBackButton';
diff --git a/src/components/HeaderWithBackButton/index.js b/src/components/HeaderWithBackButton/index.js
index a6477fcf2ce0..5dee146c5979 100755
--- a/src/components/HeaderWithBackButton/index.js
+++ b/src/components/HeaderWithBackButton/index.js
@@ -15,7 +15,7 @@ import useWaitForNavigation from '@hooks/useWaitForNavigation';
 import getButtonState from '@libs/getButtonState';
 import Navigation from '@libs/Navigation/Navigation';
 import * as StyleUtils from '@styles/StyleUtils';
-import useTheme from '@styles/themes/useTheme';
+import useTheme from '@styles/theme/useTheme';
 import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 import ROUTES from '@src/ROUTES';
diff --git a/src/components/Icon/svgs/LoungeAccessIcon.tsx b/src/components/Icon/svgs/LoungeAccessIcon.tsx
index 48b140da3bc8..a79f6b25ccc6 100644
--- a/src/components/Icon/svgs/LoungeAccessIcon.tsx
+++ b/src/components/Icon/svgs/LoungeAccessIcon.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import Svg, {G, Path, Polygon} from 'react-native-svg';
-import useTheme from '@styles/themes/useTheme';
+import useTheme from '@styles/theme/useTheme';
 
 type LoungeAccessIconProps = {
     /** The fill color for the icon. Can be hex, rgb, rgba, or valid react-native named color such as 'red' or 'blue'. */
diff --git a/src/components/IllustratedHeaderPageLayout.js b/src/components/IllustratedHeaderPageLayout.js
index 0557c7a6ca7b..610fd3a45eca 100644
--- a/src/components/IllustratedHeaderPageLayout.js
+++ b/src/components/IllustratedHeaderPageLayout.js
@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import useTheme from '@styles/themes/useTheme';
+import useTheme from '@styles/theme/useTheme';
 import useThemeStyles from '@styles/useThemeStyles';
 import HeaderPageLayout from './HeaderPageLayout';
 import headerWithBackButtonPropTypes from './HeaderWithBackButton/headerWithBackButtonPropTypes';
diff --git a/src/components/Indicator.js b/src/components/Indicator.js
index 1f38c1dd89ce..6728c60f10ce 100644
--- a/src/components/Indicator.js
+++ b/src/components/Indicator.js
@@ -10,7 +10,7 @@ import walletTermsPropTypes from '@pages/EnablePayments/walletTermsPropTypes';
 import policyMemberPropType from '@pages/policyMemberPropType';
 import * as ReimbursementAccountProps from '@pages/ReimbursementAccount/reimbursementAccountPropTypes';
 import {policyPropTypes} from '@pages/workspace/withPolicy';
-import useTheme from '@styles/themes/useTheme';
+import useTheme from '@styles/theme/useTheme';
 import useThemeStyles from '@styles/useThemeStyles';
 import * as PaymentMethods from '@userActions/PaymentMethods';
 import ONYXKEYS from '@src/ONYXKEYS';
diff --git a/src/components/InlineSystemMessage.tsx b/src/components/InlineSystemMessage.tsx
index 6e6423a19a35..1d1071dd7d61 100644
--- a/src/components/InlineSystemMessage.tsx
+++ b/src/components/InlineSystemMessage.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import {View} from 'react-native';
-import useTheme from '@styles/themes/useTheme';
+import useTheme from '@styles/theme/useTheme';
 import useThemeStyles from '@styles/useThemeStyles';
 import Icon from './Icon';
 import * as Expensicons from './Icon/Expensicons';
diff --git a/src/components/LHNOptionsList/OptionRowLHN.js b/src/components/LHNOptionsList/OptionRowLHN.js
index 1765c85cdd48..42e1bb9d9b09 100644
--- a/src/components/LHNOptionsList/OptionRowLHN.js
+++ b/src/components/LHNOptionsList/OptionRowLHN.js
@@ -26,7 +26,7 @@ import * as ContextMenuActions from '@pages/home/report/ContextMenu/ContextMenuA
 import * as ReportActionContextMenu from '@pages/home/report/ContextMenu/ReportActionContextMenu';
 import * as optionRowStyles from '@styles/optionRowStyles';
 import * as StyleUtils from '@styles/StyleUtils';
-import useTheme from '@styles/themes/useTheme';
+import useTheme from '@styles/theme/useTheme';
 import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 
diff --git a/src/components/LocalePicker.tsx b/src/components/LocalePicker.tsx
index c04b0131744f..7c8651262476 100644
--- a/src/components/LocalePicker.tsx
+++ b/src/components/LocalePicker.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import {OnyxEntry, withOnyx} from 'react-native-onyx';
 import useLocalize from '@hooks/useLocalize';
-import useTheme from '@styles/themes/useTheme';
+import useTheme from '@styles/theme/useTheme';
 import useThemeStyles from '@styles/useThemeStyles';
 import * as App from '@userActions/App';
 import CONST from '@src/CONST';
diff --git a/src/components/MapView/MapView.web.tsx b/src/components/MapView/MapView.web.tsx
index f32413cbc15d..921d558cb6e9 100644
--- a/src/components/MapView/MapView.web.tsx
+++ b/src/components/MapView/MapView.web.tsx
@@ -10,7 +10,7 @@ import Map, {MapRef, Marker} from 'react-map-gl';
 import {View} from 'react-native';
 import {withOnyx} from 'react-native-onyx';
 import * as StyleUtils from '@styles/StyleUtils';
-import useTheme from '@styles/themes/useTheme';
+import useTheme from '@styles/theme/useTheme';
 import useThemeStyles from '@styles/useThemeStyles';
 import setUserLocation from '@userActions/UserLocation';
 import CONST from '@src/CONST';
diff --git a/src/components/MentionSuggestions.tsx b/src/components/MentionSuggestions.tsx
index ae4b566f98ee..88c0489b3dd9 100644
--- a/src/components/MentionSuggestions.tsx
+++ b/src/components/MentionSuggestions.tsx
@@ -2,7 +2,7 @@ import React, {useCallback} from 'react';
 import {View} from 'react-native';
 import getStyledTextArray from '@libs/GetStyledTextArray';
 import * as StyleUtils from '@styles/StyleUtils';
-import useTheme from '@styles/themes/useTheme';
+import useTheme from '@styles/theme/useTheme';
 import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 import {Icon} from '@src/types/onyx/OnyxCommon';
diff --git a/src/components/MenuItem.js b/src/components/MenuItem.js
index a551d4a9205a..fd4a4b483fec 100644
--- a/src/components/MenuItem.js
+++ b/src/components/MenuItem.js
@@ -8,7 +8,7 @@ import convertToLTR from '@libs/convertToLTR';
 import * as DeviceCapabilities from '@libs/DeviceCapabilities';
 import getButtonState from '@libs/getButtonState';
 import * as StyleUtils from '@styles/StyleUtils';
-import useTheme from '@styles/themes/useTheme';
+import useTheme from '@styles/theme/useTheme';
 import useThemeStyles from '@styles/useThemeStyles';
 import variables from '@styles/variables';
 import * as Session from '@userActions/Session';
diff --git a/src/components/Modal/BaseModal.tsx b/src/components/Modal/BaseModal.tsx
index f5c498b24893..62bdc6ff7d6b 100644
--- a/src/components/Modal/BaseModal.tsx
+++ b/src/components/Modal/BaseModal.tsx
@@ -9,7 +9,7 @@ import ComposerFocusManager from '@libs/ComposerFocusManager';
 import useNativeDriver from '@libs/useNativeDriver';
 import getModalStyles from '@styles/getModalStyles';
 import * as StyleUtils from '@styles/StyleUtils';
-import useTheme from '@styles/themes/useTheme';
+import useTheme from '@styles/theme/useTheme';
 import useThemeStyles from '@styles/useThemeStyles';
 import variables from '@styles/variables';
 import * as Modal from '@userActions/Modal';
diff --git a/src/components/Modal/index.tsx b/src/components/Modal/index.tsx
index bc683b6f6311..2d49a7c10542 100644
--- a/src/components/Modal/index.tsx
+++ b/src/components/Modal/index.tsx
@@ -2,7 +2,7 @@ import React, {useState} from 'react';
 import withWindowDimensions from '@components/withWindowDimensions';
 import StatusBar from '@libs/StatusBar';
 import * as StyleUtils from '@styles/StyleUtils';
-import useTheme from '@styles/themes/useTheme';
+import useTheme from '@styles/theme/useTheme';
 import CONST from '@src/CONST';
 import BaseModal from './BaseModal';
 import BaseModalProps from './types';
diff --git a/src/components/MoneyRequestConfirmationList.js b/src/components/MoneyRequestConfirmationList.js
index 1b4967a9c54c..452721ee87df 100755
--- a/src/components/MoneyRequestConfirmationList.js
+++ b/src/components/MoneyRequestConfirmationList.js
@@ -22,7 +22,7 @@ import * as ReceiptUtils from '@libs/ReceiptUtils';
 import * as ReportUtils from '@libs/ReportUtils';
 import * as TransactionUtils from '@libs/TransactionUtils';
 import {iouDefaultProps, iouPropTypes} from '@pages/iou/propTypes';
-import useTheme from '@styles/themes/useTheme';
+import useTheme from '@styles/theme/useTheme';
 import useThemeStyles from '@styles/useThemeStyles';
 import * as IOU from '@userActions/IOU';
 import CONST from '@src/CONST';
diff --git a/src/components/MoneyRequestSkeletonView.tsx b/src/components/MoneyRequestSkeletonView.tsx
index 3e175f000acd..f75cf0392486 100644
--- a/src/components/MoneyRequestSkeletonView.tsx
+++ b/src/components/MoneyRequestSkeletonView.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import {Rect} from 'react-native-svg';
-import useTheme from '@styles/themes/useTheme';
+import useTheme from '@styles/theme/useTheme';
 import useThemeStyles from '@styles/useThemeStyles';
 import variables from '@styles/variables';
 import SkeletonViewContentLoader from './SkeletonViewContentLoader';
diff --git a/src/components/MultipleAvatars.tsx b/src/components/MultipleAvatars.tsx
index efff279324ac..96629e5ae2d6 100644
--- a/src/components/MultipleAvatars.tsx
+++ b/src/components/MultipleAvatars.tsx
@@ -3,7 +3,7 @@ import {StyleProp, View, ViewStyle} from 'react-native';
 import {ValueOf} from 'type-fest';
 import {AvatarSource} from '@libs/UserUtils';
 import * as StyleUtils from '@styles/StyleUtils';
-import useTheme from '@styles/themes/useTheme';
+import useTheme from '@styles/theme/useTheme';
 import useThemeStyles from '@styles/useThemeStyles';
 import variables from '@styles/variables';
 import CONST from '@src/CONST';
diff --git a/src/components/Onfido/BaseOnfidoWeb.js b/src/components/Onfido/BaseOnfidoWeb.js
index 7a3b90945a5c..b89ff96a858e 100644
--- a/src/components/Onfido/BaseOnfidoWeb.js
+++ b/src/components/Onfido/BaseOnfidoWeb.js
@@ -6,7 +6,7 @@ import useLocalize from '@hooks/useLocalize';
 import Log from '@libs/Log';
 import fontFamily from '@styles/fontFamily';
 import fontWeightBold from '@styles/fontWeight/bold';
-import useTheme from '@styles/themes/useTheme';
+import useTheme from '@styles/theme/useTheme';
 import variables from '@styles/variables';
 import CONST from '@src/CONST';
 import './index.css';
diff --git a/src/components/OptionRow.js b/src/components/OptionRow.js
index cb670f3cf6ce..88b274d2732f 100644
--- a/src/components/OptionRow.js
+++ b/src/components/OptionRow.js
@@ -6,7 +6,7 @@ import _ from 'underscore';
 import * as OptionsListUtils from '@libs/OptionsListUtils';
 import * as ReportUtils from '@libs/ReportUtils';
 import * as StyleUtils from '@styles/StyleUtils';
-import useTheme from '@styles/themes/useTheme';
+import useTheme from '@styles/theme/useTheme';
 import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 import Button from './Button';
diff --git a/src/components/Picker/BasePicker.tsx b/src/components/Picker/BasePicker.tsx
index dfb2d6332da5..773213685ab6 100644
--- a/src/components/Picker/BasePicker.tsx
+++ b/src/components/Picker/BasePicker.tsx
@@ -7,7 +7,7 @@ import Icon from '@components/Icon';
 import * as Expensicons from '@components/Icon/Expensicons';
 import Text from '@components/Text';
 import useScrollContext from '@hooks/useScrollContext';
-import useTheme from '@styles/themes/useTheme';
+import useTheme from '@styles/theme/useTheme';
 import useThemeStyles from '@styles/useThemeStyles';
 import type {BasePickerHandle, BasePickerProps} from './types';
 
diff --git a/src/components/PinButton.js b/src/components/PinButton.js
index 84e7e4d4807e..70333a02af44 100644
--- a/src/components/PinButton.js
+++ b/src/components/PinButton.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import reportPropTypes from '@pages/reportPropTypes';
-import useTheme from '@styles/themes/useTheme';
+import useTheme from '@styles/theme/useTheme';
 import useThemeStyles from '@styles/useThemeStyles';
 import * as Report from '@userActions/Report';
 import * as Session from '@userActions/Session';
diff --git a/src/components/PopoverWithoutOverlay/index.js b/src/components/PopoverWithoutOverlay/index.js
index 6572a55ed889..fc5267431b6d 100644
--- a/src/components/PopoverWithoutOverlay/index.js
+++ b/src/components/PopoverWithoutOverlay/index.js
@@ -7,7 +7,7 @@ import withWindowDimensions from '@components/withWindowDimensions';
 import useSafeAreaInsets from '@hooks/useSafeAreaInsets';
 import getModalStyles from '@styles/getModalStyles';
 import * as StyleUtils from '@styles/StyleUtils';
-import useTheme from '@styles/themes/useTheme';
+import useTheme from '@styles/theme/useTheme';
 import useThemeStyles from '@styles/useThemeStyles';
 import * as Modal from '@userActions/Modal';
 
diff --git a/src/components/Pressable/PressableWithDelayToggle.tsx b/src/components/Pressable/PressableWithDelayToggle.tsx
index a80272ee05cf..92e2b2a654b0 100644
--- a/src/components/Pressable/PressableWithDelayToggle.tsx
+++ b/src/components/Pressable/PressableWithDelayToggle.tsx
@@ -9,7 +9,7 @@ import Tooltip from '@components/Tooltip';
 import useThrottledButtonState from '@hooks/useThrottledButtonState';
 import getButtonState from '@libs/getButtonState';
 import * as StyleUtils from '@styles/StyleUtils';
-import useTheme from '@styles/themes/useTheme';
+import useTheme from '@styles/theme/useTheme';
 import useThemeStyles from '@styles/useThemeStyles';
 import variables from '@styles/variables';
 import PressableProps, {PressableRef} from './GenericPressable/types';
diff --git a/src/components/QRCode.tsx b/src/components/QRCode.tsx
index 5363281ddc67..a7475e3da15c 100644
--- a/src/components/QRCode.tsx
+++ b/src/components/QRCode.tsx
@@ -1,7 +1,7 @@
 import React, {Ref} from 'react';
 import {ImageSourcePropType} from 'react-native';
 import QRCodeLibrary from 'react-native-qrcode-svg';
-import useTheme from '@styles/themes/useTheme';
+import useTheme from '@styles/theme/useTheme';
 import CONST from '@src/CONST';
 
 type LogoRatio = typeof CONST.QR.DEFAULT_LOGO_SIZE_RATIO | typeof CONST.QR.EXPENSIFY_LOGO_SIZE_RATIO;
diff --git a/src/components/RadioButton.tsx b/src/components/RadioButton.tsx
index b5e0467d3f00..5bb535bb4205 100644
--- a/src/components/RadioButton.tsx
+++ b/src/components/RadioButton.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import {View} from 'react-native';
-import useTheme from '@styles/themes/useTheme';
+import useTheme from '@styles/theme/useTheme';
 import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 import Icon from './Icon';
diff --git a/src/components/Reactions/AddReactionBubble.js b/src/components/Reactions/AddReactionBubble.js
index 78c1f5407d64..0c45c3952834 100644
--- a/src/components/Reactions/AddReactionBubble.js
+++ b/src/components/Reactions/AddReactionBubble.js
@@ -9,7 +9,7 @@ import Tooltip from '@components/Tooltip/PopoverAnchorTooltip';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
 import getButtonState from '@libs/getButtonState';
 import * as StyleUtils from '@styles/StyleUtils';
-import useTheme from '@styles/themes/useTheme';
+import useTheme from '@styles/theme/useTheme';
 import useThemeStyles from '@styles/useThemeStyles';
 import variables from '@styles/variables';
 import * as EmojiPickerAction from '@userActions/EmojiPickerAction';
diff --git a/src/components/Reactions/EmojiReactionBubble.js b/src/components/Reactions/EmojiReactionBubble.js
index 73538a032e38..625c94cb4c99 100644
--- a/src/components/Reactions/EmojiReactionBubble.js
+++ b/src/components/Reactions/EmojiReactionBubble.js
@@ -5,7 +5,7 @@ import Text from '@components/Text';
 import {withCurrentUserPersonalDetailsDefaultProps} from '@components/withCurrentUserPersonalDetails';
 import withWindowDimensions, {windowDimensionsPropTypes} from '@components/withWindowDimensions';
 import * as StyleUtils from '@styles/StyleUtils';
-import useTheme from '@styles/themes/useTheme';
+import useTheme from '@styles/theme/useTheme';
 import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 
diff --git a/src/components/Reactions/MiniQuickEmojiReactions.js b/src/components/Reactions/MiniQuickEmojiReactions.js
index 7795f77d5d53..b25db3207b28 100644
--- a/src/components/Reactions/MiniQuickEmojiReactions.js
+++ b/src/components/Reactions/MiniQuickEmojiReactions.js
@@ -12,7 +12,7 @@ import compose from '@libs/compose';
 import * as EmojiUtils from '@libs/EmojiUtils';
 import getButtonState from '@libs/getButtonState';
 import * as StyleUtils from '@styles/StyleUtils';
-import useTheme from '@styles/themes/useTheme';
+import useTheme from '@styles/theme/useTheme';
 import useThemeStyles from '@styles/useThemeStyles';
 import * as EmojiPickerAction from '@userActions/EmojiPickerAction';
 import * as Session from '@userActions/Session';
diff --git a/src/components/ReportActionItem/MoneyReportView.js b/src/components/ReportActionItem/MoneyReportView.js
index c870f11d6f3c..d1fe307ae432 100644
--- a/src/components/ReportActionItem/MoneyReportView.js
+++ b/src/components/ReportActionItem/MoneyReportView.js
@@ -12,7 +12,7 @@ import * as ReportUtils from '@libs/ReportUtils';
 import AnimatedEmptyStateBackground from '@pages/home/report/AnimatedEmptyStateBackground';
 import reportPropTypes from '@pages/reportPropTypes';
 import * as StyleUtils from '@styles/StyleUtils';
-import useTheme from '@styles/themes/useTheme';
+import useTheme from '@styles/theme/useTheme';
 import useThemeStyles from '@styles/useThemeStyles';
 import variables from '@styles/variables';
 
diff --git a/src/components/ReportActionItem/MoneyRequestPreview.js b/src/components/ReportActionItem/MoneyRequestPreview.js
index 7391b8ccd933..3e0f9d5d6504 100644
--- a/src/components/ReportActionItem/MoneyRequestPreview.js
+++ b/src/components/ReportActionItem/MoneyRequestPreview.js
@@ -29,7 +29,7 @@ import * as TransactionUtils from '@libs/TransactionUtils';
 import walletTermsPropTypes from '@pages/EnablePayments/walletTermsPropTypes';
 import reportActionPropTypes from '@pages/home/report/reportActionPropTypes';
 import * as StyleUtils from '@styles/StyleUtils';
-import useTheme from '@styles/themes/useTheme';
+import useTheme from '@styles/theme/useTheme';
 import useThemeStyles from '@styles/useThemeStyles';
 import * as PaymentMethods from '@userActions/PaymentMethods';
 import * as Report from '@userActions/Report';
diff --git a/src/components/ReportActionItem/MoneyRequestView.js b/src/components/ReportActionItem/MoneyRequestView.js
index 0249a9f5bb11..b03d9fb4d35f 100644
--- a/src/components/ReportActionItem/MoneyRequestView.js
+++ b/src/components/ReportActionItem/MoneyRequestView.js
@@ -32,7 +32,7 @@ import AnimatedEmptyStateBackground from '@pages/home/report/AnimatedEmptyStateB
 import iouReportPropTypes from '@pages/iouReportPropTypes';
 import reportPropTypes from '@pages/reportPropTypes';
 import * as StyleUtils from '@styles/StyleUtils';
-import useTheme from '@styles/themes/useTheme';
+import useTheme from '@styles/theme/useTheme';
 import useThemeStyles from '@styles/useThemeStyles';
 import * as IOU from '@userActions/IOU';
 import CONST from '@src/CONST';
diff --git a/src/components/ReportActionItem/ReportActionItemImages.js b/src/components/ReportActionItem/ReportActionItemImages.js
index de9ff3b6c30b..ff74bce61b60 100644
--- a/src/components/ReportActionItem/ReportActionItemImages.js
+++ b/src/components/ReportActionItem/ReportActionItemImages.js
@@ -6,7 +6,7 @@ import _ from 'underscore';
 import Text from '@components/Text';
 import transactionPropTypes from '@components/transactionPropTypes';
 import * as StyleUtils from '@styles/StyleUtils';
-import useTheme from '@styles/themes/useTheme';
+import useTheme from '@styles/theme/useTheme';
 import useThemeStyles from '@styles/useThemeStyles';
 import variables from '@styles/variables';
 import ReportActionItemImage from './ReportActionItemImage';
diff --git a/src/components/ReportActionItem/ReportPreview.js b/src/components/ReportActionItem/ReportPreview.js
index 615e91dc5fc4..859c97993b97 100644
--- a/src/components/ReportActionItem/ReportPreview.js
+++ b/src/components/ReportActionItem/ReportPreview.js
@@ -25,7 +25,7 @@ import * as ReportUtils from '@libs/ReportUtils';
 import * as TransactionUtils from '@libs/TransactionUtils';
 import reportActionPropTypes from '@pages/home/report/reportActionPropTypes';
 import reportPropTypes from '@pages/reportPropTypes';
-import useTheme from '@styles/themes/useTheme';
+import useTheme from '@styles/theme/useTheme';
 import useThemeStyles from '@styles/useThemeStyles';
 import * as IOU from '@userActions/IOU';
 import CONST from '@src/CONST';
diff --git a/src/components/ReportActionItem/TaskPreview.js b/src/components/ReportActionItem/TaskPreview.js
index abc65b513ab9..000b64041612 100644
--- a/src/components/ReportActionItem/TaskPreview.js
+++ b/src/components/ReportActionItem/TaskPreview.js
@@ -23,7 +23,7 @@ import Navigation from '@libs/Navigation/Navigation';
 import * as ReportUtils from '@libs/ReportUtils';
 import reportActionPropTypes from '@pages/home/report/reportActionPropTypes';
 import * as StyleUtils from '@styles/StyleUtils';
-import useTheme from '@styles/themes/useTheme';
+import useTheme from '@styles/theme/useTheme';
 import useThemeStyles from '@styles/useThemeStyles';
 import * as Session from '@userActions/Session';
 import * as Task from '@userActions/Task';
diff --git a/src/components/ReportActionItem/TaskView.js b/src/components/ReportActionItem/TaskView.js
index 3d3ed9315f6e..630071ccae72 100644
--- a/src/components/ReportActionItem/TaskView.js
+++ b/src/components/ReportActionItem/TaskView.js
@@ -25,7 +25,7 @@ import * as OptionsListUtils from '@libs/OptionsListUtils';
 import * as ReportUtils from '@libs/ReportUtils';
 import reportPropTypes from '@pages/reportPropTypes';
 import * as StyleUtils from '@styles/StyleUtils';
-import useTheme from '@styles/themes/useTheme';
+import useTheme from '@styles/theme/useTheme';
 import useThemeStyles from '@styles/useThemeStyles';
 import * as Session from '@userActions/Session';
 import * as Task from '@userActions/Task';
diff --git a/src/components/ReportActionsSkeletonView/SkeletonViewLines.tsx b/src/components/ReportActionsSkeletonView/SkeletonViewLines.tsx
index 3451e13298b3..36dcd9040f2b 100644
--- a/src/components/ReportActionsSkeletonView/SkeletonViewLines.tsx
+++ b/src/components/ReportActionsSkeletonView/SkeletonViewLines.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import {Circle, Rect} from 'react-native-svg';
 import SkeletonViewContentLoader from '@components/SkeletonViewContentLoader';
-import useTheme from '@styles/themes/useTheme';
+import useTheme from '@styles/theme/useTheme';
 import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 
diff --git a/src/components/ReportHeaderSkeletonView.tsx b/src/components/ReportHeaderSkeletonView.tsx
index acc9261889bc..8889e75e9a8b 100644
--- a/src/components/ReportHeaderSkeletonView.tsx
+++ b/src/components/ReportHeaderSkeletonView.tsx
@@ -3,7 +3,7 @@ import {View} from 'react-native';
 import {Circle, Rect} from 'react-native-svg';
 import useLocalize from '@hooks/useLocalize';
 import useWindowDimensions from '@hooks/useWindowDimensions';
-import useTheme from '@styles/themes/useTheme';
+import useTheme from '@styles/theme/useTheme';
 import useThemeStyles from '@styles/useThemeStyles';
 import variables from '@styles/variables';
 import CONST from '@src/CONST';
diff --git a/src/components/RoomHeaderAvatars.js b/src/components/RoomHeaderAvatars.js
index 4a1d60a869ad..f680d430b537 100644
--- a/src/components/RoomHeaderAvatars.js
+++ b/src/components/RoomHeaderAvatars.js
@@ -4,7 +4,7 @@ import {View} from 'react-native';
 import _ from 'underscore';
 import * as UserUtils from '@libs/UserUtils';
 import * as StyleUtils from '@styles/StyleUtils';
-import useTheme from '@styles/themes/useTheme';
+import useTheme from '@styles/theme/useTheme';
 import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 import AttachmentModal from './AttachmentModal';
diff --git a/src/components/SAMLLoadingIndicator.js b/src/components/SAMLLoadingIndicator.js
index d00c5a032a72..72bba2105a1c 100644
--- a/src/components/SAMLLoadingIndicator.js
+++ b/src/components/SAMLLoadingIndicator.js
@@ -2,7 +2,7 @@ import React from 'react';
 import {StyleSheet, View} from 'react-native';
 import useLocalize from '@hooks/useLocalize';
 import styles from '@styles/styles';
-import themeColors from '@styles/themes/default';
+import themeColors from '@styles/theme/themes/dark';
 import Icon from './Icon';
 import * as Expensicons from './Icon/Expensicons';
 import * as Illustrations from './Icon/Illustrations';
diff --git a/src/components/SelectCircle.tsx b/src/components/SelectCircle.tsx
index 7a7e23388722..4d6e3de06d71 100644
--- a/src/components/SelectCircle.tsx
+++ b/src/components/SelectCircle.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import {StyleProp, View, ViewStyle} from 'react-native';
-import useTheme from '@styles/themes/useTheme';
+import useTheme from '@styles/theme/useTheme';
 import useThemeStyles from '@styles/useThemeStyles';
 import Icon from './Icon';
 import * as Expensicons from './Icon/Expensicons';
diff --git a/src/components/SelectionList/BaseListItem.js b/src/components/SelectionList/BaseListItem.js
index f1c189842c28..c64e88728cf4 100644
--- a/src/components/SelectionList/BaseListItem.js
+++ b/src/components/SelectionList/BaseListItem.js
@@ -8,7 +8,7 @@ import PressableWithFeedback from '@components/Pressable/PressableWithFeedback';
 import Text from '@components/Text';
 import useLocalize from '@hooks/useLocalize';
 import * as StyleUtils from '@styles/StyleUtils';
-import useTheme from '@styles/themes/useTheme';
+import useTheme from '@styles/theme/useTheme';
 import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 import RadioListItem from './RadioListItem';
diff --git a/src/components/SelectionList/BaseSelectionList.js b/src/components/SelectionList/BaseSelectionList.js
index 3411d7e03cb9..6836541ee7a0 100644
--- a/src/components/SelectionList/BaseSelectionList.js
+++ b/src/components/SelectionList/BaseSelectionList.js
@@ -18,7 +18,7 @@ import useActiveElement from '@hooks/useActiveElement';
 import useKeyboardShortcut from '@hooks/useKeyboardShortcut';
 import useLocalize from '@hooks/useLocalize';
 import Log from '@libs/Log';
-import useTheme from '@styles/themes/useTheme';
+import useTheme from '@styles/theme/useTheme';
 import useThemeStyles from '@styles/useThemeStyles';
 import variables from '@styles/variables';
 import CONST from '@src/CONST';
diff --git a/src/components/ShowMoreButton/index.js b/src/components/ShowMoreButton/index.js
index 5f1620ac7c88..71553c705e9c 100644
--- a/src/components/ShowMoreButton/index.js
+++ b/src/components/ShowMoreButton/index.js
@@ -7,7 +7,7 @@ import * as Expensicons from '@components/Icon/Expensicons';
 import useLocalize from '@hooks/useLocalize';
 import * as NumberFormatUtils from '@libs/NumberFormatUtils';
 import stylePropTypes from '@styles/stylePropTypes';
-import useTheme from '@styles/themes/useTheme';
+import useTheme from '@styles/theme/useTheme';
 import useThemeStyles from '@styles/useThemeStyles';
 
 const propTypes = {
diff --git a/src/components/SubscriptAvatar.tsx b/src/components/SubscriptAvatar.tsx
index 52ecf6633d9b..f86f84014f9d 100644
--- a/src/components/SubscriptAvatar.tsx
+++ b/src/components/SubscriptAvatar.tsx
@@ -3,7 +3,7 @@ import {View} from 'react-native';
 import {ValueOf} from 'type-fest';
 import type {AvatarSource} from '@libs/UserUtils';
 import * as StyleUtils from '@styles/StyleUtils';
-import useTheme from '@styles/themes/useTheme';
+import useTheme from '@styles/theme/useTheme';
 import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 import {AvatarType} from '@src/types/onyx/OnyxCommon';
diff --git a/src/components/TabSelector/TabIcon.js b/src/components/TabSelector/TabIcon.js
index 76217b69e9f3..4dc5acf196d3 100644
--- a/src/components/TabSelector/TabIcon.js
+++ b/src/components/TabSelector/TabIcon.js
@@ -2,7 +2,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import {Animated, StyleSheet, View} from 'react-native';
 import Icon from '@components/Icon';
-import useTheme from '@styles/themes/useTheme';
+import useTheme from '@styles/theme/useTheme';
 
 const propTypes = {
     /** Icon to display on tab */
diff --git a/src/components/TabSelector/TabSelector.js b/src/components/TabSelector/TabSelector.js
index 602a326d6c48..0d0a054bf353 100644
--- a/src/components/TabSelector/TabSelector.js
+++ b/src/components/TabSelector/TabSelector.js
@@ -4,7 +4,7 @@ import {View} from 'react-native';
 import _ from 'underscore';
 import * as Expensicons from '@components/Icon/Expensicons';
 import useLocalize from '@hooks/useLocalize';
-import useTheme from '@styles/themes/useTheme';
+import useTheme from '@styles/theme/useTheme';
 import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 import TabSelectorItem from './TabSelectorItem';
diff --git a/src/components/Text.tsx b/src/components/Text.tsx
index 96a6f535877a..baa3f064b44e 100644
--- a/src/components/Text.tsx
+++ b/src/components/Text.tsx
@@ -3,7 +3,7 @@ import React, {ForwardedRef} from 'react';
 import {Text as RNText, TextProps as RNTextProps, StyleSheet} from 'react-native';
 import type {TextStyle} from 'react-native';
 import fontFamily from '@styles/fontFamily';
-import useTheme from '@styles/themes/useTheme';
+import useTheme from '@styles/theme/useTheme';
 import variables from '@styles/variables';
 
 type TextProps = RNTextProps & {
diff --git a/src/components/TextInput/BaseTextInput/index.js b/src/components/TextInput/BaseTextInput/index.js
index cf8ae90c727a..7a3bf3a0301f 100644
--- a/src/components/TextInput/BaseTextInput/index.js
+++ b/src/components/TextInput/BaseTextInput/index.js
@@ -17,7 +17,7 @@ import * as Browser from '@libs/Browser';
 import isInputAutoFilled from '@libs/isInputAutoFilled';
 import useNativeDriver from '@libs/useNativeDriver';
 import * as StyleUtils from '@styles/StyleUtils';
-import useTheme from '@styles/themes/useTheme';
+import useTheme from '@styles/theme/useTheme';
 import useThemeStyles from '@styles/useThemeStyles';
 import variables from '@styles/variables';
 import CONST from '@src/CONST';
diff --git a/src/components/TextInput/BaseTextInput/index.native.js b/src/components/TextInput/BaseTextInput/index.native.js
index 190104198986..18cb9a9091ba 100644
--- a/src/components/TextInput/BaseTextInput/index.native.js
+++ b/src/components/TextInput/BaseTextInput/index.native.js
@@ -17,7 +17,7 @@ import getSecureEntryKeyboardType from '@libs/getSecureEntryKeyboardType';
 import isInputAutoFilled from '@libs/isInputAutoFilled';
 import useNativeDriver from '@libs/useNativeDriver';
 import * as StyleUtils from '@styles/StyleUtils';
-import useTheme from '@styles/themes/useTheme';
+import useTheme from '@styles/theme/useTheme';
 import useThemeStyles from '@styles/useThemeStyles';
 import variables from '@styles/variables';
 import CONST from '@src/CONST';
diff --git a/src/components/Tooltip/TooltipRenderedOnPageBody.js b/src/components/Tooltip/TooltipRenderedOnPageBody.js
index d92457238675..6ce66feb510a 100644
--- a/src/components/Tooltip/TooltipRenderedOnPageBody.js
+++ b/src/components/Tooltip/TooltipRenderedOnPageBody.js
@@ -5,7 +5,7 @@ import {Animated, View} from 'react-native';
 import Text from '@components/Text';
 import Log from '@libs/Log';
 import getTooltipStyles from '@styles/getTooltipStyles';
-import useTheme from '@styles/themes/useTheme';
+import useTheme from '@styles/theme/useTheme';
 import useThemeStyles from '@styles/useThemeStyles';
 
 const propTypes = {
diff --git a/src/components/ValidateCode/ExpiredValidateCodeModal.js b/src/components/ValidateCode/ExpiredValidateCodeModal.js
index caeef8a14a0a..56bfb9d50f2f 100644
--- a/src/components/ValidateCode/ExpiredValidateCodeModal.js
+++ b/src/components/ValidateCode/ExpiredValidateCodeModal.js
@@ -5,7 +5,7 @@ import * as Expensicons from '@components/Icon/Expensicons';
 import * as Illustrations from '@components/Icon/Illustrations';
 import Text from '@components/Text';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
-import useTheme from '@styles/themes/useTheme';
+import useTheme from '@styles/theme/useTheme';
 import useThemeStyles from '@styles/useThemeStyles';
 import variables from '@styles/variables';
 
diff --git a/src/components/ValidateCode/JustSignedInModal.js b/src/components/ValidateCode/JustSignedInModal.js
index 0ae4c882784c..2def68a3982b 100644
--- a/src/components/ValidateCode/JustSignedInModal.js
+++ b/src/components/ValidateCode/JustSignedInModal.js
@@ -6,7 +6,7 @@ import * as Expensicons from '@components/Icon/Expensicons';
 import * as Illustrations from '@components/Icon/Illustrations';
 import Text from '@components/Text';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
-import useTheme from '@styles/themes/useTheme';
+import useTheme from '@styles/theme/useTheme';
 import useThemeStyles from '@styles/useThemeStyles';
 import variables from '@styles/variables';
 
diff --git a/src/components/ValidateCode/ValidateCodeModal.js b/src/components/ValidateCode/ValidateCodeModal.js
index 58f9b24e3c91..6296d7414d84 100644
--- a/src/components/ValidateCode/ValidateCodeModal.js
+++ b/src/components/ValidateCode/ValidateCodeModal.js
@@ -10,7 +10,7 @@ import * as Illustrations from '@components/Icon/Illustrations';
 import Text from '@components/Text';
 import TextLink from '@components/TextLink';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
-import useTheme from '@styles/themes/useTheme';
+import useTheme from '@styles/theme/useTheme';
 import useThemeStyles from '@styles/useThemeStyles';
 import variables from '@styles/variables';
 import * as Session from '@userActions/Session';
diff --git a/src/components/VideoChatButtonAndMenu/BaseVideoChatButtonAndMenu.js b/src/components/VideoChatButtonAndMenu/BaseVideoChatButtonAndMenu.js
index 4d5affafc407..037483281502 100755
--- a/src/components/VideoChatButtonAndMenu/BaseVideoChatButtonAndMenu.js
+++ b/src/components/VideoChatButtonAndMenu/BaseVideoChatButtonAndMenu.js
@@ -13,7 +13,7 @@ import Tooltip from '@components/Tooltip/PopoverAnchorTooltip';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
 import withWindowDimensions, {windowDimensionsPropTypes} from '@components/withWindowDimensions';
 import compose from '@libs/compose';
-import useTheme from '@styles/themes/useTheme';
+import useTheme from '@styles/theme/useTheme';
 import useThemeStyles from '@styles/useThemeStyles';
 import * as Link from '@userActions/Link';
 import * as Session from '@userActions/Session';
diff --git a/src/components/withTheme.tsx b/src/components/withTheme.tsx
index 532ff6e5c375..4155f4a209a3 100644
--- a/src/components/withTheme.tsx
+++ b/src/components/withTheme.tsx
@@ -1,8 +1,8 @@
 import PropTypes from 'prop-types';
 import React, {ComponentType, ForwardedRef, forwardRef, ReactElement, RefAttributes} from 'react';
 import getComponentDisplayName from '@libs/getComponentDisplayName';
-import {type ThemeColors} from '@styles/themes/types';
-import useTheme from '@styles/themes/useTheme';
+import {type ThemeColors} from '@styles/theme/types';
+import useTheme from '@styles/theme/useTheme';
 
 const withThemePropTypes = {
     theme: PropTypes.object.isRequired,
diff --git a/src/libs/Navigation/NavigationRoot.tsx b/src/libs/Navigation/NavigationRoot.tsx
index 7c0b9ef4fc8c..96f8173404dc 100644
--- a/src/libs/Navigation/NavigationRoot.tsx
+++ b/src/libs/Navigation/NavigationRoot.tsx
@@ -4,7 +4,7 @@ import useCurrentReportID from '@hooks/useCurrentReportID';
 import useFlipper from '@hooks/useFlipper';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import Log from '@libs/Log';
-import useTheme from '@styles/themes/useTheme';
+import useTheme from '@styles/theme/useTheme';
 import AppNavigator from './AppNavigator';
 import linkingConfig from './linkingConfig';
 import Navigation, {navigationRef} from './Navigation';
diff --git a/src/pages/ErrorPage/GenericErrorPage.js b/src/pages/ErrorPage/GenericErrorPage.js
index ba9bd783752b..03981053b072 100644
--- a/src/pages/ErrorPage/GenericErrorPage.js
+++ b/src/pages/ErrorPage/GenericErrorPage.js
@@ -10,7 +10,7 @@ import Text from '@components/Text';
 import TextLink from '@components/TextLink';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
 import * as StyleUtils from '@styles/StyleUtils';
-import useTheme from '@styles/themes/useTheme';
+import useTheme from '@styles/theme/useTheme';
 import useThemeStyles from '@styles/useThemeStyles';
 import variables from '@styles/variables';
 import * as Session from '@userActions/Session';
diff --git a/src/pages/LogInWithShortLivedAuthTokenPage.js b/src/pages/LogInWithShortLivedAuthTokenPage.js
index 16d0c3909d62..25cc9805977d 100644
--- a/src/pages/LogInWithShortLivedAuthTokenPage.js
+++ b/src/pages/LogInWithShortLivedAuthTokenPage.js
@@ -11,7 +11,7 @@ import Text from '@components/Text';
 import TextLink from '@components/TextLink';
 import useLocalize from '@hooks/useLocalize';
 import Navigation from '@libs/Navigation/Navigation';
-import useTheme from '@styles/themes/useTheme';
+import useTheme from '@styles/theme/useTheme';
 import useThemeStyles from '@styles/useThemeStyles';
 import * as Session from '@userActions/Session';
 import ONYXKEYS from '@src/ONYXKEYS';
diff --git a/src/pages/ReimbursementAccount/BankAccountStep.js b/src/pages/ReimbursementAccount/BankAccountStep.js
index 898af1ce7108..dfb9acd7a362 100644
--- a/src/pages/ReimbursementAccount/BankAccountStep.js
+++ b/src/pages/ReimbursementAccount/BankAccountStep.js
@@ -17,7 +17,7 @@ import TextLink from '@components/TextLink';
 import withLocalize from '@components/withLocalize';
 import compose from '@libs/compose';
 import getPlaidDesktopMessage from '@libs/getPlaidDesktopMessage';
-import useTheme from '@styles/themes/useTheme';
+import useTheme from '@styles/theme/useTheme';
 import useThemeStyles from '@styles/useThemeStyles';
 import * as BankAccounts from '@userActions/BankAccounts';
 import * as Link from '@userActions/Link';
diff --git a/src/pages/TeachersUnite/SaveTheWorldPage.js b/src/pages/TeachersUnite/SaveTheWorldPage.js
index d179b7d1db95..5d9b246358a9 100644
--- a/src/pages/TeachersUnite/SaveTheWorldPage.js
+++ b/src/pages/TeachersUnite/SaveTheWorldPage.js
@@ -9,7 +9,7 @@ import MenuItem from '@components/MenuItem';
 import Text from '@components/Text';
 import useLocalize from '@hooks/useLocalize';
 import Navigation from '@libs/Navigation/Navigation';
-import useTheme from '@styles/themes/useTheme';
+import useTheme from '@styles/theme/useTheme';
 import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
diff --git a/src/pages/home/HeaderView.js b/src/pages/home/HeaderView.js
index 5b57419c8530..8453576bd257 100644
--- a/src/pages/home/HeaderView.js
+++ b/src/pages/home/HeaderView.js
@@ -28,7 +28,7 @@ import * as OptionsListUtils from '@libs/OptionsListUtils';
 import * as ReportActionsUtils from '@libs/ReportActionsUtils';
 import * as ReportUtils from '@libs/ReportUtils';
 import reportPropTypes from '@pages/reportPropTypes';
-import useTheme from '@styles/themes/useTheme';
+import useTheme from '@styles/theme/useTheme';
 import useThemeStyles from '@styles/useThemeStyles';
 import * as Link from '@userActions/Link';
 import * as Report from '@userActions/Report';
diff --git a/src/pages/home/report/ContextMenu/BaseReportActionContextMenu.js b/src/pages/home/report/ContextMenu/BaseReportActionContextMenu.js
index 051e559c34b6..98b8db99715c 100755
--- a/src/pages/home/report/ContextMenu/BaseReportActionContextMenu.js
+++ b/src/pages/home/report/ContextMenu/BaseReportActionContextMenu.js
@@ -13,7 +13,7 @@ import useKeyboardShortcut from '@hooks/useKeyboardShortcut';
 import useNetwork from '@hooks/useNetwork';
 import compose from '@libs/compose';
 import getReportActionContextMenuStyles from '@styles/getReportActionContextMenuStyles';
-import useTheme from '@styles/themes/useTheme';
+import useTheme from '@styles/theme/useTheme';
 import useThemeStyles from '@styles/useThemeStyles';
 import * as Session from '@userActions/Session';
 import CONST from '@src/CONST';
diff --git a/src/pages/home/report/FloatingMessageCounter/index.js b/src/pages/home/report/FloatingMessageCounter/index.js
index fe0a343e973b..c0a8fb9dff86 100644
--- a/src/pages/home/report/FloatingMessageCounter/index.js
+++ b/src/pages/home/report/FloatingMessageCounter/index.js
@@ -7,7 +7,7 @@ import * as Expensicons from '@components/Icon/Expensicons';
 import Text from '@components/Text';
 import useLocalize from '@hooks/useLocalize';
 import useNativeDriver from '@libs/useNativeDriver';
-import useTheme from '@styles/themes/useTheme';
+import useTheme from '@styles/theme/useTheme';
 import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 import FloatingMessageCounterContainer from './FloatingMessageCounterContainer';
diff --git a/src/pages/home/report/LinkPreviewer.js b/src/pages/home/report/LinkPreviewer.js
index c1770769bde1..7f02cddab2ba 100644
--- a/src/pages/home/report/LinkPreviewer.js
+++ b/src/pages/home/report/LinkPreviewer.js
@@ -6,7 +6,7 @@ import _ from 'underscore';
 import Text from '@components/Text';
 import TextLink from '@components/TextLink';
 import * as StyleUtils from '@styles/StyleUtils';
-import useTheme from '@styles/themes/useTheme';
+import useTheme from '@styles/theme/useTheme';
 import useThemeStyles from '@styles/useThemeStyles';
 import variables from '@styles/variables';
 
diff --git a/src/pages/home/report/ListBoundaryLoader/ListBoundaryLoader.js b/src/pages/home/report/ListBoundaryLoader/ListBoundaryLoader.js
index 7184944d5902..367031c16936 100644
--- a/src/pages/home/report/ListBoundaryLoader/ListBoundaryLoader.js
+++ b/src/pages/home/report/ListBoundaryLoader/ListBoundaryLoader.js
@@ -3,7 +3,7 @@ import React from 'react';
 import {ActivityIndicator, View} from 'react-native';
 import ReportActionsSkeletonView from '@components/ReportActionsSkeletonView';
 import useNetwork from '@hooks/useNetwork';
-import useTheme from '@styles/themes/useTheme';
+import useTheme from '@styles/theme/useTheme';
 import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 
diff --git a/src/pages/home/report/ReactionList/HeaderReactionList.js b/src/pages/home/report/ReactionList/HeaderReactionList.js
index 2d4e6bfbb35a..38919a51f02d 100644
--- a/src/pages/home/report/ReactionList/HeaderReactionList.js
+++ b/src/pages/home/report/ReactionList/HeaderReactionList.js
@@ -7,7 +7,7 @@ import withWindowDimensions, {windowDimensionsPropTypes} from '@components/withW
 import compose from '@libs/compose';
 import * as EmojiUtils from '@libs/EmojiUtils';
 import * as StyleUtils from '@styles/StyleUtils';
-import useTheme from '@styles/themes/useTheme';
+import useTheme from '@styles/theme/useTheme';
 import useThemeStyles from '@styles/useThemeStyles';
 import reactionPropTypes from './reactionPropTypes';
 
diff --git a/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.js b/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.js
index a3fdc7f574f6..ddb2b9a1f57d 100644
--- a/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.js
+++ b/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.js
@@ -27,7 +27,7 @@ import willBlurTextInputOnTapOutsideFunc from '@libs/willBlurTextInputOnTapOutsi
 import SilentCommentUpdater from '@pages/home/report/ReportActionCompose/SilentCommentUpdater';
 import Suggestions from '@pages/home/report/ReportActionCompose/Suggestions';
 import containerComposeStyles from '@styles/containerComposeStyles';
-import useTheme from '@styles/themes/useTheme';
+import useTheme from '@styles/theme/useTheme';
 import useThemeStyles from '@styles/useThemeStyles';
 import * as EmojiPickerActions from '@userActions/EmojiPickerAction';
 import * as InputFocus from '@userActions/InputFocus';
diff --git a/src/pages/home/report/ReportActionCompose/SendButton.js b/src/pages/home/report/ReportActionCompose/SendButton.js
index 60c657ca95c7..9d6630f31e78 100644
--- a/src/pages/home/report/ReportActionCompose/SendButton.js
+++ b/src/pages/home/report/ReportActionCompose/SendButton.js
@@ -7,7 +7,7 @@ import * as Expensicons from '@components/Icon/Expensicons';
 import PressableWithFeedback from '@components/Pressable/PressableWithFeedback';
 import Tooltip from '@components/Tooltip';
 import useLocalize from '@hooks/useLocalize';
-import useTheme from '@styles/themes/useTheme';
+import useTheme from '@styles/theme/useTheme';
 import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 
diff --git a/src/pages/home/report/ReportActionItem.js b/src/pages/home/report/ReportActionItem.js
index 92bb370155c9..cec07395110e 100644
--- a/src/pages/home/report/ReportActionItem.js
+++ b/src/pages/home/report/ReportActionItem.js
@@ -47,7 +47,7 @@ import userWalletPropTypes from '@pages/EnablePayments/userWalletPropTypes';
 import {ReactionListContext} from '@pages/home/ReportScreenContext';
 import reportPropTypes from '@pages/reportPropTypes';
 import * as StyleUtils from '@styles/StyleUtils';
-import useTheme from '@styles/themes/useTheme';
+import useTheme from '@styles/theme/useTheme';
 import useThemeStyles from '@styles/useThemeStyles';
 import * as BankAccounts from '@userActions/BankAccounts';
 import * as EmojiPickerAction from '@userActions/EmojiPickerAction';
diff --git a/src/pages/home/report/ReportActionItemMessageEdit.js b/src/pages/home/report/ReportActionItemMessageEdit.js
index 1ed5db385f7a..d9d8e67bf936 100644
--- a/src/pages/home/report/ReportActionItemMessageEdit.js
+++ b/src/pages/home/report/ReportActionItemMessageEdit.js
@@ -28,7 +28,7 @@ import * as ReportUtils from '@libs/ReportUtils';
 import setShouldShowComposeInputKeyboardAware from '@libs/setShouldShowComposeInputKeyboardAware';
 import reportPropTypes from '@pages/reportPropTypes';
 import containerComposeStyles from '@styles/containerComposeStyles';
-import useTheme from '@styles/themes/useTheme';
+import useTheme from '@styles/theme/useTheme';
 import useThemeStyles from '@styles/useThemeStyles';
 import * as EmojiPickerAction from '@userActions/EmojiPickerAction';
 import * as InputFocus from '@userActions/InputFocus';
diff --git a/src/pages/home/report/ReportActionItemSingle.js b/src/pages/home/report/ReportActionItemSingle.js
index b13d57ad2976..094989f3db23 100644
--- a/src/pages/home/report/ReportActionItemSingle.js
+++ b/src/pages/home/report/ReportActionItemSingle.js
@@ -21,7 +21,7 @@ import * as UserUtils from '@libs/UserUtils';
 import reportPropTypes from '@pages/reportPropTypes';
 import stylePropTypes from '@styles/stylePropTypes';
 import * as StyleUtils from '@styles/StyleUtils';
-import useTheme from '@styles/themes/useTheme';
+import useTheme from '@styles/theme/useTheme';
 import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 import ROUTES from '@src/ROUTES';
diff --git a/src/pages/home/report/comment/TextCommentFragment.js b/src/pages/home/report/comment/TextCommentFragment.js
index 403c470dfc9d..67cc8f101ccc 100644
--- a/src/pages/home/report/comment/TextCommentFragment.js
+++ b/src/pages/home/report/comment/TextCommentFragment.js
@@ -12,7 +12,7 @@ import * as EmojiUtils from '@libs/EmojiUtils';
 import reportActionFragmentPropTypes from '@pages/home/report/reportActionFragmentPropTypes';
 import reportActionSourcePropType from '@pages/home/report/reportActionSourcePropType';
 import editedLabelStyles from '@styles/editedLabelStyles';
-import useTheme from '@styles/themes/useTheme';
+import useTheme from '@styles/theme/useTheme';
 import useThemeStyles from '@styles/useThemeStyles';
 import variables from '@styles/variables';
 import CONST from '@src/CONST';
diff --git a/src/pages/home/sidebar/SidebarLinks.js b/src/pages/home/sidebar/SidebarLinks.js
index 2aba742f157f..749a43892bda 100644
--- a/src/pages/home/sidebar/SidebarLinks.js
+++ b/src/pages/home/sidebar/SidebarLinks.js
@@ -20,7 +20,7 @@ import SidebarUtils from '@libs/SidebarUtils';
 import * as ReportActionContextMenu from '@pages/home/report/ContextMenu/ReportActionContextMenu';
 import safeAreaInsetPropTypes from '@pages/safeAreaInsetPropTypes';
 import * as StyleUtils from '@styles/StyleUtils';
-import useTheme from '@styles/themes/useTheme';
+import useTheme from '@styles/theme/useTheme';
 import useThemeStyles from '@styles/useThemeStyles';
 import variables from '@styles/variables';
 import * as App from '@userActions/App';
diff --git a/src/pages/iou/ReceiptSelector/index.js b/src/pages/iou/ReceiptSelector/index.js
index dd7c2e3a104e..0c9050a1e4d6 100644
--- a/src/pages/iou/ReceiptSelector/index.js
+++ b/src/pages/iou/ReceiptSelector/index.js
@@ -22,7 +22,7 @@ import Navigation from '@libs/Navigation/Navigation';
 import {iouDefaultProps, iouPropTypes} from '@pages/iou/propTypes';
 import ReceiptDropUI from '@pages/iou/ReceiptDropUI';
 import reportPropTypes from '@pages/reportPropTypes';
-import useTheme from '@styles/themes/useTheme';
+import useTheme from '@styles/theme/useTheme';
 import useThemeStyles from '@styles/useThemeStyles';
 import * as IOU from '@userActions/IOU';
 import CONST from '@src/CONST';
diff --git a/src/pages/iou/ReceiptSelector/index.native.js b/src/pages/iou/ReceiptSelector/index.native.js
index 1addabdd929d..da82d9c3bfa4 100644
--- a/src/pages/iou/ReceiptSelector/index.native.js
+++ b/src/pages/iou/ReceiptSelector/index.native.js
@@ -18,7 +18,7 @@ import Log from '@libs/Log';
 import Navigation from '@libs/Navigation/Navigation';
 import {iouDefaultProps, iouPropTypes} from '@pages/iou/propTypes';
 import reportPropTypes from '@pages/reportPropTypes';
-import useTheme from '@styles/themes/useTheme';
+import useTheme from '@styles/theme/useTheme';
 import useThemeStyles from '@styles/useThemeStyles';
 import * as IOU from '@userActions/IOU';
 import CONST from '@src/CONST';
diff --git a/src/pages/settings/InitialSettingsPage.js b/src/pages/settings/InitialSettingsPage.js
index 8ca1f96b3796..dfcefc1a6441 100755
--- a/src/pages/settings/InitialSettingsPage.js
+++ b/src/pages/settings/InitialSettingsPage.js
@@ -33,7 +33,7 @@ import {CONTEXT_MENU_TYPES} from '@pages/home/report/ContextMenu/ContextMenuActi
 import * as ReportActionContextMenu from '@pages/home/report/ContextMenu/ReportActionContextMenu';
 import policyMemberPropType from '@pages/policyMemberPropType';
 import * as ReimbursementAccountProps from '@pages/ReimbursementAccount/reimbursementAccountPropTypes';
-import useTheme from '@styles/themes/useTheme';
+import useTheme from '@styles/theme/useTheme';
 import useThemeStyles from '@styles/useThemeStyles';
 import * as Link from '@userActions/Link';
 import * as PaymentMethods from '@userActions/PaymentMethods';
diff --git a/src/pages/settings/Preferences/PreferencesPage.js b/src/pages/settings/Preferences/PreferencesPage.js
index b010c3790056..bcbc95ff33b5 100755
--- a/src/pages/settings/Preferences/PreferencesPage.js
+++ b/src/pages/settings/Preferences/PreferencesPage.js
@@ -12,7 +12,7 @@ import Text from '@components/Text';
 import useEnvironment from '@hooks/useEnvironment';
 import useLocalize from '@hooks/useLocalize';
 import Navigation from '@libs/Navigation/Navigation';
-import useTheme from '@styles/themes/useTheme';
+import useTheme from '@styles/theme/useTheme';
 import useThemeStyles from '@styles/useThemeStyles';
 import * as User from '@userActions/User';
 import CONST from '@src/CONST';
diff --git a/src/pages/settings/Profile/Contacts/ValidateCodeForm/BaseValidateCodeForm.js b/src/pages/settings/Profile/Contacts/ValidateCodeForm/BaseValidateCodeForm.js
index f0aea2301383..d2c2bd8a3b19 100644
--- a/src/pages/settings/Profile/Contacts/ValidateCodeForm/BaseValidateCodeForm.js
+++ b/src/pages/settings/Profile/Contacts/ValidateCodeForm/BaseValidateCodeForm.js
@@ -17,7 +17,7 @@ import compose from '@libs/compose';
 import * as ErrorUtils from '@libs/ErrorUtils';
 import * as ValidationUtils from '@libs/ValidationUtils';
 import * as StyleUtils from '@styles/StyleUtils';
-import useTheme from '@styles/themes/useTheme';
+import useTheme from '@styles/theme/useTheme';
 import useThemeStyles from '@styles/useThemeStyles';
 import * as Session from '@userActions/Session';
 import * as User from '@userActions/User';
diff --git a/src/pages/settings/Profile/CustomStatus/StatusPage.js b/src/pages/settings/Profile/CustomStatus/StatusPage.js
index 6850684cfda2..52f616cb162d 100644
--- a/src/pages/settings/Profile/CustomStatus/StatusPage.js
+++ b/src/pages/settings/Profile/CustomStatus/StatusPage.js
@@ -13,7 +13,7 @@ import withCurrentUserPersonalDetails, {withCurrentUserPersonalDetailsPropTypes}
 import useLocalize from '@hooks/useLocalize';
 import compose from '@libs/compose';
 import Navigation from '@libs/Navigation/Navigation';
-import useTheme from '@styles/themes/useTheme';
+import useTheme from '@styles/theme/useTheme';
 import useThemeStyles from '@styles/useThemeStyles';
 import * as User from '@userActions/User';
 import ONYXKEYS from '@src/ONYXKEYS';
diff --git a/src/pages/settings/Security/SecuritySettingsPage.js b/src/pages/settings/Security/SecuritySettingsPage.js
index 95a0efa2fc39..759f4cccf697 100644
--- a/src/pages/settings/Security/SecuritySettingsPage.js
+++ b/src/pages/settings/Security/SecuritySettingsPage.js
@@ -11,7 +11,7 @@ import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
 import useWaitForNavigation from '@hooks/useWaitForNavigation';
 import compose from '@libs/compose';
 import Navigation from '@libs/Navigation/Navigation';
-import useTheme from '@styles/themes/useTheme';
+import useTheme from '@styles/theme/useTheme';
 import useThemeStyles from '@styles/useThemeStyles';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
diff --git a/src/pages/settings/Security/TwoFactorAuth/Steps/CodesStep.js b/src/pages/settings/Security/TwoFactorAuth/Steps/CodesStep.js
index 86d218ec63ae..9c6024f5f472 100644
--- a/src/pages/settings/Security/TwoFactorAuth/Steps/CodesStep.js
+++ b/src/pages/settings/Security/TwoFactorAuth/Steps/CodesStep.js
@@ -17,7 +17,7 @@ import localFileDownload from '@libs/localFileDownload';
 import StepWrapper from '@pages/settings/Security/TwoFactorAuth/StepWrapper/StepWrapper';
 import useTwoFactorAuthContext from '@pages/settings/Security/TwoFactorAuth/TwoFactorAuthContext/useTwoFactorAuth';
 import {defaultAccount, TwoFactorAuthPropTypes} from '@pages/settings/Security/TwoFactorAuth/TwoFactorAuthPropTypes';
-import useTheme from '@styles/themes/useTheme';
+import useTheme from '@styles/theme/useTheme';
 import useThemeStyles from '@styles/useThemeStyles';
 import * as Session from '@userActions/Session';
 import * as TwoFactorAuthActions from '@userActions/TwoFactorAuthActions';
diff --git a/src/pages/settings/Security/TwoFactorAuth/Steps/EnabledStep.js b/src/pages/settings/Security/TwoFactorAuth/Steps/EnabledStep.js
index e0f90c57f350..274ff5e09377 100644
--- a/src/pages/settings/Security/TwoFactorAuth/Steps/EnabledStep.js
+++ b/src/pages/settings/Security/TwoFactorAuth/Steps/EnabledStep.js
@@ -7,7 +7,7 @@ import Section from '@components/Section';
 import useLocalize from '@hooks/useLocalize';
 import StepWrapper from '@pages/settings/Security/TwoFactorAuth/StepWrapper/StepWrapper';
 import useTwoFactorAuthContext from '@pages/settings/Security/TwoFactorAuth/TwoFactorAuthContext/useTwoFactorAuth';
-import useTheme from '@styles/themes/useTheme';
+import useTheme from '@styles/theme/useTheme';
 import useThemeStyles from '@styles/useThemeStyles';
 import * as Session from '@userActions/Session';
 import CONST from '@src/CONST';
diff --git a/src/pages/settings/Wallet/ActivatePhysicalCardPage.js b/src/pages/settings/Wallet/ActivatePhysicalCardPage.js
index e45b4ad67f4e..f616dba20be1 100644
--- a/src/pages/settings/Wallet/ActivatePhysicalCardPage.js
+++ b/src/pages/settings/Wallet/ActivatePhysicalCardPage.js
@@ -18,7 +18,7 @@ import * as DeviceCapabilities from '@libs/DeviceCapabilities';
 import * as ErrorUtils from '@libs/ErrorUtils';
 import Navigation from '@libs/Navigation/Navigation';
 import NotFoundPage from '@pages/ErrorPage/NotFoundPage';
-import useTheme from '@styles/themes/useTheme';
+import useTheme from '@styles/theme/useTheme';
 import useThemeStyles from '@styles/useThemeStyles';
 import * as CardSettings from '@userActions/Card';
 import CONST from '@src/CONST';
diff --git a/src/pages/settings/Wallet/ExpensifyCardPage.js b/src/pages/settings/Wallet/ExpensifyCardPage.js
index e92fca171817..0aa2e1516e8f 100644
--- a/src/pages/settings/Wallet/ExpensifyCardPage.js
+++ b/src/pages/settings/Wallet/ExpensifyCardPage.js
@@ -19,7 +19,7 @@ import FormUtils from '@libs/FormUtils';
 import * as GetPhysicalCardUtils from '@libs/GetPhysicalCardUtils';
 import Navigation from '@libs/Navigation/Navigation';
 import NotFoundPage from '@pages/ErrorPage/NotFoundPage';
-import useTheme from '@styles/themes/useTheme';
+import useTheme from '@styles/theme/useTheme';
 import useThemeStyles from '@styles/useThemeStyles';
 import * as Card from '@userActions/Card';
 import * as Link from '@userActions/Link';
diff --git a/src/pages/settings/Wallet/PaymentMethodList.js b/src/pages/settings/Wallet/PaymentMethodList.js
index 60605311b1ab..ed7040ce9ec7 100644
--- a/src/pages/settings/Wallet/PaymentMethodList.js
+++ b/src/pages/settings/Wallet/PaymentMethodList.js
@@ -22,7 +22,7 @@ import Navigation from '@libs/Navigation/Navigation';
 import * as PaymentUtils from '@libs/PaymentUtils';
 import stylePropTypes from '@styles/stylePropTypes';
 import * as StyleUtils from '@styles/StyleUtils';
-import useTheme from '@styles/themes/useTheme';
+import useTheme from '@styles/theme/useTheme';
 import useThemeStyles from '@styles/useThemeStyles';
 import variables from '@styles/variables';
 import * as PaymentMethods from '@userActions/PaymentMethods';
diff --git a/src/pages/settings/Wallet/WalletEmptyState.js b/src/pages/settings/Wallet/WalletEmptyState.js
index f2235dfafef2..824671418df7 100644
--- a/src/pages/settings/Wallet/WalletEmptyState.js
+++ b/src/pages/settings/Wallet/WalletEmptyState.js
@@ -7,7 +7,7 @@ import IllustratedHeaderPageLayout from '@components/IllustratedHeaderPageLayout
 import LottieAnimations from '@components/LottieAnimations';
 import useLocalize from '@hooks/useLocalize';
 import Navigation from '@libs/Navigation/Navigation';
-import useTheme from '@styles/themes/useTheme';
+import useTheme from '@styles/theme/useTheme';
 import ROUTES from '@src/ROUTES';
 import SCREENS from '@src/SCREENS';
 
diff --git a/src/pages/settings/Wallet/WalletPage/WalletPage.js b/src/pages/settings/Wallet/WalletPage/WalletPage.js
index 6f452eed3629..5c6b95575cd6 100644
--- a/src/pages/settings/Wallet/WalletPage/WalletPage.js
+++ b/src/pages/settings/Wallet/WalletPage/WalletPage.js
@@ -27,7 +27,7 @@ import Navigation from '@libs/Navigation/Navigation';
 import * as PaymentUtils from '@libs/PaymentUtils';
 import PaymentMethodList from '@pages/settings/Wallet/PaymentMethodList';
 import WalletEmptyState from '@pages/settings/Wallet/WalletEmptyState';
-import useTheme from '@styles/themes/useTheme';
+import useTheme from '@styles/theme/useTheme';
 import useThemeStyles from '@styles/useThemeStyles';
 import variables from '@styles/variables';
 import * as BankAccounts from '@userActions/BankAccounts';
diff --git a/src/pages/signin/SignInPage.js b/src/pages/signin/SignInPage.js
index 6676dc99b911..376bcff62ab0 100644
--- a/src/pages/signin/SignInPage.js
+++ b/src/pages/signin/SignInPage.js
@@ -15,7 +15,7 @@ import Log from '@libs/Log';
 import Navigation from '@libs/Navigation/Navigation';
 import Performance from '@libs/Performance';
 import * as StyleUtils from '@styles/StyleUtils';
-import ThemeProvider from '@styles/themes/ThemeProvider';
+import ThemeProvider from '@styles/theme/ThemeProvider';
 import ThemeStylesProvider from '@styles/ThemeStylesProvider';
 import useThemeStyles from '@styles/useThemeStyles';
 import * as App from '@userActions/App';
diff --git a/src/pages/signin/SignInPageLayout/Footer.js b/src/pages/signin/SignInPageLayout/Footer.js
index 86fb6a08341a..69b0ae3b909f 100644
--- a/src/pages/signin/SignInPageLayout/Footer.js
+++ b/src/pages/signin/SignInPageLayout/Footer.js
@@ -11,7 +11,7 @@ import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
 import Licenses from '@pages/signin/Licenses';
 import Socials from '@pages/signin/Socials';
 import * as StyleUtils from '@styles/StyleUtils';
-import useTheme from '@styles/themes/useTheme';
+import useTheme from '@styles/theme/useTheme';
 import useThemeStyles from '@styles/useThemeStyles';
 import variables from '@styles/variables';
 import * as Session from '@userActions/Session';
diff --git a/src/pages/signin/SignInPageLayout/index.js b/src/pages/signin/SignInPageLayout/index.js
index b6c82fc843cd..6521ee624840 100644
--- a/src/pages/signin/SignInPageLayout/index.js
+++ b/src/pages/signin/SignInPageLayout/index.js
@@ -9,7 +9,7 @@ import useWindowDimensions from '@hooks/useWindowDimensions';
 import compose from '@libs/compose';
 import SignInPageHero from '@pages/signin/SignInPageHero';
 import * as StyleUtils from '@styles/StyleUtils';
-import useTheme from '@styles/themes/useTheme';
+import useTheme from '@styles/theme/useTheme';
 import useThemeStyles from '@styles/useThemeStyles';
 import variables from '@styles/variables';
 import BackgroundImage from './BackgroundImage';
diff --git a/src/pages/signin/Socials.js b/src/pages/signin/Socials.js
index f5cbbd81e2d8..97073ef1f552 100644
--- a/src/pages/signin/Socials.js
+++ b/src/pages/signin/Socials.js
@@ -4,7 +4,7 @@ import _ from 'underscore';
 import Icon from '@components/Icon';
 import * as Expensicons from '@components/Icon/Expensicons';
 import PressableWithoutFeedback from '@components/Pressable/PressableWithoutFeedback';
-import useTheme from '@styles/themes/useTheme';
+import useTheme from '@styles/theme/useTheme';
 import useThemeStyles from '@styles/useThemeStyles';
 import variables from '@styles/variables';
 import * as Link from '@userActions/Link';
diff --git a/src/pages/signin/ValidateCodeForm/BaseValidateCodeForm.js b/src/pages/signin/ValidateCodeForm/BaseValidateCodeForm.js
index 7c48d557cd16..5151042c410e 100755
--- a/src/pages/signin/ValidateCodeForm/BaseValidateCodeForm.js
+++ b/src/pages/signin/ValidateCodeForm/BaseValidateCodeForm.js
@@ -21,7 +21,7 @@ import * as ValidationUtils from '@libs/ValidationUtils';
 import ChangeExpensifyLoginLink from '@pages/signin/ChangeExpensifyLoginLink';
 import Terms from '@pages/signin/Terms';
 import * as StyleUtils from '@styles/StyleUtils';
-import useTheme from '@styles/themes/useTheme';
+import useTheme from '@styles/theme/useTheme';
 import useThemeStyles from '@styles/useThemeStyles';
 import * as Session from '@userActions/Session';
 import * as User from '@userActions/User';
diff --git a/src/pages/workspace/WorkspacesListPage.js b/src/pages/workspace/WorkspacesListPage.js
index cf258b462285..d2d40be041ec 100755
--- a/src/pages/workspace/WorkspacesListPage.js
+++ b/src/pages/workspace/WorkspacesListPage.js
@@ -19,7 +19,7 @@ import * as PolicyUtils from '@libs/PolicyUtils';
 import * as ReportUtils from '@libs/ReportUtils';
 import policyMemberPropType from '@pages/policyMemberPropType';
 import * as ReimbursementAccountProps from '@pages/ReimbursementAccount/reimbursementAccountPropTypes';
-import useTheme from '@styles/themes/useTheme';
+import useTheme from '@styles/theme/useTheme';
 import useThemeStyles from '@styles/useThemeStyles';
 import * as App from '@userActions/App';
 import * as Policy from '@userActions/Policy';
diff --git a/src/pages/workspace/reimburse/WorkspaceReimburseSection.js b/src/pages/workspace/reimburse/WorkspaceReimburseSection.js
index bf9111775f18..2b77eb0c4128 100644
--- a/src/pages/workspace/reimburse/WorkspaceReimburseSection.js
+++ b/src/pages/workspace/reimburse/WorkspaceReimburseSection.js
@@ -11,7 +11,7 @@ import Section from '@components/Section';
 import Text from '@components/Text';
 import BankAccount from '@libs/models/BankAccount';
 import * as ReimbursementAccountProps from '@pages/ReimbursementAccount/reimbursementAccountPropTypes';
-import useTheme from '@styles/themes/useTheme';
+import useTheme from '@styles/theme/useTheme';
 import useThemeStyles from '@styles/useThemeStyles';
 import * as Link from '@userActions/Link';
 import CONST from '@src/CONST';
diff --git a/src/stories/Composer.stories.js b/src/stories/Composer.stories.js
index 2db1011d1b3a..1ce005553af7 100644
--- a/src/stories/Composer.stories.js
+++ b/src/stories/Composer.stories.js
@@ -7,7 +7,7 @@ import Text from '@components/Text';
 import withNavigationFallback from '@components/withNavigationFallback';
 import styles from '@styles/styles';
 import * as StyleUtils from '@styles/StyleUtils';
-import themeColors from '@styles/themes/default';
+import themeColors from '@styles/theme/themes/dark';
 import CONST from '@src/CONST';
 
 const ComposerWithNavigation = withNavigationFallback(Composer);
diff --git a/src/stories/PopoverMenu.stories.js b/src/stories/PopoverMenu.stories.js
index b860a8343309..d416ce3e45b7 100644
--- a/src/stories/PopoverMenu.stories.js
+++ b/src/stories/PopoverMenu.stories.js
@@ -3,7 +3,7 @@ import {SafeAreaProvider} from 'react-native-safe-area-context';
 import * as Expensicons from '@components/Icon/Expensicons';
 import MenuItem from '@components/MenuItem';
 import PopoverMenu from '@components/PopoverMenu';
-import themeColors from '@styles/themes/default';
+import themeColors from '@styles/theme/themes/dark';
 
 /**
  * We use the Component Story Format for writing stories. Follow the docs here:
diff --git a/src/styles/StyleUtils.ts b/src/styles/StyleUtils.ts
index 64ef54a8ab84..b39e38833de7 100644
--- a/src/styles/StyleUtils.ts
+++ b/src/styles/StyleUtils.ts
@@ -9,7 +9,7 @@ import {Transaction} from '@src/types/onyx';
 import colors from './colors';
 import fontFamily from './fontFamily';
 import {type ThemeStyles} from './styles';
-import {type ThemeColors} from './themes/types';
+import {type ThemeColors} from './theme/types';
 import cursor from './utilities/cursor';
 import positioning from './utilities/positioning';
 import spacing from './utilities/spacing';
diff --git a/src/styles/ThemeStylesContext.ts b/src/styles/ThemeStylesContext.ts
index 1c81ab3b39a5..2d3e8a681875 100644
--- a/src/styles/ThemeStylesContext.ts
+++ b/src/styles/ThemeStylesContext.ts
@@ -1,6 +1,6 @@
 import React from 'react';
 import styles from './styles';
 
-const ThemeStylesContext = React.createContext(styles);
+const ThemeStylesContex./themes/themes/defaultContext(styles);
 
 export default ThemeStylesContext;
diff --git a/src/styles/ThemeStylesProvider.tsx b/src/styles/ThemeStylesProvider.tsx
index 1a60d61c4ea5..66db59ef0ccc 100644
--- a/src/styles/ThemeStylesProvider.tsx
+++ b/src/styles/ThemeStylesProvider.tsx
@@ -1,6 +1,6 @@
 import React, {useMemo} from 'react';
 import {stylesGenerator} from './styles';
-import useTheme from './themes/useTheme';
+import useTheme from './theme/useTheme';
 import ThemeStylesContext from './ThemeStylesContext';
 
 type ThemeStylesProviderProps = React.PropsWithChildren;
diff --git a/src/styles/addOutlineWidth/types.ts b/src/styles/addOutlineWidth/types.ts
index 91e3f7409259..f6b9be63893c 100644
--- a/src/styles/addOutlineWidth/types.ts
+++ b/src/styles/addOutlineWidth/types.ts
@@ -1,5 +1,5 @@
 import {TextStyle} from 'react-native';
-import {type ThemeColors} from '@styles/themes/types';
+import {type ThemeColors} from '@styles/theme/types';
 
 type AddOutlineWidth = (theme: ThemeColors, obj: TextStyle, val?: number, hasError?: boolean) => TextStyle;
 
diff --git a/src/styles/colors.ts b/src/styles/colors.ts
index fbe694e051ee..d2534fd15448 100644
--- a/src/styles/colors.ts
+++ b/src/styles/colors.ts
@@ -1,4 +1,4 @@
-import {Color} from './themes/types';
+import {Color} from './theme/types';
 
 /**
  * DO NOT import colors.js into files. Use the theme switching hooks and HOCs instead.
diff --git a/src/styles/getModalStyles.ts b/src/styles/getModalStyles.ts
index b11b350e4e9d..03ee7fa9c356 100644
--- a/src/styles/getModalStyles.ts
+++ b/src/styles/getModalStyles.ts
@@ -3,7 +3,7 @@ import {ModalProps} from 'react-native-modal';
 import {ValueOf} from 'type-fest';
 import CONST from '@src/CONST';
 import {type ThemeStyles} from './styles';
-import {type ThemeColors} from './themes/types';
+import {type ThemeColors} from './theme/types';
 import variables from './variables';
 
 function getCenteredModalStyles(styles: ThemeStyles, windowWidth: number, isSmallScreenWidth: boolean, isFullScreenWhenSmall = false): ViewStyle {
diff --git a/src/styles/getReportActionContextMenuStyles.ts b/src/styles/getReportActionContextMenuStyles.ts
index 86dd14cb8446..f21d81d41247 100644
--- a/src/styles/getReportActionContextMenuStyles.ts
+++ b/src/styles/getReportActionContextMenuStyles.ts
@@ -1,6 +1,6 @@
 import {ViewStyle} from 'react-native';
 import {type ThemeStyles} from './styles';
-import {type ThemeColors} from './themes/types';
+import {type ThemeColors} from './theme/types';
 import variables from './variables';
 
 const getDefaultWrapperStyle = (theme: ThemeColors): ViewStyle => ({
diff --git a/src/styles/getTooltipStyles.ts b/src/styles/getTooltipStyles.ts
index 1adfa1969ab9..e550f1bbb1a3 100644
--- a/src/styles/getTooltipStyles.ts
+++ b/src/styles/getTooltipStyles.ts
@@ -2,7 +2,7 @@ import {TextStyle, View, ViewStyle} from 'react-native';
 import fontFamily from './fontFamily';
 import roundToNearestMultipleOfFour from './roundToNearestMultipleOfFour';
 import {type ThemeStyles} from './styles';
-import {type ThemeColors} from './themes/types';
+import {type ThemeColors} from './theme/types';
 import positioning from './utilities/positioning';
 import spacing from './utilities/spacing';
 import variables from './variables';
diff --git a/src/styles/illustrations/ThemeIllustrationsProvider.tsx b/src/styles/illustrations/ThemeIllustrationsProvider.tsx
index 423e0c1866b1..8f27817a3795 100644
--- a/src/styles/illustrations/ThemeIllustrationsProvider.tsx
+++ b/src/styles/illustrations/ThemeIllustrationsProvider.tsx
@@ -1,5 +1,5 @@
 import React, {useMemo} from 'react';
-import useThemePreference from '@styles/themes/useThemePreference';
+import useThemePreference from '@styles/theme/useThemePreference';
 import DarkIllustrations from './dark';
 import LightIllustrations from './light';
 import ThemeIllustrationsContext from './ThemeIllustrationsContext';
diff --git a/src/styles/styles.ts b/src/styles/styles.ts
index b88119beae74..9fb67ce4074b 100644
--- a/src/styles/styles.ts
+++ b/src/styles/styles.ts
@@ -20,8 +20,8 @@ import overflowXHidden from './overflowXHidden';
 import pointerEventsAuto from './pointerEventsAuto';
 import pointerEventsBoxNone from './pointerEventsBoxNone';
 import pointerEventsNone from './pointerEventsNone';
-import defaultTheme from './themes/default';
-import {type ThemeColors} from './themes/types';
+import defaultTheme from './theme/themes/dark';
+import {type ThemeColors} from './theme/types';
 import borders from './utilities/borders';
 import cursor from './utilities/cursor';
 import display from './utilities/display';
diff --git a/src/styles/themes/ThemeContext.ts b/src/styles/theme/ThemeContext.ts
similarity index 80%
rename from src/styles/themes/ThemeContext.ts
rename to src/styles/theme/ThemeContext.ts
index 3c969c7393c5..0d4f02efccd3 100644
--- a/src/styles/themes/ThemeContext.ts
+++ b/src/styles/theme/ThemeContext.ts
@@ -1,5 +1,5 @@
 import React from 'react';
-import darkTheme from './default';
+import darkTheme from './themes/dark';
 import {type ThemeColors} from './types';
 
 const ThemeContext = React.createContext<ThemeColors>(darkTheme);
diff --git a/src/styles/themes/ThemeProvider.tsx b/src/styles/theme/ThemeProvider.tsx
similarity index 100%
rename from src/styles/themes/ThemeProvider.tsx
rename to src/styles/theme/ThemeProvider.tsx
diff --git a/src/styles/themes/Themes.ts b/src/styles/theme/Themes.ts
similarity index 77%
rename from src/styles/themes/Themes.ts
rename to src/styles/theme/Themes.ts
index 5de65c7316b4..fedd85a94e54 100644
--- a/src/styles/themes/Themes.ts
+++ b/src/styles/theme/Themes.ts
@@ -1,6 +1,6 @@
 import CONST from '@src/CONST';
-import darkTheme from './default';
-import lightTheme from './light';
+import darkTheme from './themes/dark';
+import lightTheme from './themes/light';
 import {type ThemeColors, ThemePreferenceWithoutSystem} from './types';
 
 const Themes = {
diff --git a/src/styles/themes/default.ts b/src/styles/theme/themes/dark.ts
similarity index 98%
rename from src/styles/themes/default.ts
rename to src/styles/theme/themes/dark.ts
index 59de9b7269a8..f13d66c49300 100644
--- a/src/styles/themes/default.ts
+++ b/src/styles/theme/themes/dark.ts
@@ -1,7 +1,7 @@
 import colors from '@styles/colors';
+import {type ThemeColors} from '@styles/theme/types';
 import CONST from '@src/CONST';
 import SCREENS from '@src/SCREENS';
-import {type ThemeColors} from './types';
 
 const darkTheme = {
     // Figma keys
diff --git a/src/styles/themes/light.ts b/src/styles/theme/themes/light.ts
similarity index 99%
rename from src/styles/themes/light.ts
rename to src/styles/theme/themes/light.ts
index 1541c0e723d7..4d3b7cfa01f7 100644
--- a/src/styles/themes/light.ts
+++ b/src/styles/theme/themes/light.ts
@@ -1,7 +1,7 @@
 import colors from '@styles/colors';
 import CONST from '@src/CONST';
 import SCREENS from '@src/SCREENS';
-import {type ThemeColors} from './types';
+import {type ThemeColors} from '../types';
 
 const lightTheme = {
     // Figma keys
diff --git a/src/styles/themes/types.ts b/src/styles/theme/types.ts
similarity index 100%
rename from src/styles/themes/types.ts
rename to src/styles/theme/types.ts
diff --git a/src/styles/themes/useTheme.ts b/src/styles/theme/useTheme.ts
similarity index 100%
rename from src/styles/themes/useTheme.ts
rename to src/styles/theme/useTheme.ts
diff --git a/src/styles/themes/useThemePreference.ts b/src/styles/theme/useThemePreference.ts
similarity index 100%
rename from src/styles/themes/useThemePreference.ts
rename to src/styles/theme/useThemePreference.ts
diff --git a/src/styles/themes/useThemePreferenceWithStaticOverride.ts b/src/styles/theme/useThemePreferenceWithStaticOverride.ts
similarity index 100%
rename from src/styles/themes/useThemePreferenceWithStaticOverride.ts
rename to src/styles/theme/useThemePreferenceWithStaticOverride.ts

From 1c1be8b799a85718b67f49d638e5f6bfc79cbf24 Mon Sep 17 00:00:00 2001
From: Christoph Pader <christoph.pader@outlook.com>
Date: Wed, 6 Dec 2023 16:51:46 +0100
Subject: [PATCH 026/102] fix: light theme

---
 src/styles/theme/themes/light.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/styles/theme/themes/light.ts b/src/styles/theme/themes/light.ts
index 4d3b7cfa01f7..418746668a7d 100644
--- a/src/styles/theme/themes/light.ts
+++ b/src/styles/theme/themes/light.ts
@@ -1,7 +1,7 @@
 import colors from '@styles/colors';
+import {type ThemeColors} from '@styles/theme/types';
 import CONST from '@src/CONST';
 import SCREENS from '@src/SCREENS';
-import {type ThemeColors} from '../types';
 
 const lightTheme = {
     // Figma keys

From 9c2ecb43245f4e1120494d297ee93dc5d1637206 Mon Sep 17 00:00:00 2001
From: s-alves10 <sangar.work1028@gmail.com>
Date: Wed, 6 Dec 2023 14:45:28 -0600
Subject: [PATCH 027/102] fix: filter the report actions when network status
 changes

---
 src/pages/home/ReportScreen.js | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/src/pages/home/ReportScreen.js b/src/pages/home/ReportScreen.js
index e9b79c41dcd7..d19db8aad11a 100644
--- a/src/pages/home/ReportScreen.js
+++ b/src/pages/home/ReportScreen.js
@@ -16,6 +16,7 @@ import TaskHeaderActionButton from '@components/TaskHeaderActionButton';
 import withCurrentReportID, {withCurrentReportIDDefaultProps, withCurrentReportIDPropTypes} from '@components/withCurrentReportID';
 import withViewportOffsetTop from '@components/withViewportOffsetTop';
 import useLocalize from '@hooks/useLocalize';
+import useNetwork from '@hooks/useNetwork';
 import usePrevious from '@hooks/usePrevious';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import compose from '@libs/compose';
@@ -154,6 +155,7 @@ function ReportScreen({
     const styles = useThemeStyles();
     const {translate} = useLocalize();
     const {isSmallScreenWidth} = useWindowDimensions();
+    const {isOffline} = useNetwork();
 
     const firstRenderRef = useRef(true);
     const flatListRef = useRef();
@@ -168,8 +170,11 @@ function ReportScreen({
     const {addWorkspaceRoomOrChatPendingAction, addWorkspaceRoomOrChatErrors} = ReportUtils.getReportOfflinePendingActionAndErrors(report);
     const screenWrapperStyle = [styles.appContent, styles.flex1, {marginTop: viewportOffsetTop}];
 
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- need to re-filter the report actions when network status changes
+    const filteredReportActions = useMemo(() => _.filter(reportActions, (action) => ReportActionsUtils.shouldReportActionBeVisible(action)), [isOffline, reportActions]);
+
     // There are no reportActions at all to display and we are still in the process of loading the next set of actions.
-    const isLoadingInitialReportActions = _.isEmpty(reportActions) && reportMetadata.isLoadingInitialReportActions;
+    const isLoadingInitialReportActions = _.isEmpty(filteredReportActions) && reportMetadata.isLoadingInitialReportActions;
 
     const isOptimisticDelete = lodashGet(report, 'statusNum') === CONST.REPORT.STATUS.CLOSED;
 
@@ -424,7 +429,7 @@ function ReportScreen({
                             >
                                 {isReportReadyForDisplay && !isLoadingInitialReportActions && !isLoading && (
                                     <ReportActionsView
-                                        reportActions={reportActions}
+                                        reportActions={filteredReportActions}
                                         report={report}
                                         isLoadingInitialReportActions={reportMetadata.isLoadingInitialReportActions}
                                         isLoadingNewerReportActions={reportMetadata.isLoadingNewerReportActions}
@@ -442,7 +447,7 @@ function ReportScreen({
                                 {isReportReadyForDisplay ? (
                                     <ReportFooter
                                         pendingAction={addWorkspaceRoomOrChatPendingAction}
-                                        reportActions={reportActions}
+                                        reportActions={filteredReportActions}
                                         report={report}
                                         isComposerFullSize={isComposerFullSize}
                                         onSubmitComment={onSubmitComment}

From 2dd986d508103b29274b16134732684ff41d20e7 Mon Sep 17 00:00:00 2001
From: Christoph Pader <christoph.pader@outlook.com>
Date: Wed, 6 Dec 2023 23:07:32 +0100
Subject: [PATCH 028/102] fix

---
 src/styles/ThemeStylesContext.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/styles/ThemeStylesContext.ts b/src/styles/ThemeStylesContext.ts
index 2d3e8a681875..1c81ab3b39a5 100644
--- a/src/styles/ThemeStylesContext.ts
+++ b/src/styles/ThemeStylesContext.ts
@@ -1,6 +1,6 @@
 import React from 'react';
 import styles from './styles';
 
-const ThemeStylesContex./themes/themes/defaultContext(styles);
+const ThemeStylesContext = React.createContext(styles);
 
 export default ThemeStylesContext;

From f6823652ff81a96203979f064cd0659caa64c69e Mon Sep 17 00:00:00 2001
From: Christoph Pader <christoph.pader@outlook.com>
Date: Thu, 7 Dec 2023 10:51:40 +0100
Subject: [PATCH 029/102] Update .eslintrc.js

Co-authored-by: Georgia Monahan <38015950+grgia@users.noreply.github.com>
---
 .eslintrc.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.eslintrc.js b/.eslintrc.js
index 90afddf817ad..70b97f8a2ea8 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -25,7 +25,7 @@ const restrictedImportPaths = [
     },
     {
         name: '@styles/StyleUtils',
-        message: 'Do not import style utils directly. Please use the `useStyleUtils` hook or `withStyleUtils` HOC instead.`',
+        message: 'Do not import StyleUtils directly. Please use the `useStyleUtils` hook or `withStyleUtils` HOC instead.`',
     },
 ];
 

From 9fb8f8b2457db9913cc1986fa6845ae98ffdfd37 Mon Sep 17 00:00:00 2001
From: Christoph Pader <christoph.pader@outlook.com>
Date: Thu, 7 Dec 2023 11:19:13 +0100
Subject: [PATCH 030/102] fix: default values and imports

---
 .eslintrc.js                     | 11 ++++++++++-
 src/styles/ThemeStylesContext.ts |  5 ++++-
 src/styles/styles.ts             |  8 ++------
 src/styles/theme/ThemeContext.ts |  4 ++--
 src/styles/theme/Themes.ts       |  3 +++
 5 files changed, 21 insertions(+), 10 deletions(-)

diff --git a/.eslintrc.js b/.eslintrc.js
index 90afddf817ad..687c483e3e44 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -19,12 +19,21 @@ const restrictedImportPaths = [
         importNames: ['useSafeAreaInsets', 'SafeAreaConsumer', 'SafeAreaInsetsContext'],
         message: "Please use 'useSafeAreaInsets' from 'src/hooks/useSafeAreaInset' and/or 'SafeAreaConsumer' from 'src/components/SafeAreaConsumer' instead.",
     },
+    {
+        name: '@styles/theme/Themes',
+        importNames: ['default', 'defaultTheme'],
+
+        message: 'Do not import themes directly. Please use the `useTheme` hook or `withTheme` HOC instead.`',
+    },
     {
         name: '@styles/styles',
+        importNames: ['default'],
         message: 'Do not import styles directly. Please use the `useThemeStyles` hook or `withThemeStyles` HOC instead.`',
     },
     {
         name: '@styles/StyleUtils',
+        importNames: ['default'],
+
         message: 'Do not import style utils directly. Please use the `useStyleUtils` hook or `withStyleUtils` HOC instead.`',
     },
 ];
@@ -36,7 +45,7 @@ const restrictedImportPatterns = [
     },
     {
         group: ['@styles/theme/themes/**/*'],
-        message: 'Do not import theme colors directly. Please use the `useTheme` hook or `withTheme` HOC instead.`',
+        message: 'Do not import themes directly. Please use the `useTheme` hook or `withTheme` HOC instead.`',
     },
 ];
 
diff --git a/src/styles/ThemeStylesContext.ts b/src/styles/ThemeStylesContext.ts
index 1c81ab3b39a5..47edce211313 100644
--- a/src/styles/ThemeStylesContext.ts
+++ b/src/styles/ThemeStylesContext.ts
@@ -1,6 +1,9 @@
 import React from 'react';
 import styles from './styles';
+import {defaultTheme} from './theme/Themes';
 
-const ThemeStylesContext = React.createContext(styles);
+const defaultStyles = styles(defaultTheme);
+
+const ThemeStylesContext = React.createContext(defaultStyles);
 
 export default ThemeStylesContext;
diff --git a/src/styles/styles.ts b/src/styles/styles.ts
index 9fb67ce4074b..d1568870c66e 100644
--- a/src/styles/styles.ts
+++ b/src/styles/styles.ts
@@ -20,7 +20,6 @@ import overflowXHidden from './overflowXHidden';
 import pointerEventsAuto from './pointerEventsAuto';
 import pointerEventsBoxNone from './pointerEventsBoxNone';
 import pointerEventsNone from './pointerEventsNone';
-import defaultTheme from './theme/themes/dark';
 import {type ThemeColors} from './theme/types';
 import borders from './utilities/borders';
 import cursor from './utilities/cursor';
@@ -3997,8 +3996,5 @@ const styles = (theme: ThemeColors) =>
 
 type ThemeStyles = ReturnType<typeof styles>;
 
-const stylesGenerator = styles;
-const defaultStyles = styles(defaultTheme);
-
-export default defaultStyles;
-export {stylesGenerator, type Styles, type ThemeStyles, type StatusBarStyle, type ColorScheme};
+export default styles;
+export {type Styles, type ThemeStyles, type StatusBarStyle, type ColorScheme};
diff --git a/src/styles/theme/ThemeContext.ts b/src/styles/theme/ThemeContext.ts
index 0d4f02efccd3..d0c553322b35 100644
--- a/src/styles/theme/ThemeContext.ts
+++ b/src/styles/theme/ThemeContext.ts
@@ -1,7 +1,7 @@
 import React from 'react';
-import darkTheme from './themes/dark';
+import {defaultTheme} from './Themes';
 import {type ThemeColors} from './types';
 
-const ThemeContext = React.createContext<ThemeColors>(darkTheme);
+const ThemeContext = React.createContext<ThemeColors>(defaultTheme);
 
 export default ThemeContext;
diff --git a/src/styles/theme/Themes.ts b/src/styles/theme/Themes.ts
index fedd85a94e54..91f424c8c7dd 100644
--- a/src/styles/theme/Themes.ts
+++ b/src/styles/theme/Themes.ts
@@ -8,4 +8,7 @@ const Themes = {
     [CONST.THEME.DARK]: darkTheme,
 } satisfies Record<ThemePreferenceWithoutSystem, ThemeColors>;
 
+const defaultTheme = Themes[CONST.THEME.DEFAULT];
+
 export default Themes;
+export {defaultTheme};

From 9c08aedb56dbc5d3a019a7969cf397b7364c3e9b Mon Sep 17 00:00:00 2001
From: Christoph Pader <christoph.pader@outlook.com>
Date: Thu, 7 Dec 2023 11:25:13 +0100
Subject: [PATCH 031/102] improve rest

---
 .eslintrc.js                                  |  4 ++--
 src/components/FocusModeNotification.js       |  3 ++-
 .../AppNavigator/RHPScreenOptions.ts          |  4 ++--
 .../getRootNavigatorScreenOptions.ts          |  4 ++--
 src/stories/CheckboxWithLabel.stories.js      |  8 +++----
 src/stories/Composer.stories.js               | 23 ++++++++++---------
 src/stories/DragAndDrop.stories.js            | 10 ++++----
 src/stories/Form.stories.js                   | 16 ++++++-------
 src/stories/SelectionList.stories.js          | 14 +++++------
 src/styles/ThemeStylesContext.ts              |  5 +---
 src/styles/ThemeStylesProvider.tsx            |  4 ++--
 src/styles/styles.ts                          |  6 ++++-
 12 files changed, 52 insertions(+), 49 deletions(-)

diff --git a/.eslintrc.js b/.eslintrc.js
index 687c483e3e44..de38590285c7 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -27,12 +27,12 @@ const restrictedImportPaths = [
     },
     {
         name: '@styles/styles',
-        importNames: ['default'],
+        importNames: ['default', 'defaultStyles'],
         message: 'Do not import styles directly. Please use the `useThemeStyles` hook or `withThemeStyles` HOC instead.`',
     },
     {
         name: '@styles/StyleUtils',
-        importNames: ['default'],
+        importNames: ['default', 'DefaultStyleUtils'],
 
         message: 'Do not import style utils directly. Please use the `useStyleUtils` hook or `withStyleUtils` HOC instead.`',
     },
diff --git a/src/components/FocusModeNotification.js b/src/components/FocusModeNotification.js
index 37d8e4848b98..edec7dec1e85 100644
--- a/src/components/FocusModeNotification.js
+++ b/src/components/FocusModeNotification.js
@@ -1,7 +1,7 @@
 import React, {useEffect} from 'react';
 import useEnvironment from '@hooks/useEnvironment';
 import useLocalize from '@hooks/useLocalize';
-import styles from '@styles/styles';
+import useThemeStyles from '@styles/useThemeStyles';
 import * as Link from '@userActions/Link';
 import * as User from '@userActions/User';
 import CONST from '@src/CONST';
@@ -10,6 +10,7 @@ import Text from './Text';
 import TextLinkWithRef from './TextLink';
 
 function FocusModeNotification() {
+    const styles = useThemeStyles();
     const {environmentURL} = useEnvironment();
     const {translate} = useLocalize();
     useEffect(() => {
diff --git a/src/libs/Navigation/AppNavigator/RHPScreenOptions.ts b/src/libs/Navigation/AppNavigator/RHPScreenOptions.ts
index 6b56bb00cf56..6cae31a219f9 100644
--- a/src/libs/Navigation/AppNavigator/RHPScreenOptions.ts
+++ b/src/libs/Navigation/AppNavigator/RHPScreenOptions.ts
@@ -1,12 +1,12 @@
 import {CardStyleInterpolators, StackNavigationOptions} from '@react-navigation/stack';
-import styles from '@styles/styles';
+import {ThemeStyles} from '@styles/styles';
 
 /**
  * RHP stack navigator screen options generator function
  * @param themeStyles - The styles object
  * @returns The screen options object
  */
-const RHPScreenOptions = (themeStyles: typeof styles): StackNavigationOptions => ({
+const RHPScreenOptions = (themeStyles: ThemeStyles): StackNavigationOptions => ({
     headerShown: false,
     animationEnabled: true,
     gestureDirection: 'horizontal',
diff --git a/src/libs/Navigation/AppNavigator/getRootNavigatorScreenOptions.ts b/src/libs/Navigation/AppNavigator/getRootNavigatorScreenOptions.ts
index 08f18ce3ab9d..9af92dd3e019 100644
--- a/src/libs/Navigation/AppNavigator/getRootNavigatorScreenOptions.ts
+++ b/src/libs/Navigation/AppNavigator/getRootNavigatorScreenOptions.ts
@@ -1,6 +1,6 @@
 import {StackCardInterpolationProps, StackNavigationOptions} from '@react-navigation/stack';
 import getNavigationModalCardStyle from '@styles/getNavigationModalCardStyles';
-import styles from '@styles/styles';
+import {ThemeStyles} from '@styles/styles';
 import variables from '@styles/variables';
 import CONFIG from '@src/CONFIG';
 import modalCardStyleInterpolator from './modalCardStyleInterpolator';
@@ -15,7 +15,7 @@ const commonScreenOptions: StackNavigationOptions = {
     animationTypeForReplace: 'push',
 };
 
-export default (isSmallScreenWidth: boolean, themeStyles: typeof styles): ScreenOptions => ({
+export default (isSmallScreenWidth: boolean, themeStyles: ThemeStyles): ScreenOptions => ({
     rightModalNavigator: {
         ...commonScreenOptions,
         cardStyleInterpolator: (props: StackCardInterpolationProps) => modalCardStyleInterpolator(isSmallScreenWidth, false, props),
diff --git a/src/stories/CheckboxWithLabel.stories.js b/src/stories/CheckboxWithLabel.stories.js
index e8d45f434b16..842f23816b3b 100644
--- a/src/stories/CheckboxWithLabel.stories.js
+++ b/src/stories/CheckboxWithLabel.stories.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import CheckboxWithLabel from '@components/CheckboxWithLabel';
 import Text from '@components/Text';
-import styles from '@styles/styles';
+import {defaultStyles} from '@styles/styles';
 
 /**
  * We use the Component Story Format for writing stories. Follow the docs here:
@@ -34,9 +34,9 @@ WithLabelComponent.args = {
     onInputChange: () => {},
     LabelComponent: () => (
         <>
-            <Text style={[styles.textLarge]}>Test</Text>
-            <Text style={[styles.textMicroBold]}> Test </Text>
-            <Text style={[styles.textMicroSupporting]}>Test</Text>
+            <Text style={[defaultStyles.textLarge]}>Test</Text>
+            <Text style={[defaultStyles.textMicroBold]}> Test </Text>
+            <Text style={[defaultStyles.textMicroSupporting]}>Test</Text>
         </>
     ),
 };
diff --git a/src/stories/Composer.stories.js b/src/stories/Composer.stories.js
index 1ce005553af7..c07ae947a745 100644
--- a/src/stories/Composer.stories.js
+++ b/src/stories/Composer.stories.js
@@ -5,9 +5,10 @@ import Composer from '@components/Composer';
 import RenderHTML from '@components/RenderHTML';
 import Text from '@components/Text';
 import withNavigationFallback from '@components/withNavigationFallback';
-import styles from '@styles/styles';
+import {defaultStyles} from '@styles/styles';
 import * as StyleUtils from '@styles/StyleUtils';
-import themeColors from '@styles/theme/themes/dark';
+// eslint-disable-next-line no-restricted-imports
+import {defaultTheme} from '@styles/theme/Themes';
 import CONST from '@src/CONST';
 
 const ComposerWithNavigation = withNavigationFallback(Composer);
@@ -31,29 +32,29 @@ function Default(args) {
 
     return (
         <View>
-            <View style={[styles.border, styles.p4]}>
+            <View style={[defaultStyles.border, defaultStyles.p4]}>
                 <ComposerWithNavigation
                     // eslint-disable-next-line react/jsx-props-no-spreading
                     {...args}
                     multiline
                     onChangeText={setComment}
                     onPasteFile={setPastedFile}
-                    style={[styles.textInputCompose, styles.w100, styles.verticalAlignTop]}
+                    style={[defaultStyles.textInputCompose, defaultStyles.w100, defaultStyles.verticalAlignTop]}
                 />
             </View>
-            <View style={[styles.flexRow, styles.mv5, styles.flexWrap, styles.w100]}>
+            <View style={[defaultStyles.flexRow, defaultStyles.mv5, defaultStyles.flexWrap, defaultStyles.w100]}>
                 <View
-                    style={[styles.border, styles.noLeftBorderRadius, styles.noRightBorderRadius, styles.p5, styles.flex1]}
+                    style={[defaultStyles.border, defaultStyles.noLeftBorderRadius, defaultStyles.noRightBorderRadius, defaultStyles.p5, defaultStyles.flex1]}
                     id={CONST.REPORT.DROP_NATIVE_ID}
                 >
-                    <Text style={[styles.mb2, styles.textLabelSupporting]}>Entered Comment (Drop Enabled)</Text>
+                    <Text style={[defaultStyles.mb2, defaultStyles.textLabelSupporting]}>Entered Comment (Drop Enabled)</Text>
                     <Text>{comment}</Text>
                 </View>
-                <View style={[styles.p5, styles.borderBottom, styles.borderRight, styles.borderTop, styles.flex1]}>
-                    <Text style={[styles.mb2, styles.textLabelSupporting]}>Rendered Comment</Text>
+                <View style={[defaultStyles.p5, defaultStyles.borderBottom, defaultStyles.borderRight, defaultStyles.borderTop, defaultStyles.flex1]}>
+                    <Text style={[defaultStyles.mb2, defaultStyles.textLabelSupporting]}>Rendered Comment</Text>
                     {Boolean(renderedHTML) && <RenderHTML html={renderedHTML} />}
                     {Boolean(pastedFile) && (
-                        <View style={styles.mv3}>
+                        <View style={defaultStyles.mv3}>
                             <Image
                                 source={{uri: URL.createObjectURL(pastedFile)}}
                                 resizeMode="contain"
@@ -70,7 +71,7 @@ function Default(args) {
 Default.args = {
     autoFocus: true,
     placeholder: 'Compose Text Here',
-    placeholderTextColor: themeColors.placeholderText,
+    placeholderTextColor: defaultTheme.placeholderText,
     defaultValue: `Composer can do the following:
 
      * It can contain MD e.g. *bold* _italic_
diff --git a/src/stories/DragAndDrop.stories.js b/src/stories/DragAndDrop.stories.js
index c594d059b396..d9812b026e9d 100644
--- a/src/stories/DragAndDrop.stories.js
+++ b/src/stories/DragAndDrop.stories.js
@@ -4,7 +4,7 @@ import {Image, View} from 'react-native';
 import DragAndDropConsumer from '@components/DragAndDrop/Consumer';
 import DragAndDropProvider from '@components/DragAndDrop/Provider';
 import Text from '@components/Text';
-import styles from '@styles/styles';
+import {defaultStyles} from '@styles/styles';
 
 /**
  * We use the Component Story Format for writing stories. Follow the docs here:
@@ -26,12 +26,12 @@ function Default() {
                     height: 500,
                     backgroundColor: 'beige',
                 },
-                styles.alignItemsCenter,
-                styles.justifyContentCenter,
+                defaultStyles.alignItemsCenter,
+                defaultStyles.justifyContentCenter,
             ]}
         >
             <DragAndDropProvider>
-                <View style={[styles.w100, styles.h100, styles.justifyContentCenter, styles.alignItemsCenter]}>
+                <View style={[defaultStyles.w100, defaultStyles.h100, defaultStyles.justifyContentCenter, defaultStyles.alignItemsCenter]}>
                     {fileURL ? (
                         <Image
                             source={{uri: fileURL}}
@@ -54,7 +54,7 @@ function Default() {
                         }
                     }}
                 >
-                    <View style={[styles.w100, styles.h100, styles.alignItemsCenter, styles.justifyContentCenter, {backgroundColor: 'white'}]}>
+                    <View style={[defaultStyles.w100, defaultStyles.h100, defaultStyles.alignItemsCenter, defaultStyles.justifyContentCenter, {backgroundColor: 'white'}]}>
                         <Text color="black">Release to upload file</Text>
                     </View>
                 </DragAndDropConsumer>
diff --git a/src/stories/Form.stories.js b/src/stories/Form.stories.js
index 6473b1074f17..00191fc6b752 100644
--- a/src/stories/Form.stories.js
+++ b/src/stories/Form.stories.js
@@ -11,7 +11,7 @@ import Text from '@components/Text';
 import TextInput from '@components/TextInput';
 import NetworkConnection from '@libs/NetworkConnection';
 import * as ValidationUtils from '@libs/ValidationUtils';
-import styles from '@styles/styles';
+import {defaultStyles} from '@styles/styles';
 import * as FormActions from '@userActions/FormActions';
 import CONST from '@src/CONST';
 
@@ -60,26 +60,26 @@ function Template(args) {
                 label="Account number"
                 accessibilityLabel="Account number"
                 inputID="accountNumber"
-                containerStyles={[styles.mt4]}
+                containerStyles={[defaultStyles.mt4]}
             />
             <InputWrapper
                 InputComponent={AddressSearch}
                 label="Street"
                 inputID="street"
-                containerStyles={[styles.mt4]}
+                containerStyles={[defaultStyles.mt4]}
                 hint="No PO box"
             />
             <DatePicker
                 inputID="dob"
                 label="Date of Birth"
-                containerStyles={[styles.mt4]}
+                containerStyles={[defaultStyles.mt4]}
             />
             <View>
                 <InputWrapper
                     InputComponent={Picker}
                     label="Fruit"
                     inputID="pickFruit"
-                    containerStyles={[styles.mt4]}
+                    containerStyles={[defaultStyles.mt4]}
                     shouldSaveDraft
                     items={[
                         {
@@ -101,7 +101,7 @@ function Template(args) {
                 InputComponent={Picker}
                 label="Another Fruit"
                 inputID="pickAnotherFruit"
-                containerStyles={[styles.mt4]}
+                containerStyles={[defaultStyles.mt4]}
                 items={[
                     {
                         label: 'Select a Fruit',
@@ -117,7 +117,7 @@ function Template(args) {
                     },
                 ]}
             />
-            <View style={styles.mt4}>
+            <View style={defaultStyles.mt4}>
                 <InputWrapper
                     InputComponent={StatePicker}
                     inputID="state"
@@ -127,7 +127,7 @@ function Template(args) {
             <InputWrapper
                 InputComponent={CheckboxWithLabel}
                 inputID="checkbox"
-                style={[styles.mb4, styles.mt5]}
+                style={[defaultStyles.mb4, defaultStyles.mt5]}
                 LabelComponent={() => <Text>I accept the Expensify Terms of Service</Text>}
             />
         </FormProvider>
diff --git a/src/stories/SelectionList.stories.js b/src/stories/SelectionList.stories.js
index ec80a8e908ac..28d0fdc35e63 100644
--- a/src/stories/SelectionList.stories.js
+++ b/src/stories/SelectionList.stories.js
@@ -3,7 +3,7 @@ import {View} from 'react-native';
 import _ from 'underscore';
 import SelectionList from '@components/SelectionList';
 import Text from '@components/Text';
-import styles from '@styles/styles';
+import {defaultStyles} from '@styles/styles';
 import CONST from '@src/CONST';
 
 /**
@@ -228,8 +228,8 @@ function MultipleSelection(args) {
                     accountID: item.keyForList,
                     login: item.text,
                     rightElement: isAdmin && (
-                        <View style={[styles.badge, styles.peopleBadge]}>
-                            <Text style={styles.peopleBadgeText}>Admin</Text>
+                        <View style={[defaultStyles.badge, defaultStyles.peopleBadge]}>
+                            <Text style={defaultStyles.peopleBadgeText}>Admin</Text>
                         </View>
                     ),
                 };
@@ -290,8 +290,8 @@ function WithSectionHeader(args) {
                     accountID: item.keyForList,
                     login: item.text,
                     rightElement: isAdmin && (
-                        <View style={[styles.badge, styles.peopleBadge]}>
-                            <Text style={styles.peopleBadgeText}>Admin</Text>
+                        <View style={[defaultStyles.badge, defaultStyles.peopleBadge]}>
+                            <Text style={defaultStyles.peopleBadgeText}>Admin</Text>
                         </View>
                     ),
                 };
@@ -350,8 +350,8 @@ function WithConfirmButton(args) {
                     accountID: item.keyForList,
                     login: item.text,
                     rightElement: isAdmin && (
-                        <View style={[styles.badge, styles.peopleBadge]}>
-                            <Text style={styles.peopleBadgeText}>Admin</Text>
+                        <View style={[defaultStyles.badge, defaultStyles.peopleBadge]}>
+                            <Text style={defaultStyles.peopleBadgeText}>Admin</Text>
                         </View>
                     ),
                 };
diff --git a/src/styles/ThemeStylesContext.ts b/src/styles/ThemeStylesContext.ts
index 47edce211313..4b1483136e22 100644
--- a/src/styles/ThemeStylesContext.ts
+++ b/src/styles/ThemeStylesContext.ts
@@ -1,8 +1,5 @@
 import React from 'react';
-import styles from './styles';
-import {defaultTheme} from './theme/Themes';
-
-const defaultStyles = styles(defaultTheme);
+import {defaultStyles} from './styles';
 
 const ThemeStylesContext = React.createContext(defaultStyles);
 
diff --git a/src/styles/ThemeStylesProvider.tsx b/src/styles/ThemeStylesProvider.tsx
index 66db59ef0ccc..0c5aaacae748 100644
--- a/src/styles/ThemeStylesProvider.tsx
+++ b/src/styles/ThemeStylesProvider.tsx
@@ -1,5 +1,5 @@
 import React, {useMemo} from 'react';
-import {stylesGenerator} from './styles';
+import styles from './styles';
 import useTheme from './theme/useTheme';
 import ThemeStylesContext from './ThemeStylesContext';
 
@@ -8,7 +8,7 @@ type ThemeStylesProviderProps = React.PropsWithChildren;
 function ThemeStylesProvider({children}: ThemeStylesProviderProps) {
     const theme = useTheme();
 
-    const themeStyles = useMemo(() => stylesGenerator(theme), [theme]);
+    const themeStyles = useMemo(() => styles(theme), [theme]);
 
     return <ThemeStylesContext.Provider value={themeStyles}>{children}</ThemeStylesContext.Provider>;
 }
diff --git a/src/styles/styles.ts b/src/styles/styles.ts
index d1568870c66e..16f3caf51494 100644
--- a/src/styles/styles.ts
+++ b/src/styles/styles.ts
@@ -20,6 +20,7 @@ import overflowXHidden from './overflowXHidden';
 import pointerEventsAuto from './pointerEventsAuto';
 import pointerEventsBoxNone from './pointerEventsBoxNone';
 import pointerEventsNone from './pointerEventsNone';
+import {defaultTheme} from './theme/Themes';
 import {type ThemeColors} from './theme/types';
 import borders from './utilities/borders';
 import cursor from './utilities/cursor';
@@ -3996,5 +3997,8 @@ const styles = (theme: ThemeColors) =>
 
 type ThemeStyles = ReturnType<typeof styles>;
 
+const defaultStyles = styles(defaultTheme);
+
 export default styles;
-export {type Styles, type ThemeStyles, type StatusBarStyle, type ColorScheme};
+export {defaultStyles};
+export type {Styles, ThemeStyles, StatusBarStyle, ColorScheme};

From 841c613fa5143cf5ebf3b882b7694bd6a18239c9 Mon Sep 17 00:00:00 2001
From: Christoph Pader <christoph.pader@outlook.com>
Date: Thu, 7 Dec 2023 12:11:28 +0100
Subject: [PATCH 032/102] fix: illustrations

---
 src/styles/illustrations/Illustrations.ts         | 15 +++++++++++++++
 .../illustrations/ThemeIllustrationsContext.ts    |  6 +++---
 .../illustrations/ThemeIllustrationsProvider.tsx  |  5 ++---
 src/styles/illustrations/{ => themes}/dark.ts     |  4 ++--
 src/styles/illustrations/{ => themes}/light.ts    |  4 ++--
 src/styles/illustrations/types.ts                 |  4 ++--
 6 files changed, 26 insertions(+), 12 deletions(-)
 create mode 100644 src/styles/illustrations/Illustrations.ts
 rename src/styles/illustrations/{ => themes}/dark.ts (65%)
 rename src/styles/illustrations/{ => themes}/light.ts (65%)

diff --git a/src/styles/illustrations/Illustrations.ts b/src/styles/illustrations/Illustrations.ts
new file mode 100644
index 000000000000..7f5cd2feeedb
--- /dev/null
+++ b/src/styles/illustrations/Illustrations.ts
@@ -0,0 +1,15 @@
+import {ThemePreferenceWithoutSystem} from '@styles/theme/types';
+import CONST from '@src/CONST';
+import darkIllustrations from './themes/dark';
+import lightIllustrations from './themes/light';
+import type {IllustrationsType} from './types';
+
+const Illustrations = {
+    [CONST.THEME.LIGHT]: lightIllustrations,
+    [CONST.THEME.DARK]: darkIllustrations,
+} satisfies Record<ThemePreferenceWithoutSystem, IllustrationsType>;
+
+const DefaultIllustrations = Illustrations[CONST.THEME.DEFAULT];
+
+export default Illustrations;
+export {DefaultIllustrations};
diff --git a/src/styles/illustrations/ThemeIllustrationsContext.ts b/src/styles/illustrations/ThemeIllustrationsContext.ts
index e4956e6c0479..db203b1a100e 100644
--- a/src/styles/illustrations/ThemeIllustrationsContext.ts
+++ b/src/styles/illustrations/ThemeIllustrationsContext.ts
@@ -1,7 +1,7 @@
 import React from 'react';
-import DarkIllustrations from './dark';
-import {Illustrations} from './types';
+import {DefaultIllustrations} from './Illustrations';
+import {IllustrationsType} from './types';
 
-const ThemeIllustrationsContext = React.createContext<Illustrations>(DarkIllustrations);
+const ThemeIllustrationsContext = React.createContext<IllustrationsType>(DefaultIllustrations);
 
 export default ThemeIllustrationsContext;
diff --git a/src/styles/illustrations/ThemeIllustrationsProvider.tsx b/src/styles/illustrations/ThemeIllustrationsProvider.tsx
index 8f27817a3795..1c6da59a641c 100644
--- a/src/styles/illustrations/ThemeIllustrationsProvider.tsx
+++ b/src/styles/illustrations/ThemeIllustrationsProvider.tsx
@@ -1,7 +1,6 @@
 import React, {useMemo} from 'react';
 import useThemePreference from '@styles/theme/useThemePreference';
-import DarkIllustrations from './dark';
-import LightIllustrations from './light';
+import Illustrations from './Illustrations';
 import ThemeIllustrationsContext from './ThemeIllustrationsContext';
 
 type ThemeIllustrationsProviderProps = {
@@ -11,7 +10,7 @@ type ThemeIllustrationsProviderProps = {
 function ThemeIllustrationsProvider({children}: ThemeIllustrationsProviderProps) {
     const themePreference = useThemePreference();
 
-    const illustrations = useMemo(() => (themePreference === 'dark' ? DarkIllustrations : LightIllustrations), [themePreference]);
+    const illustrations = useMemo(() => Illustrations[themePreference], [themePreference]);
 
     return <ThemeIllustrationsContext.Provider value={illustrations}>{children}</ThemeIllustrationsContext.Provider>;
 }
diff --git a/src/styles/illustrations/dark.ts b/src/styles/illustrations/themes/dark.ts
similarity index 65%
rename from src/styles/illustrations/dark.ts
rename to src/styles/illustrations/themes/dark.ts
index 6bee85cdedbd..8e78ee71b876 100644
--- a/src/styles/illustrations/dark.ts
+++ b/src/styles/illustrations/themes/dark.ts
@@ -1,8 +1,8 @@
 import EmptyStateBackgroundImage from '@assets/images/empty-state_background-fade-dark.png';
-import {Illustrations} from './types';
+import {IllustrationsType} from '@styles/illustrations/types';
 
 const illustrations = {
     EmptyStateBackgroundImage,
-} satisfies Illustrations;
+} satisfies IllustrationsType;
 
 export default illustrations;
diff --git a/src/styles/illustrations/light.ts b/src/styles/illustrations/themes/light.ts
similarity index 65%
rename from src/styles/illustrations/light.ts
rename to src/styles/illustrations/themes/light.ts
index 376a6d332f79..0b85e70ae3cc 100644
--- a/src/styles/illustrations/light.ts
+++ b/src/styles/illustrations/themes/light.ts
@@ -1,8 +1,8 @@
 import EmptyStateBackgroundImage from '@assets/images/empty-state_background-fade-light.png';
-import {Illustrations} from './types';
+import {IllustrationsType} from '@styles/illustrations/types';
 
 const illustrations = {
     EmptyStateBackgroundImage,
-} satisfies Illustrations;
+} satisfies IllustrationsType;
 
 export default illustrations;
diff --git a/src/styles/illustrations/types.ts b/src/styles/illustrations/types.ts
index aebf01428994..537e042ce22c 100644
--- a/src/styles/illustrations/types.ts
+++ b/src/styles/illustrations/types.ts
@@ -1,8 +1,8 @@
 import {ImageSourcePropType} from 'react-native';
 
-type Illustrations = {
+type IllustrationsType = {
     EmptyStateBackgroundImage: ImageSourcePropType;
 };
 
 // eslint-disable-next-line import/prefer-default-export
-export {type Illustrations};
+export {type IllustrationsType};

From 88f141250d4b8b449cf8fb60271266539661c8a2 Mon Sep 17 00:00:00 2001
From: Christoph Pader <christoph.pader@outlook.com>
Date: Thu, 7 Dec 2023 12:12:15 +0100
Subject: [PATCH 033/102] add illustrations rule

---
 .eslintrc.js | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/.eslintrc.js b/.eslintrc.js
index 0ae8cba3d160..5d4345fa4044 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -36,6 +36,10 @@ const restrictedImportPaths = [
 
         message: 'Do not import StyleUtils directly. Please use the `useStyleUtils` hook or `withStyleUtils` HOC instead.`',
     },
+    {
+        name: ['@styles/illustrations/Illustrations'],
+        message: 'Do not import illustrations directly. Please use the `useThemeIllustrations` hook instead.`',
+    },
 ];
 
 const restrictedImportPatterns = [
@@ -47,6 +51,10 @@ const restrictedImportPatterns = [
         group: ['@styles/theme/themes/**/*'],
         message: 'Do not import themes directly. Please use the `useTheme` hook or `withTheme` HOC instead.`',
     },
+    {
+        group: ['@styles/illustrations/themes/*'],
+        message: 'Do not import illustrations directly. Please use the `useThemeIllustrations` hook instead.`',
+    },
 ];
 
 module.exports = {

From 44f81b97f3983b883519386914332de0fae8dff7 Mon Sep 17 00:00:00 2001
From: Christoph Pader <christoph.pader@outlook.com>
Date: Thu, 7 Dec 2023 12:12:26 +0100
Subject: [PATCH 034/102] rename message

---
 .eslintrc.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/.eslintrc.js b/.eslintrc.js
index 5d4345fa4044..de00edebed3d 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -38,7 +38,7 @@ const restrictedImportPaths = [
     },
     {
         name: ['@styles/illustrations/Illustrations'],
-        message: 'Do not import illustrations directly. Please use the `useThemeIllustrations` hook instead.`',
+        message: 'Do not import theme illustrations directly. Please use the `useThemeIllustrations` hook instead.`',
     },
 ];
 
@@ -53,7 +53,7 @@ const restrictedImportPatterns = [
     },
     {
         group: ['@styles/illustrations/themes/*'],
-        message: 'Do not import illustrations directly. Please use the `useThemeIllustrations` hook instead.`',
+        message: 'Do not import theme illustrations directly. Please use the `useThemeIllustrations` hook instead.`',
     },
 ];
 

From a2b1e0c5443442b97d184ba1df4c306333828763 Mon Sep 17 00:00:00 2001
From: Christoph Pader <christoph.pader@outlook.com>
Date: Thu, 7 Dec 2023 12:14:53 +0100
Subject: [PATCH 035/102] fix: merge conflicts

---
 src/components/AttachmentModal.js                      |  8 --------
 src/components/Avatar.tsx                              | 10 ----------
 src/components/AvatarWithDisplayName.tsx               |  8 --------
 src/components/Banner.tsx                              |  8 --------
 src/components/BaseMiniContextMenuItem.js              |  8 --------
 src/components/ButtonWithDropdownMenu.js               |  8 --------
 src/components/Checkbox.tsx                            |  8 --------
 src/components/ContextMenuItem.js                      |  8 --------
 src/components/DotIndicatorMessage.tsx                 |  8 --------
 src/components/EmojiSuggestions.tsx                    |  8 --------
 src/components/ExpensifyWordmark.tsx                   |  8 --------
 .../HTMLRenderers/MentionHereRenderer.js               |  8 --------
 .../HTMLRenderers/MentionUserRenderer.js               |  8 --------
 src/components/HeaderPageLayout.js                     |  8 --------
 src/components/HeaderWithBackButton/index.js           |  8 --------
 src/components/LHNOptionsList/OptionRowLHN.js          |  8 --------
 src/components/MapView/MapView.web.tsx                 |  8 --------
 src/components/MentionSuggestions.tsx                  |  8 --------
 src/components/MenuItem.js                             |  8 --------
 src/components/Modal/BaseModal.tsx                     | 10 ----------
 src/components/Modal/index.tsx                         |  8 --------
 src/components/OptionRow.js                            |  8 --------
 src/components/PopoverWithoutOverlay/index.js          | 10 ----------
 src/components/Pressable/PressableWithDelayToggle.tsx  |  8 --------
 src/components/Reactions/AddReactionBubble.js          |  8 --------
 src/components/Reactions/EmojiReactionBubble.js        |  8 --------
 src/components/Reactions/MiniQuickEmojiReactions.js    |  8 --------
 src/components/ReportActionItem/MoneyReportView.js     |  8 --------
 src/components/ReportActionItem/MoneyRequestPreview.js |  8 --------
 src/components/ReportActionItem/MoneyRequestView.js    | 10 ----------
 .../ReportActionItem/ReportActionItemImages.js         |  8 --------
 src/components/ReportActionItem/TaskPreview.js         |  8 --------
 src/components/ReportActionItem/TaskView.js            |  8 --------
 src/components/RoomHeaderAvatars.js                    |  8 --------
 src/components/SelectionList/BaseListItem.js           |  8 --------
 src/components/SubscriptAvatar.tsx                     |  8 --------
 src/components/TextInput/BaseTextInput/index.native.js |  8 --------
 src/components/Tooltip/TooltipRenderedOnPageBody.js    | 10 ----------
 .../report/ContextMenu/BaseReportActionContextMenu.js  | 10 ----------
 src/pages/home/report/LinkPreviewer.js                 |  8 --------
 .../home/report/ReactionList/HeaderReactionList.js     |  8 --------
 src/pages/home/report/ReportActionItem.js              |  8 --------
 src/pages/home/report/ReportActionItemSingle.js        |  8 --------
 src/pages/home/sidebar/SidebarLinks.js                 |  8 --------
 .../Contacts/ValidateCodeForm/BaseValidateCodeForm.js  |  8 --------
 src/pages/settings/Wallet/PaymentMethodList.js         |  8 --------
 .../signin/ValidateCodeForm/BaseValidateCodeForm.js    |  8 --------
 47 files changed, 388 deletions(-)

diff --git a/src/components/AttachmentModal.js b/src/components/AttachmentModal.js
index 7b4261ead33a..fff562047931 100755
--- a/src/components/AttachmentModal.js
+++ b/src/components/AttachmentModal.js
@@ -19,16 +19,8 @@ import * as ReportUtils from '@libs/ReportUtils';
 import * as TransactionUtils from '@libs/TransactionUtils';
 import useNativeDriver from '@libs/useNativeDriver';
 import reportPropTypes from '@pages/reportPropTypes';
-<<<<<<< HEAD
-import * as StyleUtils from '@styles/StyleUtils';
-import useTheme from '@styles/theme/useTheme';
-||||||| b0268fab88
-import * as StyleUtils from '@styles/StyleUtils';
-import useTheme from '@styles/theme/useTheme';
-=======
 import useTheme from '@styles/theme/useTheme';
 import useStyleUtils from '@styles/useStyleUtils';
->>>>>>> @chrispader/use-style-utils-hook
 import useThemeStyles from '@styles/useThemeStyles';
 import * as IOU from '@userActions/IOU';
 import CONST from '@src/CONST';
diff --git a/src/components/Avatar.tsx b/src/components/Avatar.tsx
index b3753535aa9d..b1465714f5ec 100644
--- a/src/components/Avatar.tsx
+++ b/src/components/Avatar.tsx
@@ -3,19 +3,9 @@ import {StyleProp, View, ViewStyle} from 'react-native';
 import useNetwork from '@hooks/useNetwork';
 import * as ReportUtils from '@libs/ReportUtils';
 import {AvatarSource} from '@libs/UserUtils';
-<<<<<<< HEAD
-import * as StyleUtils from '@styles/StyleUtils';
-import type {AvatarSizeName} from '@styles/StyleUtils';
-import useTheme from '@styles/theme/useTheme';
-||||||| b0268fab88
-import * as StyleUtils from '@styles/StyleUtils';
-import type {AvatarSizeName} from '@styles/StyleUtils';
-import useTheme from '@styles/theme/useTheme';
-=======
 import useTheme from '@styles/theme/useTheme';
 import type {AvatarSizeName} from '@styles/ThemeStyleUtils';
 import useStyleUtils from '@styles/useStyleUtils';
->>>>>>> @chrispader/use-style-utils-hook
 import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 import {AvatarType} from '@src/types/onyx/OnyxCommon';
diff --git a/src/components/AvatarWithDisplayName.tsx b/src/components/AvatarWithDisplayName.tsx
index 388ba8e454ae..12571ceb971c 100644
--- a/src/components/AvatarWithDisplayName.tsx
+++ b/src/components/AvatarWithDisplayName.tsx
@@ -5,16 +5,8 @@ import {ValueOf} from 'type-fest';
 import Navigation from '@libs/Navigation/Navigation';
 import * as OptionsListUtils from '@libs/OptionsListUtils';
 import * as ReportUtils from '@libs/ReportUtils';
-<<<<<<< HEAD
-import * as StyleUtils from '@styles/StyleUtils';
-import useTheme from '@styles/theme/useTheme';
-||||||| b0268fab88
-import * as StyleUtils from '@styles/StyleUtils';
-import useTheme from '@styles/theme/useTheme';
-=======
 import useTheme from '@styles/theme/useTheme';
 import useStyleUtils from '@styles/useStyleUtils';
->>>>>>> @chrispader/use-style-utils-hook
 import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
diff --git a/src/components/Banner.tsx b/src/components/Banner.tsx
index 479afebce529..cfe817c849c0 100644
--- a/src/components/Banner.tsx
+++ b/src/components/Banner.tsx
@@ -2,15 +2,7 @@ import React, {memo} from 'react';
 import {StyleProp, TextStyle, View, ViewStyle} from 'react-native';
 import useLocalize from '@hooks/useLocalize';
 import getButtonState from '@libs/getButtonState';
-<<<<<<< HEAD
-import * as StyleUtils from '@styles/StyleUtils';
-import useTheme from '@styles/theme/useTheme';
-||||||| b0268fab88
-import * as StyleUtils from '@styles/StyleUtils';
-import useTheme from '@styles/theme/useTheme';
-=======
 import useStyleUtils from '@styles/useStyleUtils';
->>>>>>> @chrispader/use-style-utils-hook
 import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 import Hoverable from './Hoverable';
diff --git a/src/components/BaseMiniContextMenuItem.js b/src/components/BaseMiniContextMenuItem.js
index 97edd1685044..a45aba6ef534 100644
--- a/src/components/BaseMiniContextMenuItem.js
+++ b/src/components/BaseMiniContextMenuItem.js
@@ -5,15 +5,7 @@ import _ from 'underscore';
 import DomUtils from '@libs/DomUtils';
 import getButtonState from '@libs/getButtonState';
 import ReportActionComposeFocusManager from '@libs/ReportActionComposeFocusManager';
-<<<<<<< HEAD
-import * as StyleUtils from '@styles/StyleUtils';
-import useTheme from '@styles/theme/useTheme';
-||||||| b0268fab88
-import * as StyleUtils from '@styles/StyleUtils';
-import useTheme from '@styles/theme/useTheme';
-=======
 import useStyleUtils from '@styles/useStyleUtils';
->>>>>>> @chrispader/use-style-utils-hook
 import useThemeStyles from '@styles/useThemeStyles';
 import variables from '@styles/variables';
 import PressableWithoutFeedback from './Pressable/PressableWithoutFeedback';
diff --git a/src/components/ButtonWithDropdownMenu.js b/src/components/ButtonWithDropdownMenu.js
index 272672c6ac2b..74848b104e59 100644
--- a/src/components/ButtonWithDropdownMenu.js
+++ b/src/components/ButtonWithDropdownMenu.js
@@ -3,16 +3,8 @@ import React, {useEffect, useRef, useState} from 'react';
 import {View} from 'react-native';
 import _ from 'underscore';
 import useWindowDimensions from '@hooks/useWindowDimensions';
-<<<<<<< HEAD
-import * as StyleUtils from '@styles/StyleUtils';
-import useTheme from '@styles/theme/useTheme';
-||||||| b0268fab88
-import * as StyleUtils from '@styles/StyleUtils';
-import useTheme from '@styles/theme/useTheme';
-=======
 import useTheme from '@styles/theme/useTheme';
 import useStyleUtils from '@styles/useStyleUtils';
->>>>>>> @chrispader/use-style-utils-hook
 import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 import Button from './Button';
diff --git a/src/components/Checkbox.tsx b/src/components/Checkbox.tsx
index 182e935f6c8e..8d4c2c51fed3 100644
--- a/src/components/Checkbox.tsx
+++ b/src/components/Checkbox.tsx
@@ -1,15 +1,7 @@
 import React, {ForwardedRef, forwardRef, KeyboardEvent as ReactKeyboardEvent} from 'react';
 import {GestureResponderEvent, StyleProp, View, ViewStyle} from 'react-native';
-<<<<<<< HEAD
-import * as StyleUtils from '@styles/StyleUtils';
-import useTheme from '@styles/theme/useTheme';
-||||||| b0268fab88
-import * as StyleUtils from '@styles/StyleUtils';
-import useTheme from '@styles/theme/useTheme';
-=======
 import useTheme from '@styles/theme/useTheme';
 import useStyleUtils from '@styles/useStyleUtils';
->>>>>>> @chrispader/use-style-utils-hook
 import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 import ChildrenProps from '@src/types/utils/ChildrenProps';
diff --git a/src/components/ContextMenuItem.js b/src/components/ContextMenuItem.js
index a63fcf97415a..c089694c25b9 100644
--- a/src/components/ContextMenuItem.js
+++ b/src/components/ContextMenuItem.js
@@ -4,15 +4,7 @@ import useThrottledButtonState from '@hooks/useThrottledButtonState';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import getButtonState from '@libs/getButtonState';
 import getContextMenuItemStyles from '@styles/getContextMenuItemStyles';
-<<<<<<< HEAD
-import * as StyleUtils from '@styles/StyleUtils';
-import useTheme from '@styles/theme/useTheme';
-||||||| b0268fab88
-import * as StyleUtils from '@styles/StyleUtils';
-import useTheme from '@styles/theme/useTheme';
-=======
 import useStyleUtils from '@styles/useStyleUtils';
->>>>>>> @chrispader/use-style-utils-hook
 import useThemeStyles from '@styles/useThemeStyles';
 import BaseMiniContextMenuItem from './BaseMiniContextMenuItem';
 import Icon from './Icon';
diff --git a/src/components/DotIndicatorMessage.tsx b/src/components/DotIndicatorMessage.tsx
index 59d6914c6ce0..e821c93daaf3 100644
--- a/src/components/DotIndicatorMessage.tsx
+++ b/src/components/DotIndicatorMessage.tsx
@@ -3,16 +3,8 @@ import React from 'react';
 import {StyleProp, TextStyle, View, ViewStyle} from 'react-native';
 import fileDownload from '@libs/fileDownload';
 import * as Localize from '@libs/Localize';
-<<<<<<< HEAD
-import * as StyleUtils from '@styles/StyleUtils';
-import useTheme from '@styles/theme/useTheme';
-||||||| b0268fab88
-import * as StyleUtils from '@styles/StyleUtils';
-import useTheme from '@styles/theme/useTheme';
-=======
 import useTheme from '@styles/theme/useTheme';
 import useStyleUtils from '@styles/useStyleUtils';
->>>>>>> @chrispader/use-style-utils-hook
 import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 import Icon from './Icon';
diff --git a/src/components/EmojiSuggestions.tsx b/src/components/EmojiSuggestions.tsx
index 7e7d8591178f..01f840677e5e 100644
--- a/src/components/EmojiSuggestions.tsx
+++ b/src/components/EmojiSuggestions.tsx
@@ -3,15 +3,7 @@ import {View} from 'react-native';
 import type {SimpleEmoji} from '@libs/EmojiTrie';
 import * as EmojiUtils from '@libs/EmojiUtils';
 import getStyledTextArray from '@libs/GetStyledTextArray';
-<<<<<<< HEAD
-import * as StyleUtils from '@styles/StyleUtils';
-import useTheme from '@styles/theme/useTheme';
-||||||| b0268fab88
-import * as StyleUtils from '@styles/StyleUtils';
-import useTheme from '@styles/theme/useTheme';
-=======
 import useStyleUtils from '@styles/useStyleUtils';
->>>>>>> @chrispader/use-style-utils-hook
 import useThemeStyles from '@styles/useThemeStyles';
 import AutoCompleteSuggestions from './AutoCompleteSuggestions';
 import Text from './Text';
diff --git a/src/components/ExpensifyWordmark.tsx b/src/components/ExpensifyWordmark.tsx
index c2e7b680b11f..307de4af10b5 100644
--- a/src/components/ExpensifyWordmark.tsx
+++ b/src/components/ExpensifyWordmark.tsx
@@ -5,16 +5,8 @@ import DevLogo from '@assets/images/expensify-logo--dev.svg';
 import StagingLogo from '@assets/images/expensify-logo--staging.svg';
 import ProductionLogo from '@assets/images/expensify-wordmark.svg';
 import useEnvironment from '@hooks/useEnvironment';
-<<<<<<< HEAD
-import * as StyleUtils from '@styles/StyleUtils';
-import useTheme from '@styles/theme/useTheme';
-||||||| b0268fab88
-import * as StyleUtils from '@styles/StyleUtils';
-import useTheme from '@styles/theme/useTheme';
-=======
 import useTheme from '@styles/theme/useTheme';
 import useStyleUtils from '@styles/useStyleUtils';
->>>>>>> @chrispader/use-style-utils-hook
 import useThemeStyles from '@styles/useThemeStyles';
 import variables from '@styles/variables';
 import CONST from '@src/CONST';
diff --git a/src/components/HTMLEngineProvider/HTMLRenderers/MentionHereRenderer.js b/src/components/HTMLEngineProvider/HTMLRenderers/MentionHereRenderer.js
index 47512d6b7f58..82769598d84a 100644
--- a/src/components/HTMLEngineProvider/HTMLRenderers/MentionHereRenderer.js
+++ b/src/components/HTMLEngineProvider/HTMLRenderers/MentionHereRenderer.js
@@ -2,15 +2,7 @@ import React from 'react';
 import {TNodeChildrenRenderer} from 'react-native-render-html';
 import _ from 'underscore';
 import Text from '@components/Text';
-<<<<<<< HEAD
-import * as StyleUtils from '@styles/StyleUtils';
-import useTheme from '@styles/theme/useTheme';
-||||||| b0268fab88
-import * as StyleUtils from '@styles/StyleUtils';
-import useTheme from '@styles/theme/useTheme';
-=======
 import useStyleUtils from '@styles/useStyleUtils';
->>>>>>> @chrispader/use-style-utils-hook
 import htmlRendererPropTypes from './htmlRendererPropTypes';
 
 function MentionHereRenderer(props) {
diff --git a/src/components/HTMLEngineProvider/HTMLRenderers/MentionUserRenderer.js b/src/components/HTMLEngineProvider/HTMLRenderers/MentionUserRenderer.js
index 53914fc4b50d..fbdacb6b47b0 100644
--- a/src/components/HTMLEngineProvider/HTMLRenderers/MentionUserRenderer.js
+++ b/src/components/HTMLEngineProvider/HTMLRenderers/MentionUserRenderer.js
@@ -13,15 +13,7 @@ import Navigation from '@libs/Navigation/Navigation';
 import * as PersonalDetailsUtils from '@libs/PersonalDetailsUtils';
 import * as ReportUtils from '@libs/ReportUtils';
 import personalDetailsPropType from '@pages/personalDetailsPropType';
-<<<<<<< HEAD
-import * as StyleUtils from '@styles/StyleUtils';
-import useTheme from '@styles/theme/useTheme';
-||||||| b0268fab88
-import * as StyleUtils from '@styles/StyleUtils';
-import useTheme from '@styles/theme/useTheme';
-=======
 import useStyleUtils from '@styles/useStyleUtils';
->>>>>>> @chrispader/use-style-utils-hook
 import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 import ROUTES from '@src/ROUTES';
diff --git a/src/components/HeaderPageLayout.js b/src/components/HeaderPageLayout.js
index 089f83d87182..9b7eb843d430 100644
--- a/src/components/HeaderPageLayout.js
+++ b/src/components/HeaderPageLayout.js
@@ -5,16 +5,8 @@ import _ from 'underscore';
 import useNetwork from '@hooks/useNetwork';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import * as Browser from '@libs/Browser';
-<<<<<<< HEAD
-import * as StyleUtils from '@styles/StyleUtils';
-import useTheme from '@styles/theme/useTheme';
-||||||| b0268fab88
-import * as StyleUtils from '@styles/StyleUtils';
-import useTheme from '@styles/theme/useTheme';
-=======
 import useTheme from '@styles/theme/useTheme';
 import useStyleUtils from '@styles/useStyleUtils';
->>>>>>> @chrispader/use-style-utils-hook
 import useThemeStyles from '@styles/useThemeStyles';
 import FixedFooter from './FixedFooter';
 import HeaderWithBackButton from './HeaderWithBackButton';
diff --git a/src/components/HeaderWithBackButton/index.js b/src/components/HeaderWithBackButton/index.js
index 80ac35441165..aa73ab2d3327 100755
--- a/src/components/HeaderWithBackButton/index.js
+++ b/src/components/HeaderWithBackButton/index.js
@@ -14,15 +14,7 @@ import useThrottledButtonState from '@hooks/useThrottledButtonState';
 import useWaitForNavigation from '@hooks/useWaitForNavigation';
 import getButtonState from '@libs/getButtonState';
 import Navigation from '@libs/Navigation/Navigation';
-<<<<<<< HEAD
-import * as StyleUtils from '@styles/StyleUtils';
-import useTheme from '@styles/theme/useTheme';
-||||||| b0268fab88
-import * as StyleUtils from '@styles/StyleUtils';
-import useTheme from '@styles/theme/useTheme';
-=======
 import useStyleUtils from '@styles/useStyleUtils';
->>>>>>> @chrispader/use-style-utils-hook
 import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 import ROUTES from '@src/ROUTES';
diff --git a/src/components/LHNOptionsList/OptionRowLHN.js b/src/components/LHNOptionsList/OptionRowLHN.js
index 6ff4c9fbc4a6..3caf5fdc9484 100644
--- a/src/components/LHNOptionsList/OptionRowLHN.js
+++ b/src/components/LHNOptionsList/OptionRowLHN.js
@@ -25,16 +25,8 @@ import * as ReportUtils from '@libs/ReportUtils';
 import * as ContextMenuActions from '@pages/home/report/ContextMenu/ContextMenuActions';
 import * as ReportActionContextMenu from '@pages/home/report/ContextMenu/ReportActionContextMenu';
 import * as optionRowStyles from '@styles/optionRowStyles';
-<<<<<<< HEAD
-import * as StyleUtils from '@styles/StyleUtils';
-import useTheme from '@styles/theme/useTheme';
-||||||| b0268fab88
-import * as StyleUtils from '@styles/StyleUtils';
-import useTheme from '@styles/theme/useTheme';
-=======
 import useTheme from '@styles/theme/useTheme';
 import useStyleUtils from '@styles/useStyleUtils';
->>>>>>> @chrispader/use-style-utils-hook
 import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 
diff --git a/src/components/MapView/MapView.web.tsx b/src/components/MapView/MapView.web.tsx
index 15668a720b88..c3521897e93e 100644
--- a/src/components/MapView/MapView.web.tsx
+++ b/src/components/MapView/MapView.web.tsx
@@ -9,16 +9,8 @@ import React, {forwardRef, useCallback, useEffect, useImperativeHandle, useState
 import Map, {MapRef, Marker} from 'react-map-gl';
 import {View} from 'react-native';
 import {withOnyx} from 'react-native-onyx';
-<<<<<<< HEAD
-import * as StyleUtils from '@styles/StyleUtils';
-import useTheme from '@styles/theme/useTheme';
-||||||| b0268fab88
-import * as StyleUtils from '@styles/StyleUtils';
-import useTheme from '@styles/theme/useTheme';
-=======
 import useTheme from '@styles/theme/useTheme';
 import useStyleUtils from '@styles/useStyleUtils';
->>>>>>> @chrispader/use-style-utils-hook
 import useThemeStyles from '@styles/useThemeStyles';
 import setUserLocation from '@userActions/UserLocation';
 import CONST from '@src/CONST';
diff --git a/src/components/MentionSuggestions.tsx b/src/components/MentionSuggestions.tsx
index f7c5caeb5dd2..33e23ee2c148 100644
--- a/src/components/MentionSuggestions.tsx
+++ b/src/components/MentionSuggestions.tsx
@@ -1,16 +1,8 @@
 import React, {useCallback} from 'react';
 import {View} from 'react-native';
 import getStyledTextArray from '@libs/GetStyledTextArray';
-<<<<<<< HEAD
-import * as StyleUtils from '@styles/StyleUtils';
-import useTheme from '@styles/theme/useTheme';
-||||||| b0268fab88
-import * as StyleUtils from '@styles/StyleUtils';
-import useTheme from '@styles/theme/useTheme';
-=======
 import useTheme from '@styles/theme/useTheme';
 import useStyleUtils from '@styles/useStyleUtils';
->>>>>>> @chrispader/use-style-utils-hook
 import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 import {Icon} from '@src/types/onyx/OnyxCommon';
diff --git a/src/components/MenuItem.js b/src/components/MenuItem.js
index db3c95d8e298..9df5680fdd04 100644
--- a/src/components/MenuItem.js
+++ b/src/components/MenuItem.js
@@ -7,16 +7,8 @@ import ControlSelection from '@libs/ControlSelection';
 import convertToLTR from '@libs/convertToLTR';
 import * as DeviceCapabilities from '@libs/DeviceCapabilities';
 import getButtonState from '@libs/getButtonState';
-<<<<<<< HEAD
-import * as StyleUtils from '@styles/StyleUtils';
-import useTheme from '@styles/theme/useTheme';
-||||||| b0268fab88
-import * as StyleUtils from '@styles/StyleUtils';
-import useTheme from '@styles/theme/useTheme';
-=======
 import useTheme from '@styles/theme/useTheme';
 import useStyleUtils from '@styles/useStyleUtils';
->>>>>>> @chrispader/use-style-utils-hook
 import useThemeStyles from '@styles/useThemeStyles';
 import variables from '@styles/variables';
 import * as Session from '@userActions/Session';
diff --git a/src/components/Modal/BaseModal.tsx b/src/components/Modal/BaseModal.tsx
index c9fdff05916c..eb90a7a838f1 100644
--- a/src/components/Modal/BaseModal.tsx
+++ b/src/components/Modal/BaseModal.tsx
@@ -7,18 +7,8 @@ import useSafeAreaInsets from '@hooks/useSafeAreaInsets';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import ComposerFocusManager from '@libs/ComposerFocusManager';
 import useNativeDriver from '@libs/useNativeDriver';
-<<<<<<< HEAD
-import getModalStyles from '@styles/getModalStyles';
-import * as StyleUtils from '@styles/StyleUtils';
-import useTheme from '@styles/theme/useTheme';
-||||||| b0268fab88
-import getModalStyles from '@styles/getModalStyles';
-import * as StyleUtils from '@styles/StyleUtils';
-import useTheme from '@styles/theme/useTheme';
-=======
 import useTheme from '@styles/theme/useTheme';
 import useStyleUtils from '@styles/useStyleUtils';
->>>>>>> @chrispader/use-style-utils-hook
 import useThemeStyles from '@styles/useThemeStyles';
 import variables from '@styles/variables';
 import * as Modal from '@userActions/Modal';
diff --git a/src/components/Modal/index.tsx b/src/components/Modal/index.tsx
index 3fb60e991b5b..55745761189e 100644
--- a/src/components/Modal/index.tsx
+++ b/src/components/Modal/index.tsx
@@ -1,16 +1,8 @@
 import React, {useState} from 'react';
 import withWindowDimensions from '@components/withWindowDimensions';
 import StatusBar from '@libs/StatusBar';
-<<<<<<< HEAD
-import * as StyleUtils from '@styles/StyleUtils';
-import useTheme from '@styles/theme/useTheme';
-||||||| b0268fab88
-import * as StyleUtils from '@styles/StyleUtils';
-import useTheme from '@styles/theme/useTheme';
-=======
 import useTheme from '@styles/theme/useTheme';
 import useStyleUtils from '@styles/useStyleUtils';
->>>>>>> @chrispader/use-style-utils-hook
 import CONST from '@src/CONST';
 import BaseModal from './BaseModal';
 import BaseModalProps from './types';
diff --git a/src/components/OptionRow.js b/src/components/OptionRow.js
index 7329dda8e137..b2a024e84258 100644
--- a/src/components/OptionRow.js
+++ b/src/components/OptionRow.js
@@ -5,16 +5,8 @@ import {InteractionManager, StyleSheet, View} from 'react-native';
 import _ from 'underscore';
 import * as OptionsListUtils from '@libs/OptionsListUtils';
 import * as ReportUtils from '@libs/ReportUtils';
-<<<<<<< HEAD
-import * as StyleUtils from '@styles/StyleUtils';
-import useTheme from '@styles/theme/useTheme';
-||||||| b0268fab88
-import * as StyleUtils from '@styles/StyleUtils';
-import useTheme from '@styles/theme/useTheme';
-=======
 import useTheme from '@styles/theme/useTheme';
 import useStyleUtils from '@styles/useStyleUtils';
->>>>>>> @chrispader/use-style-utils-hook
 import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 import Button from './Button';
diff --git a/src/components/PopoverWithoutOverlay/index.js b/src/components/PopoverWithoutOverlay/index.js
index e0be77b89b04..c13d9e1a0931 100644
--- a/src/components/PopoverWithoutOverlay/index.js
+++ b/src/components/PopoverWithoutOverlay/index.js
@@ -5,17 +5,7 @@ import {defaultProps, propTypes} from '@components/Popover/popoverPropTypes';
 import {PopoverContext} from '@components/PopoverProvider';
 import withWindowDimensions from '@components/withWindowDimensions';
 import useSafeAreaInsets from '@hooks/useSafeAreaInsets';
-<<<<<<< HEAD
-import getModalStyles from '@styles/getModalStyles';
-import * as StyleUtils from '@styles/StyleUtils';
-import useTheme from '@styles/theme/useTheme';
-||||||| b0268fab88
-import getModalStyles from '@styles/getModalStyles';
-import * as StyleUtils from '@styles/StyleUtils';
-import useTheme from '@styles/theme/useTheme';
-=======
 import useStyleUtils from '@styles/useStyleUtils';
->>>>>>> @chrispader/use-style-utils-hook
 import useThemeStyles from '@styles/useThemeStyles';
 import * as Modal from '@userActions/Modal';
 
diff --git a/src/components/Pressable/PressableWithDelayToggle.tsx b/src/components/Pressable/PressableWithDelayToggle.tsx
index af42d3272a4f..6237ce3e4660 100644
--- a/src/components/Pressable/PressableWithDelayToggle.tsx
+++ b/src/components/Pressable/PressableWithDelayToggle.tsx
@@ -8,15 +8,7 @@ import Text from '@components/Text';
 import Tooltip from '@components/Tooltip';
 import useThrottledButtonState from '@hooks/useThrottledButtonState';
 import getButtonState from '@libs/getButtonState';
-<<<<<<< HEAD
-import * as StyleUtils from '@styles/StyleUtils';
-import useTheme from '@styles/theme/useTheme';
-||||||| b0268fab88
-import * as StyleUtils from '@styles/StyleUtils';
-import useTheme from '@styles/theme/useTheme';
-=======
 import useStyleUtils from '@styles/useStyleUtils';
->>>>>>> @chrispader/use-style-utils-hook
 import useThemeStyles from '@styles/useThemeStyles';
 import variables from '@styles/variables';
 import PressableProps, {PressableRef} from './GenericPressable/types';
diff --git a/src/components/Reactions/AddReactionBubble.js b/src/components/Reactions/AddReactionBubble.js
index 2b30793347ed..994d467dfd6e 100644
--- a/src/components/Reactions/AddReactionBubble.js
+++ b/src/components/Reactions/AddReactionBubble.js
@@ -8,15 +8,7 @@ import Text from '@components/Text';
 import Tooltip from '@components/Tooltip/PopoverAnchorTooltip';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
 import getButtonState from '@libs/getButtonState';
-<<<<<<< HEAD
-import * as StyleUtils from '@styles/StyleUtils';
-import useTheme from '@styles/theme/useTheme';
-||||||| b0268fab88
-import * as StyleUtils from '@styles/StyleUtils';
-import useTheme from '@styles/theme/useTheme';
-=======
 import useStyleUtils from '@styles/useStyleUtils';
->>>>>>> @chrispader/use-style-utils-hook
 import useThemeStyles from '@styles/useThemeStyles';
 import variables from '@styles/variables';
 import * as EmojiPickerAction from '@userActions/EmojiPickerAction';
diff --git a/src/components/Reactions/EmojiReactionBubble.js b/src/components/Reactions/EmojiReactionBubble.js
index 4983dbd6c009..7fcdae8c0a5a 100644
--- a/src/components/Reactions/EmojiReactionBubble.js
+++ b/src/components/Reactions/EmojiReactionBubble.js
@@ -4,15 +4,7 @@ import PressableWithSecondaryInteraction from '@components/PressableWithSecondar
 import Text from '@components/Text';
 import {withCurrentUserPersonalDetailsDefaultProps} from '@components/withCurrentUserPersonalDetails';
 import withWindowDimensions, {windowDimensionsPropTypes} from '@components/withWindowDimensions';
-<<<<<<< HEAD
-import * as StyleUtils from '@styles/StyleUtils';
-import useTheme from '@styles/theme/useTheme';
-||||||| b0268fab88
-import * as StyleUtils from '@styles/StyleUtils';
-import useTheme from '@styles/theme/useTheme';
-=======
 import useStyleUtils from '@styles/useStyleUtils';
->>>>>>> @chrispader/use-style-utils-hook
 import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 
diff --git a/src/components/Reactions/MiniQuickEmojiReactions.js b/src/components/Reactions/MiniQuickEmojiReactions.js
index 07b325d5d98b..92913a7c4c5e 100644
--- a/src/components/Reactions/MiniQuickEmojiReactions.js
+++ b/src/components/Reactions/MiniQuickEmojiReactions.js
@@ -11,15 +11,7 @@ import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
 import compose from '@libs/compose';
 import * as EmojiUtils from '@libs/EmojiUtils';
 import getButtonState from '@libs/getButtonState';
-<<<<<<< HEAD
-import * as StyleUtils from '@styles/StyleUtils';
-import useTheme from '@styles/theme/useTheme';
-||||||| b0268fab88
-import * as StyleUtils from '@styles/StyleUtils';
-import useTheme from '@styles/theme/useTheme';
-=======
 import useStyleUtils from '@styles/useStyleUtils';
->>>>>>> @chrispader/use-style-utils-hook
 import useThemeStyles from '@styles/useThemeStyles';
 import * as EmojiPickerAction from '@userActions/EmojiPickerAction';
 import * as Session from '@userActions/Session';
diff --git a/src/components/ReportActionItem/MoneyReportView.js b/src/components/ReportActionItem/MoneyReportView.js
index 7890e550ce0c..3c135969988e 100644
--- a/src/components/ReportActionItem/MoneyReportView.js
+++ b/src/components/ReportActionItem/MoneyReportView.js
@@ -11,16 +11,8 @@ import * as CurrencyUtils from '@libs/CurrencyUtils';
 import * as ReportUtils from '@libs/ReportUtils';
 import AnimatedEmptyStateBackground from '@pages/home/report/AnimatedEmptyStateBackground';
 import reportPropTypes from '@pages/reportPropTypes';
-<<<<<<< HEAD
-import * as StyleUtils from '@styles/StyleUtils';
-import useTheme from '@styles/theme/useTheme';
-||||||| b0268fab88
-import * as StyleUtils from '@styles/StyleUtils';
-import useTheme from '@styles/theme/useTheme';
-=======
 import useTheme from '@styles/theme/useTheme';
 import useStyleUtils from '@styles/useStyleUtils';
->>>>>>> @chrispader/use-style-utils-hook
 import useThemeStyles from '@styles/useThemeStyles';
 import variables from '@styles/variables';
 
diff --git a/src/components/ReportActionItem/MoneyRequestPreview.js b/src/components/ReportActionItem/MoneyRequestPreview.js
index d33b05df2165..bfd1a876e5f5 100644
--- a/src/components/ReportActionItem/MoneyRequestPreview.js
+++ b/src/components/ReportActionItem/MoneyRequestPreview.js
@@ -28,16 +28,8 @@ import * as ReportUtils from '@libs/ReportUtils';
 import * as TransactionUtils from '@libs/TransactionUtils';
 import walletTermsPropTypes from '@pages/EnablePayments/walletTermsPropTypes';
 import reportActionPropTypes from '@pages/home/report/reportActionPropTypes';
-<<<<<<< HEAD
-import * as StyleUtils from '@styles/StyleUtils';
-import useTheme from '@styles/theme/useTheme';
-||||||| b0268fab88
-import * as StyleUtils from '@styles/StyleUtils';
-import useTheme from '@styles/theme/useTheme';
-=======
 import useTheme from '@styles/theme/useTheme';
 import useStyleUtils from '@styles/useStyleUtils';
->>>>>>> @chrispader/use-style-utils-hook
 import useThemeStyles from '@styles/useThemeStyles';
 import * as PaymentMethods from '@userActions/PaymentMethods';
 import * as Report from '@userActions/Report';
diff --git a/src/components/ReportActionItem/MoneyRequestView.js b/src/components/ReportActionItem/MoneyRequestView.js
index 8360c6278454..cd582597eb2f 100644
--- a/src/components/ReportActionItem/MoneyRequestView.js
+++ b/src/components/ReportActionItem/MoneyRequestView.js
@@ -31,18 +31,8 @@ import * as TransactionUtils from '@libs/TransactionUtils';
 import AnimatedEmptyStateBackground from '@pages/home/report/AnimatedEmptyStateBackground';
 import reportActionPropTypes from '@pages/home/report/reportActionPropTypes';
 import iouReportPropTypes from '@pages/iouReportPropTypes';
-<<<<<<< HEAD
-import reportPropTypes from '@pages/reportPropTypes';
-import * as StyleUtils from '@styles/StyleUtils';
-import useTheme from '@styles/theme/useTheme';
-||||||| b0268fab88
-import reportPropTypes from '@pages/reportPropTypes';
-import * as StyleUtils from '@styles/StyleUtils';
-import useTheme from '@styles/theme/useTheme';
-=======
 import useTheme from '@styles/theme/useTheme';
 import useStyleUtils from '@styles/useStyleUtils';
->>>>>>> @chrispader/use-style-utils-hook
 import useThemeStyles from '@styles/useThemeStyles';
 import reportPropTypes from '@styles/utils/StyleUtilsypes';
 import * as IOU from '@userActions/IOU';
diff --git a/src/components/ReportActionItem/ReportActionItemImages.js b/src/components/ReportActionItem/ReportActionItemImages.js
index 5b5fde51c42d..372a7c0497a9 100644
--- a/src/components/ReportActionItem/ReportActionItemImages.js
+++ b/src/components/ReportActionItem/ReportActionItemImages.js
@@ -5,16 +5,8 @@ import {Polygon, Svg} from 'react-native-svg';
 import _ from 'underscore';
 import Text from '@components/Text';
 import transactionPropTypes from '@components/transactionPropTypes';
-<<<<<<< HEAD
-import * as StyleUtils from '@styles/StyleUtils';
-import useTheme from '@styles/theme/useTheme';
-||||||| b0268fab88
-import * as StyleUtils from '@styles/StyleUtils';
-import useTheme from '@styles/theme/useTheme';
-=======
 import useTheme from '@styles/theme/useTheme';
 import useStyleUtils from '@styles/useStyleUtils';
->>>>>>> @chrispader/use-style-utils-hook
 import useThemeStyles from '@styles/useThemeStyles';
 import variables from '@styles/variables';
 import ReportActionItemImage from './ReportActionItemImage';
diff --git a/src/components/ReportActionItem/TaskPreview.js b/src/components/ReportActionItem/TaskPreview.js
index 86961c394170..5d1c9972666a 100644
--- a/src/components/ReportActionItem/TaskPreview.js
+++ b/src/components/ReportActionItem/TaskPreview.js
@@ -22,15 +22,7 @@ import * as LocalePhoneNumber from '@libs/LocalePhoneNumber';
 import Navigation from '@libs/Navigation/Navigation';
 import * as ReportUtils from '@libs/ReportUtils';
 import reportActionPropTypes from '@pages/home/report/reportActionPropTypes';
-<<<<<<< HEAD
-import * as StyleUtils from '@styles/StyleUtils';
-import useTheme from '@styles/theme/useTheme';
-||||||| b0268fab88
-import * as StyleUtils from '@styles/StyleUtils';
-import useTheme from '@styles/theme/useTheme';
-=======
 import useStyleUtils from '@styles/useStyleUtils';
->>>>>>> @chrispader/use-style-utils-hook
 import useThemeStyles from '@styles/useThemeStyles';
 import * as Session from '@userActions/Session';
 import * as Task from '@userActions/Task';
diff --git a/src/components/ReportActionItem/TaskView.js b/src/components/ReportActionItem/TaskView.js
index 71d17f2758b9..ea02dba705a6 100644
--- a/src/components/ReportActionItem/TaskView.js
+++ b/src/components/ReportActionItem/TaskView.js
@@ -24,15 +24,7 @@ import Navigation from '@libs/Navigation/Navigation';
 import * as OptionsListUtils from '@libs/OptionsListUtils';
 import * as ReportUtils from '@libs/ReportUtils';
 import reportPropTypes from '@pages/reportPropTypes';
-<<<<<<< HEAD
-import * as StyleUtils from '@styles/StyleUtils';
-import useTheme from '@styles/theme/useTheme';
-||||||| b0268fab88
-import * as StyleUtils from '@styles/StyleUtils';
-import useTheme from '@styles/theme/useTheme';
-=======
 import useStyleUtils from '@styles/useStyleUtils';
->>>>>>> @chrispader/use-style-utils-hook
 import useThemeStyles from '@styles/useThemeStyles';
 import * as Session from '@userActions/Session';
 import * as Task from '@userActions/Task';
diff --git a/src/components/RoomHeaderAvatars.js b/src/components/RoomHeaderAvatars.js
index 4481bb04ea50..cb2c93a925ac 100644
--- a/src/components/RoomHeaderAvatars.js
+++ b/src/components/RoomHeaderAvatars.js
@@ -3,16 +3,8 @@ import React, {memo} from 'react';
 import {View} from 'react-native';
 import _ from 'underscore';
 import * as UserUtils from '@libs/UserUtils';
-<<<<<<< HEAD
-import * as StyleUtils from '@styles/StyleUtils';
-import useTheme from '@styles/theme/useTheme';
-||||||| b0268fab88
-import * as StyleUtils from '@styles/StyleUtils';
-import useTheme from '@styles/theme/useTheme';
-=======
 import useTheme from '@styles/theme/useTheme';
 import useStyleUtils from '@styles/useStyleUtils';
->>>>>>> @chrispader/use-style-utils-hook
 import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 import AttachmentModal from './AttachmentModal';
diff --git a/src/components/SelectionList/BaseListItem.js b/src/components/SelectionList/BaseListItem.js
index de2f0ad554c4..ea451ad3c3fe 100644
--- a/src/components/SelectionList/BaseListItem.js
+++ b/src/components/SelectionList/BaseListItem.js
@@ -7,16 +7,8 @@ import OfflineWithFeedback from '@components/OfflineWithFeedback';
 import PressableWithFeedback from '@components/Pressable/PressableWithFeedback';
 import Text from '@components/Text';
 import useLocalize from '@hooks/useLocalize';
-<<<<<<< HEAD
-import * as StyleUtils from '@styles/StyleUtils';
-import useTheme from '@styles/theme/useTheme';
-||||||| b0268fab88
-import * as StyleUtils from '@styles/StyleUtils';
-import useTheme from '@styles/theme/useTheme';
-=======
 import useTheme from '@styles/theme/useTheme';
 import useStyleUtils from '@styles/useStyleUtils';
->>>>>>> @chrispader/use-style-utils-hook
 import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 import RadioListItem from './RadioListItem';
diff --git a/src/components/SubscriptAvatar.tsx b/src/components/SubscriptAvatar.tsx
index e569ea153681..ac32cf91e520 100644
--- a/src/components/SubscriptAvatar.tsx
+++ b/src/components/SubscriptAvatar.tsx
@@ -2,16 +2,8 @@ import React, {memo} from 'react';
 import {View} from 'react-native';
 import {ValueOf} from 'type-fest';
 import type {AvatarSource} from '@libs/UserUtils';
-<<<<<<< HEAD
-import * as StyleUtils from '@styles/StyleUtils';
-import useTheme from '@styles/theme/useTheme';
-||||||| b0268fab88
-import * as StyleUtils from '@styles/StyleUtils';
-import useTheme from '@styles/theme/useTheme';
-=======
 import useTheme from '@styles/theme/useTheme';
 import useStyleUtils from '@styles/useStyleUtils';
->>>>>>> @chrispader/use-style-utils-hook
 import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 import {AvatarType} from '@src/types/onyx/OnyxCommon';
diff --git a/src/components/TextInput/BaseTextInput/index.native.js b/src/components/TextInput/BaseTextInput/index.native.js
index 9591f113e337..91eea749b028 100644
--- a/src/components/TextInput/BaseTextInput/index.native.js
+++ b/src/components/TextInput/BaseTextInput/index.native.js
@@ -16,16 +16,8 @@ import withLocalize from '@components/withLocalize';
 import getSecureEntryKeyboardType from '@libs/getSecureEntryKeyboardType';
 import isInputAutoFilled from '@libs/isInputAutoFilled';
 import useNativeDriver from '@libs/useNativeDriver';
-<<<<<<< HEAD
-import * as StyleUtils from '@styles/StyleUtils';
-import useTheme from '@styles/theme/useTheme';
-||||||| b0268fab88
-import * as StyleUtils from '@styles/StyleUtils';
-import useTheme from '@styles/theme/useTheme';
-=======
 import useTheme from '@styles/theme/useTheme';
 import useStyleUtils from '@styles/useStyleUtils';
->>>>>>> @chrispader/use-style-utils-hook
 import useThemeStyles from '@styles/useThemeStyles';
 import variables from '@styles/variables';
 import CONST from '@src/CONST';
diff --git a/src/components/Tooltip/TooltipRenderedOnPageBody.js b/src/components/Tooltip/TooltipRenderedOnPageBody.js
index beffbb7718c9..10e82cc94c30 100644
--- a/src/components/Tooltip/TooltipRenderedOnPageBody.js
+++ b/src/components/Tooltip/TooltipRenderedOnPageBody.js
@@ -4,17 +4,7 @@ import ReactDOM from 'react-dom';
 import {Animated, View} from 'react-native';
 import Text from '@components/Text';
 import Log from '@libs/Log';
-<<<<<<< HEAD
-import getTooltipStyles from '@styles/getTooltipStyles';
-import useTheme from '@styles/theme/useTheme';
-import useThemeStyles from '@styles/useThemeStyles';
-||||||| b0268fab88
-import getTooltipStyles from '@styles/getTooltipStyles';
-import useTheme from '@styles/theme/useTheme';
-import useThemeStyles from '@styles/useThemeStyles';
-=======
 import useStyleUtils from '@styles/useStyleUtils';
->>>>>>> @chrispader/use-style-utils-hook
 
 const propTypes = {
     /** Window width */
diff --git a/src/pages/home/report/ContextMenu/BaseReportActionContextMenu.js b/src/pages/home/report/ContextMenu/BaseReportActionContextMenu.js
index d281021983b0..33adfa4b35f9 100755
--- a/src/pages/home/report/ContextMenu/BaseReportActionContextMenu.js
+++ b/src/pages/home/report/ContextMenu/BaseReportActionContextMenu.js
@@ -12,17 +12,7 @@ import useArrowKeyFocusManager from '@hooks/useArrowKeyFocusManager';
 import useKeyboardShortcut from '@hooks/useKeyboardShortcut';
 import useNetwork from '@hooks/useNetwork';
 import compose from '@libs/compose';
-<<<<<<< HEAD
-import getReportActionContextMenuStyles from '@styles/getReportActionContextMenuStyles';
-import useTheme from '@styles/theme/useTheme';
-import useThemeStyles from '@styles/useThemeStyles';
-||||||| b0268fab88
-import getReportActionContextMenuStyles from '@styles/getReportActionContextMenuStyles';
-import useTheme from '@styles/theme/useTheme';
-import useThemeStyles from '@styles/useThemeStyles';
-=======
 import useStyleUtils from '@styles/useStyleUtils';
->>>>>>> @chrispader/use-style-utils-hook
 import * as Session from '@userActions/Session';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
diff --git a/src/pages/home/report/LinkPreviewer.js b/src/pages/home/report/LinkPreviewer.js
index bd1ea661427f..6c0518df67ae 100644
--- a/src/pages/home/report/LinkPreviewer.js
+++ b/src/pages/home/report/LinkPreviewer.js
@@ -5,16 +5,8 @@ import {Image, View} from 'react-native';
 import _ from 'underscore';
 import Text from '@components/Text';
 import TextLink from '@components/TextLink';
-<<<<<<< HEAD
-import * as StyleUtils from '@styles/StyleUtils';
-import useTheme from '@styles/theme/useTheme';
-||||||| b0268fab88
-import * as StyleUtils from '@styles/StyleUtils';
-import useTheme from '@styles/theme/useTheme';
-=======
 import useTheme from '@styles/theme/useTheme';
 import useStyleUtils from '@styles/useStyleUtils';
->>>>>>> @chrispader/use-style-utils-hook
 import useThemeStyles from '@styles/useThemeStyles';
 import variables from '@styles/variables';
 
diff --git a/src/pages/home/report/ReactionList/HeaderReactionList.js b/src/pages/home/report/ReactionList/HeaderReactionList.js
index 62697dee6cca..1b1751e32eef 100644
--- a/src/pages/home/report/ReactionList/HeaderReactionList.js
+++ b/src/pages/home/report/ReactionList/HeaderReactionList.js
@@ -6,15 +6,7 @@ import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
 import withWindowDimensions, {windowDimensionsPropTypes} from '@components/withWindowDimensions';
 import compose from '@libs/compose';
 import * as EmojiUtils from '@libs/EmojiUtils';
-<<<<<<< HEAD
-import * as StyleUtils from '@styles/StyleUtils';
-import useTheme from '@styles/theme/useTheme';
-||||||| b0268fab88
-import * as StyleUtils from '@styles/StyleUtils';
-import useTheme from '@styles/theme/useTheme';
-=======
 import useStyleUtils from '@styles/useStyleUtils';
->>>>>>> @chrispader/use-style-utils-hook
 import useThemeStyles from '@styles/useThemeStyles';
 import reactionPropTypes from './reactionPropTypes';
 
diff --git a/src/pages/home/report/ReportActionItem.js b/src/pages/home/report/ReportActionItem.js
index 14762a9c7ac4..5d908ba0ace8 100644
--- a/src/pages/home/report/ReportActionItem.js
+++ b/src/pages/home/report/ReportActionItem.js
@@ -46,16 +46,8 @@ import SelectionScraper from '@libs/SelectionScraper';
 import userWalletPropTypes from '@pages/EnablePayments/userWalletPropTypes';
 import {ReactionListContext} from '@pages/home/ReportScreenContext';
 import reportPropTypes from '@pages/reportPropTypes';
-<<<<<<< HEAD
-import * as StyleUtils from '@styles/StyleUtils';
-import useTheme from '@styles/theme/useTheme';
-||||||| b0268fab88
-import * as StyleUtils from '@styles/StyleUtils';
-import useTheme from '@styles/theme/useTheme';
-=======
 import useTheme from '@styles/theme/useTheme';
 import useStyleUtils from '@styles/useStyleUtils';
->>>>>>> @chrispader/use-style-utils-hook
 import useThemeStyles from '@styles/useThemeStyles';
 import * as BankAccounts from '@userActions/BankAccounts';
 import * as EmojiPickerAction from '@userActions/EmojiPickerAction';
diff --git a/src/pages/home/report/ReportActionItemSingle.js b/src/pages/home/report/ReportActionItemSingle.js
index b15504a51993..62a051b58d18 100644
--- a/src/pages/home/report/ReportActionItemSingle.js
+++ b/src/pages/home/report/ReportActionItemSingle.js
@@ -20,16 +20,8 @@ import * as ReportUtils from '@libs/ReportUtils';
 import * as UserUtils from '@libs/UserUtils';
 import reportPropTypes from '@pages/reportPropTypes';
 import stylePropTypes from '@styles/stylePropTypes';
-<<<<<<< HEAD
-import * as StyleUtils from '@styles/StyleUtils';
-import useTheme from '@styles/theme/useTheme';
-||||||| b0268fab88
-import * as StyleUtils from '@styles/StyleUtils';
-import useTheme from '@styles/theme/useTheme';
-=======
 import useTheme from '@styles/theme/useTheme';
 import useStyleUtils from '@styles/useStyleUtils';
->>>>>>> @chrispader/use-style-utils-hook
 import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 import ROUTES from '@src/ROUTES';
diff --git a/src/pages/home/sidebar/SidebarLinks.js b/src/pages/home/sidebar/SidebarLinks.js
index 3c6d572532e5..1b51ee191665 100644
--- a/src/pages/home/sidebar/SidebarLinks.js
+++ b/src/pages/home/sidebar/SidebarLinks.js
@@ -19,16 +19,8 @@ import onyxSubscribe from '@libs/onyxSubscribe';
 import SidebarUtils from '@libs/SidebarUtils';
 import * as ReportActionContextMenu from '@pages/home/report/ContextMenu/ReportActionContextMenu';
 import safeAreaInsetPropTypes from '@pages/safeAreaInsetPropTypes';
-<<<<<<< HEAD
-import * as StyleUtils from '@styles/StyleUtils';
-import useTheme from '@styles/theme/useTheme';
-||||||| b0268fab88
-import * as StyleUtils from '@styles/StyleUtils';
-import useTheme from '@styles/theme/useTheme';
-=======
 import useTheme from '@styles/theme/useTheme';
 import useStyleUtils from '@styles/useStyleUtils';
->>>>>>> @chrispader/use-style-utils-hook
 import useThemeStyles from '@styles/useThemeStyles';
 import variables from '@styles/variables';
 import * as App from '@userActions/App';
diff --git a/src/pages/settings/Profile/Contacts/ValidateCodeForm/BaseValidateCodeForm.js b/src/pages/settings/Profile/Contacts/ValidateCodeForm/BaseValidateCodeForm.js
index 02aabd9b7551..103e4f960d86 100644
--- a/src/pages/settings/Profile/Contacts/ValidateCodeForm/BaseValidateCodeForm.js
+++ b/src/pages/settings/Profile/Contacts/ValidateCodeForm/BaseValidateCodeForm.js
@@ -16,16 +16,8 @@ import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
 import compose from '@libs/compose';
 import * as ErrorUtils from '@libs/ErrorUtils';
 import * as ValidationUtils from '@libs/ValidationUtils';
-<<<<<<< HEAD
-import * as StyleUtils from '@styles/StyleUtils';
-import useTheme from '@styles/theme/useTheme';
-||||||| b0268fab88
-import * as StyleUtils from '@styles/StyleUtils';
-import useTheme from '@styles/theme/useTheme';
-=======
 import useTheme from '@styles/theme/useTheme';
 import useStyleUtils from '@styles/useStyleUtils';
->>>>>>> @chrispader/use-style-utils-hook
 import useThemeStyles from '@styles/useThemeStyles';
 import * as Session from '@userActions/Session';
 import * as User from '@userActions/User';
diff --git a/src/pages/settings/Wallet/PaymentMethodList.js b/src/pages/settings/Wallet/PaymentMethodList.js
index 0e0db23a32af..4f6d0331f3b4 100644
--- a/src/pages/settings/Wallet/PaymentMethodList.js
+++ b/src/pages/settings/Wallet/PaymentMethodList.js
@@ -21,15 +21,7 @@ import Log from '@libs/Log';
 import Navigation from '@libs/Navigation/Navigation';
 import * as PaymentUtils from '@libs/PaymentUtils';
 import stylePropTypes from '@styles/stylePropTypes';
-<<<<<<< HEAD
-import * as StyleUtils from '@styles/StyleUtils';
-import useTheme from '@styles/theme/useTheme';
-||||||| b0268fab88
-import * as StyleUtils from '@styles/StyleUtils';
-import useTheme from '@styles/theme/useTheme';
-=======
 import useStyleUtils from '@styles/useStyleUtils';
->>>>>>> @chrispader/use-style-utils-hook
 import useThemeStyles from '@styles/useThemeStyles';
 import variables from '@styles/variables';
 import * as PaymentMethods from '@userActions/PaymentMethods';
diff --git a/src/pages/signin/ValidateCodeForm/BaseValidateCodeForm.js b/src/pages/signin/ValidateCodeForm/BaseValidateCodeForm.js
index 98c6f1526db1..28b36831dbe6 100755
--- a/src/pages/signin/ValidateCodeForm/BaseValidateCodeForm.js
+++ b/src/pages/signin/ValidateCodeForm/BaseValidateCodeForm.js
@@ -20,16 +20,8 @@ import * as ErrorUtils from '@libs/ErrorUtils';
 import * as ValidationUtils from '@libs/ValidationUtils';
 import ChangeExpensifyLoginLink from '@pages/signin/ChangeExpensifyLoginLink';
 import Terms from '@pages/signin/Terms';
-<<<<<<< HEAD
-import * as StyleUtils from '@styles/StyleUtils';
-import useTheme from '@styles/theme/useTheme';
-||||||| b0268fab88
-import * as StyleUtils from '@styles/StyleUtils';
-import useTheme from '@styles/theme/useTheme';
-=======
 import useTheme from '@styles/theme/useTheme';
 import useStyleUtils from '@styles/useStyleUtils';
->>>>>>> @chrispader/use-style-utils-hook
 import useThemeStyles from '@styles/useThemeStyles';
 import * as Session from '@userActions/Session';
 import * as User from '@userActions/User';

From 03005cde5eb28fc14adf281ad0fd09d022d52232 Mon Sep 17 00:00:00 2001
From: Christoph Pader <christoph.pader@outlook.com>
Date: Thu, 7 Dec 2023 12:16:44 +0100
Subject: [PATCH 036/102] fix: eslint

---
 .eslintrc.js | 17 ++++++++---------
 1 file changed, 8 insertions(+), 9 deletions(-)

diff --git a/.eslintrc.js b/.eslintrc.js
index de00edebed3d..b86d6c483563 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -23,22 +23,21 @@ const restrictedImportPaths = [
         name: '@styles/theme/Themes',
         importNames: ['default', 'defaultTheme'],
 
-        message: 'Do not import themes directly. Please use the `useTheme` hook or `withTheme` HOC instead.`',
+        message: 'Do not import themes directly. Please use the `useTheme` hook or `withTheme` HOC instead.',
     },
     {
         name: '@styles/styles',
         importNames: ['default', 'defaultStyles'],
-        message: 'Do not import styles directly. Please use the `useThemeStyles` hook or `withThemeStyles` HOC instead.`',
+        message: 'Do not import styles directly. Please use the `useThemeStyles` hook or `withThemeStyles` HOC instead.',
     },
     {
         name: '@styles/StyleUtils',
         importNames: ['default', 'DefaultStyleUtils'],
-
-        message: 'Do not import StyleUtils directly. Please use the `useStyleUtils` hook or `withStyleUtils` HOC instead.`',
+        message: 'Do not import StyleUtils directly. Please use the `useStyleUtils` hook or `withStyleUtils` HOC instead.',
     },
     {
-        name: ['@styles/illustrations/Illustrations'],
-        message: 'Do not import theme illustrations directly. Please use the `useThemeIllustrations` hook instead.`',
+        name: '@styles/illustrations/Illustrations',
+        message: 'Do not import theme illustrations directly. Please use the `useThemeIllustrations` hook instead.',
     },
 ];
 
@@ -49,11 +48,11 @@ const restrictedImportPatterns = [
     },
     {
         group: ['@styles/theme/themes/**/*'],
-        message: 'Do not import themes directly. Please use the `useTheme` hook or `withTheme` HOC instead.`',
+        message: 'Do not import themes directly. Please use the `useTheme` hook or `withTheme` HOC instead.',
     },
     {
-        group: ['@styles/illustrations/themes/*'],
-        message: 'Do not import theme illustrations directly. Please use the `useThemeIllustrations` hook instead.`',
+        group: ['@styles/illustrations/themes/**/*'],
+        message: 'Do not import theme illustrations directly. Please use the `useThemeIllustrations` hook instead.',
     },
 ];
 

From 4662fc489a84430a8e8eb5dab87248cd112cc8d6 Mon Sep 17 00:00:00 2001
From: Christoph Pader <christoph.pader@outlook.com>
Date: Thu, 7 Dec 2023 12:39:38 +0100
Subject: [PATCH 037/102] fix: lint errors

---
 src/components/SAMLLoadingIndicator.js             | 8 +++++---
 src/stories/CheckboxWithLabel.stories.js           | 1 +
 src/stories/DragAndDrop.stories.js                 | 1 +
 src/stories/Form.stories.js                        | 1 +
 src/stories/PopoverMenu.stories.js                 | 1 +
 src/stories/SelectionList.stories.js               | 1 +
 src/styles/PopoverWithMeasuredContentStyleUtils.ts | 2 +-
 src/styles/ThemeStyleUtils/TooltipStyleUtils.ts    | 4 ++--
 src/styles/useStyleUtils.ts                        | 2 +-
 9 files changed, 14 insertions(+), 7 deletions(-)

diff --git a/src/components/SAMLLoadingIndicator.js b/src/components/SAMLLoadingIndicator.js
index 72bba2105a1c..1ad99f29d734 100644
--- a/src/components/SAMLLoadingIndicator.js
+++ b/src/components/SAMLLoadingIndicator.js
@@ -1,14 +1,16 @@
 import React from 'react';
 import {StyleSheet, View} from 'react-native';
 import useLocalize from '@hooks/useLocalize';
-import styles from '@styles/styles';
-import themeColors from '@styles/theme/themes/dark';
+import useTheme from '@styles/theme/useTheme';
+import useThemeStyles from '@styles/useThemeStyles';
 import Icon from './Icon';
 import * as Expensicons from './Icon/Expensicons';
 import * as Illustrations from './Icon/Illustrations';
 import Text from './Text';
 
 function SAMLLoadingIndicator() {
+    const theme = useTheme();
+    const styles = useThemeStyles();
     const {translate} = useLocalize();
     return (
         <View style={[StyleSheet.absoluteFillObject, styles.deeplinkWrapperContainer]}>
@@ -29,7 +31,7 @@ function SAMLLoadingIndicator() {
                 <Icon
                     width={154}
                     height={34}
-                    fill={themeColors.success}
+                    fill={theme.success}
                     src={Expensicons.ExpensifyWordmark}
                 />
             </View>
diff --git a/src/stories/CheckboxWithLabel.stories.js b/src/stories/CheckboxWithLabel.stories.js
index 842f23816b3b..f1a5b68ea1a1 100644
--- a/src/stories/CheckboxWithLabel.stories.js
+++ b/src/stories/CheckboxWithLabel.stories.js
@@ -1,6 +1,7 @@
 import React from 'react';
 import CheckboxWithLabel from '@components/CheckboxWithLabel';
 import Text from '@components/Text';
+// eslint-disable-next-line no-restricted-imports
 import {defaultStyles} from '@styles/styles';
 
 /**
diff --git a/src/stories/DragAndDrop.stories.js b/src/stories/DragAndDrop.stories.js
index d9812b026e9d..c0b258972b3a 100644
--- a/src/stories/DragAndDrop.stories.js
+++ b/src/stories/DragAndDrop.stories.js
@@ -4,6 +4,7 @@ import {Image, View} from 'react-native';
 import DragAndDropConsumer from '@components/DragAndDrop/Consumer';
 import DragAndDropProvider from '@components/DragAndDrop/Provider';
 import Text from '@components/Text';
+// eslint-disable-next-line no-restricted-imports
 import {defaultStyles} from '@styles/styles';
 
 /**
diff --git a/src/stories/Form.stories.js b/src/stories/Form.stories.js
index 00191fc6b752..e13695266e39 100644
--- a/src/stories/Form.stories.js
+++ b/src/stories/Form.stories.js
@@ -11,6 +11,7 @@ import Text from '@components/Text';
 import TextInput from '@components/TextInput';
 import NetworkConnection from '@libs/NetworkConnection';
 import * as ValidationUtils from '@libs/ValidationUtils';
+// eslint-disable-next-line no-restricted-imports
 import {defaultStyles} from '@styles/styles';
 import * as FormActions from '@userActions/FormActions';
 import CONST from '@src/CONST';
diff --git a/src/stories/PopoverMenu.stories.js b/src/stories/PopoverMenu.stories.js
index d416ce3e45b7..c03a554741f1 100644
--- a/src/stories/PopoverMenu.stories.js
+++ b/src/stories/PopoverMenu.stories.js
@@ -3,6 +3,7 @@ import {SafeAreaProvider} from 'react-native-safe-area-context';
 import * as Expensicons from '@components/Icon/Expensicons';
 import MenuItem from '@components/MenuItem';
 import PopoverMenu from '@components/PopoverMenu';
+// eslint-disable-next-line no-restricted-imports
 import themeColors from '@styles/theme/themes/dark';
 
 /**
diff --git a/src/stories/SelectionList.stories.js b/src/stories/SelectionList.stories.js
index 28d0fdc35e63..48a4614f771e 100644
--- a/src/stories/SelectionList.stories.js
+++ b/src/stories/SelectionList.stories.js
@@ -3,6 +3,7 @@ import {View} from 'react-native';
 import _ from 'underscore';
 import SelectionList from '@components/SelectionList';
 import Text from '@components/Text';
+// eslint-disable-next-line no-restricted-imports
 import {defaultStyles} from '@styles/styles';
 import CONST from '@src/CONST';
 
diff --git a/src/styles/PopoverWithMeasuredContentStyleUtils.ts b/src/styles/PopoverWithMeasuredContentStyleUtils.ts
index 5f8d4d6d0d4e..5e12e2f2d2eb 100644
--- a/src/styles/PopoverWithMeasuredContentStyleUtils.ts
+++ b/src/styles/PopoverWithMeasuredContentStyleUtils.ts
@@ -1,5 +1,5 @@
-import variables from '@styles/variables';
 import roundToNearestMultipleOfFour from './ThemeStyleUtils/roundToNearestMultipleOfFour';
+import variables from './variables';
 
 /**
  * Compute the amount that the Context menu's Anchor needs to be horizontally shifted
diff --git a/src/styles/ThemeStyleUtils/TooltipStyleUtils.ts b/src/styles/ThemeStyleUtils/TooltipStyleUtils.ts
index 405a43db65dd..dbf82c54fae9 100644
--- a/src/styles/ThemeStyleUtils/TooltipStyleUtils.ts
+++ b/src/styles/ThemeStyleUtils/TooltipStyleUtils.ts
@@ -1,11 +1,11 @@
 import {TextStyle, View, ViewStyle} from 'react-native';
 import fontFamily from '@styles/fontFamily';
 import {type ThemeStyles} from '@styles/styles';
-import {type ThemeColors} from '@styles/themes/types';
-import roundToNearestMultipleOfFour from '@styles/ThemeStyleUtils/roundToNearestMultipleOfFour';
+import {type ThemeColors} from '@styles/theme/types';
 import positioning from '@styles/utilities/positioning';
 import spacing from '@styles/utilities/spacing';
 import variables from '@styles/variables';
+import roundToNearestMultipleOfFour from './roundToNearestMultipleOfFour';
 
 /** This defines the proximity with the edge of the window in which tooltips should not be displayed.
  * If a tooltip is too close to the edge of the screen, we'll shift it towards the center. */
diff --git a/src/styles/useStyleUtils.ts b/src/styles/useStyleUtils.ts
index e7d658b87d07..aadb3f884220 100644
--- a/src/styles/useStyleUtils.ts
+++ b/src/styles/useStyleUtils.ts
@@ -1,5 +1,5 @@
 import {useContext} from 'react';
-import ThemeStylesContext from '@styles/ThemeStylesContext';
+import ThemeStylesContext from './ThemeStylesContext';
 
 function useStyleUtils() {
     const themeStylesContext = useContext(ThemeStylesContext);

From 92ccb681dd2b134f2eb43ea24d32a558005a6398 Mon Sep 17 00:00:00 2001
From: Christoph Pader <christoph.pader@outlook.com>
Date: Thu, 7 Dec 2023 12:39:57 +0100
Subject: [PATCH 038/102] fix: more errors

---
 src/styles/ThemeStyleUtils/ModalStyleUtils.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/styles/ThemeStyleUtils/ModalStyleUtils.ts b/src/styles/ThemeStyleUtils/ModalStyleUtils.ts
index cf312a4e76f7..98e75a5a94c3 100644
--- a/src/styles/ThemeStyleUtils/ModalStyleUtils.ts
+++ b/src/styles/ThemeStyleUtils/ModalStyleUtils.ts
@@ -2,7 +2,7 @@ import {ViewStyle} from 'react-native';
 import {ModalProps} from 'react-native-modal';
 import {ValueOf} from 'type-fest';
 import {type ThemeStyles} from '@styles/styles';
-import {type ThemeColors} from '@styles/themes/types';
+import {type ThemeColors} from '@styles/theme/types';
 import variables from '@styles/variables';
 import CONST from '@src/CONST';
 

From 9e6366a10d465c30452e5a4d7c6dabf8ac8a5a26 Mon Sep 17 00:00:00 2001
From: Jakub Szymczak <szymczak.jakub12@gmail.com>
Date: Thu, 7 Dec 2023 13:52:52 +0100
Subject: [PATCH 039/102] fix typing

---
 src/components/HeaderGap/index.desktop.tsx | 7 ++++---
 src/components/HeaderGap/index.tsx         | 7 ++++---
 src/components/HeaderGap/types.ts          | 5 ++++-
 3 files changed, 12 insertions(+), 7 deletions(-)

diff --git a/src/components/HeaderGap/index.desktop.tsx b/src/components/HeaderGap/index.desktop.tsx
index 84f42142942e..6f0ca35996e7 100644
--- a/src/components/HeaderGap/index.desktop.tsx
+++ b/src/components/HeaderGap/index.desktop.tsx
@@ -1,12 +1,13 @@
 import React, {memo} from 'react';
 import {View} from 'react-native';
 import useThemeStyles from '@styles/useThemeStyles';
-import HeaderGapProps from './types';
+import HeaderGapComponent from './types';
 
-function HeaderGap({styles}: HeaderGapProps) {
+// eslint-disable-next-line react/function-component-definition, react/prop-types
+const HeaderGap: HeaderGapComponent = ({styles}) => {
     const themeStyles = useThemeStyles();
     return <View style={[themeStyles.headerGap, styles]} />;
-}
+};
 
 HeaderGap.displayName = 'HeaderGap';
 
diff --git a/src/components/HeaderGap/index.tsx b/src/components/HeaderGap/index.tsx
index 35e6bf92fb5d..decb634b5e8e 100644
--- a/src/components/HeaderGap/index.tsx
+++ b/src/components/HeaderGap/index.tsx
@@ -1,6 +1,7 @@
-function HeaderGap() {
-    return null;
-}
+import HeaderGapComponent from './types';
+
+// eslint-disable-next-line react/function-component-definition
+const HeaderGap: HeaderGapComponent = () => null;
 
 HeaderGap.displayName = 'HeaderGap';
 export default HeaderGap;
diff --git a/src/components/HeaderGap/types.ts b/src/components/HeaderGap/types.ts
index 6ed527b1c1f2..55ff1fe6eef6 100644
--- a/src/components/HeaderGap/types.ts
+++ b/src/components/HeaderGap/types.ts
@@ -1,7 +1,10 @@
+import React from 'react';
 import {StyleProp, ViewStyle} from 'react-native';
 
 type HeaderGapProps = {
     styles?: StyleProp<ViewStyle>;
 };
 
-export default HeaderGapProps;
+type HeaderGapComponent = React.FunctionComponent<HeaderGapProps>;
+
+export default HeaderGapComponent;

From 6ca43e15469eda2be54e3f557cbb01270245133d Mon Sep 17 00:00:00 2001
From: Christoph Pader <christoph.pader@outlook.com>
Date: Thu, 7 Dec 2023 15:17:34 +0100
Subject: [PATCH 040/102] rename

---
 src/styles/illustrations/ThemeIllustrationsContext.ts           | 2 +-
 src/styles/illustrations/ThemeIllustrationsProvider.tsx         | 2 +-
 .../illustrations/{Illustrations.ts => illustrationss.ts}       | 0
 3 files changed, 2 insertions(+), 2 deletions(-)
 rename src/styles/illustrations/{Illustrations.ts => illustrationss.ts} (100%)

diff --git a/src/styles/illustrations/ThemeIllustrationsContext.ts b/src/styles/illustrations/ThemeIllustrationsContext.ts
index db203b1a100e..d12f0670e81f 100644
--- a/src/styles/illustrations/ThemeIllustrationsContext.ts
+++ b/src/styles/illustrations/ThemeIllustrationsContext.ts
@@ -1,5 +1,5 @@
 import React from 'react';
-import {DefaultIllustrations} from './Illustrations';
+import {DefaultIllustrations} from './illustrationss';
 import {IllustrationsType} from './types';
 
 const ThemeIllustrationsContext = React.createContext<IllustrationsType>(DefaultIllustrations);
diff --git a/src/styles/illustrations/ThemeIllustrationsProvider.tsx b/src/styles/illustrations/ThemeIllustrationsProvider.tsx
index 1c6da59a641c..6c1f20e84604 100644
--- a/src/styles/illustrations/ThemeIllustrationsProvider.tsx
+++ b/src/styles/illustrations/ThemeIllustrationsProvider.tsx
@@ -1,6 +1,6 @@
 import React, {useMemo} from 'react';
 import useThemePreference from '@styles/theme/useThemePreference';
-import Illustrations from './Illustrations';
+import Illustrations from './illustrationss';
 import ThemeIllustrationsContext from './ThemeIllustrationsContext';
 
 type ThemeIllustrationsProviderProps = {
diff --git a/src/styles/illustrations/Illustrations.ts b/src/styles/illustrations/illustrationss.ts
similarity index 100%
rename from src/styles/illustrations/Illustrations.ts
rename to src/styles/illustrations/illustrationss.ts

From 67fb5cdfea9f6bd92829aa16dae7be8d4a12b814 Mon Sep 17 00:00:00 2001
From: Christoph Pader <christoph.pader@outlook.com>
Date: Thu, 7 Dec 2023 15:17:43 +0100
Subject: [PATCH 041/102] rename

---
 src/styles/illustrations/ThemeIllustrationsContext.ts           | 2 +-
 src/styles/illustrations/ThemeIllustrationsProvider.tsx         | 2 +-
 .../illustrations/{illustrationss.ts => illustrations.ts}       | 0
 3 files changed, 2 insertions(+), 2 deletions(-)
 rename src/styles/illustrations/{illustrationss.ts => illustrations.ts} (100%)

diff --git a/src/styles/illustrations/ThemeIllustrationsContext.ts b/src/styles/illustrations/ThemeIllustrationsContext.ts
index d12f0670e81f..c5cae1b26019 100644
--- a/src/styles/illustrations/ThemeIllustrationsContext.ts
+++ b/src/styles/illustrations/ThemeIllustrationsContext.ts
@@ -1,5 +1,5 @@
 import React from 'react';
-import {DefaultIllustrations} from './illustrationss';
+import {DefaultIllustrations} from './illustrations';
 import {IllustrationsType} from './types';
 
 const ThemeIllustrationsContext = React.createContext<IllustrationsType>(DefaultIllustrations);
diff --git a/src/styles/illustrations/ThemeIllustrationsProvider.tsx b/src/styles/illustrations/ThemeIllustrationsProvider.tsx
index 6c1f20e84604..b03c55238278 100644
--- a/src/styles/illustrations/ThemeIllustrationsProvider.tsx
+++ b/src/styles/illustrations/ThemeIllustrationsProvider.tsx
@@ -1,6 +1,6 @@
 import React, {useMemo} from 'react';
 import useThemePreference from '@styles/theme/useThemePreference';
-import Illustrations from './illustrationss';
+import Illustrations from './illustrations';
 import ThemeIllustrationsContext from './ThemeIllustrationsContext';
 
 type ThemeIllustrationsProviderProps = {
diff --git a/src/styles/illustrations/illustrationss.ts b/src/styles/illustrations/illustrations.ts
similarity index 100%
rename from src/styles/illustrations/illustrationss.ts
rename to src/styles/illustrations/illustrations.ts

From 009a5eac90757a145aeaff8250374e9a279958ba Mon Sep 17 00:00:00 2001
From: Christoph Pader <christoph.pader@outlook.com>
Date: Thu, 7 Dec 2023 16:44:17 +0100
Subject: [PATCH 042/102] update eslint

---
 .eslintrc.js | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/.eslintrc.js b/.eslintrc.js
index b86d6c483563..9aae29844b6f 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -31,7 +31,7 @@ const restrictedImportPaths = [
         message: 'Do not import styles directly. Please use the `useThemeStyles` hook or `withThemeStyles` HOC instead.',
     },
     {
-        name: '@styles/StyleUtils',
+        name: '@styles/utils',
         importNames: ['default', 'DefaultStyleUtils'],
         message: 'Do not import StyleUtils directly. Please use the `useStyleUtils` hook or `withStyleUtils` HOC instead.',
     },
@@ -50,6 +50,10 @@ const restrictedImportPatterns = [
         group: ['@styles/theme/themes/**/*'],
         message: 'Do not import themes directly. Please use the `useTheme` hook or `withTheme` HOC instead.',
     },
+    {
+        group: '@styles/utils/**/*',
+        message: 'Do not import style util functions directly. Please use the `useStyleUtils` hook or `withStyleUtils` HOC instead.',
+    },
     {
         group: ['@styles/illustrations/themes/**/*'],
         message: 'Do not import theme illustrations directly. Please use the `useThemeIllustrations` hook instead.',

From 7fe28ca5bdcce8bcc0928e7f7f83700f02781ad0 Mon Sep 17 00:00:00 2001
From: Christoph Pader <christoph.pader@outlook.com>
Date: Thu, 7 Dec 2023 16:45:02 +0100
Subject: [PATCH 043/102] remove eslint

---
 .eslintrc.js | 32 --------------------------------
 1 file changed, 32 deletions(-)

diff --git a/.eslintrc.js b/.eslintrc.js
index 9aae29844b6f..b71338d0c1a5 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -19,26 +19,6 @@ const restrictedImportPaths = [
         importNames: ['useSafeAreaInsets', 'SafeAreaConsumer', 'SafeAreaInsetsContext'],
         message: "Please use 'useSafeAreaInsets' from 'src/hooks/useSafeAreaInset' and/or 'SafeAreaConsumer' from 'src/components/SafeAreaConsumer' instead.",
     },
-    {
-        name: '@styles/theme/Themes',
-        importNames: ['default', 'defaultTheme'],
-
-        message: 'Do not import themes directly. Please use the `useTheme` hook or `withTheme` HOC instead.',
-    },
-    {
-        name: '@styles/styles',
-        importNames: ['default', 'defaultStyles'],
-        message: 'Do not import styles directly. Please use the `useThemeStyles` hook or `withThemeStyles` HOC instead.',
-    },
-    {
-        name: '@styles/utils',
-        importNames: ['default', 'DefaultStyleUtils'],
-        message: 'Do not import StyleUtils directly. Please use the `useStyleUtils` hook or `withStyleUtils` HOC instead.',
-    },
-    {
-        name: '@styles/illustrations/Illustrations',
-        message: 'Do not import theme illustrations directly. Please use the `useThemeIllustrations` hook instead.',
-    },
 ];
 
 const restrictedImportPatterns = [
@@ -46,18 +26,6 @@ const restrictedImportPatterns = [
         group: ['**/assets/animations/**/*.json'],
         message: "Do not import animations directly. Please use the 'src/components/LottieAnimations' import instead.",
     },
-    {
-        group: ['@styles/theme/themes/**/*'],
-        message: 'Do not import themes directly. Please use the `useTheme` hook or `withTheme` HOC instead.',
-    },
-    {
-        group: '@styles/utils/**/*',
-        message: 'Do not import style util functions directly. Please use the `useStyleUtils` hook or `withStyleUtils` HOC instead.',
-    },
-    {
-        group: ['@styles/illustrations/themes/**/*'],
-        message: 'Do not import theme illustrations directly. Please use the `useThemeIllustrations` hook instead.',
-    },
 ];
 
 module.exports = {

From 6babf6917d9831394f7397ae17f30e7d57d50b3c Mon Sep 17 00:00:00 2001
From: s-alves10 <sangar.work1028@gmail.com>
Date: Thu, 7 Dec 2023 10:06:29 -0600
Subject: [PATCH 044/102] fix: filter report actions when network offline
 status changes as well

---
 src/pages/home/ReportScreen.js | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/pages/home/ReportScreen.js b/src/pages/home/ReportScreen.js
index 8a30f91cdf75..d59791eedf29 100644
--- a/src/pages/home/ReportScreen.js
+++ b/src/pages/home/ReportScreen.js
@@ -171,7 +171,7 @@ function ReportScreen({
     const screenWrapperStyle = [styles.appContent, styles.flex1, {marginTop: viewportOffsetTop}];
 
     // eslint-disable-next-line react-hooks/exhaustive-deps -- need to re-filter the report actions when network status changes
-    const filteredReportActions = useMemo(() => _.filter(reportActions, (action) => ReportActionsUtils.shouldReportActionBeVisible(action)), [isOffline, reportActions]);
+    const filteredReportActions = useMemo(() => ReportActionsUtils.getSortedReportActionsForDisplay(reportActions, true), [isOffline, reportActions]);
 
     // There are no reportActions at all to display and we are still in the process of loading the next set of actions.
     const isLoadingInitialReportActions = _.isEmpty(filteredReportActions) && reportMetadata.isLoadingInitialReportActions;
@@ -482,7 +482,6 @@ export default compose(
             reportActions: {
                 key: ({route}) => `${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${getReportID(route)}`,
                 canEvict: false,
-                selector: (reportActions) => ReportActionsUtils.getSortedReportActionsForDisplay(reportActions, true),
             },
             report: {
                 key: ({route}) => `${ONYXKEYS.COLLECTION.REPORT}${getReportID(route)}`,

From eaacc7288ba66ba26d11d936c4577892a66d0f9a Mon Sep 17 00:00:00 2001
From: Christoph Pader <christoph.pader@outlook.com>
Date: Thu, 7 Dec 2023 17:09:21 +0100
Subject: [PATCH 045/102] remove eslint comments

---
 src/stories/CheckboxWithLabel.stories.js | 1 -
 src/stories/Composer.stories.js          | 2 --
 src/stories/DragAndDrop.stories.js       | 1 -
 src/stories/Form.stories.js              | 1 -
 src/stories/SelectionList.stories.js     | 1 -
 5 files changed, 6 deletions(-)

diff --git a/src/stories/CheckboxWithLabel.stories.js b/src/stories/CheckboxWithLabel.stories.js
index f1a5b68ea1a1..842f23816b3b 100644
--- a/src/stories/CheckboxWithLabel.stories.js
+++ b/src/stories/CheckboxWithLabel.stories.js
@@ -1,7 +1,6 @@
 import React from 'react';
 import CheckboxWithLabel from '@components/CheckboxWithLabel';
 import Text from '@components/Text';
-// eslint-disable-next-line no-restricted-imports
 import {defaultStyles} from '@styles/styles';
 
 /**
diff --git a/src/stories/Composer.stories.js b/src/stories/Composer.stories.js
index 3d059dadac21..3a29c3a0ef09 100644
--- a/src/stories/Composer.stories.js
+++ b/src/stories/Composer.stories.js
@@ -5,9 +5,7 @@ import Composer from '@components/Composer';
 import RenderHTML from '@components/RenderHTML';
 import Text from '@components/Text';
 import withNavigationFallback from '@components/withNavigationFallback';
-// eslint-disable-next-line no-restricted-imports
 import {defaultStyles} from '@styles/styles';
-// eslint-disable-next-line no-restricted-imports
 import {defaultTheme} from '@styles/theme/themes';
 import useStyleUtils from '@styles/useStyleUtils';
 import CONST from '@src/CONST';
diff --git a/src/stories/DragAndDrop.stories.js b/src/stories/DragAndDrop.stories.js
index c0b258972b3a..d9812b026e9d 100644
--- a/src/stories/DragAndDrop.stories.js
+++ b/src/stories/DragAndDrop.stories.js
@@ -4,7 +4,6 @@ import {Image, View} from 'react-native';
 import DragAndDropConsumer from '@components/DragAndDrop/Consumer';
 import DragAndDropProvider from '@components/DragAndDrop/Provider';
 import Text from '@components/Text';
-// eslint-disable-next-line no-restricted-imports
 import {defaultStyles} from '@styles/styles';
 
 /**
diff --git a/src/stories/Form.stories.js b/src/stories/Form.stories.js
index e13695266e39..00191fc6b752 100644
--- a/src/stories/Form.stories.js
+++ b/src/stories/Form.stories.js
@@ -11,7 +11,6 @@ import Text from '@components/Text';
 import TextInput from '@components/TextInput';
 import NetworkConnection from '@libs/NetworkConnection';
 import * as ValidationUtils from '@libs/ValidationUtils';
-// eslint-disable-next-line no-restricted-imports
 import {defaultStyles} from '@styles/styles';
 import * as FormActions from '@userActions/FormActions';
 import CONST from '@src/CONST';
diff --git a/src/stories/SelectionList.stories.js b/src/stories/SelectionList.stories.js
index 48a4614f771e..28d0fdc35e63 100644
--- a/src/stories/SelectionList.stories.js
+++ b/src/stories/SelectionList.stories.js
@@ -3,7 +3,6 @@ import {View} from 'react-native';
 import _ from 'underscore';
 import SelectionList from '@components/SelectionList';
 import Text from '@components/Text';
-// eslint-disable-next-line no-restricted-imports
 import {defaultStyles} from '@styles/styles';
 import CONST from '@src/CONST';
 

From 22c0628c055c1666d6034b1ff7f4897565f1a343 Mon Sep 17 00:00:00 2001
From: Christoph Pader <christoph.pader@outlook.com>
Date: Thu, 7 Dec 2023 17:13:09 +0100
Subject: [PATCH 046/102] re-structure styles

---
 .../Attachments/AttachmentView/index.js       |  2 +-
 .../BaseHTMLEngineProvider.js                 |  2 +-
 .../HTMLRenderers/EditedRenderer.js           |  2 +-
 src/components/Onfido/BaseOnfidoWeb.js        |  4 +-
 src/components/Text.tsx                       |  2 +-
 .../report/comment/TextCommentFragment.js     |  2 +-
 src/styles/styles.ts                          | 50 +++++++++----------
 src/styles/utils/TooltipStyleUtils.ts         |  6 +--
 .../addOutlineWidth/index.native.ts           |  0
 .../{ => utils}/addOutlineWidth/index.ts      |  0
 .../{ => utils}/addOutlineWidth/types.ts      |  0
 src/styles/{utilities => utils}/borders.ts    |  0
 .../{ => utils}/cardStyles/index.native.ts    |  0
 src/styles/{ => utils}/cardStyles/index.ts    |  2 +-
 src/styles/{ => utils}/cardStyles/types.ts    |  0
 .../{ => utils}/codeStyles/index.android.ts   |  0
 .../{ => utils}/codeStyles/index.ios.ts       |  0
 src/styles/{ => utils}/codeStyles/index.ts    |  0
 src/styles/{ => utils}/codeStyles/types.ts    |  0
 .../containerComposeStyles/index.native.ts    |  0
 .../containerComposeStyles/index.ts           |  0
 .../containerComposeStyles/types.ts           |  0
 .../cursor/index.native.ts                    |  0
 .../{utilities => utils}/cursor/index.ts      |  0
 .../{utilities => utils}/cursor/types.ts      |  0
 src/styles/{utilities => utils}/display.ts    |  0
 .../editedLabelStyles/index.native.ts         |  0
 .../{ => utils}/editedLabelStyles/index.ts    |  4 +-
 .../{ => utils}/editedLabelStyles/types.ts    |  0
 src/styles/{utilities => utils}/flex.ts       |  0
 .../fontFamily/bold/index.android.ts          |  0
 .../{ => utils}/fontFamily/bold/index.ios.ts  |  0
 .../{ => utils}/fontFamily/bold/index.ts      |  0
 .../{ => utils}/fontFamily/bold/types.ts      |  0
 .../{ => utils}/fontFamily/index.native.ts    |  0
 src/styles/{ => utils}/fontFamily/index.ts    |  0
 .../{ => utils}/fontFamily/multiFontFamily.ts |  0
 .../fontFamily/singleFontFamily.ts            |  0
 src/styles/{ => utils}/fontFamily/types.ts    |  0
 .../fontWeight/bold/index.android.ts          |  0
 .../{ => utils}/fontWeight/bold/index.ts      |  0
 .../{ => utils}/fontWeight/bold/types.ts      |  0
 .../getContextMenuItemStyles/index.native.ts  |  0
 .../getContextMenuItemStyles/index.ts         |  0
 .../getContextMenuItemStyles/types.ts         |  0
 .../index.desktop.ts                          |  2 +-
 .../getNavigationModalCardStyles/index.ts     |  0
 .../index.website.ts                          |  2 +-
 .../getNavigationModalCardStyles/types.ts     |  0
 .../getPopOverVerticalOffset/index.desktop.ts |  0
 .../getPopOverVerticalOffset/index.ts         |  0
 .../getPopOverVerticalOffset/types.ts         |  0
 src/styles/utils/index.ts                     | 14 +++---
 .../{ => utils}/italic/index.android.ts       |  0
 src/styles/{ => utils}/italic/index.ts        |  0
 src/styles/{ => utils}/italic/types.ts        |  0
 src/styles/{utilities => utils}/objectFit.ts  |  0
 .../index.ios.ts                              |  0
 .../index.ts                                  |  0
 .../types.ts                                  |  0
 .../optionRowStyles/index.native.ts           |  0
 .../{ => utils}/optionRowStyles/index.ts      |  0
 .../{ => utils}/optionRowStyles/types.ts      |  0
 src/styles/{utilities => utils}/overflow.ts   |  0
 .../overflowAuto/index.native.ts              |  0
 .../overflowAuto/index.ts                     |  0
 .../overflowAuto/types.ts                     |  0
 .../overflowXHidden/index.native.ts           |  0
 .../{ => utils}/overflowXHidden/index.ts      |  0
 .../{ => utils}/overflowXHidden/types.ts      |  0
 .../overscrollBehaviorContain/index.native.ts |  0
 .../overscrollBehaviorContain/index.ts        |  0
 .../overscrollBehaviorContain/types.ts        |  0
 .../pointerEventsAuto/index.native.ts         |  0
 .../{ => utils}/pointerEventsAuto/index.ts    |  0
 .../{ => utils}/pointerEventsAuto/types.ts    |  0
 .../pointerEventsBoxNone/index.native.ts      |  0
 .../{ => utils}/pointerEventsBoxNone/index.ts |  0
 .../{ => utils}/pointerEventsBoxNone/types.ts |  0
 .../pointerEventsNone/index.native.ts         |  0
 .../{ => utils}/pointerEventsNone/index.ts    |  0
 .../{ => utils}/pointerEventsNone/types.ts    |  0
 .../{utilities => utils}/positioning.ts       |  0
 src/styles/{utilities => utils}/sizing.ts     |  0
 src/styles/{utilities => utils}/spacing.ts    |  0
 .../textDecorationLine.ts                     |  0
 .../textUnderline/index.native.ts             |  0
 .../textUnderline/index.ts                    |  0
 .../textUnderline/types.ts                    |  0
 .../userSelect/index.native.ts                |  0
 .../{utilities => utils}/userSelect/index.ts  |  0
 .../{utilities => utils}/userSelect/types.ts  |  0
 .../visibility/index.native.ts                |  0
 .../{utilities => utils}/visibility/index.ts  |  0
 .../{utilities => utils}/visibility/types.ts  |  0
 .../whiteSpace/index.native.ts                |  0
 .../{utilities => utils}/whiteSpace/index.ts  |  0
 .../{utilities => utils}/whiteSpace/types.ts  |  0
 .../wordBreak/index.native.ts                 |  0
 .../{utilities => utils}/wordBreak/index.ts   |  0
 .../{utilities => utils}/wordBreak/types.ts   |  0
 .../{utilities => utils}/writingDirection.ts  |  0
 tests/ui/UnreadIndicatorsTest.js              |  2 +-
 103 files changed, 48 insertions(+), 48 deletions(-)
 rename src/styles/{ => utils}/addOutlineWidth/index.native.ts (100%)
 rename src/styles/{ => utils}/addOutlineWidth/index.ts (100%)
 rename src/styles/{ => utils}/addOutlineWidth/types.ts (100%)
 rename src/styles/{utilities => utils}/borders.ts (100%)
 rename src/styles/{ => utils}/cardStyles/index.native.ts (100%)
 rename src/styles/{ => utils}/cardStyles/index.ts (81%)
 rename src/styles/{ => utils}/cardStyles/types.ts (100%)
 rename src/styles/{ => utils}/codeStyles/index.android.ts (100%)
 rename src/styles/{ => utils}/codeStyles/index.ios.ts (100%)
 rename src/styles/{ => utils}/codeStyles/index.ts (100%)
 rename src/styles/{ => utils}/codeStyles/types.ts (100%)
 rename src/styles/{ => utils}/containerComposeStyles/index.native.ts (100%)
 rename src/styles/{ => utils}/containerComposeStyles/index.ts (100%)
 rename src/styles/{ => utils}/containerComposeStyles/types.ts (100%)
 rename src/styles/{utilities => utils}/cursor/index.native.ts (100%)
 rename src/styles/{utilities => utils}/cursor/index.ts (100%)
 rename src/styles/{utilities => utils}/cursor/types.ts (100%)
 rename src/styles/{utilities => utils}/display.ts (100%)
 rename src/styles/{ => utils}/editedLabelStyles/index.native.ts (100%)
 rename src/styles/{ => utils}/editedLabelStyles/index.ts (67%)
 rename src/styles/{ => utils}/editedLabelStyles/types.ts (100%)
 rename src/styles/{utilities => utils}/flex.ts (100%)
 rename src/styles/{ => utils}/fontFamily/bold/index.android.ts (100%)
 rename src/styles/{ => utils}/fontFamily/bold/index.ios.ts (100%)
 rename src/styles/{ => utils}/fontFamily/bold/index.ts (100%)
 rename src/styles/{ => utils}/fontFamily/bold/types.ts (100%)
 rename src/styles/{ => utils}/fontFamily/index.native.ts (100%)
 rename src/styles/{ => utils}/fontFamily/index.ts (100%)
 rename src/styles/{ => utils}/fontFamily/multiFontFamily.ts (100%)
 rename src/styles/{ => utils}/fontFamily/singleFontFamily.ts (100%)
 rename src/styles/{ => utils}/fontFamily/types.ts (100%)
 rename src/styles/{ => utils}/fontWeight/bold/index.android.ts (100%)
 rename src/styles/{ => utils}/fontWeight/bold/index.ts (100%)
 rename src/styles/{ => utils}/fontWeight/bold/types.ts (100%)
 rename src/styles/{ => utils}/getContextMenuItemStyles/index.native.ts (100%)
 rename src/styles/{ => utils}/getContextMenuItemStyles/index.ts (100%)
 rename src/styles/{ => utils}/getContextMenuItemStyles/types.ts (100%)
 rename src/styles/{ => utils}/getNavigationModalCardStyles/index.desktop.ts (90%)
 rename src/styles/{ => utils}/getNavigationModalCardStyles/index.ts (100%)
 rename src/styles/{ => utils}/getNavigationModalCardStyles/index.website.ts (90%)
 rename src/styles/{ => utils}/getNavigationModalCardStyles/types.ts (100%)
 rename src/styles/{ => utils}/getPopOverVerticalOffset/index.desktop.ts (100%)
 rename src/styles/{ => utils}/getPopOverVerticalOffset/index.ts (100%)
 rename src/styles/{ => utils}/getPopOverVerticalOffset/types.ts (100%)
 rename src/styles/{ => utils}/italic/index.android.ts (100%)
 rename src/styles/{ => utils}/italic/index.ts (100%)
 rename src/styles/{ => utils}/italic/types.ts (100%)
 rename src/styles/{utilities => utils}/objectFit.ts (100%)
 rename src/styles/{ => utils}/optionAlternateTextPlatformStyles/index.ios.ts (100%)
 rename src/styles/{ => utils}/optionAlternateTextPlatformStyles/index.ts (100%)
 rename src/styles/{ => utils}/optionAlternateTextPlatformStyles/types.ts (100%)
 rename src/styles/{ => utils}/optionRowStyles/index.native.ts (100%)
 rename src/styles/{ => utils}/optionRowStyles/index.ts (100%)
 rename src/styles/{ => utils}/optionRowStyles/types.ts (100%)
 rename src/styles/{utilities => utils}/overflow.ts (100%)
 rename src/styles/{utilities => utils}/overflowAuto/index.native.ts (100%)
 rename src/styles/{utilities => utils}/overflowAuto/index.ts (100%)
 rename src/styles/{utilities => utils}/overflowAuto/types.ts (100%)
 rename src/styles/{ => utils}/overflowXHidden/index.native.ts (100%)
 rename src/styles/{ => utils}/overflowXHidden/index.ts (100%)
 rename src/styles/{ => utils}/overflowXHidden/types.ts (100%)
 rename src/styles/{utilities => utils}/overscrollBehaviorContain/index.native.ts (100%)
 rename src/styles/{utilities => utils}/overscrollBehaviorContain/index.ts (100%)
 rename src/styles/{utilities => utils}/overscrollBehaviorContain/types.ts (100%)
 rename src/styles/{ => utils}/pointerEventsAuto/index.native.ts (100%)
 rename src/styles/{ => utils}/pointerEventsAuto/index.ts (100%)
 rename src/styles/{ => utils}/pointerEventsAuto/types.ts (100%)
 rename src/styles/{ => utils}/pointerEventsBoxNone/index.native.ts (100%)
 rename src/styles/{ => utils}/pointerEventsBoxNone/index.ts (100%)
 rename src/styles/{ => utils}/pointerEventsBoxNone/types.ts (100%)
 rename src/styles/{ => utils}/pointerEventsNone/index.native.ts (100%)
 rename src/styles/{ => utils}/pointerEventsNone/index.ts (100%)
 rename src/styles/{ => utils}/pointerEventsNone/types.ts (100%)
 rename src/styles/{utilities => utils}/positioning.ts (100%)
 rename src/styles/{utilities => utils}/sizing.ts (100%)
 rename src/styles/{utilities => utils}/spacing.ts (100%)
 rename src/styles/{utilities => utils}/textDecorationLine.ts (100%)
 rename src/styles/{utilities => utils}/textUnderline/index.native.ts (100%)
 rename src/styles/{utilities => utils}/textUnderline/index.ts (100%)
 rename src/styles/{utilities => utils}/textUnderline/types.ts (100%)
 rename src/styles/{utilities => utils}/userSelect/index.native.ts (100%)
 rename src/styles/{utilities => utils}/userSelect/index.ts (100%)
 rename src/styles/{utilities => utils}/userSelect/types.ts (100%)
 rename src/styles/{utilities => utils}/visibility/index.native.ts (100%)
 rename src/styles/{utilities => utils}/visibility/index.ts (100%)
 rename src/styles/{utilities => utils}/visibility/types.ts (100%)
 rename src/styles/{utilities => utils}/whiteSpace/index.native.ts (100%)
 rename src/styles/{utilities => utils}/whiteSpace/index.ts (100%)
 rename src/styles/{utilities => utils}/whiteSpace/types.ts (100%)
 rename src/styles/{utilities => utils}/wordBreak/index.native.ts (100%)
 rename src/styles/{utilities => utils}/wordBreak/index.ts (100%)
 rename src/styles/{utilities => utils}/wordBreak/types.ts (100%)
 rename src/styles/{utilities => utils}/writingDirection.ts (100%)

diff --git a/src/components/Attachments/AttachmentView/index.js b/src/components/Attachments/AttachmentView/index.js
index e94e80d61883..726250476088 100755
--- a/src/components/Attachments/AttachmentView/index.js
+++ b/src/components/Attachments/AttachmentView/index.js
@@ -18,7 +18,7 @@ import * as TransactionUtils from '@libs/TransactionUtils';
 import useTheme from '@styles/theme/useTheme';
 import useStyleUtils from '@styles/useStyleUtils';
 import useThemeStyles from '@styles/useThemeStyles';
-import cursor from '@styles/utilities/cursor';
+import cursor from '@styles/utils/cursor';
 import variables from '@styles/variables';
 import ONYXKEYS from '@src/ONYXKEYS';
 import AttachmentViewImage from './AttachmentViewImage';
diff --git a/src/components/HTMLEngineProvider/BaseHTMLEngineProvider.js b/src/components/HTMLEngineProvider/BaseHTMLEngineProvider.js
index 8cddd3c017de..de8125ea2809 100755
--- a/src/components/HTMLEngineProvider/BaseHTMLEngineProvider.js
+++ b/src/components/HTMLEngineProvider/BaseHTMLEngineProvider.js
@@ -3,8 +3,8 @@ import React, {useMemo} from 'react';
 import {defaultHTMLElementModels, RenderHTMLConfigProvider, TRenderEngineProvider} from 'react-native-render-html';
 import _ from 'underscore';
 import convertToLTR from '@libs/convertToLTR';
-import singleFontFamily from '@styles/fontFamily/singleFontFamily';
 import useThemeStyles from '@styles/useThemeStyles';
+import singleFontFamily from '@styles/utils/fontFamily/singleFontFamily';
 import * as HTMLEngineUtils from './htmlEngineUtils';
 import htmlRenderers from './HTMLRenderers';
 
diff --git a/src/components/HTMLEngineProvider/HTMLRenderers/EditedRenderer.js b/src/components/HTMLEngineProvider/HTMLRenderers/EditedRenderer.js
index bf00713c73fe..3265138cf7b0 100644
--- a/src/components/HTMLEngineProvider/HTMLRenderers/EditedRenderer.js
+++ b/src/components/HTMLEngineProvider/HTMLRenderers/EditedRenderer.js
@@ -2,9 +2,9 @@ import React from 'react';
 import _ from 'underscore';
 import Text from '@components/Text';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
-import editedLabelStyles from '@styles/editedLabelStyles';
 import useTheme from '@styles/theme/useTheme';
 import useThemeStyles from '@styles/useThemeStyles';
+import editedLabelStyles from '@styles/utils/editedLabelStyles';
 import variables from '@styles/variables';
 import CONST from '@src/CONST';
 import htmlRendererPropTypes from './htmlRendererPropTypes';
diff --git a/src/components/Onfido/BaseOnfidoWeb.js b/src/components/Onfido/BaseOnfidoWeb.js
index b89ff96a858e..66e4975ec476 100644
--- a/src/components/Onfido/BaseOnfidoWeb.js
+++ b/src/components/Onfido/BaseOnfidoWeb.js
@@ -4,8 +4,8 @@ import React, {forwardRef, useEffect} from 'react';
 import _ from 'underscore';
 import useLocalize from '@hooks/useLocalize';
 import Log from '@libs/Log';
-import fontFamily from '@styles/fontFamily';
-import fontWeightBold from '@styles/fontWeight/bold';
+import fontFamily from '@styles/utils/fontFamily';
+import fontWeightBold from '@styles/utils/fontWeight/bold';
 import useTheme from '@styles/theme/useTheme';
 import variables from '@styles/variables';
 import CONST from '@src/CONST';
diff --git a/src/components/Text.tsx b/src/components/Text.tsx
index baa3f064b44e..4305cf8dd634 100644
--- a/src/components/Text.tsx
+++ b/src/components/Text.tsx
@@ -2,8 +2,8 @@ import React, {ForwardedRef} from 'react';
 // eslint-disable-next-line no-restricted-imports
 import {Text as RNText, TextProps as RNTextProps, StyleSheet} from 'react-native';
 import type {TextStyle} from 'react-native';
-import fontFamily from '@styles/fontFamily';
 import useTheme from '@styles/theme/useTheme';
+import fontFamily from '@styles/utils/fontFamily';
 import variables from '@styles/variables';
 
 type TextProps = RNTextProps & {
diff --git a/src/pages/home/report/comment/TextCommentFragment.js b/src/pages/home/report/comment/TextCommentFragment.js
index 67cc8f101ccc..99a3b9e004c8 100644
--- a/src/pages/home/report/comment/TextCommentFragment.js
+++ b/src/pages/home/report/comment/TextCommentFragment.js
@@ -11,9 +11,9 @@ import * as DeviceCapabilities from '@libs/DeviceCapabilities';
 import * as EmojiUtils from '@libs/EmojiUtils';
 import reportActionFragmentPropTypes from '@pages/home/report/reportActionFragmentPropTypes';
 import reportActionSourcePropType from '@pages/home/report/reportActionSourcePropType';
-import editedLabelStyles from '@styles/editedLabelStyles';
 import useTheme from '@styles/theme/useTheme';
 import useThemeStyles from '@styles/useThemeStyles';
+import editedLabelStyles from '@styles/utils/editedLabelStyles';
 import variables from '@styles/variables';
 import CONST from '@src/CONST';
 import RenderCommentHTML from './RenderCommentHTML';
diff --git a/src/styles/styles.ts b/src/styles/styles.ts
index b227ddbd558b..a8f1e2abe8a3 100644
--- a/src/styles/styles.ts
+++ b/src/styles/styles.ts
@@ -9,35 +9,35 @@ import {MixedStyleDeclaration, MixedStyleRecord} from 'react-native-render-html'
 import DotLottieAnimation from '@components/LottieAnimations/types';
 import * as Browser from '@libs/Browser';
 import CONST from '@src/CONST';
-import addOutlineWidth from './addOutlineWidth';
-import codeStyles from './codeStyles';
 import colors from './colors';
-import fontFamily from './fontFamily';
 import fontWeightBold from './fontWeight/bold';
-import getPopOverVerticalOffset from './getPopOverVerticalOffset';
-import optionAlternateTextPlatformStyles from './optionAlternateTextPlatformStyles';
-import overflowXHidden from './overflowXHidden';
-import pointerEventsAuto from './pointerEventsAuto';
-import pointerEventsBoxNone from './pointerEventsBoxNone';
-import pointerEventsNone from './pointerEventsNone';
+import getPopOverVerticalOffset from './utils/getPopOverVerticalOffset';
+import optionAlternateTextPlatformStyles from './utils/optionAlternateTextPlatformStyles';
+import overflowXHidden from ./utils/fontWeight/boldn';
+import pointerEventsAuto from './utils/pointerEventsAuto';
+import pointerEventsBoxNone from './utils/pointerEventsBoxNone';
+import pointerEventsNone from './utils/pointerEventsNone';
 import {defaultTheme} from './theme/themes';
 import {type ThemeColors} from './theme/types';
-import borders from './utilities/borders';
-import cursor from './utilities/cursor';
-import display from './utilities/display';
-import flex from './utilities/flex';
-import objectFit from './utilities/objectFit';
-import overflow from './utilities/overflow';
-import positioning from './utilities/positioning';
-import sizing from './utilities/sizing';
-import spacing from './utilities/spacing';
-import textDecorationLine from './utilities/textDecorationLine';
-import textUnderline from './utilities/textUnderline';
-import userSelect from './utilities/userSelect';
-import visibility from './utilities/visibility';
-import whiteSpace from './utilities/whiteSpace';
-import wordBreak from './utilities/wordBreak';
-import writingDirection from './utilities/writingDirection';
+import borders from './utils/borders';
+import cursor from './utils/cursor';
+import display from './utils/display';
+import flex from './utils/flex';
+import objectFit from './utils/objectFit';
+import overflow from './utils/overflow';
+import positioning from './utils/positioning';
+import sizing from './utils/sizing';
+import spacing from './utils/spacing';
+import textDecorationLine from './utils/textDecorationLine';
+import textUnderline from './utils/textUnderline';
+import userSelect from './utils/userSelect';
+import visibility from './utils/visibility';
+import whiteSpace from './utils/whiteSpace';
+import wordBreak from './utils/wordBreak';
+import writingDirection from './utils/writingDirection';
+import addOutlineWidth from './utils/addOutlineWidth';
+import codeStyles from './utils/codeStyles';
+import fontFamily from './utils/fontFamily';
 import variables from './variables';
 
 type ColorScheme = (typeof CONST.COLOR_SCHEME)[keyof typeof CONST.COLOR_SCHEME];
diff --git a/src/styles/utils/TooltipStyleUtils.ts b/src/styles/utils/TooltipStyleUtils.ts
index dbf82c54fae9..216190b8f79d 100644
--- a/src/styles/utils/TooltipStyleUtils.ts
+++ b/src/styles/utils/TooltipStyleUtils.ts
@@ -1,9 +1,9 @@
 import {TextStyle, View, ViewStyle} from 'react-native';
-import fontFamily from '@styles/fontFamily';
 import {type ThemeStyles} from '@styles/styles';
 import {type ThemeColors} from '@styles/theme/types';
-import positioning from '@styles/utilities/positioning';
-import spacing from '@styles/utilities/spacing';
+import fontFamily from '@styles/utils/fontFamily';
+import positioning from '@styles/utils/positioning';
+import spacing from '@styles/utils/spacing';
 import variables from '@styles/variables';
 import roundToNearestMultipleOfFour from './roundToNearestMultipleOfFour';
 
diff --git a/src/styles/addOutlineWidth/index.native.ts b/src/styles/utils/addOutlineWidth/index.native.ts
similarity index 100%
rename from src/styles/addOutlineWidth/index.native.ts
rename to src/styles/utils/addOutlineWidth/index.native.ts
diff --git a/src/styles/addOutlineWidth/index.ts b/src/styles/utils/addOutlineWidth/index.ts
similarity index 100%
rename from src/styles/addOutlineWidth/index.ts
rename to src/styles/utils/addOutlineWidth/index.ts
diff --git a/src/styles/addOutlineWidth/types.ts b/src/styles/utils/addOutlineWidth/types.ts
similarity index 100%
rename from src/styles/addOutlineWidth/types.ts
rename to src/styles/utils/addOutlineWidth/types.ts
diff --git a/src/styles/utilities/borders.ts b/src/styles/utils/borders.ts
similarity index 100%
rename from src/styles/utilities/borders.ts
rename to src/styles/utils/borders.ts
diff --git a/src/styles/cardStyles/index.native.ts b/src/styles/utils/cardStyles/index.native.ts
similarity index 100%
rename from src/styles/cardStyles/index.native.ts
rename to src/styles/utils/cardStyles/index.native.ts
diff --git a/src/styles/cardStyles/index.ts b/src/styles/utils/cardStyles/index.ts
similarity index 81%
rename from src/styles/cardStyles/index.ts
rename to src/styles/utils/cardStyles/index.ts
index b5d3c069b73a..77a00695d20a 100644
--- a/src/styles/cardStyles/index.ts
+++ b/src/styles/utils/cardStyles/index.ts
@@ -1,4 +1,4 @@
-import positioning from '@styles/utilities/positioning';
+import positioning from '@styles/utils/positioning';
 import GetCardStyles from './types';
 
 /**
diff --git a/src/styles/cardStyles/types.ts b/src/styles/utils/cardStyles/types.ts
similarity index 100%
rename from src/styles/cardStyles/types.ts
rename to src/styles/utils/cardStyles/types.ts
diff --git a/src/styles/codeStyles/index.android.ts b/src/styles/utils/codeStyles/index.android.ts
similarity index 100%
rename from src/styles/codeStyles/index.android.ts
rename to src/styles/utils/codeStyles/index.android.ts
diff --git a/src/styles/codeStyles/index.ios.ts b/src/styles/utils/codeStyles/index.ios.ts
similarity index 100%
rename from src/styles/codeStyles/index.ios.ts
rename to src/styles/utils/codeStyles/index.ios.ts
diff --git a/src/styles/codeStyles/index.ts b/src/styles/utils/codeStyles/index.ts
similarity index 100%
rename from src/styles/codeStyles/index.ts
rename to src/styles/utils/codeStyles/index.ts
diff --git a/src/styles/codeStyles/types.ts b/src/styles/utils/codeStyles/types.ts
similarity index 100%
rename from src/styles/codeStyles/types.ts
rename to src/styles/utils/codeStyles/types.ts
diff --git a/src/styles/containerComposeStyles/index.native.ts b/src/styles/utils/containerComposeStyles/index.native.ts
similarity index 100%
rename from src/styles/containerComposeStyles/index.native.ts
rename to src/styles/utils/containerComposeStyles/index.native.ts
diff --git a/src/styles/containerComposeStyles/index.ts b/src/styles/utils/containerComposeStyles/index.ts
similarity index 100%
rename from src/styles/containerComposeStyles/index.ts
rename to src/styles/utils/containerComposeStyles/index.ts
diff --git a/src/styles/containerComposeStyles/types.ts b/src/styles/utils/containerComposeStyles/types.ts
similarity index 100%
rename from src/styles/containerComposeStyles/types.ts
rename to src/styles/utils/containerComposeStyles/types.ts
diff --git a/src/styles/utilities/cursor/index.native.ts b/src/styles/utils/cursor/index.native.ts
similarity index 100%
rename from src/styles/utilities/cursor/index.native.ts
rename to src/styles/utils/cursor/index.native.ts
diff --git a/src/styles/utilities/cursor/index.ts b/src/styles/utils/cursor/index.ts
similarity index 100%
rename from src/styles/utilities/cursor/index.ts
rename to src/styles/utils/cursor/index.ts
diff --git a/src/styles/utilities/cursor/types.ts b/src/styles/utils/cursor/types.ts
similarity index 100%
rename from src/styles/utilities/cursor/types.ts
rename to src/styles/utils/cursor/types.ts
diff --git a/src/styles/utilities/display.ts b/src/styles/utils/display.ts
similarity index 100%
rename from src/styles/utilities/display.ts
rename to src/styles/utils/display.ts
diff --git a/src/styles/editedLabelStyles/index.native.ts b/src/styles/utils/editedLabelStyles/index.native.ts
similarity index 100%
rename from src/styles/editedLabelStyles/index.native.ts
rename to src/styles/utils/editedLabelStyles/index.native.ts
diff --git a/src/styles/editedLabelStyles/index.ts b/src/styles/utils/editedLabelStyles/index.ts
similarity index 67%
rename from src/styles/editedLabelStyles/index.ts
rename to src/styles/utils/editedLabelStyles/index.ts
index 339c50d8a4df..427918af1202 100644
--- a/src/styles/editedLabelStyles/index.ts
+++ b/src/styles/utils/editedLabelStyles/index.ts
@@ -1,5 +1,5 @@
-import display from '@styles/utilities/display';
-import flex from '@styles/utilities/flex';
+import display from '@styles/utils/display';
+import flex from '@styles/utils/flex';
 import EditedLabelStyles from './types';
 
 const editedLabelStyles: EditedLabelStyles = {
diff --git a/src/styles/editedLabelStyles/types.ts b/src/styles/utils/editedLabelStyles/types.ts
similarity index 100%
rename from src/styles/editedLabelStyles/types.ts
rename to src/styles/utils/editedLabelStyles/types.ts
diff --git a/src/styles/utilities/flex.ts b/src/styles/utils/flex.ts
similarity index 100%
rename from src/styles/utilities/flex.ts
rename to src/styles/utils/flex.ts
diff --git a/src/styles/fontFamily/bold/index.android.ts b/src/styles/utils/fontFamily/bold/index.android.ts
similarity index 100%
rename from src/styles/fontFamily/bold/index.android.ts
rename to src/styles/utils/fontFamily/bold/index.android.ts
diff --git a/src/styles/fontFamily/bold/index.ios.ts b/src/styles/utils/fontFamily/bold/index.ios.ts
similarity index 100%
rename from src/styles/fontFamily/bold/index.ios.ts
rename to src/styles/utils/fontFamily/bold/index.ios.ts
diff --git a/src/styles/fontFamily/bold/index.ts b/src/styles/utils/fontFamily/bold/index.ts
similarity index 100%
rename from src/styles/fontFamily/bold/index.ts
rename to src/styles/utils/fontFamily/bold/index.ts
diff --git a/src/styles/fontFamily/bold/types.ts b/src/styles/utils/fontFamily/bold/types.ts
similarity index 100%
rename from src/styles/fontFamily/bold/types.ts
rename to src/styles/utils/fontFamily/bold/types.ts
diff --git a/src/styles/fontFamily/index.native.ts b/src/styles/utils/fontFamily/index.native.ts
similarity index 100%
rename from src/styles/fontFamily/index.native.ts
rename to src/styles/utils/fontFamily/index.native.ts
diff --git a/src/styles/fontFamily/index.ts b/src/styles/utils/fontFamily/index.ts
similarity index 100%
rename from src/styles/fontFamily/index.ts
rename to src/styles/utils/fontFamily/index.ts
diff --git a/src/styles/fontFamily/multiFontFamily.ts b/src/styles/utils/fontFamily/multiFontFamily.ts
similarity index 100%
rename from src/styles/fontFamily/multiFontFamily.ts
rename to src/styles/utils/fontFamily/multiFontFamily.ts
diff --git a/src/styles/fontFamily/singleFontFamily.ts b/src/styles/utils/fontFamily/singleFontFamily.ts
similarity index 100%
rename from src/styles/fontFamily/singleFontFamily.ts
rename to src/styles/utils/fontFamily/singleFontFamily.ts
diff --git a/src/styles/fontFamily/types.ts b/src/styles/utils/fontFamily/types.ts
similarity index 100%
rename from src/styles/fontFamily/types.ts
rename to src/styles/utils/fontFamily/types.ts
diff --git a/src/styles/fontWeight/bold/index.android.ts b/src/styles/utils/fontWeight/bold/index.android.ts
similarity index 100%
rename from src/styles/fontWeight/bold/index.android.ts
rename to src/styles/utils/fontWeight/bold/index.android.ts
diff --git a/src/styles/fontWeight/bold/index.ts b/src/styles/utils/fontWeight/bold/index.ts
similarity index 100%
rename from src/styles/fontWeight/bold/index.ts
rename to src/styles/utils/fontWeight/bold/index.ts
diff --git a/src/styles/fontWeight/bold/types.ts b/src/styles/utils/fontWeight/bold/types.ts
similarity index 100%
rename from src/styles/fontWeight/bold/types.ts
rename to src/styles/utils/fontWeight/bold/types.ts
diff --git a/src/styles/getContextMenuItemStyles/index.native.ts b/src/styles/utils/getContextMenuItemStyles/index.native.ts
similarity index 100%
rename from src/styles/getContextMenuItemStyles/index.native.ts
rename to src/styles/utils/getContextMenuItemStyles/index.native.ts
diff --git a/src/styles/getContextMenuItemStyles/index.ts b/src/styles/utils/getContextMenuItemStyles/index.ts
similarity index 100%
rename from src/styles/getContextMenuItemStyles/index.ts
rename to src/styles/utils/getContextMenuItemStyles/index.ts
diff --git a/src/styles/getContextMenuItemStyles/types.ts b/src/styles/utils/getContextMenuItemStyles/types.ts
similarity index 100%
rename from src/styles/getContextMenuItemStyles/types.ts
rename to src/styles/utils/getContextMenuItemStyles/types.ts
diff --git a/src/styles/getNavigationModalCardStyles/index.desktop.ts b/src/styles/utils/getNavigationModalCardStyles/index.desktop.ts
similarity index 90%
rename from src/styles/getNavigationModalCardStyles/index.desktop.ts
rename to src/styles/utils/getNavigationModalCardStyles/index.desktop.ts
index 9e182636ad76..523f82048a02 100644
--- a/src/styles/getNavigationModalCardStyles/index.desktop.ts
+++ b/src/styles/utils/getNavigationModalCardStyles/index.desktop.ts
@@ -1,4 +1,4 @@
-import positioning from '@styles/utilities/positioning';
+import positioning from '@styles/utils/positioning';
 import GetNavigationModalCardStyles from './types';
 
 const getNavigationModalCardStyles: GetNavigationModalCardStyles = () => ({
diff --git a/src/styles/getNavigationModalCardStyles/index.ts b/src/styles/utils/getNavigationModalCardStyles/index.ts
similarity index 100%
rename from src/styles/getNavigationModalCardStyles/index.ts
rename to src/styles/utils/getNavigationModalCardStyles/index.ts
diff --git a/src/styles/getNavigationModalCardStyles/index.website.ts b/src/styles/utils/getNavigationModalCardStyles/index.website.ts
similarity index 90%
rename from src/styles/getNavigationModalCardStyles/index.website.ts
rename to src/styles/utils/getNavigationModalCardStyles/index.website.ts
index 9e182636ad76..523f82048a02 100644
--- a/src/styles/getNavigationModalCardStyles/index.website.ts
+++ b/src/styles/utils/getNavigationModalCardStyles/index.website.ts
@@ -1,4 +1,4 @@
-import positioning from '@styles/utilities/positioning';
+import positioning from '@styles/utils/positioning';
 import GetNavigationModalCardStyles from './types';
 
 const getNavigationModalCardStyles: GetNavigationModalCardStyles = () => ({
diff --git a/src/styles/getNavigationModalCardStyles/types.ts b/src/styles/utils/getNavigationModalCardStyles/types.ts
similarity index 100%
rename from src/styles/getNavigationModalCardStyles/types.ts
rename to src/styles/utils/getNavigationModalCardStyles/types.ts
diff --git a/src/styles/getPopOverVerticalOffset/index.desktop.ts b/src/styles/utils/getPopOverVerticalOffset/index.desktop.ts
similarity index 100%
rename from src/styles/getPopOverVerticalOffset/index.desktop.ts
rename to src/styles/utils/getPopOverVerticalOffset/index.desktop.ts
diff --git a/src/styles/getPopOverVerticalOffset/index.ts b/src/styles/utils/getPopOverVerticalOffset/index.ts
similarity index 100%
rename from src/styles/getPopOverVerticalOffset/index.ts
rename to src/styles/utils/getPopOverVerticalOffset/index.ts
diff --git a/src/styles/getPopOverVerticalOffset/types.ts b/src/styles/utils/getPopOverVerticalOffset/types.ts
similarity index 100%
rename from src/styles/getPopOverVerticalOffset/types.ts
rename to src/styles/utils/getPopOverVerticalOffset/types.ts
diff --git a/src/styles/utils/index.ts b/src/styles/utils/index.ts
index 26b23392c78f..68a298585aec 100644
--- a/src/styles/utils/index.ts
+++ b/src/styles/utils/index.ts
@@ -5,19 +5,19 @@ import {ValueOf} from 'type-fest';
 import * as Browser from '@libs/Browser';
 import * as UserUtils from '@libs/UserUtils';
 import colors from '@styles/colors';
-import containerComposeStyles from '@styles/containerComposeStyles';
-import fontFamily from '@styles/fontFamily';
-import getContextMenuItemStyles from '@styles/getContextMenuItemStyles';
-import {compactContentContainerStyles} from '@styles/optionRowStyles';
 import {defaultStyles, type ThemeStyles} from '@styles/styles';
 import {defaultTheme} from '@styles/theme/themes';
 import {ThemeColors} from '@styles/theme/types';
-import cursor from '@styles/utilities/cursor';
-import positioning from '@styles/utilities/positioning';
-import spacing from '@styles/utilities/spacing';
+import cursor from '@styles/utils/cursor';
+import getContextMenuItemStyles from '@styles/utils/getContextMenuItemStyles';
+import {compactContentContainerStyles} from '@styles/utils/optionRowStyles';
+import positioning from '@styles/utils/positioning';
+import spacing from '@styles/utils/spacing';
 import variables from '@styles/variables';
 import CONST from '@src/CONST';
 import {Transaction} from '@src/types/onyx';
+import containerComposeStyles from './containerComposeStyles';
+import fontFamily from './fontFamily';
 import createModalStyleUtils from './ModalStyleUtils';
 import createReportActionContextMenuStyleUtils from './ReportActionContextMenuStyleUtils';
 import createTooltipStyleUtils from './TooltipStyleUtils';
diff --git a/src/styles/italic/index.android.ts b/src/styles/utils/italic/index.android.ts
similarity index 100%
rename from src/styles/italic/index.android.ts
rename to src/styles/utils/italic/index.android.ts
diff --git a/src/styles/italic/index.ts b/src/styles/utils/italic/index.ts
similarity index 100%
rename from src/styles/italic/index.ts
rename to src/styles/utils/italic/index.ts
diff --git a/src/styles/italic/types.ts b/src/styles/utils/italic/types.ts
similarity index 100%
rename from src/styles/italic/types.ts
rename to src/styles/utils/italic/types.ts
diff --git a/src/styles/utilities/objectFit.ts b/src/styles/utils/objectFit.ts
similarity index 100%
rename from src/styles/utilities/objectFit.ts
rename to src/styles/utils/objectFit.ts
diff --git a/src/styles/optionAlternateTextPlatformStyles/index.ios.ts b/src/styles/utils/optionAlternateTextPlatformStyles/index.ios.ts
similarity index 100%
rename from src/styles/optionAlternateTextPlatformStyles/index.ios.ts
rename to src/styles/utils/optionAlternateTextPlatformStyles/index.ios.ts
diff --git a/src/styles/optionAlternateTextPlatformStyles/index.ts b/src/styles/utils/optionAlternateTextPlatformStyles/index.ts
similarity index 100%
rename from src/styles/optionAlternateTextPlatformStyles/index.ts
rename to src/styles/utils/optionAlternateTextPlatformStyles/index.ts
diff --git a/src/styles/optionAlternateTextPlatformStyles/types.ts b/src/styles/utils/optionAlternateTextPlatformStyles/types.ts
similarity index 100%
rename from src/styles/optionAlternateTextPlatformStyles/types.ts
rename to src/styles/utils/optionAlternateTextPlatformStyles/types.ts
diff --git a/src/styles/optionRowStyles/index.native.ts b/src/styles/utils/optionRowStyles/index.native.ts
similarity index 100%
rename from src/styles/optionRowStyles/index.native.ts
rename to src/styles/utils/optionRowStyles/index.native.ts
diff --git a/src/styles/optionRowStyles/index.ts b/src/styles/utils/optionRowStyles/index.ts
similarity index 100%
rename from src/styles/optionRowStyles/index.ts
rename to src/styles/utils/optionRowStyles/index.ts
diff --git a/src/styles/optionRowStyles/types.ts b/src/styles/utils/optionRowStyles/types.ts
similarity index 100%
rename from src/styles/optionRowStyles/types.ts
rename to src/styles/utils/optionRowStyles/types.ts
diff --git a/src/styles/utilities/overflow.ts b/src/styles/utils/overflow.ts
similarity index 100%
rename from src/styles/utilities/overflow.ts
rename to src/styles/utils/overflow.ts
diff --git a/src/styles/utilities/overflowAuto/index.native.ts b/src/styles/utils/overflowAuto/index.native.ts
similarity index 100%
rename from src/styles/utilities/overflowAuto/index.native.ts
rename to src/styles/utils/overflowAuto/index.native.ts
diff --git a/src/styles/utilities/overflowAuto/index.ts b/src/styles/utils/overflowAuto/index.ts
similarity index 100%
rename from src/styles/utilities/overflowAuto/index.ts
rename to src/styles/utils/overflowAuto/index.ts
diff --git a/src/styles/utilities/overflowAuto/types.ts b/src/styles/utils/overflowAuto/types.ts
similarity index 100%
rename from src/styles/utilities/overflowAuto/types.ts
rename to src/styles/utils/overflowAuto/types.ts
diff --git a/src/styles/overflowXHidden/index.native.ts b/src/styles/utils/overflowXHidden/index.native.ts
similarity index 100%
rename from src/styles/overflowXHidden/index.native.ts
rename to src/styles/utils/overflowXHidden/index.native.ts
diff --git a/src/styles/overflowXHidden/index.ts b/src/styles/utils/overflowXHidden/index.ts
similarity index 100%
rename from src/styles/overflowXHidden/index.ts
rename to src/styles/utils/overflowXHidden/index.ts
diff --git a/src/styles/overflowXHidden/types.ts b/src/styles/utils/overflowXHidden/types.ts
similarity index 100%
rename from src/styles/overflowXHidden/types.ts
rename to src/styles/utils/overflowXHidden/types.ts
diff --git a/src/styles/utilities/overscrollBehaviorContain/index.native.ts b/src/styles/utils/overscrollBehaviorContain/index.native.ts
similarity index 100%
rename from src/styles/utilities/overscrollBehaviorContain/index.native.ts
rename to src/styles/utils/overscrollBehaviorContain/index.native.ts
diff --git a/src/styles/utilities/overscrollBehaviorContain/index.ts b/src/styles/utils/overscrollBehaviorContain/index.ts
similarity index 100%
rename from src/styles/utilities/overscrollBehaviorContain/index.ts
rename to src/styles/utils/overscrollBehaviorContain/index.ts
diff --git a/src/styles/utilities/overscrollBehaviorContain/types.ts b/src/styles/utils/overscrollBehaviorContain/types.ts
similarity index 100%
rename from src/styles/utilities/overscrollBehaviorContain/types.ts
rename to src/styles/utils/overscrollBehaviorContain/types.ts
diff --git a/src/styles/pointerEventsAuto/index.native.ts b/src/styles/utils/pointerEventsAuto/index.native.ts
similarity index 100%
rename from src/styles/pointerEventsAuto/index.native.ts
rename to src/styles/utils/pointerEventsAuto/index.native.ts
diff --git a/src/styles/pointerEventsAuto/index.ts b/src/styles/utils/pointerEventsAuto/index.ts
similarity index 100%
rename from src/styles/pointerEventsAuto/index.ts
rename to src/styles/utils/pointerEventsAuto/index.ts
diff --git a/src/styles/pointerEventsAuto/types.ts b/src/styles/utils/pointerEventsAuto/types.ts
similarity index 100%
rename from src/styles/pointerEventsAuto/types.ts
rename to src/styles/utils/pointerEventsAuto/types.ts
diff --git a/src/styles/pointerEventsBoxNone/index.native.ts b/src/styles/utils/pointerEventsBoxNone/index.native.ts
similarity index 100%
rename from src/styles/pointerEventsBoxNone/index.native.ts
rename to src/styles/utils/pointerEventsBoxNone/index.native.ts
diff --git a/src/styles/pointerEventsBoxNone/index.ts b/src/styles/utils/pointerEventsBoxNone/index.ts
similarity index 100%
rename from src/styles/pointerEventsBoxNone/index.ts
rename to src/styles/utils/pointerEventsBoxNone/index.ts
diff --git a/src/styles/pointerEventsBoxNone/types.ts b/src/styles/utils/pointerEventsBoxNone/types.ts
similarity index 100%
rename from src/styles/pointerEventsBoxNone/types.ts
rename to src/styles/utils/pointerEventsBoxNone/types.ts
diff --git a/src/styles/pointerEventsNone/index.native.ts b/src/styles/utils/pointerEventsNone/index.native.ts
similarity index 100%
rename from src/styles/pointerEventsNone/index.native.ts
rename to src/styles/utils/pointerEventsNone/index.native.ts
diff --git a/src/styles/pointerEventsNone/index.ts b/src/styles/utils/pointerEventsNone/index.ts
similarity index 100%
rename from src/styles/pointerEventsNone/index.ts
rename to src/styles/utils/pointerEventsNone/index.ts
diff --git a/src/styles/pointerEventsNone/types.ts b/src/styles/utils/pointerEventsNone/types.ts
similarity index 100%
rename from src/styles/pointerEventsNone/types.ts
rename to src/styles/utils/pointerEventsNone/types.ts
diff --git a/src/styles/utilities/positioning.ts b/src/styles/utils/positioning.ts
similarity index 100%
rename from src/styles/utilities/positioning.ts
rename to src/styles/utils/positioning.ts
diff --git a/src/styles/utilities/sizing.ts b/src/styles/utils/sizing.ts
similarity index 100%
rename from src/styles/utilities/sizing.ts
rename to src/styles/utils/sizing.ts
diff --git a/src/styles/utilities/spacing.ts b/src/styles/utils/spacing.ts
similarity index 100%
rename from src/styles/utilities/spacing.ts
rename to src/styles/utils/spacing.ts
diff --git a/src/styles/utilities/textDecorationLine.ts b/src/styles/utils/textDecorationLine.ts
similarity index 100%
rename from src/styles/utilities/textDecorationLine.ts
rename to src/styles/utils/textDecorationLine.ts
diff --git a/src/styles/utilities/textUnderline/index.native.ts b/src/styles/utils/textUnderline/index.native.ts
similarity index 100%
rename from src/styles/utilities/textUnderline/index.native.ts
rename to src/styles/utils/textUnderline/index.native.ts
diff --git a/src/styles/utilities/textUnderline/index.ts b/src/styles/utils/textUnderline/index.ts
similarity index 100%
rename from src/styles/utilities/textUnderline/index.ts
rename to src/styles/utils/textUnderline/index.ts
diff --git a/src/styles/utilities/textUnderline/types.ts b/src/styles/utils/textUnderline/types.ts
similarity index 100%
rename from src/styles/utilities/textUnderline/types.ts
rename to src/styles/utils/textUnderline/types.ts
diff --git a/src/styles/utilities/userSelect/index.native.ts b/src/styles/utils/userSelect/index.native.ts
similarity index 100%
rename from src/styles/utilities/userSelect/index.native.ts
rename to src/styles/utils/userSelect/index.native.ts
diff --git a/src/styles/utilities/userSelect/index.ts b/src/styles/utils/userSelect/index.ts
similarity index 100%
rename from src/styles/utilities/userSelect/index.ts
rename to src/styles/utils/userSelect/index.ts
diff --git a/src/styles/utilities/userSelect/types.ts b/src/styles/utils/userSelect/types.ts
similarity index 100%
rename from src/styles/utilities/userSelect/types.ts
rename to src/styles/utils/userSelect/types.ts
diff --git a/src/styles/utilities/visibility/index.native.ts b/src/styles/utils/visibility/index.native.ts
similarity index 100%
rename from src/styles/utilities/visibility/index.native.ts
rename to src/styles/utils/visibility/index.native.ts
diff --git a/src/styles/utilities/visibility/index.ts b/src/styles/utils/visibility/index.ts
similarity index 100%
rename from src/styles/utilities/visibility/index.ts
rename to src/styles/utils/visibility/index.ts
diff --git a/src/styles/utilities/visibility/types.ts b/src/styles/utils/visibility/types.ts
similarity index 100%
rename from src/styles/utilities/visibility/types.ts
rename to src/styles/utils/visibility/types.ts
diff --git a/src/styles/utilities/whiteSpace/index.native.ts b/src/styles/utils/whiteSpace/index.native.ts
similarity index 100%
rename from src/styles/utilities/whiteSpace/index.native.ts
rename to src/styles/utils/whiteSpace/index.native.ts
diff --git a/src/styles/utilities/whiteSpace/index.ts b/src/styles/utils/whiteSpace/index.ts
similarity index 100%
rename from src/styles/utilities/whiteSpace/index.ts
rename to src/styles/utils/whiteSpace/index.ts
diff --git a/src/styles/utilities/whiteSpace/types.ts b/src/styles/utils/whiteSpace/types.ts
similarity index 100%
rename from src/styles/utilities/whiteSpace/types.ts
rename to src/styles/utils/whiteSpace/types.ts
diff --git a/src/styles/utilities/wordBreak/index.native.ts b/src/styles/utils/wordBreak/index.native.ts
similarity index 100%
rename from src/styles/utilities/wordBreak/index.native.ts
rename to src/styles/utils/wordBreak/index.native.ts
diff --git a/src/styles/utilities/wordBreak/index.ts b/src/styles/utils/wordBreak/index.ts
similarity index 100%
rename from src/styles/utilities/wordBreak/index.ts
rename to src/styles/utils/wordBreak/index.ts
diff --git a/src/styles/utilities/wordBreak/types.ts b/src/styles/utils/wordBreak/types.ts
similarity index 100%
rename from src/styles/utilities/wordBreak/types.ts
rename to src/styles/utils/wordBreak/types.ts
diff --git a/src/styles/utilities/writingDirection.ts b/src/styles/utils/writingDirection.ts
similarity index 100%
rename from src/styles/utilities/writingDirection.ts
rename to src/styles/utils/writingDirection.ts
diff --git a/tests/ui/UnreadIndicatorsTest.js b/tests/ui/UnreadIndicatorsTest.js
index ed44d3088ae0..93bb2cb94d30 100644
--- a/tests/ui/UnreadIndicatorsTest.js
+++ b/tests/ui/UnreadIndicatorsTest.js
@@ -20,7 +20,7 @@ import * as Pusher from '../../src/libs/Pusher/pusher';
 import PusherConnectionManager from '../../src/libs/PusherConnectionManager';
 import ONYXKEYS from '../../src/ONYXKEYS';
 import appSetup from '../../src/setup';
-import fontWeightBold from '../../src/styles/fontWeight/bold';
+import fontWeightBold from '../../src/styles/utils/fontWeight/bold';
 import * as TestHelper from '../utils/TestHelper';
 import waitForBatchedUpdates from '../utils/waitForBatchedUpdates';
 import waitForBatchedUpdatesWithAct from '../utils/waitForBatchedUpdatesWithAct';

From e05e13f05e9602634dec8ff15b554eb4aa9cb537 Mon Sep 17 00:00:00 2001
From: Christoph Pader <christoph.pader@outlook.com>
Date: Thu, 7 Dec 2023 17:20:30 +0100
Subject: [PATCH 047/102] fix: styles

---
 src/styles/styles.ts | 20 ++++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/src/styles/styles.ts b/src/styles/styles.ts
index a8f1e2abe8a3..738cfff63f64 100644
--- a/src/styles/styles.ts
+++ b/src/styles/styles.ts
@@ -10,21 +10,24 @@ import DotLottieAnimation from '@components/LottieAnimations/types';
 import * as Browser from '@libs/Browser';
 import CONST from '@src/CONST';
 import colors from './colors';
-import fontWeightBold from './fontWeight/bold';
-import getPopOverVerticalOffset from './utils/getPopOverVerticalOffset';
-import optionAlternateTextPlatformStyles from './utils/optionAlternateTextPlatformStyles';
-import overflowXHidden from ./utils/fontWeight/boldn';
-import pointerEventsAuto from './utils/pointerEventsAuto';
-import pointerEventsBoxNone from './utils/pointerEventsBoxNone';
-import pointerEventsNone from './utils/pointerEventsNone';
 import {defaultTheme} from './theme/themes';
 import {type ThemeColors} from './theme/types';
+import addOutlineWidth from './utils/addOutlineWidth';
 import borders from './utils/borders';
+import codeStyles from './utils/codeStyles';
 import cursor from './utils/cursor';
 import display from './utils/display';
 import flex from './utils/flex';
+import fontFamily from './utils/fontFamily';
+import fontWeightBold from './utils/fontWeight/bold';
+import getPopOverVerticalOffset from './utils/getPopOverVerticalOffset';
 import objectFit from './utils/objectFit';
+import optionAlternateTextPlatformStyles from './utils/optionAlternateTextPlatformStyles';
 import overflow from './utils/overflow';
+import overflowXHidden from './utils/overflowXHidden';
+import pointerEventsAuto from './utils/pointerEventsAuto';
+import pointerEventsBoxNone from './utils/pointerEventsBoxNone';
+import pointerEventsNone from './utils/pointerEventsNone';
 import positioning from './utils/positioning';
 import sizing from './utils/sizing';
 import spacing from './utils/spacing';
@@ -35,9 +38,6 @@ import visibility from './utils/visibility';
 import whiteSpace from './utils/whiteSpace';
 import wordBreak from './utils/wordBreak';
 import writingDirection from './utils/writingDirection';
-import addOutlineWidth from './utils/addOutlineWidth';
-import codeStyles from './utils/codeStyles';
-import fontFamily from './utils/fontFamily';
 import variables from './variables';
 
 type ColorScheme = (typeof CONST.COLOR_SCHEME)[keyof typeof CONST.COLOR_SCHEME];

From 4a9a042704a9b518b95d3a2c51da9670943eec30 Mon Sep 17 00:00:00 2001
From: Christoph Pader <christoph.pader@outlook.com>
Date: Thu, 7 Dec 2023 17:23:12 +0100
Subject: [PATCH 048/102] move useThemeStyles

---
 src/components/AddressSearch/CurrentLocationButton.js           | 2 +-
 src/components/AddressSearch/index.js                           | 2 +-
 .../AnchorForCommentsOnly/BaseAnchorForCommentsOnly.js          | 2 +-
 src/components/AttachmentModal.js                               | 2 +-
 src/components/Attachments/AttachmentView/index.js              | 2 +-
 .../AutoCompleteSuggestions/BaseAutoCompleteSuggestions.tsx     | 2 +-
 src/components/AutoCompleteSuggestions/index.tsx                | 2 +-
 src/components/Avatar.tsx                                       | 2 +-
 src/components/AvatarCropModal/AvatarCropModal.js               | 2 +-
 src/components/AvatarCropModal/ImageCropView.js                 | 2 +-
 src/components/AvatarWithDisplayName.tsx                        | 2 +-
 src/components/Badge.tsx                                        | 2 +-
 src/components/Banner.tsx                                       | 2 +-
 src/components/BaseMiniContextMenuItem.js                       | 2 +-
 src/components/ButtonWithDropdownMenu.js                        | 2 +-
 src/components/Checkbox.tsx                                     | 2 +-
 src/components/Composer/index.js                                | 2 +-
 src/components/ContextMenuItem.js                               | 2 +-
 src/components/CurrentUserPersonalDetailsSkeletonView/index.tsx | 2 +-
 src/components/DatePicker/CalendarPicker/ArrowIcon.js           | 2 +-
 src/components/DistanceMapView/index.android.js                 | 2 +-
 src/components/DotIndicatorMessage.tsx                          | 2 +-
 src/components/EReceipt.js                                      | 2 +-
 src/components/EmojiPicker/CategoryShortcutButton.js            | 2 +-
 src/components/EmojiPicker/EmojiPicker.js                       | 2 +-
 src/components/EmojiPicker/EmojiPickerButton.js                 | 2 +-
 src/components/EmojiPicker/EmojiPickerButtonDropdown.js         | 2 +-
 src/components/EmojiPicker/EmojiPickerMenu/index.js             | 2 +-
 src/components/EmojiPicker/EmojiPickerMenu/index.native.js      | 2 +-
 src/components/EmojiSuggestions.tsx                             | 2 +-
 src/components/ExpensifyWordmark.tsx                            | 2 +-
 .../GrowlNotificationContainer/index.native.js                  | 2 +-
 src/components/HTMLEngineProvider/HTMLRenderers/CodeRenderer.js | 2 +-
 .../HTMLEngineProvider/HTMLRenderers/MentionHereRenderer.js     | 2 +-
 .../HTMLEngineProvider/HTMLRenderers/MentionUserRenderer.js     | 2 +-
 src/components/HeaderPageLayout.js                              | 2 +-
 src/components/HeaderWithBackButton/index.js                    | 2 +-
 src/components/ImageView/index.js                               | 2 +-
 src/components/LHNOptionsList/OptionRowLHN.js                   | 2 +-
 src/components/LocationErrorMessage/BaseLocationErrorMessage.js | 2 +-
 src/components/MagicCodeInput.js                                | 2 +-
 src/components/MapView/MapView.website.tsx                      | 2 +-
 src/components/MentionSuggestions.tsx                           | 2 +-
 src/components/MenuItem.js                                      | 2 +-
 src/components/MessagesRow.js                                   | 2 +-
 src/components/Modal/BaseModal.tsx                              | 2 +-
 src/components/Modal/index.tsx                                  | 2 +-
 src/components/MultipleAvatars.tsx                              | 2 +-
 src/components/OfflineWithFeedback.js                           | 2 +-
 src/components/OptionRow.js                                     | 2 +-
 src/components/PopoverWithoutOverlay/index.js                   | 2 +-
 .../Pressable/GenericPressable/BaseGenericPressable.tsx         | 2 +-
 src/components/Pressable/PressableWithDelayToggle.tsx           | 2 +-
 src/components/PressableWithSecondaryInteraction/index.tsx      | 2 +-
 src/components/Reactions/AddReactionBubble.js                   | 2 +-
 src/components/Reactions/EmojiReactionBubble.js                 | 2 +-
 src/components/Reactions/MiniQuickEmojiReactions.js             | 2 +-
 src/components/ReportActionItem/MoneyReportView.js              | 2 +-
 src/components/ReportActionItem/MoneyRequestPreview.js          | 2 +-
 src/components/ReportActionItem/MoneyRequestView.js             | 2 +-
 src/components/ReportActionItem/ReportActionItemImages.js       | 2 +-
 src/components/ReportActionItem/TaskPreview.js                  | 2 +-
 src/components/ReportActionItem/TaskView.js                     | 2 +-
 src/components/RoomHeaderAvatars.js                             | 2 +-
 src/components/SafeAreaConsumer/index.android.tsx               | 2 +-
 src/components/SafeAreaConsumer/index.tsx                       | 2 +-
 src/components/SelectionList/BaseListItem.js                    | 2 +-
 src/components/SpacerView.js                                    | 2 +-
 src/components/SubscriptAvatar.tsx                              | 2 +-
 src/components/TagPicker/index.js                               | 2 +-
 src/components/TextInput/BaseTextInput/index.js                 | 2 +-
 src/components/TextInput/BaseTextInput/index.native.js          | 2 +-
 src/components/ThumbnailImage.tsx                               | 2 +-
 src/components/Tooltip/TooltipRenderedOnPageBody.js             | 2 +-
 src/components/ValuePicker/index.js                             | 2 +-
 src/components/withStyleUtils.tsx                               | 2 +-
 src/{styles => hooks}/useStyleUtils.ts                          | 2 +-
 src/pages/ErrorPage/GenericErrorPage.js                         | 2 +-
 src/pages/home/report/AnimatedEmptyStateBackground.js           | 2 +-
 .../home/report/ContextMenu/BaseReportActionContextMenu.js      | 2 +-
 .../report/ContextMenu/MiniReportActionContextMenu/index.js     | 2 +-
 src/pages/home/report/LinkPreviewer.js                          | 2 +-
 src/pages/home/report/ReactionList/HeaderReactionList.js        | 2 +-
 .../ComposerWithSuggestions/ComposerWithSuggestions.js          | 2 +-
 src/pages/home/report/ReportActionItem.js                       | 2 +-
 src/pages/home/report/ReportActionItemCreated.js                | 2 +-
 src/pages/home/report/ReportActionItemMessageEdit.js            | 2 +-
 src/pages/home/report/ReportActionItemParentAction.js           | 2 +-
 src/pages/home/report/ReportActionItemSingle.js                 | 2 +-
 src/pages/home/sidebar/SidebarLinks.js                          | 2 +-
 .../Profile/Contacts/ValidateCodeForm/BaseValidateCodeForm.js   | 2 +-
 src/pages/settings/Wallet/PaymentMethodList.js                  | 2 +-
 src/pages/signin/SignInHeroCopy.js                              | 2 +-
 src/pages/signin/SignInPage.js                                  | 2 +-
 src/pages/signin/SignInPageHero.js                              | 2 +-
 src/pages/signin/SignInPageLayout/Footer.js                     | 2 +-
 src/pages/signin/SignInPageLayout/SignInPageContent.js          | 2 +-
 src/pages/signin/SignInPageLayout/index.js                      | 2 +-
 src/pages/signin/ValidateCodeForm/BaseValidateCodeForm.js       | 2 +-
 src/stories/Composer.stories.js                                 | 2 +-
 src/styles/useThemeStyles.ts                                    | 2 +-
 101 files changed, 101 insertions(+), 101 deletions(-)
 rename src/{styles => hooks}/useStyleUtils.ts (84%)

diff --git a/src/components/AddressSearch/CurrentLocationButton.js b/src/components/AddressSearch/CurrentLocationButton.js
index 90d2c15733f1..87c6a710100a 100644
--- a/src/components/AddressSearch/CurrentLocationButton.js
+++ b/src/components/AddressSearch/CurrentLocationButton.js
@@ -5,9 +5,9 @@ import Icon from '@components/Icon';
 import * as Expensicons from '@components/Icon/Expensicons';
 import PressableWithFeedback from '@components/Pressable/PressableWithFeedback';
 import useLocalize from '@hooks/useLocalize';
+import useStyleUtils from '@hooks/useStyleUtils';
 import getButtonState from '@libs/getButtonState';
 import colors from '@styles/colors';
-import useStyleUtils from '@styles/useStyleUtils';
 import useThemeStyles from '@styles/useThemeStyles';
 
 const propTypes = {
diff --git a/src/components/AddressSearch/index.js b/src/components/AddressSearch/index.js
index 9733c20fc572..e59f92635f88 100644
--- a/src/components/AddressSearch/index.js
+++ b/src/components/AddressSearch/index.js
@@ -10,12 +10,12 @@ import networkPropTypes from '@components/networkPropTypes';
 import {withNetwork} from '@components/OnyxProvider';
 import TextInput from '@components/TextInput';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
+import useStyleUtils from '@hooks/useStyleUtils';
 import * as ApiUtils from '@libs/ApiUtils';
 import compose from '@libs/compose';
 import getCurrentPosition from '@libs/getCurrentPosition';
 import * as GooglePlacesUtils from '@libs/GooglePlacesUtils';
 import useTheme from '@styles/theme/useTheme';
-import useStyleUtils from '@styles/useStyleUtils';
 import useThemeStyles from '@styles/useThemeStyles';
 import variables from '@styles/variables';
 import CONST from '@src/CONST';
diff --git a/src/components/AnchorForCommentsOnly/BaseAnchorForCommentsOnly.js b/src/components/AnchorForCommentsOnly/BaseAnchorForCommentsOnly.js
index 53afebfd2207..91bc47a8af30 100644
--- a/src/components/AnchorForCommentsOnly/BaseAnchorForCommentsOnly.js
+++ b/src/components/AnchorForCommentsOnly/BaseAnchorForCommentsOnly.js
@@ -7,11 +7,11 @@ import _ from 'underscore';
 import PressableWithSecondaryInteraction from '@components/PressableWithSecondaryInteraction';
 import Text from '@components/Text';
 import Tooltip from '@components/Tooltip';
+import useStyleUtils from '@hooks/useStyleUtils';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import * as DeviceCapabilities from '@libs/DeviceCapabilities';
 import * as ContextMenuActions from '@pages/home/report/ContextMenu/ContextMenuActions';
 import * as ReportActionContextMenu from '@pages/home/report/ContextMenu/ReportActionContextMenu';
-import useStyleUtils from '@styles/useStyleUtils';
 import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 import {propTypes as anchorForCommentsOnlyPropTypes} from './anchorForCommentsOnlyPropTypes';
diff --git a/src/components/AttachmentModal.js b/src/components/AttachmentModal.js
index fff562047931..62ce151232f1 100755
--- a/src/components/AttachmentModal.js
+++ b/src/components/AttachmentModal.js
@@ -8,6 +8,7 @@ import {withOnyx} from 'react-native-onyx';
 import _ from 'underscore';
 import useLocalize from '@hooks/useLocalize';
 import useNetwork from '@hooks/useNetwork';
+import useStyleUtils from '@hooks/useStyleUtils';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import addEncryptedAuthTokenToURL from '@libs/addEncryptedAuthTokenToURL';
 import compose from '@libs/compose';
@@ -20,7 +21,6 @@ import * as TransactionUtils from '@libs/TransactionUtils';
 import useNativeDriver from '@libs/useNativeDriver';
 import reportPropTypes from '@pages/reportPropTypes';
 import useTheme from '@styles/theme/useTheme';
-import useStyleUtils from '@styles/useStyleUtils';
 import useThemeStyles from '@styles/useThemeStyles';
 import * as IOU from '@userActions/IOU';
 import CONST from '@src/CONST';
diff --git a/src/components/Attachments/AttachmentView/index.js b/src/components/Attachments/AttachmentView/index.js
index 726250476088..5b2d3dbf3860 100755
--- a/src/components/Attachments/AttachmentView/index.js
+++ b/src/components/Attachments/AttachmentView/index.js
@@ -12,11 +12,11 @@ import Text from '@components/Text';
 import Tooltip from '@components/Tooltip';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
 import useNetwork from '@hooks/useNetwork';
+import useStyleUtils from '@hooks/useStyleUtils';
 import addEncryptedAuthTokenToURL from '@libs/addEncryptedAuthTokenToURL';
 import compose from '@libs/compose';
 import * as TransactionUtils from '@libs/TransactionUtils';
 import useTheme from '@styles/theme/useTheme';
-import useStyleUtils from '@styles/useStyleUtils';
 import useThemeStyles from '@styles/useThemeStyles';
 import cursor from '@styles/utils/cursor';
 import variables from '@styles/variables';
diff --git a/src/components/AutoCompleteSuggestions/BaseAutoCompleteSuggestions.tsx b/src/components/AutoCompleteSuggestions/BaseAutoCompleteSuggestions.tsx
index 07db455968a3..a804ac07c3ca 100644
--- a/src/components/AutoCompleteSuggestions/BaseAutoCompleteSuggestions.tsx
+++ b/src/components/AutoCompleteSuggestions/BaseAutoCompleteSuggestions.tsx
@@ -5,7 +5,7 @@ import {View} from 'react-native';
 import {ScrollView} from 'react-native-gesture-handler';
 import Animated, {Easing, FadeOutDown, useAnimatedStyle, useSharedValue, withTiming} from 'react-native-reanimated';
 import PressableWithFeedback from '@components/Pressable/PressableWithFeedback';
-import useStyleUtils from '@styles/useStyleUtils';
+import useStyleUtils from '@hooks/useStyleUtils';
 import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 import viewForwardedRef from '@src/types/utils/viewForwardedRef';
diff --git a/src/components/AutoCompleteSuggestions/index.tsx b/src/components/AutoCompleteSuggestions/index.tsx
index 3ccbb4efaf5a..baca4011a177 100644
--- a/src/components/AutoCompleteSuggestions/index.tsx
+++ b/src/components/AutoCompleteSuggestions/index.tsx
@@ -1,9 +1,9 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import {View} from 'react-native';
+import useStyleUtils from '@hooks/useStyleUtils';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import * as DeviceCapabilities from '@libs/DeviceCapabilities';
-import useStyleUtils from '@styles/useStyleUtils';
 import BaseAutoCompleteSuggestions from './BaseAutoCompleteSuggestions';
 import type {AutoCompleteSuggestionsProps} from './types';
 
diff --git a/src/components/Avatar.tsx b/src/components/Avatar.tsx
index b8267e7aeebd..f90c245056f8 100644
--- a/src/components/Avatar.tsx
+++ b/src/components/Avatar.tsx
@@ -1,10 +1,10 @@
 import React, {useEffect, useState} from 'react';
 import {StyleProp, View, ViewStyle} from 'react-native';
 import useNetwork from '@hooks/useNetwork';
+import useStyleUtils from '@hooks/useStyleUtils';
 import * as ReportUtils from '@libs/ReportUtils';
 import {AvatarSource} from '@libs/UserUtils';
 import useTheme from '@styles/theme/useTheme';
-import useStyleUtils from '@styles/useStyleUtils';
 import useThemeStyles from '@styles/useThemeStyles';
 import type {AvatarSizeName} from '@styles/utils';
 import CONST from '@src/CONST';
diff --git a/src/components/AvatarCropModal/AvatarCropModal.js b/src/components/AvatarCropModal/AvatarCropModal.js
index 599181f3f899..3250dedda39f 100644
--- a/src/components/AvatarCropModal/AvatarCropModal.js
+++ b/src/components/AvatarCropModal/AvatarCropModal.js
@@ -15,10 +15,10 @@ import Text from '@components/Text';
 import Tooltip from '@components/Tooltip';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
 import withWindowDimensions, {windowDimensionsPropTypes} from '@components/withWindowDimensions';
+import useStyleUtils from '@hooks/useStyleUtils';
 import compose from '@libs/compose';
 import cropOrRotateImage from '@libs/cropOrRotateImage';
 import useTheme from '@styles/theme/useTheme';
-import useStyleUtils from '@styles/useStyleUtils';
 import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 import ImageCropView from './ImageCropView';
diff --git a/src/components/AvatarCropModal/ImageCropView.js b/src/components/AvatarCropModal/ImageCropView.js
index 94289b24d6ca..9259d4377c3f 100644
--- a/src/components/AvatarCropModal/ImageCropView.js
+++ b/src/components/AvatarCropModal/ImageCropView.js
@@ -5,8 +5,8 @@ import {PanGestureHandler} from 'react-native-gesture-handler';
 import Animated, {interpolate, useAnimatedStyle} from 'react-native-reanimated';
 import Icon from '@components/Icon';
 import * as Expensicons from '@components/Icon/Expensicons';
+import useStyleUtils from '@hooks/useStyleUtils';
 import ControlSelection from '@libs/ControlSelection';
-import useStyleUtils from '@styles/useStyleUtils';
 import useThemeStyles from '@styles/useThemeStyles';
 import gestureHandlerPropTypes from './gestureHandlerPropTypes';
 
diff --git a/src/components/AvatarWithDisplayName.tsx b/src/components/AvatarWithDisplayName.tsx
index 12571ceb971c..8033d7dfb7bf 100644
--- a/src/components/AvatarWithDisplayName.tsx
+++ b/src/components/AvatarWithDisplayName.tsx
@@ -2,11 +2,11 @@ import React, {useCallback, useEffect, useRef} from 'react';
 import {View} from 'react-native';
 import {OnyxCollection, OnyxEntry, withOnyx} from 'react-native-onyx';
 import {ValueOf} from 'type-fest';
+import useStyleUtils from '@hooks/useStyleUtils';
 import Navigation from '@libs/Navigation/Navigation';
 import * as OptionsListUtils from '@libs/OptionsListUtils';
 import * as ReportUtils from '@libs/ReportUtils';
 import useTheme from '@styles/theme/useTheme';
-import useStyleUtils from '@styles/useStyleUtils';
 import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
diff --git a/src/components/Badge.tsx b/src/components/Badge.tsx
index 82212c66db04..d68233474430 100644
--- a/src/components/Badge.tsx
+++ b/src/components/Badge.tsx
@@ -1,6 +1,6 @@
 import React, {useCallback} from 'react';
 import {GestureResponderEvent, PressableStateCallbackType, StyleProp, TextStyle, View, ViewStyle} from 'react-native';
-import useStyleUtils from '@styles/useStyleUtils';
+import useStyleUtils from '@hooks/useStyleUtils';
 import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 import PressableWithoutFeedback from './Pressable/PressableWithoutFeedback';
diff --git a/src/components/Banner.tsx b/src/components/Banner.tsx
index cfe817c849c0..eb006619d024 100644
--- a/src/components/Banner.tsx
+++ b/src/components/Banner.tsx
@@ -1,8 +1,8 @@
 import React, {memo} from 'react';
 import {StyleProp, TextStyle, View, ViewStyle} from 'react-native';
 import useLocalize from '@hooks/useLocalize';
+import useStyleUtils from '@hooks/useStyleUtils';
 import getButtonState from '@libs/getButtonState';
-import useStyleUtils from '@styles/useStyleUtils';
 import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 import Hoverable from './Hoverable';
diff --git a/src/components/BaseMiniContextMenuItem.js b/src/components/BaseMiniContextMenuItem.js
index a45aba6ef534..f3faa3f4a5db 100644
--- a/src/components/BaseMiniContextMenuItem.js
+++ b/src/components/BaseMiniContextMenuItem.js
@@ -2,10 +2,10 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import {View} from 'react-native';
 import _ from 'underscore';
+import useStyleUtils from '@hooks/useStyleUtils';
 import DomUtils from '@libs/DomUtils';
 import getButtonState from '@libs/getButtonState';
 import ReportActionComposeFocusManager from '@libs/ReportActionComposeFocusManager';
-import useStyleUtils from '@styles/useStyleUtils';
 import useThemeStyles from '@styles/useThemeStyles';
 import variables from '@styles/variables';
 import PressableWithoutFeedback from './Pressable/PressableWithoutFeedback';
diff --git a/src/components/ButtonWithDropdownMenu.js b/src/components/ButtonWithDropdownMenu.js
index 74848b104e59..bfb1df8cd571 100644
--- a/src/components/ButtonWithDropdownMenu.js
+++ b/src/components/ButtonWithDropdownMenu.js
@@ -2,9 +2,9 @@ import PropTypes from 'prop-types';
 import React, {useEffect, useRef, useState} from 'react';
 import {View} from 'react-native';
 import _ from 'underscore';
+import useStyleUtils from '@hooks/useStyleUtils';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import useTheme from '@styles/theme/useTheme';
-import useStyleUtils from '@styles/useStyleUtils';
 import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 import Button from './Button';
diff --git a/src/components/Checkbox.tsx b/src/components/Checkbox.tsx
index 8d4c2c51fed3..9d1a38d0d40d 100644
--- a/src/components/Checkbox.tsx
+++ b/src/components/Checkbox.tsx
@@ -1,7 +1,7 @@
 import React, {ForwardedRef, forwardRef, KeyboardEvent as ReactKeyboardEvent} from 'react';
 import {GestureResponderEvent, StyleProp, View, ViewStyle} from 'react-native';
+import useStyleUtils from '@hooks/useStyleUtils';
 import useTheme from '@styles/theme/useTheme';
-import useStyleUtils from '@styles/useStyleUtils';
 import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 import ChildrenProps from '@src/types/utils/ChildrenProps';
diff --git a/src/components/Composer/index.js b/src/components/Composer/index.js
index 9859340e9cc6..17d6f633b7b3 100755
--- a/src/components/Composer/index.js
+++ b/src/components/Composer/index.js
@@ -8,6 +8,7 @@ import RNTextInput from '@components/RNTextInput';
 import Text from '@components/Text';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
 import withNavigation from '@components/withNavigation';
+import useStyleUtils from '@hooks/useStyleUtils';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import * as Browser from '@libs/Browser';
 import compose from '@libs/compose';
@@ -16,7 +17,6 @@ import updateIsFullComposerAvailable from '@libs/ComposerUtils/updateIsFullCompo
 import isEnterWhileComposition from '@libs/KeyboardShortcut/isEnterWhileComposition';
 import ReportActionComposeFocusManager from '@libs/ReportActionComposeFocusManager';
 import useTheme from '@styles/theme/useTheme';
-import useStyleUtils from '@styles/useStyleUtils';
 import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 
diff --git a/src/components/ContextMenuItem.js b/src/components/ContextMenuItem.js
index 4b0609839a71..c75c18466585 100644
--- a/src/components/ContextMenuItem.js
+++ b/src/components/ContextMenuItem.js
@@ -1,9 +1,9 @@
 import PropTypes from 'prop-types';
 import React, {forwardRef, useImperativeHandle} from 'react';
+import useStyleUtils from '@hooks/useStyleUtils';
 import useThrottledButtonState from '@hooks/useThrottledButtonState';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import getButtonState from '@libs/getButtonState';
-import useStyleUtils from '@styles/useStyleUtils';
 import useThemeStyles from '@styles/useThemeStyles';
 import BaseMiniContextMenuItem from './BaseMiniContextMenuItem';
 import Icon from './Icon';
diff --git a/src/components/CurrentUserPersonalDetailsSkeletonView/index.tsx b/src/components/CurrentUserPersonalDetailsSkeletonView/index.tsx
index 3bc473b3d03f..b1ad3930dd0e 100644
--- a/src/components/CurrentUserPersonalDetailsSkeletonView/index.tsx
+++ b/src/components/CurrentUserPersonalDetailsSkeletonView/index.tsx
@@ -3,8 +3,8 @@ import {View} from 'react-native';
 import {Circle, Rect} from 'react-native-svg';
 import {ValueOf} from 'type-fest';
 import SkeletonViewContentLoader from '@components/SkeletonViewContentLoader';
+import useStyleUtils from '@hooks/useStyleUtils';
 import useTheme from '@styles/theme/useTheme';
-import useStyleUtils from '@styles/useStyleUtils';
 import useThemeStyles from '@styles/useThemeStyles';
 import variables from '@styles/variables';
 import CONST from '@src/CONST';
diff --git a/src/components/DatePicker/CalendarPicker/ArrowIcon.js b/src/components/DatePicker/CalendarPicker/ArrowIcon.js
index a03e18085706..524d77a957b4 100644
--- a/src/components/DatePicker/CalendarPicker/ArrowIcon.js
+++ b/src/components/DatePicker/CalendarPicker/ArrowIcon.js
@@ -3,7 +3,7 @@ import React from 'react';
 import {View} from 'react-native';
 import Icon from '@components/Icon';
 import * as Expensicons from '@components/Icon/Expensicons';
-import useStyleUtils from '@styles/useStyleUtils';
+import useStyleUtils from '@hooks/useStyleUtils';
 import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 
diff --git a/src/components/DistanceMapView/index.android.js b/src/components/DistanceMapView/index.android.js
index 532d42ac0be5..e3272f32b480 100644
--- a/src/components/DistanceMapView/index.android.js
+++ b/src/components/DistanceMapView/index.android.js
@@ -6,7 +6,7 @@ import * as Expensicons from '@components/Icon/Expensicons';
 import MapView from '@components/MapView';
 import useLocalize from '@hooks/useLocalize';
 import useNetwork from '@hooks/useNetwork';
-import useStyleUtils from '@styles/useStyleUtils';
+import useStyleUtils from '@hooks/useStyleUtils';
 import useThemeStyles from '@styles/useThemeStyles';
 import * as distanceMapViewPropTypes from './distanceMapViewPropTypes';
 
diff --git a/src/components/DotIndicatorMessage.tsx b/src/components/DotIndicatorMessage.tsx
index e821c93daaf3..327e00417eba 100644
--- a/src/components/DotIndicatorMessage.tsx
+++ b/src/components/DotIndicatorMessage.tsx
@@ -1,10 +1,10 @@
 /* eslint-disable react/no-array-index-key */
 import React from 'react';
 import {StyleProp, TextStyle, View, ViewStyle} from 'react-native';
+import useStyleUtils from '@hooks/useStyleUtils';
 import fileDownload from '@libs/fileDownload';
 import * as Localize from '@libs/Localize';
 import useTheme from '@styles/theme/useTheme';
-import useStyleUtils from '@styles/useStyleUtils';
 import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 import Icon from './Icon';
diff --git a/src/components/EReceipt.js b/src/components/EReceipt.js
index f5e5b7f2f6b3..72cc7f4e18f7 100644
--- a/src/components/EReceipt.js
+++ b/src/components/EReceipt.js
@@ -3,10 +3,10 @@ import React from 'react';
 import {View} from 'react-native';
 import {withOnyx} from 'react-native-onyx';
 import useLocalize from '@hooks/useLocalize';
+import useStyleUtils from '@hooks/useStyleUtils';
 import * as CardUtils from '@libs/CardUtils';
 import * as CurrencyUtils from '@libs/CurrencyUtils';
 import * as ReportUtils from '@libs/ReportUtils';
-import useStyleUtils from '@styles/useStyleUtils';
 import useThemeStyles from '@styles/useThemeStyles';
 import variables from '@styles/variables';
 import CONST from '@src/CONST';
diff --git a/src/components/EmojiPicker/CategoryShortcutButton.js b/src/components/EmojiPicker/CategoryShortcutButton.js
index c9c6ed9b979c..260fda15d157 100644
--- a/src/components/EmojiPicker/CategoryShortcutButton.js
+++ b/src/components/EmojiPicker/CategoryShortcutButton.js
@@ -4,9 +4,9 @@ import Icon from '@components/Icon';
 import PressableWithoutFeedback from '@components/Pressable/PressableWithoutFeedback';
 import Tooltip from '@components/Tooltip';
 import useLocalize from '@hooks/useLocalize';
+import useStyleUtils from '@hooks/useStyleUtils';
 import getButtonState from '@libs/getButtonState';
 import useTheme from '@styles/theme/useTheme';
-import useStyleUtils from '@styles/useStyleUtils';
 import useThemeStyles from '@styles/useThemeStyles';
 import variables from '@styles/variables';
 import CONST from '@src/CONST';
diff --git a/src/components/EmojiPicker/EmojiPicker.js b/src/components/EmojiPicker/EmojiPicker.js
index 96d7ee88b816..5120889b528d 100644
--- a/src/components/EmojiPicker/EmojiPicker.js
+++ b/src/components/EmojiPicker/EmojiPicker.js
@@ -4,9 +4,9 @@ import {Dimensions} from 'react-native';
 import _ from 'underscore';
 import PopoverWithMeasuredContent from '@components/PopoverWithMeasuredContent';
 import withViewportOffsetTop from '@components/withViewportOffsetTop';
+import useStyleUtils from '@hooks/useStyleUtils';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import calculateAnchorPosition from '@libs/calculateAnchorPosition';
-import useStyleUtils from '@styles/useStyleUtils';
 import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 import EmojiPickerMenu from './EmojiPickerMenu';
diff --git a/src/components/EmojiPicker/EmojiPickerButton.js b/src/components/EmojiPicker/EmojiPickerButton.js
index 165646d4795d..c11ec8df16aa 100644
--- a/src/components/EmojiPicker/EmojiPickerButton.js
+++ b/src/components/EmojiPicker/EmojiPickerButton.js
@@ -5,8 +5,8 @@ import * as Expensicons from '@components/Icon/Expensicons';
 import PressableWithoutFeedback from '@components/Pressable/PressableWithoutFeedback';
 import Tooltip from '@components/Tooltip/PopoverAnchorTooltip';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
+import useStyleUtils from '@hooks/useStyleUtils';
 import getButtonState from '@libs/getButtonState';
-import useStyleUtils from '@styles/useStyleUtils';
 import useThemeStyles from '@styles/useThemeStyles';
 import * as EmojiPickerAction from '@userActions/EmojiPickerAction';
 
diff --git a/src/components/EmojiPicker/EmojiPickerButtonDropdown.js b/src/components/EmojiPicker/EmojiPickerButtonDropdown.js
index 02a5954cb705..d8a50ec7abff 100644
--- a/src/components/EmojiPicker/EmojiPickerButtonDropdown.js
+++ b/src/components/EmojiPicker/EmojiPickerButtonDropdown.js
@@ -7,8 +7,8 @@ import PressableWithoutFeedback from '@components/Pressable/PressableWithoutFeed
 import Text from '@components/Text';
 import Tooltip from '@components/Tooltip';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
+import useStyleUtils from '@hooks/useStyleUtils';
 import getButtonState from '@libs/getButtonState';
-import useStyleUtils from '@styles/useStyleUtils';
 import useThemeStyles from '@styles/useThemeStyles';
 import * as EmojiPickerAction from '@userActions/EmojiPickerAction';
 import CONST from '@src/CONST';
diff --git a/src/components/EmojiPicker/EmojiPickerMenu/index.js b/src/components/EmojiPicker/EmojiPickerMenu/index.js
index 0e3fc7932e46..2acfe61b82eb 100755
--- a/src/components/EmojiPicker/EmojiPickerMenu/index.js
+++ b/src/components/EmojiPicker/EmojiPickerMenu/index.js
@@ -11,6 +11,7 @@ import EmojiSkinToneList from '@components/EmojiPicker/EmojiSkinToneList';
 import Text from '@components/Text';
 import TextInput from '@components/TextInput';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
+import useStyleUtils from '@hooks/useStyleUtils';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import * as Browser from '@libs/Browser';
 import canFocusInputOnScreenFocus from '@libs/canFocusInputOnScreenFocus';
@@ -18,7 +19,6 @@ import compose from '@libs/compose';
 import * as EmojiUtils from '@libs/EmojiUtils';
 import isEnterWhileComposition from '@libs/KeyboardShortcut/isEnterWhileComposition';
 import * as ReportUtils from '@libs/ReportUtils';
-import useStyleUtils from '@styles/useStyleUtils';
 import useThemeStyles from '@styles/useThemeStyles';
 import * as User from '@userActions/User';
 import CONST from '@src/CONST';
diff --git a/src/components/EmojiPicker/EmojiPickerMenu/index.native.js b/src/components/EmojiPicker/EmojiPickerMenu/index.native.js
index f1560c07b397..85cc4038917a 100644
--- a/src/components/EmojiPicker/EmojiPickerMenu/index.native.js
+++ b/src/components/EmojiPicker/EmojiPickerMenu/index.native.js
@@ -12,10 +12,10 @@ import Text from '@components/Text';
 import TextInput from '@components/TextInput';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
 import useSingleExecution from '@hooks/useSingleExecution';
+import useStyleUtils from '@hooks/useStyleUtils';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import compose from '@libs/compose';
 import * as EmojiUtils from '@libs/EmojiUtils';
-import useStyleUtils from '@styles/useStyleUtils';
 import useThemeStyles from '@styles/useThemeStyles';
 import * as User from '@userActions/User';
 import CONST from '@src/CONST';
diff --git a/src/components/EmojiSuggestions.tsx b/src/components/EmojiSuggestions.tsx
index 01f840677e5e..c35bd1d1e824 100644
--- a/src/components/EmojiSuggestions.tsx
+++ b/src/components/EmojiSuggestions.tsx
@@ -1,9 +1,9 @@
 import React, {ReactElement, useCallback} from 'react';
 import {View} from 'react-native';
+import useStyleUtils from '@hooks/useStyleUtils';
 import type {SimpleEmoji} from '@libs/EmojiTrie';
 import * as EmojiUtils from '@libs/EmojiUtils';
 import getStyledTextArray from '@libs/GetStyledTextArray';
-import useStyleUtils from '@styles/useStyleUtils';
 import useThemeStyles from '@styles/useThemeStyles';
 import AutoCompleteSuggestions from './AutoCompleteSuggestions';
 import Text from './Text';
diff --git a/src/components/ExpensifyWordmark.tsx b/src/components/ExpensifyWordmark.tsx
index 307de4af10b5..e8300852a374 100644
--- a/src/components/ExpensifyWordmark.tsx
+++ b/src/components/ExpensifyWordmark.tsx
@@ -5,8 +5,8 @@ import DevLogo from '@assets/images/expensify-logo--dev.svg';
 import StagingLogo from '@assets/images/expensify-logo--staging.svg';
 import ProductionLogo from '@assets/images/expensify-wordmark.svg';
 import useEnvironment from '@hooks/useEnvironment';
+import useStyleUtils from '@hooks/useStyleUtils';
 import useTheme from '@styles/theme/useTheme';
-import useStyleUtils from '@styles/useStyleUtils';
 import useThemeStyles from '@styles/useThemeStyles';
 import variables from '@styles/variables';
 import CONST from '@src/CONST';
diff --git a/src/components/GrowlNotification/GrowlNotificationContainer/index.native.js b/src/components/GrowlNotification/GrowlNotificationContainer/index.native.js
index 457a9dce66d9..234496644215 100644
--- a/src/components/GrowlNotification/GrowlNotificationContainer/index.native.js
+++ b/src/components/GrowlNotification/GrowlNotificationContainer/index.native.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import {Animated} from 'react-native';
 import useSafeAreaInsets from '@hooks/useSafeAreaInsets';
-import useStyleUtils from '@styles/useStyleUtils';
+import useStyleUtils from '@hooks/useStyleUtils';
 import useThemeStyles from '@styles/useThemeStyles';
 import growlNotificationContainerPropTypes from './growlNotificationContainerPropTypes';
 
diff --git a/src/components/HTMLEngineProvider/HTMLRenderers/CodeRenderer.js b/src/components/HTMLEngineProvider/HTMLRenderers/CodeRenderer.js
index 9d101b8a5190..1932eaaf8a4f 100644
--- a/src/components/HTMLEngineProvider/HTMLRenderers/CodeRenderer.js
+++ b/src/components/HTMLEngineProvider/HTMLRenderers/CodeRenderer.js
@@ -3,7 +3,7 @@ import {splitBoxModelStyle} from 'react-native-render-html';
 import _ from 'underscore';
 import * as HTMLEngineUtils from '@components/HTMLEngineProvider/htmlEngineUtils';
 import InlineCodeBlock from '@components/InlineCodeBlock';
-import useStyleUtils from '@styles/useStyleUtils';
+import useStyleUtils from '@hooks/useStyleUtils';
 import htmlRendererPropTypes from './htmlRendererPropTypes';
 
 function CodeRenderer(props) {
diff --git a/src/components/HTMLEngineProvider/HTMLRenderers/MentionHereRenderer.js b/src/components/HTMLEngineProvider/HTMLRenderers/MentionHereRenderer.js
index 82769598d84a..93ede229876d 100644
--- a/src/components/HTMLEngineProvider/HTMLRenderers/MentionHereRenderer.js
+++ b/src/components/HTMLEngineProvider/HTMLRenderers/MentionHereRenderer.js
@@ -2,7 +2,7 @@ import React from 'react';
 import {TNodeChildrenRenderer} from 'react-native-render-html';
 import _ from 'underscore';
 import Text from '@components/Text';
-import useStyleUtils from '@styles/useStyleUtils';
+import useStyleUtils from '@hooks/useStyleUtils';
 import htmlRendererPropTypes from './htmlRendererPropTypes';
 
 function MentionHereRenderer(props) {
diff --git a/src/components/HTMLEngineProvider/HTMLRenderers/MentionUserRenderer.js b/src/components/HTMLEngineProvider/HTMLRenderers/MentionUserRenderer.js
index fbdacb6b47b0..34dd731ab17c 100644
--- a/src/components/HTMLEngineProvider/HTMLRenderers/MentionUserRenderer.js
+++ b/src/components/HTMLEngineProvider/HTMLRenderers/MentionUserRenderer.js
@@ -8,12 +8,12 @@ import Text from '@components/Text';
 import UserDetailsTooltip from '@components/UserDetailsTooltip';
 import withCurrentUserPersonalDetails from '@components/withCurrentUserPersonalDetails';
 import useLocalize from '@hooks/useLocalize';
+import useStyleUtils from '@hooks/useStyleUtils';
 import * as LocalePhoneNumber from '@libs/LocalePhoneNumber';
 import Navigation from '@libs/Navigation/Navigation';
 import * as PersonalDetailsUtils from '@libs/PersonalDetailsUtils';
 import * as ReportUtils from '@libs/ReportUtils';
 import personalDetailsPropType from '@pages/personalDetailsPropType';
-import useStyleUtils from '@styles/useStyleUtils';
 import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 import ROUTES from '@src/ROUTES';
diff --git a/src/components/HeaderPageLayout.js b/src/components/HeaderPageLayout.js
index 9b7eb843d430..d1d8f5ad5f9c 100644
--- a/src/components/HeaderPageLayout.js
+++ b/src/components/HeaderPageLayout.js
@@ -3,10 +3,10 @@ import React, {useMemo} from 'react';
 import {ScrollView, View} from 'react-native';
 import _ from 'underscore';
 import useNetwork from '@hooks/useNetwork';
+import useStyleUtils from '@hooks/useStyleUtils';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import * as Browser from '@libs/Browser';
 import useTheme from '@styles/theme/useTheme';
-import useStyleUtils from '@styles/useStyleUtils';
 import useThemeStyles from '@styles/useThemeStyles';
 import FixedFooter from './FixedFooter';
 import HeaderWithBackButton from './HeaderWithBackButton';
diff --git a/src/components/HeaderWithBackButton/index.js b/src/components/HeaderWithBackButton/index.js
index aa73ab2d3327..9647546a0837 100755
--- a/src/components/HeaderWithBackButton/index.js
+++ b/src/components/HeaderWithBackButton/index.js
@@ -10,11 +10,11 @@ import ThreeDotsMenu from '@components/ThreeDotsMenu';
 import Tooltip from '@components/Tooltip';
 import useKeyboardState from '@hooks/useKeyboardState';
 import useLocalize from '@hooks/useLocalize';
+import useStyleUtils from '@hooks/useStyleUtils';
 import useThrottledButtonState from '@hooks/useThrottledButtonState';
 import useWaitForNavigation from '@hooks/useWaitForNavigation';
 import getButtonState from '@libs/getButtonState';
 import Navigation from '@libs/Navigation/Navigation';
-import useStyleUtils from '@styles/useStyleUtils';
 import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 import ROUTES from '@src/ROUTES';
diff --git a/src/components/ImageView/index.js b/src/components/ImageView/index.js
index 1fd81277b545..a47e637e92f7 100644
--- a/src/components/ImageView/index.js
+++ b/src/components/ImageView/index.js
@@ -4,8 +4,8 @@ import {View} from 'react-native';
 import FullscreenLoadingIndicator from '@components/FullscreenLoadingIndicator';
 import Image from '@components/Image';
 import PressableWithoutFeedback from '@components/Pressable/PressableWithoutFeedback';
+import useStyleUtils from '@hooks/useStyleUtils';
 import * as DeviceCapabilities from '@libs/DeviceCapabilities';
-import useStyleUtils from '@styles/useStyleUtils';
 import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 
diff --git a/src/components/LHNOptionsList/OptionRowLHN.js b/src/components/LHNOptionsList/OptionRowLHN.js
index 504407f2df3e..3e9d2c6f6ec0 100644
--- a/src/components/LHNOptionsList/OptionRowLHN.js
+++ b/src/components/LHNOptionsList/OptionRowLHN.js
@@ -15,6 +15,7 @@ import SubscriptAvatar from '@components/SubscriptAvatar';
 import Text from '@components/Text';
 import Tooltip from '@components/Tooltip';
 import useLocalize from '@hooks/useLocalize';
+import useStyleUtils from '@hooks/useStyleUtils';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import DateUtils from '@libs/DateUtils';
 import DomUtils from '@libs/DomUtils';
@@ -25,7 +26,6 @@ import * as ReportUtils from '@libs/ReportUtils';
 import * as ContextMenuActions from '@pages/home/report/ContextMenu/ContextMenuActions';
 import * as ReportActionContextMenu from '@pages/home/report/ContextMenu/ReportActionContextMenu';
 import useTheme from '@styles/theme/useTheme';
-import useStyleUtils from '@styles/useStyleUtils';
 import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 
diff --git a/src/components/LocationErrorMessage/BaseLocationErrorMessage.js b/src/components/LocationErrorMessage/BaseLocationErrorMessage.js
index a86cb8bd7bd9..807b99777972 100644
--- a/src/components/LocationErrorMessage/BaseLocationErrorMessage.js
+++ b/src/components/LocationErrorMessage/BaseLocationErrorMessage.js
@@ -8,8 +8,8 @@ import Text from '@components/Text';
 import TextLink from '@components/TextLink';
 import Tooltip from '@components/Tooltip';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
+import useStyleUtils from '@hooks/useStyleUtils';
 import colors from '@styles/colors';
-import useStyleUtils from '@styles/useStyleUtils';
 import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 import * as locationErrorMessagePropTypes from './locationErrorMessagePropTypes';
diff --git a/src/components/MagicCodeInput.js b/src/components/MagicCodeInput.js
index 91430602a115..b89b093ffdd7 100644
--- a/src/components/MagicCodeInput.js
+++ b/src/components/MagicCodeInput.js
@@ -4,9 +4,9 @@ import {StyleSheet, View} from 'react-native';
 import {TapGestureHandler} from 'react-native-gesture-handler';
 import _ from 'underscore';
 import useNetwork from '@hooks/useNetwork';
+import useStyleUtils from '@hooks/useStyleUtils';
 import * as Browser from '@libs/Browser';
 import * as ValidationUtils from '@libs/ValidationUtils';
-import useStyleUtils from '@styles/useStyleUtils';
 import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 import FormHelpMessage from './FormHelpMessage';
diff --git a/src/components/MapView/MapView.website.tsx b/src/components/MapView/MapView.website.tsx
index c3521897e93e..36785af0abe0 100644
--- a/src/components/MapView/MapView.website.tsx
+++ b/src/components/MapView/MapView.website.tsx
@@ -9,8 +9,8 @@ import React, {forwardRef, useCallback, useEffect, useImperativeHandle, useState
 import Map, {MapRef, Marker} from 'react-map-gl';
 import {View} from 'react-native';
 import {withOnyx} from 'react-native-onyx';
+import useStyleUtils from '@hooks/useStyleUtils';
 import useTheme from '@styles/theme/useTheme';
-import useStyleUtils from '@styles/useStyleUtils';
 import useThemeStyles from '@styles/useThemeStyles';
 import setUserLocation from '@userActions/UserLocation';
 import CONST from '@src/CONST';
diff --git a/src/components/MentionSuggestions.tsx b/src/components/MentionSuggestions.tsx
index 33e23ee2c148..6fff35b61942 100644
--- a/src/components/MentionSuggestions.tsx
+++ b/src/components/MentionSuggestions.tsx
@@ -1,8 +1,8 @@
 import React, {useCallback} from 'react';
 import {View} from 'react-native';
+import useStyleUtils from '@hooks/useStyleUtils';
 import getStyledTextArray from '@libs/GetStyledTextArray';
 import useTheme from '@styles/theme/useTheme';
-import useStyleUtils from '@styles/useStyleUtils';
 import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 import {Icon} from '@src/types/onyx/OnyxCommon';
diff --git a/src/components/MenuItem.js b/src/components/MenuItem.js
index 9df5680fdd04..d9c9744654c7 100644
--- a/src/components/MenuItem.js
+++ b/src/components/MenuItem.js
@@ -2,13 +2,13 @@ import ExpensiMark from 'expensify-common/lib/ExpensiMark';
 import React, {useEffect, useMemo} from 'react';
 import {View} from 'react-native';
 import _ from 'underscore';
+import useStyleUtils from '@hooks/useStyleUtils';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import ControlSelection from '@libs/ControlSelection';
 import convertToLTR from '@libs/convertToLTR';
 import * as DeviceCapabilities from '@libs/DeviceCapabilities';
 import getButtonState from '@libs/getButtonState';
 import useTheme from '@styles/theme/useTheme';
-import useStyleUtils from '@styles/useStyleUtils';
 import useThemeStyles from '@styles/useThemeStyles';
 import variables from '@styles/variables';
 import * as Session from '@userActions/Session';
diff --git a/src/components/MessagesRow.js b/src/components/MessagesRow.js
index a22f9724ed89..311a9c70ee7a 100644
--- a/src/components/MessagesRow.js
+++ b/src/components/MessagesRow.js
@@ -3,8 +3,8 @@ import React from 'react';
 import {View} from 'react-native';
 import _ from 'underscore';
 import useLocalize from '@hooks/useLocalize';
+import useStyleUtils from '@hooks/useStyleUtils';
 import stylePropTypes from '@styles/stylePropTypes';
-import useStyleUtils from '@styles/useStyleUtils';
 import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 import DotIndicatorMessage from './DotIndicatorMessage';
diff --git a/src/components/Modal/BaseModal.tsx b/src/components/Modal/BaseModal.tsx
index eb90a7a838f1..3911094b9dd8 100644
--- a/src/components/Modal/BaseModal.tsx
+++ b/src/components/Modal/BaseModal.tsx
@@ -4,11 +4,11 @@ import ReactNativeModal from 'react-native-modal';
 import ColorSchemeWrapper from '@components/ColorSchemeWrapper';
 import usePrevious from '@hooks/usePrevious';
 import useSafeAreaInsets from '@hooks/useSafeAreaInsets';
+import useStyleUtils from '@hooks/useStyleUtils';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import ComposerFocusManager from '@libs/ComposerFocusManager';
 import useNativeDriver from '@libs/useNativeDriver';
 import useTheme from '@styles/theme/useTheme';
-import useStyleUtils from '@styles/useStyleUtils';
 import useThemeStyles from '@styles/useThemeStyles';
 import variables from '@styles/variables';
 import * as Modal from '@userActions/Modal';
diff --git a/src/components/Modal/index.tsx b/src/components/Modal/index.tsx
index 55745761189e..206455573778 100644
--- a/src/components/Modal/index.tsx
+++ b/src/components/Modal/index.tsx
@@ -1,8 +1,8 @@
 import React, {useState} from 'react';
 import withWindowDimensions from '@components/withWindowDimensions';
+import useStyleUtils from '@hooks/useStyleUtils';
 import StatusBar from '@libs/StatusBar';
 import useTheme from '@styles/theme/useTheme';
-import useStyleUtils from '@styles/useStyleUtils';
 import CONST from '@src/CONST';
 import BaseModal from './BaseModal';
 import BaseModalProps from './types';
diff --git a/src/components/MultipleAvatars.tsx b/src/components/MultipleAvatars.tsx
index a15a579c9d5d..2b96e4f8e725 100644
--- a/src/components/MultipleAvatars.tsx
+++ b/src/components/MultipleAvatars.tsx
@@ -1,9 +1,9 @@
 import React, {memo, useMemo} from 'react';
 import {StyleProp, View, ViewStyle} from 'react-native';
 import {ValueOf} from 'type-fest';
+import useStyleUtils from '@hooks/useStyleUtils';
 import {AvatarSource} from '@libs/UserUtils';
 import useTheme from '@styles/theme/useTheme';
-import useStyleUtils from '@styles/useStyleUtils';
 import useThemeStyles from '@styles/useThemeStyles';
 import variables from '@styles/variables';
 import CONST from '@src/CONST';
diff --git a/src/components/OfflineWithFeedback.js b/src/components/OfflineWithFeedback.js
index 5fb6b93d7f98..f4e2d2cdb2d5 100644
--- a/src/components/OfflineWithFeedback.js
+++ b/src/components/OfflineWithFeedback.js
@@ -3,9 +3,9 @@ import React, {useCallback} from 'react';
 import {View} from 'react-native';
 import _ from 'underscore';
 import useNetwork from '@hooks/useNetwork';
+import useStyleUtils from '@hooks/useStyleUtils';
 import shouldRenderOffscreen from '@libs/shouldRenderOffscreen';
 import stylePropTypes from '@styles/stylePropTypes';
-import useStyleUtils from '@styles/useStyleUtils';
 import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 import MessagesRow from './MessagesRow';
diff --git a/src/components/OptionRow.js b/src/components/OptionRow.js
index b2a024e84258..4f277bf5450f 100644
--- a/src/components/OptionRow.js
+++ b/src/components/OptionRow.js
@@ -3,10 +3,10 @@ import PropTypes from 'prop-types';
 import React, {useEffect, useRef, useState} from 'react';
 import {InteractionManager, StyleSheet, View} from 'react-native';
 import _ from 'underscore';
+import useStyleUtils from '@hooks/useStyleUtils';
 import * as OptionsListUtils from '@libs/OptionsListUtils';
 import * as ReportUtils from '@libs/ReportUtils';
 import useTheme from '@styles/theme/useTheme';
-import useStyleUtils from '@styles/useStyleUtils';
 import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 import Button from './Button';
diff --git a/src/components/PopoverWithoutOverlay/index.js b/src/components/PopoverWithoutOverlay/index.js
index c13d9e1a0931..8da514f3d7ab 100644
--- a/src/components/PopoverWithoutOverlay/index.js
+++ b/src/components/PopoverWithoutOverlay/index.js
@@ -5,7 +5,7 @@ import {defaultProps, propTypes} from '@components/Popover/popoverPropTypes';
 import {PopoverContext} from '@components/PopoverProvider';
 import withWindowDimensions from '@components/withWindowDimensions';
 import useSafeAreaInsets from '@hooks/useSafeAreaInsets';
-import useStyleUtils from '@styles/useStyleUtils';
+import useStyleUtils from '@hooks/useStyleUtils';
 import useThemeStyles from '@styles/useThemeStyles';
 import * as Modal from '@userActions/Modal';
 
diff --git a/src/components/Pressable/GenericPressable/BaseGenericPressable.tsx b/src/components/Pressable/GenericPressable/BaseGenericPressable.tsx
index 0d0ed33d5138..604b52de923a 100644
--- a/src/components/Pressable/GenericPressable/BaseGenericPressable.tsx
+++ b/src/components/Pressable/GenericPressable/BaseGenericPressable.tsx
@@ -2,10 +2,10 @@ import React, {ForwardedRef, forwardRef, useCallback, useEffect, useMemo} from '
 // eslint-disable-next-line no-restricted-imports
 import {GestureResponderEvent, Pressable, View} from 'react-native';
 import useSingleExecution from '@hooks/useSingleExecution';
+import useStyleUtils from '@hooks/useStyleUtils';
 import Accessibility from '@libs/Accessibility';
 import HapticFeedback from '@libs/HapticFeedback';
 import KeyboardShortcut from '@libs/KeyboardShortcut';
-import useStyleUtils from '@styles/useStyleUtils';
 import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 import PressableProps, {PressableRef} from './types';
diff --git a/src/components/Pressable/PressableWithDelayToggle.tsx b/src/components/Pressable/PressableWithDelayToggle.tsx
index 6237ce3e4660..91121719ef8d 100644
--- a/src/components/Pressable/PressableWithDelayToggle.tsx
+++ b/src/components/Pressable/PressableWithDelayToggle.tsx
@@ -6,9 +6,9 @@ import Icon from '@components/Icon';
 import * as Expensicons from '@components/Icon/Expensicons';
 import Text from '@components/Text';
 import Tooltip from '@components/Tooltip';
+import useStyleUtils from '@hooks/useStyleUtils';
 import useThrottledButtonState from '@hooks/useThrottledButtonState';
 import getButtonState from '@libs/getButtonState';
-import useStyleUtils from '@styles/useStyleUtils';
 import useThemeStyles from '@styles/useThemeStyles';
 import variables from '@styles/variables';
 import PressableProps, {PressableRef} from './GenericPressable/types';
diff --git a/src/components/PressableWithSecondaryInteraction/index.tsx b/src/components/PressableWithSecondaryInteraction/index.tsx
index 437123dbe952..1bba85043170 100644
--- a/src/components/PressableWithSecondaryInteraction/index.tsx
+++ b/src/components/PressableWithSecondaryInteraction/index.tsx
@@ -2,8 +2,8 @@ import React, {forwardRef, useEffect, useRef} from 'react';
 import {GestureResponderEvent} from 'react-native';
 import {PressableRef} from '@components/Pressable/GenericPressable/types';
 import PressableWithFeedback from '@components/Pressable/PressableWithFeedback';
+import useStyleUtils from '@hooks/useStyleUtils';
 import * as DeviceCapabilities from '@libs/DeviceCapabilities';
-import useStyleUtils from '@styles/useStyleUtils';
 import useThemeStyles from '@styles/useThemeStyles';
 import PressableWithSecondaryInteractionProps from './types';
 
diff --git a/src/components/Reactions/AddReactionBubble.js b/src/components/Reactions/AddReactionBubble.js
index 994d467dfd6e..a68bc1a6d132 100644
--- a/src/components/Reactions/AddReactionBubble.js
+++ b/src/components/Reactions/AddReactionBubble.js
@@ -7,8 +7,8 @@ import PressableWithFeedback from '@components/Pressable/PressableWithFeedback';
 import Text from '@components/Text';
 import Tooltip from '@components/Tooltip/PopoverAnchorTooltip';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
+import useStyleUtils from '@hooks/useStyleUtils';
 import getButtonState from '@libs/getButtonState';
-import useStyleUtils from '@styles/useStyleUtils';
 import useThemeStyles from '@styles/useThemeStyles';
 import variables from '@styles/variables';
 import * as EmojiPickerAction from '@userActions/EmojiPickerAction';
diff --git a/src/components/Reactions/EmojiReactionBubble.js b/src/components/Reactions/EmojiReactionBubble.js
index 7fcdae8c0a5a..c8474d1b2c38 100644
--- a/src/components/Reactions/EmojiReactionBubble.js
+++ b/src/components/Reactions/EmojiReactionBubble.js
@@ -4,7 +4,7 @@ import PressableWithSecondaryInteraction from '@components/PressableWithSecondar
 import Text from '@components/Text';
 import {withCurrentUserPersonalDetailsDefaultProps} from '@components/withCurrentUserPersonalDetails';
 import withWindowDimensions, {windowDimensionsPropTypes} from '@components/withWindowDimensions';
-import useStyleUtils from '@styles/useStyleUtils';
+import useStyleUtils from '@hooks/useStyleUtils';
 import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 
diff --git a/src/components/Reactions/MiniQuickEmojiReactions.js b/src/components/Reactions/MiniQuickEmojiReactions.js
index 92913a7c4c5e..99b10ffa2bc9 100644
--- a/src/components/Reactions/MiniQuickEmojiReactions.js
+++ b/src/components/Reactions/MiniQuickEmojiReactions.js
@@ -8,10 +8,10 @@ import Icon from '@components/Icon';
 import * as Expensicons from '@components/Icon/Expensicons';
 import Text from '@components/Text';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
+import useStyleUtils from '@hooks/useStyleUtils';
 import compose from '@libs/compose';
 import * as EmojiUtils from '@libs/EmojiUtils';
 import getButtonState from '@libs/getButtonState';
-import useStyleUtils from '@styles/useStyleUtils';
 import useThemeStyles from '@styles/useThemeStyles';
 import * as EmojiPickerAction from '@userActions/EmojiPickerAction';
 import * as Session from '@userActions/Session';
diff --git a/src/components/ReportActionItem/MoneyReportView.js b/src/components/ReportActionItem/MoneyReportView.js
index 3c135969988e..6977ece0ff19 100644
--- a/src/components/ReportActionItem/MoneyReportView.js
+++ b/src/components/ReportActionItem/MoneyReportView.js
@@ -7,12 +7,12 @@ import SpacerView from '@components/SpacerView';
 import Text from '@components/Text';
 import withWindowDimensions, {windowDimensionsPropTypes} from '@components/withWindowDimensions';
 import useLocalize from '@hooks/useLocalize';
+import useStyleUtils from '@hooks/useStyleUtils';
 import * as CurrencyUtils from '@libs/CurrencyUtils';
 import * as ReportUtils from '@libs/ReportUtils';
 import AnimatedEmptyStateBackground from '@pages/home/report/AnimatedEmptyStateBackground';
 import reportPropTypes from '@pages/reportPropTypes';
 import useTheme from '@styles/theme/useTheme';
-import useStyleUtils from '@styles/useStyleUtils';
 import useThemeStyles from '@styles/useThemeStyles';
 import variables from '@styles/variables';
 
diff --git a/src/components/ReportActionItem/MoneyRequestPreview.js b/src/components/ReportActionItem/MoneyRequestPreview.js
index bfd1a876e5f5..3658018299e8 100644
--- a/src/components/ReportActionItem/MoneyRequestPreview.js
+++ b/src/components/ReportActionItem/MoneyRequestPreview.js
@@ -15,6 +15,7 @@ import {showContextMenuForReport} from '@components/ShowContextMenuContext';
 import Text from '@components/Text';
 import transactionPropTypes from '@components/transactionPropTypes';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
+import useStyleUtils from '@hooks/useStyleUtils';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import compose from '@libs/compose';
 import ControlSelection from '@libs/ControlSelection';
@@ -29,7 +30,6 @@ import * as TransactionUtils from '@libs/TransactionUtils';
 import walletTermsPropTypes from '@pages/EnablePayments/walletTermsPropTypes';
 import reportActionPropTypes from '@pages/home/report/reportActionPropTypes';
 import useTheme from '@styles/theme/useTheme';
-import useStyleUtils from '@styles/useStyleUtils';
 import useThemeStyles from '@styles/useThemeStyles';
 import * as PaymentMethods from '@userActions/PaymentMethods';
 import * as Report from '@userActions/Report';
diff --git a/src/components/ReportActionItem/MoneyRequestView.js b/src/components/ReportActionItem/MoneyRequestView.js
index c4f138152ada..db3f8c6eeba4 100644
--- a/src/components/ReportActionItem/MoneyRequestView.js
+++ b/src/components/ReportActionItem/MoneyRequestView.js
@@ -17,6 +17,7 @@ import transactionPropTypes from '@components/transactionPropTypes';
 import withCurrentUserPersonalDetails, {withCurrentUserPersonalDetailsPropTypes} from '@components/withCurrentUserPersonalDetails';
 import useLocalize from '@hooks/useLocalize';
 import usePermissions from '@hooks/usePermissions';
+import useStyleUtils from '@hooks/useStyleUtils';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import * as CardUtils from '@libs/CardUtils';
 import compose from '@libs/compose';
@@ -33,7 +34,6 @@ import reportActionPropTypes from '@pages/home/report/reportActionPropTypes';
 import iouReportPropTypes from '@pages/iouReportPropTypes';
 import reportPropTypes from '@pages/reportPropTypes';
 import useTheme from '@styles/theme/useTheme';
-import useStyleUtils from '@styles/useStyleUtils';
 import useThemeStyles from '@styles/useThemeStyles';
 import * as IOU from '@userActions/IOU';
 import CONST from '@src/CONST';
diff --git a/src/components/ReportActionItem/ReportActionItemImages.js b/src/components/ReportActionItem/ReportActionItemImages.js
index 372a7c0497a9..bcd9c62ee67f 100644
--- a/src/components/ReportActionItem/ReportActionItemImages.js
+++ b/src/components/ReportActionItem/ReportActionItemImages.js
@@ -5,8 +5,8 @@ import {Polygon, Svg} from 'react-native-svg';
 import _ from 'underscore';
 import Text from '@components/Text';
 import transactionPropTypes from '@components/transactionPropTypes';
+import useStyleUtils from '@hooks/useStyleUtils';
 import useTheme from '@styles/theme/useTheme';
-import useStyleUtils from '@styles/useStyleUtils';
 import useThemeStyles from '@styles/useThemeStyles';
 import variables from '@styles/variables';
 import ReportActionItemImage from './ReportActionItemImage';
diff --git a/src/components/ReportActionItem/TaskPreview.js b/src/components/ReportActionItem/TaskPreview.js
index 5d1c9972666a..48fd1d86cfe0 100644
--- a/src/components/ReportActionItem/TaskPreview.js
+++ b/src/components/ReportActionItem/TaskPreview.js
@@ -14,6 +14,7 @@ import RenderHTML from '@components/RenderHTML';
 import {showContextMenuForReport} from '@components/ShowContextMenuContext';
 import withCurrentUserPersonalDetails, {withCurrentUserPersonalDetailsDefaultProps, withCurrentUserPersonalDetailsPropTypes} from '@components/withCurrentUserPersonalDetails';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
+import useStyleUtils from '@hooks/useStyleUtils';
 import compose from '@libs/compose';
 import ControlSelection from '@libs/ControlSelection';
 import * as DeviceCapabilities from '@libs/DeviceCapabilities';
@@ -22,7 +23,6 @@ import * as LocalePhoneNumber from '@libs/LocalePhoneNumber';
 import Navigation from '@libs/Navigation/Navigation';
 import * as ReportUtils from '@libs/ReportUtils';
 import reportActionPropTypes from '@pages/home/report/reportActionPropTypes';
-import useStyleUtils from '@styles/useStyleUtils';
 import useThemeStyles from '@styles/useThemeStyles';
 import * as Session from '@userActions/Session';
 import * as Task from '@userActions/Task';
diff --git a/src/components/ReportActionItem/TaskView.js b/src/components/ReportActionItem/TaskView.js
index ea02dba705a6..f2e76e035b2f 100644
--- a/src/components/ReportActionItem/TaskView.js
+++ b/src/components/ReportActionItem/TaskView.js
@@ -17,6 +17,7 @@ import Text from '@components/Text';
 import withCurrentUserPersonalDetails, {withCurrentUserPersonalDetailsPropTypes} from '@components/withCurrentUserPersonalDetails';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
 import withWindowDimensions from '@components/withWindowDimensions';
+import useStyleUtils from '@hooks/useStyleUtils';
 import compose from '@libs/compose';
 import convertToLTR from '@libs/convertToLTR';
 import getButtonState from '@libs/getButtonState';
@@ -24,7 +25,6 @@ import Navigation from '@libs/Navigation/Navigation';
 import * as OptionsListUtils from '@libs/OptionsListUtils';
 import * as ReportUtils from '@libs/ReportUtils';
 import reportPropTypes from '@pages/reportPropTypes';
-import useStyleUtils from '@styles/useStyleUtils';
 import useThemeStyles from '@styles/useThemeStyles';
 import * as Session from '@userActions/Session';
 import * as Task from '@userActions/Task';
diff --git a/src/components/RoomHeaderAvatars.js b/src/components/RoomHeaderAvatars.js
index 06cbd735b204..dc9625c63fc5 100644
--- a/src/components/RoomHeaderAvatars.js
+++ b/src/components/RoomHeaderAvatars.js
@@ -2,9 +2,9 @@ import PropTypes from 'prop-types';
 import React, {memo} from 'react';
 import {View} from 'react-native';
 import _ from 'underscore';
+import useStyleUtils from '@hooks/useStyleUtils';
 import * as UserUtils from '@libs/UserUtils';
 import useTheme from '@styles/theme/useTheme';
-import useStyleUtils from '@styles/useStyleUtils';
 import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 import AttachmentModal from './AttachmentModal';
diff --git a/src/components/SafeAreaConsumer/index.android.tsx b/src/components/SafeAreaConsumer/index.android.tsx
index 5117000627cf..4e6c9bbd3528 100644
--- a/src/components/SafeAreaConsumer/index.android.tsx
+++ b/src/components/SafeAreaConsumer/index.android.tsx
@@ -1,8 +1,8 @@
 import React from 'react';
 // eslint-disable-next-line no-restricted-imports
 import {SafeAreaInsetsContext} from 'react-native-safe-area-context';
+import useStyleUtils from '@hooks/useStyleUtils';
 import StatusBar from '@libs/StatusBar';
-import useStyleUtils from '@styles/useStyleUtils';
 import SafeAreaConsumerProps from './types';
 
 /**
diff --git a/src/components/SafeAreaConsumer/index.tsx b/src/components/SafeAreaConsumer/index.tsx
index 54c5d984be5f..c05e836a2348 100644
--- a/src/components/SafeAreaConsumer/index.tsx
+++ b/src/components/SafeAreaConsumer/index.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 // eslint-disable-next-line no-restricted-imports
 import {SafeAreaInsetsContext} from 'react-native-safe-area-context';
-import useStyleUtils from '@styles/useStyleUtils';
+import useStyleUtils from '@hooks/useStyleUtils';
 import SafeAreaConsumerProps from './types';
 
 /**
diff --git a/src/components/SelectionList/BaseListItem.js b/src/components/SelectionList/BaseListItem.js
index ea451ad3c3fe..3c55e39eec23 100644
--- a/src/components/SelectionList/BaseListItem.js
+++ b/src/components/SelectionList/BaseListItem.js
@@ -7,8 +7,8 @@ import OfflineWithFeedback from '@components/OfflineWithFeedback';
 import PressableWithFeedback from '@components/Pressable/PressableWithFeedback';
 import Text from '@components/Text';
 import useLocalize from '@hooks/useLocalize';
+import useStyleUtils from '@hooks/useStyleUtils';
 import useTheme from '@styles/theme/useTheme';
-import useStyleUtils from '@styles/useStyleUtils';
 import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 import RadioListItem from './RadioListItem';
diff --git a/src/components/SpacerView.js b/src/components/SpacerView.js
index b9705a15b5f3..6b3ece2d476f 100644
--- a/src/components/SpacerView.js
+++ b/src/components/SpacerView.js
@@ -2,8 +2,8 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import Animated, {useAnimatedStyle, useSharedValue, withTiming} from 'react-native-reanimated';
 import usePrevious from '@hooks/usePrevious';
+import useStyleUtils from '@hooks/useStyleUtils';
 import stylePropTypes from '@styles/stylePropTypes';
-import useStyleUtils from '@styles/useStyleUtils';
 import CONST from '@src/CONST';
 
 const propTypes = {
diff --git a/src/components/SubscriptAvatar.tsx b/src/components/SubscriptAvatar.tsx
index ac32cf91e520..8a4eddfa0bfa 100644
--- a/src/components/SubscriptAvatar.tsx
+++ b/src/components/SubscriptAvatar.tsx
@@ -1,9 +1,9 @@
 import React, {memo} from 'react';
 import {View} from 'react-native';
 import {ValueOf} from 'type-fest';
+import useStyleUtils from '@hooks/useStyleUtils';
 import type {AvatarSource} from '@libs/UserUtils';
 import useTheme from '@styles/theme/useTheme';
-import useStyleUtils from '@styles/useStyleUtils';
 import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 import {AvatarType} from '@src/types/onyx/OnyxCommon';
diff --git a/src/components/TagPicker/index.js b/src/components/TagPicker/index.js
index 334ca3e38370..410510b80f7e 100644
--- a/src/components/TagPicker/index.js
+++ b/src/components/TagPicker/index.js
@@ -4,9 +4,9 @@ import {withOnyx} from 'react-native-onyx';
 import _ from 'underscore';
 import OptionsSelector from '@components/OptionsSelector';
 import useLocalize from '@hooks/useLocalize';
+import useStyleUtils from '@hooks/useStyleUtils';
 import * as OptionsListUtils from '@libs/OptionsListUtils';
 import * as PolicyUtils from '@libs/PolicyUtils';
-import useStyleUtils from '@styles/useStyleUtils';
 import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
diff --git a/src/components/TextInput/BaseTextInput/index.js b/src/components/TextInput/BaseTextInput/index.js
index 65c186564f68..1734ecb2ccdc 100644
--- a/src/components/TextInput/BaseTextInput/index.js
+++ b/src/components/TextInput/BaseTextInput/index.js
@@ -13,11 +13,11 @@ import Text from '@components/Text';
 import * as styleConst from '@components/TextInput/styleConst';
 import TextInputLabel from '@components/TextInput/TextInputLabel';
 import withLocalize from '@components/withLocalize';
+import useStyleUtils from '@hooks/useStyleUtils';
 import * as Browser from '@libs/Browser';
 import isInputAutoFilled from '@libs/isInputAutoFilled';
 import useNativeDriver from '@libs/useNativeDriver';
 import useTheme from '@styles/theme/useTheme';
-import useStyleUtils from '@styles/useStyleUtils';
 import useThemeStyles from '@styles/useThemeStyles';
 import variables from '@styles/variables';
 import CONST from '@src/CONST';
diff --git a/src/components/TextInput/BaseTextInput/index.native.js b/src/components/TextInput/BaseTextInput/index.native.js
index 888c7bc00577..9f5cc53cbd44 100644
--- a/src/components/TextInput/BaseTextInput/index.native.js
+++ b/src/components/TextInput/BaseTextInput/index.native.js
@@ -13,11 +13,11 @@ import Text from '@components/Text';
 import * as styleConst from '@components/TextInput/styleConst';
 import TextInputLabel from '@components/TextInput/TextInputLabel';
 import withLocalize from '@components/withLocalize';
+import useStyleUtils from '@hooks/useStyleUtils';
 import getSecureEntryKeyboardType from '@libs/getSecureEntryKeyboardType';
 import isInputAutoFilled from '@libs/isInputAutoFilled';
 import useNativeDriver from '@libs/useNativeDriver';
 import useTheme from '@styles/theme/useTheme';
-import useStyleUtils from '@styles/useStyleUtils';
 import useThemeStyles from '@styles/useThemeStyles';
 import variables from '@styles/variables';
 import CONST from '@src/CONST';
diff --git a/src/components/ThumbnailImage.tsx b/src/components/ThumbnailImage.tsx
index a4a200d96082..69bf7aec3df1 100644
--- a/src/components/ThumbnailImage.tsx
+++ b/src/components/ThumbnailImage.tsx
@@ -1,9 +1,9 @@
 import lodashClamp from 'lodash/clamp';
 import React, {useCallback, useState} from 'react';
 import {Dimensions, StyleProp, View, ViewStyle} from 'react-native';
+import useStyleUtils from '@hooks/useStyleUtils';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import * as DeviceCapabilities from '@libs/DeviceCapabilities';
-import useStyleUtils from '@styles/useStyleUtils';
 import useThemeStyles from '@styles/useThemeStyles';
 import ImageWithSizeCalculation from './ImageWithSizeCalculation';
 
diff --git a/src/components/Tooltip/TooltipRenderedOnPageBody.js b/src/components/Tooltip/TooltipRenderedOnPageBody.js
index 10e82cc94c30..29c2c951f9d9 100644
--- a/src/components/Tooltip/TooltipRenderedOnPageBody.js
+++ b/src/components/Tooltip/TooltipRenderedOnPageBody.js
@@ -3,8 +3,8 @@ import React, {useEffect, useLayoutEffect, useMemo, useRef, useState} from 'reac
 import ReactDOM from 'react-dom';
 import {Animated, View} from 'react-native';
 import Text from '@components/Text';
+import useStyleUtils from '@hooks/useStyleUtils';
 import Log from '@libs/Log';
-import useStyleUtils from '@styles/useStyleUtils';
 
 const propTypes = {
     /** Window width */
diff --git a/src/components/ValuePicker/index.js b/src/components/ValuePicker/index.js
index 6eb20d1bde6a..f7e49792b88a 100644
--- a/src/components/ValuePicker/index.js
+++ b/src/components/ValuePicker/index.js
@@ -5,7 +5,7 @@ import {View} from 'react-native';
 import FormHelpMessage from '@components/FormHelpMessage';
 import MenuItemWithTopDescription from '@components/MenuItemWithTopDescription';
 import refPropTypes from '@components/refPropTypes';
-import useStyleUtils from '@styles/useStyleUtils';
+import useStyleUtils from '@hooks/useStyleUtils';
 import useThemeStyles from '@styles/useThemeStyles';
 import variables from '@styles/variables';
 import ValueSelectorModal from './ValueSelectorModal';
diff --git a/src/components/withStyleUtils.tsx b/src/components/withStyleUtils.tsx
index 6ea044fce70c..821587a1ae43 100644
--- a/src/components/withStyleUtils.tsx
+++ b/src/components/withStyleUtils.tsx
@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types';
 import React, {ComponentType, ForwardedRef, forwardRef, ReactElement, RefAttributes} from 'react';
+import useStyleUtils from '@hooks/useStyleUtils';
 import getComponentDisplayName from '@libs/getComponentDisplayName';
-import useStyleUtils from '@styles/useStyleUtils';
 import {StyleUtilsType} from '@styles/utils';
 
 const withStyleUtilsPropTypes = {
diff --git a/src/styles/useStyleUtils.ts b/src/hooks/useStyleUtils.ts
similarity index 84%
rename from src/styles/useStyleUtils.ts
rename to src/hooks/useStyleUtils.ts
index aadb3f884220..fff1919af587 100644
--- a/src/styles/useStyleUtils.ts
+++ b/src/hooks/useStyleUtils.ts
@@ -1,5 +1,5 @@
 import {useContext} from 'react';
-import ThemeStylesContext from './ThemeStylesContext';
+import ThemeStylesContext from '@styles/context/ThemeStylesContext';
 
 function useStyleUtils() {
     const themeStylesContext = useContext(ThemeStylesContext);
diff --git a/src/pages/ErrorPage/GenericErrorPage.js b/src/pages/ErrorPage/GenericErrorPage.js
index 3c04f7fd6dbd..7768f0ff8962 100644
--- a/src/pages/ErrorPage/GenericErrorPage.js
+++ b/src/pages/ErrorPage/GenericErrorPage.js
@@ -9,8 +9,8 @@ import SafeAreaConsumer from '@components/SafeAreaConsumer';
 import Text from '@components/Text';
 import TextLink from '@components/TextLink';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
+import useStyleUtils from '@hooks/useStyleUtils';
 import useTheme from '@styles/theme/useTheme';
-import useStyleUtils from '@styles/useStyleUtils';
 import useThemeStyles from '@styles/useThemeStyles';
 import variables from '@styles/variables';
 import * as Session from '@userActions/Session';
diff --git a/src/pages/home/report/AnimatedEmptyStateBackground.js b/src/pages/home/report/AnimatedEmptyStateBackground.js
index 0ff401a9d3f4..88af713d3e18 100644
--- a/src/pages/home/report/AnimatedEmptyStateBackground.js
+++ b/src/pages/home/report/AnimatedEmptyStateBackground.js
@@ -1,9 +1,9 @@
 import React from 'react';
 import Animated, {SensorType, useAnimatedSensor, useAnimatedStyle, useSharedValue, withSpring} from 'react-native-reanimated';
+import useStyleUtils from '@hooks/useStyleUtils';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import * as NumberUtils from '@libs/NumberUtils';
 import useThemeIllustrations from '@styles/illustrations/useThemeIllustrations';
-import useStyleUtils from '@styles/useStyleUtils';
 import variables from '@styles/variables';
 import CONST from '@src/CONST';
 
diff --git a/src/pages/home/report/ContextMenu/BaseReportActionContextMenu.js b/src/pages/home/report/ContextMenu/BaseReportActionContextMenu.js
index 33adfa4b35f9..0a9941072df7 100755
--- a/src/pages/home/report/ContextMenu/BaseReportActionContextMenu.js
+++ b/src/pages/home/report/ContextMenu/BaseReportActionContextMenu.js
@@ -11,8 +11,8 @@ import withWindowDimensions, {windowDimensionsPropTypes} from '@components/withW
 import useArrowKeyFocusManager from '@hooks/useArrowKeyFocusManager';
 import useKeyboardShortcut from '@hooks/useKeyboardShortcut';
 import useNetwork from '@hooks/useNetwork';
+import useStyleUtils from '@hooks/useStyleUtils';
 import compose from '@libs/compose';
-import useStyleUtils from '@styles/useStyleUtils';
 import * as Session from '@userActions/Session';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
diff --git a/src/pages/home/report/ContextMenu/MiniReportActionContextMenu/index.js b/src/pages/home/report/ContextMenu/MiniReportActionContextMenu/index.js
index f5a688e9d8ed..d858206cdfc3 100644
--- a/src/pages/home/report/ContextMenu/MiniReportActionContextMenu/index.js
+++ b/src/pages/home/report/ContextMenu/MiniReportActionContextMenu/index.js
@@ -2,12 +2,12 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import {View} from 'react-native';
 import _ from 'underscore';
+import useStyleUtils from '@hooks/useStyleUtils';
 import BaseReportActionContextMenu from '@pages/home/report/ContextMenu/BaseReportActionContextMenu';
 import {
     defaultProps as GenericReportActionContextMenuDefaultProps,
     propTypes as genericReportActionContextMenuPropTypes,
 } from '@pages/home/report/ContextMenu/genericReportActionContextMenuPropTypes';
-import useStyleUtils from '@styles/useStyleUtils';
 import CONST from '@src/CONST';
 
 const propTypes = {
diff --git a/src/pages/home/report/LinkPreviewer.js b/src/pages/home/report/LinkPreviewer.js
index 6c0518df67ae..a0d3666b36e4 100644
--- a/src/pages/home/report/LinkPreviewer.js
+++ b/src/pages/home/report/LinkPreviewer.js
@@ -5,8 +5,8 @@ import {Image, View} from 'react-native';
 import _ from 'underscore';
 import Text from '@components/Text';
 import TextLink from '@components/TextLink';
+import useStyleUtils from '@hooks/useStyleUtils';
 import useTheme from '@styles/theme/useTheme';
-import useStyleUtils from '@styles/useStyleUtils';
 import useThemeStyles from '@styles/useThemeStyles';
 import variables from '@styles/variables';
 
diff --git a/src/pages/home/report/ReactionList/HeaderReactionList.js b/src/pages/home/report/ReactionList/HeaderReactionList.js
index 1b1751e32eef..3c2886033630 100644
--- a/src/pages/home/report/ReactionList/HeaderReactionList.js
+++ b/src/pages/home/report/ReactionList/HeaderReactionList.js
@@ -4,9 +4,9 @@ import {View} from 'react-native';
 import Text from '@components/Text';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
 import withWindowDimensions, {windowDimensionsPropTypes} from '@components/withWindowDimensions';
+import useStyleUtils from '@hooks/useStyleUtils';
 import compose from '@libs/compose';
 import * as EmojiUtils from '@libs/EmojiUtils';
-import useStyleUtils from '@styles/useStyleUtils';
 import useThemeStyles from '@styles/useThemeStyles';
 import reactionPropTypes from './reactionPropTypes';
 
diff --git a/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.js b/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.js
index c19f74c14df7..4bbc16767255 100644
--- a/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.js
+++ b/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.js
@@ -9,6 +9,7 @@ import withKeyboardState from '@components/withKeyboardState';
 import useDebounce from '@hooks/useDebounce';
 import useLocalize from '@hooks/useLocalize';
 import usePrevious from '@hooks/usePrevious';
+import useStyleUtils from '@hooks/useStyleUtils';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import canFocusInputOnScreenFocus from '@libs/canFocusInputOnScreenFocus';
 import compose from '@libs/compose';
@@ -27,7 +28,6 @@ import willBlurTextInputOnTapOutsideFunc from '@libs/willBlurTextInputOnTapOutsi
 import SilentCommentUpdater from '@pages/home/report/ReportActionCompose/SilentCommentUpdater';
 import Suggestions from '@pages/home/report/ReportActionCompose/Suggestions';
 import useTheme from '@styles/theme/useTheme';
-import useStyleUtils from '@styles/useStyleUtils';
 import useThemeStyles from '@styles/useThemeStyles';
 import * as EmojiPickerActions from '@userActions/EmojiPickerAction';
 import * as InputFocus from '@userActions/InputFocus';
diff --git a/src/pages/home/report/ReportActionItem.js b/src/pages/home/report/ReportActionItem.js
index 5d908ba0ace8..cfcd34602aec 100644
--- a/src/pages/home/report/ReportActionItem.js
+++ b/src/pages/home/report/ReportActionItem.js
@@ -32,6 +32,7 @@ import UnreadActionIndicator from '@components/UnreadActionIndicator';
 import withLocalize from '@components/withLocalize';
 import withWindowDimensions, {windowDimensionsPropTypes} from '@components/withWindowDimensions';
 import usePrevious from '@hooks/usePrevious';
+import useStyleUtils from '@hooks/useStyleUtils';
 import compose from '@libs/compose';
 import ControlSelection from '@libs/ControlSelection';
 import * as CurrencyUtils from '@libs/CurrencyUtils';
@@ -47,7 +48,6 @@ import userWalletPropTypes from '@pages/EnablePayments/userWalletPropTypes';
 import {ReactionListContext} from '@pages/home/ReportScreenContext';
 import reportPropTypes from '@pages/reportPropTypes';
 import useTheme from '@styles/theme/useTheme';
-import useStyleUtils from '@styles/useStyleUtils';
 import useThemeStyles from '@styles/useThemeStyles';
 import * as BankAccounts from '@userActions/BankAccounts';
 import * as EmojiPickerAction from '@userActions/EmojiPickerAction';
diff --git a/src/pages/home/report/ReportActionItemCreated.js b/src/pages/home/report/ReportActionItemCreated.js
index 01857e2f2f1c..f4201a1b2a43 100644
--- a/src/pages/home/report/ReportActionItemCreated.js
+++ b/src/pages/home/report/ReportActionItemCreated.js
@@ -10,11 +10,11 @@ import PressableWithoutFeedback from '@components/Pressable/PressableWithoutFeed
 import ReportWelcomeText from '@components/ReportWelcomeText';
 import withLocalize from '@components/withLocalize';
 import withWindowDimensions, {windowDimensionsPropTypes} from '@components/withWindowDimensions';
+import useStyleUtils from '@hooks/useStyleUtils';
 import compose from '@libs/compose';
 import reportWithoutHasDraftSelector from '@libs/OnyxSelectors/reportWithoutHasDraftSelector';
 import * as ReportUtils from '@libs/ReportUtils';
 import reportPropTypes from '@pages/reportPropTypes';
-import useStyleUtils from '@styles/useStyleUtils';
 import useThemeStyles from '@styles/useThemeStyles';
 import * as Report from '@userActions/Report';
 import CONST from '@src/CONST';
diff --git a/src/pages/home/report/ReportActionItemMessageEdit.js b/src/pages/home/report/ReportActionItemMessageEdit.js
index 13d918aa25d7..9a2fc093b682 100644
--- a/src/pages/home/report/ReportActionItemMessageEdit.js
+++ b/src/pages/home/report/ReportActionItemMessageEdit.js
@@ -16,6 +16,7 @@ import Tooltip from '@components/Tooltip';
 import useKeyboardState from '@hooks/useKeyboardState';
 import useLocalize from '@hooks/useLocalize';
 import useReportScrollManager from '@hooks/useReportScrollManager';
+import useStyleUtils from '@hooks/useStyleUtils';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import * as Browser from '@libs/Browser';
 import * as ComposerUtils from '@libs/ComposerUtils';
@@ -28,7 +29,6 @@ import * as ReportUtils from '@libs/ReportUtils';
 import setShouldShowComposeInputKeyboardAware from '@libs/setShouldShowComposeInputKeyboardAware';
 import reportPropTypes from '@pages/reportPropTypes';
 import useTheme from '@styles/themes/useTheme';
-import useStyleUtils from '@styles/useStyleUtils';
 import useThemeStyles from '@styles/useThemeStyles';
 import * as EmojiPickerAction from '@userActions/EmojiPickerAction';
 import * as InputFocus from '@userActions/InputFocus';
diff --git a/src/pages/home/report/ReportActionItemParentAction.js b/src/pages/home/report/ReportActionItemParentAction.js
index 4a125d1d5633..edb868970690 100644
--- a/src/pages/home/report/ReportActionItemParentAction.js
+++ b/src/pages/home/report/ReportActionItemParentAction.js
@@ -6,10 +6,10 @@ import {withOnyx} from 'react-native-onyx';
 import OfflineWithFeedback from '@components/OfflineWithFeedback';
 import withLocalize from '@components/withLocalize';
 import withWindowDimensions, {windowDimensionsPropTypes} from '@components/withWindowDimensions';
+import useStyleUtils from '@hooks/useStyleUtils';
 import compose from '@libs/compose';
 import * as ReportActionsUtils from '@libs/ReportActionsUtils';
 import reportPropTypes from '@pages/reportPropTypes';
-import useStyleUtils from '@styles/useStyleUtils';
 import useThemeStyles from '@styles/useThemeStyles';
 import * as Report from '@userActions/Report';
 import ONYXKEYS from '@src/ONYXKEYS';
diff --git a/src/pages/home/report/ReportActionItemSingle.js b/src/pages/home/report/ReportActionItemSingle.js
index 62a051b58d18..b38ea0115ecd 100644
--- a/src/pages/home/report/ReportActionItemSingle.js
+++ b/src/pages/home/report/ReportActionItemSingle.js
@@ -13,6 +13,7 @@ import Text from '@components/Text';
 import Tooltip from '@components/Tooltip';
 import UserDetailsTooltip from '@components/UserDetailsTooltip';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
+import useStyleUtils from '@hooks/useStyleUtils';
 import ControlSelection from '@libs/ControlSelection';
 import DateUtils from '@libs/DateUtils';
 import Navigation from '@libs/Navigation/Navigation';
@@ -21,7 +22,6 @@ import * as UserUtils from '@libs/UserUtils';
 import reportPropTypes from '@pages/reportPropTypes';
 import stylePropTypes from '@styles/stylePropTypes';
 import useTheme from '@styles/theme/useTheme';
-import useStyleUtils from '@styles/useStyleUtils';
 import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 import ROUTES from '@src/ROUTES';
diff --git a/src/pages/home/sidebar/SidebarLinks.js b/src/pages/home/sidebar/SidebarLinks.js
index 1b51ee191665..89fa2f69c2a8 100644
--- a/src/pages/home/sidebar/SidebarLinks.js
+++ b/src/pages/home/sidebar/SidebarLinks.js
@@ -12,6 +12,7 @@ import OptionsListSkeletonView from '@components/OptionsListSkeletonView';
 import PressableWithoutFeedback from '@components/Pressable/PressableWithoutFeedback';
 import Tooltip from '@components/Tooltip';
 import useLocalize from '@hooks/useLocalize';
+import useStyleUtils from '@hooks/useStyleUtils';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import KeyboardShortcut from '@libs/KeyboardShortcut';
 import Navigation from '@libs/Navigation/Navigation';
@@ -20,7 +21,6 @@ import SidebarUtils from '@libs/SidebarUtils';
 import * as ReportActionContextMenu from '@pages/home/report/ContextMenu/ReportActionContextMenu';
 import safeAreaInsetPropTypes from '@pages/safeAreaInsetPropTypes';
 import useTheme from '@styles/theme/useTheme';
-import useStyleUtils from '@styles/useStyleUtils';
 import useThemeStyles from '@styles/useThemeStyles';
 import variables from '@styles/variables';
 import * as App from '@userActions/App';
diff --git a/src/pages/settings/Profile/Contacts/ValidateCodeForm/BaseValidateCodeForm.js b/src/pages/settings/Profile/Contacts/ValidateCodeForm/BaseValidateCodeForm.js
index 6d64611878a1..4fd4b49423d7 100644
--- a/src/pages/settings/Profile/Contacts/ValidateCodeForm/BaseValidateCodeForm.js
+++ b/src/pages/settings/Profile/Contacts/ValidateCodeForm/BaseValidateCodeForm.js
@@ -13,11 +13,11 @@ import {withNetwork} from '@components/OnyxProvider';
 import PressableWithFeedback from '@components/Pressable/PressableWithFeedback';
 import Text from '@components/Text';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
+import useStyleUtils from '@hooks/useStyleUtils';
 import compose from '@libs/compose';
 import * as ErrorUtils from '@libs/ErrorUtils';
 import * as ValidationUtils from '@libs/ValidationUtils';
 import useTheme from '@styles/theme/useTheme';
-import useStyleUtils from '@styles/useStyleUtils';
 import useThemeStyles from '@styles/useThemeStyles';
 import * as Session from '@userActions/Session';
 import * as User from '@userActions/User';
diff --git a/src/pages/settings/Wallet/PaymentMethodList.js b/src/pages/settings/Wallet/PaymentMethodList.js
index 4f6d0331f3b4..859cd6fb636d 100644
--- a/src/pages/settings/Wallet/PaymentMethodList.js
+++ b/src/pages/settings/Wallet/PaymentMethodList.js
@@ -16,12 +16,12 @@ import OfflineWithFeedback from '@components/OfflineWithFeedback';
 import Text from '@components/Text';
 import useLocalize from '@hooks/useLocalize';
 import useNetwork from '@hooks/useNetwork';
+import useStyleUtils from '@hooks/useStyleUtils';
 import * as CardUtils from '@libs/CardUtils';
 import Log from '@libs/Log';
 import Navigation from '@libs/Navigation/Navigation';
 import * as PaymentUtils from '@libs/PaymentUtils';
 import stylePropTypes from '@styles/stylePropTypes';
-import useStyleUtils from '@styles/useStyleUtils';
 import useThemeStyles from '@styles/useThemeStyles';
 import variables from '@styles/variables';
 import * as PaymentMethods from '@userActions/PaymentMethods';
diff --git a/src/pages/signin/SignInHeroCopy.js b/src/pages/signin/SignInHeroCopy.js
index 75c53c6b2344..5f3273a40480 100644
--- a/src/pages/signin/SignInHeroCopy.js
+++ b/src/pages/signin/SignInHeroCopy.js
@@ -4,8 +4,8 @@ import {View} from 'react-native';
 import Text from '@components/Text';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
 import withWindowDimensions, {windowDimensionsPropTypes} from '@components/withWindowDimensions';
+import useStyleUtils from '@hooks/useStyleUtils';
 import compose from '@libs/compose';
-import useStyleUtils from '@styles/useStyleUtils';
 import useThemeStyles from '@styles/useThemeStyles';
 import variables from '@styles/variables';
 
diff --git a/src/pages/signin/SignInPage.js b/src/pages/signin/SignInPage.js
index f94fcc64b15e..04892cc7641b 100644
--- a/src/pages/signin/SignInPage.js
+++ b/src/pages/signin/SignInPage.js
@@ -8,6 +8,7 @@ import ColorSchemeWrapper from '@components/ColorSchemeWrapper';
 import CustomStatusBar from '@components/CustomStatusBar';
 import useLocalize from '@hooks/useLocalize';
 import useSafeAreaInsets from '@hooks/useSafeAreaInsets';
+import useStyleUtils from '@hooks/useStyleUtils';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import * as ActiveClientManager from '@libs/ActiveClientManager';
 import * as Localize from '@libs/Localize';
@@ -16,7 +17,6 @@ import Navigation from '@libs/Navigation/Navigation';
 import Performance from '@libs/Performance';
 import ThemeProvider from '@styles/theme/ThemeProvider';
 import ThemeStylesProvider from '@styles/ThemeStylesProvider';
-import useStyleUtils from '@styles/useStyleUtils';
 import useThemeStyles from '@styles/useThemeStyles';
 import * as App from '@userActions/App';
 import * as Session from '@userActions/Session';
diff --git a/src/pages/signin/SignInPageHero.js b/src/pages/signin/SignInPageHero.js
index a7bc13785764..d0fe82ab1d81 100644
--- a/src/pages/signin/SignInPageHero.js
+++ b/src/pages/signin/SignInPageHero.js
@@ -2,7 +2,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import {View} from 'react-native';
 import withWindowDimensions, {windowDimensionsPropTypes} from '@components/withWindowDimensions';
-import useStyleUtils from '@styles/useStyleUtils';
+import useStyleUtils from '@hooks/useStyleUtils';
 import useThemeStyles from '@styles/useThemeStyles';
 import variables from '@styles/variables';
 import SignInHeroCopy from './SignInHeroCopy';
diff --git a/src/pages/signin/SignInPageLayout/Footer.js b/src/pages/signin/SignInPageLayout/Footer.js
index 8effa86c103a..bf014fa29802 100644
--- a/src/pages/signin/SignInPageLayout/Footer.js
+++ b/src/pages/signin/SignInPageLayout/Footer.js
@@ -8,10 +8,10 @@ import * as Expensicons from '@components/Icon/Expensicons';
 import Text from '@components/Text';
 import TextLink from '@components/TextLink';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
+import useStyleUtils from '@hooks/useStyleUtils';
 import Licenses from '@pages/signin/Licenses';
 import Socials from '@pages/signin/Socials';
 import useTheme from '@styles/theme/useTheme';
-import useStyleUtils from '@styles/useStyleUtils';
 import useThemeStyles from '@styles/useThemeStyles';
 import variables from '@styles/variables';
 import * as Session from '@userActions/Session';
diff --git a/src/pages/signin/SignInPageLayout/SignInPageContent.js b/src/pages/signin/SignInPageLayout/SignInPageContent.js
index fd48ebecf066..dc2ca0bd3138 100755
--- a/src/pages/signin/SignInPageLayout/SignInPageContent.js
+++ b/src/pages/signin/SignInPageLayout/SignInPageContent.js
@@ -7,10 +7,10 @@ import OfflineIndicator from '@components/OfflineIndicator';
 import SignInPageForm from '@components/SignInPageForm';
 import Text from '@components/Text';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
+import useStyleUtils from '@hooks/useStyleUtils';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import compose from '@libs/compose';
 import SignInHeroImage from '@pages/signin/SignInHeroImage';
-import useStyleUtils from '@styles/useStyleUtils';
 import useThemeStyles from '@styles/useThemeStyles';
 import variables from '@styles/variables';
 
diff --git a/src/pages/signin/SignInPageLayout/index.js b/src/pages/signin/SignInPageLayout/index.js
index c5c6f671c79f..551398c4b79e 100644
--- a/src/pages/signin/SignInPageLayout/index.js
+++ b/src/pages/signin/SignInPageLayout/index.js
@@ -5,11 +5,11 @@ import {withSafeAreaInsets} from 'react-native-safe-area-context';
 import SignInGradient from '@assets/images/home-fade-gradient.svg';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
 import usePrevious from '@hooks/usePrevious';
+import useStyleUtils from '@hooks/useStyleUtils';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import compose from '@libs/compose';
 import SignInPageHero from '@pages/signin/SignInPageHero';
 import useTheme from '@styles/theme/useTheme';
-import useStyleUtils from '@styles/useStyleUtils';
 import useThemeStyles from '@styles/useThemeStyles';
 import variables from '@styles/variables';
 import BackgroundImage from './BackgroundImage';
diff --git a/src/pages/signin/ValidateCodeForm/BaseValidateCodeForm.js b/src/pages/signin/ValidateCodeForm/BaseValidateCodeForm.js
index 3ba696585e3a..cda60af35c0e 100755
--- a/src/pages/signin/ValidateCodeForm/BaseValidateCodeForm.js
+++ b/src/pages/signin/ValidateCodeForm/BaseValidateCodeForm.js
@@ -14,6 +14,7 @@ import Text from '@components/Text';
 import TextInput from '@components/TextInput';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
 import usePrevious from '@hooks/usePrevious';
+import useStyleUtils from '@hooks/useStyleUtils';
 import canFocusInputOnScreenFocus from '@libs/canFocusInputOnScreenFocus';
 import compose from '@libs/compose';
 import * as ErrorUtils from '@libs/ErrorUtils';
@@ -21,7 +22,6 @@ import * as ValidationUtils from '@libs/ValidationUtils';
 import ChangeExpensifyLoginLink from '@pages/signin/ChangeExpensifyLoginLink';
 import Terms from '@pages/signin/Terms';
 import useTheme from '@styles/theme/useTheme';
-import useStyleUtils from '@styles/useStyleUtils';
 import useThemeStyles from '@styles/useThemeStyles';
 import * as Session from '@userActions/Session';
 import * as User from '@userActions/User';
diff --git a/src/stories/Composer.stories.js b/src/stories/Composer.stories.js
index 3a29c3a0ef09..a9db5c754b5f 100644
--- a/src/stories/Composer.stories.js
+++ b/src/stories/Composer.stories.js
@@ -5,9 +5,9 @@ import Composer from '@components/Composer';
 import RenderHTML from '@components/RenderHTML';
 import Text from '@components/Text';
 import withNavigationFallback from '@components/withNavigationFallback';
+import useStyleUtils from '@hooks/useStyleUtils';
 import {defaultStyles} from '@styles/styles';
 import {defaultTheme} from '@styles/theme/themes';
-import useStyleUtils from '@styles/useStyleUtils';
 import CONST from '@src/CONST';
 
 const ComposerWithNavigation = withNavigationFallback(Composer);
diff --git a/src/styles/useThemeStyles.ts b/src/styles/useThemeStyles.ts
index 164806a908e4..ae5a83988b64 100644
--- a/src/styles/useThemeStyles.ts
+++ b/src/styles/useThemeStyles.ts
@@ -1,5 +1,5 @@
 import {useContext} from 'react';
-import ThemeStylesContext from './ThemeStylesContext';
+import ThemeStylesContext from './context/ThemeStylesContext';
 
 function useThemeStyles() {
     const themeStylesContext = useContext(ThemeStylesContext);

From 7b4f185072e8bad6c0402de6296b60b6a8273d1e Mon Sep 17 00:00:00 2001
From: Christoph Pader <christoph.pader@outlook.com>
Date: Thu, 7 Dec 2023 17:23:41 +0100
Subject: [PATCH 049/102] move contextes

---
 src/styles/ThemeStylesProvider.tsx                        | 2 +-
 src/styles/{theme => context}/ThemeContext.ts             | 4 ++--
 .../ThemeIllustrationsContext.ts                          | 4 ++--
 src/styles/{ => context}/ThemeStylesContext.ts            | 8 ++++----
 src/styles/illustrations/ThemeIllustrationsProvider.tsx   | 2 +-
 src/styles/illustrations/useThemeIllustrations.ts         | 2 +-
 src/styles/theme/ThemeProvider.tsx                        | 2 +-
 src/styles/theme/useTheme.ts                              | 2 +-
 8 files changed, 13 insertions(+), 13 deletions(-)
 rename src/styles/{theme => context}/ThemeContext.ts (54%)
 rename src/styles/{illustrations => context}/ThemeIllustrationsContext.ts (54%)
 rename src/styles/{ => context}/ThemeStylesContext.ts (62%)

diff --git a/src/styles/ThemeStylesProvider.tsx b/src/styles/ThemeStylesProvider.tsx
index 65cbe1eebd1a..00591b9383a3 100644
--- a/src/styles/ThemeStylesProvider.tsx
+++ b/src/styles/ThemeStylesProvider.tsx
@@ -1,7 +1,7 @@
 import React, {useMemo} from 'react';
+import ThemeStylesContext from './context/ThemeStylesContext';
 import stylesGenerator from './styles';
 import useTheme from './theme/useTheme';
-import ThemeStylesContext from './ThemeStylesContext';
 import createStyleUtils from './utils';
 
 type ThemeStylesProviderProps = React.PropsWithChildren;
diff --git a/src/styles/theme/ThemeContext.ts b/src/styles/context/ThemeContext.ts
similarity index 54%
rename from src/styles/theme/ThemeContext.ts
rename to src/styles/context/ThemeContext.ts
index ec35675953fe..4602f859fedd 100644
--- a/src/styles/theme/ThemeContext.ts
+++ b/src/styles/context/ThemeContext.ts
@@ -1,6 +1,6 @@
 import React from 'react';
-import {defaultTheme} from './themes';
-import {type ThemeColors} from './types';
+import {defaultTheme} from '@styles/theme/themes';
+import {type ThemeColors} from '@styles/theme/types';
 
 const ThemeContext = React.createContext<ThemeColors>(defaultTheme);
 
diff --git a/src/styles/illustrations/ThemeIllustrationsContext.ts b/src/styles/context/ThemeIllustrationsContext.ts
similarity index 54%
rename from src/styles/illustrations/ThemeIllustrationsContext.ts
rename to src/styles/context/ThemeIllustrationsContext.ts
index c5cae1b26019..7b0bd1408b63 100644
--- a/src/styles/illustrations/ThemeIllustrationsContext.ts
+++ b/src/styles/context/ThemeIllustrationsContext.ts
@@ -1,6 +1,6 @@
 import React from 'react';
-import {DefaultIllustrations} from './illustrations';
-import {IllustrationsType} from './types';
+import {DefaultIllustrations} from '@styles/illustrations/illustrations';
+import {IllustrationsType} from '@styles/illustrations/types';
 
 const ThemeIllustrationsContext = React.createContext<IllustrationsType>(DefaultIllustrations);
 
diff --git a/src/styles/ThemeStylesContext.ts b/src/styles/context/ThemeStylesContext.ts
similarity index 62%
rename from src/styles/ThemeStylesContext.ts
rename to src/styles/context/ThemeStylesContext.ts
index 73f044f2dcbd..1f533a9f40a6 100644
--- a/src/styles/ThemeStylesContext.ts
+++ b/src/styles/context/ThemeStylesContext.ts
@@ -1,8 +1,8 @@
 import React from 'react';
-import {defaultStyles} from './styles';
-import type {ThemeStyles} from './styles';
-import {DefaultStyleUtils} from './utils';
-import type {StyleUtilsType} from './utils';
+import {defaultStyles} from '@styles/styles';
+import type {ThemeStyles} from '@styles/styles';
+import {DefaultStyleUtils} from '@styles/utils';
+import type {StyleUtilsType} from '@styles/utils';
 
 type ThemeStylesContextType = {
     styles: ThemeStyles;
diff --git a/src/styles/illustrations/ThemeIllustrationsProvider.tsx b/src/styles/illustrations/ThemeIllustrationsProvider.tsx
index b03c55238278..6576700a1efc 100644
--- a/src/styles/illustrations/ThemeIllustrationsProvider.tsx
+++ b/src/styles/illustrations/ThemeIllustrationsProvider.tsx
@@ -1,7 +1,7 @@
 import React, {useMemo} from 'react';
+import ThemeIllustrationsContext from '@styles/context/ThemeIllustrationsContext';
 import useThemePreference from '@styles/theme/useThemePreference';
 import Illustrations from './illustrations';
-import ThemeIllustrationsContext from './ThemeIllustrationsContext';
 
 type ThemeIllustrationsProviderProps = {
     children: React.ReactNode;
diff --git a/src/styles/illustrations/useThemeIllustrations.ts b/src/styles/illustrations/useThemeIllustrations.ts
index 32f986dc655a..4e91b842cabe 100644
--- a/src/styles/illustrations/useThemeIllustrations.ts
+++ b/src/styles/illustrations/useThemeIllustrations.ts
@@ -1,5 +1,5 @@
 import {useContext} from 'react';
-import ThemeIllustrationsContext from './ThemeIllustrationsContext';
+import ThemeIllustrationsContext from '@styles/context/ThemeIllustrationsContext';
 
 function useThemeIllustrations() {
     const illustrations = useContext(ThemeIllustrationsContext);
diff --git a/src/styles/theme/ThemeProvider.tsx b/src/styles/theme/ThemeProvider.tsx
index 0d302b5ae056..7ac1ee97ac42 100644
--- a/src/styles/theme/ThemeProvider.tsx
+++ b/src/styles/theme/ThemeProvider.tsx
@@ -1,7 +1,7 @@
 /* eslint-disable react/jsx-props-no-spreading */
 import PropTypes from 'prop-types';
 import React, {useMemo} from 'react';
-import ThemeContext from './ThemeContext';
+import ThemeContext from '@styles/context/ThemeContext';
 import themes from './themes';
 import {ThemePreferenceWithoutSystem} from './types';
 import useThemePreferenceWithStaticOverride from './useThemePreferenceWithStaticOverride';
diff --git a/src/styles/theme/useTheme.ts b/src/styles/theme/useTheme.ts
index adeaffbcae8a..898abb9d6bfc 100644
--- a/src/styles/theme/useTheme.ts
+++ b/src/styles/theme/useTheme.ts
@@ -1,5 +1,5 @@
 import {useContext} from 'react';
-import ThemeContext from './ThemeContext';
+import ThemeContext from '@styles/context/ThemeContext';
 import {type ThemeColors} from './types';
 
 function useTheme(): ThemeColors {

From 43ca5ad74cd113c71f035b3cb1a567032256c30e Mon Sep 17 00:00:00 2001
From: Christoph Pader <christoph.pader@outlook.com>
Date: Thu, 7 Dec 2023 17:24:22 +0100
Subject: [PATCH 050/102] move useThemePreference

---
 src/{styles/theme => hooks}/useThemePreference.ts        | 2 +-
 src/styles/illustrations/ThemeIllustrationsProvider.tsx  | 2 +-
 src/styles/theme/useThemePreferenceWithStaticOverride.ts | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)
 rename src/{styles/theme => hooks}/useThemePreference.ts (95%)

diff --git a/src/styles/theme/useThemePreference.ts b/src/hooks/useThemePreference.ts
similarity index 95%
rename from src/styles/theme/useThemePreference.ts
rename to src/hooks/useThemePreference.ts
index ac87e2488b31..7c9dad49a841 100644
--- a/src/styles/theme/useThemePreference.ts
+++ b/src/hooks/useThemePreference.ts
@@ -1,8 +1,8 @@
 import {useContext, useEffect, useState} from 'react';
 import {Appearance, ColorSchemeName} from 'react-native';
 import {PreferredThemeContext} from '@components/OnyxProvider';
+import {ThemePreferenceWithoutSystem} from '@styles/theme/types';
 import CONST from '@src/CONST';
-import {ThemePreferenceWithoutSystem} from './types';
 
 function useThemePreference() {
     const [themePreference, setThemePreference] = useState<ThemePreferenceWithoutSystem>(CONST.THEME.DEFAULT);
diff --git a/src/styles/illustrations/ThemeIllustrationsProvider.tsx b/src/styles/illustrations/ThemeIllustrationsProvider.tsx
index 6576700a1efc..610d88fad198 100644
--- a/src/styles/illustrations/ThemeIllustrationsProvider.tsx
+++ b/src/styles/illustrations/ThemeIllustrationsProvider.tsx
@@ -1,6 +1,6 @@
 import React, {useMemo} from 'react';
+import useThemePreference from '@hooks/useThemePreference';
 import ThemeIllustrationsContext from '@styles/context/ThemeIllustrationsContext';
-import useThemePreference from '@styles/theme/useThemePreference';
 import Illustrations from './illustrations';
 
 type ThemeIllustrationsProviderProps = {
diff --git a/src/styles/theme/useThemePreferenceWithStaticOverride.ts b/src/styles/theme/useThemePreferenceWithStaticOverride.ts
index b447740a0de1..6065f0ae9d88 100644
--- a/src/styles/theme/useThemePreferenceWithStaticOverride.ts
+++ b/src/styles/theme/useThemePreferenceWithStaticOverride.ts
@@ -1,5 +1,5 @@
+import useThemePreference from '../../hooks/useThemePreference';
 import {ThemePreferenceWithoutSystem} from './types';
-import useThemePreference from './useThemePreference';
 
 const useThemePreferenceWithStaticOverride = (staticThemePreference: ThemePreferenceWithoutSystem | undefined) => {
     const dynamicThemePreference = useThemePreference();

From addfa8860ac031bd4c3a98c563e124cc3a95154c Mon Sep 17 00:00:00 2001
From: Christoph Pader <christoph.pader@outlook.com>
Date: Thu, 7 Dec 2023 17:28:04 +0100
Subject: [PATCH 051/102] move useThemeStyles

---
 src/components/AddPlaidBankAccount.js                       | 2 +-
 src/components/AddressForm.js                               | 2 +-
 src/components/AddressSearch/CurrentLocationButton.js       | 2 +-
 src/components/AddressSearch/index.js                       | 2 +-
 src/components/AmountTextInput.js                           | 2 +-
 src/components/AnchorForAttachmentsOnly/index.native.js     | 2 +-
 .../AnchorForCommentsOnly/BaseAnchorForCommentsOnly.js      | 2 +-
 src/components/AnimatedStep/index.tsx                       | 2 +-
 src/components/AnonymousReportFooter.tsx                    | 2 +-
 src/components/ArchivedReportFooter.tsx                     | 2 +-
 src/components/AttachmentModal.js                           | 2 +-
 src/components/AttachmentPicker/index.native.js             | 2 +-
 .../AttachmentCarousel/AttachmentCarouselCellRenderer.js    | 2 +-
 .../Attachments/AttachmentCarousel/CarouselButtons.js       | 2 +-
 .../Attachments/AttachmentCarousel/CarouselItem.js          | 2 +-
 .../AttachmentCarousel/Pager/ImageTransformer.js            | 2 +-
 .../Attachments/AttachmentCarousel/Pager/ImageWrapper.js    | 2 +-
 .../Attachments/AttachmentCarousel/Pager/index.js           | 2 +-
 src/components/Attachments/AttachmentCarousel/index.js      | 2 +-
 .../Attachments/AttachmentCarousel/index.native.js          | 2 +-
 .../Attachments/AttachmentView/AttachmentViewImage/index.js | 2 +-
 .../AttachmentView/AttachmentViewImage/index.native.js      | 2 +-
 .../AttachmentView/AttachmentViewPdf/index.android.js       | 2 +-
 src/components/Attachments/AttachmentView/index.js          | 2 +-
 .../AutoCompleteSuggestions/BaseAutoCompleteSuggestions.tsx | 2 +-
 src/components/AutoEmailLink.js                             | 2 +-
 src/components/AutoUpdateTime.js                            | 2 +-
 src/components/Avatar.tsx                                   | 2 +-
 src/components/AvatarCropModal/AvatarCropModal.js           | 2 +-
 src/components/AvatarCropModal/ImageCropView.js             | 2 +-
 src/components/AvatarCropModal/Slider.js                    | 2 +-
 src/components/AvatarWithDisplayName.tsx                    | 2 +-
 src/components/AvatarWithImagePicker.js                     | 2 +-
 src/components/AvatarWithIndicator.tsx                      | 2 +-
 src/components/Badge.tsx                                    | 2 +-
 src/components/Banner.tsx                                   | 2 +-
 src/components/BaseMiniContextMenuItem.js                   | 2 +-
 src/components/BigNumberPad.tsx                             | 2 +-
 src/components/BlockingViews/BlockingView.js                | 2 +-
 src/components/BlockingViews/FullPageNotFoundView.js        | 2 +-
 src/components/Button/index.tsx                             | 2 +-
 src/components/ButtonWithDropdownMenu.js                    | 2 +-
 src/components/CardPreview.js                               | 2 +-
 src/components/CategoryPicker/index.js                      | 2 +-
 src/components/Checkbox.tsx                                 | 2 +-
 src/components/CheckboxWithLabel.js                         | 2 +-
 src/components/CollapsibleSection/index.tsx                 | 2 +-
 src/components/ColorSchemeWrapper/index.tsx                 | 2 +-
 src/components/CommunicationsLink.js                        | 2 +-
 src/components/Composer/index.android.js                    | 2 +-
 src/components/Composer/index.ios.js                        | 2 +-
 src/components/Composer/index.js                            | 2 +-
 src/components/ConfirmContent.js                            | 2 +-
 src/components/ConfirmationPage.tsx                         | 2 +-
 src/components/ConfirmedRoute.js                            | 2 +-
 src/components/ConnectBankAccountButton.js                  | 2 +-
 src/components/ContextMenuItem.js                           | 2 +-
 src/components/CountrySelector.js                           | 2 +-
 src/components/CurrencySymbolButton.js                      | 2 +-
 .../CurrentUserPersonalDetailsSkeletonView/index.tsx        | 2 +-
 src/components/CurrentWalletBalance.tsx                     | 2 +-
 src/components/DatePicker/CalendarPicker/ArrowIcon.js       | 2 +-
 src/components/DatePicker/CalendarPicker/YearPickerModal.js | 2 +-
 src/components/DatePicker/index.js                          | 2 +-
 .../DeeplinkWrapper/DeeplinkRedirectLoadingIndicator.js     | 2 +-
 src/components/DisplayNames/DisplayNamesTooltipItem.tsx     | 2 +-
 src/components/DisplayNames/DisplayNamesWithTooltip.tsx     | 2 +-
 src/components/DisplayNames/DisplayNamesWithoutTooltip.tsx  | 2 +-
 src/components/DistanceEReceipt.js                          | 2 +-
 src/components/DistanceMapView/index.android.js             | 2 +-
 src/components/DistanceRequest/DistanceRequestFooter.js     | 2 +-
 src/components/DistanceRequest/index.js                     | 2 +-
 src/components/DotIndicatorMessage.tsx                      | 2 +-
 src/components/DragAndDrop/NoDropZone/index.tsx             | 2 +-
 src/components/DragAndDrop/Provider/index.tsx               | 2 +-
 src/components/DraggableList/index.native.tsx               | 2 +-
 src/components/DraggableList/index.tsx                      | 2 +-
 src/components/EReceipt.js                                  | 2 +-
 src/components/EReceiptThumbnail.js                         | 2 +-
 src/components/EmojiPicker/CategoryShortcutBar.js           | 2 +-
 src/components/EmojiPicker/CategoryShortcutButton.js        | 2 +-
 src/components/EmojiPicker/EmojiPicker.js                   | 2 +-
 src/components/EmojiPicker/EmojiPickerButton.js             | 2 +-
 src/components/EmojiPicker/EmojiPickerButtonDropdown.js     | 2 +-
 src/components/EmojiPicker/EmojiPickerMenu/index.js         | 2 +-
 src/components/EmojiPicker/EmojiPickerMenu/index.native.js  | 2 +-
 src/components/EmojiPicker/EmojiSkinToneList.js             | 2 +-
 src/components/EmojiSuggestions.tsx                         | 2 +-
 src/components/EnvironmentBadge.tsx                         | 2 +-
 src/components/ExceededCommentLength.js                     | 2 +-
 src/components/ExpensifyWordmark.tsx                        | 2 +-
 src/components/FeatureList.js                               | 2 +-
 src/components/FixedFooter.tsx                              | 2 +-
 src/components/FocusModeNotification.js                     | 2 +-
 src/components/Form.js                                      | 2 +-
 src/components/Form/FormWrapper.js                          | 2 +-
 src/components/FormAlertWithSubmitButton.js                 | 2 +-
 src/components/FormAlertWrapper.js                          | 2 +-
 src/components/FormHelpMessage.js                           | 2 +-
 src/components/FormScrollView.tsx                           | 2 +-
 src/components/FullscreenLoadingIndicator.tsx               | 2 +-
 .../GrowlNotification/GrowlNotificationContainer/index.js   | 2 +-
 .../GrowlNotificationContainer/index.native.js              | 2 +-
 src/components/GrowlNotification/index.js                   | 2 +-
 src/components/HTMLEngineProvider/BaseHTMLEngineProvider.js | 2 +-
 .../HTMLEngineProvider/HTMLRenderers/AnchorRenderer.js      | 2 +-
 .../HTMLEngineProvider/HTMLRenderers/EditedRenderer.js      | 2 +-
 .../HTMLEngineProvider/HTMLRenderers/ImageRenderer.js       | 2 +-
 .../HTMLEngineProvider/HTMLRenderers/MentionUserRenderer.js | 2 +-
 .../HTMLRenderers/PreRenderer/BasePreRenderer.js            | 2 +-
 src/components/Header.tsx                                   | 2 +-
 src/components/HeaderPageLayout.js                          | 2 +-
 src/components/HeaderWithBackButton/index.js                | 2 +-
 src/components/IllustratedHeaderPageLayout.js               | 2 +-
 src/components/ImageView/index.js                           | 2 +-
 src/components/ImageView/index.native.js                    | 2 +-
 src/components/ImageWithSizeCalculation.tsx                 | 2 +-
 src/components/Indicator.js                                 | 2 +-
 src/components/InlineCodeBlock/WrappedText.js               | 2 +-
 src/components/InlineCodeBlock/index.native.js              | 2 +-
 src/components/InlineSystemMessage.tsx                      | 2 +-
 src/components/InvertedFlatList/index.native.js             | 2 +-
 src/components/LHNOptionsList/LHNOptionsList.js             | 2 +-
 src/components/LHNOptionsList/OptionRowLHN.js               | 2 +-
 src/components/LocalePicker.tsx                             | 2 +-
 .../LocationErrorMessage/BaseLocationErrorMessage.js        | 2 +-
 src/components/Lottie/Lottie.tsx                            | 2 +-
 src/components/MagicCodeInput.js                            | 2 +-
 src/components/MapView/Direction.tsx                        | 2 +-
 src/components/MapView/Direction.website.tsx                | 2 +-
 src/components/MapView/MapView.tsx                          | 2 +-
 src/components/MapView/MapView.website.tsx                  | 2 +-
 src/components/MapView/PendingMapView.tsx                   | 2 +-
 src/components/MentionSuggestions.tsx                       | 2 +-
 src/components/MenuItem.js                                  | 2 +-
 src/components/MessagesRow.js                               | 2 +-
 src/components/Modal/BaseModal.tsx                          | 2 +-
 src/components/MoneyReportHeader.js                         | 2 +-
 src/components/MoneyReportHeaderStatusBar.js                | 2 +-
 src/components/MoneyRequestConfirmationList.js              | 2 +-
 src/components/MoneyRequestHeader.js                        | 2 +-
 src/components/MoneyRequestHeaderStatusBar.js               | 2 +-
 src/components/MoneyRequestSkeletonView.tsx                 | 2 +-
 src/components/MultipleAvatars.tsx                          | 2 +-
 src/components/OfflineIndicator.tsx                         | 2 +-
 src/components/OfflineWithFeedback.js                       | 2 +-
 src/components/OptionRow.js                                 | 2 +-
 src/components/OptionsList/BaseOptionsList.js               | 2 +-
 src/components/PDFView/PDFInfoMessage.js                    | 2 +-
 src/components/PDFView/PDFPasswordForm.js                   | 2 +-
 src/components/ParentNavigationSubtitle.tsx                 | 2 +-
 src/components/Picker/BasePicker.tsx                        | 2 +-
 src/components/PinButton.js                                 | 2 +-
 src/components/PopoverMenu/index.js                         | 2 +-
 src/components/PopoverWithMeasuredContent.js                | 2 +-
 src/components/PopoverWithoutOverlay/index.js               | 2 +-
 .../Pressable/GenericPressable/BaseGenericPressable.tsx     | 2 +-
 src/components/Pressable/PressableWithDelayToggle.tsx       | 2 +-
 src/components/PressableWithSecondaryInteraction/index.tsx  | 2 +-
 src/components/RadioButton.tsx                              | 2 +-
 src/components/RadioButtonWithLabel.tsx                     | 2 +-
 src/components/RadioButtons.tsx                             | 2 +-
 src/components/Reactions/AddReactionBubble.js               | 2 +-
 src/components/Reactions/EmojiReactionBubble.js             | 2 +-
 src/components/Reactions/MiniQuickEmojiReactions.js         | 2 +-
 .../QuickEmojiReactions/BaseQuickEmojiReactions.js          | 2 +-
 src/components/Reactions/ReactionTooltipContent.js          | 2 +-
 src/components/Reactions/ReportActionItemEmojiReactions.js  | 2 +-
 src/components/ReceiptEmptyState.js                         | 2 +-
 src/components/ReimbursementAccountLoadingIndicator.js      | 2 +-
 src/components/ReportActionItem/ChronosOOOListActions.js    | 2 +-
 src/components/ReportActionItem/MoneyReportView.js          | 2 +-
 src/components/ReportActionItem/MoneyRequestAction.js       | 2 +-
 src/components/ReportActionItem/MoneyRequestPreview.js      | 2 +-
 src/components/ReportActionItem/MoneyRequestView.js         | 2 +-
 src/components/ReportActionItem/RenameAction.js             | 2 +-
 src/components/ReportActionItem/ReportActionItemImage.js    | 2 +-
 src/components/ReportActionItem/ReportActionItemImages.js   | 2 +-
 src/components/ReportActionItem/ReportPreview.js            | 2 +-
 src/components/ReportActionItem/TaskAction.js               | 2 +-
 src/components/ReportActionItem/TaskPreview.js              | 2 +-
 src/components/ReportActionItem/TaskView.js                 | 2 +-
 .../ReportActionsSkeletonView/SkeletonViewLines.tsx         | 2 +-
 src/components/ReportHeaderSkeletonView.tsx                 | 2 +-
 src/components/ReportWelcomeText.js                         | 2 +-
 src/components/RoomHeaderAvatars.js                         | 2 +-
 src/components/SAMLLoadingIndicator.js                      | 2 +-
 src/components/SafeArea/index.ios.tsx                       | 2 +-
 src/components/ScreenWrapper/index.js                       | 2 +-
 src/components/Section.js                                   | 2 +-
 src/components/SelectCircle.tsx                             | 2 +-
 src/components/SelectionList/BaseListItem.js                | 2 +-
 src/components/SelectionList/BaseSelectionList.js           | 2 +-
 src/components/SelectionList/RadioListItem.js               | 2 +-
 src/components/SelectionList/UserListItem.js                | 2 +-
 src/components/ShowMoreButton/index.js                      | 2 +-
 src/components/SignInButtons/AppleSignIn/index.desktop.js   | 2 +-
 src/components/SignInButtons/GoogleSignIn/index.desktop.js  | 2 +-
 src/components/SignInButtons/GoogleSignIn/index.website.js  | 2 +-
 src/components/SignInButtons/IconButton.js                  | 2 +-
 src/components/SingleChoiceQuestion.tsx                     | 2 +-
 src/components/SingleOptionSelector.js                      | 2 +-
 src/components/SplashScreenHider/index.native.tsx           | 2 +-
 src/components/StatePicker/StateSelectorModal.js            | 2 +-
 src/components/StatePicker/index.js                         | 2 +-
 src/components/SubscriptAvatar.tsx                          | 2 +-
 src/components/Switch.tsx                                   | 2 +-
 src/components/TabSelector/TabLabel.js                      | 2 +-
 src/components/TabSelector/TabSelector.js                   | 2 +-
 src/components/TabSelector/TabSelectorItem.js               | 2 +-
 src/components/TagPicker/index.js                           | 2 +-
 src/components/TaskHeaderActionButton.tsx                   | 2 +-
 src/components/TestToolMenu.tsx                             | 2 +-
 src/components/TestToolRow.tsx                              | 2 +-
 src/components/TestToolsModal.tsx                           | 2 +-
 src/components/TextInput/BaseTextInput/index.js             | 2 +-
 src/components/TextInput/BaseTextInput/index.native.js      | 2 +-
 src/components/TextInput/TextInputLabel/index.js            | 2 +-
 src/components/TextInput/TextInputLabel/index.native.js     | 2 +-
 src/components/TextInput/index.js                           | 2 +-
 src/components/TextInput/index.native.js                    | 2 +-
 src/components/TextLink.js                                  | 2 +-
 src/components/TextWithEllipsis/index.tsx                   | 2 +-
 src/components/ThreeDotsMenu/index.js                       | 2 +-
 src/components/ThumbnailImage.tsx                           | 2 +-
 src/components/UnorderedList.tsx                            | 2 +-
 src/components/UnreadActionIndicator.tsx                    | 2 +-
 .../UserDetailsTooltip/BaseUserDetailsTooltip.website.js    | 2 +-
 src/components/ValidateCode/ExpiredValidateCodeModal.js     | 2 +-
 src/components/ValidateCode/JustSignedInModal.js            | 2 +-
 src/components/ValidateCode/ValidateCodeModal.js            | 2 +-
 src/components/ValuePicker/ValueSelectorModal.js            | 2 +-
 src/components/ValuePicker/index.js                         | 2 +-
 .../VideoChatButtonAndMenu/BaseVideoChatButtonAndMenu.js    | 2 +-
 src/components/WalletSection.js                             | 2 +-
 src/components/WalletStatementModal/index.tsx               | 2 +-
 src/components/withThemeStyles.tsx                          | 2 +-
 src/components/withToggleVisibilityView.tsx                 | 2 +-
 src/{styles => hooks}/useThemeStyles.ts                     | 2 +-
 src/libs/Navigation/AppNavigator/AuthScreens.tsx            | 2 +-
 src/libs/Navigation/AppNavigator/ModalStackNavigators.tsx   | 2 +-
 .../CentralPaneNavigator/BaseCentralPaneNavigator.tsx       | 2 +-
 src/libs/Navigation/AppNavigator/Navigators/Overlay.tsx     | 2 +-
 .../AppNavigator/Navigators/RightModalNavigator.tsx         | 2 +-
 src/pages/AddPersonalBankAccountPage.js                     | 2 +-
 src/pages/DetailsPage.js                                    | 2 +-
 src/pages/EditRequestCategoryPage.js                        | 2 +-
 src/pages/EditRequestCreatedPage.js                         | 2 +-
 src/pages/EditRequestDescriptionPage.js                     | 2 +-
 src/pages/EditRequestMerchantPage.js                        | 2 +-
 src/pages/EditRequestReceiptPage.js                         | 2 +-
 src/pages/EditRequestTagPage.js                             | 2 +-
 src/pages/EnablePayments/AdditionalDetailsStep.js           | 2 +-
 src/pages/EnablePayments/FailedKYC.js                       | 2 +-
 src/pages/EnablePayments/IdologyQuestions.js                | 2 +-
 src/pages/EnablePayments/OnfidoPrivacy.js                   | 2 +-
 src/pages/EnablePayments/TermsPage/LongTermsForm.js         | 2 +-
 src/pages/EnablePayments/TermsPage/ShortTermsForm.js        | 2 +-
 src/pages/EnablePayments/TermsStep.js                       | 2 +-
 src/pages/ErrorPage/ErrorBodyText/index.js                  | 2 +-
 src/pages/ErrorPage/GenericErrorPage.js                     | 2 +-
 src/pages/FlagCommentPage.js                                | 2 +-
 src/pages/GetAssistancePage.js                              | 2 +-
 src/pages/KeyboardShortcutsPage.js                          | 2 +-
 src/pages/LogInWithShortLivedAuthTokenPage.js               | 2 +-
 src/pages/NewChatPage.js                                    | 2 +-
 src/pages/PrivateNotes/PrivateNotesEditPage.js              | 2 +-
 src/pages/PrivateNotes/PrivateNotesListPage.js              | 2 +-
 src/pages/PrivateNotes/PrivateNotesViewPage.js              | 2 +-
 src/pages/ProfilePage.js                                    | 2 +-
 src/pages/ReferralDetailsPage.js                            | 2 +-
 src/pages/ReimbursementAccount/ACHContractStep.js           | 2 +-
 src/pages/ReimbursementAccount/AddressForm.js               | 2 +-
 src/pages/ReimbursementAccount/BankAccountManualStep.js     | 2 +-
 src/pages/ReimbursementAccount/BankAccountPlaidStep.js      | 2 +-
 src/pages/ReimbursementAccount/BankAccountStep.js           | 2 +-
 src/pages/ReimbursementAccount/CompanyStep.js               | 2 +-
 src/pages/ReimbursementAccount/ContinueBankAccountSetup.js  | 2 +-
 src/pages/ReimbursementAccount/Enable2FAPrompt.js           | 2 +-
 src/pages/ReimbursementAccount/EnableStep.js                | 2 +-
 src/pages/ReimbursementAccount/IdentityForm.js              | 2 +-
 src/pages/ReimbursementAccount/ReimbursementAccountPage.js  | 6 +++---
 src/pages/ReimbursementAccount/RequestorOnfidoStep.js       | 2 +-
 src/pages/ReimbursementAccount/RequestorStep.js             | 2 +-
 src/pages/ReimbursementAccount/ValidationStep.js            | 2 +-
 src/pages/ReportDetailsPage.js                              | 2 +-
 src/pages/ReportParticipantsPage.js                         | 2 +-
 src/pages/ReportWelcomeMessagePage.js                       | 2 +-
 src/pages/RoomInvitePage.js                                 | 2 +-
 src/pages/RoomMembersPage.js                                | 2 +-
 src/pages/TeachersUnite/ImTeacherUpdateEmailPage.js         | 2 +-
 src/pages/TeachersUnite/IntroSchoolPrincipalPage.js         | 2 +-
 src/pages/TeachersUnite/KnowATeacherPage.js                 | 2 +-
 src/pages/TeachersUnite/SaveTheWorldPage.js                 | 2 +-
 src/pages/home/HeaderView.js                                | 2 +-
 src/pages/home/ReportScreen.js                              | 2 +-
 .../FloatingMessageCounterContainer/index.android.js        | 2 +-
 .../FloatingMessageCounterContainer/index.js                | 2 +-
 src/pages/home/report/FloatingMessageCounter/index.js       | 2 +-
 src/pages/home/report/LinkPreviewer.js                      | 2 +-
 .../home/report/ListBoundaryLoader/ListBoundaryLoader.js    | 2 +-
 src/pages/home/report/ParticipantLocalTime.js               | 2 +-
 src/pages/home/report/ReactionList/BaseReactionList.js      | 2 +-
 src/pages/home/report/ReactionList/HeaderReactionList.js    | 2 +-
 .../ReportActionCompose/AttachmentPickerWithMenuItems.js    | 2 +-
 .../ComposerWithSuggestions/ComposerWithSuggestions.js      | 2 +-
 .../home/report/ReportActionCompose/ReportActionCompose.js  | 2 +-
 src/pages/home/report/ReportActionCompose/SendButton.js     | 2 +-
 src/pages/home/report/ReportActionItem.js                   | 2 +-
 src/pages/home/report/ReportActionItemBasicMessage.tsx      | 2 +-
 src/pages/home/report/ReportActionItemCreated.js            | 2 +-
 src/pages/home/report/ReportActionItemDate.js               | 2 +-
 src/pages/home/report/ReportActionItemDraft.tsx             | 2 +-
 src/pages/home/report/ReportActionItemFragment.js           | 2 +-
 src/pages/home/report/ReportActionItemGrouped.js            | 2 +-
 src/pages/home/report/ReportActionItemMessage.js            | 2 +-
 src/pages/home/report/ReportActionItemMessageEdit.js        | 2 +-
 src/pages/home/report/ReportActionItemParentAction.js       | 2 +-
 src/pages/home/report/ReportActionItemSingle.js             | 2 +-
 src/pages/home/report/ReportActionItemThread.js             | 2 +-
 src/pages/home/report/ReportActionsList.js                  | 2 +-
 src/pages/home/report/ReportDropUI.js                       | 2 +-
 src/pages/home/report/ReportFooter.js                       | 2 +-
 src/pages/home/report/ReportTypingIndicator.js              | 2 +-
 src/pages/home/report/comment/AttachmentCommentFragment.js  | 2 +-
 src/pages/home/report/comment/TextCommentFragment.js        | 2 +-
 src/pages/home/sidebar/AvatarWithOptionalStatus.js          | 2 +-
 src/pages/home/sidebar/SidebarLinks.js                      | 2 +-
 src/pages/home/sidebar/SidebarLinksData.js                  | 2 +-
 src/pages/home/sidebar/SidebarScreen/BaseSidebarScreen.js   | 2 +-
 .../sidebar/SidebarScreen/FloatingActionButtonAndPopover.js | 2 +-
 src/pages/home/sidebar/SignInButton.js                      | 2 +-
 src/pages/iou/MoneyRequestCategoryPage.js                   | 2 +-
 src/pages/iou/MoneyRequestDatePage.js                       | 2 +-
 src/pages/iou/MoneyRequestDescriptionPage.js                | 2 +-
 src/pages/iou/MoneyRequestMerchantPage.js                   | 2 +-
 src/pages/iou/MoneyRequestSelectorPage.js                   | 2 +-
 src/pages/iou/MoneyRequestTagPage.js                        | 2 +-
 src/pages/iou/ReceiptDropUI.js                              | 2 +-
 src/pages/iou/ReceiptSelector/index.js                      | 2 +-
 src/pages/iou/ReceiptSelector/index.native.js               | 2 +-
 src/pages/iou/SplitBillDetailsPage.js                       | 2 +-
 src/pages/iou/WaypointEditor.js                             | 2 +-
 src/pages/iou/steps/MoneyRequestAmountForm.js               | 2 +-
 src/pages/iou/steps/MoneyRequestConfirmPage.js              | 2 +-
 .../MoneyRequestParticipantsPage.js                         | 2 +-
 .../MoneyRequestParticipantsSelector.js                     | 2 +-
 src/pages/iou/steps/NewRequestAmountPage.js                 | 2 +-
 src/pages/settings/AboutPage/AboutPage.js                   | 2 +-
 src/pages/settings/AppDownloadLinks.js                      | 2 +-
 src/pages/settings/InitialSettingsPage.js                   | 2 +-
 src/pages/settings/Preferences/PreferencesPage.js           | 2 +-
 src/pages/settings/Preferences/PriorityModePage.js          | 2 +-
 src/pages/settings/Preferences/ThemePage.js                 | 2 +-
 src/pages/settings/Profile/Contacts/ContactMethodsPage.js   | 2 +-
 src/pages/settings/Profile/Contacts/NewContactMethodPage.js | 2 +-
 .../Contacts/ValidateCodeForm/BaseValidateCodeForm.js       | 2 +-
 src/pages/settings/Profile/CustomStatus/StatusPage.js       | 2 +-
 src/pages/settings/Profile/CustomStatus/StatusSetPage.js    | 2 +-
 src/pages/settings/Profile/DisplayNamePage.js               | 2 +-
 src/pages/settings/Profile/LoungeAccessPage.js              | 2 +-
 src/pages/settings/Profile/PersonalDetails/AddressPage.js   | 2 +-
 .../settings/Profile/PersonalDetails/DateOfBirthPage.js     | 2 +-
 src/pages/settings/Profile/PersonalDetails/LegalNamePage.js | 2 +-
 .../Profile/PersonalDetails/PersonalDetailsInitialPage.js   | 2 +-
 src/pages/settings/Profile/ProfilePage.js                   | 2 +-
 src/pages/settings/Profile/PronounsPage.js                  | 2 +-
 src/pages/settings/Profile/TimezoneInitialPage.js           | 2 +-
 src/pages/settings/Report/ReportSettingsPage.js             | 2 +-
 src/pages/settings/Report/RoomNamePage.js                   | 2 +-
 src/pages/settings/Security/CloseAccountPage.js             | 2 +-
 src/pages/settings/Security/SecuritySettingsPage.js         | 2 +-
 .../Security/TwoFactorAuth/StepWrapper/StepWrapper.js       | 2 +-
 .../settings/Security/TwoFactorAuth/Steps/CodesStep.js      | 2 +-
 .../settings/Security/TwoFactorAuth/Steps/DisabledStep.js   | 2 +-
 .../settings/Security/TwoFactorAuth/Steps/EnabledStep.js    | 2 +-
 .../settings/Security/TwoFactorAuth/Steps/VerifyStep.js     | 2 +-
 src/pages/settings/Wallet/ActivatePhysicalCardPage.js       | 2 +-
 src/pages/settings/Wallet/AddDebitCardPage.js               | 2 +-
 src/pages/settings/Wallet/Card/BaseGetPhysicalCard.js       | 2 +-
 src/pages/settings/Wallet/Card/GetPhysicalCardConfirm.js    | 2 +-
 src/pages/settings/Wallet/Card/GetPhysicalCardName.js       | 2 +-
 src/pages/settings/Wallet/Card/GetPhysicalCardPhone.js      | 2 +-
 src/pages/settings/Wallet/ChooseTransferAccountPage.js      | 2 +-
 src/pages/settings/Wallet/DangerCardSection.js              | 2 +-
 src/pages/settings/Wallet/ExpensifyCardPage.js              | 2 +-
 src/pages/settings/Wallet/PaymentMethodList.js              | 2 +-
 src/pages/settings/Wallet/ReportCardLostPage.js             | 2 +-
 src/pages/settings/Wallet/ReportVirtualCardFraudPage.js     | 2 +-
 src/pages/settings/Wallet/TransferBalancePage.js            | 2 +-
 src/pages/settings/Wallet/WalletPage/CardDetails.js         | 2 +-
 src/pages/settings/Wallet/WalletPage/WalletPage.js          | 2 +-
 src/pages/signin/ChangeExpensifyLoginLink.js                | 2 +-
 src/pages/signin/ChooseSSOOrMagicCode.js                    | 2 +-
 src/pages/signin/EmailDeliveryFailurePage.js                | 2 +-
 src/pages/signin/Licenses.js                                | 2 +-
 src/pages/signin/LoginForm/BaseLoginForm.js                 | 2 +-
 src/pages/signin/SignInHeroCopy.js                          | 2 +-
 src/pages/signin/SignInHeroImage.js                         | 2 +-
 src/pages/signin/SignInModal.js                             | 2 +-
 src/pages/signin/SignInPage.js                              | 2 +-
 src/pages/signin/SignInPageHero.js                          | 2 +-
 .../SignInPageLayout/BackgroundImage/index.android.js       | 2 +-
 src/pages/signin/SignInPageLayout/BackgroundImage/index.js  | 2 +-
 src/pages/signin/SignInPageLayout/Footer.js                 | 2 +-
 src/pages/signin/SignInPageLayout/SignInPageContent.js      | 2 +-
 src/pages/signin/SignInPageLayout/index.js                  | 2 +-
 src/pages/signin/Socials.js                                 | 2 +-
 src/pages/signin/Terms.js                                   | 2 +-
 src/pages/signin/ThirdPartySignInPage.js                    | 2 +-
 src/pages/signin/UnlinkLoginForm.js                         | 2 +-
 src/pages/signin/ValidateCodeForm/BaseValidateCodeForm.js   | 2 +-
 src/pages/tasks/NewTaskDescriptionPage.js                   | 2 +-
 src/pages/tasks/NewTaskDetailsPage.js                       | 2 +-
 src/pages/tasks/NewTaskPage.js                              | 2 +-
 src/pages/tasks/NewTaskTitlePage.js                         | 2 +-
 src/pages/tasks/TaskAssigneeSelectorModal.js                | 2 +-
 src/pages/tasks/TaskDescriptionPage.js                      | 2 +-
 src/pages/tasks/TaskShareDestinationSelectorModal.js        | 2 +-
 src/pages/tasks/TaskTitlePage.js                            | 2 +-
 src/pages/workspace/WorkspaceInitialPage.js                 | 2 +-
 src/pages/workspace/WorkspaceInvitePage.js                  | 2 +-
 src/pages/workspace/WorkspaceMembersPage.js                 | 2 +-
 src/pages/workspace/WorkspaceNewRoomPage.js                 | 2 +-
 src/pages/workspace/WorkspacePageWithSections.js            | 2 +-
 src/pages/workspace/WorkspaceResetBankAccountModal.js       | 2 +-
 src/pages/workspace/WorkspaceSettingsPage.js                | 2 +-
 src/pages/workspace/WorkspacesListPage.js                   | 2 +-
 src/pages/workspace/bills/WorkspaceBillsFirstSection.js     | 2 +-
 src/pages/workspace/bills/WorkspaceBillsNoVBAView.js        | 2 +-
 src/pages/workspace/bills/WorkspaceBillsVBAView.js          | 2 +-
 src/pages/workspace/card/WorkspaceCardNoVBAView.js          | 2 +-
 src/pages/workspace/card/WorkspaceCardVBANoECardView.js     | 2 +-
 src/pages/workspace/card/WorkspaceCardVBAWithECardView.js   | 2 +-
 .../workspace/invoices/WorkspaceInvoicesFirstSection.js     | 2 +-
 src/pages/workspace/invoices/WorkspaceInvoicesNoVBAView.js  | 2 +-
 src/pages/workspace/invoices/WorkspaceInvoicesVBAView.js    | 2 +-
 src/pages/workspace/reimburse/WorkspaceReimburseSection.js  | 2 +-
 src/pages/workspace/reimburse/WorkspaceReimburseView.js     | 2 +-
 src/pages/workspace/travel/WorkspaceTravelNoVBAView.js      | 2 +-
 src/pages/workspace/travel/WorkspaceTravelVBAView.js        | 2 +-
 441 files changed, 443 insertions(+), 443 deletions(-)
 rename src/{styles => hooks}/useThemeStyles.ts (84%)

diff --git a/src/components/AddPlaidBankAccount.js b/src/components/AddPlaidBankAccount.js
index ef5025838e6d..2b007b3180ff 100644
--- a/src/components/AddPlaidBankAccount.js
+++ b/src/components/AddPlaidBankAccount.js
@@ -6,11 +6,11 @@ import {withOnyx} from 'react-native-onyx';
 import _ from 'underscore';
 import useLocalize from '@hooks/useLocalize';
 import useNetwork from '@hooks/useNetwork';
+import useThemeStyles from '@hooks/useThemeStyles';
 import KeyboardShortcut from '@libs/KeyboardShortcut';
 import Log from '@libs/Log';
 import {plaidDataPropTypes} from '@pages/ReimbursementAccount/plaidDataPropTypes';
 import useTheme from '@styles/theme/useTheme';
-import useThemeStyles from '@styles/useThemeStyles';
 import * as App from '@userActions/App';
 import * as BankAccounts from '@userActions/BankAccounts';
 import CONST from '@src/CONST';
diff --git a/src/components/AddressForm.js b/src/components/AddressForm.js
index 98650f94232b..aca46667ad2e 100644
--- a/src/components/AddressForm.js
+++ b/src/components/AddressForm.js
@@ -5,9 +5,9 @@ import React, {useCallback} from 'react';
 import {View} from 'react-native';
 import _ from 'underscore';
 import useLocalize from '@hooks/useLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
 import Navigation from '@libs/Navigation/Navigation';
 import * as ValidationUtils from '@libs/ValidationUtils';
-import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 import AddressSearch from './AddressSearch';
 import CountrySelector from './CountrySelector';
diff --git a/src/components/AddressSearch/CurrentLocationButton.js b/src/components/AddressSearch/CurrentLocationButton.js
index 87c6a710100a..61217533a43a 100644
--- a/src/components/AddressSearch/CurrentLocationButton.js
+++ b/src/components/AddressSearch/CurrentLocationButton.js
@@ -6,9 +6,9 @@ import * as Expensicons from '@components/Icon/Expensicons';
 import PressableWithFeedback from '@components/Pressable/PressableWithFeedback';
 import useLocalize from '@hooks/useLocalize';
 import useStyleUtils from '@hooks/useStyleUtils';
+import useThemeStyles from '@hooks/useThemeStyles';
 import getButtonState from '@libs/getButtonState';
 import colors from '@styles/colors';
-import useThemeStyles from '@styles/useThemeStyles';
 
 const propTypes = {
     /** Callback that runs when location button is clicked */
diff --git a/src/components/AddressSearch/index.js b/src/components/AddressSearch/index.js
index e59f92635f88..c8e3d78e77e4 100644
--- a/src/components/AddressSearch/index.js
+++ b/src/components/AddressSearch/index.js
@@ -11,12 +11,12 @@ import {withNetwork} from '@components/OnyxProvider';
 import TextInput from '@components/TextInput';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
 import useStyleUtils from '@hooks/useStyleUtils';
+import useThemeStyles from '@hooks/useThemeStyles';
 import * as ApiUtils from '@libs/ApiUtils';
 import compose from '@libs/compose';
 import getCurrentPosition from '@libs/getCurrentPosition';
 import * as GooglePlacesUtils from '@libs/GooglePlacesUtils';
 import useTheme from '@styles/theme/useTheme';
-import useThemeStyles from '@styles/useThemeStyles';
 import variables from '@styles/variables';
 import CONST from '@src/CONST';
 import CurrentLocationButton from './CurrentLocationButton';
diff --git a/src/components/AmountTextInput.js b/src/components/AmountTextInput.js
index bd88712432a8..572182c86aef 100644
--- a/src/components/AmountTextInput.js
+++ b/src/components/AmountTextInput.js
@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import useThemeStyles from '@styles/useThemeStyles';
+import useThemeStyles from '@hooks/useThemeStyles';
 import CONST from '@src/CONST';
 import refPropTypes from './refPropTypes';
 import TextInput from './TextInput';
diff --git a/src/components/AnchorForAttachmentsOnly/index.native.js b/src/components/AnchorForAttachmentsOnly/index.native.js
index e3c7a71f2304..3277d51ec058 100644
--- a/src/components/AnchorForAttachmentsOnly/index.native.js
+++ b/src/components/AnchorForAttachmentsOnly/index.native.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import useThemeStyles from '@styles/useThemeStyles';
+import useThemeStyles from '@hooks/useThemeStyles';
 import * as anchorForAttachmentsOnlyPropTypes from './anchorForAttachmentsOnlyPropTypes';
 import BaseAnchorForAttachmentsOnly from './BaseAnchorForAttachmentsOnly';
 
diff --git a/src/components/AnchorForCommentsOnly/BaseAnchorForCommentsOnly.js b/src/components/AnchorForCommentsOnly/BaseAnchorForCommentsOnly.js
index 91bc47a8af30..281f3ce819c3 100644
--- a/src/components/AnchorForCommentsOnly/BaseAnchorForCommentsOnly.js
+++ b/src/components/AnchorForCommentsOnly/BaseAnchorForCommentsOnly.js
@@ -8,11 +8,11 @@ import PressableWithSecondaryInteraction from '@components/PressableWithSecondar
 import Text from '@components/Text';
 import Tooltip from '@components/Tooltip';
 import useStyleUtils from '@hooks/useStyleUtils';
+import useThemeStyles from '@hooks/useThemeStyles';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import * as DeviceCapabilities from '@libs/DeviceCapabilities';
 import * as ContextMenuActions from '@pages/home/report/ContextMenu/ContextMenuActions';
 import * as ReportActionContextMenu from '@pages/home/report/ContextMenu/ReportActionContextMenu';
-import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 import {propTypes as anchorForCommentsOnlyPropTypes} from './anchorForCommentsOnlyPropTypes';
 
diff --git a/src/components/AnimatedStep/index.tsx b/src/components/AnimatedStep/index.tsx
index 1a87592cba9b..e2b9952c0617 100644
--- a/src/components/AnimatedStep/index.tsx
+++ b/src/components/AnimatedStep/index.tsx
@@ -1,8 +1,8 @@
 import React, {useMemo} from 'react';
 import {StyleProp, ViewStyle} from 'react-native';
 import * as Animatable from 'react-native-animatable';
+import useThemeStyles from '@hooks/useThemeStyles';
 import useNativeDriver from '@libs/useNativeDriver';
-import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 import ChildrenProps from '@src/types/utils/ChildrenProps';
 import {AnimationDirection} from './AnimatedStepContext';
diff --git a/src/components/AnonymousReportFooter.tsx b/src/components/AnonymousReportFooter.tsx
index 65dc813a829d..877ca9444661 100644
--- a/src/components/AnonymousReportFooter.tsx
+++ b/src/components/AnonymousReportFooter.tsx
@@ -3,7 +3,7 @@ import {Text, View} from 'react-native';
 import {OnyxCollection} from 'react-native-onyx';
 import {OnyxEntry} from 'react-native-onyx/lib/types';
 import useLocalize from '@hooks/useLocalize';
-import useThemeStyles from '@styles/useThemeStyles';
+import useThemeStyles from '@hooks/useThemeStyles';
 import * as Session from '@userActions/Session';
 import {PersonalDetails, Report} from '@src/types/onyx';
 import AvatarWithDisplayName from './AvatarWithDisplayName';
diff --git a/src/components/ArchivedReportFooter.tsx b/src/components/ArchivedReportFooter.tsx
index 3187bf3604e8..b354e3f56c36 100644
--- a/src/components/ArchivedReportFooter.tsx
+++ b/src/components/ArchivedReportFooter.tsx
@@ -2,10 +2,10 @@ import lodashEscape from 'lodash/escape';
 import React from 'react';
 import {OnyxEntry, withOnyx} from 'react-native-onyx';
 import useLocalize from '@hooks/useLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
 import * as PersonalDetailsUtils from '@libs/PersonalDetailsUtils';
 import * as ReportActionsUtils from '@libs/ReportActionsUtils';
 import * as ReportUtils from '@libs/ReportUtils';
-import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import type {PersonalDetails, Report, ReportAction} from '@src/types/onyx';
diff --git a/src/components/AttachmentModal.js b/src/components/AttachmentModal.js
index 62ce151232f1..c55b9799e44a 100755
--- a/src/components/AttachmentModal.js
+++ b/src/components/AttachmentModal.js
@@ -9,6 +9,7 @@ import _ from 'underscore';
 import useLocalize from '@hooks/useLocalize';
 import useNetwork from '@hooks/useNetwork';
 import useStyleUtils from '@hooks/useStyleUtils';
+import useThemeStyles from '@hooks/useThemeStyles';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import addEncryptedAuthTokenToURL from '@libs/addEncryptedAuthTokenToURL';
 import compose from '@libs/compose';
@@ -21,7 +22,6 @@ import * as TransactionUtils from '@libs/TransactionUtils';
 import useNativeDriver from '@libs/useNativeDriver';
 import reportPropTypes from '@pages/reportPropTypes';
 import useTheme from '@styles/theme/useTheme';
-import useThemeStyles from '@styles/useThemeStyles';
 import * as IOU from '@userActions/IOU';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
diff --git a/src/components/AttachmentPicker/index.native.js b/src/components/AttachmentPicker/index.native.js
index 5b955ee69dd3..59928b80c4b1 100644
--- a/src/components/AttachmentPicker/index.native.js
+++ b/src/components/AttachmentPicker/index.native.js
@@ -12,9 +12,9 @@ import Popover from '@components/Popover';
 import useArrowKeyFocusManager from '@hooks/useArrowKeyFocusManager';
 import useKeyboardShortcut from '@hooks/useKeyboardShortcut';
 import useLocalize from '@hooks/useLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import * as FileUtils from '@libs/fileDownload/FileUtils';
-import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 import {defaultProps as baseDefaultProps, propTypes as basePropTypes} from './attachmentPickerPropTypes';
 import launchCamera from './launchCamera';
diff --git a/src/components/Attachments/AttachmentCarousel/AttachmentCarouselCellRenderer.js b/src/components/Attachments/AttachmentCarousel/AttachmentCarouselCellRenderer.js
index dd2713a38b2b..f4cbffc0e1e4 100644
--- a/src/components/Attachments/AttachmentCarousel/AttachmentCarouselCellRenderer.js
+++ b/src/components/Attachments/AttachmentCarousel/AttachmentCarouselCellRenderer.js
@@ -1,8 +1,8 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import {PixelRatio, View} from 'react-native';
+import useThemeStyles from '@hooks/useThemeStyles';
 import useWindowDimensions from '@hooks/useWindowDimensions';
-import useThemeStyles from '@styles/useThemeStyles';
 
 const propTypes = {
     /** Cell Container styles */
diff --git a/src/components/Attachments/AttachmentCarousel/CarouselButtons.js b/src/components/Attachments/AttachmentCarousel/CarouselButtons.js
index 52d175ff37fb..d210c0205346 100644
--- a/src/components/Attachments/AttachmentCarousel/CarouselButtons.js
+++ b/src/components/Attachments/AttachmentCarousel/CarouselButtons.js
@@ -7,9 +7,9 @@ import Button from '@components/Button';
 import * as Expensicons from '@components/Icon/Expensicons';
 import Tooltip from '@components/Tooltip';
 import useLocalize from '@hooks/useLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import useTheme from '@styles/theme/useTheme';
-import useThemeStyles from '@styles/useThemeStyles';
 
 const propTypes = {
     /** Where the arrows should be visible */
diff --git a/src/components/Attachments/AttachmentCarousel/CarouselItem.js b/src/components/Attachments/AttachmentCarousel/CarouselItem.js
index fbc49590d5ae..15be6d2157a0 100644
--- a/src/components/Attachments/AttachmentCarousel/CarouselItem.js
+++ b/src/components/Attachments/AttachmentCarousel/CarouselItem.js
@@ -8,8 +8,8 @@ import PressableWithoutFeedback from '@components/Pressable/PressableWithoutFeed
 import SafeAreaConsumer from '@components/SafeAreaConsumer';
 import Text from '@components/Text';
 import useLocalize from '@hooks/useLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
 import ReportAttachmentsContext from '@pages/home/report/ReportAttachmentsContext';
-import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 
 const propTypes = {
diff --git a/src/components/Attachments/AttachmentCarousel/Pager/ImageTransformer.js b/src/components/Attachments/AttachmentCarousel/Pager/ImageTransformer.js
index cc1e20cb44e0..4bce03b6f25e 100644
--- a/src/components/Attachments/AttachmentCarousel/Pager/ImageTransformer.js
+++ b/src/components/Attachments/AttachmentCarousel/Pager/ImageTransformer.js
@@ -15,7 +15,7 @@ import Animated, {
     withDecay,
     withSpring,
 } from 'react-native-reanimated';
-import useThemeStyles from '@styles/useThemeStyles';
+import useThemeStyles from '@hooks/useThemeStyles';
 import AttachmentCarouselPagerContext from './AttachmentCarouselPagerContext';
 import ImageWrapper from './ImageWrapper';
 
diff --git a/src/components/Attachments/AttachmentCarousel/Pager/ImageWrapper.js b/src/components/Attachments/AttachmentCarousel/Pager/ImageWrapper.js
index b0a8b1f0d083..b639eb291bb1 100644
--- a/src/components/Attachments/AttachmentCarousel/Pager/ImageWrapper.js
+++ b/src/components/Attachments/AttachmentCarousel/Pager/ImageWrapper.js
@@ -2,7 +2,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import {StyleSheet} from 'react-native';
 import Animated from 'react-native-reanimated';
-import useThemeStyles from '@styles/useThemeStyles';
+import useThemeStyles from '@hooks/useThemeStyles';
 
 const imageWrapperPropTypes = {
     children: PropTypes.node.isRequired,
diff --git a/src/components/Attachments/AttachmentCarousel/Pager/index.js b/src/components/Attachments/AttachmentCarousel/Pager/index.js
index 6913941ed726..15c98ece62cb 100644
--- a/src/components/Attachments/AttachmentCarousel/Pager/index.js
+++ b/src/components/Attachments/AttachmentCarousel/Pager/index.js
@@ -6,7 +6,7 @@ import PagerView from 'react-native-pager-view';
 import Animated, {runOnJS, useAnimatedProps, useAnimatedReaction, useEvent, useHandler, useSharedValue} from 'react-native-reanimated';
 import _ from 'underscore';
 import refPropTypes from '@components/refPropTypes';
-import useThemeStyles from '@styles/useThemeStyles';
+import useThemeStyles from '@hooks/useThemeStyles';
 import AttachmentCarouselPagerContext from './AttachmentCarouselPagerContext';
 
 const AnimatedPagerView = Animated.createAnimatedComponent(createNativeWrapper(PagerView));
diff --git a/src/components/Attachments/AttachmentCarousel/index.js b/src/components/Attachments/AttachmentCarousel/index.js
index 141e619e489e..6fb7450e78aa 100644
--- a/src/components/Attachments/AttachmentCarousel/index.js
+++ b/src/components/Attachments/AttachmentCarousel/index.js
@@ -7,10 +7,10 @@ import BlockingView from '@components/BlockingViews/BlockingView';
 import * as Illustrations from '@components/Icon/Illustrations';
 import withLocalize from '@components/withLocalize';
 import withWindowDimensions from '@components/withWindowDimensions';
+import useThemeStyles from '@hooks/useThemeStyles';
 import compose from '@libs/compose';
 import * as DeviceCapabilities from '@libs/DeviceCapabilities';
 import Navigation from '@libs/Navigation/Navigation';
-import useThemeStyles from '@styles/useThemeStyles';
 import variables from '@styles/variables';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
diff --git a/src/components/Attachments/AttachmentCarousel/index.native.js b/src/components/Attachments/AttachmentCarousel/index.native.js
index 6bf4e63c01e7..9eee0bb3eeff 100644
--- a/src/components/Attachments/AttachmentCarousel/index.native.js
+++ b/src/components/Attachments/AttachmentCarousel/index.native.js
@@ -6,9 +6,9 @@ import _ from 'underscore';
 import BlockingView from '@components/BlockingViews/BlockingView';
 import * as Illustrations from '@components/Icon/Illustrations';
 import withLocalize from '@components/withLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
 import compose from '@libs/compose';
 import Navigation from '@libs/Navigation/Navigation';
-import useThemeStyles from '@styles/useThemeStyles';
 import variables from '@styles/variables';
 import ONYXKEYS from '@src/ONYXKEYS';
 import {defaultProps, propTypes} from './attachmentCarouselPropTypes';
diff --git a/src/components/Attachments/AttachmentView/AttachmentViewImage/index.js b/src/components/Attachments/AttachmentView/AttachmentViewImage/index.js
index 22bcf259ed77..6c89d7221c8b 100755
--- a/src/components/Attachments/AttachmentView/AttachmentViewImage/index.js
+++ b/src/components/Attachments/AttachmentView/AttachmentViewImage/index.js
@@ -2,8 +2,8 @@ import React, {memo} from 'react';
 import ImageView from '@components/ImageView';
 import PressableWithoutFeedback from '@components/Pressable/PressableWithoutFeedback';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
 import compose from '@libs/compose';
-import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 import {attachmentViewImageDefaultProps, attachmentViewImagePropTypes} from './propTypes';
 
diff --git a/src/components/Attachments/AttachmentView/AttachmentViewImage/index.native.js b/src/components/Attachments/AttachmentView/AttachmentViewImage/index.native.js
index fc443e5ea17b..4a451ccf60d2 100755
--- a/src/components/Attachments/AttachmentView/AttachmentViewImage/index.native.js
+++ b/src/components/Attachments/AttachmentView/AttachmentViewImage/index.native.js
@@ -3,8 +3,8 @@ import AttachmentCarouselPage from '@components/Attachments/AttachmentCarousel/P
 import ImageView from '@components/ImageView';
 import PressableWithoutFeedback from '@components/Pressable/PressableWithoutFeedback';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
 import compose from '@libs/compose';
-import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 import {attachmentViewImageDefaultProps, attachmentViewImagePropTypes} from './propTypes';
 
diff --git a/src/components/Attachments/AttachmentView/AttachmentViewPdf/index.android.js b/src/components/Attachments/AttachmentView/AttachmentViewPdf/index.android.js
index b9dd65e2716b..308d3cf2c0ba 100644
--- a/src/components/Attachments/AttachmentView/AttachmentViewPdf/index.android.js
+++ b/src/components/Attachments/AttachmentView/AttachmentViewPdf/index.android.js
@@ -3,7 +3,7 @@ import {StyleSheet, View} from 'react-native';
 import {Gesture, GestureDetector} from 'react-native-gesture-handler';
 import Animated, {useSharedValue} from 'react-native-reanimated';
 import AttachmentCarouselPagerContext from '@components/Attachments/AttachmentCarousel/Pager/AttachmentCarouselPagerContext';
-import useThemeStyles from '@styles/useThemeStyles';
+import useThemeStyles from '@hooks/useThemeStyles';
 import BaseAttachmentViewPdf from './BaseAttachmentViewPdf';
 import {attachmentViewPdfDefaultProps, attachmentViewPdfPropTypes} from './propTypes';
 
diff --git a/src/components/Attachments/AttachmentView/index.js b/src/components/Attachments/AttachmentView/index.js
index 5b2d3dbf3860..fc2568a708bd 100755
--- a/src/components/Attachments/AttachmentView/index.js
+++ b/src/components/Attachments/AttachmentView/index.js
@@ -13,11 +13,11 @@ import Tooltip from '@components/Tooltip';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
 import useNetwork from '@hooks/useNetwork';
 import useStyleUtils from '@hooks/useStyleUtils';
+import useThemeStyles from '@hooks/useThemeStyles';
 import addEncryptedAuthTokenToURL from '@libs/addEncryptedAuthTokenToURL';
 import compose from '@libs/compose';
 import * as TransactionUtils from '@libs/TransactionUtils';
 import useTheme from '@styles/theme/useTheme';
-import useThemeStyles from '@styles/useThemeStyles';
 import cursor from '@styles/utils/cursor';
 import variables from '@styles/variables';
 import ONYXKEYS from '@src/ONYXKEYS';
diff --git a/src/components/AutoCompleteSuggestions/BaseAutoCompleteSuggestions.tsx b/src/components/AutoCompleteSuggestions/BaseAutoCompleteSuggestions.tsx
index a804ac07c3ca..4ad3d45544b0 100644
--- a/src/components/AutoCompleteSuggestions/BaseAutoCompleteSuggestions.tsx
+++ b/src/components/AutoCompleteSuggestions/BaseAutoCompleteSuggestions.tsx
@@ -6,7 +6,7 @@ import {ScrollView} from 'react-native-gesture-handler';
 import Animated, {Easing, FadeOutDown, useAnimatedStyle, useSharedValue, withTiming} from 'react-native-reanimated';
 import PressableWithFeedback from '@components/Pressable/PressableWithFeedback';
 import useStyleUtils from '@hooks/useStyleUtils';
-import useThemeStyles from '@styles/useThemeStyles';
+import useThemeStyles from '@hooks/useThemeStyles';
 import CONST from '@src/CONST';
 import viewForwardedRef from '@src/types/utils/viewForwardedRef';
 import type {AutoCompleteSuggestionsProps, RenderSuggestionMenuItemProps} from './types';
diff --git a/src/components/AutoEmailLink.js b/src/components/AutoEmailLink.js
index bffd2493aa5d..af581525ab69 100644
--- a/src/components/AutoEmailLink.js
+++ b/src/components/AutoEmailLink.js
@@ -2,7 +2,7 @@ import {CONST} from 'expensify-common/lib/CONST';
 import PropTypes from 'prop-types';
 import React from 'react';
 import _ from 'underscore';
-import useThemeStyles from '@styles/useThemeStyles';
+import useThemeStyles from '@hooks/useThemeStyles';
 import Text from './Text';
 import TextLink from './TextLink';
 
diff --git a/src/components/AutoUpdateTime.js b/src/components/AutoUpdateTime.js
index 1970839ec320..b9aa3446fa12 100644
--- a/src/components/AutoUpdateTime.js
+++ b/src/components/AutoUpdateTime.js
@@ -5,8 +5,8 @@
 import PropTypes from 'prop-types';
 import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react';
 import {View} from 'react-native';
+import useThemeStyles from '@hooks/useThemeStyles';
 import DateUtils from '@libs/DateUtils';
-import useThemeStyles from '@styles/useThemeStyles';
 import Text from './Text';
 import withLocalize, {withLocalizePropTypes} from './withLocalize';
 
diff --git a/src/components/Avatar.tsx b/src/components/Avatar.tsx
index f90c245056f8..fda5c4ace8a7 100644
--- a/src/components/Avatar.tsx
+++ b/src/components/Avatar.tsx
@@ -2,10 +2,10 @@ import React, {useEffect, useState} from 'react';
 import {StyleProp, View, ViewStyle} from 'react-native';
 import useNetwork from '@hooks/useNetwork';
 import useStyleUtils from '@hooks/useStyleUtils';
+import useThemeStyles from '@hooks/useThemeStyles';
 import * as ReportUtils from '@libs/ReportUtils';
 import {AvatarSource} from '@libs/UserUtils';
 import useTheme from '@styles/theme/useTheme';
-import useThemeStyles from '@styles/useThemeStyles';
 import type {AvatarSizeName} from '@styles/utils';
 import CONST from '@src/CONST';
 import {AvatarType} from '@src/types/onyx/OnyxCommon';
diff --git a/src/components/AvatarCropModal/AvatarCropModal.js b/src/components/AvatarCropModal/AvatarCropModal.js
index 3250dedda39f..5c70c712fc86 100644
--- a/src/components/AvatarCropModal/AvatarCropModal.js
+++ b/src/components/AvatarCropModal/AvatarCropModal.js
@@ -16,10 +16,10 @@ import Tooltip from '@components/Tooltip';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
 import withWindowDimensions, {windowDimensionsPropTypes} from '@components/withWindowDimensions';
 import useStyleUtils from '@hooks/useStyleUtils';
+import useThemeStyles from '@hooks/useThemeStyles';
 import compose from '@libs/compose';
 import cropOrRotateImage from '@libs/cropOrRotateImage';
 import useTheme from '@styles/theme/useTheme';
-import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 import ImageCropView from './ImageCropView';
 import Slider from './Slider';
diff --git a/src/components/AvatarCropModal/ImageCropView.js b/src/components/AvatarCropModal/ImageCropView.js
index 9259d4377c3f..3f6263cf7b95 100644
--- a/src/components/AvatarCropModal/ImageCropView.js
+++ b/src/components/AvatarCropModal/ImageCropView.js
@@ -6,8 +6,8 @@ import Animated, {interpolate, useAnimatedStyle} from 'react-native-reanimated';
 import Icon from '@components/Icon';
 import * as Expensicons from '@components/Icon/Expensicons';
 import useStyleUtils from '@hooks/useStyleUtils';
+import useThemeStyles from '@hooks/useThemeStyles';
 import ControlSelection from '@libs/ControlSelection';
-import useThemeStyles from '@styles/useThemeStyles';
 import gestureHandlerPropTypes from './gestureHandlerPropTypes';
 
 const propTypes = {
diff --git a/src/components/AvatarCropModal/Slider.js b/src/components/AvatarCropModal/Slider.js
index 9df6ac3c0498..ba2e1471ce9e 100644
--- a/src/components/AvatarCropModal/Slider.js
+++ b/src/components/AvatarCropModal/Slider.js
@@ -5,8 +5,8 @@ import {PanGestureHandler} from 'react-native-gesture-handler';
 import Animated, {useAnimatedStyle} from 'react-native-reanimated';
 import Tooltip from '@components/Tooltip';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
 import ControlSelection from '@libs/ControlSelection';
-import useThemeStyles from '@styles/useThemeStyles';
 import gestureHandlerPropTypes from './gestureHandlerPropTypes';
 
 const propTypes = {
diff --git a/src/components/AvatarWithDisplayName.tsx b/src/components/AvatarWithDisplayName.tsx
index 8033d7dfb7bf..ee0583540576 100644
--- a/src/components/AvatarWithDisplayName.tsx
+++ b/src/components/AvatarWithDisplayName.tsx
@@ -3,11 +3,11 @@ import {View} from 'react-native';
 import {OnyxCollection, OnyxEntry, withOnyx} from 'react-native-onyx';
 import {ValueOf} from 'type-fest';
 import useStyleUtils from '@hooks/useStyleUtils';
+import useThemeStyles from '@hooks/useThemeStyles';
 import Navigation from '@libs/Navigation/Navigation';
 import * as OptionsListUtils from '@libs/OptionsListUtils';
 import * as ReportUtils from '@libs/ReportUtils';
 import useTheme from '@styles/theme/useTheme';
-import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
diff --git a/src/components/AvatarWithImagePicker.js b/src/components/AvatarWithImagePicker.js
index cc7f1137901c..0f02e47ac1ac 100644
--- a/src/components/AvatarWithImagePicker.js
+++ b/src/components/AvatarWithImagePicker.js
@@ -4,12 +4,12 @@ import React, {useEffect, useRef, useState} from 'react';
 import {StyleSheet, View} from 'react-native';
 import _ from 'underscore';
 import useLocalize from '@hooks/useLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
 import * as Browser from '@libs/Browser';
 import * as FileUtils from '@libs/fileDownload/FileUtils';
 import getImageResolution from '@libs/fileDownload/getImageResolution';
 import stylePropTypes from '@styles/stylePropTypes';
 import useTheme from '@styles/theme/useTheme';
-import useThemeStyles from '@styles/useThemeStyles';
 import variables from '@styles/variables';
 import CONST from '@src/CONST';
 import AttachmentModal from './AttachmentModal';
diff --git a/src/components/AvatarWithIndicator.tsx b/src/components/AvatarWithIndicator.tsx
index 3ae9507350c8..2fd733d4b072 100644
--- a/src/components/AvatarWithIndicator.tsx
+++ b/src/components/AvatarWithIndicator.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import {View} from 'react-native';
+import useThemeStyles from '@hooks/useThemeStyles';
 import * as UserUtils from '@libs/UserUtils';
-import useThemeStyles from '@styles/useThemeStyles';
 import Avatar from './Avatar';
 import AvatarSkeleton from './AvatarSkeleton';
 import * as Expensicons from './Icon/Expensicons';
diff --git a/src/components/Badge.tsx b/src/components/Badge.tsx
index d68233474430..a75587558fc7 100644
--- a/src/components/Badge.tsx
+++ b/src/components/Badge.tsx
@@ -1,7 +1,7 @@
 import React, {useCallback} from 'react';
 import {GestureResponderEvent, PressableStateCallbackType, StyleProp, TextStyle, View, ViewStyle} from 'react-native';
 import useStyleUtils from '@hooks/useStyleUtils';
-import useThemeStyles from '@styles/useThemeStyles';
+import useThemeStyles from '@hooks/useThemeStyles';
 import CONST from '@src/CONST';
 import PressableWithoutFeedback from './Pressable/PressableWithoutFeedback';
 import Text from './Text';
diff --git a/src/components/Banner.tsx b/src/components/Banner.tsx
index eb006619d024..802bc3804989 100644
--- a/src/components/Banner.tsx
+++ b/src/components/Banner.tsx
@@ -2,8 +2,8 @@ import React, {memo} from 'react';
 import {StyleProp, TextStyle, View, ViewStyle} from 'react-native';
 import useLocalize from '@hooks/useLocalize';
 import useStyleUtils from '@hooks/useStyleUtils';
+import useThemeStyles from '@hooks/useThemeStyles';
 import getButtonState from '@libs/getButtonState';
-import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 import Hoverable from './Hoverable';
 import Icon from './Icon';
diff --git a/src/components/BaseMiniContextMenuItem.js b/src/components/BaseMiniContextMenuItem.js
index f3faa3f4a5db..af2149310c9e 100644
--- a/src/components/BaseMiniContextMenuItem.js
+++ b/src/components/BaseMiniContextMenuItem.js
@@ -3,10 +3,10 @@ import React from 'react';
 import {View} from 'react-native';
 import _ from 'underscore';
 import useStyleUtils from '@hooks/useStyleUtils';
+import useThemeStyles from '@hooks/useThemeStyles';
 import DomUtils from '@libs/DomUtils';
 import getButtonState from '@libs/getButtonState';
 import ReportActionComposeFocusManager from '@libs/ReportActionComposeFocusManager';
-import useThemeStyles from '@styles/useThemeStyles';
 import variables from '@styles/variables';
 import PressableWithoutFeedback from './Pressable/PressableWithoutFeedback';
 import Tooltip from './Tooltip/PopoverAnchorTooltip';
diff --git a/src/components/BigNumberPad.tsx b/src/components/BigNumberPad.tsx
index 812e9e78635b..5b179df8c2ed 100644
--- a/src/components/BigNumberPad.tsx
+++ b/src/components/BigNumberPad.tsx
@@ -1,9 +1,9 @@
 import React, {useState} from 'react';
 import {View} from 'react-native';
 import useLocalize from '@hooks/useLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import ControlSelection from '@libs/ControlSelection';
-import useThemeStyles from '@styles/useThemeStyles';
 import Button from './Button';
 
 type BigNumberPadProps = {
diff --git a/src/components/BlockingViews/BlockingView.js b/src/components/BlockingViews/BlockingView.js
index bec0d1b7e1b7..d52e3c00b31c 100644
--- a/src/components/BlockingViews/BlockingView.js
+++ b/src/components/BlockingViews/BlockingView.js
@@ -6,9 +6,9 @@ import Icon from '@components/Icon';
 import Text from '@components/Text';
 import TextLink from '@components/TextLink';
 import useLocalize from '@hooks/useLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
 import Navigation from '@libs/Navigation/Navigation';
 import useTheme from '@styles/theme/useTheme';
-import useThemeStyles from '@styles/useThemeStyles';
 import variables from '@styles/variables';
 
 const propTypes = {
diff --git a/src/components/BlockingViews/FullPageNotFoundView.js b/src/components/BlockingViews/FullPageNotFoundView.js
index b82474aa0694..ce76b96c0eb0 100644
--- a/src/components/BlockingViews/FullPageNotFoundView.js
+++ b/src/components/BlockingViews/FullPageNotFoundView.js
@@ -4,8 +4,8 @@ import {View} from 'react-native';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import * as Illustrations from '@components/Icon/Illustrations';
 import useLocalize from '@hooks/useLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
 import Navigation from '@libs/Navigation/Navigation';
-import useThemeStyles from '@styles/useThemeStyles';
 import variables from '@styles/variables';
 import ROUTES from '@src/ROUTES';
 import BlockingView from './BlockingView';
diff --git a/src/components/Button/index.tsx b/src/components/Button/index.tsx
index d4c03ab1cedf..969f3d30fe35 100644
--- a/src/components/Button/index.tsx
+++ b/src/components/Button/index.tsx
@@ -9,9 +9,9 @@ import Text from '@components/Text';
 import withNavigationFallback from '@components/withNavigationFallback';
 import useActiveElement from '@hooks/useActiveElement';
 import useKeyboardShortcut from '@hooks/useKeyboardShortcut';
+import useThemeStyles from '@hooks/useThemeStyles';
 import HapticFeedback from '@libs/HapticFeedback';
 import useTheme from '@styles/theme/useTheme';
-import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 import ChildrenProps from '@src/types/utils/ChildrenProps';
 import validateSubmitShortcut from './validateSubmitShortcut';
diff --git a/src/components/ButtonWithDropdownMenu.js b/src/components/ButtonWithDropdownMenu.js
index bfb1df8cd571..7d95cd7fec63 100644
--- a/src/components/ButtonWithDropdownMenu.js
+++ b/src/components/ButtonWithDropdownMenu.js
@@ -3,9 +3,9 @@ import React, {useEffect, useRef, useState} from 'react';
 import {View} from 'react-native';
 import _ from 'underscore';
 import useStyleUtils from '@hooks/useStyleUtils';
+import useThemeStyles from '@hooks/useThemeStyles';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import useTheme from '@styles/theme/useTheme';
-import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 import Button from './Button';
 import Icon from './Icon';
diff --git a/src/components/CardPreview.js b/src/components/CardPreview.js
index df944d930a92..76c619fddadc 100644
--- a/src/components/CardPreview.js
+++ b/src/components/CardPreview.js
@@ -4,7 +4,7 @@ import {View} from 'react-native';
 import {withOnyx} from 'react-native-onyx';
 import ExpensifyCardImage from '@assets/images/expensify-card.svg';
 import usePrivatePersonalDetails from '@hooks/usePrivatePersonalDetails';
-import useThemeStyles from '@styles/useThemeStyles';
+import useThemeStyles from '@hooks/useThemeStyles';
 import variables from '@styles/variables';
 import ONYXKEYS from '@src/ONYXKEYS';
 import Text from './Text';
diff --git a/src/components/CategoryPicker/index.js b/src/components/CategoryPicker/index.js
index 36cf9b1deadc..d170def12276 100644
--- a/src/components/CategoryPicker/index.js
+++ b/src/components/CategoryPicker/index.js
@@ -4,8 +4,8 @@ import {withOnyx} from 'react-native-onyx';
 import _ from 'underscore';
 import OptionsSelector from '@components/OptionsSelector';
 import useLocalize from '@hooks/useLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
 import * as OptionsListUtils from '@libs/OptionsListUtils';
-import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import {defaultProps, propTypes} from './categoryPickerPropTypes';
diff --git a/src/components/Checkbox.tsx b/src/components/Checkbox.tsx
index 9d1a38d0d40d..664df2f3f6c9 100644
--- a/src/components/Checkbox.tsx
+++ b/src/components/Checkbox.tsx
@@ -1,8 +1,8 @@
 import React, {ForwardedRef, forwardRef, KeyboardEvent as ReactKeyboardEvent} from 'react';
 import {GestureResponderEvent, StyleProp, View, ViewStyle} from 'react-native';
 import useStyleUtils from '@hooks/useStyleUtils';
+import useThemeStyles from '@hooks/useThemeStyles';
 import useTheme from '@styles/theme/useTheme';
-import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 import ChildrenProps from '@src/types/utils/ChildrenProps';
 import Icon from './Icon';
diff --git a/src/components/CheckboxWithLabel.js b/src/components/CheckboxWithLabel.js
index 92cd7ea38eea..24f61c305dda 100644
--- a/src/components/CheckboxWithLabel.js
+++ b/src/components/CheckboxWithLabel.js
@@ -2,7 +2,7 @@ import PropTypes from 'prop-types';
 import React, {useState} from 'react';
 import {View} from 'react-native';
 import _ from 'underscore';
-import useThemeStyles from '@styles/useThemeStyles';
+import useThemeStyles from '@hooks/useThemeStyles';
 import variables from '@styles/variables';
 import Checkbox from './Checkbox';
 import FormHelpMessage from './FormHelpMessage';
diff --git a/src/components/CollapsibleSection/index.tsx b/src/components/CollapsibleSection/index.tsx
index 570d00559af8..48c9f3a02713 100644
--- a/src/components/CollapsibleSection/index.tsx
+++ b/src/components/CollapsibleSection/index.tsx
@@ -4,7 +4,7 @@ import Icon from '@components/Icon';
 import * as Expensicons from '@components/Icon/Expensicons';
 import PressableWithFeedback from '@components/Pressable/PressableWithFeedback';
 import Text from '@components/Text';
-import useThemeStyles from '@styles/useThemeStyles';
+import useThemeStyles from '@hooks/useThemeStyles';
 import CONST from '@src/CONST';
 import ChildrenProps from '@src/types/utils/ChildrenProps';
 import Collapsible from './Collapsible';
diff --git a/src/components/ColorSchemeWrapper/index.tsx b/src/components/ColorSchemeWrapper/index.tsx
index 8f2f6362fc19..5b811f68687f 100644
--- a/src/components/ColorSchemeWrapper/index.tsx
+++ b/src/components/ColorSchemeWrapper/index.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import {View} from 'react-native';
+import useThemeStyles from '@hooks/useThemeStyles';
 import useTheme from '@styles/theme/useTheme';
-import useThemeStyles from '@styles/useThemeStyles';
 
 function ColorSchemeWrapper({children}: React.PropsWithChildren): React.ReactElement {
     const theme = useTheme();
diff --git a/src/components/CommunicationsLink.js b/src/components/CommunicationsLink.js
index dbbe5737b3aa..01ae0354a66d 100644
--- a/src/components/CommunicationsLink.js
+++ b/src/components/CommunicationsLink.js
@@ -1,8 +1,8 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import {View} from 'react-native';
+import useThemeStyles from '@hooks/useThemeStyles';
 import Clipboard from '@libs/Clipboard';
-import useThemeStyles from '@styles/useThemeStyles';
 import ContextMenuItem from './ContextMenuItem';
 import * as Expensicons from './Icon/Expensicons';
 import withLocalize, {withLocalizePropTypes} from './withLocalize';
diff --git a/src/components/Composer/index.android.js b/src/components/Composer/index.android.js
index 248d880a60f4..483593865456 100644
--- a/src/components/Composer/index.android.js
+++ b/src/components/Composer/index.android.js
@@ -3,9 +3,9 @@ import React, {useCallback, useEffect, useMemo, useRef} from 'react';
 import {StyleSheet} from 'react-native';
 import _ from 'underscore';
 import RNTextInput from '@components/RNTextInput';
+import useThemeStyles from '@hooks/useThemeStyles';
 import * as ComposerUtils from '@libs/ComposerUtils';
 import useTheme from '@styles/theme/useTheme';
-import useThemeStyles from '@styles/useThemeStyles';
 
 const propTypes = {
     /** Maximum number of lines in the text input */
diff --git a/src/components/Composer/index.ios.js b/src/components/Composer/index.ios.js
index 8874f2b5ecb0..d93b684ef3c7 100644
--- a/src/components/Composer/index.ios.js
+++ b/src/components/Composer/index.ios.js
@@ -3,9 +3,9 @@ import React, {useCallback, useEffect, useMemo, useRef} from 'react';
 import {StyleSheet} from 'react-native';
 import _ from 'underscore';
 import RNTextInput from '@components/RNTextInput';
+import useThemeStyles from '@hooks/useThemeStyles';
 import * as ComposerUtils from '@libs/ComposerUtils';
 import useTheme from '@styles/theme/useTheme';
-import useThemeStyles from '@styles/useThemeStyles';
 
 const propTypes = {
     /** If the input should clear, it actually gets intercepted instead of .clear() */
diff --git a/src/components/Composer/index.js b/src/components/Composer/index.js
index 17d6f633b7b3..f431f43c3876 100755
--- a/src/components/Composer/index.js
+++ b/src/components/Composer/index.js
@@ -9,6 +9,7 @@ import Text from '@components/Text';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
 import withNavigation from '@components/withNavigation';
 import useStyleUtils from '@hooks/useStyleUtils';
+import useThemeStyles from '@hooks/useThemeStyles';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import * as Browser from '@libs/Browser';
 import compose from '@libs/compose';
@@ -17,7 +18,6 @@ import updateIsFullComposerAvailable from '@libs/ComposerUtils/updateIsFullCompo
 import isEnterWhileComposition from '@libs/KeyboardShortcut/isEnterWhileComposition';
 import ReportActionComposeFocusManager from '@libs/ReportActionComposeFocusManager';
 import useTheme from '@styles/theme/useTheme';
-import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 
 const propTypes = {
diff --git a/src/components/ConfirmContent.js b/src/components/ConfirmContent.js
index ff8ee4f861a4..8574cc02014e 100644
--- a/src/components/ConfirmContent.js
+++ b/src/components/ConfirmContent.js
@@ -4,7 +4,7 @@ import {View} from 'react-native';
 import _ from 'underscore';
 import useLocalize from '@hooks/useLocalize';
 import useNetwork from '@hooks/useNetwork';
-import useThemeStyles from '@styles/useThemeStyles';
+import useThemeStyles from '@hooks/useThemeStyles';
 import variables from '@styles/variables';
 import Button from './Button';
 import Header from './Header';
diff --git a/src/components/ConfirmationPage.tsx b/src/components/ConfirmationPage.tsx
index 12e8b40a0f25..21813edd693d 100644
--- a/src/components/ConfirmationPage.tsx
+++ b/src/components/ConfirmationPage.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import {View} from 'react-native';
-import useThemeStyles from '@styles/useThemeStyles';
+import useThemeStyles from '@hooks/useThemeStyles';
 import Button from './Button';
 import FixedFooter from './FixedFooter';
 import Lottie from './Lottie';
diff --git a/src/components/ConfirmedRoute.js b/src/components/ConfirmedRoute.js
index 57e91ac137cf..c47f6b31d87a 100644
--- a/src/components/ConfirmedRoute.js
+++ b/src/components/ConfirmedRoute.js
@@ -5,9 +5,9 @@ import React, {useCallback, useEffect} from 'react';
 import {withOnyx} from 'react-native-onyx';
 import _ from 'underscore';
 import useNetwork from '@hooks/useNetwork';
+import useThemeStyles from '@hooks/useThemeStyles';
 import * as TransactionUtils from '@libs/TransactionUtils';
 import useTheme from '@styles/theme/useTheme';
-import useThemeStyles from '@styles/useThemeStyles';
 import * as MapboxToken from '@userActions/MapboxToken';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
diff --git a/src/components/ConnectBankAccountButton.js b/src/components/ConnectBankAccountButton.js
index 6afd3d57d4e6..f036918d9429 100644
--- a/src/components/ConnectBankAccountButton.js
+++ b/src/components/ConnectBankAccountButton.js
@@ -1,9 +1,9 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import {View} from 'react-native';
+import useThemeStyles from '@hooks/useThemeStyles';
 import compose from '@libs/compose';
 import Navigation from '@libs/Navigation/Navigation';
-import useThemeStyles from '@styles/useThemeStyles';
 import * as ReimbursementAccount from '@userActions/ReimbursementAccount';
 import Button from './Button';
 import * as Expensicons from './Icon/Expensicons';
diff --git a/src/components/ContextMenuItem.js b/src/components/ContextMenuItem.js
index c75c18466585..52ca4d461e26 100644
--- a/src/components/ContextMenuItem.js
+++ b/src/components/ContextMenuItem.js
@@ -1,10 +1,10 @@
 import PropTypes from 'prop-types';
 import React, {forwardRef, useImperativeHandle} from 'react';
 import useStyleUtils from '@hooks/useStyleUtils';
+import useThemeStyles from '@hooks/useThemeStyles';
 import useThrottledButtonState from '@hooks/useThrottledButtonState';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import getButtonState from '@libs/getButtonState';
-import useThemeStyles from '@styles/useThemeStyles';
 import BaseMiniContextMenuItem from './BaseMiniContextMenuItem';
 import Icon from './Icon';
 import MenuItem from './MenuItem';
diff --git a/src/components/CountrySelector.js b/src/components/CountrySelector.js
index 13fc215f1d8c..8c2e873c8444 100644
--- a/src/components/CountrySelector.js
+++ b/src/components/CountrySelector.js
@@ -2,8 +2,8 @@ import PropTypes from 'prop-types';
 import React, {useEffect} from 'react';
 import {View} from 'react-native';
 import useLocalize from '@hooks/useLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
 import Navigation from '@libs/Navigation/Navigation';
-import useThemeStyles from '@styles/useThemeStyles';
 import ROUTES from '@src/ROUTES';
 import FormHelpMessage from './FormHelpMessage';
 import MenuItemWithTopDescription from './MenuItemWithTopDescription';
diff --git a/src/components/CurrencySymbolButton.js b/src/components/CurrencySymbolButton.js
index 4d43ec3d93e0..b6a49f79a67a 100644
--- a/src/components/CurrencySymbolButton.js
+++ b/src/components/CurrencySymbolButton.js
@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import useLocalize from '@hooks/useLocalize';
-import useThemeStyles from '@styles/useThemeStyles';
+import useThemeStyles from '@hooks/useThemeStyles';
 import CONST from '@src/CONST';
 import PressableWithoutFeedback from './Pressable/PressableWithoutFeedback';
 import Text from './Text';
diff --git a/src/components/CurrentUserPersonalDetailsSkeletonView/index.tsx b/src/components/CurrentUserPersonalDetailsSkeletonView/index.tsx
index b1ad3930dd0e..07abc02c1425 100644
--- a/src/components/CurrentUserPersonalDetailsSkeletonView/index.tsx
+++ b/src/components/CurrentUserPersonalDetailsSkeletonView/index.tsx
@@ -4,8 +4,8 @@ import {Circle, Rect} from 'react-native-svg';
 import {ValueOf} from 'type-fest';
 import SkeletonViewContentLoader from '@components/SkeletonViewContentLoader';
 import useStyleUtils from '@hooks/useStyleUtils';
+import useThemeStyles from '@hooks/useThemeStyles';
 import useTheme from '@styles/theme/useTheme';
-import useThemeStyles from '@styles/useThemeStyles';
 import variables from '@styles/variables';
 import CONST from '@src/CONST';
 
diff --git a/src/components/CurrentWalletBalance.tsx b/src/components/CurrentWalletBalance.tsx
index 9a5b2cd0227b..28a83fb1ae50 100644
--- a/src/components/CurrentWalletBalance.tsx
+++ b/src/components/CurrentWalletBalance.tsx
@@ -1,8 +1,8 @@
 import React from 'react';
 import {StyleProp, TextStyle} from 'react-native';
 import {OnyxEntry, withOnyx} from 'react-native-onyx';
+import useThemeStyles from '@hooks/useThemeStyles';
 import * as CurrencyUtils from '@libs/CurrencyUtils';
-import useThemeStyles from '@styles/useThemeStyles';
 import ONYXKEYS from '@src/ONYXKEYS';
 import UserWallet from '@src/types/onyx/UserWallet';
 import Text from './Text';
diff --git a/src/components/DatePicker/CalendarPicker/ArrowIcon.js b/src/components/DatePicker/CalendarPicker/ArrowIcon.js
index 524d77a957b4..793aca9e7635 100644
--- a/src/components/DatePicker/CalendarPicker/ArrowIcon.js
+++ b/src/components/DatePicker/CalendarPicker/ArrowIcon.js
@@ -4,7 +4,7 @@ import {View} from 'react-native';
 import Icon from '@components/Icon';
 import * as Expensicons from '@components/Icon/Expensicons';
 import useStyleUtils from '@hooks/useStyleUtils';
-import useThemeStyles from '@styles/useThemeStyles';
+import useThemeStyles from '@hooks/useThemeStyles';
 import CONST from '@src/CONST';
 
 const propTypes = {
diff --git a/src/components/DatePicker/CalendarPicker/YearPickerModal.js b/src/components/DatePicker/CalendarPicker/YearPickerModal.js
index f51d869efbac..e8883648051c 100644
--- a/src/components/DatePicker/CalendarPicker/YearPickerModal.js
+++ b/src/components/DatePicker/CalendarPicker/YearPickerModal.js
@@ -7,7 +7,7 @@ import ScreenWrapper from '@components/ScreenWrapper';
 import SelectionList from '@components/SelectionList';
 import {radioListItemPropTypes} from '@components/SelectionList/selectionListPropTypes';
 import useLocalize from '@hooks/useLocalize';
-import useThemeStyles from '@styles/useThemeStyles';
+import useThemeStyles from '@hooks/useThemeStyles';
 import CONST from '@src/CONST';
 
 const propTypes = {
diff --git a/src/components/DatePicker/index.js b/src/components/DatePicker/index.js
index 10a53dc25bbb..fa76b7d0152a 100644
--- a/src/components/DatePicker/index.js
+++ b/src/components/DatePicker/index.js
@@ -8,7 +8,7 @@ import * as Expensicons from '@components/Icon/Expensicons';
 import TextInput from '@components/TextInput';
 import {propTypes as baseTextInputPropTypes, defaultProps as defaultBaseTextInputPropTypes} from '@components/TextInput/BaseTextInput/baseTextInputPropTypes';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
-import useThemeStyles from '@styles/useThemeStyles';
+import useThemeStyles from '@hooks/useThemeStyles';
 import CONST from '@src/CONST';
 import CalendarPicker from './CalendarPicker';
 
diff --git a/src/components/DeeplinkWrapper/DeeplinkRedirectLoadingIndicator.js b/src/components/DeeplinkWrapper/DeeplinkRedirectLoadingIndicator.js
index 0fc61a965e31..aab487e84ffe 100644
--- a/src/components/DeeplinkWrapper/DeeplinkRedirectLoadingIndicator.js
+++ b/src/components/DeeplinkWrapper/DeeplinkRedirectLoadingIndicator.js
@@ -8,10 +8,10 @@ import * as Illustrations from '@components/Icon/Illustrations';
 import Text from '@components/Text';
 import TextLink from '@components/TextLink';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
 import compose from '@libs/compose';
 import Navigation from '@libs/Navigation/Navigation';
 import useTheme from '@styles/theme/useTheme';
-import useThemeStyles from '@styles/useThemeStyles';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
 
diff --git a/src/components/DisplayNames/DisplayNamesTooltipItem.tsx b/src/components/DisplayNames/DisplayNamesTooltipItem.tsx
index 82f9c5799b78..440457d22965 100644
--- a/src/components/DisplayNames/DisplayNamesTooltipItem.tsx
+++ b/src/components/DisplayNames/DisplayNamesTooltipItem.tsx
@@ -2,8 +2,8 @@ import React, {RefObject, useCallback} from 'react';
 import {Text as RNText, StyleProp, TextStyle} from 'react-native';
 import Text from '@components/Text';
 import UserDetailsTooltip from '@components/UserDetailsTooltip';
+import useThemeStyles from '@hooks/useThemeStyles';
 import {AvatarSource} from '@libs/UserUtils';
-import useThemeStyles from '@styles/useThemeStyles';
 
 type DisplayNamesTooltipItemProps = {
     index?: number;
diff --git a/src/components/DisplayNames/DisplayNamesWithTooltip.tsx b/src/components/DisplayNames/DisplayNamesWithTooltip.tsx
index 8c8720c7c99f..43061ada9a94 100644
--- a/src/components/DisplayNames/DisplayNamesWithTooltip.tsx
+++ b/src/components/DisplayNames/DisplayNamesWithTooltip.tsx
@@ -2,7 +2,7 @@ import React, {Fragment, useCallback, useRef} from 'react';
 import {Text as RNText, View} from 'react-native';
 import Text from '@components/Text';
 import Tooltip from '@components/Tooltip';
-import useThemeStyles from '@styles/useThemeStyles';
+import useThemeStyles from '@hooks/useThemeStyles';
 import DisplayNamesTooltipItem from './DisplayNamesTooltipItem';
 import DisplayNamesProps from './types';
 
diff --git a/src/components/DisplayNames/DisplayNamesWithoutTooltip.tsx b/src/components/DisplayNames/DisplayNamesWithoutTooltip.tsx
index 1854ebe2353d..761b0b66ee2c 100644
--- a/src/components/DisplayNames/DisplayNamesWithoutTooltip.tsx
+++ b/src/components/DisplayNames/DisplayNamesWithoutTooltip.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import {StyleProp, TextStyle} from 'react-native';
 import Text from '@components/Text';
-import useThemeStyles from '@styles/useThemeStyles';
+import useThemeStyles from '@hooks/useThemeStyles';
 
 type DisplayNamesWithoutTooltipProps = {
     /** The full title of the DisplayNames component (not split up) */
diff --git a/src/components/DistanceEReceipt.js b/src/components/DistanceEReceipt.js
index 514e68913e07..bb4bb6ce9af6 100644
--- a/src/components/DistanceEReceipt.js
+++ b/src/components/DistanceEReceipt.js
@@ -5,13 +5,13 @@ import _ from 'underscore';
 import EReceiptBackground from '@assets/images/eReceipt_background.svg';
 import useLocalize from '@hooks/useLocalize';
 import useNetwork from '@hooks/useNetwork';
+import useThemeStyles from '@hooks/useThemeStyles';
 import * as CurrencyUtils from '@libs/CurrencyUtils';
 import * as ReceiptUtils from '@libs/ReceiptUtils';
 import * as ReportUtils from '@libs/ReportUtils';
 import * as TransactionUtils from '@libs/TransactionUtils';
 import tryResolveUrlFromApiRoot from '@libs/tryResolveUrlFromApiRoot';
 import useTheme from '@styles/theme/useTheme';
-import useThemeStyles from '@styles/useThemeStyles';
 import Icon from './Icon';
 import * as Expensicons from './Icon/Expensicons';
 import PendingMapView from './MapView/PendingMapView';
diff --git a/src/components/DistanceMapView/index.android.js b/src/components/DistanceMapView/index.android.js
index e3272f32b480..fa40bd50673e 100644
--- a/src/components/DistanceMapView/index.android.js
+++ b/src/components/DistanceMapView/index.android.js
@@ -7,7 +7,7 @@ import MapView from '@components/MapView';
 import useLocalize from '@hooks/useLocalize';
 import useNetwork from '@hooks/useNetwork';
 import useStyleUtils from '@hooks/useStyleUtils';
-import useThemeStyles from '@styles/useThemeStyles';
+import useThemeStyles from '@hooks/useThemeStyles';
 import * as distanceMapViewPropTypes from './distanceMapViewPropTypes';
 
 function DistanceMapView(props) {
diff --git a/src/components/DistanceRequest/DistanceRequestFooter.js b/src/components/DistanceRequest/DistanceRequestFooter.js
index 133754f0711f..cbc5772c116f 100644
--- a/src/components/DistanceRequest/DistanceRequestFooter.js
+++ b/src/components/DistanceRequest/DistanceRequestFooter.js
@@ -10,9 +10,9 @@ import DistanceMapView from '@components/DistanceMapView';
 import * as Expensicons from '@components/Icon/Expensicons';
 import transactionPropTypes from '@components/transactionPropTypes';
 import useLocalize from '@hooks/useLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
 import * as TransactionUtils from '@libs/TransactionUtils';
 import useTheme from '@styles/theme/useTheme';
-import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 
diff --git a/src/components/DistanceRequest/index.js b/src/components/DistanceRequest/index.js
index 6fa5dfede620..e19746268151 100644
--- a/src/components/DistanceRequest/index.js
+++ b/src/components/DistanceRequest/index.js
@@ -14,12 +14,12 @@ import transactionPropTypes from '@components/transactionPropTypes';
 import useLocalize from '@hooks/useLocalize';
 import useNetwork from '@hooks/useNetwork';
 import usePrevious from '@hooks/usePrevious';
+import useThemeStyles from '@hooks/useThemeStyles';
 import * as ErrorUtils from '@libs/ErrorUtils';
 import * as IOUUtils from '@libs/IOUUtils';
 import Navigation from '@libs/Navigation/Navigation';
 import * as TransactionUtils from '@libs/TransactionUtils';
 import reportPropTypes from '@pages/reportPropTypes';
-import useThemeStyles from '@styles/useThemeStyles';
 import variables from '@styles/variables';
 import * as MapboxToken from '@userActions/MapboxToken';
 import * as Transaction from '@userActions/Transaction';
diff --git a/src/components/DotIndicatorMessage.tsx b/src/components/DotIndicatorMessage.tsx
index 327e00417eba..ac8917e8eab7 100644
--- a/src/components/DotIndicatorMessage.tsx
+++ b/src/components/DotIndicatorMessage.tsx
@@ -2,10 +2,10 @@
 import React from 'react';
 import {StyleProp, TextStyle, View, ViewStyle} from 'react-native';
 import useStyleUtils from '@hooks/useStyleUtils';
+import useThemeStyles from '@hooks/useThemeStyles';
 import fileDownload from '@libs/fileDownload';
 import * as Localize from '@libs/Localize';
 import useTheme from '@styles/theme/useTheme';
-import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 import Icon from './Icon';
 import * as Expensicons from './Icon/Expensicons';
diff --git a/src/components/DragAndDrop/NoDropZone/index.tsx b/src/components/DragAndDrop/NoDropZone/index.tsx
index 9f2c700b8918..4760a16fd20b 100644
--- a/src/components/DragAndDrop/NoDropZone/index.tsx
+++ b/src/components/DragAndDrop/NoDropZone/index.tsx
@@ -1,7 +1,7 @@
 import React, {useRef} from 'react';
 import {View} from 'react-native';
 import useDragAndDrop from '@hooks/useDragAndDrop';
-import useThemeStyles from '@styles/useThemeStyles';
+import useThemeStyles from '@hooks/useThemeStyles';
 import type NoDropZoneProps from './types';
 
 function NoDropZone({children}: NoDropZoneProps) {
diff --git a/src/components/DragAndDrop/Provider/index.tsx b/src/components/DragAndDrop/Provider/index.tsx
index 761c512497ac..a5da9cc45a36 100644
--- a/src/components/DragAndDrop/Provider/index.tsx
+++ b/src/components/DragAndDrop/Provider/index.tsx
@@ -3,7 +3,7 @@ import Str from 'expensify-common/lib/str';
 import React, {useCallback, useEffect, useMemo, useRef} from 'react';
 import {View} from 'react-native';
 import useDragAndDrop from '@hooks/useDragAndDrop';
-import useThemeStyles from '@styles/useThemeStyles';
+import useThemeStyles from '@hooks/useThemeStyles';
 import type {DragAndDropContextParams, DragAndDropProviderProps, SetOnDropHandlerCallback} from './types';
 
 const DragAndDropContext = React.createContext<DragAndDropContextParams>({});
diff --git a/src/components/DraggableList/index.native.tsx b/src/components/DraggableList/index.native.tsx
index e7ff058234b7..f532b21720da 100644
--- a/src/components/DraggableList/index.native.tsx
+++ b/src/components/DraggableList/index.native.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import DraggableFlatList from 'react-native-draggable-flatlist';
 import {FlatList} from 'react-native-gesture-handler';
-import useThemeStyles from '@styles/useThemeStyles';
+import useThemeStyles from '@hooks/useThemeStyles';
 import type {DraggableListProps} from './types';
 
 function DraggableList<T>({renderClone, shouldUsePortal, ...viewProps}: DraggableListProps<T>, ref: React.ForwardedRef<FlatList<T>>) {
diff --git a/src/components/DraggableList/index.tsx b/src/components/DraggableList/index.tsx
index 28128002c589..b92691075424 100644
--- a/src/components/DraggableList/index.tsx
+++ b/src/components/DraggableList/index.tsx
@@ -1,7 +1,7 @@
 import React, {useCallback} from 'react';
 import {DragDropContext, Draggable, Droppable, type OnDragEndResponder} from 'react-beautiful-dnd';
 import {ScrollView} from 'react-native';
-import useThemeStyles from '@styles/useThemeStyles';
+import useThemeStyles from '@hooks/useThemeStyles';
 import type {DraggableListProps} from './types';
 import useDraggableInPortal from './useDraggableInPortal';
 
diff --git a/src/components/EReceipt.js b/src/components/EReceipt.js
index 72cc7f4e18f7..12cea0df04ac 100644
--- a/src/components/EReceipt.js
+++ b/src/components/EReceipt.js
@@ -4,10 +4,10 @@ import {View} from 'react-native';
 import {withOnyx} from 'react-native-onyx';
 import useLocalize from '@hooks/useLocalize';
 import useStyleUtils from '@hooks/useStyleUtils';
+import useThemeStyles from '@hooks/useThemeStyles';
 import * as CardUtils from '@libs/CardUtils';
 import * as CurrencyUtils from '@libs/CurrencyUtils';
 import * as ReportUtils from '@libs/ReportUtils';
-import useThemeStyles from '@styles/useThemeStyles';
 import variables from '@styles/variables';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
diff --git a/src/components/EReceiptThumbnail.js b/src/components/EReceiptThumbnail.js
index 42721bebb2af..ee7b5cd57aec 100644
--- a/src/components/EReceiptThumbnail.js
+++ b/src/components/EReceiptThumbnail.js
@@ -2,8 +2,8 @@ import PropTypes from 'prop-types';
 import React, {useMemo, useState} from 'react';
 import {View} from 'react-native';
 import {withOnyx} from 'react-native-onyx';
+import useThemeStyles from '@hooks/useThemeStyles';
 import * as ReportUtils from '@libs/ReportUtils';
-import useThemeStyles from '@styles/useThemeStyles';
 import variables from '@styles/variables';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
diff --git a/src/components/EmojiPicker/CategoryShortcutBar.js b/src/components/EmojiPicker/CategoryShortcutBar.js
index c0c9fb8ea161..facafea13a70 100644
--- a/src/components/EmojiPicker/CategoryShortcutBar.js
+++ b/src/components/EmojiPicker/CategoryShortcutBar.js
@@ -2,7 +2,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import {View} from 'react-native';
 import _ from 'underscore';
-import useThemeStyles from '@styles/useThemeStyles';
+import useThemeStyles from '@hooks/useThemeStyles';
 import CategoryShortcutButton from './CategoryShortcutButton';
 
 const propTypes = {
diff --git a/src/components/EmojiPicker/CategoryShortcutButton.js b/src/components/EmojiPicker/CategoryShortcutButton.js
index 260fda15d157..14dd98367f01 100644
--- a/src/components/EmojiPicker/CategoryShortcutButton.js
+++ b/src/components/EmojiPicker/CategoryShortcutButton.js
@@ -5,9 +5,9 @@ import PressableWithoutFeedback from '@components/Pressable/PressableWithoutFeed
 import Tooltip from '@components/Tooltip';
 import useLocalize from '@hooks/useLocalize';
 import useStyleUtils from '@hooks/useStyleUtils';
+import useThemeStyles from '@hooks/useThemeStyles';
 import getButtonState from '@libs/getButtonState';
 import useTheme from '@styles/theme/useTheme';
-import useThemeStyles from '@styles/useThemeStyles';
 import variables from '@styles/variables';
 import CONST from '@src/CONST';
 
diff --git a/src/components/EmojiPicker/EmojiPicker.js b/src/components/EmojiPicker/EmojiPicker.js
index 5120889b528d..6c05a4b6a5b5 100644
--- a/src/components/EmojiPicker/EmojiPicker.js
+++ b/src/components/EmojiPicker/EmojiPicker.js
@@ -5,9 +5,9 @@ import _ from 'underscore';
 import PopoverWithMeasuredContent from '@components/PopoverWithMeasuredContent';
 import withViewportOffsetTop from '@components/withViewportOffsetTop';
 import useStyleUtils from '@hooks/useStyleUtils';
+import useThemeStyles from '@hooks/useThemeStyles';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import calculateAnchorPosition from '@libs/calculateAnchorPosition';
-import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 import EmojiPickerMenu from './EmojiPickerMenu';
 
diff --git a/src/components/EmojiPicker/EmojiPickerButton.js b/src/components/EmojiPicker/EmojiPickerButton.js
index c11ec8df16aa..869fe1edbfe5 100644
--- a/src/components/EmojiPicker/EmojiPickerButton.js
+++ b/src/components/EmojiPicker/EmojiPickerButton.js
@@ -6,8 +6,8 @@ import PressableWithoutFeedback from '@components/Pressable/PressableWithoutFeed
 import Tooltip from '@components/Tooltip/PopoverAnchorTooltip';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
 import useStyleUtils from '@hooks/useStyleUtils';
+import useThemeStyles from '@hooks/useThemeStyles';
 import getButtonState from '@libs/getButtonState';
-import useThemeStyles from '@styles/useThemeStyles';
 import * as EmojiPickerAction from '@userActions/EmojiPickerAction';
 
 const propTypes = {
diff --git a/src/components/EmojiPicker/EmojiPickerButtonDropdown.js b/src/components/EmojiPicker/EmojiPickerButtonDropdown.js
index d8a50ec7abff..9d5b7496da62 100644
--- a/src/components/EmojiPicker/EmojiPickerButtonDropdown.js
+++ b/src/components/EmojiPicker/EmojiPickerButtonDropdown.js
@@ -8,8 +8,8 @@ import Text from '@components/Text';
 import Tooltip from '@components/Tooltip';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
 import useStyleUtils from '@hooks/useStyleUtils';
+import useThemeStyles from '@hooks/useThemeStyles';
 import getButtonState from '@libs/getButtonState';
-import useThemeStyles from '@styles/useThemeStyles';
 import * as EmojiPickerAction from '@userActions/EmojiPickerAction';
 import CONST from '@src/CONST';
 
diff --git a/src/components/EmojiPicker/EmojiPickerMenu/index.js b/src/components/EmojiPicker/EmojiPickerMenu/index.js
index 2acfe61b82eb..eed9c3aa4c49 100755
--- a/src/components/EmojiPicker/EmojiPickerMenu/index.js
+++ b/src/components/EmojiPicker/EmojiPickerMenu/index.js
@@ -12,6 +12,7 @@ import Text from '@components/Text';
 import TextInput from '@components/TextInput';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
 import useStyleUtils from '@hooks/useStyleUtils';
+import useThemeStyles from '@hooks/useThemeStyles';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import * as Browser from '@libs/Browser';
 import canFocusInputOnScreenFocus from '@libs/canFocusInputOnScreenFocus';
@@ -19,7 +20,6 @@ import compose from '@libs/compose';
 import * as EmojiUtils from '@libs/EmojiUtils';
 import isEnterWhileComposition from '@libs/KeyboardShortcut/isEnterWhileComposition';
 import * as ReportUtils from '@libs/ReportUtils';
-import useThemeStyles from '@styles/useThemeStyles';
 import * as User from '@userActions/User';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
diff --git a/src/components/EmojiPicker/EmojiPickerMenu/index.native.js b/src/components/EmojiPicker/EmojiPickerMenu/index.native.js
index 85cc4038917a..3f1ae4a7b816 100644
--- a/src/components/EmojiPicker/EmojiPickerMenu/index.native.js
+++ b/src/components/EmojiPicker/EmojiPickerMenu/index.native.js
@@ -13,10 +13,10 @@ import TextInput from '@components/TextInput';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
 import useSingleExecution from '@hooks/useSingleExecution';
 import useStyleUtils from '@hooks/useStyleUtils';
+import useThemeStyles from '@hooks/useThemeStyles';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import compose from '@libs/compose';
 import * as EmojiUtils from '@libs/EmojiUtils';
-import useThemeStyles from '@styles/useThemeStyles';
 import * as User from '@userActions/User';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
diff --git a/src/components/EmojiPicker/EmojiSkinToneList.js b/src/components/EmojiPicker/EmojiSkinToneList.js
index 25fc9ad0836a..c2e62d57c7c7 100644
--- a/src/components/EmojiPicker/EmojiSkinToneList.js
+++ b/src/components/EmojiPicker/EmojiSkinToneList.js
@@ -6,7 +6,7 @@ import * as Emojis from '@assets/emojis';
 import PressableWithoutFeedback from '@components/Pressable/PressableWithoutFeedback';
 import Text from '@components/Text';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
-import useThemeStyles from '@styles/useThemeStyles';
+import useThemeStyles from '@hooks/useThemeStyles';
 import CONST from '@src/CONST';
 import EmojiPickerMenuItem from './EmojiPickerMenuItem';
 import getSkinToneEmojiFromIndex from './getSkinToneEmojiFromIndex';
diff --git a/src/components/EmojiSuggestions.tsx b/src/components/EmojiSuggestions.tsx
index c35bd1d1e824..2fcf8e827b4e 100644
--- a/src/components/EmojiSuggestions.tsx
+++ b/src/components/EmojiSuggestions.tsx
@@ -1,10 +1,10 @@
 import React, {ReactElement, useCallback} from 'react';
 import {View} from 'react-native';
 import useStyleUtils from '@hooks/useStyleUtils';
+import useThemeStyles from '@hooks/useThemeStyles';
 import type {SimpleEmoji} from '@libs/EmojiTrie';
 import * as EmojiUtils from '@libs/EmojiUtils';
 import getStyledTextArray from '@libs/GetStyledTextArray';
-import useThemeStyles from '@styles/useThemeStyles';
 import AutoCompleteSuggestions from './AutoCompleteSuggestions';
 import Text from './Text';
 
diff --git a/src/components/EnvironmentBadge.tsx b/src/components/EnvironmentBadge.tsx
index a3f321072988..6babbf119445 100644
--- a/src/components/EnvironmentBadge.tsx
+++ b/src/components/EnvironmentBadge.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import useEnvironment from '@hooks/useEnvironment';
+import useThemeStyles from '@hooks/useThemeStyles';
 import * as Environment from '@libs/Environment/Environment';
-import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 import pkg from '../../package.json';
 import Badge from './Badge';
diff --git a/src/components/ExceededCommentLength.js b/src/components/ExceededCommentLength.js
index 6353bdf40283..3c0a971cc80d 100644
--- a/src/components/ExceededCommentLength.js
+++ b/src/components/ExceededCommentLength.js
@@ -3,8 +3,8 @@ import PropTypes from 'prop-types';
 import React, {useEffect, useMemo, useState} from 'react';
 import {withOnyx} from 'react-native-onyx';
 import useLocalize from '@hooks/useLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
 import * as ReportUtils from '@libs/ReportUtils';
-import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import Text from './Text';
diff --git a/src/components/ExpensifyWordmark.tsx b/src/components/ExpensifyWordmark.tsx
index e8300852a374..e83ce963abd1 100644
--- a/src/components/ExpensifyWordmark.tsx
+++ b/src/components/ExpensifyWordmark.tsx
@@ -6,8 +6,8 @@ import StagingLogo from '@assets/images/expensify-logo--staging.svg';
 import ProductionLogo from '@assets/images/expensify-wordmark.svg';
 import useEnvironment from '@hooks/useEnvironment';
 import useStyleUtils from '@hooks/useStyleUtils';
+import useThemeStyles from '@hooks/useThemeStyles';
 import useTheme from '@styles/theme/useTheme';
-import useThemeStyles from '@styles/useThemeStyles';
 import variables from '@styles/variables';
 import CONST from '@src/CONST';
 import withWindowDimensions from './withWindowDimensions';
diff --git a/src/components/FeatureList.js b/src/components/FeatureList.js
index 7b0c70372579..bf0852d179f1 100644
--- a/src/components/FeatureList.js
+++ b/src/components/FeatureList.js
@@ -3,7 +3,7 @@ import React from 'react';
 import {View} from 'react-native';
 import _ from 'underscore';
 import useLocalize from '@hooks/useLocalize';
-import useThemeStyles from '@styles/useThemeStyles';
+import useThemeStyles from '@hooks/useThemeStyles';
 import MenuItem from './MenuItem';
 import menuItemPropTypes from './menuItemPropTypes';
 import Text from './Text';
diff --git a/src/components/FixedFooter.tsx b/src/components/FixedFooter.tsx
index 4b32e1b8ce81..7fd6811c1df6 100644
--- a/src/components/FixedFooter.tsx
+++ b/src/components/FixedFooter.tsx
@@ -1,6 +1,6 @@
 import React, {ReactNode} from 'react';
 import {StyleProp, View, ViewStyle} from 'react-native';
-import useThemeStyles from '@styles/useThemeStyles';
+import useThemeStyles from '@hooks/useThemeStyles';
 
 type FixedFooterProps = {
     /** Children to wrap in FixedFooter. */
diff --git a/src/components/FocusModeNotification.js b/src/components/FocusModeNotification.js
index edec7dec1e85..e846c1f188e2 100644
--- a/src/components/FocusModeNotification.js
+++ b/src/components/FocusModeNotification.js
@@ -1,7 +1,7 @@
 import React, {useEffect} from 'react';
 import useEnvironment from '@hooks/useEnvironment';
 import useLocalize from '@hooks/useLocalize';
-import useThemeStyles from '@styles/useThemeStyles';
+import useThemeStyles from '@hooks/useThemeStyles';
 import * as Link from '@userActions/Link';
 import * as User from '@userActions/User';
 import CONST from '@src/CONST';
diff --git a/src/components/Form.js b/src/components/Form.js
index ad5fcf611e9b..33cace99f627 100644
--- a/src/components/Form.js
+++ b/src/components/Form.js
@@ -4,13 +4,13 @@ import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react';
 import {Keyboard, ScrollView, StyleSheet} from 'react-native';
 import {withOnyx} from 'react-native-onyx';
 import _ from 'underscore';
+import useThemeStyles from '@hooks/useThemeStyles';
 import compose from '@libs/compose';
 import * as ErrorUtils from '@libs/ErrorUtils';
 import FormUtils from '@libs/FormUtils';
 import * as ValidationUtils from '@libs/ValidationUtils';
 import Visibility from '@libs/Visibility';
 import stylePropTypes from '@styles/stylePropTypes';
-import useThemeStyles from '@styles/useThemeStyles';
 import * as FormActions from '@userActions/FormActions';
 import CONST from '@src/CONST';
 import FormAlertWithSubmitButton from './FormAlertWithSubmitButton';
diff --git a/src/components/Form/FormWrapper.js b/src/components/Form/FormWrapper.js
index 638b6e5f8d19..da34262a8af8 100644
--- a/src/components/Form/FormWrapper.js
+++ b/src/components/Form/FormWrapper.js
@@ -8,9 +8,9 @@ import FormSubmit from '@components/FormSubmit';
 import refPropTypes from '@components/refPropTypes';
 import SafeAreaConsumer from '@components/SafeAreaConsumer';
 import ScrollViewWithContext from '@components/ScrollViewWithContext';
+import useThemeStyles from '@hooks/useThemeStyles';
 import * as ErrorUtils from '@libs/ErrorUtils';
 import stylePropTypes from '@styles/stylePropTypes';
-import useThemeStyles from '@styles/useThemeStyles';
 import errorsPropType from './errorsPropType';
 
 const propTypes = {
diff --git a/src/components/FormAlertWithSubmitButton.js b/src/components/FormAlertWithSubmitButton.js
index b16a4d2a08ee..f5e042ae4e2e 100644
--- a/src/components/FormAlertWithSubmitButton.js
+++ b/src/components/FormAlertWithSubmitButton.js
@@ -2,7 +2,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import {View} from 'react-native';
 import _ from 'underscore';
-import useThemeStyles from '@styles/useThemeStyles';
+import useThemeStyles from '@hooks/useThemeStyles';
 import Button from './Button';
 import FormAlertWrapper from './FormAlertWrapper';
 
diff --git a/src/components/FormAlertWrapper.js b/src/components/FormAlertWrapper.js
index c577048c0a1b..bbdaa4dacc78 100644
--- a/src/components/FormAlertWrapper.js
+++ b/src/components/FormAlertWrapper.js
@@ -2,8 +2,8 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import {View} from 'react-native';
 import _ from 'underscore';
+import useThemeStyles from '@hooks/useThemeStyles';
 import compose from '@libs/compose';
-import useThemeStyles from '@styles/useThemeStyles';
 import FormHelpMessage from './FormHelpMessage';
 import networkPropTypes from './networkPropTypes';
 import {withNetwork} from './OnyxProvider';
diff --git a/src/components/FormHelpMessage.js b/src/components/FormHelpMessage.js
index c4315e4e4576..43c2d94c47e1 100644
--- a/src/components/FormHelpMessage.js
+++ b/src/components/FormHelpMessage.js
@@ -2,10 +2,10 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import {View} from 'react-native';
 import _ from 'underscore';
+import useThemeStyles from '@hooks/useThemeStyles';
 import * as Localize from '@libs/Localize';
 import stylePropTypes from '@styles/stylePropTypes';
 import useTheme from '@styles/theme/useTheme';
-import useThemeStyles from '@styles/useThemeStyles';
 import Icon from './Icon';
 import * as Expensicons from './Icon/Expensicons';
 import Text from './Text';
diff --git a/src/components/FormScrollView.tsx b/src/components/FormScrollView.tsx
index c2f01e1d0511..4646a534e750 100644
--- a/src/components/FormScrollView.tsx
+++ b/src/components/FormScrollView.tsx
@@ -1,6 +1,6 @@
 import React, {ForwardedRef} from 'react';
 import {ScrollView, ScrollViewProps} from 'react-native';
-import useThemeStyles from '@styles/useThemeStyles';
+import useThemeStyles from '@hooks/useThemeStyles';
 
 type FormScrollViewProps = ScrollViewProps & {
     /** Form elements */
diff --git a/src/components/FullscreenLoadingIndicator.tsx b/src/components/FullscreenLoadingIndicator.tsx
index 0d38a5f1d7f8..731ac6e7f8e2 100644
--- a/src/components/FullscreenLoadingIndicator.tsx
+++ b/src/components/FullscreenLoadingIndicator.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import {ActivityIndicator, StyleProp, StyleSheet, View, ViewStyle} from 'react-native';
+import useThemeStyles from '@hooks/useThemeStyles';
 import useTheme from '@styles/theme/useTheme';
-import useThemeStyles from '@styles/useThemeStyles';
 
 type FullScreenLoadingIndicatorProps = {
     style?: StyleProp<ViewStyle>;
diff --git a/src/components/GrowlNotification/GrowlNotificationContainer/index.js b/src/components/GrowlNotification/GrowlNotificationContainer/index.js
index 82672edb14c2..ccc404d415d7 100644
--- a/src/components/GrowlNotification/GrowlNotificationContainer/index.js
+++ b/src/components/GrowlNotification/GrowlNotificationContainer/index.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import {Animated} from 'react-native';
 import withWindowDimensions, {windowDimensionsPropTypes} from '@components/withWindowDimensions';
-import useThemeStyles from '@styles/useThemeStyles';
+import useThemeStyles from '@hooks/useThemeStyles';
 import growlNotificationContainerPropTypes from './growlNotificationContainerPropTypes';
 
 const propTypes = {
diff --git a/src/components/GrowlNotification/GrowlNotificationContainer/index.native.js b/src/components/GrowlNotification/GrowlNotificationContainer/index.native.js
index 234496644215..207033f8fac2 100644
--- a/src/components/GrowlNotification/GrowlNotificationContainer/index.native.js
+++ b/src/components/GrowlNotification/GrowlNotificationContainer/index.native.js
@@ -2,7 +2,7 @@ import React from 'react';
 import {Animated} from 'react-native';
 import useSafeAreaInsets from '@hooks/useSafeAreaInsets';
 import useStyleUtils from '@hooks/useStyleUtils';
-import useThemeStyles from '@styles/useThemeStyles';
+import useThemeStyles from '@hooks/useThemeStyles';
 import growlNotificationContainerPropTypes from './growlNotificationContainerPropTypes';
 
 const propTypes = {
diff --git a/src/components/GrowlNotification/index.js b/src/components/GrowlNotification/index.js
index dfdd00ac11bb..4ebd361d6b33 100644
--- a/src/components/GrowlNotification/index.js
+++ b/src/components/GrowlNotification/index.js
@@ -5,10 +5,10 @@ import Icon from '@components/Icon';
 import * as Expensicons from '@components/Icon/Expensicons';
 import * as Pressables from '@components/Pressable';
 import Text from '@components/Text';
+import useThemeStyles from '@hooks/useThemeStyles';
 import * as Growl from '@libs/Growl';
 import useNativeDriver from '@libs/useNativeDriver';
 import useTheme from '@styles/theme/useTheme';
-import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 import GrowlNotificationContainer from './GrowlNotificationContainer';
 
diff --git a/src/components/HTMLEngineProvider/BaseHTMLEngineProvider.js b/src/components/HTMLEngineProvider/BaseHTMLEngineProvider.js
index de8125ea2809..f5d7514581b6 100755
--- a/src/components/HTMLEngineProvider/BaseHTMLEngineProvider.js
+++ b/src/components/HTMLEngineProvider/BaseHTMLEngineProvider.js
@@ -2,8 +2,8 @@ import PropTypes from 'prop-types';
 import React, {useMemo} from 'react';
 import {defaultHTMLElementModels, RenderHTMLConfigProvider, TRenderEngineProvider} from 'react-native-render-html';
 import _ from 'underscore';
+import useThemeStyles from '@hooks/useThemeStyles';
 import convertToLTR from '@libs/convertToLTR';
-import useThemeStyles from '@styles/useThemeStyles';
 import singleFontFamily from '@styles/utils/fontFamily/singleFontFamily';
 import * as HTMLEngineUtils from './htmlEngineUtils';
 import htmlRenderers from './HTMLRenderers';
diff --git a/src/components/HTMLEngineProvider/HTMLRenderers/AnchorRenderer.js b/src/components/HTMLEngineProvider/HTMLRenderers/AnchorRenderer.js
index 49642308a357..8fd907470c19 100644
--- a/src/components/HTMLEngineProvider/HTMLRenderers/AnchorRenderer.js
+++ b/src/components/HTMLEngineProvider/HTMLRenderers/AnchorRenderer.js
@@ -6,8 +6,8 @@ import AnchorForCommentsOnly from '@components/AnchorForCommentsOnly';
 import * as HTMLEngineUtils from '@components/HTMLEngineProvider/htmlEngineUtils';
 import Text from '@components/Text';
 import useEnvironment from '@hooks/useEnvironment';
+import useThemeStyles from '@hooks/useThemeStyles';
 import tryResolveUrlFromApiRoot from '@libs/tryResolveUrlFromApiRoot';
-import useThemeStyles from '@styles/useThemeStyles';
 import * as Link from '@userActions/Link';
 import CONST from '@src/CONST';
 import htmlRendererPropTypes from './htmlRendererPropTypes';
diff --git a/src/components/HTMLEngineProvider/HTMLRenderers/EditedRenderer.js b/src/components/HTMLEngineProvider/HTMLRenderers/EditedRenderer.js
index 3265138cf7b0..c92fafd6402c 100644
--- a/src/components/HTMLEngineProvider/HTMLRenderers/EditedRenderer.js
+++ b/src/components/HTMLEngineProvider/HTMLRenderers/EditedRenderer.js
@@ -2,8 +2,8 @@ import React from 'react';
 import _ from 'underscore';
 import Text from '@components/Text';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
 import useTheme from '@styles/theme/useTheme';
-import useThemeStyles from '@styles/useThemeStyles';
 import editedLabelStyles from '@styles/utils/editedLabelStyles';
 import variables from '@styles/variables';
 import CONST from '@src/CONST';
diff --git a/src/components/HTMLEngineProvider/HTMLRenderers/ImageRenderer.js b/src/components/HTMLEngineProvider/HTMLRenderers/ImageRenderer.js
index 7cbdf8d69831..0a52cbd0c31e 100644
--- a/src/components/HTMLEngineProvider/HTMLRenderers/ImageRenderer.js
+++ b/src/components/HTMLEngineProvider/HTMLRenderers/ImageRenderer.js
@@ -5,10 +5,10 @@ import PressableWithoutFocus from '@components/Pressable/PressableWithoutFocus';
 import {ShowContextMenuContext, showContextMenuForReport} from '@components/ShowContextMenuContext';
 import ThumbnailImage from '@components/ThumbnailImage';
 import useLocalize from '@hooks/useLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
 import Navigation from '@libs/Navigation/Navigation';
 import * as ReportUtils from '@libs/ReportUtils';
 import tryResolveUrlFromApiRoot from '@libs/tryResolveUrlFromApiRoot';
-import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
diff --git a/src/components/HTMLEngineProvider/HTMLRenderers/MentionUserRenderer.js b/src/components/HTMLEngineProvider/HTMLRenderers/MentionUserRenderer.js
index 34dd731ab17c..df891d7ec2a5 100644
--- a/src/components/HTMLEngineProvider/HTMLRenderers/MentionUserRenderer.js
+++ b/src/components/HTMLEngineProvider/HTMLRenderers/MentionUserRenderer.js
@@ -9,12 +9,12 @@ import UserDetailsTooltip from '@components/UserDetailsTooltip';
 import withCurrentUserPersonalDetails from '@components/withCurrentUserPersonalDetails';
 import useLocalize from '@hooks/useLocalize';
 import useStyleUtils from '@hooks/useStyleUtils';
+import useThemeStyles from '@hooks/useThemeStyles';
 import * as LocalePhoneNumber from '@libs/LocalePhoneNumber';
 import Navigation from '@libs/Navigation/Navigation';
 import * as PersonalDetailsUtils from '@libs/PersonalDetailsUtils';
 import * as ReportUtils from '@libs/ReportUtils';
 import personalDetailsPropType from '@pages/personalDetailsPropType';
-import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 import ROUTES from '@src/ROUTES';
 import htmlRendererPropTypes from './htmlRendererPropTypes';
diff --git a/src/components/HTMLEngineProvider/HTMLRenderers/PreRenderer/BasePreRenderer.js b/src/components/HTMLEngineProvider/HTMLRenderers/PreRenderer/BasePreRenderer.js
index a2b01059a63c..8c992e2ea0f2 100644
--- a/src/components/HTMLEngineProvider/HTMLRenderers/PreRenderer/BasePreRenderer.js
+++ b/src/components/HTMLEngineProvider/HTMLRenderers/PreRenderer/BasePreRenderer.js
@@ -6,8 +6,8 @@ import htmlRendererPropTypes from '@components/HTMLEngineProvider/HTMLRenderers/
 import PressableWithoutFeedback from '@components/Pressable/PressableWithoutFeedback';
 import {ShowContextMenuContext, showContextMenuForReport} from '@components/ShowContextMenuContext';
 import withLocalize from '@components/withLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
 import * as ReportUtils from '@libs/ReportUtils';
-import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 
 const propTypes = {
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index 46fe1a25c920..c02f21d7c6f2 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -1,6 +1,6 @@
 import React, {ReactElement} from 'react';
 import {StyleProp, TextStyle, View} from 'react-native';
-import useThemeStyles from '@styles/useThemeStyles';
+import useThemeStyles from '@hooks/useThemeStyles';
 import EnvironmentBadge from './EnvironmentBadge';
 import Text from './Text';
 
diff --git a/src/components/HeaderPageLayout.js b/src/components/HeaderPageLayout.js
index d1d8f5ad5f9c..17507854f389 100644
--- a/src/components/HeaderPageLayout.js
+++ b/src/components/HeaderPageLayout.js
@@ -4,10 +4,10 @@ import {ScrollView, View} from 'react-native';
 import _ from 'underscore';
 import useNetwork from '@hooks/useNetwork';
 import useStyleUtils from '@hooks/useStyleUtils';
+import useThemeStyles from '@hooks/useThemeStyles';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import * as Browser from '@libs/Browser';
 import useTheme from '@styles/theme/useTheme';
-import useThemeStyles from '@styles/useThemeStyles';
 import FixedFooter from './FixedFooter';
 import HeaderWithBackButton from './HeaderWithBackButton';
 import headerWithBackButtonPropTypes from './HeaderWithBackButton/headerWithBackButtonPropTypes';
diff --git a/src/components/HeaderWithBackButton/index.js b/src/components/HeaderWithBackButton/index.js
index 9647546a0837..bc2f38681b3c 100755
--- a/src/components/HeaderWithBackButton/index.js
+++ b/src/components/HeaderWithBackButton/index.js
@@ -11,11 +11,11 @@ import Tooltip from '@components/Tooltip';
 import useKeyboardState from '@hooks/useKeyboardState';
 import useLocalize from '@hooks/useLocalize';
 import useStyleUtils from '@hooks/useStyleUtils';
+import useThemeStyles from '@hooks/useThemeStyles';
 import useThrottledButtonState from '@hooks/useThrottledButtonState';
 import useWaitForNavigation from '@hooks/useWaitForNavigation';
 import getButtonState from '@libs/getButtonState';
 import Navigation from '@libs/Navigation/Navigation';
-import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 import ROUTES from '@src/ROUTES';
 import headerWithBackButtonPropTypes from './headerWithBackButtonPropTypes';
diff --git a/src/components/IllustratedHeaderPageLayout.js b/src/components/IllustratedHeaderPageLayout.js
index 610fd3a45eca..87c919810404 100644
--- a/src/components/IllustratedHeaderPageLayout.js
+++ b/src/components/IllustratedHeaderPageLayout.js
@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types';
 import React from 'react';
+import useThemeStyles from '@hooks/useThemeStyles';
 import useTheme from '@styles/theme/useTheme';
-import useThemeStyles from '@styles/useThemeStyles';
 import HeaderPageLayout from './HeaderPageLayout';
 import headerWithBackButtonPropTypes from './HeaderWithBackButton/headerWithBackButtonPropTypes';
 import Lottie from './Lottie';
diff --git a/src/components/ImageView/index.js b/src/components/ImageView/index.js
index a47e637e92f7..e5bc877b1fb5 100644
--- a/src/components/ImageView/index.js
+++ b/src/components/ImageView/index.js
@@ -5,8 +5,8 @@ import FullscreenLoadingIndicator from '@components/FullscreenLoadingIndicator';
 import Image from '@components/Image';
 import PressableWithoutFeedback from '@components/Pressable/PressableWithoutFeedback';
 import useStyleUtils from '@hooks/useStyleUtils';
+import useThemeStyles from '@hooks/useThemeStyles';
 import * as DeviceCapabilities from '@libs/DeviceCapabilities';
-import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 
 const propTypes = {
diff --git a/src/components/ImageView/index.native.js b/src/components/ImageView/index.native.js
index 5ebd03170d92..6c04a1c83ee5 100644
--- a/src/components/ImageView/index.native.js
+++ b/src/components/ImageView/index.native.js
@@ -5,8 +5,8 @@ import ImageZoom from 'react-native-image-pan-zoom';
 import _ from 'underscore';
 import FullscreenLoadingIndicator from '@components/FullscreenLoadingIndicator';
 import Image from '@components/Image';
+import useThemeStyles from '@hooks/useThemeStyles';
 import useWindowDimensions from '@hooks/useWindowDimensions';
-import useThemeStyles from '@styles/useThemeStyles';
 import variables from '@styles/variables';
 
 /**
diff --git a/src/components/ImageWithSizeCalculation.tsx b/src/components/ImageWithSizeCalculation.tsx
index 82b4b4759112..cffbc8941388 100644
--- a/src/components/ImageWithSizeCalculation.tsx
+++ b/src/components/ImageWithSizeCalculation.tsx
@@ -2,8 +2,8 @@ import delay from 'lodash/delay';
 import React, {useEffect, useRef, useState} from 'react';
 import {StyleProp, View, ViewStyle} from 'react-native';
 import {OnLoadEvent} from 'react-native-fast-image';
+import useThemeStyles from '@hooks/useThemeStyles';
 import Log from '@libs/Log';
-import useThemeStyles from '@styles/useThemeStyles';
 import FullscreenLoadingIndicator from './FullscreenLoadingIndicator';
 import Image from './Image';
 import RESIZE_MODES from './Image/resizeModes';
diff --git a/src/components/Indicator.js b/src/components/Indicator.js
index 6728c60f10ce..6db6b3d6e5fa 100644
--- a/src/components/Indicator.js
+++ b/src/components/Indicator.js
@@ -3,6 +3,7 @@ import React from 'react';
 import {StyleSheet, View} from 'react-native';
 import {withOnyx} from 'react-native-onyx';
 import _ from 'underscore';
+import useThemeStyles from '@hooks/useThemeStyles';
 import * as PolicyUtils from '@libs/PolicyUtils';
 import * as UserUtils from '@libs/UserUtils';
 import userWalletPropTypes from '@pages/EnablePayments/userWalletPropTypes';
@@ -11,7 +12,6 @@ import policyMemberPropType from '@pages/policyMemberPropType';
 import * as ReimbursementAccountProps from '@pages/ReimbursementAccount/reimbursementAccountPropTypes';
 import {policyPropTypes} from '@pages/workspace/withPolicy';
 import useTheme from '@styles/theme/useTheme';
-import useThemeStyles from '@styles/useThemeStyles';
 import * as PaymentMethods from '@userActions/PaymentMethods';
 import ONYXKEYS from '@src/ONYXKEYS';
 import bankAccountPropTypes from './bankAccountPropTypes';
diff --git a/src/components/InlineCodeBlock/WrappedText.js b/src/components/InlineCodeBlock/WrappedText.js
index f00ec891116b..e9ef957e741d 100644
--- a/src/components/InlineCodeBlock/WrappedText.js
+++ b/src/components/InlineCodeBlock/WrappedText.js
@@ -3,7 +3,7 @@ import React, {Fragment} from 'react';
 import {View} from 'react-native';
 import _ from 'underscore';
 import Text from '@components/Text';
-import useThemeStyles from '@styles/useThemeStyles';
+import useThemeStyles from '@hooks/useThemeStyles';
 import CONST from '@src/CONST';
 
 /**
diff --git a/src/components/InlineCodeBlock/index.native.js b/src/components/InlineCodeBlock/index.native.js
index 983463222532..28151dd08d0b 100644
--- a/src/components/InlineCodeBlock/index.native.js
+++ b/src/components/InlineCodeBlock/index.native.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import useThemeStyles from '@styles/useThemeStyles';
+import useThemeStyles from '@hooks/useThemeStyles';
 import inlineCodeBlockPropTypes from './inlineCodeBlockPropTypes';
 import WrappedText from './WrappedText';
 
diff --git a/src/components/InlineSystemMessage.tsx b/src/components/InlineSystemMessage.tsx
index 1d1071dd7d61..badf3c1ce0a8 100644
--- a/src/components/InlineSystemMessage.tsx
+++ b/src/components/InlineSystemMessage.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import {View} from 'react-native';
+import useThemeStyles from '@hooks/useThemeStyles';
 import useTheme from '@styles/theme/useTheme';
-import useThemeStyles from '@styles/useThemeStyles';
 import Icon from './Icon';
 import * as Expensicons from './Icon/Expensicons';
 import Text from './Text';
diff --git a/src/components/InvertedFlatList/index.native.js b/src/components/InvertedFlatList/index.native.js
index d52d5a6d08f7..59810cba62c4 100644
--- a/src/components/InvertedFlatList/index.native.js
+++ b/src/components/InvertedFlatList/index.native.js
@@ -1,5 +1,5 @@
 import React, {forwardRef} from 'react';
-import useThemeStyles from '@styles/useThemeStyles';
+import useThemeStyles from '@hooks/useThemeStyles';
 import BaseInvertedFlatList from './BaseInvertedFlatList';
 import CellRendererComponent from './CellRendererComponent';
 
diff --git a/src/components/LHNOptionsList/LHNOptionsList.js b/src/components/LHNOptionsList/LHNOptionsList.js
index 8febd7f247d6..71b14b6fadcd 100644
--- a/src/components/LHNOptionsList/LHNOptionsList.js
+++ b/src/components/LHNOptionsList/LHNOptionsList.js
@@ -8,13 +8,13 @@ import _ from 'underscore';
 import participantPropTypes from '@components/participantPropTypes';
 import transactionPropTypes from '@components/transactionPropTypes';
 import withCurrentReportID, {withCurrentReportIDDefaultProps, withCurrentReportIDPropTypes} from '@components/withCurrentReportID';
+import useThemeStyles from '@hooks/useThemeStyles';
 import compose from '@libs/compose';
 import * as OptionsListUtils from '@libs/OptionsListUtils';
 import * as ReportUtils from '@libs/ReportUtils';
 import reportActionPropTypes from '@pages/home/report/reportActionPropTypes';
 import reportPropTypes from '@pages/reportPropTypes';
 import stylePropTypes from '@styles/stylePropTypes';
-import useThemeStyles from '@styles/useThemeStyles';
 import variables from '@styles/variables';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
diff --git a/src/components/LHNOptionsList/OptionRowLHN.js b/src/components/LHNOptionsList/OptionRowLHN.js
index 3e9d2c6f6ec0..c65bbbf3db08 100644
--- a/src/components/LHNOptionsList/OptionRowLHN.js
+++ b/src/components/LHNOptionsList/OptionRowLHN.js
@@ -16,6 +16,7 @@ import Text from '@components/Text';
 import Tooltip from '@components/Tooltip';
 import useLocalize from '@hooks/useLocalize';
 import useStyleUtils from '@hooks/useStyleUtils';
+import useThemeStyles from '@hooks/useThemeStyles';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import DateUtils from '@libs/DateUtils';
 import DomUtils from '@libs/DomUtils';
@@ -26,7 +27,6 @@ import * as ReportUtils from '@libs/ReportUtils';
 import * as ContextMenuActions from '@pages/home/report/ContextMenu/ContextMenuActions';
 import * as ReportActionContextMenu from '@pages/home/report/ContextMenu/ReportActionContextMenu';
 import useTheme from '@styles/theme/useTheme';
-import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 
 const propTypes = {
diff --git a/src/components/LocalePicker.tsx b/src/components/LocalePicker.tsx
index 7c8651262476..7f01395e8c0f 100644
--- a/src/components/LocalePicker.tsx
+++ b/src/components/LocalePicker.tsx
@@ -1,8 +1,8 @@
 import React from 'react';
 import {OnyxEntry, withOnyx} from 'react-native-onyx';
 import useLocalize from '@hooks/useLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
 import useTheme from '@styles/theme/useTheme';
-import useThemeStyles from '@styles/useThemeStyles';
 import * as App from '@userActions/App';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
diff --git a/src/components/LocationErrorMessage/BaseLocationErrorMessage.js b/src/components/LocationErrorMessage/BaseLocationErrorMessage.js
index 807b99777972..b5fc806c15ec 100644
--- a/src/components/LocationErrorMessage/BaseLocationErrorMessage.js
+++ b/src/components/LocationErrorMessage/BaseLocationErrorMessage.js
@@ -9,8 +9,8 @@ import TextLink from '@components/TextLink';
 import Tooltip from '@components/Tooltip';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
 import useStyleUtils from '@hooks/useStyleUtils';
+import useThemeStyles from '@hooks/useThemeStyles';
 import colors from '@styles/colors';
-import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 import * as locationErrorMessagePropTypes from './locationErrorMessagePropTypes';
 
diff --git a/src/components/Lottie/Lottie.tsx b/src/components/Lottie/Lottie.tsx
index 868eaf8cb95e..2bf7df056c4d 100644
--- a/src/components/Lottie/Lottie.tsx
+++ b/src/components/Lottie/Lottie.tsx
@@ -3,7 +3,7 @@ import React, {ForwardedRef, forwardRef} from 'react';
 import {View} from 'react-native';
 import DotLottieAnimation from '@components/LottieAnimations/types';
 import useNetwork from '@hooks/useNetwork';
-import useThemeStyles from '@styles/useThemeStyles';
+import useThemeStyles from '@hooks/useThemeStyles';
 
 type Props = {
     source: DotLottieAnimation;
diff --git a/src/components/MagicCodeInput.js b/src/components/MagicCodeInput.js
index b89b093ffdd7..55a65237a691 100644
--- a/src/components/MagicCodeInput.js
+++ b/src/components/MagicCodeInput.js
@@ -5,9 +5,9 @@ import {TapGestureHandler} from 'react-native-gesture-handler';
 import _ from 'underscore';
 import useNetwork from '@hooks/useNetwork';
 import useStyleUtils from '@hooks/useStyleUtils';
+import useThemeStyles from '@hooks/useThemeStyles';
 import * as Browser from '@libs/Browser';
 import * as ValidationUtils from '@libs/ValidationUtils';
-import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 import FormHelpMessage from './FormHelpMessage';
 import networkPropTypes from './networkPropTypes';
diff --git a/src/components/MapView/Direction.tsx b/src/components/MapView/Direction.tsx
index ca4b26f2f2db..b3162149a48d 100644
--- a/src/components/MapView/Direction.tsx
+++ b/src/components/MapView/Direction.tsx
@@ -1,5 +1,5 @@
 import Mapbox from '@rnmapbox/maps';
-import useThemeStyles from '@styles/useThemeStyles';
+import useThemeStyles from '@hooks/useThemeStyles';
 import {DirectionProps} from './MapViewTypes';
 
 function Direction({coordinates}: DirectionProps) {
diff --git a/src/components/MapView/Direction.website.tsx b/src/components/MapView/Direction.website.tsx
index 9e5af2aa2b1d..f85bda125473 100644
--- a/src/components/MapView/Direction.website.tsx
+++ b/src/components/MapView/Direction.website.tsx
@@ -5,7 +5,7 @@
 import React from 'react';
 import {Layer, Source} from 'react-map-gl';
 import {View} from 'react-native';
-import useThemeStyles from '@styles/useThemeStyles';
+import useThemeStyles from '@hooks/useThemeStyles';
 import {DirectionProps} from './MapViewTypes';
 
 function Direction({coordinates}: DirectionProps) {
diff --git a/src/components/MapView/MapView.tsx b/src/components/MapView/MapView.tsx
index 91f9d9930079..7b3d73479dde 100644
--- a/src/components/MapView/MapView.tsx
+++ b/src/components/MapView/MapView.tsx
@@ -3,10 +3,10 @@ import Mapbox, {MapState, MarkerView, setAccessToken} from '@rnmapbox/maps';
 import {forwardRef, memo, useCallback, useEffect, useImperativeHandle, useRef, useState} from 'react';
 import {View} from 'react-native';
 import {withOnyx} from 'react-native-onyx';
+import useThemeStyles from '@hooks/useThemeStyles';
 import setUserLocation from '@libs/actions/UserLocation';
 import compose from '@libs/compose';
 import getCurrentPosition from '@libs/getCurrentPosition';
-import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 import useLocalize from '@src/hooks/useLocalize';
 import useNetwork from '@src/hooks/useNetwork';
diff --git a/src/components/MapView/MapView.website.tsx b/src/components/MapView/MapView.website.tsx
index 36785af0abe0..db5c2af12c92 100644
--- a/src/components/MapView/MapView.website.tsx
+++ b/src/components/MapView/MapView.website.tsx
@@ -10,8 +10,8 @@ import Map, {MapRef, Marker} from 'react-map-gl';
 import {View} from 'react-native';
 import {withOnyx} from 'react-native-onyx';
 import useStyleUtils from '@hooks/useStyleUtils';
+import useThemeStyles from '@hooks/useThemeStyles';
 import useTheme from '@styles/theme/useTheme';
-import useThemeStyles from '@styles/useThemeStyles';
 import setUserLocation from '@userActions/UserLocation';
 import CONST from '@src/CONST';
 import useLocalize from '@src/hooks/useLocalize';
diff --git a/src/components/MapView/PendingMapView.tsx b/src/components/MapView/PendingMapView.tsx
index 2acdb59d3782..0af816785e9a 100644
--- a/src/components/MapView/PendingMapView.tsx
+++ b/src/components/MapView/PendingMapView.tsx
@@ -4,7 +4,7 @@ import {View} from 'react-native';
 import BlockingView from '@components/BlockingViews/BlockingView';
 import Icon from '@components/Icon';
 import * as Expensicons from '@components/Icon/Expensicons';
-import useThemeStyles from '@styles/useThemeStyles';
+import useThemeStyles from '@hooks/useThemeStyles';
 import variables from '@styles/variables';
 import {PendingMapViewProps} from './MapViewTypes';
 
diff --git a/src/components/MentionSuggestions.tsx b/src/components/MentionSuggestions.tsx
index 6fff35b61942..4a0011056501 100644
--- a/src/components/MentionSuggestions.tsx
+++ b/src/components/MentionSuggestions.tsx
@@ -1,9 +1,9 @@
 import React, {useCallback} from 'react';
 import {View} from 'react-native';
 import useStyleUtils from '@hooks/useStyleUtils';
+import useThemeStyles from '@hooks/useThemeStyles';
 import getStyledTextArray from '@libs/GetStyledTextArray';
 import useTheme from '@styles/theme/useTheme';
-import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 import {Icon} from '@src/types/onyx/OnyxCommon';
 import AutoCompleteSuggestions from './AutoCompleteSuggestions';
diff --git a/src/components/MenuItem.js b/src/components/MenuItem.js
index d9c9744654c7..f61c046d5289 100644
--- a/src/components/MenuItem.js
+++ b/src/components/MenuItem.js
@@ -3,13 +3,13 @@ import React, {useEffect, useMemo} from 'react';
 import {View} from 'react-native';
 import _ from 'underscore';
 import useStyleUtils from '@hooks/useStyleUtils';
+import useThemeStyles from '@hooks/useThemeStyles';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import ControlSelection from '@libs/ControlSelection';
 import convertToLTR from '@libs/convertToLTR';
 import * as DeviceCapabilities from '@libs/DeviceCapabilities';
 import getButtonState from '@libs/getButtonState';
 import useTheme from '@styles/theme/useTheme';
-import useThemeStyles from '@styles/useThemeStyles';
 import variables from '@styles/variables';
 import * as Session from '@userActions/Session';
 import CONST from '@src/CONST';
diff --git a/src/components/MessagesRow.js b/src/components/MessagesRow.js
index 311a9c70ee7a..668acc2d69c8 100644
--- a/src/components/MessagesRow.js
+++ b/src/components/MessagesRow.js
@@ -4,8 +4,8 @@ import {View} from 'react-native';
 import _ from 'underscore';
 import useLocalize from '@hooks/useLocalize';
 import useStyleUtils from '@hooks/useStyleUtils';
+import useThemeStyles from '@hooks/useThemeStyles';
 import stylePropTypes from '@styles/stylePropTypes';
-import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 import DotIndicatorMessage from './DotIndicatorMessage';
 import Icon from './Icon';
diff --git a/src/components/Modal/BaseModal.tsx b/src/components/Modal/BaseModal.tsx
index 3911094b9dd8..238b95c4240d 100644
--- a/src/components/Modal/BaseModal.tsx
+++ b/src/components/Modal/BaseModal.tsx
@@ -5,11 +5,11 @@ import ColorSchemeWrapper from '@components/ColorSchemeWrapper';
 import usePrevious from '@hooks/usePrevious';
 import useSafeAreaInsets from '@hooks/useSafeAreaInsets';
 import useStyleUtils from '@hooks/useStyleUtils';
+import useThemeStyles from '@hooks/useThemeStyles';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import ComposerFocusManager from '@libs/ComposerFocusManager';
 import useNativeDriver from '@libs/useNativeDriver';
 import useTheme from '@styles/theme/useTheme';
-import useThemeStyles from '@styles/useThemeStyles';
 import variables from '@styles/variables';
 import * as Modal from '@userActions/Modal';
 import CONST from '@src/CONST';
diff --git a/src/components/MoneyReportHeader.js b/src/components/MoneyReportHeader.js
index 880e46b2592a..1149c2d2e06b 100644
--- a/src/components/MoneyReportHeader.js
+++ b/src/components/MoneyReportHeader.js
@@ -5,6 +5,7 @@ import {View} from 'react-native';
 import {withOnyx} from 'react-native-onyx';
 import _ from 'underscore';
 import useLocalize from '@hooks/useLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
 import compose from '@libs/compose';
 import * as CurrencyUtils from '@libs/CurrencyUtils';
 import Navigation from '@libs/Navigation/Navigation';
@@ -12,7 +13,6 @@ import * as ReportUtils from '@libs/ReportUtils';
 import iouReportPropTypes from '@pages/iouReportPropTypes';
 import nextStepPropTypes from '@pages/nextStepPropTypes';
 import reportPropTypes from '@pages/reportPropTypes';
-import useThemeStyles from '@styles/useThemeStyles';
 import * as IOU from '@userActions/IOU';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
diff --git a/src/components/MoneyReportHeaderStatusBar.js b/src/components/MoneyReportHeaderStatusBar.js
index 3f2c06be78cf..1386f544cadf 100644
--- a/src/components/MoneyReportHeaderStatusBar.js
+++ b/src/components/MoneyReportHeaderStatusBar.js
@@ -1,9 +1,9 @@
 import React, {useMemo} from 'react';
 import {Text, View} from 'react-native';
 import useLocalize from '@hooks/useLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
 import * as NextStepUtils from '@libs/NextStepUtils';
 import nextStepPropTypes from '@pages/nextStepPropTypes';
-import useThemeStyles from '@styles/useThemeStyles';
 import RenderHTML from './RenderHTML';
 
 const propTypes = {
diff --git a/src/components/MoneyRequestConfirmationList.js b/src/components/MoneyRequestConfirmationList.js
index 94948841310b..a2622280c3f9 100755
--- a/src/components/MoneyRequestConfirmationList.js
+++ b/src/components/MoneyRequestConfirmationList.js
@@ -9,6 +9,7 @@ import {withOnyx} from 'react-native-onyx';
 import _ from 'underscore';
 import useLocalize from '@hooks/useLocalize';
 import usePermissions from '@hooks/usePermissions';
+import useThemeStyles from '@hooks/useThemeStyles';
 import compose from '@libs/compose';
 import * as CurrencyUtils from '@libs/CurrencyUtils';
 import DistanceRequestUtils from '@libs/DistanceRequestUtils';
@@ -23,7 +24,6 @@ import * as ReportUtils from '@libs/ReportUtils';
 import * as TransactionUtils from '@libs/TransactionUtils';
 import {iouDefaultProps, iouPropTypes} from '@pages/iou/propTypes';
 import useTheme from '@styles/theme/useTheme';
-import useThemeStyles from '@styles/useThemeStyles';
 import * as IOU from '@userActions/IOU';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
diff --git a/src/components/MoneyRequestHeader.js b/src/components/MoneyRequestHeader.js
index 178163f6569f..488630dd0590 100644
--- a/src/components/MoneyRequestHeader.js
+++ b/src/components/MoneyRequestHeader.js
@@ -4,6 +4,7 @@ import React, {useCallback, useEffect, useState} from 'react';
 import {View} from 'react-native';
 import {withOnyx} from 'react-native-onyx';
 import useLocalize from '@hooks/useLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import compose from '@libs/compose';
 import * as HeaderUtils from '@libs/HeaderUtils';
@@ -13,7 +14,6 @@ import * as ReportUtils from '@libs/ReportUtils';
 import * as TransactionUtils from '@libs/TransactionUtils';
 import reportActionPropTypes from '@pages/home/report/reportActionPropTypes';
 import iouReportPropTypes from '@pages/iouReportPropTypes';
-import useThemeStyles from '@styles/useThemeStyles';
 import * as IOU from '@userActions/IOU';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
diff --git a/src/components/MoneyRequestHeaderStatusBar.js b/src/components/MoneyRequestHeaderStatusBar.js
index fc91678cf6fb..d9c359e87615 100644
--- a/src/components/MoneyRequestHeaderStatusBar.js
+++ b/src/components/MoneyRequestHeaderStatusBar.js
@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import {View} from 'react-native';
-import useThemeStyles from '@styles/useThemeStyles';
+import useThemeStyles from '@hooks/useThemeStyles';
 import Text from './Text';
 
 const propTypes = {
diff --git a/src/components/MoneyRequestSkeletonView.tsx b/src/components/MoneyRequestSkeletonView.tsx
index f75cf0392486..70576fb224ae 100644
--- a/src/components/MoneyRequestSkeletonView.tsx
+++ b/src/components/MoneyRequestSkeletonView.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import {Rect} from 'react-native-svg';
+import useThemeStyles from '@hooks/useThemeStyles';
 import useTheme from '@styles/theme/useTheme';
-import useThemeStyles from '@styles/useThemeStyles';
 import variables from '@styles/variables';
 import SkeletonViewContentLoader from './SkeletonViewContentLoader';
 
diff --git a/src/components/MultipleAvatars.tsx b/src/components/MultipleAvatars.tsx
index 2b96e4f8e725..3e5e6a842033 100644
--- a/src/components/MultipleAvatars.tsx
+++ b/src/components/MultipleAvatars.tsx
@@ -2,9 +2,9 @@ import React, {memo, useMemo} from 'react';
 import {StyleProp, View, ViewStyle} from 'react-native';
 import {ValueOf} from 'type-fest';
 import useStyleUtils from '@hooks/useStyleUtils';
+import useThemeStyles from '@hooks/useThemeStyles';
 import {AvatarSource} from '@libs/UserUtils';
 import useTheme from '@styles/theme/useTheme';
-import useThemeStyles from '@styles/useThemeStyles';
 import variables from '@styles/variables';
 import CONST from '@src/CONST';
 import type {Icon} from '@src/types/onyx/OnyxCommon';
diff --git a/src/components/OfflineIndicator.tsx b/src/components/OfflineIndicator.tsx
index b402caa2c750..739befa7d081 100644
--- a/src/components/OfflineIndicator.tsx
+++ b/src/components/OfflineIndicator.tsx
@@ -2,8 +2,8 @@ import React, {useMemo} from 'react';
 import {StyleProp, View, ViewStyle} from 'react-native';
 import useLocalize from '@hooks/useLocalize';
 import useNetwork from '@hooks/useNetwork';
+import useThemeStyles from '@hooks/useThemeStyles';
 import useWindowDimensions from '@hooks/useWindowDimensions';
-import useThemeStyles from '@styles/useThemeStyles';
 import variables from '@styles/variables';
 import Icon from './Icon';
 import * as Expensicons from './Icon/Expensicons';
diff --git a/src/components/OfflineWithFeedback.js b/src/components/OfflineWithFeedback.js
index f4e2d2cdb2d5..270e4ed6b6e7 100644
--- a/src/components/OfflineWithFeedback.js
+++ b/src/components/OfflineWithFeedback.js
@@ -4,9 +4,9 @@ import {View} from 'react-native';
 import _ from 'underscore';
 import useNetwork from '@hooks/useNetwork';
 import useStyleUtils from '@hooks/useStyleUtils';
+import useThemeStyles from '@hooks/useThemeStyles';
 import shouldRenderOffscreen from '@libs/shouldRenderOffscreen';
 import stylePropTypes from '@styles/stylePropTypes';
-import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 import MessagesRow from './MessagesRow';
 
diff --git a/src/components/OptionRow.js b/src/components/OptionRow.js
index 4f277bf5450f..e115dad8cfb7 100644
--- a/src/components/OptionRow.js
+++ b/src/components/OptionRow.js
@@ -4,10 +4,10 @@ import React, {useEffect, useRef, useState} from 'react';
 import {InteractionManager, StyleSheet, View} from 'react-native';
 import _ from 'underscore';
 import useStyleUtils from '@hooks/useStyleUtils';
+import useThemeStyles from '@hooks/useThemeStyles';
 import * as OptionsListUtils from '@libs/OptionsListUtils';
 import * as ReportUtils from '@libs/ReportUtils';
 import useTheme from '@styles/theme/useTheme';
-import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 import Button from './Button';
 import DisplayNames from './DisplayNames';
diff --git a/src/components/OptionsList/BaseOptionsList.js b/src/components/OptionsList/BaseOptionsList.js
index 31bc4d4070af..d22df00bd0b3 100644
--- a/src/components/OptionsList/BaseOptionsList.js
+++ b/src/components/OptionsList/BaseOptionsList.js
@@ -7,7 +7,7 @@ import OptionsListSkeletonView from '@components/OptionsListSkeletonView';
 import SectionList from '@components/SectionList';
 import Text from '@components/Text';
 import usePrevious from '@hooks/usePrevious';
-import useThemeStyles from '@styles/useThemeStyles';
+import useThemeStyles from '@hooks/useThemeStyles';
 import variables from '@styles/variables';
 import CONST from '@src/CONST';
 import {defaultProps as optionsListDefaultProps, propTypes as optionsListPropTypes} from './optionsListPropTypes';
diff --git a/src/components/PDFView/PDFInfoMessage.js b/src/components/PDFView/PDFInfoMessage.js
index 9ec53b2ae375..7c234b19daa5 100644
--- a/src/components/PDFView/PDFInfoMessage.js
+++ b/src/components/PDFView/PDFInfoMessage.js
@@ -6,7 +6,7 @@ import * as Expensicons from '@components/Icon/Expensicons';
 import Text from '@components/Text';
 import TextLink from '@components/TextLink';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
-import useThemeStyles from '@styles/useThemeStyles';
+import useThemeStyles from '@hooks/useThemeStyles';
 import variables from '@styles/variables';
 
 const propTypes = {
diff --git a/src/components/PDFView/PDFPasswordForm.js b/src/components/PDFView/PDFPasswordForm.js
index e20e2c44a76e..4cda4f3dbac3 100644
--- a/src/components/PDFView/PDFPasswordForm.js
+++ b/src/components/PDFView/PDFPasswordForm.js
@@ -6,10 +6,10 @@ import Button from '@components/Button';
 import Text from '@components/Text';
 import TextInput from '@components/TextInput';
 import useLocalize from '@hooks/useLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import * as Browser from '@libs/Browser';
 import shouldDelayFocus from '@libs/shouldDelayFocus';
-import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 import PDFInfoMessage from './PDFInfoMessage';
 
diff --git a/src/components/ParentNavigationSubtitle.tsx b/src/components/ParentNavigationSubtitle.tsx
index e65a8617a996..ee6d34aa9da4 100644
--- a/src/components/ParentNavigationSubtitle.tsx
+++ b/src/components/ParentNavigationSubtitle.tsx
@@ -1,8 +1,8 @@
 import React from 'react';
 import {StyleProp, ViewStyle} from 'react-native';
 import useLocalize from '@hooks/useLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
 import Navigation from '@libs/Navigation/Navigation';
-import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 import {ParentNavigationSummaryParams} from '@src/languages/types';
 import ROUTES from '@src/ROUTES';
diff --git a/src/components/Picker/BasePicker.tsx b/src/components/Picker/BasePicker.tsx
index 773213685ab6..3cef1e7a480c 100644
--- a/src/components/Picker/BasePicker.tsx
+++ b/src/components/Picker/BasePicker.tsx
@@ -7,8 +7,8 @@ import Icon from '@components/Icon';
 import * as Expensicons from '@components/Icon/Expensicons';
 import Text from '@components/Text';
 import useScrollContext from '@hooks/useScrollContext';
+import useThemeStyles from '@hooks/useThemeStyles';
 import useTheme from '@styles/theme/useTheme';
-import useThemeStyles from '@styles/useThemeStyles';
 import type {BasePickerHandle, BasePickerProps} from './types';
 
 type IconToRender = () => ReactElement;
diff --git a/src/components/PinButton.js b/src/components/PinButton.js
index 70333a02af44..a6b72b1bf1b1 100644
--- a/src/components/PinButton.js
+++ b/src/components/PinButton.js
@@ -1,7 +1,7 @@
 import React from 'react';
+import useThemeStyles from '@hooks/useThemeStyles';
 import reportPropTypes from '@pages/reportPropTypes';
 import useTheme from '@styles/theme/useTheme';
-import useThemeStyles from '@styles/useThemeStyles';
 import * as Report from '@userActions/Report';
 import * as Session from '@userActions/Session';
 import CONST from '@src/CONST';
diff --git a/src/components/PopoverMenu/index.js b/src/components/PopoverMenu/index.js
index 2106efb9d31e..1bb50dfbd89e 100644
--- a/src/components/PopoverMenu/index.js
+++ b/src/components/PopoverMenu/index.js
@@ -9,8 +9,8 @@ import Text from '@components/Text';
 import withWindowDimensions, {windowDimensionsPropTypes} from '@components/withWindowDimensions';
 import useArrowKeyFocusManager from '@hooks/useArrowKeyFocusManager';
 import useKeyboardShortcut from '@hooks/useKeyboardShortcut';
+import useThemeStyles from '@hooks/useThemeStyles';
 import useWindowDimensions from '@hooks/useWindowDimensions';
-import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 import {defaultProps as createMenuDefaultProps, propTypes as createMenuPropTypes} from './popoverMenuPropTypes';
 
diff --git a/src/components/PopoverWithMeasuredContent.js b/src/components/PopoverWithMeasuredContent.js
index b2c94c81770f..f01340f63427 100644
--- a/src/components/PopoverWithMeasuredContent.js
+++ b/src/components/PopoverWithMeasuredContent.js
@@ -2,9 +2,9 @@ import PropTypes from 'prop-types';
 import React, {useMemo, useState} from 'react';
 import {View} from 'react-native';
 import _ from 'underscore';
+import useThemeStyles from '@hooks/useThemeStyles';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import PopoverWithMeasuredContentStyleUtils from '@styles/PopoverWithMeasuredContentStyleUtils';
-import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 import Popover from './Popover';
 import {defaultProps as defaultPopoverProps, propTypes as popoverPropTypes} from './Popover/popoverPropTypes';
diff --git a/src/components/PopoverWithoutOverlay/index.js b/src/components/PopoverWithoutOverlay/index.js
index 8da514f3d7ab..43ca1c0de818 100644
--- a/src/components/PopoverWithoutOverlay/index.js
+++ b/src/components/PopoverWithoutOverlay/index.js
@@ -6,7 +6,7 @@ import {PopoverContext} from '@components/PopoverProvider';
 import withWindowDimensions from '@components/withWindowDimensions';
 import useSafeAreaInsets from '@hooks/useSafeAreaInsets';
 import useStyleUtils from '@hooks/useStyleUtils';
-import useThemeStyles from '@styles/useThemeStyles';
+import useThemeStyles from '@hooks/useThemeStyles';
 import * as Modal from '@userActions/Modal';
 
 function Popover(props) {
diff --git a/src/components/Pressable/GenericPressable/BaseGenericPressable.tsx b/src/components/Pressable/GenericPressable/BaseGenericPressable.tsx
index 604b52de923a..0a9f544bcee1 100644
--- a/src/components/Pressable/GenericPressable/BaseGenericPressable.tsx
+++ b/src/components/Pressable/GenericPressable/BaseGenericPressable.tsx
@@ -3,10 +3,10 @@ import React, {ForwardedRef, forwardRef, useCallback, useEffect, useMemo} from '
 import {GestureResponderEvent, Pressable, View} from 'react-native';
 import useSingleExecution from '@hooks/useSingleExecution';
 import useStyleUtils from '@hooks/useStyleUtils';
+import useThemeStyles from '@hooks/useThemeStyles';
 import Accessibility from '@libs/Accessibility';
 import HapticFeedback from '@libs/HapticFeedback';
 import KeyboardShortcut from '@libs/KeyboardShortcut';
-import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 import PressableProps, {PressableRef} from './types';
 
diff --git a/src/components/Pressable/PressableWithDelayToggle.tsx b/src/components/Pressable/PressableWithDelayToggle.tsx
index 91121719ef8d..f2a6b963acdb 100644
--- a/src/components/Pressable/PressableWithDelayToggle.tsx
+++ b/src/components/Pressable/PressableWithDelayToggle.tsx
@@ -7,9 +7,9 @@ import * as Expensicons from '@components/Icon/Expensicons';
 import Text from '@components/Text';
 import Tooltip from '@components/Tooltip';
 import useStyleUtils from '@hooks/useStyleUtils';
+import useThemeStyles from '@hooks/useThemeStyles';
 import useThrottledButtonState from '@hooks/useThrottledButtonState';
 import getButtonState from '@libs/getButtonState';
-import useThemeStyles from '@styles/useThemeStyles';
 import variables from '@styles/variables';
 import PressableProps, {PressableRef} from './GenericPressable/types';
 import PressableWithoutFeedback from './PressableWithoutFeedback';
diff --git a/src/components/PressableWithSecondaryInteraction/index.tsx b/src/components/PressableWithSecondaryInteraction/index.tsx
index 1bba85043170..0cb53e40325a 100644
--- a/src/components/PressableWithSecondaryInteraction/index.tsx
+++ b/src/components/PressableWithSecondaryInteraction/index.tsx
@@ -3,8 +3,8 @@ import {GestureResponderEvent} from 'react-native';
 import {PressableRef} from '@components/Pressable/GenericPressable/types';
 import PressableWithFeedback from '@components/Pressable/PressableWithFeedback';
 import useStyleUtils from '@hooks/useStyleUtils';
+import useThemeStyles from '@hooks/useThemeStyles';
 import * as DeviceCapabilities from '@libs/DeviceCapabilities';
-import useThemeStyles from '@styles/useThemeStyles';
 import PressableWithSecondaryInteractionProps from './types';
 
 /** This is a special Pressable that calls onSecondaryInteraction when LongPressed, or right-clicked. */
diff --git a/src/components/RadioButton.tsx b/src/components/RadioButton.tsx
index 5bb535bb4205..b25c09b90924 100644
--- a/src/components/RadioButton.tsx
+++ b/src/components/RadioButton.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import {View} from 'react-native';
+import useThemeStyles from '@hooks/useThemeStyles';
 import useTheme from '@styles/theme/useTheme';
-import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 import Icon from './Icon';
 import * as Expensicons from './Icon/Expensicons';
diff --git a/src/components/RadioButtonWithLabel.tsx b/src/components/RadioButtonWithLabel.tsx
index 7d8df23bae49..4c223262ac50 100644
--- a/src/components/RadioButtonWithLabel.tsx
+++ b/src/components/RadioButtonWithLabel.tsx
@@ -1,6 +1,6 @@
 import React, {ComponentType} from 'react';
 import {StyleProp, View, ViewStyle} from 'react-native';
-import useThemeStyles from '@styles/useThemeStyles';
+import useThemeStyles from '@hooks/useThemeStyles';
 import FormHelpMessage from './FormHelpMessage';
 import * as Pressables from './Pressable';
 import RadioButton from './RadioButton';
diff --git a/src/components/RadioButtons.tsx b/src/components/RadioButtons.tsx
index b83710bd85bf..8aa3ef7e8ffe 100644
--- a/src/components/RadioButtons.tsx
+++ b/src/components/RadioButtons.tsx
@@ -1,5 +1,5 @@
 import React, {useState} from 'react';
-import useThemeStyles from '@styles/useThemeStyles';
+import useThemeStyles from '@hooks/useThemeStyles';
 import RadioButtonWithLabel from './RadioButtonWithLabel';
 
 type Choice = {
diff --git a/src/components/Reactions/AddReactionBubble.js b/src/components/Reactions/AddReactionBubble.js
index a68bc1a6d132..71c10d0887e7 100644
--- a/src/components/Reactions/AddReactionBubble.js
+++ b/src/components/Reactions/AddReactionBubble.js
@@ -8,8 +8,8 @@ import Text from '@components/Text';
 import Tooltip from '@components/Tooltip/PopoverAnchorTooltip';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
 import useStyleUtils from '@hooks/useStyleUtils';
+import useThemeStyles from '@hooks/useThemeStyles';
 import getButtonState from '@libs/getButtonState';
-import useThemeStyles from '@styles/useThemeStyles';
 import variables from '@styles/variables';
 import * as EmojiPickerAction from '@userActions/EmojiPickerAction';
 import * as Session from '@userActions/Session';
diff --git a/src/components/Reactions/EmojiReactionBubble.js b/src/components/Reactions/EmojiReactionBubble.js
index c8474d1b2c38..25497cfc0efc 100644
--- a/src/components/Reactions/EmojiReactionBubble.js
+++ b/src/components/Reactions/EmojiReactionBubble.js
@@ -5,7 +5,7 @@ import Text from '@components/Text';
 import {withCurrentUserPersonalDetailsDefaultProps} from '@components/withCurrentUserPersonalDetails';
 import withWindowDimensions, {windowDimensionsPropTypes} from '@components/withWindowDimensions';
 import useStyleUtils from '@hooks/useStyleUtils';
-import useThemeStyles from '@styles/useThemeStyles';
+import useThemeStyles from '@hooks/useThemeStyles';
 import CONST from '@src/CONST';
 
 const propTypes = {
diff --git a/src/components/Reactions/MiniQuickEmojiReactions.js b/src/components/Reactions/MiniQuickEmojiReactions.js
index 99b10ffa2bc9..34d336887031 100644
--- a/src/components/Reactions/MiniQuickEmojiReactions.js
+++ b/src/components/Reactions/MiniQuickEmojiReactions.js
@@ -9,10 +9,10 @@ import * as Expensicons from '@components/Icon/Expensicons';
 import Text from '@components/Text';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
 import useStyleUtils from '@hooks/useStyleUtils';
+import useThemeStyles from '@hooks/useThemeStyles';
 import compose from '@libs/compose';
 import * as EmojiUtils from '@libs/EmojiUtils';
 import getButtonState from '@libs/getButtonState';
-import useThemeStyles from '@styles/useThemeStyles';
 import * as EmojiPickerAction from '@userActions/EmojiPickerAction';
 import * as Session from '@userActions/Session';
 import CONST from '@src/CONST';
diff --git a/src/components/Reactions/QuickEmojiReactions/BaseQuickEmojiReactions.js b/src/components/Reactions/QuickEmojiReactions/BaseQuickEmojiReactions.js
index 9d32b0240a23..c932632f7bff 100644
--- a/src/components/Reactions/QuickEmojiReactions/BaseQuickEmojiReactions.js
+++ b/src/components/Reactions/QuickEmojiReactions/BaseQuickEmojiReactions.js
@@ -7,8 +7,8 @@ import AddReactionBubble from '@components/Reactions/AddReactionBubble';
 import EmojiReactionBubble from '@components/Reactions/EmojiReactionBubble';
 import EmojiReactionsPropTypes from '@components/Reactions/EmojiReactionsPropTypes';
 import Tooltip from '@components/Tooltip';
+import useThemeStyles from '@hooks/useThemeStyles';
 import * as EmojiUtils from '@libs/EmojiUtils';
-import useThemeStyles from '@styles/useThemeStyles';
 import * as Session from '@userActions/Session';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
diff --git a/src/components/Reactions/ReactionTooltipContent.js b/src/components/Reactions/ReactionTooltipContent.js
index 1a7a06e9487d..bb6b03c5918b 100644
--- a/src/components/Reactions/ReactionTooltipContent.js
+++ b/src/components/Reactions/ReactionTooltipContent.js
@@ -5,8 +5,8 @@ import _ from 'underscore';
 import Text from '@components/Text';
 import {withCurrentUserPersonalDetailsDefaultProps, withCurrentUserPersonalDetailsPropTypes} from '@components/withCurrentUserPersonalDetails';
 import withLocalize from '@components/withLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
 import * as PersonalDetailsUtils from '@libs/PersonalDetailsUtils';
-import useThemeStyles from '@styles/useThemeStyles';
 
 const propTypes = {
     /**
diff --git a/src/components/Reactions/ReportActionItemEmojiReactions.js b/src/components/Reactions/ReportActionItemEmojiReactions.js
index 7c504e35cb9f..547f4089857f 100644
--- a/src/components/Reactions/ReportActionItemEmojiReactions.js
+++ b/src/components/Reactions/ReportActionItemEmojiReactions.js
@@ -7,11 +7,11 @@ import OfflineWithFeedback from '@components/OfflineWithFeedback';
 import Tooltip from '@components/Tooltip';
 import withCurrentUserPersonalDetails, {withCurrentUserPersonalDetailsDefaultProps, withCurrentUserPersonalDetailsPropTypes} from '@components/withCurrentUserPersonalDetails';
 import withLocalize from '@components/withLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
 import compose from '@libs/compose';
 import * as EmojiUtils from '@libs/EmojiUtils';
 import reportActionPropTypes from '@pages/home/report/reportActionPropTypes';
 import {ReactionListContext} from '@pages/home/ReportScreenContext';
-import useThemeStyles from '@styles/useThemeStyles';
 import AddReactionBubble from './AddReactionBubble';
 import EmojiReactionBubble from './EmojiReactionBubble';
 import EmojiReactionsPropTypes from './EmojiReactionsPropTypes';
diff --git a/src/components/ReceiptEmptyState.js b/src/components/ReceiptEmptyState.js
index 6af1cadd48c5..371518dd9a77 100644
--- a/src/components/ReceiptEmptyState.js
+++ b/src/components/ReceiptEmptyState.js
@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import useThemeStyles from '@styles/useThemeStyles';
+import useThemeStyles from '@hooks/useThemeStyles';
 import variables from '@styles/variables';
 import Icon from './Icon';
 import * as Expensicons from './Icon/Expensicons';
diff --git a/src/components/ReimbursementAccountLoadingIndicator.js b/src/components/ReimbursementAccountLoadingIndicator.js
index 72bf3ce1896d..bc0e70e64419 100644
--- a/src/components/ReimbursementAccountLoadingIndicator.js
+++ b/src/components/ReimbursementAccountLoadingIndicator.js
@@ -2,7 +2,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import {StyleSheet, View} from 'react-native';
 import useLocalize from '@hooks/useLocalize';
-import useThemeStyles from '@styles/useThemeStyles';
+import useThemeStyles from '@hooks/useThemeStyles';
 import FullPageOfflineBlockingView from './BlockingViews/FullPageOfflineBlockingView';
 import FullScreenLoadingIndicator from './FullscreenLoadingIndicator';
 import HeaderWithBackButton from './HeaderWithBackButton';
diff --git a/src/components/ReportActionItem/ChronosOOOListActions.js b/src/components/ReportActionItem/ChronosOOOListActions.js
index 7c918b6a2d9c..f90ae67796b9 100644
--- a/src/components/ReportActionItem/ChronosOOOListActions.js
+++ b/src/components/ReportActionItem/ChronosOOOListActions.js
@@ -7,9 +7,9 @@ import Button from '@components/Button';
 import OfflineWithFeedback from '@components/OfflineWithFeedback';
 import Text from '@components/Text';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
 import DateUtils from '@libs/DateUtils';
 import reportActionPropTypes from '@pages/home/report/reportActionPropTypes';
-import useThemeStyles from '@styles/useThemeStyles';
 import * as Chronos from '@userActions/Chronos';
 
 const propTypes = {
diff --git a/src/components/ReportActionItem/MoneyReportView.js b/src/components/ReportActionItem/MoneyReportView.js
index 6977ece0ff19..544f32e09880 100644
--- a/src/components/ReportActionItem/MoneyReportView.js
+++ b/src/components/ReportActionItem/MoneyReportView.js
@@ -8,12 +8,12 @@ import Text from '@components/Text';
 import withWindowDimensions, {windowDimensionsPropTypes} from '@components/withWindowDimensions';
 import useLocalize from '@hooks/useLocalize';
 import useStyleUtils from '@hooks/useStyleUtils';
+import useThemeStyles from '@hooks/useThemeStyles';
 import * as CurrencyUtils from '@libs/CurrencyUtils';
 import * as ReportUtils from '@libs/ReportUtils';
 import AnimatedEmptyStateBackground from '@pages/home/report/AnimatedEmptyStateBackground';
 import reportPropTypes from '@pages/reportPropTypes';
 import useTheme from '@styles/theme/useTheme';
-import useThemeStyles from '@styles/useThemeStyles';
 import variables from '@styles/variables';
 
 const propTypes = {
diff --git a/src/components/ReportActionItem/MoneyRequestAction.js b/src/components/ReportActionItem/MoneyRequestAction.js
index 57c1934be23d..48e85f1d115a 100644
--- a/src/components/ReportActionItem/MoneyRequestAction.js
+++ b/src/components/ReportActionItem/MoneyRequestAction.js
@@ -8,6 +8,7 @@ import {withNetwork} from '@components/OnyxProvider';
 import refPropTypes from '@components/refPropTypes';
 import RenderHTML from '@components/RenderHTML';
 import useLocalize from '@hooks/useLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
 import compose from '@libs/compose';
 import * as IOUUtils from '@libs/IOUUtils';
 import Navigation from '@libs/Navigation/Navigation';
@@ -17,7 +18,6 @@ import * as ReportUtils from '@libs/ReportUtils';
 import reportActionPropTypes from '@pages/home/report/reportActionPropTypes';
 import iouReportPropTypes from '@pages/iouReportPropTypes';
 import reportPropTypes from '@pages/reportPropTypes';
-import useThemeStyles from '@styles/useThemeStyles';
 import * as Report from '@userActions/Report';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
diff --git a/src/components/ReportActionItem/MoneyRequestPreview.js b/src/components/ReportActionItem/MoneyRequestPreview.js
index 3658018299e8..6abe92d55b71 100644
--- a/src/components/ReportActionItem/MoneyRequestPreview.js
+++ b/src/components/ReportActionItem/MoneyRequestPreview.js
@@ -16,6 +16,7 @@ import Text from '@components/Text';
 import transactionPropTypes from '@components/transactionPropTypes';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
 import useStyleUtils from '@hooks/useStyleUtils';
+import useThemeStyles from '@hooks/useThemeStyles';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import compose from '@libs/compose';
 import ControlSelection from '@libs/ControlSelection';
@@ -30,7 +31,6 @@ import * as TransactionUtils from '@libs/TransactionUtils';
 import walletTermsPropTypes from '@pages/EnablePayments/walletTermsPropTypes';
 import reportActionPropTypes from '@pages/home/report/reportActionPropTypes';
 import useTheme from '@styles/theme/useTheme';
-import useThemeStyles from '@styles/useThemeStyles';
 import * as PaymentMethods from '@userActions/PaymentMethods';
 import * as Report from '@userActions/Report';
 import CONST from '@src/CONST';
diff --git a/src/components/ReportActionItem/MoneyRequestView.js b/src/components/ReportActionItem/MoneyRequestView.js
index db3f8c6eeba4..d2e82e65bb7d 100644
--- a/src/components/ReportActionItem/MoneyRequestView.js
+++ b/src/components/ReportActionItem/MoneyRequestView.js
@@ -18,6 +18,7 @@ import withCurrentUserPersonalDetails, {withCurrentUserPersonalDetailsPropTypes}
 import useLocalize from '@hooks/useLocalize';
 import usePermissions from '@hooks/usePermissions';
 import useStyleUtils from '@hooks/useStyleUtils';
+import useThemeStyles from '@hooks/useThemeStyles';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import * as CardUtils from '@libs/CardUtils';
 import compose from '@libs/compose';
@@ -34,7 +35,6 @@ import reportActionPropTypes from '@pages/home/report/reportActionPropTypes';
 import iouReportPropTypes from '@pages/iouReportPropTypes';
 import reportPropTypes from '@pages/reportPropTypes';
 import useTheme from '@styles/theme/useTheme';
-import useThemeStyles from '@styles/useThemeStyles';
 import * as IOU from '@userActions/IOU';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
diff --git a/src/components/ReportActionItem/RenameAction.js b/src/components/ReportActionItem/RenameAction.js
index b4f4b23c9ebf..52039b7b593b 100644
--- a/src/components/ReportActionItem/RenameAction.js
+++ b/src/components/ReportActionItem/RenameAction.js
@@ -4,9 +4,9 @@ import React from 'react';
 import Text from '@components/Text';
 import withCurrentUserPersonalDetails, {withCurrentUserPersonalDetailsPropTypes} from '@components/withCurrentUserPersonalDetails';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
 import compose from '@libs/compose';
 import reportActionPropTypes from '@pages/home/report/reportActionPropTypes';
-import useThemeStyles from '@styles/useThemeStyles';
 
 const propTypes = {
     /** All the data of the action */
diff --git a/src/components/ReportActionItem/ReportActionItemImage.js b/src/components/ReportActionItem/ReportActionItemImage.js
index f0eed3ac2f02..09582e47a3db 100644
--- a/src/components/ReportActionItem/ReportActionItemImage.js
+++ b/src/components/ReportActionItem/ReportActionItemImage.js
@@ -9,10 +9,10 @@ import {ShowContextMenuContext} from '@components/ShowContextMenuContext';
 import ThumbnailImage from '@components/ThumbnailImage';
 import transactionPropTypes from '@components/transactionPropTypes';
 import useLocalize from '@hooks/useLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
 import Navigation from '@libs/Navigation/Navigation';
 import * as TransactionUtils from '@libs/TransactionUtils';
 import tryResolveUrlFromApiRoot from '@libs/tryResolveUrlFromApiRoot';
-import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 import ROUTES from '@src/ROUTES';
 
diff --git a/src/components/ReportActionItem/ReportActionItemImages.js b/src/components/ReportActionItem/ReportActionItemImages.js
index bcd9c62ee67f..97f1a929d57c 100644
--- a/src/components/ReportActionItem/ReportActionItemImages.js
+++ b/src/components/ReportActionItem/ReportActionItemImages.js
@@ -6,8 +6,8 @@ import _ from 'underscore';
 import Text from '@components/Text';
 import transactionPropTypes from '@components/transactionPropTypes';
 import useStyleUtils from '@hooks/useStyleUtils';
+import useThemeStyles from '@hooks/useThemeStyles';
 import useTheme from '@styles/theme/useTheme';
-import useThemeStyles from '@styles/useThemeStyles';
 import variables from '@styles/variables';
 import ReportActionItemImage from './ReportActionItemImage';
 
diff --git a/src/components/ReportActionItem/ReportPreview.js b/src/components/ReportActionItem/ReportPreview.js
index 859c97993b97..baa8dab48b35 100644
--- a/src/components/ReportActionItem/ReportPreview.js
+++ b/src/components/ReportActionItem/ReportPreview.js
@@ -14,6 +14,7 @@ import {showContextMenuForReport} from '@components/ShowContextMenuContext';
 import Text from '@components/Text';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
 import useLocalize from '@hooks/useLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
 import compose from '@libs/compose';
 import ControlSelection from '@libs/ControlSelection';
 import * as CurrencyUtils from '@libs/CurrencyUtils';
@@ -26,7 +27,6 @@ import * as TransactionUtils from '@libs/TransactionUtils';
 import reportActionPropTypes from '@pages/home/report/reportActionPropTypes';
 import reportPropTypes from '@pages/reportPropTypes';
 import useTheme from '@styles/theme/useTheme';
-import useThemeStyles from '@styles/useThemeStyles';
 import * as IOU from '@userActions/IOU';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
diff --git a/src/components/ReportActionItem/TaskAction.js b/src/components/ReportActionItem/TaskAction.js
index f30d8c3908de..2f390e23e1c0 100644
--- a/src/components/ReportActionItem/TaskAction.js
+++ b/src/components/ReportActionItem/TaskAction.js
@@ -3,7 +3,7 @@ import React from 'react';
 import {View} from 'react-native';
 import Text from '@components/Text';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
-import useThemeStyles from '@styles/useThemeStyles';
+import useThemeStyles from '@hooks/useThemeStyles';
 import * as Task from '@userActions/Task';
 
 const propTypes = {
diff --git a/src/components/ReportActionItem/TaskPreview.js b/src/components/ReportActionItem/TaskPreview.js
index 48fd1d86cfe0..ecc99ada8f33 100644
--- a/src/components/ReportActionItem/TaskPreview.js
+++ b/src/components/ReportActionItem/TaskPreview.js
@@ -15,6 +15,7 @@ import {showContextMenuForReport} from '@components/ShowContextMenuContext';
 import withCurrentUserPersonalDetails, {withCurrentUserPersonalDetailsDefaultProps, withCurrentUserPersonalDetailsPropTypes} from '@components/withCurrentUserPersonalDetails';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
 import useStyleUtils from '@hooks/useStyleUtils';
+import useThemeStyles from '@hooks/useThemeStyles';
 import compose from '@libs/compose';
 import ControlSelection from '@libs/ControlSelection';
 import * as DeviceCapabilities from '@libs/DeviceCapabilities';
@@ -23,7 +24,6 @@ import * as LocalePhoneNumber from '@libs/LocalePhoneNumber';
 import Navigation from '@libs/Navigation/Navigation';
 import * as ReportUtils from '@libs/ReportUtils';
 import reportActionPropTypes from '@pages/home/report/reportActionPropTypes';
-import useThemeStyles from '@styles/useThemeStyles';
 import * as Session from '@userActions/Session';
 import * as Task from '@userActions/Task';
 import CONST from '@src/CONST';
diff --git a/src/components/ReportActionItem/TaskView.js b/src/components/ReportActionItem/TaskView.js
index f2e76e035b2f..bb8945495018 100644
--- a/src/components/ReportActionItem/TaskView.js
+++ b/src/components/ReportActionItem/TaskView.js
@@ -18,6 +18,7 @@ import withCurrentUserPersonalDetails, {withCurrentUserPersonalDetailsPropTypes}
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
 import withWindowDimensions from '@components/withWindowDimensions';
 import useStyleUtils from '@hooks/useStyleUtils';
+import useThemeStyles from '@hooks/useThemeStyles';
 import compose from '@libs/compose';
 import convertToLTR from '@libs/convertToLTR';
 import getButtonState from '@libs/getButtonState';
@@ -25,7 +26,6 @@ import Navigation from '@libs/Navigation/Navigation';
 import * as OptionsListUtils from '@libs/OptionsListUtils';
 import * as ReportUtils from '@libs/ReportUtils';
 import reportPropTypes from '@pages/reportPropTypes';
-import useThemeStyles from '@styles/useThemeStyles';
 import * as Session from '@userActions/Session';
 import * as Task from '@userActions/Task';
 import CONST from '@src/CONST';
diff --git a/src/components/ReportActionsSkeletonView/SkeletonViewLines.tsx b/src/components/ReportActionsSkeletonView/SkeletonViewLines.tsx
index 36dcd9040f2b..abd4d2f9e27d 100644
--- a/src/components/ReportActionsSkeletonView/SkeletonViewLines.tsx
+++ b/src/components/ReportActionsSkeletonView/SkeletonViewLines.tsx
@@ -1,8 +1,8 @@
 import React from 'react';
 import {Circle, Rect} from 'react-native-svg';
 import SkeletonViewContentLoader from '@components/SkeletonViewContentLoader';
+import useThemeStyles from '@hooks/useThemeStyles';
 import useTheme from '@styles/theme/useTheme';
-import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 
 type SkeletonViewLinesProps = {
diff --git a/src/components/ReportHeaderSkeletonView.tsx b/src/components/ReportHeaderSkeletonView.tsx
index 8889e75e9a8b..c2130a80ef07 100644
--- a/src/components/ReportHeaderSkeletonView.tsx
+++ b/src/components/ReportHeaderSkeletonView.tsx
@@ -2,9 +2,9 @@ import React from 'react';
 import {View} from 'react-native';
 import {Circle, Rect} from 'react-native-svg';
 import useLocalize from '@hooks/useLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import useTheme from '@styles/theme/useTheme';
-import useThemeStyles from '@styles/useThemeStyles';
 import variables from '@styles/variables';
 import CONST from '@src/CONST';
 import Icon from './Icon';
diff --git a/src/components/ReportWelcomeText.js b/src/components/ReportWelcomeText.js
index 6613517b2ed2..a204d0c59aaf 100644
--- a/src/components/ReportWelcomeText.js
+++ b/src/components/ReportWelcomeText.js
@@ -4,13 +4,13 @@ import React from 'react';
 import {View} from 'react-native';
 import {withOnyx} from 'react-native-onyx';
 import _ from 'underscore';
+import useThemeStyles from '@hooks/useThemeStyles';
 import compose from '@libs/compose';
 import Navigation from '@libs/Navigation/Navigation';
 import * as OptionsListUtils from '@libs/OptionsListUtils';
 import * as PolicyUtils from '@libs/PolicyUtils';
 import * as ReportUtils from '@libs/ReportUtils';
 import reportPropTypes from '@pages/reportPropTypes';
-import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
diff --git a/src/components/RoomHeaderAvatars.js b/src/components/RoomHeaderAvatars.js
index dc9625c63fc5..76dade6443f3 100644
--- a/src/components/RoomHeaderAvatars.js
+++ b/src/components/RoomHeaderAvatars.js
@@ -3,9 +3,9 @@ import React, {memo} from 'react';
 import {View} from 'react-native';
 import _ from 'underscore';
 import useStyleUtils from '@hooks/useStyleUtils';
+import useThemeStyles from '@hooks/useThemeStyles';
 import * as UserUtils from '@libs/UserUtils';
 import useTheme from '@styles/theme/useTheme';
-import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 import AttachmentModal from './AttachmentModal';
 import Avatar from './Avatar';
diff --git a/src/components/SAMLLoadingIndicator.js b/src/components/SAMLLoadingIndicator.js
index 1ad99f29d734..8c8867ed0467 100644
--- a/src/components/SAMLLoadingIndicator.js
+++ b/src/components/SAMLLoadingIndicator.js
@@ -1,8 +1,8 @@
 import React from 'react';
 import {StyleSheet, View} from 'react-native';
 import useLocalize from '@hooks/useLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
 import useTheme from '@styles/theme/useTheme';
-import useThemeStyles from '@styles/useThemeStyles';
 import Icon from './Icon';
 import * as Expensicons from './Icon/Expensicons';
 import * as Illustrations from './Icon/Illustrations';
diff --git a/src/components/SafeArea/index.ios.tsx b/src/components/SafeArea/index.ios.tsx
index 194919b3eef4..1b2e1881ade3 100644
--- a/src/components/SafeArea/index.ios.tsx
+++ b/src/components/SafeArea/index.ios.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import {SafeAreaView} from 'react-native-safe-area-context';
-import useThemeStyles from '@styles/useThemeStyles';
+import useThemeStyles from '@hooks/useThemeStyles';
 import SafeAreaProps from './types';
 
 function SafeArea({children}: SafeAreaProps) {
diff --git a/src/components/ScreenWrapper/index.js b/src/components/ScreenWrapper/index.js
index 6af67c51ffaf..bd277ffa1ab8 100644
--- a/src/components/ScreenWrapper/index.js
+++ b/src/components/ScreenWrapper/index.js
@@ -14,9 +14,9 @@ import useEnvironment from '@hooks/useEnvironment';
 import useInitialDimensions from '@hooks/useInitialWindowDimensions';
 import useKeyboardState from '@hooks/useKeyboardState';
 import useNetwork from '@hooks/useNetwork';
+import useThemeStyles from '@hooks/useThemeStyles';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import * as Browser from '@libs/Browser';
-import useThemeStyles from '@styles/useThemeStyles';
 import toggleTestToolsModal from '@userActions/TestTool';
 import CONST from '@src/CONST';
 import {defaultProps, propTypes} from './propTypes';
diff --git a/src/components/Section.js b/src/components/Section.js
index ad52bf0e3509..a59476fb0c05 100644
--- a/src/components/Section.js
+++ b/src/components/Section.js
@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import {View} from 'react-native';
-import useThemeStyles from '@styles/useThemeStyles';
+import useThemeStyles from '@hooks/useThemeStyles';
 import Icon from './Icon';
 import MenuItemList from './MenuItemList';
 import menuItemPropTypes from './menuItemPropTypes';
diff --git a/src/components/SelectCircle.tsx b/src/components/SelectCircle.tsx
index 4d6e3de06d71..16e0341d41cf 100644
--- a/src/components/SelectCircle.tsx
+++ b/src/components/SelectCircle.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import {StyleProp, View, ViewStyle} from 'react-native';
+import useThemeStyles from '@hooks/useThemeStyles';
 import useTheme from '@styles/theme/useTheme';
-import useThemeStyles from '@styles/useThemeStyles';
 import Icon from './Icon';
 import * as Expensicons from './Icon/Expensicons';
 
diff --git a/src/components/SelectionList/BaseListItem.js b/src/components/SelectionList/BaseListItem.js
index 3c55e39eec23..21976bdfd775 100644
--- a/src/components/SelectionList/BaseListItem.js
+++ b/src/components/SelectionList/BaseListItem.js
@@ -8,8 +8,8 @@ import PressableWithFeedback from '@components/Pressable/PressableWithFeedback';
 import Text from '@components/Text';
 import useLocalize from '@hooks/useLocalize';
 import useStyleUtils from '@hooks/useStyleUtils';
+import useThemeStyles from '@hooks/useThemeStyles';
 import useTheme from '@styles/theme/useTheme';
-import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 import RadioListItem from './RadioListItem';
 import {baseListItemPropTypes} from './selectionListPropTypes';
diff --git a/src/components/SelectionList/BaseSelectionList.js b/src/components/SelectionList/BaseSelectionList.js
index 6836541ee7a0..c145fd5644fd 100644
--- a/src/components/SelectionList/BaseSelectionList.js
+++ b/src/components/SelectionList/BaseSelectionList.js
@@ -17,9 +17,9 @@ import withKeyboardState, {keyboardStatePropTypes} from '@components/withKeyboar
 import useActiveElement from '@hooks/useActiveElement';
 import useKeyboardShortcut from '@hooks/useKeyboardShortcut';
 import useLocalize from '@hooks/useLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
 import Log from '@libs/Log';
 import useTheme from '@styles/theme/useTheme';
-import useThemeStyles from '@styles/useThemeStyles';
 import variables from '@styles/variables';
 import CONST from '@src/CONST';
 import BaseListItem from './BaseListItem';
diff --git a/src/components/SelectionList/RadioListItem.js b/src/components/SelectionList/RadioListItem.js
index ebf66ae083bf..d92d920eecd9 100644
--- a/src/components/SelectionList/RadioListItem.js
+++ b/src/components/SelectionList/RadioListItem.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import {View} from 'react-native';
 import Text from '@components/Text';
-import useThemeStyles from '@styles/useThemeStyles';
+import useThemeStyles from '@hooks/useThemeStyles';
 import {radioListItemPropTypes} from './selectionListPropTypes';
 
 function RadioListItem({item, isFocused = false}) {
diff --git a/src/components/SelectionList/UserListItem.js b/src/components/SelectionList/UserListItem.js
index 0e3af0ee10f9..72d930e3a38e 100644
--- a/src/components/SelectionList/UserListItem.js
+++ b/src/components/SelectionList/UserListItem.js
@@ -4,7 +4,7 @@ import {View} from 'react-native';
 import SubscriptAvatar from '@components/SubscriptAvatar';
 import Text from '@components/Text';
 import Tooltip from '@components/Tooltip';
-import useThemeStyles from '@styles/useThemeStyles';
+import useThemeStyles from '@hooks/useThemeStyles';
 import {userListItemPropTypes} from './selectionListPropTypes';
 
 function UserListItem({item, isFocused = false, showTooltip}) {
diff --git a/src/components/ShowMoreButton/index.js b/src/components/ShowMoreButton/index.js
index 71553c705e9c..c9ca31558f5c 100644
--- a/src/components/ShowMoreButton/index.js
+++ b/src/components/ShowMoreButton/index.js
@@ -5,10 +5,10 @@ import _ from 'underscore';
 import Button from '@components/Button';
 import * as Expensicons from '@components/Icon/Expensicons';
 import useLocalize from '@hooks/useLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
 import * as NumberFormatUtils from '@libs/NumberFormatUtils';
 import stylePropTypes from '@styles/stylePropTypes';
 import useTheme from '@styles/theme/useTheme';
-import useThemeStyles from '@styles/useThemeStyles';
 
 const propTypes = {
     /** Additional styles for container */
diff --git a/src/components/SignInButtons/AppleSignIn/index.desktop.js b/src/components/SignInButtons/AppleSignIn/index.desktop.js
index f5dd4512c7c1..cc7ae5b623a5 100644
--- a/src/components/SignInButtons/AppleSignIn/index.desktop.js
+++ b/src/components/SignInButtons/AppleSignIn/index.desktop.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import {View} from 'react-native';
 import IconButton from '@components/SignInButtons/IconButton';
-import useThemeStyles from '@styles/useThemeStyles';
+import useThemeStyles from '@hooks/useThemeStyles';
 import CONFIG from '@src/CONFIG';
 import CONST from '@src/CONST';
 import ROUTES from '@src/ROUTES';
diff --git a/src/components/SignInButtons/GoogleSignIn/index.desktop.js b/src/components/SignInButtons/GoogleSignIn/index.desktop.js
index aec0b0a5eef7..9284a5332e3d 100644
--- a/src/components/SignInButtons/GoogleSignIn/index.desktop.js
+++ b/src/components/SignInButtons/GoogleSignIn/index.desktop.js
@@ -2,7 +2,7 @@ import React from 'react';
 import {View} from 'react-native';
 import IconButton from '@components/SignInButtons/IconButton';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
-import useThemeStyles from '@styles/useThemeStyles';
+import useThemeStyles from '@hooks/useThemeStyles';
 import CONFIG from '@src/CONFIG';
 import CONST from '@src/CONST';
 import ROUTES from '@src/ROUTES';
diff --git a/src/components/SignInButtons/GoogleSignIn/index.website.js b/src/components/SignInButtons/GoogleSignIn/index.website.js
index ac5018df8c15..720f628751f6 100644
--- a/src/components/SignInButtons/GoogleSignIn/index.website.js
+++ b/src/components/SignInButtons/GoogleSignIn/index.website.js
@@ -2,7 +2,7 @@ import PropTypes from 'prop-types';
 import React, {useCallback} from 'react';
 import {View} from 'react-native';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
-import useThemeStyles from '@styles/useThemeStyles';
+import useThemeStyles from '@hooks/useThemeStyles';
 import * as Session from '@userActions/Session';
 import CONFIG from '@src/CONFIG';
 import CONST from '@src/CONST';
diff --git a/src/components/SignInButtons/IconButton.js b/src/components/SignInButtons/IconButton.js
index 706ceb2edc3f..c9e985cba4c7 100644
--- a/src/components/SignInButtons/IconButton.js
+++ b/src/components/SignInButtons/IconButton.js
@@ -4,7 +4,7 @@ import Icon from '@components/Icon';
 import * as Expensicons from '@components/Icon/Expensicons';
 import PressableWithoutFeedback from '@components/Pressable/PressableWithoutFeedback';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
-import useThemeStyles from '@styles/useThemeStyles';
+import useThemeStyles from '@hooks/useThemeStyles';
 import CONST from '@src/CONST';
 
 const propTypes = {
diff --git a/src/components/SingleChoiceQuestion.tsx b/src/components/SingleChoiceQuestion.tsx
index 07d4dfe817dd..cbe1841aad56 100644
--- a/src/components/SingleChoiceQuestion.tsx
+++ b/src/components/SingleChoiceQuestion.tsx
@@ -1,6 +1,6 @@
 import React, {ForwardedRef, forwardRef} from 'react';
 import {Text as RNText} from 'react-native';
-import useThemeStyles from '@styles/useThemeStyles';
+import useThemeStyles from '@hooks/useThemeStyles';
 import FormHelpMessage from './FormHelpMessage';
 import RadioButtons, {Choice} from './RadioButtons';
 import Text from './Text';
diff --git a/src/components/SingleOptionSelector.js b/src/components/SingleOptionSelector.js
index 9567ad2331ef..27026ed830a0 100644
--- a/src/components/SingleOptionSelector.js
+++ b/src/components/SingleOptionSelector.js
@@ -2,7 +2,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import {View} from 'react-native';
 import _ from 'underscore';
-import useThemeStyles from '@styles/useThemeStyles';
+import useThemeStyles from '@hooks/useThemeStyles';
 import CONST from '@src/CONST';
 import PressableWithoutFeedback from './Pressable/PressableWithoutFeedback';
 import SelectCircle from './SelectCircle';
diff --git a/src/components/SplashScreenHider/index.native.tsx b/src/components/SplashScreenHider/index.native.tsx
index 29b5ae710dda..64c2e64fb4ae 100644
--- a/src/components/SplashScreenHider/index.native.tsx
+++ b/src/components/SplashScreenHider/index.native.tsx
@@ -2,8 +2,8 @@ import {useCallback, useRef} from 'react';
 import {StyleSheet, ViewStyle} from 'react-native';
 import Reanimated, {Easing, runOnJS, useAnimatedStyle, useSharedValue, withTiming} from 'react-native-reanimated';
 import Logo from '@assets/images/new-expensify-dark.svg';
+import useThemeStyles from '@hooks/useThemeStyles';
 import BootSplash from '@libs/BootSplash';
-import useThemeStyles from '@styles/useThemeStyles';
 import type SplashScreenHiderProps from './types';
 
 function SplashScreenHider({onHide = () => {}}: SplashScreenHiderProps) {
diff --git a/src/components/StatePicker/StateSelectorModal.js b/src/components/StatePicker/StateSelectorModal.js
index 908bb5eb5b2a..003211478529 100644
--- a/src/components/StatePicker/StateSelectorModal.js
+++ b/src/components/StatePicker/StateSelectorModal.js
@@ -7,9 +7,9 @@ import Modal from '@components/Modal';
 import ScreenWrapper from '@components/ScreenWrapper';
 import SelectionList from '@components/SelectionList';
 import useLocalize from '@hooks/useLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
 import searchCountryOptions from '@libs/searchCountryOptions';
 import StringUtils from '@libs/StringUtils';
-import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 
 const propTypes = {
diff --git a/src/components/StatePicker/index.js b/src/components/StatePicker/index.js
index d9c137ac9dc1..6fa60fbba947 100644
--- a/src/components/StatePicker/index.js
+++ b/src/components/StatePicker/index.js
@@ -7,7 +7,7 @@ import FormHelpMessage from '@components/FormHelpMessage';
 import MenuItemWithTopDescription from '@components/MenuItemWithTopDescription';
 import refPropTypes from '@components/refPropTypes';
 import useLocalize from '@hooks/useLocalize';
-import useThemeStyles from '@styles/useThemeStyles';
+import useThemeStyles from '@hooks/useThemeStyles';
 import StateSelectorModal from './StateSelectorModal';
 
 const propTypes = {
diff --git a/src/components/SubscriptAvatar.tsx b/src/components/SubscriptAvatar.tsx
index 8a4eddfa0bfa..1cd29d260773 100644
--- a/src/components/SubscriptAvatar.tsx
+++ b/src/components/SubscriptAvatar.tsx
@@ -2,9 +2,9 @@ import React, {memo} from 'react';
 import {View} from 'react-native';
 import {ValueOf} from 'type-fest';
 import useStyleUtils from '@hooks/useStyleUtils';
+import useThemeStyles from '@hooks/useThemeStyles';
 import type {AvatarSource} from '@libs/UserUtils';
 import useTheme from '@styles/theme/useTheme';
-import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 import {AvatarType} from '@src/types/onyx/OnyxCommon';
 import Avatar from './Avatar';
diff --git a/src/components/Switch.tsx b/src/components/Switch.tsx
index 2398f531628d..b2f36817c532 100644
--- a/src/components/Switch.tsx
+++ b/src/components/Switch.tsx
@@ -1,7 +1,7 @@
 import React, {useEffect, useRef} from 'react';
 import {Animated} from 'react-native';
+import useThemeStyles from '@hooks/useThemeStyles';
 import useNativeDriver from '@libs/useNativeDriver';
-import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 import PressableWithFeedback from './Pressable/PressableWithFeedback';
 
diff --git a/src/components/TabSelector/TabLabel.js b/src/components/TabSelector/TabLabel.js
index 5dc050731fc5..fdf204011152 100644
--- a/src/components/TabSelector/TabLabel.js
+++ b/src/components/TabSelector/TabLabel.js
@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import {Animated, StyleSheet, Text, View} from 'react-native';
-import useThemeStyles from '@styles/useThemeStyles';
+import useThemeStyles from '@hooks/useThemeStyles';
 
 const propTypes = {
     /** Title of the tab */
diff --git a/src/components/TabSelector/TabSelector.js b/src/components/TabSelector/TabSelector.js
index 0d0a054bf353..ae4f9bfa5d34 100644
--- a/src/components/TabSelector/TabSelector.js
+++ b/src/components/TabSelector/TabSelector.js
@@ -4,8 +4,8 @@ import {View} from 'react-native';
 import _ from 'underscore';
 import * as Expensicons from '@components/Icon/Expensicons';
 import useLocalize from '@hooks/useLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
 import useTheme from '@styles/theme/useTheme';
-import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 import TabSelectorItem from './TabSelectorItem';
 
diff --git a/src/components/TabSelector/TabSelectorItem.js b/src/components/TabSelector/TabSelectorItem.js
index 116b5db02d2c..88aa98766fae 100644
--- a/src/components/TabSelector/TabSelectorItem.js
+++ b/src/components/TabSelector/TabSelectorItem.js
@@ -2,7 +2,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import {Animated, StyleSheet} from 'react-native';
 import PressableWithFeedback from '@components/Pressable/PressableWithFeedback';
-import useThemeStyles from '@styles/useThemeStyles';
+import useThemeStyles from '@hooks/useThemeStyles';
 import TabIcon from './TabIcon';
 import TabLabel from './TabLabel';
 
diff --git a/src/components/TagPicker/index.js b/src/components/TagPicker/index.js
index 410510b80f7e..cb3d9bf260e6 100644
--- a/src/components/TagPicker/index.js
+++ b/src/components/TagPicker/index.js
@@ -5,9 +5,9 @@ import _ from 'underscore';
 import OptionsSelector from '@components/OptionsSelector';
 import useLocalize from '@hooks/useLocalize';
 import useStyleUtils from '@hooks/useStyleUtils';
+import useThemeStyles from '@hooks/useThemeStyles';
 import * as OptionsListUtils from '@libs/OptionsListUtils';
 import * as PolicyUtils from '@libs/PolicyUtils';
-import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import {defaultProps, propTypes} from './tagPickerPropTypes';
diff --git a/src/components/TaskHeaderActionButton.tsx b/src/components/TaskHeaderActionButton.tsx
index 5f8461d8e324..47975fd7fc1e 100644
--- a/src/components/TaskHeaderActionButton.tsx
+++ b/src/components/TaskHeaderActionButton.tsx
@@ -2,8 +2,8 @@ import React from 'react';
 import {View} from 'react-native';
 import {OnyxEntry, withOnyx} from 'react-native-onyx';
 import useLocalize from '@hooks/useLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
 import * as ReportUtils from '@libs/ReportUtils';
-import useThemeStyles from '@styles/useThemeStyles';
 import * as Session from '@userActions/Session';
 import * as Task from '@userActions/Task';
 import ONYXKEYS from '@src/ONYXKEYS';
diff --git a/src/components/TestToolMenu.tsx b/src/components/TestToolMenu.tsx
index 53953b861d7d..82b597f77268 100644
--- a/src/components/TestToolMenu.tsx
+++ b/src/components/TestToolMenu.tsx
@@ -1,8 +1,8 @@
 import React from 'react';
 import {OnyxEntry, withOnyx} from 'react-native-onyx';
+import useThemeStyles from '@hooks/useThemeStyles';
 import * as ApiUtils from '@libs/ApiUtils';
 import compose from '@libs/compose';
-import useThemeStyles from '@styles/useThemeStyles';
 import * as Network from '@userActions/Network';
 import * as Session from '@userActions/Session';
 import * as User from '@userActions/User';
diff --git a/src/components/TestToolRow.tsx b/src/components/TestToolRow.tsx
index 4999866b27ee..4ed1aa126002 100644
--- a/src/components/TestToolRow.tsx
+++ b/src/components/TestToolRow.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import {View} from 'react-native';
-import useThemeStyles from '@styles/useThemeStyles';
+import useThemeStyles from '@hooks/useThemeStyles';
 import Text from './Text';
 
 type TestToolRowProps = {
diff --git a/src/components/TestToolsModal.tsx b/src/components/TestToolsModal.tsx
index f555c2b0b4fe..4138df64adc2 100644
--- a/src/components/TestToolsModal.tsx
+++ b/src/components/TestToolsModal.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import {View} from 'react-native';
 import {OnyxEntry, withOnyx} from 'react-native-onyx';
-import useThemeStyles from '@styles/useThemeStyles';
+import useThemeStyles from '@hooks/useThemeStyles';
 import toggleTestToolsModal from '@userActions/TestTool';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
diff --git a/src/components/TextInput/BaseTextInput/index.js b/src/components/TextInput/BaseTextInput/index.js
index 1734ecb2ccdc..d6ad9c909ae1 100644
--- a/src/components/TextInput/BaseTextInput/index.js
+++ b/src/components/TextInput/BaseTextInput/index.js
@@ -14,11 +14,11 @@ import * as styleConst from '@components/TextInput/styleConst';
 import TextInputLabel from '@components/TextInput/TextInputLabel';
 import withLocalize from '@components/withLocalize';
 import useStyleUtils from '@hooks/useStyleUtils';
+import useThemeStyles from '@hooks/useThemeStyles';
 import * as Browser from '@libs/Browser';
 import isInputAutoFilled from '@libs/isInputAutoFilled';
 import useNativeDriver from '@libs/useNativeDriver';
 import useTheme from '@styles/theme/useTheme';
-import useThemeStyles from '@styles/useThemeStyles';
 import variables from '@styles/variables';
 import CONST from '@src/CONST';
 import * as baseTextInputPropTypes from './baseTextInputPropTypes';
diff --git a/src/components/TextInput/BaseTextInput/index.native.js b/src/components/TextInput/BaseTextInput/index.native.js
index 9f5cc53cbd44..4cef684785d1 100644
--- a/src/components/TextInput/BaseTextInput/index.native.js
+++ b/src/components/TextInput/BaseTextInput/index.native.js
@@ -14,11 +14,11 @@ import * as styleConst from '@components/TextInput/styleConst';
 import TextInputLabel from '@components/TextInput/TextInputLabel';
 import withLocalize from '@components/withLocalize';
 import useStyleUtils from '@hooks/useStyleUtils';
+import useThemeStyles from '@hooks/useThemeStyles';
 import getSecureEntryKeyboardType from '@libs/getSecureEntryKeyboardType';
 import isInputAutoFilled from '@libs/isInputAutoFilled';
 import useNativeDriver from '@libs/useNativeDriver';
 import useTheme from '@styles/theme/useTheme';
-import useThemeStyles from '@styles/useThemeStyles';
 import variables from '@styles/variables';
 import CONST from '@src/CONST';
 import * as baseTextInputPropTypes from './baseTextInputPropTypes';
diff --git a/src/components/TextInput/TextInputLabel/index.js b/src/components/TextInput/TextInputLabel/index.js
index 43dd1a0ef330..62d2f2b51e45 100644
--- a/src/components/TextInput/TextInputLabel/index.js
+++ b/src/components/TextInput/TextInputLabel/index.js
@@ -1,6 +1,6 @@
 import React, {useEffect, useRef} from 'react';
 import {Animated} from 'react-native';
-import useThemeStyles from '@styles/useThemeStyles';
+import useThemeStyles from '@hooks/useThemeStyles';
 import CONST from '@src/CONST';
 import {defaultProps, propTypes} from './TextInputLabelPropTypes';
 
diff --git a/src/components/TextInput/TextInputLabel/index.native.js b/src/components/TextInput/TextInputLabel/index.native.js
index afc2aa09c84e..eb0f8b17e8b7 100644
--- a/src/components/TextInput/TextInputLabel/index.native.js
+++ b/src/components/TextInput/TextInputLabel/index.native.js
@@ -1,7 +1,7 @@
 import React, {useState} from 'react';
 import {Animated} from 'react-native';
 import * as styleConst from '@components/TextInput/styleConst';
-import useThemeStyles from '@styles/useThemeStyles';
+import useThemeStyles from '@hooks/useThemeStyles';
 import * as TextInputLabelPropTypes from './TextInputLabelPropTypes';
 
 function TextInputLabel(props) {
diff --git a/src/components/TextInput/index.js b/src/components/TextInput/index.js
index 27ca1d524eda..87db18754ed8 100644
--- a/src/components/TextInput/index.js
+++ b/src/components/TextInput/index.js
@@ -1,9 +1,9 @@
 import React, {useEffect, useRef} from 'react';
 import _ from 'underscore';
+import useThemeStyles from '@hooks/useThemeStyles';
 import * as Browser from '@libs/Browser';
 import DomUtils from '@libs/DomUtils';
 import Visibility from '@libs/Visibility';
-import useThemeStyles from '@styles/useThemeStyles';
 import BaseTextInput from './BaseTextInput';
 import * as baseTextInputPropTypes from './BaseTextInput/baseTextInputPropTypes';
 import * as styleConst from './styleConst';
diff --git a/src/components/TextInput/index.native.js b/src/components/TextInput/index.native.js
index 14591167a425..e5aba76957ad 100644
--- a/src/components/TextInput/index.native.js
+++ b/src/components/TextInput/index.native.js
@@ -1,6 +1,6 @@
 import React, {forwardRef, useEffect} from 'react';
 import {AppState, Keyboard} from 'react-native';
-import useThemeStyles from '@styles/useThemeStyles';
+import useThemeStyles from '@hooks/useThemeStyles';
 import BaseTextInput from './BaseTextInput';
 import * as baseTextInputPropTypes from './BaseTextInput/baseTextInputPropTypes';
 
diff --git a/src/components/TextLink.js b/src/components/TextLink.js
index 46c074eb79e6..1522d562d5ff 100644
--- a/src/components/TextLink.js
+++ b/src/components/TextLink.js
@@ -2,8 +2,8 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import _ from 'underscore';
 import useEnvironment from '@hooks/useEnvironment';
+import useThemeStyles from '@hooks/useThemeStyles';
 import stylePropTypes from '@styles/stylePropTypes';
-import useThemeStyles from '@styles/useThemeStyles';
 import * as Link from '@userActions/Link';
 import CONST from '@src/CONST';
 import refPropTypes from './refPropTypes';
diff --git a/src/components/TextWithEllipsis/index.tsx b/src/components/TextWithEllipsis/index.tsx
index ee2ec72d1248..fda0d5ab576e 100644
--- a/src/components/TextWithEllipsis/index.tsx
+++ b/src/components/TextWithEllipsis/index.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import {StyleProp, TextStyle, View, ViewStyle} from 'react-native';
 import Text from '@components/Text';
-import useThemeStyles from '@styles/useThemeStyles';
+import useThemeStyles from '@hooks/useThemeStyles';
 
 type TextWithEllipsisProps = {
     /** Leading text before the ellipsis */
diff --git a/src/components/ThreeDotsMenu/index.js b/src/components/ThreeDotsMenu/index.js
index dbaf8ab23360..39b8cc658438 100644
--- a/src/components/ThreeDotsMenu/index.js
+++ b/src/components/ThreeDotsMenu/index.js
@@ -8,8 +8,8 @@ import PopoverMenu from '@components/PopoverMenu';
 import PressableWithoutFeedback from '@components/Pressable/PressableWithoutFeedback';
 import Tooltip from '@components/Tooltip/PopoverAnchorTooltip';
 import useLocalize from '@hooks/useLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
 import * as Browser from '@libs/Browser';
-import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 import ThreeDotsMenuItemPropTypes from './ThreeDotsMenuItemPropTypes';
 
diff --git a/src/components/ThumbnailImage.tsx b/src/components/ThumbnailImage.tsx
index 69bf7aec3df1..08b269e45f62 100644
--- a/src/components/ThumbnailImage.tsx
+++ b/src/components/ThumbnailImage.tsx
@@ -2,9 +2,9 @@ import lodashClamp from 'lodash/clamp';
 import React, {useCallback, useState} from 'react';
 import {Dimensions, StyleProp, View, ViewStyle} from 'react-native';
 import useStyleUtils from '@hooks/useStyleUtils';
+import useThemeStyles from '@hooks/useThemeStyles';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import * as DeviceCapabilities from '@libs/DeviceCapabilities';
-import useThemeStyles from '@styles/useThemeStyles';
 import ImageWithSizeCalculation from './ImageWithSizeCalculation';
 
 type ThumbnailImageProps = {
diff --git a/src/components/UnorderedList.tsx b/src/components/UnorderedList.tsx
index a51cefce9ce6..a2b836bd4d80 100644
--- a/src/components/UnorderedList.tsx
+++ b/src/components/UnorderedList.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import {View} from 'react-native';
-import useThemeStyles from '@styles/useThemeStyles';
+import useThemeStyles from '@hooks/useThemeStyles';
 import Text from './Text';
 
 type UnorderedListProps = {
diff --git a/src/components/UnreadActionIndicator.tsx b/src/components/UnreadActionIndicator.tsx
index b34f962e57bd..f422ae24bd4f 100755
--- a/src/components/UnreadActionIndicator.tsx
+++ b/src/components/UnreadActionIndicator.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import {View} from 'react-native';
 import useLocalize from '@hooks/useLocalize';
-import useThemeStyles from '@styles/useThemeStyles';
+import useThemeStyles from '@hooks/useThemeStyles';
 import CONST from '@src/CONST';
 import Text from './Text';
 
diff --git a/src/components/UserDetailsTooltip/BaseUserDetailsTooltip.website.js b/src/components/UserDetailsTooltip/BaseUserDetailsTooltip.website.js
index 508bc6f8426c..50e0406da729 100644
--- a/src/components/UserDetailsTooltip/BaseUserDetailsTooltip.website.js
+++ b/src/components/UserDetailsTooltip/BaseUserDetailsTooltip.website.js
@@ -7,10 +7,10 @@ import Avatar from '@components/Avatar';
 import {usePersonalDetails} from '@components/OnyxProvider';
 import Tooltip from '@components/Tooltip';
 import useLocalize from '@hooks/useLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
 import * as LocalePhoneNumber from '@libs/LocalePhoneNumber';
 import * as ReportUtils from '@libs/ReportUtils';
 import * as UserUtils from '@libs/UserUtils';
-import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 import {defaultProps, propTypes} from './userDetailsTooltipPropTypes';
 
diff --git a/src/components/ValidateCode/ExpiredValidateCodeModal.js b/src/components/ValidateCode/ExpiredValidateCodeModal.js
index 56bfb9d50f2f..7a32c1b82fe7 100644
--- a/src/components/ValidateCode/ExpiredValidateCodeModal.js
+++ b/src/components/ValidateCode/ExpiredValidateCodeModal.js
@@ -5,8 +5,8 @@ import * as Expensicons from '@components/Icon/Expensicons';
 import * as Illustrations from '@components/Icon/Illustrations';
 import Text from '@components/Text';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
 import useTheme from '@styles/theme/useTheme';
-import useThemeStyles from '@styles/useThemeStyles';
 import variables from '@styles/variables';
 
 const propTypes = {
diff --git a/src/components/ValidateCode/JustSignedInModal.js b/src/components/ValidateCode/JustSignedInModal.js
index 2def68a3982b..2c9e15345f3e 100644
--- a/src/components/ValidateCode/JustSignedInModal.js
+++ b/src/components/ValidateCode/JustSignedInModal.js
@@ -6,8 +6,8 @@ import * as Expensicons from '@components/Icon/Expensicons';
 import * as Illustrations from '@components/Icon/Illustrations';
 import Text from '@components/Text';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
 import useTheme from '@styles/theme/useTheme';
-import useThemeStyles from '@styles/useThemeStyles';
 import variables from '@styles/variables';
 
 const propTypes = {
diff --git a/src/components/ValidateCode/ValidateCodeModal.js b/src/components/ValidateCode/ValidateCodeModal.js
index 6296d7414d84..30fe421d1ded 100644
--- a/src/components/ValidateCode/ValidateCodeModal.js
+++ b/src/components/ValidateCode/ValidateCodeModal.js
@@ -10,8 +10,8 @@ import * as Illustrations from '@components/Icon/Illustrations';
 import Text from '@components/Text';
 import TextLink from '@components/TextLink';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
 import useTheme from '@styles/theme/useTheme';
-import useThemeStyles from '@styles/useThemeStyles';
 import variables from '@styles/variables';
 import * as Session from '@userActions/Session';
 import ONYXKEYS from '@src/ONYXKEYS';
diff --git a/src/components/ValuePicker/ValueSelectorModal.js b/src/components/ValuePicker/ValueSelectorModal.js
index b70bcc5cbbb7..edc5a48d0bb3 100644
--- a/src/components/ValuePicker/ValueSelectorModal.js
+++ b/src/components/ValuePicker/ValueSelectorModal.js
@@ -5,7 +5,7 @@ import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import Modal from '@components/Modal';
 import ScreenWrapper from '@components/ScreenWrapper';
 import SelectionList from '@components/SelectionList';
-import useThemeStyles from '@styles/useThemeStyles';
+import useThemeStyles from '@hooks/useThemeStyles';
 import CONST from '@src/CONST';
 
 const propTypes = {
diff --git a/src/components/ValuePicker/index.js b/src/components/ValuePicker/index.js
index f7e49792b88a..b5ddaa7dcb73 100644
--- a/src/components/ValuePicker/index.js
+++ b/src/components/ValuePicker/index.js
@@ -6,7 +6,7 @@ import FormHelpMessage from '@components/FormHelpMessage';
 import MenuItemWithTopDescription from '@components/MenuItemWithTopDescription';
 import refPropTypes from '@components/refPropTypes';
 import useStyleUtils from '@hooks/useStyleUtils';
-import useThemeStyles from '@styles/useThemeStyles';
+import useThemeStyles from '@hooks/useThemeStyles';
 import variables from '@styles/variables';
 import ValueSelectorModal from './ValueSelectorModal';
 
diff --git a/src/components/VideoChatButtonAndMenu/BaseVideoChatButtonAndMenu.js b/src/components/VideoChatButtonAndMenu/BaseVideoChatButtonAndMenu.js
index 037483281502..1f08035dd2d3 100755
--- a/src/components/VideoChatButtonAndMenu/BaseVideoChatButtonAndMenu.js
+++ b/src/components/VideoChatButtonAndMenu/BaseVideoChatButtonAndMenu.js
@@ -12,9 +12,9 @@ import PressableWithoutFeedback from '@components/Pressable/PressableWithoutFeed
 import Tooltip from '@components/Tooltip/PopoverAnchorTooltip';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
 import withWindowDimensions, {windowDimensionsPropTypes} from '@components/withWindowDimensions';
+import useThemeStyles from '@hooks/useThemeStyles';
 import compose from '@libs/compose';
 import useTheme from '@styles/theme/useTheme';
-import useThemeStyles from '@styles/useThemeStyles';
 import * as Link from '@userActions/Link';
 import * as Session from '@userActions/Session';
 import CONST from '@src/CONST';
diff --git a/src/components/WalletSection.js b/src/components/WalletSection.js
index 1b5349098b82..61af77b8717b 100644
--- a/src/components/WalletSection.js
+++ b/src/components/WalletSection.js
@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import useThemeStyles from '@styles/useThemeStyles';
+import useThemeStyles from '@hooks/useThemeStyles';
 import Section from './Section';
 
 const propTypes = {
diff --git a/src/components/WalletStatementModal/index.tsx b/src/components/WalletStatementModal/index.tsx
index 0f1d1804df60..d6120b842ddc 100644
--- a/src/components/WalletStatementModal/index.tsx
+++ b/src/components/WalletStatementModal/index.tsx
@@ -2,8 +2,8 @@ import React, {useState} from 'react';
 import {View} from 'react-native';
 import {withOnyx} from 'react-native-onyx';
 import FullScreenLoadingIndicator from '@components/FullscreenLoadingIndicator';
+import useThemeStyles from '@hooks/useThemeStyles';
 import Navigation from '@libs/Navigation/Navigation';
-import useThemeStyles from '@styles/useThemeStyles';
 import * as Report from '@userActions/Report';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
diff --git a/src/components/withThemeStyles.tsx b/src/components/withThemeStyles.tsx
index d811573d1730..9b129105b84c 100644
--- a/src/components/withThemeStyles.tsx
+++ b/src/components/withThemeStyles.tsx
@@ -1,8 +1,8 @@
 import PropTypes from 'prop-types';
 import React, {ComponentType, ForwardedRef, forwardRef, ReactElement, RefAttributes} from 'react';
+import useThemeStyles from '@hooks/useThemeStyles';
 import getComponentDisplayName from '@libs/getComponentDisplayName';
 import {type ThemeStyles} from '@styles/styles';
-import useThemeStyles from '@styles/useThemeStyles';
 
 const withThemeStylesPropTypes = {
     themeStyles: PropTypes.object.isRequired,
diff --git a/src/components/withToggleVisibilityView.tsx b/src/components/withToggleVisibilityView.tsx
index 0e3e91d09bf2..974ce3b7f855 100644
--- a/src/components/withToggleVisibilityView.tsx
+++ b/src/components/withToggleVisibilityView.tsx
@@ -1,8 +1,8 @@
 import React, {ComponentType, ForwardedRef, ReactElement, RefAttributes} from 'react';
 import {View} from 'react-native';
 import {SetOptional} from 'type-fest';
+import useThemeStyles from '@hooks/useThemeStyles';
 import getComponentDisplayName from '@libs/getComponentDisplayName';
-import useThemeStyles from '@styles/useThemeStyles';
 
 type ToggleVisibilityViewProps = {
     /** Whether the content is visible. */
diff --git a/src/styles/useThemeStyles.ts b/src/hooks/useThemeStyles.ts
similarity index 84%
rename from src/styles/useThemeStyles.ts
rename to src/hooks/useThemeStyles.ts
index ae5a83988b64..0638b54541cc 100644
--- a/src/styles/useThemeStyles.ts
+++ b/src/hooks/useThemeStyles.ts
@@ -1,5 +1,5 @@
 import {useContext} from 'react';
-import ThemeStylesContext from './context/ThemeStylesContext';
+import ThemeStylesContext from '@styles/context/ThemeStylesContext';
 
 function useThemeStyles() {
     const themeStylesContext = useContext(ThemeStylesContext);
diff --git a/src/libs/Navigation/AppNavigator/AuthScreens.tsx b/src/libs/Navigation/AppNavigator/AuthScreens.tsx
index 5e8a9f502dc5..c626de338188 100644
--- a/src/libs/Navigation/AppNavigator/AuthScreens.tsx
+++ b/src/libs/Navigation/AppNavigator/AuthScreens.tsx
@@ -1,6 +1,7 @@
 import React, {memo, useEffect, useRef} from 'react';
 import {View} from 'react-native';
 import Onyx, {OnyxEntry, withOnyx} from 'react-native-onyx';
+import useThemeStyles from '@hooks/useThemeStyles';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import KeyboardShortcut from '@libs/KeyboardShortcut';
 import getCurrentUrl from '@libs/Navigation/currentUrl';
@@ -14,7 +15,6 @@ import DemoSetupPage from '@pages/DemoSetupPage';
 import NotFoundPage from '@pages/ErrorPage/NotFoundPage';
 import DesktopSignInRedirectPage from '@pages/signin/DesktopSignInRedirectPage';
 import SearchInputManager from '@pages/workspace/SearchInputManager';
-import useThemeStyles from '@styles/useThemeStyles';
 import * as App from '@userActions/App';
 import * as Download from '@userActions/Download';
 import * as Modal from '@userActions/Modal';
diff --git a/src/libs/Navigation/AppNavigator/ModalStackNavigators.tsx b/src/libs/Navigation/AppNavigator/ModalStackNavigators.tsx
index 163423036362..1c9769ec6136 100644
--- a/src/libs/Navigation/AppNavigator/ModalStackNavigators.tsx
+++ b/src/libs/Navigation/AppNavigator/ModalStackNavigators.tsx
@@ -1,6 +1,7 @@
 import {ParamListBase} from '@react-navigation/routers';
 import {CardStyleInterpolators, createStackNavigator, StackNavigationOptions} from '@react-navigation/stack';
 import React, {useMemo} from 'react';
+import useThemeStyles from '@hooks/useThemeStyles';
 import type {
     AddPersonalBankAccountNavigatorParamList,
     DetailsNavigatorParamList,
@@ -28,7 +29,6 @@ import type {
     TeachersUniteNavigatorParamList,
     WalletStatementNavigatorParamList,
 } from '@navigation/types';
-import useThemeStyles from '@styles/useThemeStyles';
 import SCREENS from '@src/SCREENS';
 import type {Screen} from '@src/SCREENS';
 
diff --git a/src/libs/Navigation/AppNavigator/Navigators/CentralPaneNavigator/BaseCentralPaneNavigator.tsx b/src/libs/Navigation/AppNavigator/Navigators/CentralPaneNavigator/BaseCentralPaneNavigator.tsx
index 228ea6bd3dce..f2cdd140f7d8 100644
--- a/src/libs/Navigation/AppNavigator/Navigators/CentralPaneNavigator/BaseCentralPaneNavigator.tsx
+++ b/src/libs/Navigation/AppNavigator/Navigators/CentralPaneNavigator/BaseCentralPaneNavigator.tsx
@@ -1,9 +1,9 @@
 import {createStackNavigator} from '@react-navigation/stack';
 import React from 'react';
+import useThemeStyles from '@hooks/useThemeStyles';
 import ReportScreenWrapper from '@libs/Navigation/AppNavigator/ReportScreenWrapper';
 import getCurrentUrl from '@libs/Navigation/currentUrl';
 import type {CentralPaneNavigatorParamList} from '@navigation/types';
-import useThemeStyles from '@styles/useThemeStyles';
 import SCREENS from '@src/SCREENS';
 
 const Stack = createStackNavigator<CentralPaneNavigatorParamList>();
diff --git a/src/libs/Navigation/AppNavigator/Navigators/Overlay.tsx b/src/libs/Navigation/AppNavigator/Navigators/Overlay.tsx
index 31eb818b60dc..fbdda93f69ea 100644
--- a/src/libs/Navigation/AppNavigator/Navigators/Overlay.tsx
+++ b/src/libs/Navigation/AppNavigator/Navigators/Overlay.tsx
@@ -3,7 +3,7 @@ import React from 'react';
 import {Animated, View} from 'react-native';
 import PressableWithoutFeedback from '@components/Pressable/PressableWithoutFeedback';
 import useLocalize from '@hooks/useLocalize';
-import useThemeStyles from '@styles/useThemeStyles';
+import useThemeStyles from '@hooks/useThemeStyles';
 import CONST from '@src/CONST';
 
 type OverlayProps = {
diff --git a/src/libs/Navigation/AppNavigator/Navigators/RightModalNavigator.tsx b/src/libs/Navigation/AppNavigator/Navigators/RightModalNavigator.tsx
index 75358648be59..4c30571c5ba8 100644
--- a/src/libs/Navigation/AppNavigator/Navigators/RightModalNavigator.tsx
+++ b/src/libs/Navigation/AppNavigator/Navigators/RightModalNavigator.tsx
@@ -2,11 +2,11 @@ import {createStackNavigator, StackScreenProps} from '@react-navigation/stack';
 import React, {useMemo} from 'react';
 import {View} from 'react-native';
 import NoDropZone from '@components/DragAndDrop/NoDropZone';
+import useThemeStyles from '@hooks/useThemeStyles';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import * as ModalStackNavigators from '@libs/Navigation/AppNavigator/ModalStackNavigators';
 import RHPScreenOptions from '@libs/Navigation/AppNavigator/RHPScreenOptions';
 import type {AuthScreensParamList, RightModalNavigatorParamList} from '@navigation/types';
-import useThemeStyles from '@styles/useThemeStyles';
 import NAVIGATORS from '@src/NAVIGATORS';
 import Overlay from './Overlay';
 
diff --git a/src/pages/AddPersonalBankAccountPage.js b/src/pages/AddPersonalBankAccountPage.js
index a4d75a7c73a0..09b73ea158f9 100644
--- a/src/pages/AddPersonalBankAccountPage.js
+++ b/src/pages/AddPersonalBankAccountPage.js
@@ -9,9 +9,9 @@ import FormProvider from '@components/Form/FormProvider';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import ScreenWrapper from '@components/ScreenWrapper';
 import useLocalize from '@hooks/useLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
 import getPlaidOAuthReceivedRedirectURI from '@libs/getPlaidOAuthReceivedRedirectURI';
 import Navigation from '@libs/Navigation/Navigation';
-import useThemeStyles from '@styles/useThemeStyles';
 import * as BankAccounts from '@userActions/BankAccounts';
 import * as PaymentMethods from '@userActions/PaymentMethods';
 import ONYXKEYS from '@src/ONYXKEYS';
diff --git a/src/pages/DetailsPage.js b/src/pages/DetailsPage.js
index 6d3f0198bbfe..18073b10af9e 100755
--- a/src/pages/DetailsPage.js
+++ b/src/pages/DetailsPage.js
@@ -20,10 +20,10 @@ import ScreenWrapper from '@components/ScreenWrapper';
 import Text from '@components/Text';
 import UserDetailsTooltip from '@components/UserDetailsTooltip';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
 import compose from '@libs/compose';
 import * as ReportUtils from '@libs/ReportUtils';
 import * as UserUtils from '@libs/UserUtils';
-import useThemeStyles from '@styles/useThemeStyles';
 import * as Report from '@userActions/Report';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
diff --git a/src/pages/EditRequestCategoryPage.js b/src/pages/EditRequestCategoryPage.js
index 290c05f0c494..205b4bf66dfa 100644
--- a/src/pages/EditRequestCategoryPage.js
+++ b/src/pages/EditRequestCategoryPage.js
@@ -5,8 +5,8 @@ import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import ScreenWrapper from '@components/ScreenWrapper';
 import Text from '@components/Text';
 import useLocalize from '@hooks/useLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
 import Navigation from '@libs/Navigation/Navigation';
-import useThemeStyles from '@styles/useThemeStyles';
 
 const propTypes = {
     /** Transaction default category value */
diff --git a/src/pages/EditRequestCreatedPage.js b/src/pages/EditRequestCreatedPage.js
index c2b05d9e6dfa..fbe1b3c782a7 100644
--- a/src/pages/EditRequestCreatedPage.js
+++ b/src/pages/EditRequestCreatedPage.js
@@ -5,7 +5,7 @@ import FormProvider from '@components/Form/FormProvider';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import ScreenWrapper from '@components/ScreenWrapper';
 import useLocalize from '@hooks/useLocalize';
-import useThemeStyles from '@styles/useThemeStyles';
+import useThemeStyles from '@hooks/useThemeStyles';
 import ONYXKEYS from '@src/ONYXKEYS';
 
 const propTypes = {
diff --git a/src/pages/EditRequestDescriptionPage.js b/src/pages/EditRequestDescriptionPage.js
index caf7571c8719..159518146be1 100644
--- a/src/pages/EditRequestDescriptionPage.js
+++ b/src/pages/EditRequestDescriptionPage.js
@@ -8,9 +8,9 @@ import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import ScreenWrapper from '@components/ScreenWrapper';
 import TextInput from '@components/TextInput';
 import useLocalize from '@hooks/useLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
 import * as Browser from '@libs/Browser';
 import updateMultilineInputRange from '@libs/UpdateMultilineInputRange';
-import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 
diff --git a/src/pages/EditRequestMerchantPage.js b/src/pages/EditRequestMerchantPage.js
index 53cb4946d640..de399e8febe0 100644
--- a/src/pages/EditRequestMerchantPage.js
+++ b/src/pages/EditRequestMerchantPage.js
@@ -8,7 +8,7 @@ import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import ScreenWrapper from '@components/ScreenWrapper';
 import TextInput from '@components/TextInput';
 import useLocalize from '@hooks/useLocalize';
-import useThemeStyles from '@styles/useThemeStyles';
+import useThemeStyles from '@hooks/useThemeStyles';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 
diff --git a/src/pages/EditRequestReceiptPage.js b/src/pages/EditRequestReceiptPage.js
index 03c0aa777d5e..1525ec162963 100644
--- a/src/pages/EditRequestReceiptPage.js
+++ b/src/pages/EditRequestReceiptPage.js
@@ -5,8 +5,8 @@ import DragAndDropProvider from '@components/DragAndDrop/Provider';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import ScreenWrapper from '@components/ScreenWrapper';
 import useLocalize from '@hooks/useLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
 import Navigation from '@libs/Navigation/Navigation';
-import useThemeStyles from '@styles/useThemeStyles';
 import ReceiptSelector from './iou/ReceiptSelector';
 
 const propTypes = {
diff --git a/src/pages/EditRequestTagPage.js b/src/pages/EditRequestTagPage.js
index 74cf69944f2c..8ecc4a953065 100644
--- a/src/pages/EditRequestTagPage.js
+++ b/src/pages/EditRequestTagPage.js
@@ -5,8 +5,8 @@ import ScreenWrapper from '@components/ScreenWrapper';
 import TagPicker from '@components/TagPicker';
 import Text from '@components/Text';
 import useLocalize from '@hooks/useLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
 import Navigation from '@libs/Navigation/Navigation';
-import useThemeStyles from '@styles/useThemeStyles';
 
 const propTypes = {
     /** Transaction default tag value */
diff --git a/src/pages/EnablePayments/AdditionalDetailsStep.js b/src/pages/EnablePayments/AdditionalDetailsStep.js
index 6d01e601b901..7d6e7c39edca 100644
--- a/src/pages/EnablePayments/AdditionalDetailsStep.js
+++ b/src/pages/EnablePayments/AdditionalDetailsStep.js
@@ -15,10 +15,10 @@ import TextInput from '@components/TextInput';
 import TextLink from '@components/TextLink';
 import withCurrentUserPersonalDetails, {withCurrentUserPersonalDetailsDefaultProps, withCurrentUserPersonalDetailsPropTypes} from '@components/withCurrentUserPersonalDetails';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
 import compose from '@libs/compose';
 import * as ValidationUtils from '@libs/ValidationUtils';
 import AddressForm from '@pages/ReimbursementAccount/AddressForm';
-import useThemeStyles from '@styles/useThemeStyles';
 import * as PersonalDetails from '@userActions/PersonalDetails';
 import * as Wallet from '@userActions/Wallet';
 import CONST from '@src/CONST';
diff --git a/src/pages/EnablePayments/FailedKYC.js b/src/pages/EnablePayments/FailedKYC.js
index de170bec4070..fc54ea9c1074 100644
--- a/src/pages/EnablePayments/FailedKYC.js
+++ b/src/pages/EnablePayments/FailedKYC.js
@@ -3,7 +3,7 @@ import {View} from 'react-native';
 import Text from '@components/Text';
 import TextLink from '@components/TextLink';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
-import useThemeStyles from '@styles/useThemeStyles';
+import useThemeStyles from '@hooks/useThemeStyles';
 import CONST from '@src/CONST';
 
 const propTypes = {
diff --git a/src/pages/EnablePayments/IdologyQuestions.js b/src/pages/EnablePayments/IdologyQuestions.js
index 9e4f9d697fca..8f21d68abe4f 100644
--- a/src/pages/EnablePayments/IdologyQuestions.js
+++ b/src/pages/EnablePayments/IdologyQuestions.js
@@ -9,7 +9,7 @@ import SingleChoiceQuestion from '@components/SingleChoiceQuestion';
 import Text from '@components/Text';
 import TextLink from '@components/TextLink';
 import useLocalize from '@hooks/useLocalize';
-import useThemeStyles from '@styles/useThemeStyles';
+import useThemeStyles from '@hooks/useThemeStyles';
 import * as BankAccounts from '@userActions/BankAccounts';
 import ONYXKEYS from '@src/ONYXKEYS';
 
diff --git a/src/pages/EnablePayments/OnfidoPrivacy.js b/src/pages/EnablePayments/OnfidoPrivacy.js
index c542df0196cf..77b884fb2934 100644
--- a/src/pages/EnablePayments/OnfidoPrivacy.js
+++ b/src/pages/EnablePayments/OnfidoPrivacy.js
@@ -10,9 +10,9 @@ import FullscreenLoadingIndicator from '@components/FullscreenLoadingIndicator';
 import Text from '@components/Text';
 import TextLink from '@components/TextLink';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
 import compose from '@libs/compose';
 import * as ErrorUtils from '@libs/ErrorUtils';
-import useThemeStyles from '@styles/useThemeStyles';
 import * as BankAccounts from '@userActions/BankAccounts';
 import ONYXKEYS from '@src/ONYXKEYS';
 import walletOnfidoDataPropTypes from './walletOnfidoDataPropTypes';
diff --git a/src/pages/EnablePayments/TermsPage/LongTermsForm.js b/src/pages/EnablePayments/TermsPage/LongTermsForm.js
index 2ed7854ee6ba..d95f80e99673 100644
--- a/src/pages/EnablePayments/TermsPage/LongTermsForm.js
+++ b/src/pages/EnablePayments/TermsPage/LongTermsForm.js
@@ -6,8 +6,8 @@ import Icon from '@components/Icon';
 import * as Expensicons from '@components/Icon/Expensicons';
 import Text from '@components/Text';
 import TextLink from '@components/TextLink';
+import useThemeStyles from '@hooks/useThemeStyles';
 import * as Localize from '@libs/Localize';
-import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 
 const termsData = [
diff --git a/src/pages/EnablePayments/TermsPage/ShortTermsForm.js b/src/pages/EnablePayments/TermsPage/ShortTermsForm.js
index 898aec9b2c16..77f77f3cb34b 100644
--- a/src/pages/EnablePayments/TermsPage/ShortTermsForm.js
+++ b/src/pages/EnablePayments/TermsPage/ShortTermsForm.js
@@ -2,9 +2,9 @@ import React from 'react';
 import {View} from 'react-native';
 import Text from '@components/Text';
 import TextLink from '@components/TextLink';
+import useThemeStyles from '@hooks/useThemeStyles';
 import * as Localize from '@libs/Localize';
 import userWalletPropTypes from '@pages/EnablePayments/userWalletPropTypes';
-import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 
 const propTypes = {
diff --git a/src/pages/EnablePayments/TermsStep.js b/src/pages/EnablePayments/TermsStep.js
index 368f92f0db27..8297ca54c2b4 100644
--- a/src/pages/EnablePayments/TermsStep.js
+++ b/src/pages/EnablePayments/TermsStep.js
@@ -7,9 +7,9 @@ import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import Text from '@components/Text';
 import TextLink from '@components/TextLink';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
 import compose from '@libs/compose';
 import * as ErrorUtils from '@libs/ErrorUtils';
-import useThemeStyles from '@styles/useThemeStyles';
 import * as BankAccounts from '@userActions/BankAccounts';
 import ONYXKEYS from '@src/ONYXKEYS';
 import LongTermsForm from './TermsPage/LongTermsForm';
diff --git a/src/pages/ErrorPage/ErrorBodyText/index.js b/src/pages/ErrorPage/ErrorBodyText/index.js
index d3436a2fc0a8..47b765f8f5e8 100644
--- a/src/pages/ErrorPage/ErrorBodyText/index.js
+++ b/src/pages/ErrorPage/ErrorBodyText/index.js
@@ -2,7 +2,7 @@ import React from 'react';
 import Text from '@components/Text';
 import TextLink from '@components/TextLink';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
-import useThemeStyles from '@styles/useThemeStyles';
+import useThemeStyles from '@hooks/useThemeStyles';
 import CONST from '@src/CONST';
 
 const propTypes = {
diff --git a/src/pages/ErrorPage/GenericErrorPage.js b/src/pages/ErrorPage/GenericErrorPage.js
index 7768f0ff8962..1e3bed0c7d29 100644
--- a/src/pages/ErrorPage/GenericErrorPage.js
+++ b/src/pages/ErrorPage/GenericErrorPage.js
@@ -10,8 +10,8 @@ import Text from '@components/Text';
 import TextLink from '@components/TextLink';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
 import useStyleUtils from '@hooks/useStyleUtils';
+import useThemeStyles from '@hooks/useThemeStyles';
 import useTheme from '@styles/theme/useTheme';
-import useThemeStyles from '@styles/useThemeStyles';
 import variables from '@styles/variables';
 import * as Session from '@userActions/Session';
 import CONST from '@src/CONST';
diff --git a/src/pages/FlagCommentPage.js b/src/pages/FlagCommentPage.js
index 3695896ea473..6c6421593837 100644
--- a/src/pages/FlagCommentPage.js
+++ b/src/pages/FlagCommentPage.js
@@ -10,11 +10,11 @@ import MenuItem from '@components/MenuItem';
 import ScreenWrapper from '@components/ScreenWrapper';
 import Text from '@components/Text';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
 import compose from '@libs/compose';
 import Navigation from '@libs/Navigation/Navigation';
 import * as ReportActionsUtils from '@libs/ReportActionsUtils';
 import * as ReportUtils from '@libs/ReportUtils';
-import useThemeStyles from '@styles/useThemeStyles';
 import * as Report from '@userActions/Report';
 import * as Session from '@userActions/Session';
 import CONST from '@src/CONST';
diff --git a/src/pages/GetAssistancePage.js b/src/pages/GetAssistancePage.js
index b801a91af728..054e0150ea39 100644
--- a/src/pages/GetAssistancePage.js
+++ b/src/pages/GetAssistancePage.js
@@ -10,9 +10,9 @@ import ScreenWrapper from '@components/ScreenWrapper';
 import Section from '@components/Section';
 import Text from '@components/Text';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
 import compose from '@libs/compose';
 import Navigation from '@libs/Navigation/Navigation';
-import useThemeStyles from '@styles/useThemeStyles';
 import * as Link from '@userActions/Link';
 import * as Report from '@userActions/Report';
 import CONST from '@src/CONST';
diff --git a/src/pages/KeyboardShortcutsPage.js b/src/pages/KeyboardShortcutsPage.js
index c44c6213d3a5..809d2ce6dc07 100644
--- a/src/pages/KeyboardShortcutsPage.js
+++ b/src/pages/KeyboardShortcutsPage.js
@@ -6,8 +6,8 @@ import MenuItem from '@components/MenuItem';
 import ScreenWrapper from '@components/ScreenWrapper';
 import Text from '@components/Text';
 import useLocalize from '@hooks/useLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
 import KeyboardShortcut from '@libs/KeyboardShortcut';
-import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 
 function KeyboardShortcutsPage() {
diff --git a/src/pages/LogInWithShortLivedAuthTokenPage.js b/src/pages/LogInWithShortLivedAuthTokenPage.js
index 25cc9805977d..d9a191261c12 100644
--- a/src/pages/LogInWithShortLivedAuthTokenPage.js
+++ b/src/pages/LogInWithShortLivedAuthTokenPage.js
@@ -10,9 +10,9 @@ import * as Illustrations from '@components/Icon/Illustrations';
 import Text from '@components/Text';
 import TextLink from '@components/TextLink';
 import useLocalize from '@hooks/useLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
 import Navigation from '@libs/Navigation/Navigation';
 import useTheme from '@styles/theme/useTheme';
-import useThemeStyles from '@styles/useThemeStyles';
 import * as Session from '@userActions/Session';
 import ONYXKEYS from '@src/ONYXKEYS';
 
diff --git a/src/pages/NewChatPage.js b/src/pages/NewChatPage.js
index 2bbd0556aad8..6f45c0b33f5a 100755
--- a/src/pages/NewChatPage.js
+++ b/src/pages/NewChatPage.js
@@ -11,13 +11,13 @@ import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
 import withWindowDimensions, {windowDimensionsPropTypes} from '@components/withWindowDimensions';
 import useAutoFocusInput from '@hooks/useAutoFocusInput';
 import useNetwork from '@hooks/useNetwork';
+import useThemeStyles from '@hooks/useThemeStyles';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import * as Browser from '@libs/Browser';
 import compose from '@libs/compose';
 import * as OptionsListUtils from '@libs/OptionsListUtils';
 import Permissions from '@libs/Permissions';
 import * as ReportUtils from '@libs/ReportUtils';
-import useThemeStyles from '@styles/useThemeStyles';
 import variables from '@styles/variables';
 import * as Report from '@userActions/Report';
 import CONST from '@src/CONST';
diff --git a/src/pages/PrivateNotes/PrivateNotesEditPage.js b/src/pages/PrivateNotes/PrivateNotesEditPage.js
index 2c3064d199ef..a13c179ea1f4 100644
--- a/src/pages/PrivateNotes/PrivateNotesEditPage.js
+++ b/src/pages/PrivateNotes/PrivateNotesEditPage.js
@@ -16,6 +16,7 @@ import Text from '@components/Text';
 import TextInput from '@components/TextInput';
 import withLocalize from '@components/withLocalize';
 import useLocalize from '@hooks/useLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
 import compose from '@libs/compose';
 import Navigation from '@libs/Navigation/Navigation';
 import * as ReportUtils from '@libs/ReportUtils';
@@ -23,7 +24,6 @@ import updateMultilineInputRange from '@libs/UpdateMultilineInputRange';
 import withReportAndPrivateNotesOrNotFound from '@pages/home/report/withReportAndPrivateNotesOrNotFound';
 import personalDetailsPropType from '@pages/personalDetailsPropType';
 import reportPropTypes from '@pages/reportPropTypes';
-import useThemeStyles from '@styles/useThemeStyles';
 import * as Report from '@userActions/Report';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
diff --git a/src/pages/PrivateNotes/PrivateNotesListPage.js b/src/pages/PrivateNotes/PrivateNotesListPage.js
index e9a4f11a7202..a34eb0ce596d 100644
--- a/src/pages/PrivateNotes/PrivateNotesListPage.js
+++ b/src/pages/PrivateNotes/PrivateNotesListPage.js
@@ -13,12 +13,12 @@ import ScreenWrapper from '@components/ScreenWrapper';
 import Text from '@components/Text';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
 import useLocalize from '@hooks/useLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
 import compose from '@libs/compose';
 import Navigation from '@libs/Navigation/Navigation';
 import withReportAndPrivateNotesOrNotFound from '@pages/home/report/withReportAndPrivateNotesOrNotFound';
 import personalDetailsPropType from '@pages/personalDetailsPropType';
 import reportPropTypes from '@pages/reportPropTypes';
-import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
diff --git a/src/pages/PrivateNotes/PrivateNotesViewPage.js b/src/pages/PrivateNotes/PrivateNotesViewPage.js
index 76057d3d74bc..1406dfd76748 100644
--- a/src/pages/PrivateNotes/PrivateNotesViewPage.js
+++ b/src/pages/PrivateNotes/PrivateNotesViewPage.js
@@ -10,12 +10,12 @@ import OfflineWithFeedback from '@components/OfflineWithFeedback';
 import ScreenWrapper from '@components/ScreenWrapper';
 import withLocalize from '@components/withLocalize';
 import useLocalize from '@hooks/useLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
 import compose from '@libs/compose';
 import Navigation from '@libs/Navigation/Navigation';
 import withReportAndPrivateNotesOrNotFound from '@pages/home/report/withReportAndPrivateNotesOrNotFound';
 import personalDetailsPropType from '@pages/personalDetailsPropType';
 import reportPropTypes from '@pages/reportPropTypes';
-import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
diff --git a/src/pages/ProfilePage.js b/src/pages/ProfilePage.js
index ece75b7f6918..4e0cd7215ad9 100755
--- a/src/pages/ProfilePage.js
+++ b/src/pages/ProfilePage.js
@@ -23,12 +23,12 @@ import ScreenWrapper from '@components/ScreenWrapper';
 import Text from '@components/Text';
 import UserDetailsTooltip from '@components/UserDetailsTooltip';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
 import compose from '@libs/compose';
 import Navigation from '@libs/Navigation/Navigation';
 import * as ReportUtils from '@libs/ReportUtils';
 import * as UserUtils from '@libs/UserUtils';
 import * as ValidationUtils from '@libs/ValidationUtils';
-import useThemeStyles from '@styles/useThemeStyles';
 import variables from '@styles/variables';
 import * as PersonalDetails from '@userActions/PersonalDetails';
 import * as Report from '@userActions/Report';
diff --git a/src/pages/ReferralDetailsPage.js b/src/pages/ReferralDetailsPage.js
index 60b5d23b39da..d013d7ce677f 100644
--- a/src/pages/ReferralDetailsPage.js
+++ b/src/pages/ReferralDetailsPage.js
@@ -13,8 +13,8 @@ import ScreenWrapper from '@components/ScreenWrapper';
 import Text from '@components/Text';
 import TextLink from '@components/TextLink';
 import useLocalize from '@hooks/useLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
 import Navigation from '@libs/Navigation/Navigation';
-import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
diff --git a/src/pages/ReimbursementAccount/ACHContractStep.js b/src/pages/ReimbursementAccount/ACHContractStep.js
index 4161932b35b6..d10d440a0af5 100644
--- a/src/pages/ReimbursementAccount/ACHContractStep.js
+++ b/src/pages/ReimbursementAccount/ACHContractStep.js
@@ -12,8 +12,8 @@ import ScreenWrapper from '@components/ScreenWrapper';
 import Text from '@components/Text';
 import TextLink from '@components/TextLink';
 import withLocalize from '@components/withLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
 import * as ValidationUtils from '@libs/ValidationUtils';
-import useThemeStyles from '@styles/useThemeStyles';
 import * as BankAccounts from '@userActions/BankAccounts';
 import * as FormActions from '@userActions/FormActions';
 import CONST from '@src/CONST';
diff --git a/src/pages/ReimbursementAccount/AddressForm.js b/src/pages/ReimbursementAccount/AddressForm.js
index ce4df7ae665f..020de145f6c4 100644
--- a/src/pages/ReimbursementAccount/AddressForm.js
+++ b/src/pages/ReimbursementAccount/AddressForm.js
@@ -5,7 +5,7 @@ import AddressSearch from '@components/AddressSearch';
 import InputWrapper from '@components/Form/InputWrapper';
 import StatePicker from '@components/StatePicker';
 import TextInput from '@components/TextInput';
-import useThemeStyles from '@styles/useThemeStyles';
+import useThemeStyles from '@hooks/useThemeStyles';
 import CONST from '@src/CONST';
 
 const propTypes = {
diff --git a/src/pages/ReimbursementAccount/BankAccountManualStep.js b/src/pages/ReimbursementAccount/BankAccountManualStep.js
index 13d6fe8568fa..01ff09fedc51 100644
--- a/src/pages/ReimbursementAccount/BankAccountManualStep.js
+++ b/src/pages/ReimbursementAccount/BankAccountManualStep.js
@@ -12,9 +12,9 @@ import TextInput from '@components/TextInput';
 import TextLink from '@components/TextLink';
 import {withLocalizePropTypes} from '@components/withLocalize';
 import useLocalize from '@hooks/useLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
 import shouldDelayFocus from '@libs/shouldDelayFocus';
 import * as ValidationUtils from '@libs/ValidationUtils';
-import useThemeStyles from '@styles/useThemeStyles';
 import * as BankAccounts from '@userActions/BankAccounts';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
diff --git a/src/pages/ReimbursementAccount/BankAccountPlaidStep.js b/src/pages/ReimbursementAccount/BankAccountPlaidStep.js
index 298862570271..c235a31f626f 100644
--- a/src/pages/ReimbursementAccount/BankAccountPlaidStep.js
+++ b/src/pages/ReimbursementAccount/BankAccountPlaidStep.js
@@ -13,8 +13,8 @@ import ScreenWrapper from '@components/ScreenWrapper';
 import Text from '@components/Text';
 import TextLink from '@components/TextLink';
 import withLocalize from '@components/withLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
 import compose from '@libs/compose';
-import useThemeStyles from '@styles/useThemeStyles';
 import * as BankAccounts from '@userActions/BankAccounts';
 import * as ReimbursementAccount from '@userActions/ReimbursementAccount';
 import CONST from '@src/CONST';
diff --git a/src/pages/ReimbursementAccount/BankAccountStep.js b/src/pages/ReimbursementAccount/BankAccountStep.js
index dfb9acd7a362..84545ff39baf 100644
--- a/src/pages/ReimbursementAccount/BankAccountStep.js
+++ b/src/pages/ReimbursementAccount/BankAccountStep.js
@@ -15,10 +15,10 @@ import Section from '@components/Section';
 import Text from '@components/Text';
 import TextLink from '@components/TextLink';
 import withLocalize from '@components/withLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
 import compose from '@libs/compose';
 import getPlaidDesktopMessage from '@libs/getPlaidDesktopMessage';
 import useTheme from '@styles/theme/useTheme';
-import useThemeStyles from '@styles/useThemeStyles';
 import * as BankAccounts from '@userActions/BankAccounts';
 import * as Link from '@userActions/Link';
 import CONFIG from '@src/CONFIG';
diff --git a/src/pages/ReimbursementAccount/CompanyStep.js b/src/pages/ReimbursementAccount/CompanyStep.js
index f1d62eef89ae..20e690cf0069 100644
--- a/src/pages/ReimbursementAccount/CompanyStep.js
+++ b/src/pages/ReimbursementAccount/CompanyStep.js
@@ -18,9 +18,9 @@ import Text from '@components/Text';
 import TextInput from '@components/TextInput';
 import TextLink from '@components/TextLink';
 import withLocalize from '@components/withLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
 import compose from '@libs/compose';
 import * as ValidationUtils from '@libs/ValidationUtils';
-import useThemeStyles from '@styles/useThemeStyles';
 import * as BankAccounts from '@userActions/BankAccounts';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
diff --git a/src/pages/ReimbursementAccount/ContinueBankAccountSetup.js b/src/pages/ReimbursementAccount/ContinueBankAccountSetup.js
index 45c503494c3d..d1ac0989ae38 100644
--- a/src/pages/ReimbursementAccount/ContinueBankAccountSetup.js
+++ b/src/pages/ReimbursementAccount/ContinueBankAccountSetup.js
@@ -13,8 +13,8 @@ import ScreenWrapper from '@components/ScreenWrapper';
 import Section from '@components/Section';
 import Text from '@components/Text';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
 import WorkspaceResetBankAccountModal from '@pages/workspace/WorkspaceResetBankAccountModal';
-import useThemeStyles from '@styles/useThemeStyles';
 import * as BankAccounts from '@userActions/BankAccounts';
 import CONST from '@src/CONST';
 import * as ReimbursementAccountProps from './reimbursementAccountPropTypes';
diff --git a/src/pages/ReimbursementAccount/Enable2FAPrompt.js b/src/pages/ReimbursementAccount/Enable2FAPrompt.js
index d91c8df7bed0..90752a57c50b 100644
--- a/src/pages/ReimbursementAccount/Enable2FAPrompt.js
+++ b/src/pages/ReimbursementAccount/Enable2FAPrompt.js
@@ -6,8 +6,8 @@ import * as Illustrations from '@components/Icon/Illustrations';
 import Section from '@components/Section';
 import Text from '@components/Text';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
 import Navigation from '@navigation/Navigation';
-import useThemeStyles from '@styles/useThemeStyles';
 import ROUTES from '@src/ROUTES';
 
 const propTypes = {
diff --git a/src/pages/ReimbursementAccount/EnableStep.js b/src/pages/ReimbursementAccount/EnableStep.js
index e7bdcf4082d2..d8d76d6cfb2f 100644
--- a/src/pages/ReimbursementAccount/EnableStep.js
+++ b/src/pages/ReimbursementAccount/EnableStep.js
@@ -15,10 +15,10 @@ import ScreenWrapper from '@components/ScreenWrapper';
 import Section from '@components/Section';
 import Text from '@components/Text';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
 import compose from '@libs/compose';
 import userPropTypes from '@pages/settings/userPropTypes';
 import WorkspaceResetBankAccountModal from '@pages/workspace/WorkspaceResetBankAccountModal';
-import useThemeStyles from '@styles/useThemeStyles';
 import * as Link from '@userActions/Link';
 import * as BankAccounts from '@userActions/ReimbursementAccount';
 import CONST from '@src/CONST';
diff --git a/src/pages/ReimbursementAccount/IdentityForm.js b/src/pages/ReimbursementAccount/IdentityForm.js
index 5f31f94a0e28..a3c49400f5c9 100644
--- a/src/pages/ReimbursementAccount/IdentityForm.js
+++ b/src/pages/ReimbursementAccount/IdentityForm.js
@@ -6,7 +6,7 @@ import _ from 'underscore';
 import DatePicker from '@components/DatePicker';
 import InputWrapper from '@components/Form/InputWrapper';
 import TextInput from '@components/TextInput';
-import useThemeStyles from '@styles/useThemeStyles';
+import useThemeStyles from '@hooks/useThemeStyles';
 import CONST from '@src/CONST';
 import AddressForm from './AddressForm';
 
diff --git a/src/pages/ReimbursementAccount/ReimbursementAccountPage.js b/src/pages/ReimbursementAccount/ReimbursementAccountPage.js
index 1b6a188c521b..fa239ae65ddb 100644
--- a/src/pages/ReimbursementAccount/ReimbursementAccountPage.js
+++ b/src/pages/ReimbursementAccount/ReimbursementAccountPage.js
@@ -13,6 +13,7 @@ import Text from '@components/Text';
 import useLocalize from '@hooks/useLocalize';
 import useNetwork from '@hooks/useNetwork';
 import usePrevious from '@hooks/usePrevious';
+import useThemeStyles from '@hooks/useThemeStyles';
 import compose from '@libs/compose';
 import getPlaidOAuthReceivedRedirectURI from '@libs/getPlaidOAuthReceivedRedirectURI';
 import BankAccount from '@libs/models/BankAccount';
@@ -20,7 +21,6 @@ import Navigation from '@libs/Navigation/Navigation';
 import * as PolicyUtils from '@libs/PolicyUtils';
 import shouldReopenOnfido from '@libs/shouldReopenOnfido';
 import withPolicy from '@pages/workspace/withPolicy';
-import useThemeStyles from '@styles/useThemeStyles';
 import * as BankAccounts from '@userActions/BankAccounts';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
@@ -159,7 +159,7 @@ function getRouteForCurrentStep(currentStep) {
 }
 
 function ReimbursementAccountPage({reimbursementAccount, route, onfidoToken, policy, account, isLoadingReportData, session, plaidLinkToken, plaidCurrentEvent, reimbursementAccountDraft}) {
-    /**  
+    /**
         The SetupWithdrawalAccount flow allows us to continue the flow from various points depending on where the
         user left off. This view will refer to the achData as the single source of truth to determine which route to
         display. We can also specify a specific route to navigate to via route params when the component first
@@ -235,7 +235,7 @@ function ReimbursementAccountPage({reimbursementAccount, route, onfidoToken, pol
         return achData.state === BankAccount.STATE.PENDING || _.contains([CONST.BANK_ACCOUNT.STEP.BANK_ACCOUNT, ''], getStepToOpenFromRouteParams(route));
     }
 
-    /** 
+    /**
         When this page is first opened, `reimbursementAccount` prop might not yet be fully loaded from Onyx
         or could be partially loaded such that `reimbursementAccount.achData.currentStep` is unavailable.
         Calculating `shouldShowContinueSetupButton` immediately on initial render doesn't make sense as
diff --git a/src/pages/ReimbursementAccount/RequestorOnfidoStep.js b/src/pages/ReimbursementAccount/RequestorOnfidoStep.js
index dc6cff300b09..b149e28d7f11 100644
--- a/src/pages/ReimbursementAccount/RequestorOnfidoStep.js
+++ b/src/pages/ReimbursementAccount/RequestorOnfidoStep.js
@@ -8,8 +8,8 @@ import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import Onfido from '@components/Onfido';
 import ScreenWrapper from '@components/ScreenWrapper';
 import useLocalize from '@hooks/useLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
 import Growl from '@libs/Growl';
-import useThemeStyles from '@styles/useThemeStyles';
 import * as BankAccounts from '@userActions/BankAccounts';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
diff --git a/src/pages/ReimbursementAccount/RequestorStep.js b/src/pages/ReimbursementAccount/RequestorStep.js
index 31f5f0f4d315..e5e0c36aeaa2 100644
--- a/src/pages/ReimbursementAccount/RequestorStep.js
+++ b/src/pages/ReimbursementAccount/RequestorStep.js
@@ -10,8 +10,8 @@ import ScreenWrapper from '@components/ScreenWrapper';
 import Text from '@components/Text';
 import TextLink from '@components/TextLink';
 import useLocalize from '@hooks/useLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
 import * as ValidationUtils from '@libs/ValidationUtils';
-import useThemeStyles from '@styles/useThemeStyles';
 import * as BankAccounts from '@userActions/BankAccounts';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
diff --git a/src/pages/ReimbursementAccount/ValidationStep.js b/src/pages/ReimbursementAccount/ValidationStep.js
index b64f8e098a8a..d08251d23308 100644
--- a/src/pages/ReimbursementAccount/ValidationStep.js
+++ b/src/pages/ReimbursementAccount/ValidationStep.js
@@ -17,11 +17,11 @@ import Text from '@components/Text';
 import TextInput from '@components/TextInput';
 import TextLink from '@components/TextLink';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
 import compose from '@libs/compose';
 import BankAccount from '@libs/models/BankAccount';
 import * as ValidationUtils from '@libs/ValidationUtils';
 import WorkspaceResetBankAccountModal from '@pages/workspace/WorkspaceResetBankAccountModal';
-import useThemeStyles from '@styles/useThemeStyles';
 import * as BankAccounts from '@userActions/BankAccounts';
 import * as Report from '@userActions/Report';
 import CONST from '@src/CONST';
diff --git a/src/pages/ReportDetailsPage.js b/src/pages/ReportDetailsPage.js
index c5e6bf43fa1d..49832f8b41f4 100644
--- a/src/pages/ReportDetailsPage.js
+++ b/src/pages/ReportDetailsPage.js
@@ -16,12 +16,12 @@ import PressableWithoutFeedback from '@components/Pressable/PressableWithoutFeed
 import RoomHeaderAvatars from '@components/RoomHeaderAvatars';
 import ScreenWrapper from '@components/ScreenWrapper';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
 import compose from '@libs/compose';
 import Navigation from '@libs/Navigation/Navigation';
 import * as OptionsListUtils from '@libs/OptionsListUtils';
 import * as PolicyUtils from '@libs/PolicyUtils';
 import * as ReportUtils from '@libs/ReportUtils';
-import useThemeStyles from '@styles/useThemeStyles';
 import * as Report from '@userActions/Report';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
diff --git a/src/pages/ReportParticipantsPage.js b/src/pages/ReportParticipantsPage.js
index ceaa53a41a6b..4ec31b29f914 100755
--- a/src/pages/ReportParticipantsPage.js
+++ b/src/pages/ReportParticipantsPage.js
@@ -9,13 +9,13 @@ import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import OptionsList from '@components/OptionsList';
 import ScreenWrapper from '@components/ScreenWrapper';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
 import compose from '@libs/compose';
 import * as LocalePhoneNumber from '@libs/LocalePhoneNumber';
 import Navigation from '@libs/Navigation/Navigation';
 import * as PersonalDetailsUtils from '@libs/PersonalDetailsUtils';
 import * as ReportUtils from '@libs/ReportUtils';
 import * as UserUtils from '@libs/UserUtils';
-import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
diff --git a/src/pages/ReportWelcomeMessagePage.js b/src/pages/ReportWelcomeMessagePage.js
index fcf9da89ad69..1e00c2774288 100644
--- a/src/pages/ReportWelcomeMessagePage.js
+++ b/src/pages/ReportWelcomeMessagePage.js
@@ -12,11 +12,11 @@ import ScreenWrapper from '@components/ScreenWrapper';
 import Text from '@components/Text';
 import TextInput from '@components/TextInput';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
 import compose from '@libs/compose';
 import Navigation from '@libs/Navigation/Navigation';
 import * as ReportUtils from '@libs/ReportUtils';
 import updateMultilineInputRange from '@libs/UpdateMultilineInputRange';
-import useThemeStyles from '@styles/useThemeStyles';
 import * as Report from '@userActions/Report';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
diff --git a/src/pages/RoomInvitePage.js b/src/pages/RoomInvitePage.js
index 9b5b4f461652..cb72b2f8b08a 100644
--- a/src/pages/RoomInvitePage.js
+++ b/src/pages/RoomInvitePage.js
@@ -10,6 +10,7 @@ import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import ScreenWrapper from '@components/ScreenWrapper';
 import SelectionList from '@components/SelectionList';
 import useLocalize from '@hooks/useLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
 import * as Browser from '@libs/Browser';
 import compose from '@libs/compose';
 import Navigation from '@libs/Navigation/Navigation';
@@ -17,7 +18,6 @@ import * as OptionsListUtils from '@libs/OptionsListUtils';
 import * as PersonalDetailsUtils from '@libs/PersonalDetailsUtils';
 import * as PolicyUtils from '@libs/PolicyUtils';
 import * as ReportUtils from '@libs/ReportUtils';
-import useThemeStyles from '@styles/useThemeStyles';
 import * as Report from '@userActions/Report';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
diff --git a/src/pages/RoomMembersPage.js b/src/pages/RoomMembersPage.js
index 23722625b961..0ee35efedb0b 100644
--- a/src/pages/RoomMembersPage.js
+++ b/src/pages/RoomMembersPage.js
@@ -13,6 +13,7 @@ import SelectionList from '@components/SelectionList';
 import withCurrentUserPersonalDetails, {withCurrentUserPersonalDetailsDefaultProps, withCurrentUserPersonalDetailsPropTypes} from '@components/withCurrentUserPersonalDetails';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
 import withWindowDimensions, {windowDimensionsPropTypes} from '@components/withWindowDimensions';
+import useThemeStyles from '@hooks/useThemeStyles';
 import * as Browser from '@libs/Browser';
 import compose from '@libs/compose';
 import Log from '@libs/Log';
@@ -21,7 +22,6 @@ import * as OptionsListUtils from '@libs/OptionsListUtils';
 import * as PolicyUtils from '@libs/PolicyUtils';
 import * as ReportUtils from '@libs/ReportUtils';
 import * as UserUtils from '@libs/UserUtils';
-import useThemeStyles from '@styles/useThemeStyles';
 import * as Report from '@userActions/Report';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
diff --git a/src/pages/TeachersUnite/ImTeacherUpdateEmailPage.js b/src/pages/TeachersUnite/ImTeacherUpdateEmailPage.js
index 2dad59fc01b7..e9564bfffe0b 100644
--- a/src/pages/TeachersUnite/ImTeacherUpdateEmailPage.js
+++ b/src/pages/TeachersUnite/ImTeacherUpdateEmailPage.js
@@ -6,8 +6,8 @@ import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import * as Illustrations from '@components/Icon/Illustrations';
 import ScreenWrapper from '@components/ScreenWrapper';
 import useLocalize from '@hooks/useLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
 import Navigation from '@libs/Navigation/Navigation';
-import useThemeStyles from '@styles/useThemeStyles';
 import variables from '@styles/variables';
 import ROUTES from '@src/ROUTES';
 
diff --git a/src/pages/TeachersUnite/IntroSchoolPrincipalPage.js b/src/pages/TeachersUnite/IntroSchoolPrincipalPage.js
index e04b720e8365..d51706e55052 100644
--- a/src/pages/TeachersUnite/IntroSchoolPrincipalPage.js
+++ b/src/pages/TeachersUnite/IntroSchoolPrincipalPage.js
@@ -12,10 +12,10 @@ import ScreenWrapper from '@components/ScreenWrapper';
 import Text from '@components/Text';
 import TextInput from '@components/TextInput';
 import useLocalize from '@hooks/useLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
 import * as ErrorUtils from '@libs/ErrorUtils';
 import Navigation from '@libs/Navigation/Navigation';
 import * as ValidationUtils from '@libs/ValidationUtils';
-import useThemeStyles from '@styles/useThemeStyles';
 import TeachersUnite from '@userActions/TeachersUnite';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
diff --git a/src/pages/TeachersUnite/KnowATeacherPage.js b/src/pages/TeachersUnite/KnowATeacherPage.js
index 7c2b8f03f879..ba45690c6088 100644
--- a/src/pages/TeachersUnite/KnowATeacherPage.js
+++ b/src/pages/TeachersUnite/KnowATeacherPage.js
@@ -12,11 +12,11 @@ import ScreenWrapper from '@components/ScreenWrapper';
 import Text from '@components/Text';
 import TextInput from '@components/TextInput';
 import useLocalize from '@hooks/useLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
 import * as ErrorUtils from '@libs/ErrorUtils';
 import * as LoginUtils from '@libs/LoginUtils';
 import Navigation from '@libs/Navigation/Navigation';
 import * as ValidationUtils from '@libs/ValidationUtils';
-import useThemeStyles from '@styles/useThemeStyles';
 import TeachersUnite from '@userActions/TeachersUnite';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
diff --git a/src/pages/TeachersUnite/SaveTheWorldPage.js b/src/pages/TeachersUnite/SaveTheWorldPage.js
index 5d9b246358a9..b55a308decc0 100644
--- a/src/pages/TeachersUnite/SaveTheWorldPage.js
+++ b/src/pages/TeachersUnite/SaveTheWorldPage.js
@@ -8,9 +8,9 @@ import LottieAnimations from '@components/LottieAnimations';
 import MenuItem from '@components/MenuItem';
 import Text from '@components/Text';
 import useLocalize from '@hooks/useLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
 import Navigation from '@libs/Navigation/Navigation';
 import useTheme from '@styles/theme/useTheme';
-import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
diff --git a/src/pages/home/HeaderView.js b/src/pages/home/HeaderView.js
index 8453576bd257..8207129e1482 100644
--- a/src/pages/home/HeaderView.js
+++ b/src/pages/home/HeaderView.js
@@ -20,6 +20,7 @@ import Text from '@components/Text';
 import ThreeDotsMenu from '@components/ThreeDotsMenu';
 import Tooltip from '@components/Tooltip';
 import useLocalize from '@hooks/useLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import {getGroupChatName} from '@libs/GroupChatUtils';
 import * as HeaderUtils from '@libs/HeaderUtils';
@@ -29,7 +30,6 @@ import * as ReportActionsUtils from '@libs/ReportActionsUtils';
 import * as ReportUtils from '@libs/ReportUtils';
 import reportPropTypes from '@pages/reportPropTypes';
 import useTheme from '@styles/theme/useTheme';
-import useThemeStyles from '@styles/useThemeStyles';
 import * as Link from '@userActions/Link';
 import * as Report from '@userActions/Report';
 import * as Session from '@userActions/Session';
diff --git a/src/pages/home/ReportScreen.js b/src/pages/home/ReportScreen.js
index 8db899a8f73f..5432f32123f0 100644
--- a/src/pages/home/ReportScreen.js
+++ b/src/pages/home/ReportScreen.js
@@ -17,6 +17,7 @@ import withCurrentReportID, {withCurrentReportIDDefaultProps, withCurrentReportI
 import withViewportOffsetTop from '@components/withViewportOffsetTop';
 import useLocalize from '@hooks/useLocalize';
 import usePrevious from '@hooks/usePrevious';
+import useThemeStyles from '@hooks/useThemeStyles';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import compose from '@libs/compose';
 import Navigation from '@libs/Navigation/Navigation';
@@ -26,7 +27,6 @@ import * as ReportUtils from '@libs/ReportUtils';
 import personalDetailsPropType from '@pages/personalDetailsPropType';
 import reportMetadataPropTypes from '@pages/reportMetadataPropTypes';
 import reportPropTypes from '@pages/reportPropTypes';
-import useThemeStyles from '@styles/useThemeStyles';
 import * as ComposerActions from '@userActions/Composer';
 import * as Report from '@userActions/Report';
 import CONST from '@src/CONST';
diff --git a/src/pages/home/report/FloatingMessageCounter/FloatingMessageCounterContainer/index.android.js b/src/pages/home/report/FloatingMessageCounter/FloatingMessageCounterContainer/index.android.js
index 873e7fa243af..700a2fb399e4 100644
--- a/src/pages/home/report/FloatingMessageCounter/FloatingMessageCounterContainer/index.android.js
+++ b/src/pages/home/report/FloatingMessageCounter/FloatingMessageCounterContainer/index.android.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import {Animated, View} from 'react-native';
-import useThemeStyles from '@styles/useThemeStyles';
+import useThemeStyles from '@hooks/useThemeStyles';
 import floatingMessageCounterContainerPropTypes from './floatingMessageCounterContainerPropTypes';
 
 function FloatingMessageCounterContainer(props) {
diff --git a/src/pages/home/report/FloatingMessageCounter/FloatingMessageCounterContainer/index.js b/src/pages/home/report/FloatingMessageCounter/FloatingMessageCounterContainer/index.js
index 0b721067631c..19123e65cbf2 100644
--- a/src/pages/home/report/FloatingMessageCounter/FloatingMessageCounterContainer/index.js
+++ b/src/pages/home/report/FloatingMessageCounter/FloatingMessageCounterContainer/index.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import {Animated} from 'react-native';
-import useThemeStyles from '@styles/useThemeStyles';
+import useThemeStyles from '@hooks/useThemeStyles';
 import floatingMessageCounterContainerPropTypes from './floatingMessageCounterContainerPropTypes';
 
 function FloatingMessageCounterContainer(props) {
diff --git a/src/pages/home/report/FloatingMessageCounter/index.js b/src/pages/home/report/FloatingMessageCounter/index.js
index c0a8fb9dff86..31d5759c3248 100644
--- a/src/pages/home/report/FloatingMessageCounter/index.js
+++ b/src/pages/home/report/FloatingMessageCounter/index.js
@@ -6,9 +6,9 @@ import Icon from '@components/Icon';
 import * as Expensicons from '@components/Icon/Expensicons';
 import Text from '@components/Text';
 import useLocalize from '@hooks/useLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
 import useNativeDriver from '@libs/useNativeDriver';
 import useTheme from '@styles/theme/useTheme';
-import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 import FloatingMessageCounterContainer from './FloatingMessageCounterContainer';
 
diff --git a/src/pages/home/report/LinkPreviewer.js b/src/pages/home/report/LinkPreviewer.js
index a0d3666b36e4..bcf5a795e072 100644
--- a/src/pages/home/report/LinkPreviewer.js
+++ b/src/pages/home/report/LinkPreviewer.js
@@ -6,8 +6,8 @@ import _ from 'underscore';
 import Text from '@components/Text';
 import TextLink from '@components/TextLink';
 import useStyleUtils from '@hooks/useStyleUtils';
+import useThemeStyles from '@hooks/useThemeStyles';
 import useTheme from '@styles/theme/useTheme';
-import useThemeStyles from '@styles/useThemeStyles';
 import variables from '@styles/variables';
 
 const IMAGE_TYPES = ['jpg', 'jpeg', 'png'];
diff --git a/src/pages/home/report/ListBoundaryLoader/ListBoundaryLoader.js b/src/pages/home/report/ListBoundaryLoader/ListBoundaryLoader.js
index 367031c16936..c8bf6c9c9c9a 100644
--- a/src/pages/home/report/ListBoundaryLoader/ListBoundaryLoader.js
+++ b/src/pages/home/report/ListBoundaryLoader/ListBoundaryLoader.js
@@ -3,8 +3,8 @@ import React from 'react';
 import {ActivityIndicator, View} from 'react-native';
 import ReportActionsSkeletonView from '@components/ReportActionsSkeletonView';
 import useNetwork from '@hooks/useNetwork';
+import useThemeStyles from '@hooks/useThemeStyles';
 import useTheme from '@styles/theme/useTheme';
-import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 
 const propTypes = {
diff --git a/src/pages/home/report/ParticipantLocalTime.js b/src/pages/home/report/ParticipantLocalTime.js
index 5efd53fe6ae7..1992953c959e 100644
--- a/src/pages/home/report/ParticipantLocalTime.js
+++ b/src/pages/home/report/ParticipantLocalTime.js
@@ -4,9 +4,9 @@ import {View} from 'react-native';
 import participantPropTypes from '@components/participantPropTypes';
 import Text from '@components/Text';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
 import DateUtils from '@libs/DateUtils';
 import Timers from '@libs/Timers';
-import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 
 const propTypes = {
diff --git a/src/pages/home/report/ReactionList/BaseReactionList.js b/src/pages/home/report/ReactionList/BaseReactionList.js
index f94f6cdfde0d..2d881d080c31 100755
--- a/src/pages/home/report/ReactionList/BaseReactionList.js
+++ b/src/pages/home/report/ReactionList/BaseReactionList.js
@@ -6,9 +6,9 @@ import {FlatList} from 'react-native';
 import OptionRow from '@components/OptionRow';
 import participantPropTypes from '@components/participantPropTypes';
 import withWindowDimensions from '@components/withWindowDimensions';
+import useThemeStyles from '@hooks/useThemeStyles';
 import Navigation from '@libs/Navigation/Navigation';
 import * as UserUtils from '@libs/UserUtils';
-import useThemeStyles from '@styles/useThemeStyles';
 import variables from '@styles/variables';
 import CONST from '@src/CONST';
 import ROUTES from '@src/ROUTES';
diff --git a/src/pages/home/report/ReactionList/HeaderReactionList.js b/src/pages/home/report/ReactionList/HeaderReactionList.js
index 3c2886033630..04b124f969a9 100644
--- a/src/pages/home/report/ReactionList/HeaderReactionList.js
+++ b/src/pages/home/report/ReactionList/HeaderReactionList.js
@@ -5,9 +5,9 @@ import Text from '@components/Text';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
 import withWindowDimensions, {windowDimensionsPropTypes} from '@components/withWindowDimensions';
 import useStyleUtils from '@hooks/useStyleUtils';
+import useThemeStyles from '@hooks/useThemeStyles';
 import compose from '@libs/compose';
 import * as EmojiUtils from '@libs/EmojiUtils';
-import useThemeStyles from '@styles/useThemeStyles';
 import reactionPropTypes from './reactionPropTypes';
 
 const propTypes = {
diff --git a/src/pages/home/report/ReportActionCompose/AttachmentPickerWithMenuItems.js b/src/pages/home/report/ReportActionCompose/AttachmentPickerWithMenuItems.js
index ec9421bfa1cb..b05520e3b360 100644
--- a/src/pages/home/report/ReportActionCompose/AttachmentPickerWithMenuItems.js
+++ b/src/pages/home/report/ReportActionCompose/AttachmentPickerWithMenuItems.js
@@ -9,10 +9,10 @@ import PopoverMenu from '@components/PopoverMenu';
 import PressableWithFeedback from '@components/Pressable/PressableWithFeedback';
 import Tooltip from '@components/Tooltip/PopoverAnchorTooltip';
 import useLocalize from '@hooks/useLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import * as Browser from '@libs/Browser';
 import * as ReportUtils from '@libs/ReportUtils';
-import useThemeStyles from '@styles/useThemeStyles';
 import * as IOU from '@userActions/IOU';
 import * as Report from '@userActions/Report';
 import * as Task from '@userActions/Task';
diff --git a/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.js b/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.js
index 4bbc16767255..b86fa7666cfe 100644
--- a/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.js
+++ b/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.js
@@ -10,6 +10,7 @@ import useDebounce from '@hooks/useDebounce';
 import useLocalize from '@hooks/useLocalize';
 import usePrevious from '@hooks/usePrevious';
 import useStyleUtils from '@hooks/useStyleUtils';
+import useThemeStyles from '@hooks/useThemeStyles';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import canFocusInputOnScreenFocus from '@libs/canFocusInputOnScreenFocus';
 import compose from '@libs/compose';
@@ -28,7 +29,6 @@ import willBlurTextInputOnTapOutsideFunc from '@libs/willBlurTextInputOnTapOutsi
 import SilentCommentUpdater from '@pages/home/report/ReportActionCompose/SilentCommentUpdater';
 import Suggestions from '@pages/home/report/ReportActionCompose/Suggestions';
 import useTheme from '@styles/theme/useTheme';
-import useThemeStyles from '@styles/useThemeStyles';
 import * as EmojiPickerActions from '@userActions/EmojiPickerAction';
 import * as InputFocus from '@userActions/InputFocus';
 import * as Report from '@userActions/Report';
diff --git a/src/pages/home/report/ReportActionCompose/ReportActionCompose.js b/src/pages/home/report/ReportActionCompose/ReportActionCompose.js
index 2632324a963f..b4b8350a062d 100644
--- a/src/pages/home/report/ReportActionCompose/ReportActionCompose.js
+++ b/src/pages/home/report/ReportActionCompose/ReportActionCompose.js
@@ -14,6 +14,7 @@ import OfflineWithFeedback from '@components/OfflineWithFeedback';
 import {usePersonalDetails, withNetwork} from '@components/OnyxProvider';
 import withCurrentUserPersonalDetails, {withCurrentUserPersonalDetailsDefaultProps, withCurrentUserPersonalDetailsPropTypes} from '@components/withCurrentUserPersonalDetails';
 import useLocalize from '@hooks/useLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import canFocusInputOnScreenFocus from '@libs/canFocusInputOnScreenFocus';
 import compose from '@libs/compose';
@@ -28,7 +29,6 @@ import reportActionPropTypes from '@pages/home/report/reportActionPropTypes';
 import ReportDropUI from '@pages/home/report/ReportDropUI';
 import ReportTypingIndicator from '@pages/home/report/ReportTypingIndicator';
 import reportPropTypes from '@pages/reportPropTypes';
-import useThemeStyles from '@styles/useThemeStyles';
 import * as EmojiPickerActions from '@userActions/EmojiPickerAction';
 import * as Report from '@userActions/Report';
 import * as User from '@userActions/User';
diff --git a/src/pages/home/report/ReportActionCompose/SendButton.js b/src/pages/home/report/ReportActionCompose/SendButton.js
index 9d6630f31e78..222e56ca2298 100644
--- a/src/pages/home/report/ReportActionCompose/SendButton.js
+++ b/src/pages/home/report/ReportActionCompose/SendButton.js
@@ -7,8 +7,8 @@ import * as Expensicons from '@components/Icon/Expensicons';
 import PressableWithFeedback from '@components/Pressable/PressableWithFeedback';
 import Tooltip from '@components/Tooltip';
 import useLocalize from '@hooks/useLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
 import useTheme from '@styles/theme/useTheme';
-import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 
 const propTypes = {
diff --git a/src/pages/home/report/ReportActionItem.js b/src/pages/home/report/ReportActionItem.js
index cfcd34602aec..0747bba82dae 100644
--- a/src/pages/home/report/ReportActionItem.js
+++ b/src/pages/home/report/ReportActionItem.js
@@ -33,6 +33,7 @@ import withLocalize from '@components/withLocalize';
 import withWindowDimensions, {windowDimensionsPropTypes} from '@components/withWindowDimensions';
 import usePrevious from '@hooks/usePrevious';
 import useStyleUtils from '@hooks/useStyleUtils';
+import useThemeStyles from '@hooks/useThemeStyles';
 import compose from '@libs/compose';
 import ControlSelection from '@libs/ControlSelection';
 import * as CurrencyUtils from '@libs/CurrencyUtils';
@@ -48,7 +49,6 @@ import userWalletPropTypes from '@pages/EnablePayments/userWalletPropTypes';
 import {ReactionListContext} from '@pages/home/ReportScreenContext';
 import reportPropTypes from '@pages/reportPropTypes';
 import useTheme from '@styles/theme/useTheme';
-import useThemeStyles from '@styles/useThemeStyles';
 import * as BankAccounts from '@userActions/BankAccounts';
 import * as EmojiPickerAction from '@userActions/EmojiPickerAction';
 import * as store from '@userActions/ReimbursementAccount/store';
diff --git a/src/pages/home/report/ReportActionItemBasicMessage.tsx b/src/pages/home/report/ReportActionItemBasicMessage.tsx
index bf53ee16450d..63e6d2424a7c 100644
--- a/src/pages/home/report/ReportActionItemBasicMessage.tsx
+++ b/src/pages/home/report/ReportActionItemBasicMessage.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import {View} from 'react-native';
 import Text from '@components/Text';
-import useThemeStyles from '@styles/useThemeStyles';
+import useThemeStyles from '@hooks/useThemeStyles';
 import ChildrenProps from '@src/types/utils/ChildrenProps';
 
 type ReportActionItemBasicMessageProps = ChildrenProps & {
diff --git a/src/pages/home/report/ReportActionItemCreated.js b/src/pages/home/report/ReportActionItemCreated.js
index f4201a1b2a43..ad684474b06c 100644
--- a/src/pages/home/report/ReportActionItemCreated.js
+++ b/src/pages/home/report/ReportActionItemCreated.js
@@ -11,11 +11,11 @@ import ReportWelcomeText from '@components/ReportWelcomeText';
 import withLocalize from '@components/withLocalize';
 import withWindowDimensions, {windowDimensionsPropTypes} from '@components/withWindowDimensions';
 import useStyleUtils from '@hooks/useStyleUtils';
+import useThemeStyles from '@hooks/useThemeStyles';
 import compose from '@libs/compose';
 import reportWithoutHasDraftSelector from '@libs/OnyxSelectors/reportWithoutHasDraftSelector';
 import * as ReportUtils from '@libs/ReportUtils';
 import reportPropTypes from '@pages/reportPropTypes';
-import useThemeStyles from '@styles/useThemeStyles';
 import * as Report from '@userActions/Report';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
diff --git a/src/pages/home/report/ReportActionItemDate.js b/src/pages/home/report/ReportActionItemDate.js
index a65bdd4aa7d7..58471a88061f 100644
--- a/src/pages/home/report/ReportActionItemDate.js
+++ b/src/pages/home/report/ReportActionItemDate.js
@@ -3,8 +3,8 @@ import React, {memo} from 'react';
 import {withCurrentDate} from '@components/OnyxProvider';
 import Text from '@components/Text';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
 import compose from '@libs/compose';
-import useThemeStyles from '@styles/useThemeStyles';
 
 const propTypes = {
     /** UTC timestamp for when the action was created */
diff --git a/src/pages/home/report/ReportActionItemDraft.tsx b/src/pages/home/report/ReportActionItemDraft.tsx
index b46af5401ee4..de4458d7b39f 100644
--- a/src/pages/home/report/ReportActionItemDraft.tsx
+++ b/src/pages/home/report/ReportActionItemDraft.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import {View} from 'react-native';
-import useThemeStyles from '@styles/useThemeStyles';
+import useThemeStyles from '@hooks/useThemeStyles';
 import ChildrenProps from '@src/types/utils/ChildrenProps';
 
 function ReportActionItemDraft({children}: ChildrenProps) {
diff --git a/src/pages/home/report/ReportActionItemFragment.js b/src/pages/home/report/ReportActionItemFragment.js
index c5097bdfc4a5..f05b3decc6d7 100644
--- a/src/pages/home/report/ReportActionItemFragment.js
+++ b/src/pages/home/report/ReportActionItemFragment.js
@@ -7,10 +7,10 @@ import Text from '@components/Text';
 import UserDetailsTooltip from '@components/UserDetailsTooltip';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
 import withWindowDimensions, {windowDimensionsPropTypes} from '@components/withWindowDimensions';
+import useThemeStyles from '@hooks/useThemeStyles';
 import compose from '@libs/compose';
 import convertToLTR from '@libs/convertToLTR';
 import * as ReportUtils from '@libs/ReportUtils';
-import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 import AttachmentCommentFragment from './comment/AttachmentCommentFragment';
 import TextCommentFragment from './comment/TextCommentFragment';
diff --git a/src/pages/home/report/ReportActionItemGrouped.js b/src/pages/home/report/ReportActionItemGrouped.js
index 8c8c51bda3c2..2e10c45c824a 100644
--- a/src/pages/home/report/ReportActionItemGrouped.js
+++ b/src/pages/home/report/ReportActionItemGrouped.js
@@ -1,8 +1,8 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import {View} from 'react-native';
+import useThemeStyles from '@hooks/useThemeStyles';
 import stylePropTypes from '@styles/stylePropTypes';
-import useThemeStyles from '@styles/useThemeStyles';
 
 const propTypes = {
     /** Children view component for this action item */
diff --git a/src/pages/home/report/ReportActionItemMessage.js b/src/pages/home/report/ReportActionItemMessage.js
index 2265530f29a1..f0689da62b8a 100644
--- a/src/pages/home/report/ReportActionItemMessage.js
+++ b/src/pages/home/report/ReportActionItemMessage.js
@@ -4,9 +4,9 @@ import React from 'react';
 import {Text, View} from 'react-native';
 import _ from 'underscore';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
 import * as ReportActionsUtils from '@libs/ReportActionsUtils';
 import * as ReportUtils from '@libs/ReportUtils';
-import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 import ReportActionItemFragment from './ReportActionItemFragment';
 import reportActionPropTypes from './reportActionPropTypes';
diff --git a/src/pages/home/report/ReportActionItemMessageEdit.js b/src/pages/home/report/ReportActionItemMessageEdit.js
index 9a2fc093b682..ab03f08c1ba0 100644
--- a/src/pages/home/report/ReportActionItemMessageEdit.js
+++ b/src/pages/home/report/ReportActionItemMessageEdit.js
@@ -17,6 +17,7 @@ import useKeyboardState from '@hooks/useKeyboardState';
 import useLocalize from '@hooks/useLocalize';
 import useReportScrollManager from '@hooks/useReportScrollManager';
 import useStyleUtils from '@hooks/useStyleUtils';
+import useThemeStyles from '@hooks/useThemeStyles';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import * as Browser from '@libs/Browser';
 import * as ComposerUtils from '@libs/ComposerUtils';
@@ -29,7 +30,6 @@ import * as ReportUtils from '@libs/ReportUtils';
 import setShouldShowComposeInputKeyboardAware from '@libs/setShouldShowComposeInputKeyboardAware';
 import reportPropTypes from '@pages/reportPropTypes';
 import useTheme from '@styles/themes/useTheme';
-import useThemeStyles from '@styles/useThemeStyles';
 import * as EmojiPickerAction from '@userActions/EmojiPickerAction';
 import * as InputFocus from '@userActions/InputFocus';
 import * as Report from '@userActions/Report';
diff --git a/src/pages/home/report/ReportActionItemParentAction.js b/src/pages/home/report/ReportActionItemParentAction.js
index edb868970690..c11200ccc4db 100644
--- a/src/pages/home/report/ReportActionItemParentAction.js
+++ b/src/pages/home/report/ReportActionItemParentAction.js
@@ -7,10 +7,10 @@ import OfflineWithFeedback from '@components/OfflineWithFeedback';
 import withLocalize from '@components/withLocalize';
 import withWindowDimensions, {windowDimensionsPropTypes} from '@components/withWindowDimensions';
 import useStyleUtils from '@hooks/useStyleUtils';
+import useThemeStyles from '@hooks/useThemeStyles';
 import compose from '@libs/compose';
 import * as ReportActionsUtils from '@libs/ReportActionsUtils';
 import reportPropTypes from '@pages/reportPropTypes';
-import useThemeStyles from '@styles/useThemeStyles';
 import * as Report from '@userActions/Report';
 import ONYXKEYS from '@src/ONYXKEYS';
 import AnimatedEmptyStateBackground from './AnimatedEmptyStateBackground';
diff --git a/src/pages/home/report/ReportActionItemSingle.js b/src/pages/home/report/ReportActionItemSingle.js
index b38ea0115ecd..04d92e8ec70f 100644
--- a/src/pages/home/report/ReportActionItemSingle.js
+++ b/src/pages/home/report/ReportActionItemSingle.js
@@ -14,6 +14,7 @@ import Tooltip from '@components/Tooltip';
 import UserDetailsTooltip from '@components/UserDetailsTooltip';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
 import useStyleUtils from '@hooks/useStyleUtils';
+import useThemeStyles from '@hooks/useThemeStyles';
 import ControlSelection from '@libs/ControlSelection';
 import DateUtils from '@libs/DateUtils';
 import Navigation from '@libs/Navigation/Navigation';
@@ -22,7 +23,6 @@ import * as UserUtils from '@libs/UserUtils';
 import reportPropTypes from '@pages/reportPropTypes';
 import stylePropTypes from '@styles/stylePropTypes';
 import useTheme from '@styles/theme/useTheme';
-import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 import ROUTES from '@src/ROUTES';
 import ReportActionItemDate from './ReportActionItemDate';
diff --git a/src/pages/home/report/ReportActionItemThread.js b/src/pages/home/report/ReportActionItemThread.js
index bfb5ae0c5a44..793eac9fdd7b 100644
--- a/src/pages/home/report/ReportActionItemThread.js
+++ b/src/pages/home/report/ReportActionItemThread.js
@@ -6,8 +6,8 @@ import MultipleAvatars from '@components/MultipleAvatars';
 import PressableWithSecondaryInteraction from '@components/PressableWithSecondaryInteraction';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
 import withWindowDimensions, {windowDimensionsPropTypes} from '@components/withWindowDimensions';
+import useThemeStyles from '@hooks/useThemeStyles';
 import compose from '@libs/compose';
-import useThemeStyles from '@styles/useThemeStyles';
 import * as Report from '@userActions/Report';
 import CONST from '@src/CONST';
 
diff --git a/src/pages/home/report/ReportActionsList.js b/src/pages/home/report/ReportActionsList.js
index 183665891929..7e930ead6580 100644
--- a/src/pages/home/report/ReportActionsList.js
+++ b/src/pages/home/report/ReportActionsList.js
@@ -12,12 +12,12 @@ import withWindowDimensions, {windowDimensionsPropTypes} from '@components/withW
 import useLocalize from '@hooks/useLocalize';
 import useNetwork from '@hooks/useNetwork';
 import useReportScrollManager from '@hooks/useReportScrollManager';
+import useThemeStyles from '@hooks/useThemeStyles';
 import compose from '@libs/compose';
 import DateUtils from '@libs/DateUtils';
 import * as ReportActionsUtils from '@libs/ReportActionsUtils';
 import * as ReportUtils from '@libs/ReportUtils';
 import reportPropTypes from '@pages/reportPropTypes';
-import useThemeStyles from '@styles/useThemeStyles';
 import variables from '@styles/variables';
 import * as Report from '@userActions/Report';
 import CONST from '@src/CONST';
diff --git a/src/pages/home/report/ReportDropUI.js b/src/pages/home/report/ReportDropUI.js
index 2f4c81313ec2..c1c3b8e506ab 100644
--- a/src/pages/home/report/ReportDropUI.js
+++ b/src/pages/home/report/ReportDropUI.js
@@ -6,7 +6,7 @@ import Icon from '@components/Icon';
 import * as Expensicons from '@components/Icon/Expensicons';
 import Text from '@components/Text';
 import useLocalize from '@hooks/useLocalize';
-import useThemeStyles from '@styles/useThemeStyles';
+import useThemeStyles from '@hooks/useThemeStyles';
 
 const propTypes = {
     /** Callback to execute when a file is dropped. */
diff --git a/src/pages/home/report/ReportFooter.js b/src/pages/home/report/ReportFooter.js
index e5dd5da19ad5..48bfd5d18bcc 100644
--- a/src/pages/home/report/ReportFooter.js
+++ b/src/pages/home/report/ReportFooter.js
@@ -9,10 +9,10 @@ import participantPropTypes from '@components/participantPropTypes';
 import SwipeableView from '@components/SwipeableView';
 import withWindowDimensions, {windowDimensionsPropTypes} from '@components/withWindowDimensions';
 import useNetwork from '@hooks/useNetwork';
+import useThemeStyles from '@hooks/useThemeStyles';
 import compose from '@libs/compose';
 import * as ReportUtils from '@libs/ReportUtils';
 import reportPropTypes from '@pages/reportPropTypes';
-import useThemeStyles from '@styles/useThemeStyles';
 import variables from '@styles/variables';
 import * as Session from '@userActions/Session';
 import CONST from '@src/CONST';
diff --git a/src/pages/home/report/ReportTypingIndicator.js b/src/pages/home/report/ReportTypingIndicator.js
index 3a2c611ac358..74778b364db1 100755
--- a/src/pages/home/report/ReportTypingIndicator.js
+++ b/src/pages/home/report/ReportTypingIndicator.js
@@ -7,8 +7,8 @@ import {withNetwork} from '@components/OnyxProvider';
 import Text from '@components/Text';
 import TextWithEllipsis from '@components/TextWithEllipsis';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
 import compose from '@libs/compose';
-import useThemeStyles from '@styles/useThemeStyles';
 import * as PersonalDetails from '@userActions/PersonalDetails';
 import ONYXKEYS from '@src/ONYXKEYS';
 
diff --git a/src/pages/home/report/comment/AttachmentCommentFragment.js b/src/pages/home/report/comment/AttachmentCommentFragment.js
index ec75edd18a35..30c131b57060 100644
--- a/src/pages/home/report/comment/AttachmentCommentFragment.js
+++ b/src/pages/home/report/comment/AttachmentCommentFragment.js
@@ -1,8 +1,8 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import {View} from 'react-native';
+import useThemeStyles from '@hooks/useThemeStyles';
 import reportActionSourcePropType from '@pages/home/report/reportActionSourcePropType';
-import useThemeStyles from '@styles/useThemeStyles';
 import RenderCommentHTML from './RenderCommentHTML';
 
 const propTypes = {
diff --git a/src/pages/home/report/comment/TextCommentFragment.js b/src/pages/home/report/comment/TextCommentFragment.js
index 99a3b9e004c8..057fc59f16e0 100644
--- a/src/pages/home/report/comment/TextCommentFragment.js
+++ b/src/pages/home/report/comment/TextCommentFragment.js
@@ -5,6 +5,7 @@ import Text from '@components/Text';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
 import withWindowDimensions, {windowDimensionsPropTypes} from '@components/withWindowDimensions';
 import ZeroWidthView from '@components/ZeroWidthView';
+import useThemeStyles from '@hooks/useThemeStyles';
 import compose from '@libs/compose';
 import convertToLTR from '@libs/convertToLTR';
 import * as DeviceCapabilities from '@libs/DeviceCapabilities';
@@ -12,7 +13,6 @@ import * as EmojiUtils from '@libs/EmojiUtils';
 import reportActionFragmentPropTypes from '@pages/home/report/reportActionFragmentPropTypes';
 import reportActionSourcePropType from '@pages/home/report/reportActionSourcePropType';
 import useTheme from '@styles/theme/useTheme';
-import useThemeStyles from '@styles/useThemeStyles';
 import editedLabelStyles from '@styles/utils/editedLabelStyles';
 import variables from '@styles/variables';
 import CONST from '@src/CONST';
diff --git a/src/pages/home/sidebar/AvatarWithOptionalStatus.js b/src/pages/home/sidebar/AvatarWithOptionalStatus.js
index 4507b21a382c..f8c782bda000 100644
--- a/src/pages/home/sidebar/AvatarWithOptionalStatus.js
+++ b/src/pages/home/sidebar/AvatarWithOptionalStatus.js
@@ -5,8 +5,8 @@ import {View} from 'react-native';
 import PressableWithoutFeedback from '@components/Pressable/PressableWithoutFeedback';
 import Text from '@components/Text';
 import useLocalize from '@hooks/useLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
 import Navigation from '@libs/Navigation/Navigation';
-import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 import ROUTES from '@src/ROUTES';
 import PressableAvatarWithIndicator from './PressableAvatarWithIndicator';
diff --git a/src/pages/home/sidebar/SidebarLinks.js b/src/pages/home/sidebar/SidebarLinks.js
index 89fa2f69c2a8..99a797a07422 100644
--- a/src/pages/home/sidebar/SidebarLinks.js
+++ b/src/pages/home/sidebar/SidebarLinks.js
@@ -13,6 +13,7 @@ import PressableWithoutFeedback from '@components/Pressable/PressableWithoutFeed
 import Tooltip from '@components/Tooltip';
 import useLocalize from '@hooks/useLocalize';
 import useStyleUtils from '@hooks/useStyleUtils';
+import useThemeStyles from '@hooks/useThemeStyles';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import KeyboardShortcut from '@libs/KeyboardShortcut';
 import Navigation from '@libs/Navigation/Navigation';
@@ -21,7 +22,6 @@ import SidebarUtils from '@libs/SidebarUtils';
 import * as ReportActionContextMenu from '@pages/home/report/ContextMenu/ReportActionContextMenu';
 import safeAreaInsetPropTypes from '@pages/safeAreaInsetPropTypes';
 import useTheme from '@styles/theme/useTheme';
-import useThemeStyles from '@styles/useThemeStyles';
 import variables from '@styles/variables';
 import * as App from '@userActions/App';
 import * as Session from '@userActions/Session';
diff --git a/src/pages/home/sidebar/SidebarLinksData.js b/src/pages/home/sidebar/SidebarLinksData.js
index 088eb5c0092a..01140b56c7c1 100644
--- a/src/pages/home/sidebar/SidebarLinksData.js
+++ b/src/pages/home/sidebar/SidebarLinksData.js
@@ -8,11 +8,11 @@ import _ from 'underscore';
 import withCurrentReportID from '@components/withCurrentReportID';
 import withNavigationFocus from '@components/withNavigationFocus';
 import useLocalize from '@hooks/useLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
 import compose from '@libs/compose';
 import * as SessionUtils from '@libs/SessionUtils';
 import SidebarUtils from '@libs/SidebarUtils';
 import reportPropTypes from '@pages/reportPropTypes';
-import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import SidebarLinks, {basePropTypes} from './SidebarLinks';
diff --git a/src/pages/home/sidebar/SidebarScreen/BaseSidebarScreen.js b/src/pages/home/sidebar/SidebarScreen/BaseSidebarScreen.js
index 5b7a126a4655..a6853316b582 100644
--- a/src/pages/home/sidebar/SidebarScreen/BaseSidebarScreen.js
+++ b/src/pages/home/sidebar/SidebarScreen/BaseSidebarScreen.js
@@ -1,10 +1,10 @@
 import React, {useEffect} from 'react';
 import {View} from 'react-native';
 import ScreenWrapper from '@components/ScreenWrapper';
+import useThemeStyles from '@hooks/useThemeStyles';
 import * as Browser from '@libs/Browser';
 import Performance from '@libs/Performance';
 import SidebarLinksData from '@pages/home/sidebar/SidebarLinksData';
-import useThemeStyles from '@styles/useThemeStyles';
 import Timing from '@userActions/Timing';
 import CONST from '@src/CONST';
 import sidebarPropTypes from './sidebarPropTypes';
diff --git a/src/pages/home/sidebar/SidebarScreen/FloatingActionButtonAndPopover.js b/src/pages/home/sidebar/SidebarScreen/FloatingActionButtonAndPopover.js
index 21e712c418e6..326ef18c50b3 100644
--- a/src/pages/home/sidebar/SidebarScreen/FloatingActionButtonAndPopover.js
+++ b/src/pages/home/sidebar/SidebarScreen/FloatingActionButtonAndPopover.js
@@ -11,9 +11,9 @@ import withNavigation from '@components/withNavigation';
 import withNavigationFocus from '@components/withNavigationFocus';
 import withWindowDimensions from '@components/withWindowDimensions';
 import usePrevious from '@hooks/usePrevious';
+import useThemeStyles from '@hooks/useThemeStyles';
 import compose from '@libs/compose';
 import Navigation from '@libs/Navigation/Navigation';
-import useThemeStyles from '@styles/useThemeStyles';
 import * as App from '@userActions/App';
 import * as IOU from '@userActions/IOU';
 import * as Policy from '@userActions/Policy';
diff --git a/src/pages/home/sidebar/SignInButton.js b/src/pages/home/sidebar/SignInButton.js
index c42e56551200..cbee32624094 100644
--- a/src/pages/home/sidebar/SignInButton.js
+++ b/src/pages/home/sidebar/SignInButton.js
@@ -4,7 +4,7 @@ import {View} from 'react-native';
 import Button from '@components/Button';
 import PressableWithoutFeedback from '@components/Pressable/PressableWithoutFeedback';
 import useLocalize from '@hooks/useLocalize';
-import useThemeStyles from '@styles/useThemeStyles';
+import useThemeStyles from '@hooks/useThemeStyles';
 import * as Session from '@userActions/Session';
 import CONST from '@src/CONST';
 
diff --git a/src/pages/iou/MoneyRequestCategoryPage.js b/src/pages/iou/MoneyRequestCategoryPage.js
index 7f3bf7985ba6..ceb2152d2b49 100644
--- a/src/pages/iou/MoneyRequestCategoryPage.js
+++ b/src/pages/iou/MoneyRequestCategoryPage.js
@@ -7,10 +7,10 @@ import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import ScreenWrapper from '@components/ScreenWrapper';
 import Text from '@components/Text';
 import useLocalize from '@hooks/useLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
 import compose from '@libs/compose';
 import Navigation from '@libs/Navigation/Navigation';
 import reportPropTypes from '@pages/reportPropTypes';
-import useThemeStyles from '@styles/useThemeStyles';
 import * as IOU from '@userActions/IOU';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
diff --git a/src/pages/iou/MoneyRequestDatePage.js b/src/pages/iou/MoneyRequestDatePage.js
index 9f80cbce9984..83bbe855b868 100644
--- a/src/pages/iou/MoneyRequestDatePage.js
+++ b/src/pages/iou/MoneyRequestDatePage.js
@@ -8,9 +8,9 @@ import FormProvider from '@components/Form/FormProvider';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import ScreenWrapper from '@components/ScreenWrapper';
 import useLocalize from '@hooks/useLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
 import * as MoneyRequestUtils from '@libs/MoneyRequestUtils';
 import Navigation from '@libs/Navigation/Navigation';
-import useThemeStyles from '@styles/useThemeStyles';
 import * as IOU from '@userActions/IOU';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
diff --git a/src/pages/iou/MoneyRequestDescriptionPage.js b/src/pages/iou/MoneyRequestDescriptionPage.js
index 8598f355435b..d0f8f8182557 100644
--- a/src/pages/iou/MoneyRequestDescriptionPage.js
+++ b/src/pages/iou/MoneyRequestDescriptionPage.js
@@ -11,12 +11,12 @@ import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import ScreenWrapper from '@components/ScreenWrapper';
 import TextInput from '@components/TextInput';
 import useLocalize from '@hooks/useLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
 import * as IOU from '@libs/actions/IOU';
 import * as Browser from '@libs/Browser';
 import * as MoneyRequestUtils from '@libs/MoneyRequestUtils';
 import Navigation from '@libs/Navigation/Navigation';
 import updateMultilineInputRange from '@libs/UpdateMultilineInputRange';
-import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
diff --git a/src/pages/iou/MoneyRequestMerchantPage.js b/src/pages/iou/MoneyRequestMerchantPage.js
index 2c5869dfa7a3..24a5f5675031 100644
--- a/src/pages/iou/MoneyRequestMerchantPage.js
+++ b/src/pages/iou/MoneyRequestMerchantPage.js
@@ -11,8 +11,8 @@ import ScreenWrapper from '@components/ScreenWrapper';
 import TextInput from '@components/TextInput';
 import useAutoFocusInput from '@hooks/useAutoFocusInput';
 import useLocalize from '@hooks/useLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
 import Navigation from '@libs/Navigation/Navigation';
-import useThemeStyles from '@styles/useThemeStyles';
 import * as IOU from '@userActions/IOU';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
diff --git a/src/pages/iou/MoneyRequestSelectorPage.js b/src/pages/iou/MoneyRequestSelectorPage.js
index af52ea1222ed..509fd5403b0c 100644
--- a/src/pages/iou/MoneyRequestSelectorPage.js
+++ b/src/pages/iou/MoneyRequestSelectorPage.js
@@ -11,6 +11,7 @@ import ScreenWrapper from '@components/ScreenWrapper';
 import TabSelector from '@components/TabSelector/TabSelector';
 import useLocalize from '@hooks/useLocalize';
 import usePrevious from '@hooks/usePrevious';
+import useThemeStyles from '@hooks/useThemeStyles';
 import compose from '@libs/compose';
 import * as DeviceCapabilities from '@libs/DeviceCapabilities';
 import * as IOUUtils from '@libs/IOUUtils';
@@ -19,7 +20,6 @@ import OnyxTabNavigator, {TopTab} from '@libs/Navigation/OnyxTabNavigator';
 import * as ReportUtils from '@libs/ReportUtils';
 import withReportOrNotFound from '@pages/home/report/withReportOrNotFound';
 import reportPropTypes from '@pages/reportPropTypes';
-import useThemeStyles from '@styles/useThemeStyles';
 import * as IOU from '@userActions/IOU';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
diff --git a/src/pages/iou/MoneyRequestTagPage.js b/src/pages/iou/MoneyRequestTagPage.js
index d16a7aa6679c..60e40d665580 100644
--- a/src/pages/iou/MoneyRequestTagPage.js
+++ b/src/pages/iou/MoneyRequestTagPage.js
@@ -9,11 +9,11 @@ import TagPicker from '@components/TagPicker';
 import tagPropTypes from '@components/tagPropTypes';
 import Text from '@components/Text';
 import useLocalize from '@hooks/useLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
 import compose from '@libs/compose';
 import Navigation from '@libs/Navigation/Navigation';
 import * as PolicyUtils from '@libs/PolicyUtils';
 import reportPropTypes from '@pages/reportPropTypes';
-import useThemeStyles from '@styles/useThemeStyles';
 import * as IOU from '@userActions/IOU';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
diff --git a/src/pages/iou/ReceiptDropUI.js b/src/pages/iou/ReceiptDropUI.js
index 18ad31e036e4..67330860a052 100644
--- a/src/pages/iou/ReceiptDropUI.js
+++ b/src/pages/iou/ReceiptDropUI.js
@@ -4,7 +4,7 @@ import {Text, View} from 'react-native';
 import ReceiptUpload from '@assets/images/receipt-upload.svg';
 import DragAndDropConsumer from '@components/DragAndDrop/Consumer';
 import useLocalize from '@hooks/useLocalize';
-import useThemeStyles from '@styles/useThemeStyles';
+import useThemeStyles from '@hooks/useThemeStyles';
 import CONST from '@src/CONST';
 
 const propTypes = {
diff --git a/src/pages/iou/ReceiptSelector/index.js b/src/pages/iou/ReceiptSelector/index.js
index 0c9050a1e4d6..cc10ab9858c5 100644
--- a/src/pages/iou/ReceiptSelector/index.js
+++ b/src/pages/iou/ReceiptSelector/index.js
@@ -15,6 +15,7 @@ import Icon from '@components/Icon';
 import * as Expensicons from '@components/Icon/Expensicons';
 import PressableWithFeedback from '@components/Pressable/PressableWithFeedback';
 import useLocalize from '@hooks/useLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import * as Browser from '@libs/Browser';
 import * as FileUtils from '@libs/fileDownload/FileUtils';
@@ -23,7 +24,6 @@ import {iouDefaultProps, iouPropTypes} from '@pages/iou/propTypes';
 import ReceiptDropUI from '@pages/iou/ReceiptDropUI';
 import reportPropTypes from '@pages/reportPropTypes';
 import useTheme from '@styles/theme/useTheme';
-import useThemeStyles from '@styles/useThemeStyles';
 import * as IOU from '@userActions/IOU';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
diff --git a/src/pages/iou/ReceiptSelector/index.native.js b/src/pages/iou/ReceiptSelector/index.native.js
index da82d9c3bfa4..5dcba6eaeb72 100644
--- a/src/pages/iou/ReceiptSelector/index.native.js
+++ b/src/pages/iou/ReceiptSelector/index.native.js
@@ -13,13 +13,13 @@ import Icon from '@components/Icon';
 import * as Expensicons from '@components/Icon/Expensicons';
 import PressableWithFeedback from '@components/Pressable/PressableWithFeedback';
 import useLocalize from '@hooks/useLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
 import * as FileUtils from '@libs/fileDownload/FileUtils';
 import Log from '@libs/Log';
 import Navigation from '@libs/Navigation/Navigation';
 import {iouDefaultProps, iouPropTypes} from '@pages/iou/propTypes';
 import reportPropTypes from '@pages/reportPropTypes';
 import useTheme from '@styles/theme/useTheme';
-import useThemeStyles from '@styles/useThemeStyles';
 import * as IOU from '@userActions/IOU';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
diff --git a/src/pages/iou/SplitBillDetailsPage.js b/src/pages/iou/SplitBillDetailsPage.js
index 46734b223150..2acf68162385 100644
--- a/src/pages/iou/SplitBillDetailsPage.js
+++ b/src/pages/iou/SplitBillDetailsPage.js
@@ -11,6 +11,7 @@ import MoneyRequestHeaderStatusBar from '@components/MoneyRequestHeaderStatusBar
 import ScreenWrapper from '@components/ScreenWrapper';
 import transactionPropTypes from '@components/transactionPropTypes';
 import useLocalize from '@hooks/useLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
 import compose from '@libs/compose';
 import * as OptionsListUtils from '@libs/OptionsListUtils';
 import * as ReportUtils from '@libs/ReportUtils';
@@ -19,7 +20,6 @@ import reportActionPropTypes from '@pages/home/report/reportActionPropTypes';
 import withReportAndReportActionOrNotFound from '@pages/home/report/withReportAndReportActionOrNotFound';
 import personalDetailsPropType from '@pages/personalDetailsPropType';
 import reportPropTypes from '@pages/reportPropTypes';
-import useThemeStyles from '@styles/useThemeStyles';
 import * as IOU from '@userActions/IOU';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
diff --git a/src/pages/iou/WaypointEditor.js b/src/pages/iou/WaypointEditor.js
index 7d5362251715..1d19ddb37c92 100644
--- a/src/pages/iou/WaypointEditor.js
+++ b/src/pages/iou/WaypointEditor.js
@@ -15,11 +15,11 @@ import ScreenWrapper from '@components/ScreenWrapper';
 import transactionPropTypes from '@components/transactionPropTypes';
 import useLocalize from '@hooks/useLocalize';
 import useNetwork from '@hooks/useNetwork';
+import useThemeStyles from '@hooks/useThemeStyles';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import * as ErrorUtils from '@libs/ErrorUtils';
 import Navigation from '@libs/Navigation/Navigation';
 import * as ValidationUtils from '@libs/ValidationUtils';
-import useThemeStyles from '@styles/useThemeStyles';
 import * as Transaction from '@userActions/Transaction';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
diff --git a/src/pages/iou/steps/MoneyRequestAmountForm.js b/src/pages/iou/steps/MoneyRequestAmountForm.js
index 2150af0d1040..f51727e478e6 100644
--- a/src/pages/iou/steps/MoneyRequestAmountForm.js
+++ b/src/pages/iou/steps/MoneyRequestAmountForm.js
@@ -9,13 +9,13 @@ import FormHelpMessage from '@components/FormHelpMessage';
 import refPropTypes from '@components/refPropTypes';
 import TextInputWithCurrencySymbol from '@components/TextInputWithCurrencySymbol';
 import useLocalize from '@hooks/useLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import * as Browser from '@libs/Browser';
 import * as CurrencyUtils from '@libs/CurrencyUtils';
 import * as DeviceCapabilities from '@libs/DeviceCapabilities';
 import getOperatingSystem from '@libs/getOperatingSystem';
 import * as MoneyRequestUtils from '@libs/MoneyRequestUtils';
-import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 
 const propTypes = {
diff --git a/src/pages/iou/steps/MoneyRequestConfirmPage.js b/src/pages/iou/steps/MoneyRequestConfirmPage.js
index d6000e4e48cc..e9314905a274 100644
--- a/src/pages/iou/steps/MoneyRequestConfirmPage.js
+++ b/src/pages/iou/steps/MoneyRequestConfirmPage.js
@@ -13,6 +13,7 @@ import withCurrentUserPersonalDetails, {withCurrentUserPersonalDetailsDefaultPro
 import withLocalize from '@components/withLocalize';
 import useInitialValue from '@hooks/useInitialValue';
 import useNetwork from '@hooks/useNetwork';
+import useThemeStyles from '@hooks/useThemeStyles';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import compose from '@libs/compose';
 import * as FileUtils from '@libs/fileDownload/FileUtils';
@@ -22,7 +23,6 @@ import * as OptionsListUtils from '@libs/OptionsListUtils';
 import * as ReportUtils from '@libs/ReportUtils';
 import {iouDefaultProps, iouPropTypes} from '@pages/iou/propTypes';
 import reportPropTypes from '@pages/reportPropTypes';
-import useThemeStyles from '@styles/useThemeStyles';
 import * as IOU from '@userActions/IOU';
 import * as Policy from '@userActions/Policy';
 import CONST from '@src/CONST';
diff --git a/src/pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsPage.js b/src/pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsPage.js
index d0982e6296db..5ac6dc5adf2a 100644
--- a/src/pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsPage.js
+++ b/src/pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsPage.js
@@ -10,13 +10,13 @@ import ScreenWrapper from '@components/ScreenWrapper';
 import transactionPropTypes from '@components/transactionPropTypes';
 import useInitialValue from '@hooks/useInitialValue';
 import useLocalize from '@hooks/useLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
 import compose from '@libs/compose';
 import * as DeviceCapabilities from '@libs/DeviceCapabilities';
 import * as MoneyRequestUtils from '@libs/MoneyRequestUtils';
 import Navigation from '@libs/Navigation/Navigation';
 import * as TransactionUtils from '@libs/TransactionUtils';
 import {iouDefaultProps, iouPropTypes} from '@pages/iou/propTypes';
-import useThemeStyles from '@styles/useThemeStyles';
 import * as IOU from '@userActions/IOU';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
diff --git a/src/pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsSelector.js b/src/pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsSelector.js
index c08c8c0a21b8..dec4d347c2f0 100755
--- a/src/pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsSelector.js
+++ b/src/pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsSelector.js
@@ -10,6 +10,7 @@ import OptionsSelector from '@components/OptionsSelector';
 import refPropTypes from '@components/refPropTypes';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
 import useNetwork from '@hooks/useNetwork';
+import useThemeStyles from '@hooks/useThemeStyles';
 import * as Report from '@libs/actions/Report';
 import * as Browser from '@libs/Browser';
 import compose from '@libs/compose';
@@ -17,7 +18,6 @@ import * as OptionsListUtils from '@libs/OptionsListUtils';
 import * as ReportUtils from '@libs/ReportUtils';
 import personalDetailsPropType from '@pages/personalDetailsPropType';
 import reportPropTypes from '@pages/reportPropTypes';
-import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 
diff --git a/src/pages/iou/steps/NewRequestAmountPage.js b/src/pages/iou/steps/NewRequestAmountPage.js
index 1140bbbcf5b2..c6ece460cb6f 100644
--- a/src/pages/iou/steps/NewRequestAmountPage.js
+++ b/src/pages/iou/steps/NewRequestAmountPage.js
@@ -9,13 +9,13 @@ import FullPageNotFoundView from '@components/BlockingViews/FullPageNotFoundView
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import ScreenWrapper from '@components/ScreenWrapper';
 import useLocalize from '@hooks/useLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
 import * as CurrencyUtils from '@libs/CurrencyUtils';
 import * as IOUUtils from '@libs/IOUUtils';
 import * as MoneyRequestUtils from '@libs/MoneyRequestUtils';
 import Navigation from '@libs/Navigation/Navigation';
 import {iouDefaultProps, iouPropTypes} from '@pages/iou/propTypes';
 import reportPropTypes from '@pages/reportPropTypes';
-import useThemeStyles from '@styles/useThemeStyles';
 import * as IOU from '@userActions/IOU';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
diff --git a/src/pages/settings/AboutPage/AboutPage.js b/src/pages/settings/AboutPage/AboutPage.js
index c192abf84e43..16ae590cf86b 100644
--- a/src/pages/settings/AboutPage/AboutPage.js
+++ b/src/pages/settings/AboutPage/AboutPage.js
@@ -11,13 +11,13 @@ import Text from '@components/Text';
 import TextLink from '@components/TextLink';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
 import withWindowDimensions, {windowDimensionsPropTypes} from '@components/withWindowDimensions';
+import useThemeStyles from '@hooks/useThemeStyles';
 import useWaitForNavigation from '@hooks/useWaitForNavigation';
 import compose from '@libs/compose';
 import * as Environment from '@libs/Environment/Environment';
 import Navigation from '@libs/Navigation/Navigation';
 import {CONTEXT_MENU_TYPES} from '@pages/home/report/ContextMenu/ContextMenuActions';
 import * as ReportActionContextMenu from '@pages/home/report/ContextMenu/ReportActionContextMenu';
-import useThemeStyles from '@styles/useThemeStyles';
 import * as Link from '@userActions/Link';
 import * as Report from '@userActions/Report';
 import CONST from '@src/CONST';
diff --git a/src/pages/settings/AppDownloadLinks.js b/src/pages/settings/AppDownloadLinks.js
index 182a25a121b5..471a38b039b2 100644
--- a/src/pages/settings/AppDownloadLinks.js
+++ b/src/pages/settings/AppDownloadLinks.js
@@ -7,11 +7,11 @@ import MenuItem from '@components/MenuItem';
 import ScreenWrapper from '@components/ScreenWrapper';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
 import withWindowDimensions, {windowDimensionsPropTypes} from '@components/withWindowDimensions';
+import useThemeStyles from '@hooks/useThemeStyles';
 import compose from '@libs/compose';
 import Navigation from '@libs/Navigation/Navigation';
 import {CONTEXT_MENU_TYPES} from '@pages/home/report/ContextMenu/ContextMenuActions';
 import * as ReportActionContextMenu from '@pages/home/report/ContextMenu/ReportActionContextMenu';
-import useThemeStyles from '@styles/useThemeStyles';
 import * as Link from '@userActions/Link';
 import CONST from '@src/CONST';
 import ROUTES from '@src/ROUTES';
diff --git a/src/pages/settings/InitialSettingsPage.js b/src/pages/settings/InitialSettingsPage.js
index dfcefc1a6441..99e756fa692f 100755
--- a/src/pages/settings/InitialSettingsPage.js
+++ b/src/pages/settings/InitialSettingsPage.js
@@ -21,6 +21,7 @@ import withCurrentUserPersonalDetails, {withCurrentUserPersonalDetailsDefaultPro
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
 import useLocalize from '@hooks/useLocalize';
 import useSingleExecution from '@hooks/useSingleExecution';
+import useThemeStyles from '@hooks/useThemeStyles';
 import useWaitForNavigation from '@hooks/useWaitForNavigation';
 import compose from '@libs/compose';
 import * as CurrencyUtils from '@libs/CurrencyUtils';
@@ -34,7 +35,6 @@ import * as ReportActionContextMenu from '@pages/home/report/ContextMenu/ReportA
 import policyMemberPropType from '@pages/policyMemberPropType';
 import * as ReimbursementAccountProps from '@pages/ReimbursementAccount/reimbursementAccountPropTypes';
 import useTheme from '@styles/theme/useTheme';
-import useThemeStyles from '@styles/useThemeStyles';
 import * as Link from '@userActions/Link';
 import * as PaymentMethods from '@userActions/PaymentMethods';
 import * as Session from '@userActions/Session';
diff --git a/src/pages/settings/Preferences/PreferencesPage.js b/src/pages/settings/Preferences/PreferencesPage.js
index bcbc95ff33b5..cb5af6f913e5 100755
--- a/src/pages/settings/Preferences/PreferencesPage.js
+++ b/src/pages/settings/Preferences/PreferencesPage.js
@@ -11,9 +11,9 @@ import TestToolMenu from '@components/TestToolMenu';
 import Text from '@components/Text';
 import useEnvironment from '@hooks/useEnvironment';
 import useLocalize from '@hooks/useLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
 import Navigation from '@libs/Navigation/Navigation';
 import useTheme from '@styles/theme/useTheme';
-import useThemeStyles from '@styles/useThemeStyles';
 import * as User from '@userActions/User';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
diff --git a/src/pages/settings/Preferences/PriorityModePage.js b/src/pages/settings/Preferences/PriorityModePage.js
index 0778394d2b28..2a9d9c5b0d9e 100644
--- a/src/pages/settings/Preferences/PriorityModePage.js
+++ b/src/pages/settings/Preferences/PriorityModePage.js
@@ -7,8 +7,8 @@ import ScreenWrapper from '@components/ScreenWrapper';
 import SelectionList from '@components/SelectionList';
 import Text from '@components/Text';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
 import Navigation from '@libs/Navigation/Navigation';
-import useThemeStyles from '@styles/useThemeStyles';
 import * as User from '@userActions/User';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
diff --git a/src/pages/settings/Preferences/ThemePage.js b/src/pages/settings/Preferences/ThemePage.js
index f4acd10a7230..529759df6611 100644
--- a/src/pages/settings/Preferences/ThemePage.js
+++ b/src/pages/settings/Preferences/ThemePage.js
@@ -7,9 +7,9 @@ import ScreenWrapper from '@components/ScreenWrapper';
 import SelectionList from '@components/SelectionList';
 import Text from '@components/Text';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
 import compose from '@libs/compose';
 import Navigation from '@libs/Navigation/Navigation';
-import useThemeStyles from '@styles/useThemeStyles';
 import * as User from '@userActions/User';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
diff --git a/src/pages/settings/Profile/Contacts/ContactMethodsPage.js b/src/pages/settings/Profile/Contacts/ContactMethodsPage.js
index a17dd8f2c17e..34399daf55e3 100644
--- a/src/pages/settings/Profile/Contacts/ContactMethodsPage.js
+++ b/src/pages/settings/Profile/Contacts/ContactMethodsPage.js
@@ -14,9 +14,9 @@ import OfflineWithFeedback from '@components/OfflineWithFeedback';
 import ScreenWrapper from '@components/ScreenWrapper';
 import Text from '@components/Text';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
 import compose from '@libs/compose';
 import Navigation from '@libs/Navigation/Navigation';
-import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
diff --git a/src/pages/settings/Profile/Contacts/NewContactMethodPage.js b/src/pages/settings/Profile/Contacts/NewContactMethodPage.js
index 70d137d2a5fd..3edd6da36e4f 100644
--- a/src/pages/settings/Profile/Contacts/NewContactMethodPage.js
+++ b/src/pages/settings/Profile/Contacts/NewContactMethodPage.js
@@ -12,11 +12,11 @@ import ScreenWrapper from '@components/ScreenWrapper';
 import Text from '@components/Text';
 import TextInput from '@components/TextInput';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
 import compose from '@libs/compose';
 import * as ErrorUtils from '@libs/ErrorUtils';
 import * as LoginUtils from '@libs/LoginUtils';
 import Navigation from '@libs/Navigation/Navigation';
-import useThemeStyles from '@styles/useThemeStyles';
 import * as User from '@userActions/User';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
diff --git a/src/pages/settings/Profile/Contacts/ValidateCodeForm/BaseValidateCodeForm.js b/src/pages/settings/Profile/Contacts/ValidateCodeForm/BaseValidateCodeForm.js
index 4fd4b49423d7..5b51ca51fa5f 100644
--- a/src/pages/settings/Profile/Contacts/ValidateCodeForm/BaseValidateCodeForm.js
+++ b/src/pages/settings/Profile/Contacts/ValidateCodeForm/BaseValidateCodeForm.js
@@ -14,11 +14,11 @@ import PressableWithFeedback from '@components/Pressable/PressableWithFeedback';
 import Text from '@components/Text';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
 import useStyleUtils from '@hooks/useStyleUtils';
+import useThemeStyles from '@hooks/useThemeStyles';
 import compose from '@libs/compose';
 import * as ErrorUtils from '@libs/ErrorUtils';
 import * as ValidationUtils from '@libs/ValidationUtils';
 import useTheme from '@styles/theme/useTheme';
-import useThemeStyles from '@styles/useThemeStyles';
 import * as Session from '@userActions/Session';
 import * as User from '@userActions/User';
 import CONST from '@src/CONST';
diff --git a/src/pages/settings/Profile/CustomStatus/StatusPage.js b/src/pages/settings/Profile/CustomStatus/StatusPage.js
index 52f616cb162d..121cc33fdcdf 100644
--- a/src/pages/settings/Profile/CustomStatus/StatusPage.js
+++ b/src/pages/settings/Profile/CustomStatus/StatusPage.js
@@ -11,10 +11,10 @@ import MenuItemWithTopDescription from '@components/MenuItemWithTopDescription';
 import Text from '@components/Text';
 import withCurrentUserPersonalDetails, {withCurrentUserPersonalDetailsPropTypes} from '@components/withCurrentUserPersonalDetails';
 import useLocalize from '@hooks/useLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
 import compose from '@libs/compose';
 import Navigation from '@libs/Navigation/Navigation';
 import useTheme from '@styles/theme/useTheme';
-import useThemeStyles from '@styles/useThemeStyles';
 import * as User from '@userActions/User';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
diff --git a/src/pages/settings/Profile/CustomStatus/StatusSetPage.js b/src/pages/settings/Profile/CustomStatus/StatusSetPage.js
index 6c7a2d896aa9..7126cd3d465a 100644
--- a/src/pages/settings/Profile/CustomStatus/StatusSetPage.js
+++ b/src/pages/settings/Profile/CustomStatus/StatusSetPage.js
@@ -11,9 +11,9 @@ import ScreenWrapper from '@components/ScreenWrapper';
 import TextInput from '@components/TextInput';
 import withCurrentUserPersonalDetails, {withCurrentUserPersonalDetailsPropTypes} from '@components/withCurrentUserPersonalDetails';
 import useLocalize from '@hooks/useLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
 import compose from '@libs/compose';
 import Navigation from '@libs/Navigation/Navigation';
-import useThemeStyles from '@styles/useThemeStyles';
 import * as User from '@userActions/User';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
diff --git a/src/pages/settings/Profile/DisplayNamePage.js b/src/pages/settings/Profile/DisplayNamePage.js
index 85f630a41212..b49ab13d424f 100644
--- a/src/pages/settings/Profile/DisplayNamePage.js
+++ b/src/pages/settings/Profile/DisplayNamePage.js
@@ -12,11 +12,11 @@ import Text from '@components/Text';
 import TextInput from '@components/TextInput';
 import withCurrentUserPersonalDetails, {withCurrentUserPersonalDetailsDefaultProps, withCurrentUserPersonalDetailsPropTypes} from '@components/withCurrentUserPersonalDetails';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
 import compose from '@libs/compose';
 import * as ErrorUtils from '@libs/ErrorUtils';
 import Navigation from '@libs/Navigation/Navigation';
 import * as ValidationUtils from '@libs/ValidationUtils';
-import useThemeStyles from '@styles/useThemeStyles';
 import * as PersonalDetails from '@userActions/PersonalDetails';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
diff --git a/src/pages/settings/Profile/LoungeAccessPage.js b/src/pages/settings/Profile/LoungeAccessPage.js
index f6b6968372d1..60cb0896a4eb 100644
--- a/src/pages/settings/Profile/LoungeAccessPage.js
+++ b/src/pages/settings/Profile/LoungeAccessPage.js
@@ -5,11 +5,11 @@ import LottieAnimations from '@components/LottieAnimations';
 import Text from '@components/Text';
 import withCurrentUserPersonalDetails, {withCurrentUserPersonalDetailsDefaultProps, withCurrentUserPersonalDetailsPropTypes} from '@components/withCurrentUserPersonalDetails';
 import useLocalize from '@hooks/useLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
 import compose from '@libs/compose';
 import Navigation from '@libs/Navigation/Navigation';
 import NotFoundPage from '@pages/ErrorPage/NotFoundPage';
 import userPropTypes from '@pages/settings/userPropTypes';
-import useThemeStyles from '@styles/useThemeStyles';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
 
diff --git a/src/pages/settings/Profile/PersonalDetails/AddressPage.js b/src/pages/settings/Profile/PersonalDetails/AddressPage.js
index fa22a3b22f9e..6c883e7fa9d8 100644
--- a/src/pages/settings/Profile/PersonalDetails/AddressPage.js
+++ b/src/pages/settings/Profile/PersonalDetails/AddressPage.js
@@ -8,8 +8,8 @@ import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import ScreenWrapper from '@components/ScreenWrapper';
 import useLocalize from '@hooks/useLocalize';
 import usePrivatePersonalDetails from '@hooks/usePrivatePersonalDetails';
+import useThemeStyles from '@hooks/useThemeStyles';
 import Navigation from '@libs/Navigation/Navigation';
-import useThemeStyles from '@styles/useThemeStyles';
 import * as PersonalDetails from '@userActions/PersonalDetails';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
diff --git a/src/pages/settings/Profile/PersonalDetails/DateOfBirthPage.js b/src/pages/settings/Profile/PersonalDetails/DateOfBirthPage.js
index 10a6d8807afc..393e95cb35fe 100644
--- a/src/pages/settings/Profile/PersonalDetails/DateOfBirthPage.js
+++ b/src/pages/settings/Profile/PersonalDetails/DateOfBirthPage.js
@@ -10,10 +10,10 @@ import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import ScreenWrapper from '@components/ScreenWrapper';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
 import usePrivatePersonalDetails from '@hooks/usePrivatePersonalDetails';
+import useThemeStyles from '@hooks/useThemeStyles';
 import compose from '@libs/compose';
 import Navigation from '@libs/Navigation/Navigation';
 import * as ValidationUtils from '@libs/ValidationUtils';
-import useThemeStyles from '@styles/useThemeStyles';
 import * as PersonalDetails from '@userActions/PersonalDetails';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
diff --git a/src/pages/settings/Profile/PersonalDetails/LegalNamePage.js b/src/pages/settings/Profile/PersonalDetails/LegalNamePage.js
index c6ad9f083114..c6e737cf9f55 100644
--- a/src/pages/settings/Profile/PersonalDetails/LegalNamePage.js
+++ b/src/pages/settings/Profile/PersonalDetails/LegalNamePage.js
@@ -12,11 +12,11 @@ import ScreenWrapper from '@components/ScreenWrapper';
 import TextInput from '@components/TextInput';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
 import usePrivatePersonalDetails from '@hooks/usePrivatePersonalDetails';
+import useThemeStyles from '@hooks/useThemeStyles';
 import compose from '@libs/compose';
 import * as ErrorUtils from '@libs/ErrorUtils';
 import Navigation from '@libs/Navigation/Navigation';
 import * as ValidationUtils from '@libs/ValidationUtils';
-import useThemeStyles from '@styles/useThemeStyles';
 import * as PersonalDetails from '@userActions/PersonalDetails';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
diff --git a/src/pages/settings/Profile/PersonalDetails/PersonalDetailsInitialPage.js b/src/pages/settings/Profile/PersonalDetails/PersonalDetailsInitialPage.js
index 4fc2bbb17428..cf6887b7e04c 100644
--- a/src/pages/settings/Profile/PersonalDetails/PersonalDetailsInitialPage.js
+++ b/src/pages/settings/Profile/PersonalDetails/PersonalDetailsInitialPage.js
@@ -11,10 +11,10 @@ import ScreenWrapper from '@components/ScreenWrapper';
 import Text from '@components/Text';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
 import usePrivatePersonalDetails from '@hooks/usePrivatePersonalDetails';
+import useThemeStyles from '@hooks/useThemeStyles';
 import compose from '@libs/compose';
 import Navigation from '@libs/Navigation/Navigation';
 import * as PersonalDetailsUtils from '@libs/PersonalDetailsUtils';
-import useThemeStyles from '@styles/useThemeStyles';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
 
diff --git a/src/pages/settings/Profile/ProfilePage.js b/src/pages/settings/Profile/ProfilePage.js
index fc6c38f96335..89dfa4f0e419 100755
--- a/src/pages/settings/Profile/ProfilePage.js
+++ b/src/pages/settings/Profile/ProfilePage.js
@@ -13,11 +13,11 @@ import ScreenWrapper from '@components/ScreenWrapper';
 import withCurrentUserPersonalDetails, {withCurrentUserPersonalDetailsDefaultProps, withCurrentUserPersonalDetailsPropTypes} from '@components/withCurrentUserPersonalDetails';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
 import withWindowDimensions, {windowDimensionsPropTypes} from '@components/withWindowDimensions';
+import useThemeStyles from '@hooks/useThemeStyles';
 import compose from '@libs/compose';
 import Navigation from '@libs/Navigation/Navigation';
 import * as UserUtils from '@libs/UserUtils';
 import userPropTypes from '@pages/settings/userPropTypes';
-import useThemeStyles from '@styles/useThemeStyles';
 import * as App from '@userActions/App';
 import * as PersonalDetails from '@userActions/PersonalDetails';
 import CONST from '@src/CONST';
diff --git a/src/pages/settings/Profile/PronounsPage.js b/src/pages/settings/Profile/PronounsPage.js
index 40f2562724ef..20022f22523a 100644
--- a/src/pages/settings/Profile/PronounsPage.js
+++ b/src/pages/settings/Profile/PronounsPage.js
@@ -10,9 +10,9 @@ import SelectionList from '@components/SelectionList';
 import Text from '@components/Text';
 import withCurrentUserPersonalDetails, {withCurrentUserPersonalDetailsDefaultProps, withCurrentUserPersonalDetailsPropTypes} from '@components/withCurrentUserPersonalDetails';
 import useLocalize from '@hooks/useLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
 import compose from '@libs/compose';
 import Navigation from '@libs/Navigation/Navigation';
-import useThemeStyles from '@styles/useThemeStyles';
 import * as PersonalDetails from '@userActions/PersonalDetails';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
diff --git a/src/pages/settings/Profile/TimezoneInitialPage.js b/src/pages/settings/Profile/TimezoneInitialPage.js
index 463b20029745..bf86e8a5a077 100644
--- a/src/pages/settings/Profile/TimezoneInitialPage.js
+++ b/src/pages/settings/Profile/TimezoneInitialPage.js
@@ -8,9 +8,9 @@ import Switch from '@components/Switch';
 import Text from '@components/Text';
 import withCurrentUserPersonalDetails, {withCurrentUserPersonalDetailsDefaultProps, withCurrentUserPersonalDetailsPropTypes} from '@components/withCurrentUserPersonalDetails';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
 import compose from '@libs/compose';
 import Navigation from '@libs/Navigation/Navigation';
-import useThemeStyles from '@styles/useThemeStyles';
 import * as PersonalDetails from '@userActions/PersonalDetails';
 import CONST from '@src/CONST';
 import ROUTES from '@src/ROUTES';
diff --git a/src/pages/settings/Report/ReportSettingsPage.js b/src/pages/settings/Report/ReportSettingsPage.js
index 0676f0875932..c7cfd9c7850d 100644
--- a/src/pages/settings/Report/ReportSettingsPage.js
+++ b/src/pages/settings/Report/ReportSettingsPage.js
@@ -14,13 +14,13 @@ import OfflineWithFeedback from '@components/OfflineWithFeedback';
 import ScreenWrapper from '@components/ScreenWrapper';
 import Text from '@components/Text';
 import useLocalize from '@hooks/useLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
 import compose from '@libs/compose';
 import {getGroupChatName} from '@libs/GroupChatUtils';
 import Navigation from '@libs/Navigation/Navigation';
 import * as ReportUtils from '@libs/ReportUtils';
 import withReportOrNotFound from '@pages/home/report/withReportOrNotFound';
 import reportPropTypes from '@pages/reportPropTypes';
-import useThemeStyles from '@styles/useThemeStyles';
 import * as Report from '@userActions/Report';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
diff --git a/src/pages/settings/Report/RoomNamePage.js b/src/pages/settings/Report/RoomNamePage.js
index 7916043c7e20..fa2bee325e8a 100644
--- a/src/pages/settings/Report/RoomNamePage.js
+++ b/src/pages/settings/Report/RoomNamePage.js
@@ -9,6 +9,7 @@ import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import RoomNameInput from '@components/RoomNameInput';
 import ScreenWrapper from '@components/ScreenWrapper';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
 import compose from '@libs/compose';
 import * as ErrorUtils from '@libs/ErrorUtils';
 import Navigation from '@libs/Navigation/Navigation';
@@ -16,7 +17,6 @@ import * as ReportUtils from '@libs/ReportUtils';
 import * as ValidationUtils from '@libs/ValidationUtils';
 import withReportOrNotFound from '@pages/home/report/withReportOrNotFound';
 import reportPropTypes from '@pages/reportPropTypes';
-import useThemeStyles from '@styles/useThemeStyles';
 import * as Report from '@userActions/Report';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
diff --git a/src/pages/settings/Security/CloseAccountPage.js b/src/pages/settings/Security/CloseAccountPage.js
index 8c1b851ee176..ea7c368ee933 100644
--- a/src/pages/settings/Security/CloseAccountPage.js
+++ b/src/pages/settings/Security/CloseAccountPage.js
@@ -12,10 +12,10 @@ import Text from '@components/Text';
 import TextInput from '@components/TextInput';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
 import withWindowDimensions, {windowDimensionsPropTypes} from '@components/withWindowDimensions';
+import useThemeStyles from '@hooks/useThemeStyles';
 import compose from '@libs/compose';
 import Navigation from '@libs/Navigation/Navigation';
 import * as ValidationUtils from '@libs/ValidationUtils';
-import useThemeStyles from '@styles/useThemeStyles';
 import * as CloseAccount from '@userActions/CloseAccount';
 import * as User from '@userActions/User';
 import CONST from '@src/CONST';
diff --git a/src/pages/settings/Security/SecuritySettingsPage.js b/src/pages/settings/Security/SecuritySettingsPage.js
index 759f4cccf697..81afbb068ab8 100644
--- a/src/pages/settings/Security/SecuritySettingsPage.js
+++ b/src/pages/settings/Security/SecuritySettingsPage.js
@@ -8,11 +8,11 @@ import IllustratedHeaderPageLayout from '@components/IllustratedHeaderPageLayout
 import LottieAnimations from '@components/LottieAnimations';
 import MenuItemList from '@components/MenuItemList';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
 import useWaitForNavigation from '@hooks/useWaitForNavigation';
 import compose from '@libs/compose';
 import Navigation from '@libs/Navigation/Navigation';
 import useTheme from '@styles/theme/useTheme';
-import useThemeStyles from '@styles/useThemeStyles';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
 import SCREENS from '@src/SCREENS';
diff --git a/src/pages/settings/Security/TwoFactorAuth/StepWrapper/StepWrapper.js b/src/pages/settings/Security/TwoFactorAuth/StepWrapper/StepWrapper.js
index 69d662ba6e81..ba899a0e2d20 100644
--- a/src/pages/settings/Security/TwoFactorAuth/StepWrapper/StepWrapper.js
+++ b/src/pages/settings/Security/TwoFactorAuth/StepWrapper/StepWrapper.js
@@ -4,7 +4,7 @@ import useAnimatedStepContext from '@components/AnimatedStep/useAnimatedStepCont
 import FullPageOfflineBlockingView from '@components/BlockingViews/FullPageOfflineBlockingView';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import ScreenWrapper from '@components/ScreenWrapper';
-import useThemeStyles from '@styles/useThemeStyles';
+import useThemeStyles from '@hooks/useThemeStyles';
 import * as TwoFactorAuthActions from '@userActions/TwoFactorAuthActions';
 import StepWrapperPropTypes from './StepWrapperPropTypes';
 
diff --git a/src/pages/settings/Security/TwoFactorAuth/Steps/CodesStep.js b/src/pages/settings/Security/TwoFactorAuth/Steps/CodesStep.js
index 9c6024f5f472..0b633138c765 100644
--- a/src/pages/settings/Security/TwoFactorAuth/Steps/CodesStep.js
+++ b/src/pages/settings/Security/TwoFactorAuth/Steps/CodesStep.js
@@ -11,6 +11,7 @@ import PressableWithDelayToggle from '@components/Pressable/PressableWithDelayTo
 import Section from '@components/Section';
 import Text from '@components/Text';
 import useLocalize from '@hooks/useLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import Clipboard from '@libs/Clipboard';
 import localFileDownload from '@libs/localFileDownload';
@@ -18,7 +19,6 @@ import StepWrapper from '@pages/settings/Security/TwoFactorAuth/StepWrapper/Step
 import useTwoFactorAuthContext from '@pages/settings/Security/TwoFactorAuth/TwoFactorAuthContext/useTwoFactorAuth';
 import {defaultAccount, TwoFactorAuthPropTypes} from '@pages/settings/Security/TwoFactorAuth/TwoFactorAuthPropTypes';
 import useTheme from '@styles/theme/useTheme';
-import useThemeStyles from '@styles/useThemeStyles';
 import * as Session from '@userActions/Session';
 import * as TwoFactorAuthActions from '@userActions/TwoFactorAuthActions';
 import CONST from '@src/CONST';
diff --git a/src/pages/settings/Security/TwoFactorAuth/Steps/DisabledStep.js b/src/pages/settings/Security/TwoFactorAuth/Steps/DisabledStep.js
index 9de25ecb8f4b..db64a805d088 100644
--- a/src/pages/settings/Security/TwoFactorAuth/Steps/DisabledStep.js
+++ b/src/pages/settings/Security/TwoFactorAuth/Steps/DisabledStep.js
@@ -4,8 +4,8 @@ import Button from '@components/Button';
 import FixedFooter from '@components/FixedFooter';
 import * as Illustrations from '@components/Icon/Illustrations';
 import useLocalize from '@hooks/useLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
 import StepWrapper from '@pages/settings/Security/TwoFactorAuth/StepWrapper/StepWrapper';
-import useThemeStyles from '@styles/useThemeStyles';
 import variables from '@styles/variables';
 import * as TwoFactorAuthActions from '@userActions/TwoFactorAuthActions';
 
diff --git a/src/pages/settings/Security/TwoFactorAuth/Steps/EnabledStep.js b/src/pages/settings/Security/TwoFactorAuth/Steps/EnabledStep.js
index 274ff5e09377..8d6648edb4e3 100644
--- a/src/pages/settings/Security/TwoFactorAuth/Steps/EnabledStep.js
+++ b/src/pages/settings/Security/TwoFactorAuth/Steps/EnabledStep.js
@@ -5,10 +5,10 @@ import * as Expensicons from '@components/Icon/Expensicons';
 import * as Illustrations from '@components/Icon/Illustrations';
 import Section from '@components/Section';
 import useLocalize from '@hooks/useLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
 import StepWrapper from '@pages/settings/Security/TwoFactorAuth/StepWrapper/StepWrapper';
 import useTwoFactorAuthContext from '@pages/settings/Security/TwoFactorAuth/TwoFactorAuthContext/useTwoFactorAuth';
 import useTheme from '@styles/theme/useTheme';
-import useThemeStyles from '@styles/useThemeStyles';
 import * as Session from '@userActions/Session';
 import CONST from '@src/CONST';
 
diff --git a/src/pages/settings/Security/TwoFactorAuth/Steps/VerifyStep.js b/src/pages/settings/Security/TwoFactorAuth/Steps/VerifyStep.js
index 8a2b4c6fdf6c..e5f809204bd6 100644
--- a/src/pages/settings/Security/TwoFactorAuth/Steps/VerifyStep.js
+++ b/src/pages/settings/Security/TwoFactorAuth/Steps/VerifyStep.js
@@ -11,12 +11,12 @@ import QRCode from '@components/QRCode';
 import Text from '@components/Text';
 import TextLink from '@components/TextLink';
 import useLocalize from '@hooks/useLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
 import Clipboard from '@libs/Clipboard';
 import StepWrapper from '@pages/settings/Security/TwoFactorAuth/StepWrapper/StepWrapper';
 import useTwoFactorAuthContext from '@pages/settings/Security/TwoFactorAuth/TwoFactorAuthContext/useTwoFactorAuth';
 import TwoFactorAuthForm from '@pages/settings/Security/TwoFactorAuth/TwoFactorAuthForm';
 import {defaultAccount, TwoFactorAuthPropTypes} from '@pages/settings/Security/TwoFactorAuth/TwoFactorAuthPropTypes';
-import useThemeStyles from '@styles/useThemeStyles';
 import * as Session from '@userActions/Session';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
diff --git a/src/pages/settings/Wallet/ActivatePhysicalCardPage.js b/src/pages/settings/Wallet/ActivatePhysicalCardPage.js
index f616dba20be1..32090ab0428a 100644
--- a/src/pages/settings/Wallet/ActivatePhysicalCardPage.js
+++ b/src/pages/settings/Wallet/ActivatePhysicalCardPage.js
@@ -12,6 +12,7 @@ import MagicCodeInput from '@components/MagicCodeInput';
 import Text from '@components/Text';
 import useLocalize from '@hooks/useLocalize';
 import useNetwork from '@hooks/useNetwork';
+import useThemeStyles from '@hooks/useThemeStyles';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import * as CardUtils from '@libs/CardUtils';
 import * as DeviceCapabilities from '@libs/DeviceCapabilities';
@@ -19,7 +20,6 @@ import * as ErrorUtils from '@libs/ErrorUtils';
 import Navigation from '@libs/Navigation/Navigation';
 import NotFoundPage from '@pages/ErrorPage/NotFoundPage';
 import useTheme from '@styles/theme/useTheme';
-import useThemeStyles from '@styles/useThemeStyles';
 import * as CardSettings from '@userActions/Card';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
diff --git a/src/pages/settings/Wallet/AddDebitCardPage.js b/src/pages/settings/Wallet/AddDebitCardPage.js
index 872052067213..b650016cd6be 100644
--- a/src/pages/settings/Wallet/AddDebitCardPage.js
+++ b/src/pages/settings/Wallet/AddDebitCardPage.js
@@ -14,9 +14,9 @@ import TextInput from '@components/TextInput';
 import TextLink from '@components/TextLink';
 import useLocalize from '@hooks/useLocalize';
 import usePrevious from '@hooks/usePrevious';
+import useThemeStyles from '@hooks/useThemeStyles';
 import Navigation from '@libs/Navigation/Navigation';
 import * as ValidationUtils from '@libs/ValidationUtils';
-import useThemeStyles from '@styles/useThemeStyles';
 import * as PaymentMethods from '@userActions/PaymentMethods';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
diff --git a/src/pages/settings/Wallet/Card/BaseGetPhysicalCard.js b/src/pages/settings/Wallet/Card/BaseGetPhysicalCard.js
index 4176393e92dd..1d1ce906189b 100644
--- a/src/pages/settings/Wallet/Card/BaseGetPhysicalCard.js
+++ b/src/pages/settings/Wallet/Card/BaseGetPhysicalCard.js
@@ -6,6 +6,7 @@ import _ from 'underscore';
 import Form from '@components/Form';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import ScreenWrapper from '@components/ScreenWrapper';
+import useThemeStyles from '@hooks/useThemeStyles';
 import * as FormActions from '@libs/actions/FormActions';
 import * as Wallet from '@libs/actions/Wallet';
 import * as CardUtils from '@libs/CardUtils';
@@ -13,7 +14,6 @@ import FormUtils from '@libs/FormUtils';
 import * as GetPhysicalCardUtils from '@libs/GetPhysicalCardUtils';
 import Navigation from '@libs/Navigation/Navigation';
 import assignedCardPropTypes from '@pages/settings/Wallet/assignedCardPropTypes';
-import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
diff --git a/src/pages/settings/Wallet/Card/GetPhysicalCardConfirm.js b/src/pages/settings/Wallet/Card/GetPhysicalCardConfirm.js
index 0ae83cd28b5c..9f364c32c075 100644
--- a/src/pages/settings/Wallet/Card/GetPhysicalCardConfirm.js
+++ b/src/pages/settings/Wallet/Card/GetPhysicalCardConfirm.js
@@ -5,10 +5,10 @@ import * as Expensicons from '@components/Icon/Expensicons';
 import MenuItemWithTopDescription from '@components/MenuItemWithTopDescription';
 import Text from '@components/Text';
 import useLocalize from '@hooks/useLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
 import FormUtils from '@libs/FormUtils';
 import Navigation from '@libs/Navigation/Navigation';
 import * as PersonalDetailsUtils from '@libs/PersonalDetailsUtils';
-import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
diff --git a/src/pages/settings/Wallet/Card/GetPhysicalCardName.js b/src/pages/settings/Wallet/Card/GetPhysicalCardName.js
index 3c87bed424ba..0040dac8b75f 100644
--- a/src/pages/settings/Wallet/Card/GetPhysicalCardName.js
+++ b/src/pages/settings/Wallet/Card/GetPhysicalCardName.js
@@ -4,9 +4,9 @@ import {withOnyx} from 'react-native-onyx';
 import _ from 'underscore';
 import TextInput from '@components/TextInput';
 import useLocalize from '@hooks/useLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
 import FormUtils from '@libs/FormUtils';
 import * as ValidationUtils from '@libs/ValidationUtils';
-import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
diff --git a/src/pages/settings/Wallet/Card/GetPhysicalCardPhone.js b/src/pages/settings/Wallet/Card/GetPhysicalCardPhone.js
index 82b684332491..3d4c7f4ac6fb 100644
--- a/src/pages/settings/Wallet/Card/GetPhysicalCardPhone.js
+++ b/src/pages/settings/Wallet/Card/GetPhysicalCardPhone.js
@@ -6,8 +6,8 @@ import {withOnyx} from 'react-native-onyx';
 import _ from 'underscore';
 import TextInput from '@components/TextInput';
 import useLocalize from '@hooks/useLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
 import FormUtils from '@libs/FormUtils';
-import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
diff --git a/src/pages/settings/Wallet/ChooseTransferAccountPage.js b/src/pages/settings/Wallet/ChooseTransferAccountPage.js
index 2ffbf12f52c2..815d2e883cf0 100644
--- a/src/pages/settings/Wallet/ChooseTransferAccountPage.js
+++ b/src/pages/settings/Wallet/ChooseTransferAccountPage.js
@@ -6,9 +6,9 @@ import * as Expensicons from '@components/Icon/Expensicons';
 import MenuItem from '@components/MenuItem';
 import ScreenWrapper from '@components/ScreenWrapper';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
 import compose from '@libs/compose';
 import Navigation from '@libs/Navigation/Navigation';
-import useThemeStyles from '@styles/useThemeStyles';
 import * as BankAccounts from '@userActions/BankAccounts';
 import * as PaymentMethods from '@userActions/PaymentMethods';
 import CONST from '@src/CONST';
diff --git a/src/pages/settings/Wallet/DangerCardSection.js b/src/pages/settings/Wallet/DangerCardSection.js
index 91add21b75ea..ea1cc05db019 100644
--- a/src/pages/settings/Wallet/DangerCardSection.js
+++ b/src/pages/settings/Wallet/DangerCardSection.js
@@ -3,7 +3,7 @@ import React from 'react';
 import {View} from 'react-native';
 import * as Illustrations from '@components/Icon/Illustrations';
 import Text from '@components/Text';
-import useThemeStyles from '@styles/useThemeStyles';
+import useThemeStyles from '@hooks/useThemeStyles';
 
 const propTypes = {
     title: PropTypes.string.isRequired,
diff --git a/src/pages/settings/Wallet/ExpensifyCardPage.js b/src/pages/settings/Wallet/ExpensifyCardPage.js
index 0aa2e1516e8f..293503468007 100644
--- a/src/pages/settings/Wallet/ExpensifyCardPage.js
+++ b/src/pages/settings/Wallet/ExpensifyCardPage.js
@@ -13,6 +13,7 @@ import MenuItemWithTopDescription from '@components/MenuItemWithTopDescription';
 import ScreenWrapper from '@components/ScreenWrapper';
 import useLocalize from '@hooks/useLocalize';
 import useNetwork from '@hooks/useNetwork';
+import useThemeStyles from '@hooks/useThemeStyles';
 import * as CardUtils from '@libs/CardUtils';
 import * as CurrencyUtils from '@libs/CurrencyUtils';
 import FormUtils from '@libs/FormUtils';
@@ -20,7 +21,6 @@ import * as GetPhysicalCardUtils from '@libs/GetPhysicalCardUtils';
 import Navigation from '@libs/Navigation/Navigation';
 import NotFoundPage from '@pages/ErrorPage/NotFoundPage';
 import useTheme from '@styles/theme/useTheme';
-import useThemeStyles from '@styles/useThemeStyles';
 import * as Card from '@userActions/Card';
 import * as Link from '@userActions/Link';
 import CONST from '@src/CONST';
diff --git a/src/pages/settings/Wallet/PaymentMethodList.js b/src/pages/settings/Wallet/PaymentMethodList.js
index 859cd6fb636d..6e424a918b7e 100644
--- a/src/pages/settings/Wallet/PaymentMethodList.js
+++ b/src/pages/settings/Wallet/PaymentMethodList.js
@@ -17,12 +17,12 @@ import Text from '@components/Text';
 import useLocalize from '@hooks/useLocalize';
 import useNetwork from '@hooks/useNetwork';
 import useStyleUtils from '@hooks/useStyleUtils';
+import useThemeStyles from '@hooks/useThemeStyles';
 import * as CardUtils from '@libs/CardUtils';
 import Log from '@libs/Log';
 import Navigation from '@libs/Navigation/Navigation';
 import * as PaymentUtils from '@libs/PaymentUtils';
 import stylePropTypes from '@styles/stylePropTypes';
-import useThemeStyles from '@styles/useThemeStyles';
 import variables from '@styles/variables';
 import * as PaymentMethods from '@userActions/PaymentMethods';
 import CONST from '@src/CONST';
diff --git a/src/pages/settings/Wallet/ReportCardLostPage.js b/src/pages/settings/Wallet/ReportCardLostPage.js
index aa313b73a6bd..b01dc99cb485 100644
--- a/src/pages/settings/Wallet/ReportCardLostPage.js
+++ b/src/pages/settings/Wallet/ReportCardLostPage.js
@@ -12,11 +12,11 @@ import Text from '@components/Text';
 import useLocalize from '@hooks/useLocalize';
 import usePrevious from '@hooks/usePrevious';
 import usePrivatePersonalDetails from '@hooks/usePrivatePersonalDetails';
+import useThemeStyles from '@hooks/useThemeStyles';
 import * as CardUtils from '@libs/CardUtils';
 import Navigation from '@libs/Navigation/Navigation';
 import * as PersonalDetailsUtils from '@libs/PersonalDetailsUtils';
 import NotFoundPage from '@pages/ErrorPage/NotFoundPage';
-import useThemeStyles from '@styles/useThemeStyles';
 import * as CardActions from '@userActions/Card';
 import * as FormActions from '@userActions/FormActions';
 import ONYXKEYS from '@src/ONYXKEYS';
diff --git a/src/pages/settings/Wallet/ReportVirtualCardFraudPage.js b/src/pages/settings/Wallet/ReportVirtualCardFraudPage.js
index 01d3c272ad8b..fa88e01d8b41 100644
--- a/src/pages/settings/Wallet/ReportVirtualCardFraudPage.js
+++ b/src/pages/settings/Wallet/ReportVirtualCardFraudPage.js
@@ -9,11 +9,11 @@ import ScreenWrapper from '@components/ScreenWrapper';
 import Text from '@components/Text';
 import useLocalize from '@hooks/useLocalize';
 import usePrevious from '@hooks/usePrevious';
+import useThemeStyles from '@hooks/useThemeStyles';
 import * as CardUtils from '@libs/CardUtils';
 import * as ErrorUtils from '@libs/ErrorUtils';
 import Navigation from '@libs/Navigation/Navigation';
 import NotFoundPage from '@pages/ErrorPage/NotFoundPage';
-import useThemeStyles from '@styles/useThemeStyles';
 import * as Card from '@userActions/Card';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
diff --git a/src/pages/settings/Wallet/TransferBalancePage.js b/src/pages/settings/Wallet/TransferBalancePage.js
index 2414edb29087..303baa4b4b13 100644
--- a/src/pages/settings/Wallet/TransferBalancePage.js
+++ b/src/pages/settings/Wallet/TransferBalancePage.js
@@ -15,12 +15,12 @@ import {withNetwork} from '@components/OnyxProvider';
 import ScreenWrapper from '@components/ScreenWrapper';
 import Text from '@components/Text';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
 import compose from '@libs/compose';
 import * as CurrencyUtils from '@libs/CurrencyUtils';
 import Navigation from '@libs/Navigation/Navigation';
 import * as PaymentUtils from '@libs/PaymentUtils';
 import userWalletPropTypes from '@pages/EnablePayments/userWalletPropTypes';
-import useThemeStyles from '@styles/useThemeStyles';
 import variables from '@styles/variables';
 import * as PaymentMethods from '@userActions/PaymentMethods';
 import CONST from '@src/CONST';
diff --git a/src/pages/settings/Wallet/WalletPage/CardDetails.js b/src/pages/settings/Wallet/WalletPage/CardDetails.js
index a51c4c5fad6f..b51c34e89d17 100644
--- a/src/pages/settings/Wallet/WalletPage/CardDetails.js
+++ b/src/pages/settings/Wallet/WalletPage/CardDetails.js
@@ -8,10 +8,10 @@ import PressableWithDelayToggle from '@components/Pressable/PressableWithDelayTo
 import TextLink from '@components/TextLink';
 import useLocalize from '@hooks/useLocalize';
 import usePrivatePersonalDetails from '@hooks/usePrivatePersonalDetails';
+import useThemeStyles from '@hooks/useThemeStyles';
 import Clipboard from '@libs/Clipboard';
 import Navigation from '@libs/Navigation/Navigation';
 import * as PersonalDetailsUtils from '@libs/PersonalDetailsUtils';
-import useThemeStyles from '@styles/useThemeStyles';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
 
diff --git a/src/pages/settings/Wallet/WalletPage/WalletPage.js b/src/pages/settings/Wallet/WalletPage/WalletPage.js
index 5c6b95575cd6..71b4c0d185cf 100644
--- a/src/pages/settings/Wallet/WalletPage/WalletPage.js
+++ b/src/pages/settings/Wallet/WalletPage/WalletPage.js
@@ -20,6 +20,7 @@ import ScreenWrapper from '@components/ScreenWrapper';
 import Text from '@components/Text';
 import WalletSection from '@components/WalletSection';
 import useLocalize from '@hooks/useLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import compose from '@libs/compose';
 import getClickedTargetLocation from '@libs/getClickedTargetLocation';
@@ -28,7 +29,6 @@ import * as PaymentUtils from '@libs/PaymentUtils';
 import PaymentMethodList from '@pages/settings/Wallet/PaymentMethodList';
 import WalletEmptyState from '@pages/settings/Wallet/WalletEmptyState';
 import useTheme from '@styles/theme/useTheme';
-import useThemeStyles from '@styles/useThemeStyles';
 import variables from '@styles/variables';
 import * as BankAccounts from '@userActions/BankAccounts';
 import * as PaymentMethods from '@userActions/PaymentMethods';
diff --git a/src/pages/signin/ChangeExpensifyLoginLink.js b/src/pages/signin/ChangeExpensifyLoginLink.js
index 219085240459..f8b85d055117 100755
--- a/src/pages/signin/ChangeExpensifyLoginLink.js
+++ b/src/pages/signin/ChangeExpensifyLoginLink.js
@@ -6,8 +6,8 @@ import _ from 'underscore';
 import PressableWithFeedback from '@components/Pressable/PressableWithFeedback';
 import Text from '@components/Text';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
 import compose from '@libs/compose';
-import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 
diff --git a/src/pages/signin/ChooseSSOOrMagicCode.js b/src/pages/signin/ChooseSSOOrMagicCode.js
index bfb704b71f6d..db985e525545 100644
--- a/src/pages/signin/ChooseSSOOrMagicCode.js
+++ b/src/pages/signin/ChooseSSOOrMagicCode.js
@@ -8,10 +8,10 @@ import FormHelpMessage from '@components/FormHelpMessage';
 import Text from '@components/Text';
 import useLocalize from '@hooks/useLocalize';
 import useNetwork from '@hooks/useNetwork';
+import useThemeStyles from '@hooks/useThemeStyles';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import * as ErrorUtils from '@libs/ErrorUtils';
 import Navigation from '@libs/Navigation/Navigation';
-import useThemeStyles from '@styles/useThemeStyles';
 import * as Session from '@userActions/Session';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
diff --git a/src/pages/signin/EmailDeliveryFailurePage.js b/src/pages/signin/EmailDeliveryFailurePage.js
index fe39618e79df..9996374cc6cd 100644
--- a/src/pages/signin/EmailDeliveryFailurePage.js
+++ b/src/pages/signin/EmailDeliveryFailurePage.js
@@ -8,7 +8,7 @@ import Text from '@components/Text';
 import TextLink from '@components/TextLink';
 import useKeyboardState from '@hooks/useKeyboardState';
 import useLocalize from '@hooks/useLocalize';
-import useThemeStyles from '@styles/useThemeStyles';
+import useThemeStyles from '@hooks/useThemeStyles';
 import redirectToSignIn from '@userActions/SignInRedirect';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
diff --git a/src/pages/signin/Licenses.js b/src/pages/signin/Licenses.js
index ef9cd8548a2d..605cfed328b5 100644
--- a/src/pages/signin/Licenses.js
+++ b/src/pages/signin/Licenses.js
@@ -4,7 +4,7 @@ import LocalePicker from '@components/LocalePicker';
 import Text from '@components/Text';
 import TextLink from '@components/TextLink';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
-import useThemeStyles from '@styles/useThemeStyles';
+import useThemeStyles from '@hooks/useThemeStyles';
 import CONST from '@src/CONST';
 
 const currentYear = new Date().getFullYear();
diff --git a/src/pages/signin/LoginForm/BaseLoginForm.js b/src/pages/signin/LoginForm/BaseLoginForm.js
index e7ac249582a9..81c2e985f8da 100644
--- a/src/pages/signin/LoginForm/BaseLoginForm.js
+++ b/src/pages/signin/LoginForm/BaseLoginForm.js
@@ -18,6 +18,7 @@ import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
 import withToggleVisibilityView from '@components/withToggleVisibilityView';
 import withWindowDimensions, {windowDimensionsPropTypes} from '@components/withWindowDimensions';
 import usePrevious from '@hooks/usePrevious';
+import useThemeStyles from '@hooks/useThemeStyles';
 import canFocusInputOnScreenFocus from '@libs/canFocusInputOnScreenFocus';
 import compose from '@libs/compose';
 import * as ErrorUtils from '@libs/ErrorUtils';
@@ -27,7 +28,6 @@ import * as LoginUtils from '@libs/LoginUtils';
 import * as PolicyUtils from '@libs/PolicyUtils';
 import * as ValidationUtils from '@libs/ValidationUtils';
 import Visibility from '@libs/Visibility';
-import useThemeStyles from '@styles/useThemeStyles';
 import * as CloseAccount from '@userActions/CloseAccount';
 import * as MemoryOnlyKeys from '@userActions/MemoryOnlyKeys/MemoryOnlyKeys';
 import * as Session from '@userActions/Session';
diff --git a/src/pages/signin/SignInHeroCopy.js b/src/pages/signin/SignInHeroCopy.js
index 5f3273a40480..847de3868cee 100644
--- a/src/pages/signin/SignInHeroCopy.js
+++ b/src/pages/signin/SignInHeroCopy.js
@@ -5,8 +5,8 @@ import Text from '@components/Text';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
 import withWindowDimensions, {windowDimensionsPropTypes} from '@components/withWindowDimensions';
 import useStyleUtils from '@hooks/useStyleUtils';
+import useThemeStyles from '@hooks/useThemeStyles';
 import compose from '@libs/compose';
-import useThemeStyles from '@styles/useThemeStyles';
 import variables from '@styles/variables';
 
 const propTypes = {
diff --git a/src/pages/signin/SignInHeroImage.js b/src/pages/signin/SignInHeroImage.js
index 302e09a7afbc..c665a09932c2 100644
--- a/src/pages/signin/SignInHeroImage.js
+++ b/src/pages/signin/SignInHeroImage.js
@@ -3,7 +3,7 @@ import React from 'react';
 import Lottie from '@components/Lottie';
 import LottieAnimations from '@components/LottieAnimations';
 import withWindowDimensions, {windowDimensionsPropTypes} from '@components/withWindowDimensions';
-import useThemeStyles from '@styles/useThemeStyles';
+import useThemeStyles from '@hooks/useThemeStyles';
 import variables from '@styles/variables';
 
 const propTypes = {
diff --git a/src/pages/signin/SignInModal.js b/src/pages/signin/SignInModal.js
index 9784eb0b67a1..1bb8b6065a15 100644
--- a/src/pages/signin/SignInModal.js
+++ b/src/pages/signin/SignInModal.js
@@ -1,8 +1,8 @@
 import React from 'react';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import ScreenWrapper from '@components/ScreenWrapper';
+import useThemeStyles from '@hooks/useThemeStyles';
 import Navigation from '@libs/Navigation/Navigation';
-import useThemeStyles from '@styles/useThemeStyles';
 import * as Session from '@userActions/Session';
 import SignInPage from './SignInPage';
 
diff --git a/src/pages/signin/SignInPage.js b/src/pages/signin/SignInPage.js
index 04892cc7641b..1769834c9157 100644
--- a/src/pages/signin/SignInPage.js
+++ b/src/pages/signin/SignInPage.js
@@ -9,6 +9,7 @@ import CustomStatusBar from '@components/CustomStatusBar';
 import useLocalize from '@hooks/useLocalize';
 import useSafeAreaInsets from '@hooks/useSafeAreaInsets';
 import useStyleUtils from '@hooks/useStyleUtils';
+import useThemeStyles from '@hooks/useThemeStyles';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import * as ActiveClientManager from '@libs/ActiveClientManager';
 import * as Localize from '@libs/Localize';
@@ -17,7 +18,6 @@ import Navigation from '@libs/Navigation/Navigation';
 import Performance from '@libs/Performance';
 import ThemeProvider from '@styles/theme/ThemeProvider';
 import ThemeStylesProvider from '@styles/ThemeStylesProvider';
-import useThemeStyles from '@styles/useThemeStyles';
 import * as App from '@userActions/App';
 import * as Session from '@userActions/Session';
 import CONST from '@src/CONST';
diff --git a/src/pages/signin/SignInPageHero.js b/src/pages/signin/SignInPageHero.js
index d0fe82ab1d81..81415452451e 100644
--- a/src/pages/signin/SignInPageHero.js
+++ b/src/pages/signin/SignInPageHero.js
@@ -3,7 +3,7 @@ import React from 'react';
 import {View} from 'react-native';
 import withWindowDimensions, {windowDimensionsPropTypes} from '@components/withWindowDimensions';
 import useStyleUtils from '@hooks/useStyleUtils';
-import useThemeStyles from '@styles/useThemeStyles';
+import useThemeStyles from '@hooks/useThemeStyles';
 import variables from '@styles/variables';
 import SignInHeroCopy from './SignInHeroCopy';
 import SignInHeroImage from './SignInHeroImage';
diff --git a/src/pages/signin/SignInPageLayout/BackgroundImage/index.android.js b/src/pages/signin/SignInPageLayout/BackgroundImage/index.android.js
index 4185bba88149..b6d9e82726f0 100644
--- a/src/pages/signin/SignInPageLayout/BackgroundImage/index.android.js
+++ b/src/pages/signin/SignInPageLayout/BackgroundImage/index.android.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import AndroidBackgroundImage from '@assets/images/home-background--android.svg';
-import useThemeStyles from '@styles/useThemeStyles';
+import useThemeStyles from '@hooks/useThemeStyles';
 import defaultPropTypes from './propTypes';
 
 function BackgroundImage(props) {
diff --git a/src/pages/signin/SignInPageLayout/BackgroundImage/index.js b/src/pages/signin/SignInPageLayout/BackgroundImage/index.js
index 872ce7139317..ac93ceeb4e2c 100644
--- a/src/pages/signin/SignInPageLayout/BackgroundImage/index.js
+++ b/src/pages/signin/SignInPageLayout/BackgroundImage/index.js
@@ -2,7 +2,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import DesktopBackgroundImage from '@assets/images/home-background--desktop.svg';
 import MobileBackgroundImage from '@assets/images/home-background--mobile.svg';
-import useThemeStyles from '@styles/useThemeStyles';
+import useThemeStyles from '@hooks/useThemeStyles';
 import defaultPropTypes from './propTypes';
 
 const defaultProps = {
diff --git a/src/pages/signin/SignInPageLayout/Footer.js b/src/pages/signin/SignInPageLayout/Footer.js
index bf014fa29802..71f6dd32788f 100644
--- a/src/pages/signin/SignInPageLayout/Footer.js
+++ b/src/pages/signin/SignInPageLayout/Footer.js
@@ -9,10 +9,10 @@ import Text from '@components/Text';
 import TextLink from '@components/TextLink';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
 import useStyleUtils from '@hooks/useStyleUtils';
+import useThemeStyles from '@hooks/useThemeStyles';
 import Licenses from '@pages/signin/Licenses';
 import Socials from '@pages/signin/Socials';
 import useTheme from '@styles/theme/useTheme';
-import useThemeStyles from '@styles/useThemeStyles';
 import variables from '@styles/variables';
 import * as Session from '@userActions/Session';
 import CONST from '@src/CONST';
diff --git a/src/pages/signin/SignInPageLayout/SignInPageContent.js b/src/pages/signin/SignInPageLayout/SignInPageContent.js
index dc2ca0bd3138..5865c235335a 100755
--- a/src/pages/signin/SignInPageLayout/SignInPageContent.js
+++ b/src/pages/signin/SignInPageLayout/SignInPageContent.js
@@ -8,10 +8,10 @@ import SignInPageForm from '@components/SignInPageForm';
 import Text from '@components/Text';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
 import useStyleUtils from '@hooks/useStyleUtils';
+import useThemeStyles from '@hooks/useThemeStyles';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import compose from '@libs/compose';
 import SignInHeroImage from '@pages/signin/SignInHeroImage';
-import useThemeStyles from '@styles/useThemeStyles';
 import variables from '@styles/variables';
 
 const propTypes = {
diff --git a/src/pages/signin/SignInPageLayout/index.js b/src/pages/signin/SignInPageLayout/index.js
index 551398c4b79e..e810f29a3d03 100644
--- a/src/pages/signin/SignInPageLayout/index.js
+++ b/src/pages/signin/SignInPageLayout/index.js
@@ -6,11 +6,11 @@ import SignInGradient from '@assets/images/home-fade-gradient.svg';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
 import usePrevious from '@hooks/usePrevious';
 import useStyleUtils from '@hooks/useStyleUtils';
+import useThemeStyles from '@hooks/useThemeStyles';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import compose from '@libs/compose';
 import SignInPageHero from '@pages/signin/SignInPageHero';
 import useTheme from '@styles/theme/useTheme';
-import useThemeStyles from '@styles/useThemeStyles';
 import variables from '@styles/variables';
 import BackgroundImage from './BackgroundImage';
 import Footer from './Footer';
diff --git a/src/pages/signin/Socials.js b/src/pages/signin/Socials.js
index 97073ef1f552..ff634f253315 100644
--- a/src/pages/signin/Socials.js
+++ b/src/pages/signin/Socials.js
@@ -4,8 +4,8 @@ import _ from 'underscore';
 import Icon from '@components/Icon';
 import * as Expensicons from '@components/Icon/Expensicons';
 import PressableWithoutFeedback from '@components/Pressable/PressableWithoutFeedback';
+import useThemeStyles from '@hooks/useThemeStyles';
 import useTheme from '@styles/theme/useTheme';
-import useThemeStyles from '@styles/useThemeStyles';
 import variables from '@styles/variables';
 import * as Link from '@userActions/Link';
 import CONST from '@src/CONST';
diff --git a/src/pages/signin/Terms.js b/src/pages/signin/Terms.js
index 44e024208fc8..75db2e5debd1 100644
--- a/src/pages/signin/Terms.js
+++ b/src/pages/signin/Terms.js
@@ -2,7 +2,7 @@ import React, {useMemo} from 'react';
 import Text from '@components/Text';
 import TextLink from '@components/TextLink';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
-import useThemeStyles from '@styles/useThemeStyles';
+import useThemeStyles from '@hooks/useThemeStyles';
 import CONST from '@src/CONST';
 
 function Terms(props) {
diff --git a/src/pages/signin/ThirdPartySignInPage.js b/src/pages/signin/ThirdPartySignInPage.js
index f0d0f8d42e93..35297e22e665 100644
--- a/src/pages/signin/ThirdPartySignInPage.js
+++ b/src/pages/signin/ThirdPartySignInPage.js
@@ -9,9 +9,9 @@ import Text from '@components/Text';
 import TextLink from '@components/TextLink';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
 import withWindowDimensions, {windowDimensionsPropTypes} from '@components/withWindowDimensions';
+import useThemeStyles from '@hooks/useThemeStyles';
 import compose from '@libs/compose';
 import Navigation from '@libs/Navigation/Navigation';
-import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
diff --git a/src/pages/signin/UnlinkLoginForm.js b/src/pages/signin/UnlinkLoginForm.js
index 1ae9b1fd79c6..851a984407e1 100644
--- a/src/pages/signin/UnlinkLoginForm.js
+++ b/src/pages/signin/UnlinkLoginForm.js
@@ -11,8 +11,8 @@ import {withNetwork} from '@components/OnyxProvider';
 import PressableWithFeedback from '@components/Pressable/PressableWithFeedback';
 import Text from '@components/Text';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
 import compose from '@libs/compose';
-import useThemeStyles from '@styles/useThemeStyles';
 import * as Session from '@userActions/Session';
 import redirectToSignIn from '@userActions/SignInRedirect';
 import CONST from '@src/CONST';
diff --git a/src/pages/signin/ValidateCodeForm/BaseValidateCodeForm.js b/src/pages/signin/ValidateCodeForm/BaseValidateCodeForm.js
index cda60af35c0e..cb112918d737 100755
--- a/src/pages/signin/ValidateCodeForm/BaseValidateCodeForm.js
+++ b/src/pages/signin/ValidateCodeForm/BaseValidateCodeForm.js
@@ -15,6 +15,7 @@ import TextInput from '@components/TextInput';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
 import usePrevious from '@hooks/usePrevious';
 import useStyleUtils from '@hooks/useStyleUtils';
+import useThemeStyles from '@hooks/useThemeStyles';
 import canFocusInputOnScreenFocus from '@libs/canFocusInputOnScreenFocus';
 import compose from '@libs/compose';
 import * as ErrorUtils from '@libs/ErrorUtils';
@@ -22,7 +23,6 @@ import * as ValidationUtils from '@libs/ValidationUtils';
 import ChangeExpensifyLoginLink from '@pages/signin/ChangeExpensifyLoginLink';
 import Terms from '@pages/signin/Terms';
 import useTheme from '@styles/theme/useTheme';
-import useThemeStyles from '@styles/useThemeStyles';
 import * as Session from '@userActions/Session';
 import * as User from '@userActions/User';
 import CONST from '@src/CONST';
diff --git a/src/pages/tasks/NewTaskDescriptionPage.js b/src/pages/tasks/NewTaskDescriptionPage.js
index dfb77219ae24..f1d6c3718618 100644
--- a/src/pages/tasks/NewTaskDescriptionPage.js
+++ b/src/pages/tasks/NewTaskDescriptionPage.js
@@ -10,11 +10,11 @@ import ScreenWrapper from '@components/ScreenWrapper';
 import TextInput from '@components/TextInput';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
 import useAutoFocusInput from '@hooks/useAutoFocusInput';
+import useThemeStyles from '@hooks/useThemeStyles';
 import * as Browser from '@libs/Browser';
 import compose from '@libs/compose';
 import Navigation from '@libs/Navigation/Navigation';
 import updateMultilineInputRange from '@libs/UpdateMultilineInputRange';
-import useThemeStyles from '@styles/useThemeStyles';
 import * as Task from '@userActions/Task';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
diff --git a/src/pages/tasks/NewTaskDetailsPage.js b/src/pages/tasks/NewTaskDetailsPage.js
index 94cb804a39e1..38ab25e6ca28 100644
--- a/src/pages/tasks/NewTaskDetailsPage.js
+++ b/src/pages/tasks/NewTaskDetailsPage.js
@@ -10,11 +10,11 @@ import ScreenWrapper from '@components/ScreenWrapper';
 import TextInput from '@components/TextInput';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
 import useAutoFocusInput from '@hooks/useAutoFocusInput';
+import useThemeStyles from '@hooks/useThemeStyles';
 import * as Browser from '@libs/Browser';
 import compose from '@libs/compose';
 import * as ErrorUtils from '@libs/ErrorUtils';
 import Navigation from '@libs/Navigation/Navigation';
-import useThemeStyles from '@styles/useThemeStyles';
 import * as Task from '@userActions/Task';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
diff --git a/src/pages/tasks/NewTaskPage.js b/src/pages/tasks/NewTaskPage.js
index 24bdb39d5bff..1c4c3f58b0a1 100644
--- a/src/pages/tasks/NewTaskPage.js
+++ b/src/pages/tasks/NewTaskPage.js
@@ -11,13 +11,13 @@ import MenuItem from '@components/MenuItem';
 import MenuItemWithTopDescription from '@components/MenuItemWithTopDescription';
 import ScreenWrapper from '@components/ScreenWrapper';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
 import compose from '@libs/compose';
 import * as LocalePhoneNumber from '@libs/LocalePhoneNumber';
 import Navigation from '@libs/Navigation/Navigation';
 import * as OptionsListUtils from '@libs/OptionsListUtils';
 import * as ReportUtils from '@libs/ReportUtils';
 import reportPropTypes from '@pages/reportPropTypes';
-import useThemeStyles from '@styles/useThemeStyles';
 import * as Task from '@userActions/Task';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
diff --git a/src/pages/tasks/NewTaskTitlePage.js b/src/pages/tasks/NewTaskTitlePage.js
index f1c583e4aa2a..7a53c1cd556a 100644
--- a/src/pages/tasks/NewTaskTitlePage.js
+++ b/src/pages/tasks/NewTaskTitlePage.js
@@ -9,10 +9,10 @@ import ScreenWrapper from '@components/ScreenWrapper';
 import TextInput from '@components/TextInput';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
 import useAutoFocusInput from '@hooks/useAutoFocusInput';
+import useThemeStyles from '@hooks/useThemeStyles';
 import compose from '@libs/compose';
 import * as ErrorUtils from '@libs/ErrorUtils';
 import Navigation from '@libs/Navigation/Navigation';
-import useThemeStyles from '@styles/useThemeStyles';
 import * as Task from '@userActions/Task';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
diff --git a/src/pages/tasks/TaskAssigneeSelectorModal.js b/src/pages/tasks/TaskAssigneeSelectorModal.js
index c61990b1c347..dbc7c262cd93 100644
--- a/src/pages/tasks/TaskAssigneeSelectorModal.js
+++ b/src/pages/tasks/TaskAssigneeSelectorModal.js
@@ -13,12 +13,12 @@ import ScreenWrapper from '@components/ScreenWrapper';
 import withCurrentUserPersonalDetails from '@components/withCurrentUserPersonalDetails';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
 import useAutoFocusInput from '@hooks/useAutoFocusInput';
+import useThemeStyles from '@hooks/useThemeStyles';
 import compose from '@libs/compose';
 import Navigation from '@libs/Navigation/Navigation';
 import * as OptionsListUtils from '@libs/OptionsListUtils';
 import * as ReportUtils from '@libs/ReportUtils';
 import reportPropTypes from '@pages/reportPropTypes';
-import useThemeStyles from '@styles/useThemeStyles';
 import * as Task from '@userActions/Task';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
diff --git a/src/pages/tasks/TaskDescriptionPage.js b/src/pages/tasks/TaskDescriptionPage.js
index a2f908e2596e..46cbef38ad54 100644
--- a/src/pages/tasks/TaskDescriptionPage.js
+++ b/src/pages/tasks/TaskDescriptionPage.js
@@ -11,6 +11,7 @@ import ScreenWrapper from '@components/ScreenWrapper';
 import TextInput from '@components/TextInput';
 import withCurrentUserPersonalDetails from '@components/withCurrentUserPersonalDetails';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
 import * as Browser from '@libs/Browser';
 import compose from '@libs/compose';
 import Navigation from '@libs/Navigation/Navigation';
@@ -19,7 +20,6 @@ import StringUtils from '@libs/StringUtils';
 import updateMultilineInputRange from '@libs/UpdateMultilineInputRange';
 import withReportOrNotFound from '@pages/home/report/withReportOrNotFound';
 import reportPropTypes from '@pages/reportPropTypes';
-import useThemeStyles from '@styles/useThemeStyles';
 import * as Task from '@userActions/Task';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
diff --git a/src/pages/tasks/TaskShareDestinationSelectorModal.js b/src/pages/tasks/TaskShareDestinationSelectorModal.js
index 914afa34bd85..b0b6dac15d69 100644
--- a/src/pages/tasks/TaskShareDestinationSelectorModal.js
+++ b/src/pages/tasks/TaskShareDestinationSelectorModal.js
@@ -10,6 +10,7 @@ import ScreenWrapper from '@components/ScreenWrapper';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
 import useAutoFocusInput from '@hooks/useAutoFocusInput';
 import useNetwork from '@hooks/useNetwork';
+import useThemeStyles from '@hooks/useThemeStyles';
 import * as Report from '@libs/actions/Report';
 import compose from '@libs/compose';
 import Navigation from '@libs/Navigation/Navigation';
@@ -17,7 +18,6 @@ import * as OptionsListUtils from '@libs/OptionsListUtils';
 import * as ReportUtils from '@libs/ReportUtils';
 import personalDetailsPropType from '@pages/personalDetailsPropType';
 import reportPropTypes from '@pages/reportPropTypes';
-import useThemeStyles from '@styles/useThemeStyles';
 import * as Task from '@userActions/Task';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
diff --git a/src/pages/tasks/TaskTitlePage.js b/src/pages/tasks/TaskTitlePage.js
index 0e6326b21e7b..3424cd434268 100644
--- a/src/pages/tasks/TaskTitlePage.js
+++ b/src/pages/tasks/TaskTitlePage.js
@@ -10,12 +10,12 @@ import ScreenWrapper from '@components/ScreenWrapper';
 import TextInput from '@components/TextInput';
 import withCurrentUserPersonalDetails from '@components/withCurrentUserPersonalDetails';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
 import compose from '@libs/compose';
 import Navigation from '@libs/Navigation/Navigation';
 import * as ReportUtils from '@libs/ReportUtils';
 import withReportOrNotFound from '@pages/home/report/withReportOrNotFound';
 import reportPropTypes from '@pages/reportPropTypes';
-import useThemeStyles from '@styles/useThemeStyles';
 import * as Task from '@userActions/Task';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
diff --git a/src/pages/workspace/WorkspaceInitialPage.js b/src/pages/workspace/WorkspaceInitialPage.js
index 77e831e62b63..cd557a172a94 100644
--- a/src/pages/workspace/WorkspaceInitialPage.js
+++ b/src/pages/workspace/WorkspaceInitialPage.js
@@ -18,6 +18,7 @@ import Tooltip from '@components/Tooltip';
 import useLocalize from '@hooks/useLocalize';
 import usePrevious from '@hooks/usePrevious';
 import useSingleExecution from '@hooks/useSingleExecution';
+import useThemeStyles from '@hooks/useThemeStyles';
 import useWaitForNavigation from '@hooks/useWaitForNavigation';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import compose from '@libs/compose';
@@ -26,7 +27,6 @@ import * as PolicyUtils from '@libs/PolicyUtils';
 import * as ReportUtils from '@libs/ReportUtils';
 import * as ReimbursementAccountProps from '@pages/ReimbursementAccount/reimbursementAccountPropTypes';
 import reportPropTypes from '@pages/reportPropTypes';
-import useThemeStyles from '@styles/useThemeStyles';
 import * as App from '@userActions/App';
 import * as Policy from '@userActions/Policy';
 import * as ReimbursementAccount from '@userActions/ReimbursementAccount';
diff --git a/src/pages/workspace/WorkspaceInvitePage.js b/src/pages/workspace/WorkspaceInvitePage.js
index b18c234ea44d..99ee3b2e48d2 100644
--- a/src/pages/workspace/WorkspaceInvitePage.js
+++ b/src/pages/workspace/WorkspaceInvitePage.js
@@ -11,12 +11,12 @@ import ScreenWrapper from '@components/ScreenWrapper';
 import SelectionList from '@components/SelectionList';
 import useLocalize from '@hooks/useLocalize';
 import useNetwork from '@hooks/useNetwork';
+import useThemeStyles from '@hooks/useThemeStyles';
 import * as Browser from '@libs/Browser';
 import compose from '@libs/compose';
 import Navigation from '@libs/Navigation/Navigation';
 import * as OptionsListUtils from '@libs/OptionsListUtils';
 import * as PolicyUtils from '@libs/PolicyUtils';
-import useThemeStyles from '@styles/useThemeStyles';
 import * as Policy from '@userActions/Policy';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
diff --git a/src/pages/workspace/WorkspaceMembersPage.js b/src/pages/workspace/WorkspaceMembersPage.js
index d5cdbcfc69d8..50c4f858c485 100644
--- a/src/pages/workspace/WorkspaceMembersPage.js
+++ b/src/pages/workspace/WorkspaceMembersPage.js
@@ -19,6 +19,7 @@ import withCurrentUserPersonalDetails, {withCurrentUserPersonalDetailsDefaultPro
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
 import withWindowDimensions, {windowDimensionsPropTypes} from '@components/withWindowDimensions';
 import usePrevious from '@hooks/usePrevious';
+import useThemeStyles from '@hooks/useThemeStyles';
 import * as Browser from '@libs/Browser';
 import compose from '@libs/compose';
 import Log from '@libs/Log';
@@ -28,7 +29,6 @@ import * as PersonalDetailsUtils from '@libs/PersonalDetailsUtils';
 import * as PolicyUtils from '@libs/PolicyUtils';
 import * as UserUtils from '@libs/UserUtils';
 import personalDetailsPropType from '@pages/personalDetailsPropType';
-import useThemeStyles from '@styles/useThemeStyles';
 import * as Policy from '@userActions/Policy';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
diff --git a/src/pages/workspace/WorkspaceNewRoomPage.js b/src/pages/workspace/WorkspaceNewRoomPage.js
index 7ddd78621d2d..e3b025e186df 100644
--- a/src/pages/workspace/WorkspaceNewRoomPage.js
+++ b/src/pages/workspace/WorkspaceNewRoomPage.js
@@ -17,6 +17,7 @@ import useAutoFocusInput from '@hooks/useAutoFocusInput';
 import useLocalize from '@hooks/useLocalize';
 import useNetwork from '@hooks/useNetwork';
 import usePrevious from '@hooks/usePrevious';
+import useThemeStyles from '@hooks/useThemeStyles';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import compose from '@libs/compose';
 import * as ErrorUtils from '@libs/ErrorUtils';
@@ -25,7 +26,6 @@ import Permissions from '@libs/Permissions';
 import * as PolicyUtils from '@libs/PolicyUtils';
 import * as ReportUtils from '@libs/ReportUtils';
 import * as ValidationUtils from '@libs/ValidationUtils';
-import useThemeStyles from '@styles/useThemeStyles';
 import variables from '@styles/variables';
 import * as App from '@userActions/App';
 import * as Report from '@userActions/Report';
diff --git a/src/pages/workspace/WorkspacePageWithSections.js b/src/pages/workspace/WorkspacePageWithSections.js
index bea94ed3ef4e..6b5c179a2e51 100644
--- a/src/pages/workspace/WorkspacePageWithSections.js
+++ b/src/pages/workspace/WorkspacePageWithSections.js
@@ -9,13 +9,13 @@ import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import ScreenWrapper from '@components/ScreenWrapper';
 import ScrollViewWithContext from '@components/ScrollViewWithContext';
 import useNetwork from '@hooks/useNetwork';
+import useThemeStyles from '@hooks/useThemeStyles';
 import compose from '@libs/compose';
 import BankAccount from '@libs/models/BankAccount';
 import Navigation from '@libs/Navigation/Navigation';
 import * as PolicyUtils from '@libs/PolicyUtils';
 import * as ReimbursementAccountProps from '@pages/ReimbursementAccount/reimbursementAccountPropTypes';
 import userPropTypes from '@pages/settings/userPropTypes';
-import useThemeStyles from '@styles/useThemeStyles';
 import * as BankAccounts from '@userActions/BankAccounts';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
diff --git a/src/pages/workspace/WorkspaceResetBankAccountModal.js b/src/pages/workspace/WorkspaceResetBankAccountModal.js
index 19e15a2828bc..f4ad662ebb75 100644
--- a/src/pages/workspace/WorkspaceResetBankAccountModal.js
+++ b/src/pages/workspace/WorkspaceResetBankAccountModal.js
@@ -5,9 +5,9 @@ import {withOnyx} from 'react-native-onyx';
 import ConfirmModal from '@components/ConfirmModal';
 import Text from '@components/Text';
 import useLocalize from '@hooks/useLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
 import BankAccount from '@libs/models/BankAccount';
 import * as ReimbursementAccountProps from '@pages/ReimbursementAccount/reimbursementAccountPropTypes';
-import useThemeStyles from '@styles/useThemeStyles';
 import * as BankAccounts from '@userActions/BankAccounts';
 import ONYXKEYS from '@src/ONYXKEYS';
 
diff --git a/src/pages/workspace/WorkspaceSettingsPage.js b/src/pages/workspace/WorkspaceSettingsPage.js
index b51146cde7f3..6731ee8e2375 100644
--- a/src/pages/workspace/WorkspaceSettingsPage.js
+++ b/src/pages/workspace/WorkspaceSettingsPage.js
@@ -16,12 +16,12 @@ import Text from '@components/Text';
 import TextInput from '@components/TextInput';
 import withWindowDimensions, {windowDimensionsPropTypes} from '@components/withWindowDimensions';
 import useLocalize from '@hooks/useLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
 import compose from '@libs/compose';
 import Navigation from '@libs/Navigation/Navigation';
 import * as ReportUtils from '@libs/ReportUtils';
 import * as UserUtils from '@libs/UserUtils';
 import * as ValidationUtils from '@libs/ValidationUtils';
-import useThemeStyles from '@styles/useThemeStyles';
 import * as Policy from '@userActions/Policy';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
diff --git a/src/pages/workspace/WorkspacesListPage.js b/src/pages/workspace/WorkspacesListPage.js
index d2d40be041ec..6a6b55567e08 100755
--- a/src/pages/workspace/WorkspacesListPage.js
+++ b/src/pages/workspace/WorkspacesListPage.js
@@ -12,6 +12,7 @@ import MenuItem from '@components/MenuItem';
 import OfflineWithFeedback from '@components/OfflineWithFeedback';
 import useLocalize from '@hooks/useLocalize';
 import useNetwork from '@hooks/useNetwork';
+import useThemeStyles from '@hooks/useThemeStyles';
 import compose from '@libs/compose';
 import * as CurrencyUtils from '@libs/CurrencyUtils';
 import Navigation from '@libs/Navigation/Navigation';
@@ -20,7 +21,6 @@ import * as ReportUtils from '@libs/ReportUtils';
 import policyMemberPropType from '@pages/policyMemberPropType';
 import * as ReimbursementAccountProps from '@pages/ReimbursementAccount/reimbursementAccountPropTypes';
 import useTheme from '@styles/theme/useTheme';
-import useThemeStyles from '@styles/useThemeStyles';
 import * as App from '@userActions/App';
 import * as Policy from '@userActions/Policy';
 import CONST from '@src/CONST';
diff --git a/src/pages/workspace/bills/WorkspaceBillsFirstSection.js b/src/pages/workspace/bills/WorkspaceBillsFirstSection.js
index 8221beb23fcf..3f7f59180c8b 100644
--- a/src/pages/workspace/bills/WorkspaceBillsFirstSection.js
+++ b/src/pages/workspace/bills/WorkspaceBillsFirstSection.js
@@ -10,9 +10,9 @@ import Section from '@components/Section';
 import Text from '@components/Text';
 import TextLink from '@components/TextLink';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
 import compose from '@libs/compose';
 import userPropTypes from '@pages/settings/userPropTypes';
-import useThemeStyles from '@styles/useThemeStyles';
 import * as Link from '@userActions/Link';
 import ONYXKEYS from '@src/ONYXKEYS';
 
diff --git a/src/pages/workspace/bills/WorkspaceBillsNoVBAView.js b/src/pages/workspace/bills/WorkspaceBillsNoVBAView.js
index 51faa2710208..8211f70163d5 100644
--- a/src/pages/workspace/bills/WorkspaceBillsNoVBAView.js
+++ b/src/pages/workspace/bills/WorkspaceBillsNoVBAView.js
@@ -6,7 +6,7 @@ import * as Illustrations from '@components/Icon/Illustrations';
 import Section from '@components/Section';
 import Text from '@components/Text';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
-import useThemeStyles from '@styles/useThemeStyles';
+import useThemeStyles from '@hooks/useThemeStyles';
 import WorkspaceBillsFirstSection from './WorkspaceBillsFirstSection';
 
 const propTypes = {
diff --git a/src/pages/workspace/bills/WorkspaceBillsVBAView.js b/src/pages/workspace/bills/WorkspaceBillsVBAView.js
index 065c3fbaa84d..dd9c1c7fbaf6 100644
--- a/src/pages/workspace/bills/WorkspaceBillsVBAView.js
+++ b/src/pages/workspace/bills/WorkspaceBillsVBAView.js
@@ -6,7 +6,7 @@ import * as Illustrations from '@components/Icon/Illustrations';
 import Section from '@components/Section';
 import Text from '@components/Text';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
-import useThemeStyles from '@styles/useThemeStyles';
+import useThemeStyles from '@hooks/useThemeStyles';
 import * as Link from '@userActions/Link';
 import WorkspaceBillsFirstSection from './WorkspaceBillsFirstSection';
 
diff --git a/src/pages/workspace/card/WorkspaceCardNoVBAView.js b/src/pages/workspace/card/WorkspaceCardNoVBAView.js
index cf920571495f..3233f8ea7e23 100644
--- a/src/pages/workspace/card/WorkspaceCardNoVBAView.js
+++ b/src/pages/workspace/card/WorkspaceCardNoVBAView.js
@@ -7,7 +7,7 @@ import Section from '@components/Section';
 import Text from '@components/Text';
 import UnorderedList from '@components/UnorderedList';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
-import useThemeStyles from '@styles/useThemeStyles';
+import useThemeStyles from '@hooks/useThemeStyles';
 
 const propTypes = {
     /** The policy ID currently being configured */
diff --git a/src/pages/workspace/card/WorkspaceCardVBANoECardView.js b/src/pages/workspace/card/WorkspaceCardVBANoECardView.js
index 2b4925ff20bd..970cd9105368 100644
--- a/src/pages/workspace/card/WorkspaceCardVBANoECardView.js
+++ b/src/pages/workspace/card/WorkspaceCardVBANoECardView.js
@@ -8,9 +8,9 @@ import Section from '@components/Section';
 import Text from '@components/Text';
 import UnorderedList from '@components/UnorderedList';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
 import compose from '@libs/compose';
 import userPropTypes from '@pages/settings/userPropTypes';
-import useThemeStyles from '@styles/useThemeStyles';
 import * as Link from '@userActions/Link';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
diff --git a/src/pages/workspace/card/WorkspaceCardVBAWithECardView.js b/src/pages/workspace/card/WorkspaceCardVBAWithECardView.js
index 278f6d01319c..40ecd80b8e6e 100644
--- a/src/pages/workspace/card/WorkspaceCardVBAWithECardView.js
+++ b/src/pages/workspace/card/WorkspaceCardVBAWithECardView.js
@@ -6,7 +6,7 @@ import Section from '@components/Section';
 import Text from '@components/Text';
 import UnorderedList from '@components/UnorderedList';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
-import useThemeStyles from '@styles/useThemeStyles';
+import useThemeStyles from '@hooks/useThemeStyles';
 import * as Link from '@userActions/Link';
 
 const propTypes = {
diff --git a/src/pages/workspace/invoices/WorkspaceInvoicesFirstSection.js b/src/pages/workspace/invoices/WorkspaceInvoicesFirstSection.js
index 749e6b28b11b..b33311021e61 100644
--- a/src/pages/workspace/invoices/WorkspaceInvoicesFirstSection.js
+++ b/src/pages/workspace/invoices/WorkspaceInvoicesFirstSection.js
@@ -6,7 +6,7 @@ import * as Illustrations from '@components/Icon/Illustrations';
 import Section from '@components/Section';
 import Text from '@components/Text';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
-import useThemeStyles from '@styles/useThemeStyles';
+import useThemeStyles from '@hooks/useThemeStyles';
 import * as Link from '@userActions/Link';
 
 const propTypes = {
diff --git a/src/pages/workspace/invoices/WorkspaceInvoicesNoVBAView.js b/src/pages/workspace/invoices/WorkspaceInvoicesNoVBAView.js
index 9be8994bc5a7..25a97ac93442 100644
--- a/src/pages/workspace/invoices/WorkspaceInvoicesNoVBAView.js
+++ b/src/pages/workspace/invoices/WorkspaceInvoicesNoVBAView.js
@@ -6,7 +6,7 @@ import * as Illustrations from '@components/Icon/Illustrations';
 import Section from '@components/Section';
 import Text from '@components/Text';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
-import useThemeStyles from '@styles/useThemeStyles';
+import useThemeStyles from '@hooks/useThemeStyles';
 import WorkspaceInvoicesFirstSection from './WorkspaceInvoicesFirstSection';
 
 const propTypes = {
diff --git a/src/pages/workspace/invoices/WorkspaceInvoicesVBAView.js b/src/pages/workspace/invoices/WorkspaceInvoicesVBAView.js
index 0c6ea7103990..c5e047f6291b 100644
--- a/src/pages/workspace/invoices/WorkspaceInvoicesVBAView.js
+++ b/src/pages/workspace/invoices/WorkspaceInvoicesVBAView.js
@@ -6,7 +6,7 @@ import * as Illustrations from '@components/Icon/Illustrations';
 import Section from '@components/Section';
 import Text from '@components/Text';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
-import useThemeStyles from '@styles/useThemeStyles';
+import useThemeStyles from '@hooks/useThemeStyles';
 import * as Link from '@userActions/Link';
 import WorkspaceInvoicesFirstSection from './WorkspaceInvoicesFirstSection';
 
diff --git a/src/pages/workspace/reimburse/WorkspaceReimburseSection.js b/src/pages/workspace/reimburse/WorkspaceReimburseSection.js
index 2b77eb0c4128..35e00bea38a1 100644
--- a/src/pages/workspace/reimburse/WorkspaceReimburseSection.js
+++ b/src/pages/workspace/reimburse/WorkspaceReimburseSection.js
@@ -9,10 +9,10 @@ import * as Illustrations from '@components/Icon/Illustrations';
 import networkPropTypes from '@components/networkPropTypes';
 import Section from '@components/Section';
 import Text from '@components/Text';
+import useThemeStyles from '@hooks/useThemeStyles';
 import BankAccount from '@libs/models/BankAccount';
 import * as ReimbursementAccountProps from '@pages/ReimbursementAccount/reimbursementAccountPropTypes';
 import useTheme from '@styles/theme/useTheme';
-import useThemeStyles from '@styles/useThemeStyles';
 import * as Link from '@userActions/Link';
 import CONST from '@src/CONST';
 
diff --git a/src/pages/workspace/reimburse/WorkspaceReimburseView.js b/src/pages/workspace/reimburse/WorkspaceReimburseView.js
index 752639c33d3a..23136064fc2b 100644
--- a/src/pages/workspace/reimburse/WorkspaceReimburseView.js
+++ b/src/pages/workspace/reimburse/WorkspaceReimburseView.js
@@ -14,11 +14,11 @@ import {withNetwork} from '@components/OnyxProvider';
 import Section from '@components/Section';
 import Text from '@components/Text';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
 import compose from '@libs/compose';
 import Navigation from '@libs/Navigation/Navigation';
 import * as PolicyUtils from '@libs/PolicyUtils';
 import * as ReimbursementAccountProps from '@pages/ReimbursementAccount/reimbursementAccountPropTypes';
-import useThemeStyles from '@styles/useThemeStyles';
 import * as BankAccounts from '@userActions/BankAccounts';
 import * as Link from '@userActions/Link';
 import * as Policy from '@userActions/Policy';
diff --git a/src/pages/workspace/travel/WorkspaceTravelNoVBAView.js b/src/pages/workspace/travel/WorkspaceTravelNoVBAView.js
index 64269084aad4..d8154955a5d7 100644
--- a/src/pages/workspace/travel/WorkspaceTravelNoVBAView.js
+++ b/src/pages/workspace/travel/WorkspaceTravelNoVBAView.js
@@ -6,7 +6,7 @@ import * as Illustrations from '@components/Icon/Illustrations';
 import Section from '@components/Section';
 import Text from '@components/Text';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
-import useThemeStyles from '@styles/useThemeStyles';
+import useThemeStyles from '@hooks/useThemeStyles';
 
 const propTypes = {
     /** The policy ID currently being configured */
diff --git a/src/pages/workspace/travel/WorkspaceTravelVBAView.js b/src/pages/workspace/travel/WorkspaceTravelVBAView.js
index b6424e918037..5228f9185852 100644
--- a/src/pages/workspace/travel/WorkspaceTravelVBAView.js
+++ b/src/pages/workspace/travel/WorkspaceTravelVBAView.js
@@ -5,7 +5,7 @@ import * as Illustrations from '@components/Icon/Illustrations';
 import Section from '@components/Section';
 import Text from '@components/Text';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
-import useThemeStyles from '@styles/useThemeStyles';
+import useThemeStyles from '@hooks/useThemeStyles';
 import * as Link from '@userActions/Link';
 import * as Report from '@userActions/Report';
 import CONST from '@src/CONST';

From fa87f8bb98aa960f71584e188cbaee5c091bb0f0 Mon Sep 17 00:00:00 2001
From: Christoph Pader <christoph.pader@outlook.com>
Date: Thu, 7 Dec 2023 17:29:31 +0100
Subject: [PATCH 052/102] move useTheme

---
 src/components/AddPlaidBankAccount.js                           | 2 +-
 src/components/AddressSearch/index.js                           | 2 +-
 src/components/AttachmentModal.js                               | 2 +-
 .../Attachments/AttachmentCarousel/CarouselButtons.js           | 2 +-
 src/components/Attachments/AttachmentView/index.js              | 2 +-
 src/components/Avatar.tsx                                       | 2 +-
 src/components/AvatarCropModal/AvatarCropModal.js               | 2 +-
 src/components/AvatarSkeleton.tsx                               | 2 +-
 src/components/AvatarWithDisplayName.tsx                        | 2 +-
 src/components/AvatarWithImagePicker.js                         | 2 +-
 src/components/BlockingViews/BlockingView.js                    | 2 +-
 src/components/Button/index.tsx                                 | 2 +-
 src/components/ButtonWithDropdownMenu.js                        | 2 +-
 src/components/Checkbox.tsx                                     | 2 +-
 src/components/ColorSchemeWrapper/index.tsx                     | 2 +-
 src/components/Composer/index.android.js                        | 2 +-
 src/components/Composer/index.ios.js                            | 2 +-
 src/components/Composer/index.js                                | 2 +-
 src/components/ConfirmedRoute.js                                | 2 +-
 src/components/CurrentUserPersonalDetailsSkeletonView/index.tsx | 2 +-
 src/components/CustomStatusBar/index.tsx                        | 2 +-
 .../DeeplinkWrapper/DeeplinkRedirectLoadingIndicator.js         | 2 +-
 src/components/DistanceEReceipt.js                              | 2 +-
 src/components/DistanceRequest/DistanceRequestFooter.js         | 2 +-
 src/components/DistanceRequest/DistanceRequestRenderItem.js     | 2 +-
 src/components/DotIndicatorMessage.tsx                          | 2 +-
 src/components/EmojiPicker/CategoryShortcutButton.js            | 2 +-
 src/components/ExpensifyWordmark.tsx                            | 2 +-
 src/components/FormHelpMessage.js                               | 2 +-
 src/components/FullscreenLoadingIndicator.tsx                   | 2 +-
 src/components/GrowlNotification/index.js                       | 2 +-
 .../HTMLEngineProvider/HTMLRenderers/EditedRenderer.js          | 2 +-
 src/components/HeaderPageLayout.js                              | 2 +-
 src/components/Icon/svgs/LoungeAccessIcon.tsx                   | 2 +-
 src/components/IllustratedHeaderPageLayout.js                   | 2 +-
 src/components/Indicator.js                                     | 2 +-
 src/components/InlineSystemMessage.tsx                          | 2 +-
 src/components/LHNOptionsList/OptionRowLHN.js                   | 2 +-
 src/components/LocalePicker.tsx                                 | 2 +-
 src/components/MapView/MapView.website.tsx                      | 2 +-
 src/components/MentionSuggestions.tsx                           | 2 +-
 src/components/MenuItem.js                                      | 2 +-
 src/components/Modal/BaseModal.tsx                              | 2 +-
 src/components/Modal/index.tsx                                  | 2 +-
 src/components/MoneyRequestConfirmationList.js                  | 2 +-
 src/components/MoneyRequestSkeletonView.tsx                     | 2 +-
 src/components/MultipleAvatars.tsx                              | 2 +-
 src/components/Onfido/BaseOnfidoWeb.js                          | 2 +-
 src/components/OptionRow.js                                     | 2 +-
 src/components/Picker/BasePicker.tsx                            | 2 +-
 src/components/PinButton.js                                     | 2 +-
 src/components/QRCode.tsx                                       | 2 +-
 src/components/RadioButton.tsx                                  | 2 +-
 src/components/ReportActionItem/MoneyReportView.js              | 2 +-
 src/components/ReportActionItem/MoneyRequestPreview.js          | 2 +-
 src/components/ReportActionItem/MoneyRequestView.js             | 2 +-
 src/components/ReportActionItem/ReportActionItemImages.js       | 2 +-
 src/components/ReportActionItem/ReportPreview.js                | 2 +-
 src/components/ReportActionsSkeletonView/SkeletonViewLines.tsx  | 2 +-
 src/components/ReportHeaderSkeletonView.tsx                     | 2 +-
 src/components/RoomHeaderAvatars.js                             | 2 +-
 src/components/SAMLLoadingIndicator.js                          | 2 +-
 src/components/SelectCircle.tsx                                 | 2 +-
 src/components/SelectionList/BaseListItem.js                    | 2 +-
 src/components/SelectionList/BaseSelectionList.js               | 2 +-
 src/components/ShowMoreButton/index.js                          | 2 +-
 src/components/SubscriptAvatar.tsx                              | 2 +-
 src/components/TabSelector/TabIcon.js                           | 2 +-
 src/components/TabSelector/TabSelector.js                       | 2 +-
 src/components/Text.tsx                                         | 2 +-
 src/components/TextInput/BaseTextInput/index.js                 | 2 +-
 src/components/TextInput/BaseTextInput/index.native.js          | 2 +-
 src/components/ValidateCode/ExpiredValidateCodeModal.js         | 2 +-
 src/components/ValidateCode/JustSignedInModal.js                | 2 +-
 src/components/ValidateCode/ValidateCodeModal.js                | 2 +-
 .../VideoChatButtonAndMenu/BaseVideoChatButtonAndMenu.js        | 2 +-
 src/components/withTheme.tsx                                    | 2 +-
 src/{styles/theme => hooks}/useTheme.ts                         | 2 +-
 src/libs/Navigation/NavigationRoot.tsx                          | 2 +-
 src/pages/ErrorPage/GenericErrorPage.js                         | 2 +-
 src/pages/LogInWithShortLivedAuthTokenPage.js                   | 2 +-
 src/pages/ReimbursementAccount/BankAccountStep.js               | 2 +-
 src/pages/TeachersUnite/SaveTheWorldPage.js                     | 2 +-
 src/pages/home/HeaderView.js                                    | 2 +-
 src/pages/home/report/FloatingMessageCounter/index.js           | 2 +-
 src/pages/home/report/LinkPreviewer.js                          | 2 +-
 src/pages/home/report/ListBoundaryLoader/ListBoundaryLoader.js  | 2 +-
 .../ComposerWithSuggestions/ComposerWithSuggestions.js          | 2 +-
 src/pages/home/report/ReportActionCompose/SendButton.js         | 2 +-
 src/pages/home/report/ReportActionItem.js                       | 2 +-
 src/pages/home/report/ReportActionItemSingle.js                 | 2 +-
 src/pages/home/report/comment/TextCommentFragment.js            | 2 +-
 src/pages/home/sidebar/SidebarLinks.js                          | 2 +-
 src/pages/iou/ReceiptSelector/index.js                          | 2 +-
 src/pages/iou/ReceiptSelector/index.native.js                   | 2 +-
 src/pages/settings/InitialSettingsPage.js                       | 2 +-
 src/pages/settings/Preferences/PreferencesPage.js               | 2 +-
 .../Profile/Contacts/ValidateCodeForm/BaseValidateCodeForm.js   | 2 +-
 src/pages/settings/Profile/CustomStatus/StatusPage.js           | 2 +-
 src/pages/settings/Security/SecuritySettingsPage.js             | 2 +-
 src/pages/settings/Security/TwoFactorAuth/Steps/CodesStep.js    | 2 +-
 src/pages/settings/Security/TwoFactorAuth/Steps/EnabledStep.js  | 2 +-
 src/pages/settings/Wallet/ActivatePhysicalCardPage.js           | 2 +-
 src/pages/settings/Wallet/ExpensifyCardPage.js                  | 2 +-
 src/pages/settings/Wallet/WalletEmptyState.js                   | 2 +-
 src/pages/settings/Wallet/WalletPage/WalletPage.js              | 2 +-
 src/pages/signin/SignInPageLayout/Footer.js                     | 2 +-
 src/pages/signin/SignInPageLayout/index.js                      | 2 +-
 src/pages/signin/Socials.js                                     | 2 +-
 src/pages/signin/ValidateCodeForm/BaseValidateCodeForm.js       | 2 +-
 src/pages/workspace/WorkspacesListPage.js                       | 2 +-
 src/pages/workspace/reimburse/WorkspaceReimburseSection.js      | 2 +-
 src/styles/ThemeStylesProvider.tsx                              | 2 +-
 113 files changed, 113 insertions(+), 113 deletions(-)
 rename src/{styles/theme => hooks}/useTheme.ts (87%)

diff --git a/src/components/AddPlaidBankAccount.js b/src/components/AddPlaidBankAccount.js
index 2b007b3180ff..6e3d0e2f0d68 100644
--- a/src/components/AddPlaidBankAccount.js
+++ b/src/components/AddPlaidBankAccount.js
@@ -6,11 +6,11 @@ import {withOnyx} from 'react-native-onyx';
 import _ from 'underscore';
 import useLocalize from '@hooks/useLocalize';
 import useNetwork from '@hooks/useNetwork';
+import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import KeyboardShortcut from '@libs/KeyboardShortcut';
 import Log from '@libs/Log';
 import {plaidDataPropTypes} from '@pages/ReimbursementAccount/plaidDataPropTypes';
-import useTheme from '@styles/theme/useTheme';
 import * as App from '@userActions/App';
 import * as BankAccounts from '@userActions/BankAccounts';
 import CONST from '@src/CONST';
diff --git a/src/components/AddressSearch/index.js b/src/components/AddressSearch/index.js
index c8e3d78e77e4..3c764b36f3eb 100644
--- a/src/components/AddressSearch/index.js
+++ b/src/components/AddressSearch/index.js
@@ -11,12 +11,12 @@ import {withNetwork} from '@components/OnyxProvider';
 import TextInput from '@components/TextInput';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
 import useStyleUtils from '@hooks/useStyleUtils';
+import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import * as ApiUtils from '@libs/ApiUtils';
 import compose from '@libs/compose';
 import getCurrentPosition from '@libs/getCurrentPosition';
 import * as GooglePlacesUtils from '@libs/GooglePlacesUtils';
-import useTheme from '@styles/theme/useTheme';
 import variables from '@styles/variables';
 import CONST from '@src/CONST';
 import CurrentLocationButton from './CurrentLocationButton';
diff --git a/src/components/AttachmentModal.js b/src/components/AttachmentModal.js
index c55b9799e44a..187b5760e204 100755
--- a/src/components/AttachmentModal.js
+++ b/src/components/AttachmentModal.js
@@ -9,6 +9,7 @@ import _ from 'underscore';
 import useLocalize from '@hooks/useLocalize';
 import useNetwork from '@hooks/useNetwork';
 import useStyleUtils from '@hooks/useStyleUtils';
+import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import addEncryptedAuthTokenToURL from '@libs/addEncryptedAuthTokenToURL';
@@ -21,7 +22,6 @@ import * as ReportUtils from '@libs/ReportUtils';
 import * as TransactionUtils from '@libs/TransactionUtils';
 import useNativeDriver from '@libs/useNativeDriver';
 import reportPropTypes from '@pages/reportPropTypes';
-import useTheme from '@styles/theme/useTheme';
 import * as IOU from '@userActions/IOU';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
diff --git a/src/components/Attachments/AttachmentCarousel/CarouselButtons.js b/src/components/Attachments/AttachmentCarousel/CarouselButtons.js
index d210c0205346..f36f6d1c9580 100644
--- a/src/components/Attachments/AttachmentCarousel/CarouselButtons.js
+++ b/src/components/Attachments/AttachmentCarousel/CarouselButtons.js
@@ -9,7 +9,7 @@ import Tooltip from '@components/Tooltip';
 import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
 import useWindowDimensions from '@hooks/useWindowDimensions';
-import useTheme from '@styles/theme/useTheme';
+import useTheme from '@hooks/useTheme';
 
 const propTypes = {
     /** Where the arrows should be visible */
diff --git a/src/components/Attachments/AttachmentView/index.js b/src/components/Attachments/AttachmentView/index.js
index fc2568a708bd..2d1e5bc2fd0d 100755
--- a/src/components/Attachments/AttachmentView/index.js
+++ b/src/components/Attachments/AttachmentView/index.js
@@ -13,11 +13,11 @@ import Tooltip from '@components/Tooltip';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
 import useNetwork from '@hooks/useNetwork';
 import useStyleUtils from '@hooks/useStyleUtils';
+import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import addEncryptedAuthTokenToURL from '@libs/addEncryptedAuthTokenToURL';
 import compose from '@libs/compose';
 import * as TransactionUtils from '@libs/TransactionUtils';
-import useTheme from '@styles/theme/useTheme';
 import cursor from '@styles/utils/cursor';
 import variables from '@styles/variables';
 import ONYXKEYS from '@src/ONYXKEYS';
diff --git a/src/components/Avatar.tsx b/src/components/Avatar.tsx
index fda5c4ace8a7..978d2f097cbf 100644
--- a/src/components/Avatar.tsx
+++ b/src/components/Avatar.tsx
@@ -2,10 +2,10 @@ import React, {useEffect, useState} from 'react';
 import {StyleProp, View, ViewStyle} from 'react-native';
 import useNetwork from '@hooks/useNetwork';
 import useStyleUtils from '@hooks/useStyleUtils';
+import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import * as ReportUtils from '@libs/ReportUtils';
 import {AvatarSource} from '@libs/UserUtils';
-import useTheme from '@styles/theme/useTheme';
 import type {AvatarSizeName} from '@styles/utils';
 import CONST from '@src/CONST';
 import {AvatarType} from '@src/types/onyx/OnyxCommon';
diff --git a/src/components/AvatarCropModal/AvatarCropModal.js b/src/components/AvatarCropModal/AvatarCropModal.js
index 5c70c712fc86..1d825a57049d 100644
--- a/src/components/AvatarCropModal/AvatarCropModal.js
+++ b/src/components/AvatarCropModal/AvatarCropModal.js
@@ -16,10 +16,10 @@ import Tooltip from '@components/Tooltip';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
 import withWindowDimensions, {windowDimensionsPropTypes} from '@components/withWindowDimensions';
 import useStyleUtils from '@hooks/useStyleUtils';
+import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import compose from '@libs/compose';
 import cropOrRotateImage from '@libs/cropOrRotateImage';
-import useTheme from '@styles/theme/useTheme';
 import CONST from '@src/CONST';
 import ImageCropView from './ImageCropView';
 import Slider from './Slider';
diff --git a/src/components/AvatarSkeleton.tsx b/src/components/AvatarSkeleton.tsx
index 12808ee5e110..0887830aa07a 100644
--- a/src/components/AvatarSkeleton.tsx
+++ b/src/components/AvatarSkeleton.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import {Circle} from 'react-native-svg';
-import useTheme from '@styles/theme/useTheme';
+import useTheme from '@hooks/useTheme';
 import SkeletonViewContentLoader from './SkeletonViewContentLoader';
 
 function AvatarSkeleton() {
diff --git a/src/components/AvatarWithDisplayName.tsx b/src/components/AvatarWithDisplayName.tsx
index ee0583540576..6b05ec159ae7 100644
--- a/src/components/AvatarWithDisplayName.tsx
+++ b/src/components/AvatarWithDisplayName.tsx
@@ -3,11 +3,11 @@ import {View} from 'react-native';
 import {OnyxCollection, OnyxEntry, withOnyx} from 'react-native-onyx';
 import {ValueOf} from 'type-fest';
 import useStyleUtils from '@hooks/useStyleUtils';
+import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import Navigation from '@libs/Navigation/Navigation';
 import * as OptionsListUtils from '@libs/OptionsListUtils';
 import * as ReportUtils from '@libs/ReportUtils';
-import useTheme from '@styles/theme/useTheme';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
diff --git a/src/components/AvatarWithImagePicker.js b/src/components/AvatarWithImagePicker.js
index 0f02e47ac1ac..b61792f4bb97 100644
--- a/src/components/AvatarWithImagePicker.js
+++ b/src/components/AvatarWithImagePicker.js
@@ -4,12 +4,12 @@ import React, {useEffect, useRef, useState} from 'react';
 import {StyleSheet, View} from 'react-native';
 import _ from 'underscore';
 import useLocalize from '@hooks/useLocalize';
+import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import * as Browser from '@libs/Browser';
 import * as FileUtils from '@libs/fileDownload/FileUtils';
 import getImageResolution from '@libs/fileDownload/getImageResolution';
 import stylePropTypes from '@styles/stylePropTypes';
-import useTheme from '@styles/theme/useTheme';
 import variables from '@styles/variables';
 import CONST from '@src/CONST';
 import AttachmentModal from './AttachmentModal';
diff --git a/src/components/BlockingViews/BlockingView.js b/src/components/BlockingViews/BlockingView.js
index d52e3c00b31c..44f6b7100509 100644
--- a/src/components/BlockingViews/BlockingView.js
+++ b/src/components/BlockingViews/BlockingView.js
@@ -6,9 +6,9 @@ import Icon from '@components/Icon';
 import Text from '@components/Text';
 import TextLink from '@components/TextLink';
 import useLocalize from '@hooks/useLocalize';
+import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import Navigation from '@libs/Navigation/Navigation';
-import useTheme from '@styles/theme/useTheme';
 import variables from '@styles/variables';
 
 const propTypes = {
diff --git a/src/components/Button/index.tsx b/src/components/Button/index.tsx
index 969f3d30fe35..9bc52daaa442 100644
--- a/src/components/Button/index.tsx
+++ b/src/components/Button/index.tsx
@@ -9,9 +9,9 @@ import Text from '@components/Text';
 import withNavigationFallback from '@components/withNavigationFallback';
 import useActiveElement from '@hooks/useActiveElement';
 import useKeyboardShortcut from '@hooks/useKeyboardShortcut';
+import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import HapticFeedback from '@libs/HapticFeedback';
-import useTheme from '@styles/theme/useTheme';
 import CONST from '@src/CONST';
 import ChildrenProps from '@src/types/utils/ChildrenProps';
 import validateSubmitShortcut from './validateSubmitShortcut';
diff --git a/src/components/ButtonWithDropdownMenu.js b/src/components/ButtonWithDropdownMenu.js
index 7d95cd7fec63..144af69d1951 100644
--- a/src/components/ButtonWithDropdownMenu.js
+++ b/src/components/ButtonWithDropdownMenu.js
@@ -3,9 +3,9 @@ import React, {useEffect, useRef, useState} from 'react';
 import {View} from 'react-native';
 import _ from 'underscore';
 import useStyleUtils from '@hooks/useStyleUtils';
+import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import useWindowDimensions from '@hooks/useWindowDimensions';
-import useTheme from '@styles/theme/useTheme';
 import CONST from '@src/CONST';
 import Button from './Button';
 import Icon from './Icon';
diff --git a/src/components/Checkbox.tsx b/src/components/Checkbox.tsx
index 664df2f3f6c9..23bc068e8fe0 100644
--- a/src/components/Checkbox.tsx
+++ b/src/components/Checkbox.tsx
@@ -1,8 +1,8 @@
 import React, {ForwardedRef, forwardRef, KeyboardEvent as ReactKeyboardEvent} from 'react';
 import {GestureResponderEvent, StyleProp, View, ViewStyle} from 'react-native';
 import useStyleUtils from '@hooks/useStyleUtils';
+import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
-import useTheme from '@styles/theme/useTheme';
 import CONST from '@src/CONST';
 import ChildrenProps from '@src/types/utils/ChildrenProps';
 import Icon from './Icon';
diff --git a/src/components/ColorSchemeWrapper/index.tsx b/src/components/ColorSchemeWrapper/index.tsx
index 5b811f68687f..0a1ccc5e5d67 100644
--- a/src/components/ColorSchemeWrapper/index.tsx
+++ b/src/components/ColorSchemeWrapper/index.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import {View} from 'react-native';
+import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
-import useTheme from '@styles/theme/useTheme';
 
 function ColorSchemeWrapper({children}: React.PropsWithChildren): React.ReactElement {
     const theme = useTheme();
diff --git a/src/components/Composer/index.android.js b/src/components/Composer/index.android.js
index 483593865456..af64831df117 100644
--- a/src/components/Composer/index.android.js
+++ b/src/components/Composer/index.android.js
@@ -3,9 +3,9 @@ import React, {useCallback, useEffect, useMemo, useRef} from 'react';
 import {StyleSheet} from 'react-native';
 import _ from 'underscore';
 import RNTextInput from '@components/RNTextInput';
+import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import * as ComposerUtils from '@libs/ComposerUtils';
-import useTheme from '@styles/theme/useTheme';
 
 const propTypes = {
     /** Maximum number of lines in the text input */
diff --git a/src/components/Composer/index.ios.js b/src/components/Composer/index.ios.js
index d93b684ef3c7..c9947999b273 100644
--- a/src/components/Composer/index.ios.js
+++ b/src/components/Composer/index.ios.js
@@ -3,9 +3,9 @@ import React, {useCallback, useEffect, useMemo, useRef} from 'react';
 import {StyleSheet} from 'react-native';
 import _ from 'underscore';
 import RNTextInput from '@components/RNTextInput';
+import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import * as ComposerUtils from '@libs/ComposerUtils';
-import useTheme from '@styles/theme/useTheme';
 
 const propTypes = {
     /** If the input should clear, it actually gets intercepted instead of .clear() */
diff --git a/src/components/Composer/index.js b/src/components/Composer/index.js
index f431f43c3876..bcd2fde11bce 100755
--- a/src/components/Composer/index.js
+++ b/src/components/Composer/index.js
@@ -9,6 +9,7 @@ import Text from '@components/Text';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
 import withNavigation from '@components/withNavigation';
 import useStyleUtils from '@hooks/useStyleUtils';
+import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import * as Browser from '@libs/Browser';
@@ -17,7 +18,6 @@ import * as ComposerUtils from '@libs/ComposerUtils';
 import updateIsFullComposerAvailable from '@libs/ComposerUtils/updateIsFullComposerAvailable';
 import isEnterWhileComposition from '@libs/KeyboardShortcut/isEnterWhileComposition';
 import ReportActionComposeFocusManager from '@libs/ReportActionComposeFocusManager';
-import useTheme from '@styles/theme/useTheme';
 import CONST from '@src/CONST';
 
 const propTypes = {
diff --git a/src/components/ConfirmedRoute.js b/src/components/ConfirmedRoute.js
index c47f6b31d87a..bd632d58e796 100644
--- a/src/components/ConfirmedRoute.js
+++ b/src/components/ConfirmedRoute.js
@@ -5,9 +5,9 @@ import React, {useCallback, useEffect} from 'react';
 import {withOnyx} from 'react-native-onyx';
 import _ from 'underscore';
 import useNetwork from '@hooks/useNetwork';
+import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import * as TransactionUtils from '@libs/TransactionUtils';
-import useTheme from '@styles/theme/useTheme';
 import * as MapboxToken from '@userActions/MapboxToken';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
diff --git a/src/components/CurrentUserPersonalDetailsSkeletonView/index.tsx b/src/components/CurrentUserPersonalDetailsSkeletonView/index.tsx
index 07abc02c1425..02c308705994 100644
--- a/src/components/CurrentUserPersonalDetailsSkeletonView/index.tsx
+++ b/src/components/CurrentUserPersonalDetailsSkeletonView/index.tsx
@@ -4,8 +4,8 @@ import {Circle, Rect} from 'react-native-svg';
 import {ValueOf} from 'type-fest';
 import SkeletonViewContentLoader from '@components/SkeletonViewContentLoader';
 import useStyleUtils from '@hooks/useStyleUtils';
+import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
-import useTheme from '@styles/theme/useTheme';
 import variables from '@styles/variables';
 import CONST from '@src/CONST';
 
diff --git a/src/components/CustomStatusBar/index.tsx b/src/components/CustomStatusBar/index.tsx
index 8df48ecc80a5..3f9aac963a28 100644
--- a/src/components/CustomStatusBar/index.tsx
+++ b/src/components/CustomStatusBar/index.tsx
@@ -1,9 +1,9 @@
 import {EventListenerCallback, NavigationContainerEventMap} from '@react-navigation/native';
 import PropTypes from 'prop-types';
 import React, {useCallback, useContext, useEffect} from 'react';
+import useTheme from '@hooks/useTheme';
 import {navigationRef} from '@libs/Navigation/Navigation';
 import StatusBar from '@libs/StatusBar';
-import useTheme from '@styles/theme/useTheme';
 import CustomStatusBarContext from './CustomStatusBarContext';
 import updateStatusBarAppearance from './updateStatusBarAppearance';
 
diff --git a/src/components/DeeplinkWrapper/DeeplinkRedirectLoadingIndicator.js b/src/components/DeeplinkWrapper/DeeplinkRedirectLoadingIndicator.js
index aab487e84ffe..622767b8a5f8 100644
--- a/src/components/DeeplinkWrapper/DeeplinkRedirectLoadingIndicator.js
+++ b/src/components/DeeplinkWrapper/DeeplinkRedirectLoadingIndicator.js
@@ -8,10 +8,10 @@ import * as Illustrations from '@components/Icon/Illustrations';
 import Text from '@components/Text';
 import TextLink from '@components/TextLink';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
+import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import compose from '@libs/compose';
 import Navigation from '@libs/Navigation/Navigation';
-import useTheme from '@styles/theme/useTheme';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
 
diff --git a/src/components/DistanceEReceipt.js b/src/components/DistanceEReceipt.js
index bb4bb6ce9af6..7d1d3c99f48d 100644
--- a/src/components/DistanceEReceipt.js
+++ b/src/components/DistanceEReceipt.js
@@ -5,13 +5,13 @@ import _ from 'underscore';
 import EReceiptBackground from '@assets/images/eReceipt_background.svg';
 import useLocalize from '@hooks/useLocalize';
 import useNetwork from '@hooks/useNetwork';
+import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import * as CurrencyUtils from '@libs/CurrencyUtils';
 import * as ReceiptUtils from '@libs/ReceiptUtils';
 import * as ReportUtils from '@libs/ReportUtils';
 import * as TransactionUtils from '@libs/TransactionUtils';
 import tryResolveUrlFromApiRoot from '@libs/tryResolveUrlFromApiRoot';
-import useTheme from '@styles/theme/useTheme';
 import Icon from './Icon';
 import * as Expensicons from './Icon/Expensicons';
 import PendingMapView from './MapView/PendingMapView';
diff --git a/src/components/DistanceRequest/DistanceRequestFooter.js b/src/components/DistanceRequest/DistanceRequestFooter.js
index cbc5772c116f..a5e9cc0943be 100644
--- a/src/components/DistanceRequest/DistanceRequestFooter.js
+++ b/src/components/DistanceRequest/DistanceRequestFooter.js
@@ -10,9 +10,9 @@ import DistanceMapView from '@components/DistanceMapView';
 import * as Expensicons from '@components/Icon/Expensicons';
 import transactionPropTypes from '@components/transactionPropTypes';
 import useLocalize from '@hooks/useLocalize';
+import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import * as TransactionUtils from '@libs/TransactionUtils';
-import useTheme from '@styles/theme/useTheme';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 
diff --git a/src/components/DistanceRequest/DistanceRequestRenderItem.js b/src/components/DistanceRequest/DistanceRequestRenderItem.js
index 1eb3050ad07a..2aa2ac58f379 100644
--- a/src/components/DistanceRequest/DistanceRequestRenderItem.js
+++ b/src/components/DistanceRequest/DistanceRequestRenderItem.js
@@ -5,7 +5,7 @@ import _ from 'underscore';
 import * as Expensicons from '@components/Icon/Expensicons';
 import MenuItemWithTopDescription from '@components/MenuItemWithTopDescription';
 import useLocalize from '@hooks/useLocalize';
-import useTheme from '@styles/theme/useTheme';
+import useTheme from '@hooks/useTheme';
 
 const propTypes = {
     /** The waypoints for the distance request */
diff --git a/src/components/DotIndicatorMessage.tsx b/src/components/DotIndicatorMessage.tsx
index ac8917e8eab7..65afe8c7e4eb 100644
--- a/src/components/DotIndicatorMessage.tsx
+++ b/src/components/DotIndicatorMessage.tsx
@@ -2,10 +2,10 @@
 import React from 'react';
 import {StyleProp, TextStyle, View, ViewStyle} from 'react-native';
 import useStyleUtils from '@hooks/useStyleUtils';
+import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import fileDownload from '@libs/fileDownload';
 import * as Localize from '@libs/Localize';
-import useTheme from '@styles/theme/useTheme';
 import CONST from '@src/CONST';
 import Icon from './Icon';
 import * as Expensicons from './Icon/Expensicons';
diff --git a/src/components/EmojiPicker/CategoryShortcutButton.js b/src/components/EmojiPicker/CategoryShortcutButton.js
index 14dd98367f01..439e55b60cdc 100644
--- a/src/components/EmojiPicker/CategoryShortcutButton.js
+++ b/src/components/EmojiPicker/CategoryShortcutButton.js
@@ -5,9 +5,9 @@ import PressableWithoutFeedback from '@components/Pressable/PressableWithoutFeed
 import Tooltip from '@components/Tooltip';
 import useLocalize from '@hooks/useLocalize';
 import useStyleUtils from '@hooks/useStyleUtils';
+import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import getButtonState from '@libs/getButtonState';
-import useTheme from '@styles/theme/useTheme';
 import variables from '@styles/variables';
 import CONST from '@src/CONST';
 
diff --git a/src/components/ExpensifyWordmark.tsx b/src/components/ExpensifyWordmark.tsx
index e83ce963abd1..b1ef7c093e29 100644
--- a/src/components/ExpensifyWordmark.tsx
+++ b/src/components/ExpensifyWordmark.tsx
@@ -6,8 +6,8 @@ import StagingLogo from '@assets/images/expensify-logo--staging.svg';
 import ProductionLogo from '@assets/images/expensify-wordmark.svg';
 import useEnvironment from '@hooks/useEnvironment';
 import useStyleUtils from '@hooks/useStyleUtils';
+import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
-import useTheme from '@styles/theme/useTheme';
 import variables from '@styles/variables';
 import CONST from '@src/CONST';
 import withWindowDimensions from './withWindowDimensions';
diff --git a/src/components/FormHelpMessage.js b/src/components/FormHelpMessage.js
index 43c2d94c47e1..7f0122a4434e 100644
--- a/src/components/FormHelpMessage.js
+++ b/src/components/FormHelpMessage.js
@@ -2,10 +2,10 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import {View} from 'react-native';
 import _ from 'underscore';
+import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import * as Localize from '@libs/Localize';
 import stylePropTypes from '@styles/stylePropTypes';
-import useTheme from '@styles/theme/useTheme';
 import Icon from './Icon';
 import * as Expensicons from './Icon/Expensicons';
 import Text from './Text';
diff --git a/src/components/FullscreenLoadingIndicator.tsx b/src/components/FullscreenLoadingIndicator.tsx
index 731ac6e7f8e2..2b5f7b3ada72 100644
--- a/src/components/FullscreenLoadingIndicator.tsx
+++ b/src/components/FullscreenLoadingIndicator.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import {ActivityIndicator, StyleProp, StyleSheet, View, ViewStyle} from 'react-native';
+import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
-import useTheme from '@styles/theme/useTheme';
 
 type FullScreenLoadingIndicatorProps = {
     style?: StyleProp<ViewStyle>;
diff --git a/src/components/GrowlNotification/index.js b/src/components/GrowlNotification/index.js
index 4ebd361d6b33..bcb4a8703b94 100644
--- a/src/components/GrowlNotification/index.js
+++ b/src/components/GrowlNotification/index.js
@@ -5,10 +5,10 @@ import Icon from '@components/Icon';
 import * as Expensicons from '@components/Icon/Expensicons';
 import * as Pressables from '@components/Pressable';
 import Text from '@components/Text';
+import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import * as Growl from '@libs/Growl';
 import useNativeDriver from '@libs/useNativeDriver';
-import useTheme from '@styles/theme/useTheme';
 import CONST from '@src/CONST';
 import GrowlNotificationContainer from './GrowlNotificationContainer';
 
diff --git a/src/components/HTMLEngineProvider/HTMLRenderers/EditedRenderer.js b/src/components/HTMLEngineProvider/HTMLRenderers/EditedRenderer.js
index c92fafd6402c..8addca842cd1 100644
--- a/src/components/HTMLEngineProvider/HTMLRenderers/EditedRenderer.js
+++ b/src/components/HTMLEngineProvider/HTMLRenderers/EditedRenderer.js
@@ -3,7 +3,7 @@ import _ from 'underscore';
 import Text from '@components/Text';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
-import useTheme from '@styles/theme/useTheme';
+import useTheme from '@hooks/useTheme';
 import editedLabelStyles from '@styles/utils/editedLabelStyles';
 import variables from '@styles/variables';
 import CONST from '@src/CONST';
diff --git a/src/components/HeaderPageLayout.js b/src/components/HeaderPageLayout.js
index 17507854f389..9ef5d4f83a06 100644
--- a/src/components/HeaderPageLayout.js
+++ b/src/components/HeaderPageLayout.js
@@ -4,10 +4,10 @@ import {ScrollView, View} from 'react-native';
 import _ from 'underscore';
 import useNetwork from '@hooks/useNetwork';
 import useStyleUtils from '@hooks/useStyleUtils';
+import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import * as Browser from '@libs/Browser';
-import useTheme from '@styles/theme/useTheme';
 import FixedFooter from './FixedFooter';
 import HeaderWithBackButton from './HeaderWithBackButton';
 import headerWithBackButtonPropTypes from './HeaderWithBackButton/headerWithBackButtonPropTypes';
diff --git a/src/components/Icon/svgs/LoungeAccessIcon.tsx b/src/components/Icon/svgs/LoungeAccessIcon.tsx
index a79f6b25ccc6..e57573c439f1 100644
--- a/src/components/Icon/svgs/LoungeAccessIcon.tsx
+++ b/src/components/Icon/svgs/LoungeAccessIcon.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import Svg, {G, Path, Polygon} from 'react-native-svg';
-import useTheme from '@styles/theme/useTheme';
+import useTheme from '@hooks/useTheme';
 
 type LoungeAccessIconProps = {
     /** The fill color for the icon. Can be hex, rgb, rgba, or valid react-native named color such as 'red' or 'blue'. */
diff --git a/src/components/IllustratedHeaderPageLayout.js b/src/components/IllustratedHeaderPageLayout.js
index 87c919810404..9980d8a7879a 100644
--- a/src/components/IllustratedHeaderPageLayout.js
+++ b/src/components/IllustratedHeaderPageLayout.js
@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types';
 import React from 'react';
+import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
-import useTheme from '@styles/theme/useTheme';
 import HeaderPageLayout from './HeaderPageLayout';
 import headerWithBackButtonPropTypes from './HeaderWithBackButton/headerWithBackButtonPropTypes';
 import Lottie from './Lottie';
diff --git a/src/components/Indicator.js b/src/components/Indicator.js
index 6db6b3d6e5fa..6503796d7fbe 100644
--- a/src/components/Indicator.js
+++ b/src/components/Indicator.js
@@ -3,6 +3,7 @@ import React from 'react';
 import {StyleSheet, View} from 'react-native';
 import {withOnyx} from 'react-native-onyx';
 import _ from 'underscore';
+import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import * as PolicyUtils from '@libs/PolicyUtils';
 import * as UserUtils from '@libs/UserUtils';
@@ -11,7 +12,6 @@ import walletTermsPropTypes from '@pages/EnablePayments/walletTermsPropTypes';
 import policyMemberPropType from '@pages/policyMemberPropType';
 import * as ReimbursementAccountProps from '@pages/ReimbursementAccount/reimbursementAccountPropTypes';
 import {policyPropTypes} from '@pages/workspace/withPolicy';
-import useTheme from '@styles/theme/useTheme';
 import * as PaymentMethods from '@userActions/PaymentMethods';
 import ONYXKEYS from '@src/ONYXKEYS';
 import bankAccountPropTypes from './bankAccountPropTypes';
diff --git a/src/components/InlineSystemMessage.tsx b/src/components/InlineSystemMessage.tsx
index badf3c1ce0a8..bef4c21289d5 100644
--- a/src/components/InlineSystemMessage.tsx
+++ b/src/components/InlineSystemMessage.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import {View} from 'react-native';
+import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
-import useTheme from '@styles/theme/useTheme';
 import Icon from './Icon';
 import * as Expensicons from './Icon/Expensicons';
 import Text from './Text';
diff --git a/src/components/LHNOptionsList/OptionRowLHN.js b/src/components/LHNOptionsList/OptionRowLHN.js
index c65bbbf3db08..9974de6c94e5 100644
--- a/src/components/LHNOptionsList/OptionRowLHN.js
+++ b/src/components/LHNOptionsList/OptionRowLHN.js
@@ -16,6 +16,7 @@ import Text from '@components/Text';
 import Tooltip from '@components/Tooltip';
 import useLocalize from '@hooks/useLocalize';
 import useStyleUtils from '@hooks/useStyleUtils';
+import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import DateUtils from '@libs/DateUtils';
@@ -26,7 +27,6 @@ import ReportActionComposeFocusManager from '@libs/ReportActionComposeFocusManag
 import * as ReportUtils from '@libs/ReportUtils';
 import * as ContextMenuActions from '@pages/home/report/ContextMenu/ContextMenuActions';
 import * as ReportActionContextMenu from '@pages/home/report/ContextMenu/ReportActionContextMenu';
-import useTheme from '@styles/theme/useTheme';
 import CONST from '@src/CONST';
 
 const propTypes = {
diff --git a/src/components/LocalePicker.tsx b/src/components/LocalePicker.tsx
index 7f01395e8c0f..46adb1a4895e 100644
--- a/src/components/LocalePicker.tsx
+++ b/src/components/LocalePicker.tsx
@@ -1,8 +1,8 @@
 import React from 'react';
 import {OnyxEntry, withOnyx} from 'react-native-onyx';
 import useLocalize from '@hooks/useLocalize';
+import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
-import useTheme from '@styles/theme/useTheme';
 import * as App from '@userActions/App';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
diff --git a/src/components/MapView/MapView.website.tsx b/src/components/MapView/MapView.website.tsx
index db5c2af12c92..7910d7f93a29 100644
--- a/src/components/MapView/MapView.website.tsx
+++ b/src/components/MapView/MapView.website.tsx
@@ -10,8 +10,8 @@ import Map, {MapRef, Marker} from 'react-map-gl';
 import {View} from 'react-native';
 import {withOnyx} from 'react-native-onyx';
 import useStyleUtils from '@hooks/useStyleUtils';
+import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
-import useTheme from '@styles/theme/useTheme';
 import setUserLocation from '@userActions/UserLocation';
 import CONST from '@src/CONST';
 import useLocalize from '@src/hooks/useLocalize';
diff --git a/src/components/MentionSuggestions.tsx b/src/components/MentionSuggestions.tsx
index 4a0011056501..f1daaaa229be 100644
--- a/src/components/MentionSuggestions.tsx
+++ b/src/components/MentionSuggestions.tsx
@@ -1,9 +1,9 @@
 import React, {useCallback} from 'react';
 import {View} from 'react-native';
 import useStyleUtils from '@hooks/useStyleUtils';
+import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import getStyledTextArray from '@libs/GetStyledTextArray';
-import useTheme from '@styles/theme/useTheme';
 import CONST from '@src/CONST';
 import {Icon} from '@src/types/onyx/OnyxCommon';
 import AutoCompleteSuggestions from './AutoCompleteSuggestions';
diff --git a/src/components/MenuItem.js b/src/components/MenuItem.js
index f61c046d5289..f1866e0ded2b 100644
--- a/src/components/MenuItem.js
+++ b/src/components/MenuItem.js
@@ -3,13 +3,13 @@ import React, {useEffect, useMemo} from 'react';
 import {View} from 'react-native';
 import _ from 'underscore';
 import useStyleUtils from '@hooks/useStyleUtils';
+import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import ControlSelection from '@libs/ControlSelection';
 import convertToLTR from '@libs/convertToLTR';
 import * as DeviceCapabilities from '@libs/DeviceCapabilities';
 import getButtonState from '@libs/getButtonState';
-import useTheme from '@styles/theme/useTheme';
 import variables from '@styles/variables';
 import * as Session from '@userActions/Session';
 import CONST from '@src/CONST';
diff --git a/src/components/Modal/BaseModal.tsx b/src/components/Modal/BaseModal.tsx
index 238b95c4240d..6bb90fd2ceb2 100644
--- a/src/components/Modal/BaseModal.tsx
+++ b/src/components/Modal/BaseModal.tsx
@@ -9,7 +9,7 @@ import useThemeStyles from '@hooks/useThemeStyles';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import ComposerFocusManager from '@libs/ComposerFocusManager';
 import useNativeDriver from '@libs/useNativeDriver';
-import useTheme from '@styles/theme/useTheme';
+import useTheme from '@hooks/useTheme';
 import variables from '@styles/variables';
 import * as Modal from '@userActions/Modal';
 import CONST from '@src/CONST';
diff --git a/src/components/Modal/index.tsx b/src/components/Modal/index.tsx
index 206455573778..4269420dcd7f 100644
--- a/src/components/Modal/index.tsx
+++ b/src/components/Modal/index.tsx
@@ -1,8 +1,8 @@
 import React, {useState} from 'react';
 import withWindowDimensions from '@components/withWindowDimensions';
 import useStyleUtils from '@hooks/useStyleUtils';
+import useTheme from '@hooks/useTheme';
 import StatusBar from '@libs/StatusBar';
-import useTheme from '@styles/theme/useTheme';
 import CONST from '@src/CONST';
 import BaseModal from './BaseModal';
 import BaseModalProps from './types';
diff --git a/src/components/MoneyRequestConfirmationList.js b/src/components/MoneyRequestConfirmationList.js
index a2622280c3f9..6ba2a94f9a03 100755
--- a/src/components/MoneyRequestConfirmationList.js
+++ b/src/components/MoneyRequestConfirmationList.js
@@ -9,6 +9,7 @@ import {withOnyx} from 'react-native-onyx';
 import _ from 'underscore';
 import useLocalize from '@hooks/useLocalize';
 import usePermissions from '@hooks/usePermissions';
+import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import compose from '@libs/compose';
 import * as CurrencyUtils from '@libs/CurrencyUtils';
@@ -23,7 +24,6 @@ import * as ReceiptUtils from '@libs/ReceiptUtils';
 import * as ReportUtils from '@libs/ReportUtils';
 import * as TransactionUtils from '@libs/TransactionUtils';
 import {iouDefaultProps, iouPropTypes} from '@pages/iou/propTypes';
-import useTheme from '@styles/theme/useTheme';
 import * as IOU from '@userActions/IOU';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
diff --git a/src/components/MoneyRequestSkeletonView.tsx b/src/components/MoneyRequestSkeletonView.tsx
index 70576fb224ae..e11e7bcecc07 100644
--- a/src/components/MoneyRequestSkeletonView.tsx
+++ b/src/components/MoneyRequestSkeletonView.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import {Rect} from 'react-native-svg';
+import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
-import useTheme from '@styles/theme/useTheme';
 import variables from '@styles/variables';
 import SkeletonViewContentLoader from './SkeletonViewContentLoader';
 
diff --git a/src/components/MultipleAvatars.tsx b/src/components/MultipleAvatars.tsx
index 3e5e6a842033..997e63cb022f 100644
--- a/src/components/MultipleAvatars.tsx
+++ b/src/components/MultipleAvatars.tsx
@@ -2,9 +2,9 @@ import React, {memo, useMemo} from 'react';
 import {StyleProp, View, ViewStyle} from 'react-native';
 import {ValueOf} from 'type-fest';
 import useStyleUtils from '@hooks/useStyleUtils';
+import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import {AvatarSource} from '@libs/UserUtils';
-import useTheme from '@styles/theme/useTheme';
 import variables from '@styles/variables';
 import CONST from '@src/CONST';
 import type {Icon} from '@src/types/onyx/OnyxCommon';
diff --git a/src/components/Onfido/BaseOnfidoWeb.js b/src/components/Onfido/BaseOnfidoWeb.js
index 66e4975ec476..09ec96cf5b1e 100644
--- a/src/components/Onfido/BaseOnfidoWeb.js
+++ b/src/components/Onfido/BaseOnfidoWeb.js
@@ -3,10 +3,10 @@ import * as OnfidoSDK from 'onfido-sdk-ui';
 import React, {forwardRef, useEffect} from 'react';
 import _ from 'underscore';
 import useLocalize from '@hooks/useLocalize';
+import useTheme from '@hooks/useTheme';
 import Log from '@libs/Log';
 import fontFamily from '@styles/utils/fontFamily';
 import fontWeightBold from '@styles/utils/fontWeight/bold';
-import useTheme from '@styles/theme/useTheme';
 import variables from '@styles/variables';
 import CONST from '@src/CONST';
 import './index.css';
diff --git a/src/components/OptionRow.js b/src/components/OptionRow.js
index e115dad8cfb7..98d8860d4f81 100644
--- a/src/components/OptionRow.js
+++ b/src/components/OptionRow.js
@@ -4,10 +4,10 @@ import React, {useEffect, useRef, useState} from 'react';
 import {InteractionManager, StyleSheet, View} from 'react-native';
 import _ from 'underscore';
 import useStyleUtils from '@hooks/useStyleUtils';
+import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import * as OptionsListUtils from '@libs/OptionsListUtils';
 import * as ReportUtils from '@libs/ReportUtils';
-import useTheme from '@styles/theme/useTheme';
 import CONST from '@src/CONST';
 import Button from './Button';
 import DisplayNames from './DisplayNames';
diff --git a/src/components/Picker/BasePicker.tsx b/src/components/Picker/BasePicker.tsx
index 3cef1e7a480c..6f587f350b79 100644
--- a/src/components/Picker/BasePicker.tsx
+++ b/src/components/Picker/BasePicker.tsx
@@ -7,8 +7,8 @@ import Icon from '@components/Icon';
 import * as Expensicons from '@components/Icon/Expensicons';
 import Text from '@components/Text';
 import useScrollContext from '@hooks/useScrollContext';
+import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
-import useTheme from '@styles/theme/useTheme';
 import type {BasePickerHandle, BasePickerProps} from './types';
 
 type IconToRender = () => ReactElement;
diff --git a/src/components/PinButton.js b/src/components/PinButton.js
index a6b72b1bf1b1..0e331a2f8b45 100644
--- a/src/components/PinButton.js
+++ b/src/components/PinButton.js
@@ -1,7 +1,7 @@
 import React from 'react';
+import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import reportPropTypes from '@pages/reportPropTypes';
-import useTheme from '@styles/theme/useTheme';
 import * as Report from '@userActions/Report';
 import * as Session from '@userActions/Session';
 import CONST from '@src/CONST';
diff --git a/src/components/QRCode.tsx b/src/components/QRCode.tsx
index a7475e3da15c..99a3a1f64118 100644
--- a/src/components/QRCode.tsx
+++ b/src/components/QRCode.tsx
@@ -1,7 +1,7 @@
 import React, {Ref} from 'react';
 import {ImageSourcePropType} from 'react-native';
 import QRCodeLibrary from 'react-native-qrcode-svg';
-import useTheme from '@styles/theme/useTheme';
+import useTheme from '@hooks/useTheme';
 import CONST from '@src/CONST';
 
 type LogoRatio = typeof CONST.QR.DEFAULT_LOGO_SIZE_RATIO | typeof CONST.QR.EXPENSIFY_LOGO_SIZE_RATIO;
diff --git a/src/components/RadioButton.tsx b/src/components/RadioButton.tsx
index b25c09b90924..15791eb5307c 100644
--- a/src/components/RadioButton.tsx
+++ b/src/components/RadioButton.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import {View} from 'react-native';
+import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
-import useTheme from '@styles/theme/useTheme';
 import CONST from '@src/CONST';
 import Icon from './Icon';
 import * as Expensicons from './Icon/Expensicons';
diff --git a/src/components/ReportActionItem/MoneyReportView.js b/src/components/ReportActionItem/MoneyReportView.js
index 544f32e09880..c12659e94673 100644
--- a/src/components/ReportActionItem/MoneyReportView.js
+++ b/src/components/ReportActionItem/MoneyReportView.js
@@ -8,12 +8,12 @@ import Text from '@components/Text';
 import withWindowDimensions, {windowDimensionsPropTypes} from '@components/withWindowDimensions';
 import useLocalize from '@hooks/useLocalize';
 import useStyleUtils from '@hooks/useStyleUtils';
+import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import * as CurrencyUtils from '@libs/CurrencyUtils';
 import * as ReportUtils from '@libs/ReportUtils';
 import AnimatedEmptyStateBackground from '@pages/home/report/AnimatedEmptyStateBackground';
 import reportPropTypes from '@pages/reportPropTypes';
-import useTheme from '@styles/theme/useTheme';
 import variables from '@styles/variables';
 
 const propTypes = {
diff --git a/src/components/ReportActionItem/MoneyRequestPreview.js b/src/components/ReportActionItem/MoneyRequestPreview.js
index 6abe92d55b71..03d83d54d6e7 100644
--- a/src/components/ReportActionItem/MoneyRequestPreview.js
+++ b/src/components/ReportActionItem/MoneyRequestPreview.js
@@ -16,6 +16,7 @@ import Text from '@components/Text';
 import transactionPropTypes from '@components/transactionPropTypes';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
 import useStyleUtils from '@hooks/useStyleUtils';
+import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import compose from '@libs/compose';
@@ -30,7 +31,6 @@ import * as ReportUtils from '@libs/ReportUtils';
 import * as TransactionUtils from '@libs/TransactionUtils';
 import walletTermsPropTypes from '@pages/EnablePayments/walletTermsPropTypes';
 import reportActionPropTypes from '@pages/home/report/reportActionPropTypes';
-import useTheme from '@styles/theme/useTheme';
 import * as PaymentMethods from '@userActions/PaymentMethods';
 import * as Report from '@userActions/Report';
 import CONST from '@src/CONST';
diff --git a/src/components/ReportActionItem/MoneyRequestView.js b/src/components/ReportActionItem/MoneyRequestView.js
index d2e82e65bb7d..67a4a00b4a6e 100644
--- a/src/components/ReportActionItem/MoneyRequestView.js
+++ b/src/components/ReportActionItem/MoneyRequestView.js
@@ -18,6 +18,7 @@ import withCurrentUserPersonalDetails, {withCurrentUserPersonalDetailsPropTypes}
 import useLocalize from '@hooks/useLocalize';
 import usePermissions from '@hooks/usePermissions';
 import useStyleUtils from '@hooks/useStyleUtils';
+import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import * as CardUtils from '@libs/CardUtils';
@@ -34,7 +35,6 @@ import AnimatedEmptyStateBackground from '@pages/home/report/AnimatedEmptyStateB
 import reportActionPropTypes from '@pages/home/report/reportActionPropTypes';
 import iouReportPropTypes from '@pages/iouReportPropTypes';
 import reportPropTypes from '@pages/reportPropTypes';
-import useTheme from '@styles/theme/useTheme';
 import * as IOU from '@userActions/IOU';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
diff --git a/src/components/ReportActionItem/ReportActionItemImages.js b/src/components/ReportActionItem/ReportActionItemImages.js
index 97f1a929d57c..96f919aea750 100644
--- a/src/components/ReportActionItem/ReportActionItemImages.js
+++ b/src/components/ReportActionItem/ReportActionItemImages.js
@@ -6,8 +6,8 @@ import _ from 'underscore';
 import Text from '@components/Text';
 import transactionPropTypes from '@components/transactionPropTypes';
 import useStyleUtils from '@hooks/useStyleUtils';
+import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
-import useTheme from '@styles/theme/useTheme';
 import variables from '@styles/variables';
 import ReportActionItemImage from './ReportActionItemImage';
 
diff --git a/src/components/ReportActionItem/ReportPreview.js b/src/components/ReportActionItem/ReportPreview.js
index baa8dab48b35..286da7e1a8b8 100644
--- a/src/components/ReportActionItem/ReportPreview.js
+++ b/src/components/ReportActionItem/ReportPreview.js
@@ -14,6 +14,7 @@ import {showContextMenuForReport} from '@components/ShowContextMenuContext';
 import Text from '@components/Text';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
 import useLocalize from '@hooks/useLocalize';
+import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import compose from '@libs/compose';
 import ControlSelection from '@libs/ControlSelection';
@@ -26,7 +27,6 @@ import * as ReportUtils from '@libs/ReportUtils';
 import * as TransactionUtils from '@libs/TransactionUtils';
 import reportActionPropTypes from '@pages/home/report/reportActionPropTypes';
 import reportPropTypes from '@pages/reportPropTypes';
-import useTheme from '@styles/theme/useTheme';
 import * as IOU from '@userActions/IOU';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
diff --git a/src/components/ReportActionsSkeletonView/SkeletonViewLines.tsx b/src/components/ReportActionsSkeletonView/SkeletonViewLines.tsx
index abd4d2f9e27d..c4c2a3f43eb3 100644
--- a/src/components/ReportActionsSkeletonView/SkeletonViewLines.tsx
+++ b/src/components/ReportActionsSkeletonView/SkeletonViewLines.tsx
@@ -1,8 +1,8 @@
 import React from 'react';
 import {Circle, Rect} from 'react-native-svg';
 import SkeletonViewContentLoader from '@components/SkeletonViewContentLoader';
+import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
-import useTheme from '@styles/theme/useTheme';
 import CONST from '@src/CONST';
 
 type SkeletonViewLinesProps = {
diff --git a/src/components/ReportHeaderSkeletonView.tsx b/src/components/ReportHeaderSkeletonView.tsx
index c2130a80ef07..d62b898148d1 100644
--- a/src/components/ReportHeaderSkeletonView.tsx
+++ b/src/components/ReportHeaderSkeletonView.tsx
@@ -2,9 +2,9 @@ import React from 'react';
 import {View} from 'react-native';
 import {Circle, Rect} from 'react-native-svg';
 import useLocalize from '@hooks/useLocalize';
+import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import useWindowDimensions from '@hooks/useWindowDimensions';
-import useTheme from '@styles/theme/useTheme';
 import variables from '@styles/variables';
 import CONST from '@src/CONST';
 import Icon from './Icon';
diff --git a/src/components/RoomHeaderAvatars.js b/src/components/RoomHeaderAvatars.js
index 76dade6443f3..603c7309bbba 100644
--- a/src/components/RoomHeaderAvatars.js
+++ b/src/components/RoomHeaderAvatars.js
@@ -3,9 +3,9 @@ import React, {memo} from 'react';
 import {View} from 'react-native';
 import _ from 'underscore';
 import useStyleUtils from '@hooks/useStyleUtils';
+import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import * as UserUtils from '@libs/UserUtils';
-import useTheme from '@styles/theme/useTheme';
 import CONST from '@src/CONST';
 import AttachmentModal from './AttachmentModal';
 import Avatar from './Avatar';
diff --git a/src/components/SAMLLoadingIndicator.js b/src/components/SAMLLoadingIndicator.js
index 8c8867ed0467..83f86e1f01b9 100644
--- a/src/components/SAMLLoadingIndicator.js
+++ b/src/components/SAMLLoadingIndicator.js
@@ -2,7 +2,7 @@ import React from 'react';
 import {StyleSheet, View} from 'react-native';
 import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
-import useTheme from '@styles/theme/useTheme';
+import useTheme from '@hooks/useTheme';
 import Icon from './Icon';
 import * as Expensicons from './Icon/Expensicons';
 import * as Illustrations from './Icon/Illustrations';
diff --git a/src/components/SelectCircle.tsx b/src/components/SelectCircle.tsx
index 16e0341d41cf..637c06f4d35f 100644
--- a/src/components/SelectCircle.tsx
+++ b/src/components/SelectCircle.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import {StyleProp, View, ViewStyle} from 'react-native';
+import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
-import useTheme from '@styles/theme/useTheme';
 import Icon from './Icon';
 import * as Expensicons from './Icon/Expensicons';
 
diff --git a/src/components/SelectionList/BaseListItem.js b/src/components/SelectionList/BaseListItem.js
index 21976bdfd775..75cdc8d2da09 100644
--- a/src/components/SelectionList/BaseListItem.js
+++ b/src/components/SelectionList/BaseListItem.js
@@ -8,8 +8,8 @@ import PressableWithFeedback from '@components/Pressable/PressableWithFeedback';
 import Text from '@components/Text';
 import useLocalize from '@hooks/useLocalize';
 import useStyleUtils from '@hooks/useStyleUtils';
+import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
-import useTheme from '@styles/theme/useTheme';
 import CONST from '@src/CONST';
 import RadioListItem from './RadioListItem';
 import {baseListItemPropTypes} from './selectionListPropTypes';
diff --git a/src/components/SelectionList/BaseSelectionList.js b/src/components/SelectionList/BaseSelectionList.js
index c145fd5644fd..6dee0a89658d 100644
--- a/src/components/SelectionList/BaseSelectionList.js
+++ b/src/components/SelectionList/BaseSelectionList.js
@@ -17,9 +17,9 @@ import withKeyboardState, {keyboardStatePropTypes} from '@components/withKeyboar
 import useActiveElement from '@hooks/useActiveElement';
 import useKeyboardShortcut from '@hooks/useKeyboardShortcut';
 import useLocalize from '@hooks/useLocalize';
+import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import Log from '@libs/Log';
-import useTheme from '@styles/theme/useTheme';
 import variables from '@styles/variables';
 import CONST from '@src/CONST';
 import BaseListItem from './BaseListItem';
diff --git a/src/components/ShowMoreButton/index.js b/src/components/ShowMoreButton/index.js
index c9ca31558f5c..34b55fa5dcf1 100644
--- a/src/components/ShowMoreButton/index.js
+++ b/src/components/ShowMoreButton/index.js
@@ -5,10 +5,10 @@ import _ from 'underscore';
 import Button from '@components/Button';
 import * as Expensicons from '@components/Icon/Expensicons';
 import useLocalize from '@hooks/useLocalize';
+import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import * as NumberFormatUtils from '@libs/NumberFormatUtils';
 import stylePropTypes from '@styles/stylePropTypes';
-import useTheme from '@styles/theme/useTheme';
 
 const propTypes = {
     /** Additional styles for container */
diff --git a/src/components/SubscriptAvatar.tsx b/src/components/SubscriptAvatar.tsx
index 1cd29d260773..9a0aa934ff1b 100644
--- a/src/components/SubscriptAvatar.tsx
+++ b/src/components/SubscriptAvatar.tsx
@@ -2,9 +2,9 @@ import React, {memo} from 'react';
 import {View} from 'react-native';
 import {ValueOf} from 'type-fest';
 import useStyleUtils from '@hooks/useStyleUtils';
+import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import type {AvatarSource} from '@libs/UserUtils';
-import useTheme from '@styles/theme/useTheme';
 import CONST from '@src/CONST';
 import {AvatarType} from '@src/types/onyx/OnyxCommon';
 import Avatar from './Avatar';
diff --git a/src/components/TabSelector/TabIcon.js b/src/components/TabSelector/TabIcon.js
index 4dc5acf196d3..d96ae19897f4 100644
--- a/src/components/TabSelector/TabIcon.js
+++ b/src/components/TabSelector/TabIcon.js
@@ -2,7 +2,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import {Animated, StyleSheet, View} from 'react-native';
 import Icon from '@components/Icon';
-import useTheme from '@styles/theme/useTheme';
+import useTheme from '@hooks/useTheme';
 
 const propTypes = {
     /** Icon to display on tab */
diff --git a/src/components/TabSelector/TabSelector.js b/src/components/TabSelector/TabSelector.js
index ae4f9bfa5d34..50a7ee454d73 100644
--- a/src/components/TabSelector/TabSelector.js
+++ b/src/components/TabSelector/TabSelector.js
@@ -4,8 +4,8 @@ import {View} from 'react-native';
 import _ from 'underscore';
 import * as Expensicons from '@components/Icon/Expensicons';
 import useLocalize from '@hooks/useLocalize';
+import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
-import useTheme from '@styles/theme/useTheme';
 import CONST from '@src/CONST';
 import TabSelectorItem from './TabSelectorItem';
 
diff --git a/src/components/Text.tsx b/src/components/Text.tsx
index 4305cf8dd634..a3172dcfcecb 100644
--- a/src/components/Text.tsx
+++ b/src/components/Text.tsx
@@ -2,7 +2,7 @@ import React, {ForwardedRef} from 'react';
 // eslint-disable-next-line no-restricted-imports
 import {Text as RNText, TextProps as RNTextProps, StyleSheet} from 'react-native';
 import type {TextStyle} from 'react-native';
-import useTheme from '@styles/theme/useTheme';
+import useTheme from '@hooks/useTheme';
 import fontFamily from '@styles/utils/fontFamily';
 import variables from '@styles/variables';
 
diff --git a/src/components/TextInput/BaseTextInput/index.js b/src/components/TextInput/BaseTextInput/index.js
index d6ad9c909ae1..e7bbca1ea902 100644
--- a/src/components/TextInput/BaseTextInput/index.js
+++ b/src/components/TextInput/BaseTextInput/index.js
@@ -14,11 +14,11 @@ import * as styleConst from '@components/TextInput/styleConst';
 import TextInputLabel from '@components/TextInput/TextInputLabel';
 import withLocalize from '@components/withLocalize';
 import useStyleUtils from '@hooks/useStyleUtils';
+import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import * as Browser from '@libs/Browser';
 import isInputAutoFilled from '@libs/isInputAutoFilled';
 import useNativeDriver from '@libs/useNativeDriver';
-import useTheme from '@styles/theme/useTheme';
 import variables from '@styles/variables';
 import CONST from '@src/CONST';
 import * as baseTextInputPropTypes from './baseTextInputPropTypes';
diff --git a/src/components/TextInput/BaseTextInput/index.native.js b/src/components/TextInput/BaseTextInput/index.native.js
index 4cef684785d1..2151af206149 100644
--- a/src/components/TextInput/BaseTextInput/index.native.js
+++ b/src/components/TextInput/BaseTextInput/index.native.js
@@ -14,11 +14,11 @@ import * as styleConst from '@components/TextInput/styleConst';
 import TextInputLabel from '@components/TextInput/TextInputLabel';
 import withLocalize from '@components/withLocalize';
 import useStyleUtils from '@hooks/useStyleUtils';
+import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import getSecureEntryKeyboardType from '@libs/getSecureEntryKeyboardType';
 import isInputAutoFilled from '@libs/isInputAutoFilled';
 import useNativeDriver from '@libs/useNativeDriver';
-import useTheme from '@styles/theme/useTheme';
 import variables from '@styles/variables';
 import CONST from '@src/CONST';
 import * as baseTextInputPropTypes from './baseTextInputPropTypes';
diff --git a/src/components/ValidateCode/ExpiredValidateCodeModal.js b/src/components/ValidateCode/ExpiredValidateCodeModal.js
index 7a32c1b82fe7..cb880a0a2844 100644
--- a/src/components/ValidateCode/ExpiredValidateCodeModal.js
+++ b/src/components/ValidateCode/ExpiredValidateCodeModal.js
@@ -5,8 +5,8 @@ import * as Expensicons from '@components/Icon/Expensicons';
 import * as Illustrations from '@components/Icon/Illustrations';
 import Text from '@components/Text';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
+import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
-import useTheme from '@styles/theme/useTheme';
 import variables from '@styles/variables';
 
 const propTypes = {
diff --git a/src/components/ValidateCode/JustSignedInModal.js b/src/components/ValidateCode/JustSignedInModal.js
index 2c9e15345f3e..fedb92c49ee3 100644
--- a/src/components/ValidateCode/JustSignedInModal.js
+++ b/src/components/ValidateCode/JustSignedInModal.js
@@ -6,8 +6,8 @@ import * as Expensicons from '@components/Icon/Expensicons';
 import * as Illustrations from '@components/Icon/Illustrations';
 import Text from '@components/Text';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
+import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
-import useTheme from '@styles/theme/useTheme';
 import variables from '@styles/variables';
 
 const propTypes = {
diff --git a/src/components/ValidateCode/ValidateCodeModal.js b/src/components/ValidateCode/ValidateCodeModal.js
index 30fe421d1ded..a2fea513f851 100644
--- a/src/components/ValidateCode/ValidateCodeModal.js
+++ b/src/components/ValidateCode/ValidateCodeModal.js
@@ -10,8 +10,8 @@ import * as Illustrations from '@components/Icon/Illustrations';
 import Text from '@components/Text';
 import TextLink from '@components/TextLink';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
+import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
-import useTheme from '@styles/theme/useTheme';
 import variables from '@styles/variables';
 import * as Session from '@userActions/Session';
 import ONYXKEYS from '@src/ONYXKEYS';
diff --git a/src/components/VideoChatButtonAndMenu/BaseVideoChatButtonAndMenu.js b/src/components/VideoChatButtonAndMenu/BaseVideoChatButtonAndMenu.js
index 1f08035dd2d3..96623660fa93 100755
--- a/src/components/VideoChatButtonAndMenu/BaseVideoChatButtonAndMenu.js
+++ b/src/components/VideoChatButtonAndMenu/BaseVideoChatButtonAndMenu.js
@@ -12,9 +12,9 @@ import PressableWithoutFeedback from '@components/Pressable/PressableWithoutFeed
 import Tooltip from '@components/Tooltip/PopoverAnchorTooltip';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
 import withWindowDimensions, {windowDimensionsPropTypes} from '@components/withWindowDimensions';
+import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import compose from '@libs/compose';
-import useTheme from '@styles/theme/useTheme';
 import * as Link from '@userActions/Link';
 import * as Session from '@userActions/Session';
 import CONST from '@src/CONST';
diff --git a/src/components/withTheme.tsx b/src/components/withTheme.tsx
index e1870d37aaf7..93349e8e2ba4 100644
--- a/src/components/withTheme.tsx
+++ b/src/components/withTheme.tsx
@@ -1,8 +1,8 @@
 import PropTypes from 'prop-types';
 import React, {ComponentType, ForwardedRef, forwardRef, ReactElement, RefAttributes} from 'react';
+import useTheme from '@hooks/useTheme';
 import getComponentDisplayName from '@libs/getComponentDisplayName';
 import {type ThemeColors} from '@styles/theme/types';
-import useTheme from '@styles/theme/useTheme';
 
 const withThemePropTypes = {
     theme: PropTypes.object.isRequired,
diff --git a/src/styles/theme/useTheme.ts b/src/hooks/useTheme.ts
similarity index 87%
rename from src/styles/theme/useTheme.ts
rename to src/hooks/useTheme.ts
index 898abb9d6bfc..7e61784ef3e7 100644
--- a/src/styles/theme/useTheme.ts
+++ b/src/hooks/useTheme.ts
@@ -1,6 +1,6 @@
 import {useContext} from 'react';
 import ThemeContext from '@styles/context/ThemeContext';
-import {type ThemeColors} from './types';
+import {type ThemeColors} from '@styles/theme/types';
 
 function useTheme(): ThemeColors {
     const theme = useContext(ThemeContext);
diff --git a/src/libs/Navigation/NavigationRoot.tsx b/src/libs/Navigation/NavigationRoot.tsx
index 96f8173404dc..48523162ba2e 100644
--- a/src/libs/Navigation/NavigationRoot.tsx
+++ b/src/libs/Navigation/NavigationRoot.tsx
@@ -2,9 +2,9 @@ import {DefaultTheme, getPathFromState, NavigationContainer, NavigationState} fr
 import React, {useEffect, useMemo, useRef} from 'react';
 import useCurrentReportID from '@hooks/useCurrentReportID';
 import useFlipper from '@hooks/useFlipper';
+import useTheme from '@hooks/useTheme';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import Log from '@libs/Log';
-import useTheme from '@styles/theme/useTheme';
 import AppNavigator from './AppNavigator';
 import linkingConfig from './linkingConfig';
 import Navigation, {navigationRef} from './Navigation';
diff --git a/src/pages/ErrorPage/GenericErrorPage.js b/src/pages/ErrorPage/GenericErrorPage.js
index 1e3bed0c7d29..85d49a8b9074 100644
--- a/src/pages/ErrorPage/GenericErrorPage.js
+++ b/src/pages/ErrorPage/GenericErrorPage.js
@@ -10,8 +10,8 @@ import Text from '@components/Text';
 import TextLink from '@components/TextLink';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
 import useStyleUtils from '@hooks/useStyleUtils';
+import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
-import useTheme from '@styles/theme/useTheme';
 import variables from '@styles/variables';
 import * as Session from '@userActions/Session';
 import CONST from '@src/CONST';
diff --git a/src/pages/LogInWithShortLivedAuthTokenPage.js b/src/pages/LogInWithShortLivedAuthTokenPage.js
index d9a191261c12..1fe9b67eef16 100644
--- a/src/pages/LogInWithShortLivedAuthTokenPage.js
+++ b/src/pages/LogInWithShortLivedAuthTokenPage.js
@@ -10,9 +10,9 @@ import * as Illustrations from '@components/Icon/Illustrations';
 import Text from '@components/Text';
 import TextLink from '@components/TextLink';
 import useLocalize from '@hooks/useLocalize';
+import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import Navigation from '@libs/Navigation/Navigation';
-import useTheme from '@styles/theme/useTheme';
 import * as Session from '@userActions/Session';
 import ONYXKEYS from '@src/ONYXKEYS';
 
diff --git a/src/pages/ReimbursementAccount/BankAccountStep.js b/src/pages/ReimbursementAccount/BankAccountStep.js
index 84545ff39baf..b32c433a41d5 100644
--- a/src/pages/ReimbursementAccount/BankAccountStep.js
+++ b/src/pages/ReimbursementAccount/BankAccountStep.js
@@ -15,10 +15,10 @@ import Section from '@components/Section';
 import Text from '@components/Text';
 import TextLink from '@components/TextLink';
 import withLocalize from '@components/withLocalize';
+import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import compose from '@libs/compose';
 import getPlaidDesktopMessage from '@libs/getPlaidDesktopMessage';
-import useTheme from '@styles/theme/useTheme';
 import * as BankAccounts from '@userActions/BankAccounts';
 import * as Link from '@userActions/Link';
 import CONFIG from '@src/CONFIG';
diff --git a/src/pages/TeachersUnite/SaveTheWorldPage.js b/src/pages/TeachersUnite/SaveTheWorldPage.js
index b55a308decc0..36e03f0b4716 100644
--- a/src/pages/TeachersUnite/SaveTheWorldPage.js
+++ b/src/pages/TeachersUnite/SaveTheWorldPage.js
@@ -8,9 +8,9 @@ import LottieAnimations from '@components/LottieAnimations';
 import MenuItem from '@components/MenuItem';
 import Text from '@components/Text';
 import useLocalize from '@hooks/useLocalize';
+import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import Navigation from '@libs/Navigation/Navigation';
-import useTheme from '@styles/theme/useTheme';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
diff --git a/src/pages/home/HeaderView.js b/src/pages/home/HeaderView.js
index 8207129e1482..6d3e4dcab6ae 100644
--- a/src/pages/home/HeaderView.js
+++ b/src/pages/home/HeaderView.js
@@ -20,6 +20,7 @@ import Text from '@components/Text';
 import ThreeDotsMenu from '@components/ThreeDotsMenu';
 import Tooltip from '@components/Tooltip';
 import useLocalize from '@hooks/useLocalize';
+import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import {getGroupChatName} from '@libs/GroupChatUtils';
@@ -29,7 +30,6 @@ import * as OptionsListUtils from '@libs/OptionsListUtils';
 import * as ReportActionsUtils from '@libs/ReportActionsUtils';
 import * as ReportUtils from '@libs/ReportUtils';
 import reportPropTypes from '@pages/reportPropTypes';
-import useTheme from '@styles/theme/useTheme';
 import * as Link from '@userActions/Link';
 import * as Report from '@userActions/Report';
 import * as Session from '@userActions/Session';
diff --git a/src/pages/home/report/FloatingMessageCounter/index.js b/src/pages/home/report/FloatingMessageCounter/index.js
index 31d5759c3248..07138104bf74 100644
--- a/src/pages/home/report/FloatingMessageCounter/index.js
+++ b/src/pages/home/report/FloatingMessageCounter/index.js
@@ -6,9 +6,9 @@ import Icon from '@components/Icon';
 import * as Expensicons from '@components/Icon/Expensicons';
 import Text from '@components/Text';
 import useLocalize from '@hooks/useLocalize';
+import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import useNativeDriver from '@libs/useNativeDriver';
-import useTheme from '@styles/theme/useTheme';
 import CONST from '@src/CONST';
 import FloatingMessageCounterContainer from './FloatingMessageCounterContainer';
 
diff --git a/src/pages/home/report/LinkPreviewer.js b/src/pages/home/report/LinkPreviewer.js
index bcf5a795e072..f62295a6fb71 100644
--- a/src/pages/home/report/LinkPreviewer.js
+++ b/src/pages/home/report/LinkPreviewer.js
@@ -6,8 +6,8 @@ import _ from 'underscore';
 import Text from '@components/Text';
 import TextLink from '@components/TextLink';
 import useStyleUtils from '@hooks/useStyleUtils';
+import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
-import useTheme from '@styles/theme/useTheme';
 import variables from '@styles/variables';
 
 const IMAGE_TYPES = ['jpg', 'jpeg', 'png'];
diff --git a/src/pages/home/report/ListBoundaryLoader/ListBoundaryLoader.js b/src/pages/home/report/ListBoundaryLoader/ListBoundaryLoader.js
index c8bf6c9c9c9a..77bcc7bdd38e 100644
--- a/src/pages/home/report/ListBoundaryLoader/ListBoundaryLoader.js
+++ b/src/pages/home/report/ListBoundaryLoader/ListBoundaryLoader.js
@@ -3,8 +3,8 @@ import React from 'react';
 import {ActivityIndicator, View} from 'react-native';
 import ReportActionsSkeletonView from '@components/ReportActionsSkeletonView';
 import useNetwork from '@hooks/useNetwork';
+import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
-import useTheme from '@styles/theme/useTheme';
 import CONST from '@src/CONST';
 
 const propTypes = {
diff --git a/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.js b/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.js
index b86fa7666cfe..19f68ff3b0ef 100644
--- a/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.js
+++ b/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.js
@@ -10,6 +10,7 @@ import useDebounce from '@hooks/useDebounce';
 import useLocalize from '@hooks/useLocalize';
 import usePrevious from '@hooks/usePrevious';
 import useStyleUtils from '@hooks/useStyleUtils';
+import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import canFocusInputOnScreenFocus from '@libs/canFocusInputOnScreenFocus';
@@ -28,7 +29,6 @@ import updateMultilineInputRange from '@libs/UpdateMultilineInputRange';
 import willBlurTextInputOnTapOutsideFunc from '@libs/willBlurTextInputOnTapOutside';
 import SilentCommentUpdater from '@pages/home/report/ReportActionCompose/SilentCommentUpdater';
 import Suggestions from '@pages/home/report/ReportActionCompose/Suggestions';
-import useTheme from '@styles/theme/useTheme';
 import * as EmojiPickerActions from '@userActions/EmojiPickerAction';
 import * as InputFocus from '@userActions/InputFocus';
 import * as Report from '@userActions/Report';
diff --git a/src/pages/home/report/ReportActionCompose/SendButton.js b/src/pages/home/report/ReportActionCompose/SendButton.js
index 222e56ca2298..c6e876a15d90 100644
--- a/src/pages/home/report/ReportActionCompose/SendButton.js
+++ b/src/pages/home/report/ReportActionCompose/SendButton.js
@@ -7,8 +7,8 @@ import * as Expensicons from '@components/Icon/Expensicons';
 import PressableWithFeedback from '@components/Pressable/PressableWithFeedback';
 import Tooltip from '@components/Tooltip';
 import useLocalize from '@hooks/useLocalize';
+import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
-import useTheme from '@styles/theme/useTheme';
 import CONST from '@src/CONST';
 
 const propTypes = {
diff --git a/src/pages/home/report/ReportActionItem.js b/src/pages/home/report/ReportActionItem.js
index 0747bba82dae..b6c7cdad236f 100644
--- a/src/pages/home/report/ReportActionItem.js
+++ b/src/pages/home/report/ReportActionItem.js
@@ -33,6 +33,7 @@ import withLocalize from '@components/withLocalize';
 import withWindowDimensions, {windowDimensionsPropTypes} from '@components/withWindowDimensions';
 import usePrevious from '@hooks/usePrevious';
 import useStyleUtils from '@hooks/useStyleUtils';
+import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import compose from '@libs/compose';
 import ControlSelection from '@libs/ControlSelection';
@@ -48,7 +49,6 @@ import SelectionScraper from '@libs/SelectionScraper';
 import userWalletPropTypes from '@pages/EnablePayments/userWalletPropTypes';
 import {ReactionListContext} from '@pages/home/ReportScreenContext';
 import reportPropTypes from '@pages/reportPropTypes';
-import useTheme from '@styles/theme/useTheme';
 import * as BankAccounts from '@userActions/BankAccounts';
 import * as EmojiPickerAction from '@userActions/EmojiPickerAction';
 import * as store from '@userActions/ReimbursementAccount/store';
diff --git a/src/pages/home/report/ReportActionItemSingle.js b/src/pages/home/report/ReportActionItemSingle.js
index 04d92e8ec70f..cbbd52d9c7d2 100644
--- a/src/pages/home/report/ReportActionItemSingle.js
+++ b/src/pages/home/report/ReportActionItemSingle.js
@@ -14,6 +14,7 @@ import Tooltip from '@components/Tooltip';
 import UserDetailsTooltip from '@components/UserDetailsTooltip';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
 import useStyleUtils from '@hooks/useStyleUtils';
+import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import ControlSelection from '@libs/ControlSelection';
 import DateUtils from '@libs/DateUtils';
@@ -22,7 +23,6 @@ import * as ReportUtils from '@libs/ReportUtils';
 import * as UserUtils from '@libs/UserUtils';
 import reportPropTypes from '@pages/reportPropTypes';
 import stylePropTypes from '@styles/stylePropTypes';
-import useTheme from '@styles/theme/useTheme';
 import CONST from '@src/CONST';
 import ROUTES from '@src/ROUTES';
 import ReportActionItemDate from './ReportActionItemDate';
diff --git a/src/pages/home/report/comment/TextCommentFragment.js b/src/pages/home/report/comment/TextCommentFragment.js
index 057fc59f16e0..dd664079f818 100644
--- a/src/pages/home/report/comment/TextCommentFragment.js
+++ b/src/pages/home/report/comment/TextCommentFragment.js
@@ -5,6 +5,7 @@ import Text from '@components/Text';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
 import withWindowDimensions, {windowDimensionsPropTypes} from '@components/withWindowDimensions';
 import ZeroWidthView from '@components/ZeroWidthView';
+import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import compose from '@libs/compose';
 import convertToLTR from '@libs/convertToLTR';
@@ -12,7 +13,6 @@ import * as DeviceCapabilities from '@libs/DeviceCapabilities';
 import * as EmojiUtils from '@libs/EmojiUtils';
 import reportActionFragmentPropTypes from '@pages/home/report/reportActionFragmentPropTypes';
 import reportActionSourcePropType from '@pages/home/report/reportActionSourcePropType';
-import useTheme from '@styles/theme/useTheme';
 import editedLabelStyles from '@styles/utils/editedLabelStyles';
 import variables from '@styles/variables';
 import CONST from '@src/CONST';
diff --git a/src/pages/home/sidebar/SidebarLinks.js b/src/pages/home/sidebar/SidebarLinks.js
index 99a797a07422..bb5c89fb9f5c 100644
--- a/src/pages/home/sidebar/SidebarLinks.js
+++ b/src/pages/home/sidebar/SidebarLinks.js
@@ -13,6 +13,7 @@ import PressableWithoutFeedback from '@components/Pressable/PressableWithoutFeed
 import Tooltip from '@components/Tooltip';
 import useLocalize from '@hooks/useLocalize';
 import useStyleUtils from '@hooks/useStyleUtils';
+import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import KeyboardShortcut from '@libs/KeyboardShortcut';
@@ -21,7 +22,6 @@ import onyxSubscribe from '@libs/onyxSubscribe';
 import SidebarUtils from '@libs/SidebarUtils';
 import * as ReportActionContextMenu from '@pages/home/report/ContextMenu/ReportActionContextMenu';
 import safeAreaInsetPropTypes from '@pages/safeAreaInsetPropTypes';
-import useTheme from '@styles/theme/useTheme';
 import variables from '@styles/variables';
 import * as App from '@userActions/App';
 import * as Session from '@userActions/Session';
diff --git a/src/pages/iou/ReceiptSelector/index.js b/src/pages/iou/ReceiptSelector/index.js
index cc10ab9858c5..28d903523af4 100644
--- a/src/pages/iou/ReceiptSelector/index.js
+++ b/src/pages/iou/ReceiptSelector/index.js
@@ -15,6 +15,7 @@ import Icon from '@components/Icon';
 import * as Expensicons from '@components/Icon/Expensicons';
 import PressableWithFeedback from '@components/Pressable/PressableWithFeedback';
 import useLocalize from '@hooks/useLocalize';
+import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import * as Browser from '@libs/Browser';
@@ -23,7 +24,6 @@ import Navigation from '@libs/Navigation/Navigation';
 import {iouDefaultProps, iouPropTypes} from '@pages/iou/propTypes';
 import ReceiptDropUI from '@pages/iou/ReceiptDropUI';
 import reportPropTypes from '@pages/reportPropTypes';
-import useTheme from '@styles/theme/useTheme';
 import * as IOU from '@userActions/IOU';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
diff --git a/src/pages/iou/ReceiptSelector/index.native.js b/src/pages/iou/ReceiptSelector/index.native.js
index 5dcba6eaeb72..d7c2041f5fe1 100644
--- a/src/pages/iou/ReceiptSelector/index.native.js
+++ b/src/pages/iou/ReceiptSelector/index.native.js
@@ -13,13 +13,13 @@ import Icon from '@components/Icon';
 import * as Expensicons from '@components/Icon/Expensicons';
 import PressableWithFeedback from '@components/Pressable/PressableWithFeedback';
 import useLocalize from '@hooks/useLocalize';
+import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import * as FileUtils from '@libs/fileDownload/FileUtils';
 import Log from '@libs/Log';
 import Navigation from '@libs/Navigation/Navigation';
 import {iouDefaultProps, iouPropTypes} from '@pages/iou/propTypes';
 import reportPropTypes from '@pages/reportPropTypes';
-import useTheme from '@styles/theme/useTheme';
 import * as IOU from '@userActions/IOU';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
diff --git a/src/pages/settings/InitialSettingsPage.js b/src/pages/settings/InitialSettingsPage.js
index 99e756fa692f..e5107dac98f8 100755
--- a/src/pages/settings/InitialSettingsPage.js
+++ b/src/pages/settings/InitialSettingsPage.js
@@ -21,6 +21,7 @@ import withCurrentUserPersonalDetails, {withCurrentUserPersonalDetailsDefaultPro
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
 import useLocalize from '@hooks/useLocalize';
 import useSingleExecution from '@hooks/useSingleExecution';
+import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import useWaitForNavigation from '@hooks/useWaitForNavigation';
 import compose from '@libs/compose';
@@ -34,7 +35,6 @@ import {CONTEXT_MENU_TYPES} from '@pages/home/report/ContextMenu/ContextMenuActi
 import * as ReportActionContextMenu from '@pages/home/report/ContextMenu/ReportActionContextMenu';
 import policyMemberPropType from '@pages/policyMemberPropType';
 import * as ReimbursementAccountProps from '@pages/ReimbursementAccount/reimbursementAccountPropTypes';
-import useTheme from '@styles/theme/useTheme';
 import * as Link from '@userActions/Link';
 import * as PaymentMethods from '@userActions/PaymentMethods';
 import * as Session from '@userActions/Session';
diff --git a/src/pages/settings/Preferences/PreferencesPage.js b/src/pages/settings/Preferences/PreferencesPage.js
index cb5af6f913e5..015cd007732b 100755
--- a/src/pages/settings/Preferences/PreferencesPage.js
+++ b/src/pages/settings/Preferences/PreferencesPage.js
@@ -11,9 +11,9 @@ import TestToolMenu from '@components/TestToolMenu';
 import Text from '@components/Text';
 import useEnvironment from '@hooks/useEnvironment';
 import useLocalize from '@hooks/useLocalize';
+import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import Navigation from '@libs/Navigation/Navigation';
-import useTheme from '@styles/theme/useTheme';
 import * as User from '@userActions/User';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
diff --git a/src/pages/settings/Profile/Contacts/ValidateCodeForm/BaseValidateCodeForm.js b/src/pages/settings/Profile/Contacts/ValidateCodeForm/BaseValidateCodeForm.js
index 5b51ca51fa5f..39252a89e9e5 100644
--- a/src/pages/settings/Profile/Contacts/ValidateCodeForm/BaseValidateCodeForm.js
+++ b/src/pages/settings/Profile/Contacts/ValidateCodeForm/BaseValidateCodeForm.js
@@ -14,11 +14,11 @@ import PressableWithFeedback from '@components/Pressable/PressableWithFeedback';
 import Text from '@components/Text';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
 import useStyleUtils from '@hooks/useStyleUtils';
+import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import compose from '@libs/compose';
 import * as ErrorUtils from '@libs/ErrorUtils';
 import * as ValidationUtils from '@libs/ValidationUtils';
-import useTheme from '@styles/theme/useTheme';
 import * as Session from '@userActions/Session';
 import * as User from '@userActions/User';
 import CONST from '@src/CONST';
diff --git a/src/pages/settings/Profile/CustomStatus/StatusPage.js b/src/pages/settings/Profile/CustomStatus/StatusPage.js
index 121cc33fdcdf..802296a1df7a 100644
--- a/src/pages/settings/Profile/CustomStatus/StatusPage.js
+++ b/src/pages/settings/Profile/CustomStatus/StatusPage.js
@@ -11,10 +11,10 @@ import MenuItemWithTopDescription from '@components/MenuItemWithTopDescription';
 import Text from '@components/Text';
 import withCurrentUserPersonalDetails, {withCurrentUserPersonalDetailsPropTypes} from '@components/withCurrentUserPersonalDetails';
 import useLocalize from '@hooks/useLocalize';
+import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import compose from '@libs/compose';
 import Navigation from '@libs/Navigation/Navigation';
-import useTheme from '@styles/theme/useTheme';
 import * as User from '@userActions/User';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
diff --git a/src/pages/settings/Security/SecuritySettingsPage.js b/src/pages/settings/Security/SecuritySettingsPage.js
index 81afbb068ab8..392a264977c6 100644
--- a/src/pages/settings/Security/SecuritySettingsPage.js
+++ b/src/pages/settings/Security/SecuritySettingsPage.js
@@ -8,11 +8,11 @@ import IllustratedHeaderPageLayout from '@components/IllustratedHeaderPageLayout
 import LottieAnimations from '@components/LottieAnimations';
 import MenuItemList from '@components/MenuItemList';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
+import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import useWaitForNavigation from '@hooks/useWaitForNavigation';
 import compose from '@libs/compose';
 import Navigation from '@libs/Navigation/Navigation';
-import useTheme from '@styles/theme/useTheme';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
 import SCREENS from '@src/SCREENS';
diff --git a/src/pages/settings/Security/TwoFactorAuth/Steps/CodesStep.js b/src/pages/settings/Security/TwoFactorAuth/Steps/CodesStep.js
index 0b633138c765..420d976dcd26 100644
--- a/src/pages/settings/Security/TwoFactorAuth/Steps/CodesStep.js
+++ b/src/pages/settings/Security/TwoFactorAuth/Steps/CodesStep.js
@@ -11,6 +11,7 @@ import PressableWithDelayToggle from '@components/Pressable/PressableWithDelayTo
 import Section from '@components/Section';
 import Text from '@components/Text';
 import useLocalize from '@hooks/useLocalize';
+import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import Clipboard from '@libs/Clipboard';
@@ -18,7 +19,6 @@ import localFileDownload from '@libs/localFileDownload';
 import StepWrapper from '@pages/settings/Security/TwoFactorAuth/StepWrapper/StepWrapper';
 import useTwoFactorAuthContext from '@pages/settings/Security/TwoFactorAuth/TwoFactorAuthContext/useTwoFactorAuth';
 import {defaultAccount, TwoFactorAuthPropTypes} from '@pages/settings/Security/TwoFactorAuth/TwoFactorAuthPropTypes';
-import useTheme from '@styles/theme/useTheme';
 import * as Session from '@userActions/Session';
 import * as TwoFactorAuthActions from '@userActions/TwoFactorAuthActions';
 import CONST from '@src/CONST';
diff --git a/src/pages/settings/Security/TwoFactorAuth/Steps/EnabledStep.js b/src/pages/settings/Security/TwoFactorAuth/Steps/EnabledStep.js
index 8d6648edb4e3..27f9c0f04404 100644
--- a/src/pages/settings/Security/TwoFactorAuth/Steps/EnabledStep.js
+++ b/src/pages/settings/Security/TwoFactorAuth/Steps/EnabledStep.js
@@ -5,10 +5,10 @@ import * as Expensicons from '@components/Icon/Expensicons';
 import * as Illustrations from '@components/Icon/Illustrations';
 import Section from '@components/Section';
 import useLocalize from '@hooks/useLocalize';
+import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import StepWrapper from '@pages/settings/Security/TwoFactorAuth/StepWrapper/StepWrapper';
 import useTwoFactorAuthContext from '@pages/settings/Security/TwoFactorAuth/TwoFactorAuthContext/useTwoFactorAuth';
-import useTheme from '@styles/theme/useTheme';
 import * as Session from '@userActions/Session';
 import CONST from '@src/CONST';
 
diff --git a/src/pages/settings/Wallet/ActivatePhysicalCardPage.js b/src/pages/settings/Wallet/ActivatePhysicalCardPage.js
index 32090ab0428a..9b49b107f2e6 100644
--- a/src/pages/settings/Wallet/ActivatePhysicalCardPage.js
+++ b/src/pages/settings/Wallet/ActivatePhysicalCardPage.js
@@ -12,6 +12,7 @@ import MagicCodeInput from '@components/MagicCodeInput';
 import Text from '@components/Text';
 import useLocalize from '@hooks/useLocalize';
 import useNetwork from '@hooks/useNetwork';
+import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import * as CardUtils from '@libs/CardUtils';
@@ -19,7 +20,6 @@ import * as DeviceCapabilities from '@libs/DeviceCapabilities';
 import * as ErrorUtils from '@libs/ErrorUtils';
 import Navigation from '@libs/Navigation/Navigation';
 import NotFoundPage from '@pages/ErrorPage/NotFoundPage';
-import useTheme from '@styles/theme/useTheme';
 import * as CardSettings from '@userActions/Card';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
diff --git a/src/pages/settings/Wallet/ExpensifyCardPage.js b/src/pages/settings/Wallet/ExpensifyCardPage.js
index 293503468007..f1dae1dfe8bd 100644
--- a/src/pages/settings/Wallet/ExpensifyCardPage.js
+++ b/src/pages/settings/Wallet/ExpensifyCardPage.js
@@ -13,6 +13,7 @@ import MenuItemWithTopDescription from '@components/MenuItemWithTopDescription';
 import ScreenWrapper from '@components/ScreenWrapper';
 import useLocalize from '@hooks/useLocalize';
 import useNetwork from '@hooks/useNetwork';
+import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import * as CardUtils from '@libs/CardUtils';
 import * as CurrencyUtils from '@libs/CurrencyUtils';
@@ -20,7 +21,6 @@ import FormUtils from '@libs/FormUtils';
 import * as GetPhysicalCardUtils from '@libs/GetPhysicalCardUtils';
 import Navigation from '@libs/Navigation/Navigation';
 import NotFoundPage from '@pages/ErrorPage/NotFoundPage';
-import useTheme from '@styles/theme/useTheme';
 import * as Card from '@userActions/Card';
 import * as Link from '@userActions/Link';
 import CONST from '@src/CONST';
diff --git a/src/pages/settings/Wallet/WalletEmptyState.js b/src/pages/settings/Wallet/WalletEmptyState.js
index 824671418df7..050376be7035 100644
--- a/src/pages/settings/Wallet/WalletEmptyState.js
+++ b/src/pages/settings/Wallet/WalletEmptyState.js
@@ -6,8 +6,8 @@ import * as Illustrations from '@components/Icon/Illustrations';
 import IllustratedHeaderPageLayout from '@components/IllustratedHeaderPageLayout';
 import LottieAnimations from '@components/LottieAnimations';
 import useLocalize from '@hooks/useLocalize';
+import useTheme from '@hooks/useTheme';
 import Navigation from '@libs/Navigation/Navigation';
-import useTheme from '@styles/theme/useTheme';
 import ROUTES from '@src/ROUTES';
 import SCREENS from '@src/SCREENS';
 
diff --git a/src/pages/settings/Wallet/WalletPage/WalletPage.js b/src/pages/settings/Wallet/WalletPage/WalletPage.js
index 71b4c0d185cf..d9d96946d199 100644
--- a/src/pages/settings/Wallet/WalletPage/WalletPage.js
+++ b/src/pages/settings/Wallet/WalletPage/WalletPage.js
@@ -20,6 +20,7 @@ import ScreenWrapper from '@components/ScreenWrapper';
 import Text from '@components/Text';
 import WalletSection from '@components/WalletSection';
 import useLocalize from '@hooks/useLocalize';
+import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import compose from '@libs/compose';
@@ -28,7 +29,6 @@ import Navigation from '@libs/Navigation/Navigation';
 import * as PaymentUtils from '@libs/PaymentUtils';
 import PaymentMethodList from '@pages/settings/Wallet/PaymentMethodList';
 import WalletEmptyState from '@pages/settings/Wallet/WalletEmptyState';
-import useTheme from '@styles/theme/useTheme';
 import variables from '@styles/variables';
 import * as BankAccounts from '@userActions/BankAccounts';
 import * as PaymentMethods from '@userActions/PaymentMethods';
diff --git a/src/pages/signin/SignInPageLayout/Footer.js b/src/pages/signin/SignInPageLayout/Footer.js
index 71f6dd32788f..3837914a79bd 100644
--- a/src/pages/signin/SignInPageLayout/Footer.js
+++ b/src/pages/signin/SignInPageLayout/Footer.js
@@ -9,10 +9,10 @@ import Text from '@components/Text';
 import TextLink from '@components/TextLink';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
 import useStyleUtils from '@hooks/useStyleUtils';
+import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import Licenses from '@pages/signin/Licenses';
 import Socials from '@pages/signin/Socials';
-import useTheme from '@styles/theme/useTheme';
 import variables from '@styles/variables';
 import * as Session from '@userActions/Session';
 import CONST from '@src/CONST';
diff --git a/src/pages/signin/SignInPageLayout/index.js b/src/pages/signin/SignInPageLayout/index.js
index e810f29a3d03..bc171dd1dc12 100644
--- a/src/pages/signin/SignInPageLayout/index.js
+++ b/src/pages/signin/SignInPageLayout/index.js
@@ -6,11 +6,11 @@ import SignInGradient from '@assets/images/home-fade-gradient.svg';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
 import usePrevious from '@hooks/usePrevious';
 import useStyleUtils from '@hooks/useStyleUtils';
+import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import compose from '@libs/compose';
 import SignInPageHero from '@pages/signin/SignInPageHero';
-import useTheme from '@styles/theme/useTheme';
 import variables from '@styles/variables';
 import BackgroundImage from './BackgroundImage';
 import Footer from './Footer';
diff --git a/src/pages/signin/Socials.js b/src/pages/signin/Socials.js
index ff634f253315..a5747402d16e 100644
--- a/src/pages/signin/Socials.js
+++ b/src/pages/signin/Socials.js
@@ -4,8 +4,8 @@ import _ from 'underscore';
 import Icon from '@components/Icon';
 import * as Expensicons from '@components/Icon/Expensicons';
 import PressableWithoutFeedback from '@components/Pressable/PressableWithoutFeedback';
+import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
-import useTheme from '@styles/theme/useTheme';
 import variables from '@styles/variables';
 import * as Link from '@userActions/Link';
 import CONST from '@src/CONST';
diff --git a/src/pages/signin/ValidateCodeForm/BaseValidateCodeForm.js b/src/pages/signin/ValidateCodeForm/BaseValidateCodeForm.js
index cb112918d737..d4f96361161a 100755
--- a/src/pages/signin/ValidateCodeForm/BaseValidateCodeForm.js
+++ b/src/pages/signin/ValidateCodeForm/BaseValidateCodeForm.js
@@ -15,6 +15,7 @@ import TextInput from '@components/TextInput';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
 import usePrevious from '@hooks/usePrevious';
 import useStyleUtils from '@hooks/useStyleUtils';
+import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import canFocusInputOnScreenFocus from '@libs/canFocusInputOnScreenFocus';
 import compose from '@libs/compose';
@@ -22,7 +23,6 @@ import * as ErrorUtils from '@libs/ErrorUtils';
 import * as ValidationUtils from '@libs/ValidationUtils';
 import ChangeExpensifyLoginLink from '@pages/signin/ChangeExpensifyLoginLink';
 import Terms from '@pages/signin/Terms';
-import useTheme from '@styles/theme/useTheme';
 import * as Session from '@userActions/Session';
 import * as User from '@userActions/User';
 import CONST from '@src/CONST';
diff --git a/src/pages/workspace/WorkspacesListPage.js b/src/pages/workspace/WorkspacesListPage.js
index 6a6b55567e08..cac0d1bd71a6 100755
--- a/src/pages/workspace/WorkspacesListPage.js
+++ b/src/pages/workspace/WorkspacesListPage.js
@@ -12,6 +12,7 @@ import MenuItem from '@components/MenuItem';
 import OfflineWithFeedback from '@components/OfflineWithFeedback';
 import useLocalize from '@hooks/useLocalize';
 import useNetwork from '@hooks/useNetwork';
+import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import compose from '@libs/compose';
 import * as CurrencyUtils from '@libs/CurrencyUtils';
@@ -20,7 +21,6 @@ import * as PolicyUtils from '@libs/PolicyUtils';
 import * as ReportUtils from '@libs/ReportUtils';
 import policyMemberPropType from '@pages/policyMemberPropType';
 import * as ReimbursementAccountProps from '@pages/ReimbursementAccount/reimbursementAccountPropTypes';
-import useTheme from '@styles/theme/useTheme';
 import * as App from '@userActions/App';
 import * as Policy from '@userActions/Policy';
 import CONST from '@src/CONST';
diff --git a/src/pages/workspace/reimburse/WorkspaceReimburseSection.js b/src/pages/workspace/reimburse/WorkspaceReimburseSection.js
index 35e00bea38a1..7cf17c9d498c 100644
--- a/src/pages/workspace/reimburse/WorkspaceReimburseSection.js
+++ b/src/pages/workspace/reimburse/WorkspaceReimburseSection.js
@@ -9,10 +9,10 @@ import * as Illustrations from '@components/Icon/Illustrations';
 import networkPropTypes from '@components/networkPropTypes';
 import Section from '@components/Section';
 import Text from '@components/Text';
+import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import BankAccount from '@libs/models/BankAccount';
 import * as ReimbursementAccountProps from '@pages/ReimbursementAccount/reimbursementAccountPropTypes';
-import useTheme from '@styles/theme/useTheme';
 import * as Link from '@userActions/Link';
 import CONST from '@src/CONST';
 
diff --git a/src/styles/ThemeStylesProvider.tsx b/src/styles/ThemeStylesProvider.tsx
index 00591b9383a3..8bc0f48d383d 100644
--- a/src/styles/ThemeStylesProvider.tsx
+++ b/src/styles/ThemeStylesProvider.tsx
@@ -1,7 +1,7 @@
 import React, {useMemo} from 'react';
+import useTheme from '../hooks/useTheme';
 import ThemeStylesContext from './context/ThemeStylesContext';
 import stylesGenerator from './styles';
-import useTheme from './theme/useTheme';
 import createStyleUtils from './utils';
 
 type ThemeStylesProviderProps = React.PropsWithChildren;

From 7b7712fa4265742a927f71501ebcc3c2edc19a57 Mon Sep 17 00:00:00 2001
From: Christoph Pader <christoph.pader@outlook.com>
Date: Thu, 7 Dec 2023 17:29:51 +0100
Subject: [PATCH 053/102] move useThemePreferenceWithStaticOverride

---
 .../theme => hooks}/useThemePreferenceWithStaticOverride.ts   | 4 ++--
 src/styles/theme/ThemeProvider.tsx                            | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)
 rename src/{styles/theme => hooks}/useThemePreferenceWithStaticOverride.ts (82%)

diff --git a/src/styles/theme/useThemePreferenceWithStaticOverride.ts b/src/hooks/useThemePreferenceWithStaticOverride.ts
similarity index 82%
rename from src/styles/theme/useThemePreferenceWithStaticOverride.ts
rename to src/hooks/useThemePreferenceWithStaticOverride.ts
index 6065f0ae9d88..4619da1966ce 100644
--- a/src/styles/theme/useThemePreferenceWithStaticOverride.ts
+++ b/src/hooks/useThemePreferenceWithStaticOverride.ts
@@ -1,5 +1,5 @@
-import useThemePreference from '../../hooks/useThemePreference';
-import {ThemePreferenceWithoutSystem} from './types';
+import {ThemePreferenceWithoutSystem} from '@styles/theme/types';
+import useThemePreference from './useThemePreference';
 
 const useThemePreferenceWithStaticOverride = (staticThemePreference: ThemePreferenceWithoutSystem | undefined) => {
     const dynamicThemePreference = useThemePreference();
diff --git a/src/styles/theme/ThemeProvider.tsx b/src/styles/theme/ThemeProvider.tsx
index 7ac1ee97ac42..02ce7b19d77f 100644
--- a/src/styles/theme/ThemeProvider.tsx
+++ b/src/styles/theme/ThemeProvider.tsx
@@ -2,9 +2,9 @@
 import PropTypes from 'prop-types';
 import React, {useMemo} from 'react';
 import ThemeContext from '@styles/context/ThemeContext';
+import useThemePreferenceWithStaticOverride from '../../hooks/useThemePreferenceWithStaticOverride';
 import themes from './themes';
 import {ThemePreferenceWithoutSystem} from './types';
-import useThemePreferenceWithStaticOverride from './useThemePreferenceWithStaticOverride';
 
 const propTypes = {
     /** Rendered child component */

From d66524b3b450e236c69a983c3406b4c43992ce6d Mon Sep 17 00:00:00 2001
From: Christoph Pader <christoph.pader@outlook.com>
Date: Thu, 7 Dec 2023 17:30:28 +0100
Subject: [PATCH 054/102] move style util

---
 src/components/PopoverWithMeasuredContent.js                  | 2 +-
 .../{ => utils}/PopoverWithMeasuredContentStyleUtils.ts       | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)
 rename src/styles/{ => utils}/PopoverWithMeasuredContentStyleUtils.ts (94%)

diff --git a/src/components/PopoverWithMeasuredContent.js b/src/components/PopoverWithMeasuredContent.js
index f01340f63427..d621b2a16dfc 100644
--- a/src/components/PopoverWithMeasuredContent.js
+++ b/src/components/PopoverWithMeasuredContent.js
@@ -4,7 +4,7 @@ import {View} from 'react-native';
 import _ from 'underscore';
 import useThemeStyles from '@hooks/useThemeStyles';
 import useWindowDimensions from '@hooks/useWindowDimensions';
-import PopoverWithMeasuredContentStyleUtils from '@styles/PopoverWithMeasuredContentStyleUtils';
+import PopoverWithMeasuredContentStyleUtils from '@styles/utils/PopoverWithMeasuredContentStyleUtils';
 import CONST from '@src/CONST';
 import Popover from './Popover';
 import {defaultProps as defaultPopoverProps, propTypes as popoverPropTypes} from './Popover/popoverPropTypes';
diff --git a/src/styles/PopoverWithMeasuredContentStyleUtils.ts b/src/styles/utils/PopoverWithMeasuredContentStyleUtils.ts
similarity index 94%
rename from src/styles/PopoverWithMeasuredContentStyleUtils.ts
rename to src/styles/utils/PopoverWithMeasuredContentStyleUtils.ts
index 94a0fb77d8bb..7b3812a685a7 100644
--- a/src/styles/PopoverWithMeasuredContentStyleUtils.ts
+++ b/src/styles/utils/PopoverWithMeasuredContentStyleUtils.ts
@@ -1,5 +1,5 @@
-import roundToNearestMultipleOfFour from './utils/roundToNearestMultipleOfFour';
-import variables from './variables';
+import variables from '@styles/variables';
+import roundToNearestMultipleOfFour from './roundToNearestMultipleOfFour';
 
 /**
  * Compute the amount that the Context menu's Anchor needs to be horizontally shifted

From c5949e2127dd35b11cadce6e3f2269202b52e334 Mon Sep 17 00:00:00 2001
From: Christoph Pader <christoph.pader@outlook.com>
Date: Thu, 7 Dec 2023 17:32:53 +0100
Subject: [PATCH 055/102] move providers

---
 src/App.js                                                | 4 ++--
 .../ThemeIllustrationsProvider.tsx                        | 2 +-
 src/{styles/theme => components}/ThemeProvider.tsx        | 6 +++---
 src/{styles => components}/ThemeStylesProvider.tsx        | 8 ++++----
 src/pages/signin/SignInPage.js                            | 4 ++--
 src/stories/Composer.stories.js                           | 2 +-
 src/styles/context/ThemeContext.ts                        | 2 +-
 src/styles/context/ThemeIllustrationsContext.ts           | 2 +-
 src/styles/illustrations/{illustrations.ts => index.ts}   | 0
 src/styles/styles.ts                                      | 2 +-
 src/styles/theme/{themes.ts => index.ts}                  | 0
 src/styles/utils/index.ts                                 | 2 +-
 12 files changed, 17 insertions(+), 17 deletions(-)
 rename src/{styles/illustrations => components}/ThemeIllustrationsProvider.tsx (93%)
 rename src/{styles/theme => components}/ThemeProvider.tsx (80%)
 rename src/{styles => components}/ThemeStylesProvider.tsx (76%)
 rename src/styles/illustrations/{illustrations.ts => index.ts} (100%)
 rename src/styles/theme/{themes.ts => index.ts} (100%)

diff --git a/src/App.js b/src/App.js
index bc92b63ef2a3..f1e025a79891 100644
--- a/src/App.js
+++ b/src/App.js
@@ -16,6 +16,7 @@ import {LocaleContextProvider} from './components/LocaleContextProvider';
 import OnyxProvider from './components/OnyxProvider';
 import PopoverContextProvider from './components/PopoverProvider';
 import SafeArea from './components/SafeArea';
+import ThemeStylesProvider from './components/ThemeStylesProvider';
 import {CurrentReportIDContextProvider} from './components/withCurrentReportID';
 import {EnvironmentProvider} from './components/withEnvironment';
 import {KeyboardStateProvider} from './components/withKeyboardState';
@@ -26,9 +27,8 @@ import OnyxUpdateManager from './libs/actions/OnyxUpdateManager';
 import * as Session from './libs/actions/Session';
 import * as Environment from './libs/Environment/Environment';
 import {ReportAttachmentsProvider} from './pages/home/report/ReportAttachmentsContext';
-import ThemeIllustrationsProvider from './styles/illustrations/ThemeIllustrationsProvider';
+import ThemeIllustrationsPr./components/ThemeProviderrations/ThemeIllustrationsProvider';
 import ThemeProvider from './styles/theme/ThemeProvider';
-import ThemeStylesProvider from './styles/ThemeStylesProvider';
 
 // For easier debugging and development, when we are in web we expose Onyx to the window, so you can more easily set data into Onyx
 if (window && Environment.isDevelopment()) {
diff --git a/src/styles/illustrations/ThemeIllustrationsProvider.tsx b/src/components/ThemeIllustrationsProvider.tsx
similarity index 93%
rename from src/styles/illustrations/ThemeIllustrationsProvider.tsx
rename to src/components/ThemeIllustrationsProvider.tsx
index 610d88fad198..3ea10a322192 100644
--- a/src/styles/illustrations/ThemeIllustrationsProvider.tsx
+++ b/src/components/ThemeIllustrationsProvider.tsx
@@ -1,7 +1,7 @@
 import React, {useMemo} from 'react';
 import useThemePreference from '@hooks/useThemePreference';
 import ThemeIllustrationsContext from '@styles/context/ThemeIllustrationsContext';
-import Illustrations from './illustrations';
+import Illustrations from '@styles/illustrations';
 
 type ThemeIllustrationsProviderProps = {
     children: React.ReactNode;
diff --git a/src/styles/theme/ThemeProvider.tsx b/src/components/ThemeProvider.tsx
similarity index 80%
rename from src/styles/theme/ThemeProvider.tsx
rename to src/components/ThemeProvider.tsx
index 02ce7b19d77f..65f9ad4752fc 100644
--- a/src/styles/theme/ThemeProvider.tsx
+++ b/src/components/ThemeProvider.tsx
@@ -1,10 +1,10 @@
 /* eslint-disable react/jsx-props-no-spreading */
 import PropTypes from 'prop-types';
 import React, {useMemo} from 'react';
+import useThemePreferenceWithStaticOverride from '@hooks/useThemePreferenceWithStaticOverride';
 import ThemeContext from '@styles/context/ThemeContext';
-import useThemePreferenceWithStaticOverride from '../../hooks/useThemePreferenceWithStaticOverride';
-import themes from './themes';
-import {ThemePreferenceWithoutSystem} from './types';
+import themes from '@styles/theme';
+import {ThemePreferenceWithoutSystem} from '@styles/theme/types';
 
 const propTypes = {
     /** Rendered child component */
diff --git a/src/styles/ThemeStylesProvider.tsx b/src/components/ThemeStylesProvider.tsx
similarity index 76%
rename from src/styles/ThemeStylesProvider.tsx
rename to src/components/ThemeStylesProvider.tsx
index 8bc0f48d383d..688da5b97fb0 100644
--- a/src/styles/ThemeStylesProvider.tsx
+++ b/src/components/ThemeStylesProvider.tsx
@@ -1,8 +1,8 @@
 import React, {useMemo} from 'react';
-import useTheme from '../hooks/useTheme';
-import ThemeStylesContext from './context/ThemeStylesContext';
-import stylesGenerator from './styles';
-import createStyleUtils from './utils';
+import useTheme from '@hooks/useTheme';
+import ThemeStylesContext from '@styles/context/ThemeStylesContext';
+import stylesGenerator from '@styles/styles';
+import createStyleUtils from '@styles/utils';
 
 type ThemeStylesProviderProps = React.PropsWithChildren;
 
diff --git a/src/pages/signin/SignInPage.js b/src/pages/signin/SignInPage.js
index 1769834c9157..23c5b09a0909 100644
--- a/src/pages/signin/SignInPage.js
+++ b/src/pages/signin/SignInPage.js
@@ -6,6 +6,8 @@ import {withOnyx} from 'react-native-onyx';
 import _ from 'underscore';
 import ColorSchemeWrapper from '@components/ColorSchemeWrapper';
 import CustomStatusBar from '@components/CustomStatusBar';
+import ThemeProvider from '@components/ThemeProvider';
+import ThemeStylesProvider from '@components/ThemeStylesProvider';
 import useLocalize from '@hooks/useLocalize';
 import useSafeAreaInsets from '@hooks/useSafeAreaInsets';
 import useStyleUtils from '@hooks/useStyleUtils';
@@ -16,8 +18,6 @@ import * as Localize from '@libs/Localize';
 import Log from '@libs/Log';
 import Navigation from '@libs/Navigation/Navigation';
 import Performance from '@libs/Performance';
-import ThemeProvider from '@styles/theme/ThemeProvider';
-import ThemeStylesProvider from '@styles/ThemeStylesProvider';
 import * as App from '@userActions/App';
 import * as Session from '@userActions/Session';
 import CONST from '@src/CONST';
diff --git a/src/stories/Composer.stories.js b/src/stories/Composer.stories.js
index a9db5c754b5f..7d7144d5dfee 100644
--- a/src/stories/Composer.stories.js
+++ b/src/stories/Composer.stories.js
@@ -7,7 +7,7 @@ import Text from '@components/Text';
 import withNavigationFallback from '@components/withNavigationFallback';
 import useStyleUtils from '@hooks/useStyleUtils';
 import {defaultStyles} from '@styles/styles';
-import {defaultTheme} from '@styles/theme/themes';
+import {defaultTheme} from '@styles/theme';
 import CONST from '@src/CONST';
 
 const ComposerWithNavigation = withNavigationFallback(Composer);
diff --git a/src/styles/context/ThemeContext.ts b/src/styles/context/ThemeContext.ts
index 4602f859fedd..09761e6abc88 100644
--- a/src/styles/context/ThemeContext.ts
+++ b/src/styles/context/ThemeContext.ts
@@ -1,5 +1,5 @@
 import React from 'react';
-import {defaultTheme} from '@styles/theme/themes';
+import {defaultTheme} from '@styles/theme';
 import {type ThemeColors} from '@styles/theme/types';
 
 const ThemeContext = React.createContext<ThemeColors>(defaultTheme);
diff --git a/src/styles/context/ThemeIllustrationsContext.ts b/src/styles/context/ThemeIllustrationsContext.ts
index 7b0bd1408b63..a58318d04d57 100644
--- a/src/styles/context/ThemeIllustrationsContext.ts
+++ b/src/styles/context/ThemeIllustrationsContext.ts
@@ -1,5 +1,5 @@
 import React from 'react';
-import {DefaultIllustrations} from '@styles/illustrations/illustrations';
+import {DefaultIllustrations} from '@styles/illustrations';
 import {IllustrationsType} from '@styles/illustrations/types';
 
 const ThemeIllustrationsContext = React.createContext<IllustrationsType>(DefaultIllustrations);
diff --git a/src/styles/illustrations/illustrations.ts b/src/styles/illustrations/index.ts
similarity index 100%
rename from src/styles/illustrations/illustrations.ts
rename to src/styles/illustrations/index.ts
diff --git a/src/styles/styles.ts b/src/styles/styles.ts
index 738cfff63f64..0a0b8242cbb2 100644
--- a/src/styles/styles.ts
+++ b/src/styles/styles.ts
@@ -10,7 +10,7 @@ import DotLottieAnimation from '@components/LottieAnimations/types';
 import * as Browser from '@libs/Browser';
 import CONST from '@src/CONST';
 import colors from './colors';
-import {defaultTheme} from './theme/themes';
+import {defaultTheme} from './theme';
 import {type ThemeColors} from './theme/types';
 import addOutlineWidth from './utils/addOutlineWidth';
 import borders from './utils/borders';
diff --git a/src/styles/theme/themes.ts b/src/styles/theme/index.ts
similarity index 100%
rename from src/styles/theme/themes.ts
rename to src/styles/theme/index.ts
diff --git a/src/styles/utils/index.ts b/src/styles/utils/index.ts
index 68a298585aec..2121c9053bcf 100644
--- a/src/styles/utils/index.ts
+++ b/src/styles/utils/index.ts
@@ -6,7 +6,7 @@ import * as Browser from '@libs/Browser';
 import * as UserUtils from '@libs/UserUtils';
 import colors from '@styles/colors';
 import {defaultStyles, type ThemeStyles} from '@styles/styles';
-import {defaultTheme} from '@styles/theme/themes';
+import {defaultTheme} from '@styles/theme';
 import {ThemeColors} from '@styles/theme/types';
 import cursor from '@styles/utils/cursor';
 import getContextMenuItemStyles from '@styles/utils/getContextMenuItemStyles';

From 4f5b08d86d733edc995a08d707e6b76df64f82b0 Mon Sep 17 00:00:00 2001
From: Christoph Pader <christoph.pader@outlook.com>
Date: Thu, 7 Dec 2023 17:33:31 +0100
Subject: [PATCH 056/102] move hook

---
 src/{styles/illustrations => hooks}/useThemeIllustrations.ts | 0
 src/pages/home/report/AnimatedEmptyStateBackground.js        | 2 +-
 2 files changed, 1 insertion(+), 1 deletion(-)
 rename src/{styles/illustrations => hooks}/useThemeIllustrations.ts (100%)

diff --git a/src/styles/illustrations/useThemeIllustrations.ts b/src/hooks/useThemeIllustrations.ts
similarity index 100%
rename from src/styles/illustrations/useThemeIllustrations.ts
rename to src/hooks/useThemeIllustrations.ts
diff --git a/src/pages/home/report/AnimatedEmptyStateBackground.js b/src/pages/home/report/AnimatedEmptyStateBackground.js
index 88af713d3e18..7e259b7473cf 100644
--- a/src/pages/home/report/AnimatedEmptyStateBackground.js
+++ b/src/pages/home/report/AnimatedEmptyStateBackground.js
@@ -1,9 +1,9 @@
 import React from 'react';
 import Animated, {SensorType, useAnimatedSensor, useAnimatedStyle, useSharedValue, withSpring} from 'react-native-reanimated';
 import useStyleUtils from '@hooks/useStyleUtils';
+import useThemeIllustrations from '@hooks/useThemeIllustrations';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import * as NumberUtils from '@libs/NumberUtils';
-import useThemeIllustrations from '@styles/illustrations/useThemeIllustrations';
 import variables from '@styles/variables';
 import CONST from '@src/CONST';
 

From f5e50e15a2c76728a1bbc63430bbd8cb6d963979 Mon Sep 17 00:00:00 2001
From: Christoph Pader <christoph.pader@outlook.com>
Date: Thu, 7 Dec 2023 17:34:25 +0100
Subject: [PATCH 057/102] move more stuff

---
 .storybook/theme.js                                             | 2 +-
 src/components/AddressSearch/CurrentLocationButton.js           | 2 +-
 src/components/LocationErrorMessage/BaseLocationErrorMessage.js | 2 +-
 src/styles/styles.ts                                            | 2 +-
 src/styles/{ => theme}/colors.ts                                | 2 +-
 src/styles/theme/themes/dark.ts                                 | 2 +-
 src/styles/theme/themes/light.ts                                | 2 +-
 src/styles/utils/index.ts                                       | 2 +-
 8 files changed, 8 insertions(+), 8 deletions(-)
 rename src/styles/{ => theme}/colors.ts (98%)

diff --git a/.storybook/theme.js b/.storybook/theme.js
index 96631764726f..c480b26a4eb3 100644
--- a/.storybook/theme.js
+++ b/.storybook/theme.js
@@ -1,5 +1,5 @@
 import {create} from '@storybook/theming';
-import colors from '../src/styles/colors';
+import colors from '../src/styles/theme/colors';
 
 export default create({
     brandTitle: 'New Expensify UI Docs',
diff --git a/src/components/AddressSearch/CurrentLocationButton.js b/src/components/AddressSearch/CurrentLocationButton.js
index 61217533a43a..06541565f567 100644
--- a/src/components/AddressSearch/CurrentLocationButton.js
+++ b/src/components/AddressSearch/CurrentLocationButton.js
@@ -8,7 +8,7 @@ import useLocalize from '@hooks/useLocalize';
 import useStyleUtils from '@hooks/useStyleUtils';
 import useThemeStyles from '@hooks/useThemeStyles';
 import getButtonState from '@libs/getButtonState';
-import colors from '@styles/colors';
+import colors from '@styles/theme/colors';
 
 const propTypes = {
     /** Callback that runs when location button is clicked */
diff --git a/src/components/LocationErrorMessage/BaseLocationErrorMessage.js b/src/components/LocationErrorMessage/BaseLocationErrorMessage.js
index b5fc806c15ec..44b597ba6b07 100644
--- a/src/components/LocationErrorMessage/BaseLocationErrorMessage.js
+++ b/src/components/LocationErrorMessage/BaseLocationErrorMessage.js
@@ -10,7 +10,7 @@ import Tooltip from '@components/Tooltip';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
 import useStyleUtils from '@hooks/useStyleUtils';
 import useThemeStyles from '@hooks/useThemeStyles';
-import colors from '@styles/colors';
+import colors from '@styles/theme/colors';
 import CONST from '@src/CONST';
 import * as locationErrorMessagePropTypes from './locationErrorMessagePropTypes';
 
diff --git a/src/styles/styles.ts b/src/styles/styles.ts
index 0a0b8242cbb2..d0bacfcd471f 100644
--- a/src/styles/styles.ts
+++ b/src/styles/styles.ts
@@ -9,8 +9,8 @@ import {MixedStyleDeclaration, MixedStyleRecord} from 'react-native-render-html'
 import DotLottieAnimation from '@components/LottieAnimations/types';
 import * as Browser from '@libs/Browser';
 import CONST from '@src/CONST';
-import colors from './colors';
 import {defaultTheme} from './theme';
+import colors from './theme/colors';
 import {type ThemeColors} from './theme/types';
 import addOutlineWidth from './utils/addOutlineWidth';
 import borders from './utils/borders';
diff --git a/src/styles/colors.ts b/src/styles/theme/colors.ts
similarity index 98%
rename from src/styles/colors.ts
rename to src/styles/theme/colors.ts
index d2534fd15448..5dd9dfd85168 100644
--- a/src/styles/colors.ts
+++ b/src/styles/theme/colors.ts
@@ -1,4 +1,4 @@
-import {Color} from './theme/types';
+import {Color} from './types';
 
 /**
  * DO NOT import colors.js into files. Use the theme switching hooks and HOCs instead.
diff --git a/src/styles/theme/themes/dark.ts b/src/styles/theme/themes/dark.ts
index f13d66c49300..1cd8023113f5 100644
--- a/src/styles/theme/themes/dark.ts
+++ b/src/styles/theme/themes/dark.ts
@@ -1,4 +1,4 @@
-import colors from '@styles/colors';
+import colors from '@styles/theme/colors';
 import {type ThemeColors} from '@styles/theme/types';
 import CONST from '@src/CONST';
 import SCREENS from '@src/SCREENS';
diff --git a/src/styles/theme/themes/light.ts b/src/styles/theme/themes/light.ts
index 418746668a7d..e0f8158e8b8e 100644
--- a/src/styles/theme/themes/light.ts
+++ b/src/styles/theme/themes/light.ts
@@ -1,4 +1,4 @@
-import colors from '@styles/colors';
+import colors from '@styles/theme/colors';
 import {type ThemeColors} from '@styles/theme/types';
 import CONST from '@src/CONST';
 import SCREENS from '@src/SCREENS';
diff --git a/src/styles/utils/index.ts b/src/styles/utils/index.ts
index 2121c9053bcf..b317b0a84be8 100644
--- a/src/styles/utils/index.ts
+++ b/src/styles/utils/index.ts
@@ -4,9 +4,9 @@ import {EdgeInsets} from 'react-native-safe-area-context';
 import {ValueOf} from 'type-fest';
 import * as Browser from '@libs/Browser';
 import * as UserUtils from '@libs/UserUtils';
-import colors from '@styles/colors';
 import {defaultStyles, type ThemeStyles} from '@styles/styles';
 import {defaultTheme} from '@styles/theme';
+import colors from '@styles/theme/colors';
 import {ThemeColors} from '@styles/theme/types';
 import cursor from '@styles/utils/cursor';
 import getContextMenuItemStyles from '@styles/utils/getContextMenuItemStyles';

From 4f52f3d7f3a088184a4e46bbc91107177978ca6e Mon Sep 17 00:00:00 2001
From: Christoph Pader <christoph.pader@outlook.com>
Date: Thu, 7 Dec 2023 17:36:30 +0100
Subject: [PATCH 058/102] rename styles.ts

---
 .../CustomStatusBar/updateStatusBarAppearance/types.ts      | 2 +-
 src/components/Icon/BankIcons.ts                            | 2 +-
 src/components/ThemeStylesProvider.tsx                      | 2 +-
 src/components/withThemeStyles.tsx                          | 2 +-
 src/libs/ComposerUtils/updateNumberOfLines/types.ts         | 2 +-
 src/libs/Navigation/AppNavigator/RHPScreenOptions.ts        | 2 +-
 .../AppNavigator/getRootNavigatorScreenOptions.ts           | 2 +-
 src/libs/PaymentUtils.ts                                    | 2 +-
 src/stories/CheckboxWithLabel.stories.js                    | 2 +-
 src/stories/Composer.stories.js                             | 2 +-
 src/stories/DragAndDrop.stories.js                          | 2 +-
 src/stories/Form.stories.js                                 | 2 +-
 src/stories/SelectionList.stories.js                        | 2 +-
 src/styles/context/ThemeStylesContext.ts                    | 4 ++--
 src/styles/{styles.ts => index.ts}                          | 6 +++++-
 src/styles/stylePropTypes.js                                | 3 ---
 src/styles/theme/types.ts                                   | 2 +-
 src/styles/utils/ModalStyleUtils.ts                         | 2 +-
 src/styles/utils/ReportActionContextMenuStyleUtils.ts       | 2 +-
 src/styles/utils/TooltipStyleUtils.ts                       | 2 +-
 src/styles/utils/containerComposeStyles/types.ts            | 2 +-
 src/styles/utils/getContextMenuItemStyles/types.ts          | 2 +-
 src/styles/utils/index.ts                                   | 2 +-
 src/styles/utils/optionRowStyles/types.ts                   | 2 +-
 24 files changed, 28 insertions(+), 27 deletions(-)
 rename src/styles/{styles.ts => index.ts} (99%)
 delete mode 100644 src/styles/stylePropTypes.js

diff --git a/src/components/CustomStatusBar/updateStatusBarAppearance/types.ts b/src/components/CustomStatusBar/updateStatusBarAppearance/types.ts
index 3d16b5944a31..823f0059eccf 100644
--- a/src/components/CustomStatusBar/updateStatusBarAppearance/types.ts
+++ b/src/components/CustomStatusBar/updateStatusBarAppearance/types.ts
@@ -1,4 +1,4 @@
-import {StatusBarStyle} from '@styles/styles';
+import {StatusBarStyle} from '@styles/index';
 
 type UpdateStatusBarAppearanceProps = {
     backgroundColor?: string;
diff --git a/src/components/Icon/BankIcons.ts b/src/components/Icon/BankIcons.ts
index 5e4c0192ca86..5a843af6690b 100644
--- a/src/components/Icon/BankIcons.ts
+++ b/src/components/Icon/BankIcons.ts
@@ -1,7 +1,7 @@
 import {SvgProps} from 'react-native-svg';
 import GenericBank from '@assets/images/bankicons/generic-bank-account.svg';
 import GenericBankCard from '@assets/images/cardicons/generic-bank-card.svg';
-import {type ThemeStyles} from '@styles/styles';
+import {type ThemeStyles} from '@styles/index';
 import variables from '@styles/variables';
 import CONST from '@src/CONST';
 import {BankIcon, BankName, BankNameKey} from '@src/types/onyx/Bank';
diff --git a/src/components/ThemeStylesProvider.tsx b/src/components/ThemeStylesProvider.tsx
index 688da5b97fb0..847eb036178b 100644
--- a/src/components/ThemeStylesProvider.tsx
+++ b/src/components/ThemeStylesProvider.tsx
@@ -1,7 +1,7 @@
 import React, {useMemo} from 'react';
 import useTheme from '@hooks/useTheme';
 import ThemeStylesContext from '@styles/context/ThemeStylesContext';
-import stylesGenerator from '@styles/styles';
+import stylesGenerator from '@styles/index';
 import createStyleUtils from '@styles/utils';
 
 type ThemeStylesProviderProps = React.PropsWithChildren;
diff --git a/src/components/withThemeStyles.tsx b/src/components/withThemeStyles.tsx
index 9b129105b84c..0ae960bd4351 100644
--- a/src/components/withThemeStyles.tsx
+++ b/src/components/withThemeStyles.tsx
@@ -2,7 +2,7 @@ import PropTypes from 'prop-types';
 import React, {ComponentType, ForwardedRef, forwardRef, ReactElement, RefAttributes} from 'react';
 import useThemeStyles from '@hooks/useThemeStyles';
 import getComponentDisplayName from '@libs/getComponentDisplayName';
-import {type ThemeStyles} from '@styles/styles';
+import {type ThemeStyles} from '@styles/index';
 
 const withThemeStylesPropTypes = {
     themeStyles: PropTypes.object.isRequired,
diff --git a/src/libs/ComposerUtils/updateNumberOfLines/types.ts b/src/libs/ComposerUtils/updateNumberOfLines/types.ts
index 5e109afe8959..c121eaaef319 100644
--- a/src/libs/ComposerUtils/updateNumberOfLines/types.ts
+++ b/src/libs/ComposerUtils/updateNumberOfLines/types.ts
@@ -1,6 +1,6 @@
 import {NativeSyntheticEvent, TextInputContentSizeChangeEventData} from 'react-native';
 import ComposerProps from '@libs/ComposerUtils/types';
-import {type ThemeStyles} from '@styles/styles';
+import {type ThemeStyles} from '@styles/index';
 
 type UpdateNumberOfLines = (props: ComposerProps, event: NativeSyntheticEvent<TextInputContentSizeChangeEventData>, styles: ThemeStyles) => void;
 
diff --git a/src/libs/Navigation/AppNavigator/RHPScreenOptions.ts b/src/libs/Navigation/AppNavigator/RHPScreenOptions.ts
index 6cae31a219f9..814c61ad32a3 100644
--- a/src/libs/Navigation/AppNavigator/RHPScreenOptions.ts
+++ b/src/libs/Navigation/AppNavigator/RHPScreenOptions.ts
@@ -1,5 +1,5 @@
 import {CardStyleInterpolators, StackNavigationOptions} from '@react-navigation/stack';
-import {ThemeStyles} from '@styles/styles';
+import {ThemeStyles} from '@styles/index';
 
 /**
  * RHP stack navigator screen options generator function
diff --git a/src/libs/Navigation/AppNavigator/getRootNavigatorScreenOptions.ts b/src/libs/Navigation/AppNavigator/getRootNavigatorScreenOptions.ts
index 9af92dd3e019..1ce3e54f173a 100644
--- a/src/libs/Navigation/AppNavigator/getRootNavigatorScreenOptions.ts
+++ b/src/libs/Navigation/AppNavigator/getRootNavigatorScreenOptions.ts
@@ -1,6 +1,6 @@
 import {StackCardInterpolationProps, StackNavigationOptions} from '@react-navigation/stack';
 import getNavigationModalCardStyle from '@styles/getNavigationModalCardStyles';
-import {ThemeStyles} from '@styles/styles';
+import {ThemeStyles} from '@styles/index';
 import variables from '@styles/variables';
 import CONFIG from '@src/CONFIG';
 import modalCardStyleInterpolator from './modalCardStyleInterpolator';
diff --git a/src/libs/PaymentUtils.ts b/src/libs/PaymentUtils.ts
index ee7a293f6ad1..e41b3295a2c5 100644
--- a/src/libs/PaymentUtils.ts
+++ b/src/libs/PaymentUtils.ts
@@ -1,5 +1,5 @@
 import getBankIcon from '@components/Icon/BankIcons';
-import {type ThemeStyles} from '@styles/styles';
+import {type ThemeStyles} from '@styles/index';
 import CONST from '@src/CONST';
 import BankAccount from '@src/types/onyx/BankAccount';
 import Fund from '@src/types/onyx/Fund';
diff --git a/src/stories/CheckboxWithLabel.stories.js b/src/stories/CheckboxWithLabel.stories.js
index 842f23816b3b..2da4713e81b3 100644
--- a/src/stories/CheckboxWithLabel.stories.js
+++ b/src/stories/CheckboxWithLabel.stories.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import CheckboxWithLabel from '@components/CheckboxWithLabel';
 import Text from '@components/Text';
-import {defaultStyles} from '@styles/styles';
+import {defaultStyles} from '@styles/index';
 
 /**
  * We use the Component Story Format for writing stories. Follow the docs here:
diff --git a/src/stories/Composer.stories.js b/src/stories/Composer.stories.js
index 7d7144d5dfee..04fa9be7de86 100644
--- a/src/stories/Composer.stories.js
+++ b/src/stories/Composer.stories.js
@@ -6,7 +6,7 @@ import RenderHTML from '@components/RenderHTML';
 import Text from '@components/Text';
 import withNavigationFallback from '@components/withNavigationFallback';
 import useStyleUtils from '@hooks/useStyleUtils';
-import {defaultStyles} from '@styles/styles';
+import {defaultStyles} from '@styles/index';
 import {defaultTheme} from '@styles/theme';
 import CONST from '@src/CONST';
 
diff --git a/src/stories/DragAndDrop.stories.js b/src/stories/DragAndDrop.stories.js
index d9812b026e9d..8e540dcd2a42 100644
--- a/src/stories/DragAndDrop.stories.js
+++ b/src/stories/DragAndDrop.stories.js
@@ -4,7 +4,7 @@ import {Image, View} from 'react-native';
 import DragAndDropConsumer from '@components/DragAndDrop/Consumer';
 import DragAndDropProvider from '@components/DragAndDrop/Provider';
 import Text from '@components/Text';
-import {defaultStyles} from '@styles/styles';
+import {defaultStyles} from '@styles/index';
 
 /**
  * We use the Component Story Format for writing stories. Follow the docs here:
diff --git a/src/stories/Form.stories.js b/src/stories/Form.stories.js
index 00191fc6b752..46e7b9189194 100644
--- a/src/stories/Form.stories.js
+++ b/src/stories/Form.stories.js
@@ -11,7 +11,7 @@ import Text from '@components/Text';
 import TextInput from '@components/TextInput';
 import NetworkConnection from '@libs/NetworkConnection';
 import * as ValidationUtils from '@libs/ValidationUtils';
-import {defaultStyles} from '@styles/styles';
+import {defaultStyles} from '@styles/index';
 import * as FormActions from '@userActions/FormActions';
 import CONST from '@src/CONST';
 
diff --git a/src/stories/SelectionList.stories.js b/src/stories/SelectionList.stories.js
index 28d0fdc35e63..c08ef2df783a 100644
--- a/src/stories/SelectionList.stories.js
+++ b/src/stories/SelectionList.stories.js
@@ -3,7 +3,7 @@ import {View} from 'react-native';
 import _ from 'underscore';
 import SelectionList from '@components/SelectionList';
 import Text from '@components/Text';
-import {defaultStyles} from '@styles/styles';
+import {defaultStyles} from '@styles/index';
 import CONST from '@src/CONST';
 
 /**
diff --git a/src/styles/context/ThemeStylesContext.ts b/src/styles/context/ThemeStylesContext.ts
index 1f533a9f40a6..a1c81bbd9c7c 100644
--- a/src/styles/context/ThemeStylesContext.ts
+++ b/src/styles/context/ThemeStylesContext.ts
@@ -1,6 +1,6 @@
 import React from 'react';
-import {defaultStyles} from '@styles/styles';
-import type {ThemeStyles} from '@styles/styles';
+import {defaultStyles} from '@styles/index';
+import type {ThemeStyles} from '@styles/index';
 import {DefaultStyleUtils} from '@styles/utils';
 import type {StyleUtilsType} from '@styles/utils';
 
diff --git a/src/styles/styles.ts b/src/styles/index.ts
similarity index 99%
rename from src/styles/styles.ts
rename to src/styles/index.ts
index d0bacfcd471f..524568f50947 100644
--- a/src/styles/styles.ts
+++ b/src/styles/index.ts
@@ -1,6 +1,7 @@
 /* eslint-disable @typescript-eslint/naming-convention */
 import {LineLayerStyleProps} from '@rnmapbox/maps/src/utils/MapboxStyles';
 import lodashClamp from 'lodash/clamp';
+import PropTypes from 'prop-types';
 import {LineLayer} from 'react-map-gl';
 import {AnimatableNumericValue, Animated, ImageStyle, TextStyle, ViewStyle} from 'react-native';
 import {CustomAnimation} from 'react-native-animatable';
@@ -40,6 +41,8 @@ import wordBreak from './utils/wordBreak';
 import writingDirection from './utils/writingDirection';
 import variables from './variables';
 
+const propTypes = PropTypes.oneOfType([PropTypes.object, PropTypes.arrayOf(PropTypes.object), PropTypes.func]);
+
 type ColorScheme = (typeof CONST.COLOR_SCHEME)[keyof typeof CONST.COLOR_SCHEME];
 type StatusBarStyle = (typeof CONST.STATUS_BAR_STYLE)[keyof typeof CONST.STATUS_BAR_STYLE];
 
@@ -4000,4 +4003,5 @@ type ThemeStyles = ReturnType<typeof styles>;
 const defaultStyles = styles(defaultTheme);
 
 export default styles;
-export {defaultStyles, type Styles, type ThemeStyles, type StatusBarStyle, type ColorScheme};
+export {defaultStyles, propTypes};
+export type {Styles, ThemeStyles, StatusBarStyle, ColorScheme};
diff --git a/src/styles/stylePropTypes.js b/src/styles/stylePropTypes.js
deleted file mode 100644
index b97decba621c..000000000000
--- a/src/styles/stylePropTypes.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import PropTypes from 'prop-types';
-
-export default PropTypes.oneOfType([PropTypes.object, PropTypes.arrayOf(PropTypes.object), PropTypes.func]);
diff --git a/src/styles/theme/types.ts b/src/styles/theme/types.ts
index c674b6057d0f..bc7c42c243b3 100644
--- a/src/styles/theme/types.ts
+++ b/src/styles/theme/types.ts
@@ -1,4 +1,4 @@
-import {type ColorScheme, type StatusBarStyle} from '@styles/styles';
+import {type ColorScheme, type StatusBarStyle} from '@styles/index';
 import CONST from '@src/CONST';
 
 type Color = string;
diff --git a/src/styles/utils/ModalStyleUtils.ts b/src/styles/utils/ModalStyleUtils.ts
index 98e75a5a94c3..193aaa2cf94f 100644
--- a/src/styles/utils/ModalStyleUtils.ts
+++ b/src/styles/utils/ModalStyleUtils.ts
@@ -1,7 +1,7 @@
 import {ViewStyle} from 'react-native';
 import {ModalProps} from 'react-native-modal';
 import {ValueOf} from 'type-fest';
-import {type ThemeStyles} from '@styles/styles';
+import {type ThemeStyles} from '@styles/index';
 import {type ThemeColors} from '@styles/theme/types';
 import variables from '@styles/variables';
 import CONST from '@src/CONST';
diff --git a/src/styles/utils/ReportActionContextMenuStyleUtils.ts b/src/styles/utils/ReportActionContextMenuStyleUtils.ts
index dabac66339f9..d8e57dc3d82a 100644
--- a/src/styles/utils/ReportActionContextMenuStyleUtils.ts
+++ b/src/styles/utils/ReportActionContextMenuStyleUtils.ts
@@ -1,5 +1,5 @@
 import {ViewStyle} from 'react-native';
-import {type ThemeStyles} from '@styles/styles';
+import {type ThemeStyles} from '@styles/index';
 import {type ThemeColors} from '@styles/theme/types';
 import variables from '@styles/variables';
 
diff --git a/src/styles/utils/TooltipStyleUtils.ts b/src/styles/utils/TooltipStyleUtils.ts
index 216190b8f79d..9ebf93235e32 100644
--- a/src/styles/utils/TooltipStyleUtils.ts
+++ b/src/styles/utils/TooltipStyleUtils.ts
@@ -1,5 +1,5 @@
 import {TextStyle, View, ViewStyle} from 'react-native';
-import {type ThemeStyles} from '@styles/styles';
+import {type ThemeStyles} from '@styles/index';
 import {type ThemeColors} from '@styles/theme/types';
 import fontFamily from '@styles/utils/fontFamily';
 import positioning from '@styles/utils/positioning';
diff --git a/src/styles/utils/containerComposeStyles/types.ts b/src/styles/utils/containerComposeStyles/types.ts
index 9930e0230016..2b2d23b7f8c1 100644
--- a/src/styles/utils/containerComposeStyles/types.ts
+++ b/src/styles/utils/containerComposeStyles/types.ts
@@ -1,5 +1,5 @@
 import {ViewStyle} from 'react-native';
-import {type ThemeStyles} from '@styles/styles';
+import {type ThemeStyles} from '@styles/index';
 
 type ContainerComposeStyles = (styles: ThemeStyles) => ViewStyle[];
 
diff --git a/src/styles/utils/getContextMenuItemStyles/types.ts b/src/styles/utils/getContextMenuItemStyles/types.ts
index 376fb8d46d7c..06b989becf8a 100644
--- a/src/styles/utils/getContextMenuItemStyles/types.ts
+++ b/src/styles/utils/getContextMenuItemStyles/types.ts
@@ -1,5 +1,5 @@
 import {ViewStyle} from 'react-native';
-import {type ThemeStyles} from '@styles/styles';
+import {type ThemeStyles} from '@styles/index';
 
 type GetContextMenuItemStyle = (styles: ThemeStyles, windowWidth?: number) => ViewStyle[];
 
diff --git a/src/styles/utils/index.ts b/src/styles/utils/index.ts
index b317b0a84be8..0351148b736e 100644
--- a/src/styles/utils/index.ts
+++ b/src/styles/utils/index.ts
@@ -4,7 +4,7 @@ import {EdgeInsets} from 'react-native-safe-area-context';
 import {ValueOf} from 'type-fest';
 import * as Browser from '@libs/Browser';
 import * as UserUtils from '@libs/UserUtils';
-import {defaultStyles, type ThemeStyles} from '@styles/styles';
+import {defaultStyles, type ThemeStyles} from '@styles/index';
 import {defaultTheme} from '@styles/theme';
 import colors from '@styles/theme/colors';
 import {ThemeColors} from '@styles/theme/types';
diff --git a/src/styles/utils/optionRowStyles/types.ts b/src/styles/utils/optionRowStyles/types.ts
index 3425d7812be2..a31b94e0fc79 100644
--- a/src/styles/utils/optionRowStyles/types.ts
+++ b/src/styles/utils/optionRowStyles/types.ts
@@ -1,5 +1,5 @@
 import {ViewStyle} from 'react-native';
-import {type ThemeStyles} from '@styles/styles';
+import {type ThemeStyles} from '@styles/index';
 
 type CompactContentContainerStyles = (styles: ThemeStyles) => ViewStyle;
 

From dba8f835136cd8dcd4d05d4fd4f2186da1c2b339 Mon Sep 17 00:00:00 2001
From: Christoph Pader <christoph.pader@outlook.com>
Date: Thu, 7 Dec 2023 17:37:10 +0100
Subject: [PATCH 059/102] update imports

---
 .../anchorForAttachmentsOnlyPropTypes.js                        | 2 +-
 .../AnchorForCommentsOnly/anchorForCommentsOnlyPropTypes.js     | 2 +-
 .../Attachments/AttachmentView/AttachmentViewPdf/propTypes.js   | 2 +-
 src/components/AvatarWithImagePicker.js                         | 2 +-
 src/components/Form.js                                          | 2 +-
 src/components/Form/FormProvider.js                             | 2 +-
 src/components/Form/FormWrapper.js                              | 2 +-
 src/components/FormHelpMessage.js                               | 2 +-
 src/components/Image/imagePropTypes.js                          | 2 +-
 src/components/LHNOptionsList/LHNOptionsList.js                 | 2 +-
 src/components/MessagesRow.js                                   | 2 +-
 src/components/Modal/modalPropTypes.js                          | 2 +-
 src/components/OfflineWithFeedback.js                           | 2 +-
 src/components/OptionsList/optionsListPropTypes.js              | 2 +-
 src/components/OptionsSelector/optionsSelectorPropTypes.js      | 2 +-
 src/components/PDFView/pdfViewPropTypes.js                      | 2 +-
 src/components/ScreenWrapper/propTypes.js                       | 2 +-
 src/components/ShowMoreButton/index.js                          | 2 +-
 src/components/SpacerView.js                                    | 2 +-
 src/components/TextLink.js                                      | 2 +-
 src/components/menuItemPropTypes.js                             | 2 +-
 src/pages/home/report/ReportActionItemGrouped.js                | 2 +-
 src/pages/home/report/ReportActionItemSingle.js                 | 2 +-
 src/pages/settings/Wallet/PaymentMethodList.js                  | 2 +-
 24 files changed, 24 insertions(+), 24 deletions(-)

diff --git a/src/components/AnchorForAttachmentsOnly/anchorForAttachmentsOnlyPropTypes.js b/src/components/AnchorForAttachmentsOnly/anchorForAttachmentsOnlyPropTypes.js
index 9452e615d31c..8619b3367d9f 100644
--- a/src/components/AnchorForAttachmentsOnly/anchorForAttachmentsOnlyPropTypes.js
+++ b/src/components/AnchorForAttachmentsOnly/anchorForAttachmentsOnlyPropTypes.js
@@ -1,5 +1,5 @@
+import {stylePropTypes} from '@styles';
 import PropTypes from 'prop-types';
-import stylePropTypes from '@styles/stylePropTypes';
 
 const propTypes = {
     /** The URL of the attachment */
diff --git a/src/components/AnchorForCommentsOnly/anchorForCommentsOnlyPropTypes.js b/src/components/AnchorForCommentsOnly/anchorForCommentsOnlyPropTypes.js
index 6bf1d094497d..6d62f766be9b 100644
--- a/src/components/AnchorForCommentsOnly/anchorForCommentsOnlyPropTypes.js
+++ b/src/components/AnchorForCommentsOnly/anchorForCommentsOnlyPropTypes.js
@@ -1,5 +1,5 @@
+import {stylePropTypes} from '@styles';
 import PropTypes from 'prop-types';
-import stylePropTypes from '@styles/stylePropTypes';
 
 const propTypes = {
     /** The URL to open */
diff --git a/src/components/Attachments/AttachmentView/AttachmentViewPdf/propTypes.js b/src/components/Attachments/AttachmentView/AttachmentViewPdf/propTypes.js
index a34010f0ba8b..f19e7b7f89ab 100644
--- a/src/components/Attachments/AttachmentView/AttachmentViewPdf/propTypes.js
+++ b/src/components/Attachments/AttachmentView/AttachmentViewPdf/propTypes.js
@@ -1,6 +1,6 @@
+import {stylePropTypes} from '@styles';
 import PropTypes from 'prop-types';
 import * as AttachmentsPropTypes from '@components/Attachments/propTypes';
-import stylePropTypes from '@styles/stylePropTypes';
 
 const attachmentViewPdfPropTypes = {
     /** File object maybe be instance of File or Object */
diff --git a/src/components/AvatarWithImagePicker.js b/src/components/AvatarWithImagePicker.js
index b61792f4bb97..a046f00fa1e9 100644
--- a/src/components/AvatarWithImagePicker.js
+++ b/src/components/AvatarWithImagePicker.js
@@ -1,3 +1,4 @@
+import {stylePropTypes} from '@styles';
 import lodashGet from 'lodash/get';
 import PropTypes from 'prop-types';
 import React, {useEffect, useRef, useState} from 'react';
@@ -9,7 +10,6 @@ import useThemeStyles from '@hooks/useThemeStyles';
 import * as Browser from '@libs/Browser';
 import * as FileUtils from '@libs/fileDownload/FileUtils';
 import getImageResolution from '@libs/fileDownload/getImageResolution';
-import stylePropTypes from '@styles/stylePropTypes';
 import variables from '@styles/variables';
 import CONST from '@src/CONST';
 import AttachmentModal from './AttachmentModal';
diff --git a/src/components/Form.js b/src/components/Form.js
index 33cace99f627..e00219a1edc9 100644
--- a/src/components/Form.js
+++ b/src/components/Form.js
@@ -1,3 +1,4 @@
+import {stylePropTypes} from '@styles';
 import lodashGet from 'lodash/get';
 import PropTypes from 'prop-types';
 import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react';
@@ -10,7 +11,6 @@ import * as ErrorUtils from '@libs/ErrorUtils';
 import FormUtils from '@libs/FormUtils';
 import * as ValidationUtils from '@libs/ValidationUtils';
 import Visibility from '@libs/Visibility';
-import stylePropTypes from '@styles/stylePropTypes';
 import * as FormActions from '@userActions/FormActions';
 import CONST from '@src/CONST';
 import FormAlertWithSubmitButton from './FormAlertWithSubmitButton';
diff --git a/src/components/Form/FormProvider.js b/src/components/Form/FormProvider.js
index af2511fc9f74..393ff9164e0f 100644
--- a/src/components/Form/FormProvider.js
+++ b/src/components/Form/FormProvider.js
@@ -1,3 +1,4 @@
+import {stylePropTypes} from '@styles';
 import lodashGet from 'lodash/get';
 import PropTypes from 'prop-types';
 import React, {createRef, useCallback, useMemo, useRef, useState} from 'react';
@@ -8,7 +9,6 @@ import {withNetwork} from '@components/OnyxProvider';
 import compose from '@libs/compose';
 import * as ValidationUtils from '@libs/ValidationUtils';
 import Visibility from '@libs/Visibility';
-import stylePropTypes from '@styles/stylePropTypes';
 import * as FormActions from '@userActions/FormActions';
 import CONST from '@src/CONST';
 import FormContext from './FormContext';
diff --git a/src/components/Form/FormWrapper.js b/src/components/Form/FormWrapper.js
index da34262a8af8..a31ce0ff2cf0 100644
--- a/src/components/Form/FormWrapper.js
+++ b/src/components/Form/FormWrapper.js
@@ -1,3 +1,4 @@
+import {stylePropTypes} from '@styles';
 import PropTypes from 'prop-types';
 import React, {useCallback, useMemo, useRef} from 'react';
 import {Keyboard, ScrollView, StyleSheet} from 'react-native';
@@ -10,7 +11,6 @@ import SafeAreaConsumer from '@components/SafeAreaConsumer';
 import ScrollViewWithContext from '@components/ScrollViewWithContext';
 import useThemeStyles from '@hooks/useThemeStyles';
 import * as ErrorUtils from '@libs/ErrorUtils';
-import stylePropTypes from '@styles/stylePropTypes';
 import errorsPropType from './errorsPropType';
 
 const propTypes = {
diff --git a/src/components/FormHelpMessage.js b/src/components/FormHelpMessage.js
index 7f0122a4434e..f371f13898a6 100644
--- a/src/components/FormHelpMessage.js
+++ b/src/components/FormHelpMessage.js
@@ -1,3 +1,4 @@
+import {stylePropTypes} from '@styles';
 import PropTypes from 'prop-types';
 import React from 'react';
 import {View} from 'react-native';
@@ -5,7 +6,6 @@ import _ from 'underscore';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import * as Localize from '@libs/Localize';
-import stylePropTypes from '@styles/stylePropTypes';
 import Icon from './Icon';
 import * as Expensicons from './Icon/Expensicons';
 import Text from './Text';
diff --git a/src/components/Image/imagePropTypes.js b/src/components/Image/imagePropTypes.js
index 78bd48ba47ec..8a2f466f95e7 100644
--- a/src/components/Image/imagePropTypes.js
+++ b/src/components/Image/imagePropTypes.js
@@ -1,5 +1,5 @@
+import {stylePropTypes} from '@styles';
 import PropTypes from 'prop-types';
-import stylePropTypes from '@styles/stylePropTypes';
 import RESIZE_MODES from './resizeModes';
 import sourcePropTypes from './sourcePropTypes';
 
diff --git a/src/components/LHNOptionsList/LHNOptionsList.js b/src/components/LHNOptionsList/LHNOptionsList.js
index 71b14b6fadcd..1c10066aaecb 100644
--- a/src/components/LHNOptionsList/LHNOptionsList.js
+++ b/src/components/LHNOptionsList/LHNOptionsList.js
@@ -1,4 +1,5 @@
 import {FlashList} from '@shopify/flash-list';
+import {stylePropTypes} from '@styles';
 import lodashGet from 'lodash/get';
 import PropTypes from 'prop-types';
 import React, {useCallback} from 'react';
@@ -14,7 +15,6 @@ import * as OptionsListUtils from '@libs/OptionsListUtils';
 import * as ReportUtils from '@libs/ReportUtils';
 import reportActionPropTypes from '@pages/home/report/reportActionPropTypes';
 import reportPropTypes from '@pages/reportPropTypes';
-import stylePropTypes from '@styles/stylePropTypes';
 import variables from '@styles/variables';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
diff --git a/src/components/MessagesRow.js b/src/components/MessagesRow.js
index 668acc2d69c8..48184c2b61fd 100644
--- a/src/components/MessagesRow.js
+++ b/src/components/MessagesRow.js
@@ -1,3 +1,4 @@
+import {stylePropTypes} from '@styles';
 import PropTypes from 'prop-types';
 import React from 'react';
 import {View} from 'react-native';
@@ -5,7 +6,6 @@ import _ from 'underscore';
 import useLocalize from '@hooks/useLocalize';
 import useStyleUtils from '@hooks/useStyleUtils';
 import useThemeStyles from '@hooks/useThemeStyles';
-import stylePropTypes from '@styles/stylePropTypes';
 import CONST from '@src/CONST';
 import DotIndicatorMessage from './DotIndicatorMessage';
 import Icon from './Icon';
diff --git a/src/components/Modal/modalPropTypes.js b/src/components/Modal/modalPropTypes.js
index 84e610b694e4..08499ce6aa51 100644
--- a/src/components/Modal/modalPropTypes.js
+++ b/src/components/Modal/modalPropTypes.js
@@ -1,7 +1,7 @@
+import {stylePropTypes} from '@styles';
 import PropTypes from 'prop-types';
 import _ from 'underscore';
 import {windowDimensionsPropTypes} from '@components/withWindowDimensions';
-import stylePropTypes from '@styles/stylePropTypes';
 import CONST from '@src/CONST';
 
 const propTypes = {
diff --git a/src/components/OfflineWithFeedback.js b/src/components/OfflineWithFeedback.js
index 270e4ed6b6e7..31de63e48e63 100644
--- a/src/components/OfflineWithFeedback.js
+++ b/src/components/OfflineWithFeedback.js
@@ -1,3 +1,4 @@
+import {stylePropTypes} from '@styles';
 import PropTypes from 'prop-types';
 import React, {useCallback} from 'react';
 import {View} from 'react-native';
@@ -6,7 +7,6 @@ import useNetwork from '@hooks/useNetwork';
 import useStyleUtils from '@hooks/useStyleUtils';
 import useThemeStyles from '@hooks/useThemeStyles';
 import shouldRenderOffscreen from '@libs/shouldRenderOffscreen';
-import stylePropTypes from '@styles/stylePropTypes';
 import CONST from '@src/CONST';
 import MessagesRow from './MessagesRow';
 
diff --git a/src/components/OptionsList/optionsListPropTypes.js b/src/components/OptionsList/optionsListPropTypes.js
index 6008101ac1b6..19b4d5fafeaf 100644
--- a/src/components/OptionsList/optionsListPropTypes.js
+++ b/src/components/OptionsList/optionsListPropTypes.js
@@ -1,7 +1,7 @@
+import {stylePropTypes} from '@styles';
 import PropTypes from 'prop-types';
 import optionPropTypes from '@components/optionPropTypes';
 import SectionList from '@components/SectionList';
-import stylePropTypes from '@styles/stylePropTypes';
 
 const propTypes = {
     /** option flexStyle for the options list container */
diff --git a/src/components/OptionsSelector/optionsSelectorPropTypes.js b/src/components/OptionsSelector/optionsSelectorPropTypes.js
index 8593569dfafd..4bdfb2c3de80 100644
--- a/src/components/OptionsSelector/optionsSelectorPropTypes.js
+++ b/src/components/OptionsSelector/optionsSelectorPropTypes.js
@@ -1,6 +1,6 @@
+import {stylePropTypes} from '@styles';
 import PropTypes from 'prop-types';
 import optionPropTypes from '@components/optionPropTypes';
-import stylePropTypes from '@styles/stylePropTypes';
 import CONST from '@src/CONST';
 
 const propTypes = {
diff --git a/src/components/PDFView/pdfViewPropTypes.js b/src/components/PDFView/pdfViewPropTypes.js
index 546f9b1a8933..97c8d8c6d02a 100644
--- a/src/components/PDFView/pdfViewPropTypes.js
+++ b/src/components/PDFView/pdfViewPropTypes.js
@@ -1,7 +1,7 @@
+import {stylePropTypes} from '@styles';
 import PropTypes from 'prop-types';
 import {withThemeStylesPropTypes} from '@components/withThemeStyles';
 import {windowDimensionsPropTypes} from '@components/withWindowDimensions';
-import stylePropTypes from '@styles/stylePropTypes';
 
 const propTypes = {
     /** URL to full-sized image */
diff --git a/src/components/ScreenWrapper/propTypes.js b/src/components/ScreenWrapper/propTypes.js
index c98968bb112b..42dea8eb6dea 100644
--- a/src/components/ScreenWrapper/propTypes.js
+++ b/src/components/ScreenWrapper/propTypes.js
@@ -1,5 +1,5 @@
+import {stylePropTypes} from '@styles';
 import PropTypes from 'prop-types';
-import stylePropTypes from '@styles/stylePropTypes';
 
 const propTypes = {
     /** Array of additional styles to add */
diff --git a/src/components/ShowMoreButton/index.js b/src/components/ShowMoreButton/index.js
index 34b55fa5dcf1..03570832ce62 100644
--- a/src/components/ShowMoreButton/index.js
+++ b/src/components/ShowMoreButton/index.js
@@ -1,3 +1,4 @@
+import {stylePropTypes} from '@styles';
 import PropTypes from 'prop-types';
 import React from 'react';
 import {Text, View} from 'react-native';
@@ -8,7 +9,6 @@ import useLocalize from '@hooks/useLocalize';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import * as NumberFormatUtils from '@libs/NumberFormatUtils';
-import stylePropTypes from '@styles/stylePropTypes';
 
 const propTypes = {
     /** Additional styles for container */
diff --git a/src/components/SpacerView.js b/src/components/SpacerView.js
index 6b3ece2d476f..021ced9f25f0 100644
--- a/src/components/SpacerView.js
+++ b/src/components/SpacerView.js
@@ -1,9 +1,9 @@
+import {stylePropTypes} from '@styles';
 import PropTypes from 'prop-types';
 import React from 'react';
 import Animated, {useAnimatedStyle, useSharedValue, withTiming} from 'react-native-reanimated';
 import usePrevious from '@hooks/usePrevious';
 import useStyleUtils from '@hooks/useStyleUtils';
-import stylePropTypes from '@styles/stylePropTypes';
 import CONST from '@src/CONST';
 
 const propTypes = {
diff --git a/src/components/TextLink.js b/src/components/TextLink.js
index 1522d562d5ff..4b414a6fac34 100644
--- a/src/components/TextLink.js
+++ b/src/components/TextLink.js
@@ -1,9 +1,9 @@
+import {stylePropTypes} from '@styles';
 import PropTypes from 'prop-types';
 import React from 'react';
 import _ from 'underscore';
 import useEnvironment from '@hooks/useEnvironment';
 import useThemeStyles from '@hooks/useThemeStyles';
-import stylePropTypes from '@styles/stylePropTypes';
 import * as Link from '@userActions/Link';
 import CONST from '@src/CONST';
 import refPropTypes from './refPropTypes';
diff --git a/src/components/menuItemPropTypes.js b/src/components/menuItemPropTypes.js
index 4d2de3275e23..262b23a9c06c 100644
--- a/src/components/menuItemPropTypes.js
+++ b/src/components/menuItemPropTypes.js
@@ -1,6 +1,6 @@
+import {stylePropTypes} from '@styles';
 import PropTypes from 'prop-types';
 import _ from 'underscore';
-import stylePropTypes from '@styles/stylePropTypes';
 import CONST from '@src/CONST';
 import avatarPropTypes from './avatarPropTypes';
 import refPropTypes from './refPropTypes';
diff --git a/src/pages/home/report/ReportActionItemGrouped.js b/src/pages/home/report/ReportActionItemGrouped.js
index 2e10c45c824a..9b44c6e88479 100644
--- a/src/pages/home/report/ReportActionItemGrouped.js
+++ b/src/pages/home/report/ReportActionItemGrouped.js
@@ -1,8 +1,8 @@
+import {stylePropTypes} from '@styles';
 import PropTypes from 'prop-types';
 import React from 'react';
 import {View} from 'react-native';
 import useThemeStyles from '@hooks/useThemeStyles';
-import stylePropTypes from '@styles/stylePropTypes';
 
 const propTypes = {
     /** Children view component for this action item */
diff --git a/src/pages/home/report/ReportActionItemSingle.js b/src/pages/home/report/ReportActionItemSingle.js
index cbbd52d9c7d2..fa99a0a15b52 100644
--- a/src/pages/home/report/ReportActionItemSingle.js
+++ b/src/pages/home/report/ReportActionItemSingle.js
@@ -1,3 +1,4 @@
+import {stylePropTypes} from '@styles';
 import lodashGet from 'lodash/get';
 import PropTypes from 'prop-types';
 import React, {useCallback, useMemo} from 'react';
@@ -22,7 +23,6 @@ import Navigation from '@libs/Navigation/Navigation';
 import * as ReportUtils from '@libs/ReportUtils';
 import * as UserUtils from '@libs/UserUtils';
 import reportPropTypes from '@pages/reportPropTypes';
-import stylePropTypes from '@styles/stylePropTypes';
 import CONST from '@src/CONST';
 import ROUTES from '@src/ROUTES';
 import ReportActionItemDate from './ReportActionItemDate';
diff --git a/src/pages/settings/Wallet/PaymentMethodList.js b/src/pages/settings/Wallet/PaymentMethodList.js
index 6e424a918b7e..b9207da56c20 100644
--- a/src/pages/settings/Wallet/PaymentMethodList.js
+++ b/src/pages/settings/Wallet/PaymentMethodList.js
@@ -1,4 +1,5 @@
 import {FlashList} from '@shopify/flash-list';
+import {stylePropTypes} from '@styles';
 import lodashGet from 'lodash/get';
 import PropTypes from 'prop-types';
 import React, {useCallback, useMemo} from 'react';
@@ -22,7 +23,6 @@ import * as CardUtils from '@libs/CardUtils';
 import Log from '@libs/Log';
 import Navigation from '@libs/Navigation/Navigation';
 import * as PaymentUtils from '@libs/PaymentUtils';
-import stylePropTypes from '@styles/stylePropTypes';
 import variables from '@styles/variables';
 import * as PaymentMethods from '@userActions/PaymentMethods';
 import CONST from '@src/CONST';

From 45357202a3876ee33e7800217e0743abcdba2a18 Mon Sep 17 00:00:00 2001
From: Christoph Pader <christoph.pader@outlook.com>
Date: Fri, 8 Dec 2023 17:49:32 +0100
Subject: [PATCH 060/102] move context

---
 src/components/ThemeIllustrationsProvider.tsx               | 4 ++--
 src/components/ThemeProvider.tsx                            | 2 +-
 src/components/ThemeStylesProvider.tsx                      | 2 +-
 src/hooks/useStyleUtils.ts                                  | 2 +-
 src/hooks/useTheme.ts                                       | 2 +-
 src/hooks/useThemeIllustrations.ts                          | 2 +-
 src/hooks/useThemeStyles.ts                                 | 2 +-
 src/styles/{ => theme}/context/ThemeContext.ts              | 0
 src/styles/{ => theme}/context/ThemeIllustrationsContext.ts | 4 ++--
 src/styles/{ => theme}/context/ThemeStylesContext.ts        | 0
 src/styles/{ => theme}/illustrations/index.ts               | 0
 src/styles/{ => theme}/illustrations/themes/dark.ts         | 2 +-
 src/styles/{ => theme}/illustrations/themes/light.ts        | 2 +-
 src/styles/{ => theme}/illustrations/types.ts               | 0
 14 files changed, 12 insertions(+), 12 deletions(-)
 rename src/styles/{ => theme}/context/ThemeContext.ts (100%)
 rename src/styles/{ => theme}/context/ThemeIllustrationsContext.ts (55%)
 rename src/styles/{ => theme}/context/ThemeStylesContext.ts (100%)
 rename src/styles/{ => theme}/illustrations/index.ts (100%)
 rename src/styles/{ => theme}/illustrations/themes/dark.ts (86%)
 rename src/styles/{ => theme}/illustrations/themes/light.ts (86%)
 rename src/styles/{ => theme}/illustrations/types.ts (100%)

diff --git a/src/components/ThemeIllustrationsProvider.tsx b/src/components/ThemeIllustrationsProvider.tsx
index 3ea10a322192..3b83a00960a4 100644
--- a/src/components/ThemeIllustrationsProvider.tsx
+++ b/src/components/ThemeIllustrationsProvider.tsx
@@ -1,7 +1,7 @@
 import React, {useMemo} from 'react';
 import useThemePreference from '@hooks/useThemePreference';
-import ThemeIllustrationsContext from '@styles/context/ThemeIllustrationsContext';
-import Illustrations from '@styles/illustrations';
+import ThemeIllustrationsContext from '@styles/theme/context/ThemeIllustrationsContext';
+import Illustrations from '@styles/theme/illustrations';
 
 type ThemeIllustrationsProviderProps = {
     children: React.ReactNode;
diff --git a/src/components/ThemeProvider.tsx b/src/components/ThemeProvider.tsx
index 65f9ad4752fc..34bc32be9c99 100644
--- a/src/components/ThemeProvider.tsx
+++ b/src/components/ThemeProvider.tsx
@@ -2,8 +2,8 @@
 import PropTypes from 'prop-types';
 import React, {useMemo} from 'react';
 import useThemePreferenceWithStaticOverride from '@hooks/useThemePreferenceWithStaticOverride';
-import ThemeContext from '@styles/context/ThemeContext';
 import themes from '@styles/theme';
+import ThemeContext from '@styles/theme/context/ThemeContext';
 import {ThemePreferenceWithoutSystem} from '@styles/theme/types';
 
 const propTypes = {
diff --git a/src/components/ThemeStylesProvider.tsx b/src/components/ThemeStylesProvider.tsx
index 847eb036178b..f0d25d9e4dde 100644
--- a/src/components/ThemeStylesProvider.tsx
+++ b/src/components/ThemeStylesProvider.tsx
@@ -1,7 +1,7 @@
 import React, {useMemo} from 'react';
 import useTheme from '@hooks/useTheme';
-import ThemeStylesContext from '@styles/context/ThemeStylesContext';
 import stylesGenerator from '@styles/index';
+import ThemeStylesContext from '@styles/theme/context/ThemeStylesContext';
 import createStyleUtils from '@styles/utils';
 
 type ThemeStylesProviderProps = React.PropsWithChildren;
diff --git a/src/hooks/useStyleUtils.ts b/src/hooks/useStyleUtils.ts
index fff1919af587..8e6ad31396d5 100644
--- a/src/hooks/useStyleUtils.ts
+++ b/src/hooks/useStyleUtils.ts
@@ -1,5 +1,5 @@
 import {useContext} from 'react';
-import ThemeStylesContext from '@styles/context/ThemeStylesContext';
+import ThemeStylesContext from '@styles/theme/context/ThemeStylesContext';
 
 function useStyleUtils() {
     const themeStylesContext = useContext(ThemeStylesContext);
diff --git a/src/hooks/useTheme.ts b/src/hooks/useTheme.ts
index 7e61784ef3e7..966e9b499e2f 100644
--- a/src/hooks/useTheme.ts
+++ b/src/hooks/useTheme.ts
@@ -1,5 +1,5 @@
 import {useContext} from 'react';
-import ThemeContext from '@styles/context/ThemeContext';
+import ThemeContext from '@styles/theme/context/ThemeContext';
 import {type ThemeColors} from '@styles/theme/types';
 
 function useTheme(): ThemeColors {
diff --git a/src/hooks/useThemeIllustrations.ts b/src/hooks/useThemeIllustrations.ts
index 4e91b842cabe..5bc07185f882 100644
--- a/src/hooks/useThemeIllustrations.ts
+++ b/src/hooks/useThemeIllustrations.ts
@@ -1,5 +1,5 @@
 import {useContext} from 'react';
-import ThemeIllustrationsContext from '@styles/context/ThemeIllustrationsContext';
+import ThemeIllustrationsContext from '@styles/theme/context/ThemeIllustrationsContext';
 
 function useThemeIllustrations() {
     const illustrations = useContext(ThemeIllustrationsContext);
diff --git a/src/hooks/useThemeStyles.ts b/src/hooks/useThemeStyles.ts
index 0638b54541cc..05f36ff52cc5 100644
--- a/src/hooks/useThemeStyles.ts
+++ b/src/hooks/useThemeStyles.ts
@@ -1,5 +1,5 @@
 import {useContext} from 'react';
-import ThemeStylesContext from '@styles/context/ThemeStylesContext';
+import ThemeStylesContext from '@styles/theme/context/ThemeStylesContext';
 
 function useThemeStyles() {
     const themeStylesContext = useContext(ThemeStylesContext);
diff --git a/src/styles/context/ThemeContext.ts b/src/styles/theme/context/ThemeContext.ts
similarity index 100%
rename from src/styles/context/ThemeContext.ts
rename to src/styles/theme/context/ThemeContext.ts
diff --git a/src/styles/context/ThemeIllustrationsContext.ts b/src/styles/theme/context/ThemeIllustrationsContext.ts
similarity index 55%
rename from src/styles/context/ThemeIllustrationsContext.ts
rename to src/styles/theme/context/ThemeIllustrationsContext.ts
index a58318d04d57..b70cf6aa5ea2 100644
--- a/src/styles/context/ThemeIllustrationsContext.ts
+++ b/src/styles/theme/context/ThemeIllustrationsContext.ts
@@ -1,6 +1,6 @@
 import React from 'react';
-import {DefaultIllustrations} from '@styles/illustrations';
-import {IllustrationsType} from '@styles/illustrations/types';
+import {DefaultIllustrations} from '@styles/theme/illustrations';
+import {IllustrationsType} from '@styles/theme/illustrations/types';
 
 const ThemeIllustrationsContext = React.createContext<IllustrationsType>(DefaultIllustrations);
 
diff --git a/src/styles/context/ThemeStylesContext.ts b/src/styles/theme/context/ThemeStylesContext.ts
similarity index 100%
rename from src/styles/context/ThemeStylesContext.ts
rename to src/styles/theme/context/ThemeStylesContext.ts
diff --git a/src/styles/illustrations/index.ts b/src/styles/theme/illustrations/index.ts
similarity index 100%
rename from src/styles/illustrations/index.ts
rename to src/styles/theme/illustrations/index.ts
diff --git a/src/styles/illustrations/themes/dark.ts b/src/styles/theme/illustrations/themes/dark.ts
similarity index 86%
rename from src/styles/illustrations/themes/dark.ts
rename to src/styles/theme/illustrations/themes/dark.ts
index 90a0ec45f987..2a4390ae2520 100644
--- a/src/styles/illustrations/themes/dark.ts
+++ b/src/styles/theme/illustrations/themes/dark.ts
@@ -1,7 +1,7 @@
 import EmptyStateBackgroundImage from '@assets/images/themeDependent/empty-state_background-fade-dark.png';
 import ExampleCheckEN from '@assets/images/themeDependent/example-check-image-dark-en.png';
 import ExampleCheckES from '@assets/images/themeDependent/example-check-image-dark-es.png';
-import {IllustrationsType} from '@styles/illustrations/types';
+import {IllustrationsType} from '@styles/theme/illustrations/types';
 
 const illustrations = {
     EmptyStateBackgroundImage,
diff --git a/src/styles/illustrations/themes/light.ts b/src/styles/theme/illustrations/themes/light.ts
similarity index 86%
rename from src/styles/illustrations/themes/light.ts
rename to src/styles/theme/illustrations/themes/light.ts
index 906b24eacbb3..f41114a04efa 100644
--- a/src/styles/illustrations/themes/light.ts
+++ b/src/styles/theme/illustrations/themes/light.ts
@@ -1,7 +1,7 @@
 import EmptyStateBackgroundImage from '@assets/images/themeDependent/empty-state_background-fade-light.png';
 import ExampleCheckEN from '@assets/images/themeDependent/example-check-image-light-en.png';
 import ExampleCheckES from '@assets/images/themeDependent/example-check-image-light-es.png';
-import {IllustrationsType} from '@styles/illustrations/types';
+import {IllustrationsType} from '@styles/theme/illustrations/types';
 
 const illustrations = {
     EmptyStateBackgroundImage,
diff --git a/src/styles/illustrations/types.ts b/src/styles/theme/illustrations/types.ts
similarity index 100%
rename from src/styles/illustrations/types.ts
rename to src/styles/theme/illustrations/types.ts

From ea3dc01ba64e96611710031c1e7f33536e93f8a7 Mon Sep 17 00:00:00 2001
From: Christoph Pader <christoph.pader@outlook.com>
Date: Fri, 8 Dec 2023 17:53:34 +0100
Subject: [PATCH 061/102] fix: imports

---
 src/App.js                                                 | 4 ++--
 src/pages/iou/request/step/IOURequestStepDistance.js       | 3 ++-
 src/pages/iou/request/step/StepScreenDragAndDropWrapper.js | 4 +++-
 3 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/src/App.js b/src/App.js
index f1e025a79891..12fc6a9426e1 100644
--- a/src/App.js
+++ b/src/App.js
@@ -16,6 +16,8 @@ import {LocaleContextProvider} from './components/LocaleContextProvider';
 import OnyxProvider from './components/OnyxProvider';
 import PopoverContextProvider from './components/PopoverProvider';
 import SafeArea from './components/SafeArea';
+import ThemeIllustrationsProvider from './components/ThemeIllustrationsProvider';
+import ThemeProvider from './components/ThemeProvider';
 import ThemeStylesProvider from './components/ThemeStylesProvider';
 import {CurrentReportIDContextProvider} from './components/withCurrentReportID';
 import {EnvironmentProvider} from './components/withEnvironment';
@@ -27,8 +29,6 @@ import OnyxUpdateManager from './libs/actions/OnyxUpdateManager';
 import * as Session from './libs/actions/Session';
 import * as Environment from './libs/Environment/Environment';
 import {ReportAttachmentsProvider} from './pages/home/report/ReportAttachmentsContext';
-import ThemeIllustrationsPr./components/ThemeProviderrations/ThemeIllustrationsProvider';
-import ThemeProvider from './styles/theme/ThemeProvider';
 
 // For easier debugging and development, when we are in web we expose Onyx to the window, so you can more easily set data into Onyx
 if (window && Environment.isDevelopment()) {
diff --git a/src/pages/iou/request/step/IOURequestStepDistance.js b/src/pages/iou/request/step/IOURequestStepDistance.js
index 4ac0f3649b98..a4b1e97425ee 100644
--- a/src/pages/iou/request/step/IOURequestStepDistance.js
+++ b/src/pages/iou/request/step/IOURequestStepDistance.js
@@ -11,12 +11,12 @@ import transactionPropTypes from '@components/transactionPropTypes';
 import useLocalize from '@hooks/useLocalize';
 import useNetwork from '@hooks/useNetwork';
 import usePrevious from '@hooks/usePrevious';
+import useThemeStyles from '@hooks/useThemeStyles';
 import compose from '@libs/compose';
 import * as ErrorUtils from '@libs/ErrorUtils';
 import Navigation from '@libs/Navigation/Navigation';
 import * as TransactionUtils from '@libs/TransactionUtils';
 import reportPropTypes from '@pages/reportPropTypes';
-import styles from '@styles/styles';
 import variables from '@styles/variables';
 import * as IOU from '@userActions/IOU';
 import * as MapboxToken from '@userActions/MapboxToken';
@@ -51,6 +51,7 @@ function IOURequestStepDistance({
     },
     transaction,
 }) {
+    const styles = useThemeStyles();
     const {isOffline} = useNetwork();
     const {translate} = useLocalize();
 
diff --git a/src/pages/iou/request/step/StepScreenDragAndDropWrapper.js b/src/pages/iou/request/step/StepScreenDragAndDropWrapper.js
index e7247422e1f2..f35b7d3138cf 100644
--- a/src/pages/iou/request/step/StepScreenDragAndDropWrapper.js
+++ b/src/pages/iou/request/step/StepScreenDragAndDropWrapper.js
@@ -4,8 +4,8 @@ import {View} from 'react-native';
 import DragAndDropProvider from '@components/DragAndDrop/Provider';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import ScreenWrapper from '@components/ScreenWrapper';
+import useThemeStyles from '@hooks/useThemeStyles';
 import * as DeviceCapabilities from '@libs/DeviceCapabilities';
-import styles from '@styles/styles';
 
 const propTypes = {
     /** The things to display inside the screenwrapper */
@@ -32,6 +32,8 @@ const defaultProps = {
 };
 
 function StepScreenDragAndDropWrapper({testID, headerTitle, onBackButtonPress, onEntryTransitionEnd, children, shouldShowWrapper}) {
+    const styles = useThemeStyles();
+
     const [isDraggingOver, setIsDraggingOver] = useState(false);
     if (!shouldShowWrapper) {
         return children;

From 43927e909b8687c13a6bdc145af33b889022c837 Mon Sep 17 00:00:00 2001
From: Christoph Pader <christoph.pader@outlook.com>
Date: Fri, 8 Dec 2023 17:54:52 +0100
Subject: [PATCH 062/102] fix: prettier

---
 .../Attachments/AttachmentCarousel/CarouselButtons.js           | 2 +-
 .../HTMLEngineProvider/HTMLRenderers/EditedRenderer.js          | 2 +-
 src/components/Modal/BaseModal.tsx                              | 2 +-
 src/components/SAMLLoadingIndicator.js                          | 2 +-
 4 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/Attachments/AttachmentCarousel/CarouselButtons.js b/src/components/Attachments/AttachmentCarousel/CarouselButtons.js
index f36f6d1c9580..1847d30ede22 100644
--- a/src/components/Attachments/AttachmentCarousel/CarouselButtons.js
+++ b/src/components/Attachments/AttachmentCarousel/CarouselButtons.js
@@ -7,9 +7,9 @@ import Button from '@components/Button';
 import * as Expensicons from '@components/Icon/Expensicons';
 import Tooltip from '@components/Tooltip';
 import useLocalize from '@hooks/useLocalize';
+import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import useWindowDimensions from '@hooks/useWindowDimensions';
-import useTheme from '@hooks/useTheme';
 
 const propTypes = {
     /** Where the arrows should be visible */
diff --git a/src/components/HTMLEngineProvider/HTMLRenderers/EditedRenderer.js b/src/components/HTMLEngineProvider/HTMLRenderers/EditedRenderer.js
index 8addca842cd1..21f8505bd188 100644
--- a/src/components/HTMLEngineProvider/HTMLRenderers/EditedRenderer.js
+++ b/src/components/HTMLEngineProvider/HTMLRenderers/EditedRenderer.js
@@ -2,8 +2,8 @@ import React from 'react';
 import _ from 'underscore';
 import Text from '@components/Text';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
-import useThemeStyles from '@hooks/useThemeStyles';
 import useTheme from '@hooks/useTheme';
+import useThemeStyles from '@hooks/useThemeStyles';
 import editedLabelStyles from '@styles/utils/editedLabelStyles';
 import variables from '@styles/variables';
 import CONST from '@src/CONST';
diff --git a/src/components/Modal/BaseModal.tsx b/src/components/Modal/BaseModal.tsx
index 6bb90fd2ceb2..89640c56f5ef 100644
--- a/src/components/Modal/BaseModal.tsx
+++ b/src/components/Modal/BaseModal.tsx
@@ -5,11 +5,11 @@ import ColorSchemeWrapper from '@components/ColorSchemeWrapper';
 import usePrevious from '@hooks/usePrevious';
 import useSafeAreaInsets from '@hooks/useSafeAreaInsets';
 import useStyleUtils from '@hooks/useStyleUtils';
+import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import ComposerFocusManager from '@libs/ComposerFocusManager';
 import useNativeDriver from '@libs/useNativeDriver';
-import useTheme from '@hooks/useTheme';
 import variables from '@styles/variables';
 import * as Modal from '@userActions/Modal';
 import CONST from '@src/CONST';
diff --git a/src/components/SAMLLoadingIndicator.js b/src/components/SAMLLoadingIndicator.js
index 83f86e1f01b9..84f9098e564f 100644
--- a/src/components/SAMLLoadingIndicator.js
+++ b/src/components/SAMLLoadingIndicator.js
@@ -1,8 +1,8 @@
 import React from 'react';
 import {StyleSheet, View} from 'react-native';
 import useLocalize from '@hooks/useLocalize';
-import useThemeStyles from '@hooks/useThemeStyles';
 import useTheme from '@hooks/useTheme';
+import useThemeStyles from '@hooks/useThemeStyles';
 import Icon from './Icon';
 import * as Expensicons from './Icon/Expensicons';
 import * as Illustrations from './Icon/Illustrations';

From 0f21eb20d39e9380e622b468f3e30ae3dcbddb47 Mon Sep 17 00:00:00 2001
From: Christoph Pader <christoph.pader@outlook.com>
Date: Fri, 8 Dec 2023 17:55:21 +0100
Subject: [PATCH 063/102] fix: imports

---
 .../Navigation/AppNavigator/getRootNavigatorScreenOptions.ts    | 2 +-
 src/libs/Navigation/AppNavigator/modalCardStyleInterpolator.ts  | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/libs/Navigation/AppNavigator/getRootNavigatorScreenOptions.ts b/src/libs/Navigation/AppNavigator/getRootNavigatorScreenOptions.ts
index 1ce3e54f173a..cb9be2d9b241 100644
--- a/src/libs/Navigation/AppNavigator/getRootNavigatorScreenOptions.ts
+++ b/src/libs/Navigation/AppNavigator/getRootNavigatorScreenOptions.ts
@@ -1,6 +1,6 @@
 import {StackCardInterpolationProps, StackNavigationOptions} from '@react-navigation/stack';
-import getNavigationModalCardStyle from '@styles/getNavigationModalCardStyles';
 import {ThemeStyles} from '@styles/index';
+import getNavigationModalCardStyle from '@styles/utils/getNavigationModalCardStyles';
 import variables from '@styles/variables';
 import CONFIG from '@src/CONFIG';
 import modalCardStyleInterpolator from './modalCardStyleInterpolator';
diff --git a/src/libs/Navigation/AppNavigator/modalCardStyleInterpolator.ts b/src/libs/Navigation/AppNavigator/modalCardStyleInterpolator.ts
index f7e772148e79..eff88422cc5c 100644
--- a/src/libs/Navigation/AppNavigator/modalCardStyleInterpolator.ts
+++ b/src/libs/Navigation/AppNavigator/modalCardStyleInterpolator.ts
@@ -1,6 +1,6 @@
 import type {StackCardInterpolatedStyle, StackCardInterpolationProps} from '@react-navigation/stack';
 import {Animated} from 'react-native';
-import getCardStyles from '@styles/cardStyles';
+import getCardStyles from '@styles/utils/cardStyles';
 import variables from '@styles/variables';
 
 export default (isSmallScreenWidth: boolean, isFullScreenModal: boolean, {current: {progress}, inverted, layouts: {screen}}: StackCardInterpolationProps): StackCardInterpolatedStyle => {

From 0a977a12575b2b4e0a7c25f40c448c8148aeae3f Mon Sep 17 00:00:00 2001
From: Christoph Pader <christoph.pader@outlook.com>
Date: Fri, 8 Dec 2023 17:56:50 +0100
Subject: [PATCH 064/102] fix: imports

---
 src/styles/theme/context/ThemeContext.ts             |  2 +-
 src/styles/theme/types.ts                            |  2 +-
 src/styles/utils/ModalStyleUtils.ts                  |  2 +-
 .../utils/ReportActionContextMenuStyleUtils.ts       |  2 +-
 src/styles/utils/index.ts                            | 12 ++++++------
 5 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/src/styles/theme/context/ThemeContext.ts b/src/styles/theme/context/ThemeContext.ts
index 09761e6abc88..64cd805b3f59 100644
--- a/src/styles/theme/context/ThemeContext.ts
+++ b/src/styles/theme/context/ThemeContext.ts
@@ -1,6 +1,6 @@
 import React from 'react';
-import {defaultTheme} from '@styles/theme';
 import {type ThemeColors} from '@styles/theme/types';
+import {defaultTheme} from '..';
 
 const ThemeContext = React.createContext<ThemeColors>(defaultTheme);
 
diff --git a/src/styles/theme/types.ts b/src/styles/theme/types.ts
index bc7c42c243b3..023e74f4fced 100644
--- a/src/styles/theme/types.ts
+++ b/src/styles/theme/types.ts
@@ -1,5 +1,5 @@
-import {type ColorScheme, type StatusBarStyle} from '@styles/index';
 import CONST from '@src/CONST';
+import {type ColorScheme, type StatusBarStyle} from '..';
 
 type Color = string;
 
diff --git a/src/styles/utils/ModalStyleUtils.ts b/src/styles/utils/ModalStyleUtils.ts
index 193aaa2cf94f..304935aa157d 100644
--- a/src/styles/utils/ModalStyleUtils.ts
+++ b/src/styles/utils/ModalStyleUtils.ts
@@ -1,10 +1,10 @@
 import {ViewStyle} from 'react-native';
 import {ModalProps} from 'react-native-modal';
 import {ValueOf} from 'type-fest';
-import {type ThemeStyles} from '@styles/index';
 import {type ThemeColors} from '@styles/theme/types';
 import variables from '@styles/variables';
 import CONST from '@src/CONST';
+import {type ThemeStyles} from '..';
 
 function getCenteredModalStyles(styles: ThemeStyles, windowWidth: number, isSmallScreenWidth: boolean, isFullScreenWhenSmall = false): ViewStyle {
     const modalStyles = styles.centeredModalStyles(isSmallScreenWidth, isFullScreenWhenSmall);
diff --git a/src/styles/utils/ReportActionContextMenuStyleUtils.ts b/src/styles/utils/ReportActionContextMenuStyleUtils.ts
index d8e57dc3d82a..e39005a5c12a 100644
--- a/src/styles/utils/ReportActionContextMenuStyleUtils.ts
+++ b/src/styles/utils/ReportActionContextMenuStyleUtils.ts
@@ -1,7 +1,7 @@
 import {ViewStyle} from 'react-native';
-import {type ThemeStyles} from '@styles/index';
 import {type ThemeColors} from '@styles/theme/types';
 import variables from '@styles/variables';
+import {type ThemeStyles} from '..';
 
 const getDefaultWrapperStyle = (theme: ThemeColors): ViewStyle => ({
     backgroundColor: theme.componentBG,
diff --git a/src/styles/utils/index.ts b/src/styles/utils/index.ts
index c74c3a429d43..6ab9b79db433 100644
--- a/src/styles/utils/index.ts
+++ b/src/styles/utils/index.ts
@@ -4,22 +4,22 @@ import {EdgeInsets} from 'react-native-safe-area-context';
 import {ValueOf} from 'type-fest';
 import * as Browser from '@libs/Browser';
 import * as UserUtils from '@libs/UserUtils';
-import {defaultStyles, type ThemeStyles} from '@styles/index';
 import {defaultTheme} from '@styles/theme';
 import colors from '@styles/theme/colors';
 import {ThemeColors} from '@styles/theme/types';
-import cursor from '@styles/utils/cursor';
-import getContextMenuItemStyles from '@styles/utils/getContextMenuItemStyles';
-import {compactContentContainerStyles} from '@styles/utils/optionRowStyles';
-import positioning from '@styles/utils/positioning';
-import spacing from '@styles/utils/spacing';
 import variables from '@styles/variables';
 import CONST from '@src/CONST';
 import {Transaction} from '@src/types/onyx';
+import {defaultStyles, type ThemeStyles} from '..';
 import containerComposeStyles from './containerComposeStyles';
+import cursor from './cursor';
 import fontFamily from './fontFamily';
+import getContextMenuItemStyles from './getContextMenuItemStyles';
 import createModalStyleUtils from './ModalStyleUtils';
+import {compactContentContainerStyles} from './optionRowStyles';
+import positioning from './positioning';
 import createReportActionContextMenuStyleUtils from './ReportActionContextMenuStyleUtils';
+import spacing from './spacing';
 import createTooltipStyleUtils from './TooltipStyleUtils';
 
 type AllStyles = ViewStyle | TextStyle | ImageStyle;

From 10bc571ff5085cd1f1192309c9d7b58477f9600a Mon Sep 17 00:00:00 2001
From: Christoph Pader <christoph.pader@outlook.com>
Date: Fri, 8 Dec 2023 18:09:41 +0100
Subject: [PATCH 065/102] fix: remove propTypes

---
 src/components/CustomStatusBar/index.tsx | 18 +++---------------
 1 file changed, 3 insertions(+), 15 deletions(-)

diff --git a/src/components/CustomStatusBar/index.tsx b/src/components/CustomStatusBar/index.tsx
index 3f9aac963a28..2c1af898786d 100644
--- a/src/components/CustomStatusBar/index.tsx
+++ b/src/components/CustomStatusBar/index.tsx
@@ -1,5 +1,4 @@
 import {EventListenerCallback, NavigationContainerEventMap} from '@react-navigation/native';
-import PropTypes from 'prop-types';
 import React, {useCallback, useContext, useEffect} from 'react';
 import useTheme from '@hooks/useTheme';
 import {navigationRef} from '@libs/Navigation/Navigation';
@@ -8,23 +7,13 @@ import CustomStatusBarContext from './CustomStatusBarContext';
 import updateStatusBarAppearance from './updateStatusBarAppearance';
 
 type CustomStatusBarProps = {
-    isNested: boolean;
-};
-
-const propTypes = {
     /** Whether the CustomStatusBar is nested within another CustomStatusBar.
      *  A nested CustomStatusBar will disable the "root" CustomStatusBar. */
-    isNested: PropTypes.bool,
-};
-
-type CustomStatusBarType = {
-    (props: CustomStatusBarProps): React.ReactNode;
-    displayName: string;
-    propTypes: typeof propTypes;
+    isNested: boolean;
 };
 
 // eslint-disable-next-line react/function-component-definition
-const CustomStatusBar: CustomStatusBarType = ({isNested = false}) => {
+function CustomStatusBar({isNested = false}: CustomStatusBarProps) {
     const {isRootStatusBarDisabled, disableRootStatusBar} = useContext(CustomStatusBarContext);
     const theme = useTheme();
 
@@ -83,9 +72,8 @@ const CustomStatusBar: CustomStatusBarType = ({isNested = false}) => {
     }
 
     return <StatusBar />;
-};
+}
 
 CustomStatusBar.displayName = 'CustomStatusBar';
-CustomStatusBar.propTypes = propTypes;
 
 export default CustomStatusBar;

From 25196becf259522dfe987a07bca8c31043bee22f Mon Sep 17 00:00:00 2001
From: Christoph Pader <christoph.pader@outlook.com>
Date: Fri, 8 Dec 2023 18:13:17 +0100
Subject: [PATCH 066/102] move style prop types

---
 .../anchorForAttachmentsOnlyPropTypes.js                     | 2 +-
 .../AnchorForCommentsOnly/anchorForCommentsOnlyPropTypes.js  | 2 +-
 .../AttachmentView/AttachmentViewPdf/propTypes.js            | 2 +-
 src/components/AvatarWithImagePicker.js                      | 2 +-
 src/components/Form.js                                       | 2 +-
 src/components/Form/FormProvider.js                          | 2 +-
 src/components/Form/FormWrapper.js                           | 2 +-
 src/components/FormHelpMessage.js                            | 2 +-
 src/components/Image/imagePropTypes.js                       | 2 +-
 src/components/LHNOptionsList/LHNOptionsList.js              | 2 +-
 src/components/Modal/modalPropTypes.js                       | 2 +-
 src/components/OptionsList/optionsListPropTypes.js           | 2 +-
 src/components/OptionsSelector/optionsSelectorPropTypes.js   | 2 +-
 src/components/PDFView/pdfViewPropTypes.js                   | 2 +-
 src/components/ScreenWrapper/propTypes.js                    | 2 +-
 src/components/ShowMoreButton/index.js                       | 2 +-
 src/components/SpacerView.js                                 | 2 +-
 src/components/menuItemPropTypes.js                          | 2 +-
 src/pages/home/report/ReportActionItemGrouped.js             | 2 +-
 src/pages/home/report/ReportActionItemSingle.js              | 2 +-
 src/pages/settings/Wallet/PaymentMethodList.js               | 2 +-
 src/styles/index.ts                                          | 5 +----
 src/styles/stylePropTypes.js                                 | 5 +++++
 23 files changed, 27 insertions(+), 25 deletions(-)
 create mode 100644 src/styles/stylePropTypes.js

diff --git a/src/components/AnchorForAttachmentsOnly/anchorForAttachmentsOnlyPropTypes.js b/src/components/AnchorForAttachmentsOnly/anchorForAttachmentsOnlyPropTypes.js
index 8619b3367d9f..9452e615d31c 100644
--- a/src/components/AnchorForAttachmentsOnly/anchorForAttachmentsOnlyPropTypes.js
+++ b/src/components/AnchorForAttachmentsOnly/anchorForAttachmentsOnlyPropTypes.js
@@ -1,5 +1,5 @@
-import {stylePropTypes} from '@styles';
 import PropTypes from 'prop-types';
+import stylePropTypes from '@styles/stylePropTypes';
 
 const propTypes = {
     /** The URL of the attachment */
diff --git a/src/components/AnchorForCommentsOnly/anchorForCommentsOnlyPropTypes.js b/src/components/AnchorForCommentsOnly/anchorForCommentsOnlyPropTypes.js
index 6d62f766be9b..6bf1d094497d 100644
--- a/src/components/AnchorForCommentsOnly/anchorForCommentsOnlyPropTypes.js
+++ b/src/components/AnchorForCommentsOnly/anchorForCommentsOnlyPropTypes.js
@@ -1,5 +1,5 @@
-import {stylePropTypes} from '@styles';
 import PropTypes from 'prop-types';
+import stylePropTypes from '@styles/stylePropTypes';
 
 const propTypes = {
     /** The URL to open */
diff --git a/src/components/Attachments/AttachmentView/AttachmentViewPdf/propTypes.js b/src/components/Attachments/AttachmentView/AttachmentViewPdf/propTypes.js
index f19e7b7f89ab..a34010f0ba8b 100644
--- a/src/components/Attachments/AttachmentView/AttachmentViewPdf/propTypes.js
+++ b/src/components/Attachments/AttachmentView/AttachmentViewPdf/propTypes.js
@@ -1,6 +1,6 @@
-import {stylePropTypes} from '@styles';
 import PropTypes from 'prop-types';
 import * as AttachmentsPropTypes from '@components/Attachments/propTypes';
+import stylePropTypes from '@styles/stylePropTypes';
 
 const attachmentViewPdfPropTypes = {
     /** File object maybe be instance of File or Object */
diff --git a/src/components/AvatarWithImagePicker.js b/src/components/AvatarWithImagePicker.js
index a046f00fa1e9..b61792f4bb97 100644
--- a/src/components/AvatarWithImagePicker.js
+++ b/src/components/AvatarWithImagePicker.js
@@ -1,4 +1,3 @@
-import {stylePropTypes} from '@styles';
 import lodashGet from 'lodash/get';
 import PropTypes from 'prop-types';
 import React, {useEffect, useRef, useState} from 'react';
@@ -10,6 +9,7 @@ import useThemeStyles from '@hooks/useThemeStyles';
 import * as Browser from '@libs/Browser';
 import * as FileUtils from '@libs/fileDownload/FileUtils';
 import getImageResolution from '@libs/fileDownload/getImageResolution';
+import stylePropTypes from '@styles/stylePropTypes';
 import variables from '@styles/variables';
 import CONST from '@src/CONST';
 import AttachmentModal from './AttachmentModal';
diff --git a/src/components/Form.js b/src/components/Form.js
index e00219a1edc9..33cace99f627 100644
--- a/src/components/Form.js
+++ b/src/components/Form.js
@@ -1,4 +1,3 @@
-import {stylePropTypes} from '@styles';
 import lodashGet from 'lodash/get';
 import PropTypes from 'prop-types';
 import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react';
@@ -11,6 +10,7 @@ import * as ErrorUtils from '@libs/ErrorUtils';
 import FormUtils from '@libs/FormUtils';
 import * as ValidationUtils from '@libs/ValidationUtils';
 import Visibility from '@libs/Visibility';
+import stylePropTypes from '@styles/stylePropTypes';
 import * as FormActions from '@userActions/FormActions';
 import CONST from '@src/CONST';
 import FormAlertWithSubmitButton from './FormAlertWithSubmitButton';
diff --git a/src/components/Form/FormProvider.js b/src/components/Form/FormProvider.js
index 393ff9164e0f..af2511fc9f74 100644
--- a/src/components/Form/FormProvider.js
+++ b/src/components/Form/FormProvider.js
@@ -1,4 +1,3 @@
-import {stylePropTypes} from '@styles';
 import lodashGet from 'lodash/get';
 import PropTypes from 'prop-types';
 import React, {createRef, useCallback, useMemo, useRef, useState} from 'react';
@@ -9,6 +8,7 @@ import {withNetwork} from '@components/OnyxProvider';
 import compose from '@libs/compose';
 import * as ValidationUtils from '@libs/ValidationUtils';
 import Visibility from '@libs/Visibility';
+import stylePropTypes from '@styles/stylePropTypes';
 import * as FormActions from '@userActions/FormActions';
 import CONST from '@src/CONST';
 import FormContext from './FormContext';
diff --git a/src/components/Form/FormWrapper.js b/src/components/Form/FormWrapper.js
index a31ce0ff2cf0..da34262a8af8 100644
--- a/src/components/Form/FormWrapper.js
+++ b/src/components/Form/FormWrapper.js
@@ -1,4 +1,3 @@
-import {stylePropTypes} from '@styles';
 import PropTypes from 'prop-types';
 import React, {useCallback, useMemo, useRef} from 'react';
 import {Keyboard, ScrollView, StyleSheet} from 'react-native';
@@ -11,6 +10,7 @@ import SafeAreaConsumer from '@components/SafeAreaConsumer';
 import ScrollViewWithContext from '@components/ScrollViewWithContext';
 import useThemeStyles from '@hooks/useThemeStyles';
 import * as ErrorUtils from '@libs/ErrorUtils';
+import stylePropTypes from '@styles/stylePropTypes';
 import errorsPropType from './errorsPropType';
 
 const propTypes = {
diff --git a/src/components/FormHelpMessage.js b/src/components/FormHelpMessage.js
index f371f13898a6..7f0122a4434e 100644
--- a/src/components/FormHelpMessage.js
+++ b/src/components/FormHelpMessage.js
@@ -1,4 +1,3 @@
-import {stylePropTypes} from '@styles';
 import PropTypes from 'prop-types';
 import React from 'react';
 import {View} from 'react-native';
@@ -6,6 +5,7 @@ import _ from 'underscore';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import * as Localize from '@libs/Localize';
+import stylePropTypes from '@styles/stylePropTypes';
 import Icon from './Icon';
 import * as Expensicons from './Icon/Expensicons';
 import Text from './Text';
diff --git a/src/components/Image/imagePropTypes.js b/src/components/Image/imagePropTypes.js
index 8a2f466f95e7..78bd48ba47ec 100644
--- a/src/components/Image/imagePropTypes.js
+++ b/src/components/Image/imagePropTypes.js
@@ -1,5 +1,5 @@
-import {stylePropTypes} from '@styles';
 import PropTypes from 'prop-types';
+import stylePropTypes from '@styles/stylePropTypes';
 import RESIZE_MODES from './resizeModes';
 import sourcePropTypes from './sourcePropTypes';
 
diff --git a/src/components/LHNOptionsList/LHNOptionsList.js b/src/components/LHNOptionsList/LHNOptionsList.js
index 1c10066aaecb..71b14b6fadcd 100644
--- a/src/components/LHNOptionsList/LHNOptionsList.js
+++ b/src/components/LHNOptionsList/LHNOptionsList.js
@@ -1,5 +1,4 @@
 import {FlashList} from '@shopify/flash-list';
-import {stylePropTypes} from '@styles';
 import lodashGet from 'lodash/get';
 import PropTypes from 'prop-types';
 import React, {useCallback} from 'react';
@@ -15,6 +14,7 @@ import * as OptionsListUtils from '@libs/OptionsListUtils';
 import * as ReportUtils from '@libs/ReportUtils';
 import reportActionPropTypes from '@pages/home/report/reportActionPropTypes';
 import reportPropTypes from '@pages/reportPropTypes';
+import stylePropTypes from '@styles/stylePropTypes';
 import variables from '@styles/variables';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
diff --git a/src/components/Modal/modalPropTypes.js b/src/components/Modal/modalPropTypes.js
index 08499ce6aa51..84e610b694e4 100644
--- a/src/components/Modal/modalPropTypes.js
+++ b/src/components/Modal/modalPropTypes.js
@@ -1,7 +1,7 @@
-import {stylePropTypes} from '@styles';
 import PropTypes from 'prop-types';
 import _ from 'underscore';
 import {windowDimensionsPropTypes} from '@components/withWindowDimensions';
+import stylePropTypes from '@styles/stylePropTypes';
 import CONST from '@src/CONST';
 
 const propTypes = {
diff --git a/src/components/OptionsList/optionsListPropTypes.js b/src/components/OptionsList/optionsListPropTypes.js
index 19b4d5fafeaf..6008101ac1b6 100644
--- a/src/components/OptionsList/optionsListPropTypes.js
+++ b/src/components/OptionsList/optionsListPropTypes.js
@@ -1,7 +1,7 @@
-import {stylePropTypes} from '@styles';
 import PropTypes from 'prop-types';
 import optionPropTypes from '@components/optionPropTypes';
 import SectionList from '@components/SectionList';
+import stylePropTypes from '@styles/stylePropTypes';
 
 const propTypes = {
     /** option flexStyle for the options list container */
diff --git a/src/components/OptionsSelector/optionsSelectorPropTypes.js b/src/components/OptionsSelector/optionsSelectorPropTypes.js
index 4bdfb2c3de80..8593569dfafd 100644
--- a/src/components/OptionsSelector/optionsSelectorPropTypes.js
+++ b/src/components/OptionsSelector/optionsSelectorPropTypes.js
@@ -1,6 +1,6 @@
-import {stylePropTypes} from '@styles';
 import PropTypes from 'prop-types';
 import optionPropTypes from '@components/optionPropTypes';
+import stylePropTypes from '@styles/stylePropTypes';
 import CONST from '@src/CONST';
 
 const propTypes = {
diff --git a/src/components/PDFView/pdfViewPropTypes.js b/src/components/PDFView/pdfViewPropTypes.js
index 97c8d8c6d02a..546f9b1a8933 100644
--- a/src/components/PDFView/pdfViewPropTypes.js
+++ b/src/components/PDFView/pdfViewPropTypes.js
@@ -1,7 +1,7 @@
-import {stylePropTypes} from '@styles';
 import PropTypes from 'prop-types';
 import {withThemeStylesPropTypes} from '@components/withThemeStyles';
 import {windowDimensionsPropTypes} from '@components/withWindowDimensions';
+import stylePropTypes from '@styles/stylePropTypes';
 
 const propTypes = {
     /** URL to full-sized image */
diff --git a/src/components/ScreenWrapper/propTypes.js b/src/components/ScreenWrapper/propTypes.js
index 42dea8eb6dea..c98968bb112b 100644
--- a/src/components/ScreenWrapper/propTypes.js
+++ b/src/components/ScreenWrapper/propTypes.js
@@ -1,5 +1,5 @@
-import {stylePropTypes} from '@styles';
 import PropTypes from 'prop-types';
+import stylePropTypes from '@styles/stylePropTypes';
 
 const propTypes = {
     /** Array of additional styles to add */
diff --git a/src/components/ShowMoreButton/index.js b/src/components/ShowMoreButton/index.js
index 03570832ce62..34b55fa5dcf1 100644
--- a/src/components/ShowMoreButton/index.js
+++ b/src/components/ShowMoreButton/index.js
@@ -1,4 +1,3 @@
-import {stylePropTypes} from '@styles';
 import PropTypes from 'prop-types';
 import React from 'react';
 import {Text, View} from 'react-native';
@@ -9,6 +8,7 @@ import useLocalize from '@hooks/useLocalize';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import * as NumberFormatUtils from '@libs/NumberFormatUtils';
+import stylePropTypes from '@styles/stylePropTypes';
 
 const propTypes = {
     /** Additional styles for container */
diff --git a/src/components/SpacerView.js b/src/components/SpacerView.js
index 021ced9f25f0..6b3ece2d476f 100644
--- a/src/components/SpacerView.js
+++ b/src/components/SpacerView.js
@@ -1,9 +1,9 @@
-import {stylePropTypes} from '@styles';
 import PropTypes from 'prop-types';
 import React from 'react';
 import Animated, {useAnimatedStyle, useSharedValue, withTiming} from 'react-native-reanimated';
 import usePrevious from '@hooks/usePrevious';
 import useStyleUtils from '@hooks/useStyleUtils';
+import stylePropTypes from '@styles/stylePropTypes';
 import CONST from '@src/CONST';
 
 const propTypes = {
diff --git a/src/components/menuItemPropTypes.js b/src/components/menuItemPropTypes.js
index 262b23a9c06c..4d2de3275e23 100644
--- a/src/components/menuItemPropTypes.js
+++ b/src/components/menuItemPropTypes.js
@@ -1,6 +1,6 @@
-import {stylePropTypes} from '@styles';
 import PropTypes from 'prop-types';
 import _ from 'underscore';
+import stylePropTypes from '@styles/stylePropTypes';
 import CONST from '@src/CONST';
 import avatarPropTypes from './avatarPropTypes';
 import refPropTypes from './refPropTypes';
diff --git a/src/pages/home/report/ReportActionItemGrouped.js b/src/pages/home/report/ReportActionItemGrouped.js
index 9b44c6e88479..2e10c45c824a 100644
--- a/src/pages/home/report/ReportActionItemGrouped.js
+++ b/src/pages/home/report/ReportActionItemGrouped.js
@@ -1,8 +1,8 @@
-import {stylePropTypes} from '@styles';
 import PropTypes from 'prop-types';
 import React from 'react';
 import {View} from 'react-native';
 import useThemeStyles from '@hooks/useThemeStyles';
+import stylePropTypes from '@styles/stylePropTypes';
 
 const propTypes = {
     /** Children view component for this action item */
diff --git a/src/pages/home/report/ReportActionItemSingle.js b/src/pages/home/report/ReportActionItemSingle.js
index fa99a0a15b52..cbbd52d9c7d2 100644
--- a/src/pages/home/report/ReportActionItemSingle.js
+++ b/src/pages/home/report/ReportActionItemSingle.js
@@ -1,4 +1,3 @@
-import {stylePropTypes} from '@styles';
 import lodashGet from 'lodash/get';
 import PropTypes from 'prop-types';
 import React, {useCallback, useMemo} from 'react';
@@ -23,6 +22,7 @@ import Navigation from '@libs/Navigation/Navigation';
 import * as ReportUtils from '@libs/ReportUtils';
 import * as UserUtils from '@libs/UserUtils';
 import reportPropTypes from '@pages/reportPropTypes';
+import stylePropTypes from '@styles/stylePropTypes';
 import CONST from '@src/CONST';
 import ROUTES from '@src/ROUTES';
 import ReportActionItemDate from './ReportActionItemDate';
diff --git a/src/pages/settings/Wallet/PaymentMethodList.js b/src/pages/settings/Wallet/PaymentMethodList.js
index b9207da56c20..6e424a918b7e 100644
--- a/src/pages/settings/Wallet/PaymentMethodList.js
+++ b/src/pages/settings/Wallet/PaymentMethodList.js
@@ -1,5 +1,4 @@
 import {FlashList} from '@shopify/flash-list';
-import {stylePropTypes} from '@styles';
 import lodashGet from 'lodash/get';
 import PropTypes from 'prop-types';
 import React, {useCallback, useMemo} from 'react';
@@ -23,6 +22,7 @@ import * as CardUtils from '@libs/CardUtils';
 import Log from '@libs/Log';
 import Navigation from '@libs/Navigation/Navigation';
 import * as PaymentUtils from '@libs/PaymentUtils';
+import stylePropTypes from '@styles/stylePropTypes';
 import variables from '@styles/variables';
 import * as PaymentMethods from '@userActions/PaymentMethods';
 import CONST from '@src/CONST';
diff --git a/src/styles/index.ts b/src/styles/index.ts
index 2b087313301e..9e09675c22f0 100644
--- a/src/styles/index.ts
+++ b/src/styles/index.ts
@@ -1,7 +1,6 @@
 /* eslint-disable @typescript-eslint/naming-convention */
 import {LineLayerStyleProps} from '@rnmapbox/maps/src/utils/MapboxStyles';
 import lodashClamp from 'lodash/clamp';
-import PropTypes from 'prop-types';
 import {LineLayer} from 'react-map-gl';
 import {AnimatableNumericValue, Animated, ImageStyle, TextStyle, ViewStyle} from 'react-native';
 import {CustomAnimation} from 'react-native-animatable';
@@ -41,8 +40,6 @@ import wordBreak from './utils/wordBreak';
 import writingDirection from './utils/writingDirection';
 import variables from './variables';
 
-const propTypes = PropTypes.oneOfType([PropTypes.object, PropTypes.arrayOf(PropTypes.object), PropTypes.func]);
-
 type ColorScheme = (typeof CONST.COLOR_SCHEME)[keyof typeof CONST.COLOR_SCHEME];
 type StatusBarStyle = (typeof CONST.STATUS_BAR_STYLE)[keyof typeof CONST.STATUS_BAR_STYLE];
 
@@ -4009,5 +4006,5 @@ type ThemeStyles = ReturnType<typeof styles>;
 const defaultStyles = styles(defaultTheme);
 
 export default styles;
-export {defaultStyles, propTypes};
+export {defaultStyles};
 export type {Styles, ThemeStyles, StatusBarStyle, ColorScheme};
diff --git a/src/styles/stylePropTypes.js b/src/styles/stylePropTypes.js
new file mode 100644
index 000000000000..f9ecdb98ff13
--- /dev/null
+++ b/src/styles/stylePropTypes.js
@@ -0,0 +1,5 @@
+import PropTypes from 'prop-types';
+
+const stylePropTypes = PropTypes.oneOfType([PropTypes.object, PropTypes.arrayOf(PropTypes.object), PropTypes.func]);
+
+export default stylePropTypes;

From 870167595e6273ca93cbd870395ef710ee1f6beb Mon Sep 17 00:00:00 2001
From: Christoph Pader <christoph.pader@outlook.com>
Date: Fri, 8 Dec 2023 18:34:07 +0100
Subject: [PATCH 067/102] update gh script

---
 .github/scripts/findUnusedKeys.sh | 28 ++++++++++++++--------------
 1 file changed, 14 insertions(+), 14 deletions(-)

diff --git a/.github/scripts/findUnusedKeys.sh b/.github/scripts/findUnusedKeys.sh
index 1411fffc8389..fa37402b3ce6 100755
--- a/.github/scripts/findUnusedKeys.sh
+++ b/.github/scripts/findUnusedKeys.sh
@@ -6,8 +6,8 @@ LIB_PATH="$(cd "$(dirname "${BASH_SOURCE[0]}")" && cd ../../ && pwd)"
 
 readonly SRC_DIR="${LIB_PATH}/src"
 readonly STYLES_DIR="${LIB_PATH}/src/styles"
-readonly STYLES_FILE="${LIB_PATH}/src/styles/styles.ts"
-readonly UTILITIES_STYLES_FILE="${LIB_PATH}/src/styles/utilities"
+readonly STYLES_FILE="${LIB_PATH}/src/styles/index.ts"
+readonly UTILITIES_STYLES_FILE="${LIB_PATH}/src/styles/utils"
 readonly STYLES_KEYS_FILE="${LIB_PATH}/scripts/style_keys_list_temp.txt"
 readonly UTILITY_STYLES_KEYS_FILE="${LIB_PATH}/scripts/utility_keys_list_temp.txt"
 readonly REMOVAL_KEYS_FILE="${LIB_PATH}/scripts/removal_keys_list_temp.txt"
@@ -29,7 +29,7 @@ ctrl_c() {
   delete_temp_files
   exit 1
 }
-  
+
 count_lines() {
   local file=$1
   if [[ -e "$file" ]]; then
@@ -43,11 +43,11 @@ count_lines() {
 show_unused_style_keywords() {
   while IFS=: read -r key file line_number; do
     title "File: $file:$line_number"
-    
+
     # Get lines before and after the error line
     local lines_before=$((line_number - AMOUNT_LINES_TO_SHOW))
     local lines_after=$((line_number + AMOUNT_LINES_TO_SHOW))
-    
+
     # Read the lines into an array
     local lines=()
     while IFS= read -r line; do
@@ -84,14 +84,14 @@ lookfor_unused_keywords() {
 
     # Search for keywords starting with "styles"
     while IFS= read -r keyword; do
-        
+
         # Remove any [ ] characters from the keyword
         local clean_keyword="${keyword//[\[\]]/}"
         # skip styles. keyword that might be used in comments
         if [[ "$clean_keyword" == "styles." ]]; then
           continue
         fi
-        
+
         if ! remove_keyword "$clean_keyword" ; then
           # In case of a leaf of the styles object is being used, it means the parent objects is being used
           # we need to mark it as used.
@@ -99,7 +99,7 @@ lookfor_unused_keywords() {
             # Keyword has more than two words, remove words after the second word
             local keyword_prefix="${clean_keyword%.*}"
             remove_keyword "$keyword_prefix"
-          fi        
+          fi
         fi
     done < <(grep -E -o '\bstyles\.[a-zA-Z0-9_.]*' "$file" | grep -v '\/\/' | grep -vE '\/\*.*\*\/')
   done < <(find "${SRC_DIR}" -type f \( "${FILE_EXTENSIONS[@]}" \))
@@ -134,10 +134,10 @@ find_styles_object_and_store_keys() {
     if [[ ! "$line" =~ ^[[:space:]]*(const|let|var)[[:space:]]+([a-zA-Z0-9_-]+)[[:space:]]*=[[:space:]]*\{|^[[:space:]]*([a-zA-Z0-9_-]+\.)?[a-zA-Z0-9_-]+:[[:space:]]*\{|^[[:space:]]*\} ]]; then
       continue
     fi
-    
+
     if [[ "$line" =~ ^[[:space:]]*(const|let|var)[[:space:]]+([a-zA-Z0-9_-]+)[[:space:]]*=[[:space:]]*\{ ]]; then
       key="${BASH_REMATCH[2]%%:*{*)}"
-      echo "styles.${key}|...${key}|${base_name}.${key}:${file}:${line_number}" >> "$STYLES_KEYS_FILE"    
+      echo "styles.${key}|...${key}|${base_name}.${key}:${file}:${line_number}" >> "$STYLES_KEYS_FILE"
     fi
   done < "$file"
 }
@@ -225,7 +225,7 @@ find_theme_style_and_store_keys() {
 
       continue
     fi
-    
+
     if [[ "$line" =~ ^[[:space:]]*([a-zA-Z0-9_-]+\.)?[a-zA-Z0-9_-]+:[[:space:]]*\{|^[[:space:]]*([a-zA-Z0-9_-])+:[[:space:]]*\(.*\)[[:space:]]*'=>'[[:space:]]*\(\{ ]]; then
       # Removing all the extra lines after the ":"
       local key="${line%%:*}"
@@ -302,9 +302,9 @@ find_utility_styles_store_prefix() {
     while IFS= read -r keyword; do
         local variable="${keyword##*/}"
         local variable_trimmed="${variable// /}"  # Trim spaces
-          
+
         echo "$variable_trimmed" >> "$UTILITY_STYLES_KEYS_FILE"
-    done < <(grep -E -o './utilities/[a-zA-Z0-9_-]+' "$file" | grep -v '\/\/' | grep -vE '\/\*.*\*\/')
+    done < <(grep -E -o './utils/[a-zA-Z0-9_-]+' "$file" | grep -v '\/\/' | grep -vE '\/\*.*\*\/')
   done < <(find "${STYLES_DIR}" -type f \( "${FILE_EXTENSIONS[@]}" \))
 
   # Sort and remove duplicates from the temporary file
@@ -331,7 +331,7 @@ find_utility_usage_as_styles() {
 lookfor_unused_utilities() {
   # Read each utility keyword from the file
   while read -r keyword; do
-    # Creating a copy so later the replacement can reference it  
+    # Creating a copy so later the replacement can reference it
     local original_keyword="${keyword}"
 
     # Iterate through all files in "src/styles"

From 0237711ac3160e27d123778a6eee43fe30bf08c9 Mon Sep 17 00:00:00 2001
From: Christoph Pader <christoph.pader@outlook.com>
Date: Fri, 8 Dec 2023 19:01:24 +0100
Subject: [PATCH 068/102] fix: make system default theme

---
 src/CONST.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/CONST.ts b/src/CONST.ts
index 6f1fe37f661d..1ffe501b2e1e 100755
--- a/src/CONST.ts
+++ b/src/CONST.ts
@@ -697,7 +697,7 @@ const CONST = {
         DEFAULT: 'default',
     },
     THEME: {
-        DEFAULT: 'dark',
+        DEFAULT: 'system',
         LIGHT: 'light',
         DARK: 'dark',
         SYSTEM: 'system',

From 60c702718354480514c5bbcd4693a6b5b6b819d0 Mon Sep 17 00:00:00 2001
From: Dylan <dylandylan9112@gmail.com>
Date: Sat, 9 Dec 2023 16:24:37 +0700
Subject: [PATCH 069/102] using SET method

---
 src/libs/actions/IOU.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/libs/actions/IOU.js b/src/libs/actions/IOU.js
index 95ab37e5d9e4..e7ab19afac3b 100644
--- a/src/libs/actions/IOU.js
+++ b/src/libs/actions/IOU.js
@@ -184,7 +184,7 @@ function buildOnyxDataForMoneyRequest(
 
     if (!_.isEmpty(optimisticPolicyRecentlyUsedTags)) {
         optimisticData.push({
-            onyxMethod: Onyx.METHOD.MERGE,
+            onyxMethod: Onyx.METHOD.SET,
             key: `${ONYXKEYS.COLLECTION.POLICY_RECENTLY_USED_TAGS}${iouReport.policyID}`,
             value: optimisticPolicyRecentlyUsedTags,
         });
@@ -769,7 +769,7 @@ function editDistanceMoneyRequest(transactionID, transactionThreadReportID, tran
         const optimisticPolicyRecentlyUsedTags = Policy.buildOptimisticPolicyRecentlyUsedTags(iouReport.policyID, transactionChanges.tag);
         if (!_.isEmpty(optimisticPolicyRecentlyUsedTags)) {
             optimisticData.push({
-                onyxMethod: Onyx.METHOD.MERGE,
+                onyxMethod: Onyx.METHOD.SET,
                 key: `${ONYXKEYS.COLLECTION.POLICY_RECENTLY_USED_TAGS}${iouReport.policyID}`,
                 value: optimisticPolicyRecentlyUsedTags,
             });
@@ -1909,7 +1909,7 @@ function editRegularMoneyRequest(transactionID, transactionThreadReportID, trans
         const optimisticPolicyRecentlyUsedTags = Policy.buildOptimisticPolicyRecentlyUsedTags(iouReport.policyID, transactionChanges.tag);
         if (!_.isEmpty(optimisticPolicyRecentlyUsedTags)) {
             optimisticData.push({
-                onyxMethod: Onyx.METHOD.MERGE,
+                onyxMethod: Onyx.METHOD.SET,
                 key: `${ONYXKEYS.COLLECTION.POLICY_RECENTLY_USED_TAGS}${iouReport.policyID}`,
                 value: optimisticPolicyRecentlyUsedTags,
             });

From ce75f7cab99b3df83fcde07ae0e4999add9d95a2 Mon Sep 17 00:00:00 2001
From: Christoph Pader <christoph@margelo.io>
Date: Sun, 10 Dec 2023 21:19:15 +0100
Subject: [PATCH 070/102] fix: style utils

---
 .../Attachments/AttachmentView/index.js       |  3 +-
 .../HTMLRenderers/EditedRenderer.js           |  3 +-
 src/components/PopoverWithMeasuredContent.js  |  6 +-
 .../PopoverWithMeasuredContentUtils.ts}       |  6 +-
 .../report/comment/TextCommentFragment.js     |  3 +-
 src/styles/index.ts                           |  2 +
 .../utils/{ => generators}/ModalStyleUtils.ts | 18 +++--
 .../ReportActionContextMenuStyleUtils.ts      |  9 ++-
 .../{ => generators}/TooltipStyleUtils.ts     | 17 ++--
 src/styles/utils/generators/types.ts          |  6 ++
 src/styles/utils/index.ts                     | 79 ++++++-------------
 src/styles/utils/types.ts                     | 59 ++++++++++++++
 12 files changed, 127 insertions(+), 84 deletions(-)
 rename src/{styles/utils/PopoverWithMeasuredContentStyleUtils.ts => libs/PopoverWithMeasuredContentUtils.ts} (89%)
 rename src/styles/utils/{ => generators}/ModalStyleUtils.ts (95%)
 rename src/styles/utils/{ => generators}/ReportActionContextMenuStyleUtils.ts (76%)
 rename src/styles/utils/{ => generators}/TooltipStyleUtils.ts (96%)
 create mode 100644 src/styles/utils/generators/types.ts
 create mode 100644 src/styles/utils/types.ts

diff --git a/src/components/Attachments/AttachmentView/index.js b/src/components/Attachments/AttachmentView/index.js
index 2d1e5bc2fd0d..79d1b6f407b9 100755
--- a/src/components/Attachments/AttachmentView/index.js
+++ b/src/components/Attachments/AttachmentView/index.js
@@ -18,7 +18,6 @@ import useThemeStyles from '@hooks/useThemeStyles';
 import addEncryptedAuthTokenToURL from '@libs/addEncryptedAuthTokenToURL';
 import compose from '@libs/compose';
 import * as TransactionUtils from '@libs/TransactionUtils';
-import cursor from '@styles/utils/cursor';
 import variables from '@styles/variables';
 import ONYXKEYS from '@src/ONYXKEYS';
 import AttachmentViewImage from './AttachmentViewImage';
@@ -141,7 +140,7 @@ function AttachmentView({
                     onScaleChanged={onScaleChanged}
                     onToggleKeyboard={onToggleKeyboard}
                     onLoadComplete={() => !loadComplete && setLoadComplete(true)}
-                    errorLabelStyles={isUsedInAttachmentModal ? [styles.textLabel, styles.textLarge] : [cursor.cursorAuto]}
+                    errorLabelStyles={isUsedInAttachmentModal ? [styles.textLabel, styles.textLarge] : [styles.cursorAuto]}
                     style={isUsedInAttachmentModal ? styles.imageModalPDF : styles.flex1}
                 />
             </View>
diff --git a/src/components/HTMLEngineProvider/HTMLRenderers/EditedRenderer.js b/src/components/HTMLEngineProvider/HTMLRenderers/EditedRenderer.js
index 21f8505bd188..9ff5fdecae13 100644
--- a/src/components/HTMLEngineProvider/HTMLRenderers/EditedRenderer.js
+++ b/src/components/HTMLEngineProvider/HTMLRenderers/EditedRenderer.js
@@ -4,7 +4,6 @@ import Text from '@components/Text';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
-import editedLabelStyles from '@styles/utils/editedLabelStyles';
 import variables from '@styles/variables';
 import CONST from '@src/CONST';
 import htmlRendererPropTypes from './htmlRendererPropTypes';
@@ -32,7 +31,7 @@ function EditedRenderer(props) {
                 {...defaultRendererProps}
                 fontSize={variables.fontSizeSmall}
                 color={theme.textSupporting}
-                style={[editedLabelStyles, isPendingDelete && styles.offlineFeedback.deleted]}
+                style={[styles.editedLabelStyles, isPendingDelete && styles.offlineFeedback.deleted]}
             >
                 {props.translate('reportActionCompose.edited')}
             </Text>
diff --git a/src/components/PopoverWithMeasuredContent.js b/src/components/PopoverWithMeasuredContent.js
index d621b2a16dfc..7de5be113e53 100644
--- a/src/components/PopoverWithMeasuredContent.js
+++ b/src/components/PopoverWithMeasuredContent.js
@@ -4,7 +4,7 @@ import {View} from 'react-native';
 import _ from 'underscore';
 import useThemeStyles from '@hooks/useThemeStyles';
 import useWindowDimensions from '@hooks/useWindowDimensions';
-import PopoverWithMeasuredContentStyleUtils from '@styles/utils/PopoverWithMeasuredContentStyleUtils';
+import PopoverWithMeasuredContentUtils from '@libs/PopoverWithMeasuredContentUtils';
 import CONST from '@src/CONST';
 import Popover from './Popover';
 import {defaultProps as defaultPopoverProps, propTypes as popoverPropTypes} from './Popover/popoverPropTypes';
@@ -128,8 +128,8 @@ function PopoverWithMeasuredContent(props) {
         };
     }, [props.anchorPosition, props.anchorAlignment, popoverWidth, popoverHeight]);
 
-    const horizontalShift = PopoverWithMeasuredContentStyleUtils.computeHorizontalShift(adjustedAnchorPosition.left, popoverWidth, windowWidth);
-    const verticalShift = PopoverWithMeasuredContentStyleUtils.computeVerticalShift(adjustedAnchorPosition.top, popoverHeight, windowHeight);
+    const horizontalShift = PopoverWithMeasuredContentUtils.computeHorizontalShift(adjustedAnchorPosition.left, popoverWidth, windowWidth);
+    const verticalShift = PopoverWithMeasuredContentUtils.computeVerticalShift(adjustedAnchorPosition.top, popoverHeight, windowHeight);
     const shiftedAnchorPosition = {
         left: adjustedAnchorPosition.left + horizontalShift,
         bottom: windowHeight - (adjustedAnchorPosition.top + popoverHeight) - verticalShift,
diff --git a/src/styles/utils/PopoverWithMeasuredContentStyleUtils.ts b/src/libs/PopoverWithMeasuredContentUtils.ts
similarity index 89%
rename from src/styles/utils/PopoverWithMeasuredContentStyleUtils.ts
rename to src/libs/PopoverWithMeasuredContentUtils.ts
index 7b3812a685a7..b932249211be 100644
--- a/src/styles/utils/PopoverWithMeasuredContentStyleUtils.ts
+++ b/src/libs/PopoverWithMeasuredContentUtils.ts
@@ -1,5 +1,5 @@
+import roundToNearestMultipleOfFour from '@styles/utils/roundToNearestMultipleOfFour';
 import variables from '@styles/variables';
-import roundToNearestMultipleOfFour from './roundToNearestMultipleOfFour';
 
 /**
  * Compute the amount that the Context menu's Anchor needs to be horizontally shifted
@@ -50,6 +50,6 @@ function computeVerticalShift(anchorTopEdge: number, menuHeight: number, windowH
     return 0;
 }
 
-const PopoverWithMeasuredContentStyleUtils = {computeHorizontalShift, computeVerticalShift};
+const PopoverWithMeasuredContentUtils = {computeHorizontalShift, computeVerticalShift};
 
-export default PopoverWithMeasuredContentStyleUtils;
+export default PopoverWithMeasuredContentUtils;
diff --git a/src/pages/home/report/comment/TextCommentFragment.js b/src/pages/home/report/comment/TextCommentFragment.js
index dd664079f818..3d6482344450 100644
--- a/src/pages/home/report/comment/TextCommentFragment.js
+++ b/src/pages/home/report/comment/TextCommentFragment.js
@@ -13,7 +13,6 @@ import * as DeviceCapabilities from '@libs/DeviceCapabilities';
 import * as EmojiUtils from '@libs/EmojiUtils';
 import reportActionFragmentPropTypes from '@pages/home/report/reportActionFragmentPropTypes';
 import reportActionSourcePropType from '@pages/home/report/reportActionSourcePropType';
-import editedLabelStyles from '@styles/utils/editedLabelStyles';
 import variables from '@styles/variables';
 import CONST from '@src/CONST';
 import RenderCommentHTML from './RenderCommentHTML';
@@ -103,7 +102,7 @@ function TextCommentFragment(props) {
                     <Text
                         fontSize={variables.fontSizeSmall}
                         color={theme.textSupporting}
-                        style={[editedLabelStyles, styleAsDeleted ? styles.offlineFeedback.deleted : undefined, ...props.style]}
+                        style={[styles.editedLabelStyles, styleAsDeleted ? styles.offlineFeedback.deleted : undefined, ...props.style]}
                     >
                         {props.translate('reportActionCompose.edited')}
                     </Text>
diff --git a/src/styles/index.ts b/src/styles/index.ts
index c56f604caf57..b0a2ae8df23c 100644
--- a/src/styles/index.ts
+++ b/src/styles/index.ts
@@ -17,6 +17,7 @@ import borders from './utils/borders';
 import codeStyles from './utils/codeStyles';
 import cursor from './utils/cursor';
 import display from './utils/display';
+import editedLabelStyles from './utils/editedLabelStyles';
 import flex from './utils/flex';
 import fontFamily from './utils/fontFamily';
 import fontWeightBold from './utils/fontWeight/bold';
@@ -234,6 +235,7 @@ const styles = (theme: ThemeColors) =>
         ...textUnderline,
         ...objectFit,
         ...textDecorationLine,
+        editedLabelStyles,
 
         autoCompleteSuggestionsContainer: {
             backgroundColor: theme.appBG,
diff --git a/src/styles/utils/ModalStyleUtils.ts b/src/styles/utils/generators/ModalStyleUtils.ts
similarity index 95%
rename from src/styles/utils/ModalStyleUtils.ts
rename to src/styles/utils/generators/ModalStyleUtils.ts
index 304935aa157d..4cdd28b473ea 100644
--- a/src/styles/utils/ModalStyleUtils.ts
+++ b/src/styles/utils/generators/ModalStyleUtils.ts
@@ -1,10 +1,10 @@
 import {ViewStyle} from 'react-native';
 import {ModalProps} from 'react-native-modal';
 import {ValueOf} from 'type-fest';
-import {type ThemeColors} from '@styles/theme/types';
+import {ThemeStyles} from '@styles/index';
 import variables from '@styles/variables';
 import CONST from '@src/CONST';
-import {type ThemeStyles} from '..';
+import StyleUtilGenerator from './types';
 
 function getCenteredModalStyles(styles: ThemeStyles, windowWidth: number, isSmallScreenWidth: boolean, isFullScreenWhenSmall = false): ViewStyle {
     const modalStyles = styles.centeredModalStyles(isSmallScreenWidth, isFullScreenWhenSmall);
@@ -36,14 +36,18 @@ type GetModalStyles = {
     shouldAddTopSafeAreaPadding: boolean;
 };
 
-const createModalStyleUtils = (theme: ThemeColors, styles: ThemeStyles) => ({
+type GetModalStylesStyleUtil = {
     getModalStyles: (
         type: ModalType | undefined,
         windowDimensions: WindowDimensions,
-        popoverAnchorPosition: ViewStyle = {},
-        innerContainerStyle: ViewStyle = {},
-        outerStyle: ViewStyle = {},
-    ): GetModalStyles => {
+        popoverAnchorPosition: ViewStyle,
+        innerContainerStyle: ViewStyle,
+        outerStyle: ViewStyle,
+    ) => GetModalStyles;
+};
+
+const createModalStyleUtils: StyleUtilGenerator<GetModalStylesStyleUtil> = ({theme, styles}) => ({
+    getModalStyles: (type, windowDimensions, popoverAnchorPosition = {}, innerContainerStyle = {}, outerStyle = {}): GetModalStyles => {
         const {isSmallScreenWidth, windowWidth} = windowDimensions;
 
         let modalStyle: GetModalStyles['modalStyle'] = {
diff --git a/src/styles/utils/ReportActionContextMenuStyleUtils.ts b/src/styles/utils/generators/ReportActionContextMenuStyleUtils.ts
similarity index 76%
rename from src/styles/utils/ReportActionContextMenuStyleUtils.ts
rename to src/styles/utils/generators/ReportActionContextMenuStyleUtils.ts
index e39005a5c12a..10904fca05cd 100644
--- a/src/styles/utils/ReportActionContextMenuStyleUtils.ts
+++ b/src/styles/utils/generators/ReportActionContextMenuStyleUtils.ts
@@ -1,7 +1,8 @@
 import {ViewStyle} from 'react-native';
+import {ThemeStyles} from '@styles/index';
 import {type ThemeColors} from '@styles/theme/types';
 import variables from '@styles/variables';
-import {type ThemeStyles} from '..';
+import StyleUtilGenerator from './types';
 
 const getDefaultWrapperStyle = (theme: ThemeColors): ViewStyle => ({
     backgroundColor: theme.componentBG,
@@ -20,6 +21,8 @@ const getMiniWrapperStyle = (theme: ThemeColors, styles: ThemeStyles): ViewStyle
     },
 ];
 
+type GetReportActionContextMenuStylesStyleUtil = {getReportActionContextMenuStyles: (isMini: boolean, isSmallScreenWidth: boolean) => ViewStyle[]};
+
 /**
  * Generate the wrapper styles for the ReportActionContextMenu.
  *
@@ -27,8 +30,8 @@ const getMiniWrapperStyle = (theme: ThemeColors, styles: ThemeStyles): ViewStyle
  * @param isSmallScreenWidth
  * @param theme
  */
-const createReportActionContextMenuStyleUtils = (theme: ThemeColors, styles: ThemeStyles) => ({
-    getReportActionContextMenuStyles: (isMini: boolean, isSmallScreenWidth: boolean): ViewStyle[] => {
+const createReportActionContextMenuStyleUtils: StyleUtilGenerator<GetReportActionContextMenuStylesStyleUtil> = ({theme, styles}) => ({
+    getReportActionContextMenuStyles: (isMini, isSmallScreenWidth) => {
         if (isMini) {
             return getMiniWrapperStyle(theme, styles);
         }
diff --git a/src/styles/utils/TooltipStyleUtils.ts b/src/styles/utils/generators/TooltipStyleUtils.ts
similarity index 96%
rename from src/styles/utils/TooltipStyleUtils.ts
rename to src/styles/utils/generators/TooltipStyleUtils.ts
index 9f54e9ac3435..0e9fda1a3388 100644
--- a/src/styles/utils/TooltipStyleUtils.ts
+++ b/src/styles/utils/generators/TooltipStyleUtils.ts
@@ -1,11 +1,10 @@
 import {Animated, TextStyle, View, ViewStyle} from 'react-native';
-import type {ThemeColors} from '@styles/theme/types';
+import fontFamily from '@styles/utils/fontFamily';
+import positioning from '@styles/utils/positioning';
+import roundToNearestMultipleOfFour from '@styles/utils/roundToNearestMultipleOfFour';
+import spacing from '@styles/utils/spacing';
 import variables from '@styles/variables';
-import type {ThemeStyles} from '..';
-import fontFamily from './fontFamily';
-import positioning from './positioning';
-import roundToNearestMultipleOfFour from './roundToNearestMultipleOfFour';
-import spacing from './spacing';
+import StyleUtilGenerator from './types';
 
 /** This defines the proximity with the edge of the window in which tooltips should not be displayed.
  * If a tooltip is too close to the edge of the screen, we'll shift it towards the center. */
@@ -116,6 +115,8 @@ type TooltipParams = {
     manualShiftVertical?: number;
 };
 
+type GetTooltipStylesStyleUtil = {getTooltipStyles: (props: TooltipParams) => TooltipStyles};
+
 /**
  * Generate styles for the tooltip component.
  *
@@ -137,7 +138,7 @@ type TooltipParams = {
  * @param [manualShiftVertical] - Any additional amount to manually shift the tooltip up or down.
  *                                       A positive value shifts it down, and a negative value shifts it up.
  */
-const createTooltipStyleUtils = (theme: ThemeColors, styles: ThemeStyles) => ({
+const createTooltipStyleUtils: StyleUtilGenerator<GetTooltipStylesStyleUtil> = ({theme, styles}) => ({
     getTooltipStyles: ({
         tooltip,
         currentSize,
@@ -151,7 +152,7 @@ const createTooltipStyleUtils = (theme: ThemeColors, styles: ThemeStyles) => ({
         tooltipWrapperHeight,
         manualShiftHorizontal = 0,
         manualShiftVertical = 0,
-    }: TooltipParams): TooltipStyles => {
+    }) => {
         const tooltipVerticalPadding = spacing.pv1;
 
         // We calculate tooltip width based on the tooltip's content width
diff --git a/src/styles/utils/generators/types.ts b/src/styles/utils/generators/types.ts
new file mode 100644
index 000000000000..ca6a630d94c5
--- /dev/null
+++ b/src/styles/utils/generators/types.ts
@@ -0,0 +1,6 @@
+import {ThemeStyles} from '@styles/index';
+import {ThemeColors} from '@styles/theme/types';
+
+type StyleUtilGenerator<StyleUtil = Record<string, unknown>> = (props: {theme: ThemeColors; styles: ThemeStyles}) => StyleUtil;
+
+export default StyleUtilGenerator;
diff --git a/src/styles/utils/index.ts b/src/styles/utils/index.ts
index 6ab9b79db433..a88ab95923a3 100644
--- a/src/styles/utils/index.ts
+++ b/src/styles/utils/index.ts
@@ -1,5 +1,5 @@
 import {CSSProperties} from 'react';
-import {Animated, DimensionValue, ImageStyle, PressableStateCallbackType, StyleProp, TextStyle, ViewStyle} from 'react-native';
+import {Animated, DimensionValue, PressableStateCallbackType, StyleProp, TextStyle, ViewStyle} from 'react-native';
 import {EdgeInsets} from 'react-native-safe-area-context';
 import {ValueOf} from 'type-fest';
 import * as Browser from '@libs/Browser';
@@ -12,54 +12,27 @@ import CONST from '@src/CONST';
 import {Transaction} from '@src/types/onyx';
 import {defaultStyles, type ThemeStyles} from '..';
 import containerComposeStyles from './containerComposeStyles';
-import cursor from './cursor';
 import fontFamily from './fontFamily';
+import createModalStyleUtils from './generators/ModalStyleUtils';
+import createReportActionContextMenuStyleUtils from './generators/ReportActionContextMenuStyleUtils';
+import createTooltipStyleUtils from './generators/TooltipStyleUtils';
 import getContextMenuItemStyles from './getContextMenuItemStyles';
-import createModalStyleUtils from './ModalStyleUtils';
 import {compactContentContainerStyles} from './optionRowStyles';
 import positioning from './positioning';
-import createReportActionContextMenuStyleUtils from './ReportActionContextMenuStyleUtils';
 import spacing from './spacing';
-import createTooltipStyleUtils from './TooltipStyleUtils';
-
-type AllStyles = ViewStyle | TextStyle | ImageStyle;
-type ParsableStyle = StyleProp<ViewStyle> | ((state: PressableStateCallbackType) => StyleProp<ViewStyle>);
-
-type ColorValue = ValueOf<typeof colors>;
-type AvatarSizeName = ValueOf<typeof CONST.AVATAR_SIZE>;
-type EReceiptColorName = ValueOf<typeof CONST.ERECEIPT_COLORS>;
-type AvatarSizeValue = ValueOf<
-    Pick<
-        typeof variables,
-        | 'avatarSizeNormal'
-        | 'avatarSizeSmallSubscript'
-        | 'avatarSizeMidSubscript'
-        | 'avatarSizeSubscript'
-        | 'avatarSizeSmall'
-        | 'avatarSizeSmaller'
-        | 'avatarSizeXLarge'
-        | 'avatarSizeLarge'
-        | 'avatarSizeMedium'
-        | 'avatarSizeLargeBordered'
-        | 'avatarSizeHeader'
-        | 'avatarSizeMentionIcon'
-        | 'avatarSizeSmallNormal'
-    >
->;
-
-type AvatarStyle = {
-    width: number;
-    height: number;
-    borderRadius: number;
-    backgroundColor: string;
-};
-
-type ButtonSizeValue = ValueOf<typeof CONST.DROPDOWN_BUTTON_SIZE>;
-type ButtonStateName = ValueOf<typeof CONST.BUTTON_STATES>;
-type AvatarSize = {width: number};
-
-type WorkspaceColorStyle = {backgroundColor: ColorValue; fill: ColorValue};
-type EreceiptColorStyle = {backgroundColor: ColorValue; color: ColorValue};
+import {
+    AllStyles,
+    AvatarSize,
+    AvatarSizeName,
+    AvatarSizeValue,
+    AvatarStyle,
+    ButtonSizeValue,
+    ButtonStateName,
+    EReceiptColorName,
+    EreceiptColorStyle,
+    ParsableStyle,
+    WorkspaceColorStyle,
+} from './types';
 
 const workspaceColorOptions: WorkspaceColorStyle[] = [
     {backgroundColor: colors.blue200, fill: colors.blue700},
@@ -1103,9 +1076,13 @@ const staticStyleUtils = {
 
 const createStyleUtils = (theme: ThemeColors, styles: ThemeStyles) => ({
     ...staticStyleUtils,
-    ...createModalStyleUtils(theme, styles),
-    ...createTooltipStyleUtils(theme, styles),
-    ...createReportActionContextMenuStyleUtils(theme, styles),
+    ...createModalStyleUtils({theme, styles}),
+    ...createTooltipStyleUtils({theme, styles}),
+    ...createReportActionContextMenuStyleUtils({theme, styles}),
+
+    getCompactContentContainerStyles: () => compactContentContainerStyles(styles),
+    getContextMenuItemStyles: (windowWidth?: number) => getContextMenuItemStyles(styles, windowWidth),
+    getContainerComposeStyles: () => containerComposeStyles(styles),
 
     /**
      * Gets styles for AutoCompleteSuggestion row
@@ -1236,7 +1213,7 @@ const createStyleUtils = (theme: ThemeColors, styles: ThemeStyles) => ({
     getDisabledLinkStyles: (isDisabled = false): ViewStyle => {
         const disabledLinkStyles = {
             color: theme.textSupporting,
-            ...cursor.cursorDisabled,
+            ...styles.cursorDisabled,
         };
 
         // TODO: Remove this "eslint-disable-next" once the theme switching migration is done and styles are fully typed (GH Issue: https://github.com/Expensify/App/issues/27337)
@@ -1440,12 +1417,6 @@ const createStyleUtils = (theme: ThemeColors, styles: ThemeStyles) => ({
 
         return containerStyles;
     },
-
-    getCompactContentContainerStyles: () => compactContentContainerStyles(styles),
-
-    getContextMenuItemStyles: (windowWidth?: number) => getContextMenuItemStyles(styles, windowWidth),
-
-    getContainerComposeStyles: () => containerComposeStyles(styles),
 });
 
 type StyleUtilsType = ReturnType<typeof createStyleUtils>;
diff --git a/src/styles/utils/types.ts b/src/styles/utils/types.ts
new file mode 100644
index 000000000000..c7e1fc60a142
--- /dev/null
+++ b/src/styles/utils/types.ts
@@ -0,0 +1,59 @@
+import {ImageStyle, PressableStateCallbackType, StyleProp, TextStyle, ViewStyle} from 'react-native';
+import {ValueOf} from 'type-fest';
+import type colors from '@styles/theme/colors';
+import type variables from '@styles/variables';
+import type CONST from '@src/CONST';
+
+type AllStyles = ViewStyle | TextStyle | ImageStyle;
+type ParsableStyle = StyleProp<ViewStyle> | ((state: PressableStateCallbackType) => StyleProp<ViewStyle>);
+
+type ColorValue = ValueOf<typeof colors>;
+type AvatarSizeName = ValueOf<typeof CONST.AVATAR_SIZE>;
+type EReceiptColorName = ValueOf<typeof CONST.ERECEIPT_COLORS>;
+type AvatarSizeValue = ValueOf<
+    Pick<
+        typeof variables,
+        | 'avatarSizeNormal'
+        | 'avatarSizeSmallSubscript'
+        | 'avatarSizeMidSubscript'
+        | 'avatarSizeSubscript'
+        | 'avatarSizeSmall'
+        | 'avatarSizeSmaller'
+        | 'avatarSizeXLarge'
+        | 'avatarSizeLarge'
+        | 'avatarSizeMedium'
+        | 'avatarSizeLargeBordered'
+        | 'avatarSizeHeader'
+        | 'avatarSizeMentionIcon'
+        | 'avatarSizeSmallNormal'
+    >
+>;
+
+type AvatarStyle = {
+    width: number;
+    height: number;
+    borderRadius: number;
+    backgroundColor: string;
+};
+
+type ButtonSizeValue = ValueOf<typeof CONST.DROPDOWN_BUTTON_SIZE>;
+type ButtonStateName = ValueOf<typeof CONST.BUTTON_STATES>;
+type AvatarSize = {width: number};
+
+type WorkspaceColorStyle = {backgroundColor: ColorValue; fill: ColorValue};
+type EreceiptColorStyle = {backgroundColor: ColorValue; color: ColorValue};
+
+export type {
+    AllStyles,
+    ParsableStyle,
+    ColorValue,
+    AvatarSizeName,
+    EReceiptColorName,
+    AvatarSizeValue,
+    AvatarStyle,
+    ButtonSizeValue,
+    ButtonStateName,
+    AvatarSize,
+    WorkspaceColorStyle,
+    EreceiptColorStyle,
+};

From 27812e9befd4df156c2412eb4feea852aef6dbb2 Mon Sep 17 00:00:00 2001
From: Christoph Pader <christoph@margelo.io>
Date: Sun, 10 Dec 2023 21:23:07 +0100
Subject: [PATCH 071/102] fix: errors

---
 src/components/FocusModeNotification.js                    | 1 -
 src/pages/iou/request/step/StepScreenDragAndDropWrapper.js | 1 -
 src/styles/utils/generators/ModalStyleUtils.ts             | 6 +++---
 3 files changed, 3 insertions(+), 5 deletions(-)

diff --git a/src/components/FocusModeNotification.js b/src/components/FocusModeNotification.js
index f99521dc9bac..e846c1f188e2 100644
--- a/src/components/FocusModeNotification.js
+++ b/src/components/FocusModeNotification.js
@@ -13,7 +13,6 @@ function FocusModeNotification() {
     const styles = useThemeStyles();
     const {environmentURL} = useEnvironment();
     const {translate} = useLocalize();
-    const styles = useThemeStyles();
     useEffect(() => {
         User.updateChatPriorityMode(CONST.PRIORITY_MODE.GSD, true);
     }, []);
diff --git a/src/pages/iou/request/step/StepScreenDragAndDropWrapper.js b/src/pages/iou/request/step/StepScreenDragAndDropWrapper.js
index ae4397f9a5ff..ceb0d5a44351 100644
--- a/src/pages/iou/request/step/StepScreenDragAndDropWrapper.js
+++ b/src/pages/iou/request/step/StepScreenDragAndDropWrapper.js
@@ -35,7 +35,6 @@ function StepScreenDragAndDropWrapper({testID, headerTitle, onBackButtonPress, o
     const styles = useThemeStyles();
 
     const [isDraggingOver, setIsDraggingOver] = useState(false);
-    const styles = useThemeStyles();
 
     if (!shouldShowWrapper) {
         return children;
diff --git a/src/styles/utils/generators/ModalStyleUtils.ts b/src/styles/utils/generators/ModalStyleUtils.ts
index 4cdd28b473ea..67faec504d61 100644
--- a/src/styles/utils/generators/ModalStyleUtils.ts
+++ b/src/styles/utils/generators/ModalStyleUtils.ts
@@ -40,9 +40,9 @@ type GetModalStylesStyleUtil = {
     getModalStyles: (
         type: ModalType | undefined,
         windowDimensions: WindowDimensions,
-        popoverAnchorPosition: ViewStyle,
-        innerContainerStyle: ViewStyle,
-        outerStyle: ViewStyle,
+        popoverAnchorPosition?: ViewStyle,
+        innerContainerStyle?: ViewStyle,
+        outerStyle?: ViewStyle,
     ) => GetModalStyles;
 };
 

From 4b24778e1dd84f1b53238c73e8e2d8b25c9f8e6e Mon Sep 17 00:00:00 2001
From: dukenv0307 <dukenv0307@gmail.com>
Date: Mon, 11 Dec 2023 15:22:31 +0700
Subject: [PATCH 072/102] update patch

---
 patches/@react-navigation+native+6.1.8.patch | 79 +++++++++++---------
 1 file changed, 45 insertions(+), 34 deletions(-)

diff --git a/patches/@react-navigation+native+6.1.8.patch b/patches/@react-navigation+native+6.1.8.patch
index a7ebe704f8d0..c461d7e510fe 100644
--- a/patches/@react-navigation+native+6.1.8.patch
+++ b/patches/@react-navigation+native+6.1.8.patch
@@ -1,15 +1,14 @@
 diff --git a/node_modules/@react-navigation/native/lib/module/createMemoryHistory.js b/node_modules/@react-navigation/native/lib/module/createMemoryHistory.js
-index 16fdbef..7cc5da8 100644
+index 16fdbef..bc2c96a 100644
 --- a/node_modules/@react-navigation/native/lib/module/createMemoryHistory.js
 +++ b/node_modules/@react-navigation/native/lib/module/createMemoryHistory.js
-@@ -1,8 +1,25 @@
+@@ -1,8 +1,23 @@
  import { nanoid } from 'nanoid/non-secure';
 +import { findFocusedRouteKey } from './findFocusedRouteKey';
-+
  export default function createMemoryHistory() {
    let index = 0;
    let items = [];
- 
+-
 +  const log = () => {
 +    console.log(JSON.stringify({
 +      index,
@@ -28,7 +27,7 @@ index 16fdbef..7cc5da8 100644
    // Pending callbacks for `history.go(n)`
    // We might modify the callback stored if it was interrupted, so we have a ref to identify it
    const pending = [];
-@@ -16,6 +33,9 @@ export default function createMemoryHistory() {
+@@ -16,6 +31,9 @@ export default function createMemoryHistory() {
      });
    };
    const history = {
@@ -38,7 +37,7 @@ index 16fdbef..7cc5da8 100644
      get index() {
        var _window$history$state;
        // We store an id in the state instead of an index
-@@ -32,12 +52,13 @@ export default function createMemoryHistory() {
+@@ -32,12 +50,13 @@ export default function createMemoryHistory() {
      },
      backIndex(_ref) {
        let {
@@ -54,22 +53,26 @@ index 16fdbef..7cc5da8 100644
            return i;
          }
        }
-@@ -68,6 +89,7 @@ export default function createMemoryHistory() {
+@@ -68,7 +87,9 @@ export default function createMemoryHistory() {
        window.history.pushState({
          id
        }, '', path);
 +      // log();
      },
++
      replace(_ref3) {
        var _window$history$state2;
-@@ -108,6 +130,7 @@ export default function createMemoryHistory() {
+       let {
+@@ -108,7 +129,9 @@ export default function createMemoryHistory() {
        window.history.replaceState({
          id
        }, '', pathWithHash);
 +      // log();
      },
++
      // `history.go(n)` is asynchronous, there are couple of things to keep in mind:
      // - it won't do anything if we can't go `n` steps, the `popstate` event won't fire.
+     // - each `history.go(n)` call will trigger a separate `popstate` event with correct location.
 @@ -175,20 +198,17 @@ export default function createMemoryHistory() {
          // But on Firefox, it seems to take much longer, around 50ms from our testing
          // We're using a hacky timeout since there doesn't seem to be way to know for sure
@@ -97,14 +100,13 @@ index 16fdbef..7cc5da8 100644
            const last = pending.pop();
            window.removeEventListener('popstate', onPopState);
            last === null || last === void 0 ? void 0 : last.cb();
-@@ -201,13 +221,18 @@ export default function createMemoryHistory() {
-     // If we call `history.go(n)` ourselves, we don't want it to trigger the listener
+@@ -202,12 +222,17 @@ export default function createMemoryHistory() {
      // Here we normalize it so that only external changes (e.g. user pressing back/forward) trigger the listener
      listen(listener) {
-+      // Fix createMemoryHistory.index variable's value
-+      // as it may go out of sync when navigating in the browser.
-+      index = this.index;
        const onPopState = () => {
++        // Fix createMemoryHistory.index variable's value
++        // as it may go out of sync when navigating in the browser.
++        index = this.index;
          if (pending.length) {
            // This was triggered by `history.go(n)`, we shouldn't call the listener
            return;
@@ -112,7 +114,7 @@ index 16fdbef..7cc5da8 100644
          listener();
 +        // log();
        };
-+      
++
        window.addEventListener('popstate', onPopState);
        return () => window.removeEventListener('popstate', onPopState);
      }
@@ -131,7 +133,7 @@ index 0000000..16da117
 +//# sourceMappingURL=findFocusedRouteKey.js.map
 \ No newline at end of file
 diff --git a/node_modules/@react-navigation/native/lib/module/useLinking.js b/node_modules/@react-navigation/native/lib/module/useLinking.js
-index 6f0ac51..42f1c31 100644
+index 6f0ac51..a77b608 100644
 --- a/node_modules/@react-navigation/native/lib/module/useLinking.js
 +++ b/node_modules/@react-navigation/native/lib/module/useLinking.js
 @@ -2,6 +2,7 @@ import { findFocusedRoute, getActionFromState as getActionFromStateDefault, getP
@@ -191,13 +193,13 @@ index 6f0ac51..42f1c31 100644
        // Otherwise it's likely a change triggered by `popstate`
        path !== pendingPath) {
          const historyDelta = (focusedState.history ? focusedState.history.length : focusedState.routes.length) - (previousFocusedState.history ? previousFocusedState.history.length : previousFocusedState.routes.length);
-+        
++
 +        // The historyDelta and historyDeltaByKeys may differ if the new state has an entry that didn't exist in previous state
 +        const historyDeltaByKeys = getHistoryDeltaByKeys(focusedState, previousFocusedState);
          if (historyDelta > 0) {
            // If history length is increased, we should pushState
            // Note that path might not actually change here, for example, drawer open should pushState
-@@ -242,25 +284,52 @@ export default function useLinking(ref, _ref) {
+@@ -242,34 +284,55 @@ export default function useLinking(ref, _ref) {
            // If history length is decreased, i.e. entries were removed, we want to go back
  
            const nextIndex = history.backIndex({
@@ -232,27 +234,36 @@ index 6f0ac51..42f1c31 100644
 +                });
 +              }
              }
- 
-             // Store the updated state as well as fix the path if incorrect
+-
+-            // Store the updated state as well as fix the path if incorrect
 -            history.replace({
 -              path,
 -              state
 -            });
-+            // and remove any entries from history which focued route no longer exists in state
-+            // That may happen if we replace a whole navigator.
-+            const staleHistoryDiff = getStaleHistoryDiff(history.items.slice(0, history.index + 1), state);
-+            if (staleHistoryDiff <= 0) {
-+              history.replace({
-+                path,
-+                state
-+              });
-+            } else {
-+              await history.go(-staleHistoryDiff);
-+              history.push({
-+                path,
-+                state
-+              });
-+            }
            } catch (e) {
              // The navigation was interrupted
            }
+         } else {
+           // If history length is unchanged, we want to replaceState
+-          history.replace({
+-            path,
+-            state
+-          });
++          // and remove any entries from history which focued route no longer exists in state
++          // That may happen if we replace a whole navigator.
++          const staleHistoryDiff = getStaleHistoryDiff(history.items.slice(0, history.index + 1), state);
++          if (staleHistoryDiff <= 0) {
++            history.replace({
++              path,
++              state
++            });
++          } else {
++            await history.go(-staleHistoryDiff);
++            history.push({
++              path,
++              state
++            });
++          }
+         }
+       } else {
+         // If no common navigation state was found, assume it's a replace

From 442d966cc430a61ef4e6082df65b04c84a9abe57 Mon Sep 17 00:00:00 2001
From: Jakub Szymczak <szymczak.jakub12@gmail.com>
Date: Mon, 11 Dec 2023 11:11:12 +0100
Subject: [PATCH 073/102] disable prop-types globally

---
 .eslintrc.js                               | 1 +
 src/components/HeaderGap/index.desktop.tsx | 2 +-
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/.eslintrc.js b/.eslintrc.js
index b71338d0c1a5..85a4e86797b6 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -174,6 +174,7 @@ module.exports = {
                 'rulesdir/prefer-underscore-method': 'off',
                 'rulesdir/prefer-import-module-contents': 'off',
                 'react/require-default-props': 'off',
+                'react/prop-types': 'off',
                 'no-restricted-syntax': [
                     'error',
                     {
diff --git a/src/components/HeaderGap/index.desktop.tsx b/src/components/HeaderGap/index.desktop.tsx
index 6f0ca35996e7..15c1f20cf8e2 100644
--- a/src/components/HeaderGap/index.desktop.tsx
+++ b/src/components/HeaderGap/index.desktop.tsx
@@ -3,7 +3,7 @@ import {View} from 'react-native';
 import useThemeStyles from '@styles/useThemeStyles';
 import HeaderGapComponent from './types';
 
-// eslint-disable-next-line react/function-component-definition, react/prop-types
+// eslint-disable-next-line react/function-component-definition
 const HeaderGap: HeaderGapComponent = ({styles}) => {
     const themeStyles = useThemeStyles();
     return <View style={[themeStyles.headerGap, styles]} />;

From 47a827d2690750b450cd9ce53c35a81400c27032 Mon Sep 17 00:00:00 2001
From: Jakub Szymczak <szymczak.jakub12@gmail.com>
Date: Mon, 11 Dec 2023 16:26:05 +0100
Subject: [PATCH 074/102] fix PR comments

---
 src/components/HeaderGap/index.desktop.tsx |  7 +++----
 src/components/HeaderGap/index.tsx         | 10 +++++++---
 src/components/HeaderGap/types.ts          |  5 +----
 3 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/src/components/HeaderGap/index.desktop.tsx b/src/components/HeaderGap/index.desktop.tsx
index 15c1f20cf8e2..84f42142942e 100644
--- a/src/components/HeaderGap/index.desktop.tsx
+++ b/src/components/HeaderGap/index.desktop.tsx
@@ -1,13 +1,12 @@
 import React, {memo} from 'react';
 import {View} from 'react-native';
 import useThemeStyles from '@styles/useThemeStyles';
-import HeaderGapComponent from './types';
+import HeaderGapProps from './types';
 
-// eslint-disable-next-line react/function-component-definition
-const HeaderGap: HeaderGapComponent = ({styles}) => {
+function HeaderGap({styles}: HeaderGapProps) {
     const themeStyles = useThemeStyles();
     return <View style={[themeStyles.headerGap, styles]} />;
-};
+}
 
 HeaderGap.displayName = 'HeaderGap';
 
diff --git a/src/components/HeaderGap/index.tsx b/src/components/HeaderGap/index.tsx
index decb634b5e8e..c17ba58b470c 100644
--- a/src/components/HeaderGap/index.tsx
+++ b/src/components/HeaderGap/index.tsx
@@ -1,7 +1,11 @@
-import HeaderGapComponent from './types';
+import {ReactNode} from 'react';
+import HeaderGapProps from './types';
 
-// eslint-disable-next-line react/function-component-definition
-const HeaderGap: HeaderGapComponent = () => null;
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+function HeaderGap({styles}: HeaderGapProps): ReactNode {
+    return null;
+}
 
 HeaderGap.displayName = 'HeaderGap';
+
 export default HeaderGap;
diff --git a/src/components/HeaderGap/types.ts b/src/components/HeaderGap/types.ts
index 55ff1fe6eef6..6ed527b1c1f2 100644
--- a/src/components/HeaderGap/types.ts
+++ b/src/components/HeaderGap/types.ts
@@ -1,10 +1,7 @@
-import React from 'react';
 import {StyleProp, ViewStyle} from 'react-native';
 
 type HeaderGapProps = {
     styles?: StyleProp<ViewStyle>;
 };
 
-type HeaderGapComponent = React.FunctionComponent<HeaderGapProps>;
-
-export default HeaderGapComponent;
+export default HeaderGapProps;

From 3059264178c6f05041741063b459c108f278b51d Mon Sep 17 00:00:00 2001
From: Christoph Pader <christoph@margelo.io>
Date: Mon, 11 Dec 2023 19:36:30 +0100
Subject: [PATCH 075/102] update findUnusedKeys script

---
 .github/scripts/findUnusedKeys.sh | 22 +++++++++++-----------
 1 file changed, 11 insertions(+), 11 deletions(-)

diff --git a/.github/scripts/findUnusedKeys.sh b/.github/scripts/findUnusedKeys.sh
index fa37402b3ce6..efa1d9f764b0 100755
--- a/.github/scripts/findUnusedKeys.sh
+++ b/.github/scripts/findUnusedKeys.sh
@@ -7,9 +7,9 @@ LIB_PATH="$(cd "$(dirname "${BASH_SOURCE[0]}")" && cd ../../ && pwd)"
 readonly SRC_DIR="${LIB_PATH}/src"
 readonly STYLES_DIR="${LIB_PATH}/src/styles"
 readonly STYLES_FILE="${LIB_PATH}/src/styles/index.ts"
-readonly UTILITIES_STYLES_FILE="${LIB_PATH}/src/styles/utils"
+readonly UTILS_STYLES_FILE="${LIB_PATH}/src/styles/utils"
 readonly STYLES_KEYS_FILE="${LIB_PATH}/scripts/style_keys_list_temp.txt"
-readonly UTILITY_STYLES_KEYS_FILE="${LIB_PATH}/scripts/utility_keys_list_temp.txt"
+readonly UTIL_STYLES_KEYS_FILE="${LIB_PATH}/scripts/utility_keys_list_temp.txt"
 readonly REMOVAL_KEYS_FILE="${LIB_PATH}/scripts/removal_keys_list_temp.txt"
 readonly AMOUNT_LINES_TO_SHOW=3
 
@@ -295,7 +295,7 @@ lookfor_unused_spread_keywords() {
   done < "$STYLES_FILE"
 }
 
-find_utility_styles_store_prefix() {
+find_util_styles_store_prefix() {
   # Loop through all files in the src folder
   while read -r file; do
     # Search for keywords starting with "styles"
@@ -303,12 +303,12 @@ find_utility_styles_store_prefix() {
         local variable="${keyword##*/}"
         local variable_trimmed="${variable// /}"  # Trim spaces
 
-        echo "$variable_trimmed" >> "$UTILITY_STYLES_KEYS_FILE"
+        echo "$variable_trimmed" >> "$UTIL_STYLES_KEYS_FILE"
     done < <(grep -E -o './utils/[a-zA-Z0-9_-]+' "$file" | grep -v '\/\/' | grep -vE '\/\*.*\*\/')
   done < <(find "${STYLES_DIR}" -type f \( "${FILE_EXTENSIONS[@]}" \))
 
   # Sort and remove duplicates from the temporary file
-  sort -u -o "${UTILITY_STYLES_KEYS_FILE}" "${UTILITY_STYLES_KEYS_FILE}"
+  sort -u -o "${UTIL_STYLES_KEYS_FILE}" "${UTIL_STYLES_KEYS_FILE}"
 }
 
 find_utility_usage_as_styles() {
@@ -320,15 +320,15 @@ find_utility_usage_as_styles() {
     parent_dir=$(dirname "$file")
     root_key=$(basename "${parent_dir}")
 
-    if [[ "${root_key}" == "utilities" ]]; then
+    if [[ "${root_key}" == "utils" ]]; then
       continue
     fi
 
     find_theme_style_and_store_keys "${file}" 0 "${root_key}"
-  done < <(find "${UTILITIES_STYLES_FILE}" -type f \( "${FILE_EXTENSIONS[@]}" \))
+  done < <(find "${UTILS_STYLES_FILE}" -type f \( "${FILE_EXTENSIONS[@]}" \))
 }
 
-lookfor_unused_utilities() {
+lookfor_unused_utils() {
   # Read each utility keyword from the file
   while read -r keyword; do
     # Creating a copy so later the replacement can reference it
@@ -345,7 +345,7 @@ lookfor_unused_utilities() {
         remove_keyword "${match}"
       done < <(grep -E -o "$original_keyword\.[a-zA-Z0-9_-]+" "$file" | grep -v '\/\/' | grep -vE '\/\*.*\*\/')
     done < <(find "${STYLES_DIR}" -type f \( "${FILE_EXTENSIONS[@]}" \))
-  done < "$UTILITY_STYLES_KEYS_FILE"
+  done < "$UTIL_STYLES_KEYS_FILE"
 }
 
 echo "🔍 Looking for styles."
@@ -360,8 +360,8 @@ collect_theme_keys_from_styles "$STYLES_FILE"
 
 echo "🗄️ Now going through the codebase and looking for unused keys."
 
-# Look for usages of utilities into src/styles
-lookfor_unused_utilities
+# Look for usages of utils into src/styles
+lookfor_unused_utils
 lookfor_unused_spread_keywords
 lookfor_unused_keywords
 

From a54a22b6ca4e09c7c0009a407a7100449df76838 Mon Sep 17 00:00:00 2001
From: Christoph Pader <christoph@margelo.io>
Date: Mon, 11 Dec 2023 20:04:15 +0100
Subject: [PATCH 076/102] fix: last remaining utility keyword

---
 .github/scripts/findUnusedKeys.sh | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/.github/scripts/findUnusedKeys.sh b/.github/scripts/findUnusedKeys.sh
index efa1d9f764b0..5c1195b0a49a 100755
--- a/.github/scripts/findUnusedKeys.sh
+++ b/.github/scripts/findUnusedKeys.sh
@@ -9,7 +9,7 @@ readonly STYLES_DIR="${LIB_PATH}/src/styles"
 readonly STYLES_FILE="${LIB_PATH}/src/styles/index.ts"
 readonly UTILS_STYLES_FILE="${LIB_PATH}/src/styles/utils"
 readonly STYLES_KEYS_FILE="${LIB_PATH}/scripts/style_keys_list_temp.txt"
-readonly UTIL_STYLES_KEYS_FILE="${LIB_PATH}/scripts/utility_keys_list_temp.txt"
+readonly UTIL_STYLES_KEYS_FILE="${LIB_PATH}/scripts/util_keys_list_temp.txt"
 readonly REMOVAL_KEYS_FILE="${LIB_PATH}/scripts/removal_keys_list_temp.txt"
 readonly AMOUNT_LINES_TO_SHOW=3
 
@@ -311,12 +311,12 @@ find_util_styles_store_prefix() {
   sort -u -o "${UTIL_STYLES_KEYS_FILE}" "${UTIL_STYLES_KEYS_FILE}"
 }
 
-find_utility_usage_as_styles() {
+find_util_usage_as_styles() {
   while read -r file; do
     local root_key
     local parent_dir
 
-    # Get the folder name, given this utility files are index.js
+    # Get the folder name, given this util files are index.js
     parent_dir=$(dirname "$file")
     root_key=$(basename "${parent_dir}")
 
@@ -329,7 +329,7 @@ find_utility_usage_as_styles() {
 }
 
 lookfor_unused_utils() {
-  # Read each utility keyword from the file
+  # Read each util keyword from the file
   while read -r keyword; do
     # Creating a copy so later the replacement can reference it
     local original_keyword="${keyword}"
@@ -338,7 +338,7 @@ lookfor_unused_utils() {
     while read -r file; do
       # Find all words that match "$keyword.[a-zA-Z0-9_-]+"
       while IFS= read -r match; do
-        # Replace the utility prefix with "styles"
+        # Replace the util prefix with "styles"
         local variable="${match/#$original_keyword/styles}"
         # Call the remove_keyword function with the variable
         remove_keyword "${variable}"
@@ -349,9 +349,9 @@ lookfor_unused_utils() {
 }
 
 echo "🔍 Looking for styles."
-# Find and store the name of the utility files as keys
-find_utility_styles_store_prefix
-find_utility_usage_as_styles
+# Find and store the name of the util files as keys
+find_util_styles_store_prefix
+find_util_usage_as_styles
 
 # Find and store keys from styles.ts
 find_styles_object_and_store_keys "$STYLES_FILE"

From 89cc7211fbef34d80450770f796b5e4792fc8a53 Mon Sep 17 00:00:00 2001
From: Christoph Pader <christoph@margelo.io>
Date: Mon, 11 Dec 2023 20:52:11 +0100
Subject: [PATCH 077/102] fix: wrong imports

---
 .../MoneyTemporaryForRefactorRequestConfirmationList.js         | 2 +-
 src/pages/ReimbursementAccount/ExampleCheck.js                  | 2 +-
 src/pages/iou/request/IOURequestStartPage.js                    | 2 +-
 .../MoneyTemporaryForRefactorRequestParticipantsSelector.js     | 2 +-
 src/pages/iou/request/step/IOURequestStepCategory.js            | 2 +-
 src/pages/iou/request/step/IOURequestStepConfirmation.js        | 2 +-
 src/pages/iou/request/step/IOURequestStepDate.js                | 2 +-
 src/pages/iou/request/step/IOURequestStepDescription.js         | 2 +-
 src/pages/iou/request/step/IOURequestStepMerchant.js            | 2 +-
 src/pages/iou/request/step/IOURequestStepScan/index.js          | 2 +-
 src/pages/iou/request/step/IOURequestStepScan/index.native.js   | 2 +-
 src/pages/iou/request/step/IOURequestStepTag.js                 | 2 +-
 src/pages/iou/request/step/IOURequestStepWaypoint.js            | 2 +-
 src/pages/iou/request/step/StepScreenWrapper.js                 | 2 +-
 14 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/src/components/MoneyTemporaryForRefactorRequestConfirmationList.js b/src/components/MoneyTemporaryForRefactorRequestConfirmationList.js
index cc3f535b5763..00c00c8182ae 100755
--- a/src/components/MoneyTemporaryForRefactorRequestConfirmationList.js
+++ b/src/components/MoneyTemporaryForRefactorRequestConfirmationList.js
@@ -8,6 +8,7 @@ import {withOnyx} from 'react-native-onyx';
 import _ from 'underscore';
 import useLocalize from '@hooks/useLocalize';
 import useTheme from '@hooks/useTheme';
+import useThemeStyles from '@hooks/useThemeStyles';
 import compose from '@libs/compose';
 import * as CurrencyUtils from '@libs/CurrencyUtils';
 import DistanceRequestUtils from '@libs/DistanceRequestUtils';
@@ -20,7 +21,6 @@ import * as PolicyUtils from '@libs/PolicyUtils';
 import * as ReceiptUtils from '@libs/ReceiptUtils';
 import * as ReportUtils from '@libs/ReportUtils';
 import * as TransactionUtils from '@libs/TransactionUtils';
-import useThemeStyles from '@styles/useThemeStyles';
 import * as IOU from '@userActions/IOU';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
diff --git a/src/pages/ReimbursementAccount/ExampleCheck.js b/src/pages/ReimbursementAccount/ExampleCheck.js
index aa32caf8144d..c0f5ff68c08f 100644
--- a/src/pages/ReimbursementAccount/ExampleCheck.js
+++ b/src/pages/ReimbursementAccount/ExampleCheck.js
@@ -1,8 +1,8 @@
 import React from 'react';
 import {Image} from 'react-native';
 import useLocalize from '@hooks/useLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
 import useThemeIllustrations from '@styles/illustrations/useThemeIllustrations';
-import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 
 function ExampleCheckImage() {
diff --git a/src/pages/iou/request/IOURequestStartPage.js b/src/pages/iou/request/IOURequestStartPage.js
index 8c0f00af95e0..5204c9879bb9 100644
--- a/src/pages/iou/request/IOURequestStartPage.js
+++ b/src/pages/iou/request/IOURequestStartPage.js
@@ -12,6 +12,7 @@ import TabSelector from '@components/TabSelector/TabSelector';
 import transactionPropTypes from '@components/transactionPropTypes';
 import useLocalize from '@hooks/useLocalize';
 import usePrevious from '@hooks/usePrevious';
+import useThemeStyles from '@hooks/useThemeStyles';
 import * as DeviceCapabilities from '@libs/DeviceCapabilities';
 import * as IOUUtils from '@libs/IOUUtils';
 import Navigation from '@libs/Navigation/Navigation';
@@ -19,7 +20,6 @@ import OnyxTabNavigator, {TopTab} from '@libs/Navigation/OnyxTabNavigator';
 import * as ReportUtils from '@libs/ReportUtils';
 import * as TransactionUtils from '@libs/TransactionUtils';
 import reportPropTypes from '@pages/reportPropTypes';
-import useThemeStyles from '@styles/useThemeStyles';
 import * as IOU from '@userActions/IOU';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
diff --git a/src/pages/iou/request/MoneyTemporaryForRefactorRequestParticipantsSelector.js b/src/pages/iou/request/MoneyTemporaryForRefactorRequestParticipantsSelector.js
index 165852062c54..797dc46c2842 100644
--- a/src/pages/iou/request/MoneyTemporaryForRefactorRequestParticipantsSelector.js
+++ b/src/pages/iou/request/MoneyTemporaryForRefactorRequestParticipantsSelector.js
@@ -10,6 +10,7 @@ import OptionsSelector from '@components/OptionsSelector';
 import refPropTypes from '@components/refPropTypes';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
 import useNetwork from '@hooks/useNetwork';
+import useThemeStyles from '@hooks/useThemeStyles';
 import * as Report from '@libs/actions/Report';
 import * as Browser from '@libs/Browser';
 import compose from '@libs/compose';
@@ -17,7 +18,6 @@ import * as OptionsListUtils from '@libs/OptionsListUtils';
 import * as ReportUtils from '@libs/ReportUtils';
 import personalDetailsPropType from '@pages/personalDetailsPropType';
 import reportPropTypes from '@pages/reportPropTypes';
-import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 
diff --git a/src/pages/iou/request/step/IOURequestStepCategory.js b/src/pages/iou/request/step/IOURequestStepCategory.js
index 34a4b693004a..4c86b9d40821 100644
--- a/src/pages/iou/request/step/IOURequestStepCategory.js
+++ b/src/pages/iou/request/step/IOURequestStepCategory.js
@@ -3,10 +3,10 @@ import CategoryPicker from '@components/CategoryPicker';
 import Text from '@components/Text';
 import transactionPropTypes from '@components/transactionPropTypes';
 import useLocalize from '@hooks/useLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
 import compose from '@libs/compose';
 import Navigation from '@libs/Navigation/Navigation';
 import reportPropTypes from '@pages/reportPropTypes';
-import useThemeStyles from '@styles/useThemeStyles';
 import * as IOU from '@userActions/IOU';
 import ROUTES from '@src/ROUTES';
 import IOURequestStepRoutePropTypes from './IOURequestStepRoutePropTypes';
diff --git a/src/pages/iou/request/step/IOURequestStepConfirmation.js b/src/pages/iou/request/step/IOURequestStepConfirmation.js
index 81c153cb2320..dd8de61074ad 100644
--- a/src/pages/iou/request/step/IOURequestStepConfirmation.js
+++ b/src/pages/iou/request/step/IOURequestStepConfirmation.js
@@ -11,6 +11,7 @@ import transactionPropTypes from '@components/transactionPropTypes';
 import withCurrentUserPersonalDetails, {withCurrentUserPersonalDetailsDefaultProps, withCurrentUserPersonalDetailsPropTypes} from '@components/withCurrentUserPersonalDetails';
 import useLocalize from '@hooks/useLocalize';
 import useNetwork from '@hooks/useNetwork';
+import useThemeStyles from '@hooks/useThemeStyles';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import compose from '@libs/compose';
 import * as DeviceCapabilities from '@libs/DeviceCapabilities';
@@ -22,7 +23,6 @@ import * as TransactionUtils from '@libs/TransactionUtils';
 import personalDetailsPropType from '@pages/personalDetailsPropType';
 import reportPropTypes from '@pages/reportPropTypes';
 import {policyPropTypes} from '@pages/workspace/withPolicy';
-import useThemeStyles from '@styles/useThemeStyles';
 import * as IOU from '@userActions/IOU';
 import * as Policy from '@userActions/Policy';
 import CONST from '@src/CONST';
diff --git a/src/pages/iou/request/step/IOURequestStepDate.js b/src/pages/iou/request/step/IOURequestStepDate.js
index 58c67b26052a..c90779af47ee 100644
--- a/src/pages/iou/request/step/IOURequestStepDate.js
+++ b/src/pages/iou/request/step/IOURequestStepDate.js
@@ -5,10 +5,10 @@ import DatePicker from '@components/DatePicker';
 import FormProvider from '@components/Form/FormProvider';
 import transactionPropTypes from '@components/transactionPropTypes';
 import useLocalize from '@hooks/useLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
 import compose from '@libs/compose';
 import * as IOUUtils from '@libs/IOUUtils';
 import Navigation from '@libs/Navigation/Navigation';
-import useThemeStyles from '@styles/useThemeStyles';
 import * as IOU from '@userActions/IOU';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
diff --git a/src/pages/iou/request/step/IOURequestStepDescription.js b/src/pages/iou/request/step/IOURequestStepDescription.js
index 6cf9f86068a6..849f3276667e 100644
--- a/src/pages/iou/request/step/IOURequestStepDescription.js
+++ b/src/pages/iou/request/step/IOURequestStepDescription.js
@@ -7,11 +7,11 @@ import InputWrapperWithRef from '@components/Form/InputWrapper';
 import TextInput from '@components/TextInput';
 import transactionPropTypes from '@components/transactionPropTypes';
 import useLocalize from '@hooks/useLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
 import * as Browser from '@libs/Browser';
 import compose from '@libs/compose';
 import Navigation from '@libs/Navigation/Navigation';
 import updateMultilineInputRange from '@libs/updateMultilineInputRange';
-import useThemeStyles from '@styles/useThemeStyles';
 import * as IOU from '@userActions/IOU';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
diff --git a/src/pages/iou/request/step/IOURequestStepMerchant.js b/src/pages/iou/request/step/IOURequestStepMerchant.js
index 2dbb6f8473b9..3234b6046f31 100644
--- a/src/pages/iou/request/step/IOURequestStepMerchant.js
+++ b/src/pages/iou/request/step/IOURequestStepMerchant.js
@@ -7,9 +7,9 @@ import TextInput from '@components/TextInput';
 import transactionPropTypes from '@components/transactionPropTypes';
 import useAutoFocusInput from '@hooks/useAutoFocusInput';
 import useLocalize from '@hooks/useLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
 import compose from '@libs/compose';
 import Navigation from '@libs/Navigation/Navigation';
-import useThemeStyles from '@styles/useThemeStyles';
 import * as IOU from '@userActions/IOU';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
diff --git a/src/pages/iou/request/step/IOURequestStepScan/index.js b/src/pages/iou/request/step/IOURequestStepScan/index.js
index dc868c02ecb1..1fbc4f4524d0 100644
--- a/src/pages/iou/request/step/IOURequestStepScan/index.js
+++ b/src/pages/iou/request/step/IOURequestStepScan/index.js
@@ -14,6 +14,7 @@ import * as Expensicons from '@components/Icon/Expensicons';
 import PressableWithFeedback from '@components/Pressable/PressableWithFeedback';
 import useLocalize from '@hooks/useLocalize';
 import useTheme from '@hooks/useTheme';
+import useThemeStyles from '@hooks/useThemeStyles';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import * as Browser from '@libs/Browser';
 import * as FileUtils from '@libs/fileDownload/FileUtils';
@@ -23,7 +24,6 @@ import IOURequestStepRoutePropTypes from '@pages/iou/request/step/IOURequestStep
 import StepScreenDragAndDropWrapper from '@pages/iou/request/step/StepScreenDragAndDropWrapper';
 import withWritableReportOrNotFound from '@pages/iou/request/step/withWritableReportOrNotFound';
 import reportPropTypes from '@pages/reportPropTypes';
-import useThemeStyles from '@styles/useThemeStyles';
 import * as IOU from '@userActions/IOU';
 import CONST from '@src/CONST';
 import ROUTES from '@src/ROUTES';
diff --git a/src/pages/iou/request/step/IOURequestStepScan/index.native.js b/src/pages/iou/request/step/IOURequestStepScan/index.native.js
index 72e0e283c584..ddb7906917d9 100644
--- a/src/pages/iou/request/step/IOURequestStepScan/index.native.js
+++ b/src/pages/iou/request/step/IOURequestStepScan/index.native.js
@@ -12,12 +12,12 @@ import * as Expensicons from '@components/Icon/Expensicons';
 import PressableWithFeedback from '@components/Pressable/PressableWithFeedback';
 import useLocalize from '@hooks/useLocalize';
 import useTheme from '@hooks/useTheme';
+import useThemeStyles from '@hooks/useThemeStyles';
 import * as FileUtils from '@libs/fileDownload/FileUtils';
 import Log from '@libs/Log';
 import Navigation from '@libs/Navigation/Navigation';
 import IOURequestStepRoutePropTypes from '@pages/iou/request/step/IOURequestStepRoutePropTypes';
 import reportPropTypes from '@pages/reportPropTypes';
-import useThemeStyles from '@styles/useThemeStyles';
 import * as IOU from '@userActions/IOU';
 import CONST from '@src/CONST';
 import ROUTES from '@src/ROUTES';
diff --git a/src/pages/iou/request/step/IOURequestStepTag.js b/src/pages/iou/request/step/IOURequestStepTag.js
index 12e5dc8f9dab..7e2ccbe1a9dd 100644
--- a/src/pages/iou/request/step/IOURequestStepTag.js
+++ b/src/pages/iou/request/step/IOURequestStepTag.js
@@ -6,11 +6,11 @@ import tagPropTypes from '@components/tagPropTypes';
 import Text from '@components/Text';
 import transactionPropTypes from '@components/transactionPropTypes';
 import useLocalize from '@hooks/useLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
 import compose from '@libs/compose';
 import Navigation from '@libs/Navigation/Navigation';
 import * as PolicyUtils from '@libs/PolicyUtils';
 import reportPropTypes from '@pages/reportPropTypes';
-import useThemeStyles from '@styles/useThemeStyles';
 import * as IOU from '@userActions/IOU';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
diff --git a/src/pages/iou/request/step/IOURequestStepWaypoint.js b/src/pages/iou/request/step/IOURequestStepWaypoint.js
index 7af58a7e0352..dc5b9f7d6275 100644
--- a/src/pages/iou/request/step/IOURequestStepWaypoint.js
+++ b/src/pages/iou/request/step/IOURequestStepWaypoint.js
@@ -16,12 +16,12 @@ import ScreenWrapper from '@components/ScreenWrapper';
 import transactionPropTypes from '@components/transactionPropTypes';
 import useLocalize from '@hooks/useLocalize';
 import useNetwork from '@hooks/useNetwork';
+import useThemeStyles from '@hooks/useThemeStyles';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import compose from '@libs/compose';
 import * as ErrorUtils from '@libs/ErrorUtils';
 import Navigation from '@libs/Navigation/Navigation';
 import * as ValidationUtils from '@libs/ValidationUtils';
-import useThemeStyles from '@styles/useThemeStyles';
 import * as Transaction from '@userActions/Transaction';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
diff --git a/src/pages/iou/request/step/StepScreenWrapper.js b/src/pages/iou/request/step/StepScreenWrapper.js
index 000beb8432c5..ef27ba2344f4 100644
--- a/src/pages/iou/request/step/StepScreenWrapper.js
+++ b/src/pages/iou/request/step/StepScreenWrapper.js
@@ -4,8 +4,8 @@ import {View} from 'react-native';
 import _ from 'underscore';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import ScreenWrapper from '@components/ScreenWrapper';
+import useThemeStyles from '@hooks/useThemeStyles';
 import * as DeviceCapabilities from '@libs/DeviceCapabilities';
-import useThemeStyles from '@styles/useThemeStyles';
 
 const propTypes = {
     /** The things to display inside the screenwrapper */

From b45ad2f2a24b5112ce3f3fb8d6f939dbe853ad29 Mon Sep 17 00:00:00 2001
From: Christoph Pader <christoph@margelo.io>
Date: Mon, 11 Dec 2023 21:07:12 +0100
Subject: [PATCH 078/102] fixxxxx

---
 src/pages/ReimbursementAccount/ExampleCheck.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/ReimbursementAccount/ExampleCheck.js b/src/pages/ReimbursementAccount/ExampleCheck.js
index c0f5ff68c08f..47bb59af1050 100644
--- a/src/pages/ReimbursementAccount/ExampleCheck.js
+++ b/src/pages/ReimbursementAccount/ExampleCheck.js
@@ -1,8 +1,8 @@
 import React from 'react';
 import {Image} from 'react-native';
 import useLocalize from '@hooks/useLocalize';
+import useThemeIllustrations from '@hooks/useThemeIllustrations';
 import useThemeStyles from '@hooks/useThemeStyles';
-import useThemeIllustrations from '@styles/illustrations/useThemeIllustrations';
 import CONST from '@src/CONST';
 
 function ExampleCheckImage() {

From 51cdb904846ef92e92d6b769bde2fa5753dc0a63 Mon Sep 17 00:00:00 2001
From: Someshwar Tripathi <someshwartripathi8@gmail.com>
Date: Tue, 12 Dec 2023 19:57:22 +0530
Subject: [PATCH 079/102] Update Referral Program link

---
 src/CONST.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/CONST.ts b/src/CONST.ts
index d4208d51a78c..a9c44e5c06fc 100755
--- a/src/CONST.ts
+++ b/src/CONST.ts
@@ -2854,7 +2854,7 @@ const CONST = {
             SHARE_CODE: 'shareCode',
         },
         REVENUE: 250,
-        LEARN_MORE_LINK: 'https://help.expensify.com/articles/new-expensify/billing-and-plan-types/Referral-Program',
+        LEARN_MORE_LINK: 'https://help.expensify.com/articles/new-expensify/get-paid-back/Referral-Program',
         LINK: 'https://join.my.expensify.com',
     },
 

From b421b4eb1f634005b5103d7019d1a3c44f86a96f Mon Sep 17 00:00:00 2001
From: Cong Pham <ptcong411@gmail.com>
Date: Sun, 3 Dec 2023 13:27:50 +0700
Subject: [PATCH 080/102] #19642 fix scroll on vitual view when keyboard open

---
 src/components/Composer/index.js              | 16 +++++++++--
 src/hooks/useScrollBarVisible/index.native.ts |  7 +++++
 src/hooks/useScrollBarVisible/index.ts        | 28 +++++++++++++++++++
 3 files changed, 48 insertions(+), 3 deletions(-)
 create mode 100644 src/hooks/useScrollBarVisible/index.native.ts
 create mode 100644 src/hooks/useScrollBarVisible/index.ts

diff --git a/src/components/Composer/index.js b/src/components/Composer/index.js
index 4bb3df5c1b85..9bb849f23af6 100755
--- a/src/components/Composer/index.js
+++ b/src/components/Composer/index.js
@@ -8,6 +8,7 @@ import RNTextInput from '@components/RNTextInput';
 import Text from '@components/Text';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
 import withNavigation from '@components/withNavigation';
+import useScrollBarVisible from '@hooks/useScrollBarVisible';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import * as Browser from '@libs/Browser';
 import compose from '@libs/compose';
@@ -180,6 +181,7 @@ function Composer({
     const [caretContent, setCaretContent] = useState('');
     const [valueBeforeCaret, setValueBeforeCaret] = useState('');
     const [textInputWidth, setTextInputWidth] = useState('');
+    const isScrollBarVisible = useScrollBarVisible(textInput, value);
 
     useEffect(() => {
         if (!shouldClear) {
@@ -418,18 +420,26 @@ function Composer({
         </View>
     );
 
-    const inputStyleMemo = useMemo(
-        () => [
+    const scrollStyleMemo = useMemo(() => {
+        if (Browser.isMobileSafari()) {
+            return isScrollBarVisible ? [styles.overflowScroll, styles.overscrollBehaviorContain] : styles.overflowHidden;
+        }
+        return [
             // We are hiding the scrollbar to prevent it from reducing the text input width,
             // so we can get the correct scroll height while calculating the number of lines.
             numberOfLines < maxLines ? styles.overflowHidden : {},
+        ];
+    }, [isScrollBarVisible, maxLines, numberOfLines, styles.overflowHidden, styles.overflowScroll, styles.overscrollBehaviorContain]);
 
+    const inputStyleMemo = useMemo(
+        () => [
             StyleSheet.flatten([style, {outline: 'none'}]),
             StyleUtils.getComposeTextAreaPadding(numberOfLines, isComposerFullSize),
             Browser.isMobileSafari() || Browser.isSafari() ? styles.rtlTextRenderForSafari : {},
+            scrollStyleMemo,
         ],
 
-        [numberOfLines, maxLines, styles.overflowHidden, styles.rtlTextRenderForSafari, style, StyleUtils, isComposerFullSize],
+        [numberOfLines, scrollStyleMemo, styles.rtlTextRenderForSafari, style, StyleUtils, isComposerFullSize],
     );
 
     return (
diff --git a/src/hooks/useScrollBarVisible/index.native.ts b/src/hooks/useScrollBarVisible/index.native.ts
new file mode 100644
index 000000000000..37df393cbc6e
--- /dev/null
+++ b/src/hooks/useScrollBarVisible/index.native.ts
@@ -0,0 +1,7 @@
+/**
+ * Native doesn't have the DOM, so we just return null.
+ *
+ */
+const useScrollBarVisible = () => null;
+
+export default useScrollBarVisible;
diff --git a/src/hooks/useScrollBarVisible/index.ts b/src/hooks/useScrollBarVisible/index.ts
new file mode 100644
index 000000000000..91ccf0d7ba8b
--- /dev/null
+++ b/src/hooks/useScrollBarVisible/index.ts
@@ -0,0 +1,28 @@
+import {useCallback, useEffect, useState} from 'react';
+
+const useScrollBarVisible = (ref: React.RefObject<HTMLDivElement | HTMLTextAreaElement>, value: string) => {
+    const [isScrollBarVisible, setIsScrollBarVisible] = useState(false);
+
+    const handleResize = useCallback(() => {
+        if (!ref.current) {
+            return;
+        }
+        const {scrollHeight, clientHeight} = ref.current;
+        setIsScrollBarVisible(scrollHeight > clientHeight);
+    }, [ref]);
+
+    useEffect(() => {
+        if (!ref.current || !('ResizeObserver' in (window || {}))) {
+            return;
+        }
+
+        const resizeObserver = new ResizeObserver(handleResize);
+        resizeObserver.observe(ref.current);
+        return () => {
+            resizeObserver.disconnect();
+        };
+    }, [handleResize, ref, value]);
+    return isScrollBarVisible;
+};
+
+export default useScrollBarVisible;

From ae6ffbaca5a68cd46d03db73d0e28775927e8f30 Mon Sep 17 00:00:00 2001
From: Cong Pham <ptcong411@gmail.com>
Date: Tue, 12 Dec 2023 22:55:25 +0700
Subject: [PATCH 081/102] add shouldScrollContain props for composer

---
 src/components/Composer/index.js                         | 9 +++++++--
 .../ComposerWithSuggestions/ComposerWithSuggestions.js   | 2 ++
 2 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/src/components/Composer/index.js b/src/components/Composer/index.js
index 9bb849f23af6..f152573645d1 100755
--- a/src/components/Composer/index.js
+++ b/src/components/Composer/index.js
@@ -87,6 +87,9 @@ const propTypes = {
     /** Whether the sull composer is open */
     isComposerFullSize: PropTypes.bool,
 
+    /** Should set scroll behavior is contain for composer */
+    shouldScrollContain: PropTypes.bool,
+
     ...withLocalizePropTypes,
 };
 
@@ -114,6 +117,7 @@ const defaultProps = {
     checkComposerVisibility: () => false,
     isReportActionCompose: false,
     isComposerFullSize: false,
+    shouldScrollContain: false,
 };
 
 /**
@@ -165,6 +169,7 @@ function Composer({
     selection: selectionProp,
     isReportActionCompose,
     isComposerFullSize,
+    shouldScrollContain,
     ...props
 }) {
     const theme = useTheme();
@@ -421,7 +426,7 @@ function Composer({
     );
 
     const scrollStyleMemo = useMemo(() => {
-        if (Browser.isMobileSafari()) {
+        if (shouldScrollContain) {
             return isScrollBarVisible ? [styles.overflowScroll, styles.overscrollBehaviorContain] : styles.overflowHidden;
         }
         return [
@@ -429,7 +434,7 @@ function Composer({
             // so we can get the correct scroll height while calculating the number of lines.
             numberOfLines < maxLines ? styles.overflowHidden : {},
         ];
-    }, [isScrollBarVisible, maxLines, numberOfLines, styles.overflowHidden, styles.overflowScroll, styles.overscrollBehaviorContain]);
+    }, [shouldScrollContain, isScrollBarVisible, maxLines, numberOfLines, styles.overflowHidden, styles.overflowScroll, styles.overscrollBehaviorContain]);
 
     const inputStyleMemo = useMemo(
         () => [
diff --git a/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.js b/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.js
index f5a321f72799..4bd600c761bf 100644
--- a/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.js
+++ b/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.js
@@ -10,6 +10,7 @@ import useDebounce from '@hooks/useDebounce';
 import useLocalize from '@hooks/useLocalize';
 import usePrevious from '@hooks/usePrevious';
 import useWindowDimensions from '@hooks/useWindowDimensions';
+import * as Browser from '@libs/Browser';
 import canFocusInputOnScreenFocus from '@libs/canFocusInputOnScreenFocus';
 import compose from '@libs/compose';
 import * as ComposerUtils from '@libs/ComposerUtils';
@@ -556,6 +557,7 @@ function ComposerWithSuggestions({
                         setComposerHeight(composerLayoutHeight);
                     }}
                     onScroll={hideSuggestionMenu}
+                    shouldScrollContain={Browser.isMobileSafari()}
                 />
             </View>
 

From 83a1e4c80bbd3a796a10675eb0c5145848bb508c Mon Sep 17 00:00:00 2001
From: Cong Pham <ptcong411@gmail.com>
Date: Wed, 13 Dec 2023 01:51:24 +0700
Subject: [PATCH 082/102] update naming code review

---
 src/components/Composer/index.js                 | 16 ++++++++--------
 src/hooks/useIsScrollBarVisible/index.native.ts  |  7 +++++++
 .../index.ts                                     |  4 ++--
 src/hooks/useScrollBarVisible/index.native.ts    |  7 -------
 .../ComposerWithSuggestions.js                   |  2 +-
 5 files changed, 18 insertions(+), 18 deletions(-)
 create mode 100644 src/hooks/useIsScrollBarVisible/index.native.ts
 rename src/hooks/{useScrollBarVisible => useIsScrollBarVisible}/index.ts (83%)
 delete mode 100644 src/hooks/useScrollBarVisible/index.native.ts

diff --git a/src/components/Composer/index.js b/src/components/Composer/index.js
index f152573645d1..713439671162 100755
--- a/src/components/Composer/index.js
+++ b/src/components/Composer/index.js
@@ -8,7 +8,7 @@ import RNTextInput from '@components/RNTextInput';
 import Text from '@components/Text';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
 import withNavigation from '@components/withNavigation';
-import useScrollBarVisible from '@hooks/useScrollBarVisible';
+import useIsScrollBarVisible from '@hooks/useIsScrollBarVisible';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import * as Browser from '@libs/Browser';
 import compose from '@libs/compose';
@@ -87,8 +87,8 @@ const propTypes = {
     /** Whether the sull composer is open */
     isComposerFullSize: PropTypes.bool,
 
-    /** Should set scroll behavior is contain for composer */
-    shouldScrollContain: PropTypes.bool,
+    /** Should make the input only scroll inside the element avoid scroll out to parent */
+    shouldContainScroll: PropTypes.bool,
 
     ...withLocalizePropTypes,
 };
@@ -117,7 +117,7 @@ const defaultProps = {
     checkComposerVisibility: () => false,
     isReportActionCompose: false,
     isComposerFullSize: false,
-    shouldScrollContain: false,
+    shouldContainScroll: false,
 };
 
 /**
@@ -169,7 +169,7 @@ function Composer({
     selection: selectionProp,
     isReportActionCompose,
     isComposerFullSize,
-    shouldScrollContain,
+    shouldContainScroll,
     ...props
 }) {
     const theme = useTheme();
@@ -186,7 +186,7 @@ function Composer({
     const [caretContent, setCaretContent] = useState('');
     const [valueBeforeCaret, setValueBeforeCaret] = useState('');
     const [textInputWidth, setTextInputWidth] = useState('');
-    const isScrollBarVisible = useScrollBarVisible(textInput, value);
+    const isScrollBarVisible = useIsScrollBarVisible(textInput, value);
 
     useEffect(() => {
         if (!shouldClear) {
@@ -426,7 +426,7 @@ function Composer({
     );
 
     const scrollStyleMemo = useMemo(() => {
-        if (shouldScrollContain) {
+        if (shouldContainScroll) {
             return isScrollBarVisible ? [styles.overflowScroll, styles.overscrollBehaviorContain] : styles.overflowHidden;
         }
         return [
@@ -434,7 +434,7 @@ function Composer({
             // so we can get the correct scroll height while calculating the number of lines.
             numberOfLines < maxLines ? styles.overflowHidden : {},
         ];
-    }, [shouldScrollContain, isScrollBarVisible, maxLines, numberOfLines, styles.overflowHidden, styles.overflowScroll, styles.overscrollBehaviorContain]);
+    }, [shouldContainScroll, isScrollBarVisible, maxLines, numberOfLines, styles.overflowHidden, styles.overflowScroll, styles.overscrollBehaviorContain]);
 
     const inputStyleMemo = useMemo(
         () => [
diff --git a/src/hooks/useIsScrollBarVisible/index.native.ts b/src/hooks/useIsScrollBarVisible/index.native.ts
new file mode 100644
index 000000000000..a461e1b7b074
--- /dev/null
+++ b/src/hooks/useIsScrollBarVisible/index.native.ts
@@ -0,0 +1,7 @@
+/**
+ * Native doesn't have the DOM, so we just return null.
+ *
+ */
+const useIsScrollBarVisible = () => null;
+
+export default useIsScrollBarVisible;
diff --git a/src/hooks/useScrollBarVisible/index.ts b/src/hooks/useIsScrollBarVisible/index.ts
similarity index 83%
rename from src/hooks/useScrollBarVisible/index.ts
rename to src/hooks/useIsScrollBarVisible/index.ts
index 91ccf0d7ba8b..4ab3a7bb24db 100644
--- a/src/hooks/useScrollBarVisible/index.ts
+++ b/src/hooks/useIsScrollBarVisible/index.ts
@@ -1,6 +1,6 @@
 import {useCallback, useEffect, useState} from 'react';
 
-const useScrollBarVisible = (ref: React.RefObject<HTMLDivElement | HTMLTextAreaElement>, value: string) => {
+const useIsScrollBarVisible = (ref: React.RefObject<HTMLDivElement | HTMLTextAreaElement>, value: string) => {
     const [isScrollBarVisible, setIsScrollBarVisible] = useState(false);
 
     const handleResize = useCallback(() => {
@@ -25,4 +25,4 @@ const useScrollBarVisible = (ref: React.RefObject<HTMLDivElement | HTMLTextAreaE
     return isScrollBarVisible;
 };
 
-export default useScrollBarVisible;
+export default useIsScrollBarVisible;
diff --git a/src/hooks/useScrollBarVisible/index.native.ts b/src/hooks/useScrollBarVisible/index.native.ts
deleted file mode 100644
index 37df393cbc6e..000000000000
--- a/src/hooks/useScrollBarVisible/index.native.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-/**
- * Native doesn't have the DOM, so we just return null.
- *
- */
-const useScrollBarVisible = () => null;
-
-export default useScrollBarVisible;
diff --git a/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.js b/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.js
index 4bd600c761bf..2ff7506b50a8 100644
--- a/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.js
+++ b/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.js
@@ -557,7 +557,7 @@ function ComposerWithSuggestions({
                         setComposerHeight(composerLayoutHeight);
                     }}
                     onScroll={hideSuggestionMenu}
-                    shouldScrollContain={Browser.isMobileSafari()}
+                    shouldContainScroll={Browser.isMobileSafari()}
                 />
             </View>
 

From 988a8b026323deac41af9d1292e5c98ee057ad5c Mon Sep 17 00:00:00 2001
From: James Dean <james@expensify.com>
Date: Tue, 12 Dec 2023 17:23:46 -0800
Subject: [PATCH 083/102] Update Referral-Program.md

Copy updates for New Expensify referral program
---
 .../get-paid-back/Referral-Program.md         | 52 +++++++++----------
 1 file changed, 26 insertions(+), 26 deletions(-)

diff --git a/docs/articles/new-expensify/get-paid-back/Referral-Program.md b/docs/articles/new-expensify/get-paid-back/Referral-Program.md
index 683e93d0277a..de5f77116784 100644
--- a/docs/articles/new-expensify/get-paid-back/Referral-Program.md
+++ b/docs/articles/new-expensify/get-paid-back/Referral-Program.md
@@ -1,53 +1,53 @@
 ---
-title: Expensify Referral Program
-description: Send your joining link, submit a receipt or invoice, and we'll pay you if your referral adopts Expensify.
+title: New Expensify Referral Program
+description: Share your invite link with a friend, start a chat with a coworker, request money from your boss -- we'll pay you $250 if your referral adopts New Expensify.
 ---
 <!-- The lines above are required by Jekyll to process the .md file -->
 
 # About
 
-Expensify has grown thanks to our users who love Expensify so much that they tell their friends, colleagues, managers, and fellow business founders to use it, too. 
+New Expensify is growing thanks to members like you who love it so much that they tell their friends, family, colleagues, managers, and fellow business founders to use it, too. 
 
-As a thank you, every time you bring a new user into the platform who directly or indirectly leads to the adoption of a paid annual plan on Expensify, you will earn $250. 
+As a thank you, every time you bring a new customer into New Expensify, you'll get $250. Here's how it works. 
 
-# How to get paid for referring people to Expensify
+# How to get paid to refer anyone to New Expensify
 
-1. Submit a report or invoice, or share your referral link with anyone you know who is spending too much time on expenses, or works at a company that could benefit from using Expensify. 
+The sky's the limit for this referral program! Your referral can be anyone - a friend, family member, boss, coworker, neighbor, or even social media follower. We're making it as easy as possible to get that cold hard referral $$$.
 
-2. You will get $250 for any referred business that commits to an annual subscription, has 2 or more active users, and makes two monthly payments.
+1. There are a bunch of different ways to kick off a referral in New Expensify:
+   - Start a chat
+   - Request money
+   - Send money
+   - @ mention someone
+   - Add them to a workspace
+     
+2. You'll get $250 for each referral as long as:
+   - You're the first to refer them to Expensify
+   - They start an annual subscription with two or more active users
+   - They make two payments toward that annual subscription
 
-That’s right! You can refer anyone working at any company you know. 
-
-If their company goes on to become an Expensify customer with an annual subscription, and you are the earliest recorded referrer of a user on that company’s paid Expensify Policy, you'll get paid a referral reward. 
-
-The best way to start is to submit any receipt to your manager (you'll get paid back and set yourself up for $250 if they start a subscription: win-win!)
-
-Referral rewards for the Spring/Summer 2023 campaign will be paid by direct deposit.
+For now, referral rewards will be paid via direct deposit into bank accounts that are connected to Expensify. 
 
 # FAQ
 
-- **How will I know if I am the first person to refer a company to Expensify?**
+- **How will I know if I'm the first person to refer a company to Expensify?**
 
-Successful referrers are notified after their referral pays for 2 months of an annual subscription.  We will check for the earliest recorded referrer of a user on the policy, and if that is you, then we will let you know. 
+Successful referrers are notified after their referral pays for two months of an annual Expensify subscription.  We'll check for the earliest recorded referrer of a member on the workspace, and if that's you, we'll let you know. 
 
 - **How will you pay me if I am successful?**
 
-In the Spring 2023 campaign, Expensify will be paying successful referrers via direct deposit to the Deposit-Only account you have on file. Referral payouts will happen once a month for the duration of the campaign. If you do not have a Deposit-Only account at the time of your referral payout, your deposit will be processed in the next batch. 
+For now, Expensify will pay successful referrers via direct deposit to the Deposit-Only bank account you have on file. Referral payouts will happen once a month. If you don't have a Deposit-Only bank account connected to Expensify at the time of your referral payout, your deposit will be processed in the next batch. 
 
-Learn how to add a Deposit-Only account [here](https://community.expensify.com/discussion/4641/how-to-add-a-deposit-only-bank-account-both-personal-and-business).
+Learn how to add a Deposit-Only bank account [here](https://community.expensify.com/discussion/4641/how-to-add-a-deposit-only-bank-account-both-personal-and-business).
 
 - **I’m outside of the US, how do I get paid?**
 
-While our referral payouts are in USD, you will be able to get paid via a Wise Borderless account. Learn more [here](https://community.expensify.com/discussion/5940/how-to-get-reimbursed-outside-the-us-with-wise-for-non-us-employees).
+While our referral payouts are in USD, you'll be able to get paid via a Wise Borderless account. Learn more [here](https://community.expensify.com/discussion/5940/how-to-get-reimbursed-outside-the-us-with-wise-for-non-us-employees).
 
 - **My referral wasn’t counted! How can I appeal?**
 
-Expensify reserves the right to modify the terms of the referral program at any time, and pays out referral bonuses for eligible companies at its own discretion.
-
-Please send a message to concierge@expensify.com with the billing owner of the company you have referred and our team will review the referral and get back to you.
-
-- **Where can I find my referral link?**
+Expensify reserves the right to modify the terms of the referral program at any time, and pays out referral bonuses for eligible members at its own discretion. If you think there's been a mistake, please send a message to concierge@expensify.com with the email of your referral and our team will review your case.
 
-Expensify members who are opted-in for our newsletters will have received an email containing their unique referral link. 
+- **Where can I find my referral link?** 
 
-On the mobile app, go to **Settings** > **Invite a Friend** > **Share Invite Link** to retrieve your referral link.
+In New Expensify, go to **Settings** > **Share code** > **Get $250** to retrieve your invite link.

From 44d612acacbbf3ea27a22e8bf86b97d8f346fb11 Mon Sep 17 00:00:00 2001
From: James Dean <james@expensify.com>
Date: Tue, 12 Dec 2023 17:31:33 -0800
Subject: [PATCH 084/102] Update Referral-Program.md

Adding a link to New Expensify
---
 docs/articles/new-expensify/get-paid-back/Referral-Program.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/articles/new-expensify/get-paid-back/Referral-Program.md b/docs/articles/new-expensify/get-paid-back/Referral-Program.md
index de5f77116784..34a35f5dc7c8 100644
--- a/docs/articles/new-expensify/get-paid-back/Referral-Program.md
+++ b/docs/articles/new-expensify/get-paid-back/Referral-Program.md
@@ -6,7 +6,7 @@ description: Share your invite link with a friend, start a chat with a coworker,
 
 # About
 
-New Expensify is growing thanks to members like you who love it so much that they tell their friends, family, colleagues, managers, and fellow business founders to use it, too. 
+[New Expensify](https://new.expensify.com/) is growing thanks to members like you who love it so much that they tell their friends, family, colleagues, managers, and fellow business founders to use it, too. 
 
 As a thank you, every time you bring a new customer into New Expensify, you'll get $250. Here's how it works. 
 

From 9c694f48e1fd9880d1b5ef54f313ba00843ef7bb Mon Sep 17 00:00:00 2001
From: Sibtain Ali <allroundexperts@gmail.com>
Date: Wed, 13 Dec 2023 07:11:02 +0500
Subject: [PATCH 085/102] feat: add a new permission for reportFields

---
 src/CONST.ts            | 1 +
 src/libs/Permissions.ts | 5 +++++
 2 files changed, 6 insertions(+)

diff --git a/src/CONST.ts b/src/CONST.ts
index 6f1fe37f661d..692ac1dfdf69 100755
--- a/src/CONST.ts
+++ b/src/CONST.ts
@@ -252,6 +252,7 @@ const CONST = {
         BETA_COMMENT_LINKING: 'commentLinking',
         POLICY_ROOMS: 'policyRooms',
         VIOLATIONS: 'violations',
+        REPORT_FIELDS: 'reportFields',
     },
     BUTTON_STATES: {
         DEFAULT: 'default',
diff --git a/src/libs/Permissions.ts b/src/libs/Permissions.ts
index 43e7ef9fbbc8..9cde613ebb5a 100644
--- a/src/libs/Permissions.ts
+++ b/src/libs/Permissions.ts
@@ -18,6 +18,10 @@ function canUseCommentLinking(betas: OnyxEntry<Beta[]>): boolean {
     return !!betas?.includes(CONST.BETAS.BETA_COMMENT_LINKING) || canUseAllBetas(betas);
 }
 
+function canUseReportFields(betas: OnyxEntry<Beta[]>): boolean {
+    return !!betas?.includes(CONST.BETAS.REPORT_FIELDS) || canUseAllBetas(betas);
+}
+
 /**
  * We're requiring you to be added to the policy rooms beta on dev,
  * since contributors have been reporting a number of false issues related to the feature being under development.
@@ -45,4 +49,5 @@ export default {
     canUsePolicyRooms,
     canUseLinkPreviews,
     canUseViolations,
+    canUseReportFields,
 };

From 53dc13a362242e46d4486e93b55e08c7da21440a Mon Sep 17 00:00:00 2001
From: Dylan <dylandylan9112@gmail.com>
Date: Wed, 13 Dec 2023 13:33:53 +0700
Subject: [PATCH 086/102] update using MERGE method for tag

---
 src/libs/actions/IOU.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/libs/actions/IOU.js b/src/libs/actions/IOU.js
index e7ab19afac3b..95ab37e5d9e4 100644
--- a/src/libs/actions/IOU.js
+++ b/src/libs/actions/IOU.js
@@ -184,7 +184,7 @@ function buildOnyxDataForMoneyRequest(
 
     if (!_.isEmpty(optimisticPolicyRecentlyUsedTags)) {
         optimisticData.push({
-            onyxMethod: Onyx.METHOD.SET,
+            onyxMethod: Onyx.METHOD.MERGE,
             key: `${ONYXKEYS.COLLECTION.POLICY_RECENTLY_USED_TAGS}${iouReport.policyID}`,
             value: optimisticPolicyRecentlyUsedTags,
         });
@@ -769,7 +769,7 @@ function editDistanceMoneyRequest(transactionID, transactionThreadReportID, tran
         const optimisticPolicyRecentlyUsedTags = Policy.buildOptimisticPolicyRecentlyUsedTags(iouReport.policyID, transactionChanges.tag);
         if (!_.isEmpty(optimisticPolicyRecentlyUsedTags)) {
             optimisticData.push({
-                onyxMethod: Onyx.METHOD.SET,
+                onyxMethod: Onyx.METHOD.MERGE,
                 key: `${ONYXKEYS.COLLECTION.POLICY_RECENTLY_USED_TAGS}${iouReport.policyID}`,
                 value: optimisticPolicyRecentlyUsedTags,
             });
@@ -1909,7 +1909,7 @@ function editRegularMoneyRequest(transactionID, transactionThreadReportID, trans
         const optimisticPolicyRecentlyUsedTags = Policy.buildOptimisticPolicyRecentlyUsedTags(iouReport.policyID, transactionChanges.tag);
         if (!_.isEmpty(optimisticPolicyRecentlyUsedTags)) {
             optimisticData.push({
-                onyxMethod: Onyx.METHOD.SET,
+                onyxMethod: Onyx.METHOD.MERGE,
                 key: `${ONYXKEYS.COLLECTION.POLICY_RECENTLY_USED_TAGS}${iouReport.policyID}`,
                 value: optimisticPolicyRecentlyUsedTags,
             });

From d2090767e48851ca46d24597c0f42918be798987 Mon Sep 17 00:00:00 2001
From: Jakub Szymczak <szymczak.jakub12@gmail.com>
Date: Wed, 13 Dec 2023 11:12:06 +0100
Subject: [PATCH 087/102] fix PR comments

---
 src/components/HeaderGap/index.desktop.tsx        | 4 ++--
 src/components/HeaderGap/index.tsx                | 5 ++---
 src/components/HeaderGap/types.ts                 | 5 ++++-
 src/components/SplashScreenHider/index.native.tsx | 4 ++--
 src/components/SplashScreenHider/index.tsx        | 4 ++--
 src/components/SplashScreenHider/types.ts         | 6 +++++-
 6 files changed, 17 insertions(+), 11 deletions(-)

diff --git a/src/components/HeaderGap/index.desktop.tsx b/src/components/HeaderGap/index.desktop.tsx
index 84f42142942e..4ee252c0772d 100644
--- a/src/components/HeaderGap/index.desktop.tsx
+++ b/src/components/HeaderGap/index.desktop.tsx
@@ -1,9 +1,9 @@
 import React, {memo} from 'react';
 import {View} from 'react-native';
 import useThemeStyles from '@styles/useThemeStyles';
-import HeaderGapProps from './types';
+import type {HeaderGapProps, HeaderGapReturnType} from './types';
 
-function HeaderGap({styles}: HeaderGapProps) {
+function HeaderGap({styles}: HeaderGapProps): HeaderGapReturnType {
     const themeStyles = useThemeStyles();
     return <View style={[themeStyles.headerGap, styles]} />;
 }
diff --git a/src/components/HeaderGap/index.tsx b/src/components/HeaderGap/index.tsx
index c17ba58b470c..191923efd7c8 100644
--- a/src/components/HeaderGap/index.tsx
+++ b/src/components/HeaderGap/index.tsx
@@ -1,8 +1,7 @@
-import {ReactNode} from 'react';
-import HeaderGapProps from './types';
+import type {HeaderGapProps, HeaderGapReturnType} from './types';
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
-function HeaderGap({styles}: HeaderGapProps): ReactNode {
+function HeaderGap({styles}: HeaderGapProps): HeaderGapReturnType {
     return null;
 }
 
diff --git a/src/components/HeaderGap/types.ts b/src/components/HeaderGap/types.ts
index 6ed527b1c1f2..55a202c2e48c 100644
--- a/src/components/HeaderGap/types.ts
+++ b/src/components/HeaderGap/types.ts
@@ -1,7 +1,10 @@
+import {ReactNode} from 'react';
 import {StyleProp, ViewStyle} from 'react-native';
 
 type HeaderGapProps = {
     styles?: StyleProp<ViewStyle>;
 };
 
-export default HeaderGapProps;
+type HeaderGapReturnType = ReactNode;
+
+export type {HeaderGapProps, HeaderGapReturnType};
diff --git a/src/components/SplashScreenHider/index.native.tsx b/src/components/SplashScreenHider/index.native.tsx
index 29b5ae710dda..fcedbc67dbf9 100644
--- a/src/components/SplashScreenHider/index.native.tsx
+++ b/src/components/SplashScreenHider/index.native.tsx
@@ -4,9 +4,9 @@ import Reanimated, {Easing, runOnJS, useAnimatedStyle, useSharedValue, withTimin
 import Logo from '@assets/images/new-expensify-dark.svg';
 import BootSplash from '@libs/BootSplash';
 import useThemeStyles from '@styles/useThemeStyles';
-import type SplashScreenHiderProps from './types';
+import type {SplashScreenHiderProps, SplashScreenHiderReturnType} from './types';
 
-function SplashScreenHider({onHide = () => {}}: SplashScreenHiderProps) {
+function SplashScreenHider({onHide = () => {}}: SplashScreenHiderProps): SplashScreenHiderReturnType {
     const styles = useThemeStyles();
     const logoSizeRatio = BootSplash.logoSizeRatio || 1;
     const navigationBarHeight = BootSplash.navigationBarHeight || 0;
diff --git a/src/components/SplashScreenHider/index.tsx b/src/components/SplashScreenHider/index.tsx
index d3f5c52c1e3e..5710055b80ed 100644
--- a/src/components/SplashScreenHider/index.tsx
+++ b/src/components/SplashScreenHider/index.tsx
@@ -1,8 +1,8 @@
 import {useEffect} from 'react';
 import BootSplash from '@libs/BootSplash';
-import type SplashScreenHiderProps from './types';
+import type {SplashScreenHiderProps, SplashScreenHiderReturnType} from './types';
 
-function SplashScreenHider({onHide = () => {}}: SplashScreenHiderProps) {
+function SplashScreenHider({onHide = () => {}}: SplashScreenHiderProps): SplashScreenHiderReturnType {
     useEffect(() => {
         BootSplash.hide().then(() => onHide());
     }, [onHide]);
diff --git a/src/components/SplashScreenHider/types.ts b/src/components/SplashScreenHider/types.ts
index 4ea25da93290..ff7b2beb1520 100644
--- a/src/components/SplashScreenHider/types.ts
+++ b/src/components/SplashScreenHider/types.ts
@@ -1,6 +1,10 @@
+import {ReactNode} from 'react';
+
 type SplashScreenHiderProps = {
     /** Splash screen has been hidden */
     onHide: () => void;
 };
 
-export default SplashScreenHiderProps;
+type SplashScreenHiderReturnType = ReactNode;
+
+export type {SplashScreenHiderProps, SplashScreenHiderReturnType};

From c28008be0177bcf7fc87db32d3e05048ecb9eb17 Mon Sep 17 00:00:00 2001
From: snyk-bot <snyk-bot@snyk.io>
Date: Wed, 13 Dec 2023 15:04:41 +0000
Subject: [PATCH 088/102] fix: upgrade electron-serve from 1.1.0 to 1.2.0

Snyk has created this PR to upgrade electron-serve from 1.1.0 to 1.2.0.

See this package in npm:
https://www.npmjs.com/package/electron-serve

See this project in Snyk:
https://app.snyk.io/org/expensify/project/9535b87d-14b8-434b-873d-3a25a2cba0bc?utm_source=github&utm_medium=referral&page=upgrade-pr
---
 desktop/package-lock.json | 20 +++++++++++++-------
 desktop/package.json      |  2 +-
 2 files changed, 14 insertions(+), 8 deletions(-)

diff --git a/desktop/package-lock.json b/desktop/package-lock.json
index bfeb58ceec05..39b186beb022 100644
--- a/desktop/package-lock.json
+++ b/desktop/package-lock.json
@@ -9,7 +9,7 @@
       "dependencies": {
         "electron-context-menu": "^2.3.0",
         "electron-log": "^4.4.7",
-        "electron-serve": "^1.0.0",
+        "electron-serve": "^1.2.0",
         "electron-updater": "^6.1.6",
         "node-machine-id": "^1.1.12"
       }
@@ -145,9 +145,15 @@
       "integrity": "sha512-uFZQdgevOp9Fn5lDOrJMU/bmmYxDLZitbIHJM7VXN+cpB59ZnPt1FQL4bOf/Dl2gaIMPYJEfXx38GvJma5iV6A=="
     },
     "node_modules/electron-serve": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/electron-serve/-/electron-serve-1.1.0.tgz",
-      "integrity": "sha512-tQJBCbXKoKCfkBC143QCqnEtT1s8dNE2V+b/82NF6lxnGO/2Q3a3GSLHtKl3iEDQgdzTf9pH7p418xq2rXbz1Q=="
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/electron-serve/-/electron-serve-1.2.0.tgz",
+      "integrity": "sha512-zJG3wisMrDn2G/gnjrhyB074COvly1FnS0U7Edm8bfXLB8MYX7UtwR9/y2LkFreYjzQHm9nEbAfgCmF+9M9LHQ==",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
     },
     "node_modules/electron-updater": {
       "version": "6.1.6",
@@ -530,9 +536,9 @@
       "integrity": "sha512-uFZQdgevOp9Fn5lDOrJMU/bmmYxDLZitbIHJM7VXN+cpB59ZnPt1FQL4bOf/Dl2gaIMPYJEfXx38GvJma5iV6A=="
     },
     "electron-serve": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/electron-serve/-/electron-serve-1.1.0.tgz",
-      "integrity": "sha512-tQJBCbXKoKCfkBC143QCqnEtT1s8dNE2V+b/82NF6lxnGO/2Q3a3GSLHtKl3iEDQgdzTf9pH7p418xq2rXbz1Q=="
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/electron-serve/-/electron-serve-1.2.0.tgz",
+      "integrity": "sha512-zJG3wisMrDn2G/gnjrhyB074COvly1FnS0U7Edm8bfXLB8MYX7UtwR9/y2LkFreYjzQHm9nEbAfgCmF+9M9LHQ=="
     },
     "electron-updater": {
       "version": "6.1.6",
diff --git a/desktop/package.json b/desktop/package.json
index a6b92bde81c4..7689c18f0dbd 100644
--- a/desktop/package.json
+++ b/desktop/package.json
@@ -6,7 +6,7 @@
   "dependencies": {
     "electron-context-menu": "^2.3.0",
     "electron-log": "^4.4.7",
-    "electron-serve": "^1.0.0",
+    "electron-serve": "^1.2.0",
     "electron-updater": "^6.1.6",
     "node-machine-id": "^1.1.12"
   },

From 0635dc68ad610c5f17d793d95abbaf51d31d25bf Mon Sep 17 00:00:00 2001
From: Georgia Monahan <georgia@expensify.com>
Date: Wed, 13 Dec 2023 09:34:36 -0800
Subject: [PATCH 089/102] Fix wallet cardholder name in light mode

---
 src/styles/styles.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/styles/styles.ts b/src/styles/styles.ts
index 244a6f2b11dc..ac2fee2074e0 100644
--- a/src/styles/styles.ts
+++ b/src/styles/styles.ts
@@ -3998,7 +3998,7 @@ const styles = (theme: ThemeColors) =>
             left: 16,
             bottom: 16,
             width: variables.cardNameWidth,
-            color: theme.text,
+            color: theme.textLight,
             fontSize: variables.fontSizeSmall,
             lineHeight: variables.lineHeightLarge,
         },

From 87bf77e52914a82c6874f6c5358ed451696dd590 Mon Sep 17 00:00:00 2001
From: Christoph Pader <christoph.pader@outlook.com>
Date: Wed, 13 Dec 2023 19:21:08 +0100
Subject: [PATCH 090/102] fix: ts errors

---
 src/CONST.ts                            |  3 ++-
 src/styles/themes/types.ts              |  2 +-
 src/styles/themes/useThemePreference.ts | 14 ++++----------
 3 files changed, 7 insertions(+), 12 deletions(-)

diff --git a/src/CONST.ts b/src/CONST.ts
index 5736432553c6..18f5df5ee674 100755
--- a/src/CONST.ts
+++ b/src/CONST.ts
@@ -707,8 +707,9 @@ const CONST = {
     },
     THEME: {
         DEFAULT: 'system',
-        LIGHT: 'light',
+        FALLBACK: 'dark',
         DARK: 'dark',
+        LIGHT: 'light',
         SYSTEM: 'system',
     },
     COLOR_SCHEME: {
diff --git a/src/styles/themes/types.ts b/src/styles/themes/types.ts
index 3a123419c384..c09b7a857b1a 100644
--- a/src/styles/themes/types.ts
+++ b/src/styles/themes/types.ts
@@ -4,7 +4,7 @@ import CONST from '@src/CONST';
 type Color = string;
 
 type ThemePreference = (typeof CONST.THEME)[keyof typeof CONST.THEME];
-type ThemePreferenceWithoutSystem = Exclude<ThemePreference, 'system'>;
+type ThemePreferenceWithoutSystem = Exclude<ThemePreference, typeof CONST.THEME.SYSTEM>;
 
 type ThemeColors = {
     // Figma keys
diff --git a/src/styles/themes/useThemePreference.ts b/src/styles/themes/useThemePreference.ts
index ac87e2488b31..f19a9d5c8a27 100644
--- a/src/styles/themes/useThemePreference.ts
+++ b/src/styles/themes/useThemePreference.ts
@@ -1,26 +1,20 @@
 import {useContext, useEffect, useState} from 'react';
-import {Appearance, ColorSchemeName} from 'react-native';
+import {useColorScheme} from 'react-native';
 import {PreferredThemeContext} from '@components/OnyxProvider';
 import CONST from '@src/CONST';
 import {ThemePreferenceWithoutSystem} from './types';
 
 function useThemePreference() {
-    const [themePreference, setThemePreference] = useState<ThemePreferenceWithoutSystem>(CONST.THEME.DEFAULT);
-    const [systemTheme, setSystemTheme] = useState<ColorSchemeName>();
+    const [themePreference, setThemePreference] = useState<ThemePreferenceWithoutSystem>(CONST.THEME.FALLBACK);
     const preferredThemeFromStorage = useContext(PreferredThemeContext);
-
-    useEffect(() => {
-        // This is used for getting the system theme, that can be set in the OS's theme settings. This will always return either "light" or "dark" and will update automatically if the OS theme changes.
-        const systemThemeSubscription = Appearance.addChangeListener(({colorScheme}) => setSystemTheme(colorScheme));
-        return () => systemThemeSubscription.remove();
-    }, []);
+    const systemTheme = useColorScheme();
 
     useEffect(() => {
         const theme = preferredThemeFromStorage ?? CONST.THEME.DEFAULT;
 
         // If the user chooses to use the device theme settings, we need to set the theme preference to the system theme
         if (theme === CONST.THEME.SYSTEM) {
-            setThemePreference(systemTheme ?? CONST.THEME.DEFAULT);
+            setThemePreference(systemTheme ?? CONST.THEME.FALLBACK);
         } else {
             setThemePreference(theme);
         }

From ac7dbd7fb291a36b411592774b8ef2dc20300ae9 Mon Sep 17 00:00:00 2001
From: Christoph Pader <christoph.pader@outlook.com>
Date: Wed, 13 Dec 2023 19:22:37 +0100
Subject: [PATCH 091/102] fix: more ts errros

---
 src/styles/themes/themes.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/styles/themes/themes.ts b/src/styles/themes/themes.ts
index c0a305df294f..31dbb628e9c2 100644
--- a/src/styles/themes/themes.ts
+++ b/src/styles/themes/themes.ts
@@ -8,7 +8,7 @@ const themes = {
     [CONST.THEME.DARK]: darkTheme,
 } satisfies Record<ThemePreferenceWithoutSystem, ThemeColors>;
 
-const defaultTheme = themes[CONST.THEME.DEFAULT];
+const defaultTheme = themes[CONST.THEME.FALLBACK];
 
 export default themes;
 export {defaultTheme};

From c87acffccf7f247ce2254415a625fcabbdfab358 Mon Sep 17 00:00:00 2001
From: Christoph Pader <christoph@margelo.io>
Date: Wed, 13 Dec 2023 19:27:02 +0100
Subject: [PATCH 092/102] fix: more

---
 src/components/HeaderGap/index.desktop.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/HeaderGap/index.desktop.tsx b/src/components/HeaderGap/index.desktop.tsx
index 4ee252c0772d..3687bb2e6b02 100644
--- a/src/components/HeaderGap/index.desktop.tsx
+++ b/src/components/HeaderGap/index.desktop.tsx
@@ -1,6 +1,6 @@
 import React, {memo} from 'react';
 import {View} from 'react-native';
-import useThemeStyles from '@styles/useThemeStyles';
+import useThemeStyles from '@hooks/useThemeStyles';
 import type {HeaderGapProps, HeaderGapReturnType} from './types';
 
 function HeaderGap({styles}: HeaderGapProps): HeaderGapReturnType {

From 541ee3568ba8034b85df295f8546a5d45f35f137 Mon Sep 17 00:00:00 2001
From: Christoph Pader <christoph@margelo.io>
Date: Wed, 13 Dec 2023 19:27:42 +0100
Subject: [PATCH 093/102] fix: more

---
 src/components/AmountTextInput.js                     | 2 +-
 src/components/SelectionList/BaseSelectionList.js     | 2 +-
 src/components/TimePicker/TimePicker.js               | 2 +-
 src/pages/settings/Profile/CustomStatus/StatusPage.js | 2 +-
 4 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/AmountTextInput.js b/src/components/AmountTextInput.js
index 00198242faad..25e1ce6f05ec 100644
--- a/src/components/AmountTextInput.js
+++ b/src/components/AmountTextInput.js
@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types';
 import React from 'react';
+import useStyleUtils from '@hooks/useStyleUtils';
 import useThemeStyles from '@hooks/useThemeStyles';
-import useStyleUtils from '@styles/useStyleUtils';
 import CONST from '@src/CONST';
 import refPropTypes from './refPropTypes';
 import TextInput from './TextInput';
diff --git a/src/components/SelectionList/BaseSelectionList.js b/src/components/SelectionList/BaseSelectionList.js
index 881ca30524ea..454127612e0d 100644
--- a/src/components/SelectionList/BaseSelectionList.js
+++ b/src/components/SelectionList/BaseSelectionList.js
@@ -17,10 +17,10 @@ import withKeyboardState, {keyboardStatePropTypes} from '@components/withKeyboar
 import useActiveElement from '@hooks/useActiveElement';
 import useKeyboardShortcut from '@hooks/useKeyboardShortcut';
 import useLocalize from '@hooks/useLocalize';
+import useStyleUtils from '@hooks/useStyleUtils';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import Log from '@libs/Log';
-import useStyleUtils from '@styles/useStyleUtils';
 import variables from '@styles/variables';
 import CONST from '@src/CONST';
 import BaseListItem from './BaseListItem';
diff --git a/src/components/TimePicker/TimePicker.js b/src/components/TimePicker/TimePicker.js
index f302b4f5f8f9..5b49739150cc 100644
--- a/src/components/TimePicker/TimePicker.js
+++ b/src/components/TimePicker/TimePicker.js
@@ -10,11 +10,11 @@ import refPropTypes from '@components/refPropTypes';
 import Text from '@components/Text';
 import useKeyboardShortcut from '@hooks/useKeyboardShortcut';
 import useLocalize from '@hooks/useLocalize';
+import useStyleUtils from '@hooks/useStyleUtils';
 import useThemeStyles from '@hooks/useThemeStyles';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import DateUtils from '@libs/DateUtils';
 import * as DeviceCapabilities from '@libs/DeviceCapabilities';
-import useStyleUtils from '@styles/useStyleUtils';
 import CONST from '@src/CONST';
 import setSelection from './setSelection';
 
diff --git a/src/pages/settings/Profile/CustomStatus/StatusPage.js b/src/pages/settings/Profile/CustomStatus/StatusPage.js
index f527138d0adc..bf21d3cd2b54 100644
--- a/src/pages/settings/Profile/CustomStatus/StatusPage.js
+++ b/src/pages/settings/Profile/CustomStatus/StatusPage.js
@@ -15,12 +15,12 @@ import Text from '@components/Text';
 import TextInput from '@components/TextInput';
 import withCurrentUserPersonalDetails, {withCurrentUserPersonalDetailsPropTypes} from '@components/withCurrentUserPersonalDetails';
 import useLocalize from '@hooks/useLocalize';
+import useStyleUtils from '@hooks/useStyleUtils';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import compose from '@libs/compose';
 import DateUtils from '@libs/DateUtils';
 import Navigation from '@libs/Navigation/Navigation';
-import useStyleUtils from '@styles/useStyleUtils';
 import * as User from '@userActions/User';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';

From 820b50ce6dbda921845b7a961b8e9ecf9c183a3f Mon Sep 17 00:00:00 2001
From: Vit Horacek <vit@expensify.com>
Date: Wed, 13 Dec 2023 21:07:31 +0100
Subject: [PATCH 094/102] Also VBBA is paid via expensify

---
 src/components/ReportActionItem/MoneyRequestPreview.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/ReportActionItem/MoneyRequestPreview.js b/src/components/ReportActionItem/MoneyRequestPreview.js
index 210a0575a310..4c7f171e3e58 100644
--- a/src/components/ReportActionItem/MoneyRequestPreview.js
+++ b/src/components/ReportActionItem/MoneyRequestPreview.js
@@ -183,6 +183,7 @@ function MoneyRequestPreview(props) {
         }
         switch (lodashGet(props.action, 'originalMessage.paymentType', '')) {
             case CONST.IOU.PAYMENT_TYPE.EXPENSIFY:
+            case CONST.IOU.PAYMENT_TYPE.VBBA:
                 return props.translate('iou.settledExpensify');
             default:
                 return props.translate('iou.settledElsewhere');

From e37b1564d8138ec3deb007ef361a2f704182ed05 Mon Sep 17 00:00:00 2001
From: Christoph Pader <christoph@margelo.io>
Date: Wed, 13 Dec 2023 21:20:35 +0100
Subject: [PATCH 095/102] fix: ThemePage changes

---
 src/pages/settings/Preferences/ThemePage.js | 27 +++++++++------------
 1 file changed, 11 insertions(+), 16 deletions(-)

diff --git a/src/pages/settings/Preferences/ThemePage.js b/src/pages/settings/Preferences/ThemePage.js
index f4acd10a7230..b46e0bea9ca0 100644
--- a/src/pages/settings/Preferences/ThemePage.js
+++ b/src/pages/settings/Preferences/ThemePage.js
@@ -6,8 +6,7 @@ import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import ScreenWrapper from '@components/ScreenWrapper';
 import SelectionList from '@components/SelectionList';
 import Text from '@components/Text';
-import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
-import compose from '@libs/compose';
+import useLocalize from '@hooks/useLocalize';
 import Navigation from '@libs/Navigation/Navigation';
 import useThemeStyles from '@styles/useThemeStyles';
 import * as User from '@userActions/User';
@@ -16,8 +15,6 @@ import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
 
 const propTypes = {
-    ...withLocalizePropTypes,
-
     /** The theme of the app */
     preferredTheme: PropTypes.string,
 };
@@ -28,9 +25,10 @@ const defaultProps = {
 
 function ThemePage(props) {
     const styles = useThemeStyles();
-    const localesToThemes = _.map(_.values(_.omit(CONST.THEME, 'DEFAULT')), (theme) => ({
+    const {translate} = useLocalize();
+    const localesToThemes = _.map(_.values(_.omit(CONST.THEME, 'DEFAULT', 'FALLBACK')), (theme) => ({
         value: theme,
-        text: props.translate(`themePage.themes.${theme}.label`),
+        text: translate(`themePage.themes.${theme}.label`),
         keyForList: theme,
         isSelected: (props.preferredTheme || CONST.THEME.DEFAULT) === theme,
     }));
@@ -41,13 +39,13 @@ function ThemePage(props) {
             testID={ThemePage.displayName}
         >
             <HeaderWithBackButton
-                title={props.translate('themePage.theme')}
+                title={translate('themePage.theme')}
                 shouldShowBackButton
                 onBackButtonPress={() => Navigation.navigate(ROUTES.SETTINGS_PREFERENCES)}
                 onCloseButtonPress={() => Navigation.dismissModal(true)}
             />
 
-            <Text style={[styles.mh5, styles.mv4]}>{props.translate('themePage.chooseThemeBelowOrSync')}</Text>
+            <Text style={[styles.mh5, styles.mv4]}>{translate('themePage.chooseThemeBelowOrSync')}</Text>
 
             <SelectionList
                 sections={[{data: localesToThemes}]}
@@ -62,11 +60,8 @@ ThemePage.displayName = 'ThemePage';
 ThemePage.propTypes = propTypes;
 ThemePage.defaultProps = defaultProps;
 
-export default compose(
-    withLocalize,
-    withOnyx({
-        preferredTheme: {
-            key: ONYXKEYS.PREFERRED_THEME,
-        },
-    }),
-)(ThemePage);
+export default withOnyx({
+    preferredTheme: {
+        key: ONYXKEYS.PREFERRED_THEME,
+    },
+})(ThemePage);

From 461dccf44c565dc5a298e4e4fc999f97d806cd1d Mon Sep 17 00:00:00 2001
From: Christoph Pader <christoph@margelo.io>
Date: Wed, 13 Dec 2023 21:21:44 +0100
Subject: [PATCH 096/102] uncomment screen

---
 src/libs/Navigation/AppNavigator/ModalStackNavigators.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/libs/Navigation/AppNavigator/ModalStackNavigators.tsx b/src/libs/Navigation/AppNavigator/ModalStackNavigators.tsx
index ebdfe849327e..da8f89431102 100644
--- a/src/libs/Navigation/AppNavigator/ModalStackNavigators.tsx
+++ b/src/libs/Navigation/AppNavigator/ModalStackNavigators.tsx
@@ -197,8 +197,7 @@ const SettingsModalStackNavigator = createModalStackNavigator<SettingsNavigatorP
     [SCREENS.SETTINGS.PREFERENCES.ROOT]: () => require('../../../pages/settings/Preferences/PreferencesPage').default as React.ComponentType,
     [SCREENS.SETTINGS.PREFERENCES.PRIORITY_MODE]: () => require('../../../pages/settings/Preferences/PriorityModePage').default as React.ComponentType,
     [SCREENS.SETTINGS.PREFERENCES.LANGUAGE]: () => require('../../../pages/settings/Preferences/LanguagePage').default as React.ComponentType,
-    // Will be uncommented as part of https://github.com/Expensify/App/issues/21670
-    // [SCREENS.SETTINGS.PREFERENCES.THEME]: () => require('../../../pages/settings/Preferences/ThemePage').default as React.ComponentType,
+    [SCREENS.SETTINGS.PREFERENCES.THEME]: () => require('../../../pages/settings/Preferences/ThemePage').default as React.ComponentType,
     [SCREENS.SETTINGS.CLOSE]: () => require('../../../pages/settings/Security/CloseAccountPage').default as React.ComponentType,
     [SCREENS.SETTINGS.SECURITY]: () => require('../../../pages/settings/Security/SecuritySettingsPage').default as React.ComponentType,
     [SCREENS.SETTINGS.ABOUT]: () => require('../../../pages/settings/AboutPage/AboutPage').default as React.ComponentType,

From c27c2f29e5a1952a940a76f77c8f763e96f4ade7 Mon Sep 17 00:00:00 2001
From: Christoph Pader <christoph@margelo.io>
Date: Wed, 13 Dec 2023 21:27:52 +0100
Subject: [PATCH 097/102] fix: illustrations type

---
 src/styles/theme/illustrations/index.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/styles/theme/illustrations/index.ts b/src/styles/theme/illustrations/index.ts
index 7f5cd2feeedb..9526dbcd1023 100644
--- a/src/styles/theme/illustrations/index.ts
+++ b/src/styles/theme/illustrations/index.ts
@@ -9,7 +9,7 @@ const Illustrations = {
     [CONST.THEME.DARK]: darkIllustrations,
 } satisfies Record<ThemePreferenceWithoutSystem, IllustrationsType>;
 
-const DefaultIllustrations = Illustrations[CONST.THEME.DEFAULT];
+const DefaultIllustrations = Illustrations[CONST.THEME.FALLBACK];
 
 export default Illustrations;
 export {DefaultIllustrations};

From 1ac76c76695fd7ab2c204f6faef3faf9d02fe561 Mon Sep 17 00:00:00 2001
From: Georgia Monahan <georgia@expensify.com>
Date: Wed, 13 Dec 2023 12:42:41 -0800
Subject: [PATCH 098/102] ignore generators files

---
 .github/scripts/findUnusedKeys.sh | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/.github/scripts/findUnusedKeys.sh b/.github/scripts/findUnusedKeys.sh
index 5c1195b0a49a..193149e609af 100755
--- a/.github/scripts/findUnusedKeys.sh
+++ b/.github/scripts/findUnusedKeys.sh
@@ -8,6 +8,7 @@ readonly SRC_DIR="${LIB_PATH}/src"
 readonly STYLES_DIR="${LIB_PATH}/src/styles"
 readonly STYLES_FILE="${LIB_PATH}/src/styles/index.ts"
 readonly UTILS_STYLES_FILE="${LIB_PATH}/src/styles/utils"
+readonly UTILS_STYLES_GENERATORS_FILE="${LIB_PATH}/src/styles/utils/generators"
 readonly STYLES_KEYS_FILE="${LIB_PATH}/scripts/style_keys_list_temp.txt"
 readonly UTIL_STYLES_KEYS_FILE="${LIB_PATH}/scripts/util_keys_list_temp.txt"
 readonly REMOVAL_KEYS_FILE="${LIB_PATH}/scripts/removal_keys_list_temp.txt"
@@ -325,7 +326,8 @@ find_util_usage_as_styles() {
     fi
 
     find_theme_style_and_store_keys "${file}" 0 "${root_key}"
-  done < <(find "${UTILS_STYLES_FILE}" -type f \( "${FILE_EXTENSIONS[@]}" \))
+  done < <(find "${UTILS_STYLES_FILE}" -type f \( -path "${UTILS_STYLES_GENERATORS_FILE}" -prune -o -name "${FILE_EXTENSIONS[@]}" \) -print)
+
 }
 
 lookfor_unused_utils() {

From 4db49a7d7a2c333f0112c9f640f4562959add446 Mon Sep 17 00:00:00 2001
From: Vit Horacek <vit@expensify.com>
Date: Wed, 13 Dec 2023 22:06:18 +0100
Subject: [PATCH 099/102] Use Paid in money request preview consistently

---
 .../ReportActionItem/MoneyRequestPreview.js   | 108 ++++++++----------
 1 file changed, 46 insertions(+), 62 deletions(-)

diff --git a/src/components/ReportActionItem/MoneyRequestPreview.js b/src/components/ReportActionItem/MoneyRequestPreview.js
index 4c7f171e3e58..c58e33f9591c 100644
--- a/src/components/ReportActionItem/MoneyRequestPreview.js
+++ b/src/components/ReportActionItem/MoneyRequestPreview.js
@@ -14,14 +14,15 @@ import refPropTypes from '@components/refPropTypes';
 import {showContextMenuForReport} from '@components/ShowContextMenuContext';
 import Text from '@components/Text';
 import transactionPropTypes from '@components/transactionPropTypes';
-import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
+import useLocalize from '@hooks/useLocalize';
 import useWindowDimensions from '@hooks/useWindowDimensions';
-import compose from '@libs/compose';
 import ControlSelection from '@libs/ControlSelection';
 import * as CurrencyUtils from '@libs/CurrencyUtils';
 import * as DeviceCapabilities from '@libs/DeviceCapabilities';
 import * as IOUUtils from '@libs/IOUUtils';
 import * as OptionsListUtils from '@libs/OptionsListUtils';
+import iouReportPropTypes from '@pages/iouReportPropTypes';
+import reportPropTypes from '@pages/reportPropTypes';
 import * as ReceiptUtils from '@libs/ReceiptUtils';
 import * as ReportActionsUtils from '@libs/ReportActionsUtils';
 import * as ReportUtils from '@libs/ReportUtils';
@@ -64,20 +65,11 @@ const propTypes = {
 
     /* Onyx Props */
 
-    /** Active IOU Report for current report */
-    iouReport: PropTypes.shape({
-        /** Account ID of the manager in this iou report */
-        managerID: PropTypes.number,
+    /** chatReport associated with iouReport */
+    chatReport: reportPropTypes,
 
-        /** Account ID of the creator of this iou report */
-        ownerAccountID: PropTypes.number,
-
-        /** Outstanding amount in cents of this transaction */
-        total: PropTypes.number,
-
-        /** Currency of outstanding amount of this transaction */
-        currency: PropTypes.string,
-    }),
+    /** IOU report data object */
+    iouReport: iouReportPropTypes,
 
     /** True if this is this IOU is a split instead of a 1:1 request */
     isBillSplit: PropTypes.bool.isRequired,
@@ -113,7 +105,6 @@ const propTypes = {
     /** Whether a message is a whisper */
     isWhisper: PropTypes.bool,
 
-    ...withLocalizePropTypes,
 };
 
 const defaultProps = {
@@ -124,6 +115,7 @@ const defaultProps = {
     checkIfContextMenuActive: () => {},
     containerStyles: [],
     walletTerms: {},
+    chatReport: {},
     isHovered: false,
     personalDetails: {},
     session: {
@@ -138,6 +130,7 @@ function MoneyRequestPreview(props) {
     const theme = useTheme();
     const styles = useThemeStyles();
     const StyleUtils = useStyleUtils();
+    const {translate} = useLocalize();
     const {isSmallScreenWidth, windowWidth} = useWindowDimensions();
 
     if (_.isEmpty(props.iouReport) && !props.isBillSplit) {
@@ -179,15 +172,9 @@ function MoneyRequestPreview(props) {
 
     const getSettledMessage = () => {
         if (isExpensifyCardTransaction) {
-            return props.translate('common.done');
-        }
-        switch (lodashGet(props.action, 'originalMessage.paymentType', '')) {
-            case CONST.IOU.PAYMENT_TYPE.EXPENSIFY:
-            case CONST.IOU.PAYMENT_TYPE.VBBA:
-                return props.translate('iou.settledExpensify');
-            default:
-                return props.translate('iou.settledElsewhere');
+            return translate('common.done');
         }
+        return translate('iou.settledExpensify');
     };
 
     const showContextMenu = (event) => {
@@ -196,43 +183,43 @@ function MoneyRequestPreview(props) {
 
     const getPreviewHeaderText = () => {
         if (isDistanceRequest) {
-            return props.translate('common.distance');
+            return translate('common.distance');
         }
 
         if (isScanning) {
-            return props.translate('common.receipt');
+            return translate('common.receipt');
         }
 
         if (props.isBillSplit) {
-            return props.translate('iou.split');
+            return translate('iou.split');
         }
 
         if (isExpensifyCardTransaction) {
-            let message = props.translate('iou.card');
+            let message = translate('iou.card');
             if (TransactionUtils.isPending(props.transaction)) {
-                message += ` • ${props.translate('iou.pending')}`;
+                message += ` • ${translate('iou.pending')}`;
             }
             return message;
         }
 
-        let message = props.translate('iou.cash');
+        let message = translate('iou.cash');
         if (ReportUtils.isGroupPolicyExpenseReport(props.iouReport) && ReportUtils.isReportApproved(props.iouReport) && !ReportUtils.isSettled(props.iouReport)) {
-            message += ` • ${props.translate('iou.approved')}`;
+            message += ` • ${translate('iou.approved')}`;
         } else if (props.iouReport.isWaitingOnBankAccount) {
-            message += ` • ${props.translate('iou.pending')}`;
+            message += ` • ${translate('iou.pending')}`;
         } else if (props.iouReport.isCancelledIOU) {
-            message += ` • ${props.translate('iou.canceled')}`;
+            message += ` • ${translate('iou.canceled')}`;
         }
         return message;
     };
 
     const getDisplayAmountText = () => {
         if (isDistanceRequest) {
-            return requestAmount && !hasPendingWaypoints ? CurrencyUtils.convertToDisplayString(requestAmount, props.transaction.currency) : props.translate('common.tbd');
+            return requestAmount && !hasPendingWaypoints ? CurrencyUtils.convertToDisplayString(requestAmount, props.transaction.currency) : translate('common.tbd');
         }
 
         if (isScanning) {
-            return props.translate('iou.receiptScanning');
+            return translate('iou.receiptScanning');
         }
 
         if (TransactionUtils.hasMissingSmartscanFields(props.transaction)) {
@@ -332,14 +319,14 @@ function MoneyRequestPreview(props) {
                             {shouldShowMerchant && !props.isBillSplit && (
                                 <View style={[styles.flexRow]}>
                                     <Text style={[styles.textLabelSupporting, styles.mb1, styles.lh20, styles.breakWord]}>
-                                        {hasPendingWaypoints ? requestMerchant.replace(CONST.REGEX.FIRST_SPACE, props.translate('common.tbd')) : requestMerchant}
+                                        {hasPendingWaypoints ? requestMerchant.replace(CONST.REGEX.FIRST_SPACE, translate('common.tbd')) : requestMerchant}
                                     </Text>
                                 </View>
                             )}
                             <View style={[styles.flexRow, styles.mt1]}>
                                 <View style={[styles.flex1]}>
                                     {!isCurrentUserManager && props.shouldShowPendingConversionMessage && (
-                                        <Text style={[styles.textLabel, styles.colorMuted]}>{props.translate('iou.pendingConversionMessage')}</Text>
+                                        <Text style={[styles.textLabel, styles.colorMuted]}>{translate('iou.pendingConversionMessage')}</Text>
                                     )}
                                     {(shouldShowDescription || (shouldShowMerchant && props.isBillSplit)) && (
                                         <Text style={[styles.colorMuted]}>{shouldShowDescription ? description : requestMerchant}</Text>
@@ -347,7 +334,7 @@ function MoneyRequestPreview(props) {
                                 </View>
                                 {props.isBillSplit && !_.isEmpty(participantAccountIDs) && requestAmount > 0 && (
                                     <Text style={[styles.textLabel, styles.colorMuted, styles.ml1, styles.amountSplitPadding]}>
-                                        {props.translate('iou.amountEach', {
+                                        {translate('iou.amountEach', {
                                             amount: CurrencyUtils.convertToDisplayString(
                                                 IOUUtils.calculateAmount(isPolicyExpenseChat ? 1 : participantAccountIDs.length - 1, requestAmount, requestCurrency),
                                                 requestCurrency,
@@ -375,7 +362,7 @@ function MoneyRequestPreview(props) {
             onPressIn={() => DeviceCapabilities.canUseTouchScreen() && ControlSelection.block()}
             onPressOut={() => ControlSelection.unblock()}
             onLongPress={showContextMenu}
-            accessibilityLabel={props.isBillSplit ? props.translate('iou.split') : props.translate('iou.cash')}
+            accessibilityLabel={props.isBillSplit ? translate('iou.split') : translate('iou.cash')}
             accessibilityHint={CurrencyUtils.convertToDisplayString(requestAmount, requestCurrency)}
             style={[styles.moneyRequestPreviewBox, ...props.containerStyles, shouldDisableOnPress && styles.cursorDefault]}
         >
@@ -388,26 +375,23 @@ MoneyRequestPreview.propTypes = propTypes;
 MoneyRequestPreview.defaultProps = defaultProps;
 MoneyRequestPreview.displayName = 'MoneyRequestPreview';
 
-export default compose(
-    withLocalize,
-    withOnyx({
-        personalDetails: {
-            key: ONYXKEYS.PERSONAL_DETAILS_LIST,
-        },
-        chatReport: {
-            key: ({chatReportID}) => `${ONYXKEYS.COLLECTION.REPORT}${chatReportID}`,
-        },
-        iouReport: {
-            key: ({iouReportID}) => `${ONYXKEYS.COLLECTION.REPORT}${iouReportID}`,
-        },
-        session: {
-            key: ONYXKEYS.SESSION,
-        },
-        transaction: {
-            key: ({action}) => `${ONYXKEYS.COLLECTION.TRANSACTION}${(action && action.originalMessage && action.originalMessage.IOUTransactionID) || 0}`,
-        },
-        walletTerms: {
-            key: ONYXKEYS.WALLET_TERMS,
-        },
-    }),
-)(MoneyRequestPreview);
+export default withOnyx({
+    personalDetails: {
+        key: ONYXKEYS.PERSONAL_DETAILS_LIST,
+    },
+    chatReport: {
+        key: ({chatReportID}) => `${ONYXKEYS.COLLECTION.REPORT}${chatReportID}`,
+    },
+    iouReport: {
+        key: ({iouReportID}) => `${ONYXKEYS.COLLECTION.REPORT}${iouReportID}`,
+    },
+    session: {
+        key: ONYXKEYS.SESSION,
+    },
+    transaction: {
+        key: ({action}) => `${ONYXKEYS.COLLECTION.TRANSACTION}${(action && action.originalMessage && action.originalMessage.IOUTransactionID) || 0}`,
+    },
+    walletTerms: {
+        key: ONYXKEYS.WALLET_TERMS,
+    },
+})(MoneyRequestPreview);

From 103c7cc397401f420e56f0ef919d4366fbbf318f Mon Sep 17 00:00:00 2001
From: Vit Horacek <vit@expensify.com>
Date: Wed, 13 Dec 2023 22:42:52 +0100
Subject: [PATCH 100/102] Use plural to match OldDot

---
 src/libs/NextStepUtils.ts | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/libs/NextStepUtils.ts b/src/libs/NextStepUtils.ts
index ac5c999d5388..b58f2af1eeac 100644
--- a/src/libs/NextStepUtils.ts
+++ b/src/libs/NextStepUtils.ts
@@ -15,9 +15,9 @@ function parseMessage(messages: Message[] | undefined) {
     });
 
     const formattedHtml = nextStepHTML
-        .replace(/%expenses/g, 'this expense')
-        .replace(/%Expenses/g, 'This expense')
-        .replace(/%tobe/g, 'is');
+        .replace(/%expenses/g, 'these expenses')
+        .replace(/%Expenses/g, 'These expenses')
+        .replace(/%tobe/g, 'are');
 
     return `<next-steps>${formattedHtml}</next-steps>`;
 }

From a24f77b27fce2d79302e2076a32461e595684183 Mon Sep 17 00:00:00 2001
From: Vit Horacek <vit@expensify.com>
Date: Wed, 13 Dec 2023 23:16:27 +0100
Subject: [PATCH 101/102] Update variable name

---
 src/libs/OptionsListUtils.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/libs/OptionsListUtils.js b/src/libs/OptionsListUtils.js
index 95a8c52649d3..4da344c3608b 100644
--- a/src/libs/OptionsListUtils.js
+++ b/src/libs/OptionsListUtils.js
@@ -390,14 +390,14 @@ function getLastMessageTextForReport(report) {
         lastMessageTextFromReport = ReportUtils.formatReportLastMessageText(properSchemaForMoneyRequestMessage);
     } else if (ReportActionUtils.isReportPreviewAction(lastReportAction)) {
         const iouReport = ReportUtils.getReport(ReportActionUtils.getIOUReportIDFromReportActionPreview(lastReportAction));
-        const lastIOUMoneyReport = _.find(
+        const lastIOUMoneyReportAction = _.find(
             allSortedReportActions[iouReport.reportID],
             (reportAction, key) =>
                 ReportActionUtils.shouldReportActionBeVisible(reportAction, key) &&
                 reportAction.pendingAction !== CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE &&
                 ReportActionUtils.isMoneyRequestAction(reportAction),
         );
-        lastMessageTextFromReport = ReportUtils.getReportPreviewMessage(iouReport, lastIOUMoneyReport, true, ReportUtils.isChatReport(report));
+        lastMessageTextFromReport = ReportUtils.getReportPreviewMessage(iouReport, lastIOUMoneyReportAction, true, ReportUtils.isChatReport(report));
     } else if (ReportActionUtils.isReimbursementQueuedAction(lastReportAction)) {
         lastMessageTextFromReport = ReportUtils.getReimbursementQueuedActionMessage(lastReportAction, report);
     } else if (ReportActionUtils.isReimbursementDeQueuedAction(lastReportAction)) {

From 517f7b53c58efad922bfcf7559a643df90a58846 Mon Sep 17 00:00:00 2001
From: Vit Horacek <vit@expensify.com>
Date: Wed, 13 Dec 2023 23:52:37 +0100
Subject: [PATCH 102/102] Prettier

---
 src/components/ReportActionItem/MoneyRequestPreview.js | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/components/ReportActionItem/MoneyRequestPreview.js b/src/components/ReportActionItem/MoneyRequestPreview.js
index 15b19846a7fe..12c6d0629370 100644
--- a/src/components/ReportActionItem/MoneyRequestPreview.js
+++ b/src/components/ReportActionItem/MoneyRequestPreview.js
@@ -24,14 +24,14 @@ import * as CurrencyUtils from '@libs/CurrencyUtils';
 import * as DeviceCapabilities from '@libs/DeviceCapabilities';
 import * as IOUUtils from '@libs/IOUUtils';
 import * as OptionsListUtils from '@libs/OptionsListUtils';
-import iouReportPropTypes from '@pages/iouReportPropTypes';
-import reportPropTypes from '@pages/reportPropTypes';
 import * as ReceiptUtils from '@libs/ReceiptUtils';
 import * as ReportActionsUtils from '@libs/ReportActionsUtils';
 import * as ReportUtils from '@libs/ReportUtils';
 import * as TransactionUtils from '@libs/TransactionUtils';
 import walletTermsPropTypes from '@pages/EnablePayments/walletTermsPropTypes';
 import reportActionPropTypes from '@pages/home/report/reportActionPropTypes';
+import iouReportPropTypes from '@pages/iouReportPropTypes';
+import reportPropTypes from '@pages/reportPropTypes';
 import * as PaymentMethods from '@userActions/PaymentMethods';
 import * as Report from '@userActions/Report';
 import CONST from '@src/CONST';
@@ -104,7 +104,6 @@ const propTypes = {
 
     /** Whether a message is a whisper */
     isWhisper: PropTypes.bool,
-
 };
 
 const defaultProps = {