diff --git a/composer.json b/composer.json
index 553eca3c57c..7644c1ed60d 100644
--- a/composer.json
+++ b/composer.json
@@ -45,6 +45,7 @@
     "elvanto/litemoji": "~4.3.0",
     "enshrined/svg-sanitize": "~0.22.0",
     "guzzlehttp/guzzle": "^7.2.0",
+    "inertiajs/inertia-laravel": "^2.0",
     "laravel/framework": "^12.21.0",
     "league/uri": "^7.0",
     "moneyphp/money": "^4.0",
diff --git a/composer.lock b/composer.lock
index 9d706d20718..db27466e776 100644
--- a/composer.lock
+++ b/composer.lock
@@ -4,7 +4,7 @@
         "Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies",
         "This file is @generated automatically"
     ],
-    "content-hash": "9a0f2788594896a1647327e18c04ef9a",
+    "content-hash": "5d948ae3fec1082c4d78c6e607feb328",
     "packages": [
         {
             "name": "bacon/bacon-qr-code",
@@ -2124,6 +2124,76 @@
             ],
             "time": "2025-08-22T14:27:06+00:00"
         },
+        {
+            "name": "inertiajs/inertia-laravel",
+            "version": "v2.0.10",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/inertiajs/inertia-laravel.git",
+                "reference": "07da425d58a3a0e3ace9c296e67bd897a6e47009"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/inertiajs/inertia-laravel/zipball/07da425d58a3a0e3ace9c296e67bd897a6e47009",
+                "reference": "07da425d58a3a0e3ace9c296e67bd897a6e47009",
+                "shasum": ""
+            },
+            "require": {
+                "ext-json": "*",
+                "laravel/framework": "^10.0|^11.0|^12.0",
+                "php": "^8.1.0",
+                "symfony/console": "^6.2|^7.0"
+            },
+            "require-dev": {
+                "guzzlehttp/guzzle": "^7.2",
+                "larastan/larastan": "^3.0",
+                "laravel/pint": "^1.16",
+                "mockery/mockery": "^1.3.3",
+                "orchestra/testbench": "^8.0|^9.2|^10.0",
+                "phpunit/phpunit": "^10.4|^11.5",
+                "roave/security-advisories": "dev-master"
+            },
+            "suggest": {
+                "ext-pcntl": "Recommended when running the Inertia SSR server via the `inertia:start-ssr` artisan command."
+            },
+            "type": "library",
+            "extra": {
+                "laravel": {
+                    "providers": [
+                        "Inertia\\ServiceProvider"
+                    ]
+                }
+            },
+            "autoload": {
+                "files": [
+                    "./helpers.php"
+                ],
+                "psr-4": {
+                    "Inertia\\": "src"
+                }
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Jonathan Reinink",
+                    "email": "jonathan@reinink.ca",
+                    "homepage": "https://reinink.ca"
+                }
+            ],
+            "description": "The Laravel adapter for Inertia.js.",
+            "keywords": [
+                "inertia",
+                "laravel"
+            ],
+            "support": {
+                "issues": "https://github.com/inertiajs/inertia-laravel/issues",
+                "source": "https://github.com/inertiajs/inertia-laravel/tree/v2.0.10"
+            },
+            "time": "2025-09-28T21:21:36+00:00"
+        },
         {
             "name": "laravel/framework",
             "version": "v12.37.0",
diff --git a/package-lock.json b/package-lock.json
index ef3ecd63d05..7f4154c4acd 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,16 +11,18 @@
       "dependencies": {
         "@craftcms/cp": "file:packages/craftcms-cp",
         "@inertiajs/vue3": "^2.2.7",
+        "@vueuse/core": "^14.0.0",
+        "axios": "^1.13.2",
         "laravel-vite-plugin": "^2.0.1",
         "lit": "^3.3.1",
-        "tailwindcss": "^4.1.14",
+        "tailwindcss": "^4.1.16",
         "vue": "^3.5.22"
       },
       "devDependencies": {
         "@craftcms/playwright": "file:packages/craftcms-playwright",
         "@craftcms/webpack": "file:packages/craftcms-webpack",
         "@playwright/test": "^1.52.0",
-        "@tailwindcss/vite": "^4.1.14",
+        "@tailwindcss/vite": "^4.1.16",
         "@total-typescript/tsconfig": "^1.0.4",
         "@vitejs/plugin-vue": "^6.0.1",
         "husky": "^9.1.7",
@@ -44,6 +46,36 @@
         "@awesome.me/kit-ddaed3f5c5": "^1.0.41"
       }
     },
+    "@types/web-bluetooth": {
+      "version": "0.0.21",
+      "resolved": "https://registry.npmjs.org/@types/web-bluetooth/-/web-bluetooth-0.0.21.tgz",
+      "integrity": "sha512-oIQLCGWtcFZy2JW77j9k8nHzAOpqMHLQejDA48XXMWH6tjCQHz5RCFz1bzsmROyL6PUm+LLnUiI4BCn221inxA==",
+      "extraneous": true
+    },
+    "@vueuse/core": {
+      "version": "14.0.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-14.0.0.tgz",
+      "integrity": "sha512-d6tKRWkZE8IQElX2aHBxXOMD478fHIYV+Dzm2y9Ag122ICBpNKtGICiXKOhWU3L1kKdttDD9dCMS4bGP3jhCTQ==",
+      "extraneous": true
+    },
+    "@vueuse/metadata": {
+      "version": "14.0.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-14.0.0.tgz",
+      "integrity": "sha512-6yoGqbJcMldVCevkFiHDBTB1V5Hq+G/haPlGIuaFZHpXC0HADB0EN1ryQAAceiW+ryS3niUwvdFbGiqHqBrfVA==",
+      "extraneous": true
+    },
+    "@vueuse/shared": {
+      "version": "14.0.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-14.0.0.tgz",
+      "integrity": "sha512-mTCA0uczBgurRlwVaQHfG0Ja7UdGe4g9mwffiJmvLiTtp1G4AQyIjej6si/k8c8pUwTfVpNufck+23gXptPAkw==",
+      "extraneous": true
+    },
+    "axios": {
+      "version": "1.13.2",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.13.2.tgz",
+      "integrity": "sha512-VPk9ebNqPcy5lRGuSlKx752IlDatOjT9paPlm8A7yOuW2Fbvp4X3JznJtT4f0GzGLLiWE9W8onz51SqLYwzGaA==",
+      "extraneous": true
+    },
     "node_modules/@adobe/css-tools": {
       "version": "4.4.4",
       "resolved": "https://registry.npmjs.org/@adobe/css-tools/-/css-tools-4.4.4.tgz",
@@ -6628,6 +6660,12 @@
       "integrity": "sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==",
       "license": "MIT"
     },
+    "node_modules/@types/web-bluetooth": {
+      "version": "0.0.21",
+      "resolved": "https://registry.npmjs.org/@types/web-bluetooth/-/web-bluetooth-0.0.21.tgz",
+      "integrity": "sha512-oIQLCGWtcFZy2JW77j9k8nHzAOpqMHLQejDA48XXMWH6tjCQHz5RCFz1bzsmROyL6PUm+LLnUiI4BCn221inxA==",
+      "license": "MIT"
+    },
     "node_modules/@types/whatwg-mimetype": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/@types/whatwg-mimetype/-/whatwg-mimetype-3.0.2.tgz",
@@ -7401,6 +7439,44 @@
       "integrity": "sha512-9cwHL2EsJBdi8NY22pngYYWzkTDhld6fAD6jlaeloNGciNSJL6bLpbxVgXl96X00Jtc6YWQv96YA/0sxex/k1A==",
       "license": "MIT"
     },
+    "node_modules/@vueuse/core": {
+      "version": "14.0.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-14.0.0.tgz",
+      "integrity": "sha512-d6tKRWkZE8IQElX2aHBxXOMD478fHIYV+Dzm2y9Ag122ICBpNKtGICiXKOhWU3L1kKdttDD9dCMS4bGP3jhCTQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/web-bluetooth": "^0.0.21",
+        "@vueuse/metadata": "14.0.0",
+        "@vueuse/shared": "14.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "vue": "^3.5.0"
+      }
+    },
+    "node_modules/@vueuse/metadata": {
+      "version": "14.0.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-14.0.0.tgz",
+      "integrity": "sha512-6yoGqbJcMldVCevkFiHDBTB1V5Hq+G/haPlGIuaFZHpXC0HADB0EN1ryQAAceiW+ryS3niUwvdFbGiqHqBrfVA==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/@vueuse/shared": {
+      "version": "14.0.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-14.0.0.tgz",
+      "integrity": "sha512-mTCA0uczBgurRlwVaQHfG0Ja7UdGe4g9mwffiJmvLiTtp1G4AQyIjej6si/k8c8pUwTfVpNufck+23gXptPAkw==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "vue": "^3.5.0"
+      }
+    },
     "node_modules/@wc-toolkit/storybook-helpers": {
       "version": "9.0.1",
       "resolved": "https://registry.npmjs.org/@wc-toolkit/storybook-helpers/-/storybook-helpers-9.0.1.tgz",
diff --git a/package.json b/package.json
index 3dc60adbb39..d5092e27ea2 100644
--- a/package.json
+++ b/package.json
@@ -27,7 +27,7 @@
     "@craftcms/playwright": "file:packages/craftcms-playwright",
     "@craftcms/webpack": "file:packages/craftcms-webpack",
     "@playwright/test": "^1.52.0",
-    "@tailwindcss/vite": "^4.1.14",
+    "@tailwindcss/vite": "^4.1.16",
     "@total-typescript/tsconfig": "^1.0.4",
     "@vitejs/plugin-vue": "^6.0.1",
     "husky": "^9.1.7",
@@ -50,9 +50,11 @@
   "dependencies": {
     "@craftcms/cp": "file:packages/craftcms-cp",
     "@inertiajs/vue3": "^2.2.7",
+    "@vueuse/core": "^14.0.0",
+    "axios": "^1.13.2",
     "laravel-vite-plugin": "^2.0.1",
     "lit": "^3.3.1",
-    "tailwindcss": "^4.1.14",
+    "tailwindcss": "^4.1.16",
     "vue": "^3.5.22"
   }
 }
