diff --git a/.storybook/webpack.config.js b/.storybook/webpack.config.js
index 1c1e52c1884..9094be53d50 100644
--- a/.storybook/webpack.config.js
+++ b/.storybook/webpack.config.js
@@ -57,15 +57,13 @@ module.exports = async ({ config, mode }) => {
     },
     {
       test: /\.(ts|tsx)$/,
-      loader: require.resolve('ts-loader'),
-      exclude: /node_modules\/(?!brave-ui)/,
+      loader: 'ts-loader',
       options: {
         // TODO(petemill): point to the tsconfig in gen/[target] that
         // is made during build-time, or generate a new one. For both those
         // options, use a cli arg or environment variable to obtain the correct
         // build target.
         configFile: path.resolve(__dirname, '..', 'tsconfig-storybook.json'),
-        allowTsInNodeModules: true,
         getCustomTransformers: path.join(__dirname, '../components/webpack/webpack-ts-transformers.js'),
       }
     }
@@ -82,7 +80,7 @@ module.exports = async ({ config, mode }) => {
       'described-resolve', [
         {
           name: 'brave-ui',
-          alias: path.resolve(__dirname, '../node_modules/brave-ui/src'),
+          alias: path.resolve(__dirname, '../node_modules/@brave/brave-ui'),
         },
         {
           // Force same styled-components module for brave-core and brave-ui
diff --git a/components/brave_wallet_ui/components/extension/shared-panel-styles.ts b/components/brave_wallet_ui/components/extension/shared-panel-styles.ts
index 4170b92a7e9..519597a84eb 100644
--- a/components/brave_wallet_ui/components/extension/shared-panel-styles.ts
+++ b/components/brave_wallet_ui/components/extension/shared-panel-styles.ts
@@ -5,7 +5,7 @@
 import styled from 'styled-components'
 import { WalletButton } from '../shared/style'
 import WarningTriangle from '../../assets/svg-icons/warning-triangle.svg'
-import IThemeProps from 'brave-ui/src/theme/theme-interface'
+import IThemeProps from 'brave-ui/theme/theme-interface'
 
 interface StyleProps {
   orb: string
diff --git a/components/brave_wallet_ui/components/shared/locale-restricted/locale-restricted.test.tsx b/components/brave_wallet_ui/components/shared/locale-restricted/locale-restricted.test.tsx
index 5fc4cd8b486..a4b436e5498 100644
--- a/components/brave_wallet_ui/components/shared/locale-restricted/locale-restricted.test.tsx
+++ b/components/brave_wallet_ui/components/shared/locale-restricted/locale-restricted.test.tsx
@@ -7,11 +7,15 @@ import { shallow } from 'enzyme'
 
 import { LocaleRestricted } from './locale-restricted'
 
+const currentLocale = Intl.NumberFormat().resolvedOptions().locale
+
+
 describe('<LocaleRestricted />', () => {
   it('renders children when user\'s locale is allowed', () => {
+    expect(currentLocale.length).toBeGreaterThanOrEqual(1)
     const wrapper = shallow((
       <LocaleRestricted
-        allowedLocales={['en-US']}
+        allowedLocales={[currentLocale]}
       >
         <div className="unique" />
       </LocaleRestricted>
diff --git a/components/brave_wallet_ui/components/shared/style.tsx b/components/brave_wallet_ui/components/shared/style.tsx
index cfaeedd4f00..9d616b6db48 100644
--- a/components/brave_wallet_ui/components/shared/style.tsx
+++ b/components/brave_wallet_ui/components/shared/style.tsx
@@ -10,7 +10,7 @@ import * as leo from '@brave/leo/tokens/css'
 
 // types
 import { BraveWallet, StringWithAutocomplete } from '../../constants/types'
-import IThemeProps from 'brave-ui/src/theme/theme-interface'
+import IThemeProps from 'brave-ui/theme/theme-interface'
 
 // colors
 import { LeoColors } from '../leo/alert-inline/leo-colors'
@@ -204,7 +204,7 @@ export const WalletLink = styled(Link)`
   &:hover {
     cursor: pointer;
   }
-  
+
   &:active {
     opacity: 0.5;
   }
@@ -239,7 +239,7 @@ export const ToggleVisibilityButton = styled.button<{
     outline-style: solid;
     outline-color: ${p => p.theme.palette.blurple300};
     outline-width: 2px;
-  } 
+  }
 `
 
 export const CopyButton = styled(WalletButton) <{
@@ -469,7 +469,7 @@ export const CircleIconWrapper = styled.div<{
   position: relative;
   ${makePaddingMixin('12px')}
   box-shadow: 0px 0px 1px rgba(66, 69, 82, 0.08), 0px 0.5px 1.5px rgba(66, 69, 82, 0.1);
-  
+
   background-color: ${p => p.theme.color.background01};
   @media (prefers-color-scheme: dark) {
     background-color: ${p => p.theme.color.background02};
diff --git a/components/common/typescript.gni b/components/common/typescript.gni
index c58424fce7d..f4d2ca67099 100644
--- a/components/common/typescript.gni
+++ b/components/common/typescript.gni
@@ -39,13 +39,9 @@ brave_common_web_compile_inputs = [
   "//brave/tsconfig.json",
   "//brave/tsconfig-webpack.json",
 
-  # modifying npm dependencies warrants a re-build of all webpack
+  # modifying npm dependencies or scripts warrants a re-build of all webpack
   # and typescript builds
   "//brave/package.json",
-
-  # brave-ui changes (perhaps a manual local link which wouldn't affect
-  # //brave/package.json)
-  "//brave/node_modules/brave-ui/package.json",
 ]
 
 # Runs a frontend compiler for the specified entry point(s) and outputs a GRD file
diff --git a/components/webpack/path-map.js b/components/webpack/path-map.js
index cf120f79b7a..f699e0e8a10 100644
--- a/components/webpack/path-map.js
+++ b/components/webpack/path-map.js
@@ -23,7 +23,7 @@ module.exports = {
                            process.env.ROOT_GEN_DIR, 'ui/webui/resources/tsc'),
   // We import brave-ui direct from source and not from package repo, so we need
   // direct path to the src/ directory.
-  'brave-ui' : path.resolve(__dirname, '../../node_modules/brave-ui/src'),
+  'brave-ui' : path.resolve(__dirname, '../../node_modules/@brave/brave-ui'),
   // Force same styled-components module for brave-core and brave-ui
   // which ensure both repos code use the same singletons, e.g. ThemeContext.
   'styled-components' : path.resolve(
diff --git a/components/webpack/webpack.config.js b/components/webpack/webpack.config.js
index f96a7dae8ae..10592ff819e 100644
--- a/components/webpack/webpack.config.js
+++ b/components/webpack/webpack.config.js
@@ -103,10 +103,8 @@ module.exports = async function (env, argv) {
         {
           test: /\.tsx?$/,
           loader: 'ts-loader',
-          exclude: /node_modules\/(?!brave-ui)/,
           options: {
             getCustomTransformers: path.join(__dirname, './webpack-ts-transformers.js'),
-            allowTsInNodeModules: true,
             // Use generated tsconfig so that we can point at gen/ output in the
             // correct build configuration output directory.
             configFile: tsConfigPath
diff --git a/jest.config.js b/jest.config.js
index 9f1e2beaa7f..a4a2ddfce2c 100644
--- a/jest.config.js
+++ b/jest.config.js
@@ -61,7 +61,7 @@ module.exports = {
     "lib/test.js"
   ],
   transformIgnorePatterns: [
-    "<rootDir>/node_modules/(?!(brave-ui|@brave/leo)/)"
+    "<rootDir>/node_modules/(?!(@brave/brave-ui|@brave/leo)/)"
   ],
   setupFilesAfterEnv: [
     "<rootDir>/components/test/testSetup.ts"
@@ -74,8 +74,8 @@ module.exports = {
     "\\.(css|less|scss)$": "identity-obj-proxy",
     "^\\$web-common\\/(.*)": "<rootDir>/components/common/$1",
     "^\\$web-components\\/(.*)": "<rootDir>/components/web-components/$1",
-    "^brave-ui$": "<rootDir>/node_modules/brave-ui/src",
-    "^brave-ui\\/(.*)": "<rootDir>/node_modules/brave-ui/src/$1",
+    "^brave-ui$": "<rootDir>/node_modules/@brave/brave-ui",
+    "^brave-ui\\/(.*)": "<rootDir>/node_modules/@brave/brave-ui/$1",
     // TODO(petemill): The ordering here can get problematic for devs
     // who have more than 1 build type at a time, since if the file exists
     // at the first path, it will be used for Type analysis instead of the second
diff --git a/package-lock.json b/package-lock.json
index b4fedfcabc2..a74ada0cc5f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,6 +9,7 @@
       "version": "1.59.24",
       "license": "MPL-2.0",
       "dependencies": {
+        "@brave/brave-ui": "0.40.4",
         "@brave/leo": "github:brave/leo#ad11c80",
         "@brave/react-virtualized-auto-sizer": "^1.0.4",
         "@brave/wallet-standard-brave": "~0.0.10",
@@ -69,12 +70,11 @@
         "@typescript-eslint/eslint-plugin": "5.51.0",
         "acorn": "8.0.5",
         "babel-loader": "8.2.3",
-        "brave-ui": "github:brave/brave-ui#e4c049880199ac652b8f69610b8b70d1cd6d906f",
         "chalk": "4.1.2",
         "commander": "2.20.3",
         "css-loader": "3.6.0",
         "csstype": "2.6.21",
-        "dotenv": "^16.3.1",
+        "dotenv": "16.3.1",
         "emptykit.css": "1.0.1",
         "enhanced-resolve": "5.8.3",
         "enzyme": "3.11.0",
@@ -129,7 +129,6 @@
       "version": "7.16.7",
       "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.16.7.tgz",
       "integrity": "sha512-iAXqUn8IIeBTNd72xsFlgaXHkMBMt6y4HJp1tIaK465CWLT/fG1aqB7ykr95gHHmlBdGbFeWWfyB4NJJ0nmeIg==",
-      "devOptional": true,
       "dependencies": {
         "@babel/highlight": "^7.16.7"
       },
@@ -180,7 +179,6 @@
       "version": "7.16.8",
       "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.16.8.tgz",
       "integrity": "sha512-1ojZwE9+lOXzcWdWmO6TbUzDfqLD39CmEhN8+2cX9XkDo5yW1OpgfejfliysR2AWLpMamTiOiAp/mtroaymhpw==",
-      "devOptional": true,
       "dependencies": {
         "@babel/types": "^7.16.8",
         "jsesc": "^2.5.1",
@@ -194,7 +192,6 @@
       "version": "7.16.7",
       "resolved": "https://registry.npmjs.org/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.16.7.tgz",
       "integrity": "sha512-s6t2w/IPQVTAET1HitoowRGXooX8mCgtuP5195wD/QJPV6wYjpujCGF7JuMODVX2ZAJOf1GT6DT9MHEZvLOFSw==",
-      "dev": true,
       "dependencies": {
         "@babel/types": "^7.16.7"
       },
@@ -293,7 +290,6 @@
       "version": "7.16.7",
       "resolved": "https://registry.npmjs.org/@babel/helper-environment-visitor/-/helper-environment-visitor-7.16.7.tgz",
       "integrity": "sha512-SLLb0AAn6PkUeAfKJCCOl9e1R53pQlGAfc4y4XuMRZfqeMYLE0dM1LMhqbGAlGQY0lfw5/ohoYWAe9V1yibRag==",
-      "devOptional": true,
       "dependencies": {
         "@babel/types": "^7.16.7"
       },
@@ -317,7 +313,6 @@
       "version": "7.16.7",
       "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.16.7.tgz",
       "integrity": "sha512-QfDfEnIUyyBSR3HtrtGECuZ6DAyCkYFp7GHl75vFtTnn6pjKeK0T1DB5lLkFvBea8MdaiUABx3osbgLyInoejA==",
-      "devOptional": true,
       "dependencies": {
         "@babel/helper-get-function-arity": "^7.16.7",
         "@babel/template": "^7.16.7",
@@ -331,7 +326,6 @@
       "version": "7.16.7",
       "resolved": "https://registry.npmjs.org/@babel/helper-get-function-arity/-/helper-get-function-arity-7.16.7.tgz",
       "integrity": "sha512-flc+RLSOBXzNzVhcLu6ujeHUrD6tANAOU5ojrRx/as+tbzf8+stUCj7+IfRRoAbEZqj/ahXEMsjhOhgeZsrnTw==",
-      "devOptional": true,
       "dependencies": {
         "@babel/types": "^7.16.7"
       },
@@ -343,7 +337,6 @@
       "version": "7.16.7",
       "resolved": "https://registry.npmjs.org/@babel/helper-hoist-variables/-/helper-hoist-variables-7.16.7.tgz",
       "integrity": "sha512-m04d/0Op34H5v7pbZw6pSKP7weA6lsMvfiIAMeIvkY/R4xQtBSMFEigu9QTZ2qB/9l22vsxtM8a+Q8CzD255fg==",
-      "devOptional": true,
       "dependencies": {
         "@babel/types": "^7.16.7"
       },
@@ -367,7 +360,6 @@
       "version": "7.16.7",
       "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.16.7.tgz",
       "integrity": "sha512-LVtS6TqjJHFc+nYeITRo6VLXve70xmq7wPhWTqDJusJEgGmkAACWwMiTNrvfoQo6hEhFwAIixNkvB0jPXDL8Wg==",
-      "devOptional": true,
       "dependencies": {
         "@babel/types": "^7.16.7"
       },
@@ -473,7 +465,6 @@
       "version": "7.16.7",
       "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.16.7.tgz",
       "integrity": "sha512-xbWoy/PFoxSWazIToT9Sif+jJTlrMcndIsaOKvTA6u7QEo7ilkRZpjew18/W3c7nm8fXdUDXh02VXTbZ0pGDNw==",
-      "devOptional": true,
       "dependencies": {
         "@babel/types": "^7.16.7"
       },
@@ -485,7 +476,6 @@
       "version": "7.16.7",
       "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.16.7.tgz",
       "integrity": "sha512-hsEnFemeiW4D08A5gUAZxLBTXpZ39P+a+DGDsHw1yxqyQ/jzFEnxf5uTEGp+3bzAbNOxU1paTgYS4ECU/IgfDw==",
-      "devOptional": true,
       "engines": {
         "node": ">=6.9.0"
       }
@@ -532,7 +522,6 @@
       "version": "7.16.10",
       "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.16.10.tgz",
       "integrity": "sha512-5FnTQLSLswEj6IkgVw5KusNUUFY9ZGqe/TRFnP/BKYHYgfh7tc+C7mwiy95/yNP7Dh9x580Vv8r7u7ZfTBFxdw==",
-      "devOptional": true,
       "dependencies": {
         "@babel/helper-validator-identifier": "^7.16.7",
         "chalk": "^2.0.0",
@@ -546,7 +535,6 @@
       "version": "3.2.1",
       "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
       "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
-      "devOptional": true,
       "dependencies": {
         "color-convert": "^1.9.0"
       },
@@ -558,7 +546,6 @@
       "version": "2.4.2",
       "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
       "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
-      "devOptional": true,
       "dependencies": {
         "ansi-styles": "^3.2.1",
         "escape-string-regexp": "^1.0.5",
@@ -572,7 +559,6 @@
       "version": "1.9.3",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
       "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
-      "devOptional": true,
       "dependencies": {
         "color-name": "1.1.3"
       }
@@ -580,14 +566,12 @@
     "node_modules/@babel/highlight/node_modules/color-name": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
-      "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=",
-      "devOptional": true
+      "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU="
     },
     "node_modules/@babel/highlight/node_modules/has-flag": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
       "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=",
-      "devOptional": true,
       "engines": {
         "node": ">=4"
       }
@@ -596,7 +580,6 @@
       "version": "5.5.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
       "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
-      "devOptional": true,
       "dependencies": {
         "has-flag": "^3.0.0"
       },
@@ -608,7 +591,6 @@
       "version": "7.16.10",
       "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.16.10.tgz",
       "integrity": "sha512-Sm/S9Or6nN8uiFsQU1yodyDW3MWXQhFeqzMPM+t8MJjM+pLsnFVxFZzkpXKvUXh+Gz9cbMoYYs484+Jw/NTEFQ==",
-      "devOptional": true,
       "bin": {
         "parser": "bin/babel-parser.js"
       },
@@ -2017,7 +1999,6 @@
       "version": "7.16.7",
       "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.16.7.tgz",
       "integrity": "sha512-I8j/x8kHUrbYRTUxXrrMbfCa7jxkE7tZre39x3kjr9hvI82cK1FfqLygotcWN5kdPGWcLdWMHpSBavse5tWw3w==",
-      "devOptional": true,
       "dependencies": {
         "@babel/code-frame": "^7.16.7",
         "@babel/parser": "^7.16.7",
@@ -2031,7 +2012,6 @@
       "version": "7.16.10",
       "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.16.10.tgz",
       "integrity": "sha512-yzuaYXoRJBGMlBhsMJoUW7G1UmSb/eXr/JHYM/MsOJgavJibLwASijW7oXBdw3NQ6T0bW7Ty5P/VarOs9cHmqw==",
-      "devOptional": true,
       "dependencies": {
         "@babel/code-frame": "^7.16.7",
         "@babel/generator": "^7.16.8",
@@ -2052,7 +2032,6 @@
       "version": "7.16.8",
       "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.16.8.tgz",
       "integrity": "sha512-smN2DQc5s4M7fntyjGtyIPbRJv6wW4rU/94fmYJ7PKQuZkC0qGMHXJbg6sNGt12JmVr4k5YaptI/XtiLJBnmIg==",
-      "devOptional": true,
       "dependencies": {
         "@babel/helper-validator-identifier": "^7.16.7",
         "to-fast-properties": "^2.0.0"
@@ -2073,6 +2052,19 @@
       "integrity": "sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==",
       "dev": true
     },
+    "node_modules/@brave/brave-ui": {
+      "version": "0.40.4",
+      "resolved": "https://registry.npmjs.org/@brave/brave-ui/-/brave-ui-0.40.4.tgz",
+      "integrity": "sha512-I4o9zWCozlqiJUfxMjrligbsoI7uSRCXRZZDOo5shS+bjqkpKS9kpqGJgmkiZBjrILcECiDFEisdghZ684MTHw==",
+      "dependencies": {
+        "@ctrl/tinycolor": "^2.2.1",
+        "emptykit.css": "^1.0.1"
+      },
+      "peerDependencies": {
+        "react": "^16.0.0",
+        "styled-components": "^5.2.1"
+      }
+    },
     "node_modules/@brave/leo": {
       "version": "0.0.1",
       "resolved": "git+ssh://git@github.com/brave/leo.git#ad11c8033e8ab248892b5b64cc5d33df9df6da33",
@@ -2338,7 +2330,6 @@
       "version": "2.6.1",
       "resolved": "https://registry.npmjs.org/@ctrl/tinycolor/-/tinycolor-2.6.1.tgz",
       "integrity": "sha512-xKN3lAA+xbNhP+JX3sLhzA65IGiKqun/Yf9jBlZX7Og0SxlCrrqKxqTd6ccn20fv3Cgcvq6KnjPhnmS+v7uAwQ==",
-      "dev": true,
       "engines": {
         "node": ">=8.0.0"
       }
@@ -2514,14 +2505,12 @@
     "node_modules/@emotion/stylis": {
       "version": "0.8.5",
       "resolved": "https://registry.npmjs.org/@emotion/stylis/-/stylis-0.8.5.tgz",
-      "integrity": "sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ==",
-      "dev": true
+      "integrity": "sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ=="
     },
     "node_modules/@emotion/unitless": {
       "version": "0.7.5",
       "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.7.5.tgz",
-      "integrity": "sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg==",
-      "dev": true
+      "integrity": "sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg=="
     },
     "node_modules/@emotion/utils": {
       "version": "0.11.3",
@@ -8945,7 +8934,6 @@
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/babel-plugin-styled-components/-/babel-plugin-styled-components-2.0.2.tgz",
       "integrity": "sha512-7eG5NE8rChnNTDxa6LQfynwgHTVOYYaHJbUYSlOhk8QBXIQiMBKq4gyfHBBKPrxUcVBXVJL61ihduCpCQbuNbw==",
-      "dev": true,
       "dependencies": {
         "@babel/helper-annotate-as-pure": "^7.16.0",
         "@babel/helper-module-imports": "^7.16.0",
@@ -8959,8 +8947,7 @@
     "node_modules/babel-plugin-syntax-jsx": {
       "version": "6.18.0",
       "resolved": "https://registry.npmjs.org/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz",
-      "integrity": "sha1-CvMqmm4Tyno/1QaeYtew9Y0NiUY=",
-      "dev": true
+      "integrity": "sha1-CvMqmm4Tyno/1QaeYtew9Y0NiUY="
     },
     "node_modules/babel-preset-current-node-syntax": {
       "version": "1.0.1",
@@ -9724,19 +9711,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/brave-ui": {
-      "version": "0.39.0",
-      "resolved": "git+ssh://git@github.com/brave/brave-ui.git#e4c049880199ac652b8f69610b8b70d1cd6d906f",
-      "dev": true,
-      "license": "MPL-2.0",
-      "dependencies": {
-        "@ctrl/tinycolor": "^2.2.1",
-        "emptykit.css": "^1.0.1"
-      },
-      "peerDependencies": {
-        "react": "^16.0.0"
-      }
-    },
     "node_modules/brorand": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/brorand/-/brorand-1.1.0.tgz",
@@ -10316,8 +10290,7 @@
     "node_modules/camelize": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/camelize/-/camelize-1.0.0.tgz",
-      "integrity": "sha1-FkpUg+Yw+kMh5a8HAg5TGDGyYJs=",
-      "dev": true
+      "integrity": "sha1-FkpUg+Yw+kMh5a8HAg5TGDGyYJs="
     },
     "node_modules/caniuse-lite": {
       "version": "1.0.30001516",
@@ -11797,7 +11770,6 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/css-color-keywords/-/css-color-keywords-1.0.0.tgz",
       "integrity": "sha1-/qJhbcZ2spYmhrOvjb2+GAskTgU=",
-      "dev": true,
       "engines": {
         "node": ">=4"
       }
@@ -11872,7 +11844,6 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-3.0.0.tgz",
       "integrity": "sha512-Ro1yETZA813eoyUp2GDBhG2j+YggidUmzO1/v9eYBKR2EHVEniE2MI/NqpTQ954BMpTPZFsGNPm46qFB9dpaPQ==",
-      "dev": true,
       "dependencies": {
         "camelize": "^1.0.0",
         "css-color-keywords": "^1.0.0",
@@ -12663,8 +12634,7 @@
     "node_modules/emptykit.css": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/emptykit.css/-/emptykit.css-1.0.1.tgz",
-      "integrity": "sha512-zfCTnUjb8y1Zfj7e0JJD6kPMIYGZFsFVhu7FYZyOgzco7cq+qcqQLAWHf1MyMurVOzo6a5slE3nEWRXBfVA2Xw==",
-      "dev": true
+      "integrity": "sha512-zfCTnUjb8y1Zfj7e0JJD6kPMIYGZFsFVhu7FYZyOgzco7cq+qcqQLAWHf1MyMurVOzo6a5slE3nEWRXBfVA2Xw=="
     },
     "node_modules/encodeurl": {
       "version": "1.0.2",
@@ -13031,7 +13001,6 @@
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
       "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=",
-      "devOptional": true,
       "engines": {
         "node": ">=0.8.0"
       }
@@ -15484,7 +15453,6 @@
       "version": "11.12.0",
       "resolved": "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz",
       "integrity": "sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==",
-      "devOptional": true,
       "engines": {
         "node": ">=4"
       }
@@ -18097,7 +18065,6 @@
       "version": "2.5.2",
       "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-2.5.2.tgz",
       "integrity": "sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA==",
-      "devOptional": true,
       "bin": {
         "jsesc": "bin/jsesc"
       },
@@ -22044,8 +22011,7 @@
     "node_modules/react-is": {
       "version": "17.0.2",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
-      "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==",
-      "devOptional": true
+      "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
     },
     "node_modules/react-json-view-lite": {
       "version": "0.9.5",
@@ -24219,8 +24185,7 @@
     "node_modules/shallowequal": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz",
-      "integrity": "sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ==",
-      "dev": true
+      "integrity": "sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ=="
     },
     "node_modules/shebang-command": {
       "version": "2.0.0",
@@ -24722,7 +24687,6 @@
       "version": "0.5.7",
       "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
       "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=",
-      "devOptional": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -25469,7 +25433,6 @@
       "version": "5.3.11",
       "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-5.3.11.tgz",
       "integrity": "sha512-uuzIIfnVkagcVHv9nE0VPlHPSCmXIUGKfJ42LNjxCCTDTL5sgnJ8Z7GZBq0EnLYGln77tPpEpExt2+qa+cZqSw==",
-      "dev": true,
       "dependencies": {
         "@babel/helper-module-imports": "^7.0.0",
         "@babel/traverse": "^7.4.5",
@@ -25499,7 +25462,6 @@
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.2.1.tgz",
       "integrity": "sha512-61Mf7Ufx4aDxx1xlDeOm8aFFigGHE4z+0sKCa+IHCeZKiyP9RLD0Mmx7m8b9/Cf37f7NAvQOOJAbQQGVr5uERw==",
-      "dev": true,
       "dependencies": {
         "@emotion/memoize": "^0.8.1"
       }
@@ -25507,14 +25469,12 @@
     "node_modules/styled-components/node_modules/@emotion/memoize": {
       "version": "0.8.1",
       "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.8.1.tgz",
-      "integrity": "sha512-W2P2c/VRW1/1tLox0mVUalvnWXxavmv/Oum2aPsRcoDJuob75FC3Y8FbpfLwUegRcxINtGUMPq0tFCvYNTBXNA==",
-      "dev": true
+      "integrity": "sha512-W2P2c/VRW1/1tLox0mVUalvnWXxavmv/Oum2aPsRcoDJuob75FC3Y8FbpfLwUegRcxINtGUMPq0tFCvYNTBXNA=="
     },
     "node_modules/styled-components/node_modules/has-flag": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
       "integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==",
-      "dev": true,
       "engines": {
         "node": ">=4"
       }
@@ -25523,7 +25483,6 @@
       "version": "5.5.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
       "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
-      "dev": true,
       "dependencies": {
         "has-flag": "^3.0.0"
       },
@@ -26443,7 +26402,6 @@
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz",
       "integrity": "sha1-3F5pjL0HkmW8c+A3doGk5Og/YW4=",
-      "devOptional": true,
       "engines": {
         "node": ">=4"
       }
@@ -29764,7 +29722,6 @@
       "version": "7.16.7",
       "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.16.7.tgz",
       "integrity": "sha512-iAXqUn8IIeBTNd72xsFlgaXHkMBMt6y4HJp1tIaK465CWLT/fG1aqB7ykr95gHHmlBdGbFeWWfyB4NJJ0nmeIg==",
-      "devOptional": true,
       "requires": {
         "@babel/highlight": "^7.16.7"
       }
@@ -29802,7 +29759,6 @@
       "version": "7.16.8",
       "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.16.8.tgz",
       "integrity": "sha512-1ojZwE9+lOXzcWdWmO6TbUzDfqLD39CmEhN8+2cX9XkDo5yW1OpgfejfliysR2AWLpMamTiOiAp/mtroaymhpw==",
-      "devOptional": true,
       "requires": {
         "@babel/types": "^7.16.8",
         "jsesc": "^2.5.1",
@@ -29813,7 +29769,6 @@
       "version": "7.16.7",
       "resolved": "https://registry.npmjs.org/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.16.7.tgz",
       "integrity": "sha512-s6t2w/IPQVTAET1HitoowRGXooX8mCgtuP5195wD/QJPV6wYjpujCGF7JuMODVX2ZAJOf1GT6DT9MHEZvLOFSw==",
-      "dev": true,
       "requires": {
         "@babel/types": "^7.16.7"
       }
@@ -29885,7 +29840,6 @@
       "version": "7.16.7",
       "resolved": "https://registry.npmjs.org/@babel/helper-environment-visitor/-/helper-environment-visitor-7.16.7.tgz",
       "integrity": "sha512-SLLb0AAn6PkUeAfKJCCOl9e1R53pQlGAfc4y4XuMRZfqeMYLE0dM1LMhqbGAlGQY0lfw5/ohoYWAe9V1yibRag==",
-      "devOptional": true,
       "requires": {
         "@babel/types": "^7.16.7"
       }
@@ -29903,7 +29857,6 @@
       "version": "7.16.7",
       "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.16.7.tgz",
       "integrity": "sha512-QfDfEnIUyyBSR3HtrtGECuZ6DAyCkYFp7GHl75vFtTnn6pjKeK0T1DB5lLkFvBea8MdaiUABx3osbgLyInoejA==",
-      "devOptional": true,
       "requires": {
         "@babel/helper-get-function-arity": "^7.16.7",
         "@babel/template": "^7.16.7",
@@ -29914,7 +29867,6 @@
       "version": "7.16.7",
       "resolved": "https://registry.npmjs.org/@babel/helper-get-function-arity/-/helper-get-function-arity-7.16.7.tgz",
       "integrity": "sha512-flc+RLSOBXzNzVhcLu6ujeHUrD6tANAOU5ojrRx/as+tbzf8+stUCj7+IfRRoAbEZqj/ahXEMsjhOhgeZsrnTw==",
-      "devOptional": true,
       "requires": {
         "@babel/types": "^7.16.7"
       }
@@ -29923,7 +29875,6 @@
       "version": "7.16.7",
       "resolved": "https://registry.npmjs.org/@babel/helper-hoist-variables/-/helper-hoist-variables-7.16.7.tgz",
       "integrity": "sha512-m04d/0Op34H5v7pbZw6pSKP7weA6lsMvfiIAMeIvkY/R4xQtBSMFEigu9QTZ2qB/9l22vsxtM8a+Q8CzD255fg==",
-      "devOptional": true,
       "requires": {
         "@babel/types": "^7.16.7"
       }
@@ -29941,7 +29892,6 @@
       "version": "7.16.7",
       "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.16.7.tgz",
       "integrity": "sha512-LVtS6TqjJHFc+nYeITRo6VLXve70xmq7wPhWTqDJusJEgGmkAACWwMiTNrvfoQo6hEhFwAIixNkvB0jPXDL8Wg==",
-      "devOptional": true,
       "requires": {
         "@babel/types": "^7.16.7"
       }
@@ -30023,7 +29973,6 @@
       "version": "7.16.7",
       "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.16.7.tgz",
       "integrity": "sha512-xbWoy/PFoxSWazIToT9Sif+jJTlrMcndIsaOKvTA6u7QEo7ilkRZpjew18/W3c7nm8fXdUDXh02VXTbZ0pGDNw==",
-      "devOptional": true,
       "requires": {
         "@babel/types": "^7.16.7"
       }
@@ -30031,8 +29980,7 @@
     "@babel/helper-validator-identifier": {
       "version": "7.16.7",
       "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.16.7.tgz",
-      "integrity": "sha512-hsEnFemeiW4D08A5gUAZxLBTXpZ39P+a+DGDsHw1yxqyQ/jzFEnxf5uTEGp+3bzAbNOxU1paTgYS4ECU/IgfDw==",
-      "devOptional": true
+      "integrity": "sha512-hsEnFemeiW4D08A5gUAZxLBTXpZ39P+a+DGDsHw1yxqyQ/jzFEnxf5uTEGp+3bzAbNOxU1paTgYS4ECU/IgfDw=="
     },
     "@babel/helper-validator-option": {
       "version": "7.16.7",
@@ -30067,7 +30015,6 @@
       "version": "7.16.10",
       "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.16.10.tgz",
       "integrity": "sha512-5FnTQLSLswEj6IkgVw5KusNUUFY9ZGqe/TRFnP/BKYHYgfh7tc+C7mwiy95/yNP7Dh9x580Vv8r7u7ZfTBFxdw==",
-      "devOptional": true,
       "requires": {
         "@babel/helper-validator-identifier": "^7.16.7",
         "chalk": "^2.0.0",
@@ -30078,7 +30025,6 @@
           "version": "3.2.1",
           "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
           "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
-          "devOptional": true,
           "requires": {
             "color-convert": "^1.9.0"
           }
@@ -30087,7 +30033,6 @@
           "version": "2.4.2",
           "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
           "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
-          "devOptional": true,
           "requires": {
             "ansi-styles": "^3.2.1",
             "escape-string-regexp": "^1.0.5",
@@ -30098,7 +30043,6 @@
           "version": "1.9.3",
           "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
           "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
-          "devOptional": true,
           "requires": {
             "color-name": "1.1.3"
           }
@@ -30106,20 +30050,17 @@
         "color-name": {
           "version": "1.1.3",
           "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
-          "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=",
-          "devOptional": true
+          "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU="
         },
         "has-flag": {
           "version": "3.0.0",
           "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
-          "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=",
-          "devOptional": true
+          "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0="
         },
         "supports-color": {
           "version": "5.5.0",
           "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
           "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
-          "devOptional": true,
           "requires": {
             "has-flag": "^3.0.0"
           }
@@ -30129,8 +30070,7 @@
     "@babel/parser": {
       "version": "7.16.10",
       "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.16.10.tgz",
-      "integrity": "sha512-Sm/S9Or6nN8uiFsQU1yodyDW3MWXQhFeqzMPM+t8MJjM+pLsnFVxFZzkpXKvUXh+Gz9cbMoYYs484+Jw/NTEFQ==",
-      "devOptional": true
+      "integrity": "sha512-Sm/S9Or6nN8uiFsQU1yodyDW3MWXQhFeqzMPM+t8MJjM+pLsnFVxFZzkpXKvUXh+Gz9cbMoYYs484+Jw/NTEFQ=="
     },
     "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression": {
       "version": "7.16.7",
@@ -31064,7 +31004,6 @@
       "version": "7.16.7",
       "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.16.7.tgz",
       "integrity": "sha512-I8j/x8kHUrbYRTUxXrrMbfCa7jxkE7tZre39x3kjr9hvI82cK1FfqLygotcWN5kdPGWcLdWMHpSBavse5tWw3w==",
-      "devOptional": true,
       "requires": {
         "@babel/code-frame": "^7.16.7",
         "@babel/parser": "^7.16.7",
@@ -31075,7 +31014,6 @@
       "version": "7.16.10",
       "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.16.10.tgz",
       "integrity": "sha512-yzuaYXoRJBGMlBhsMJoUW7G1UmSb/eXr/JHYM/MsOJgavJibLwASijW7oXBdw3NQ6T0bW7Ty5P/VarOs9cHmqw==",
-      "devOptional": true,
       "requires": {
         "@babel/code-frame": "^7.16.7",
         "@babel/generator": "^7.16.8",
@@ -31093,7 +31031,6 @@
       "version": "7.16.8",
       "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.16.8.tgz",
       "integrity": "sha512-smN2DQc5s4M7fntyjGtyIPbRJv6wW4rU/94fmYJ7PKQuZkC0qGMHXJbg6sNGt12JmVr4k5YaptI/XtiLJBnmIg==",
-      "devOptional": true,
       "requires": {
         "@babel/helper-validator-identifier": "^7.16.7",
         "to-fast-properties": "^2.0.0"
@@ -31111,6 +31048,15 @@
       "integrity": "sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==",
       "dev": true
     },
+    "@brave/brave-ui": {
+      "version": "0.40.4",
+      "resolved": "https://registry.npmjs.org/@brave/brave-ui/-/brave-ui-0.40.4.tgz",
+      "integrity": "sha512-I4o9zWCozlqiJUfxMjrligbsoI7uSRCXRZZDOo5shS+bjqkpKS9kpqGJgmkiZBjrILcECiDFEisdghZ684MTHw==",
+      "requires": {
+        "@ctrl/tinycolor": "^2.2.1",
+        "emptykit.css": "^1.0.1"
+      }
+    },
     "@brave/leo": {
       "version": "git+ssh://git@github.com/brave/leo.git#ad11c8033e8ab248892b5b64cc5d33df9df6da33",
       "from": "@brave/leo@github:brave/leo#ad11c80",
@@ -31273,8 +31219,7 @@
     "@ctrl/tinycolor": {
       "version": "2.6.1",
       "resolved": "https://registry.npmjs.org/@ctrl/tinycolor/-/tinycolor-2.6.1.tgz",
-      "integrity": "sha512-xKN3lAA+xbNhP+JX3sLhzA65IGiKqun/Yf9jBlZX7Og0SxlCrrqKxqTd6ccn20fv3Cgcvq6KnjPhnmS+v7uAwQ==",
-      "dev": true
+      "integrity": "sha512-xKN3lAA+xbNhP+JX3sLhzA65IGiKqun/Yf9jBlZX7Og0SxlCrrqKxqTd6ccn20fv3Cgcvq6KnjPhnmS+v7uAwQ=="
     },
     "@discoveryjs/json-ext": {
       "version": "0.5.6",
@@ -31419,14 +31364,12 @@
     "@emotion/stylis": {
       "version": "0.8.5",
       "resolved": "https://registry.npmjs.org/@emotion/stylis/-/stylis-0.8.5.tgz",
-      "integrity": "sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ==",
-      "dev": true
+      "integrity": "sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ=="
     },
     "@emotion/unitless": {
       "version": "0.7.5",
       "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.7.5.tgz",
-      "integrity": "sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg==",
-      "dev": true
+      "integrity": "sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg=="
     },
     "@emotion/utils": {
       "version": "0.11.3",
@@ -36327,7 +36270,6 @@
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/babel-plugin-styled-components/-/babel-plugin-styled-components-2.0.2.tgz",
       "integrity": "sha512-7eG5NE8rChnNTDxa6LQfynwgHTVOYYaHJbUYSlOhk8QBXIQiMBKq4gyfHBBKPrxUcVBXVJL61ihduCpCQbuNbw==",
-      "dev": true,
       "requires": {
         "@babel/helper-annotate-as-pure": "^7.16.0",
         "@babel/helper-module-imports": "^7.16.0",
@@ -36338,8 +36280,7 @@
     "babel-plugin-syntax-jsx": {
       "version": "6.18.0",
       "resolved": "https://registry.npmjs.org/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz",
-      "integrity": "sha1-CvMqmm4Tyno/1QaeYtew9Y0NiUY=",
-      "dev": true
+      "integrity": "sha1-CvMqmm4Tyno/1QaeYtew9Y0NiUY="
     },
     "babel-preset-current-node-syntax": {
       "version": "1.0.1",
@@ -36903,15 +36844,6 @@
         "fill-range": "^7.0.1"
       }
     },
-    "brave-ui": {
-      "version": "git+ssh://git@github.com/brave/brave-ui.git#e4c049880199ac652b8f69610b8b70d1cd6d906f",
-      "dev": true,
-      "from": "brave-ui@github:brave/brave-ui#e4c049880199ac652b8f69610b8b70d1cd6d906f",
-      "requires": {
-        "@ctrl/tinycolor": "^2.2.1",
-        "emptykit.css": "^1.0.1"
-      }
-    },
     "brorand": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/brorand/-/brorand-1.1.0.tgz",
@@ -37371,8 +37303,7 @@
     "camelize": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/camelize/-/camelize-1.0.0.tgz",
-      "integrity": "sha1-FkpUg+Yw+kMh5a8HAg5TGDGyYJs=",
-      "dev": true
+      "integrity": "sha1-FkpUg+Yw+kMh5a8HAg5TGDGyYJs="
     },
     "caniuse-lite": {
       "version": "1.0.30001516",
@@ -38524,8 +38455,7 @@
     "css-color-keywords": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/css-color-keywords/-/css-color-keywords-1.0.0.tgz",
-      "integrity": "sha1-/qJhbcZ2spYmhrOvjb2+GAskTgU=",
-      "dev": true
+      "integrity": "sha1-/qJhbcZ2spYmhrOvjb2+GAskTgU="
     },
     "css-loader": {
       "version": "3.6.0",
@@ -38584,7 +38514,6 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-3.0.0.tgz",
       "integrity": "sha512-Ro1yETZA813eoyUp2GDBhG2j+YggidUmzO1/v9eYBKR2EHVEniE2MI/NqpTQ954BMpTPZFsGNPm46qFB9dpaPQ==",
-      "dev": true,
       "requires": {
         "camelize": "^1.0.0",
         "css-color-keywords": "^1.0.0",
@@ -39214,8 +39143,7 @@
     "emptykit.css": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/emptykit.css/-/emptykit.css-1.0.1.tgz",
-      "integrity": "sha512-zfCTnUjb8y1Zfj7e0JJD6kPMIYGZFsFVhu7FYZyOgzco7cq+qcqQLAWHf1MyMurVOzo6a5slE3nEWRXBfVA2Xw==",
-      "dev": true
+      "integrity": "sha512-zfCTnUjb8y1Zfj7e0JJD6kPMIYGZFsFVhu7FYZyOgzco7cq+qcqQLAWHf1MyMurVOzo6a5slE3nEWRXBfVA2Xw=="
     },
     "encodeurl": {
       "version": "1.0.2",
@@ -39523,8 +39451,7 @@
     "escape-string-regexp": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
-      "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=",
-      "devOptional": true
+      "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ="
     },
     "escodegen": {
       "version": "2.0.0",
@@ -41409,8 +41336,7 @@
     "globals": {
       "version": "11.12.0",
       "resolved": "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz",
-      "integrity": "sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==",
-      "devOptional": true
+      "integrity": "sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA=="
     },
     "globalthis": {
       "version": "1.0.3",
@@ -43352,8 +43278,7 @@
     "jsesc": {
       "version": "2.5.2",
       "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-2.5.2.tgz",
-      "integrity": "sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA==",
-      "devOptional": true
+      "integrity": "sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA=="
     },
     "json-parse-better-errors": {
       "version": "1.0.2",
@@ -46468,8 +46393,7 @@
     "react-is": {
       "version": "17.0.2",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
-      "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==",
-      "devOptional": true
+      "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
     },
     "react-json-view-lite": {
       "version": "0.9.5",
@@ -48182,8 +48106,7 @@
     "shallowequal": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz",
-      "integrity": "sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ==",
-      "dev": true
+      "integrity": "sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ=="
     },
     "shebang-command": {
       "version": "2.0.0",
@@ -48564,8 +48487,7 @@
     "source-map": {
       "version": "0.5.7",
       "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
-      "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=",
-      "devOptional": true
+      "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w="
     },
     "source-map-js": {
       "version": "1.0.2",
@@ -49137,7 +49059,6 @@
       "version": "5.3.11",
       "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-5.3.11.tgz",
       "integrity": "sha512-uuzIIfnVkagcVHv9nE0VPlHPSCmXIUGKfJ42LNjxCCTDTL5sgnJ8Z7GZBq0EnLYGln77tPpEpExt2+qa+cZqSw==",
-      "dev": true,
       "requires": {
         "@babel/helper-module-imports": "^7.0.0",
         "@babel/traverse": "^7.4.5",
@@ -49155,7 +49076,6 @@
           "version": "1.2.1",
           "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.2.1.tgz",
           "integrity": "sha512-61Mf7Ufx4aDxx1xlDeOm8aFFigGHE4z+0sKCa+IHCeZKiyP9RLD0Mmx7m8b9/Cf37f7NAvQOOJAbQQGVr5uERw==",
-          "dev": true,
           "requires": {
             "@emotion/memoize": "^0.8.1"
           }
@@ -49163,20 +49083,17 @@
         "@emotion/memoize": {
           "version": "0.8.1",
           "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.8.1.tgz",
-          "integrity": "sha512-W2P2c/VRW1/1tLox0mVUalvnWXxavmv/Oum2aPsRcoDJuob75FC3Y8FbpfLwUegRcxINtGUMPq0tFCvYNTBXNA==",
-          "dev": true
+          "integrity": "sha512-W2P2c/VRW1/1tLox0mVUalvnWXxavmv/Oum2aPsRcoDJuob75FC3Y8FbpfLwUegRcxINtGUMPq0tFCvYNTBXNA=="
         },
         "has-flag": {
           "version": "3.0.0",
           "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
-          "integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==",
-          "dev": true
+          "integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw=="
         },
         "supports-color": {
           "version": "5.5.0",
           "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
           "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
-          "dev": true,
           "requires": {
             "has-flag": "^3.0.0"
           }
@@ -49831,8 +49748,7 @@
     "to-fast-properties": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz",
-      "integrity": "sha1-3F5pjL0HkmW8c+A3doGk5Og/YW4=",
-      "devOptional": true
+      "integrity": "sha1-3F5pjL0HkmW8c+A3doGk5Og/YW4="
     },
     "to-object-path": {
       "version": "0.3.0",
diff --git a/package.json b/package.json
index 0396f1c52c4..c14eabf7ef3 100644
--- a/package.json
+++ b/package.json
@@ -299,7 +299,6 @@
     "@typescript-eslint/eslint-plugin": "5.51.0",
     "acorn": "8.0.5",
     "babel-loader": "8.2.3",
-    "brave-ui": "github:brave/brave-ui#e4c049880199ac652b8f69610b8b70d1cd6d906f",
     "chalk": "4.1.2",
     "commander": "2.20.3",
     "css-loader": "3.6.0",
@@ -355,6 +354,7 @@
     "webpack-cli": "3.3.12"
   },
   "dependencies": {
+    "@brave/brave-ui": "0.40.4",
     "@brave/leo": "github:brave/leo#ad11c80",
     "@brave/react-virtualized-auto-sizer": "^1.0.4",
     "@brave/wallet-standard-brave": "~0.0.10",
diff --git a/third_party/npm_@brave_brave-ui/README.chromium b/third_party/npm_@brave_brave-ui/README.chromium
new file mode 100644
index 00000000000..00ef1ff0162
--- /dev/null
+++ b/third_party/npm_@brave_brave-ui/README.chromium
@@ -0,0 +1,4 @@
+Name: @brave/brave-ui
+URL: https://github.com/brave/brave-ui
+License: MPL-2.0
+License File: /brave/node_modules/@brave/brave-ui/LICENSE.md
diff --git a/tsconfig.json b/tsconfig.json
index 92471a0f9a0..23a1028a2db 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -23,8 +23,8 @@
     "moduleResolution": "node",
     "baseUrl": ".",
     "paths": {
-      "brave-ui": ["node_modules/brave-ui/src"],
-      "brave-ui/*": ["node_modules/brave-ui/src/*"],
+      "brave-ui": ["node_modules/@brave/brave-ui"],
+      "brave-ui/*": ["node_modules/@brave/brave-ui/*"],
       "gen/*": [
         // This list of paths in the format [configuration]/gen is not used at compile-time
         // since we don't want results from 1 compilation to affect another.