diff --git a/packages/craftcms-asset-bundles/bundles/installer/dist/css/install.css b/packages/craftcms-asset-bundles/bundles/installer/dist/css/install.css
deleted file mode 100644
index bb6ef13f30d..00000000000
--- a/packages/craftcms-asset-bundles/bundles/installer/dist/css/install.css
+++ /dev/null
@@ -1,2 +0,0 @@
-body,html{height:100%}body{background:var(--gray-100) url(../images/installer-bg.png) no-repeat 50% 50%;background-size:cover;overflow:hidden}.beginbtncontainer{inset-block-start:50%;margin-block-start:-25px;position:absolute;text-align:center;width:100%}#beginbtn{border-radius:var(--radius-lg);box-shadow:inset 0 1px hsla(0,0%,100%,.2),inset 0 -1px rgba(0,0,0,.133),0 0 0 1px rgba(33,55,112,.4),0 0 1px 2px rgba(33,55,112,.333),0 10px 10px -10px #213770,0 10px 20px -10px #213770;display:inline-block;font-size:19px;height:50px;padding-block:0;padding-inline:24px}#beginbtn:after{margin-block-start:-4px}#install-modal{height:510px;padding:0;width:770px}#install-modal #screens,#install-modal #screens .screen{height:100%;width:100%}#install-modal #screens .screen{background:no-repeat 0 50%;background-size:368px 477px;box-sizing:border-box;padding:35px}#install-modal #screens .screen#db{background-image:url(../images/db.png)}#install-modal #screens .screen#site{background-image:url(../images/site.png)}#install-modal #screens .screen#account{background-image:url(../images/account.png)}#install-modal #screens .screen h1{margin-block-end:35px;position:relative;text-align:center}#install-modal #screens .screen form{float:inline-end;width:50%}#install-modal #screens .screen form .select,#install-modal #screens .screen form .select select{width:100%}#install-modal #dots{inset-block-end:10px;inset-inline-start:0;position:absolute;text-align:center;width:100%}#install-modal #dots>div{border:1px solid var(--border-hairline);border-radius:4px;display:inline-block;height:6px;width:6px}#install-modal #dots>div+div{margin-inline-start:5px}#install-modal #dots>div.sel{background:var(--bg-primary);border-color:var(--border-primary)}.grid{margin-block:35px}.buttons{inset-block-end:35px;inset-inline-end:35px;position:absolute}.buttons .btn{padding-inline-end:10px}.buttons .btn:after{font-family:Craft;speak:never;direction:ltr;-ms-font-feature-settings:"liga","dlig";-o-font-feature-settings:"liga","dlig";font-feature-settings:"liga","dlig";font-variant:normal;font-weight:400;line-height:1;text-rendering:optimizeLegibility;text-transform:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;display:inline-block;font-style:normal;text-align:center;vertical-align:middle;word-wrap:normal!important;font-size:20px;height:20px;line-height:18px;margin-block:-2px 0;margin-inline:4px 0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;width:20px}body.ltr .buttons .btn:after{content:"rarr"}body.rtl .buttons .btn:after{content:"larr"}input.hidden{inset-block-start:100px;position:absolute}#license{overflow-y:scroll;padding:0!important}#license #license-content{padding-block:70px;padding-inline:105px}#license #license-content .license,#license #license-content .license h1{font-family:Menlo,monospace;font-size:13px;line-height:25px}#license #license-content .license h1{font-weight:700}#license #license-content #license-accept{display:flex;justify-content:center;margin-block-start:35px}#installing{align-items:center;display:flex;flex-direction:column;justify-content:center}#installing .pane{background-color:var(--gray-800);color:var(--white);font-family:SFMono-Regular,Consolas,Liberation Mono,Menlo,Courier,monospace;font-size:.9em!important;max-width:40em}#installing .pane code{background-color:transparent;border:0;color:var(--yellow-300);padding:0}#installing #spinner{display:block;margin-block:0;margin-inline:auto}#installing .buttons .btn{float:none;margin:0}
-/*# sourceMappingURL=install.css.map*/
\ No newline at end of file
diff --git a/packages/craftcms-asset-bundles/bundles/installer/dist/css/install.css.map b/packages/craftcms-asset-bundles/bundles/installer/dist/css/install.css.map
deleted file mode 100644
index c6f40a8678e..00000000000
--- a/packages/craftcms-asset-bundles/bundles/installer/dist/css/install.css.map
+++ /dev/null
@@ -1 +0,0 @@
-{"version":3,"file":"css/install.css","mappings":"AAGA,UAEE,YAGF,KAEE,kGACA,CAFA,eAEA,oBAIA,qBACA,yBACA,CAHF,iBACE,CAGA,iBACA,CAFA,UAEA,WAIA,8BACA,CAIA,yLACA,CAPF,oBACE,CACA,cACA,YACA,gBACA,oBAEA,iBAQA,uBACE,gBAKF,YACA,UACA,CAHF,WAGE,yDAKI,WACA,CAHF,UAGE,iCAKA,0BACA,4BACA,CAHA,qBACA,CAFF,YAIE,oCAEA,sCACE,sCAGF,wCACE,oFAIA,yDAGF,kBACE,CADF,iBACE,sCAEA,gBAGF,CAHE,SAGF,kGAKI,oDASR,qBACE,CAVM,kBAUN,iBACA,CADA,UACA,0BAKA,uCAEE,CAJF,iBAEA,CAJA,oBAEA,CAIE,UACA,CADA,SACA,qDAEA,8BAMA,4BACE,CALF,kCAKE,kCACA,oBAON,sBAIA,CAXM,iBAWN,eACA,uBCwPA,qBDrPA,iBACE,aCqHF,aACA,CDtHE,uCC4GF,uCAKA,oCACA,CACA,mBACA,CADA,gBAEA,cAHA,iCACA,CACA,mBACA,CACA,kCAEA,kCAEA,sBACA,iBAEA,CAFA,kBAEA,qBACA,2BACA,CAGA,eD9HI,WACA,kBC6HJ,wCAHA,wBACA,sBACA,qBACA,kBD9HI,UACA,CACA,6BAEA,cACA,8BAEA,cACE,cAGF,uBACE,CADF,iBACE,CAMR,SACE,iBACA,CAFF,mBAEE,2BAIA,kBACA,qBAEA,0EAKI,2DAEE,uCAEA,gBAGF,0CAKF,mCACE,CALE,uBAKF,aAEA,kBAKN,CAPM,YACA,sBACA,CAKN,sBAEE,mBCOA,gCAEA,CAFA,mBDLA,2ECKA,0BDNA,cCQA,wBDCE,4BACE,CAHF,QAEA,CAFA,wBAEA,SACE,sBAEA,aACA,kCAIJ,2BAEE,UACA,CADA,QACA","sources":["webpack:///./install.scss","webpack:///../../../../craftcms-sass/_mixins.scss"],"sourcesContent":["@charset \"UTF-8\";\n@import '@craftcms/sass/mixins';\n\nhtml,\nbody {\n  height: 100%;\n}\n\nbody {\n  overflow: hidden;\n  background: var(--gray-100) url('images/installer-bg.png') no-repeat 50% 50%;\n  background-size: cover;\n}\n\n.beginbtncontainer {\n  position: absolute;\n  inset-block-start: 50%;\n  margin-block-start: -25px;\n  width: 100%;\n  text-align: center;\n}\n\n#beginbtn {\n  display: inline-block;\n  border-radius: var(--radius-lg);\n  font-size: 19px;\n  height: 50px;\n  padding-block: 0;\n  padding-inline: 24px;\n  box-shadow:\n    inset 0 1px #fff3,\n    inset 0 -1px #0002,\n    0 0 0 1px #21377066,\n    0 0 1px 2px #21377055,\n    0 10px 10px -10px #213770,\n    0 10px 20px -10px #213770;\n\n  &::after {\n    margin-block-start: -4px;\n  }\n}\n\n#install-modal {\n  width: 770px;\n  height: 510px;\n  padding: 0;\n\n  #screens {\n    &,\n    .screen {\n      width: 100%;\n      height: 100%;\n    }\n\n    .screen {\n      padding: 35px;\n      box-sizing: border-box;\n      background: no-repeat 0 50%;\n      background-size: 368px 477px;\n\n      &#db {\n        background-image: url('./images/db.png');\n      }\n\n      &#site {\n        background-image: url('./images/site.png');\n      }\n\n      &#account {\n        background-image: url('./images/account.png');\n      }\n\n      h1 {\n        margin-block-end: 35px;\n        text-align: center;\n        position: relative;\n      }\n\n      form {\n        width: 50%;\n        float: inline-end;\n\n        .select {\n          &,\n          select {\n            width: 100%;\n          }\n        }\n      }\n    }\n  }\n\n  #dots {\n    position: absolute;\n    inset-block-end: 10px;\n    inset-inline-start: 0;\n    width: 100%;\n    text-align: center;\n\n    & > div {\n      display: inline-block;\n      border-radius: 4px;\n      border: 1px solid var(--border-hairline);\n      width: 6px;\n      height: 6px;\n\n      & + div {\n        margin-inline-start: 5px;\n      }\n\n      &.sel {\n        border-color: var(--border-primary);\n        background: var(--bg-primary);\n      }\n    }\n  }\n}\n\n.grid {\n  margin-block: 35px;\n}\n\n.buttons {\n  position: absolute;\n  inset-block-end: 35px;\n  @include right(35px);\n\n  .btn {\n    padding-inline-end: 10px;\n\n    &::after {\n      @include icon;\n      margin-inline: 4px 0;\n      margin-block: -2px 0;\n      font-size: 20px;\n      width: 20px;\n      height: 20px;\n      line-height: 18px;\n\n      body.ltr & {\n        content: 'rarr';\n      }\n\n      body.rtl & {\n        content: 'larr';\n      }\n    }\n  }\n}\n\ninput.hidden {\n  position: absolute;\n  inset-block-start: 100px;\n}\n\n#license {\n  padding: 0 !important;\n  overflow-y: scroll;\n\n  #license-content {\n    padding-block: 70px;\n    padding-inline: 105px;\n\n    .license {\n      &,\n      h1 {\n        font-family: Menlo, monospace;\n        font-size: 13px;\n        line-height: 25px;\n      }\n\n      h1 {\n        font-weight: bold;\n      }\n    }\n\n    #license-accept {\n      margin-block-start: 35px;\n      display: flex;\n      justify-content: center;\n    }\n  }\n}\n\n#installing {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n\n  .pane {\n    max-width: 40em;\n    @include fixed-width-font;\n    color: var(--white);\n    background-color: var(--gray-800);\n\n    code {\n      color: var(--yellow-300);\n      border: 0;\n      padding: 0;\n      background-color: transparent;\n    }\n  }\n\n  #spinner {\n    display: block;\n    margin-block: 0;\n    margin-inline: auto;\n  }\n\n  .buttons {\n    .btn {\n      margin: 0;\n      float: none;\n    }\n  }\n}\n","@use 'sass:color';\n@use 'sass:list';\n@use 'sass:string';\n$white: #fff;\n$black: #000;\n\n$grey050: hsl(212, 60%, 97%);\n$grey100: hsl(212, 50%, 93%);\n$grey200: hsl(212, 30%, 85%);\n$grey300: hsl(211, 13%, 65%);\n$grey350: hsl(211, 11%, 59%);\n$grey400: hsl(210, 10%, 53%);\n$grey500: hsl(211, 12%, 43%);\n$grey550: hsl(210, 13%, 40%);\n$grey600: hsl(209, 14%, 37%);\n$grey700: hsl(209, 18%, 30%);\n$grey800: hsl(209, 20%, 25%);\n$grey900: hsl(210, 24%, 16%);\n$grey1000: hsl(210, 24%, 10%);\n\n$red050: #fef2f2;\n$red100: #fee2e2;\n$red200: #fecaca;\n$red300: #fca5a5;\n$red400: #f87171;\n$red500: #ef4444;\n$red600: #dc2626;\n$red700: #b91c1c;\n$red800: #991b1b;\n$red900: #7f1d1d;\n\n$orange050: #fff7ed;\n$orange100: #ffedd5;\n$orange200: #fed7aa;\n$orange300: #fdba74;\n$orange400: #fb923c;\n$orange500: #f97316;\n$orange600: #ea580c;\n$orange700: #c2410c;\n$orange800: #9a3412;\n$orange900: #7c2d12;\n\n$yellow050: #fefce8;\n$yellow100: #fef9c3;\n$yellow200: #fef08a;\n$yellow300: #fde047;\n$yellow400: #facc15;\n$yellow500: #eab308;\n$yellow600: #ca8a04;\n$yellow700: #a16207;\n$yellow800: #854d0e;\n$yellow900: #713f12;\n\n$green050: #f0fdf4;\n$green100: #dcfce7;\n$green200: #bbf7d0;\n$green300: #86efac;\n$green400: #4ade80;\n$green500: #22c55e;\n$green600: #16a34a;\n$green700: #15803d;\n$green800: #166534;\n$green900: #14532d;\n\n$teal050: #f0fdfa;\n$teal100: #ccfbf1;\n$teal200: #99f6e4;\n$teal300: #5eead4;\n$teal400: #2dd4bf;\n$teal500: #14b8a6;\n$teal550: #11a697;\n$teal600: #0d9488;\n$teal700: #0f766e;\n$teal800: #115e59;\n$teal900: #134e4a;\n\n$cyan050: #ecfeff;\n$cyan100: #cffafe;\n$cyan200: #a5f3fc;\n$cyan300: #67e8f9;\n$cyan400: #22d3ee;\n$cyan500: #06b6d4;\n$cyan600: #0891b2;\n$cyan700: #0e7490;\n$cyan800: #155e75;\n$cyan900: #164e63;\n\n$blue050: #eff6ff;\n$blue100: #dbeafe;\n$blue200: #bfdbfe;\n$blue300: #93c5fd;\n$blue400: #60a5fa;\n$blue500: #3b82f6;\n$blue600: #2563eb;\n$blue700: #1d4ed8;\n$blue800: #1e40af;\n$blue900: #1e3a8a;\n\n$violet050: #f5f3ff;\n$violet100: #ede9fe;\n$violet200: #ddd6fe;\n$violet300: #c4b5fd;\n$violet400: #a78bfa;\n$violet500: #8b5cf6;\n$violet600: #7c3aed;\n$violet700: #6d28d9;\n$violet800: #5b21b6;\n$violet900: #4c1d95;\n\n$pink050: #fdf2f8;\n$pink100: #fce7f3;\n$pink200: #fbcfe8;\n$pink300: #f9a8d4;\n$pink400: #f472b6;\n$pink500: #ec4899;\n$pink600: #db2777;\n$pink700: #be185d;\n$pink800: #9d174d;\n$pink900: #831843;\n\n// submit button colors\n$primaryColor: $red600;\n$secondaryColor: $grey500;\n\n$inputColor: hsl(212, 25%, 50%);\n\n// text colors\n$textColor: $grey700;\n$mediumDarkTextColor: $grey550;\n$mediumTextColor: $grey550;\n$lightTextColor: $grey500;\n$linkColor: #1f5fea;\n\n// menu colors\n$menuOptionColor: $textColor;\n$menuOptionActiveColor: $textColor;\n$menuOptionActiveBackgroundColor: $grey050;\n\n// hairline colors\n$hairlineColor: color.adjust($grey800, $alpha: -0.9);\n$mediumHairlineColor: color.adjust($grey600, $alpha: -0.75);\n$darkHairlineColor: color.adjust($grey400, $alpha: -0.5);\n\n// focus colors\n$lightFocusColor: $blue300;\n$mediumFocusColor: $blue500;\n$darkFocusColor: #0f74b1;\n\n// focus rings\n$lightFocusRing:\n  0 0 0 1px $lightFocusColor,\n  0 0 0 3px color.adjust($lightFocusColor, $alpha: -0.3);\n$mediumFocusRing:\n  0 0 0 1px $mediumFocusColor,\n  0 0 0 3px color.adjust($mediumFocusColor, $alpha: -0.3);\n$darkFocusRing:\n  0 0 0 1px $darkFocusColor,\n  0 0 0 3px color.adjust($darkFocusColor, $alpha: -0.3);\n\n// selection colors\n$lightSelColor: $grey200;\n$darkSelColor: $grey500;\n\n// alert/notice colors\n$errorColor: $red600;\n$warningColor: $yellow800;\n$successColor: $teal500;\n$noticeColor: $blue800;\n\n// UI element styles\n$smallBorderRadius: 3px;\n$mediumBorderRadius: 4px;\n$largeBorderRadius: 5px;\n\n$menuBorderRadius: $mediumBorderRadius;\n\n@mixin sans-serif-font {\n  font-family:\n    system-ui,\n    BlinkMacSystemFont,\n    -apple-system,\n    'Segoe UI',\n    'Roboto',\n    'Oxygen',\n    'Ubuntu',\n    'Cantarell',\n    'Fira Sans',\n    'Droid Sans',\n    'Helvetica Neue',\n    sans-serif;\n}\n\n@mixin fixed-width-font($size: 0.9em) {\n  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier,\n    monospace;\n  font-size: $size !important;\n}\n\n@function toRem($values...) {\n  @warn \"torem mixin is deprecated. Use calc($value / 16 * 1rem) instead.\";\n  $max: list.length($values);\n  $remValues: '';\n\n  @for $i from 1 through $max {\n    $remValues: #{$remValues + calc(list.nth($values, $i) / 16)}rem;\n\n    @if $i < $max {\n      $remValues: #{$remValues + ' '};\n    }\n  }\n\n  @return $remValues;\n}\n\n@mixin fontSize($size) {\n  @warn \"fontsize mixin is deprecated. Use CSS values instead.\";\n  font-size: toRem($size);\n}\n\n// Other\n\n@mixin svg-mask($color) {\n  rect,\n  circle,\n  ellipse,\n  line,\n  polyline,\n  polygon,\n  path,\n  text {\n    fill: $color;\n    stroke-width: 0;\n  }\n}\n\n@mixin icon {\n  font-family: 'Craft';\n  speak: never;\n  -webkit-font-feature-settings: 'liga', 'dlig';\n  -moz-font-feature-settings: 'liga=1, dlig=1';\n  -moz-font-feature-settings: 'liga', 'dlig';\n  -ms-font-feature-settings: 'liga', 'dlig';\n  -o-font-feature-settings: 'liga', 'dlig';\n  font-feature-settings: 'liga', 'dlig';\n  text-rendering: optimizeLegibility;\n  font-weight: normal;\n  font-variant: normal;\n  text-transform: none;\n  line-height: 1;\n  direction: ltr; // Fixes a rendering issue in Chrome/Win\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n\n  display: inline-block;\n  text-align: center;\n  font-style: normal;\n  vertical-align: middle;\n  word-wrap: normal !important;\n  user-select: none;\n}\n\n@mixin angle($dir: down, $color: currentColor, $width: calc(2rem / 16)) {\n  display: block;\n  content: '';\n  font-size: 0;\n  width: calc(7rem / 16);\n  height: calc(7rem / 16);\n  border: solid $color;\n  border-width: 0 $width $width 0;\n  opacity: 0.8;\n  position: relative;\n\n  @if $dir == up {\n    transform: rotate(225deg);\n    inset-block-start: 2px;\n  } @else if $dir == down {\n    transform: rotate(45deg);\n  } @else if $dir == left {\n    body.ltr & {\n      transform: rotate(135deg);\n    }\n    body.rtl & {\n      transform: rotate(-45deg);\n    }\n  } @else if $dir == right {\n    body.ltr & {\n      transform: rotate(-45deg);\n    }\n    body.rtl & {\n      transform: rotate(135deg);\n    }\n  }\n}\n\n@mixin clearafter {\n  content: '';\n  display: block;\n  height: 0;\n  clear: both;\n  visibility: hidden;\n}\n\n@mixin shadow {\n  box-shadow: 0 1px 5px -1px color.adjust($grey900, $alpha: -0.8);\n}\n\n@mixin pane {\n  background: var(--pane-bg);\n  box-shadow: var(--pane-shadow);\n\n  &:focus {\n    box-shadow: var(--focus-ring);\n  }\n}\n\n@mixin modal {\n  border: var(--modal-border);\n  border-radius: var(--modal-border-radius);\n  background-color: var(--modal-bg);\n  box-shadow: var(--modal-shadow) !important;\n}\n\n@mixin light-on-dark-text() {\n  // Make light on dark text sharp on Macs\n  // (sub-pixel antialiasing looks too bold/blurry with light text on dark background)\n  -moz-osx-font-smoothing: grayscale;\n  -webkit-font-smoothing: antialiased;\n}\n\n@mixin light-focus-ring() {\n  @warn \"light-focus-ring mixin is deprecated. Use CSS variables instead.\";\n  --focus-ring: var(--focus-ring-light);\n}\n\n@mixin dark-btn-light-bg-focus-ring() {\n  @warn \"dark-btn-light-bg-focus-ring is deprecated. Use CSS variables instead.\";\n  --focus-ring: var(--focus-ring-outset);\n}\n\n@mixin custom-color-focus-ring($primary, $secondary: null) {\n  @warn \"custom-color-focus-ring mixin is deprecated. Use CSS variables instead.\";\n\n  @if $secondary != null {\n    --focus-ring: 0 0 0 1px #{$primary}, 0 0 0 3px #{$secondary};\n  } @else {\n    --focus-ring: 0 0 0 3px #{$primary};\n  }\n}\n\n@mixin two-color-focus-ring($light-button: true) {\n  // Creates a two-color focus ring, with a white\n  // If button is light, the dark box shadow is adjacent to the button\n  // Else the light box shadow is adjacent to the button\n  --light-color: var(--white);\n  --dark-color: var(--gray-800);\n\n  @if $light-button {\n    --focus-ring: 0 0 0 3px var(--dark-color), 0 0 0 6px var(--light-color);\n  } @else {\n    --focus-ring: 0 0 0 3px var(--light-color), 0 0 0 6px var(--dark-color);\n  }\n}\n\n// RTL stuff\n\n@mixin left($left) {\n  @warn \"left mixin is deprecated. Use inset-inline-start instead.\";\n  inset-inline-start: $left;\n}\n\n@mixin right($right) {\n  @warn \"right mixin is deprecated. Use inset-inline-end instead.\";\n  inset-inline-end: $right;\n}\n\n@mixin alignleft {\n  @warn \"alignleft mixin is deprecated. Use text-align: start instead.\";\n  text-align: start;\n}\n\n@mixin alignright {\n  @warn \"alignright mixin is deprecated. Use text-align: end instead.\";\n  text-align: end;\n}\n\n@mixin border-left($params...) {\n  @warn \"border-left mixin is deprecated. Use border-inline-start instead.\";\n  border-inline-start: $params;\n}\n\n@mixin border-right($params...) {\n  @warn \"border-right mixin is deprecated. Use border-inline-end instead.\";\n  border-inline-end: $params;\n}\n\n@mixin border-left-width($param) {\n  @warn \"border-left-width mixin is deprecated. Use border-inline-start-width instead.\";\n  border-inline-start-width: $param;\n}\n\n@mixin border-right-width($param) {\n  @warn \"border-right-width mixin is deprecated. Use border-inline-end-width instead.\";\n  border-inline-end-width: $param;\n}\n\n@mixin border-radius($tl, $tr, $br, $bl) {\n  @warn \"border-radius mixin is deprecated. Use logical border properties instead.\";\n  border-start-start-radius: $tl;\n  border-start-end-radius: $tr;\n  border-end-end-radius: $br;\n  border-end-start-radius: $bl;\n}\n\n@mixin border-top-left-radius($params...) {\n  @warn \"border-top-left-radius mixin is deprecated. Use border-start-start-radius instead.\";\n  border-start-start-radius: $params;\n}\n\n@mixin border-top-right-radius($params...) {\n  @warn \"border-top-right-radius mixin is deprecated. Use border-end-start-radius instead.\";\n  border-start-end-radius: $params;\n}\n\n@mixin border-bottom-left-radius($params...) {\n  @warn \"border-bottom-left-radius mixin is deprecated. Use border-start-end-radius instead.\";\n  border-start-end-radius: $params;\n}\n\n@mixin border-bottom-right-radius($params...) {\n  @warn \"border-bottom-right-radius mixin is deprecated. Use border-end-end-radius instead.\";\n  border-end-end-radius: $params;\n}\n\n@mixin floatleft {\n  @warn \"floatleft mixin is deprecated. Use float: inline-start instead.\";\n  float: inline-start;\n}\n\n@mixin floatright {\n  @warn \"floatright mixin is deprecated. Use float: inline-end instead.\";\n  float: inline-end;\n}\n\n@mixin margin($t, $r, $b, $l, $important: '') {\n  @warn \"margin mixin is deprecated. Use logical margin properties instead.\";\n  margin-block: $t $b string.unquote($important);\n  margin-inline: $l $r string.unquote($important);\n}\n\n@mixin margin-left($margin...) {\n  @warn \"margin-left mixin is deprecated. Use margin-inline-start instead.\";\n  margin-inline-start: $margin;\n}\n\n@mixin margin-right($margin...) {\n  @warn \"margin-left mixin is deprecated. Use margin-inline-end instead.\";\n  margin-inline-end: $margin;\n}\n\n@mixin padding($t, $r, $b, $l, $important: '') {\n  @warn \"padding mixin is deprecated. Use padding logical properties instead.\";\n  padding-block: $t $b string.unquote($important);\n  padding-inline: $l $r string.unquote($important);\n}\n\n@mixin padding-left($padding...) {\n  @warn \"padding-left mixin is deprecated. Use padding-inline-start properties instead.\";\n  padding-inline-start: $padding;\n}\n\n@mixin padding-right($padding...) {\n  @warn \"padding-right mixin is deprecated. Use padding-inline-end properties instead.\";\n  padding-inline-end: $padding;\n}\n\n// Misc\n\n@mixin dark-inputs {\n  @include placeholder-styles($grey400);\n\n  .btn,\n  .select:not(.selectize) select {\n    background-color: $grey200;\n\n    &:focus,\n    &:hover {\n      background-color: color.adjust($grey200, $lightness: -5%);\n    }\n\n    &:active,\n    &.active,\n    &[aria-expanded='true'] {\n      background-color: color.adjust($grey200, $lightness: -10%);\n    }\n  }\n\n  .text {\n    background-color: $grey200;\n\n    &:focus {\n      background-color: color.adjust($grey200, $lightness: -5%);\n    }\n  }\n}\n\n@mixin header-btn {\n  width: calc(30rem / 16);\n  height: calc(30rem / 16);\n  min-height: auto;\n  padding-left: 0;\n  padding-right: 0;\n\n  &:not(:hover):not(:active):not(.active):not([aria-expanded='true']) {\n    background-color: transparent;\n  }\n  &:not(:active):not(.active):not([aria-expanded='true']):hover {\n    background-color: color.adjust($grey300, $alpha: -0.85);\n  }\n}\n\n@mixin h6-styles {\n  margin: 14px 0 3px;\n  font-size: 11px;\n  line-height: 1.2;\n  color: $lightTextColor;\n  text-transform: uppercase;\n}\n\n@mixin token-styles {\n  display: inline-block;\n  border-radius: $smallBorderRadius;\n  padding: 3px 7px;\n  font-size: 12px;\n  line-height: 14px;\n  color: $textColor;\n  background-color: $grey100;\n}\n\n@mixin active-token-styles {\n  background-color: $grey200;\n}\n\n@mixin menu-styles {\n  z-index: 100;\n  border-radius: $menuBorderRadius;\n  padding: 0 14px;\n  overflow: auto;\n  background: $white;\n  user-select: none;\n  box-shadow:\n    0 0 0 1px color.adjust($grey900, $alpha: -0.9),\n    0 5px 20px color.adjust($grey900, $alpha: -0.75);\n}\n\n@mixin menu-item-styles {\n  margin: 0 -14px;\n  padding: 10px 14px;\n  color: $menuOptionColor;\n  text-decoration: none;\n  white-space: nowrap;\n}\n\n@mixin menu-item-active-styles {\n  color: var(--white) !important;\n  --fg-subtle: rgba(255, 255, 255, 0.8);\n  --light-text-color: rgba(255, 255, 255, 0.8);\n  background-color: var(--bg-selection-dark);\n\n  svg {\n    @include svg-mask(var(--white));\n  }\n}\n\n@mixin disclosure-link-hover-styles {\n  color: $menuOptionColor;\n  background-color: $grey050;\n}\n\n@mixin input-styles {\n  border-radius: var(--input-border-radius);\n  border: var(--input-border);\n  background: var(--input-bg);\n  background-clip: padding-box;\n}\n\n@mixin input-focused-styles {\n  box-shadow: var(--focus-ring);\n}\n\n@mixin placeholder-styles($color) {\n  input::-webkit-input-placeholder,\n  textarea::-webkit-input-placeholder {\n    color: $color;\n  }\n\n  input:-ms-input-placeholder,\n  textarea:-ms-input-placeholder {\n    color: $color;\n  }\n\n  input::-ms-input-placeholder,\n  textarea::-ms-input-placeholder {\n    color: $color;\n  }\n\n  input:-moz-placeholder,\n  textarea:-moz-placeholder {\n    color: $color;\n  }\n\n  input::-moz-placeholder,\n  textarea::-moz-placeholder {\n    color: $color;\n  }\n\n  input::placeholder,\n  textarea::placeholder {\n    color: $color;\n  }\n}\n\n@mixin select-styles {\n  position: relative;\n  border-radius: $largeBorderRadius;\n  white-space: nowrap;\n}\n\n@mixin select-container-styles {\n  max-width: 100%;\n  position: relative;\n  :not(.flex) > & {\n    display: inline-block;\n  }\n}\n\n@mixin select-arrow-styles {\n  @include angle;\n  position: absolute;\n  z-index: 1;\n  inset-block-start: calc(50% - 5px);\n  inset-inline-end: 9px;\n  user-select: none;\n  pointer-events: none;\n  color: var(--ui-control-color);\n}\n\n@mixin select-input-styles {\n  display: block;\n  position: relative;\n  max-width: 100%;\n  border: none;\n  padding-block: 7px;\n  padding-inline: 10px 22px;\n  font-size: 14px;\n  line-height: 20px;\n  color: $textColor;\n  background-color: var(--button-bg);\n  appearance: none;\n  // from https://stackoverflow.com/a/15933790/1688568\n  &::-ms-expand {\n    display: none;\n  }\n}\n\n@mixin select-input-fullwidth-styles {\n  min-width: 100%;\n}\n\n@mixin select-input-hovered-styles {\n  outline-color: transparent;\n  background-color: var(--button-bg--hover);\n}\n\n@mixin select-input-focused-styles {\n  outline-color: transparent;\n  box-shadow: var(--focus-ring);\n}\n\n@mixin touch-target {\n  height: var(--touch-target-size);\n  width: var(--touch-target-size);\n}\n\n// https://tailwindcss.com/docs/screen-readers#undoing-screen-reader-only-elements\n@mixin visually-hidden {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  white-space: nowrap;\n  border-width: 0;\n}\n\n@mixin not-visually-hidden {\n  position: static;\n  width: auto;\n  height: auto;\n  padding: 0;\n  margin: 0;\n  overflow: visible;\n  clip: auto;\n  white-space: normal;\n}\n\n@mixin readable {\n  font-size: 16px;\n  line-height: 22px;\n\n  h1,\n  .h1,\n  h2,\n  .h2,\n  h3,\n  .h3,\n  h4,\n  .h4,\n  h5,\n  .h5,\n  h6,\n  .h6 {\n    margin: 24px 0 16px;\n    font-weight: 600;\n  }\n\n  h1,\n  .h1 {\n    font-size: 32px;\n    line-height: 40px;\n    color: #000;\n  }\n\n  h2,\n  .h2 {\n    font-size: 24px;\n    line-height: 30px;\n  }\n\n  h3,\n  .h3 {\n    font-size: 20px;\n    line-height: 24px;\n  }\n\n  h4,\n  .h4 {\n    font-size: 16px;\n    line-height: 20px;\n  }\n\n  h5,\n  .h5 {\n    font-size: 14px;\n    line-height: 18px;\n  }\n\n  h6,\n  .h6 {\n    font-size: 13.6px;\n    line-height: 17px;\n    color: $mediumTextColor;\n  }\n\n  ul,\n  ol {\n    margin: 1em 0;\n    padding-inline-start: 2em;\n  }\n\n  ul li {\n    list-style-type: disc;\n  }\n\n  li + li {\n    margin-top: 0.25em;\n  }\n\n  .tip-dismiss-btn {\n    position: absolute;\n    top: 12px;\n    inset-inline-end: 12px;\n\n    & + p {\n      margin-top: 0;\n    }\n  }\n\n  blockquote {\n    margin: 16px 0;\n\n    &:not(.note) {\n      padding: 0 16px;\n      color: $mediumTextColor;\n      border-inline-start: 4px solid $hairlineColor;\n    }\n\n    &.note {\n      position: relative;\n      border-radius: 4px;\n      padding: 1em;\n      padding-inline-start: 50px;\n      border: 1px solid;\n\n      &.dismissible {\n        padding-inline-end: 36px;\n      }\n\n      &:not(.tip):not(.warning) {\n        border-color: $errorColor;\n        color: #bf503f;\n\n        &:before {\n          content: 'alert';\n          color: $errorColor;\n        }\n      }\n\n      &.tip {\n        border-color: $linkColor;\n        color: $linkColor;\n\n        &:before {\n          content: 'lightbulb';\n          color: $linkColor;\n        }\n      }\n\n      &.warning {\n        border-color: $warningColor;\n        color: #cf783a;\n\n        &:before {\n          content: 'alert';\n          color: $warningColor;\n        }\n      }\n\n      &:before {\n        @include icon;\n        opacity: 1;\n        position: absolute;\n        top: 15px;\n        inset-inline-start: 16px;\n        font-size: 24px;\n        width: 24px;\n      }\n\n      a[href] {\n        color: currentColor;\n        text-decoration: underline;\n      }\n    }\n  }\n\n  .go:after {\n    font-size: 14px;\n  }\n}\n\n@mixin checkered-bg($size) {\n  // h/t https://gist.github.com/dfrankland/f6fed3e3ccc42e3de482b324126f9542\n  $halfSize: $size * 0.5;\n  background-image: linear-gradient(\n      45deg,\n      #{color.adjust($grey300, $alpha: -0.75)} 25%,\n      transparent 25%\n    ),\n    linear-gradient(\n      135deg,\n      #{color.adjust($grey300, $alpha: -0.75)} 25%,\n      transparent 25%\n    ),\n    linear-gradient(\n      45deg,\n      transparent 75%,\n      #{color.adjust($grey300, $alpha: -0.75)} 75%\n    ),\n    linear-gradient(\n      135deg,\n      transparent 75%,\n      #{color.adjust($grey300, $alpha: -0.75)} 75%\n    );\n  background-size: $size $size;\n  background-position:\n    0 0,\n    $halfSize 0,\n    $halfSize -#{$halfSize},\n    0 $halfSize;\n}\n"],"names":[],"sourceRoot":""}
\ No newline at end of file
diff --git a/packages/craftcms-asset-bundles/bundles/installer/dist/install.js b/packages/craftcms-asset-bundles/bundles/installer/dist/install.js
deleted file mode 100644
index 8e5636856cb..00000000000
--- a/packages/craftcms-asset-bundles/bundles/installer/dist/install.js
+++ /dev/null
@@ -1,2 +0,0 @@
-!function(){var e={54:function(e,t,n){"use strict";function r(e,t){for(var n=[],r={},s=0;s<t.length;s++){var i=t[s],a=i[0],o={id:e+":"+s,css:i[1],media:i[2],sourceMap:i[3]};r[a]?r[a].parts.push(o):n.push(r[a]={id:a,parts:[o]})}return n}n.d(t,{A:function(){return p}});var s="undefined"!=typeof document;if("undefined"!=typeof DEBUG&&DEBUG&&!s)throw new Error("vue-style-loader cannot be used in a non-browser environment. Use { target: 'node' } in your Webpack config to indicate a server-rendering environment.");var i={},a=s&&(document.head||document.getElementsByTagName("head")[0]),o=null,l=0,d=!1,u=function(){},c=null,h="data-vue-ssr-id",f="undefined"!=typeof navigator&&/msie [6-9]\b/.test(navigator.userAgent.toLowerCase());function p(e,t,n,s){d=n,c=s||{};var a=r(e,t);return v(a),function(t){for(var n=[],s=0;s<a.length;s++){var o=a[s];(l=i[o.id]).refs--,n.push(l)}for(t?v(a=r(e,t)):a=[],s=0;s<n.length;s++){var l;if(0===(l=n[s]).refs){for(var d=0;d<l.parts.length;d++)l.parts[d]();delete i[l.id]}}}}function v(e){for(var t=0;t<e.length;t++){var n=e[t],r=i[n.id];if(r){r.refs++;for(var s=0;s<r.parts.length;s++)r.parts[s](n.parts[s]);for(;s<n.parts.length;s++)r.parts.push(m(n.parts[s]));r.parts.length>n.parts.length&&(r.parts.length=n.parts.length)}else{var a=[];for(s=0;s<n.parts.length;s++)a.push(m(n.parts[s]));i[n.id]={id:n.id,refs:1,parts:a}}}}function g(){var e=document.createElement("style");return e.type="text/css",a.appendChild(e),e}function m(e){var t,n,r=document.querySelector("style["+h+'~="'+e.id+'"]');if(r){if(d)return u;r.parentNode.removeChild(r)}if(f){var s=l++;r=o||(o=g()),t=S.bind(null,r,s,!1),n=S.bind(null,r,s,!0)}else r=g(),t=C.bind(null,r),n=function(){r.parentNode.removeChild(r)};return t(e),function(r){if(r){if(r.css===e.css&&r.media===e.media&&r.sourceMap===e.sourceMap)return;t(e=r)}else n()}}var $,b=($=[],function(e,t){return $[e]=t,$.filter(Boolean).join("\n")});function S(e,t,n,r){var s=n?"":r.css;if(e.styleSheet)e.styleSheet.cssText=b(t,s);else{var i=document.createTextNode(s),a=e.childNodes;a[t]&&e.removeChild(a[t]),a.length?e.insertBefore(i,a[t]):e.appendChild(i)}}function C(e,t){var n=t.css,r=t.media,s=t.sourceMap;if(r&&e.setAttribute("media",r),c.ssrId&&e.setAttribute(h,t.id),s&&(n+="\n/*# sourceURL="+s.sources[0]+" */",n+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(s))))+" */"),e.styleSheet)e.styleSheet.cssText=n;else{for(;e.firstChild;)e.removeChild(e.firstChild);e.appendChild(document.createTextNode(n))}}},188:function(e,t,n){var r=n(395);r.__esModule&&(r=r.default),"string"==typeof r&&(r=[[e.id,r,""]]),r.locals&&(e.exports=r.locals),(0,n(54).A)("6dd750ae",r,!0,{})},395:function(){}},t={};function n(r){var s=t[r];if(void 0!==s)return s.exports;var i=t[r]={id:r,exports:{}};return e[r](i,i.exports,n),i.exports}n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,{a:t}),t},n.d=function(e,t){for(var r in t)n.o(t,r)&&!n.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:t[r]})},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},function(){"use strict";var e;n(188),e=jQuery,Craft.Installer=Garnish.Base.extend({$bg:null,$screens:null,$dots:null,$currentScreen:null,$currentDot:null,$dbDriverInput:null,$dbPortInput:null,modal:null,currentScreen:null,loading:!1,init:function(){this.$bg=e("#bg"),this.$screens=e("#screens").children(),this.$dbDriverInput=e("#db-driver"),this.$dbPortInput=e("#db-port"),this.updateDbPortInput(),this.addListener(this.$screens.find("form"),"submit","handleScreenSubmit"),this.addListener(this.$screens.find(".btn.submit"),"activate","handleScreenSubmit"),this.addListener(e("#beginbtn"),"activate","showModal"),this.addListener(this.$dbDriverInput,"change","updateDbPortInput"),new Craft.PasswordInput("#account-password")},showModal:function(){this.modal?this.modal.show():(this.modal=new Garnish.Modal(e("#install-modal").removeClass("hidden"),{hideOnEsc:!1,shadeClass:""}),this.gotoScreen(1))},updateDbPortInput:function(){var e=this.$dbDriverInput.val(),t=this.$dbPortInput.val(),n=Craft.Installer.defaultDbPorts[e];this.$dbPortInput.attr("placeholder",n),t==n&&this.$dbPortInput.val("")},handleScreenSubmit:function(e){e.preventDefault();var t=this.getScreenInputNames(this.$currentScreen);t?this.validate(this.$currentScreen.attr("id"),t):this.gotoNextScreen()},getScreenInputNames:function(e){var t=e.attr("data-inputs");return t?t.split(","):null},getInputData:function(t,n,r){for(var s={},i=0;i<n.length;i++){var a=n[i],o=e("#"+t+"-"+a);s[(r?t+"-":"")+a]=Garnish.getInputPostVal(o)}return s},showInstallScreen:function(){for(var t,n,r=this,s={},i=1;i<this.$screens.length-1;i++)t=this.$screens.eq(i),n=this.getScreenInputNames(t),e.extend(s,this.getInputData(t.attr("id"),n,!0));Craft.sendActionRequest("POST","install/install",{data:s}).then((function(e){return r.allDone(e)})).catch((function(e){return r.allDone(e)}))},allDone:function(t){e("#spinner").remove();var n=this.$currentScreen.find("h1:first");if(200===t.status)n.text(Craft.t("app","Craft is installed! 🎉")),setTimeout((function(){window.location.href=Craft.getUrl(postCpLoginRedirect)}),1e3);else{var r;n.text("Install failed 😞");var s,i,a=null==t||null===(r=t.response)||void 0===r||null===(r=r.data)||void 0===r?void 0:r.messageHtml;a?e("<div/>",{class:"pane",html:a}).insertAfter(n):e("<p/>",{text:null!==(s=null==t||null===(i=t.response)||void 0===i||null===(i=i.data)||void 0===i?void 0:i.message)&&void 0!==s?s:"Please check your logs for more info."}).insertAfter(n)}},gotoNextScreen:function(){this.gotoScreen(this.currentScreen+1)},gotoScreen:function(t){if(1===t)this.$dots&&this.$dots.hide();else if(this.$dots)this.$dots.show();else{this.$dots=e();for(var n=0;n<this.$screens.length;n++)this.$dots=this.$dots.add(e("<div/>").appendTo(e("#dots")))}this.$currentScreen&&(this.$currentScreen.addClass("hidden"),this.$currentDot&&this.$currentDot.removeClass("sel")),this.currentScreen=t,this.$currentScreen=this.$screens.eq(t-1).removeClass("hidden"),this.$dots&&(this.$currentDot=this.$dots.eq(t-1).addClass("sel")),t===this.$screens.length?this.showInstallScreen():1!==t&&this.$currentScreen.find("input[type=text]:first").focus()},validate:function(t,n){var r=this;if(!this.loading){this.loading=!0,this.$currentScreen.find(".input").removeClass("errors"),this.$currentScreen.find("ul.errors").remove();var s=this.$currentScreen.find(".btn.submit");s.addClass("loading");var i="install/validate-"+t,a=this.getInputData(t,n,!1);Craft.sendActionRequest("POST",i,{data:a}).then((function(){r.gotoNextScreen()})).catch((function(n){var s=n.response;if(400===s.status){var i=e("<ul/>",{class:"errors"}).insertBefore(e("#"+t).find(".buttons"));for(var a in s.data.errors)if(s.data.errors.hasOwnProperty(a)){for(var o=0;o<s.data.errors[a].length;o++)e("<li>"+s.data.errors[a][o]+"</li>").appendTo(i);var l=e("#"+t+"-"+a+"-field").children(".input");l.addClass("errors"),function(e){var t=e.find("select,input");r.addListener(t,"focus,blur,textchange,change",(function(){e.removeClass("errors"),this.removeListener(t,"focus,blur,textchange,change")}))}(l)}Garnish.shake(r.modal.$container)}else console.warn("Unexpected response:",s)})).finally((function(){r.loading=!1,s.removeClass("loading")}))}}},{defaultDbPorts:{mysql:3306,pgsql:5432}}),Garnish.$win.on("load",(function(){Craft.installer=new Craft.Installer}))}()}();
-//# sourceMappingURL=install.js.map
\ No newline at end of file
diff --git a/packages/craftcms-asset-bundles/bundles/installer/dist/install.js.map b/packages/craftcms-asset-bundles/bundles/installer/dist/install.js.map
deleted file mode 100644
index 0bff3e5880d..00000000000
--- a/packages/craftcms-asset-bundles/bundles/installer/dist/install.js.map
+++ /dev/null
@@ -1 +0,0 @@
-{"version":3,"file":"install.js","mappings":"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","sources":["webpack:///../../../../../node_modules/vue-style-loader/lib/listToStyles.js","webpack:///../../../../../node_modules/vue-style-loader/lib/addStylesClient.js","webpack:///./install.scss?d7e0","webpack:///webpack/bootstrap","webpack:///webpack/runtime/compat get default export","webpack:///webpack/runtime/define property getters","webpack:///webpack/runtime/hasOwnProperty shorthand","webpack:///./install.js"],"sourcesContent":["/**\n * Translates the list format produced by css-loader into something\n * easier to manipulate.\n */\nexport default function listToStyles (parentId, list) {\n  var styles = []\n  var newStyles = {}\n  for (var i = 0; i < list.length; i++) {\n    var item = list[i]\n    var id = item[0]\n    var css = item[1]\n    var media = item[2]\n    var sourceMap = item[3]\n    var part = {\n      id: parentId + ':' + i,\n      css: css,\n      media: media,\n      sourceMap: sourceMap\n    }\n    if (!newStyles[id]) {\n      styles.push(newStyles[id] = { id: id, parts: [part] })\n    } else {\n      newStyles[id].parts.push(part)\n    }\n  }\n  return styles\n}\n","/*\n  MIT License http://www.opensource.org/licenses/mit-license.php\n  Author Tobias Koppers @sokra\n  Modified by Evan You @yyx990803\n*/\n\nimport listToStyles from './listToStyles'\n\nvar hasDocument = typeof document !== 'undefined'\n\nif (typeof DEBUG !== 'undefined' && DEBUG) {\n  if (!hasDocument) {\n    throw new Error(\n    'vue-style-loader cannot be used in a non-browser environment. ' +\n    \"Use { target: 'node' } in your Webpack config to indicate a server-rendering environment.\"\n  ) }\n}\n\n/*\ntype StyleObject = {\n  id: number;\n  parts: Array<StyleObjectPart>\n}\n\ntype StyleObjectPart = {\n  css: string;\n  media: string;\n  sourceMap: ?string\n}\n*/\n\nvar stylesInDom = {/*\n  [id: number]: {\n    id: number,\n    refs: number,\n    parts: Array<(obj?: StyleObjectPart) => void>\n  }\n*/}\n\nvar head = hasDocument && (document.head || document.getElementsByTagName('head')[0])\nvar singletonElement = null\nvar singletonCounter = 0\nvar isProduction = false\nvar noop = function () {}\nvar options = null\nvar ssrIdKey = 'data-vue-ssr-id'\n\n// Force single-tag solution on IE6-9, which has a hard limit on the # of <style>\n// tags it will allow on a page\nvar isOldIE = typeof navigator !== 'undefined' && /msie [6-9]\\b/.test(navigator.userAgent.toLowerCase())\n\nexport default function addStylesClient (parentId, list, _isProduction, _options) {\n  isProduction = _isProduction\n\n  options = _options || {}\n\n  var styles = listToStyles(parentId, list)\n  addStylesToDom(styles)\n\n  return function update (newList) {\n    var mayRemove = []\n    for (var i = 0; i < styles.length; i++) {\n      var item = styles[i]\n      var domStyle = stylesInDom[item.id]\n      domStyle.refs--\n      mayRemove.push(domStyle)\n    }\n    if (newList) {\n      styles = listToStyles(parentId, newList)\n      addStylesToDom(styles)\n    } else {\n      styles = []\n    }\n    for (var i = 0; i < mayRemove.length; i++) {\n      var domStyle = mayRemove[i]\n      if (domStyle.refs === 0) {\n        for (var j = 0; j < domStyle.parts.length; j++) {\n          domStyle.parts[j]()\n        }\n        delete stylesInDom[domStyle.id]\n      }\n    }\n  }\n}\n\nfunction addStylesToDom (styles /* Array<StyleObject> */) {\n  for (var i = 0; i < styles.length; i++) {\n    var item = styles[i]\n    var domStyle = stylesInDom[item.id]\n    if (domStyle) {\n      domStyle.refs++\n      for (var j = 0; j < domStyle.parts.length; j++) {\n        domStyle.parts[j](item.parts[j])\n      }\n      for (; j < item.parts.length; j++) {\n        domStyle.parts.push(addStyle(item.parts[j]))\n      }\n      if (domStyle.parts.length > item.parts.length) {\n        domStyle.parts.length = item.parts.length\n      }\n    } else {\n      var parts = []\n      for (var j = 0; j < item.parts.length; j++) {\n        parts.push(addStyle(item.parts[j]))\n      }\n      stylesInDom[item.id] = { id: item.id, refs: 1, parts: parts }\n    }\n  }\n}\n\nfunction createStyleElement () {\n  var styleElement = document.createElement('style')\n  styleElement.type = 'text/css'\n  head.appendChild(styleElement)\n  return styleElement\n}\n\nfunction addStyle (obj /* StyleObjectPart */) {\n  var update, remove\n  var styleElement = document.querySelector('style[' + ssrIdKey + '~=\"' + obj.id + '\"]')\n\n  if (styleElement) {\n    if (isProduction) {\n      // has SSR styles and in production mode.\n      // simply do nothing.\n      return noop\n    } else {\n      // has SSR styles but in dev mode.\n      // for some reason Chrome can't handle source map in server-rendered\n      // style tags - source maps in <style> only works if the style tag is\n      // created and inserted dynamically. So we remove the server rendered\n      // styles and inject new ones.\n      styleElement.parentNode.removeChild(styleElement)\n    }\n  }\n\n  if (isOldIE) {\n    // use singleton mode for IE9.\n    var styleIndex = singletonCounter++\n    styleElement = singletonElement || (singletonElement = createStyleElement())\n    update = applyToSingletonTag.bind(null, styleElement, styleIndex, false)\n    remove = applyToSingletonTag.bind(null, styleElement, styleIndex, true)\n  } else {\n    // use multi-style-tag mode in all other cases\n    styleElement = createStyleElement()\n    update = applyToTag.bind(null, styleElement)\n    remove = function () {\n      styleElement.parentNode.removeChild(styleElement)\n    }\n  }\n\n  update(obj)\n\n  return function updateStyle (newObj /* StyleObjectPart */) {\n    if (newObj) {\n      if (newObj.css === obj.css &&\n          newObj.media === obj.media &&\n          newObj.sourceMap === obj.sourceMap) {\n        return\n      }\n      update(obj = newObj)\n    } else {\n      remove()\n    }\n  }\n}\n\nvar replaceText = (function () {\n  var textStore = []\n\n  return function (index, replacement) {\n    textStore[index] = replacement\n    return textStore.filter(Boolean).join('\\n')\n  }\n})()\n\nfunction applyToSingletonTag (styleElement, index, remove, obj) {\n  var css = remove ? '' : obj.css\n\n  if (styleElement.styleSheet) {\n    styleElement.styleSheet.cssText = replaceText(index, css)\n  } else {\n    var cssNode = document.createTextNode(css)\n    var childNodes = styleElement.childNodes\n    if (childNodes[index]) styleElement.removeChild(childNodes[index])\n    if (childNodes.length) {\n      styleElement.insertBefore(cssNode, childNodes[index])\n    } else {\n      styleElement.appendChild(cssNode)\n    }\n  }\n}\n\nfunction applyToTag (styleElement, obj) {\n  var css = obj.css\n  var media = obj.media\n  var sourceMap = obj.sourceMap\n\n  if (media) {\n    styleElement.setAttribute('media', media)\n  }\n  if (options.ssrId) {\n    styleElement.setAttribute(ssrIdKey, obj.id)\n  }\n\n  if (sourceMap) {\n    // https://developer.chrome.com/devtools/docs/javascript-debugging\n    // this makes source maps inside style tags work properly in Chrome\n    css += '\\n/*# sourceURL=' + sourceMap.sources[0] + ' */'\n    // http://stackoverflow.com/a/26603875\n    css += '\\n/*# sourceMappingURL=data:application/json;base64,' + btoa(unescape(encodeURIComponent(JSON.stringify(sourceMap)))) + ' */'\n  }\n\n  if (styleElement.styleSheet) {\n    styleElement.styleSheet.cssText = css\n  } else {\n    while (styleElement.firstChild) {\n      styleElement.removeChild(styleElement.firstChild)\n    }\n    styleElement.appendChild(document.createTextNode(css))\n  }\n}\n","// style-loader: Adds some css to the DOM by adding a <style> tag\n\n// load the styles\nvar content = require(\"!!../../../../../node_modules/mini-css-extract-plugin/dist/loader.js??ruleSet[1].rules[3].use[1]!../../../../../node_modules/css-loader/dist/cjs.js!../../../../../node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[3].use[3]!../../../../../node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[3].use[4]!./install.scss\");\nif(content.__esModule) content = content.default;\nif(typeof content === 'string') content = [[module.id, content, '']];\nif(content.locals) module.exports = content.locals;\n// add the styles to the DOM\nvar add = require(\"!../../../../../node_modules/vue-style-loader/lib/addStylesClient.js\").default\nvar update = add(\"6dd750ae\", content, true, {});","// The module cache\nvar __webpack_module_cache__ = {};\n\n// The require function\nfunction __webpack_require__(moduleId) {\n\t// Check if module is in cache\n\tvar cachedModule = __webpack_module_cache__[moduleId];\n\tif (cachedModule !== undefined) {\n\t\treturn cachedModule.exports;\n\t}\n\t// Create a new module (and put it into the cache)\n\tvar module = __webpack_module_cache__[moduleId] = {\n\t\tid: moduleId,\n\t\t// no module.loaded needed\n\t\texports: {}\n\t};\n\n\t// Execute the module function\n\t__webpack_modules__[moduleId](module, module.exports, __webpack_require__);\n\n\t// Return the exports of the module\n\treturn module.exports;\n}\n\n","// getDefaultExport function for compatibility with non-harmony modules\n__webpack_require__.n = function(module) {\n\tvar getter = module && module.__esModule ?\n\t\tfunction() { return module['default']; } :\n\t\tfunction() { return module; };\n\t__webpack_require__.d(getter, { a: getter });\n\treturn getter;\n};","// define getter functions for harmony exports\n__webpack_require__.d = function(exports, definition) {\n\tfor(var key in definition) {\n\t\tif(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {\n\t\t\tObject.defineProperty(exports, key, { enumerable: true, get: definition[key] });\n\t\t}\n\t}\n};","__webpack_require__.o = function(obj, prop) { return Object.prototype.hasOwnProperty.call(obj, prop); }","import './install.scss';\n\n(function ($) {\n  /** global: Craft */\n  /** global: Garnish */\n  Craft.Installer = Garnish.Base.extend(\n    {\n      $bg: null,\n      $screens: null,\n      $dots: null,\n      $currentScreen: null,\n      $currentDot: null,\n\n      $dbDriverInput: null,\n      $dbPortInput: null,\n\n      modal: null,\n      currentScreen: null,\n      loading: false,\n\n      /**\n       * Constructor\n       */\n      init: function () {\n        this.$bg = $('#bg');\n        this.$screens = $('#screens').children();\n        this.$dbDriverInput = $('#db-driver');\n        this.$dbPortInput = $('#db-port');\n\n        this.updateDbPortInput();\n\n        this.addListener(\n          this.$screens.find('form'),\n          'submit',\n          'handleScreenSubmit'\n        );\n        this.addListener(\n          this.$screens.find('.btn.submit'),\n          'activate',\n          'handleScreenSubmit'\n        );\n\n        this.addListener($('#beginbtn'), 'activate', 'showModal');\n        this.addListener(this.$dbDriverInput, 'change', 'updateDbPortInput');\n\n        new Craft.PasswordInput('#account-password');\n      },\n\n      showModal: function () {\n        if (!this.modal) {\n          this.modal = new Garnish.Modal(\n            $('#install-modal').removeClass('hidden'),\n            {\n              hideOnEsc: false,\n              shadeClass: '',\n            }\n          );\n          this.gotoScreen(1);\n        } else {\n          this.modal.show();\n        }\n      },\n\n      updateDbPortInput: function () {\n        var driver = this.$dbDriverInput.val();\n        var port = this.$dbPortInput.val();\n        var defaultPort = Craft.Installer.defaultDbPorts[driver];\n\n        this.$dbPortInput.attr('placeholder', defaultPort);\n        if (port == defaultPort) {\n          this.$dbPortInput.val('');\n        }\n      },\n\n      handleScreenSubmit: function (ev) {\n        ev.preventDefault();\n\n        var inputs = this.getScreenInputNames(this.$currentScreen);\n        if (inputs) {\n          this.validate(this.$currentScreen.attr('id'), inputs);\n        } else {\n          this.gotoNextScreen();\n        }\n      },\n\n      getScreenInputNames: function ($screen) {\n        var inputsStr = $screen.attr('data-inputs');\n        return inputsStr ? inputsStr.split(',') : null;\n      },\n\n      getInputData: function (what, inputs, includePrefix) {\n        var data = {};\n        for (var i = 0; i < inputs.length; i++) {\n          var input = inputs[i],\n            $input = $('#' + what + '-' + input);\n          data[(includePrefix ? what + '-' : '') + input] =\n            Garnish.getInputPostVal($input);\n        }\n        return data;\n      },\n\n      showInstallScreen: function () {\n        var data = {};\n        var $screen;\n        var inputs;\n        for (var i = 1; i < this.$screens.length - 1; i++) {\n          $screen = this.$screens.eq(i);\n          inputs = this.getScreenInputNames($screen);\n          $.extend(data, this.getInputData($screen.attr('id'), inputs, true));\n        }\n\n        Craft.sendActionRequest('POST', 'install/install', {data})\n          .then((response) => this.allDone(response))\n          .catch((response) => this.allDone(response));\n      },\n\n      allDone: function (response) {\n        $('#spinner').remove();\n        var $h1 = this.$currentScreen.find('h1:first');\n\n        if (response.status === 200) {\n          $h1.text(Craft.t('app', 'Craft is installed! 🎉'));\n\n          setTimeout(function () {\n            window.location.href = Craft.getUrl(postCpLoginRedirect);\n          }, 1000);\n        } else {\n          $h1.text('Install failed 😞');\n          const messageHtml = response?.response?.data?.messageHtml;\n          if (messageHtml) {\n            $('<div/>', {\n              class: 'pane',\n              html: messageHtml,\n            }).insertAfter($h1);\n          } else {\n            $('<p/>', {\n              text:\n                response?.response?.data?.message ??\n                'Please check your logs for more info.',\n            }).insertAfter($h1);\n          }\n        }\n      },\n\n      gotoNextScreen: function () {\n        this.gotoScreen(this.currentScreen + 1);\n      },\n\n      gotoScreen: function (i) {\n        // Show the dots (unless it's the license screen)\n        if (i === 1) {\n          if (this.$dots) {\n            this.$dots.hide();\n          }\n        } else {\n          if (!this.$dots) {\n            this.$dots = $();\n            for (var j = 0; j < this.$screens.length; j++) {\n              this.$dots = this.$dots.add($('<div/>').appendTo($('#dots')));\n            }\n          } else {\n            this.$dots.show();\n          }\n        }\n\n        // Hide the current screen\n        if (this.$currentScreen) {\n          this.$currentScreen.addClass('hidden');\n          if (this.$currentDot) {\n            this.$currentDot.removeClass('sel');\n          }\n        }\n\n        // Slide in the new screen\n        this.currentScreen = i;\n        this.$currentScreen = this.$screens.eq(i - 1).removeClass('hidden');\n        if (this.$dots) {\n          this.$currentDot = this.$dots.eq(i - 1).addClass('sel');\n        }\n\n        // Is this the install screen?\n        if (i === this.$screens.length) {\n          this.showInstallScreen();\n        } else if (i !== 1) {\n          // Give focus to the first input\n          this.$currentScreen.find('input[type=text]:first').focus();\n        }\n      },\n\n      validate: function (what, inputs) {\n        // Prevent double-clicks\n        if (this.loading) {\n          return;\n        }\n\n        this.loading = true;\n\n        // Clear any previous error lists\n        this.$currentScreen.find('.input').removeClass('errors');\n        this.$currentScreen.find('ul.errors').remove();\n\n        var $submitBtn = this.$currentScreen.find('.btn.submit');\n        $submitBtn.addClass('loading');\n\n        var action = 'install/validate-' + what;\n        var data = this.getInputData(what, inputs, false);\n\n        Craft.sendActionRequest('POST', action, {data})\n          .then(() => {\n            this.gotoNextScreen();\n          })\n          .catch(({response}) => {\n            if (response.status === 400) {\n              const $errors = $('<ul/>', {class: 'errors'}).insertBefore(\n                $('#' + what).find('.buttons')\n              );\n\n              for (const input in response.data.errors) {\n                if (!response.data.errors.hasOwnProperty(input)) {\n                  continue;\n                }\n\n                for (var i = 0; i < response.data.errors[input].length; i++) {\n                  $('<li>' + response.data.errors[input][i] + '</li>').appendTo(\n                    $errors\n                  );\n                }\n\n                var $input = $('#' + what + '-' + input + '-field').children(\n                  '.input'\n                );\n                $input.addClass('errors');\n                (($input) => {\n                  var $elements = $input.find('select,input');\n                  this.addListener(\n                    $elements,\n                    'focus,blur,textchange,change',\n                    function () {\n                      $input.removeClass('errors');\n                      this.removeListener(\n                        $elements,\n                        'focus,blur,textchange,change'\n                      );\n                    }\n                  );\n                })($input);\n              }\n\n              Garnish.shake(this.modal.$container);\n            } else {\n              console.warn('Unexpected response:', response);\n            }\n          })\n          .finally(() => {\n            this.loading = false;\n            $submitBtn.removeClass('loading');\n          });\n      },\n    },\n    {\n      defaultDbPorts: {\n        mysql: 3306,\n        pgsql: 5432,\n      },\n    }\n  );\n\n  Garnish.$win.on('load', function () {\n    Craft.installer = new Craft.Installer();\n  });\n})(jQuery);\n"],"names":["listToStyles","parentId","list","styles","newStyles","i","length","item","id","part","css","media","sourceMap","parts","push","hasDocument","document","DEBUG","Error","stylesInDom","head","getElementsByTagName","singletonElement","singletonCounter","isProduction","noop","options","ssrIdKey","isOldIE","navigator","test","userAgent","toLowerCase","addStylesClient","_isProduction","_options","addStylesToDom","newList","mayRemove","domStyle","refs","j","addStyle","createStyleElement","styleElement","createElement","type","appendChild","obj","update","remove","querySelector","parentNode","removeChild","styleIndex","applyToSingletonTag","bind","applyToTag","newObj","textStore","replaceText","index","replacement","filter","Boolean","join","styleSheet","cssText","cssNode","createTextNode","childNodes","insertBefore","setAttribute","ssrId","sources","btoa","unescape","encodeURIComponent","JSON","stringify","firstChild","content","__esModule","default","module","locals","exports","add","__webpack_module_cache__","__webpack_require__","moduleId","cachedModule","undefined","__webpack_modules__","n","getter","d","a","definition","key","o","Object","defineProperty","enumerable","get","prop","prototype","hasOwnProperty","call","$","jQuery","Craft","Installer","Garnish","Base","extend","$bg","$screens","$dots","$currentScreen","$currentDot","$dbDriverInput","$dbPortInput","modal","currentScreen","loading","init","this","children","updateDbPortInput","addListener","find","PasswordInput","showModal","show","Modal","removeClass","hideOnEsc","shadeClass","gotoScreen","driver","val","port","defaultPort","defaultDbPorts","attr","handleScreenSubmit","ev","preventDefault","inputs","getScreenInputNames","validate","gotoNextScreen","$screen","inputsStr","split","getInputData","what","includePrefix","data","input","$input","getInputPostVal","showInstallScreen","_this","eq","sendActionRequest","then","response","allDone","catch","$h1","status","text","t","setTimeout","window","location","href","getUrl","postCpLoginRedirect","_response$response","_response$response$da","_response$response2","messageHtml","class","html","insertAfter","message","hide","appendTo","addClass","focus","_this2","$submitBtn","action","_ref","$errors","errors","$elements","removeListener","shake","$container","console","warn","finally","mysql","pgsql","$win","on","installer"],"sourceRoot":""}
\ No newline at end of file
diff --git a/packages/craftcms-asset-bundles/bundles/installer/src/images/account.png b/packages/craftcms-asset-bundles/bundles/installer/src/images/account.png
deleted file mode 100644
index 667fb8bd3fc..00000000000
Binary files a/packages/craftcms-asset-bundles/bundles/installer/src/images/account.png and /dev/null differ
diff --git a/packages/craftcms-asset-bundles/bundles/installer/src/images/db.png b/packages/craftcms-asset-bundles/bundles/installer/src/images/db.png
deleted file mode 100644
index 911ecefb27e..00000000000
Binary files a/packages/craftcms-asset-bundles/bundles/installer/src/images/db.png and /dev/null differ
diff --git a/packages/craftcms-asset-bundles/bundles/installer/src/images/installer-bg.png b/packages/craftcms-asset-bundles/bundles/installer/src/images/installer-bg.png
deleted file mode 100644
index 7d402c7aa56..00000000000
Binary files a/packages/craftcms-asset-bundles/bundles/installer/src/images/installer-bg.png and /dev/null differ
diff --git a/packages/craftcms-asset-bundles/bundles/installer/src/images/site.png b/packages/craftcms-asset-bundles/bundles/installer/src/images/site.png
deleted file mode 100644
index 781f198117d..00000000000
Binary files a/packages/craftcms-asset-bundles/bundles/installer/src/images/site.png and /dev/null differ
diff --git a/packages/craftcms-asset-bundles/bundles/installer/src/install.js b/packages/craftcms-asset-bundles/bundles/installer/src/install.js
deleted file mode 100644
index fa89fc01859..00000000000
--- a/packages/craftcms-asset-bundles/bundles/installer/src/install.js
+++ /dev/null
@@ -1,271 +0,0 @@
-import './install.scss';
-
-(function ($) {
-  /** global: Craft */
-  /** global: Garnish */
-  Craft.Installer = Garnish.Base.extend(
-    {
-      $bg: null,
-      $screens: null,
-      $dots: null,
-      $currentScreen: null,
-      $currentDot: null,
-
-      $dbDriverInput: null,
-      $dbPortInput: null,
-
-      modal: null,
-      currentScreen: null,
-      loading: false,
-
-      /**
-       * Constructor
-       */
-      init: function () {
-        this.$bg = $('#bg');
-        this.$screens = $('#screens').children();
-        this.$dbDriverInput = $('#db-driver');
-        this.$dbPortInput = $('#db-port');
-
-        this.updateDbPortInput();
-
-        this.addListener(
-          this.$screens.find('form'),
-          'submit',
-          'handleScreenSubmit'
-        );
-        this.addListener(
-          this.$screens.find('.btn.submit'),
-          'activate',
-          'handleScreenSubmit'
-        );
-
-        this.addListener($('#beginbtn'), 'activate', 'showModal');
-        this.addListener(this.$dbDriverInput, 'change', 'updateDbPortInput');
-
-        new Craft.PasswordInput('#account-password');
-      },
-
-      showModal: function () {
-        if (!this.modal) {
-          this.modal = new Garnish.Modal(
-            $('#install-modal').removeClass('hidden'),
-            {
-              hideOnEsc: false,
-              shadeClass: '',
-            }
-          );
-          this.gotoScreen(1);
-        } else {
-          this.modal.show();
-        }
-      },
-
-      updateDbPortInput: function () {
-        var driver = this.$dbDriverInput.val();
-        var port = this.$dbPortInput.val();
-        var defaultPort = Craft.Installer.defaultDbPorts[driver];
-
-        this.$dbPortInput.attr('placeholder', defaultPort);
-        if (port == defaultPort) {
-          this.$dbPortInput.val('');
-        }
-      },
-
-      handleScreenSubmit: function (ev) {
-        ev.preventDefault();
-
-        var inputs = this.getScreenInputNames(this.$currentScreen);
-        if (inputs) {
-          this.validate(this.$currentScreen.attr('id'), inputs);
-        } else {
-          this.gotoNextScreen();
-        }
-      },
-
-      getScreenInputNames: function ($screen) {
-        var inputsStr = $screen.attr('data-inputs');
-        return inputsStr ? inputsStr.split(',') : null;
-      },
-
-      getInputData: function (what, inputs, includePrefix) {
-        var data = {};
-        for (var i = 0; i < inputs.length; i++) {
-          var input = inputs[i],
-            $input = $('#' + what + '-' + input);
-          data[(includePrefix ? what + '-' : '') + input] =
-            Garnish.getInputPostVal($input);
-        }
-        return data;
-      },
-
-      showInstallScreen: function () {
-        var data = {};
-        var $screen;
-        var inputs;
-        for (var i = 1; i < this.$screens.length - 1; i++) {
-          $screen = this.$screens.eq(i);
-          inputs = this.getScreenInputNames($screen);
-          $.extend(data, this.getInputData($screen.attr('id'), inputs, true));
-        }
-
-        Craft.sendActionRequest('POST', 'install/install', {data})
-          .then((response) => this.allDone(response))
-          .catch((response) => this.allDone(response));
-      },
-
-      allDone: function (response) {
-        $('#spinner').remove();
-        var $h1 = this.$currentScreen.find('h1:first');
-
-        if (response.status === 200) {
-          $h1.text(Craft.t('app', 'Craft is installed! 🎉'));
-
-          setTimeout(function () {
-            window.location.href = Craft.getUrl(postCpLoginRedirect);
-          }, 1000);
-        } else {
-          $h1.text('Install failed 😞');
-          const messageHtml = response?.response?.data?.messageHtml;
-          if (messageHtml) {
-            $('<div/>', {
-              class: 'pane',
-              html: messageHtml,
-            }).insertAfter($h1);
-          } else {
-            $('<p/>', {
-              text:
-                response?.response?.data?.message ??
-                'Please check your logs for more info.',
-            }).insertAfter($h1);
-          }
-        }
-      },
-
-      gotoNextScreen: function () {
-        this.gotoScreen(this.currentScreen + 1);
-      },
-
-      gotoScreen: function (i) {
-        // Show the dots (unless it's the license screen)
-        if (i === 1) {
-          if (this.$dots) {
-            this.$dots.hide();
-          }
-        } else {
-          if (!this.$dots) {
-            this.$dots = $();
-            for (var j = 0; j < this.$screens.length; j++) {
-              this.$dots = this.$dots.add($('<div/>').appendTo($('#dots')));
-            }
-          } else {
-            this.$dots.show();
-          }
-        }
-
-        // Hide the current screen
-        if (this.$currentScreen) {
-          this.$currentScreen.addClass('hidden');
-          if (this.$currentDot) {
-            this.$currentDot.removeClass('sel');
-          }
-        }
-
-        // Slide in the new screen
-        this.currentScreen = i;
-        this.$currentScreen = this.$screens.eq(i - 1).removeClass('hidden');
-        if (this.$dots) {
-          this.$currentDot = this.$dots.eq(i - 1).addClass('sel');
-        }
-
-        // Is this the install screen?
-        if (i === this.$screens.length) {
-          this.showInstallScreen();
-        } else if (i !== 1) {
-          // Give focus to the first input
-          this.$currentScreen.find('input[type=text]:first').focus();
-        }
-      },
-
-      validate: function (what, inputs) {
-        // Prevent double-clicks
-        if (this.loading) {
-          return;
-        }
-
-        this.loading = true;
-
-        // Clear any previous error lists
-        this.$currentScreen.find('.input').removeClass('errors');
-        this.$currentScreen.find('ul.errors').remove();
-
-        var $submitBtn = this.$currentScreen.find('.btn.submit');
-        $submitBtn.addClass('loading');
-
-        var action = 'install/validate-' + what;
-        var data = this.getInputData(what, inputs, false);
-
-        Craft.sendActionRequest('POST', action, {data})
-          .then(() => {
-            this.gotoNextScreen();
-          })
-          .catch(({response}) => {
-            if (response.status === 400) {
-              const $errors = $('<ul/>', {class: 'errors'}).insertBefore(
-                $('#' + what).find('.buttons')
-              );
-
-              for (const input in response.data.errors) {
-                if (!response.data.errors.hasOwnProperty(input)) {
-                  continue;
-                }
-
-                for (var i = 0; i < response.data.errors[input].length; i++) {
-                  $('<li>' + response.data.errors[input][i] + '</li>').appendTo(
-                    $errors
-                  );
-                }
-
-                var $input = $('#' + what + '-' + input + '-field').children(
-                  '.input'
-                );
-                $input.addClass('errors');
-                (($input) => {
-                  var $elements = $input.find('select,input');
-                  this.addListener(
-                    $elements,
-                    'focus,blur,textchange,change',
-                    function () {
-                      $input.removeClass('errors');
-                      this.removeListener(
-                        $elements,
-                        'focus,blur,textchange,change'
-                      );
-                    }
-                  );
-                })($input);
-              }
-
-              Garnish.shake(this.modal.$container);
-            } else {
-              console.warn('Unexpected response:', response);
-            }
-          })
-          .finally(() => {
-            this.loading = false;
-            $submitBtn.removeClass('loading');
-          });
-      },
-    },
-    {
-      defaultDbPorts: {
-        mysql: 3306,
-        pgsql: 5432,
-      },
-    }
-  );
-
-  Garnish.$win.on('load', function () {
-    Craft.installer = new Craft.Installer();
-  });
-})(jQuery);
diff --git a/packages/craftcms-asset-bundles/bundles/installer/src/install.scss b/packages/craftcms-asset-bundles/bundles/installer/src/install.scss
deleted file mode 100644
index 81d3a9c6120..00000000000
--- a/packages/craftcms-asset-bundles/bundles/installer/src/install.scss
+++ /dev/null
@@ -1,217 +0,0 @@
-@charset "UTF-8";
-@import '@craftcms/sass/mixins';
-
-html,
-body {
-  height: 100%;
-}
-
-body {
-  overflow: hidden;
-  background: var(--gray-100) url('images/installer-bg.png') no-repeat 50% 50%;
-  background-size: cover;
-}
-
-.beginbtncontainer {
-  position: absolute;
-  inset-block-start: 50%;
-  margin-block-start: -25px;
-  width: 100%;
-  text-align: center;
-}
-
-#beginbtn {
-  display: inline-block;
-  border-radius: var(--radius-lg);
-  font-size: 19px;
-  height: 50px;
-  padding-block: 0;
-  padding-inline: 24px;
-  box-shadow:
-    inset 0 1px #fff3,
-    inset 0 -1px #0002,
-    0 0 0 1px #21377066,
-    0 0 1px 2px #21377055,
-    0 10px 10px -10px #213770,
-    0 10px 20px -10px #213770;
-
-  &::after {
-    margin-block-start: -4px;
-  }
-}
-
-#install-modal {
-  width: 770px;
-  height: 510px;
-  padding: 0;
-
-  #screens {
-    &,
-    .screen {
-      width: 100%;
-      height: 100%;
-    }
-
-    .screen {
-      padding: 35px;
-      box-sizing: border-box;
-      background: no-repeat 0 50%;
-      background-size: 368px 477px;
-
-      &#db {
-        background-image: url('./images/db.png');
-      }
-
-      &#site {
-        background-image: url('./images/site.png');
-      }
-
-      &#account {
-        background-image: url('./images/account.png');
-      }
-
-      h1 {
-        margin-block-end: 35px;
-        text-align: center;
-        position: relative;
-      }
-
-      form {
-        width: 50%;
-        float: inline-end;
-
-        .select {
-          &,
-          select {
-            width: 100%;
-          }
-        }
-      }
-    }
-  }
-
-  #dots {
-    position: absolute;
-    inset-block-end: 10px;
-    inset-inline-start: 0;
-    width: 100%;
-    text-align: center;
-
-    & > div {
-      display: inline-block;
-      border-radius: 4px;
-      border: 1px solid var(--border-hairline);
-      width: 6px;
-      height: 6px;
-
-      & + div {
-        margin-inline-start: 5px;
-      }
-
-      &.sel {
-        border-color: var(--border-primary);
-        background: var(--bg-primary);
-      }
-    }
-  }
-}
-
-.grid {
-  margin-block: 35px;
-}
-
-.buttons {
-  position: absolute;
-  inset-block-end: 35px;
-  @include right(35px);
-
-  .btn {
-    padding-inline-end: 10px;
-
-    &::after {
-      @include icon;
-      margin-inline: 4px 0;
-      margin-block: -2px 0;
-      font-size: 20px;
-      width: 20px;
-      height: 20px;
-      line-height: 18px;
-
-      body.ltr & {
-        content: 'rarr';
-      }
-
-      body.rtl & {
-        content: 'larr';
-      }
-    }
-  }
-}
-
-input.hidden {
-  position: absolute;
-  inset-block-start: 100px;
-}
-
-#license {
-  padding: 0 !important;
-  overflow-y: scroll;
-
-  #license-content {
-    padding-block: 70px;
-    padding-inline: 105px;
-
-    .license {
-      &,
-      h1 {
-        font-family: Menlo, monospace;
-        font-size: 13px;
-        line-height: 25px;
-      }
-
-      h1 {
-        font-weight: bold;
-      }
-    }
-
-    #license-accept {
-      margin-block-start: 35px;
-      display: flex;
-      justify-content: center;
-    }
-  }
-}
-
-#installing {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-
-  .pane {
-    max-width: 40em;
-    @include fixed-width-font;
-    color: var(--white);
-    background-color: var(--gray-800);
-
-    code {
-      color: var(--yellow-300);
-      border: 0;
-      padding: 0;
-      background-color: transparent;
-    }
-  }
-
-  #spinner {
-    display: block;
-    margin-block: 0;
-    margin-inline: auto;
-  }
-
-  .buttons {
-    .btn {
-      margin: 0;
-      float: none;
-    }
-  }
-}
diff --git a/packages/craftcms-asset-bundles/bundles/installer/webpack.config.js b/packages/craftcms-asset-bundles/bundles/installer/webpack.config.js
deleted file mode 100644
index e8877ff1dfa..00000000000
--- a/packages/craftcms-asset-bundles/bundles/installer/webpack.config.js
+++ /dev/null
@@ -1,10 +0,0 @@
-/* jshint esversion: 6 */
-/* globals module, require */
-const {getConfig} = require('@craftcms/webpack');
-
-module.exports = getConfig({
-  context: __dirname,
-  config: {
-    entry: {install: './install.js'},
-  },
-});
diff --git a/packages/craftcms-cp/src/components/callout/callout.styles.ts b/packages/craftcms-cp/src/components/callout/callout.styles.ts
new file mode 100644
index 00000000000..ba75234c98d
--- /dev/null
+++ b/packages/craftcms-cp/src/components/callout/callout.styles.ts
@@ -0,0 +1,18 @@
+import {css} from 'lit';
+
+export default css`
+  :host {
+    display: block;
+    padding: var(--c-spacing-sm) var(--c-spacing-md);
+    border-radius: var(--c-callout-radius, var(--c-radius-md));
+    background-color: var(--c-callout-bg);
+    border: 1px solid var(--c-callout-border-color);
+    color: var(--c-callout-fg);
+  }
+
+  :host([variant='danger']) {
+    --c-callout-bg: var(--c-color-danger-bg-normal);
+    --c-callout-border-color: var(--c-color-danger-border-normal);
+    --c-callout-fg: var(--c-color-danger-on-normal);
+  }
+`;
diff --git a/packages/craftcms-cp/src/components/callout/callout.ts b/packages/craftcms-cp/src/components/callout/callout.ts
new file mode 100644
index 00000000000..aaae3572379
--- /dev/null
+++ b/packages/craftcms-cp/src/components/callout/callout.ts
@@ -0,0 +1,26 @@
+import {type CSSResultGroup, html, LitElement} from 'lit';
+import {property} from 'lit/decorators.js';
+import styles from './callout.styles.js';
+
+export default class CraftCallout extends LitElement {
+  static override styles: CSSResultGroup = [styles];
+
+  /** Variant style of the callout */
+  @property({reflect: true}) variant:
+    | 'default'
+    | 'success'
+    | 'warning'
+    | 'danger' = 'default';
+
+  /** Appearance style of the callout */
+  @property() appearance: 'filled' | 'outline-filled' | 'outline' | 'plain' =
+    'outline-filled';
+
+  protected override render(): unknown {
+    return html`<slot></slot>`;
+  }
+}
+
+if (!customElements.get('craft-callout')) {
+  customElements.define('craft-callout', CraftCallout);
+}
diff --git a/packages/craftcms-cp/src/components/input-password/input-password.ts b/packages/craftcms-cp/src/components/input-password/input-password.ts
index 73fea31f8df..71c4c420271 100644
--- a/packages/craftcms-cp/src/components/input-password/input-password.ts
+++ b/packages/craftcms-cp/src/components/input-password/input-password.ts
@@ -1,4 +1,4 @@
-import {css, html, LitElement} from 'lit';
+import {css, html} from 'lit';
 import {state} from 'lit/decorators.js';
 import {LionInput} from '@lion/ui/input.js';
 import {inputStyles} from '../../styles/form.styles.js';
@@ -41,6 +41,7 @@ export default class CraftInputPassword extends LionInput {
   renderSuffix = () => {
     return html`
       <craft-button
+        type="button"
         icon
         size="small"
         variant="plain"
diff --git a/packages/craftcms-cp/src/components/select/select.styles.ts b/packages/craftcms-cp/src/components/select/select.styles.ts
index 56501dbcff1..a20060adb45 100644
--- a/packages/craftcms-cp/src/components/select/select.styles.ts
+++ b/packages/craftcms-cp/src/components/select/select.styles.ts
@@ -1,26 +1,37 @@
 import {css} from 'lit';
+import {baseFieldStyles, baseInputStyles} from '../../styles/form.styles';
+
 export default css`
+  ${baseFieldStyles}
+
   :host {
     width: 100%;
   }
 
-  ::slotted(label) {
-    font-weight: bold;
-  }
-
-  .form-field__group-one {
-    margin-bottom: var(--c-spacing-sm);
+  ::slotted(.form-control) {
+    width: 100%;
+    height: 100%;
+    appearance: none;
+    border: 0;
+    min-height: none;
+    padding-inline: var(--c-input-spacing-inline)
+      calc(var(--c-input-spacing-inline) * 1.5 + 1em);
+    border-radius: var(--c-input-radius);
   }
 
-  .form-field__help-text {
-    font-size: var(--text-sm);
-    color: var(--color-slate-600);
+  .input-group__input {
+    ${baseInputStyles}
+    padding-inline: 0;
+    position: relative;
+    min-height: calc(var(--c-input-height, var(--c-size-control-md)) - 2px);
   }
 
-  #overlay-content-node-wrapper {
-    background-color: canvas;
-    padding: var(--c-spacing-sm);
-    border: 1px solid var(--c-color-neutral-border-subtle);
-    border-radius: var(--c-radius-md);
+  .indicator {
+    position: absolute;
+    inset-block-start: 50%;
+    inset-inline-end: var(--c-input-spacing-inline);
+    transform: translateY(-50%);
+    width: 1em;
+    height: 1em;
   }
 `;
diff --git a/packages/craftcms-cp/src/components/select/select.ts b/packages/craftcms-cp/src/components/select/select.ts
index a1284f54090..d4995556fe6 100644
--- a/packages/craftcms-cp/src/components/select/select.ts
+++ b/packages/craftcms-cp/src/components/select/select.ts
@@ -1,48 +1,26 @@
 import styles from './select.styles.js';
-import {LionSelectInvoker, LionSelectRich} from '@lion/ui/select-rich.js';
-import {css, html} from 'lit';
-import type CraftIcon from '../icon/icon.js';
-import {baseInputStyles} from '../../styles/form.styles.js';
+import {LionSelect} from '@lion/ui/select.js';
+import {html} from 'lit';
 import '../option/option.js';
 import '../icon/icon.js';
 
-export default class CraftSelect extends LionSelectRich {
+export default class CraftSelect extends LionSelect {
   static override get styles() {
     return [...super.styles, styles];
   }
 
-  /** @type {SlotsMap} */
-  override get slots() {
-    return {
-      ...super.slots,
-      invoker: () => html`<craft-select-invoker></craft-select-invoker>`,
-    };
-  }
-}
-
-export class CraftSelectInvoker extends LionSelectInvoker {
-  static override get styles() {
-    return [
-      ...super.styles,
-      css`
-        :host {
-          ${baseInputStyles}
-          box-shadow: var(--c-select-shadow);
-        }
-      `,
-    ];
-  }
-
-  override get slots() {
-    return {
-      ...super.slots,
-      after: () => {
-        const icon = document.createElement('craft-icon') as CraftIcon;
-        icon.style.fontSize = '0.8em';
-        icon.name = 'chevron-down';
-        return icon;
-      },
-    };
+  // eslint-disable-next-line class-methods-use-this
+  override _inputGroupInputTemplate() {
+    return html`
+      <div class="input-group__input">
+        <slot name="input"></slot>
+        <craft-icon
+          class="indicator"
+          name="chevron-down"
+          style="font-size: 0.8em"
+        ></craft-icon>
+      </div>
+    `;
   }
 }
 
@@ -50,13 +28,9 @@ if (!customElements.get('craft-select')) {
   customElements.define('craft-select', CraftSelect);
 }
 
-if (!customElements.get('craft-select-invoker')) {
-  customElements.define('craft-select-invoker', CraftSelectInvoker);
-}
-
 declare global {
   interface HTMLElementTagNameMap {
     'craft-select': CraftSelect;
-    'craft-select-invoker': CraftSelectInvoker;
+    // 'craft-select-invoker': CraftSelectInvoker;
   }
 }
diff --git a/packages/craftcms-cp/src/index.ts b/packages/craftcms-cp/src/index.ts
index 0c5875e3776..5cef48dbe13 100644
--- a/packages/craftcms-cp/src/index.ts
+++ b/packages/craftcms-cp/src/index.ts
@@ -32,6 +32,7 @@ export {default as CraftDrawer} from './components/drawer/drawer.js';
 export {default as CraftDialog} from './components/dialog/dialog.js';
 export {default as CraftCheckboxGroup} from './components/checkbox-group/checkbox-group.js';
 export {default as CraftCheckbox} from './components/checkbox/checkbox.js';
+export {default as CraftCallout} from './components/callout/callout.js';
 /* plop:component */
 
 export * from './utilities/cookies.js';
diff --git a/packages/craftcms-cp/src/styles/cp.css b/packages/craftcms-cp/src/styles/cp.css
index 748660c4563..561fb333bd4 100644
--- a/packages/craftcms-cp/src/styles/cp.css
+++ b/packages/craftcms-cp/src/styles/cp.css
@@ -33,3 +33,10 @@
     inset-inline-start: 0;
   }
 }
+
+.error-list {
+  color: var(--c-color-danger-on-normal);
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
diff --git a/packages/craftcms-cp/src/styles/form.styles.ts b/packages/craftcms-cp/src/styles/form.styles.ts
index afce0cca1cc..f3409122c78 100644
--- a/packages/craftcms-cp/src/styles/form.styles.ts
+++ b/packages/craftcms-cp/src/styles/form.styles.ts
@@ -7,33 +7,38 @@ export const baseInputStyles = css`
   min-height: var(--c-input-height, var(--c-size-control-md));
   border: var(--c-input-border, 1px solid var(--c-form-control-border));
   border-radius: var(--c-input-radius, var(--c-radius-sm));
-  padding-inline: var(--c-input-spacing-inline, var(--c-spacing-md));
+  padding-block: 0;
+  width: 100%;
+  flex: 1 1 auto;
+  padding-inline: var(--c-input-spacing-inline);
   background-color: var(--c-input-bg, var(--c-form-control-bg));
   box-shadow: var(--c-input-shadow);
+
+  /* Detect mobile devices and up the font size of inputs to avoid zoom on focus */
+  @media (pointer: none), (pointer: coarse) {
+    font-size: 1rem;
+  }
 `;
 
-export const inputStyles = css`
+export const baseFieldStyles = css`
   :host(:not([label-sr-only])) .form-field__group-one {
     margin-bottom: var(--c-spacing-sm);
   }
 
+  :host([has-feedback-for='error']) {
+    color: var(--c-color-danger-on-normal);
+
+    ::slotted([slot='input']) {
+      border-color: var(--c-color-danger-border-emphasis);
+    }
+  }
+
   ::slotted(label) {
     line-height: 1;
     font-weight: bold;
     font-size: var(--text-sm);
   }
 
-  ::slotted([slot='input']) {
-    ${baseInputStyles}
-  }
-
-  /* Detect mobile devices and up the font size of inputs to avoid zoom on focus */
-  @media (pointer: none), (pointer: coarse) {
-    ::slotted([slot='input']) {
-      font-size: 1rem;
-    }
-  }
-
   .form-field__help-text {
     font-size: 1em;
     color: var(--c-fg-muted);
@@ -43,3 +48,11 @@ export const inputStyles = css`
     margin-bottom: var(--c-spacing-sm);
   }
 `;
+
+export const inputStyles = css`
+  ${baseFieldStyles}
+
+  ::slotted([slot='input']) {
+    ${baseInputStyles}
+  }
+`;
diff --git a/packages/craftcms-cp/src/styles/shared/preflight.css b/packages/craftcms-cp/src/styles/shared/preflight.css
index a4e38b05094..439dc2684aa 100644
--- a/packages/craftcms-cp/src/styles/shared/preflight.css
+++ b/packages/craftcms-cp/src/styles/shared/preflight.css
@@ -216,3 +216,11 @@ ul,
 menu {
   list-style: none;
 }
+
+/*
+Make images more responsive
+ */
+img {
+  max-width: 100%;
+  height: auto;
+}
diff --git a/packages/craftcms-cp/src/styles/shared/tokens.css b/packages/craftcms-cp/src/styles/shared/tokens.css
index 355ee6334d0..f61d86c1e56 100644
--- a/packages/craftcms-cp/src/styles/shared/tokens.css
+++ b/packages/craftcms-cp/src/styles/shared/tokens.css
@@ -68,6 +68,16 @@
   --c-color-warning-on-emphasis: var(--color-yellow-50);
   --c-color-warning-on-subtle: var(--color-yellow-800);
 
+  --c-color-danger-bg-emphasis: var(--color-red-600);
+  --c-color-danger-bg-normal: var(--color-red-100);
+  --c-color-danger-bg-subtle: var(--color-red-50);
+  --c-color-danger-border-emphasis: var(--color-red-600);
+  --c-color-danger-border-normal: var(--color-red-400);
+  --c-color-danger-border-subtle: var(--color-red-600);
+  --c-color-danger-on-emphasis: var(--color-red-50);
+  --c-color-danger-on-normal: var(--color-red-700);
+  --c-color-danger-on-subtle: var(--color-red-800);
+
   --c-font-body:
     system-ui, BlinkMacSystemFont, -apple-system, 'Segoe UI', 'Roboto',
     'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans',
@@ -87,9 +97,10 @@
   --c-radius-sm: 3px;
   --c-radius-md: 4px;
   --c-radius-lg: 6px;
+  --c-radius-xl: 12px;
   --c-radius-full: calc(Infinity * 1px);
 
-  --c-spacing: 0.25rem;
+  --c-spacing: 0.125rem;
   --c-spacing-1px: 1px;
   --c-spacing-xs: calc(var(--spacing) * 0.5);
   --c-spacing-sm: calc(var(--spacing) * 1);
@@ -98,6 +109,10 @@
   --c-spacing-xl: calc(var(--spacing) * 8);
   --c-spacing-2xl: calc(var(--spacing) * 16);
 
+  @media screen and (min-width: 1024px) {
+    --c-spacing: 0.25rem;
+  }
+
   --c-size-touch-target: calc(34rem / 16);
 
   --c-size-icon-xs: calc(10rem / 16);
@@ -223,6 +238,24 @@
   --c-button-danger-fg-hover: var(--c-button-danger-fg);
 
   /** Appearances **/
+  /* Generic Panes */
+  --c-pane-bg: var(--c-bg-overlay);
+  --c-pane-fg: var(--c-fg-text);
+  --c-pane-border: 1px solid transparent;
+  --c-pane-radius: var(--c-radius-md);
+
+  /* Callouts */
+  --c-callout-radius: var(--c-pane-radius);
+
+  /* Modals */
+  --c-modal-bg: var(--c-pane-bg);
+  --c-modal-fg: var(--c-pane-fg);
+  --c-modal-radius: var(--c-radius-lg);
+  --c-modal-border: var(--c-pane-border);
+  --c-modal-shadow:
+    0 0 0 1px hsl(from var(--color-gray-400) h s l / 25%),
+    0 25px 100px hsl(from var(--color-gray-900) h s l / 50%);
+
   /* Plain */
 
   /* Chip */
@@ -304,6 +337,16 @@
   --c-color-warning-on-emphasis: var(--color-yellow-950);
   --c-color-warning-on-subtle: var(--color-yellow-100);
 
+  --c-color-danger-bg-emphasis: var(--color-red-500);
+  --c-color-danger-bg-normal: var(--color-red-800);
+  --c-color-danger-bg-subtle: var(--color-red-900);
+  --c-color-danger-border-emphasis: var(--color-red-600);
+  --c-color-danger-border-normal: var(--color-red-900);
+  --c-color-danger-border-subtle: var(--color-red-900);
+  --c-color-danger-on-emphasis: var(--color-red-100);
+  --c-color-danger-on-normal: var(--color-red-200);
+  --c-color-danger-on-subtle: var(--color-red-400);
+
   /* Tooltip */
 
   /* Button */
diff --git a/packages/craftcms-cp/src/utilities/translate.ts b/packages/craftcms-cp/src/utilities/translate.ts
index 019fa07b88a..6bbc61c9724 100644
--- a/packages/craftcms-cp/src/utilities/translate.ts
+++ b/packages/craftcms-cp/src/utilities/translate.ts
@@ -205,10 +205,11 @@ export function formatMessage(pattern: string, params: object): string {
 export function t(
   category: string,
   message: string,
-  params: Record<any, any>,
-  store: Record<string, any> = {}
+  params?: Record<any, any>,
+  store?: Record<string, any>
 ): string {
   if (
+    store &&
     typeof store[category] !== 'undefined' &&
     typeof store[category][message] !== 'undefined'
   ) {
diff --git a/resources/css/cp.css b/resources/css/cp.css
index e5c2dfcd34d..a0ade90b72a 100644
--- a/resources/css/cp.css
+++ b/resources/css/cp.css
@@ -1,7 +1,10 @@
 /**
 CP Styles
  */
-@import '@craftcms/cp';
+@layer theme, base, components, cp, utilities;
+@import 'tailwindcss/theme.css' layer(theme) prefix(tw);
+@import 'tailwindcss/utilities.css' layer(utilities) prefix(tw);
+@import '@craftcms/cp' layer(cp);
 
 @import './global-sidebar.css';
 
@@ -9,3 +12,11 @@ CP Styles
   --global-sidebar-width: calc(226rem / 16);
   --header-height: calc(44rem / 16);
 }
+
+/**
+@TODO this should be in the @craftcms/cp package
+ */
+img {
+  max-width: 100%;
+  height: auto;
+}
diff --git a/packages/craftcms-asset-bundles/bundles/installer/dist/images/account.png b/resources/images/install/account.png
similarity index 100%
rename from packages/craftcms-asset-bundles/bundles/installer/dist/images/account.png
rename to resources/images/install/account.png
diff --git a/packages/craftcms-asset-bundles/bundles/installer/dist/images/db.png b/resources/images/install/db.png
similarity index 100%
rename from packages/craftcms-asset-bundles/bundles/installer/dist/images/db.png
rename to resources/images/install/db.png
diff --git a/packages/craftcms-asset-bundles/bundles/installer/dist/images/installer-bg.png b/resources/images/install/installer-bg.png
similarity index 100%
rename from packages/craftcms-asset-bundles/bundles/installer/dist/images/installer-bg.png
rename to resources/images/install/installer-bg.png
diff --git a/packages/craftcms-asset-bundles/bundles/installer/dist/images/site.png b/resources/images/install/site.png
similarity index 100%
rename from packages/craftcms-asset-bundles/bundles/installer/dist/images/site.png
rename to resources/images/install/site.png
diff --git a/resources/js/components/Callout.vue b/resources/js/components/Callout.vue
new file mode 100644
index 00000000000..0496beee389
--- /dev/null
+++ b/resources/js/components/Callout.vue
@@ -0,0 +1,43 @@
+<script setup lang="ts">
+  withDefaults(
+    defineProps<{
+      variant?: 'danger' | 'success' | 'warning' | 'info';
+      appearance?: 'emphasis' | 'default' | 'outline' | 'plain';
+    }>(),
+    {variant: 'info', appearance: 'default'}
+  );
+</script>
+
+<template>
+  <div
+    :class="{
+      callout: true,
+      'callout--danger': variant === 'danger',
+      'callout--info': variant === 'info',
+      'callout--success': variant === 'success',
+      'callout--warning': variant === 'warning',
+      'callout--emphasis': appearance === 'emphasis',
+      'callout--default': appearance === 'default',
+      'callout--outline': appearance === 'outline',
+      'callout--plain': appearance === 'plain',
+    }"
+  >
+    <slot></slot>
+  </div>
+</template>
+
+<style scoped lang="scss">
+  .callout {
+    background-color: var(--c-callout-bg);
+    padding: var(--c-callout-padding, var(--c-spacing-md));
+    border: 1px solid var(--c-callout-border-color);
+    color: var(--c-callout-fg);
+    border-radius: var(--c-callout-radius);
+  }
+
+  .callout--danger {
+    --c-callout-border-color: var(--c-color-danger-border-normal);
+    --c-callout-fg: var(--c-color-danger-on-normal);
+    --c-callout-bg: var(--c-color-danger-bg-normal);
+  }
+</style>
diff --git a/resources/js/components/Modal.vue b/resources/js/components/Modal.vue
new file mode 100644
index 00000000000..45df441787d
--- /dev/null
+++ b/resources/js/components/Modal.vue
@@ -0,0 +1,88 @@
+<script setup lang="ts">
+  import {ref, watch} from 'vue';
+
+  const props = withDefaults(
+    defineProps<{
+      isActive?: boolean;
+      overlay?: boolean;
+    }>(),
+    {isActive: false, overlay: true}
+  );
+
+  const overlayActive = ref(false);
+  const contentDelay = props.overlay ? 200 : 0;
+
+  watch(
+    () => props.isActive,
+    (newValue) => {
+      if (newValue) {
+        setTimeout(() => {
+          overlayActive.value = newValue;
+        }, contentDelay);
+      }
+    }
+  );
+</script>
+
+<template>
+  <Transition name="body">
+    <div class="modal" v-if="overlayActive">
+      <slot></slot>
+    </div>
+  </Transition>
+
+  <Transition name="fade" @after-enter="overlayActive = true" v-if="overlay">
+    <div class="overlay" v-if="isActive"></div>
+  </Transition>
+</template>
+
+<style scoped>
+  .modal {
+    max-width: calc(100vw - (var(--c-spacing-lg) * 2));
+    max-height: calc(100vh - (var(--c-spacing-lg) * 2));
+    box-shadow: var(--c-modal-shadow);
+    -webkit-overflow-scrolling: touch;
+    border-radius: var(--c-modal-radius);
+    border: var(--c-modal-border);
+    position: relative;
+    z-index: 1;
+    overflow-y: scroll;
+  }
+
+  .overlay {
+    position: fixed;
+    inset: 0;
+    background-color: rgba(0, 0, 0, 0.5);
+  }
+
+  /* Only animate when the user is cool with it */
+  @media (prefers-reduced-motion: no-preference) {
+    .body-enter-active {
+      animation: body-in 200ms;
+    }
+    .body-leave-active {
+      animation: body-in 200ms reverse;
+    }
+
+    @keyframes body-in {
+      0% {
+        opacity: 0;
+        transform: scale(0.9) translateY(2rem);
+      }
+      100% {
+        opacity: 1;
+        transform: scale(1) translateY(0);
+      }
+    }
+
+    .fade-enter-active,
+    .fade-leave-active {
+      transition: opacity 0.5s ease;
+    }
+
+    .fade-enter-from,
+    .fade-leave-to {
+      opacity: 0;
+    }
+  }
+</style>
diff --git a/resources/js/components/Pane.vue b/resources/js/components/Pane.vue
new file mode 100644
index 00000000000..f01d0986f7a
--- /dev/null
+++ b/resources/js/components/Pane.vue
@@ -0,0 +1,94 @@
+<script setup lang="ts">
+  import {type Component, computed, useSlots} from 'vue';
+
+  const slots = useSlots();
+
+  withDefaults(
+    defineProps<{
+      as?: Component | string;
+      variant?: 'plain' | 'error';
+      hideHeader?: boolean;
+      hideFooter?: boolean;
+    }>(),
+    {
+      as: 'div',
+      hideHeader: false,
+      hideFooter: false,
+    }
+  );
+
+  const showHeader = computed(() => {
+    return slots.header;
+  });
+
+  const showFooter = computed(() => {
+    return (
+      slots.footer ||
+      slots.actions ||
+      slots['primary-action'] ||
+      slots['secondary-action']
+    );
+  });
+</script>
+
+<template>
+  <component :is="as" class="pane" v-bind="$attrs">
+    <slot name="header" v-if="showHeader">
+      <div class="pane__header">
+        <slot name="title"></slot>
+        <slot name="header-actions"></slot>
+      </div>
+    </slot>
+
+    <slot name="body">
+      <div class="pane__body">
+        <slot></slot>
+      </div>
+    </slot>
+    <slot name="footer" v-if="showFooter">
+      <div class="pane__footer">
+        <slot name="actions">
+          <div class="actions">
+            <slot name="primary-action"></slot>
+            <slot name="secondary-action"></slot>
+          </div>
+        </slot>
+      </div>
+    </slot>
+  </component>
+</template>
+
+<style scoped lang="scss">
+  .pane {
+    --_pane-spacing: var(--c-spacing-lg);
+
+    background-color: var(--c-pane-bg);
+    overflow-y: scroll;
+    -webkit-overflow-scrolling: touch;
+    border-radius: var(--c-pane-radius);
+    border: var(--c-pane-border);
+    display: grid;
+  }
+
+  .pane__header {
+    padding-inline: var(--_pane-spacing);
+    padding-block: var(--_pane-spacing);
+  }
+
+  .pane__body {
+    padding-inline: var(--_pane-spacing);
+    padding-block: var(--_pane-spacing);
+  }
+
+  .pane__footer {
+    border-top: 1px solid var(--c-color-neutral-border-subtle);
+    padding-inline: var(--_pane-spacing);
+    padding-block: var(--_pane-spacing);
+  }
+
+  .actions {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+</style>
diff --git a/resources/js/components/VarDump.vue b/resources/js/components/VarDump.vue
new file mode 100644
index 00000000000..fd9bdca62f8
--- /dev/null
+++ b/resources/js/components/VarDump.vue
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+  defineProps<{
+    data: any;
+  }>();
+</script>
+
+<template>
+  <pre>{{ JSON.stringify(data, null, 2) }}</pre>
+</template>
+
+<style scoped lang="scss">
+  pre {
+    font-size: 0.7rem;
+    padding: var(--c-spacing-md);
+    border: 1px solid var(--color-slate-400);
+    background-color: var(--color-slate-200);
+    border-radius: var(--c-radius-md);
+    overflow: auto;
+  }
+</style>
diff --git a/resources/js/components/install/AccountFields.vue b/resources/js/components/install/AccountFields.vue
new file mode 100644
index 00000000000..bb05da14366
--- /dev/null
+++ b/resources/js/components/install/AccountFields.vue
@@ -0,0 +1,76 @@
+<script setup lang="ts">
+  import {t} from '@craftcms/cp';
+  import {computed} from 'vue';
+  import {useFocusField} from '@/composables/useFocusField';
+
+  const emit = defineEmits<{
+    (e: 'success'): void;
+    (e: 'click:back'): void;
+    (e: 'update:modelValue', value: any): void;
+  }>();
+
+  const props = withDefaults(
+    defineProps<{
+      modelValue?: any;
+      errors?: Record<string, string[]>;
+      showUsername?: boolean;
+    }>(),
+    {showUsername: true, modelValue: () => ({}), errors: () => ({})}
+  );
+
+  const model = computed({
+    get() {
+      return props.modelValue;
+    },
+    set(value) {
+      emit('update:modelValue', value);
+    },
+  });
+
+  useFocusField('username-input');
+</script>
+
+<template>
+  <craft-input
+    v-if="showUsername"
+    :label="t('app', 'Username')"
+    id="account-username"
+    name="username"
+    v-model="model.username"
+    :has-feedback-for="errors?.username ? 'error' : ''"
+    maxlength="255"
+    ref="username-input"
+  >
+    <ul class="error-list" v-if="errors?.username" slot="feedback">
+      <li v-for="error in errors?.username">{{ error }}</li>
+    </ul>
+  </craft-input>
+  <craft-input
+    :label="t('app', 'Email')"
+    id="account-email"
+    name="email"
+    v-model="model.email"
+    maxlength="255"
+    autocomplete="email"
+    :has-feedback-for="errors?.email ? 'error' : ''"
+    type="email"
+  >
+    <ul class="error-list" v-if="errors?.email" slot="feedback">
+      <li v-for="error in errors?.email">{{ error }}</li>
+    </ul>
+  </craft-input>
+  <craft-input-password
+    :label="t('app', 'Password')"
+    id="account-password"
+    name="password"
+    v-model="model.password"
+    :has-feedback-for="errors?.password ? 'error' : ''"
+    autocomplete="new-password"
+  >
+    <ul class="error-list" v-if="errors?.password" slot="feedback">
+      <li v-for="error in errors?.password">{{ error }}</li>
+    </ul>
+  </craft-input-password>
+</template>
+
+<style scoped lang="scss"></style>
diff --git a/resources/js/components/install/DbFields.vue b/resources/js/components/install/DbFields.vue
new file mode 100644
index 00000000000..f7443035fca
--- /dev/null
+++ b/resources/js/components/install/DbFields.vue
@@ -0,0 +1,176 @@
+<script setup lang="ts">
+  import {t} from '@craftcms/cp';
+  import {computed, defineEmits, defineProps} from 'vue';
+  import Callout from '@/components/Callout.vue';
+  import {useFocusField} from '@/composables/useFocusField';
+
+  const emit = defineEmits<{
+    (e: 'update:modelValue', value: any): void;
+  }>();
+  const props = withDefaults(
+    defineProps<{
+      modelValue?: any;
+      errors?: Record<string, string[]>;
+    }>(),
+    {modelValue: () => ({}), errors: () => ({})}
+  );
+
+  const model = computed({
+    get() {
+      return props.modelValue;
+    },
+    set(value) {
+      emit('update:modelValue', value);
+    },
+  });
+
+  function handleUpdate(event: CustomEvent) {
+    const target = event.target as HTMLSelectElement & {modelValue: string};
+    if (target) {
+      model.value[target.name] = target.modelValue;
+    }
+  }
+
+  const options = [
+    {value: 'mysql', label: 'MySQL'},
+    {value: 'pgsql', label: 'PostgreSQL'},
+  ];
+
+  useFocusField('db-driver');
+</script>
+
+<template>
+  <Callout variant="danger" v-if="errors && errors['*']">
+    <ul>
+      <li v-for="formError in errors['*']">
+        {{ formError }}
+      </li>
+    </ul>
+  </Callout>
+
+  <div class="tw:grid tw:grid-cols-5 tw:gap-2">
+    <div class="tw:col-span-2">
+      <craft-select
+        :label="t('app', 'Driver')"
+        name="driver"
+        id="db-driver"
+        .modelValue="model.driver"
+        @model-value-changed="handleUpdate"
+        ref="db-driver"
+      >
+        <select slot="input">
+          <option
+            v-for="option in options"
+            :key="option.value"
+            :value="option.value"
+          >
+            {{ option.label }}
+          </option>
+        </select>
+
+        <ul class="error-list" v-if="errors?.driver" slot="feedback">
+          <li v-for="error in errors?.driver">{{ error }}</li>
+        </ul>
+      </craft-select>
+    </div>
+    <div class="tw:col-span-2">
+      <craft-input
+        :label="t('app', 'Host')"
+        name="host"
+        id="db-host"
+        v-model="model.host"
+        placeholder="127.0.0.1"
+      >
+        <ul class="error-list" v-if="errors?.host" slot="feedback">
+          <li v-for="error in errors?.host">{{ error }}</li>
+        </ul>
+      </craft-input>
+    </div>
+    <div>
+      <craft-input
+        :label="t('app', 'Port')"
+        name="port"
+        id="db-port"
+        v-model="model.port"
+        size="7"
+      >
+        <ul class="error-list" v-if="errors?.port" slot="feedback">
+          <li v-for="error in errors?.port">{{ error }}</li>
+        </ul>
+      </craft-input>
+    </div>
+
+    <ul class="error-list tw:col-span-5" v-if="errors?.server">
+      <li v-for="formError in errors.server">
+        {{ formError }}
+      </li>
+    </ul>
+  </div>
+
+  <div class="tw:grid tw:grid-cols-2 tw:gap-2">
+    <div>
+      <craft-input
+        :label="t('app', 'Username')"
+        name="username"
+        id="db-username"
+        v-model="model.username"
+        placeholder="root"
+      >
+        <ul class="error-list" v-if="errors?.username" slot="feedback">
+          <li v-for="error in errors?.username">{{ error }}</li>
+        </ul>
+      </craft-input>
+    </div>
+
+    <div>
+      <craft-input-password
+        :label="t('app', 'Password')"
+        name="password"
+        id="db-password"
+        v-model="model.password"
+      >
+        <ul class="error-list" v-if="errors?.password" slot="feedback">
+          <li v-for="error in errors?.password">{{ error }}</li>
+        </ul>
+      </craft-input-password>
+    </div>
+
+    <ul class="error-list tw:col-span-2" v-if="errors?.user">
+      <li v-for="formError in errors.user">
+        {{ formError }}
+      </li>
+    </ul>
+  </div>
+
+  <div class="tw:grid tw:grid-cols-4 tw:gap-2">
+    <div class="tw:col-span-2">
+      <craft-input
+        :label="t('app', 'Database Name')"
+        name="name"
+        id="db-database"
+        v-model="model.database"
+      >
+        <ul class="error-list" v-if="errors?.database" slot="feedback">
+          <li v-for="error in errors?.database">{{ error }}</li>
+        </ul>
+      </craft-input>
+    </div>
+
+    <div>
+      <craft-input
+        :label="t('app', 'Prefix')"
+        name="prefix"
+        id="db-prefix"
+        v-model="model.prefix"
+        maxlength="5"
+        size="7"
+      >
+        <ul class="error-list" v-if="errors?.prefix" slot="feedback">
+          <li v-for="error in errors?.prefix">{{ error }}</li>
+        </ul>
+      </craft-input>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss"></style>
diff --git a/resources/js/components/install/InstallingScreen.vue b/resources/js/components/install/InstallingScreen.vue
new file mode 100644
index 00000000000..3cf7e4118e0
--- /dev/null
+++ b/resources/js/components/install/InstallingScreen.vue
@@ -0,0 +1,78 @@
+<script setup lang="ts">
+  import {t} from '@craftcms/cp';
+  import {defineProps, onMounted} from 'vue';
+  import {usePost} from '@/composables/useFetch';
+  import {usePage} from '@inertiajs/vue3';
+  import Pane from '@/components/Pane.vue';
+
+  const {props: pageProps} = usePage();
+
+  const props = defineProps<{
+    data: any;
+  }>();
+
+  const {
+    execute: install,
+    error,
+    isSuccess,
+    isLoading,
+    isError,
+  } = usePost('/admin/actions/install/install', {
+    onSuccess: (data) => {
+      setTimeout(() => {
+        window.location.href = pageProps.postCpLoginRedirect as string;
+      }, 1000);
+    },
+  });
+
+  onMounted(async () => {
+    await install(props.data);
+  });
+</script>
+
+<template>
+  <Pane class="tw:max-w-[80ch] tw:mx-auto">
+    <template v-if="isLoading">
+      <div class="content">
+        <h2>{{ t('app', 'Installing Craft CMS…') }}</h2>
+        <craft-spinner></craft-spinner>
+      </div>
+    </template>
+
+    <template v-else-if="isSuccess">
+      <div class="content">
+        <h2>{{ t('app', 'Craft is installed! 🎉') }}</h2>
+        <div class="tw:flex tw:justify-center tw:items-center">
+          <craft-icon
+            name="circle-check"
+            variant="regular"
+            style="color: var(--c-color-success-bg-emphasis); font-size: 2.5rem"
+          ></craft-icon>
+        </div>
+      </div>
+    </template>
+
+    <template v-if="isError">
+      <div class="content">
+        <h2>{{ t('app', 'Install failed 😞') }}</h2>
+
+        <div
+          class="tw:text-left tw:border tw:border-red-500 tw:rounded tw:p-4 tw:text-red-800 tw:bg-red-50 tw:font-mono tw:text-xs"
+        >
+          {{ error.message }}
+        </div>
+      </div>
+    </template>
+  </Pane>
+</template>
+
+<style scoped lang="scss">
+  .content {
+    padding: var(--c-spacing-lg);
+    display: grid;
+    justify-content: center;
+    align-items: center;
+    gap: var(--c-spacing-lg);
+    text-align: center;
+  }
+</style>
diff --git a/resources/js/components/install/SiteFields.vue b/resources/js/components/install/SiteFields.vue
new file mode 100644
index 00000000000..9f2f51bc5dc
--- /dev/null
+++ b/resources/js/components/install/SiteFields.vue
@@ -0,0 +1,78 @@
+<script setup lang="ts">
+  import {t} from '@craftcms/cp';
+  import {computed} from 'vue';
+  import {useFocusField} from '@/composables/useFocusField';
+
+  const emit = defineEmits<{
+    (e: 'update:modelValue', data: any): void;
+  }>();
+  const props = withDefaults(
+    defineProps<{
+      modelValue?: any;
+      localeOptions?: Array<{id: string; name: string; selected: boolean}>;
+      errors?: Record<string, string[]>;
+    }>(),
+    {modelValue: () => ({}), errors: () => ({}), localeOptions: () => []}
+  );
+
+  const model = computed({
+    get() {
+      return props.modelValue;
+    },
+    set(value) {
+      emit('update:modelValue', value);
+    },
+  });
+
+  function handleUpdate(event: CustomEvent) {
+    const target = event.target as HTMLSelectElement & {modelValue: string};
+    emit('update:modelValue', {
+      ...model.value,
+      language: target?.modelValue,
+    });
+  }
+
+  useFocusField('site-name');
+</script>
+
+<template>
+  <!-- @TODO add error output -->
+  <craft-input
+    name="name"
+    :label="t('app', 'System Name')"
+    id="site-name"
+    v-model="model.name"
+    maxlength="255"
+    ref="site-name"
+  >
+  </craft-input>
+
+  <!-- @TODO this should be autocomplete -->
+  <craft-input
+    name="baseUrl"
+    :label="t('app', 'Base URL')"
+    v-model="model.baseUrl"
+  >
+  </craft-input>
+
+  <craft-select
+    :label="t('app', 'Language')"
+    id="site-language"
+    name="language"
+    .modelValue="model.language"
+    @model-value-changed="handleUpdate"
+  >
+    <select slot="input">
+      <option
+        v-for="locale in localeOptions"
+        :key="locale.id"
+        :selected="locale.id === model.language"
+        :value="locale.id"
+      >
+        {{ locale.id }} ({{ locale.name }})
+      </option>
+    </select>
+  </craft-select>
+</template>
+
+<style scoped lang="scss"></style>
diff --git a/resources/js/components/install/StepScreen.vue b/resources/js/components/install/StepScreen.vue
new file mode 100644
index 00000000000..830cba86b5a
--- /dev/null
+++ b/resources/js/components/install/StepScreen.vue
@@ -0,0 +1,25 @@
+<script setup lang="ts">
+  withDefaults(
+    defineProps<{
+      illustrationSrc?: string;
+      heading?: string;
+    }>(),
+    {illustrationSrc: '', heading: ''}
+  );
+</script>
+
+<template>
+  <div class="tw:grid tw:md:grid-cols-2 tw:gap-4 tw:items-center">
+    <div class="tw:aspect-[352/455] tw:w-1/2 tw:md:w-3/4 tw:mx-auto">
+      <img loading="lazy" :src="illustrationSrc" alt="" width="368" />
+    </div>
+    <div>
+      <h2 class="tw:mb-4">{{ heading }}</h2>
+      <div class="tw:grid tw:gap-3 tw:pr-6">
+        <slot></slot>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss"></style>
diff --git a/resources/js/composables/useFetch.ts b/resources/js/composables/useFetch.ts
new file mode 100644
index 00000000000..27a33ada99b
--- /dev/null
+++ b/resources/js/composables/useFetch.ts
@@ -0,0 +1,210 @@
+import {
+  computed,
+  type ComputedRef,
+  type Ref,
+  ref,
+  unref,
+  type UnwrapRef,
+  watch,
+} from 'vue';
+import axios, {
+  type AxiosError,
+  type AxiosRequestConfig,
+  type AxiosResponse,
+  type CancelTokenSource,
+} from 'axios';
+
+// Type for URL parameter - can be string, ref, or computed
+type MaybeRef<T> = T | Ref<T> | ComputedRef<T>;
+
+// Options interface
+interface UseAxiosOptions<T = any>
+  extends Omit<AxiosRequestConfig, 'url' | 'params'> {
+  immediate?: boolean;
+  refetch?: boolean;
+  params?: MaybeRef<Record<string, any>>;
+  transform?: (data: T) => T;
+  enabled?: MaybeRef<boolean>;
+  debounce?: number;
+  onSuccess?: (data: T, response: AxiosResponse) => void;
+  onError?: (error: any) => void;
+  initialData?: T | null;
+}
+
+// Return type interface
+interface UseAxiosReturn<T> {
+  data: Ref<UnwrapRef<T> | null>;
+  error: any;
+  state: Ref<AxiosFetchState>;
+  execute: (postData?: any) => Promise<void>;
+  isLoading: ComputedRef<boolean>;
+  isSuccess: ComputedRef<boolean>;
+  isError: ComputedRef<boolean>;
+  refetch: () => Promise<void>;
+  abort: () => void;
+}
+
+export type AxiosFetchState =
+  | 'idle'
+  | 'loading'
+  | 'success'
+  | 'error'
+  | 'aborted';
+
+export function useFetch<T = any>(
+  url: MaybeRef<string>,
+  options: UseAxiosOptions<T> = {}
+): UseAxiosReturn<T> {
+  // Options with defaults
+  const {
+    immediate = true,
+    refetch: refetchOption = true,
+    params,
+    enabled = true,
+    debounce = 0,
+    transform = (data: any) => data as T,
+    onSuccess,
+    onError,
+    initialData = null,
+    method = 'get',
+    ...axiosOptions
+  } = options;
+
+  // Reactive state
+  const data = ref(initialData) as Ref<UnwrapRef<T> | null>;
+  const state = ref<AxiosFetchState>('idle');
+  const error = ref(null);
+
+  const isLoading = computed(() => state.value === 'loading');
+  const isSuccess = computed(() => state.value === 'success');
+  const isError = computed(() => state.value === 'error');
+
+  const computedUrl = computed<string>(() => unref(url));
+  const computedEnabled = computed<boolean>(() => unref(enabled));
+  const computedParams = computed<Record<string, any> | undefined>(() =>
+    unref(params)
+  );
+
+  const computedMethod = computed<string>(() => unref(method.toLowerCase()));
+
+  // Axios cancel token
+  let cancelTokenSource: CancelTokenSource | null = null;
+  let debounceTimer: number | null = null;
+
+  // The actual fetch function
+  const execute = async (postData = {}): Promise<void> => {
+    if (!computedUrl.value || !computedEnabled.value) return;
+
+    // Cancel previous request
+    if (cancelTokenSource) {
+      cancelTokenSource.cancel('Request superseded by new request');
+    }
+
+    cancelTokenSource = axios.CancelToken.source();
+    state.value = 'loading';
+    error.value = null;
+
+    try {
+      const response = await axios<T>({
+        method: computedMethod.value,
+        url: computedUrl.value,
+        params: computedParams.value,
+        cancelToken: cancelTokenSource.token,
+        data: computedMethod.value === 'get' ? undefined : postData,
+        ...axiosOptions,
+      });
+
+      const transformedData = transform(response.data);
+      state.value = 'success';
+      data.value = transformedData as UnwrapRef<T>;
+      onSuccess?.(transformedData, response);
+    } catch (err: AxiosError | any) {
+      if (axios.isCancel(err)) {
+        state.value = 'aborted';
+      } else if (axios.isAxiosError(err)) {
+        console.log('Axios error:', err.response?.data);
+        state.value = 'error';
+        error.value = err.response?.data || err.message || 'Unknown error';
+        onError?.(err);
+      } else {
+        console.log('Unkown error:', err.message);
+        state.value = 'error';
+        error.value = err.message || 'Unknown error';
+      }
+    }
+  };
+
+  const debouncedExecute = (): void => {
+    // Clear existing timer
+    if (debounceTimer) {
+      clearTimeout(debounceTimer);
+    }
+
+    if (debounce > 0) {
+      debounceTimer = setTimeout(() => {
+        execute();
+      }, debounce);
+    } else {
+      execute();
+    }
+  };
+
+  // Watch for changes in URL, params, and enabled state
+  if (refetchOption) {
+    watch(
+      [computedUrl, computedParams, computedEnabled],
+      () => {
+        if (computedEnabled.value) {
+          debouncedExecute();
+        } else {
+          // Clear debounce timer and cancel request when disabled
+          if (debounceTimer) {
+            clearTimeout(debounceTimer);
+          }
+          if (cancelTokenSource) {
+            cancelTokenSource.cancel('Request disabled');
+          }
+        }
+      },
+      {immediate, deep: true}
+    );
+  } else if (immediate && computedEnabled.value) {
+    debouncedExecute();
+  }
+
+  // Manual refetch function
+  const refetch = (): Promise<void> => execute();
+
+  // Cancel function
+  const abort = (): void => {
+    if (debounceTimer) {
+      clearTimeout(debounceTimer);
+    }
+    if (cancelTokenSource) {
+      cancelTokenSource.cancel('Request cancelled by user');
+    }
+  };
+
+  return {
+    data,
+    error,
+    state,
+    isLoading,
+    isSuccess,
+    isError,
+    execute,
+    refetch,
+    abort,
+  };
+}
+
+export function usePost<T = any>(
+  url: MaybeRef<string>,
+  options: UseAxiosOptions<T> = {}
+) {
+  return useFetch(url, {
+    immediate: false,
+    ...options,
+    method: 'post',
+  });
+}
diff --git a/resources/js/composables/useFocusField.ts b/resources/js/composables/useFocusField.ts
new file mode 100644
index 00000000000..fc6d5706991
--- /dev/null
+++ b/resources/js/composables/useFocusField.ts
@@ -0,0 +1,17 @@
+import {useTemplateRef, watch} from 'vue';
+import {LitElement} from 'lit';
+
+export const useFocusField = (refId: string) => {
+  const field = useTemplateRef<LitElement | HTMLElement>(refId);
+  watch(field, async (newValue) => {
+    if (newValue?.tagName.includes('CRAFT-')) {
+      await customElements.whenDefined(newValue.tagName.toLowerCase());
+
+      // Wait for LitElement to complete its first render
+      await (newValue as LitElement)?.updateComplete;
+    }
+
+    // Now it's safe to focus or interact
+    newValue?.focus();
+  });
+};
diff --git a/resources/js/composables/useInstall.ts b/resources/js/composables/useInstall.ts
new file mode 100644
index 00000000000..1ae66c57d58
--- /dev/null
+++ b/resources/js/composables/useInstall.ts
@@ -0,0 +1,75 @@
+import {computed, ref} from 'vue';
+import {useStepper} from '@vueuse/core';
+import {t} from '@craftcms/cp';
+
+export const useInstall = () => {
+  const possibleSteps = ref<Record<string, any>>({
+    start: {},
+    license: {
+      id: 'license',
+      label: 'License',
+    },
+    account: {
+      id: 'account',
+      label: 'Account',
+      action: '/admin/actions/install/validate-account',
+      heading: t('app', 'Create your account'),
+    },
+    db: {
+      id: 'db',
+      label: 'Database',
+      action: '/admin/actions/install/validate-db',
+      heading: t('app', 'Connect to your database'),
+    },
+    site: {
+      id: 'site',
+      label: 'Site',
+      action: '/admin/actions/install/validate-site',
+      heading: t('app', 'Set up your site'),
+      submitLabel: t('app', 'Finish up'),
+    },
+    installing: {
+      label: 'Installing',
+      id: 'installing',
+    },
+  });
+
+  const steps = computed(() => {
+    return Object.keys(possibleSteps.value).reduce<Record<string, any>>(
+      (acc, key) => {
+        const step = possibleSteps.value[key];
+        const hidden = step.hidden ?? false;
+
+        if (!hidden) {
+          acc[key] = step;
+        }
+
+        return acc;
+      },
+      {}
+    );
+  });
+
+  const dotSteps = computed(() => {
+    return Object.keys(steps.value).reduce<Record<string, any>>((acc, key) => {
+      const step = steps.value[key];
+      if (step.label ?? false) {
+        acc[key] = step;
+      }
+
+      return acc;
+    }, {});
+  });
+
+  const stepper = useStepper(steps);
+  const currentId = computed(
+    () => stepper.stepNames.value[stepper.index.value]
+  );
+
+  return {
+    ...stepper,
+    possibleSteps,
+    currentId,
+    dotSteps,
+  };
+};
diff --git a/resources/js/cp.ts b/resources/js/cp.ts
index da873f5fe65..c61c64fc686 100644
--- a/resources/js/cp.ts
+++ b/resources/js/cp.ts
@@ -1,6 +1,24 @@
+import type {DefineComponent} from 'vue';
+import {createApp, h} from 'vue';
+import {resolvePageComponent} from 'laravel-vite-plugin/inertia-helpers';
+import {createInertiaApp} from '@inertiajs/vue3';
 import '@craftcms/cp';
 
 /**
  * Components
  */
 import './components/CpGlobalSidebar.js';
+
+// noinspection JSIgnoredPromiseFromCall
+createInertiaApp({
+  resolve: (name) =>
+    resolvePageComponent(
+      `./pages/${name}.vue`,
+      import.meta.glob<DefineComponent>('./pages/**/*.vue')
+    ),
+  setup({el, App, props, plugin}) {
+    createApp({render: () => h(App, props)})
+      .use(plugin)
+      .mount(el);
+  },
+});
diff --git a/resources/js/pages/Install.vue b/resources/js/pages/Install.vue
new file mode 100644
index 00000000000..4b4f622cca4
--- /dev/null
+++ b/resources/js/pages/Install.vue
@@ -0,0 +1,308 @@
+<script setup lang="ts">
+  import {Deferred, Head} from '@inertiajs/vue3';
+  import {t} from '@craftcms/cp';
+  import backgroundUrl from '../../images/install/installer-bg.png';
+  import {computed, reactive, ref, watchEffect} from 'vue';
+  import AccountFields from '@/components/install/AccountFields.vue';
+  import SiteFields from '@/components/install/SiteFields.vue';
+  import {useInstall} from '@/composables/useInstall';
+  import accountBg from '../../images/install/account.png';
+  import siteBg from '../../images/install/site.png';
+  import dbBg from '../../images/install/db.png';
+  import DbFields from '@/components/install/DbFields.vue';
+  import axios from 'axios';
+  import InstallingScreen from '@/components/install/InstallingScreen.vue';
+  import Pane from '@/components/Pane.vue';
+  import Modal from '@/components/Modal.vue';
+  import StepScreen from '@/components/install/StepScreen.vue';
+
+  const backgroundImageUrl = computed(() => `url(${backgroundUrl})`);
+  const props = defineProps<{
+    dbConfig: {
+      driver: 'mysql' | 'pgsql';
+      url: string | null;
+      host: string | null;
+      port: string | null;
+      database: string | null;
+      username: string | null;
+      password: string | null;
+      prefix: string | null;
+    };
+    localeOptions?: Array<{id: string; name: string; selected: boolean}>;
+    licenseHtml?: string;
+    defaultSystemName: string;
+    defaultSiteUrl: string;
+    defaultSiteLanguage: string;
+    showDbScreen: boolean;
+  }>();
+
+  const {
+    dotSteps,
+    current,
+    currentId,
+    goTo,
+    goToNext,
+    goToPrevious,
+    isCurrent,
+    possibleSteps,
+  } = useInstall();
+
+  const state = ref<'idle' | 'loading' | 'error'>('idle');
+
+  watchEffect(() => {
+    possibleSteps.value.db.hidden = props.showDbScreen;
+  });
+
+  function beginInstall() {
+    goTo('license');
+  }
+
+  const errors = reactive<Record<string, any>>({
+    account: {},
+    db: {},
+    site: {},
+  });
+
+  const formData = reactive<Record<string, object>>({
+    account: {
+      username: '',
+      email: '',
+      password: '',
+    },
+    db: {
+      driver: props.dbConfig.driver,
+      host: props.dbConfig.host,
+      port: props.dbConfig.port,
+      database: props.dbConfig.database,
+      username: props.dbConfig.username,
+      password: props.dbConfig.password,
+      prefix: props.dbConfig.prefix,
+    },
+    site: {
+      name: props.defaultSystemName,
+      baseUrl: props.defaultSiteUrl,
+      language: props.defaultSiteLanguage,
+    },
+  });
+
+  const modalActive = computed(() => !isCurrent('start'));
+
+  async function handleSubmit(e: Event) {
+    if (state.value === 'loading') {
+      return;
+    }
+
+    errors[currentId.value!] = null;
+
+    const form = e.currentTarget as HTMLFormElement;
+    try {
+      state.value = 'loading';
+      await axios.post(form.action, formData[currentId.value!]);
+      goToNext();
+      state.value = 'idle';
+    } catch (e: any) {
+      errors[currentId.value!] = e.response.data.errors;
+      state.value = 'error';
+    }
+  }
+</script>
+
+<template>
+  <Head :title="t('app', 'Install Craft CMS')" />
+
+  <div class="install">
+    <template v-if="isCurrent('start')">
+      <craft-button
+        type="button"
+        @click="beginInstall"
+        variant="primary"
+        class="begin-button"
+      >
+        {{ t('app', 'Install Craft CMS') }}
+        <craft-icon name="arrow-right" slot="suffix"></craft-icon>
+      </craft-button>
+    </template>
+
+    <Modal :is-active="modalActive" :overlay="false">
+      <!-- License screen -->
+      <template v-if="isCurrent('license')">
+        <Pane class="tw:max-w-[80ch] tw:mx-auto">
+          <Deferred data="licenseHtml">
+            <template #fallback>
+              <div class="tw:flex tw:justify-center">
+                <craft-spinner></craft-spinner>
+              </div>
+            </template>
+
+            <div class="license" v-html="licenseHtml"></div>
+          </Deferred>
+
+          <template #actions>
+            <div class="tw:flex tw:justify-center tw:w-full">
+              <craft-button
+                type="button"
+                variant="primary"
+                @click="goTo('account')"
+              >
+                {{ t('app', 'Got it') }}
+              </craft-button>
+            </div>
+          </template>
+        </Pane>
+      </template>
+
+      <!-- Installing -->
+      <template v-else-if="isCurrent('installing')">
+        <InstallingScreen :data="formData" @success="goToNext()" />
+      </template>
+
+      <!-- Form screens -->
+      <template v-else>
+        <div class="tw:max-w-[80ch]">
+          <Pane
+            as="form"
+            :action="current.action"
+            @submit.prevent="handleSubmit"
+          >
+            <StepScreen
+              :illustration-src="accountBg"
+              :heading="current.heading"
+              v-if="isCurrent('account')"
+              class="screen"
+            >
+              <AccountFields
+                v-if="isCurrent('account')"
+                v-model="formData.account"
+                :errors="errors.account"
+              />
+            </StepScreen>
+            <StepScreen
+              :illustration-src="dbBg"
+              :heading="current.heading"
+              v-if="isCurrent('db')"
+              class="screen"
+            >
+              <DbFields v-model="formData.db" :errors="errors.db" />
+            </StepScreen>
+
+            <StepScreen
+              :illustration-src="siteBg"
+              :heading="current.heading"
+              v-if="isCurrent('site')"
+              class="screen"
+            >
+              <Deferred data="localeOptions">
+                <template #fallback>
+                  <craft-spinner></craft-spinner>
+                </template>
+
+                <SiteFields
+                  v-model="formData.site"
+                  :localeOptions="localeOptions"
+                  :errors="errors.site"
+                />
+              </Deferred>
+            </StepScreen>
+
+            <template #actions>
+              <div class="tw:grid tw:grid-cols-3 tw:items-center tw:gap-2">
+                <craft-button
+                  type="button"
+                  @click="goToPrevious"
+                  appearance="plain"
+                  class="tw:justify-self-start"
+                >
+                  {{ t('app', 'Back') }}
+                  <craft-icon name="arrow-left" slot="prefix"></craft-icon>
+                </craft-button>
+                <ul class="tw:flex tw:gap-2 tw:justify-center">
+                  <li v-for="(step, id) in dotSteps" :key="id">
+                    <span
+                      class="dot"
+                      :class="{
+                        'dot--active': isCurrent(id),
+                      }"
+                    >
+                      <span class="tw:sr-only">
+                        {{ step.label }}
+                      </span>
+                    </span>
+                  </li>
+                </ul>
+                <craft-button
+                  class="tw:justify-self-end"
+                  type="submit"
+                  variant="primary"
+                  :loading="state === 'loading'"
+                >
+                  {{ current.submitLabel ?? t('app', 'Next') }}
+                  <craft-icon name="arrow-right" slot="suffix"></craft-icon>
+                </craft-button>
+              </div>
+            </template>
+          </Pane>
+        </div>
+      </template>
+    </Modal>
+  </div>
+</template>
+
+<style scoped lang="scss">
+  .install {
+    background-image: v-bind(backgroundImageUrl);
+    background-position: 50% 50%;
+    background-repeat: no-repeat;
+    background-size: cover;
+    height: 100vh;
+    display: grid;
+    place-items: center;
+    justify-items: center;
+  }
+
+  .begin-button {
+    border-radius: var(--c-radius-lg);
+    font-size: calc(19rem / 16);
+    min-height: calc(50rem / 16);
+    padding-block: 0;
+    padding-inline: 1.5em;
+    box-shadow:
+      inset 0 1px #fff3,
+      inset 0 -1px #0002,
+      0 0 0 1px #21377066,
+      0 0 1px 2px #21377055,
+      0 10px 10px -10px #213770,
+      0 10px 20px -10px #213770;
+  }
+
+  .dot {
+    display: inline-block;
+    appearance: none;
+    border: 1px solid var(--c-color-neutral-border-subtle);
+    background-color: var(--c-color-neutral-bg-subtle);
+    border-radius: var(--c-radius-full);
+    padding: 0;
+    width: calc(10rem / 16);
+    height: calc(10rem / 16);
+    flex-shrink: 0;
+  }
+
+  .dot--active {
+    background-color: var(--c-color-accent-bg-emphasis);
+    border: 1px solid var(--c-color-accent-border-emphasis);
+  }
+
+  .license {
+    font-size: calc(13rem / 16);
+    font-family: var(--c-font-mono);
+    padding: var(--c-spacing-lg);
+
+    :deep(* + *) {
+      margin-block: 1em;
+    }
+
+    :deep(ol) {
+      list-style-type: decimal;
+      padding-inline-start: 2.25em;
+    }
+  }
+</style>
diff --git a/resources/views/app.blade.php b/resources/views/app.blade.php
new file mode 100644
index 00000000000..a6f464abbeb
--- /dev/null
+++ b/resources/views/app.blade.php
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html xmlns="http://www.w3.org/1999/xhtml" lang="">
+    <head>
+        <meta charset="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+        @vite(['resources/css/cp.css', 'resources/js/cp.ts'])
+        @inertiaHead
+    </head>
+    <body>
+        @inertia
+    </body>
+</html>
diff --git a/routes/cp.php b/routes/cp.php
index fb31837f87f..609840410db 100644
--- a/routes/cp.php
+++ b/routes/cp.php
@@ -17,93 +17,94 @@
 use CraftCms\Cms\Http\Controllers\Settings\SitesController;
 use CraftCms\Cms\Http\Controllers\Updates\UpdaterController;
 use CraftCms\Cms\Http\Controllers\Utilities\UtilitiesController;
+use CraftCms\Cms\Http\Middleware\HandleInertiaRequests;
 use CraftCms\Cms\Http\Middleware\RequireAdmin;
 use CraftCms\Cms\Http\Middleware\RequireAdminChanges;
-use Illuminate\Support\Facades\Route;
 
 /**
  * Admin requests that do not require a login
  */
-Route::get('install', [InstallController::class, 'index']);
+\Illuminate\Support\Facades\Route::get('install', [InstallController::class, 'index'])
+    ->middleware([HandleInertiaRequests::class]);
 
 /**
  * Admin requests that require a login
  */
-Route::middleware('auth')->group(function () {
-    Route::get('dashboard', DashboardController::class);
+\Illuminate\Support\Facades\Route::middleware('auth')->group(function () {
+    \Illuminate\Support\Facades\Route::get('dashboard', DashboardController::class);
 
-    Route::get('utilities', [UtilitiesController::class, 'index']);
-    Route::get('utilities/{id}', [UtilitiesController::class, 'show']);
+    \Illuminate\Support\Facades\Route::get('utilities', [UtilitiesController::class, 'index']);
+    \Illuminate\Support\Facades\Route::get('utilities/{id}', [UtilitiesController::class, 'show']);
 
-    Route::middleware(RequireAdminChanges::class)->group(function () {
-        Route::view('settings/addresses', 'craftcms::settings/addresses/_fields');
+    \Illuminate\Support\Facades\Route::middleware(RequireAdminChanges::class)->group(function () {
+        \Illuminate\Support\Facades\Route::view('settings/addresses', 'craftcms::settings/addresses/_fields');
     });
 
     /**
      * Entries & Content
      */
-    Route::get('entries', EntriesIndexController::class);
-    Route::view('entries/{sectionHandle}', 'craftcms::entries.index');
-    Route::get('entries/{section}/new', CreateEntryController::class);
+    \Illuminate\Support\Facades\Route::get('entries', EntriesIndexController::class);
+    \Illuminate\Support\Facades\Route::view('entries/{sectionHandle}', 'craftcms::entries.index');
+    \Illuminate\Support\Facades\Route::get('entries/{section}/new', CreateEntryController::class);
 
-    Route::get('content', EntriesIndexController::class);
-    Route::view('content/{page}', 'craftcms::entries.index')->where('page', '[^\/]+');
-    Route::view('content/{page}/{sectionHandle}', 'craftcms::entries.index')->where('page', '[^\/]+');
-    Route::get('content/{section}/new', CreateEntryController::class);
+    \Illuminate\Support\Facades\Route::get('content', EntriesIndexController::class);
+    \Illuminate\Support\Facades\Route::view('content/{page}', 'craftcms::entries.index')->where('page', '[^\/]+');
+    \Illuminate\Support\Facades\Route::view('content/{page}/{sectionHandle}', 'craftcms::entries.index')->where('page', '[^\/]+');
+    \Illuminate\Support\Facades\Route::get('content/{section}/new', CreateEntryController::class);
 
     /**
      * Routes that require admin, but do not require admin changes
      */
-    Route::middleware([
+    \Illuminate\Support\Facades\Route::middleware([
         RequireAdmin::class,
     ])->group(function () {
         // Entry types
-        Route::get('settings/entry-types', [EntryTypesController::class, 'index']);
-        Route::middleware(RequireAdminChanges::class)->get('settings/entry-types/new', [EntryTypesController::class, 'create']);
-        Route::get('settings/entry-types/{entryType}', [EntryTypesController::class, 'edit']);
+        \Illuminate\Support\Facades\Route::get('settings/entry-types', [EntryTypesController::class, 'index']);
+        \Illuminate\Support\Facades\Route::middleware(RequireAdminChanges::class)->get('settings/entry-types/new', [EntryTypesController::class, 'create']);
+        \Illuminate\Support\Facades\Route::get('settings/entry-types/{entryType}', [EntryTypesController::class, 'edit']);
 
         // Fields
-        Route::get('settings/fields', [FieldsController::class, 'index']);
-        Route::middleware(RequireAdminChanges::class)->get('settings/fields/new', [FieldsController::class, 'create']);
-        Route::get('settings/fields/edit/{fieldId}', [FieldsController::class, 'edit']);
+        \Illuminate\Support\Facades\Route::get('settings/fields', [FieldsController::class, 'index']);
+        \Illuminate\Support\Facades\Route::middleware(RequireAdminChanges::class)->get('settings/fields/new', [FieldsController::class, 'create']);
+        \Illuminate\Support\Facades\Route::get('settings/fields/edit/{fieldId}', [FieldsController::class, 'edit']);
 
         // General
-        Route::get('settings/general', [GeneralSettingsController::class, 'index']);
+        \Illuminate\Support\Facades\Route::get('settings/general', [GeneralSettingsController::class, 'index']);
 
         // Plugins
-        Route::get('settings/plugins', [PluginsController::class, 'index']);
-        Route::get('settings/plugins/{handle}', [PluginsController::class, 'editSettings']);
-        Route::get('plugin-store{any?}', [PluginStoreController::class, 'index'])->where('any', '.*');
+        \Illuminate\Support\Facades\Route::get('settings/plugins', [PluginsController::class, 'index']);
+        \Illuminate\Support\Facades\Route::get('settings/plugins/{handle}', [PluginsController::class, 'editSettings']);
+        \Illuminate\Support\Facades\Route::get('plugin-store{any?}', [PluginStoreController::class, 'index'])->where('any', '.*');
 
         // Routes
-        Route::get('settings/routes', [RoutesController::class, 'index']);
+        \Illuminate\Support\Facades\Route::get('settings/routes', [RoutesController::class, 'index']);
 
         // Sections
-        Route::get('settings/sections', [SectionsController::class, 'index']);
-        Route::middleware(RequireAdminChanges::class)->get('settings/sections/new', [SectionsController::class, 'create']);
-        Route::get('settings/sections/{section}', [SectionsController::class, 'edit']);
+        \Illuminate\Support\Facades\Route::get('settings/sections', [SectionsController::class, 'index']);
+        \Illuminate\Support\Facades\Route::middleware(RequireAdminChanges::class)->get('settings/sections/new', [SectionsController::class, 'create']);
+        \Illuminate\Support\Facades\Route::get('settings/sections/{section}', [SectionsController::class, 'edit']);
 
         // Sites
-        Route::get('settings/sites', [SitesController::class, 'index']);
-        Route::middleware(RequireAdminChanges::class)->get('settings/sites/new', [SitesController::class, 'create']);
-        Route::get('settings/sites/{site}', [SitesController::class, 'edit']);
+        \Illuminate\Support\Facades\Route::get('settings/sites', [SitesController::class, 'index']);
+        \Illuminate\Support\Facades\Route::middleware(RequireAdminChanges::class)->get('settings/sites/new', [SitesController::class, 'create']);
+        \Illuminate\Support\Facades\Route::get('settings/sites/{site}', [SitesController::class, 'edit']);
     });
 
-    Route::prefix('settings/filesystems')->group(function () {
-        Route::middleware([
+    \Illuminate\Support\Facades\Route::prefix('settings/filesystems')->group(function () {
+        \Illuminate\Support\Facades\Route::middleware([
             RequireAdmin::class,
         ])->group(function () {
-            Route::get('/', [FilesystemsController::class, 'index']);
-            Route::get('new', [FilesystemsController::class, 'create']);
-            Route::get('{handle}/edit', [FilesystemsController::class, 'edit']);
+            \Illuminate\Support\Facades\Route::get('/', [FilesystemsController::class, 'index']);
+            \Illuminate\Support\Facades\Route::get('new', [FilesystemsController::class, 'create']);
+            \Illuminate\Support\Facades\Route::get('{handle}/edit', [FilesystemsController::class, 'edit']);
         });
 
-        Route::middleware([
+        \Illuminate\Support\Facades\Route::middleware([
             RequireAdminChanges::class,
         ])->group(function () {
-            Route::post('{handle}', [FilesystemsController::class, 'save']);
+            \Illuminate\Support\Facades\Route::post('{handle}', [FilesystemsController::class, 'save']);
         });
     });
 
-    Route::post('updates', [UpdaterController::class, 'index']);
+    \Illuminate\Support\Facades\Route::post('updates', [UpdaterController::class, 'index']);
 });
diff --git a/src/Http/Controllers/InstallController.php b/src/Http/Controllers/InstallController.php
index 4245fb6429b..e2022fb1e5e 100644
--- a/src/Http/Controllers/InstallController.php
+++ b/src/Http/Controllers/InstallController.php
@@ -6,8 +6,8 @@
 
 use Craft;
 use craft\helpers\App;
-use craft\web\assets\installer\InstallerAsset;
 use CraftCms\Aliases\Aliases;
+use CraftCms\Cms\Cms;
 use CraftCms\Cms\Config\GeneralConfig;
 use CraftCms\Cms\Database\Migrations\Install;
 use CraftCms\Cms\Database\Migrator;
@@ -15,6 +15,7 @@
 use CraftCms\Cms\Site\Concerns\SiteDefaults;
 use CraftCms\Cms\Site\Data\Site;
 use CraftCms\Cms\Support\Env;
+use CraftCms\Cms\Support\Facades\I18N;
 use CraftCms\Cms\Support\Str;
 use Illuminate\Http\JsonResponse;
 use Illuminate\Http\Request;
@@ -23,7 +24,7 @@
 use Illuminate\Support\Facades\Validator;
 use Illuminate\Validation\Rule;
 use Illuminate\Validation\Rules\Password;
-use Illuminate\Validation\ValidationException;
+use Inertia\Inertia;
 use PDOException;
 use Symfony\Component\HttpFoundation\Response;
 use Throwable;
@@ -47,7 +48,7 @@ public function __construct()
         }
     }
 
-    public function index(): Response
+    public function index(): \Inertia\Response
     {
         try {
             DB::reconnect()->getPdo();
@@ -60,38 +61,41 @@ public function index(): Response
             }
         }
 
-        Craft::$app->getView()->registerAssetBundle(InstallerAsset::class);
-
         // Grab the license text
         $licensePath = Aliases::get('@craftcms/LICENSE.md');
         $license = file_get_contents($licensePath);
+        $licenseHtml = Str::markdown($license);
 
         // Guess the site name based on the server name
         $defaultSystemName = $this->defaultSiteName();
         $defaultSiteUrl = $this->defaultSiteUrl();
         $defaultSiteLanguage = $this->defaultSiteLanguage();
+        $locales = I18N::getAllLocales();
+        $dbConfig = DB::getConfig();
+        $postCpLoginRedirect = Cms::config()->postCpLoginRedirect;
+
+        $localeOptions = collect($locales)
+            ->map(fn ($locale) => [
+                'id' => $locale->id,
+                'name' => $locale->getDisplayName(Craft::$app->language),
+                'selected' => $locale->id === $defaultSiteLanguage,
+            ]);
 
-        return response(Craft::$app->getView()->renderPageTemplate('_special/install/index.twig', compact(
-            'showDbScreen',
-            'license',
-            'defaultSystemName',
-            'defaultSiteUrl',
-            'defaultSiteLanguage',
-        )));
+        return Inertia::render('Install', [
+            'showDbScreen' => $showDbScreen,
+            'postCpLoginRedirect' => $postCpLoginRedirect,
+            'licenseHtml' => Inertia::defer(fn () => $licenseHtml),
+            'localeOptions' => Inertia::defer(fn () => $localeOptions),
+            'defaultSystemName' => $defaultSystemName,
+            'defaultSiteUrl' => $defaultSiteUrl,
+            'defaultSiteLanguage' => $defaultSiteLanguage,
+            'dbConfig' => $dbConfig,
+        ]);
     }
 
     public function validateDb(Request $request): Response
     {
-        try {
-            $data = $this->validateDbData($request);
-        } catch (ValidationException $e) {
-            /**
-             * @TODO: Laravel uses status code 422, the frontend should be adjusted to handle this
-             */
-            return new JsonResponse([
-                'errors' => $e->errors(),
-            ], 400);
-        }
+        $data = $this->validateDbData($request->input());
 
         Config::set("database.connections.{$data['driver']}", array_merge(
             Config::get("database.connections.{$data['driver']}"),
@@ -119,44 +123,33 @@ public function validateDb(Request $request): Response
         return $validates ?
             new JsonResponse :
             new JsonResponse([
+                'message' => 'Could not connect to the database.',
                 'errors' => $errors,
-            ], 400); // TODO: adjust frontend for 422
+            ], 422);
     }
 
-    public function validateAccount(Request $request, GeneralConfig $generalConfig): Response
+    public function validateAccount(Request $request, GeneralConfig $generalConfig)
     {
-        try {
-            $request->validate([
-                'email' => ['required', 'email:strict'],
-                'username' => [Rule::requiredIf(! $generalConfig->useEmailAsUsername), 'string', 'max:255', 'alpha_num'],
-                'password' => Password::required(),
-            ]);
-        } catch (ValidationException $e) {
-            return new JsonResponse([
-                'errors' => $e->errors(),
-            ], 400); // @todo, support 422 on frontend
-        }
+        $request->validate([
+            'email' => ['required', 'email:strict'],
+            'username' => [Rule::requiredIf(! $generalConfig->useEmailAsUsername), 'string', 'max:255', 'alpha_num'],
+            'password' => Password::required(),
+        ]);
 
         return new JsonResponse;
     }
 
     public function validateSite(Request $request): Response
     {
-        try {
-            $request->validate([
-                'name' => ['required', 'string', 'max:255'],
-                'baseUrl' => ['nullable', 'string', 'max:255'],
-                'language' => ['required', 'string', 'max:255', new LanguageRule(onlySiteLanguages: false)],
-            ]);
+        $request->validate([
+            'name' => ['required', 'string', 'max:255'],
+            'baseUrl' => ['nullable', 'string', 'max:255'],
+            'language' => ['required', 'string', 'max:255', new LanguageRule(onlySiteLanguages: false)],
+        ]);
 
-            $baseUrl = Env::parse($request->input('baseUrl'));
+        $baseUrl = Env::parse($request->input('baseUrl'));
 
-            Validator::validate(compact('baseUrl'), ['baseUrl' => 'url']);
-        } catch (ValidationException $e) {
-            return new JsonResponse([
-                'errors' => $e->errors(),
-            ], 400); // @todo support 422
-        }
+        Validator::validate(compact('baseUrl'), ['baseUrl' => 'url']);
 
         return new JsonResponse;
     }
@@ -166,8 +159,8 @@ public function install(Request $request, Migrator $migrator): Response
         $path = app()->environmentFilePath();
 
         // Should we set the new DB config values?
-        if ($request->has('db-driver')) {
-            $data = $this->validateDbData($request, 'db-');
+        if ($request->has('db.driver')) {
+            $data = $this->validateDbData($request->input('db'));
 
             // Set and save the new DB config values
             // If there's a DB_DSN environment variable, go with that
@@ -196,9 +189,9 @@ public function install(Request $request, Migrator $migrator): Response
             DB::reconnect('db2');
         }
 
-        $email = $request->input('account-email');
-        $username = $request->input('account-username', $email);
-        $siteUrl = $request->input('site-baseUrl');
+        $email = $request->input('account.email');
+        $username = $request->input('account.username', $email);
+        $siteUrl = $request->input('site.baseUrl');
 
         // Don't save @web even if they chose it
         if ($siteUrl === '@web') {
@@ -217,16 +210,16 @@ public function install(Request $request, Migrator $migrator): Response
         }
 
         $site = new Site(
-            name: $request->input('site-name'),
+            name: $request->input('site.name'),
             handle: 'default',
-            language: $request->input('site-language'),
+            language: $request->input('site.language'),
             baseUrl: $siteUrl,
             hasUrls: true,
         );
 
         $migration = new Install(
             username: $username,
-            password: $request->input('account-password'),
+            password: $request->input('account.password'),
             email: $email,
             site: $site,
         );
@@ -248,7 +241,9 @@ public function install(Request $request, Migrator $migrator): Response
             $migrator->getRepository()->log($migrator->getMigrationName($file), 1);
         }
 
-        return new JsonResponse;
+        $redirect = Cms::config()->postCpLoginRedirect;
+
+        return new JsonResponse(['redirect' => $redirect]);
     }
 
     private function canControlDbConfig(): bool
@@ -267,27 +262,27 @@ private function canControlDbConfig(): bool
         return true;
     }
 
-    public function validateDbData(Request $request, $prefix = ''): array
+    public function validateDbData($data): array
     {
-        $data = $request->validate([
-            $prefix.'driver' => ['required', 'string', Rule::in('mysql', 'pgsql')],
-            $prefix.'host' => ['nullable', 'string'],
-            $prefix.'database' => ['required', 'string'],
-            $prefix.'port' => ['nullable', 'integer'],
-            $prefix.'username' => ['nullable', 'string'],
-            $prefix.'password' => ['nullable', 'string'],
-            $prefix.'prefix' => ['nullable', 'string', 'max:5'],
-            $prefix.'schema' => ['nullable', 'string'],
+        $data = Validator::validate($data, [
+            'driver' => ['required', 'string', Rule::in('mysql', 'pgsql')],
+            'host' => ['nullable', 'string'],
+            'database' => ['required', 'string'],
+            'port' => ['nullable', 'integer'],
+            'username' => ['nullable', 'string'],
+            'password' => ['nullable', 'string'],
+            'prefix' => ['nullable', 'string', 'max:5'],
+            'schema' => ['nullable', 'string'],
         ]);
 
-        $defaultPort = $data[$prefix.'driver'] === 'mysql' ? 3306 : 5432;
+        $defaultPort = $data['driver'] === 'mysql' ? 3306 : 5432;
 
-        $data[$prefix.'host'] ??= Config::get("database.connections.{$data[$prefix.'driver']}.host") ?: '127.0.0.1';
-        $data[$prefix.'port'] ??= Config::get("database.connections.{$data[$prefix.'driver']}.port") ?: $defaultPort;
-        $data[$prefix.'username'] ??= Config::get("database.connections.{$data[$prefix.'driver']}.username") ?: 'root';
-        $data[$prefix.'password'] ??= Config::get("database.connections.{$data[$prefix.'driver']}.password");
-        $data[$prefix.'prefix'] ??= Config::get("database.connections.{$data[$prefix.'driver']}.prefix");
+        $data['host'] ??= Config::get("database.connections.{$data['driver']}.host") ?: '127.0.0.1';
+        $data['port'] ??= Config::get("database.connections.{$data['driver']}.port") ?: $defaultPort;
+        $data['username'] ??= Config::get("database.connections.{$data['driver']}.username") ?: 'root';
+        $data['password'] ??= Config::get("database.connections.{$data['driver']}.password");
+        $data['prefix'] ??= Config::get("database.connections.{$data['driver']}.prefix");
 
-        return collect($data)->mapWithKeys(fn (mixed $value, string $key) => [Str::after($key, $prefix) => $value])->all();
+        return collect($data)->mapWithKeys(fn (mixed $value, string $key) => [$key => $value])->all();
     }
 }
diff --git a/src/Http/Middleware/HandleInertiaRequests.php b/src/Http/Middleware/HandleInertiaRequests.php
new file mode 100644
index 00000000000..1e61295dd83
--- /dev/null
+++ b/src/Http/Middleware/HandleInertiaRequests.php
@@ -0,0 +1,46 @@
+<?php
+
+declare(strict_types=1);
+
+namespace CraftCms\Cms\Http\Middleware;
+
+use Illuminate\Http\Request;
+use Inertia\Middleware;
+
+class HandleInertiaRequests extends Middleware
+{
+    /**
+     * The root template that's loaded on the first page visit.
+     *
+     * @see https://inertiajs.com/server-side-setup#root-template
+     *
+     * @var string
+     */
+    protected $rootView = 'c::app';
+
+    /**
+     * Determines the current asset version.
+     *
+     * @see https://inertiajs.com/asset-versioning
+     */
+    #[\Override]
+    public function version(Request $request): ?string
+    {
+        return parent::version($request);
+    }
+
+    /**
+     * Define the props that are shared by default.
+     *
+     * @see https://inertiajs.com/shared-data
+     *
+     * @return array<string, mixed>
+     */
+    #[\Override]
+    public function share(Request $request): array
+    {
+        return [
+            ...parent::share($request),
+        ];
+    }
+}
diff --git a/src/Providers/CraftServiceProvider.php b/src/Providers/CraftServiceProvider.php
index 3bbd91731a5..8fd1f5de60b 100644
--- a/src/Providers/CraftServiceProvider.php
+++ b/src/Providers/CraftServiceProvider.php
@@ -18,7 +18,6 @@
 use CraftCms\Cms\Section\SectionServiceProvider;
 use CraftCms\Cms\Structure\StructureServiceProvider;
 use CraftCms\Cms\Translation\TranslationServiceProvider;
-use CraftCms\Cms\Twig\TwigServiceProvider;
 use CraftCms\Cms\Updates\UpdatesServiceProvider;
 use CraftCms\Cms\User\UserServiceProvider;
 use Illuminate\Support\AggregateServiceProvider;
@@ -30,7 +29,7 @@ final class CraftServiceProvider extends AggregateServiceProvider
         FilesystemServiceProvider::class,
         TranslationServiceProvider::class,
         DatabaseServiceProvider::class,
-        TwigServiceProvider::class,
+        ViewServiceProvider::class,
         ProjectConfigServiceProvider::class,
         DeprecatorServiceProvider::class,
         LicenseServiceProvider::class,
diff --git a/src/Providers/ViewServiceProvider.php b/src/Providers/ViewServiceProvider.php
new file mode 100644
index 00000000000..cf1090118e9
--- /dev/null
+++ b/src/Providers/ViewServiceProvider.php
@@ -0,0 +1,30 @@
+<?php
+
+declare(strict_types=1);
+
+namespace CraftCms\Cms\Providers;
+
+use CraftCms\Cms\Twig\Engine;
+use Illuminate\Contracts\View\Factory as ViewFactory;
+use Illuminate\Support\Facades\Vite;
+use Illuminate\Support\ServiceProvider;
+
+class ViewServiceProvider extends ServiceProvider
+{
+    private string $root = __DIR__.'/../..';
+
+    #[\Override]
+    public function register(): void
+    {
+        $this->loadViewsFrom("{$this->root}/resources/templates", 'craftcms');
+        $this->loadViewsFrom("{$this->root}/resources/views", 'c');
+
+        $this->app->make(ViewFactory::class)->addExtension(
+            'twig',
+            'twig',
+            fn () => $this->app->make(Engine::class)
+        );
+
+        Vite::useHotFile("{$this->root}/resources/hot");
+    }
+}
diff --git a/src/Twig/TwigServiceProvider.php b/src/Twig/TwigServiceProvider.php
deleted file mode 100644
index 7d13bb6ee58..00000000000
--- a/src/Twig/TwigServiceProvider.php
+++ /dev/null
@@ -1,23 +0,0 @@
-<?php
-
-declare(strict_types=1);
-
-namespace CraftCms\Cms\Twig;
-
-use Illuminate\Contracts\View\Factory as ViewFactory;
-use Illuminate\Support\ServiceProvider;
-
-final class TwigServiceProvider extends ServiceProvider
-{
-    #[\Override]
-    public function register(): void
-    {
-        $this->loadViewsFrom(dirname(__DIR__, 2).'/resources/templates', 'craftcms');
-
-        $this->app->make(ViewFactory::class)->addExtension(
-            'twig',
-            'twig',
-            fn () => $this->app->make(Engine::class)
-        );
-    }
-}