diff --git a/babel.config.cjs b/babel.config.cjs
index f243a1f0ee..d7c97f55c3 100644
--- a/babel.config.cjs
+++ b/babel.config.cjs
@@ -1,9 +1,12 @@
 module.exports = {
-  "presets": [
-    ["@babel/preset-env", {
-      "targets": {
-        "node": "current"
-      }
-    }]
-  ]
+    presets: [
+        [
+            '@babel/preset-env',
+            {
+                targets: {
+                    node: 'current',
+                },
+            },
+        ],
+    ],
 };
diff --git a/jest.config.cjs b/jest.config.cjs
index 58d8d37935..9615cf12d5 100644
--- a/jest.config.cjs
+++ b/jest.config.cjs
@@ -2,186 +2,182 @@
 // https://jestjs.io/docs/en/configuration.html
 
 module.exports = {
-  // All imported modules in your tests should be mocked automatically
-  // automock: false,
+    // All imported modules in your tests should be mocked automatically
+    // automock: false,
 
-  // Stop running tests after `n` failures
-  // bail: 0,
+    // Stop running tests after `n` failures
+    // bail: 0,
 
-  // Respect "browser" field in package.json when resolving modules
-  // browser: false,
+    // Respect "browser" field in package.json when resolving modules
+    // browser: false,
 
-  // The directory where Jest should store its cached dependency information
-  // cacheDirectory: "/private/var/folders/93/0vvb2l_121s9z4369x9mrt340000gn/T/jest_dx",
+    // The directory where Jest should store its cached dependency information
+    // cacheDirectory: "/private/var/folders/93/0vvb2l_121s9z4369x9mrt340000gn/T/jest_dx",
 
-  // Automatically clear mock calls and instances between every test
-  clearMocks: true,
+    // Automatically clear mock calls and instances between every test
+    clearMocks: true,
 
-  // Indicates whether the coverage information should be collected while executing the test
-  // collectCoverage: false,
+    // Indicates whether the coverage information should be collected while executing the test
+    // collectCoverage: false,
 
-  // An array of glob patterns indicating a set of files for which coverage information should be collected
-  // collectCoverageFrom: null,
+    // An array of glob patterns indicating a set of files for which coverage information should be collected
+    // collectCoverageFrom: null,
 
-  // The directory where Jest should output its coverage files
-  // coverageDirectory: null,
+    // The directory where Jest should output its coverage files
+    // coverageDirectory: null,
 
-  // An array of regexp pattern strings used to skip coverage collection
-  // coveragePathIgnorePatterns: [
-  //   "/node_modules/"
-  // ],
+    // An array of regexp pattern strings used to skip coverage collection
+    // coveragePathIgnorePatterns: [
+    //   "/node_modules/"
+    // ],
 
-  // A list of reporter names that Jest uses when writing coverage reports
-  // coverageReporters: [
-  //   "json",
-  //   "text",
-  //   "lcov",
-  //   "clover"
-  // ],
+    // A list of reporter names that Jest uses when writing coverage reports
+    // coverageReporters: [
+    //   "json",
+    //   "text",
+    //   "lcov",
+    //   "clover"
+    // ],
 
-  // An object that configures minimum threshold enforcement for coverage results
-  // coverageThreshold: null,
+    // An object that configures minimum threshold enforcement for coverage results
+    // coverageThreshold: null,
 
-  // A path to a custom dependency extractor
-  // dependencyExtractor: null,
+    // A path to a custom dependency extractor
+    // dependencyExtractor: null,
 
-  // Make calling deprecated APIs throw helpful error messages
-  // errorOnDeprecated: false,
+    // Make calling deprecated APIs throw helpful error messages
+    // errorOnDeprecated: false,
 
-  // Force coverage collection from ignored files usin a array of glob patterns
-  // forceCoverageMatch: [],
+    // Force coverage collection from ignored files usin a array of glob patterns
+    // forceCoverageMatch: [],
 
-  // A path to a module which exports an async function that is triggered once before all test suites
-  // globalSetup: null,
+    // A path to a module which exports an async function that is triggered once before all test suites
+    // globalSetup: null,
 
-  // A path to a module which exports an async function that is triggered once after all test suites
-  // globalTeardown: null,
+    // A path to a module which exports an async function that is triggered once after all test suites
+    // globalTeardown: null,
 
-  // A set of global variables that need to be available in all test environments
-  // globals: {},
+    // A set of global variables that need to be available in all test environments
+    // globals: {},
 
-  // An array of directory names to be searched recursively up from the requiring module's location
-  // moduleDirectories: [
-  //   "node_modules"
-  // ],
+    // An array of directory names to be searched recursively up from the requiring module's location
+    // moduleDirectories: [
+    //   "node_modules"
+    // ],
 
-  // An array of file extensions your modules use
-  // moduleFileExtensions: [
-  //   "js",
-  //   "json",
-  //   "jsx",
-  //   "ts",
-  //   "tsx",
-  //   "node"
-  // ],
+    // An array of file extensions your modules use
+    // moduleFileExtensions: [
+    //   "js",
+    //   "json",
+    //   "jsx",
+    //   "ts",
+    //   "tsx",
+    //   "node"
+    // ],
 
-  // A map from regular expressions to module names that allow to stub out resources with a single module
-  moduleNameMapper: {
-    "^@vue/test-utils": "<rootDir>/node_modules/@vue/test-utils/dist/vue-test-utils.cjs.js"
-  },
+    // A map from regular expressions to module names that allow to stub out resources with a single module
+    moduleNameMapper: {
+        '^@vue/test-utils': '<rootDir>/node_modules/@vue/test-utils/dist/vue-test-utils.cjs.js',
+    },
 
-  // An array of regexp pattern strings, matched against all module paths before considered 'visible' to the module loader
-  // modulePathIgnorePatterns: [],
+    // An array of regexp pattern strings, matched against all module paths before considered 'visible' to the module loader
+    // modulePathIgnorePatterns: [],
 
-  // Activates notifications for test results
-  // notify: false,
+    // Activates notifications for test results
+    // notify: false,
 
-  // An enum that specifies notification mode. Requires { notify: true }
-  // notifyMode: "failure-change",
+    // An enum that specifies notification mode. Requires { notify: true }
+    // notifyMode: "failure-change",
 
-  // A preset that is used as a base for Jest's configuration
-  // preset: null,
+    // A preset that is used as a base for Jest's configuration
+    // preset: null,
 
-  // Run tests from one or more projects
-  // projects: null,
+    // Run tests from one or more projects
+    // projects: null,
 
-  // Use this configuration option to add custom reporters to Jest
-  // reporters: undefined,
+    // Use this configuration option to add custom reporters to Jest
+    // reporters: undefined,
 
-  // Automatically reset mock state between every test
-  // resetMocks: false,
+    // Automatically reset mock state between every test
+    // resetMocks: false,
 
-  // Reset the module registry before running each individual test
-  // resetModules: false,
+    // Reset the module registry before running each individual test
+    // resetModules: false,
 
-  // A path to a custom resolver
-  // resolver: null,
+    // A path to a custom resolver
+    // resolver: null,
 
-  // Automatically restore mock state between every test
-  // restoreMocks: false,
+    // Automatically restore mock state between every test
+    // restoreMocks: false,
 
-  // The root directory that Jest should scan for tests and modules within
-  // rootDir: null,
+    // The root directory that Jest should scan for tests and modules within
+    // rootDir: null,
 
-  // A list of paths to directories that Jest should use to search for files in
-  roots: [
-    "<rootDir>/resources/js"
-  ],
+    // A list of paths to directories that Jest should use to search for files in
+    roots: ['<rootDir>/resources/js'],
 
-  // Allows you to use a custom runner instead of Jest's default test runner
-  // runner: "jest-runner",
+    // Allows you to use a custom runner instead of Jest's default test runner
+    // runner: "jest-runner",
 
-  // The paths to modules that run some code to configure or set up the testing environment before each test
-  // setupFiles: [],
+    // The paths to modules that run some code to configure or set up the testing environment before each test
+    // setupFiles: [],
 
-  // A list of paths to modules that run some code to configure or set up the testing framework before each test
-  // setupFilesAfterEnv: [],
+    // A list of paths to modules that run some code to configure or set up the testing framework before each test
+    // setupFilesAfterEnv: [],
 
-  // A list of paths to snapshot serializer modules Jest should use for snapshot testing
-  // snapshotSerializers: [],
+    // A list of paths to snapshot serializer modules Jest should use for snapshot testing
+    // snapshotSerializers: [],
 
-  // The test environment that will be used for testing
-  testEnvironment: "jsdom",
+    // The test environment that will be used for testing
+    testEnvironment: 'jsdom',
 
-  // Options that will be passed to the testEnvironment
-  // testEnvironmentOptions: {},
+    // Options that will be passed to the testEnvironment
+    // testEnvironmentOptions: {},
 
-  // Adds a location field to test results
-  // testLocationInResults: false,
+    // Adds a location field to test results
+    // testLocationInResults: false,
 
-  // The glob patterns Jest uses to detect test files
-  // testMatch: [
-  //   "**/__tests__/**/*.[jt]s?(x)",
-  //   "**/?(*.)+(spec|test).[tj]s?(x)"
-  // ],
+    // The glob patterns Jest uses to detect test files
+    // testMatch: [
+    //   "**/__tests__/**/*.[jt]s?(x)",
+    //   "**/?(*.)+(spec|test).[tj]s?(x)"
+    // ],
 
-  // An array of regexp pattern strings that are matched against all test paths, matched tests are skipped
-  // testPathIgnorePatterns: [
-  //   "/node_modules/"
-  // ],
+    // An array of regexp pattern strings that are matched against all test paths, matched tests are skipped
+    // testPathIgnorePatterns: [
+    //   "/node_modules/"
+    // ],
 
-  // The regexp pattern or array of patterns that Jest uses to detect test files
-  // testRegex: [],
+    // The regexp pattern or array of patterns that Jest uses to detect test files
+    // testRegex: [],
 
-  // This option allows the use of a custom results processor
-  // testResultsProcessor: null,
+    // This option allows the use of a custom results processor
+    // testResultsProcessor: null,
 
-  // This option allows use of a custom test runner
-  // testRunner: "jasmine2",
+    // This option allows use of a custom test runner
+    // testRunner: "jasmine2",
 
-  // This option sets the URL for the jsdom environment. It is reflected in properties such as location.href
-  // testURL: "http://localhost",
+    // This option sets the URL for the jsdom environment. It is reflected in properties such as location.href
+    // testURL: "http://localhost",
 
-  // Setting this value to "fake" allows the use of fake timers for functions such as "setTimeout"
-  // timers: "real",
+    // Setting this value to "fake" allows the use of fake timers for functions such as "setTimeout"
+    // timers: "real",
 
-  // A map from regular expressions to paths to transformers
-  // transform: null,
+    // A map from regular expressions to paths to transformers
+    // transform: null,
 
-  // An array of regexp pattern strings that are matched against all source file paths, matched files will skip transformation
-  transformIgnorePatterns: [
-    'node_modules/(?!(underscore)/)'
-  ],
+    // An array of regexp pattern strings that are matched against all source file paths, matched files will skip transformation
+    transformIgnorePatterns: ['node_modules/(?!(underscore)/)'],
 
-  // An array of regexp pattern strings that are matched against all modules before the module loader will automatically return a mock for them
-  // unmockedModulePathPatterns: undefined,
+    // An array of regexp pattern strings that are matched against all modules before the module loader will automatically return a mock for them
+    // unmockedModulePathPatterns: undefined,
 
-  // Indicates whether each individual test should be reported during the run
-  // verbose: null,
+    // Indicates whether each individual test should be reported during the run
+    // verbose: null,
 
-  // An array of regexp patterns that are matched against all source file paths before re-running tests in watch mode
-  // watchPathIgnorePatterns: [],
+    // An array of regexp patterns that are matched against all source file paths before re-running tests in watch mode
+    // watchPathIgnorePatterns: [],
 
-  // Whether to use watchman for file crawling
-  // watchman: true,
+    // Whether to use watchman for file crawling
+    // watchman: true,
 };
diff --git a/resources/css/components/array.css b/resources/css/components/array.css
index aa91417a83..780f35e3a8 100644
--- a/resources/css/components/array.css
+++ b/resources/css/components/array.css
@@ -3,50 +3,50 @@
    ========================================================================== */
 
 .array-fieldtype {
-
 }
 
 .array-table-wrapper {
-    @apply border dark:border-dark-900 rounded overflow-hidden;
+    @apply overflow-hidden rounded border dark:border-dark-900;
     &:focus-within {
         @apply ring-2 ring-blue-300 dark:ring-dark-blue-100;
     }
 }
 .array-table {
-    @apply rounded text-sm rtl:text-right ltr:text-left w-full;
+    @apply w-full rounded text-sm ltr:text-left rtl:text-right;
     &:focus {
         @apply outline-none;
     }
 
     tr:not(:last-child) {
-        th, td {
+        th,
+        td {
             @apply border-b dark:border-dark-900;
         }
     }
 
     th {
-        @apply rtl:border-l ltr:border-r dark:border-dark-900 p-2 bg-gray-300 dark:bg-dark-500;
+        @apply bg-gray-300 p-2 dark:border-dark-900 dark:bg-dark-500 ltr:border-r rtl:border-l;
     }
 
     td {
-        @apply p-0 m-0;
+        @apply m-0 p-0;
     }
 
     tr:first-child th {
-        @apply rtl:rounded-tr ltr:rounded-tl;
+        @apply ltr:rounded-tl rtl:rounded-tr;
     }
 
     tr:first-child td,
     tr:first-child .input-text-minimal {
-        @apply rtl:rounded-tl ltr:rounded-tr;
+        @apply ltr:rounded-tr rtl:rounded-tl;
     }
 
     tr:last-child th {
-        @apply rtl:rounded-br ltr:rounded-bl;
+        @apply ltr:rounded-bl rtl:rounded-br;
     }
     tr:last-child td:last-child,
     tr:last-child .input-text-minimal {
-        @apply rtl:rounded-bl ltr:rounded-br;
+        @apply ltr:rounded-br rtl:rounded-bl;
     }
 
     &:focus-within {
@@ -59,7 +59,11 @@
 
     /* Read Only */
     .read-only-field & {
-        th { @apply text-gray-500 dark:text-dark-150; }
-        tr td { @apply bg-gray-200 dark:bg-dark-600; }
+        th {
+            @apply text-gray-500 dark:text-dark-150;
+        }
+        tr td {
+            @apply bg-gray-200 dark:bg-dark-600;
+        }
     }
 }
diff --git a/resources/css/components/assets.css b/resources/css/components/assets.css
index 458de9a9bf..f54661b081 100644
--- a/resources/css/components/assets.css
+++ b/resources/css/components/assets.css
@@ -3,30 +3,34 @@
    ========================================================================== */
 
 .asset-modal {
-	.saving {
+    .saving {
         @apply absolute inset-0 flex items-center rounded-sm bg-white/90;
-		z-index: 200;
-
-		.inner {
-			text-align: center;
-			padding: 50px;
-			margin: 0 auto;
-		}
-
-		i {
-			position: relative;
-			top: -1px;
-			margin-right: 10px ; [dir="rtl"] & { margin-left: 10px ; margin-right: 0 ; }
-		}
-	}
+        z-index: 200;
+
+        .inner {
+            text-align: center;
+            padding: 50px;
+            margin: 0 auto;
+        }
+
+        i {
+            position: relative;
+            top: -1px;
+            margin-right: 10px;
+            [dir='rtl'] & {
+                margin-left: 10px;
+                margin-right: 0;
+            }
+        }
+    }
 }
 
 .drag-notification {
-    @apply text-xs @sm:text-lg absolute leading-tight p-1 inset-0 text-center rounded flex items-center justify-center;
+    @apply absolute inset-0 flex items-center justify-center rounded p-1 text-center text-xs leading-tight @sm:text-lg;
     border: 1px dashed theme('colors.gray.600');
     pointer-events: none;
     z-index: 1049;
-    background: rgba(255, 255, 255, .9);
+    background: rgba(255, 255, 255, 0.9);
 
     .dark & {
         @apply bg-dark-900/90;
@@ -34,16 +38,14 @@
     }
 }
 
-
- /* Table Listing
+/* Table Listing
    ========================================================================== */
 
 .asset-table-listing {
-    @apply border dark:border-dark-900 rounded relative overflow-hidden;
-
+    @apply relative overflow-hidden rounded border dark:border-dark-900;
 
     table {
-        @apply select-none border-none w-full rounded-b m-0;
+        @apply m-0 w-full select-none rounded-b border-none;
     }
     tbody tr {
         @apply outline-none;
@@ -56,7 +58,6 @@
     tbody tr td {
         @apply p-2;
     }
-
 }
 
 .assets-fieldtype-picker + .asset-table-listing {
@@ -69,50 +70,62 @@
 
     .search {
         flex: 1;
-        margin-right: 15px ; [dir="rtl"] & { margin-left: 15px ; margin-right: 0 ; }
-        margin-left: 0 ; [dir="rtl"] & { margin-right: 0 ; margin-left: 0 ; }
+        margin-right: 15px;
+        [dir='rtl'] & {
+            margin-left: 15px;
+            margin-right: 0;
+        }
+        margin-left: 0;
+        [dir='rtl'] & {
+            margin-right: 0;
+            margin-left: 0;
+        }
     }
 
     > .btn {
-        margin-right: 15px ; [dir="rtl"] & { margin-left: 15px ; margin-right: 0 ; }
+        margin-right: 15px;
+        [dir='rtl'] & {
+            margin-left: 15px;
+            margin-right: 0;
+        }
     }
 }
 
-
-
-
-
 /* Fieldtype
   ========================================================================== */
 
-.asset-tile.draggable-source--is-dragging { @apply opacity-50; }
-.asset-tile.draggable-mirror { @apply shadow-lg; }
-
+.asset-tile.draggable-source--is-dragging {
+    @apply opacity-50;
+}
+.asset-tile.draggable-mirror {
+    @apply shadow-lg;
+}
 
-  /* Grid Listing
+/* Grid Listing
   ========================================================================== */
 
 .asset-grid-listing {
-    @apply bg-white dark:bg-dark-800 grid relative p-4 gap-4;
+    @apply relative grid gap-4 bg-white p-4 dark:bg-dark-800;
     grid-template-columns: repeat(auto-fill, minmax(125px, 1fr));
 }
 
-
- /* Asset Tile
+/* Asset Tile
    ========================================================================== */
 
 .asset-tile {
-    @apply bg-white dark:bg-dark-600 relative min-w-0 flex items-center flex-col justify-between cursor-pointer border rounded dark:border-dark-300;
+    @apply relative flex min-w-0 cursor-pointer flex-col items-center justify-between rounded border bg-white dark:border-dark-300 dark:bg-dark-600;
 
     .asset-thumb {
-        @apply flex justify-center items-center w-full h-full rounded;
-        > img, > svg, > .svg-img {
-            @apply max-h-full max-w-full absolute;
+        @apply flex h-full w-full items-center justify-center rounded;
+        > img,
+        > svg,
+        > .svg-img {
+            @apply absolute max-h-full max-w-full;
         }
     }
 
     .asset-thumb-container {
-        @apply flex items-center flex-1 w-full justify-center relative;
+        @apply relative flex w-full flex-1 items-center justify-center;
         aspect-ratio: 1 / 1;
     }
 
@@ -121,11 +134,11 @@
     }
 
     .asset-meta {
-        @apply border-t dark:border-dark-200 w-full text-2xs text-gray-700 dark:text-dark-100;
+        @apply w-full border-t text-2xs text-gray-700 dark:border-dark-200 dark:text-dark-100;
     }
 
     .asset-meta-btn {
-        @apply text-blue rtl:border-r ltr:border-l px-2 py-1 hover:bg-gray-200 dark:hover:bg-dark-800 dark:border-dark-300;
+        @apply px-2 py-1 text-blue hover:bg-gray-200 dark:border-dark-300 dark:hover:bg-dark-800 ltr:border-l rtl:border-r;
     }
 
     .asset-filename {
@@ -152,7 +165,7 @@
 .asset-editor {
     .editor-preview {
         .editor-preview-image {
-            @apply flex flex-col flex-1 p-8;
+            @apply flex flex-1 flex-col p-8;
         }
 
         .image-wrapper {
@@ -160,17 +173,24 @@
             position: relative;
 
             > * {
-                @apply absolute w-auto h-auto max-w-full max-h-full;
-                left: 50% ; [dir="rtl"] & { left: auto ; right: 50% ; }
+                @apply absolute h-auto max-h-full w-auto max-w-full;
+                left: 50%;
+                [dir='rtl'] & {
+                    left: auto;
+                    right: 50%;
+                }
                 top: 50%;
-                transform: translate(-50%, -50%) ; [dir="rtl"] & { transform: translate(50%, -50%); }
-                box-shadow: 0 0 32px rgba(0, 0, 0, .35);
+                transform: translate(-50%, -50%);
+                [dir='rtl'] & {
+                    transform: translate(50%, -50%);
+                }
+                box-shadow: 0 0 32px rgba(0, 0, 0, 0.35);
             }
         }
     }
 
     .loading {
-        @apply absolute inset-0 z-10 bg-white/70 flex items-center justify-center rounded;
+        @apply absolute inset-0 z-10 flex items-center justify-center rounded bg-white/70;
     }
 }
 
@@ -179,10 +199,9 @@
 
 .lazyload,
 .lazyloading {
-	opacity: 0;
-
+    opacity: 0;
 }
 .lazyloaded {
-	opacity: 1;
-	transition: opacity 180ms;
+    opacity: 1;
+    transition: opacity 180ms;
 }
diff --git a/resources/css/components/blueprints.css b/resources/css/components/blueprints.css
index 71d6683062..520285cda4 100644
--- a/resources/css/components/blueprints.css
+++ b/resources/css/components/blueprints.css
@@ -3,7 +3,7 @@
    ========================================================================== */
 
 .blueprint-section {
-    @apply p-2 min-h-40 outline-none w-full;
+    @apply min-h-40 w-full p-2 outline-none;
 
     &.draggable-source--is-dragging {
         opacity: 0.5;
@@ -15,17 +15,17 @@
 }
 
 .blueprint-drag-handle {
-    @apply flex-none w-4 ltr:border-r rtl:border-l dark:border-dark-500 cursor-move;
+    @apply w-4 flex-none cursor-move dark:border-dark-500 ltr:border-r rtl:border-l;
     background: rgba(0, 0, 0, 0.01) url('../../svg/icons/light/drag-dots.svg') 50% 50% no-repeat;
     background-size: 7px 17px;
 }
 
 .blueprint-section-field {
-    @apply relative mb-2 px-1 z-10 outline-none text-sm;
+    @apply relative z-10 mb-2 px-1 text-sm outline-none;
 
     .blueprint-section-field-inner {
-        @apply relative border rounded bg-gray-200 shadow-sm flex outline-none z-10;
-        @apply dark:border-none dark:shadow-dark dark:bg-dark-600
+        @apply relative z-10 flex rounded border bg-gray-200 shadow-sm outline-none;
+        @apply dark:border-none dark:bg-dark-600 dark:shadow-dark;
     }
 
     &.draggable-source--is-dragging {
@@ -40,10 +40,17 @@
 .blueprint-section-import {
     &:before {
         content: '';
-        @apply border rounded absolute bg-gray-200 shadow-sm;
-        top: -3px; left: 6px ; right: 0 ; bottom: 3px; z-index: 1;
-
-        [dir="rtl"] & { left: 0 ; right: 6px ; }
+        @apply absolute rounded border bg-gray-200 shadow-sm;
+        top: -3px;
+        left: 6px;
+        right: 0;
+        bottom: 3px;
+        z-index: 1;
+
+        [dir='rtl'] & {
+            left: 0;
+            right: 6px;
+        }
 
         .dark & {
             @apply border-dark-300 bg-dark-550;
@@ -53,15 +60,27 @@
 
 /*  These are applied here rather than the utility classes so they don't override */
 /*  the inline widths defined by the draggable library. */
-.blueprint-section-field-w-1\/4 { @apply w-1/4 };
-.blueprint-section-field-w-1\/3 { @apply w-1/3 };
-.blueprint-section-field-w-1\/2 { @apply w-1/2 };
-.blueprint-section-field-w-2\/3 { @apply w-2/3 };
-.blueprint-section-field-w-3\/4 { @apply w-3/4 };
-.blueprint-section-field-w-full { @apply w-full };
+.blueprint-section-field-w-1\/4 {
+    @apply w-1/4;
+}
+.blueprint-section-field-w-1\/3 {
+    @apply w-1/3;
+}
+.blueprint-section-field-w-1\/2 {
+    @apply w-1/2;
+}
+.blueprint-section-field-w-2\/3 {
+    @apply w-2/3;
+}
+.blueprint-section-field-w-3\/4 {
+    @apply w-3/4;
+}
+.blueprint-section-field-w-full {
+    @apply w-full;
+}
 
 .blueprint-add-section-container {
-    @apply p-2 flex min-h-40;
+    @apply flex min-h-40 p-2;
 
     .draggable-container--is-dragging & {
         display: none;
@@ -69,10 +88,10 @@
 }
 
 .blueprint-add-section-button {
-    @apply relative w-full border border-gray-500 dark:border-dark-200 border-dashed rounded-lg flex justify-center items-center text-gray-700 dark:text-dark-150;
+    @apply relative flex w-full items-center justify-center rounded-lg border border-dashed border-gray-500 text-gray-700 dark:border-dark-200 dark:text-dark-150;
 
     &:hover {
-        @apply border-gray dark:border-dark-175 text-gray-950 dark:text-dark-100;
+        @apply border-gray text-gray-950 dark:border-dark-175 dark:text-dark-100;
     }
 
     .blueprint-section-draggable-zone {
diff --git a/resources/css/components/cards.css b/resources/css/components/cards.css
index a0ae2873b2..d78d564fe1 100644
--- a/resources/css/components/cards.css
+++ b/resources/css/components/cards.css
@@ -3,12 +3,14 @@
    ========================================================================== */
 
 .card {
-    @apply shadow bg-white rounded-md p-2;
+    @apply rounded-md bg-white p-2 shadow;
     @apply dark:bg-dark-600 dark:shadow-dark;
 }
 
 @screen md {
-    .card { @apply p-4; }
+    .card {
+        @apply p-4;
+    }
 }
 
 .card-lg {
@@ -16,5 +18,5 @@
 }
 
 .card-lg header {
-    @apply py-6 px-8 border-b dark:bg-dark-650 rounded-t-lg dark:border-dark-800;
+    @apply rounded-t-lg border-b px-8 py-6 dark:border-dark-800 dark:bg-dark-650;
 }
diff --git a/resources/css/components/column-picker.css b/resources/css/components/column-picker.css
index 44d535d462..3c8b300c1b 100644
--- a/resources/css/components/column-picker.css
+++ b/resources/css/components/column-picker.css
@@ -1,9 +1,9 @@
 .column-picker-item {
-    @apply text-sm outline-none flex items-center select-none;
+    @apply flex select-none items-center text-sm outline-none;
 
     &.sortable {
-        @apply rounded bg-white border;
-        &:hover  {
+        @apply rounded border bg-white;
+        &:hover {
             @apply bg-gray-200;
         }
 
diff --git a/resources/css/components/configure.css b/resources/css/components/configure.css
index a338b4a92e..1a4cffa6ec 100644
--- a/resources/css/components/configure.css
+++ b/resources/css/components/configure.css
@@ -2,15 +2,20 @@
    CONFIGURE COMPONENT: A variation of the publish component
    ========================================================================== */
 
-   .configure-tab {
-       .publish-fields .form-group:not(:last-child) {
-           @apply border-b;
-       }
+.configure-tab {
+    .publish-fields .form-group:not(:last-child) {
+        @apply border-b;
+    }
 
-       /*  Push toggle off to the right */
-       > .publish-fields > .toggle-fieldtype {
-           @apply flex justify-between items-center flex-wrap;
-           .help-block, .help-block p { @apply mb-0; }
-           .field-inner { @apply rtl:pl-8 ltr:pr-8; }
-       }
-   }
+    /*  Push toggle off to the right */
+    > .publish-fields > .toggle-fieldtype {
+        @apply flex flex-wrap items-center justify-between;
+        .help-block,
+        .help-block p {
+            @apply mb-0;
+        }
+        .field-inner {
+            @apply ltr:pr-8 rtl:pl-8;
+        }
+    }
+}
diff --git a/resources/css/components/dashboard.css b/resources/css/components/dashboard.css
index d4ded0f1ab..029c0d429b 100644
--- a/resources/css/components/dashboard.css
+++ b/resources/css/components/dashboard.css
@@ -3,7 +3,6 @@
    ========================================================================== */
 
 .widgets {
-
 }
 
 /* Responsive Wangjangling
diff --git a/resources/css/components/fieldtypes/array.css b/resources/css/components/fieldtypes/array.css
index 603a2cbf37..f0b836487e 100644
--- a/resources/css/components/fieldtypes/array.css
+++ b/resources/css/components/fieldtypes/array.css
@@ -10,32 +10,50 @@
     margin-bottom: 0;
 }
 
-
 /* Inside a Grid field
   ========================================================================== */
 
 .grid-table .array-fieldtype {
-
     .grid-table {
         margin-bottom: 0;
         tr:first-child {
-            td, th { border-top: 0; }
+            td,
+            th {
+                border-top: 0;
+            }
         }
         tr:last-child {
-            td, th { border-radius: 0; }
+            td,
+            th {
+                border-radius: 0;
+            }
+        }
+        tr > :first-child {
+            border-left: 0;
+            [dir='rtl'] & {
+                border-left: 0;
+                border-right: 0;
+            }
+        }
+        tr > :last-child {
+            border-right: 0;
+            [dir='rtl'] & {
+                border-right: 0;
+                border-left: 0;
+            }
         }
-        tr > :first-child { border-left: 0 ; [dir="rtl"] & { border-left: 0 ; border-right: 0 ; } }
-        tr > :last-child { border-right: 0 ; [dir="rtl"] & { border-right: 0 ; border-left: 0 ; } }
     }
 
     /*  Dynamic Mode */
     .array-dynamic .btn {
-        @apply text-blue block w-full h-auto border-0 rtl:text-right ltr:text-left shadow-none;
+        @apply block h-auto w-full border-0 text-blue shadow-none ltr:text-left rtl:text-right;
         background: #f4f4f4;
         padding: 10px 10px 11px;
         margin: 15px 0 0;
 
-        &:hover, &:active, &:focus {
+        &:hover,
+        &:active,
+        &:focus {
             top: 0;
         }
     }
diff --git a/resources/css/components/fieldtypes/assets.css b/resources/css/components/fieldtypes/assets.css
index 3ba77ac311..cb60c1aad2 100644
--- a/resources/css/components/fieldtypes/assets.css
+++ b/resources/css/components/fieldtypes/assets.css
@@ -7,18 +7,18 @@
 }
 
 .assets-fieldtype .assets-fieldtype-picker {
-    @apply flex items-center px-4 py-2 bg-gray-200 dark:bg-dark-650 border dark:border-dark-900 rounded;
+    @apply flex items-center rounded border bg-gray-200 px-4 py-2 dark:border-dark-900 dark:bg-dark-650;
 
     &.is-expanded {
-        @apply border-b-0 rounded-b-none;
+        @apply rounded-b-none border-b-0;
     }
 
     .asset-upload-control {
-      @apply mt-2 @sm:rtl:mr-4 @sm:ltr:ml-4 @sm:mt-0 text-xs text-gray-600 leading-tight;
+        @apply mt-2 text-xs leading-tight text-gray-600 @sm:mt-0 @sm:ltr:ml-4 @sm:rtl:mr-4;
     }
 
     .upload-text-button {
-        @apply text-blue underline whitespace-nowrap;
+        @apply whitespace-nowrap text-blue underline;
         &:hover {
             @apply text-blue-800;
         }
@@ -26,23 +26,20 @@
 }
 
 .assets-fieldtype .drag-drop-text {
-    @apply rtl:mr-1 ltr:ml-1 text-gray-700 dark:text-dark-175;
+    @apply text-gray-700 dark:text-dark-175 ltr:ml-1 rtl:mr-1;
 }
 
 .assets-fieldtype .asset-upload-control {
     @apply hidden @xs:inline-block;
 }
 
-
 /* Inside a Grid
   ========================================================================== */
 
 .grid-fieldtype .assets-fieldtype-picker {
-    @apply border-none rounded-none bg-transparent p-0;
+    @apply rounded-none border-none bg-transparent p-0;
 }
 
-
-
 /* In a Grid fieldtype
   ========================================================================== */
 
@@ -52,8 +49,6 @@
     }
 }
 
-
-
 /* In a Bard fieldtype
   ========================================================================== */
 
@@ -70,5 +65,7 @@
 /*  Probably better as a template condition but difficult at the moment. */
 .assets-fieldtype .delete-bard-set {
     display: none;
-    .bard-set-solo & { display: block; }
+    .bard-set-solo & {
+        display: block;
+    }
 }
diff --git a/resources/css/components/fieldtypes/bard.css b/resources/css/components/fieldtypes/bard.css
index be75f358eb..179015c148 100644
--- a/resources/css/components/fieldtypes/bard.css
+++ b/resources/css/components/fieldtypes/bard.css
@@ -1,16 +1,18 @@
 .bard-fieldtype-wrapper {
-    @apply border dark:border-dark-900 rounded relative outline-none;
+    @apply relative rounded border outline-none dark:border-dark-900;
 
-    * { outline: none; }
+    * {
+        outline: none;
+    }
 }
 
 .bard-editor {
-    @apply text-gray-800 dark:text-dark-150 bg-gray-100 dark:bg-dark-650 shadow-inner p-0 relative rounded;
+    @apply relative rounded bg-gray-100 p-0 text-gray-800 shadow-inner dark:bg-dark-650 dark:text-dark-150;
 }
 
 .bard-editor .ProseMirror {
-    @apply p-2 min-h-40 text-sm leading-tight;
-    @apply @md/bard:p-2 text-md leading-normal;
+    @apply min-h-40 p-2 text-sm leading-tight;
+    @apply text-md leading-normal @md/bard:p-2;
     @apply @lg/bard:p-4;
     &:focus {
         @apply ring-2 ring-inset ring-blue-200 dark:ring-blue-600;
@@ -18,12 +20,12 @@
 }
 
 .bard-editor .bard-error {
-    @apply p-2 @lg:px-4 bg-red-100 text-red-500 text-xs whitespace-nowrap;
+    @apply whitespace-nowrap bg-red-100 p-2 text-xs text-red-500 @lg:px-4;
 }
 
 /*  Modes */
 .bard-editor.mode\:read-only .ProseMirror {
-    @apply bg-gray-300 dark:bg-dark-600 text-gray-700 dark:text-dark-175;
+    @apply bg-gray-300 text-gray-700 dark:bg-dark-600 dark:text-dark-175;
 }
 
 .bard-editor.mode\:minimal .ProseMirror {
@@ -34,17 +36,17 @@
     @apply p-2;
     min-height: 38px;
     p {
-        @apply leading-normal mb-0;
+        @apply mb-0 leading-normal;
     }
 }
 
 .bard-fixed-toolbar {
-    @apply bg-white dark:bg-dark-800 shadow-none rounded-t border-b dark:border-dark-900 text-sm flex items-start justify-between p-1 z-5 top-0;
+    @apply top-0 z-5 flex items-start justify-between rounded-t border-b bg-white p-1 text-sm shadow-none dark:border-dark-900 dark:bg-dark-800;
 
     .bard-toolbar-button {
-        @apply text-gray-800 dark:text-dark-150 rounded px-1 flex text-center justify-center items-center text-base h-8 w-8 m-0;
+        @apply m-0 flex h-8 w-8 items-center justify-center rounded px-1 text-center text-base text-gray-800 dark:text-dark-150;
         svg {
-            @apply w-auto h-4;
+            @apply h-4 w-auto;
         }
     }
 
@@ -53,7 +55,7 @@
     }
 
     .bard-toolbar-button.active {
-        @apply bg-gray-300 dark:bg-dark-800 text-black dark:text-dark-100;
+        @apply bg-gray-300 text-black dark:bg-dark-800 dark:text-dark-100;
     }
 
     .bard-toolbar-button:focus {
@@ -79,12 +81,12 @@
 }
 
 .bard-fixed-toolbar.dark {
-    @apply bg-black rounded-full shadow-lg px-4;
+    @apply rounded-full bg-black px-4 shadow-lg;
 
     button {
-        @apply text-gray-700 rounded px-1 flex items-center justify-center text-base text-center bg-transparent h-8 w-8 my-0 mx-0.5 outline-none;
+        @apply mx-0.5 my-0 flex h-8 w-8 items-center justify-center rounded bg-transparent px-1 text-center text-base text-gray-700 outline-none;
         svg {
-            @apply w-auto h-4;
+            @apply h-4 w-auto;
         }
     }
 
@@ -100,23 +102,33 @@
 }
 
 /*  Fixed toolbar inside a stack */
-.stack-content .bard-fixed-toolbar { top: -24px; }
+.stack-content .bard-fixed-toolbar {
+    top: -24px;
+}
 
 /*  Responive Wangjangling */
 @screen md {
     /*  Fixed toolbar below fixed global header */
-    .bard-fixed-toolbar { top: 52px; }
-    .bard-fieldtype .bard-fieldtype .bard-fixed-toolbar { top: 92px; }
+    .bard-fixed-toolbar {
+        top: 52px;
+    }
+    .bard-fieldtype .bard-fieldtype .bard-fixed-toolbar {
+        top: 92px;
+    }
 
     /*  Fixed toolbar inside a stack */
-    .stack-content .bard-fieldtype .bard-fieldtype .bard-fixed-toolbar { top: 16px; }
+    .stack-content .bard-fieldtype .bard-fieldtype .bard-fixed-toolbar {
+        top: 16px;
+    }
 
     /* We don't need the `top` when in Live Preview */
-    .live-preview .bard-fixed-toolbar { top: 0; }
+    .live-preview .bard-fixed-toolbar {
+        top: 0;
+    }
 }
 
 .bard-floating-toolbar {
-    @apply flex bg-black rounded-full shadow-lg px-0;
+    @apply flex rounded-full bg-black px-0 shadow-lg;
     white-space: nowrap;
 
     &:before {
@@ -125,16 +137,20 @@
         border-top-color: black;
         position: absolute;
         top: 100%;
-        left: 50% ; [dir="rtl"] & { left: auto ; right: 50% ; }
-        margin-left: -3px
+        left: 50%;
+        [dir='rtl'] & {
+            left: auto;
+            right: 50%;
+        }
+        margin-left: -3px;
     }
 
     .bard-toolbar-button {
-        @apply text-gray-200 h-10 w-10 text-center bg-black rounded-lg flex items-center justify-center;
+        @apply flex h-10 w-10 items-center justify-center rounded-lg bg-black text-center text-gray-200;
         font-size: 16px;
-        transition: all .1s ease-in-out;
+        transition: all 0.1s ease-in-out;
         svg {
-            @apply w-4 h-4;
+            @apply h-4 w-4;
         }
     }
 
@@ -163,11 +179,11 @@
 }
 
 .bard-add-set-button {
-    @apply flex items-center justify-center absolute rtl:-right-4 ltr:-left-4 top-[-6px] z-1;
+    @apply absolute top-[-6px] z-1 flex items-center justify-center ltr:-left-4 rtl:-right-4;
 }
 
 .bard-footer-toolbar {
-    @apply bg-white dark:bg-dark-550 shadow-none text-gray-700 dark:text-dark-175 rounded-b border-t dark:border-dark-300 text-xs p-2 flex items-center justify-between;
+    @apply flex items-center justify-between rounded-b border-t bg-white p-2 text-xs text-gray-700 shadow-none dark:border-dark-300 dark:bg-dark-550 dark:text-dark-175;
     padding: 8px 12px;
 
     .bard-fullscreen & {
@@ -192,8 +208,16 @@
     /*  transition: all .15s ease-in-out; */
 
     .dropdown-menu {
-        left: -5px ; [dir="rtl"] & { left: auto ; right: -5px ; }
-        right: auto ; [dir="rtl"] & { right: auto ; left: auto ; }
+        left: -5px;
+        [dir='rtl'] & {
+            left: auto;
+            right: -5px;
+        }
+        right: auto;
+        [dir='rtl'] & {
+            right: auto;
+            left: auto;
+        }
     }
 }
 
@@ -201,19 +225,18 @@
     min-width: 320px !important;
 }
 
-
 /* Fullscreen mode
    ========================================================================== */
 
 .bard-fullscreen {
-    @apply fixed bg-gray-200 dark:bg-dark-700 inset-0 min-h-screen overflow-scroll rounded-none pt-14;
+    @apply fixed inset-0 min-h-screen overflow-scroll rounded-none bg-gray-200 pt-14 dark:bg-dark-700;
 
     & > .bard-editor {
-        @apply bg-white dark:bg-dark-800 shadow dark:shadow-dark max-w-xl mx-auto rounded relative my-6 px-8;
+        @apply relative mx-auto my-6 max-w-xl rounded bg-white px-8 shadow dark:bg-dark-800 dark:shadow-dark;
     }
 
     & > .bard-fixed-toolbar {
-        @apply shadow dark:shadow-dark h-12 fixed w-full bg-gradient-to-b from-white to-gray-100 dark:from-dark-400 dark:to-dark-500;
+        @apply fixed h-12 w-full bg-gradient-to-b from-white to-gray-100 shadow dark:from-dark-400 dark:to-dark-500 dark:shadow-dark;
         padding: 7px 8px;
         top: 0;
         z-index: 999;
@@ -240,20 +263,29 @@
     }
 
     .bard-set-selector {
-        @apply rtl:mr-6 ltr:ml-6;
+        @apply ltr:ml-6 rtl:mr-6;
     }
 
     .bard-field-options {
-        @apply fixed top-0 inset-x-0 bg-gray-700 p-4 w-full;
+        @apply fixed inset-x-0 top-0 w-full bg-gray-700 p-4;
         @apply ltr:text-right rtl:text-left;
         z-index: 1; /*  to appear over the top of .bard-editor */
 
-        .icon { font-size: 24px; }
-        a { margin-left: 16px ; [dir="rtl"] & { margin-right: 16px ; margin-left: 0 ; } color: #fff; opacity: 1; }
+        .icon {
+            font-size: 24px;
+        }
+        a {
+            margin-left: 16px;
+            [dir='rtl'] & {
+                margin-right: 16px;
+                margin-left: 0;
+            }
+            color: #fff;
+            opacity: 1;
+        }
     }
 }
 
-
 /* Typography
    -
    Selectors are specific so they don't cascade into the sets, which
@@ -272,21 +304,25 @@
         text-size-adjust: 100%;
     }
 
-
     blockquote,
     ol,
     p,
     ul {
         margin-top: 0;
-        margin-bottom: .85em;
+        margin-bottom: 0.85em;
 
         b,
-        strong { font-weight: 700; }
+        strong {
+            font-weight: 700;
+        }
 
-        em, i { font-style: italic }
+        em,
+        i {
+            font-style: italic;
+        }
 
         a {
-            @apply text-blue dark:text-dark-blue-100 underline break-words;
+            @apply break-words text-blue underline dark:text-dark-blue-100;
         }
 
         a:active,
@@ -309,7 +345,7 @@
     ul li {
         > p {
             margin-top: 0;
-            margin-bottom: .85em;
+            margin-bottom: 0.85em;
         }
     }
 
@@ -325,16 +361,21 @@
     hr:after,
     hr:before {
         display: table;
-        content: " ";
+        content: ' ';
     }
 
     hr:after {
-        clear: both
+        clear: both;
     }
 
-    h1, h2, h3, h4, h5, h6 {
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6 {
         margin-top: 1.275em;
-        margin-bottom: .85em;
+        margin-bottom: 0.85em;
         font-weight: 700;
 
         b,
@@ -343,7 +384,7 @@
         }
 
         a {
-            @apply text-blue dark:text-dark-blue-100 underline break-words;
+            @apply break-words text-blue underline dark:text-dark-blue-100;
         }
 
         a:active,
@@ -354,15 +395,25 @@
         }
     }
 
-    h1 { font-size: 2em }
+    h1 {
+        font-size: 2em;
+    }
 
-    h2 { font-size: 1.75em }
+    h2 {
+        font-size: 1.75em;
+    }
 
-    h3 { font-size: 1.5em }
+    h3 {
+        font-size: 1.5em;
+    }
 
-    h4 { font-size: 1.25em }
+    h4 {
+        font-size: 1.25em;
+    }
 
-    h5 { font-size: 1em }
+    h5 {
+        font-size: 1em;
+    }
 
     h6 {
         font-size: 1em;
@@ -394,10 +445,13 @@
     ul,
     blockquote ol,
     blockquote ul {
-        margin: 0 0 .85em;
+        margin: 0 0 0.85em;
         padding: 0 0 0 2em;
 
-        [dir="rtl"] & { padding-right: 2em ; padding-left: 0 ; }
+        [dir='rtl'] & {
+            padding-right: 2em;
+            padding-left: 0;
+        }
     }
 
     .tableWrapper table ol,
@@ -405,7 +459,10 @@
         margin: 0;
         padding: 0 0 0 2em;
 
-        [dir="rtl"] & { padding-right: 2em ; padding-left: 0 ; }
+        [dir='rtl'] & {
+            padding-right: 2em;
+            padding-left: 0;
+        }
     }
 
     ol ol,
@@ -414,7 +471,11 @@
     ul ul {
         margin-top: 0;
         margin-bottom: 0;
-        padding-left: 2em ; [dir="rtl"] & { padding-right: 2em ; padding-left: 0 ; }
+        padding-left: 2em;
+        [dir='rtl'] & {
+            padding-right: 2em;
+            padding-left: 0;
+        }
     }
 
     ul ul {
@@ -434,8 +495,8 @@
     }
 
     blockquote {
-        @apply text-gray-800 dark:text-dark-150 rtl:border-r-4 ltr:border-l-4 border-blue dark:border-dark-blue-100 px-4;
-        margin: 0 0 .85em;
+        @apply border-blue px-4 text-gray-800 dark:border-dark-blue-100 dark:text-dark-150 ltr:border-l-4 rtl:border-r-4;
+        margin: 0 0 0.85em;
     }
 
     blockquote:first-child {
@@ -450,16 +511,17 @@
     blockquote > .tableWrapper table,
     ol li > .tableWrapper table,
     ul li > .tableWrapper table {
-        @apply w-full overflow-hidden m-0 mb-4 bg-white dark:bg-dark-500 text-sm ;
+        @apply m-0 mb-4 w-full overflow-hidden bg-white text-sm dark:bg-dark-500;
         border-collapse: collapse;
         table-layout: fixed;
 
         th {
-            @apply font-bold rtl:text-right ltr:text-left bg-gray-200 dark:bg-dark-575;
+            @apply bg-gray-200 font-bold dark:bg-dark-575 ltr:text-left rtl:text-right;
         }
 
-        td, th {
-            @apply border dark:border-dark-200 align-top relative py-1 px-2;
+        td,
+        th {
+            @apply relative border px-2 py-1 align-top dark:border-dark-200;
             min-width: 1em;
         }
 
@@ -467,13 +529,13 @@
             @apply relative;
 
             &:after {
-                @apply bg-gray-400 dark:bg-dark-200 absolute inset-0 pointer-events-none opacity-25;
+                @apply pointer-events-none absolute inset-0 bg-gray-400 opacity-25 dark:bg-dark-200;
                 content: '';
             }
         }
 
         a {
-            @apply text-blue dark:text-dark-blue-100 underline break-words;
+            @apply break-words text-blue underline dark:text-dark-blue-100;
         }
 
         a:active,
@@ -485,17 +547,17 @@
     }
 
     p > code {
-        @apply font-mono bg-gray-400 dark:bg-dark-750 rounded-sm text-xs;
+        @apply rounded-sm bg-gray-400 font-mono text-xs dark:bg-dark-750;
         padding: 2px 4px;
         top: -1px;
     }
 
     pre {
-        margin-bottom: .85em;
+        margin-bottom: 0.85em;
     }
 
     pre code {
-        @apply font-mono bg-gray-400 dark:bg-dark-950 dark:text-dark-100 text-xs p-4 block w-full rounded;
+        @apply block w-full rounded bg-gray-400 p-4 font-mono text-xs dark:bg-dark-950 dark:text-dark-100;
         line-height: 1.8;
     }
 }
@@ -506,7 +568,10 @@
 .bard-fieldtype .ProseMirror > p.is-editor-empty:first-child::before {
     @apply text-gray-600 dark:text-dark-200;
     content: attr(data-placeholder);
-    float: left ; [dir="rtl"] & { float: right ; }
+    float: left;
+    [dir='rtl'] & {
+        float: right;
+    }
     height: 0;
     pointer-events: none;
 }
@@ -514,10 +579,9 @@
 /* Link toolbar
   ========================================================================== */
 
-  .bard-link-toolbar {
-
+.bard-link-toolbar {
     .input {
-        @apply p-0 text-xs h-8 bg-transparent shadow-none border-none;
+        @apply h-8 border-none bg-transparent p-0 text-xs shadow-none;
         width: 240px;
         outline: none;
     }
@@ -533,7 +597,7 @@
 }
 
 .bard-inline-image-container {
-    @apply relative bg-white dark:bg-dark-600 border dark:border-dark-900 rounded whitespace-normal mb-6;
+    @apply relative mb-6 whitespace-normal rounded border bg-white dark:border-dark-900 dark:bg-dark-600;
     &:hover {
         cursor: grab;
     }
@@ -552,8 +616,12 @@
     }
 
     table .column-resize-handle {
-        @apply absolute top-0 bottom-0 pointer-events-none bg-blue-200;
+        @apply pointer-events-none absolute bottom-0 top-0 bg-blue-200;
         width: 3px;
-        right: -2px ; [dir="rtl"] & { right: auto ; left: -2px ; }
+        right: -2px;
+        [dir='rtl'] & {
+            right: auto;
+            left: -2px;
+        }
     }
 }
diff --git a/resources/css/components/fieldtypes/button-group.css b/resources/css/components/fieldtypes/button-group.css
index f42c767f5c..fc777dd943 100644
--- a/resources/css/components/fieldtypes/button-group.css
+++ b/resources/css/components/fieldtypes/button-group.css
@@ -6,26 +6,26 @@
 }
 
 .btn-group.btn-vertical {
-    @apply flex-col items-stretch justify-start p-0 h-auto;
+    @apply h-auto flex-col items-stretch justify-start p-0;
 
     button {
-        @apply border-b border-t-0 rounded-none border-l border-r ;
+        @apply rounded-none border-b border-l border-r border-t-0;
         height: 2.375rem; /*  38px */
     }
 
     :is(.btn-group button:not(:last-child):not(.active)) {
-        @apply border-r border-l;
+        @apply border-l border-r;
     }
 
-    button.active+button {
+    button.active + button {
         @apply border-l border-r;
     }
 
     button:first-child {
-        @apply rounded-t rounded-b-none border-t;
+        @apply rounded-b-none rounded-t border-t;
     }
 
     button:last-child {
-        @apply rounded-t-none rounded-b border-b;
+        @apply rounded-b rounded-t-none border-b;
     }
 }
diff --git a/resources/css/components/fieldtypes/checkboxes.css b/resources/css/components/fieldtypes/checkboxes.css
index 0dbbd38e1d..40bcf39e41 100644
--- a/resources/css/components/fieldtypes/checkboxes.css
+++ b/resources/css/components/fieldtypes/checkboxes.css
@@ -4,10 +4,10 @@
 
 .checkboxes-fieldtype {
     .option {
-        @apply flex items-center mb-2;
+        @apply mb-2 flex items-center;
     }
 
     .option + label {
-        @apply rtl:mr-2 ltr:ml-2;
+        @apply ltr:ml-2 rtl:mr-2;
     }
 }
diff --git a/resources/css/components/fieldtypes/code.css b/resources/css/components/fieldtypes/code.css
index 63f34caf42..dad935dfda 100644
--- a/resources/css/components/fieldtypes/code.css
+++ b/resources/css/components/fieldtypes/code.css
@@ -1,11 +1,11 @@
 .code-fieldtype-container {
     direction: ltr;
-    @apply dark:border dark:border-dark-800 rounded;
+    @apply rounded dark:border dark:border-dark-800;
 }
 
 .code-fieldtype-toolbar {
-    @apply bg-white shadow-none py-1 px-2 rounded-t border border-b-0 text-sm flex flex-wrap items-center justify-end gap-2;
-    @apply dark:bg-dark-800 dark:border-l-0 dark:border-r-0 dark:border-t-0 dark:border-b dark:border-dark-900;
+    @apply flex flex-wrap items-center justify-end gap-2 rounded-t border border-b-0 bg-white px-2 py-1 text-sm shadow-none;
+    @apply dark:border-b dark:border-l-0 dark:border-r-0 dark:border-t-0 dark:border-dark-900 dark:bg-dark-800;
 
     [dir='rtl'] & {
         direction: rtl;
@@ -17,12 +17,11 @@
     @apply h-8 text-sm leading-none;
 }
 
-
 .code-fieldtype-container.code-fullscreen {
-    @apply fixed bg-gray-200 dark:bg-dark-600 inset-0 min-h-screen overflow-scroll rounded-none pt-14;
+    @apply fixed inset-0 min-h-screen overflow-scroll rounded-none bg-gray-200 pt-14 dark:bg-dark-600;
 
     .code-fieldtype-toolbar {
-        @apply fixed z-2 top-0 w-full px-6 py-2 h-12 shadow dark:shadow-dark text-base rounded-none bg-gradient-to-b from-white to-gray-100 dark:from-dark-550 dark:to-dark-600;
+        @apply fixed top-0 z-2 h-12 w-full rounded-none bg-gradient-to-b from-white to-gray-100 px-6 py-2 text-base shadow dark:from-dark-550 dark:to-dark-600 dark:shadow-dark;
     }
 }
 
diff --git a/resources/css/components/fieldtypes/datetime.css b/resources/css/components/fieldtypes/datetime.css
index 484d154030..9ac14fe765 100644
--- a/resources/css/components/fieldtypes/datetime.css
+++ b/resources/css/components/fieldtypes/datetime.css
@@ -3,29 +3,43 @@
    ========================================================================== */
 
 .daterange {
-	outline: none;
-	width: 100%;
-	.icon-remove { right: 32px ; [dir="rtl"] & { right: auto ; left: 32px ; } }
+    outline: none;
+    width: 100%;
+    .icon-remove {
+        right: 32px;
+        [dir='rtl'] & {
+            right: auto;
+            left: 32px;
+        }
+    }
 
-    .dr-calendar { max-width: 250px; }
+    .dr-calendar {
+        max-width: 250px;
+    }
 
-    .dr-active, .dr-input {
+    .dr-active,
+    .dr-input {
         z-index: 1;
     }
 }
 
-.datetime .icon-remove, .time-fieldtype .icon-remove {
-	cursor: pointer;
-	background: rgba(0, 0, 0, 0.1);
-	font-size: 15px;
-	line-height: 1;
-	padding: 0 4px 2px;
-	border-radius: 50%;
-	color: #777;
+.datetime .icon-remove,
+.time-fieldtype .icon-remove {
+    cursor: pointer;
+    background: rgba(0, 0, 0, 0.1);
+    font-size: 15px;
+    line-height: 1;
+    padding: 0 4px 2px;
+    border-radius: 50%;
+    color: #777;
     height: 18px;
     width: 18px;
-    margin-right: 8px ; [dir="rtl"] & { margin-left: 8px ; margin-right: 0 ; }
-	text-shadow: 0 1px 1px #FFF;
+    margin-right: 8px;
+    [dir='rtl'] & {
+        margin-left: 8px;
+        margin-right: 0;
+    }
+    text-shadow: 0 1px 1px #fff;
 }
 
 .daterange--single .dr-input .dr-dates {
@@ -33,50 +47,51 @@
 }
 
 .date-time-container {
-	@apply flex;
+    @apply flex;
 }
 
 /* VCalendar dark mode background */
-.vc-container, .vc-date-picker-content {
-    @apply dark:bg-dark-500 dark:border-dark-700;
+.vc-container,
+.vc-date-picker-content {
+    @apply dark:border-dark-700 dark:bg-dark-500;
 }
 
 /* VCalendar dark mode year/month popover */
 .vc-nav-popover-container {
-    @apply dark:bg-dark-700 dark:border-dark-900;
+    @apply dark:border-dark-900 dark:bg-dark-700;
 }
 
 /* Time Field
   ========================================================================== */
 
 .time-fieldtype {
-	.time-fieldtype-container {
-		@apply flex items-center;
-		min-width: max-content;
-	}
-
-	.input-time {
-		@apply inline-block text-center bg-transparent;
-		-moz-appearance: textfield;
-		width: 26px;
-
-		&:active, &:focus {
-			outline: none;
-		}
-	}
-
-	.colon {
-		@apply select-none;
-		margin: 0 -2px;
-	}
-
-	input::-webkit-inner-spin-button,
-	input::-webkit-outer-spin-button {
-		-webkit-appearance: none;
-		margin: 0;
-	}
-}
+    .time-fieldtype-container {
+        @apply flex items-center;
+        min-width: max-content;
+    }
 
+    .input-time {
+        @apply inline-block bg-transparent text-center;
+        -moz-appearance: textfield;
+        width: 26px;
+
+        &:active,
+        &:focus {
+            outline: none;
+        }
+    }
+
+    .colon {
+        @apply select-none;
+        margin: 0 -2px;
+    }
+
+    input::-webkit-inner-spin-button,
+    input::-webkit-outer-spin-button {
+        -webkit-appearance: none;
+        margin: 0;
+    }
+}
 
 /* Inside a Grid field
   ========================================================================== */
@@ -86,9 +101,13 @@
         top: 8px;
     }
 
-    .btn.add-time { top: 8px; }
+    .btn.add-time {
+        top: 8px;
+    }
 
-    .dr-input { border: 0 !important; }
+    .dr-input {
+        border: 0 !important;
+    }
 
     .colon {
         background: #fff;
diff --git a/resources/css/components/fieldtypes/dictionary-fields.css b/resources/css/components/fieldtypes/dictionary-fields.css
index f910a979a1..a283f2c882 100644
--- a/resources/css/components/fieldtypes/dictionary-fields.css
+++ b/resources/css/components/fieldtypes/dictionary-fields.css
@@ -6,11 +6,11 @@
     }
 
     .config-field {
-        @apply md:flex flex-wrap border-b border-gray-400 dark:border-dark-900 w-full;
-        @apply p-3 @sm:p-4 m-0;
+        @apply w-full flex-wrap border-b border-gray-400 dark:border-dark-900 md:flex;
+        @apply m-0 p-3 @sm:p-4;
 
         .field-inner {
-            @apply w-full md:w-1/2 rtl:md:pl-8 ltr:md:pr-8;
+            @apply w-full md:w-1/2 ltr:md:pr-8 rtl:md:pl-8;
         }
 
         .field-inner + div {
diff --git a/resources/css/components/fieldtypes/environment.css b/resources/css/components/fieldtypes/environment.css
index 12ce34710f..4443fd9eec 100644
--- a/resources/css/components/fieldtypes/environment.css
+++ b/resources/css/components/fieldtypes/environment.css
@@ -8,7 +8,11 @@
     .icon {
         display: inline-block;
         vertical-align: middle;
-        margin-right: 5px ; [dir="rtl"] & { margin-left: 5px ; margin-right: 0 ; }
+        margin-right: 5px;
+        [dir='rtl'] & {
+            margin-left: 5px;
+            margin-right: 0;
+        }
         &:before {
             top: 1px;
         }
diff --git a/resources/css/components/fieldtypes/grid.css b/resources/css/components/fieldtypes/grid.css
index ceabd56b02..6b549b40ef 100644
--- a/resources/css/components/fieldtypes/grid.css
+++ b/resources/css/components/fieldtypes/grid.css
@@ -3,7 +3,7 @@
    ========================================================================== */
 
 .grid-table {
-    @apply w-full rtl:text-right ltr:text-left border dark:border-dark-900 text-gray dark:text-dark-150 relative mb-4 outline-none shadow-sm rounded;
+    @apply relative mb-4 w-full rounded border text-gray shadow-sm outline-none dark:border-dark-900 dark:text-dark-150 ltr:text-left rtl:text-right;
     border-collapse: separate;
     border-spacing: 0;
     table-layout: auto;
@@ -11,14 +11,18 @@
 
 .grid-table thead {
     th {
-        @apply font-medium px-2 py-2 border-b dark:border-dark-900 z-10 bg-gray-200 dark:bg-dark-650 text-gray-900 dark:text-dark-150 text-sm;
+        @apply z-10 border-b bg-gray-200 px-2 py-2 text-sm font-medium text-gray-900 dark:border-dark-900 dark:bg-dark-650 dark:text-dark-150;
         display: table-cell;
         position: sticky;
         top: -1px;
         z-index: auto;
 
-        &:first-child { @apply rtl:rounded-tr ltr:rounded-tl rtl:pr-3 ltr:pl-3; }
-        &:last-child { @apply rtl:rounded-tl ltr:rounded-tr; }
+        &:first-child {
+            @apply ltr:rounded-tl ltr:pl-3 rtl:rounded-tr rtl:pr-3;
+        }
+        &:last-child {
+            @apply ltr:rounded-tr rtl:rounded-tl;
+        }
         &.grid-drag-handle-header {
             @apply w-3;
         }
@@ -37,19 +41,21 @@
     }
 
     > tr > td {
-        @apply border-b dark:border-dark-900 px-2 py-3 align-top;
+        @apply border-b px-2 py-3 align-top dark:border-dark-900;
 
         &:first-child.grid-cell {
-            @apply rtl:pr-3 ltr:pl-3;
+            @apply ltr:pl-3 rtl:pr-3;
         }
 
         &.drag-handle {
-            @apply rtl:border-l ltr:border-r h-full p-2;
+            @apply h-full p-2 ltr:border-r rtl:border-l;
             width: 1%;
             cursor: grab;
             background: theme('colors.gray.200') url('../../../svg/icons/light/drag-dots.svg') center center no-repeat;
             background-size: 7px 17px;
-            &:hover { @apply bg-gray-300; }
+            &:hover {
+                @apply bg-gray-300;
+            }
 
             .dark & {
                 background-color: theme('colors.dark.700');
@@ -59,8 +65,12 @@
 
     tr:last-child td {
         @apply border-b-0;
-        &:first-child { @apply rtl:rounded-br ltr:rounded-bl; }
-        &:last-child { @apply rtl:rounded-bl ltr:rounded-br; }
+        &:first-child {
+            @apply ltr:rounded-bl rtl:rounded-br;
+        }
+        &:last-child {
+            @apply ltr:rounded-br rtl:rounded-bl;
+        }
     }
 
     tr.draggable-source--is-dragging td {
@@ -69,17 +79,17 @@
 }
 
 .grid-table tbody .grid-row-controls {
-    @apply rtl:pr-0 ltr:pl-0 text-center;
+    @apply text-center ltr:pl-0 rtl:pr-0;
     width: 1%;
     padding-top: 21px; /*  pseudo-center for text/select fields */
 }
 
 .grid-item-header {
-    @apply bg-gray-200 border-b px-4 py-2 text-sm flex items-center justify-between outline-none cursor-move;
+    @apply flex cursor-move items-center justify-between border-b bg-gray-200 px-4 py-2 text-sm outline-none;
 }
 
 .grid-fullscreen {
-    @apply fixed bg-gray-200 inset-0 min-h-screen overflow-scroll rounded-none;
+    @apply fixed inset-0 min-h-screen overflow-scroll rounded-none bg-gray-200;
     z-index: 998; /*  to appear over the top of the rest of the stuff on the page. */
-                /*  too high and it'll be over the top of stacks, etc. */
+    /*  too high and it'll be over the top of stacks, etc. */
 }
diff --git a/resources/css/components/fieldtypes/markdown.css b/resources/css/components/fieldtypes/markdown.css
index de611e1354..e3227f1c3f 100644
--- a/resources/css/components/fieldtypes/markdown.css
+++ b/resources/css/components/fieldtypes/markdown.css
@@ -3,10 +3,10 @@
    ========================================================================== */
 
 .markdown-fieldtype-wrapper {
-    @apply border dark:border-dark-900 rounded overflow-hidden relative;
+    @apply relative overflow-hidden rounded border dark:border-dark-900;
 
     .markdown-toolbar {
-        @apply bg-white dark:bg-dark-700 shadow-none rounded-t border-b dark:border-dark-900 text-sm flex flex-wrap items-center justify-between;
+        @apply flex flex-wrap items-center justify-between rounded-t border-b bg-white text-sm shadow-none dark:border-dark-900 dark:bg-dark-700;
         padding: 4px 8px;
     }
 
@@ -15,14 +15,14 @@
     }
 
     .markdown-buttons button {
-        @apply text-gray-800 dark:text-dark-150 rounded px-1 flex items-center justify-center text-base text-center h-8 w-8;
+        @apply flex h-8 w-8 items-center justify-center rounded px-1 text-center text-base text-gray-800 dark:text-dark-150;
 
         &:hover {
             @apply bg-gray-200 dark:bg-dark-750;
         }
 
         &.active {
-            @apply bg-gray-300 dark:bg-dark-800 text-black dark:text-dark-175;
+            @apply bg-gray-300 text-black dark:bg-dark-800 dark:text-dark-175;
         }
     }
 
@@ -37,20 +37,20 @@
         @apply flex items-center;
 
         button {
-            @apply text-gray-700 dark:text-dark-150 inline-block focus:outline-none px-2 py-1 rtl:ml-1 ltr:mr-1;
+            @apply inline-block px-2 py-1 text-gray-700 focus:outline-none dark:text-dark-150 ltr:mr-1 rtl:ml-1;
 
             &:hover {
                 @apply text-blue;
             }
 
             &.active {
-                @apply bg-blue-100 dark:bg-dark-800 text-blue-800 dark:text-dark-150 rounded;
+                @apply rounded bg-blue-100 text-blue-800 dark:bg-dark-800 dark:text-dark-150;
             }
         }
     }
 
     .CodeMirror {
-        @apply bg-gray-100 dark:bg-dark-650 shadow-inner dark:shadow-inner-dark h-auto font-mono leading-normal px-0 py-1 @md/markdown:p-3 text-xs dark:text-dark-150;
+        @apply h-auto bg-gray-100 px-0 py-1 font-mono text-xs leading-normal shadow-inner @md/markdown:p-3 dark:bg-dark-650 dark:text-dark-150 dark:shadow-inner-dark;
         border-radius: 0 0 3px 3px;
 
         &:focus-within {
@@ -58,14 +58,16 @@
         }
 
         .cm-comment {
-            @apply font-mono text-sm
+            @apply font-mono text-sm;
         }
     }
 
-    .CodeMirror-code { min-height: 100px; }
+    .CodeMirror-code {
+        min-height: 100px;
+    }
 
     .helpers {
-        @apply border-t dark:border-dark-900 text-xs text-gray-800 dark:text-dark-150 flex items-center;
+        @apply flex items-center border-t text-xs text-gray-800 dark:border-dark-900 dark:text-dark-150;
 
         button:hover {
             @apply text-blue;
@@ -73,24 +75,23 @@
     }
 
     .markdown-cheatsheet-helper {
-        @apply p-2 inline-block;
+        @apply inline-block p-2;
     }
 
     .markdown-asset-helper {
-        @apply py-2 px-4 inline-block;
+        @apply inline-block px-4 py-2;
     }
 }
 
-
 /* Dark Mode
   ========================================================================== */
 
 .markdown-fieldtype-wrapper.markdown-fullscreen.markdown-dark-mode,
 .dark .markdown-fieldtype-wrapper.markdown-fullscreen {
-    @apply bg-gray-800 border-none;
+    @apply border-none bg-gray-800;
 
     .markdown-toolbar {
-        @apply text-white border-b border-gray-950 shadow-lg;
+        @apply border-b border-gray-950 text-white shadow-lg;
         background: linear-gradient(180deg, theme('colors.gray.900'), hsl(210, 20%, 13%));
     }
 
@@ -102,7 +103,7 @@
     }
 
     .helpers {
-        @apply bg-gray-900 text-white border-t border-gray-950;
+        @apply border-t border-gray-950 bg-gray-900 text-white;
     }
 
     .markdown-buttons button {
@@ -116,7 +117,7 @@
     .markdown-modes button {
         @apply text-gray-700;
         &.active {
-            @apply text-white bg-black;
+            @apply bg-black text-white;
         }
     }
 
@@ -124,7 +125,7 @@
         @apply text-white antialiased;
     }
 
-    [class*="cm-"] {
+    [class*='cm-'] {
         color: white !important;
     }
 
@@ -137,30 +138,29 @@
     }
 }
 
-
 /* Read Only
   ========================================================================== */
 
 .markdown-fieldtype.read-only-field .CodeMirror {
-    @apply bg-gray-300 dark:bg-dark-600 text-gray-700 dark:text-dark-200;
+    @apply bg-gray-300 text-gray-700 dark:bg-dark-600 dark:text-dark-200;
 }
 
-
 /* Inside a Grid fieldtype
   ========================================================================== */
 
 .grid-fieldtype .grid-table .markdown-fieldtype {
     .markdown-fieldtype-wrapper {
-        @apply border rounded;
+        @apply rounded border;
     }
 
     .markdown-preview {
-        @apply border-none p-2 rtl:text-right ltr:text-left;
-        p { line-height: 1.2; }
+        @apply border-none p-2 ltr:text-left rtl:text-right;
+        p {
+            line-height: 1.2;
+        }
     }
 }
 
-
 /* Writing Mode Typography
   ========================================================================== */
 
@@ -181,15 +181,14 @@
 }
 
 .markdown-fieldtype .cm-quote {
-    @apply text-gray-800 dark:text-dark-150 italic text-sm;
+    @apply text-sm italic text-gray-800 dark:text-dark-150;
 }
 
-
 /* Preview Mode Typography
   ========================================================================== */
 
 .markdown-preview {
-    @apply mx-auto px-3 py-2 @md/markdown:py-4 @md/markdown:px-5;
+    @apply mx-auto px-3 py-2 @md/markdown:px-5 @md/markdown:py-4;
 
     min-height: 167px;
 
@@ -207,12 +206,14 @@
         background-color: #f9f2f4;
         direction: ltr;
 
-        code { @apply p-0 }
+        code {
+            @apply p-0;
+        }
     }
 }
 
 .markdown-fieldtype-wrapper.markdown-fullscreen {
-    @apply fixed bg-gray-200 inset-0 min-h-screen overflow-scroll rounded-none pt-14 border-0;
+    @apply fixed inset-0 min-h-screen overflow-scroll rounded-none border-0 bg-gray-200 pt-14;
     /* padding-top: 52px;  offset the nav */
     will-change: transform;
 
@@ -230,7 +231,7 @@
     }
 
     .editor {
-        @apply bg-white shadow max-w-xl mx-auto rounded relative my-6 px-2 md:px-8 md:pt-8;
+        @apply relative mx-auto my-6 max-w-xl rounded bg-white px-2 shadow md:px-8 md:pt-8;
 
         .CodeMirror-scroll {
             @apply m-0;
@@ -238,17 +239,18 @@
     }
 
     .CodeMirror {
-        @apply outline-none bg-transparent shadow-none;
-        &:focus, &:focus-within {
+        @apply bg-transparent shadow-none outline-none;
+        &:focus,
+        &:focus-within {
             @apply ring-0 !important;
         }
     }
 
     .markdown-preview {
-        @apply max-w-xl bg-transparent mx-auto relative p-8 text-lg;
+        @apply relative mx-auto max-w-xl bg-transparent p-8 text-lg;
     }
 
     .helpers {
-        @apply absolute bottom-0 inset-x-0 bg-white;
+        @apply absolute inset-x-0 bottom-0 bg-white;
     }
 }
diff --git a/resources/css/components/fieldtypes/partial.css b/resources/css/components/fieldtypes/partial.css
index 65422e1c42..b1386c5efa 100644
--- a/resources/css/components/fieldtypes/partial.css
+++ b/resources/css/components/fieldtypes/partial.css
@@ -11,7 +11,8 @@
     > .field-inner {
         padding: 0;
 
-        > label, > .help-block {
+        > label,
+        > .help-block {
             display: none;
         }
     }
diff --git a/resources/css/components/fieldtypes/radio.css b/resources/css/components/fieldtypes/radio.css
index af075ad2bb..1c4bf7b876 100644
--- a/resources/css/components/fieldtypes/radio.css
+++ b/resources/css/components/fieldtypes/radio.css
@@ -2,12 +2,12 @@
     @apply flex;
 }
 
-.radio-fieldtype input[type="radio"] {
-    @apply m-0 min-w-0 absolute opacity-0 -z-1 w-1 h-px w-px overflow-hidden;
+.radio-fieldtype input[type='radio'] {
+    @apply absolute -z-1 m-0 h-px w-1 w-px min-w-0 overflow-hidden opacity-0;
 }
 
 .radio-fieldtype .radio-icon {
-    @apply cursor-pointer h-4 w-4 ltr:mr-2 rtl:ml-2 block;
+    @apply block h-4 w-4 cursor-pointer ltr:mr-2 rtl:ml-2;
 }
 
 .radio-fieldtype .option.disabled {
@@ -18,4 +18,3 @@
         @apply cursor-text;
     }
 }
-
diff --git a/resources/css/components/fieldtypes/relationship.css b/resources/css/components/fieldtypes/relationship.css
index 39cf326408..2c884e6304 100644
--- a/resources/css/components/fieldtypes/relationship.css
+++ b/resources/css/components/fieldtypes/relationship.css
@@ -1,4 +1,6 @@
 /* Inside a Grid field
   ========================================================================== */
 
-.grid-table .relationship-input-empty .relationship-input-buttons { padding-top: 10px; }
+.grid-table .relationship-input-empty .relationship-input-buttons {
+    padding-top: 10px;
+}
diff --git a/resources/css/components/fieldtypes/replicator.css b/resources/css/components/fieldtypes/replicator.css
index 46c7d7dcae..11fbe3155c 100644
--- a/resources/css/components/fieldtypes/replicator.css
+++ b/resources/css/components/fieldtypes/replicator.css
@@ -7,22 +7,24 @@
 }
 
 .replicator-set {
-    @apply shadow-set dark:shadow-dark-set rounded bg-white dark:bg-dark-800 outline-none relative;
+    @apply relative rounded bg-white shadow-set outline-none dark:bg-dark-800 dark:shadow-dark-set;
 }
 
 .replicator-set-header {
-    @apply bg-gray-300 dark:bg-dark-650 border-b dark:border-dark-900 rounded-t rtl:pl-3 ltr:pr-3 flex select-none;
+    @apply flex select-none rounded-t border-b bg-gray-300 dark:border-dark-900 dark:bg-dark-650 ltr:pr-3 rtl:pl-3;
 
     &.collapsed {
         @apply rounded border-b-0;
     }
 
     .sortable-handle {
-        @apply w-4 rtl:border-l ltr:border-r dark:border-dark-900 rtl:rounded-tr ltr:rounded-tl p-2;
+        @apply w-4 p-2 dark:border-dark-900 ltr:rounded-tl ltr:border-r rtl:rounded-tr rtl:border-l;
         cursor: grab;
         background: transparent url('../../../svg/icons/light/drag-dots.svg') center center no-repeat;
         background-size: 7px 17px;
-        &:hover { @apply bg-gray-200 dark:bg-dark-700; }
+        &:hover {
+            @apply bg-gray-200 dark:bg-dark-700;
+        }
     }
 
     img {
@@ -58,7 +60,9 @@
 .replicator-set-picker.between {
     @apply opacity-0 hover:opacity-100;
     transform: translateX(-8px);
-    transition: opacity 100ms ease, transform 100ms ease;
+    transition:
+        opacity 100ms ease,
+        transform 100ms ease;
 }
 
 .replicator-set-picker.between:hover {
@@ -78,5 +82,5 @@
 }
 
 .replicator-fullscreen {
-    @apply fixed bg-gray-200 inset-0 min-h-screen overflow-scroll rounded-none;
+    @apply fixed inset-0 min-h-screen overflow-scroll rounded-none bg-gray-200;
 }
diff --git a/resources/css/components/fieldtypes/section.css b/resources/css/components/fieldtypes/section.css
index 5339d8024b..103564b529 100644
--- a/resources/css/components/fieldtypes/section.css
+++ b/resources/css/components/fieldtypes/section.css
@@ -3,7 +3,7 @@
    ========================================================================== */
 
 .section-fieldtype {
-    @apply border-t border-b bg-gray-200;
+    @apply border-b border-t bg-gray-200;
     @apply dark:border-dark-900 dark:bg-dark-700 dark:shadow-inner-dark;
     @apply -mt-px; /*  Avoid adjacent borders just in case they're stacked */
 
@@ -18,14 +18,16 @@
         }
 
         .field-inner > label {
-            @apply uppercase text-sm font-bold;
+            @apply text-sm font-bold uppercase;
         }
     }
 
     .help-block {
         @apply mb-0;
 
-        p { margin: 0; }
+        p {
+            margin: 0;
+        }
     }
 
     .read-only-overlay {
diff --git a/resources/css/components/fieldtypes/spacer.css b/resources/css/components/fieldtypes/spacer.css
index fb1cf0f03a..a9a4756351 100644
--- a/resources/css/components/fieldtypes/spacer.css
+++ b/resources/css/components/fieldtypes/spacer.css
@@ -3,5 +3,5 @@
    ========================================================================== */
 
 .spacer-fieldtype {
-    @apply hidden @sm:block @sm:invisible;
+    @apply hidden @sm:invisible @sm:block;
 }
diff --git a/resources/css/components/fieldtypes/table.css b/resources/css/components/fieldtypes/table.css
index 4b5261e44b..d623aa54e4 100644
--- a/resources/css/components/fieldtypes/table.css
+++ b/resources/css/components/fieldtypes/table.css
@@ -3,7 +3,7 @@
    ========================================================================== */
 
 .table-fieldtype-table {
-    @apply w-full rtl:text-right ltr:text-left border dark:border-dark-900 text-gray dark:text-dark-150 relative mb-4 outline-none shadow-sm rounded;
+    @apply relative mb-4 w-full rounded border text-gray shadow-sm outline-none dark:border-dark-900 dark:text-dark-150 ltr:text-left rtl:text-right;
     border-collapse: separate;
     border-spacing: 0;
     table-layout: fixed;
@@ -11,13 +11,17 @@
 
 .table-fieldtype-table thead {
     th {
-        @apply font-medium rtl:border-l ltr:border-r p-2 border-b dark:border-dark-900 z-10 bg-gray-200 dark:bg-dark-700 text-gray-900 dark:text-dark-150 text-sm;
+        @apply z-10 border-b bg-gray-200 p-2 text-sm font-medium text-gray-900 dark:border-dark-900 dark:bg-dark-700 dark:text-dark-150 ltr:border-r rtl:border-l;
         display: table-cell;
         position: sticky;
         top: -1px;
 
-        &:first-child { @apply rtl:rounded-tr ltr:rounded-tl rtl:pr-3 ltr:pl-3; }
-        &:last-child { @apply rtl:rounded-tl ltr:rounded-tr rtl:border-l-0 ltr:border-r-0; }
+        &:first-child {
+            @apply ltr:rounded-tl ltr:pl-3 rtl:rounded-tr rtl:pr-3;
+        }
+        &:last-child {
+            @apply ltr:rounded-tr ltr:border-r-0 rtl:rounded-tl rtl:border-l-0;
+        }
         &.grid-drag-handle-header {
             @apply w-3;
         }
@@ -25,10 +29,10 @@
 }
 
 .table-fieldtype-table .input-text {
-    @apply bg-white border-none rounded-none shadow-none outline-none text-sm;
+    @apply rounded-none border-none bg-white text-sm shadow-none outline-none;
     @apply dark:bg-dark-650;
     &:focus {
-        @apply shadow-inner bg-gray-100 dark:bg-dark-700 ring-0;
+        @apply bg-gray-100 shadow-inner ring-0 dark:bg-dark-700;
     }
 }
 
@@ -40,18 +44,18 @@
     }
 
     td {
-        @apply border-b rtl:border-l ltr:border-r dark:border-dark-900 p-0;
+        @apply border-b p-0 dark:border-dark-900 ltr:border-r rtl:border-l;
 
         &:first-child.grid-cell {
-            @apply rtl:pr-3 ltr:pl-3;
+            @apply ltr:pl-3 rtl:pr-3;
         }
 
         &:last-child {
-            @apply rtl:border-l-0 ltr:border-r-0;
+            @apply ltr:border-r-0 rtl:border-l-0;
         }
 
         &.table-drag-handle {
-            @apply w-3 rtl:border-l ltr:border-r h-full p-2;
+            @apply h-full w-3 p-2 ltr:border-r rtl:border-l;
             cursor: grab;
             background: theme('colors.gray.200') url('../../../svg/icons/light/drag-dots.svg') center center no-repeat;
             background-size: 7px 17px;
@@ -60,14 +64,20 @@
                 background-color: theme(colors.dark.600);
             }
 
-            &:hover { @apply bg-gray-300 dark:bg-dark-750; }
+            &:hover {
+                @apply bg-gray-300 dark:bg-dark-750;
+            }
         }
     }
 
     tr:last-child td {
         @apply border-b-0;
-        &:first-child { @apply rtl:rounded-br ltr:rounded-bl; }
-        &:last-child { @apply rtl:rounded-bl ltr:rounded-br; }
+        &:first-child {
+            @apply ltr:rounded-bl rtl:rounded-br;
+        }
+        &:last-child {
+            @apply ltr:rounded-br rtl:rounded-bl;
+        }
     }
 
     tr.draggable-source--is-dragging td {
@@ -76,7 +86,7 @@
 }
 
 .table-fieldtype-table .row-controls {
-    @apply w-8 rtl:pr-0 ltr:pl-0 text-center;
+    @apply w-8 text-center ltr:pl-0 rtl:pr-0;
     vertical-align: middle;
     &:focus-within {
         @apply bg-gray-200 dark:bg-dark-750;
@@ -87,7 +97,7 @@
 }
 
 .table-fullscreen {
-    @apply fixed bg-gray-200 inset-0 min-h-screen overflow-scroll rounded-none;
+    @apply fixed inset-0 min-h-screen overflow-scroll rounded-none bg-gray-200;
     z-index: 998; /*  to appear over the top of the rest of the stuff on the page. */
-                /*  too high and it'll be over the top of stacks, etc. */
+    /*  too high and it'll be over the top of stacks, etc. */
 }
diff --git a/resources/css/components/fieldtypes/textarea.css b/resources/css/components/fieldtypes/textarea.css
index 83da1d874d..ef7abd0f89 100644
--- a/resources/css/components/fieldtypes/textarea.css
+++ b/resources/css/components/fieldtypes/textarea.css
@@ -3,17 +3,18 @@
    ========================================================================== */
 
 .textarea-fieldtype textarea {
-    @apply border-gray-500 dark:border-dark-900 dark:shadow-inner-dark text-md leading-normal;
+    @apply border-gray-500 text-md leading-normal dark:border-dark-900 dark:shadow-inner-dark;
     min-height: 80px;
 
-    &:not(.focus-within-only):focus, &:not(.focus-within-only):focus-within {
-        @apply ring-2 ring-blue-300 dark:ring-blue-600 outline-none shadow-none;
+    &:not(.focus-within-only):focus,
+    &:not(.focus-within-only):focus-within {
+        @apply shadow-none outline-none ring-2 ring-blue-300 dark:ring-blue-600;
     }
 }
 
 /* Inside a Grid
   ========================================================================== */
 
- .grid-fieldtype .textarea-fieldtype textarea {
-     @apply bg-white dark:bg-dark-600;
- }
+.grid-fieldtype .textarea-fieldtype textarea {
+    @apply bg-white dark:bg-dark-600;
+}
diff --git a/resources/css/components/fieldtypes/video.css b/resources/css/components/fieldtypes/video.css
index a6ad494408..757fe55bb9 100644
--- a/resources/css/components/fieldtypes/video.css
+++ b/resources/css/components/fieldtypes/video.css
@@ -1,5 +1,5 @@
 .video-fieldtype-container {
-    @apply bg-gray-200 dark:bg-dark-700 p-4 border dark:border-dark-950 rounded;
+    @apply rounded border bg-gray-200 p-4 dark:border-dark-950 dark:bg-dark-700;
 }
 
 .video-fieldtype .video-preview-wrapper {
@@ -10,7 +10,7 @@
 }
 
 .video-fieldtype .embed-video {
-    @apply w-full h-0 relative;
+    @apply relative h-0 w-full;
     padding-bottom: 56.25%;
 }
 
@@ -18,7 +18,11 @@
     @apply rounded;
     position: absolute;
     top: 0;
-    left: 0 ; [dir="rtl"] & { left: auto ; right: 0 ; }
+    left: 0;
+    [dir='rtl'] & {
+        left: auto;
+        right: 0;
+    }
     width: 100%;
     height: 100%;
 }
diff --git a/resources/css/components/fieldtypes/width.css b/resources/css/components/fieldtypes/width.css
index 20e75ded34..f47138e33d 100644
--- a/resources/css/components/fieldtypes/width.css
+++ b/resources/css/components/fieldtypes/width.css
@@ -2,25 +2,25 @@
   ========================================================================== */
 
 .field-width-selector {
-    @apply w-12 h-5 flex relative cursor-pointer;
+    @apply relative flex h-5 w-12 cursor-pointer;
 
     .field-width-label {
-        @apply absolute text-4xs font-bold w-full text-center z-10 text-gray-700 dark:text-dark-150 inset-0 flex items-center justify-center pointer-events-none;
+        @apply pointer-events-none absolute inset-0 z-10 flex w-full items-center justify-center text-center text-4xs font-bold text-gray-700 dark:text-dark-150;
     }
 
     .field-width-notch {
-        @apply relative border border-gray-400 dark:border-dark-300 rtl:border-r-0 ltr:border-l-0 flex-1;
+        @apply relative flex-1 border border-gray-400 dark:border-dark-300 ltr:border-l-0 rtl:border-r-0;
 
         &:first-of-type {
-            @apply rtl:border-r ltr:border-l rtl:rounded-r-sm ltr:rounded-l-sm;
+            @apply ltr:rounded-l-sm ltr:border-l rtl:rounded-r-sm rtl:border-r;
         }
 
         &.filled {
-            @apply border-gray-400 dark:border-dark-400 rtl:border-l-0 ltr:border-r-0 rtl:pl-px ltr:pr-px bg-white dark:bg-dark-575 -my-px;
+            @apply -my-px border-gray-400 bg-white dark:border-dark-400 dark:bg-dark-575 ltr:border-r-0 ltr:pr-px rtl:border-l-0 rtl:pl-px;
         }
 
         &.selected {
-            @apply rtl:border-l ltr:border-r rtl:rounded-l-sm ltr:rounded-r-sm;
+            @apply ltr:rounded-r-sm ltr:border-r rtl:rounded-l-sm rtl:border-l;
         }
     }
 }
@@ -29,16 +29,16 @@
   ========================================================================== */
 
 .width-fieldtype .field-width-selector {
-    @apply w-16 h-9 mt-px;
+    @apply mt-px h-9 w-16;
 
     .field-width-notch {
-        @apply bg-gray-200 dark:bg-dark-550 border-r-gray-400 dark:border-dark-700 border-y-gray-500 dark:border-y-dark-750;
+        @apply border-y-gray-500 border-r-gray-400 bg-gray-200 dark:border-dark-700 dark:border-y-dark-750 dark:bg-dark-550;
         &:last-child {
-            @apply border-r-gray-500 dark:border-dark-750 rtl:rounded-l-sm ltr:rounded-r-sm;
+            @apply border-r-gray-500 dark:border-dark-750 ltr:rounded-r-sm rtl:rounded-l-sm;
         }
 
         &.filled {
-            @apply bg-gradient-to-b from-white to-gray-100 dark:from-dark-300 dark:to-dark-400 border-gray-500 dark:border-dark-750;
+            @apply border-gray-500 bg-gradient-to-b from-white to-gray-100 dark:border-dark-750 dark:from-dark-300 dark:to-dark-400;
         }
     }
 
diff --git a/resources/css/components/fieldtypes/yaml.css b/resources/css/components/fieldtypes/yaml.css
index 380271ef26..ddba9092fe 100644
--- a/resources/css/components/fieldtypes/yaml.css
+++ b/resources/css/components/fieldtypes/yaml.css
@@ -4,27 +4,31 @@
 
 .yaml-fieldtype {
     .code-mode {
-        @apply absolute top-2 z-10 right-3 text-gray-600 text-xs uppercase tracking-wider;
+        @apply absolute right-3 top-2 z-10 text-xs uppercase tracking-wider text-gray-600;
     }
     .CodeMirror-wrap {
         @apply rounded;
     }
 }
 
-
-
 /* Inside a Grid field
   ========================================================================== */
 
 .grid-fieldtype .yaml-fieldtype-wrapper {
     > span {
         border-top: 0;
-        border-right: 0 ; [dir="rtl"] & { border-right: 0 ; border-left: 0 ; }
+        border-right: 0;
+        [dir='rtl'] & {
+            border-right: 0;
+            border-left: 0;
+        }
     }
 
     .editor {
         border: none;
         border-radius: 0;
-        .CodeMirror { box-shadow: none; }
+        .CodeMirror {
+            box-shadow: none;
+        }
     }
 }
diff --git a/resources/css/components/filters.css b/resources/css/components/filters.css
index c42cb95933..17888e38d7 100644
--- a/resources/css/components/filters.css
+++ b/resources/css/components/filters.css
@@ -3,27 +3,36 @@
    ========================================================================== */
 
 .filter {
-    @apply bg-gray-200 mb-6 rounded-full text-center;
+    @apply mb-6 rounded-full bg-gray-200 text-center;
     padding: 10px 8px 14px;
 
     a {
-        @apply text-xs text-gray-700 mx-1 p-2 relative;
+        @apply relative mx-1 p-2 text-xs text-gray-700;
     }
 
-    a.active, a:hover {
+    a.active,
+    a:hover {
         @apply text-gray-950;
     }
 
     a.active:after {
-        @apply bg-red-500 block;
-        content: "";
+        @apply block bg-red-500;
+        content: '';
         width: 4px;
         height: 4px;
         border-radius: 50%;
-        opacity: .9;
+        opacity: 0.9;
         position: absolute;
-        left: 50% ; [dir="rtl"] & { left: auto ; right: 50% ; }
-        margin-left: -1px ; [dir="rtl"] & { margin-right: -1px ; margin-left: 0 ; }
+        left: 50%;
+        [dir='rtl'] & {
+            left: auto;
+            right: 50%;
+        }
+        margin-left: -1px;
+        [dir='rtl'] & {
+            margin-right: -1px;
+            margin-left: 0;
+        }
         bottom: 1px;
     }
 
@@ -47,7 +56,7 @@
     }
 
     .text-fieldtype .input-text {
-        @apply py-2 px-3;
+        @apply px-3 py-2;
     }
 
     .no-label.form-group,
diff --git a/resources/css/components/focal-point.css b/resources/css/components/focal-point.css
index 33210a531b..f21688b976 100644
--- a/resources/css/components/focal-point.css
+++ b/resources/css/components/focal-point.css
@@ -10,7 +10,11 @@
 .focal-point-toolbox {
     position: absolute;
     top: 20px;
-    left: 20px ; [dir="rtl"] & { left: auto ; right: 20px ; }
+    left: 20px;
+    [dir='rtl'] & {
+        left: auto;
+        right: 20px;
+    }
     z-index: 120;
     width: 380px;
     overflow-y: auto;
@@ -32,31 +36,43 @@
 .focal-point-reticle {
     border-radius: 50%;
     position: absolute;
-    transition: top 0.5s ease, left 0.5s ease;
+    transition:
+        top 0.5s ease,
+        left 0.5s ease;
     pointer-events: none;
 
     &.zoomed {
         border: 1px solid white;
-        box-shadow: 0 0 5px rgba(0,0,0,.5);
+        box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
     }
 
     &:before {
-        content: "";
+        content: '';
         width: 8px;
         height: 8px;
         position: absolute;
         background: white;
         border-radius: 50%;
         top: 50%;
-        left: 50% ; [dir="rtl"] & { left: auto ; right: 50% ; }
-        margin: -4px 0 0 -4px ; [dir="rtl"] & { margin: -4px -4px 0 0 ; }
-        box-shadow: 0 0 4px rgba(0,0,0,.75);
+        left: 50%;
+        [dir='rtl'] & {
+            left: auto;
+            right: 50%;
+        }
+        margin: -4px 0 0 -4px;
+        [dir='rtl'] & {
+            margin: -4px -4px 0 0;
+        }
+        box-shadow: 0 0 4px rgba(0, 0, 0, 0.75);
     }
 }
 
 .focal-point .frame {
     position: absolute;
-    margin: -5px 0 0 -5px ; [dir="rtl"] & { margin: -5px -5px 0 0 ; }
+    margin: -5px 0 0 -5px;
+    [dir='rtl'] & {
+        margin: -5px -5px 0 0;
+    }
     border: 10px solid #394045;
     box-sizing: content-box;
     overflow: hidden;
@@ -70,10 +86,52 @@
 }
 
 .focal-point {
-    .frame-1, .frame-4, .frame-7 { left: 0 ; [dir="rtl"] & { left: auto ; right: 0 ; } width: 66.6666667%; }
-    .frame-2, .frame-5, .frame-8 { left: 66.6666667% ; [dir="rtl"] & { left: auto ; right: 66.6666667% ; } width: 22.2222222%; }
-    .frame-3, .frame-6, .frame-9 { left: 88.8888889% ; [dir="rtl"] & { left: auto ; right: 88.8888889% ; } width: 11.1111111%; }
-    .frame-1, .frame-2, .frame-3 { top: 0; height: 66.6666667%; }
-    .frame-4, .frame-5, .frame-6 { top: 66.6666667%; height: 22.2222222%; }
-    .frame-7, .frame-8, .frame-9 { top: 88.8888889%; height: 11.1111111%; }
+    .frame-1,
+    .frame-4,
+    .frame-7 {
+        left: 0;
+        [dir='rtl'] & {
+            left: auto;
+            right: 0;
+        }
+        width: 66.6666667%;
+    }
+    .frame-2,
+    .frame-5,
+    .frame-8 {
+        left: 66.6666667%;
+        [dir='rtl'] & {
+            left: auto;
+            right: 66.6666667%;
+        }
+        width: 22.2222222%;
+    }
+    .frame-3,
+    .frame-6,
+    .frame-9 {
+        left: 88.8888889%;
+        [dir='rtl'] & {
+            left: auto;
+            right: 88.8888889%;
+        }
+        width: 11.1111111%;
+    }
+    .frame-1,
+    .frame-2,
+    .frame-3 {
+        top: 0;
+        height: 66.6666667%;
+    }
+    .frame-4,
+    .frame-5,
+    .frame-6 {
+        top: 66.6666667%;
+        height: 22.2222222%;
+    }
+    .frame-7,
+    .frame-8,
+    .frame-9 {
+        top: 88.8888889%;
+        height: 11.1111111%;
+    }
 }
diff --git a/resources/css/components/global-header.css b/resources/css/components/global-header.css
index 6e231e9467..97decfeb20 100644
--- a/resources/css/components/global-header.css
+++ b/resources/css/components/global-header.css
@@ -3,7 +3,7 @@
    ========================================================================== */
 
 .global-header {
-    @apply bg-white dark:bg-dark-600 shadow dark:shadow-dark rtl:pl-4 ltr:pr-4 h-13 items-center flex relative w-full;
+    @apply relative flex h-13 w-full items-center bg-white shadow dark:bg-dark-600 dark:shadow-dark ltr:pr-4 rtl:pl-4;
     z-index: 3; /* The search focus overlay sits underneath using z-index 2. */
 
     .dark & {
@@ -15,50 +15,63 @@
     }
 
     .global-header-icon-button {
-        @apply h-7 w-7 block outline-none p-1 text-gray hover:text-gray-800 rounded-full hover:bg-gray-200 border border-transparent hover:border-gray-400;
-        @apply dark:text-dark-100 dark:hover:text-dark-100 dark:hover:bg-dark-800 dark:border-transparent  dark:hover:border-dark-900;
+        @apply block h-7 w-7 rounded-full border border-transparent p-1 text-gray outline-none hover:border-gray-400 hover:bg-gray-200 hover:text-gray-800;
+        @apply dark:border-transparent dark:text-dark-100 dark:hover:border-dark-900 dark:hover:bg-dark-800 dark:hover:text-dark-100;
     }
 }
 
-
 /* Responsive Wangjangling
    ========================================================================== */
 
 @screen md {
-    .global-header { @apply px-0 fixed }
+    .global-header {
+        @apply fixed px-0;
+    }
 }
 
 /* Search
    ========================================================================== */
 .global-search {
-    @apply rounded-md px-2 hidden py-0 flex items-center relative border dark:border-dark-300;
-    transition: .12s ease-out;
+    @apply relative flex hidden items-center rounded-md border px-2 py-0 dark:border-dark-300;
+    transition: 0.12s ease-out;
 
     .search-input {
-        @apply text-sm w-full max-w-full dark:bg-dark-600 dark:text-dark-150;
-        padding-left: 5px ;
-        padding-right: 20px ; [dir="rtl"] & { padding-left: 20px ; padding-right: 5px ; }
+        @apply w-full max-w-full text-sm dark:bg-dark-600 dark:text-dark-150;
+        padding-left: 5px;
+        padding-right: 20px;
+        [dir='rtl'] & {
+            padding-left: 20px;
+            padding-right: 5px;
+        }
         height: 32px;
-		&:focus {
-			outline: 0;
-		}
+        &:focus {
+            outline: 0;
+        }
     }
 
     .global-search-results {
-        @apply shadow-lg absolute p-0 w-full bg-white rounded border border-gray-500;
-        @apply dark:bg-dark-650 dark:border-dark-900;
+        @apply absolute w-full rounded border border-gray-500 bg-white p-0 shadow-lg;
+        @apply dark:border-dark-900 dark:bg-dark-650;
         top: 36px;
-        left: -1px ; [dir="rtl"] & { left: auto ; right: -1px ; } /*  border offset */
+        left: -1px;
+        [dir='rtl'] & {
+            left: auto;
+            right: -1px;
+        } /*  border offset */
         z-index: 999;
     }
 
     .global-search-loading-indicator {
         position: absolute;
-        right: 8px ; [dir="rtl"] & { right: auto ; left: 8px ; }
+        right: 8px;
+        [dir='rtl'] & {
+            right: auto;
+            left: 8px;
+        }
     }
 
     .global-search-result-item {
-        @apply border-t cursor-pointer dark:bg-dark-600 dark:border-dark-800 dark:text-dark-150;
+        @apply cursor-pointer border-t dark:border-dark-800 dark:bg-dark-600 dark:text-dark-150;
 
         &:first-child {
             @apply rounded-t border-none;
@@ -70,8 +83,8 @@
     }
 
     .global-search-result-badge {
-        @apply rounded px-1 text-2xs border bg-gray-200 text-gray;
-        @apply dark:bg-dark-600 dark:text-dark-100 dark:border-dark-700;
+        @apply rounded border bg-gray-200 px-1 text-2xs text-gray;
+        @apply dark:border-dark-700 dark:bg-dark-600 dark:text-dark-100;
     }
 
     .active {
@@ -79,7 +92,7 @@
     }
 
     .title {
-        @apply font-medium text-sm;
+        @apply text-sm font-medium;
     }
 
     .url {
@@ -87,14 +100,17 @@
     }
 
     .status {
-        float: right ; [dir="rtl"] & { float: left ; }
+        float: right;
+        [dir='rtl'] & {
+            float: left;
+        }
         background: #ddd;
         border-radius: 2px;
         padding: 2px 4px;
     }
 
     .icon {
-        @apply text-gray dark:text-dark-175 relative cursor-pointer overflow-hidden;
+        @apply relative cursor-pointer overflow-hidden text-gray dark:text-dark-175;
         font-size: 18px;
         top: 1px;
         width: 20px;
@@ -104,41 +120,65 @@
 
     .reset {
         font-size: 21px;
-        left: -3px ; [dir="rtl"] & { left: auto ; right: -3px ; }
+        left: -3px;
+        [dir='rtl'] & {
+            left: auto;
+            right: -3px;
+        }
         position: relative;
     }
 
     kbd {
-        @apply font-sans rounded px-1 pb-px text-2xs border text-gray-500;
+        @apply rounded border px-1 pb-px font-sans text-2xs text-gray-500;
     }
 }
 
 @screen lg {
     .global-search {
         @apply flex w-128 max-w-full;
-        .global-search-results { @apply w-128 }
+        .global-search-results {
+            @apply w-128;
+        }
     }
 }
 
 .site-selector {
-
-    .v-select { @apply h-full }
-    .vs__dropdown-toggle { @apply border-none bg-none }
-    .vs__actions { @apply hidden }
-    .vs__search { @apply p-0; [dir="rtl"] & { @apply p-0; } [dir="ltr"] & { @apply p-0; } }
-    .vs__selected-options { @apply border-none shadow-none p-0 bg-none }
-    .vs__selected { @apply flex }
+    .v-select {
+        @apply h-full;
+    }
+    .vs__dropdown-toggle {
+        @apply border-none bg-none;
+    }
+    .vs__actions {
+        @apply hidden;
+    }
+    .vs__search {
+        @apply p-0;
+        [dir='rtl'] & {
+            @apply p-0;
+        }
+        [dir='ltr'] & {
+            @apply p-0;
+        }
+    }
+    .vs__selected-options {
+        @apply border-none bg-none p-0 shadow-none;
+    }
+    .vs__selected {
+        @apply flex;
+    }
     .vs__dropdown-toggle {
         @apply h-full rounded-none bg-transparent;
         box-shadow: none;
     }
 
-    .vs--single.vs--unsearchable .vs__selected-options { @apply bg-none }
+    .vs--single.vs--unsearchable .vs__selected-options {
+        @apply bg-none;
+    }
 }
 
-
 .session-expiry-stripe {
-    @apply px-4 py-2 text-xs top-0 text-center bg-red-500 text-white cursor-pointer w-full outline-none fixed;
+    @apply fixed top-0 w-full cursor-pointer bg-red-500 px-4 py-2 text-center text-xs text-white outline-none;
     z-index: 999;
     height: 48px;
 
@@ -146,7 +186,8 @@
         @apply bg-red-700;
     }
 
-    &:active, &:focus {
+    &:active,
+    &:focus {
         outline: none;
     }
 
@@ -161,25 +202,31 @@
 }
 
 @keyframes rotate {
-	100% {
-		transform: rotate(1turn);
-	}
+    100% {
+        transform: rotate(1turn);
+    }
 }
 
 .animate-radar {
     @apply relative z-0;
 
-	&::after {
+    &::after {
         @apply absolute bg-transparent bg-no-repeat;
-		content: '';
-		z-index: 2;
-		left: -50%;
-		top: -50%;
-		width: 200%;
-		height: 200%;
-		background-size: 50% 50%, 50% 50%;
-		background-position: 0 0, 100% 0, 100% 100%, 0 100%;
-		background-image: linear-gradient(transparent, rgba(255,255,255,.7), transparent);
-		animation: rotate 4s linear infinite;
-	}
+        content: '';
+        z-index: 2;
+        left: -50%;
+        top: -50%;
+        width: 200%;
+        height: 200%;
+        background-size:
+            50% 50%,
+            50% 50%;
+        background-position:
+            0 0,
+            100% 0,
+            100% 100%,
+            0 100%;
+        background-image: linear-gradient(transparent, rgba(255, 255, 255, 0.7), transparent);
+        animation: rotate 4s linear infinite;
+    }
 }
diff --git a/resources/css/components/items.css b/resources/css/components/items.css
index d5edcf0fb1..effecd04b3 100644
--- a/resources/css/components/items.css
+++ b/resources/css/components/items.css
@@ -1,24 +1,26 @@
 .item {
-    @apply text-sm outline-none bg-white flex w-full justify-between rounded border shadow-sm items-center;
+    @apply flex w-full items-center justify-between rounded border bg-white text-sm shadow-sm outline-none;
     @apply dark:border-dark-900 dark:bg-dark-550 dark:shadow-dark-sm;
 
     .item-move {
-        @apply w-4 self-stretch bg-gray-200 rtl:border-l ltr:border-r rtl:rounded-r ltr:rounded-l p-2 cursor-grab;
+        @apply w-4 cursor-grab self-stretch bg-gray-200 p-2 ltr:rounded-l ltr:border-r rtl:rounded-r rtl:border-l;
         @apply dark:border-dark-900 dark:bg-dark-550;
         background-image: url('../../svg/icons/light/drag-dots.svg');
         background-repeat: no-repeat;
         background-position: center center;
         background-size: 7px 17px;
-        &:hover { @apply bg-gray-300 dark:bg-dark-650; }
+        &:hover {
+            @apply bg-gray-300 dark:bg-dark-650;
+        }
     }
 
     .item-inner {
-        @apply w-full flex items-center p-2;
+        @apply flex w-full items-center p-2;
     }
 
     &.invalid {
         .item-inner {
-            @apply border-red-300 dark:border-dark-red bg-red-100 dark:bg-red-400 text-red-500 dark:text-red-950;
+            @apply border-red-300 bg-red-100 text-red-500 dark:border-dark-red dark:bg-red-400 dark:text-red-950;
         }
     }
 
diff --git a/resources/css/components/metrics.css b/resources/css/components/metrics.css
index d71136fc85..cbf3881400 100644
--- a/resources/css/components/metrics.css
+++ b/resources/css/components/metrics.css
@@ -10,11 +10,10 @@
 }
 
 .metric {
-
 }
 
 .mini-chart {
-    @apply shadow bg-gray-800 relative rounded;
+    @apply relative rounded bg-gray-800 shadow;
     .count {
         overflow: hidden;
         color: #fff;
@@ -24,10 +23,17 @@
             margin: 10px 0 0;
         }
     }
-    &.dark { }
-    &.blue { @apply bg-blue; }
-    &.green { @apply bg-green-600; }
-    &.red { @apply bg-red-500; }
+    &.dark {
+    }
+    &.blue {
+        @apply bg-blue;
+    }
+    &.green {
+        @apply bg-green-600;
+    }
+    &.red {
+        @apply bg-red-500;
+    }
 }
 
 .metric.simple {
diff --git a/resources/css/components/modal.css b/resources/css/components/modal.css
index 2ceefab7d6..404efc0a74 100644
--- a/resources/css/components/modal.css
+++ b/resources/css/components/modal.css
@@ -7,7 +7,7 @@
 
 .vfm__content {
     @apply rounded-lg dark:bg-dark-600 dark:shadow-dark !important;
-    @apply bg-white shadow-2xl overflow-clip;
+    @apply overflow-clip bg-white shadow-2xl;
 
     [dir='rtl'] & {
         direction: rtl;
@@ -15,9 +15,9 @@
 }
 
 .vfm__overlay {
-    background: hsla(210, 20%, 10%, .15) !important;
+    background: hsla(210, 20%, 10%, 0.15) !important;
 }
 
 .confirmation-modal .publish-fields .form-group {
-    @apply p-0 mb-6;
+    @apply mb-6 p-0;
 }
diff --git a/resources/css/components/nav-main.css b/resources/css/components/nav-main.css
index 66e2d63e9a..b7194969e6 100644
--- a/resources/css/components/nav-main.css
+++ b/resources/css/components/nav-main.css
@@ -3,15 +3,17 @@
    ========================================================================== */
 
 .nav-main {
-    @apply hidden select-none bg-white shadow h-screen absolute rtl:right-0 ltr:left-0 overflow-scroll w-56;
+    @apply absolute hidden h-screen w-56 select-none overflow-scroll bg-white shadow ltr:left-0 rtl:right-0;
     @apply dark:bg-dark-800 dark:shadow-dark;
 
-    transition: all .3s;
+    transition: all 0.3s;
 
-    h6 { @apply mt-6; }
+    h6 {
+        @apply mt-6;
+    }
 
     ul {
-        @apply list-none p-0 mt-0;
+        @apply mt-0 list-none p-0;
     }
 
     li {
@@ -20,8 +22,8 @@
     }
 
     li a {
-        @apply p-0 flex items-center text-gray-800 dark:text-dark-150;
-        transition: all .08s ease-in-out;
+        @apply flex items-center p-0 text-gray-800 dark:text-dark-150;
+        transition: all 0.08s ease-in-out;
 
         &:hover {
             @apply text-blue dark:text-blue-300;
@@ -31,13 +33,13 @@
         }
 
         i {
-            @apply block h-7 p-1 w-7 rtl:ml-2 ltr:mr-2 rounded-full;
+            @apply block h-7 w-7 rounded-full p-1 ltr:mr-2 rtl:ml-2;
             @apply dark:text-dark-150/70;
         }
     }
 
     li.current > a {
-        @apply text-gray-900 font-medium dark:text-white;
+        @apply font-medium text-gray-900 dark:text-white;
 
         i {
             @apply bg-white dark:bg-dark-600 dark:text-dark-100;
@@ -46,11 +48,19 @@
 
     li ul {
         @apply mb-2;
-        margin-left: 1.5rem ; [dir="rtl"] & { margin-right: 1.5rem ; margin-left: 0 ; }
+        margin-left: 1.5rem;
+        [dir='rtl'] & {
+            margin-right: 1.5rem;
+            margin-left: 0;
+        }
 
         li {
             @apply text-xs;
-            margin-left: 12px ; [dir="rtl"] & { margin-right: 12px ; margin-left: 0 ; }
+            margin-left: 12px;
+            [dir='rtl'] & {
+                margin-right: 12px;
+                margin-left: 0;
+            }
         }
 
         li a {
@@ -59,7 +69,11 @@
     }
 
     .nav-closed & {
-        left: -110% ; [dir="rtl"] & { left: auto ; right: -110% ; }
+        left: -110%;
+        [dir='rtl'] & {
+            left: auto;
+            right: -110%;
+        }
     }
 
     .nav-section-top-level {
@@ -69,7 +83,7 @@
 
 @screen md {
     .nav-main {
-        @apply fixed flex bg-transparent shadow-none overflow-auto rtl:border-l ltr:border-r dark:border-dark-900;
+        @apply fixed flex overflow-auto bg-transparent shadow-none dark:border-dark-900 ltr:border-r rtl:border-l;
         height: calc(100% - 52px);
         .showing-license-banner & {
             height: calc(100% - 105px);
@@ -82,11 +96,11 @@
 }
 
 .nav-main-inner {
-    @apply rtl:pr-6 ltr:pl-6 rtl:pl-4 ltr:pr-4 pt-2;
+    @apply pt-2 ltr:pl-6 ltr:pr-4 rtl:pl-4 rtl:pr-6;
 }
 
 .nav-toggle {
-    @apply flex items-center justify-center h-6 p-1 w-6 rtl:ml-3 ltr:mr-3 rounded;
+    @apply flex h-6 w-6 items-center justify-center rounded p-1 ltr:mr-3 rtl:ml-3;
     outline: none !important;
 
     &:hover {
@@ -94,7 +108,5 @@
     }
 }
 
-
-
 /* Responsive Wangjangling
   ========================================================================== */
diff --git a/resources/css/components/nav-mobile.css b/resources/css/components/nav-mobile.css
index 122f05d5fb..0e74261944 100644
--- a/resources/css/components/nav-mobile.css
+++ b/resources/css/components/nav-mobile.css
@@ -3,17 +3,29 @@
    ========================================================================== */
 
 .nav-main.nav-mobile {
-    left: -110% ; [dir="rtl"] & { left: auto ; right: -110% ; }
+    left: -110%;
+    [dir='rtl'] & {
+        left: auto;
+        right: -110%;
+    }
     display: block;
     z-index: 996;
     .nav-main-inner {
-        padding-left: 12px ; [dir="rtl"] & { padding-right: 12px ; padding-left: 0 ; }
+        padding-left: 12px;
+        [dir='rtl'] & {
+            padding-right: 12px;
+            padding-left: 0;
+        }
     }
 }
 
 .nav-mobile-open {
     .nav-main.nav-mobile {
-        left: 0 ; [dir="rtl"] & { left: auto ; right: 0 ; }
+        left: 0;
+        [dir='rtl'] & {
+            left: auto;
+            right: 0;
+        }
     }
 }
 
diff --git a/resources/css/components/notifications.css b/resources/css/components/notifications.css
index 352edc9175..32874e423d 100644
--- a/resources/css/components/notifications.css
+++ b/resources/css/components/notifications.css
@@ -13,15 +13,15 @@
 }
 
 .toasted-container .toasted.statamic {
-    @apply bg-white dark:bg-dark-900 text-gray-800 dark:text-dark-100 mt-4 text-base rounded shadow p-0;
+    @apply mt-4 rounded bg-white p-0 text-base text-gray-800 shadow dark:bg-dark-900 dark:text-dark-100;
     height: 48px;
 
     i {
-        @apply flex items-center rtl:rounded-r ltr:rounded-l rtl:ml-4 ltr:mr-4 h-full px-4 text-white;
+        @apply flex h-full items-center px-4 text-white ltr:mr-4 ltr:rounded-l rtl:ml-4 rtl:rounded-r;
     }
 
     &.success i {
-        @apply bg-green-400 dark:bg-green-600 text-green-700 dark:text-green-950;
+        @apply bg-green-400 text-green-700 dark:bg-green-600 dark:text-green-950;
     }
 
     &.error i {
@@ -33,9 +33,9 @@
     }
 
     .action {
-        @apply font-normal text-xl px-4 h-full text-gray-600 dark:text-dark-150 m-0 rtl:mr-2 ltr:ml-2 flex items-center;
+        @apply m-0 flex h-full items-center px-4 text-xl font-normal text-gray-600 dark:text-dark-150 ltr:ml-2 rtl:mr-2;
         &:hover {
-            @apply no-underline text-gray-900 dark:text-dark-100;
+            @apply text-gray-900 no-underline dark:text-dark-100;
         }
     }
 }
diff --git a/resources/css/components/outside.css b/resources/css/components/outside.css
index 86966d7aef..15dd80b063 100644
--- a/resources/css/components/outside.css
+++ b/resources/css/components/outside.css
@@ -1,18 +1,18 @@
 /* Outside the Control Panel
   ========================================================================== */
 .outside {
-    @apply bg-gray-300 px-2 min-h-screen;
+    @apply min-h-screen bg-gray-300 px-2;
 
     label {
         @apply text-[#596498] dark:text-dark-175;
     }
 
     .logo svg {
-        @apply h-6 block mx-auto mb-20 mb-8 w-auto text-black/25 dark:text-white/60;
+        @apply mx-auto mb-20 mb-8 block h-6 w-auto text-black/25 dark:text-white/60;
     }
 }
 
- /*  Alternate rad mode for a more playful vibe */
+/*  Alternate rad mode for a more playful vibe */
 .outside.rad-theme {
     background: #12c2e9;
     background: linear-gradient(45deg, #f64f59, #c471ed, #12c2e9);
@@ -20,11 +20,21 @@
 
 .dark .outside.rad-theme {
     background: #212223;
-    background-image: radial-gradient(at 32.6% 91.5%, #142038 0px, transparent 50%), radial-gradient(at 87.4% 39.4%, #353945 0px, transparent 50%), radial-gradient(at 84.6% 52.5%, #171717 0px, transparent 50%);
+    background-image: radial-gradient(at 32.6% 91.5%, #142038 0px, transparent 50%),
+        radial-gradient(at 87.4% 39.4%, #353945 0px, transparent 50%),
+        radial-gradient(at 84.6% 52.5%, #171717 0px, transparent 50%);
 }
 
 .dark .outside-shadow {
-    background: conic-gradient(from 230.29deg at 51.63% 52.16%, rgb(36, 0, 255) 0deg, rgb(0, 135, 255) 67.5deg, rgb(108, 39, 157) 198.75deg, rgb(24, 38, 163) 251.25deg, rgb(54, 103, 196) 301.88deg, rgb(105, 30, 255) 360deg);
+    background: conic-gradient(
+        from 230.29deg at 51.63% 52.16%,
+        rgb(36, 0, 255) 0deg,
+        rgb(0, 135, 255) 67.5deg,
+        rgb(108, 39, 157) 198.75deg,
+        rgb(24, 38, 163) 251.25deg,
+        rgb(54, 103, 196) 301.88deg,
+        rgb(105, 30, 255) 360deg
+    );
     filter: blur(160px);
     transform: translateZ(0px);
     @apply absolute inset-0;
@@ -35,8 +45,8 @@
    ========================================================================== */
 
 .auth-card {
-    @apply p-6 mx-auto relative z-10 w-full;
-    transition: .12s ease-out;
+    @apply relative z-10 mx-auto w-full p-6;
+    transition: 0.12s ease-out;
 }
 
 .outside .white-label-logo {
@@ -44,8 +54,6 @@
     max-width: 300px;
 }
 
-
-
 /* Rad Mode Stylez
   ========================================================================== */
 
@@ -53,38 +61,38 @@ html:not(.dark) .outside.rad-theme {
     .auth-card {
         @apply rounded-lg;
         box-shadow:
-            rgba(50, 50, 93, .4) 0 12px 34px,
-            rgba(0, 0, 0, .1) 0 3px 4px,
-            inset rgba(108, 167, 234, .2) -5px 5px 30px,
-            inset rgba(241, 84, 106, .2) 5px -5px 30px;
-        &:hover, &:focus-within {
+            rgba(50, 50, 93, 0.4) 0 12px 34px,
+            rgba(0, 0, 0, 0.1) 0 3px 4px,
+            inset rgba(108, 167, 234, 0.2) -5px 5px 30px,
+            inset rgba(241, 84, 106, 0.2) 5px -5px 30px;
+        &:hover,
+        &:focus-within {
             transform: translateY(-2px);
             box-shadow:
-                rgba(50, 50, 93, .5) 0 35px 78px 0,
-                rgba(0, 0, 0, .15) 0 4px 5px,
-                inset rgba(108, 167, 234, .15) -3px 3px 25px,
-                inset rgba(241, 84, 106, .15) 3px -3px 25px;
+                rgba(50, 50, 93, 0.5) 0 35px 78px 0,
+                rgba(0, 0, 0, 0.15) 0 4px 5px,
+                inset rgba(108, 167, 234, 0.15) -3px 3px 25px,
+                inset rgba(241, 84, 106, 0.15) 3px -3px 25px;
         }
     }
 
-
     .input-text {
         @apply rounded-lg;
     }
 
     .btn-primary {
-        @apply text-shadow text-white border-0 rounded-md !important;
+        @apply text-shadow rounded-md border-0 text-white !important;
         background: linear-gradient(45deg, #f64f59, #c471ed) !important;
         box-shadow: 0 2px 5px rgba(246, 79, 89, 0.3) !important;
         &:hover {
-            background: linear-gradient(45deg, #DA464F, #AD64D1) !important;
+            background: linear-gradient(45deg, #da464f, #ad64d1) !important;
             color: #fff;
             box-shadow: 0 2px 5px rgba(246, 79, 89, 0.3) !important;
         }
     }
 
     .forgot-password-link {
-        @apply text-white text-shadow;
+        @apply text-shadow text-white;
     }
 }
 
diff --git a/resources/css/components/page-tree.css b/resources/css/components/page-tree.css
index 31d90b62d6..78703978f9 100644
--- a/resources/css/components/page-tree.css
+++ b/resources/css/components/page-tree.css
@@ -1,11 +1,10 @@
 .page-tree {
-
     .tree-node {
         @apply dark:mb-1;
     }
 
     .page-tree-branch {
-        @apply relative text-xs bg-white shadow rounded;
+        @apply relative rounded bg-white text-xs shadow;
         @apply dark:bg-dark-600 dark:shadow-dark;
 
         &:hover {
@@ -18,14 +17,16 @@
     }
 
     .page-move {
-        @apply w-6 rtl:border-l ltr:border-r rtl:rounded-r ltr:rounded-l dark:text-dark-175 dark:border-dark-900;
+        @apply w-6 dark:border-dark-900 dark:text-dark-175 ltr:rounded-l ltr:border-r rtl:rounded-r rtl:border-l;
         cursor: grab;
-        background-color: hsla(210, 30%, 95%, .5);
+        background-color: hsla(210, 30%, 95%, 0.5);
         background-image: url('../../svg/icons/light/drag-dots.svg');
         background-size: 7px 17px;
         background-position: center center;
         background-repeat: no-repeat;
-        &:hover { @apply bg-gray-300 dark:bg-dark-700; }
+        &:hover {
+            @apply bg-gray-300 dark:bg-dark-700;
+        }
 
         .dark & {
             background-color: hsla(180, 1%, 18%, 0.5);
@@ -33,7 +34,7 @@
     }
 
     .page-root {
-        background-color: hsla(210, 30%, 95%, .5);
-        @apply flex w-6 rtl:rounded-r ltr:rounded-l items-center rtl:border-l ltr:border-r dark:border-dark-900;
+        background-color: hsla(210, 30%, 95%, 0.5);
+        @apply flex w-6 items-center dark:border-dark-900 ltr:rounded-l ltr:border-r rtl:rounded-r rtl:border-l;
     }
 }
diff --git a/resources/css/components/pagination.css b/resources/css/components/pagination.css
index 6a3846ddb0..48356dd150 100644
--- a/resources/css/components/pagination.css
+++ b/resources/css/components/pagination.css
@@ -3,33 +3,33 @@
    ========================================================================== */
 
 .pagination {
-    @apply flex justify-center shadow dark:shadow-dark items-center list-none p-0 rounded overflow-hidden;
+    @apply flex list-none items-center justify-center overflow-hidden rounded p-0 shadow dark:shadow-dark;
 
-	li a {
-        @apply h-full px-3 py-2 rtl:border-l ltr:border-r dark:border-dark-900 bg-white dark:bg-dark-600 block text-gray-800 dark:text-dark-150;
+    li a {
+        @apply block h-full bg-white px-3 py-2 text-gray-800 dark:border-dark-900 dark:bg-dark-600 dark:text-dark-150 ltr:border-r rtl:border-l;
 
-		&:hover {
-            @apply bg-gray-100 dark:bg-dark-700 text-gray-800 dark:text-dark-100;
-		}
-	}
+        &:hover {
+            @apply bg-gray-100 text-gray-800 dark:bg-dark-700 dark:text-dark-100;
+        }
+    }
 
-	li > .unclickable {
-        @apply h-full px-3 py-2 rtl:border-l ltr:border-r dark:border-dark-900 bg-white dark:bg-dark-600 block text-gray-500 dark:text-dark-200;
+    li > .unclickable {
+        @apply block h-full bg-white px-3 py-2 text-gray-500 dark:border-dark-900 dark:bg-dark-600 dark:text-dark-200 ltr:border-r rtl:border-l;
 
-		&:hover {
+        &:hover {
             cursor: text;
-		}
-	}
+        }
+    }
 
-	li:last-child a {
-		@apply rtl:border-l-0 ltr:border-r-0;
-	}
+    li:last-child a {
+        @apply ltr:border-r-0 rtl:border-l-0;
+    }
 
-	li.current a {
-        @apply bg-gray-100 dark:bg-dark-700 text-blue dark:text-dark-blue-100 shadow-inner;
-	}
+    li.current a {
+        @apply bg-gray-100 text-blue shadow-inner dark:bg-dark-700 dark:text-dark-blue-100;
+    }
 }
 
 .pagination.pagination-inline {
-	@apply shadow-none rounded-none;
+    @apply rounded-none shadow-none;
 }
diff --git a/resources/css/components/popover.css b/resources/css/components/popover.css
index 8698d86018..3fcb5c676d 100644
--- a/resources/css/components/popover.css
+++ b/resources/css/components/popover.css
@@ -20,8 +20,8 @@
         transform-origin: 50% 10%;
         animation-fill-mode: forwards;
         opacity: 0;
-        transform: scale(.85);
-        transition: all .05s ease-in;
+        transform: scale(0.85);
+        transition: all 0.05s ease-in;
         will-change: transform, opacity;
         background-clip: padding-box;
     }
@@ -51,11 +51,11 @@
 /*  Supporting elements */
 .rotating-dots {
     @apply relative cursor-pointer;
-    transition: .12s ease-out;
+    transition: 0.12s ease-out;
 }
 
 .rotating-dots-button {
-    @apply text-gray-700 dark:text-dark-150 rounded-full flex items-center justify-center;
+    @apply flex items-center justify-center rounded-full text-gray-700 dark:text-dark-150;
     height: 24px;
     width: 24px;
 
diff --git a/resources/css/components/preview.css b/resources/css/components/preview.css
index 11b4d96d2c..59280cbb50 100644
--- a/resources/css/components/preview.css
+++ b/resources/css/components/preview.css
@@ -3,7 +3,7 @@
 }
 
 .live-preview-header {
-    @apply relative rtl:pl-4 ltr:pr-4 rtl:pr-6 ltr:pl-6 py-2 h-13 shadow-md flex items-center justify-between;
+    @apply relative flex h-13 items-center justify-between py-2 shadow-md ltr:pl-6 ltr:pr-4 rtl:pl-4 rtl:pr-6;
     background: linear-gradient(180deg, #fff, #f9fafb);
     border-bottom: 1px solid #c4cdd6;
     z-index: 2;
@@ -14,14 +14,13 @@
     }
 }
 
-
 .live-preview-main {
     @apply flex flex-1 overflow-scroll;
     z-index: 1;
 }
 
 .live-preview-editor {
-    @apply flex relative bg-gray-200 dark:bg-dark-800 h-full;
+    @apply relative flex h-full bg-gray-200 dark:bg-dark-800;
     z-index: 3;
 }
 
@@ -35,17 +34,17 @@
 }
 
 .live-preview-contents {
-    @apply relative bg-gray-500 flex-1 flex flex-col;
+    @apply relative flex flex-1 flex-col bg-gray-500;
     z-index: 1;
 }
 
 .live-preview .tabs-container {
-    @apply bg-gray-300 dark:bg-dark-550 mb-0;
+    @apply mb-0 bg-gray-300 dark:bg-dark-550;
     @apply @4xl/live-preview:mb-6;
 }
 
 .live-preview .publish-tabs {
-    @apply rtl:pr-4 ltr:pl-4 rtl:@4xl/live-preview:pr-6 ltr:@4xl/live-preview:pl-6;
+    @apply ltr:pl-4 ltr:@4xl/live-preview:pl-6 rtl:pr-4 rtl:@4xl/live-preview:pr-6;
 }
 
 .live-preview .publish-sections-section {
@@ -66,12 +65,16 @@
 
 .live-preview-contents iframe {
     @apply bg-white;
-    &.responsive { @apply h-full w-full; }
-    &.device { @apply mt-4 shadow-lg rounded; }
+    &.responsive {
+        @apply h-full w-full;
+    }
+    &.device {
+        @apply mt-4 rounded shadow-lg;
+    }
 }
 
 .live-preview-resizer {
-    @apply w-4 rtl:border-r ltr:border-l rtl:border-l ltr:border-r border-gray-400 dark:border-dark-900 shadow-sm;
+    @apply w-4 border-gray-400 shadow-sm dark:border-dark-900 ltr:border-l ltr:border-r rtl:border-l rtl:border-r;
     z-index: 1;
     cursor: ew-resize;
     background: theme('colors.gray.100') url('../../svg/icons/light/drag-dots.svg') center center no-repeat;
@@ -82,7 +85,6 @@
     }
 }
 
-
 .live-preview-header-slide-enter-active,
 .live-preview-header-slide-leave-active {
     transition: all 0.3s ease;
@@ -112,7 +114,6 @@
     opacity: 0;
 }
 
-
 /*  We only want the animation to happen when its on the regular publish page. */
 /*  When portal-ed into live preview, it won't be inside .workspace */
 .workspace {
@@ -121,7 +122,7 @@
         transition: all 0.2s;
     }
     .live-preview-tabs-drop-enter-active {
-        transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275)
+        transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
     }
     .live-preview-tabs-drop-leave-active {
         transition-timing-function: cubic-bezier(0.6, -0.28, 0.735, 0.045);
diff --git a/resources/css/components/progress.css b/resources/css/components/progress.css
index 21b032fb0d..269d540e3a 100644
--- a/resources/css/components/progress.css
+++ b/resources/css/components/progress.css
@@ -4,15 +4,17 @@
 }
 
 #nprogress .bar {
-    @apply bg-blue fixed top-0 rtl:right-0 ltr:left-0 w-full;;
+    @apply fixed top-0 w-full bg-blue ltr:left-0 rtl:right-0;
     height: 2px;
     z-index: 10000; /*  above global-header */
 }
 
 /* Fancy blur effect */
 #nprogress .peg {
-    @apply block absolute rtl:left-0 ltr:right-0 w-full h-full opacity-100;
-    box-shadow: 0 0 5px theme('colors.blue.DEFAULT'), 0 0 2px theme('colors.blue.DEFAULT');
+    @apply absolute block h-full w-full opacity-100 ltr:right-0 rtl:left-0;
+    box-shadow:
+        0 0 5px theme('colors.blue.DEFAULT'),
+        0 0 2px theme('colors.blue.DEFAULT');
 }
 
 .nprogress-custom-parent {
diff --git a/resources/css/components/publish.css b/resources/css/components/publish.css
index 9c2e52c5cf..a667f00591 100644
--- a/resources/css/components/publish.css
+++ b/resources/css/components/publish.css
@@ -27,7 +27,10 @@
 .head .status {
     display: inline-block;
     label {
-        margin: 0 6px 0 0 ; [dir="rtl"] & { margin: 0 0 0 6px ; }
+        margin: 0 6px 0 0;
+        [dir='rtl'] & {
+            margin: 0 0 0 6px;
+        }
         position: relative;
         top: 3px;
     }
@@ -36,12 +39,14 @@
         position: relative;
         top: 8px;
     }
-
 }
 
 code.parent-url {
-    @apply block text-3xs bg-none text-gray-700;
-    padding: 0 0 3px 0 ; [dir="rtl"] & { padding: 0 0 3px 0 ; }
+    @apply block bg-none text-3xs text-gray-700;
+    padding: 0 0 3px 0;
+    [dir='rtl'] & {
+        padding: 0 0 3px 0;
+    }
 }
 
 .publish-fields {
@@ -50,7 +55,7 @@ code.parent-url {
     .form-group {
         > label,
         .field-inner > label {
-            @apply font-medium mb-2;
+            @apply mb-2 font-medium;
         }
     }
 
@@ -76,11 +81,11 @@ code.parent-url {
             @apply pr-6;
         }
         .field-dropdown {
-            @apply block absolute bottom-[-3px] right-0;
+            @apply absolute bottom-[-3px] right-0 block;
         }
         &:not(.has-field-label) {
             .field-inner {
-                @apply min-h-[19.5px] mb-2;
+                @apply mb-2 min-h-[19.5px];
             }
         }
     }
@@ -99,17 +104,20 @@ code.parent-url {
 }
 
 .publish-section-header {
-    @apply border-b border-gray-400 dark:border-dark-900 bg-gray-100 dark:bg-dark-700 rounded-t-lg;
+    @apply rounded-t-lg border-b border-gray-400 bg-gray-100 dark:border-dark-900 dark:bg-dark-700;
 }
 
 .publish-section-header-inner {
-    @apply px-4 @lg:px-6 pt-4 pb-3;
-
+    @apply px-4 pb-3 pt-4 @lg:px-6;
 }
 
 .publish-sidebar {
     @apply shrink-0;
-    margin-left: 20px ; [dir="rtl"] & { margin-right: 20px ; margin-left: 0 ; }
+    margin-left: 20px;
+    [dir='rtl'] & {
+        margin-right: 20px;
+        margin-left: 0;
+    }
     width: 300px;
 
     .publish-fields .form-group {
diff --git a/resources/css/components/revisions.css b/resources/css/components/revisions.css
index 17649ad950..0db4fa56f1 100644
--- a/resources/css/components/revisions.css
+++ b/resources/css/components/revisions.css
@@ -7,11 +7,11 @@
 }
 
 .revision-date {
-    @apply p-4 pb-2 mt-4;
+    @apply mt-4 p-4 pb-2;
 }
 
 .revision-item {
-    @apply p-2 text-sm block cursor-pointer border-t dark:border-dark-900;
+    @apply block cursor-pointer border-t p-2 text-sm dark:border-dark-900;
     &:hover {
         @apply bg-gray-200 dark:bg-dark-400;
     }
@@ -21,11 +21,11 @@
 }
 
 .revision-item-bullet-container {
-    @apply w-4 relative;
+    @apply relative w-4;
     top: -2px;
 
     .revision-item-bullet {
-        @apply bg-gray-600 inline-block relative;
+        @apply relative inline-block bg-gray-600;
         border-radius: 7px;
         height: 7px;
         width: 7px;
@@ -34,26 +34,38 @@
 }
 
 .revision-item .badge {
-    @apply uppercase text-4xs rtl:mr-2 ltr:ml-2 text-white rounded-sm;
+    @apply rounded-sm text-4xs uppercase text-white ltr:ml-2 rtl:mr-2;
     height: 16px;
 
-    &.publish { @apply bg-green-600; }
+    &.publish {
+        @apply bg-green-600;
+    }
     &.revision,
-    &.restore { @apply text-gray-700 dark:text-dark-150 dark:bg-dark-300; }
-    &.unpublish { @apply bg-red-500; }
+    &.restore {
+        @apply text-gray-700 dark:bg-dark-300 dark:text-dark-150;
+    }
+    &.unpublish {
+        @apply bg-red-500;
+    }
 }
 
 .revision-item-note {
-    @apply text-sm text-gray-800 font-medium mb-1;
+    @apply mb-1 text-sm font-medium text-gray-800;
     width: 300px;
 }
 
 .revision-item.status-published {
-    .revision-item-bullet { @apply bg-green-600; }
+    .revision-item-bullet {
+        @apply bg-green-600;
+    }
 }
 
 .revision-item.status-working-copy {
     @apply text-blue;
-    .revision-item-bullet { @apply bg-blue dark:bg-dark-blue-100; }
-    .badge { @apply bg-blue dark:bg-dark-blue-100; }
+    .revision-item-bullet {
+        @apply bg-blue dark:bg-dark-blue-100;
+    }
+    .badge {
+        @apply bg-blue dark:bg-dark-blue-100;
+    }
 }
diff --git a/resources/css/components/roles.css b/resources/css/components/roles.css
index d726dbf1d5..472cb6b98d 100644
--- a/resources/css/components/roles.css
+++ b/resources/css/components/roles.css
@@ -4,12 +4,18 @@
 
 .roles {
     li li {
-        margin-left: 30px ; [dir="rtl"] & { margin-right: 30px ; margin-left: 0 ; }
+        margin-left: 30px;
+        [dir='rtl'] & {
+            margin-right: 30px;
+            margin-left: 0;
+        }
     }
 
     .disabled {
         opacity: 0.5;
 
-        .disabled { opacity: 1; } /*  prevent cascading */
+        .disabled {
+            opacity: 1;
+        } /*  prevent cascading */
     }
 }
diff --git a/resources/css/components/settings.css b/resources/css/components/settings.css
index f411af20aa..adec248e17 100644
--- a/resources/css/components/settings.css
+++ b/resources/css/components/settings.css
@@ -1,9 +1,9 @@
 .config-field {
-    @apply md:flex flex-wrap border-b border-gray-400 dark:border-dark-900 w-full;
-    @apply p-3 @sm:p-4 m-0;
+    @apply w-full flex-wrap border-b border-gray-400 dark:border-dark-900 md:flex;
+    @apply m-0 p-3 @sm:p-4;
 
     .field-inner {
-        @apply w-full md:w-1/2 rtl:md:pl-8 ltr:md:pr-8;
+        @apply w-full md:w-1/2 ltr:md:pr-8 rtl:md:pl-8;
     }
 
     .field-inner + div {
diff --git a/resources/css/components/shortcuts.css b/resources/css/components/shortcuts.css
index 77e833b227..627a01c173 100644
--- a/resources/css/components/shortcuts.css
+++ b/resources/css/components/shortcuts.css
@@ -3,7 +3,7 @@
    ========================================================================== */
 
 .shortcut-pair {
-    @apply pb-2 mb-2 antialiased flex items-center justify-between;
+    @apply mb-2 flex items-center justify-between pb-2 antialiased;
     &:not(:last-child) {
         @apply border-b dark:border-dark-800;
     }
@@ -12,25 +12,34 @@
 .shortcut {
     @apply flex items-center justify-center text-3xs;
     border-radius: 3px;
-    background: linear-gradient(-225deg,#d5dbe4,#f8f8f8);
-    box-shadow: inset 0 -2px 0 0 #cdcde6, inset 0 0 1px 1px #fff, 0 1px 2px 1px rgba(30,35,90,.4);
+    background: linear-gradient(-225deg, #d5dbe4, #f8f8f8);
+    box-shadow:
+        inset 0 -2px 0 0 #cdcde6,
+        inset 0 0 1px 1px #fff,
+        0 1px 2px 1px rgba(30, 35, 90, 0.4);
     color: #8d949e;
     min-width: 18px;
     height: 18px;
-    margin: 0 .25em;
-    padding: 0 2px 2px 2px ; [dir="rtl"] & { padding: 0 2px 2px 2px ; }
+    margin: 0 0.25em;
+    padding: 0 2px 2px 2px;
+    [dir='rtl'] & {
+        padding: 0 2px 2px 2px;
+    }
     .dark & {
         @apply bg-gradient-to-br from-dark-500 to-dark-600 text-dark-150;
-        box-shadow: inset 0 1px 0 0 #6b6868, inset 0 0 1px 1px rgba(0,0,0,.7), 0 1px 3px 1px rgba(30,35,90,.2);
+        box-shadow:
+            inset 0 1px 0 0 #6b6868,
+            inset 0 0 1px 1px rgba(0, 0, 0, 0.7),
+            0 1px 3px 1px rgba(30, 35, 90, 0.2);
     }
 }
 
 .shortcut-combo {
-    @apply flex order-2;
+    @apply order-2 flex;
 }
 
 .shortcut-joiner {
-    @apply text-gray text-xs mx-1;
+    @apply mx-1 text-xs text-gray;
 }
 
 .shortcut-value {
diff --git a/resources/css/components/sortable.css b/resources/css/components/sortable.css
index a1d82823ce..c1fc197b04 100644
--- a/resources/css/components/sortable.css
+++ b/resources/css/components/sortable.css
@@ -3,35 +3,38 @@
    ========================================================================== */
 
 table .ui-sortable-helper {
-	background: #fff;
-	display: table;
-	box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14),0 3px 1px -2px rgba(0, 0, 0, 0.1),0 1px 5px 0 rgba(0, 0, 0, 0.12);
+    background: #fff;
+    display: table;
+    box-shadow:
+        0 2px 2px 0 rgba(0, 0, 0, 0.14),
+        0 3px 1px -2px rgba(0, 0, 0, 0.1),
+        0 1px 5px 0 rgba(0, 0, 0, 0.12);
 }
 
 .placeholder {
-	background: #eee;
-	height: 37px;
+    background: #eee;
+    height: 37px;
 }
 
 .drag-handle {
     cursor: move;
-	&:active {
-		cursor: grabbing !important;
-	}
+    &:active {
+        cursor: grabbing !important;
+    }
 }
 
 tbody.ui-sortable {
-	> tr > .cell-counter > .move {
-        @apply hidden relative text-gray-700 text-md;
-		top: 2px;
-	}
+    > tr > .cell-counter > .move {
+        @apply relative hidden text-md text-gray-700;
+        top: 2px;
+    }
 
-	> tr:hover {
-		.default {
-			display: none;
-		}
-		.cell-counter > .move {
-			display: block;
-		}
-	}
+    > tr:hover {
+        .default {
+            display: none;
+        }
+        .cell-counter > .move {
+            display: block;
+        }
+    }
 }
diff --git a/resources/css/components/stacks.css b/resources/css/components/stacks.css
index c2280b86e8..4d02b8f0dc 100644
--- a/resources/css/components/stacks.css
+++ b/resources/css/components/stacks.css
@@ -4,7 +4,7 @@
 
 .portal-targets {
     /* position on top of global header (z-index 3) but ignore clicks */
-    @apply fixed inset-0 pointer-events-none;
+    @apply pointer-events-none fixed inset-0;
     z-index: 4;
 
     .vue-portal-target {
@@ -16,18 +16,18 @@
 .stacks-on-stacks {
     .stack-container {
         @apply absolute inset-0;
-        transition: left .3s ease;
+        transition: left 0.3s ease;
 
         [dir='rtl'] & {
-            transition: right .3s ease;
+            transition: right 0.3s ease;
         }
     }
 
     .stack-overlay {
-        @apply bg-black absolute inset-0;
+        @apply absolute inset-0 bg-black;
         opacity: 0.2;
         pointer-events: none;
-        transition: all .3s ease;
+        transition: all 0.3s ease;
 
         &.stack-overlay-fade-enter,
         &.stack-overlay-fade-leave-to {
@@ -35,13 +35,12 @@
         }
     }
 
-
     .stack-hit-area {
         @apply absolute inset-0 cursor-pointer;
     }
 
     .stack-content {
-        @apply h-full relative shadow-lg;
+        @apply relative h-full shadow-lg;
         transition: all 0.2s ease;
 
         &.stack-slide-enter,
@@ -55,7 +54,6 @@
         }
     }
 
-
     .hovering .stack-content {
         transform: translateX(-16px);
 
diff --git a/resources/css/components/tabs.css b/resources/css/components/tabs.css
index b237ca3c86..c2b3841dab 100644
--- a/resources/css/components/tabs.css
+++ b/resources/css/components/tabs.css
@@ -3,76 +3,79 @@
    ========================================================================== */
 
 .tabs-container {
-    @apply w-full border-b dark:border-dark-500 text-md relative flex mb-6;
+    @apply relative mb-6 flex w-full border-b text-md dark:border-dark-500;
 
-   .fade-left, .fade-right {
-        @apply absolute w-4 inset-y-0 from-gray-300 dark:from-dark-800 pointer-events-none z-2;
+    .fade-left,
+    .fade-right {
+        @apply pointer-events-none absolute inset-y-0 z-2 w-4 from-gray-300 dark:from-dark-800;
     }
 
     .fade-left {
-        @apply rtl:right-0 ltr:left-0 rtl:bg-gradient-to-l ltr:bg-gradient-to-r;
+        @apply ltr:left-0 ltr:bg-gradient-to-r rtl:right-0 rtl:bg-gradient-to-l;
     }
 
     .fade-right {
-        @apply rtl:left-0 ltr:right-0 rtl:bg-gradient-to-r ltr:bg-gradient-to-l;
+        @apply ltr:right-0 ltr:bg-gradient-to-l rtl:left-0 rtl:bg-gradient-to-r;
     }
 }
 
-.card .tabs-container .fade-left, .card .tabs-container .fade-right {
+.card .tabs-container .fade-left,
+.card .tabs-container .fade-right {
     @apply from-white dark:from-dark-600;
 }
 
 .tabs {
-    @apply flex space-x-2 rtl:space-x-reverse overflow-hidden relative w-full max-w-full;
+    @apply relative flex w-full max-w-full space-x-2 overflow-hidden rtl:space-x-reverse;
     &-scrolled {
-        @apply rtl:pr-0 ltr:pl-0 rtl:mr-0 ltr:ml-0;
+        @apply ltr:ml-0 ltr:pl-0 rtl:mr-0 rtl:pr-0;
     }
 }
 
 .tab-button {
-    @apply flex items-center px-2 py-2 text-gray-700 dark:text-dark-150 select-none border-b-2 border-transparent whitespace-nowrap shrink-0;
+    @apply flex shrink-0 select-none items-center whitespace-nowrap border-b-2 border-transparent px-2 py-2 text-gray-700 dark:text-dark-150;
     &:hover {
         @apply text-gray-800 dark:text-dark-100;
     }
     &:focus-visible {
-        @apply ring-inset ring-2 ring-blue-500 dark:ring-dark-blue-100 outline-none rounded-t;
+        @apply rounded-t outline-none ring-2 ring-inset ring-blue-500 dark:ring-dark-blue-100;
     }
     &.active {
-        @apply text-blue-500 dark:text-blue-400 border-blue-500 dark:border-blue-400;
+        @apply border-blue-500 text-blue-500 dark:border-blue-400 dark:text-blue-400;
     }
     &.has-error {
         @apply text-red-500;
 
         &.active {
-            box-shadow: theme('colors.red.400') 0 3px inset, rgb(230, 235, 241) -1px 0 inset
+            box-shadow:
+                theme('colors.red.400') 0 3px inset,
+                rgb(230, 235, 241) -1px 0 inset;
         }
     }
 }
 
-
 /* Responsive Wangjangling
   ========================================================================== */
 
 .pill-tab {
-    @apply text-gray-700 dark:text-dark-175 flex items-center focus:outline-none px-2 py-1 rounded;
+    @apply flex items-center rounded px-2 py-1 text-gray-700 focus:outline-none dark:text-dark-175;
 
     &:hover {
         @apply text-gray-900 dark:text-dark-100;
     }
 
     &.active {
-        @apply bg-blue-100 dark:bg-dark-400 text-blue-900 dark:text-dark-150;
+        @apply bg-blue-100 text-blue-900 dark:bg-dark-400 dark:text-dark-150;
     }
 }
 
 .button-tab {
-    @apply text-gray-700 inline-block focus:outline-none px-2 py-1 rtl:ml-1 ltr:mr-1;
+    @apply inline-block px-2 py-1 text-gray-700 focus:outline-none ltr:mr-1 rtl:ml-1;
 
     &:hover {
         @apply text-blue;
     }
 
     &.active {
-        @apply bg-blue-100 text-blue-800 rounded;
+        @apply rounded bg-blue-100 text-blue-800;
     }
 }
diff --git a/resources/css/components/toggle.css b/resources/css/components/toggle.css
index 0f8f6e6f4c..2294dae974 100644
--- a/resources/css/components/toggle.css
+++ b/resources/css/components/toggle.css
@@ -11,9 +11,9 @@
     }
 
     .inline-label {
-        @apply rtl:mr-2 ltr:ml-2 font-normal text-gray-700 dark:text-dark-175;
+        @apply font-normal text-gray-700 dark:text-dark-175 ltr:ml-2 rtl:mr-2;
         a {
-            @apply text-gray-800 dark:text-dark-150 underline;
+            @apply text-gray-800 underline dark:text-dark-150;
             &:hover {
                 @apply text-blue;
             }
@@ -27,14 +27,16 @@
 }
 
 .toggle-container {
-    @apply bg-white dark:bg-dark-700 cursor-pointer relative border dark:border-dark-900 shrink-0;
+    @apply relative shrink-0 cursor-pointer border bg-white dark:border-dark-900 dark:bg-dark-700;
     height: 22px;
     width: 46px;
     border-radius: 20px;
     font-size: 0.1px;
     margin: 6px 0;
     transition: background-color 0.2s ease;
-    &:focus { outline: none; }
+    &:focus {
+        outline: none;
+    }
 }
 
 .toggle-slider {
@@ -51,12 +53,18 @@
 }
 
 .toggle-knob {
-    @apply absolute top-px outline-none bg-white rounded-full;
-    right: 0 ; [dir="rtl"] & { right: auto ; left: 0 ; }
+    @apply absolute top-px rounded-full bg-white outline-none;
+    right: 0;
+    [dir='rtl'] & {
+        right: auto;
+        left: 0;
+    }
     width: 20px;
     height: 20px;
-    box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
-    transition: box-shadow 0.1s, background-color 0.2s ease-in-out;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
+    transition:
+        box-shadow 0.1s,
+        background-color 0.2s ease-in-out;
 
     .dark & {
         background: theme(colors.dark.500);
@@ -64,11 +72,11 @@
 }
 
 .toggle-knob:hover {
-    box-shadow: 0 1px 3px rgba(theme('colors.blue.DEFAULT'), .9);
+    box-shadow: 0 1px 3px rgba(theme('colors.blue.DEFAULT'), 0.9);
 }
 
 .toggle-container.on {
-    @apply bg-green-500 border-green-600;
+    @apply border-green-600 bg-green-500;
     .toggle-slider {
         width: 44px;
     }
@@ -82,7 +90,7 @@
 }
 
 .toggle-container.on.read-only {
-    @apply bg-gray-500 border-gray-600;
+    @apply border-gray-600 bg-gray-500;
 
     .toggle-knob:focus {
         box-shadow: 0 0 10px theme(colors.gray.500/70);
@@ -105,7 +113,7 @@
     }
 
     .toggle-slider {
-        box-shadow: inset 0 1px rgba(0,0,0,.25);
+        box-shadow: inset 0 1px rgba(0, 0, 0, 0.25);
         height: 12px;
         width: 10px;
     }
@@ -118,10 +126,20 @@
 /* Inside the Sidebar
   ========================================================================== */
 .publish-sidebar .toggle-fieldtype {
-    @apply flex items-center justify-between flex-wrap;
-    .field-inner > label { margin: 0; }
-    .toggle-fieldtype-wrapper { margin-left: 8px ; [dir="rtl"] & { margin-right: 8px ; margin-left: 0 ; } }
-    .help-block { margin-top: 4px !important; }
+    @apply flex flex-wrap items-center justify-between;
+    .field-inner > label {
+        margin: 0;
+    }
+    .toggle-fieldtype-wrapper {
+        margin-left: 8px;
+        [dir='rtl'] & {
+            margin-right: 8px;
+            margin-left: 0;
+        }
+    }
+    .help-block {
+        margin-top: 4px !important;
+    }
 }
 
 /* Inside a Grid field
diff --git a/resources/css/components/updater.css b/resources/css/components/updater.css
index aa9cd281ba..bdf93c717a 100644
--- a/resources/css/components/updater.css
+++ b/resources/css/components/updater.css
@@ -3,92 +3,121 @@
    ========================================================================== */
 
 .update {
-	padding: 60px;
-
-	h2 {
-		font-weight: 400;
-		font-size: 30px;
-		margin: 0 0 25px 0 ; [dir="rtl"] & { margin: 0 0 25px 0 ; }
-		-webkit-font-smoothing: antialiased;
-	}
-
-	h3, dt {
+    padding: 60px;
+
+    h2 {
+        font-weight: 400;
+        font-size: 30px;
+        margin: 0 0 25px 0;
+        [dir='rtl'] & {
+            margin: 0 0 25px 0;
+        }
+        -webkit-font-smoothing: antialiased;
+    }
+
+    h3,
+    dt {
         @apply font-normal text-gray-700 antialiased;
-		margin: 25px 0;
-		font-size: 21px;
-		line-height: 1.5;
-	}
-
-	dl {
-		margin-top: 50px;
-
-		dt {
-			margin: 30px 0 15px 0 ; [dir="rtl"] & { margin: 30px 0 15px 0 ; }
-		}
-
-		dd {
-			padding-left: 30px ; [dir="rtl"] & { padding-right: 30px ; padding-left: 0 ; }
-			position: relative;
-			font-size: 16px;
-			margin-bottom: 15px;
-
-			&.no-icon {
-				padding-left: 0 ; [dir="rtl"] & { padding-right: 0 ; padding-left: 0 ; }
-			}
-		}
-
-		.icon {
-			position: absolute;
-			top: 0;
-		 left: 0 ; [dir="rtl"] & { left: auto ; right: 0 ; }
-		}
-	}
+        margin: 25px 0;
+        font-size: 21px;
+        line-height: 1.5;
+    }
+
+    dl {
+        margin-top: 50px;
+
+        dt {
+            margin: 30px 0 15px 0;
+            [dir='rtl'] & {
+                margin: 30px 0 15px 0;
+            }
+        }
+
+        dd {
+            padding-left: 30px;
+            [dir='rtl'] & {
+                padding-right: 30px;
+                padding-left: 0;
+            }
+            position: relative;
+            font-size: 16px;
+            margin-bottom: 15px;
+
+            &.no-icon {
+                padding-left: 0;
+                [dir='rtl'] & {
+                    padding-right: 0;
+                    padding-left: 0;
+                }
+            }
+        }
+
+        .icon {
+            position: absolute;
+            top: 0;
+            left: 0;
+            [dir='rtl'] & {
+                left: auto;
+                right: 0;
+            }
+        }
+    }
 }
 
 .update-release {
-
     .date {
-		@apply font-normal text-gray dark:text-dark-175;
-	}
+        @apply font-normal text-gray dark:text-dark-175;
+    }
 
-	p {
+    p {
         @apply my-8;
-	}
-
-	h2 {
-		@apply font-black text-xl mb-0 py-2;
-	}
-
-	h3, h4, h5, h6 {
-		@apply font-bold;
-	}
-
-    a { color: @apply text-blue; }
-
-	ul {
-		@apply p-0;
-
-		li {
-			@apply my-2 pb-2 relative text-base rtl:pr-6 ltr:pl-6;
-		}
-
-		li:before {
-			@apply absolute rounded-full bg-gray-900;
-			height: 6px;
-			width: 6px;
-			content: "";
-			top: 7px;
-            left: 4px ; [dir="rtl"] & { left: auto ; right: 4px ; }
-
-            .dark & { @apply bg-dark-200; }
-		}
-
-		.label {
-			@apply text-3xs relative inline-block rtl:ml-2 ltr:mr-2 uppercase text-center text-white rounded;
-			padding: 2px;
-			width: 54px;
-			top: -2px;
-			line-height: 1;
-		}
-	}
+    }
+
+    h2 {
+        @apply mb-0 py-2 text-xl font-black;
+    }
+
+    h3,
+    h4,
+    h5,
+    h6 {
+        @apply font-bold;
+    }
+
+    a {
+        color: @apply text-blue;
+    }
+
+    ul {
+        @apply p-0;
+
+        li {
+            @apply relative my-2 pb-2 text-base ltr:pl-6 rtl:pr-6;
+        }
+
+        li:before {
+            @apply absolute rounded-full bg-gray-900;
+            height: 6px;
+            width: 6px;
+            content: '';
+            top: 7px;
+            left: 4px;
+            [dir='rtl'] & {
+                left: auto;
+                right: 4px;
+            }
+
+            .dark & {
+                @apply bg-dark-200;
+            }
+        }
+
+        .label {
+            @apply relative inline-block rounded text-center text-3xs uppercase text-white ltr:mr-2 rtl:ml-2;
+            padding: 2px;
+            width: 54px;
+            top: -2px;
+            line-height: 1;
+        }
+    }
 }
diff --git a/resources/css/components/wizard.css b/resources/css/components/wizard.css
index a9e97101c2..77dd1876c6 100644
--- a/resources/css/components/wizard.css
+++ b/resources/css/components/wizard.css
@@ -2,20 +2,28 @@
     @apply flex justify-between;
 
     .step {
-        @apply text-center relative text-xs flex-1 mx-auto;
+        @apply relative mx-auto flex-1 text-center text-xs;
     }
 
     .step:not(:first-child):before {
         @apply absolute h-1 w-1/2 bg-gray-300;
         content: '';
-        left: 0 ; [dir="rtl"] & { left: auto ; right: 0 ; }
+        left: 0;
+        [dir='rtl'] & {
+            left: auto;
+            right: 0;
+        }
         top: 18px;
     }
 
     .step:not(:last-child):after {
         @apply absolute h-1 w-1/2 bg-gray-300;
         content: '';
-        left: 50% ; [dir="rtl"] & { left: auto ; right: 50% ; }
+        left: 50%;
+        [dir='rtl'] & {
+            left: auto;
+            right: 50%;
+        }
         top: 18px;
     }
 
@@ -25,12 +33,12 @@
     }
 
     .ball {
-        @apply h-10 w-10 bg-gray-300 dark:bg-dark-800 text-gray dark:text-dark-150 text-base rounded-full text-center z-10 mx-auto relative;
+        @apply relative z-10 mx-auto h-10 w-10 rounded-full bg-gray-300 text-center text-base text-gray dark:bg-dark-800 dark:text-dark-150;
         line-height: 40px;
     }
 
     .label {
-        @apply text-xs mt-1 text-gray dark:text-dark-175;
+        @apply mt-1 text-xs text-gray dark:text-dark-175;
     }
 
     .complete {
diff --git a/resources/css/core/animation.css b/resources/css/core/animation.css
index f083692eee..16ec28461d 100644
--- a/resources/css/core/animation.css
+++ b/resources/css/core/animation.css
@@ -2,12 +2,26 @@
    ========================================================================== */
 .animation-shake {
     animation-name: shake;
-    animation-duration: .5s;
+    animation-duration: 0.5s;
     animation-fill-mode: both;
 }
 
 @keyframes shake {
-    from, to { transform: translate3d(0, 0, 0); }
-    10%, 30%, 50%, 70%, 90% { transform: translate3d(-10px, 0, 0); }
-    20%, 40%, 60%, 80% { transform: translate3d(10px, 0, 0); }
+    from,
+    to {
+        transform: translate3d(0, 0, 0);
+    }
+    10%,
+    30%,
+    50%,
+    70%,
+    90% {
+        transform: translate3d(-10px, 0, 0);
+    }
+    20%,
+    40%,
+    60%,
+    80% {
+        transform: translate3d(10px, 0, 0);
+    }
 }
diff --git a/resources/css/core/fonts.css b/resources/css/core/fonts.css
index 3cc48cd3e6..421f5f7c08 100644
--- a/resources/css/core/fonts.css
+++ b/resources/css/core/fonts.css
@@ -6,7 +6,7 @@
     font-weight: 100 900;
     font-display: swap;
     font-style: normal;
-    src: url("../../fonts/Inter/Inter-roman.var.woff2?v=3.19") format("woff2");
+    src: url('../../fonts/Inter/Inter-roman.var.woff2?v=3.19') format('woff2');
 }
 
 @font-face {
@@ -14,5 +14,5 @@
     font-weight: 100 900;
     font-display: swap;
     font-style: italic;
-    src: url("../../fonts/Inter/Inter-italic.var.woff2?v=3.19") format("woff2");
+    src: url('../../fonts/Inter/Inter-italic.var.woff2?v=3.19') format('woff2');
 }
diff --git a/resources/css/core/layout.css b/resources/css/core/layout.css
index fa93124d1a..31fc13a3e9 100644
--- a/resources/css/core/layout.css
+++ b/resources/css/core/layout.css
@@ -3,14 +3,13 @@
    ========================================================================== */
 
 body {
-    @apply w-full bg-gray-300 relative dark:bg-dark-800;
+    @apply relative w-full bg-gray-300 dark:bg-dark-800;
 }
 
 #statamic {
     min-height: 100vh;
 }
 
-
 #main {
     @apply flex;
     padding-bottom: 72px;
@@ -19,7 +18,7 @@ body {
 }
 
 #main .workspace {
-    transition: padding .3s;
+    transition: padding 0.3s;
     @apply w-full;
 }
 
@@ -34,27 +33,37 @@ a {
 }
 
 @screen md {
-
     #main {
         padding-top: 52px;
     }
 
     #main .workspace {
-        padding-left: 14rem ; [dir="rtl"] & { padding-right: 14rem ; padding-left: 0 ; }
+        padding-left: 14rem;
+        [dir='rtl'] & {
+            padding-right: 14rem;
+            padding-left: 0;
+        }
     }
 
     #main.nav-closed {
         .nav-main {
-            left: -14rem ; [dir="rtl"] & { left: auto ; right: -14rem ; }
+            left: -14rem;
+            [dir='rtl'] & {
+                left: auto;
+                right: -14rem;
+            }
         }
 
         .workspace {
-            padding-left: 0 ; [dir="rtl"] & { padding-right: 0 ; padding-left: 0 ; }
+            padding-left: 0;
+            [dir='rtl'] & {
+                padding-right: 0;
+                padding-left: 0;
+            }
         }
     }
 }
 
-
 /* Page Wrapper
   ========================================================================== */
 .page-wrapper {
@@ -63,7 +72,7 @@ a {
 
 @screen md {
     .page-wrapper {
-        @apply px-8 max-w-xl mx-auto;
+        @apply mx-auto max-w-xl px-8;
     }
 }
 
diff --git a/resources/css/core/typography.css b/resources/css/core/typography.css
index a17aed07bd..a9e9ebfe30 100644
--- a/resources/css/core/typography.css
+++ b/resources/css/core/typography.css
@@ -3,13 +3,20 @@
    ========================================================================== */
 
 body {
-    @apply font-sans text-gray-900 text-base tracking-normal dark:text-dark-100;
+    @apply font-sans text-base tracking-normal text-gray-900 dark:text-dark-100;
     font-variant: common-ligatures tabular-nums;
-    font-feature-settings: "zero", "ss01", "calt" off;
-
+    font-feature-settings:
+        'zero',
+        'ss01',
+        'calt' off;
 }
 
-h1, h2, h3, h4, h5, h6 {
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
     @apply m-0 antialiased;
 }
 
@@ -41,8 +48,8 @@ h6 {
     @apply text-3xs font-bold uppercase tracking-widest;
 }
 
-a:not([class^="btn"]) {
-    @apply text-gray-800 dark:text-dark-150 cursor-pointer;
+a:not([class^='btn']) {
+    @apply cursor-pointer text-gray-800 dark:text-dark-150;
 
     &:hover {
         @apply text-blue dark:text-blue-300;
@@ -54,12 +61,19 @@ a:not([class^="btn"]) {
         @apply mb-2 font-medium;
     }
 
-    h2, h3, h4, h5, h6 {
+    h2,
+    h3,
+    h4,
+    h5,
+    h6 {
         @apply mb-2 font-bold;
     }
 
-    p, ol, ul, pre {
-        @apply text-gray-700 text-sm leading-normal mb-2 dark:text-dark-150;
+    p,
+    ol,
+    ul,
+    pre {
+        @apply mb-2 text-sm leading-normal text-gray-700 dark:text-dark-150;
 
         a {
             @apply text-blue;
@@ -100,7 +114,7 @@ a:focus {
 
 .subhead {
     font-size: 11px;
-    letter-spacing: .1em;
+    letter-spacing: 0.1em;
     text-transform: uppercase;
 }
 
@@ -111,7 +125,10 @@ sup {
 .little-heading {
     font-size: 11px;
     font-weight: bold;
-    padding: 15px 0 0 20px ; [dir="rtl"] & { padding: 15px 20px 0 0 ; }
+    padding: 15px 0 0 20px;
+    [dir='rtl'] & {
+        padding: 15px 20px 0 0;
+    }
     letter-spacing: 1px;
     text-transform: uppercase;
 }
@@ -121,7 +138,7 @@ sup {
 }
 
 code {
-    @apply font-mono rounded text-[#c7254e] dark:text-blue-400 dark:bg-dark-700;
+    @apply rounded font-mono text-[#c7254e] dark:bg-dark-700 dark:text-blue-400;
     padding: 2px 4px;
     font-size: 90%;
     background-color: #f9f2f4;
@@ -129,5 +146,7 @@ code {
 
 .help-block {
     width: 100%;
-    p { @apply mb-2 }
+    p {
+        @apply mb-2;
+    }
 }
diff --git a/resources/css/core/utilities.css b/resources/css/core/utilities.css
index 8dca15c5c9..e84efb2d92 100644
--- a/resources/css/core/utilities.css
+++ b/resources/css/core/utilities.css
@@ -3,13 +3,13 @@
    ========================================================================== */
 
 .text-shadow {
-    text-shadow: 0 1px 2px rgba(0,0,0,.25);
+    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
 }
 
 .focus-outline {
     @apply border border-blue-300 dark:border-dark-blue-200;
     outline: 0;
-    box-shadow: 0 0 0 0.2rem rgba(0,125,255,.25);
+    box-shadow: 0 0 0 0.2rem rgba(0, 125, 255, 0.25);
 }
 
 .focus-none {
@@ -39,14 +39,17 @@
 
         .icon {
             display: inline-block;
-            margin: -2px 5px 0 0 ; [dir="rtl"] & { margin: -2px 0 0 5px ; }
+            margin: -2px 5px 0 0;
+            [dir='rtl'] & {
+                margin: -2px 0 0 5px;
+            }
         }
     }
 }
 
 .shadow-hover-lg {
     @apply shadow-lg;
-    transition: box-shadow .08s ease-in-out;
+    transition: box-shadow 0.08s ease-in-out;
     &:hover {
         @apply shadow-xl;
     }
@@ -63,46 +66,59 @@
 
 .saving-overlay {
     @apply absolute inset-0 z-200 flex items-center rounded;
-    background: rgba(255, 255, 255, .9);
+    background: rgba(255, 255, 255, 0.9);
 
     .dark & {
         @apply bg-dark-600/90;
     }
 
     .inner {
-        @apply p-10 text-center mx-auto;
+        @apply mx-auto p-10 text-center;
     }
 
     i {
         position: relative;
         top: -1px;
-        margin-right: 10px ; [dir="rtl"] & { margin-left: 10px ; margin-right: 0 ; }
+        margin-right: 10px;
+        [dir='rtl'] & {
+            margin-left: 10px;
+            margin-right: 0;
+        }
     }
 }
 
 .bg-checkerboard {
-    background-color: #FFF;
-    background-image: linear-gradient(45deg, #EDF2F6 25%, transparent 25%), linear-gradient(-45deg, #EDF2F6 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #EDF2F6 75%), linear-gradient(-45deg, transparent 75%, #EDF2F6 75%);
+    background-color: #fff;
+    background-image: linear-gradient(45deg, #edf2f6 25%, transparent 25%),
+        linear-gradient(-45deg, #edf2f6 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #edf2f6 75%),
+        linear-gradient(-45deg, transparent 75%, #edf2f6 75%);
     background-size: 16px 16px;
-    background-position: 0 0, 0 8px, 8px -8px, -8px 0;
+    background-position:
+        0 0,
+        0 8px,
+        8px -8px,
+        -8px 0;
 
     .dark & {
         background-color: theme(colors.dark.600);
-        background-image: linear-gradient(45deg, theme(colors.dark.950) 25%, transparent 25%), linear-gradient(-45deg, theme(colors.dark.950) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, theme(colors.dark.950) 75%), linear-gradient(-45deg, transparent 75%, theme(colors.dark.950) 75%);
+        background-image: linear-gradient(45deg, theme(colors.dark.950) 25%, transparent 25%),
+            linear-gradient(-45deg, theme(colors.dark.950) 25%, transparent 25%),
+            linear-gradient(45deg, transparent 75%, theme(colors.dark.950) 75%),
+            linear-gradient(-45deg, transparent 75%, theme(colors.dark.950) 75%);
     }
 }
 
 .clickable {
-    @apply text-gray-800 dark:text-dark-175 select-none cursor-pointer border dark:border-dark-800 bg-gradient-to-b from-white to-gray-100 dark:from-dark-550 dark:to-dark-600;
+    @apply cursor-pointer select-none border bg-gradient-to-b from-white to-gray-100 text-gray-800 dark:border-dark-800 dark:from-dark-550 dark:to-dark-600 dark:text-dark-175;
 
     &:hover {
-        @apply border-gray-500 dark:border-dark-900 from-white to-gray-200 dark:from-dark-550 dark:to-dark-700;
+        @apply border-gray-500 from-white to-gray-200 dark:border-dark-900 dark:from-dark-550 dark:to-dark-700;
     }
 }
 
 [v-cloak],
 [x-cloak] {
-    display: none
+    display: none;
 }
 
 .-max-h-screen-px {
diff --git a/resources/css/cp.css b/resources/css/cp.css
index 0c9768b493..9c29bd7f30 100644
--- a/resources/css/cp.css
+++ b/resources/css/cp.css
@@ -1,77 +1,77 @@
-@import "vendors/codemirror";
-@import "vendors/vue-select";
+@import 'vendors/codemirror';
+@import 'vendors/vue-select';
 
-@import "core/animation";
-@import "core/layout";
-@import "core/fonts";
-@import "core/typography";
+@import 'core/animation';
+@import 'core/layout';
+@import 'core/fonts';
+@import 'core/typography';
 
 /* Elements */
-@import "elements/buttons";
-@import "elements/badges";
-@import "elements/dropdowns";
-@import "elements/forms";
-@import "elements/icons";
-@import "elements/tables";
+@import 'elements/buttons';
+@import 'elements/badges';
+@import 'elements/dropdowns';
+@import 'elements/forms';
+@import 'elements/icons';
+@import 'elements/tables';
 
 /* Components */
-@import "components/array";
-@import "components/assets";
-@import "components/blueprints";
-@import "components/cards";
-@import "components/column-picker";
-@import "components/configure";
-@import "components/dashboard";
-@import "components/filters";
-@import "components/focal-point";
-@import "components/global-header";
-@import "components/items";
-@import "components/metrics";
-@import "components/modal";
-@import "components/nav-main";
-@import "components/nav-mobile";
-@import "components/notifications";
-@import "components/outside";
-@import "components/page-tree";
-@import "components/pagination";
-@import "components/popover";
-@import "components/preview";
-@import "components/publish";
-@import "components/progress";
-@import "components/revisions";
-@import "components/roles";
-@import "components/settings";
-@import "components/shortcuts";
-@import "components/sortable";
-@import "components/stacks";
-@import "components/tabs";
-@import "components/toggle";
-@import "components/tooltips";
-@import "components/updater";
-@import "components/wizard";
+@import 'components/array';
+@import 'components/assets';
+@import 'components/blueprints';
+@import 'components/cards';
+@import 'components/column-picker';
+@import 'components/configure';
+@import 'components/dashboard';
+@import 'components/filters';
+@import 'components/focal-point';
+@import 'components/global-header';
+@import 'components/items';
+@import 'components/metrics';
+@import 'components/modal';
+@import 'components/nav-main';
+@import 'components/nav-mobile';
+@import 'components/notifications';
+@import 'components/outside';
+@import 'components/page-tree';
+@import 'components/pagination';
+@import 'components/popover';
+@import 'components/preview';
+@import 'components/publish';
+@import 'components/progress';
+@import 'components/revisions';
+@import 'components/roles';
+@import 'components/settings';
+@import 'components/shortcuts';
+@import 'components/sortable';
+@import 'components/stacks';
+@import 'components/tabs';
+@import 'components/toggle';
+@import 'components/tooltips';
+@import 'components/updater';
+@import 'components/wizard';
 
 /* Fieldtypes */
-@import "components/fieldtypes/array";
-@import "components/fieldtypes/assets";
-@import "components/fieldtypes/bard";
-@import "components/fieldtypes/button-group";
-@import "components/fieldtypes/checkboxes";
-@import "components/fieldtypes/code";
-@import "components/fieldtypes/datetime";
-@import "components/fieldtypes/dictionary-fields";
-@import "components/fieldtypes/environment";
-@import "components/fieldtypes/grid";
-@import "components/fieldtypes/hidden";
-@import "components/fieldtypes/markdown";
-@import "components/fieldtypes/partial";
-@import "components/fieldtypes/radio";
-@import "components/fieldtypes/relationship";
-@import "components/fieldtypes/replicator";
-@import "components/fieldtypes/section";
-@import "components/fieldtypes/spacer";
-@import "components/fieldtypes/table";
-@import "components/fieldtypes/tags";
-@import "components/fieldtypes/textarea";
-@import "components/fieldtypes/width";
-@import "components/fieldtypes/video";
-@import "components/fieldtypes/yaml";
+@import 'components/fieldtypes/array';
+@import 'components/fieldtypes/assets';
+@import 'components/fieldtypes/bard';
+@import 'components/fieldtypes/button-group';
+@import 'components/fieldtypes/checkboxes';
+@import 'components/fieldtypes/code';
+@import 'components/fieldtypes/datetime';
+@import 'components/fieldtypes/dictionary-fields';
+@import 'components/fieldtypes/environment';
+@import 'components/fieldtypes/grid';
+@import 'components/fieldtypes/hidden';
+@import 'components/fieldtypes/markdown';
+@import 'components/fieldtypes/partial';
+@import 'components/fieldtypes/radio';
+@import 'components/fieldtypes/relationship';
+@import 'components/fieldtypes/replicator';
+@import 'components/fieldtypes/section';
+@import 'components/fieldtypes/spacer';
+@import 'components/fieldtypes/table';
+@import 'components/fieldtypes/tags';
+@import 'components/fieldtypes/textarea';
+@import 'components/fieldtypes/width';
+@import 'components/fieldtypes/video';
+@import 'components/fieldtypes/yaml';
diff --git a/resources/css/dark.css b/resources/css/dark.css
index 3ff7632b12..dedf1e596a 100644
--- a/resources/css/dark.css
+++ b/resources/css/dark.css
@@ -1,14 +1,17 @@
 .prose {
     @apply dark:text-dark-150;
 
-    :where(h2), :where(h3), :where(strong) {
-        &:not(:where([class~=not-prose] *)) {
+    :where(h2),
+    :where(h3),
+    :where(strong) {
+        &:not(:where([class~='not-prose'] *)) {
             @apply dark:text-dark-100;
         }
     }
 
-    :where(pre), :where(code) {
-        &:not(:where([class~=not-prose] *)) {
+    :where(pre),
+    :where(code) {
+        &:not(:where([class~='not-prose'] *)) {
             @apply dark:bg-dark-950 dark:text-dark-100;
         }
     }
@@ -19,21 +22,26 @@
         -webkit-box-shadow: inset 0 0 0 50px theme('colors.dark.250');
         -webkit-text-fill-color: theme('colors.dark.150');
 
-        &:focus, &:active {
+        &:focus,
+        &:active {
             -webkit-box-shadow: inset 0 0 0 50px theme('colors.dark.200') !important;
             -webkit-text-fill-color: theme('colors.dark.100');
         }
     }
 
     .CodeMirror-selected {
-        background: rgba(255, 255, 255, 0.10);
+        background: rgba(255, 255, 255, 0.1);
     }
 
-    .CodeMirror-line::selection, .CodeMirror-line > span::selection, .CodeMirror-line > span > span::selection {
-        background: rgba(255, 255, 255, 0.10);
+    .CodeMirror-line::selection,
+    .CodeMirror-line > span::selection,
+    .CodeMirror-line > span > span::selection {
+        background: rgba(255, 255, 255, 0.1);
     }
 
-    .CodeMirror-line::-moz-selection, .CodeMirror-line > span::-moz-selection, .CodeMirror-line > span > span::-moz-selection {
-        background: rgba(255, 255, 255, 0.10);
+    .CodeMirror-line::-moz-selection,
+    .CodeMirror-line > span::-moz-selection,
+    .CodeMirror-line > span > span::-moz-selection {
+        background: rgba(255, 255, 255, 0.1);
     }
 }
diff --git a/resources/css/elements/badges.css b/resources/css/elements/badges.css
index 11bf8ea24d..ecb425900b 100644
--- a/resources/css/elements/badges.css
+++ b/resources/css/elements/badges.css
@@ -3,31 +3,35 @@
    ========================================================================== */
 
 .badge {
-    @apply text-3xs not-italic bg-gray-300 dark:bg-dark-700 text-gray-800 dark:text-dark-150 rounded-md leading-normal;
+    @apply rounded-md bg-gray-300 text-3xs not-italic leading-normal text-gray-800 dark:bg-dark-700 dark:text-dark-150;
     padding: 1px 5px 0;
 }
 
 .badge-pill {
-    @apply bg-gray-300 dark:bg-dark-700 px-2 py-1 rounded;
+    @apply rounded bg-gray-300 px-2 py-1 dark:bg-dark-700;
 }
 
 .badge-pill-sm {
-    @apply bg-gray-300 dark:bg-dark-700 px-1 py-px rounded;
+    @apply rounded bg-gray-300 px-1 py-px dark:bg-dark-700;
 }
 
 .badge-sm {
-    @apply bg-gray-300 dark:bg-dark-700 uppercase text-4xs text-white dark:text-dark-100 rounded-sm leading-normal;
+    @apply rounded-sm bg-gray-300 text-4xs uppercase leading-normal text-white dark:bg-dark-700 dark:text-dark-100;
     height: 16px;
     padding: 1px 5px 2px;
 }
 
 .filter-badge {
-    @apply text-2xs text-gray-800 dark:text-dark-150 bg-white dark:bg-dark-550 border border-dashed border-gray-600 dark:border-dark-900 flex items-center rounded-full;
+    @apply flex items-center rounded-full border border-dashed border-gray-600 bg-white text-2xs text-gray-800 dark:border-dark-900 dark:bg-dark-550 dark:text-dark-150;
     height: 1.625rem;
-    padding-left: 10px ; [dir="rtl"] & { padding-right: 10px ; padding-left: 0 ; }
+    padding-left: 10px;
+    [dir='rtl'] & {
+        padding-right: 10px;
+        padding-left: 0;
+    }
 
     button {
-        @apply px-2 text-base text-gray-600 dark:text-dark-175 flex items-center rounded;
+        @apply flex items-center rounded px-2 text-base text-gray-600 dark:text-dark-175;
 
         &:hover {
             @apply text-gray-800 dark:text-dark-100;
@@ -39,6 +43,6 @@
     }
 
     &.filter-badge-control {
-        @apply bg-gray-100 dark:bg-dark-600 border border-solid rounded-full border-gray-500 dark:border-dark-900 hover:border-gray-600 dark:hover:border-dark-800 hover:bg-gray-200 dark:hover:bg-dark-800;
+        @apply rounded-full border border-solid border-gray-500 bg-gray-100 hover:border-gray-600 hover:bg-gray-200 dark:border-dark-900 dark:bg-dark-600 dark:hover:border-dark-800 dark:hover:bg-dark-800;
     }
 }
diff --git a/resources/css/elements/buttons.css b/resources/css/elements/buttons.css
index 75006e7964..85b1e53e9c 100644
--- a/resources/css/elements/buttons.css
+++ b/resources/css/elements/buttons.css
@@ -7,18 +7,19 @@ button {
 }
 
 /*  Base button styles that shouldn't need overriding */
-[class^="btn"], [class*=" btn"] {
-    @apply cursor-pointer select-none h-auto rounded relative;
-    @apply leading-none inline-flex align-middle justify-center whitespace-nowrap;
-    @apply text-center text-sm subpixel-antialiased items-center;
+[class^='btn'],
+[class*=' btn'] {
+    @apply relative h-auto cursor-pointer select-none rounded;
+    @apply inline-flex justify-center whitespace-nowrap align-middle leading-none;
+    @apply items-center text-center text-sm subpixel-antialiased;
 
     height: 2.375rem; /*  38px */
     letter-spacing: -0.01em;
-    padding: .475rem 1.25rem;
+    padding: 0.475rem 1.25rem;
 
     &:focus {
         /* @apply ring-2 outline-none dark:outline-2 dark:outline-dark-blue-100; */
-        @apply ring-2 outline-none;
+        @apply outline-none ring-2;
     }
 
     &:disabled {
@@ -31,26 +32,36 @@ button {
 }
 
 /*  Default, non-primary action button */
-.btn, .btn-default {
-    @apply text-gray-800 dark:text-dark-150 shadow-button;
+.btn,
+.btn-default {
+    @apply text-gray-800 shadow-button dark:text-dark-150;
     background: linear-gradient(180deg, #fff, #f9fafb);
     background-clip: padding-box;
-    border: 1px solid #D3DDE7;
+    border: 1px solid #d3dde7;
     border-bottom: 1px solid #c4cdd6;
-    box-shadow: inset 0 1px 0 0 #fff, 0 1px 0 0 rgba(0, 0, 0,.05), 0 2px 1px 0 theme(colors.gray.600 / .15), 0 0 0 0 transparent;
+    box-shadow:
+        inset 0 1px 0 0 #fff,
+        0 1px 0 0 rgba(0, 0, 0, 0.05),
+        0 2px 1px 0 theme(colors.gray.600 / 0.15),
+        0 0 0 0 transparent;
 
     .dark & {
         background: linear-gradient(180deg, theme(colors.dark.550), theme(colors.dark.600));
         background-clip: padding-box;
         border-color: theme(colors.dark.700);
-        box-shadow: inset 0 1px 0 0 theme(colors.dark.300), 0 1px 0 0 rgba(200, 200, 200,.05), 0 2px 1px 0 theme(colors.dark.900 / .15), 0 0 0 0 transparent;
+        box-shadow:
+            inset 0 1px 0 0 theme(colors.dark.300),
+            0 1px 0 0 rgba(200, 200, 200, 0.05),
+            0 2px 1px 0 theme(colors.dark.900 / 0.15),
+            0 0 0 0 transparent;
     }
 
-    &:hover:not(:disabled), &:active:not(:disabled) {
+    &:hover:not(:disabled),
+    &:active:not(:disabled) {
         @apply text-gray-800 dark:text-dark-150;
         background: linear-gradient(180deg, #f9fafb, #f4f6f8);
         background-clip: padding-box;
-        border-bottom: 1px solid #BFC7D0;
+        border-bottom: 1px solid #bfc7d0;
 
         .dark & {
             background: linear-gradient(180deg, theme(colors.dark.600), theme(colors.dark.700));
@@ -63,8 +74,9 @@ button {
         @apply ring-2 dark:ring-dark-blue-100;
     }
 
-    &.active, &.active:hover {
-        box-shadow: inset 2px 2px 3px 0 rgba(25,30,35,.1);
+    &.active,
+    &.active:hover {
+        box-shadow: inset 2px 2px 3px 0 rgba(25, 30, 35, 0.1);
         background: theme('colors.gray.400');
         border-color: #aeb9c3 !important;
 
@@ -76,32 +88,46 @@ button {
     }
 
     &:disabled {
-        @apply text-gray-700 dark:text-dark-200 opacity-75;
+        @apply text-gray-700 opacity-75 dark:text-dark-200;
     }
 }
 
 /*  Primary action button */
 .btn-primary {
-    @apply text-white bg-gradient-to-b from-blue-500 to-blue-600 dark:from-dark-blue-100 dark:to-dark-blue-150 bg-clip-padding border border-blue-700 dark:border-blue-900 border-b-blue-800 dark:border-b-dark-blue-200 !important;
-    box-shadow: inset 0 1px 0 0 theme('colors.blue.400'), 0 1px 0 0 rgba(25,30,35,.05), 0 3px 2px -1px theme(colors.blue.900 / .15), 0 0 0 0 transparent;
-
-    &:hover:not(:disabled), :active:not(:disabled) {
-        @apply from-blue-600 to-blue-700 dark:from-dark-blue-125 dark:to-dark-blue-175 border-blue-800 dark:border-blue-900 border-b-blue-900 dark:border-b-dark-blue-200 !important;
-        box-shadow: inset 0 1px 0 0 theme('colors.blue.500'), 0 1px 0 0 rgba(25,30,35,.05), 0 3px 2px -1px theme(colors.blue.900 / .15), 0 0 0 0 transparent;
+    @apply border border-blue-700 border-b-blue-800 bg-gradient-to-b from-blue-500 to-blue-600 bg-clip-padding text-white dark:border-blue-900 dark:border-b-dark-blue-200 dark:from-dark-blue-100 dark:to-dark-blue-150 !important;
+    box-shadow:
+        inset 0 1px 0 0 theme('colors.blue.400'),
+        0 1px 0 0 rgba(25, 30, 35, 0.05),
+        0 3px 2px -1px theme(colors.blue.900 / 0.15),
+        0 0 0 0 transparent;
+
+    &:hover:not(:disabled),
+    :active:not(:disabled) {
+        @apply border-blue-800 border-b-blue-900 from-blue-600 to-blue-700 dark:border-blue-900 dark:border-b-dark-blue-200 dark:from-dark-blue-125 dark:to-dark-blue-175 !important;
+        box-shadow:
+            inset 0 1px 0 0 theme('colors.blue.500'),
+            0 1px 0 0 rgba(25, 30, 35, 0.05),
+            0 3px 2px -1px theme(colors.blue.900 / 0.15),
+            0 0 0 0 transparent;
     }
 
     &:disabled {
-        @apply text-blue-200 dark:text-dark-blue-200 opacity-75 !important;
+        @apply text-blue-200 opacity-75 dark:text-dark-blue-200 !important;
     }
 }
 
 /*  Danger/delete button */
 .btn-danger {
-    @apply text-white bg-gradient-to-b from-red-500 to-red-600 bg-clip-padding border border-red-600 border-b-red-900;
-    box-shadow: inset 0 1px 0 0 theme('colors.red.400'), 0 1px 0 0 rgba(0, 0, 0,.05), 0 3px 2px -1px theme(colors.red.900 / .15), 0 0 0 0 transparent;
+    @apply border border-red-600 border-b-red-900 bg-gradient-to-b from-red-500 to-red-600 bg-clip-padding text-white;
+    box-shadow:
+        inset 0 1px 0 0 theme('colors.red.400'),
+        0 1px 0 0 rgba(0, 0, 0, 0.05),
+        0 3px 2px -1px theme(colors.red.900 / 0.15),
+        0 0 0 0 transparent;
 
-    &:hover:not(:disabled), &:active:not(:disabled) {
-        @apply bg-gradient-to-b from-red-600 to-red-700 bg-clip-padding border border-red-700 border-b-red-900;
+    &:hover:not(:disabled),
+    &:active:not(:disabled) {
+        @apply border border-red-700 border-b-red-900 bg-gradient-to-b from-red-600 to-red-700 bg-clip-padding;
     }
 
     &:disabled {
@@ -109,37 +135,40 @@ button {
     }
 
     &:focus {
-        @apply ring-red-500 ring-1 ring-offset-1;
+        @apply ring-1 ring-red-500 ring-offset-1;
         /* box-shadow: 0 5px 20px theme(colors.red.400 / 0.5); */
     }
 }
 
 /*  Earth isn't flat but these buttons are */
 .btn-flat {
-    @apply text-gray-800 dark:text-dark-150 bg-gray-300 dark:bg-dark-700 flex items-center;
+    @apply flex items-center bg-gray-300 text-gray-800 dark:bg-dark-700 dark:text-dark-150;
     position: inherit;
 
-    &:hover:not(:disabled), &:active:not(:disabled), &.active {
+    &:hover:not(:disabled),
+    &:active:not(:disabled),
+    &.active {
         @apply bg-gray-400 dark:bg-dark-750;
     }
 
     &:focus {
-        @apply ring-2 outline-none;
+        @apply outline-none ring-2;
     }
 
-    &:active, &:focus:active {
+    &:active,
+    &:focus:active {
         @apply bg-gray-500 dark:bg-dark-800;
     }
 
     &:disabled {
-        @apply text-gray-600 dark:text-dark-200 opacity-75;
+        @apply text-gray-600 opacity-75 dark:text-dark-200;
     }
 }
 
 /* Size Variations
   ========================================================================== */
 .btn-sm {
-    @apply py-1 px-2 h-8;
+    @apply h-8 px-2 py-1;
 }
 
 .btn-xs {
@@ -156,16 +185,15 @@ button {
     padding: 2px 40px;
 }
 
-
 /* Shape Variations
   ========================================================================== */
 
 .btn-round {
-    @apply rounded-full flex items-center text-center p-0;
+    @apply flex items-center rounded-full p-0 text-center;
     background: linear-gradient(180deg, #fff, #f9fafb);
     background-clip: padding-box;
     border: 1px solid #c4cdd6;
-    box-shadow: 0 1px 0 0 rgba(25,30,35,.05);
+    box-shadow: 0 1px 0 0 rgba(25, 30, 35, 0.05);
     height: 32px;
     width: 32px;
 
@@ -175,7 +203,8 @@ button {
         border-color: theme(colors.dark.400);
     }
 
-    &:hover:not(:disabled), &:active:not(:disabled) {
+    &:hover:not(:disabled),
+    &:active:not(:disabled) {
         background: linear-gradient(180deg, #f9fafb, #f4f6f8);
         background-clip: padding-box;
         border-color: #c4cdd5;
@@ -193,12 +222,11 @@ button {
     }
 }
 
-
 /* Button Group
   ========================================================================== */
 
 .btn-group {
-    @apply flex items-center justify-start p-0 cursor-auto;
+    @apply flex cursor-auto items-center justify-start p-0;
     height: 2.375rem;
 
     button {
@@ -206,15 +234,15 @@ button {
     }
 
     button:not(:last-child):not(.active) {
-        @apply rtl:border-l-0 ltr:border-r-0;
+        @apply ltr:border-r-0 rtl:border-l-0;
     }
 
     button.active + button {
-        @apply rtl:border-r-0 ltr:border-l-0;
+        @apply ltr:border-l-0 rtl:border-r-0;
     }
 
     button:first-child {
-        @apply rtl:rounded-r ltr:rounded-l;
+        @apply ltr:rounded-l rtl:rounded-r;
     }
 
     button.disabled {
@@ -222,16 +250,17 @@ button {
     }
 
     button:last-child {
-        @apply rtl:rounded-l ltr:rounded-r rtl:border-r ltr:border-l;
-        padding: .475rem .5rem;
-        &.btn-flat { @apply rtl:border-l-0 ltr:border-r-0; }
+        @apply ltr:rounded-r ltr:border-l rtl:rounded-l rtl:border-r;
+        padding: 0.475rem 0.5rem;
+        &.btn-flat {
+            @apply ltr:border-r-0 rtl:border-l-0;
+        }
     }
     .btn:focus {
         @apply ring-inset;
     }
 }
 
-
 /* With Icons
   ========================================================================== */
 
@@ -245,7 +274,6 @@ button {
     color: #fff;
 }
 
-
 .btn-icon-small,
 td .btn-icon {
     border-radius: 2px;
@@ -255,7 +283,10 @@ td .btn-icon {
 }
 
 .btn-with-icon .icon {
-    margin: -5px 7px 0 -3px ; [dir="rtl"] & { margin: -5px -3px 0 7px ; }
+    margin: -5px 7px 0 -3px;
+    [dir='rtl'] & {
+        margin: -5px -3px 0 7px;
+    }
     position: relative;
     top: 1px;
 }
@@ -264,10 +295,12 @@ td .btn-icon {
     @apply flex items-center;
 
     svg {
-        margin: 0 8px 0 -4px ; [dir="rtl"] & { margin: 0 -4px 0 8px ; }
+        margin: 0 8px 0 -4px;
+        [dir='rtl'] & {
+            margin: 0 -4px 0 8px;
+        }
         height: 16px;
         width: 16px;
-
     }
 }
 
@@ -282,39 +315,40 @@ td .btn-icon {
     }
 }
 
-
 /* Close button. For closing things.
   ========================================================================== */
 
 .btn-close {
-    @apply rtl:mr-4 ltr:ml-4 text-center p-0 text-xl text-gray-600 dark:text-dark-150 rounded-full w-8 h-8 outline-none shrink-0 leading-none inline-flex items-center justify-center;
+    @apply inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-full p-0 text-center text-xl leading-none text-gray-600 outline-none dark:text-dark-150 ltr:ml-4 rtl:mr-4;
 
     &:hover {
         @apply bg-gray-400 dark:bg-dark-700;
     }
 
-    &:active, &:focus:hover {
+    &:active,
+    &:focus:hover {
         outline: none;
         @apply bg-gray-500 dark:bg-dark-750;
     }
 }
 
 .btn-quick-action {
-    @apply text-center p-0 text-xl text-gray-600 dark:text-dark-150 rounded-full w-8 h-8 outline-none shrink-0 leading-none inline-flex items-center justify-center;
+    @apply inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-full p-0 text-center text-xl leading-none text-gray-600 outline-none dark:text-dark-150;
 
     &:hover {
         @apply bg-gray-400 dark:bg-dark-700;
     }
 
-    &:active, &:focus:hover {
+    &:active,
+    &:focus:hover {
         outline: none;
         @apply bg-gray-500 dark:bg-dark-750;
     }
 }
 
 .super-btn {
-    @apply p-4 flex items-start hover:bg-gray-200 border border-transparent rounded-md space-x-4 rtl:space-x-reverse;
-    @apply dark:hover:bg-dark-575 dark:hover:border-dark-400;
+    @apply flex items-start space-x-4 rounded-md border border-transparent p-4 hover:bg-gray-200 rtl:space-x-reverse;
+    @apply dark:hover:border-dark-400 dark:hover:bg-dark-575;
 
     svg {
         @apply h-8 w-8 text-gray-800 dark:text-dark-200;
diff --git a/resources/css/elements/dropdowns.css b/resources/css/elements/dropdowns.css
index e75a7077ed..8dd277cb98 100644
--- a/resources/css/elements/dropdowns.css
+++ b/resources/css/elements/dropdowns.css
@@ -5,23 +5,35 @@
 .dropdown-list .popover-content {
     @apply p-2;
 
-    button, a {
-        @apply block w-full rtl:text-right ltr:text-left rounded-sm text-xs font-normal px-2 py-1 text-gray-800 dark:text-dark-100;
+    button,
+    a {
+        @apply block w-full rounded-sm px-2 py-1 text-xs font-normal text-gray-800 dark:text-dark-100 ltr:text-left rtl:text-right;
         line-height: 1.4;
         white-space: nowrap;
 
         &:hover {
-            @apply bg-blue dark:bg-dark-600 text-white;
+            @apply bg-blue text-white dark:bg-dark-600;
         }
 
         .icon {
             color: #d0d4d7 !important;
-            margin-right: 6px ; [dir="rtl"] & { margin-left: 6px ; margin-right: 0 ; }
-            margin-left: -4px ; [dir="rtl"] & { margin-right: -4px ; margin-left: 0 ; }
+            margin-right: 6px;
+            [dir='rtl'] & {
+                margin-left: 6px;
+                margin-right: 0;
+            }
+            margin-left: -4px;
+            [dir='rtl'] & {
+                margin-right: -4px;
+                margin-left: 0;
+            }
             font-size: 12px;
             width: 20px;
             display: block;
-            float: left ; [dir="rtl"] & { float: right ; }
+            float: left;
+            [dir='rtl'] & {
+                float: right;
+            }
             position: relative;
             top: 2px;
             line-height: inherit;
@@ -29,7 +41,8 @@
         }
     }
 
-    button.warning, a.warning {
+    button.warning,
+    a.warning {
         @apply text-red-500;
 
         &:hover {
@@ -38,7 +51,7 @@
     }
 
     .divider {
-        @apply h-px bg-gray-400 dark:bg-dark-900 overflow-hidden;
+        @apply h-px overflow-hidden bg-gray-400 dark:bg-dark-900;
         margin: 6px -8px;
         /* Hide dividers that come first, last or immediately after another (due to v-if) */
         & + &,
@@ -49,25 +62,28 @@
     }
 
     .align-left & {
-        right: auto ; [dir="rtl"] & { right: auto ; left: auto ; }
+        right: auto;
+        [dir='rtl'] & {
+            right: auto;
+            left: auto;
+        }
     }
-
 }
 
 .quick-list {
-
     @apply relative;
 
     .quick-list-content {
-        @apply absolute top-1/2 right-full mr-[8px] -translate-y-1/2 min-w-max transition origin-right flex bg-white dark:bg-dark-550 shadow-quick rounded-full p-0.5;
+        @apply absolute right-full top-1/2 mr-[8px] flex min-w-max origin-right -translate-y-1/2 rounded-full bg-white p-0.5 shadow-quick transition dark:bg-dark-550;
         &::before {
             content: '';
             position: absolute;
             inset: -8px -8px -8px -20px;
             z-index: -1;
         }
-        button, a {
-            @apply rounded-full p-1.5 text-gray-800 dark:text-dark-100 flex shrink-0;
+        button,
+        a {
+            @apply flex shrink-0 rounded-full p-1.5 text-gray-800 dark:text-dark-100;
             &:hover {
                 @apply bg-blue text-white;
             }
@@ -77,7 +93,8 @@
         }
     }
 
-    button.warning, a.warning {
+    button.warning,
+    a.warning {
         @apply text-red-500;
 
         &:hover {
@@ -87,8 +104,7 @@
 
     &:not(:hover) {
         .quick-list-content {
-            @apply opacity-0 pointer-events-none scale-[0.85];
+            @apply pointer-events-none scale-[0.85] opacity-0;
         }
     }
-
-}
\ No newline at end of file
+}
diff --git a/resources/css/elements/forms.css b/resources/css/elements/forms.css
index f4dcbda8c4..cacbfb3797 100644
--- a/resources/css/elements/forms.css
+++ b/resources/css/elements/forms.css
@@ -3,33 +3,34 @@
    ========================================================================== */
 
 label {
-    @apply text-gray-800 dark:text-dark-150 font-normal text-sm block leading-normal;
+    @apply block text-sm font-normal leading-normal text-gray-800 dark:text-dark-150;
 }
 
 input {
     @apply placeholder:text-gray-600 dark:placeholder:text-dark-175;
 }
 
-input[type="checkbox"],
-input[type="radio"] {
+input[type='checkbox'],
+input[type='radio'] {
     @apply text-lg;
 }
 
 select {
-    @apply text-base bg-gray-300 border-2 border-gray-300 cursor-pointer;
+    @apply cursor-pointer border-2 border-gray-300 bg-gray-300 text-base;
 }
 
-
 /* Text Fields
   ========================================================================== */
 
 .input-text {
-    @apply block appearance-none bg-gray-100 text-gray-800 border max-w-full w-full p-2 rounded shadow-inner placeholder:text-gray-600 text-md @lg:text-base;
-    @apply dark:bg-dark-650 dark:text-dark-150 dark:border-dark-900 dark:placeholder:text-dark-175 dark:shadow-inner-dark;
-    transition: border-color .15s ease-in-out,
-                box-shadow .15s ease-in-out;
-    &:focus, &:focus-within {
-        @apply ring-2 ring-blue-300 dark:ring-blue-600 outline-none;
+    @apply block w-full max-w-full appearance-none rounded border bg-gray-100 p-2 text-md text-gray-800 shadow-inner placeholder:text-gray-600 @lg:text-base;
+    @apply dark:border-dark-900 dark:bg-dark-650 dark:text-dark-150 dark:shadow-inner-dark dark:placeholder:text-dark-175;
+    transition:
+        border-color 0.15s ease-in-out,
+        box-shadow 0.15s ease-in-out;
+    &:focus,
+    &:focus-within {
+        @apply outline-none ring-2 ring-blue-300 dark:ring-blue-600;
     }
 
     &:not(textarea) {
@@ -39,63 +40,68 @@ select {
 
 /*  Used inside tables, grids, and so on */
 .input-text-minimal {
-    @apply appearance-none shadow-none bg-white dark:bg-dark-550 w-full p-2;
+    @apply w-full appearance-none bg-white p-2 shadow-none dark:bg-dark-550;
 
     &:focus {
-        @apply outline-none bg-gray-200 dark:bg-dark-600;
+        @apply bg-gray-200 outline-none dark:bg-dark-600;
     }
 }
 
-
 /*  Needs an 'input' selector, otherwise when .input-text is used on a div, it's always considered read only. */
 input.input-text:read-only,
 textarea.input-text:read-only,
 input.input-text-minimal:read-only,
 .input-text.read-only {
-    @apply bg-gray-300 dark:bg-dark-600 text-gray-700 dark:text-dark-200;
+    @apply bg-gray-300 text-gray-700 dark:bg-dark-600 dark:text-dark-200;
 }
 
 /* Input Groups
   ========================================================================== */
 
 .input-group {
-    @apply appearance-none text-gray-800 w-full p-0 rounded flex items-center;
+    @apply flex w-full appearance-none items-center rounded p-0 text-gray-800;
     @apply dark:text-dark-150;
     height: 2.375rem;
 
-    &:not(.focus-within-only):focus, &:not(.focus-within-only):focus-within {
+    &:not(.focus-within-only):focus,
+    &:not(.focus-within-only):focus-within {
         @apply ring-2 ring-blue-300;
         @apply dark:ring-blue-600;
 
-        .input-text:focus, .input-group-prepend:focus, .input-group-append:focus, .input-group-item:focus {
+        .input-text:focus,
+        .input-group-prepend:focus,
+        .input-group-append:focus,
+        .input-group-item:focus {
             outline: 0;
             box-shadow: none;
         }
     }
 
     .input-text {
-        @apply flex-1 border-gray-500 min-w-0;
+        @apply min-w-0 flex-1 border-gray-500;
         @apply dark:border-dark-900;
     }
 
     .input-text:not(:first-child) {
-        @apply rtl:rounded-r-none ltr:rounded-l-none rtl:border-r-0 ltr:border-l-0;
+        @apply ltr:rounded-l-none ltr:border-l-0 rtl:rounded-r-none rtl:border-r-0;
     }
 
     .input-text:not(:last-child) {
-        @apply rtl:rounded-l-none ltr:rounded-r-none rtl:border-l-0 ltr:border-r-0;
+        @apply ltr:rounded-r-none ltr:border-r-0 rtl:rounded-l-none rtl:border-l-0;
     }
 
     .input-text[dir='ltr']:not(:last-child) {
         @apply rtl:rounded-r rtl:border-r;
     }
 
-    .input-group-prepend, .input-group-append, .input-group-item {
-        @apply rtl:rounded-r ltr:rounded-l px-2 border dark:border-dark-900 text-sm text-gray-800 dark:text-dark-150 select-none;
+    .input-group-prepend,
+    .input-group-append,
+    .input-group-item {
+        @apply select-none border px-2 text-sm text-gray-800 dark:border-dark-900 dark:text-dark-150 ltr:rounded-l rtl:rounded-r;
         background: linear-gradient(180deg, #fff, #f9fafb);
         background-clip: padding-box;
         border: 1px solid #c4cdd6;
-        box-shadow: 0 1px 0 0 rgba(25,30,35,.05);
+        box-shadow: 0 1px 0 0 rgba(25, 30, 35, 0.05);
         height: 2.375rem;
         line-height: 36px;
 
@@ -103,7 +109,7 @@ input.input-text-minimal:read-only,
             background: linear-gradient(180deg, theme(colors.dark.500), theme(colors.dark.600));
             background-clip: padding-box;
             border-color: theme(colors.dark.900);
-            box-shadow: 0 1px 0 0 rgba(0,0,0,.05);
+            box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.05);
         }
 
         &button {
@@ -112,20 +118,25 @@ input.input-text-minimal:read-only,
     }
 
     &:has(.input-text) {
-        .input-group-prepend, .input-group-append, .input-group-item {
+        .input-group-prepend,
+        .input-group-append,
+        .input-group-item {
             @apply dark:border-dark-900;
         }
     }
 
     &.focus-within-only {
-        .input-text:focus, .input-group-prepend:focus, .input-group-append:focus, .input-group-item:focus {
+        .input-text:focus,
+        .input-group-prepend:focus,
+        .input-group-append:focus,
+        .input-group-item:focus {
             @apply focus-outline;
             z-index: 1;
         }
     }
 
     .input-group-item {
-        @apply rtl:rounded-r-none ltr:rounded-l-none -mx-px;
+        @apply -mx-px ltr:rounded-l-none rtl:rounded-r-none;
     }
 
     button.input-group-item:hover:not(:disabled),
@@ -146,20 +157,23 @@ input.input-text-minimal:read-only,
     }
 
     .input-group-append {
-        @apply rtl:rounded-r-none ltr:rounded-l-none rtl:border-l-0 ltr:border-r-0; /*  Rounded on the right side */
-        &:last-child { @apply rtl:rounded-l ltr:rounded-r rtl:border-l ltr:border-r; }
+        @apply ltr:rounded-l-none ltr:border-r-0 rtl:rounded-r-none rtl:border-l-0; /*  Rounded on the right side */
+        &:last-child {
+            @apply ltr:rounded-r ltr:border-r rtl:rounded-l rtl:border-l;
+        }
     }
 
-    > *:last-child[class*="input-group-"],
-    > *:last-child [class*="input-group-"] {
-        @apply rtl:rounded-l ltr:rounded-r;
+    > *:last-child[class*='input-group-'],
+    > *:last-child [class*='input-group-'] {
+        @apply ltr:rounded-r rtl:rounded-l;
     }
-
 }
 
 .input-group.input-group-sm {
     height: 1.625rem;
-    .input-group-prepend, .input-group-append, .input-group-item {
+    .input-group-prepend,
+    .input-group-append,
+    .input-group-item {
         @apply text-xs;
         height: 1.625rem;
         line-height: 25px;
@@ -167,7 +181,6 @@ input.input-text-minimal:read-only,
     }
 }
 
-
 /* Radio and Checkbox Fields
   ========================================================================== */
 
@@ -179,20 +192,20 @@ input.input-text-minimal:read-only,
     }
 
     input {
-        @apply leading-normal rtl:ml-1 ltr:mr-1;
+        @apply leading-normal ltr:mr-1 rtl:ml-1;
     }
 
     label {
-        @apply font-normal leading-none flex items-center;
+        @apply flex items-center font-normal leading-none;
     }
 }
 
 .radio-fieldtype .inline-mode,
 .checkboxes-fieldtype .inline-mode {
-    @apply flex items-center flex-wrap;
+    @apply flex flex-wrap items-center;
 
     .option {
-        @apply rtl:ml-4 ltr:mr-4 mb-3;
+        @apply mb-3 ltr:mr-4 rtl:ml-4;
         &:first-child {
             @apply mt-3;
         }
@@ -200,28 +213,30 @@ input.input-text-minimal:read-only,
 }
 
 .radio-box {
-    @apply border rounded cursor-pointer relative p-4 h-full;
+    @apply relative h-full cursor-pointer rounded border p-4;
     &.selected {
         @apply border-blue text-blue shadow;
     }
 }
 
-
 /* Select Fields
   ========================================================================== */
-  .select-input-container {
-    @apply rounded relative;
+.select-input-container {
+    @apply relative rounded;
 
     select {
-        @apply text-sm text-gray-800 dark:text-dark-150 shadow-button cursor-pointer block w-full h-full rtl:text-right ltr:text-left relative max-w-full;
-        @apply select-none rounded leading-normal align-middle whitespace-nowrap appearance-none subpixel-antialiased;
+        @apply relative block h-full w-full max-w-full cursor-pointer text-sm text-gray-800 shadow-button dark:text-dark-150 ltr:text-left rtl:text-right;
+        @apply select-none appearance-none whitespace-nowrap rounded align-middle leading-normal subpixel-antialiased;
 
         background: linear-gradient(180deg, #fff, #f9fafb);
         background-clip: padding-box;
         border: 1px solid #c4cdd6;
         height: 2.375rem; /*  38px */
         letter-spacing: -0.01em;
-        padding: .475rem 1.75rem .475rem .75rem ; [dir="rtl"] & { padding: .475rem .75rem .475rem 1.75rem ; }
+        padding: 0.475rem 1.75rem 0.475rem 0.75rem;
+        [dir='rtl'] & {
+            padding: 0.475rem 0.75rem 0.475rem 1.75rem;
+        }
 
         .dark & {
             background: linear-gradient(180deg, theme(colors.dark.500), theme(colors.dark.600));
@@ -229,7 +244,8 @@ input.input-text-minimal:read-only,
             border-color: theme(colors.dark.800);
         }
 
-        &:hover:not(:disabled), &:active:not(:disabled) {
+        &:hover:not(:disabled),
+        &:active:not(:disabled) {
             background: linear-gradient(180deg, #f9fafb, #f4f6f8);
             background-clip: padding-box;
             border-color: #c4cdd5;
@@ -243,25 +259,28 @@ input.input-text-minimal:read-only,
     }
 
     .select-input-toggle {
-        @apply pointer-events-none absolute inset-y-0 rtl:left-0 ltr:right-0 flex items-center px-2 text-gray-900 dark:text-dark-150;
+        @apply pointer-events-none absolute inset-y-0 flex items-center px-2 text-gray-900 dark:text-dark-150 ltr:right-0 rtl:left-0;
 
         svg {
-            @apply fill-current h-4 w-4;
+            @apply h-4 w-4 fill-current;
         }
     }
-  }
-
+}
 
 label .required {
     @apply text-red-500;
     font-style: normal;
 
     + .localizable-icon {
-        margin-left: 5px ; [dir="rtl"] & { margin-right: 5px ; margin-left: 0 ; }
+        margin-left: 5px;
+        [dir='rtl'] & {
+            margin-right: 5px;
+            margin-left: 0;
+        }
     }
 }
 
-input[type="file"] {
+input[type='file'] {
     padding: 16px;
     height: auto;
     line-height: 1;
@@ -269,21 +288,24 @@ input[type="file"] {
 
 .filter-control {
     background: #fff;
-    border: 1px solid rgba(0,0,0,.15);
+    border: 1px solid rgba(0, 0, 0, 0.15);
     font-size: 14px;
     line-height: 1.5;
     position: relative;
 
-    &.search { height: 34px !important; }
+    &.search {
+        height: 34px !important;
+    }
 }
 
-.help-block { width: 100%; }
-
+.help-block {
+    width: 100%;
+}
 
 /* Form groups
   ========================================================================== */
 .form-group {
-    @apply p-3 @sm:p-4 @lg:p-6 m-0;
+    @apply m-0 p-3 @sm:p-4 @lg:p-6;
 
     label {
         font-weight: 500;
@@ -309,15 +331,19 @@ input[type="file"] {
     padding: 0 !important;
     margin: 0 !important;
 
-    .form-group { flex-basis: auto; }
+    .form-group {
+        flex-basis: auto;
+    }
 
-    .major { flex: 1; }
+    .major {
+        flex: 1;
+    }
 }
 
 .help-block {
-    @apply block mb-2 text-gray-700 dark:text-dark-150/70 text-xs;
+    @apply mb-2 block text-xs text-gray-700 dark:text-dark-150/70;
     a {
-        @apply text-gray-800 dark:text-dark-175 underline;
+        @apply text-gray-800 underline dark:text-dark-175;
         &:hover {
             @apply text-blue dark:text-dark-blue-100;
         }
diff --git a/resources/css/elements/icons.css b/resources/css/elements/icons.css
index 6c91319585..23671358c7 100644
--- a/resources/css/elements/icons.css
+++ b/resources/css/elements/icons.css
@@ -10,49 +10,49 @@ svg {
 }
 
 .dark svg {
-    [fill="#EAEEF9"] {
+    [fill='#EAEEF9'] {
         fill: theme(colors.dark.575);
     }
-    [fill="#989FB0"] {
+    [fill='#989FB0'] {
         fill: theme(colors.dark.700);
     }
-    [stroke="#EAEEF9"] {
+    [stroke='#EAEEF9'] {
         stroke: theme(colors.dark.200);
     }
-    [stroke="#C2C8D6"] {
+    [stroke='#C2C8D6'] {
         stroke: theme(colors.dark.700);
     }
-    [fill="white"] {
+    [fill='white'] {
         fill: theme(colors.dark.200);
     }
-    [stop-color="#B0BACC"] {
+    [stop-color='#B0BACC'] {
         stop-color: theme(colors.dark.800);
     }
-    [stop-color="#969EAE"] {
+    [stop-color='#969EAE'] {
         stop-color: theme(colors.dark.950);
     }
-    [stop-color="#FDFEFF"] {
+    [stop-color='#FDFEFF'] {
         stop-color: theme(colors.dark.200);
     }
-    [stop-color="#ECF0F5"] {
+    [stop-color='#ECF0F5'] {
         stop-color: theme(colors.dark.250);
     }
-    [fill="#D6DCE8"] {
+    [fill='#D6DCE8'] {
         fill: theme(colors.dark.300);
     }
-    [stroke="#AAB2C5"] {
+    [stroke='#AAB2C5'] {
         stroke: theme(colors.dark.950);
     }
-    [fill="#AAB2C5"] {
+    [fill='#AAB2C5'] {
         fill: theme(colors.dark.950);
     }
-    [fill="#D5DDEA"] {
-        fill: theme(colors.dark.700)
+    [fill='#D5DDEA'] {
+        fill: theme(colors.dark.700);
     }
-    [fill="#C2C8D6"] {
-        fill: theme(colors.black)
+    [fill='#C2C8D6'] {
+        fill: theme(colors.black);
     }
-    [stroke="#989FB0"] {
+    [stroke='#989FB0'] {
         stroke: theme(colors.dark.200);
     }
 }
@@ -61,46 +61,55 @@ svg {
     fill: theme('colors.blue.DEFAULT');
 }
 
-.icon-status, .little-dot {
-	border-radius: 7px;
-	display: inline-block;
-	height: 7px;
-	position: relative;
-	width: 7px;
+.icon-status,
+.little-dot {
+    border-radius: 7px;
+    display: inline-block;
+    height: 7px;
+    position: relative;
+    width: 7px;
     flex-shrink: 0;
 
-    &.published { @apply bg-green-600 }
-    &.draft, &.expired { @apply bg-gray-600 dark:bg-dark-200 }
-    &.scheduled, &.hollow { @apply bg-transparent border border-gray-600 }
+    &.published {
+        @apply bg-green-600;
+    }
+    &.draft,
+    &.expired {
+        @apply bg-gray-600 dark:bg-dark-200;
+    }
+    &.scheduled,
+    &.hollow {
+        @apply border border-gray-600 bg-transparent;
+    }
 }
 
 .icon-header-avatar {
-    @apply rounded-full shadow overflow-hidden flex-shrink-0;
+    @apply flex-shrink-0 overflow-hidden rounded-full shadow;
     height: 32px;
     width: 32px;
     line-height: 32px;
 }
 
 .icon-user-initials {
-    @apply text-center text-white text-2xs bg-pink;
+    @apply bg-pink text-center text-2xs text-white;
 }
 
 .svg-icon {
-    @apply w-4 h-4;
+    @apply h-4 w-4;
 
-	&.using-svg {
-		@apply flex items-center;
-	}
+    &.using-svg {
+        @apply flex items-center;
+    }
 
-	svg {
-		width: 100%;
-		height: 100%;
-	}
+    svg {
+        width: 100%;
+        height: 100%;
+    }
 
-	div {
-		padding-top: 100%;
-		background-repeat: no-repeat;
-		background-size: contain;
-		background-position: 50% 50%;
-	}
+    div {
+        padding-top: 100%;
+        background-repeat: no-repeat;
+        background-size: contain;
+        background-position: 50% 50%;
+    }
 }
diff --git a/resources/css/elements/tables.css b/resources/css/elements/tables.css
index 60cd18585a..822e6a7c07 100644
--- a/resources/css/elements/tables.css
+++ b/resources/css/elements/tables.css
@@ -3,25 +3,29 @@
    ========================================================================== */
 
 .data-list-header {
-    @apply px-4 py-3 flex flex-wrap items-center;
+    @apply flex flex-wrap items-center px-4 py-3;
 }
 
 .data-list-search-input {
-	/*  @apply text-sm px-4 py-2 flex-1 rounded border; */
-	@apply bg-white;
+    /*  @apply text-sm px-4 py-2 flex-1 rounded border; */
+    @apply bg-white;
 
-	&:focus {
-		@apply focus-outline;
-	}
+    &:focus {
+        @apply focus-outline;
+    }
 }
 
 .data-list-bulk-actions {
-	@apply bg-white dark:bg-dark-750 absolute w-full py-2 z-1;
-	padding-left: 56px ; [dir="rtl"] & { padding-right: 56px ; padding-left: 0 ; }
+    @apply absolute z-1 w-full bg-white py-2 dark:bg-dark-750;
+    padding-left: 56px;
+    [dir='rtl'] & {
+        padding-right: 56px;
+        padding-left: 0;
+    }
 }
 
 .mode-grid .data-list-bulk-actions {
-	@apply bg-white dark:bg-dark-800 w-full pt-3 pb-1 z-10 rtl:pr-4 ltr:pl-4 static;
+    @apply static z-10 w-full bg-white pb-1 pt-3 dark:bg-dark-800 ltr:pl-4 rtl:pr-4;
 }
 
 .mode-grid .rotating-dots-button {
@@ -29,100 +33,109 @@
 }
 
 .data-list-footer {
-    @apply py-3 rtl:pl-4 ltr:pr-4 flex items-center border-t;
+    @apply flex items-center border-t py-3 ltr:pr-4 rtl:pl-4;
 }
 
 .data-table {
-	@apply rtl:text-right ltr:text-left text-gray-700 dark:text-dark-150 outline-none max-w-full w-full;
-	overflow-x: auto;
+    @apply w-full max-w-full text-gray-700 outline-none dark:text-dark-150 ltr:text-left rtl:text-right;
+    overflow-x: auto;
 
     thead {
-		@apply bg-gray-100 text-xs text-gray-900;
+        @apply bg-gray-100 text-xs text-gray-900;
         @apply dark:bg-dark-700 dark:text-dark-100;
 
-		tr {
-			@apply border-b dark:border-dark-900;
-		}
+        tr {
+            @apply border-b dark:border-dark-900;
+        }
 
         th {
-            @apply font-medium px-4 py-3 whitespace-nowrap;
-            &:first-child { @apply rtl:rounded-tr-lg ltr:rounded-tl-lg; }
-			&:last-child { @apply rtl:rounded-tl-lg ltr:rounded-tr-lg; }
-			&:hover {
-				@apply text-gray-900 dark:text-dark-100;
-			}
-		}
+            @apply whitespace-nowrap px-4 py-3 font-medium;
+            &:first-child {
+                @apply ltr:rounded-tl-lg rtl:rounded-tr-lg;
+            }
+            &:last-child {
+                @apply ltr:rounded-tr-lg rtl:rounded-tl-lg;
+            }
+            &:hover {
+                @apply text-gray-900 dark:text-dark-100;
+            }
+        }
         th.handle-column {
-            @apply p-0 w-4;
+            @apply w-4 p-0;
+        }
+        .type-column {
+            @apply ltr:text-right rtl:text-left;
         }
-		.type-column {
-			@apply ltr:text-right rtl:text-left;
-		}
-	}
+    }
 
     tbody {
-		outline: none;
+        outline: none;
         tr {
-			@apply border-b border-gray-400 dark:border-dark-900 text-sm;
+            @apply border-b border-gray-400 text-sm dark:border-dark-900;
 
-			&.row-selected {
-				@apply bg-gray-200 dark:bg-dark-600;
-			}
+            &.row-selected {
+                @apply bg-gray-200 dark:bg-dark-600;
+            }
 
-			&:first-child {
-				td:first-child, th:first-child {
-				    @apply rtl:rounded-tr-md ltr:rounded-tl-md;
-				}
+            &:first-child {
+                td:first-child,
+                th:first-child {
+                    @apply ltr:rounded-tl-md rtl:rounded-tr-md;
+                }
 
-				td:last-child, th:last-child {
-				    @apply rtl:rounded-tl-md ltr:rounded-tr-md;
-				}
-			}
+                td:last-child,
+                th:last-child {
+                    @apply ltr:rounded-tr-md rtl:rounded-tl-md;
+                }
+            }
 
-			&:last-child {
-				@apply border-none;
+            &:last-child {
+                @apply border-none;
 
-                td:first-child, th:first-child {
-				    @apply rtl:rounded-br-md ltr:rounded-bl-md;
-				}
+                td:first-child,
+                th:first-child {
+                    @apply ltr:rounded-bl-md rtl:rounded-br-md;
+                }
 
-				td:last-child, th:last-child {
-				    @apply rtl:rounded-bl-md ltr:rounded-br-md;
-				}
-			}
+                td:last-child,
+                th:last-child {
+                    @apply ltr:rounded-br-md rtl:rounded-bl-md;
+                }
+            }
 
             &:hover {
                 @apply bg-gray-100 dark:bg-dark-575;
             }
 
             th {
-                @apply py-2 rtl:pl-4 ltr:pr-4;
+                @apply py-2 ltr:pr-4 rtl:pl-4;
             }
 
             td {
-                @apply py-2 px-4 break-words;
+                @apply break-words px-4 py-2;
             }
 
             td.table-drag-handle {
-                @apply w-1 rtl:border-l ltr:border-r h-full py-2 px-0;
+                @apply h-full w-1 px-0 py-2 ltr:border-r rtl:border-l;
             }
-		}
+        }
 
         .type-column {
-			@apply ltr:text-right rtl:text-left;
-		}
+            @apply ltr:text-right rtl:text-left;
+        }
     }
 
-
     .sortable-column {
         @apply cursor-pointer select-none;
 
         &:hover {
-			@apply text-blue-500 dark:text-dark-blue-100;
+            @apply text-blue-500 dark:text-dark-blue-100;
         }
 
         &.current-column {
-            svg { opacity: 1; }
+            svg {
+                opacity: 1;
+            }
         }
 
         svg {
@@ -132,7 +145,7 @@
         svg.asc {
             transform: scaleY(-1);
         }
-	}
+    }
 
     .date-index-field {
         @apply whitespace-nowrap;
@@ -142,23 +155,31 @@
 /* Sticky Meta Columns */
 .data-table {
     thead th.checkbox-column {
-        @apply p-0 rtl:pl-2 ltr:pr-2 sticky z-1 rtl:-right-px ltr:-left-px;
+        @apply sticky z-1 p-0 ltr:-left-px ltr:pr-2 rtl:-right-px rtl:pl-2;
         width: 45px;
         min-width: 45px;
         &:after {
-            @apply absolute rtl:right-0 ltr:left-0 rtl:left-0 ltr:right-0 top-0 bottom-0 -z-1 ;
+            @apply absolute bottom-0 top-0 -z-1 ltr:left-0 ltr:right-0 rtl:left-0 rtl:right-0;
             content: '';
             background-image: linear-gradient(to right, theme(colors.gray.100) 70%, theme(colors.gray.100 / 0%) 100%);
 
             .dark & {
-                background-image: linear-gradient(to right, theme(colors.dark.550) 70%, theme(colors.dark.550 / 0%) 100%);
+                background-image: linear-gradient(
+                    to right,
+                    theme(colors.dark.550) 70%,
+                    theme(colors.dark.550 / 0%) 100%
+                );
             }
         }
 
         &:has(input:checked) {
             &:after {
                 .dark & {
-                    background-image: linear-gradient(to right, theme(colors.dark.750) 70%, theme(colors.dark.750 / 0%) 100%);
+                    background-image: linear-gradient(
+                        to right,
+                        theme(colors.dark.750) 70%,
+                        theme(colors.dark.750 / 0%) 100%
+                    );
                     @apply border-b border-dark-550;
                 }
             }
@@ -166,23 +187,31 @@
     }
 
     thead th.actions-column {
-        @apply p-0 rtl:pr-2 ltr:pl-2 rtl:text-left ltr:text-right sticky rtl:-left-px ltr:-right-px;
+        @apply sticky p-0 ltr:-right-px ltr:pl-2 ltr:text-right rtl:-left-px rtl:pr-2 rtl:text-left;
         width: 45px;
         min-width: 45px;
         &:after {
-            @apply absolute rtl:right-0 ltr:left-0 rtl:left-0 ltr:right-0 top-0 bottom-0 -z-1;
+            @apply absolute bottom-0 top-0 -z-1 ltr:left-0 ltr:right-0 rtl:left-0 rtl:right-0;
             content: '';
             background-image: linear-gradient(to left, theme(colors.gray.100) 70%, theme(colors.gray.100 / 0%) 100%);
 
             .dark & {
-                background-image: linear-gradient(to left, theme(colors.dark.550) 70%, theme(colors.dark.550 / 0%) 100%);
+                background-image: linear-gradient(
+                    to left,
+                    theme(colors.dark.550) 70%,
+                    theme(colors.dark.550 / 0%) 100%
+                );
             }
         }
 
         &:has(input:checked) {
             &:after {
                 .dark & {
-                    background-image: linear-gradient(to left, theme(colors.dark.750) 70%, theme(colors.dark.750 / 0%) 100%);
+                    background-image: linear-gradient(
+                        to left,
+                        theme(colors.dark.750) 70%,
+                        theme(colors.dark.750 / 0%) 100%
+                    );
                     @apply border-b border-dark-550;
                 }
             }
@@ -190,29 +219,37 @@
     }
 
     tbody th.checkbox-column {
-        @apply px-3 sticky rtl:-right-px ltr:-left-px;
+        @apply sticky px-3 ltr:-left-px rtl:-right-px;
         &:after {
-            @apply absolute rtl:right-0 ltr:left-0 rtl:left-0 ltr:right-0 top-0 bottom-0 -z-1;
+            @apply absolute bottom-0 top-0 -z-1 ltr:left-0 ltr:right-0 rtl:left-0 rtl:right-0;
             content: '';
-            background-image: linear-gradient(to right, rgba(255,255,255,1) 70%, rgba(255,255,255,0) 100%);
+            background-image: linear-gradient(to right, rgba(255, 255, 255, 1) 70%, rgba(255, 255, 255, 0) 100%);
 
             .dark & {
-                background-image: linear-gradient(to right, theme(colors.dark.600) 70%, theme(colors.dark.600 / 0%) 100%);
+                background-image: linear-gradient(
+                    to right,
+                    theme(colors.dark.600) 70%,
+                    theme(colors.dark.600 / 0%) 100%
+                );
             }
         }
     }
 
     tbody th.actions-column {
-        @apply p-0 rtl:pr-2 ltr:pl-2 rtl:text-left ltr:text-right sticky rtl:-left-px ltr:-right-px;
+        @apply sticky p-0 ltr:-right-px ltr:pl-2 ltr:text-right rtl:-left-px rtl:pr-2 rtl:text-left;
         min-width: 45px;
         width: 45px;
         &:after {
-            @apply absolute rtl:right-0 ltr:left-0 rtl:left-0 ltr:right-0 top-0 bottom-0 -z-1;
+            @apply absolute bottom-0 top-0 -z-1 ltr:left-0 ltr:right-0 rtl:left-0 rtl:right-0;
             content: '';
-            background-image: linear-gradient(to left, rgba(255,255,255,1) 70%, rgba(255,255,255,0) 100%);
+            background-image: linear-gradient(to left, rgba(255, 255, 255, 1) 70%, rgba(255, 255, 255, 0) 100%);
 
             .dark & {
-                background-image: linear-gradient(to left, theme(colors.dark.600) 70%, theme(colors.dark.600 / 0%) 100%);
+                background-image: linear-gradient(
+                    to left,
+                    theme(colors.dark.600) 70%,
+                    theme(colors.dark.600 / 0%) 100%
+                );
             }
         }
     }
@@ -250,7 +287,6 @@
     }
 }
 
-
 .data-list-header ~ .data-table {
     thead th {
         border-radius: 0;
@@ -258,99 +294,120 @@
 }
 
 .data-list-filter-link {
-	@apply border-gray-400 dark:border-dark-900 text-gray-600 dark:text-dark-150 rtl:ml-2 ltr:mr-2 p-3 pb-2;
+    @apply border-gray-400 p-3 pb-2 text-gray-600 dark:border-dark-900 dark:text-dark-150 ltr:mr-2 rtl:ml-2;
 
-	&:hover {
-		@apply border-b-3 dark:border-dark-900 text-gray-700 dark:text-dark-100;
-	}
+    &:hover {
+        @apply border-b-3 text-gray-700 dark:border-dark-900 dark:text-dark-100;
+    }
 
-	&:focus {
-		@apply border-blue-300 dark:border-dark-blue-100;
-		outline: 0;
-		box-shadow: inset 0 0 0 0.2rem rgba(0,125,255,.25);
-	}
+    &:focus {
+        @apply border-blue-300 dark:border-dark-blue-100;
+        outline: 0;
+        box-shadow: inset 0 0 0 0.2rem rgba(0, 125, 255, 0.25);
+    }
 
-	&.active {
-		@apply border-b-3 border-blue dark:border-dark-blue-100 text-gray-800 dark:text-dark-100;
-	}
+    &.active {
+        @apply border-b-3 border-blue text-gray-800 dark:border-dark-blue-100 dark:text-dark-100;
+    }
 }
 
 td.table-drag-handle {
-	@apply w-3 rtl:border-l ltr:border-r dark:border-dark-900 h-full p-2;
+    @apply h-full w-3 p-2 dark:border-dark-900 ltr:border-r rtl:border-l;
     min-width: 16px;
-	cursor: grab;
-	background: theme('colors.gray.200') url('../../svg/icons/light/drag-dots.svg') center center no-repeat;
+    cursor: grab;
+    background: theme('colors.gray.200') url('../../svg/icons/light/drag-dots.svg') center center no-repeat;
     background-size: 7px 17px;
 
     .dark & {
         background-color: theme(colors.dark.700);
     }
 
-	&:hover { @apply bg-gray-300 dark:bg-dark-750; }
+    &:hover {
+        @apply bg-gray-300 dark:bg-dark-750;
+    }
 }
 
 .table-row-placeholder {
-	background: hsla(210, 30%, 95%, 1);
+    background: hsla(210, 30%, 95%, 1);
 }
 
 .delete-column {
-	background: #fff;
-	border: 1px solid #ccc;
-	border-radius: 22px;
-	color: #777;
-	box-shadow: 0 1px 1px rgba(0,0,0,.05);
-	line-height: 1;
-	text-align: center;
-	height: 22px;
-	width: 22px;
-	float: right ; [dir="rtl"] & { float: left ; }
-	cursor: pointer;
-
-	&:hover {
-		box-shadow: none;
-		color: #555;
-	}
+    background: #fff;
+    border: 1px solid #ccc;
+    border-radius: 22px;
+    color: #777;
+    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
+    line-height: 1;
+    text-align: center;
+    height: 22px;
+    width: 22px;
+    float: right;
+    [dir='rtl'] & {
+        float: left;
+    }
+    cursor: pointer;
+
+    &:hover {
+        box-shadow: none;
+        color: #555;
+    }
 }
 
 .column-sortable {
-	cursor: pointer;
-	position: relative;
-
-	&:before {
-		content: "";
-		position: absolute;
-		bottom: -1px;
-	 left: 0 ; [dir="rtl"] & { left: auto ; right: 0 ; }
-	 right: 0 ; [dir="rtl"] & { right: auto ; left: 0 ; }
-		height: 2px;
-	}
-
-	&:hover:before {
+    cursor: pointer;
+    position: relative;
+
+    &:before {
+        content: '';
+        position: absolute;
+        bottom: -1px;
+        left: 0;
+        [dir='rtl'] & {
+            left: auto;
+            right: 0;
+        }
+        right: 0;
+        [dir='rtl'] & {
+            right: auto;
+            left: 0;
+        }
+        height: 2px;
+    }
+
+    &:hover:before {
         @apply bg-gray-300;
-	}
-	&.active:before {
+    }
+    &.active:before {
         @apply bg-blue;
     }
-	.icon {
+    .icon {
         position: relative;
-        float: right ; [dir="rtl"] & { float: left ; }
+        float: right;
+        [dir='rtl'] & {
+            float: left;
+        }
         top: 6px;
-        right: 5px ; [dir="rtl"] & { right: auto ; left: 5px ; }
-	}
+        right: 5px;
+        [dir='rtl'] & {
+            right: auto;
+            left: 5px;
+        }
+    }
 
-	.icon, .icon:before {
-		line-height: 0;
-	}
+    .icon,
+    .icon:before {
+        line-height: 0;
+    }
 }
 
 .column-status {
-	text-align: center;
-	width: 80px;
+    text-align: center;
+    width: 80px;
 }
 
 .column-actions {
-	@apply ltr:text-right rtl:text-left;
-	width: 30px;
+    @apply ltr:text-right rtl:text-left;
+    width: 30px;
 }
 
 table.control {
@@ -359,11 +416,14 @@ table.control {
 
 .flush table.control {
     tr th:first-child {
-        padding-left: 30px ; [dir="rtl"] & { padding-right: 30px ; padding-left: 0 ; }
+        padding-left: 30px;
+        [dir='rtl'] & {
+            padding-right: 30px;
+            padding-left: 0;
+        }
     }
 }
 
-
 /* Index Fields
   ========================================================================== */
 
@@ -383,7 +443,7 @@ table.control {
 .relationship-index-field {
     min-width: 10vw;
     .relationship-index-field-item {
-        @apply rounded bg-gray-100 dark:bg-dark-500 border dark:border-dark-400 px-1 flex items-center text-2xs rtl:ml-1 ltr:mr-1;
+        @apply flex items-center rounded border bg-gray-100 px-1 text-2xs dark:border-dark-400 dark:bg-dark-500 ltr:mr-1 rtl:ml-1;
         a {
             @apply line-clamp-1;
         }
@@ -399,22 +459,23 @@ table.control {
 }
 
 .status-index-field {
-    @apply inline-block text-xs bg-gray-300 dark:bg-dark-200 text-gray-800 dark:text-dark-150 shrink rounded-full px-2 py-0.5 text-center justify-center;
+    @apply inline-block shrink justify-center rounded-full bg-gray-300 px-2 py-0.5 text-center text-xs text-gray-800 dark:bg-dark-200 dark:text-dark-150;
 
     &.status-published:not(.status-private) {
-        @apply text-green-900 dark:text-green-950 bg-green-200 dark:bg-green-300;
+        @apply bg-green-200 text-green-900 dark:bg-green-300 dark:text-green-950;
     }
 
     &.status-scheduled {
-        @apply text-amber-900 dark:text-amber-950 bg-amber-200 dark:bg-amber-300;
+        @apply bg-amber-200 text-amber-900 dark:bg-amber-300 dark:text-amber-950;
     }
 }
 
-.role-index-field, .groups-index-field {
-    @apply flex flex-wrap -mb-1.5;
+.role-index-field,
+.groups-index-field {
+    @apply -mb-1.5 flex flex-wrap;
 
     .role-index-field-item,
     .groups-index-field-item {
-        @apply rounded bg-gray-100 dark:bg-dark-700 border dark:border-dark-900 px-1 inline-block text-2xs line-clamp-1 mb-1;
+        @apply mb-1 line-clamp-1 inline-block rounded border bg-gray-100 px-1 text-2xs dark:border-dark-900 dark:bg-dark-700;
     }
 }
diff --git a/resources/css/tailwind.css b/resources/css/tailwind.css
index 59bfe33411..747f54c098 100644
--- a/resources/css/tailwind.css
+++ b/resources/css/tailwind.css
@@ -1,7 +1,7 @@
-@import "tailwindcss/base";
-@import "cp";
-@import "tailwindcss/components";
-@import "tailwindcss/utilities";
-@import "core/utilities";
-@import "rtl";
-@import "dark";
+@import 'tailwindcss/base';
+@import 'cp';
+@import 'tailwindcss/components';
+@import 'tailwindcss/utilities';
+@import 'core/utilities';
+@import 'rtl';
+@import 'dark';
diff --git a/resources/css/vendors/codemirror.css b/resources/css/vendors/codemirror.css
index 93377c0fec..f5b8cd6926 100644
--- a/resources/css/vendors/codemirror.css
+++ b/resources/css/vendors/codemirror.css
@@ -2,237 +2,349 @@
    CODEMIRROR
    ========================================================================== */
 
-   .CodeMirror {
+.CodeMirror {
     /* Set height, width, borders, and global font properties here */
-    @apply text-gray-900 font-mono text-sm leading-loose;
+    @apply font-mono text-sm leading-loose text-gray-900;
     min-height: 80px;
-  }
+}
 
-  /* PADDING */
+/* PADDING */
 
-  .CodeMirror-lines {
+.CodeMirror-lines {
     padding: 4px 0; /* Vertical padding around content */
-  }
-  .CodeMirror pre {
+}
+.CodeMirror pre {
     padding: 0 16px; /* Horizontal padding of content */
-  }
-  .CodeMirror-wrap {
+}
+.CodeMirror-wrap {
     @apply rounded-b;
-  }
+}
 
-  .CodeMirror-scrollbar-filler, .CodeMirror-gutter-filler {
+.CodeMirror-scrollbar-filler,
+.CodeMirror-gutter-filler {
     background-color: white; /* The little square between H and V scrollbars */
-  }
+}
 
-  /* GUTTER */
+/* GUTTER */
 
-  .CodeMirror-gutters {
-    @apply bg-gray-200 border-r;
+.CodeMirror-gutters {
+    @apply border-r bg-gray-200;
     height: 100% !important;
     white-space: nowrap;
-  }
+}
 
-  .CodeMirror-linenumbers {}
-  .CodeMirror-linenumber {
+.CodeMirror-linenumbers {
+}
+.CodeMirror-linenumber {
     padding: 0 3px 0 5px;
     min-width: 20px;
     @apply text-right;
     color: #999;
     white-space: nowrap;
-  }
+}
 
-  .CodeMirror-guttermarker { color: black; }
-  .CodeMirror-guttermarker-subtle { color: #999; }
+.CodeMirror-guttermarker {
+    color: black;
+}
+.CodeMirror-guttermarker-subtle {
+    color: #999;
+}
 
-  /* CURSOR */
+/* CURSOR */
 
-  .CodeMirror-cursor {
+.CodeMirror-cursor {
     border-left: 1px solid black;
     border-right: none;
     width: 0;
-  }
-  /* Shown when moving in bi-directional text */
-  .CodeMirror div.CodeMirror-secondarycursor {
+}
+/* Shown when moving in bi-directional text */
+.CodeMirror div.CodeMirror-secondarycursor {
     border-left: 1px solid silver;
-  }
-  .cm-fat-cursor .CodeMirror-cursor {
+}
+.cm-fat-cursor .CodeMirror-cursor {
     width: auto;
     border: 0;
     background: #7e7;
-  }
-  .cm-fat-cursor div.CodeMirror-cursors {
+}
+.cm-fat-cursor div.CodeMirror-cursors {
     z-index: 1;
-  }
+}
 
-  .cm-animate-fat-cursor {
+.cm-animate-fat-cursor {
     width: auto;
     border: 0;
     -webkit-animation: blink 1.06s steps(1) infinite;
     -moz-animation: blink 1.06s steps(1) infinite;
     animation: blink 1.06s steps(1) infinite;
     background-color: #7e7;
-  }
-  @-moz-keyframes blink {
-    0% {}
-    50% { background-color: transparent; }
-    100% {}
-  }
-  @-webkit-keyframes blink {
-    0% {}
-    50% { background-color: transparent; }
-    100% {}
-  }
-  @keyframes blink {
-    0% {}
-    50% { background-color: transparent; }
-    100% {}
-  }
-
-  /* Can style cursor different in overwrite (non-insert) mode */
-  .CodeMirror-overwrite .CodeMirror-cursor {}
-
-  .cm-tab { display: inline-block; text-decoration: inherit; }
-
-  .CodeMirror-ruler {
+}
+@-moz-keyframes blink {
+    0% {
+    }
+    50% {
+        background-color: transparent;
+    }
+    100% {
+    }
+}
+@-webkit-keyframes blink {
+    0% {
+    }
+    50% {
+        background-color: transparent;
+    }
+    100% {
+    }
+}
+@keyframes blink {
+    0% {
+    }
+    50% {
+        background-color: transparent;
+    }
+    100% {
+    }
+}
+
+/* Can style cursor different in overwrite (non-insert) mode */
+.CodeMirror-overwrite .CodeMirror-cursor {
+}
+
+.cm-tab {
+    display: inline-block;
+    text-decoration: inherit;
+}
+
+.CodeMirror-ruler {
     border-left: 1px solid #ccc;
     position: absolute;
-  }
-
-  /* DEFAULT THEME */
-
-  .cm-s-default .cm-header {color: blue;}
-  .cm-s-default .cm-quote {color: #090;}
-  .cm-negative {color: #d44;}
-  .cm-positive {color: #292;}
-  .cm-header, .cm-strong {font-weight: bold;}
-  .cm-em {font-style: italic;}
-  .cm-link {text-decoration: underline;}
-  .cm-strikethrough {text-decoration: line-through;}
-
-  .cm-s-default .cm-keyword {color: #708; @apply dark:text-purple-dark;}
-  .cm-s-default .cm-atom {color: #219;}
-  .cm-s-default .cm-number {color: #164;}
-  .cm-s-default .cm-def {color: #00f; @apply dark:text-blue-600;}
-  .cm-s-default .cm-variable,
-  .cm-s-default .cm-punctuation,
-  .cm-s-default .cm-property,
-  .cm-s-default .cm-operator {}
-  .cm-s-default .cm-variable-2 {color: #05a; @apply dark:text-blue-600;}
-  .cm-s-default .cm-variable-3 {color: #085; @apply dark:text-green-600;}
-  .cm-s-default .cm-comment {color: #a50; @apply dark:text-orange-dark;}
-  .cm-s-default .cm-string {color: #a11; @apply dark:text-red-500;}
-  .cm-s-default .cm-string-2 {color: #f50;}
-  .cm-s-default .cm-meta {color: #555;}
-  .cm-s-default .cm-qualifier {color: #555;}
-  .cm-s-default .cm-builtin {color: #30a;}
-  .cm-s-default .cm-bracket {color: #997;}
-  .cm-s-default .cm-tag {color: #170;}
-  .cm-s-default .cm-attribute {color: #00c;}
-  .cm-s-default .cm-hr {color: #999;}
-  .cm-s-default .cm-link {color: #00c; @apply dark:text-blue-500;}
-
-  .cm-s-default .cm-error {color: #f00;}
-  .cm-invalidchar {color: #f00;}
-
-  .CodeMirror-composing { border-bottom: 2px solid; }
-
-  /* Default styles for common addons */
-
-  div.CodeMirror span.CodeMirror-matchingbracket {color: #0f0;}
-  div.CodeMirror span.CodeMirror-nonmatchingbracket {color: #f22;}
-  .CodeMirror-matchingtag { background: rgba(255, 150, 0, .3); }
-  .CodeMirror-activeline-background {background: #e8f2ff;}
-
-  /* STOP */
-
-  /* The rest of this file contains styles related to the mechanics of
+}
+
+/* DEFAULT THEME */
+
+.cm-s-default .cm-header {
+    color: blue;
+}
+.cm-s-default .cm-quote {
+    color: #090;
+}
+.cm-negative {
+    color: #d44;
+}
+.cm-positive {
+    color: #292;
+}
+.cm-header,
+.cm-strong {
+    font-weight: bold;
+}
+.cm-em {
+    font-style: italic;
+}
+.cm-link {
+    text-decoration: underline;
+}
+.cm-strikethrough {
+    text-decoration: line-through;
+}
+
+.cm-s-default .cm-keyword {
+    color: #708;
+    @apply dark:text-purple-dark;
+}
+.cm-s-default .cm-atom {
+    color: #219;
+}
+.cm-s-default .cm-number {
+    color: #164;
+}
+.cm-s-default .cm-def {
+    color: #00f;
+    @apply dark:text-blue-600;
+}
+.cm-s-default .cm-variable,
+.cm-s-default .cm-punctuation,
+.cm-s-default .cm-property,
+.cm-s-default .cm-operator {
+}
+.cm-s-default .cm-variable-2 {
+    color: #05a;
+    @apply dark:text-blue-600;
+}
+.cm-s-default .cm-variable-3 {
+    color: #085;
+    @apply dark:text-green-600;
+}
+.cm-s-default .cm-comment {
+    color: #a50;
+    @apply dark:text-orange-dark;
+}
+.cm-s-default .cm-string {
+    color: #a11;
+    @apply dark:text-red-500;
+}
+.cm-s-default .cm-string-2 {
+    color: #f50;
+}
+.cm-s-default .cm-meta {
+    color: #555;
+}
+.cm-s-default .cm-qualifier {
+    color: #555;
+}
+.cm-s-default .cm-builtin {
+    color: #30a;
+}
+.cm-s-default .cm-bracket {
+    color: #997;
+}
+.cm-s-default .cm-tag {
+    color: #170;
+}
+.cm-s-default .cm-attribute {
+    color: #00c;
+}
+.cm-s-default .cm-hr {
+    color: #999;
+}
+.cm-s-default .cm-link {
+    color: #00c;
+    @apply dark:text-blue-500;
+}
+
+.cm-s-default .cm-error {
+    color: #f00;
+}
+.cm-invalidchar {
+    color: #f00;
+}
+
+.CodeMirror-composing {
+    border-bottom: 2px solid;
+}
+
+/* Default styles for common addons */
+
+div.CodeMirror span.CodeMirror-matchingbracket {
+    color: #0f0;
+}
+div.CodeMirror span.CodeMirror-nonmatchingbracket {
+    color: #f22;
+}
+.CodeMirror-matchingtag {
+    background: rgba(255, 150, 0, 0.3);
+}
+.CodeMirror-activeline-background {
+    background: #e8f2ff;
+}
+
+/* STOP */
+
+/* The rest of this file contains styles related to the mechanics of
      the editor. You probably shouldn't touch them. */
 
-    .CodeMirror {
+.CodeMirror {
     position: relative;
     overflow: hidden;
     background: white;
-  }
+}
 
-  .CodeMirror-scroll {
+.CodeMirror-scroll {
     overflow: scroll !important; /* Things will break if this is overridden */
     /* 50px is the magic margin used to hide the element's real scrollbars */
     /* See overflow: hidden in .CodeMirror */
-    margin-bottom: -50px; margin-right: -50px;
+    margin-bottom: -50px;
+    margin-right: -50px;
     padding-bottom: 50px;
     height: 100%;
     outline: none; /* Prevent dragging from highlighting the element */
     position: relative;
-  }
-  .CodeMirror-sizer {
+}
+.CodeMirror-sizer {
     position: relative;
     border-right: 50px solid transparent;
-  }
+}
 
-  /* The fake, visible scrollbars. Used to force redraw during scrolling
+/* The fake, visible scrollbars. Used to force redraw during scrolling
       before actual scrolling happens, thus preventing shaking and
       flickering artifacts. */
-  .CodeMirror-vscrollbar, .CodeMirror-hscrollbar, .CodeMirror-scrollbar-filler, .CodeMirror-gutter-filler {
+.CodeMirror-vscrollbar,
+.CodeMirror-hscrollbar,
+.CodeMirror-scrollbar-filler,
+.CodeMirror-gutter-filler {
     position: absolute;
     z-index: 6;
     display: none;
-  }
-  .CodeMirror-vscrollbar {
-    right: 0; top: 0;
+}
+.CodeMirror-vscrollbar {
+    right: 0;
+    top: 0;
     overflow-x: hidden;
     overflow-y: scroll;
-  }
-  .CodeMirror-hscrollbar {
-    bottom: 0; left: 0;
+}
+.CodeMirror-hscrollbar {
+    bottom: 0;
+    left: 0;
     overflow-y: hidden;
     overflow-x: scroll;
-  }
-  .CodeMirror-scrollbar-filler {
-    right: 0; bottom: 0;
-  }
-  .CodeMirror-gutter-filler {
-    left: 0; bottom: 0;
-  }
-
-  .CodeMirror-gutters {
-    position: absolute; left: 0; top: 0;
+}
+.CodeMirror-scrollbar-filler {
+    right: 0;
+    bottom: 0;
+}
+.CodeMirror-gutter-filler {
+    left: 0;
+    bottom: 0;
+}
+
+.CodeMirror-gutters {
+    position: absolute;
+    left: 0;
+    top: 0;
     min-height: 100%;
     z-index: 3;
-  }
-  .CodeMirror-gutter {
+}
+.CodeMirror-gutter {
     white-space: normal;
     height: 100%;
     display: inline-block;
     vertical-align: top;
     margin-bottom: -50px;
-  }
-  .CodeMirror-gutter-wrapper {
+}
+.CodeMirror-gutter-wrapper {
     position: absolute;
     z-index: 4;
     background: none !important;
     border: none !important;
-  }
-  .CodeMirror-gutter-background {
+}
+.CodeMirror-gutter-background {
     position: absolute;
-    top: 0; bottom: 0;
+    top: 0;
+    bottom: 0;
     z-index: 4;
-  }
-  .CodeMirror-gutter-elt {
+}
+.CodeMirror-gutter-elt {
     position: absolute;
     cursor: default;
     z-index: 4;
-  }
-  .CodeMirror-gutter-wrapper ::selection { background-color: transparent }
-  .CodeMirror-gutter-wrapper ::-moz-selection { background-color: transparent }
-
-  .CodeMirror-lines {
+}
+.CodeMirror-gutter-wrapper ::selection {
+    background-color: transparent;
+}
+.CodeMirror-gutter-wrapper ::-moz-selection {
+    background-color: transparent;
+}
+
+.CodeMirror-lines {
     cursor: text;
     min-height: 1px; /* prevents collapsing before first draw */
-  }
-  .CodeMirror pre.CodeMirror-line,
-  .CodeMirror pre.CodeMirror-line-like {
+}
+.CodeMirror pre.CodeMirror-line,
+.CodeMirror pre.CodeMirror-line-like {
     /* Reset some styles that the rest of the page might have set */
-    -moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0;
+    -moz-border-radius: 0;
+    -webkit-border-radius: 0;
+    border-radius: 0;
     border-width: 0;
     background: transparent;
     font-family: inherit;
@@ -248,256 +360,278 @@
     -webkit-tap-highlight-color: transparent;
     -webkit-font-variant-ligatures: contextual;
     font-variant-ligatures: contextual;
-  }
-  .CodeMirror-wrap pre.CodeMirror-line,
-  .CodeMirror-wrap pre.CodeMirror-line-like {
+}
+.CodeMirror-wrap pre.CodeMirror-line,
+.CodeMirror-wrap pre.CodeMirror-line-like {
     word-wrap: break-word;
     white-space: pre-wrap;
     word-break: normal;
-  }
+}
 
-  .CodeMirror-linebackground {
+.CodeMirror-linebackground {
     position: absolute;
-    left: 0; right: 0; top: 0; bottom: 0;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
     z-index: 0;
-  }
+}
 
-  .CodeMirror-linewidget {
+.CodeMirror-linewidget {
     position: relative;
     z-index: 2;
     padding: 0.1px; /* Force widget margins to stay inside of the container */
-  }
+}
 
-  .CodeMirror-widget {}
+.CodeMirror-widget {
+}
 
-  .CodeMirror-rtl pre { direction: ltr; }
+.CodeMirror-rtl pre {
+    direction: ltr;
+}
 
-  .CodeMirror-code {
+.CodeMirror-code {
     outline: none;
-  }
-
-  /* Force content-box sizing for the elements where we expect it */
-  .CodeMirror-scroll,
-  .CodeMirror-sizer,
-  .CodeMirror-gutter,
-  .CodeMirror-gutters,
-  .CodeMirror-linenumber {
+}
+
+/* Force content-box sizing for the elements where we expect it */
+.CodeMirror-scroll,
+.CodeMirror-sizer,
+.CodeMirror-gutter,
+.CodeMirror-gutters,
+.CodeMirror-linenumber {
     -moz-box-sizing: content-box;
     box-sizing: content-box;
-  }
+}
 
-  .CodeMirror-measure {
+.CodeMirror-measure {
     position: absolute;
     width: 100%;
     height: 0;
     overflow: hidden;
     visibility: hidden;
-  }
+}
 
-  .CodeMirror-cursor {
+.CodeMirror-cursor {
     position: absolute;
     pointer-events: none;
-  }
-  .CodeMirror-measure pre { position: static; }
+}
+.CodeMirror-measure pre {
+    position: static;
+}
 
-  div.CodeMirror-cursors {
+div.CodeMirror-cursors {
     visibility: hidden;
     position: relative;
     z-index: 3;
-  }
-  div.CodeMirror-dragcursors {
+}
+div.CodeMirror-dragcursors {
     visibility: visible;
-  }
+}
 
-  .CodeMirror-focused div.CodeMirror-cursors {
+.CodeMirror-focused div.CodeMirror-cursors {
     visibility: visible;
-  }
-
-  .CodeMirror-selected { background: #d9d9d9; }
-  .CodeMirror-focused .CodeMirror-selected { background: #d7d4f0; }
-  .CodeMirror-crosshair { cursor: crosshair; }
-  .CodeMirror-line::selection, .CodeMirror-line > span::selection, .CodeMirror-line > span > span::selection { background: #d7d4f0; }
-  .CodeMirror-line::-moz-selection, .CodeMirror-line > span::-moz-selection, .CodeMirror-line > span > span::-moz-selection { background: #d7d4f0; }
-
-  .cm-searching {
+}
+
+.CodeMirror-selected {
+    background: #d9d9d9;
+}
+.CodeMirror-focused .CodeMirror-selected {
+    background: #d7d4f0;
+}
+.CodeMirror-crosshair {
+    cursor: crosshair;
+}
+.CodeMirror-line::selection,
+.CodeMirror-line > span::selection,
+.CodeMirror-line > span > span::selection {
+    background: #d7d4f0;
+}
+.CodeMirror-line::-moz-selection,
+.CodeMirror-line > span::-moz-selection,
+.CodeMirror-line > span > span::-moz-selection {
+    background: #d7d4f0;
+}
+
+.cm-searching {
     background-color: #ffa;
-    background-color: rgba(255, 255, 0, .4);
-  }
+    background-color: rgba(255, 255, 0, 0.4);
+}
 
-  /* Used to force a border model for a node */
-  .cm-force-border { padding-right: .1px; }
+/* Used to force a border model for a node */
+.cm-force-border {
+    padding-right: 0.1px;
+}
 
-  @media print {
+@media print {
     /* Hide the cursor when printing */
     .CodeMirror div.CodeMirror-cursors {
-      visibility: hidden;
+        visibility: hidden;
     }
-  }
-
-  /* See issue #2901 */
-  .cm-tab-wrap-hack:after { content: ''; }
+}
 
-  /* Help users use markselection to safely style text background */
-  span.CodeMirror-selectedtext { background: none; }
+/* See issue #2901 */
+.cm-tab-wrap-hack:after {
+    content: '';
+}
 
+/* Help users use markselection to safely style text background */
+span.CodeMirror-selectedtext {
+    background: none;
+}
 
-  .CodeMirror-fullscreen {
-      @apply fixed h-auto inset-0 pt-14 rounded-none;
-  }
+.CodeMirror-fullscreen {
+    @apply fixed inset-0 h-auto rounded-none pt-14;
+}
 
-  .CodeMirror-rulers {
-      @apply absolute left-0 right-0 overflow-hidden;
-      top: -50px;
-      bottom: -20px;
-  }
+.CodeMirror-rulers {
+    @apply absolute left-0 right-0 overflow-hidden;
+    top: -50px;
+    bottom: -20px;
+}
 
-  .CodeMirror-ruler {
-      @apply top-0 bottom-0;
-  }
+.CodeMirror-ruler {
+    @apply bottom-0 top-0;
+}
 
-
-  /* Light Theme
+/* Light Theme
   ========================================================================== */
-  .code-fieldtype .theme-light {
-
+.code-fieldtype .theme-light {
     .CodeMirror {
-        @apply border p-0
+        @apply border p-0;
     }
-  }
+}
 
-
-
-  /* Material Theme
+/* Material Theme
     ========================================================================== */
 
-  .cm-s-material.CodeMirror {
+.cm-s-material.CodeMirror {
     background: #263238;
     @apply dark:bg-dark-650;
-    color: #EEFFFF;
-  }
+    color: #eeffff;
+}
 
-  .cm-s-material .CodeMirror-gutters {
+.cm-s-material .CodeMirror-gutters {
     background: #263238;
     @apply dark:bg-dark-650;
-    color: #546E7A;
+    color: #546e7a;
     border: none;
-  }
+}
 
-  .cm-s-material .CodeMirror-guttermarker,
-  .cm-s-material .CodeMirror-guttermarker-subtle,
-  .cm-s-material .CodeMirror-linenumber {
-    color: #546E7A;
-  }
+.cm-s-material .CodeMirror-guttermarker,
+.cm-s-material .CodeMirror-guttermarker-subtle,
+.cm-s-material .CodeMirror-linenumber {
+    color: #546e7a;
+}
 
-  .cm-s-material .CodeMirror-cursor {
-    border-left: 1px solid #FFCC00;
-  }
+.cm-s-material .CodeMirror-cursor {
+    border-left: 1px solid #ffcc00;
+}
 
-  .cm-s-material div.CodeMirror-selected {
+.cm-s-material div.CodeMirror-selected {
     background: rgba(128, 203, 196, 0.2);
-  }
+}
 
-  .cm-s-material.CodeMirror-focused div.CodeMirror-selected {
+.cm-s-material.CodeMirror-focused div.CodeMirror-selected {
     background: rgba(128, 203, 196, 0.2);
-  }
+}
 
-  .cm-s-material .CodeMirror-line::selection,
-  .cm-s-material .CodeMirror-line>span::selection,
-  .cm-s-material .CodeMirror-line>span>span::selection {
+.cm-s-material .CodeMirror-line::selection,
+.cm-s-material .CodeMirror-line > span::selection,
+.cm-s-material .CodeMirror-line > span > span::selection {
     background: rgba(128, 203, 196, 0.2);
-  }
+}
 
-  .cm-s-material .CodeMirror-line::-moz-selection,
-  .cm-s-material .CodeMirror-line>span::-moz-selection,
-  .cm-s-material .CodeMirror-line>span>span::-moz-selection {
+.cm-s-material .CodeMirror-line::-moz-selection,
+.cm-s-material .CodeMirror-line > span::-moz-selection,
+.cm-s-material .CodeMirror-line > span > span::-moz-selection {
     background: rgba(128, 203, 196, 0.2);
-  }
+}
 
-  .cm-s-material .CodeMirror-activeline-background {
+.cm-s-material .CodeMirror-activeline-background {
     background: rgba(0, 0, 0, 0.5);
-  }
+}
 
-  .cm-s-material .cm-keyword {
-    color: #C792EA;
-  }
+.cm-s-material .cm-keyword {
+    color: #c792ea;
+}
 
-  .cm-s-material .cm-operator {
-    color: #89DDFF;
-  }
+.cm-s-material .cm-operator {
+    color: #89ddff;
+}
 
-  .cm-s-material .cm-variable-2 {
-    color: #EEFFFF;
-  }
+.cm-s-material .cm-variable-2 {
+    color: #eeffff;
+}
 
-  .cm-s-material .cm-variable-3,
-  .cm-s-material .cm-type {
+.cm-s-material .cm-variable-3,
+.cm-s-material .cm-type {
     color: #f07178;
-  }
+}
 
-  .cm-s-material .cm-builtin {
-    color: #FFCB6B;
-  }
+.cm-s-material .cm-builtin {
+    color: #ffcb6b;
+}
 
-  .cm-s-material .cm-atom {
-    color: #F78C6C;
-  }
+.cm-s-material .cm-atom {
+    color: #f78c6c;
+}
 
-  .cm-s-material .cm-number {
-    color: #FF5370;
-  }
+.cm-s-material .cm-number {
+    color: #ff5370;
+}
 
-  .cm-s-material .cm-def {
-    color: #82AAFF;
-  }
+.cm-s-material .cm-def {
+    color: #82aaff;
+}
 
-  .cm-s-material .cm-string {
-    color: #C3E88D;
-  }
+.cm-s-material .cm-string {
+    color: #c3e88d;
+}
 
-  .cm-s-material .cm-string-2 {
+.cm-s-material .cm-string-2 {
     color: #f07178;
-  }
+}
 
-  .cm-s-material .cm-comment {
-    color: #546E7A;
-  }
+.cm-s-material .cm-comment {
+    color: #546e7a;
+}
 
-  .cm-s-material .cm-variable {
+.cm-s-material .cm-variable {
     color: #f07178;
-  }
-
-  .cm-s-material .cm-tag {
-    color: #FF5370;
-  }
+}
 
-  .cm-s-material .cm-meta {
-    color: #FFCB6B;
-  }
+.cm-s-material .cm-tag {
+    color: #ff5370;
+}
 
-  .cm-s-material .cm-attribute {
-    color: #C792EA;
-  }
+.cm-s-material .cm-meta {
+    color: #ffcb6b;
+}
 
-  .cm-s-material .cm-property {
-    color: #C792EA;
-  }
+.cm-s-material .cm-attribute {
+    color: #c792ea;
+}
 
-  .cm-s-material .cm-qualifier {
-    color: #DECB6B;
-  }
+.cm-s-material .cm-property {
+    color: #c792ea;
+}
 
-  .cm-s-material .cm-variable-3,
-  .cm-s-material .cm-type {
-    color: #DECB6B;
-  }
+.cm-s-material .cm-qualifier {
+    color: #decb6b;
+}
 
+.cm-s-material .cm-variable-3,
+.cm-s-material .cm-type {
+    color: #decb6b;
+}
 
-  .cm-s-material .cm-error {
-    color: rgba(255, 255, 255, 1.0);
-    background-color: #FF5370;
-  }
+.cm-s-material .cm-error {
+    color: rgba(255, 255, 255, 1);
+    background-color: #ff5370;
+}
 
-  .cm-s-material .CodeMirror-matchingbracket {
+.cm-s-material .CodeMirror-matchingbracket {
     text-decoration: underline;
     color: white !important;
-  }
+}
diff --git a/resources/css/vendors/vue-select.css b/resources/css/vendors/vue-select.css
index 0a39ea9862..00d3fc7f67 100644
--- a/resources/css/vendors/vue-select.css
+++ b/resources/css/vendors/vue-select.css
@@ -1,5 +1,5 @@
 .v-select {
-	@apply rounded min-w-0 relative font-sans;
+    @apply relative min-w-0 rounded font-sans;
 
     [dir='rtl'] & {
         direction: rtl;
@@ -8,12 +8,12 @@
 
 .vs__fade-enter-active,
 .vs__fade-leave-active {
-	/* transition: opacity .15s cubic-bezier(1, .5, .8, 1) */
+    /* transition: opacity .15s cubic-bezier(1, .5, .8, 1) */
 }
 
 .vs__fade-enter,
 .vs__fade-leave-to {
-	opacity: 0
+    opacity: 0;
 }
 
 .vs--disabled .vs__clear,
@@ -21,45 +21,46 @@
 .vs--disabled .vs__open-indicator,
 .vs--disabled .vs__search,
 .vs--disabled .vs__selected {
-	cursor: not-allowed !important;
+    cursor: not-allowed !important;
 }
 
 .vs--disabled .vs__dropdown-toggle {
-	@apply bg-gray-200 dark:bg-dark-550;
+    @apply bg-gray-200 dark:bg-dark-550;
 }
 
-.v-select[dir=rtl] .vs__actions {
-	padding: 0 3px 0 6px
+.v-select[dir='rtl'] .vs__actions {
+    padding: 0 3px 0 6px;
 }
 
-.v-select[dir=rtl] .vs__clear {
-	margin-left: 6px;
-	margin-right: 0
+.v-select[dir='rtl'] .vs__clear {
+    margin-left: 6px;
+    margin-right: 0;
 }
 
-.v-select[dir=rtl] .vs__deselect {
-	margin-left: 0;
-	margin-right: 2px
+.v-select[dir='rtl'] .vs__deselect {
+    margin-left: 0;
+    margin-right: 2px;
 }
 
-.v-select[dir=rtl] .vs__dropdown-menu {
-	text-align: right
+.v-select[dir='rtl'] .vs__dropdown-menu {
+    text-align: right;
 }
 
 .vs__dropdown-toggle {
-	@apply appearance-none text-gray-800  w-full p-0 rounded flex items-center bg-gray-100 shadow-inner border border-gray-500;
-    @apply dark:text-dark-150 dark:bg-dark-650 dark:border-dark-900 dark:shadow-inner-dark;
+    @apply flex w-full appearance-none items-center rounded border border-gray-500 bg-gray-100 p-0 text-gray-800 shadow-inner;
+    @apply dark:border-dark-900 dark:bg-dark-650 dark:text-dark-150 dark:shadow-inner-dark;
     height: 2.375rem;
-    transition: border-color .15s ease-in-out,
-                box-shadow .15s ease-in-out;
+    transition:
+        border-color 0.15s ease-in-out,
+        box-shadow 0.15s ease-in-out;
 
     &:focus-within {
         @apply ring-2;
     }
 
-	.vs--disabled & {
-		@apply bg-gray-200;
-	}
+    .vs--disabled & {
+        @apply bg-gray-200;
+    }
 }
 
 .vs__selected-options {
@@ -71,22 +72,23 @@
 }
 
 .v-select .vs__selected-options {
-	@apply appearance-none text-gray-800 dark:text-dark-150 text-sm;
-    @apply flex basis-1 grow rounded-s relative h-full py-1 rtl:pr-2 ltr:pl-2 leading-normal;
-	width: calc(100% - 32px);
+    @apply appearance-none text-sm text-gray-800 dark:text-dark-150;
+    @apply relative flex h-full grow basis-1 rounded-s py-1 leading-normal ltr:pl-2 rtl:pr-2;
+    width: calc(100% - 32px);
 
-    transition: border-color .15s ease-in-out,
-				box-shadow .15s ease-in-out;
+    transition:
+        border-color 0.15s ease-in-out,
+        box-shadow 0.15s ease-in-out;
 }
 
 .vs--single .vs__selected-options {
-	padding: 8px 12px !important;
+    padding: 8px 12px !important;
 }
 
 .vs--single.vs--unsearchable .vs__selected-options {
-	@apply clickable;
-    @apply flex flex-1 rounded-s relative h-full border-0;
-	width: calc(100% - 34px);
+    @apply clickable;
+    @apply relative flex h-full flex-1 rounded-s border-0;
+    width: calc(100% - 34px);
 }
 
 .vs__actions {
@@ -95,54 +97,56 @@
 }
 
 .vs--searchable .vs__dropdown-toggle {
-	cursor: text
+    cursor: text;
 }
 
 .vs--unsearchable .vs__dropdown-toggle {
-	cursor: pointer
+    cursor: pointer;
 }
 
 .vs__open-indicator {
-	@apply clickable;
-    @apply flex items-center rounded-e px-2 text-sm shrink-0 h-full border-e-0 bg-clip-padding dark:border-dark-800;
-	/* height: 2.375rem; */
+    @apply clickable;
+    @apply flex h-full shrink-0 items-center rounded-e border-e-0 bg-clip-padding px-2 text-sm dark:border-dark-800;
+    /* height: 2.375rem; */
 }
 
 .vs__open-indicator svg {
-	@apply flex items-center text-gray-900 dark:text-dark-100 relative w-4 h-4;
-	transform: translateY(1px) scale(1);
-	transition: -webkit-transform .15s cubic-bezier(1, -.115, .975, .855);
-	transition: transform .15s cubic-bezier(1, -.115, .975, .855);
-	transition: transform .15s cubic-bezier(1, -.115, .975, .855), -webkit-transform .15s cubic-bezier(1, -.115, .975, .855);
-	transition-timing-function: cubic-bezier(1, -.115, .975, .855)
+    @apply relative flex h-4 w-4 items-center text-gray-900 dark:text-dark-100;
+    transform: translateY(1px) scale(1);
+    transition: -webkit-transform 0.15s cubic-bezier(1, -0.115, 0.975, 0.855);
+    transition: transform 0.15s cubic-bezier(1, -0.115, 0.975, 0.855);
+    transition:
+        transform 0.15s cubic-bezier(1, -0.115, 0.975, 0.855),
+        -webkit-transform 0.15s cubic-bezier(1, -0.115, 0.975, 0.855);
+    transition-timing-function: cubic-bezier(1, -0.115, 0.975, 0.855);
 }
 
 .vs--open .vs__open-indicator svg {
-	-webkit-transform: rotate(180deg) scale(1);
-	transform: rotate(180deg) scale(1) translateY(0px);
+    -webkit-transform: rotate(180deg) scale(1);
+    transform: rotate(180deg) scale(1) translateY(0px);
 }
 
 .vs--loading .vs__open-indicator {
-	opacity: 0
+    opacity: 0;
 }
 
 .vs__clear {
-	@apply text-gray-900 dark:text-dark-100 rtl:pl-2 ltr:pr-2 rtl:pr-px ltr:pl-px rtl:@xs:pr-2 ltr:@xs:pl-2 cursor-pointer text-base bg-transparent shadow-none;
-	&:hover {
-		@apply text-blue;
-	}
+    @apply cursor-pointer bg-transparent text-base text-gray-900 shadow-none dark:text-dark-100 ltr:pl-px ltr:pr-2 ltr:@xs:pl-2 rtl:pl-2 rtl:pr-px rtl:@xs:pr-2;
+    &:hover {
+        @apply text-blue;
+    }
 }
 
 .vs__dropdown-menu {
-	@apply block absolute z-top m-0 w-full;
-	@apply bg-white dark:bg-dark-550 flex flex-col shadow-popover dark:shadow-dark-popover block p-4 rounded-md rtl:text-right ltr:text-left;
-	top: 46px;
-	padding: 0;
-	max-height: 350px;
-	min-width: 160px;
-	overflow-y: auto;
-	@apply ltr:text-left rtl:text-right;
-	list-style: none;
+    @apply absolute z-top m-0 block w-full;
+    @apply block flex flex-col rounded-md bg-white p-4 shadow-popover dark:bg-dark-550 dark:shadow-dark-popover ltr:text-left rtl:text-right;
+    top: 46px;
+    padding: 0;
+    max-height: 350px;
+    min-width: 160px;
+    overflow-y: auto;
+    @apply ltr:text-left rtl:text-right;
+    list-style: none;
 
     .v-select & {
         @apply ltr:left-0 rtl:right-0;
@@ -150,12 +154,12 @@
 }
 
 .vs__no-options {
-	text-align: center
+    text-align: center;
 }
 
 .vs__dropdown-option {
-    @apply block text-sm text-gray-800 dark:text-dark-100 cursor-pointer;
-	padding: 6px 12px;
+    @apply block cursor-pointer text-sm text-gray-800 dark:text-dark-100;
+    padding: 6px 12px;
 }
 
 .vs__dropdown-option--highlight {
@@ -163,57 +167,61 @@
 }
 
 .vs__dropdown-option--selected {
-	opacity: .25;
-	cursor: text;
+    opacity: 0.25;
+    cursor: text;
 }
 
 .v-select:not(.vs--single) .vs__selected {
-	@apply clickable;
-	@apply flex items-center text-sm rounded py-0 px-2 rtl:ml-2 ltr:mr-2;
+    @apply clickable;
+    @apply flex items-center rounded px-2 py-0 text-sm ltr:mr-2 rtl:ml-2;
 
-    &.sortable-item { @apply !cursor-grab; }
+    &.sortable-item {
+        @apply !cursor-grab;
+    }
 
     &.invalid {
-        @apply border-red-300 dark:border-dark-red bg-red-100 dark:bg-red-400 text-red-500 dark:text-red-950;
+        @apply border-red-300 bg-red-100 text-red-500 dark:border-dark-red dark:bg-red-400 dark:text-red-950;
         background-image: none;
 
-        .vs__deselect { @apply text-red-500 dark:text-red-950 }
+        .vs__deselect {
+            @apply text-red-500 dark:text-red-950;
+        }
     }
 }
 
 .vs__deselect {
-	@apply flex items-center cursor-pointer text-gray-600 dark:text-dark-175 rtl:mr-1 ltr:ml-1 p-0 outline-none;
+    @apply flex cursor-pointer items-center p-0 text-gray-600 outline-none dark:text-dark-175 ltr:ml-1 rtl:mr-1;
 
-	&:hover {
-		@apply text-gray-700 dark:text-dark-100;
-	}
+    &:hover {
+        @apply text-gray-700 dark:text-dark-100;
+    }
 
-	&:focus {
-		@apply outline-none;
-	}
+    &:focus {
+        @apply outline-none;
+    }
 
-	span {
-        @apply text-md shrink-0 font-normal;
-	}
+    span {
+        @apply shrink-0 text-md font-normal;
+    }
 }
 
 .vs--single .vs__selected {
-	overflow: hidden;
+    overflow: hidden;
     display: -webkit-box;
     -webkit-box-orient: vertical;
     -webkit-line-clamp: 1;
-	background-color: transparent;
-	border-color: transparent;
-	padding: 0;
-	margin: 0;
+    background-color: transparent;
+    border-color: transparent;
+    padding: 0;
+    margin: 0;
 }
 
 .vs--single.vs--open .vs__selected {
-	opacity: .75;
+    opacity: 0.75;
 }
 
 .vs--single.vs--searching .vs__selected {
-	display: none
+    display: none;
 }
 
 .vs__search::-ms-clear,
@@ -221,15 +229,15 @@
 .vs__search::-webkit-search-decoration,
 .vs__search::-webkit-search-results-button,
 .vs__search::-webkit-search-results-decoration {
-	display: none
+    display: none;
 }
 
 .vs__search,
 .vs__search:focus {
-	@apply appearance-none text-sm text-gray-800 dark:text-dark-150 rtl:pl-2 ltr:pr-2 border-transparent outline-none m-0 p-0 bg-transparent max-w-full;
-	line-height: 1.4;
-	border-left: none;
-	box-shadow: none;
+    @apply m-0 max-w-full appearance-none border-transparent bg-transparent p-0 text-sm text-gray-800 outline-none dark:text-dark-150 ltr:pr-2 rtl:pl-2;
+    line-height: 1.4;
+    border-left: none;
+    box-shadow: none;
     flex-grow: 1;
     width: 0;
 }
@@ -238,66 +246,66 @@
 }
 
 .vs__search::placeholder {
-	@apply text-gray-600;
+    @apply text-gray-600;
 }
 
 .vs--unsearchable .vs__search {
-	opacity: 1
+    opacity: 1;
 }
 
 .vs--unsearchable .vs__search:hover {
-	cursor: pointer
+    cursor: pointer;
 }
 
 .vs--single.vs--searching:not(.vs--open):not(.vs--loading) .vs__search {
-	opacity: .2
+    opacity: 0.2;
 }
 
 .vs__spinner {
-	align-self: center;
-	opacity: 0;
-	font-size: 5px;
-	text-indent: -9999em;
-	overflow: hidden;
-	border: .9em solid hsla(0, 0%, 39.2%, .1);
-	border-left-color: rgba(60, 60, 60, .45);
-	-webkit-transform: translateZ(0);
-	transform: translateZ(0);
-	-webkit-animation: vSelectSpinner 1.1s linear infinite;
-	animation: vSelectSpinner 1.1s linear infinite;
-	transition: opacity .1s
+    align-self: center;
+    opacity: 0;
+    font-size: 5px;
+    text-indent: -9999em;
+    overflow: hidden;
+    border: 0.9em solid hsla(0, 0%, 39.2%, 0.1);
+    border-left-color: rgba(60, 60, 60, 0.45);
+    -webkit-transform: translateZ(0);
+    transform: translateZ(0);
+    -webkit-animation: vSelectSpinner 1.1s linear infinite;
+    animation: vSelectSpinner 1.1s linear infinite;
+    transition: opacity 0.1s;
 }
 
 .vs__spinner,
 .vs__spinner:after {
-	border-radius: 50%;
-	width: 5em;
-	height: 5em
+    border-radius: 50%;
+    width: 5em;
+    height: 5em;
 }
 
 .vs--loading .vs__spinner {
-	opacity: 1
+    opacity: 1;
 }
 
 /* Animation */
 @-webkit-keyframes vSelectSpinner {
-	0% {
-		-webkit-transform: rotate(0deg);
-		transform: rotate(0deg)
-	}
-	to {
-		-webkit-transform: rotate(1turn);
-		transform: rotate(1turn)
-	}
+    0% {
+        -webkit-transform: rotate(0deg);
+        transform: rotate(0deg);
+    }
+    to {
+        -webkit-transform: rotate(1turn);
+        transform: rotate(1turn);
+    }
 }
 
 @keyframes vSelectSpinner {
-	0% {
-		-webkit-transform: rotate(0deg);
-		transform: rotate(0deg)
-	}
-	to {
-		-webkit-transform: rotate(1turn);
-		transform: rotate(1turn)
-	}
+    0% {
+        -webkit-transform: rotate(0deg);
+        transform: rotate(0deg);
+    }
+    to {
+        -webkit-transform: rotate(1turn);
+        transform: rotate(1turn);
+    }
 }
diff --git a/resources/js/bootstrap/App.vue b/resources/js/bootstrap/App.vue
index ffdeec08a0..d88666875d 100644
--- a/resources/js/bootstrap/App.vue
+++ b/resources/js/bootstrap/App.vue
@@ -47,7 +47,6 @@ import PortalTargets from '../components/portals/PortalTargets.vue';
 import SitesEditForm from '../components/sites/EditForm.vue';
 
 export default {
-
     components: {
         GlobalSearch,
         GlobalSiteSelector,
@@ -105,11 +104,10 @@ export default {
             appendedComponents: Statamic.$components.components,
             isLicensingBannerSnoozed: localStorage.getItem(`statamic.snooze_license_banner`) > new Date().valueOf(),
             copyToClipboardModalUrl: null,
-        }
+        };
     },
 
     computed: {
-
         version() {
             return Statamic.$config.get('version');
         },
@@ -120,14 +118,13 @@ export default {
 
         wrapperClass() {
             return this.$config.get('wrapperClass', 'max-w-xl');
-        }
-
+        },
     },
 
     mounted() {
         this.bindWindowResizeListener();
 
-        this.$keys.bind(['command+\\'], e => {
+        this.$keys.bind(['command+\\'], (e) => {
             e.preventDefault();
             this.toggleNav();
         });
@@ -159,11 +156,9 @@ export default {
         });
 
         Statamic.$callbacks.add('bustAndReloadImageCaches', function (urls) {
-            urls.forEach(async url => {
+            urls.forEach(async (url) => {
                 await fetch(url, { cache: 'reload', mode: 'no-cors' });
-                document.body
-                    .querySelectorAll(`img[src='${url}']`)
-                    .forEach(img => img.src = url);
+                document.body.querySelectorAll(`img[src='${url}']`).forEach((img) => (img.src = url));
             });
         });
 
@@ -171,7 +166,6 @@ export default {
     },
 
     methods: {
-
         bindWindowResizeListener() {
             window.addEventListener('resize', () => {
                 this.$store.commit('statamic/windowWidth', document.documentElement.clientWidth);
@@ -180,12 +174,12 @@ export default {
         },
 
         toggleNav() {
-            this.navOpen = ! this.navOpen;
+            this.navOpen = !this.navOpen;
             localStorage.setItem('statamic.nav', this.navOpen ? 'open' : 'closed');
         },
 
         toggleMobileNav() {
-            this.mobileNavOpen = ! this.mobileNavOpen;
+            this.mobileNavOpen = !this.mobileNavOpen;
         },
 
         hideBanner() {
@@ -227,12 +221,11 @@ export default {
                     MM: __('moment.relativeTime.MM'),
                     y: __('moment.relativeTime.y'),
                     yy: __('moment.relativeTime.yy'),
-                }
+                },
             };
             window.moment.updateLocale(locale, spec);
             this.$moment.updateLocale(locale, spec);
-        }
-    }
-
-}
+        },
+    },
+};
 </script>
diff --git a/resources/js/bootstrap/components.js b/resources/js/bootstrap/components.js
index fe0249cd59..d2d5dbadeb 100644
--- a/resources/js/bootstrap/components.js
+++ b/resources/js/bootstrap/components.js
@@ -147,4 +147,4 @@ export default function registerGlobalComponents(app) {
     app.component('stack-test', StackTest);
 
     app.component('blueprint-resetter', BlueprintResetter);
-};
+}
diff --git a/resources/js/bootstrap/fieldtypes.js b/resources/js/bootstrap/fieldtypes.js
index cfb9113385..08d24a6305 100644
--- a/resources/js/bootstrap/fieldtypes.js
+++ b/resources/js/bootstrap/fieldtypes.js
@@ -1,5 +1,5 @@
-import RevealerFieldtype from '../components/fieldtypes/RevealerFieldtype.vue'
-import TemplateFieldtype from '../components/fieldtypes/TemplateFieldtype.vue'
+import RevealerFieldtype from '../components/fieldtypes/RevealerFieldtype.vue';
+import TemplateFieldtype from '../components/fieldtypes/TemplateFieldtype.vue';
 import Select from '../components/inputs/Select.vue';
 import Text from '../components/inputs/Text.vue';
 import Textarea from '../components/inputs/Textarea.vue';
@@ -22,9 +22,9 @@ import Routes from '../components/collections/Routes.vue';
 import TitleFormats from '../components/collections/TitleFormats.vue';
 import ColorFieldtype from '../components/fieldtypes/ColorFieldtype.vue';
 import DateFieldtype from '../components/fieldtypes/DateFieldtype.vue';
-import DictionaryFieldtype from "../components/fieldtypes/DictionaryFieldtype.vue";
-import DictionaryIndexFieldtype from "../components/fieldtypes/DictionaryIndexFieldtype.vue";
-import DictionaryFields from "../components/fieldtypes/DictionaryFields.vue";
+import DictionaryFieldtype from '../components/fieldtypes/DictionaryFieldtype.vue';
+import DictionaryIndexFieldtype from '../components/fieldtypes/DictionaryIndexFieldtype.vue';
+import DictionaryFields from '../components/fieldtypes/DictionaryFields.vue';
 import FieldDisplayFieldtype from '../components/fieldtypes/FieldDisplayFieldtype.vue';
 import FieldsFieldtype from '../components/fieldtypes/grid/FieldsFieldtype.vue';
 import FilesFieldtype from '../components/fieldtypes/FilesFieldtype.vue';
@@ -133,4 +133,4 @@ export default function registerFieldtypes(app) {
     app.component('set-field', SetField);
     app.component('revealer-fieldtype', RevealerFieldtype);
     app.component('template-fieldtype', TemplateFieldtype);
-};
+}
diff --git a/resources/js/bootstrap/globals.js b/resources/js/bootstrap/globals.js
index aca3362eb7..832ce45c3b 100644
--- a/resources/js/bootstrap/globals.js
+++ b/resources/js/bootstrap/globals.js
@@ -6,19 +6,19 @@ import PreviewHtml from '../components/fieldtypes/replicator/PreviewHtml';
 export function cp_url(url) {
     url = Statamic.$config.get('cpUrl') + '/' + url;
     return tidy_url(url);
-};
+}
 
 export function docs_url(url) {
     return tidy_url('https://statamic.dev/' + url);
-};
+}
 
 export function resource_url(url) {
     url = Statamic.$config.get('resourceUrl') + '/' + url;
     return tidy_url(url);
-};
+}
 
 export function tidy_url(url) {
-    return url.replace(/([^:])(\/\/+)/g, '$1/')
+    return url.replace(/([^:])(\/\/+)/g, '$1/');
 }
 
 export function relative_url(url) {
@@ -27,14 +27,14 @@ export function relative_url(url) {
 
 export function dd(args) {
     console.log(args);
-};
+}
 
-export function data_get(obj, path, fallback=null) {
+export function data_get(obj, path, fallback = null) {
     // Source: https://stackoverflow.com/a/22129960
     var properties = Array.isArray(path) ? path : path.split('.');
     var value = properties.reduce((prev, curr) => prev && prev[curr], obj);
     return value !== undefined ? value : fallback;
-};
+}
 
 export function data_set(obj, path, value) {
     // Source: https://stackoverflow.com/a/20240290
@@ -42,11 +42,11 @@ export function data_set(obj, path, value) {
     while (parts.length - 1) {
         var key = parts.shift();
         var shouldBeArray = parts.length ? new RegExp('^[0-9]+$').test(parts[0]) : false;
-        if (! (key in obj)) obj[key] = shouldBeArray ? [] : {};
+        if (!(key in obj)) obj[key] = shouldBeArray ? [] : {};
         obj = obj[key];
     }
     obj[parts[0]] = value;
-};
+}
 
 export function clone(value) {
     if (value === undefined) return undefined;
@@ -61,7 +61,7 @@ export function tailwind_width_class(width) {
         50: 'w-full @lg:w-1/2',
         66: 'w-full @lg:w-2/3',
         75: 'w-full @lg:w-3/4',
-        100: 'w-full'
+        100: 'w-full',
     };
 
     return `${widths[width] || 'w-full'}`;
@@ -69,7 +69,7 @@ export function tailwind_width_class(width) {
 
 export function markdown(value) {
     return marked(value);
-};
+}
 
 export function __(string, replacements) {
     return translate(string, replacements);
@@ -80,8 +80,9 @@ export function __n(string, number, replacements) {
 
 export function utf8btoa(stringToEncode) {
     // first we convert it to utf-8
-    const utf8String = encodeURIComponent(stringToEncode)
-      .replace(/%([0-9A-F]{2})/g, (_, code) => String.fromCharCode(`0x${code}`));
+    const utf8String = encodeURIComponent(stringToEncode).replace(/%([0-9A-F]{2})/g, (_, code) =>
+        String.fromCharCode(`0x${code}`),
+    );
 
     // return base64 encoded string
     return btoa(utf8String);
@@ -92,22 +93,27 @@ export function utf8atob(stringToDecode) {
     const utf8String = atob(stringToDecode);
 
     // Convert the UTF-8 byte representation back to a regular string
-    return decodeURIComponent(utf8String.split('')
-        .map(c => '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2)).join(''));
+    return decodeURIComponent(
+        utf8String
+            .split('')
+            .map((c) => '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2))
+            .join(''),
+    );
 }
 
 export function uniqid() {
     return uid();
 }
 
-export function truncate(string, length, ending='...') {
+export function truncate(string, length, ending = '...') {
     if (string.length <= length) return string;
 
     return string.substring(0, length - ending.length) + ending;
 }
 
 export function escapeHtml(string) {
-     return string.replaceAll('&', '&amp;')
+    return string
+        .replaceAll('&', '&amp;')
         .replaceAll('<', '&lt;')
         .replaceAll('>', '&gt;')
         .replaceAll('"', '&quot;')
diff --git a/resources/js/bootstrap/statamic.js b/resources/js/bootstrap/statamic.js
index bbf3ad71f8..d54201a368 100644
--- a/resources/js/bootstrap/statamic.js
+++ b/resources/js/bootstrap/statamic.js
@@ -22,7 +22,7 @@ import '@hoppscotch/vue-toasted/style.css';
 import 'vue-final-modal/style.css';
 import PortalVue from 'portal-vue';
 import Keys from '../components/keys/Keys';
-import FieldActions from "../components/field-actions/FieldActions.js";
+import FieldActions from '../components/field-actions/FieldActions.js';
 import Callbacks from '../components/Callbacks';
 import Slugs from '../components/slugs/Manager';
 import Portals from '../components/portals/Portals';
@@ -42,7 +42,6 @@ let bootedCallbacks = [];
 let components;
 
 export default {
-
     booting(callback) {
         bootingCallbacks.push(callback);
     },
@@ -138,11 +137,11 @@ export default {
                 text: '×',
                 onClick: (e, toastObject) => {
                     toastObject.goAway(0);
-                }
-            }
-        })
+                },
+            },
+        });
 
-        const portals = markRaw(new Portals);
+        const portals = markRaw(new Portals());
 
         components = new Components(this.$app);
 
@@ -153,20 +152,20 @@ export default {
             $preferences: new Preferences(store),
             $progress: useProgressBar(),
             $config: this.$config,
-            $keys: new Keys,
-            $fieldActions: new FieldActions,
-            $conditions: new FieldConditions,
-            $callbacks: new Callbacks,
+            $keys: new Keys(),
+            $fieldActions: new FieldActions(),
+            $conditions: new FieldConditions(),
+            $callbacks: new Callbacks(),
             $dirty: useDirtyState(),
-            $slug: new Slugs,
+            $slug: new Slugs(),
             $portals: portals,
             $stacks: new Stacks(portals),
-            $hooks: new Hooks,
+            $hooks: new Hooks(),
             $toast: new Toasts(useToasted()),
-            $bard: new Bard,
-            $reveal: new Reveal,
-            $echo: new Echo,
-            $permissions: new Permission,
+            $bard: new Bard(),
+            $reveal: new Reveal(),
+            $echo: new Echo(),
+            $permissions: new Permission(),
         });
 
         Object.assign(this.$app.config.globalProperties, {
@@ -191,14 +190,14 @@ export default {
                 return permissions.includes('super') || permissions.includes(permission);
             },
             $wait(ms) {
-                return new Promise(resolve => {
+                return new Promise((resolve) => {
                     setTimeout(resolve, ms);
                 });
-            }
+            },
         });
 
         this.$app.directive('elastic', {
-            mounted: (el) => autosize(el)
+            mounted: (el) => autosize(el),
         });
 
         registerGlobalComponents(this.$app);
@@ -216,13 +215,12 @@ export default {
         axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
         axios.defaults.headers.common['X-CSRF-TOKEN'] = Statamic.$config.get('csrfToken');
 
-        bootingCallbacks.forEach(callback => callback(this));
+        bootingCallbacks.forEach((callback) => callback(this));
         bootingCallbacks = [];
 
         this.$app.mount('#statamic');
 
-        bootedCallbacks.forEach(callback => callback(this));
+        bootedCallbacks.forEach((callback) => callback(this));
         bootedCallbacks = [];
-    }
-
-}
+    },
+};
diff --git a/resources/js/bootstrap/vue-select/OpenChevron.vue b/resources/js/bootstrap/vue-select/OpenChevron.vue
index 262b3f743e..d0a68b6ee5 100644
--- a/resources/js/bootstrap/vue-select/OpenChevron.vue
+++ b/resources/js/bootstrap/vue-select/OpenChevron.vue
@@ -1,3 +1,5 @@
 <template>
-    <svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 20 20"><path fill="currentColor" d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"/></svg>
+    <svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 20 20">
+        <path fill="currentColor" d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z" />
+    </svg>
 </template>
diff --git a/resources/js/bootstrap/vue-select/vue-select.js b/resources/js/bootstrap/vue-select/vue-select.js
index 505e7a236e..7dbd97367b 100644
--- a/resources/js/bootstrap/vue-select/vue-select.js
+++ b/resources/js/bootstrap/vue-select/vue-select.js
@@ -9,14 +9,15 @@ export default function registerVueSelect(app) {
             render: () => h('span', __('×')),
         },
         OpenIndicator: {
-            render: () => h(
-                'span',
-                {
-                    class: { 'toggle': true },
-                },
-                h(OpenChevron)
-            )
-        }
+            render: () =>
+                h(
+                    'span',
+                    {
+                        class: { toggle: true },
+                    },
+                    h(OpenChevron),
+                ),
+        },
     });
 
     app.component('v-select', VueSelect);
diff --git a/resources/js/components/AddonDetails.vue b/resources/js/components/AddonDetails.vue
index 6cf559be52..eea055f246 100644
--- a/resources/js/components/AddonDetails.vue
+++ b/resources/js/components/AddonDetails.vue
@@ -1,31 +1,35 @@
 <template>
     <div>
-        <div class="flex items-center mb-6">
+        <div class="mb-6 flex items-center">
             <h1 class="flex-1" v-text="addon.name" />
             <a :href="addon.url" target="_blank" class="btn">
-                <svg-icon name="light/external-link" class="w-3 h-3 rtl:ml-2 ltr:mr-2 shrink-0" />
+                <svg-icon name="light/external-link" class="h-3 w-3 shrink-0 ltr:mr-2 rtl:ml-2" />
                 {{ __('View on Marketplace') }}
             </a>
         </div>
-        <div class="flex flex-col-reverse xl:grid xl:grid-cols-3 space-y-6 xl:space-y-0 gap-6">
+        <div class="flex flex-col-reverse gap-6 space-y-6 xl:grid xl:grid-cols-3 xl:space-y-0">
             <div class="lg:col-span-2">
                 <div class="card prose max-w-full p-6" v-html="description" />
             </div>
-            <div class="xl:col-span-1 flex flex-col space-y-6">
+            <div class="flex flex-col space-y-6 xl:col-span-1">
                 <div class="card flex flex-col space-y-6 p-6">
                     <div class="flex-1 text-lg">
-                        <div class="little-heading p-0 mb-2 text-gray-700" v-text="__('Seller')" />
+                        <div class="little-heading mb-2 p-0 text-gray-700" v-text="__('Seller')" />
                         <a :href="addon.seller.website" target="_blank" class="relative flex items-center">
-                            <img :src="addon.seller.avatar" :alt="addon.seller.name" class="rounded-full w-6 rtl:ml-2 ltr:mr-2">
+                            <img
+                                :src="addon.seller.avatar"
+                                :alt="addon.seller.name"
+                                class="w-6 rounded-full ltr:mr-2 rtl:ml-2"
+                            />
                             <span class="font-bold">{{ addon.seller.name }}</span>
                         </a>
                     </div>
                     <div class="flex-1 text-lg">
-                        <div class="little-heading p-0 mb-2 text-gray-700" v-text="__('Price')" />
+                        <div class="little-heading mb-2 p-0 text-gray-700" v-text="__('Price')" />
                         <div class="font-bold" v-text="priceRange" />
                     </div>
                     <div class="flex-1 text-lg" v-if="downloads">
-                        <div class="little-heading p-0 mb-2 text-gray-700" v-text="__('Downloads')" />
+                        <div class="little-heading mb-2 p-0 text-gray-700" v-text="__('Downloads')" />
                         <div class="font-bold">{{ downloads }}</div>
                     </div>
                 </div>
@@ -51,76 +55,78 @@
 <script>
 import AddonEditions from './addons/Editions.vue';
 
-    export default {
-        components: {
-            AddonEditions,
-        },
-
-        props: [
-            'addon',
-        ],
-
-        data() {
-            return {
-                waitingForRefresh: false,
-                modalOpen: false,
-                downloads: null,
-            }
-        },
+export default {
+    components: {
+        AddonEditions,
+    },
 
-        computed: {
-            package() {
-                return this.addon.package;
-            },
+    props: ['addon'],
 
-            description() {
-                return this.addon.description;
-            },
+    data() {
+        return {
+            waitingForRefresh: false,
+            modalOpen: false,
+            downloads: null,
+        };
+    },
 
-            priceRange() {
-                let [low, high] = this.addon.price_range;
-                low = low ? `$${low}` : __('Free');
-                high = high ? `$${high}` : __('Free');
-                return (low == high) ? low : `${low} - ${high}`;
-            },
+    computed: {
+        package() {
+            return this.addon.package;
+        },
 
-            link() {
-                return __('Learn more about :link', { link: `<a href="https://statamic.dev/addons" target="_blank">${__('Addons')}</a>`}) + '.';
-            },
+        description() {
+            return this.addon.description;
+        },
 
-            installCommand() {
-                switch (this.package) {
-                    case 'statamic/collaboration':
-                        return 'php please install:collaboration';
-                    case 'statamic/eloquent-driver':
-                        return 'php please install:eloquent-driver';
-                    case 'statamic/ssg':
-                        return 'php please install:ssg';
-                    default:
-                        return `composer require ${this.package}`;
-                }
-            },
+        priceRange() {
+            let [low, high] = this.addon.price_range;
+            low = low ? `$${low}` : __('Free');
+            high = high ? `$${high}` : __('Free');
+            return low == high ? low : `${low} - ${high}`;
         },
 
-        created() {
-            this.$events.$on('addon-refreshed', this.addonRefreshed);
-            this.getDownloadCount();
+        link() {
+            return (
+                __('Learn more about :link', {
+                    link: `<a href="https://statamic.dev/addons" target="_blank">${__('Addons')}</a>`,
+                }) + '.'
+            );
         },
 
-        unmounted() {
-            this.$events.$off('addon-refreshed', this.addonRefreshed);
+        installCommand() {
+            switch (this.package) {
+                case 'statamic/collaboration':
+                    return 'php please install:collaboration';
+                case 'statamic/eloquent-driver':
+                    return 'php please install:eloquent-driver';
+                case 'statamic/ssg':
+                    return 'php please install:ssg';
+                default:
+                    return `composer require ${this.package}`;
+            }
         },
+    },
+
+    created() {
+        this.$events.$on('addon-refreshed', this.addonRefreshed);
+        this.getDownloadCount();
+    },
 
-        methods: {
-            addonRefreshed() {
-                this.waitingForRefresh = false;
-            },
+    unmounted() {
+        this.$events.$off('addon-refreshed', this.addonRefreshed);
+    },
 
-            getDownloadCount() {
-                this.$axios.get(`https://packagist.org/packages/${this.addon.package}.json`).then(response => {
-                    this.downloads = response.data.package.downloads.total;
-                });
-            },
-        }
-    }
+    methods: {
+        addonRefreshed() {
+            this.waitingForRefresh = false;
+        },
+
+        getDownloadCount() {
+            this.$axios.get(`https://packagist.org/packages/${this.addon.package}.json`).then((response) => {
+                this.downloads = response.data.package.downloads.total;
+            });
+        },
+    },
+};
 </script>
diff --git a/resources/js/components/AddonList.vue b/resources/js/components/AddonList.vue
index a916f05860..138ab2a8e2 100644
--- a/resources/js/components/AddonList.vue
+++ b/resources/js/components/AddonList.vue
@@ -3,14 +3,14 @@
         <div class="breadcrumb flex" v-if="showingAddon">
             <button
                 @click="showingAddon = false"
-                class="flex-initial flex p-2 -m-2 items-center text-xs text-gray-700 dark:text-dark-175 hover:text-gray-900 dark:hover:text-dark-100"
+                class="-m-2 flex flex-initial items-center p-2 text-xs text-gray-700 hover:text-gray-900 dark:text-dark-175 dark:hover:text-dark-100"
             >
                 <svg-icon name="micro/chevron-right" class="h-6 w-4 rotate-180" />
                 <span v-text="__('Addons')" />
             </button>
         </div>
 
-        <div class="flex mb-6" v-if="!showingAddon">
+        <div class="mb-6 flex" v-if="!showingAddon">
             <h1 class="flex-1" v-text="__('Addons')" />
         </div>
 
@@ -19,18 +19,19 @@
         </div>
 
         <div v-if="initializing" class="card p-6 text-center">
-            <loading-graphic  />
+            <loading-graphic />
         </div>
 
         <data-list :rows="rows" v-if="!initializing && !showingAddon" v-slot="{ rows: addons }">
             <div class="">
                 <div class="card p-0">
-                    <div class="border-b dark:border-dark-900 px-4 text-sm">
+                    <div class="border-b px-4 text-sm dark:border-dark-900">
                         <button
                             class="data-list-filter-link"
                             :class="{ active: filter === 'all' }"
                             @click="filter = 'all'"
-                            v-text="__('All')" />
+                            v-text="__('All')"
+                        />
                         <button
                             class="data-list-filter-link"
                             :class="{ active: filter === 'installed' }"
@@ -42,26 +43,39 @@
                     </div>
 
                     <div class="p-2">
-                        <data-list-search
-                            ref="search"
-                            v-model="searchQuery" />
+                        <data-list-search ref="search" v-model="searchQuery" />
                     </div>
                 </div>
 
                 <div class="addon-grid my-8" :class="{ 'opacity-50': loading }">
-                    <div class="addon-card bg-white dark:bg-dark-600 text-gray-800 dark:text-dark-150 h-full shadow dark:shadow-dark rounded cursor-pointer relative" v-for="addon in addons" :key="addon.id" @click="showAddon(addon)">
-                        <span class="badge absolute top-0 rtl:right-0 ltr:left-0 mt-2 rtl:mr-2 ltr:ml-2" v-if="addon.installed">Installed</span>
-                        <div class="h-48 rounded-t bg-cover bg-center" :style="'background-image: url(\''+getCover(addon)+'\')'"></div>
-                        <div class="px-6 mb-4 relative text-center">
+                    <div
+                        class="addon-card relative h-full cursor-pointer rounded bg-white text-gray-800 shadow dark:bg-dark-600 dark:text-dark-150 dark:shadow-dark"
+                        v-for="addon in addons"
+                        :key="addon.id"
+                        @click="showAddon(addon)"
+                    >
+                        <span
+                            class="badge absolute top-0 mt-2 ltr:left-0 ltr:ml-2 rtl:right-0 rtl:mr-2"
+                            v-if="addon.installed"
+                            >Installed</span
+                        >
+                        <div
+                            class="h-48 rounded-t bg-cover bg-center"
+                            :style="'background-image: url(\'' + getCover(addon) + '\')'"
+                        ></div>
+                        <div class="relative mb-4 px-6 text-center">
                             <a :href="addon.seller.website" class="relative">
-                                <img :src="addon.seller.avatar" :alt="addon.seller.name" class="rounded-full h-14 w-14 bg-white dark:bg-dark-600 relative -mt-8 border-2 border-white dark:border-dark-600 inline">
+                                <img
+                                    :src="addon.seller.avatar"
+                                    :alt="addon.seller.name"
+                                    class="relative -mt-8 inline h-14 w-14 rounded-full border-2 border-white bg-white dark:border-dark-600 dark:bg-dark-600"
+                                />
                             </a>
-                            <div class="addon-card-title mb-2 text-lg font-bold text-center">{{ addon.name }}</div>
-                            <p class="text-gray dark:text-dark-175 mb-4" v-text="getPriceRange(addon)" />
+                            <div class="addon-card-title mb-2 text-center text-lg font-bold">{{ addon.name }}</div>
+                            <p class="mb-4 text-gray dark:text-dark-175" v-text="getPriceRange(addon)" />
                             <p v-text="addon.summary" class="text-sm"></p>
                         </div>
                     </div>
-
                 </div>
 
                 <data-list-pagination :resource-meta="meta" @page-selected="setPage"></data-list-pagination>
@@ -70,7 +84,7 @@
 
         <template v-if="unlisted.length && !showingAddon">
             <h6 class="mt-8">{{ __('Unlisted Addons') }}</h6>
-            <div class="card p-0 mt-2">
+            <div class="card mt-2 p-0">
                 <table class="data-table">
                     <tbody>
                         <tr v-for="addon in unlisted" :key="addon.package">
@@ -82,94 +96,88 @@
             </div>
         </template>
 
-        <addon-details
-            v-if="showingAddon"
-            :addon="showingAddon"
-            :cover="getCover(showingAddon)" />
+        <addon-details v-if="showingAddon" :addon="showingAddon" :cover="getCover(showingAddon)" />
     </div>
 </template>
 
 <style>
-    .addon-grid {
-        display: grid;
-        grid-gap: 32px;
-        grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
-        grid-auto-flow: dense;
-    }
+.addon-grid {
+    display: grid;
+    grid-gap: 32px;
+    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
+    grid-auto-flow: dense;
+}
 </style>
 
 <script>
-    export default {
-
-        props: [
-            'domain',
-            'endpoints',
-            'installCount',
-        ],
-
-        data() {
+export default {
+    props: ['domain', 'endpoints', 'installCount'],
+
+    data() {
+        return {
+            initializing: true,
+            loading: true,
+            rows: [],
+            meta: {},
+            searchQuery: '',
+            filter: 'all',
+            page: 1,
+            showingAddon: false,
+            error: false,
+            unlisted: [],
+        };
+    },
+
+    computed: {
+        params() {
             return {
-                initializing: true,
-                loading: true,
-                rows: [],
-                meta: {},
-                searchQuery: '',
-                filter: 'all',
-                page: 1,
-                showingAddon: false,
-                error: false,
-                unlisted: [],
-            }
+                page: this.page,
+                q: this.searchQuery,
+                installed: this.filter === 'installed' ? 1 : 0,
+            };
         },
 
-        computed: {
-            params() {
-                return {
-                    page: this.page,
-                    q: this.searchQuery,
-                    installed: this.filter === 'installed' ? 1 : 0,
-                };
-            },
-
-            loaded() {
-                return !this.loading && !this.error;
-            }
+        loaded() {
+            return !this.loading && !this.error;
         },
+    },
 
-        watch: {
-            page() {
-                this.getAddons();
-            },
+    watch: {
+        page() {
+            this.getAddons();
+        },
 
-            searchQuery() {
-                this.page = 1;
-                this.getAddons();
-            },
+        searchQuery() {
+            this.page = 1;
+            this.getAddons();
+        },
 
-            filter() {
-                this.page = 1;
-                this.getAddons();
-            },
+        filter() {
+            this.page = 1;
+            this.getAddons();
+        },
 
-            loading: {
-                immediate: true,
-                handler(loading) {
-                    this.$progress.loading('addon-list', loading);
-                }
+        loading: {
+            immediate: true,
+            handler(loading) {
+                this.$progress.loading('addon-list', loading);
             },
         },
+    },
 
-        created() {
-            this.rows = this.getAddons();
+    created() {
+        this.rows = this.getAddons();
 
-            this.$events.$on('composer-finished', this.getAddons);
-        },
+        this.$events.$on('composer-finished', this.getAddons);
+    },
 
-        methods: {
-            getAddons() {
-                this.loading = true;
+    methods: {
+        getAddons() {
+            this.loading = true;
 
-                this.$axios.get(cp_url('/api/addons'), {'params': this.params}).then(response => {
+            this.$axios
+                .get(cp_url('/api/addons'), { params: this.params })
+                .then((response) => {
                     this.loading = false;
                     this.initializing = false;
                     this.rows = response.data.data;
@@ -179,40 +187,41 @@
                     if (this.showingAddon) {
                         this.refreshShowingAddon();
                     }
-                }).catch(e => {
+                })
+                .catch((e) => {
                     this.loading = false;
                     this.error = true;
                     this.$toast.error(__('Something went wrong'));
-                })
-            },
+                });
+        },
 
-            setPage(page) {
-                this.page = page;
-            },
+        setPage(page) {
+            this.page = page;
+        },
 
-            refreshShowingAddon() {
-                this.showingAddon = _.findWhere(this.rows, { id: this.showingAddon.id });
+        refreshShowingAddon() {
+            this.showingAddon = _.findWhere(this.rows, { id: this.showingAddon.id });
 
-                this.$events.$emit('addon-refreshed');
-            },
+            this.$events.$emit('addon-refreshed');
+        },
 
-            getCover(addon) {
-                return addon.assets.length
-                    ? addon.assets[0].url
-                    : 'https://statamic.com/images/img/marketplace/placeholder-addon.png';
-            },
+        getCover(addon) {
+            return addon.assets.length
+                ? addon.assets[0].url
+                : 'https://statamic.com/images/img/marketplace/placeholder-addon.png';
+        },
 
-            getPriceRange(addon) {
-                let [low, high] = addon.price_range;
-                low = low ? `$${low}` : 'Free';
-                high = high ? `$${high}` : 'Free';
-                return (low == high) ? low : `${low} - ${high}`;
-            },
+        getPriceRange(addon) {
+            let [low, high] = addon.price_range;
+            low = low ? `$${low}` : 'Free';
+            high = high ? `$${high}` : 'Free';
+            return low == high ? low : `${low} - ${high}`;
+        },
 
-            showAddon(addon) {
-                this.showingAddon = addon;
-                window.scrollTo(0, 0);
-            },
-        }
-    }
+        showAddon(addon) {
+            this.showingAddon = addon;
+            window.scrollTo(0, 0);
+        },
+    },
+};
 </script>
diff --git a/resources/js/components/AssetContainerList.vue b/resources/js/components/AssetContainerList.vue
index b3b5773350..dd293856dd 100644
--- a/resources/js/components/AssetContainerList.vue
+++ b/resources/js/components/AssetContainerList.vue
@@ -18,30 +18,22 @@
 
 <script>
 export default {
-
-    props: [
-        'initial-rows',
-        'columns',
-        'visible-columns'
-    ],
+    props: ['initial-rows', 'columns', 'visible-columns'],
 
     data() {
         return {
-            rows: this.initialRows
-        }
+            rows: this.initialRows,
+        };
     },
 
     methods: {
-
         destroy(container, index) {
             if (confirm(__('Are you sure?'))) {
-                this.$axios.delete(container.delete_url).then(response => {
+                this.$axios.delete(container.delete_url).then((response) => {
                     this.rows.splice(index, 1);
                 });
             }
-        }
-
-    }
-
-}
+        },
+    },
+};
 </script>
diff --git a/resources/js/components/Avatar.vue b/resources/js/components/Avatar.vue
index ff9db23a6f..6ce462c33e 100644
--- a/resources/js/components/Avatar.vue
+++ b/resources/js/components/Avatar.vue
@@ -1,27 +1,25 @@
 <template>
-
-    <div class="rounded-full overflow-hidden" v-tooltip="user.name">
+    <div class="overflow-hidden rounded-full" v-tooltip="user.name">
         <img v-if="useAvatar" :src="avatarSrc" class="block" @error="hasAvatarError = true" />
-        <div v-if="useInitials" class="text-center flex items-center justify-center h-full w-full bg-pink text-white"><span>{{ initials }}</span></div>
+        <div v-if="useInitials" class="flex h-full w-full items-center justify-center bg-pink text-center text-white">
+            <span>{{ initials }}</span>
+        </div>
     </div>
-
 </template>
 
 <script>
 export default {
-
     props: {
-        user: Object
+        user: Object,
     },
 
     data() {
         return {
             hasAvatarError: false,
-        }
+        };
     },
 
     computed: {
-
         initials() {
             return this.user.initials || '?';
         },
@@ -31,20 +29,18 @@ export default {
         },
 
         hasAvatar() {
-            return !! this.user.avatar;
+            return !!this.user.avatar;
         },
 
         avatarSrc() {
-            if (! this.hasAvatar) return null;
+            if (!this.hasAvatar) return null;
 
             return this.user.avatar.permalink || this.user.avatar;
         },
 
         useInitials() {
-            return ! this.hasAvatar || this.hasAvatarError;
-        }
-
-    }
-
-}
+            return !this.hasAvatar || this.hasAvatarError;
+        },
+    },
+};
 </script>
diff --git a/resources/js/components/Bard.js b/resources/js/components/Bard.js
index 07bff22c13..720fe9d8d4 100644
--- a/resources/js/components/Bard.js
+++ b/resources/js/components/Bard.js
@@ -31,8 +31,8 @@ class Bard {
             pm: {
                 state,
                 model,
-                view
-            }
+                view,
+            },
         };
     }
 }
diff --git a/resources/js/components/Breadcrumb.vue b/resources/js/components/Breadcrumb.vue
index 4e5a5d948d..828f6eb9c5 100644
--- a/resources/js/components/Breadcrumb.vue
+++ b/resources/js/components/Breadcrumb.vue
@@ -1,6 +1,9 @@
 <template>
     <div class="breadcrumb flex">
-        <a :href="url" class="flex-initial flex p-2 -m-2 items-center text-xs text-gray-700 dark:text-dark-175 hover:text-gray-900 dark:hover:text-dark-100">
+        <a
+            :href="url"
+            class="-m-2 flex flex-initial items-center p-2 text-xs text-gray-700 hover:text-gray-900 dark:text-dark-175 dark:hover:text-dark-100"
+        >
             <svg-icon name="micro/chevron-right" class="h-6 w-4 rotate-180" />
             <span v-text="__(title)" />
         </a>
@@ -9,11 +12,9 @@
 
 <script>
 export default {
-
     props: {
         url: String,
         title: String,
-    }
-
-}
+    },
+};
 </script>
diff --git a/resources/js/components/Breadcrumbs.vue b/resources/js/components/Breadcrumbs.vue
index f5bcc11f10..51bcf58f98 100644
--- a/resources/js/components/Breadcrumbs.vue
+++ b/resources/js/components/Breadcrumbs.vue
@@ -1,24 +1,19 @@
 <template>
-
     <div class="subhead">
-
         <span v-for="(crumb, i) in crumbs" :key="i">
-            <a :href="crumb.url"
-                v-text="crumb.text"
-                class="font-bold hover:text-blue"
-            /><span v-if="i < crumbs.length-1" class="px-1">›</span>
+            <a :href="crumb.url" v-text="crumb.text" class="font-bold hover:text-blue" /><span
+                v-if="i < crumbs.length - 1"
+                class="px-1"
+                >›</span
+            >
         </span>
-
     </div>
-
 </template>
 
 <script>
 export default {
-
     props: {
-        crumbs: Array
-    }
-
-}
+        crumbs: Array,
+    },
+};
 </script>
diff --git a/resources/js/components/Callbacks.js b/resources/js/components/Callbacks.js
index c2ba02cb56..b07769cd09 100644
--- a/resources/js/components/Callbacks.js
+++ b/resources/js/components/Callbacks.js
@@ -1,5 +1,4 @@
 export default class Callbacks {
-
     constructor() {
         this.callbacks = [];
     }
@@ -13,5 +12,4 @@ export default class Callbacks {
             return this.callbacks[name](...args);
         }
     }
-
 }
diff --git a/resources/js/components/CodeBlock.vue b/resources/js/components/CodeBlock.vue
index 15485eefed..d6e8507c6a 100644
--- a/resources/js/components/CodeBlock.vue
+++ b/resources/js/components/CodeBlock.vue
@@ -1,43 +1,40 @@
 <template>
     <div>
-        <div class="flex items-center bg-gray-800 py-3 px-4 rounded-md">
-            <pre class="flex-1 p-0 m-0 leading-6"><code class="bg-transparent p-0 text-gray-400 leading-none" v-text="text" /></pre>
+        <div class="flex items-center rounded-md bg-gray-800 px-4 py-3">
+            <pre
+                class="m-0 flex-1 p-0 leading-6"
+            ><code class="bg-transparent p-0 text-gray-400 leading-none" v-text="text" /></pre>
             <button v-if="canCopy" class="flex" v-tooltip="__('Copy')" @click="copy">
-                <svg-icon name="light/entries" class="w-4 h-4 text-white" />
+                <svg-icon name="light/entries" class="h-4 w-4 text-white" />
             </button>
         </div>
     </div>
-
 </template>
 
 <script>
 export default {
-
     props: {
         text: {
             type: String,
-            required: true
+            required: true,
         },
         copyable: {
             type: Boolean,
-            default: false
-        }
+            default: false,
+        },
     },
 
     computed: {
         canCopy() {
             return this.copyable && window.isSecureContext;
-        }
+        },
     },
 
     methods: {
-
         async copy() {
             await navigator.clipboard.writeText(this.text);
             Statamic.$toast.success(__('Copied to clipboard'));
-        }
-
-    }
-
-}
+        },
+    },
+};
 </script>
diff --git a/resources/js/components/Component.js b/resources/js/components/Component.js
index f711a95e91..38a07e59c5 100644
--- a/resources/js/components/Component.js
+++ b/resources/js/components/Component.js
@@ -1,5 +1,4 @@
 class Component {
-
     constructor(id, name, props) {
         this.id = id;
         this.name = name;
@@ -18,7 +17,6 @@ class Component {
     destroy() {
         Statamic.$components.destroy(this.id);
     }
-
 }
 
 export default Component;
diff --git a/resources/js/components/Components.js b/resources/js/components/Components.js
index 6d867b9453..2ca27a16c3 100644
--- a/resources/js/components/Components.js
+++ b/resources/js/components/Components.js
@@ -3,7 +3,6 @@ import uniqid from 'uniqid';
 import Component from './Component';
 
 class Components {
-
     constructor(app) {
         this.app = app;
         this.components = ref([]);
@@ -37,7 +36,6 @@ class Components {
             this.components.value.splice(index, 1);
         }
     }
-
 }
 
 export default Components;
diff --git a/resources/js/components/Config.js b/resources/js/components/Config.js
index a7a285071f..6726499f2f 100644
--- a/resources/js/components/Config.js
+++ b/resources/js/components/Config.js
@@ -12,6 +12,6 @@ export default class Config {
     }
 
     set(key, value) {
-        this.store.commit('statamic/configValue', {key, value});
+        this.store.commit('statamic/configValue', { key, value });
     }
 }
diff --git a/resources/js/components/DarkModeToggle.vue b/resources/js/components/DarkModeToggle.vue
index 53b4fbca5d..cdb243e88a 100644
--- a/resources/js/components/DarkModeToggle.vue
+++ b/resources/js/components/DarkModeToggle.vue
@@ -1,23 +1,23 @@
 <template>
     <dropdown-list v-cloak>
-            <template v-slot:trigger>
-                <button class="global-header-icon-button hidden md:block" v-tooltip="__('Theme') ">
-                    <svg-icon :name="icon"></svg-icon>
-                </button>
-            </template>
-            <dropdown-item @click="prefer('light')" class="flex items-center space-x-2 rtl:space-x-reverse">
-                <svg-icon name="regular/light-mode" class="h-4 w-4"></svg-icon>
-                <span>{{ __('Light') }}</span>
-            </dropdown-item>
-            <dropdown-item @click="prefer('dark')" class="flex items-center space-x-2 rtl:space-x-reverse">
-                <svg-icon name="regular/dark-mode" class="h-4 w-4"></svg-icon>
-                <span>{{ __('Dark') }}</span>
-            </dropdown-item>
-            <dropdown-item @click="prefer('auto')" class="flex items-center space-x-2 rtl:space-x-reverse">
-                <svg-icon name="regular/system" class="h-4 w-4"></svg-icon>
-                <span>{{ __('System') }}</span>
-            </dropdown-item>
-        </dropdown-list>
+        <template v-slot:trigger>
+            <button class="global-header-icon-button hidden md:block" v-tooltip="__('Theme')">
+                <svg-icon :name="icon"></svg-icon>
+            </button>
+        </template>
+        <dropdown-item @click="prefer('light')" class="flex items-center space-x-2 rtl:space-x-reverse">
+            <svg-icon name="regular/light-mode" class="h-4 w-4"></svg-icon>
+            <span>{{ __('Light') }}</span>
+        </dropdown-item>
+        <dropdown-item @click="prefer('dark')" class="flex items-center space-x-2 rtl:space-x-reverse">
+            <svg-icon name="regular/dark-mode" class="h-4 w-4"></svg-icon>
+            <span>{{ __('Dark') }}</span>
+        </dropdown-item>
+        <dropdown-item @click="prefer('auto')" class="flex items-center space-x-2 rtl:space-x-reverse">
+            <svg-icon name="regular/system" class="h-4 w-4"></svg-icon>
+            <span>{{ __('System') }}</span>
+        </dropdown-item>
+    </dropdown-list>
 </template>
 
 <script>
@@ -26,41 +26,42 @@ export default {
         initial: {
             type: String,
             default: 'auto',
-        }
+        },
     },
     data() {
         return {
             preference: this.initial, // dark, light, auto
             theme: null, // dark, light
-        }
+        };
     },
     computed: {
         icon() {
             if (this.preference === 'auto') {
-                return 'regular/system'
+                return 'regular/system';
             } else if (this.preference === 'dark') {
-                return 'regular/dark-mode'
+                return 'regular/dark-mode';
             } else {
-                return 'regular/light-mode'
+                return 'regular/light-mode';
             }
-        }
+        },
     },
     watch: {
         preference: {
             immediate: true,
             handler(mode) {
-                this.theme = (mode === 'dark' || (mode === 'auto' && window.matchMedia('(prefers-color-scheme: dark)').matches))
-                    ? 'dark'
-                    : 'light';
-            }
+                this.theme =
+                    mode === 'dark' || (mode === 'auto' && window.matchMedia('(prefers-color-scheme: dark)').matches)
+                        ? 'dark'
+                        : 'light';
+            },
         },
         theme: {
             immediate: true,
             handler(theme) {
                 document.documentElement.classList.toggle('dark', theme === 'dark');
                 Statamic.darkMode = theme === 'dark';
-            }
-        }
+            },
+        },
     },
     created() {
         window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => {
@@ -80,7 +81,7 @@ export default {
                 this.$preferences.set('theme', mode);
                 localStorage.setItem('statamic.theme', mode);
             }
-        }
-    }
-}
+        },
+    },
+};
 </script>
diff --git a/resources/js/components/DropdownItem.vue b/resources/js/components/DropdownItem.vue
index 35401b0fac..6559793fea 100644
--- a/resources/js/components/DropdownItem.vue
+++ b/resources/js/components/DropdownItem.vue
@@ -15,7 +15,6 @@ export default {
     inject: ['popover'],
 
     computed: {
-
         href() {
             return this.redirect || this.externalLink;
         },
@@ -23,11 +22,9 @@ export default {
         target() {
             return this.externalLink ? '_blank' : null;
         },
-
     },
 
     methods: {
-
         selectAndClose($event) {
             if (this.href) {
                 return;
@@ -37,8 +34,6 @@ export default {
 
             this.popover.vm.close();
         },
-
-    }
-
-}
+    },
+};
 </script>
diff --git a/resources/js/components/DropdownList.vue b/resources/js/components/DropdownList.vue
index f23558e73b..108dcb5308 100644
--- a/resources/js/components/DropdownList.vue
+++ b/resources/js/components/DropdownList.vue
@@ -1,9 +1,22 @@
 <template>
-    <popover class="dropdown-list" :trigger-class="className" :disabled="disabled" :placement="placement" :autoclose="autoclose" :offset="offset" @opened="$emit('opened')" @closed="$emit('closed')">
+    <popover
+        class="dropdown-list"
+        :trigger-class="className"
+        :disabled="disabled"
+        :placement="placement"
+        :autoclose="autoclose"
+        :offset="offset"
+        @opened="$emit('opened')"
+        @closed="$emit('closed')"
+    >
         <template #trigger>
             <slot name="trigger">
                 <button class="rotating-dots-button" :aria-label="__('Open Dropdown')" type="button">
-                    <svg class="rotating-dots fill-current" width="12" viewBox="0 0 24 24"><circle cx="3" cy="12" r="3"/><circle cx="12" cy="12" r="3"/><circle cx="21" cy="12" r="3"/></svg>
+                    <svg class="rotating-dots fill-current" width="12" viewBox="0 0 24 24">
+                        <circle cx="3" cy="12" r="3" />
+                        <circle cx="12" cy="12" r="3" />
+                        <circle cx="21" cy="12" r="3" />
+                    </svg>
                 </button>
             </slot>
         </template>
@@ -16,22 +29,22 @@ export default {
     props: {
         disabled: {
             type: Boolean,
-            default: false
+            default: false,
         },
         placement: {
             type: String,
-            default: 'bottom-end'
+            default: 'bottom-end',
         },
         autoclose: {
             type: Boolean,
-            default: false
+            default: false,
         },
         offset: {
             type: Array,
-            default: () => [10, 0]
+            default: () => [10, 0],
         },
         class: {
-            type: String
+            type: String,
         },
     },
     computed: {
@@ -41,7 +54,6 @@ export default {
         className() {
             return this.class;
         },
-    }
-
-}
+    },
+};
 </script>
diff --git a/resources/js/components/Echo.js b/resources/js/components/Echo.js
index cf52d8bd5b..21bb1e64af 100644
--- a/resources/js/components/Echo.js
+++ b/resources/js/components/Echo.js
@@ -3,7 +3,6 @@ import Pusher from 'pusher-js';
 window.Pusher = Pusher;
 
 class Echo {
-
     constructor() {
         this.configCallbacks = [];
         this.bootedCallbacks = [];
@@ -24,11 +23,11 @@ class Echo {
             authEndpoint: Statamic.$config.get('broadcasting.endpoint'),
         };
 
-        this.configCallbacks.forEach(callback => config = callback(config));
+        this.configCallbacks.forEach((callback) => (config = callback(config)));
 
         this.echo = new LaravelEcho(config);
 
-        this.bootedCallbacks.forEach(callback => callback(this));
+        this.bootedCallbacks.forEach((callback) => callback(this));
         this.bootedCallbacks = [];
     }
 }
@@ -47,7 +46,7 @@ class Echo {
     'registerVueRequestInterceptor',
     'registerAxiosRequestInterceptor',
     'registerjQueryAjaxSetup',
-].forEach(method => {
+].forEach((method) => {
     Echo.prototype[method] = function (...args) {
         return this.echo[method](...args);
     };
diff --git a/resources/js/components/ElementContainer.vue b/resources/js/components/ElementContainer.vue
index 5689c74952..975f83066b 100644
--- a/resources/js/components/ElementContainer.vue
+++ b/resources/js/components/ElementContainer.vue
@@ -6,8 +6,8 @@ export default {
 
     data() {
         return {
-            width: null
-        }
+            width: null,
+        };
     },
 
     render() {
@@ -15,20 +15,19 @@ export default {
     },
 
     mounted() {
-        const observer = new ResizeObserver(_.throttle(entries => {
-            this.width = entries[0].contentRect.width;
-        }, 200));
+        const observer = new ResizeObserver(
+            _.throttle((entries) => {
+                this.width = entries[0].contentRect.width;
+            }, 200),
+        );
 
         observer.observe(this.$el);
     },
 
     watch: {
-
         width(width) {
             this.$emit('resized', { width });
-        }
-
-    }
-
-}
+        },
+    },
+};
 </script>
diff --git a/resources/js/components/FavoriteCreator.vue b/resources/js/components/FavoriteCreator.vue
index 83a6d5fb7c..11d0c29c68 100644
--- a/resources/js/components/FavoriteCreator.vue
+++ b/resources/js/components/FavoriteCreator.vue
@@ -2,7 +2,13 @@
     <div>
         <popover v-if="isNotYetFavorited" ref="popper" placement="bottom-end" :offset="[10, 28]">
             <template #trigger>
-                <button @click="shown" slot="reference" class="global-header-icon-button" v-tooltip="__('Pin to Favorites')" :aria-label="__('Pin to Favorites')">
+                <button
+                    @click="shown"
+                    slot="reference"
+                    class="global-header-icon-button"
+                    v-tooltip="__('Pin to Favorites')"
+                    :aria-label="__('Pin to Favorites')"
+                >
                     <svg-icon name="light/pin"></svg-icon>
                 </button>
             </template>
@@ -10,13 +16,20 @@
                 <h6 class="mb-2">{{ __('Pin to Favorites') }}</h6>
                 <div class="flex items-center">
                     <input type="text" class="input-text w-auto" ref="fave" v-model="name" @keydown.enter="save" />
-                    <button @click="save" class="btn-primary rtl:mr-2 ltr:ml-2">{{ __('Save') }}</button>
+                    <button @click="save" class="btn-primary ltr:ml-2 rtl:mr-2">{{ __('Save') }}</button>
                 </div>
-                <button @click="makeStartPage" class="mt-2 text-xs text-blue outline-none hover:text-blue-800">{{ __('Set as start page') }} <span v-html="direction === 'ltr' ? '&rarr;' : '&larr;'"></span></button>
+                <button @click="makeStartPage" class="mt-2 text-xs text-blue outline-none hover:text-blue-800">
+                    {{ __('Set as start page') }} <span v-html="direction === 'ltr' ? '&rarr;' : '&larr;'"></span>
+                </button>
             </div>
         </popover>
         <div v-else>
-            <button @click="remove" class="global-header-icon-button" v-tooltip="__('Unpin from Favorites')" :aria-label="__('Unpin from Favorites')">
+            <button
+                @click="remove"
+                class="global-header-icon-button"
+                v-tooltip="__('Unpin from Favorites')"
+                :aria-label="__('Unpin from Favorites')"
+            >
                 <svg-icon name="light/pin" class="text-green-600"></svg-icon>
             </button>
         </div>
@@ -24,26 +37,27 @@
 </template>
 
 <script>
-
 export default {
-
     data() {
         return {
-            name: document.title.replace(` ${this.$config.get('direction', 'ltr') === 'ltr' ? '‹' : '›'} ${__('Statamic')}`, ''),
-            currentUrl: this.$config.get('urlPath')
-        }
+            name: document.title.replace(
+                ` ${this.$config.get('direction', 'ltr') === 'ltr' ? '‹' : '›'} ${__('Statamic')}`,
+                '',
+            ),
+            currentUrl: this.$config.get('urlPath'),
+        };
     },
 
     computed: {
         favorite() {
             return {
                 name: this.name,
-                url: this.currentUrl
-            }
+                url: this.currentUrl,
+            };
         },
 
         persistedFavorite() {
-            return _.find(this.$preferences.get('favorites'), favorite => {
+            return _.find(this.$preferences.get('favorites'), (favorite) => {
                 return favorite.url == this.currentUrl;
             });
         },
@@ -68,43 +82,49 @@ export default {
 
         save() {
             this.saving = true;
-            this.$preferences.append('favorites', this.favorite).then(response => {
-                this.saving = false;
-                this.$toast.success(__('Favorite saved'));
-                this.$refs.popper.close();
-                this.$events.$emit('favorites.added');
-            }).catch(e => {
-                this.saving = false;
-                if (e.response) {
-                    this.$toast.error(e.response.data.message);
-                } else {
-                    this.$toast.error(__('Unable to save favorite'));
-                }
-            });
+            this.$preferences
+                .append('favorites', this.favorite)
+                .then((response) => {
+                    this.saving = false;
+                    this.$toast.success(__('Favorite saved'));
+                    this.$refs.popper.close();
+                    this.$events.$emit('favorites.added');
+                })
+                .catch((e) => {
+                    this.saving = false;
+                    if (e.response) {
+                        this.$toast.error(e.response.data.message);
+                    } else {
+                        this.$toast.error(__('Unable to save favorite'));
+                    }
+                });
         },
 
         remove() {
-            this.$preferences.remove('favorites', this.persistedFavorite).then(response => {
+            this.$preferences.remove('favorites', this.persistedFavorite).then((response) => {
                 this.$toast.success(__('Favorite removed'));
             });
         },
 
         makeStartPage() {
             this.saving = true;
-            this.$preferences.set('start_page', this.currentUrl).then(response => {
-                this.saving = false;
-                this.$toast.success(__('This is now your start page.'));
-                this.$refs.popper.close();
-                this.$events.$emit('start_page.saved');
-            }).catch(e => {
-                this.saving = false;
-                if (e.response) {
-                    this.$toast.error(e.response.data.message);
-                } else {
-                    this.$toast.error(__('Unable to save favorite'));
-                }
-            });
+            this.$preferences
+                .set('start_page', this.currentUrl)
+                .then((response) => {
+                    this.saving = false;
+                    this.$toast.success(__('This is now your start page.'));
+                    this.$refs.popper.close();
+                    this.$events.$emit('start_page.saved');
+                })
+                .catch((e) => {
+                    this.saving = false;
+                    if (e.response) {
+                        this.$toast.error(e.response.data.message);
+                    } else {
+                        this.$toast.error(__('Unable to save favorite'));
+                    }
+                });
         },
-    }
-}
+    },
+};
 </script>
diff --git a/resources/js/components/FieldConditions.js b/resources/js/components/FieldConditions.js
index f94ed4c63b..c6a0a86083 100644
--- a/resources/js/components/FieldConditions.js
+++ b/resources/js/components/FieldConditions.js
@@ -1,7 +1,5 @@
 export default class FieldConditions {
-
     add(name, condition) {
-        Statamic.$store.commit('statamic/condition', {name, condition});
+        Statamic.$store.commit('statamic/condition', { name, condition });
     }
-
 }
diff --git a/resources/js/components/FileIcon.vue b/resources/js/components/FileIcon.vue
index 963784f71b..68ac1ff75a 100644
--- a/resources/js/components/FileIcon.vue
+++ b/resources/js/components/FileIcon.vue
@@ -6,7 +6,6 @@
 import { defineAsyncComponent } from 'vue';
 
 export default {
-
     props: {
         extension: String,
     },
@@ -100,7 +99,7 @@ export default {
 
         icon() {
             return defineAsyncComponent(() => import(`./../../svg/filetypes/${this.name}.svg`));
-        }
-    }
-}
+        },
+    },
+};
 </script>
diff --git a/resources/js/components/GlobalSearch.vue b/resources/js/components/GlobalSearch.vue
index 74f2ec0768..220babef71 100644
--- a/resources/js/components/GlobalSearch.vue
+++ b/resources/js/components/GlobalSearch.vue
@@ -1,10 +1,11 @@
 <template>
-    <div class="global-search" :class="{'dirty': isDirty}" v-click-away="reset" v-cloak>
-        <div class="state-container w-4 h-4 text-gray-500 flex items-center" @click="focus">
-            <svg-icon name="light/magnifying-glass" class="w-4 h-4"></svg-icon>
+    <div class="global-search" :class="{ dirty: isDirty }" v-click-away="reset" v-cloak>
+        <div class="state-container flex h-4 w-4 items-center text-gray-500" @click="focus">
+            <svg-icon name="light/magnifying-glass" class="h-4 w-4"></svg-icon>
         </div>
         <label class="sr-only" v-text="__('Global Search')" for="global-search" />
-        <input type="text"
+        <input
+            type="text"
             autocomplete="off"
             class="search-input"
             ref="input"
@@ -20,30 +21,45 @@
             tabindex="-1"
         />
 
-        <span v-if="! (isDirty || searching)" class="rounded px-1 pb-px text-2xs border dark:border-dark-300 text-gray-600 dark:text-dark-200">/</span>
+        <span
+            v-if="!(isDirty || searching)"
+            class="rounded border px-1 pb-px text-2xs text-gray-600 dark:border-dark-300 dark:text-dark-200"
+            >/</span
+        >
         <loading-graphic v-if="searching" :size="14" :inline="true" text="" class="global-search-loading-indicator" />
 
         <div v-show="focused && (hasResults || hasFavorites)" class="global-search-results">
-
-            <div v-if="hasResults" v-for="(result, index) in results" class="global-search-result-item break-overflowing-words p-2 flex items-start" :class="{ 'active': current == index }" @click="hit" @mousemove="setActive(index)">
+            <div
+                v-if="hasResults"
+                v-for="(result, index) in results"
+                class="global-search-result-item break-overflowing-words flex items-start p-2"
+                :class="{ active: current == index }"
+                @click="hit"
+                @mousemove="setActive(index)"
+            >
                 <svg-icon :name="`light/${getResultIcon(result)}`" class="icon"></svg-icon>
-                <div class="flex-1 rtl:mr-2 ltr:ml-2 title" v-html="result.title"></div>
+                <div class="title flex-1 ltr:ml-2 rtl:mr-2" v-html="result.title"></div>
                 <span class="global-search-result-badge" v-text="result.badge" />
             </div>
 
-            <div v-if="! hasResults && hasFavorites">
-                <div class="px-3 py-2 text-gray dark:text-dark-200 uppercase text-3xs">{{ __('Your Favorites') }}</div>
-
-                <div v-for="(favorite, index) in favorites" class="global-search-result-item flex items-center" :class="{ 'active': current == index }" @mousemove="setActive(index)">
-                    <div class="flex items-center flex-1 p-2" @click="hit">
-                        <svg-icon name="light/pin" class="w-4 h-4"></svg-icon>
-                        <div class="rtl:mr-2 ltr:ml-2 title" v-text="favorite.name"></div>
+            <div v-if="!hasResults && hasFavorites">
+                <div class="px-3 py-2 text-3xs uppercase text-gray dark:text-dark-200">{{ __('Your Favorites') }}</div>
+
+                <div
+                    v-for="(favorite, index) in favorites"
+                    class="global-search-result-item flex items-center"
+                    :class="{ active: current == index }"
+                    @mousemove="setActive(index)"
+                >
+                    <div class="flex flex-1 items-center p-2" @click="hit">
+                        <svg-icon name="light/pin" class="h-4 w-4"></svg-icon>
+                        <div class="title ltr:ml-2 rtl:mr-2" v-text="favorite.name"></div>
                     </div>
                     <div class="p-2 text-gray-600 hover:text-gray-800" @click="removeFavorite(favorite)">&times;</div>
                 </div>
 
-                <div class="text-gray text-xs px-3 py-2 border-t dark:border-dark-900 dark:text-dark-200 text-center">
-                    <b class="tracking-widest uppercase text-3xs">{{ __('Pro Tip')}}:</b>
+                <div class="border-t px-3 py-2 text-center text-xs text-gray dark:border-dark-900 dark:text-dark-200">
+                    <b class="text-3xs uppercase tracking-widest">{{ __('Pro Tip') }}:</b>
                     <span v-html="__('messages.global_search_open_using_slash')" />
                 </div>
             </div>
@@ -51,12 +67,11 @@
     </div>
 </template>
 
-
 <script>
 export default {
     props: {
         endpoint: String,
-        placeholder: String
+        placeholder: String,
     },
 
     data() {
@@ -65,8 +80,8 @@ export default {
             query: '',
             current: -1,
             searching: false,
-            focused: false
-        }
+            focused: false,
+        };
     },
 
     computed: {
@@ -99,14 +114,13 @@ export default {
                 return;
             }
 
-            let payload = {params: { q: this.query }};
+            let payload = { params: { q: this.query } };
 
-            this.$axios.get(this.endpoint, payload)
-                .then(response => {
-                    this.results = response.data;
-                    this.current = -1;
-                    this.searching = false;
-                });
+            this.$axios.get(this.endpoint, payload).then((response) => {
+                this.results = response.data;
+                this.current = -1;
+                this.searching = false;
+            });
         }, 300),
 
         reset() {
@@ -132,7 +146,7 @@ export default {
 
             const url = this.hasResults ? item.url : `${this.$config.get('cpRoot')}/${item.url}`;
 
-            $event.metaKey ? window.open(url) : window.location = url;
+            $event.metaKey ? window.open(url) : (window.location = url);
         },
 
         moveUp() {
@@ -141,9 +155,9 @@ export default {
 
         moveDown() {
             if (this.hasResults) {
-                if (this.current < this.results.length-1) this.current++;
+                if (this.current < this.results.length - 1) this.current++;
             } else {
-                if (this.current < this.favorites.length-1) this.current++;
+                if (this.current < this.favorites.length - 1) this.current++;
             }
         },
 
@@ -158,10 +172,10 @@ export default {
         },
 
         removeFavorite(favorite) {
-            this.$preferences.remove('favorites', favorite).then(response => {
+            this.$preferences.remove('favorites', favorite).then((response) => {
                 this.$toast.success(__('Favorite removed'));
             });
-        }
+        },
     },
 
     watch: {
@@ -172,7 +186,7 @@ export default {
 
         searching(searching) {
             // this.$progress.loading('global-search', searching);
-        }
+        },
     },
 
     created() {
@@ -180,10 +194,10 @@ export default {
     },
 
     mounted() {
-        this.$keys.bind('/', e => {
+        this.$keys.bind('/', (e) => {
             e.preventDefault();
             this.focus();
         });
-    }
+    },
 };
 </script>
diff --git a/resources/js/components/GlobalSiteSelector.vue b/resources/js/components/GlobalSiteSelector.vue
index d1df77ecf9..686503983c 100644
--- a/resources/js/components/GlobalSiteSelector.vue
+++ b/resources/js/components/GlobalSiteSelector.vue
@@ -1,6 +1,5 @@
 <template>
-
-    <div class="site-selector flex items-center rtl:ml-4 ltr:mr-4 h-full border-l border-r dark:border-dark-900">
+    <div class="site-selector flex h-full items-center border-l border-r dark:border-dark-900 ltr:mr-4 rtl:ml-4">
         <v-select
             :options="sites"
             label="name"
@@ -11,8 +10,10 @@
             @input="selected"
         >
             <template #selected-option="option">
-                <div class="flex items-center px-2 text-sm text-gray dark:text-dark-100 hover:text-gray-800 dark:hover:text-dark-175 anti">
-                    <svg-icon name="light/sites" class="rtl:ml-2 ltr:mr-2 h-4 w-4" />
+                <div
+                    class="anti flex items-center px-2 text-sm text-gray hover:text-gray-800 dark:text-dark-100 dark:hover:text-dark-175"
+                >
+                    <svg-icon name="light/sites" class="h-4 w-4 ltr:mr-2 rtl:ml-2" />
                     <div class="whitespace-nowrap">{{ __(option.name) }}</div>
                 </div>
             </template>
@@ -21,12 +22,10 @@
             </template>
         </v-select>
     </div>
-
 </template>
 
 <script>
 export default {
-
     computed: {
         sites() {
             return Statamic.$config.get('sites');
@@ -38,7 +37,7 @@ export default {
 
         activeName() {
             return _.findWhere(this.sites, { handle: this.active }).name;
-        }
+        },
     },
 
     methods: {
@@ -46,8 +45,7 @@ export default {
             if (site.handle !== this.active) {
                 window.location = cp_url(`select-site/${site.handle}`);
             }
-        }
-    }
-
-}
+        },
+    },
+};
 </script>
diff --git a/resources/js/components/HasWizardSteps.js b/resources/js/components/HasWizardSteps.js
index 052b2c2f28..5f832b8ac9 100644
--- a/resources/js/components/HasWizardSteps.js
+++ b/resources/js/components/HasWizardSteps.js
@@ -1,8 +1,7 @@
 export default {
-
     data() {
         return {
-            currentStep: 0
+            currentStep: 0,
         };
     },
 
@@ -17,7 +16,7 @@ export default {
 
         canContinue() {
             return this.canGoToStep(this.currentStep + 1);
-        }
+        },
     },
 
     methods: {
@@ -28,16 +27,15 @@ export default {
         },
 
         next() {
-            if (! this.onLastStep) {
+            if (!this.onLastStep) {
                 this.goToStep(this.currentStep + 1);
             }
         },
 
         previous() {
-            if (! this.onFirstStep) {
+            if (!this.onFirstStep) {
                 this.goToStep(this.currentStep - 1);
             }
-        }
-    }
-
-}
+        },
+    },
+};
diff --git a/resources/js/components/Hooks.js b/resources/js/components/Hooks.js
index aa8c66f905..a399ed6d7c 100644
--- a/resources/js/components/Hooks.js
+++ b/resources/js/components/Hooks.js
@@ -3,24 +3,24 @@ class Hooks {
         this.hooks = {};
     }
 
-    on(key, callback, priority=10) {
+    on(key, callback, priority = 10) {
         if (this.hooks[key] === undefined) {
             this.hooks[key] = [];
         }
 
-        this.hooks[key].push({callback, priority});
+        this.hooks[key].push({ callback, priority });
     }
 
     run(key, payload) {
         return new Promise((resolve, reject) => {
             this.getCallbacks(key)
                 .sort((a, b) => b.priority - a.priority)
-                .map(hook => this.convertToPromiseCallback(hook.callback, payload))
+                .map((hook) => this.convertToPromiseCallback(hook.callback, payload))
                 .reduce((promise, callback) => {
-                    return promise.then(result => callback().then(Array.prototype.concat.bind(result)));
+                    return promise.then((result) => callback().then(Array.prototype.concat.bind(result)));
                 }, Promise.resolve([]))
-                .then(results => resolve(results))
-                .catch(error => reject(error));
+                .then((results) => resolve(results))
+                .catch((error) => reject(error));
         });
     }
 
diff --git a/resources/js/components/LengthLimiter.vue b/resources/js/components/LengthLimiter.vue
index f81bd1595d..1646618806 100644
--- a/resources/js/components/LengthLimiter.vue
+++ b/resources/js/components/LengthLimiter.vue
@@ -1,11 +1,10 @@
 <script>
 export default {
-
     props: {
         limit: {
             type: Number,
-            required: false
-        }
+            required: false,
+        },
     },
 
     computed: {
@@ -13,12 +12,11 @@ export default {
             return this.currentLength > this.limit;
         },
         currentLength() {
-            return (this.modelValue) ? this.modelValue.length : 0
+            return this.modelValue ? this.modelValue.length : 0;
         },
         limitIndicatorColor() {
-            return this.limitReached ? 'text-red-500' : 'text-gray'
-        }
-    }
-
-}
+            return this.limitReached ? 'text-red-500' : 'text-gray';
+        },
+    },
+};
 </script>
diff --git a/resources/js/components/Listing.vue b/resources/js/components/Listing.vue
index 9b69c759d6..b3bf79e70a 100644
--- a/resources/js/components/Listing.vue
+++ b/resources/js/components/Listing.vue
@@ -5,13 +5,7 @@ import HasPagination from './data-list/HasPagination';
 import HasPreferences from './data-list/HasPreferences';
 
 export default {
-
-    mixins: [
-        HasActions,
-        HasFilters,
-        HasPagination,
-        HasPreferences,
-    ],
+    mixins: [HasActions, HasFilters, HasPagination, HasPreferences],
 
     props: {
         initialSortColumn: String,
@@ -31,18 +25,17 @@ export default {
             loading: true,
             items: [],
             columns: this.initialColumns,
-            visibleColumns: this.initialColumns.filter(column => column.visible),
+            visibleColumns: this.initialColumns.filter((column) => column.visible),
             sortColumn: this.initialSortColumn,
             sortDirection: this.initialSortDirection,
             meta: null,
             pushQuery: false,
             popping: false,
-        }
+        };
     },
 
     computed: {
-
-        parameterMap()  {
+        parameterMap() {
             return {
                 sort: 'sortColumn',
                 order: 'sortDirection',
@@ -54,27 +47,28 @@ export default {
             };
         },
 
-        parameters:  {
+        parameters: {
             get() {
-                const parameters = Object.fromEntries(Object.entries(this.parameterMap)
-                    .map(([key, prop]) => {
-                        return [key, this[prop]];
-                    })
-                    .filter(([key, value]) => {
-                        return value !== null && value !== undefined && value !== '';
-                    }));
+                const parameters = Object.fromEntries(
+                    Object.entries(this.parameterMap)
+                        .map(([key, prop]) => {
+                            return [key, this[prop]];
+                        })
+                        .filter(([key, value]) => {
+                            return value !== null && value !== undefined && value !== '';
+                        }),
+                );
                 return {
                     ...parameters,
                     ...this.additionalParameters,
                 };
             },
             set(value) {
-                Object.entries(this.parameterMap)
-                    .forEach(([key, prop]) => {
-                        if (value.hasOwnProperty(key)) {
-                            this[prop] = value[key];
-                        }
-                    });
+                Object.entries(this.parameterMap).forEach(([key, prop]) => {
+                    if (value.hasOwnProperty(key)) {
+                        this[prop] = value[key];
+                    }
+                });
             },
         },
 
@@ -95,10 +89,12 @@ export default {
                 if (_.isEmpty(this.visibleColumns)) {
                     return null;
                 }
-                return this.visibleColumns.map(column => column.field).join(',');
+                return this.visibleColumns.map((column) => column.field).join(',');
             },
             set(value) {
-                this.visibleColumns = value.split(',').map(field => this.columns.find(column => column.field === field));
+                this.visibleColumns = value
+                    .split(',')
+                    .map((field) => this.columns.find((column) => column.field === field));
             },
         },
 
@@ -114,7 +110,6 @@ export default {
 
             return false;
         },
-
     },
 
     created() {
@@ -137,7 +132,6 @@ export default {
     },
 
     watch: {
-
         parameters: {
             deep: true,
             handler(after, before) {
@@ -148,14 +142,14 @@ export default {
                 if (JSON.stringify(before) === JSON.stringify(after)) return;
                 this.request();
                 this.pushState();
-            }
+            },
         },
 
         loading: {
             immediate: true,
             handler(loading) {
                 this.$progress.loading(this.listingKey, loading);
-            }
+            },
         },
 
         searchQuery(query) {
@@ -164,14 +158,12 @@ export default {
             this.resetPage();
             this.request();
             this.pushState();
-        }
-
+        },
     },
 
     methods: {
-
         request() {
-            if (! this.requestUrl) {
+            if (!this.requestUrl) {
                 this.loading = false;
                 return;
             }
@@ -181,25 +173,30 @@ export default {
             if (this.source) this.source.abort();
             this.source = new AbortController();
 
-            this.$axios.get(this.requestUrl, {
-                params: this.parameters,
-                signal: this.source.signal
-            }).then(response => {
-                this.columns = response.data.meta.columns;
-                this.activeFilterBadges = {...response.data.meta.activeFilterBadges};
-                this.items = Object.values(response.data.data);
-                this.meta = response.data.meta;
-                if (this.shouldRequestFirstPage) return this.request();
-                this.loading = false;
-                this.initializing = false;
-                this.afterRequestCompleted(response);
-            }).catch(e => {
-                if (this.$axios.isCancel(e)) return;
-                this.loading = false;
-                this.initializing = false;
-                if (e.request && ! e.response) return;
-                this.$toast.error(e.response ? e.response.data.message : __('Something went wrong'), { duration: null });
-            })
+            this.$axios
+                .get(this.requestUrl, {
+                    params: this.parameters,
+                    signal: this.source.signal,
+                })
+                .then((response) => {
+                    this.columns = response.data.meta.columns;
+                    this.activeFilterBadges = { ...response.data.meta.activeFilterBadges };
+                    this.items = Object.values(response.data.data);
+                    this.meta = response.data.meta;
+                    if (this.shouldRequestFirstPage) return this.request();
+                    this.loading = false;
+                    this.initializing = false;
+                    this.afterRequestCompleted(response);
+                })
+                .catch((e) => {
+                    if (this.$axios.isCancel(e)) return;
+                    this.loading = false;
+                    this.initializing = false;
+                    if (e.request && !e.response) return;
+                    this.$toast.error(e.response ? e.response.data.message : __('Something went wrong'), {
+                        duration: null,
+                    });
+                });
         },
 
         afterRequestCompleted(response) {
@@ -236,9 +233,11 @@ export default {
             const parameters = this.parameters;
             const keys = Object.keys(this.parameterMap);
             // This ensures no additionalParameters are added to the URL
-            const searchParams = new URLSearchParams(Object.fromEntries(keys
-                .filter(key => parameters.hasOwnProperty(key))
-                .map(key => [key, parameters[key]])));
+            const searchParams = new URLSearchParams(
+                Object.fromEntries(
+                    keys.filter((key) => parameters.hasOwnProperty(key)).map((key) => [key, parameters[key]]),
+                ),
+            );
             window.history.pushState({ parameters }, '', '?' + searchParams.toString());
         },
 
@@ -254,8 +253,6 @@ export default {
                 this.popping = false;
             });
         },
-
-    }
-
-}
+    },
+};
 </script>
diff --git a/resources/js/components/LoadingGraphic.vue b/resources/js/components/LoadingGraphic.vue
index 9178e498d8..9efa3d14b8 100644
--- a/resources/js/components/LoadingGraphic.vue
+++ b/resources/js/components/LoadingGraphic.vue
@@ -1,15 +1,19 @@
 <template>
-    <div :class="{
-        'flex items-center leading-loose': inline
-    }">
-        <svg xmlns="http://www.w3.org/2000/svg"
+    <div
+        :class="{
+            'flex items-center leading-loose': inline,
+        }"
+    >
+        <svg
+            xmlns="http://www.w3.org/2000/svg"
             :width="`${computedSize}px`"
             :height="`${computedSize}px`"
             viewBox="0 0 40 40"
-            stroke="#737f8c">
+            stroke="#737f8c"
+        >
             <g fill="none" fill-rule="evenodd">
                 <g transform="translate(2 2)" stroke-width="4">
-                    <circle stroke-opacity=".5" cx="18" cy="18" r="18"/>
+                    <circle stroke-opacity=".5" cx="18" cy="18" r="18" />
                     <path d="M36 18c0-9.94-8.06-18-18-18">
                         <animateTransform
                             attributeName="transform"
@@ -17,48 +21,47 @@
                             from="0 18 18"
                             to="360 18 18"
                             dur="1s"
-                            repeatCount="indefinite"/>
+                            repeatCount="indefinite"
+                        />
                     </path>
                 </g>
             </g>
         </svg>
 
-        <div v-if="text" :class="{
-            'ml-2 text-sm text-gray dark:text-dark-175': inline,
-            'mt-2': !inline
-        }">{{ __(text) }}</div>
+        <div
+            v-if="text"
+            :class="{
+                'ml-2 text-sm text-gray dark:text-dark-175': inline,
+                'mt-2': !inline,
+            }"
+        >
+            {{ __(text) }}
+        </div>
     </div>
 </template>
 
 <script>
 export default {
-
     props: {
         text: {
             type: String,
-            default: 'Loading'
+            default: 'Loading',
         },
         size: {
-            type: Number
+            type: Number,
         },
         inline: {
             type: Boolean,
-            default: false
-        }
+            default: false,
+        },
     },
 
     computed: {
-
         computedSize() {
             if (this.size) return this.size;
 
             return this.inline ? 16 : 24;
-        }
-
-    }
-
-}
+        },
+    },
+};
 </script>
-
-
-
diff --git a/resources/js/components/Modal.vue b/resources/js/components/Modal.vue
index f8d2bc03ab..36635b7a86 100644
--- a/resources/js/components/Modal.vue
+++ b/resources/js/components/Modal.vue
@@ -1,18 +1,11 @@
 <template>
-
     <portal name="modal">
-        <VueFinalModal
-            v-model="open"
-            v-bind="modalProps"
-            @opened="modalOpened"
-            @closed="modalClosed"
-        >
+        <VueFinalModal v-model="open" v-bind="modalProps" @opened="modalOpened" @closed="modalClosed">
             <div :style="styling" class="max-h-[90vh]">
                 <slot :close="close" />
             </div>
         </VueFinalModal>
     </portal>
-
 </template>
 
 <script>
@@ -30,7 +23,7 @@ export default {
         adaptive: { type: Boolean, default: true },
         draggable: { default: false },
         clickToClose: { type: Boolean, default: false },
-        focusTrap: {type: Boolean, default: true},
+        focusTrap: { type: Boolean, default: true },
         height: { default: 'auto' },
         width: { default: 600 },
     },
@@ -40,11 +33,10 @@ export default {
             modal: null,
             name: uniqid(),
             open: true,
-        }
+        };
     },
 
     computed: {
-
         modalProps() {
             return {
                 modalId: this.name,
@@ -53,17 +45,16 @@ export default {
                 teleportTo: false,
                 class: 'flex items-start justify-center pt-[5%]',
                 overlayTransition: 'vfm-fade',
-                contentTransition: 'vfm-slide-up'
-            }
+                contentTransition: 'vfm-slide-up',
+            };
         },
 
         styling() {
             return {
-                width: typeof(this.width) === 'number' ? `${this.width}px` : this.width,
-                height: typeof(this.height) === 'number' ? `${this.height}px` : this.height,
-            }
-        }
-
+                width: typeof this.width === 'number' ? `${this.width}px` : this.width,
+                height: typeof this.height === 'number' ? `${this.height}px` : this.height,
+            };
+        },
     },
 
     beforeUnmount() {
@@ -71,7 +62,6 @@ export default {
     },
 
     methods: {
-
         modalOpened(event) {
             this.$emit('opened');
         },
@@ -83,9 +73,7 @@ export default {
         close() {
             this.open = false;
             this.$wait(300).then(() => this.$emit('closed'));
-        }
-
-    }
-
-}
+        },
+    },
+};
 </script>
diff --git a/resources/js/components/Popover.vue b/resources/js/components/Popover.vue
index 0c5d8b8ddd..4d4ac01099 100644
--- a/resources/js/components/Popover.vue
+++ b/resources/js/components/Popover.vue
@@ -1,24 +1,20 @@
 <template>
-    <div :class="[triggerClass, {'popover-open': isOpen}]" @mouseleave="leave">
-
+    <div :class="[triggerClass, { 'popover-open': isOpen }]" @mouseleave="leave">
         <div @click="toggle" ref="trigger" aria-haspopup="true" :aria-expanded="isOpen" v-if="$slots.default">
             <slot name="trigger"></slot>
         </div>
 
-        <portal
-            name="popover"
-            :target-class="`popover-container ${targetClass || ''}`"
-            :provide="provide"
-        >
+        <portal name="popover" :target-class="`popover-container ${targetClass || ''}`" :provide="provide">
             <div :class="`${isOpen ? 'popover-open' : ''}`">
                 <div ref="popover" class="popover" v-if="!disabled" v-click-away="clickawayClose">
-                    <div class="popover-content bg-white dark:bg-dark-550 shadow-popover dark:shadow-dark-popover rounded-md">
+                    <div
+                        class="popover-content rounded-md bg-white shadow-popover dark:bg-dark-550 dark:shadow-dark-popover"
+                    >
                         <slot :close="close" />
                     </div>
                 </div>
             </div>
         </portal>
-
     </div>
 </template>
 
@@ -26,34 +22,35 @@
 import { computePosition, flip, shift, offset, autoUpdate } from '@floating-ui/dom';
 
 export default {
-
     props: {
         autoclose: {
             type: Boolean,
-            default: false
+            default: false,
         },
         clickaway: {
             type: Boolean,
-            default: true
+            default: true,
         },
         disabled: {
             type: Boolean,
-            default: false
+            default: false,
         },
         offset: {
             type: Array,
-            default: () => [10, 0]
+            default: () => [10, 0],
         },
         placement: {
             type: String,
             default: 'bottom-end',
         },
-        class: { // Gets applied to the popover content.
+        class: {
+            // Gets applied to the popover content.
             type: String,
         },
-        triggerClass: { // Gets applied to the trigger.
+        triggerClass: {
+            // Gets applied to the trigger.
             type: String,
-        }
+        },
     },
 
     data() {
@@ -65,21 +62,18 @@ export default {
             provide: {
                 popover: this.makeProvide(),
             },
-        }
+        };
     },
 
     computed: {
-
         targetClass() {
             return this.class;
-        }
-
+        },
     },
 
     methods: {
-
         computePosition() {
-            if (! this.$refs.trigger) return;
+            if (!this.$refs.trigger) return;
 
             computePosition(this.$refs.trigger.firstElementChild, this.$refs.popover, {
                 placement: this.placement,
@@ -103,19 +97,27 @@ export default {
             if (this.disabled) return;
 
             this.isOpen = true;
-            this.escBinding = this.$keys.bindGlobal('esc', e => this.close());
+            this.escBinding = this.$keys.bindGlobal('esc', (e) => this.close());
             this.$nextTick(() => {
-                this.cleanupAutoUpdater = autoUpdate(this.$refs.trigger.firstElementChild, this.$refs.popover, this.computePosition);
-
-                this.$refs.popover.addEventListener('transitionend', () => {
-                    this.$emit('opened');
-                }, { once: true });
+                this.cleanupAutoUpdater = autoUpdate(
+                    this.$refs.trigger.firstElementChild,
+                    this.$refs.popover,
+                    this.computePosition,
+                );
+
+                this.$refs.popover.addEventListener(
+                    'transitionend',
+                    () => {
+                        this.$emit('opened');
+                    },
+                    { once: true },
+                );
             });
         },
 
         clickawayClose(e) {
             // If disabled or closed, do nothing.
-            if (! this.clickaway || ! this.isOpen) return;
+            if (!this.clickaway || !this.isOpen) return;
 
             // If clicking within the popover, or inside the trigger, do nothing.
             // These need to be checked separately, because the popover contents away.
@@ -126,7 +128,7 @@ export default {
         },
 
         close() {
-            if (! this.isOpen) return;
+            if (!this.isOpen) return;
 
             this.isOpen = false;
             this.$emit('closed');
@@ -145,7 +147,7 @@ export default {
                 vm: { get: () => this },
             });
             return provide;
-        }
-    }
-}
+        },
+    },
+};
 </script>
diff --git a/resources/js/components/Preference.js b/resources/js/components/Preference.js
index 3f1bf0a985..940d9b8f69 100644
--- a/resources/js/components/Preference.js
+++ b/resources/js/components/Preference.js
@@ -15,21 +15,15 @@ export default class Preference {
     }
 
     set(key, value) {
-        return this.commitOnSuccessAndReturnPromise(
-            axios.post(this.url, {key, value})
-        );
+        return this.commitOnSuccessAndReturnPromise(axios.post(this.url, { key, value }));
     }
 
     append(key, value) {
-        return this.commitOnSuccessAndReturnPromise(
-            axios.post(this.url, {key, value, append: true})
-        );
+        return this.commitOnSuccessAndReturnPromise(axios.post(this.url, { key, value, append: true }));
     }
 
-    remove(key, value=null, cleanup=true) {
-        return this.commitOnSuccessAndReturnPromise(
-            axios.delete(`${this.url}/${key}`, { data: { value, cleanup } })
-        );
+    remove(key, value = null, cleanup = true) {
+        return this.commitOnSuccessAndReturnPromise(axios.delete(`${this.url}/${key}`, { data: { value, cleanup } }));
     }
 
     removeValue(key, value) {
@@ -37,7 +31,7 @@ export default class Preference {
     }
 
     commitOnSuccessAndReturnPromise(promise) {
-        promise.then(response => {
+        promise.then((response) => {
             this.store.commit('statamic/preferences', response.data);
         });
 
diff --git a/resources/js/components/ResourceDeleter.vue b/resources/js/components/ResourceDeleter.vue
index 76e7fe1845..b1aa7d67dc 100644
--- a/resources/js/components/ResourceDeleter.vue
+++ b/resources/js/components/ResourceDeleter.vue
@@ -13,30 +13,29 @@
 
 <script>
 export default {
-
     props: {
         resource: {
-            type: Object
+            type: Object,
         },
         resourceTitle: {
-            type: String
+            type: String,
         },
         route: {
             type: String,
         },
         redirect: {
-            type: String
+            type: String,
         },
         reload: {
-            type: Boolean
-        }
+            type: Boolean,
+        },
     },
 
     data() {
         return {
             deleting: false,
             redirectFromServer: null,
-        }
+        };
     },
 
     computed: {
@@ -45,7 +44,7 @@ export default {
         },
 
         modalTitle() {
-            return __('Delete :resource', {resource: __(this.title)});
+            return __('Delete :resource', { resource: __(this.title) });
         },
 
         modalBody() {
@@ -54,7 +53,7 @@ export default {
 
         deleteUrl() {
             let url = data_get(this.resource, 'delete_url', this.route);
-            if (! url) console.error('ResourceDeleter cannot find delete url');
+            if (!url) console.error('ResourceDeleter cannot find delete url');
             return url;
         },
 
@@ -69,8 +68,9 @@ export default {
         },
 
         confirmed() {
-            this.$axios.delete(this.deleteUrl)
-                .then(response => {
+            this.$axios
+                .delete(this.deleteUrl)
+                .then((response) => {
                     this.redirectFromServer = data_get(response, 'data.redirect');
                     this.success();
                 })
@@ -96,7 +96,7 @@ export default {
 
         cancel() {
             this.deleting = false;
-        }
-    }
-}
+        },
+    },
+};
 </script>
diff --git a/resources/js/components/SessionExpiry.vue b/resources/js/components/SessionExpiry.vue
index be24fb0dbe..039f7ee7e1 100644
--- a/resources/js/components/SessionExpiry.vue
+++ b/resources/js/components/SessionExpiry.vue
@@ -1,60 +1,52 @@
 <template>
-
     <div class="session-expiry">
-
         <button v-if="isWarning" class="session-expiry-stripe" @click="extend" v-text="warningText" />
 
         <modal name="session-timeout-login" v-if="isShowingLogin" height="auto" :width="500">
             <div class="-max-h-screen-px">
-            <div class="text-lg font-semibold px-5 py-3 bg-gray-200 dark:bg-dark-550 rounded-t-lg flex items-center justify-between border-b dark:border-dark-900">
-                {{ __('Resume Your Session') }}
-            </div>
+                <div
+                    class="flex items-center justify-between rounded-t-lg border-b bg-gray-200 px-5 py-3 text-lg font-semibold dark:border-dark-900 dark:bg-dark-550"
+                >
+                    {{ __('Resume Your Session') }}
+                </div>
 
-            <div v-if="isUsingOauth" class="p-5">
-                <a :href="oauthProvider.loginUrl" target="_blank" class="btn-primary">
-                    {{ __('Log in with :provider', {provider: oauthProvider.label}) }}
-                </a>
-                <div class="text-2xs text-gray mt-4">
-                    {{ __('messages.session_expiry_new_window') }}
+                <div v-if="isUsingOauth" class="p-5">
+                    <a :href="oauthProvider.loginUrl" target="_blank" class="btn-primary">
+                        {{ __('Log in with :provider', { provider: oauthProvider.label }) }}
+                    </a>
+                    <div class="mt-4 text-2xs text-gray">
+                        {{ __('messages.session_expiry_new_window') }}
+                    </div>
                 </div>
-            </div>
 
-            <div v-if="!isUsingOauth" class="publish-fields p-2">
-                <div class="form-group w-full">
-                    <label v-text="__('messages.session_expiry_enter_password')" />
-                    <small
-                        class="help-block text-red-500"
-                        v-if="errors.email"
-                        v-text="errors.email[0]" />
-                    <small
-                        class="help-block text-red-500"
-                        v-if="errors.password"
-                        v-text="errors.password[0]" />
-                    <div class="flex items-center">
-                        <input
-                            type="password"
-                            v-model="password"
-                            ref="password"
-                            class="input-text"
-                            tabindex="1"
-                            autofocus
-                            @keydown.enter.prevent="submit" />
-                        <button @click="submit" class="btn-primary rtl:mr-2 ltr:ml-2" v-text="__('Log in')" />
+                <div v-if="!isUsingOauth" class="publish-fields p-2">
+                    <div class="form-group w-full">
+                        <label v-text="__('messages.session_expiry_enter_password')" />
+                        <small class="help-block text-red-500" v-if="errors.email" v-text="errors.email[0]" />
+                        <small class="help-block text-red-500" v-if="errors.password" v-text="errors.password[0]" />
+                        <div class="flex items-center">
+                            <input
+                                type="password"
+                                v-model="password"
+                                ref="password"
+                                class="input-text"
+                                tabindex="1"
+                                autofocus
+                                @keydown.enter.prevent="submit"
+                            />
+                            <button @click="submit" class="btn-primary ltr:ml-2 rtl:mr-2" v-text="__('Log in')" />
+                        </div>
                     </div>
                 </div>
             </div>
-            </div>
         </modal>
-
     </div>
-
 </template>
 
 <script>
 var counter;
 
 export default {
-
     props: {
         warnAt: Number,
         lifetime: Number,
@@ -73,35 +65,32 @@ export default {
             pinging: false,
             lastCount: moment(),
             isPageHidden: false,
-        }
+        };
     },
 
     computed: {
-
         isWarning() {
             return this.count <= this.warnAt;
         },
 
         warningText() {
-            return (this.remaining === 0)
+            return this.remaining === 0
                 ? __('messages.session_expiry_logged_out_for_inactivity')
                 : __('messages.session_expiry_logging_out_in_seconds', { seconds: this.remaining });
         },
 
         isUsingOauth() {
             return this.oauthProvider != null;
-        }
-
+        },
     },
 
     created() {
         this.startCountdown();
 
-        document.addEventListener('visibilitychange', () => this.isPageHidden = document.hidden, false);
+        document.addEventListener('visibilitychange', () => (this.isPageHidden = document.hidden), false);
     },
 
     watch: {
-
         count(count) {
             this.isShowingLogin = this.auth.enabled && this.remaining <= 0;
 
@@ -117,7 +106,7 @@ export default {
             const itsBeenAWhile = secondsSinceLastCount > 10;
 
             if (withinWarningPeriod || itsBeenAWhile) {
-                this.ping().catch(e => {});
+                this.ping().catch((e) => {});
             }
 
             this.lastCount = moment();
@@ -125,12 +114,10 @@ export default {
 
         isShowingLogin(showing, wasShowing) {
             if (showing && !wasShowing) this.updateCsrfToken();
-        }
-
+        },
     },
 
     methods: {
-
         startCountdown() {
             counter = setInterval(() => {
                 this.count--;
@@ -147,21 +134,25 @@ export default {
 
             this.pinging = true;
 
-            return this.$axios.get(cp_url('session-timeout')).then(response => {
-                this.count = this.remaining = response.data;
-            }).catch(e => {
-                if (e.response.status === 401) {
-                    this.remaining = 0;
-                    if (!this.auth.enabled) window.location = this.auth.redirect_to || '/';
-                }
-                throw e;
-            }).finally(response => {
-                this.pinging = false;
-            });
+            return this.$axios
+                .get(cp_url('session-timeout'))
+                .then((response) => {
+                    this.count = this.remaining = response.data;
+                })
+                .catch((e) => {
+                    if (e.response.status === 401) {
+                        this.remaining = 0;
+                        if (!this.auth.enabled) window.location = this.auth.redirect_to || '/';
+                    }
+                    throw e;
+                })
+                .finally((response) => {
+                    this.pinging = false;
+                });
         },
 
         updateCsrfToken() {
-            return this.$axios.get(cp_url('auth/token')).then(response => {
+            return this.$axios.get(cp_url('auth/token')).then((response) => {
                 const csrf = response.data;
                 this.$axios.defaults.headers.common['X-CSRF-TOKEN'] = csrf;
                 this.$config.set('csrfToken', csrf);
@@ -175,33 +166,34 @@ export default {
         },
 
         login() {
-            this.$axios.post(cp_url('auth/login'), {
-                email: this.email,
-                password: this.password
-            }).then(response => {
-                this.errors = {};
-                this.password = null;
-                this.isShowingLogin = false;
-                this.$toast.success(__('Logged in'));
-                this.restartCountdown();
-                this.updateCsrfToken();
-            }).catch(e => {
-                if (e.response.status === 422) {
-                    this.errors = e.response.data.errors;
-                    this.$toast.error(e.response.data.message);
-                } else {
-                    this.$toast.error(__('Something went wrong'))
-                }
-            });
+            this.$axios
+                .post(cp_url('auth/login'), {
+                    email: this.email,
+                    password: this.password,
+                })
+                .then((response) => {
+                    this.errors = {};
+                    this.password = null;
+                    this.isShowingLogin = false;
+                    this.$toast.success(__('Logged in'));
+                    this.restartCountdown();
+                    this.updateCsrfToken();
+                })
+                .catch((e) => {
+                    if (e.response.status === 422) {
+                        this.errors = e.response.data.errors;
+                        this.$toast.error(e.response.data.message);
+                    } else {
+                        this.$toast.error(__('Something went wrong'));
+                    }
+                });
         },
 
         extend() {
-            this.$axios.get(cp_url('auth/extend')).then(response => {
+            this.$axios.get(cp_url('auth/extend')).then((response) => {
                 this.remaining = this.lifetime;
             });
-        }
-
-    }
-
-}
+        },
+    },
+};
 </script>
diff --git a/resources/js/components/SiteSelector.vue b/resources/js/components/SiteSelector.vue
index 163685c202..f4eaa77a0b 100644
--- a/resources/js/components/SiteSelector.vue
+++ b/resources/js/components/SiteSelector.vue
@@ -1,32 +1,26 @@
 <template>
-
     <v-select
         class="text-sm"
         :value="site"
         :clearable="false"
         :searchable="false"
-        :get-option-label="site => __(site.name)"
+        :get-option-label="(site) => __(site.name)"
         :options="sites"
         @input="$emit('input', $event)"
     />
-
 </template>
 
 <script>
 export default {
-
     props: {
         sites: { type: Array, required: true },
         value: { type: String, required: true },
     },
 
     computed: {
-
         site() {
             return _.findWhere(this.sites, { handle: this.value });
-        }
-
-    }
-
-}
+        },
+    },
+};
 </script>
diff --git a/resources/js/components/SvgIcon.vue b/resources/js/components/SvgIcon.vue
index af0f5ef4be..8ec177208b 100644
--- a/resources/js/components/SvgIcon.vue
+++ b/resources/js/components/SvgIcon.vue
@@ -4,18 +4,18 @@
 
 <script setup>
 import { defineAsyncComponent, shallowRef, computed, watch } from 'vue';
-import { data_get } from  '../bootstrap/globals.js'
+import { data_get } from '../bootstrap/globals.js';
 
 const props = defineProps({
     name: String,
     default: String,
     directory: String,
-})
+});
 
 const icon = shallowRef(null);
 
 const customIcon = computed(() => {
-    if (! props.directory) return;
+    if (!props.directory) return;
 
     let directory = props.directory;
     let folder = null;
@@ -23,7 +23,7 @@ const customIcon = computed(() => {
 
     if (props.name.includes('/')) {
         [folder, file] = props.name.split('/');
-        directory = directory+'/'+folder;
+        directory = directory + '/' + folder;
     }
 
     return data_get(this.$config.get('customSvgIcons') || {}, `${directory}.${file}`);
@@ -32,30 +32,29 @@ const customIcon = computed(() => {
 const evaluateIcon = () => {
     if (customIcon.value) {
         return defineAsyncComponent(() => {
-            return new Promise(resolve => resolve({ template: customIcon.value }));
+            return new Promise((resolve) => resolve({ template: customIcon.value }));
         });
     }
 
     if (props.name.startsWith('<svg')) {
         return defineAsyncComponent(() => {
-            return new Promise(resolve => resolve({ template: props.name }));
+            return new Promise((resolve) => resolve({ template: props.name }));
         });
     }
 
     return defineAsyncComponent(() => {
         const [set, file] = splitIcon(props.name);
 
-        return import(`./../../svg/icons/${set}/${file}.svg`)
-            .catch(e => {
-                if (! props.default) return fallbackIconImport();
-                const [set, file] = splitIcon(props.default);
-                return import(`./../../svg/icons/${set}/${file}.svg`).catch(e => fallbackIconImport());
-            });
+        return import(`./../../svg/icons/${set}/${file}.svg`).catch((e) => {
+            if (!props.default) return fallbackIconImport();
+            const [set, file] = splitIcon(props.default);
+            return import(`./../../svg/icons/${set}/${file}.svg`).catch((e) => fallbackIconImport());
+        });
     });
 };
 
 const splitIcon = (icon) => {
-    if (! icon.includes('/')) icon = 'regular/' + icon;
+    if (!icon.includes('/')) icon = 'regular/' + icon;
 
     return icon.split('/');
 };
@@ -64,7 +63,11 @@ const fallbackIconImport = () => {
     return import('./../../svg/icons/regular/image.svg');
 };
 
-watch(() => props.name, () => {
-    icon.value = evaluateIcon();
-}, { immediate: true });
+watch(
+    () => props.name,
+    () => {
+        icon.value = evaluateIcon();
+    },
+    { immediate: true },
+);
 </script>
diff --git a/resources/js/components/Toasts.js b/resources/js/components/Toasts.js
index 3958aaf492..aae10c1de4 100644
--- a/resources/js/components/Toasts.js
+++ b/resources/js/components/Toasts.js
@@ -1,20 +1,20 @@
 export default class Toasts {
-
     constructor(toasted) {
         this.toasted = toasted;
     }
 
     registerInterceptor(axios) {
-        axios.interceptors.response.use(response => {
+        axios.interceptors.response.use((response) => {
             const data = response?.data;
 
             if (!data) return response;
 
-            const promise = data instanceof Blob
-                ? data.text().then(text => JSON.parse(text))
-                : new Promise(resolve => resolve(data));
+            const promise =
+                data instanceof Blob
+                    ? data.text().then((text) => JSON.parse(text))
+                    : new Promise((resolve) => resolve(data));
 
-            promise.then(json => this.#displayToasts(json._toasts ?? []));
+            promise.then((json) => this.#displayToasts(json._toasts ?? []));
 
             return response;
         });
@@ -26,7 +26,7 @@ export default class Toasts {
     }
 
     #displayToasts(toasts) {
-        toasts.forEach(({type, message, duration}) => this[type](message, {duration}))
+        toasts.forEach(({ type, message, duration }) => this[type](message, { duration }));
     }
 
     #normalizeToastOptions(opts) {
@@ -36,35 +36,47 @@ export default class Toasts {
     }
 
     success(message, opts) {
-        this.toasted.success(message, this.#normalizeToastOptions({
-            iconPack: 'callback',
-            icon: (el) => {
-                el.innerHTML = '<svg viewBox="0 0 24 24" height="12" width="12"><g transform="matrix(1,0,0,1,0,0)"><path d="M23.146,5.4l-2.792-2.8c-0.195-0.196-0.512-0.196-0.707-0.001c0,0-0.001,0.001-0.001,0.001L7.854,14.4 c-0.195,0.196-0.512,0.196-0.707,0.001c0,0-0.001-0.001-0.001-0.001l-2.792-2.8c-0.195-0.196-0.512-0.196-0.707-0.001 c0,0-0.001,0.001-0.001,0.001l-2.792,2.8c-0.195,0.195-0.195,0.512,0,0.707L7.146,21.4c0.195,0.196,0.512,0.196,0.707,0.001 c0,0,0.001-0.001,0.001-0.001L23.146,6.1C23.337,5.906,23.337,5.594,23.146,5.4z" stroke="none" fill="currentColor" stroke-width="0" stroke-linecap="round" stroke-linejoin="round"></path></g></svg>';
-                return el;
-            },
-            ...opts
-        }))
+        this.toasted.success(
+            message,
+            this.#normalizeToastOptions({
+                iconPack: 'callback',
+                icon: (el) => {
+                    el.innerHTML =
+                        '<svg viewBox="0 0 24 24" height="12" width="12"><g transform="matrix(1,0,0,1,0,0)"><path d="M23.146,5.4l-2.792-2.8c-0.195-0.196-0.512-0.196-0.707-0.001c0,0-0.001,0.001-0.001,0.001L7.854,14.4 c-0.195,0.196-0.512,0.196-0.707,0.001c0,0-0.001-0.001-0.001-0.001l-2.792-2.8c-0.195-0.196-0.512-0.196-0.707-0.001 c0,0-0.001,0.001-0.001,0.001l-2.792,2.8c-0.195,0.195-0.195,0.512,0,0.707L7.146,21.4c0.195,0.196,0.512,0.196,0.707,0.001 c0,0,0.001-0.001,0.001-0.001L23.146,6.1C23.337,5.906,23.337,5.594,23.146,5.4z" stroke="none" fill="currentColor" stroke-width="0" stroke-linecap="round" stroke-linejoin="round"></path></g></svg>';
+                    return el;
+                },
+                ...opts,
+            }),
+        );
     }
 
     info(message, opts) {
-        this.toasted.show(message, this.#normalizeToastOptions({
-            iconPack: 'callback',
-            icon: (el) => {
-                el.innerHTML = '<svg viewBox="0 0 24 24" width="24" height="24"><g transform="matrix(1,0,0,1,0,0)"><path d="M 14.25,16.5H13.5c-0.828,0-1.5-0.672-1.5-1.5v-3.75c0-0.414-0.336-0.75-0.75-0.75H10.5 " stroke="currentColor" fill="none" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M 11.625,6.75 c-0.207,0-0.375,0.168-0.375,0.375S11.418,7.5,11.625,7.5S12,7.332,12,7.125S11.832,6.75,11.625,6.75L11.625,6.75 " stroke="currentColor" fill="none" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M 12,0.75 c6.213,0,11.25,5.037,11.25,11.25S18.213,23.25,12,23.25S0.75,18.213,0.75,12S5.787,0.75,12,0.75z" stroke="currentColor" fill="none" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></g></svg>';
-                return el;
-            },
-            ...opts
-        }))
+        this.toasted.show(
+            message,
+            this.#normalizeToastOptions({
+                iconPack: 'callback',
+                icon: (el) => {
+                    el.innerHTML =
+                        '<svg viewBox="0 0 24 24" width="24" height="24"><g transform="matrix(1,0,0,1,0,0)"><path d="M 14.25,16.5H13.5c-0.828,0-1.5-0.672-1.5-1.5v-3.75c0-0.414-0.336-0.75-0.75-0.75H10.5 " stroke="currentColor" fill="none" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M 11.625,6.75 c-0.207,0-0.375,0.168-0.375,0.375S11.418,7.5,11.625,7.5S12,7.332,12,7.125S11.832,6.75,11.625,6.75L11.625,6.75 " stroke="currentColor" fill="none" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M 12,0.75 c6.213,0,11.25,5.037,11.25,11.25S18.213,23.25,12,23.25S0.75,18.213,0.75,12S5.787,0.75,12,0.75z" stroke="currentColor" fill="none" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></g></svg>';
+                    return el;
+                },
+                ...opts,
+            }),
+        );
     }
 
     error(message, opts) {
-        this.toasted.error(message, this.#normalizeToastOptions({
-            iconPack: 'callback',
-            icon: (el) => {
-                el.innerHTML = '<svg viewBox="0 0 24 24" height="18" width="18"><g transform="matrix(1,0,0,1,0,0)"><path d="M11.983,0C8.777,0.052,5.72,1.365,3.473,3.653C1.202,5.914-0.052,9.002,0,12.207C-0.008,18.712,5.26,23.992,11.765,24 c0.012,0,0.023,0,0.035,0h0.214c6.678-0.069,12.04-5.531,11.986-12.209l0,0c0.015-6.498-5.24-11.778-11.738-11.794 C12.169-0.003,12.076-0.002,11.983,0z M10.5,16.542c-0.03-0.815,0.606-1.499,1.421-1.529c0.009,0,0.019-0.001,0.028-0.001h0.027 c0.82,0.002,1.492,0.651,1.523,1.47c0.03,0.814-0.605,1.499-1.419,1.529c-0.01,0-0.02,0.001-0.03,0.001h-0.027 C11.203,18.009,10.532,17.361,10.5,16.542z M11,12.5v-6c0-0.552,0.448-1,1-1s1,0.448,1,1v6c0,0.552-0.448,1-1,1S11,13.052,11,12.5z" stroke="none" fill="currentColor" stroke-width="0" stroke-linecap="round" stroke-linejoin="round"></path></g></svg>';
-                return el;
-            },
-            ...opts
-        }))
+        this.toasted.error(
+            message,
+            this.#normalizeToastOptions({
+                iconPack: 'callback',
+                icon: (el) => {
+                    el.innerHTML =
+                        '<svg viewBox="0 0 24 24" height="18" width="18"><g transform="matrix(1,0,0,1,0,0)"><path d="M11.983,0C8.777,0.052,5.72,1.365,3.473,3.653C1.202,5.914-0.052,9.002,0,12.207C-0.008,18.712,5.26,23.992,11.765,24 c0.012,0,0.023,0,0.035,0h0.214c6.678-0.069,12.04-5.531,11.986-12.209l0,0c0.015-6.498-5.24-11.778-11.738-11.794 C12.169-0.003,12.076-0.002,11.983,0z M10.5,16.542c-0.03-0.815,0.606-1.499,1.421-1.529c0.009,0,0.019-0.001,0.028-0.001h0.027 c0.82,0.002,1.492,0.651,1.523,1.47c0.03,0.814-0.605,1.499-1.419,1.529c-0.01,0-0.02,0.001-0.03,0.001h-0.027 C11.203,18.009,10.532,17.361,10.5,16.542z M11,12.5v-6c0-0.552,0.448-1,1-1s1,0.448,1,1v6c0,0.552-0.448,1-1,1S11,13.052,11,12.5z" stroke="none" fill="currentColor" stroke-width="0" stroke-linecap="round" stroke-linejoin="round"></path></g></svg>';
+                    return el;
+                },
+                ...opts,
+            }),
+        );
     }
 }
diff --git a/resources/js/components/UpdatesBadge.vue b/resources/js/components/UpdatesBadge.vue
index 0809dc9926..16cb921264 100644
--- a/resources/js/components/UpdatesBadge.vue
+++ b/resources/js/components/UpdatesBadge.vue
@@ -5,46 +5,45 @@
 </template>
 
 <script>
-    export default {
-
-        computed: {
-            count() {
-                return this.$store.state.updates.count;
-            }
+export default {
+    computed: {
+        count() {
+            return this.$store.state.updates.count;
+        },
+    },
+
+    created() {
+        this.registerVuexModule();
+
+        this.getCount();
+    },
+
+    methods: {
+        registerVuexModule() {
+            if (this.$store.state.updates) return;
+
+            this.$store.registerModule('updates', {
+                namespaced: true,
+                state: {
+                    count: 0,
+                    requested: false,
+                },
+                mutations: {
+                    count: (state, count) => (state.count = count),
+                    requested: (state) => (state.requested = true),
+                },
+            });
         },
 
-        created() {
-            this.registerVuexModule();
+        getCount() {
+            if (this.$store.state.updates.requested) return;
 
-            this.getCount();
-        },
+            this.$axios
+                .get(cp_url('updater/count'))
+                .then((response) => this.$store.commit('updates/count', !isNaN(response.data) ? response.data : 0));
 
-        methods: {
-            registerVuexModule() {
-                if (this.$store.state.updates) return;
-
-                this.$store.registerModule('updates', {
-                    namespaced: true,
-                    state: {
-                        count: 0,
-                        requested: false,
-                    },
-                    mutations: {
-                        count: (state, count) => state.count = count,
-                        requested: (state) => state.requested = true,
-                    }
-                })
-            },
-
-            getCount() {
-                if (this.$store.state.updates.requested) return;
-
-                this.$axios
-                    .get(cp_url('updater/count'))
-                    .then(response => this.$store.commit('updates/count', !isNaN(response.data) ? response.data : 0));
-
-                this.$store.commit('updates/requested');
-            },
-        }
-    }
+            this.$store.commit('updates/requested');
+        },
+    },
+};
 </script>
diff --git a/resources/js/components/ValidationErrors.vue b/resources/js/components/ValidationErrors.vue
index 7d8c8ce9c3..0243fe9ef0 100644
--- a/resources/js/components/ValidationErrors.vue
+++ b/resources/js/components/ValidationErrors.vue
@@ -1,32 +1,26 @@
 <template>
-
-    <div v-if="hasErrors" class="bg-red-500 text-white p-4 rounded-md shadow mb-4">
+    <div v-if="hasErrors" class="mb-4 rounded-md bg-red-500 p-4 text-white shadow">
         <p v-for="(error, i) in flattenedErrors" :key="i">{{ error }}</p>
     </div>
-
 </template>
 
 <script>
 export default {
-
     props: {
         errors: {
             type: Object,
-            required: true
-        }
+            required: true,
+        },
     },
 
     computed: {
-
         hasErrors() {
             return Object.keys(this.errors).length > 0;
         },
 
         flattenedErrors() {
             return _.chain(this.errors).map(_.values).flatten().value();
-        }
-
-    }
-
-}
+        },
+    },
+};
 </script>
diff --git a/resources/js/components/addons/Editions.vue b/resources/js/components/addons/Editions.vue
index 619822152c..1f5c5d9e2c 100644
--- a/resources/js/components/addons/Editions.vue
+++ b/resources/js/components/addons/Editions.vue
@@ -1,6 +1,6 @@
 <template>
     <div class="card mb-6">
-        <div class="little-heading p-0 mb-2 text-gray-700" v-text="__('Editions')" />
+        <div class="little-heading mb-2 p-0 text-gray-700" v-text="__('Editions')" />
 
         <div class="flex items-center">
             <div class="btn-group">
@@ -8,14 +8,14 @@
                     v-for="edition in addon.editions"
                     :key="edition.handle"
                     class="btn px-4"
-                    :class="{ 'disabled': buttonDisabled(edition) }"
+                    :class="{ disabled: buttonDisabled(edition) }"
                     :disabled="buttonDisabled(edition)"
                     v-text="label(edition)"
                     @click="select(edition)"
                 />
             </div>
 
-            <loading-graphic inline v-if="saving" text="" class="rtl:mr-4 ltr:ml-4" />
+            <loading-graphic inline v-if="saving" text="" class="ltr:ml-4 rtl:mr-4" />
         </div>
     </div>
 </template>
@@ -23,13 +23,13 @@
 <script>
 export default {
     props: {
-        addon: { type: Object, required: true }
+        addon: { type: Object, required: true },
     },
 
     data() {
         return {
             selected: this.addon.edition,
-            saving: false
+            saving: false,
         };
     },
 
@@ -40,24 +40,26 @@ export default {
 
         'addon.edition': function (edition) {
             this.selected = edition;
-        }
+        },
     },
 
     methods: {
         select(edition) {
             this.saving = true;
 
-            this.$axios.post(cp_url("addons/editions"), {
-                addon: this.addon.package,
-                edition: edition.handle
-            }).then(response => {
-                this.selected = edition.handle;
-                this.saving = false;
-            });
+            this.$axios
+                .post(cp_url('addons/editions'), {
+                    addon: this.addon.package,
+                    edition: edition.handle,
+                })
+                .then((response) => {
+                    this.selected = edition.handle;
+                    this.saving = false;
+                });
         },
 
         label(edition) {
-            const free = __("Free");
+            const free = __('Free');
             const price = edition.price === 0 ? free : `$${edition.price}`;
 
             if (price === free && edition.name === free) {
@@ -69,7 +71,7 @@ export default {
 
         buttonDisabled(edition) {
             return !this.addon.installed || edition.handle === this.selected;
-        }
-    }
+        },
+    },
 };
 </script>
diff --git a/resources/js/components/asset-containers/CreateForm.vue b/resources/js/components/asset-containers/CreateForm.vue
index e8456f62d6..c71a6b065b 100644
--- a/resources/js/components/asset-containers/CreateForm.vue
+++ b/resources/js/components/asset-containers/CreateForm.vue
@@ -1,5 +1,4 @@
 <template>
-
     <publish-container
         v-if="blueprint"
         ref="container"
@@ -13,8 +12,7 @@
         v-slot="{ setFieldValue }"
     >
         <div>
-
-            <div class="flex items-center mb-6">
+            <div class="mb-6 flex items-center">
                 <h1 class="flex-1">
                     <small class="subhead block">
                         <a :href="listingUrl" v-text="__('Assets')" />
@@ -24,15 +22,13 @@
                 <button type="submit" class="btn-primary" @click="submit">{{ __('Save') }}</button>
             </div>
 
-            <configure-tabs @updated="setFieldValue" :enable-sidebar="false"/>
+            <configure-tabs @updated="setFieldValue" :enable-sidebar="false" />
         </div>
     </publish-container>
-
 </template>
 
 <script>
 export default {
-
     props: {
         blueprint: Object,
         initialValues: Object,
@@ -48,11 +44,10 @@ export default {
             values: this.initialValues,
             error: null,
             errors: {},
-        }
+        };
     },
 
     methods: {
-
         clearErrors() {
             this.error = null;
             this.errors = {};
@@ -62,10 +57,13 @@ export default {
             this.saving = true;
             this.clearErrors();
 
-            this.$axios.post(this.url, this.values).then(response => {
-                this.$refs.container.saved();
-                this.$nextTick(() => window.location = response.data.redirect);
-            }).catch(e => this.handleAxiosError(e));
+            this.$axios
+                .post(this.url, this.values)
+                .then((response) => {
+                    this.$refs.container.saved();
+                    this.$nextTick(() => (window.location = response.data.redirect));
+                })
+                .catch((e) => this.handleAxiosError(e));
         },
 
         handleAxiosError(e) {
@@ -79,8 +77,6 @@ export default {
                 this.$toast.error(__('Something went wrong'));
             }
         },
-
-    }
-
-}
+    },
+};
 </script>
diff --git a/resources/js/components/asset-containers/EditForm.vue b/resources/js/components/asset-containers/EditForm.vue
index 867a6ffbae..421f209559 100644
--- a/resources/js/components/asset-containers/EditForm.vue
+++ b/resources/js/components/asset-containers/EditForm.vue
@@ -1,5 +1,4 @@
 <template>
-
     <publish-container
         v-if="blueprint"
         ref="container"
@@ -13,19 +12,17 @@
         v-slot="{ setFieldValue }"
     >
         <div>
-            <configure-tabs @updated="setFieldValue" :enable-sidebar="false"/>
-            <div class="py-4 border-t dark:border-dark-950 flex justify-between">
-                <a :href="url" class="btn" v-text="__('Cancel') "/>
+            <configure-tabs @updated="setFieldValue" :enable-sidebar="false" />
+            <div class="flex justify-between border-t py-4 dark:border-dark-950">
+                <a :href="url" class="btn" v-text="__('Cancel')" />
                 <button type="submit" class="btn-primary" @click="submit">{{ __('Save') }}</button>
             </div>
         </div>
     </publish-container>
-
 </template>
 
 <script>
 export default {
-
     props: {
         blueprint: Object,
         initialValues: Object,
@@ -41,11 +38,10 @@ export default {
             values: this.initialValues,
             error: null,
             errors: {},
-        }
+        };
     },
 
     methods: {
-
         clearErrors() {
             this.error = null;
             this.errors = {};
@@ -55,9 +51,12 @@ export default {
             this.saving = true;
             this.clearErrors();
 
-            this.$axios.patch(this.url, this.values).then(response => {
-                window.location = response.data.redirect;
-            }).catch(e => this.handleAxiosError(e));
+            this.$axios
+                .patch(this.url, this.values)
+                .then((response) => {
+                    window.location = response.data.redirect;
+                })
+                .catch((e) => this.handleAxiosError(e));
         },
 
         handleAxiosError(e) {
@@ -71,15 +70,13 @@ export default {
                 this.$toast.error(__('Unable to save changes'));
             }
         },
-
     },
 
     created() {
-        this.$keys.bindGlobal(['mod+s'], e => {
+        this.$keys.bindGlobal(['mod+s'], (e) => {
             e.preventDefault();
             this.submit();
         });
     },
-
-}
+};
 </script>
diff --git a/resources/js/components/assets/AssetManager.vue b/resources/js/components/assets/AssetManager.vue
index a2622ceaa6..6d94541cdf 100644
--- a/resources/js/components/assets/AssetManager.vue
+++ b/resources/js/components/assets/AssetManager.vue
@@ -1,35 +1,22 @@
 <template>
-
     <div class="asset-manager">
-
-        <div class="flex items-center mb-6">
+        <div class="mb-6 flex items-center">
             <h1 class="flex-1">{{ __(container.title) }}</h1>
 
-            <dropdown-list v-if="container.can_edit || container.can_delete" class="rtl:mr-4 ltr:ml-4">
-                <dropdown-item
-                    v-if="container.can_edit"
-                    v-text="__('Edit Container')"
-                    :redirect="container.edit_url">
-                </dropdown-item>
-                <dropdown-item
-                    v-text="__('Edit Blueprint')"
-                    :redirect="container.blueprint_url">
+            <dropdown-list v-if="container.can_edit || container.can_delete" class="ltr:ml-4 rtl:mr-4">
+                <dropdown-item v-if="container.can_edit" v-text="__('Edit Container')" :redirect="container.edit_url">
                 </dropdown-item>
-                <dropdown-item
-                    v-if="container.can_delete"
-                    class="warning"
-                    @click="$refs.deleter.confirm()"
-                >
+                <dropdown-item v-text="__('Edit Blueprint')" :redirect="container.blueprint_url"> </dropdown-item>
+                <dropdown-item v-if="container.can_delete" class="warning" @click="$refs.deleter.confirm()">
                     {{ __('Delete Container') }}
-                    <resource-deleter
-                        ref="deleter"
-                        :resource-title="__(container.title)"
-                        :route="container.delete_url">
+                    <resource-deleter ref="deleter" :resource-title="__(container.title)" :route="container.delete_url">
                     </resource-deleter>
                 </dropdown-item>
             </dropdown-list>
 
-            <a :href="createContainerUrl" class="btn rtl:mr-4 ltr:ml-4" v-if="canCreateContainers">{{ __('Create Container') }}</a>
+            <a :href="createContainerUrl" class="btn ltr:ml-4 rtl:mr-4" v-if="canCreateContainers">{{
+                __('Create Container')
+            }}</a>
         </div>
 
         <asset-browser
@@ -42,15 +29,13 @@
             @navigated="navigate"
             @selections-updated="updateSelections"
             @asset-doubleclicked="editAsset"
-            @edit-asset="editAsset" />
-
+            @edit-asset="editAsset"
+        />
     </div>
-
 </template>
 
 <script>
 export default {
-
     props: {
         initialContainer: Object,
         initialPath: String,
@@ -65,7 +50,7 @@ export default {
             container: this.initialContainer,
             path: this.initialPath,
             selectedAssets: [],
-        }
+        };
     },
 
     mounted() {
@@ -73,7 +58,6 @@ export default {
     },
 
     methods: {
-
         /**
          * Bind browser navigation features
          *
@@ -99,9 +83,14 @@ export default {
                 url += '/' + this.path;
             }
 
-            window.history.pushState({
-                container: { ...this.container }, path: this.path
-            }, '', url);
+            window.history.pushState(
+                {
+                    container: { ...this.container },
+                    path: this.path,
+                },
+                '',
+                url,
+            );
         },
 
         /**
@@ -126,11 +115,9 @@ export default {
         },
 
         editAsset(asset) {
-            event.preventDefault()
+            event.preventDefault();
             this.$refs.browser.edit(asset.id);
-        }
-
-    }
-
-}
+        },
+    },
+};
 </script>
diff --git a/resources/js/components/assets/Browser/Breadcrumbs.vue b/resources/js/components/assets/Browser/Breadcrumbs.vue
index 033558b344..fc052c1fb7 100644
--- a/resources/js/components/assets/Browser/Breadcrumbs.vue
+++ b/resources/js/components/assets/Browser/Breadcrumbs.vue
@@ -1,30 +1,31 @@
 <template>
-
-    <div class="px-4 py-2 flex flex-wrap text-sm bg-gray-200 dark:bg-dark-700 border-t border-b dark:border-dark-900 shadow-inner">
-        <a
-            v-for="(part, index) in pathParts"
-            :key="index"
-            @click="selectFolder(index)"
-            class="group flex items-center"
-        >
-            <svg-icon name="micro/chevron-right" class="text-gray-700 h-4 w-4 rtl:ml-1 ltr:mr-1 rtl:rotate-180" v-if="index !== 0" />
-            <svg-icon name="folder-home" class="rtl:ml-2 ltr:mr-2 h-5 w-5 text-blue-400 group-hover:text-blue-600" v-if="part === '/'" />
-            <svg-icon name="folder" class="rtl:ml-2 ltr:mr-2 h-5 w-5 text-blue-400 group-hover:text-blue-600" v-else />
-            <span class="text-gray-700 text-2xs group-hover:text-gray-800" v-if="part !== '/'" v-text="part" />
+    <div
+        class="flex flex-wrap border-b border-t bg-gray-200 px-4 py-2 text-sm shadow-inner dark:border-dark-900 dark:bg-dark-700"
+    >
+        <a v-for="(part, index) in pathParts" :key="index" @click="selectFolder(index)" class="group flex items-center">
+            <svg-icon
+                name="micro/chevron-right"
+                class="h-4 w-4 text-gray-700 ltr:mr-1 rtl:ml-1 rtl:rotate-180"
+                v-if="index !== 0"
+            />
+            <svg-icon
+                name="folder-home"
+                class="h-5 w-5 text-blue-400 group-hover:text-blue-600 ltr:mr-2 rtl:ml-2"
+                v-if="part === '/'"
+            />
+            <svg-icon name="folder" class="h-5 w-5 text-blue-400 group-hover:text-blue-600 ltr:mr-2 rtl:ml-2" v-else />
+            <span class="text-2xs text-gray-700 group-hover:text-gray-800" v-if="part !== '/'" v-text="part" />
         </a>
     </div>
-
 </template>
 
 <script>
 export default {
-
     props: {
-        path: String
+        path: String,
     },
 
     computed: {
-
         pathParts() {
             let parts = ['/'];
 
@@ -33,21 +34,15 @@ export default {
             }
 
             return parts.concat(this.path.split('/'));
-        }
-
+        },
     },
 
     methods: {
-
         selectFolder(index) {
-            const path = (index === 0)
-                ? '/'
-                : this.pathParts.slice(1, index + 1).join('/');
+            const path = index === 0 ? '/' : this.pathParts.slice(1, index + 1).join('/');
 
             this.$emit('navigated', path);
-        }
-
-    }
-
-}
+        },
+    },
+};
 </script>
diff --git a/resources/js/components/assets/Browser/Browser.vue b/resources/js/components/assets/Browser/Browser.vue
index 95ae4df808..0404fca992 100644
--- a/resources/js/components/assets/Browser/Browser.vue
+++ b/resources/js/components/assets/Browser/Browser.vue
@@ -1,8 +1,7 @@
 <template>
-
     <div class="min-h-screen" ref="browser" @keydown.shift="shiftDown" @keyup="clearShift">
         <div v-if="initializing" class="loading">
-            <loading-graphic  />
+            <loading-graphic />
         </div>
 
         <uploader
@@ -18,7 +17,7 @@
         >
             <div class="min-h-screen">
                 <div class="drag-notification" v-show="dragging">
-                    <svg-icon name="upload" class="h-12 w-12 m-4" />
+                    <svg-icon name="upload" class="m-4 h-12 w-12" />
                     <span>{{ __('Drop File to Upload') }}</span>
                 </div>
 
@@ -35,31 +34,45 @@
                     v-slot="{ filteredRows: rows }"
                 >
                     <div :class="modeClass">
-                        <div class="card overflow-hidden p-0" :class="{ 'select-none' : shifting }">
+                        <div class="card overflow-hidden p-0" :class="{ 'select-none': shifting }">
                             <div class="relative w-full">
-
                                 <div class="flex items-center justify-between p-2 text-sm">
                                     <data-list-search class="h-8" ref="search" v-model="searchQuery" />
 
-                                    <button v-if="canCreateFolders" class="btn btn-sm rtl:mr-3 ltr:ml-3" @click="creatingFolder = true">
-                                        <svg-icon name="folder-add" class="h-4 w-4 rtl:ml-2 ltr:mr-2" />
+                                    <button
+                                        v-if="canCreateFolders"
+                                        class="btn btn-sm ltr:ml-3 rtl:mr-3"
+                                        @click="creatingFolder = true"
+                                    >
+                                        <svg-icon name="folder-add" class="h-4 w-4 ltr:mr-2 rtl:ml-2" />
                                         <span>{{ __('Create Folder') }}</span>
                                     </button>
 
-                                    <button v-if="canUpload" class="btn btn-sm rtl:mr-3 ltr:ml-3" @click="openFileBrowser">
-                                        <svg-icon name="upload" class="h-4 w-4 rtl:ml-2 ltr:mr-2 text-current" />
+                                    <button
+                                        v-if="canUpload"
+                                        class="btn btn-sm ltr:ml-3 rtl:mr-3"
+                                        @click="openFileBrowser"
+                                    >
+                                        <svg-icon name="upload" class="h-4 w-4 text-current ltr:mr-2 rtl:ml-2" />
                                         <span>{{ __('Upload') }}</span>
                                     </button>
 
-                                    <div class="btn-group rtl:mr-3 ltr:ml-3">
-                                        <button class="btn btn-sm" @click="setMode('grid')" :class="{'active': mode === 'grid'}">
-                                            <svg-icon name="assets-mode-grid" class="h-4 w-4"/>
+                                    <div class="btn-group ltr:ml-3 rtl:mr-3">
+                                        <button
+                                            class="btn btn-sm"
+                                            @click="setMode('grid')"
+                                            :class="{ active: mode === 'grid' }"
+                                        >
+                                            <svg-icon name="assets-mode-grid" class="h-4 w-4" />
                                         </button>
-                                        <button class="btn btn-sm" @click="setMode('table')" :class="{'active': mode === 'table'}">
+                                        <button
+                                            class="btn btn-sm"
+                                            @click="setMode('table')"
+                                            :class="{ active: mode === 'table' }"
+                                        >
                                             <svg-icon name="assets-mode-table" class="h-4 w-4" />
                                         </button>
                                     </div>
-
                                 </div>
 
                                 <breadcrumbs v-if="!restrictFolderNavigation" :path="path" @navigated="selectFolder" />
@@ -82,125 +95,167 @@
                             />
 
                             <div class="overflow-x-auto overflow-y-hidden">
-                            <data-list-table
-                                v-if="mode === 'table' && ! containerIsEmpty"
-                                :allow-bulk-actions="true"
-                                :loading="loading"
-                                :toggle-selection-on-row-click="true"
-                                @sorted="sorted"
-                            >
-
-                                <template #tbody-start>
-                                    <tr v-if="folder && folder.parent_path && !restrictFolderNavigation">
-                                        <td />
-                                        <td @click="selectFolder(folder.parent_path)">
-                                            <a class="flex items-center cursor-pointer group">
-                                                <file-icon extension="folder" class="w-8 h-8 rtl:ml-2 ltr:mr-2 inline-block text-blue-400 group-hover:text-blue" />
-                                                ..
-                                            </a>
-                                        </td>
-                                        <td :colspan="columns.length" />
-                                    </tr>
-                                    <tr v-for="(folder, i) in folders" :key="folder.path" v-if="!restrictFolderNavigation">
-                                        <td />
-                                        <td @click="selectFolder(folder.path)">
-                                            <a class="flex items-center cursor-pointer group">
-                                                <file-icon extension="folder" class="w-8 h-8 rtl:ml-2 ltr:mr-2 inline-block text-blue-400 group-hover:text-blue" />
-                                                {{ folder.basename }}
-                                            </a>
-                                        </td>
-                                        <td />
-                                        <td />
-
-                                        <th class="actions-column" :colspan="columns.length">
-                                            <dropdown-list placement="left-start" v-if="folderActions(folder).length">
-                                                <data-list-inline-actions
-                                                    :item="folder.path"
-                                                    :url="folderActionUrl"
-                                                    :actions="folderActions(folder)"
-                                                    @started="actionStarted"
-                                                    @completed="actionCompleted"
-                                                />
-                                            </dropdown-list>
-                                        </th>
-                                    </tr>
-                                </template>
-
-                                <template #cell-basename="{ row: asset, checkboxId }">
-                                    <div class="flex items-center w-fit-content group">
-                                        <asset-thumbnail :asset="asset" :square="true" class="w-8 h-8 rtl:ml-2 ltr:mr-2 cursor-pointer" @click.native.stop="$emit('edit-asset', asset)" />
-                                        <label :for="checkboxId" class="cursor-pointer select-none group-hover:text-blue normal-nums" @click.stop="$emit('edit-asset', asset)">
-                                            {{ asset.basename }}
-                                        </label>
-                                    </div>
-                                </template>
-
-                                <template #actions="{ row: asset }">
-                                    <dropdown-list placement="left-start">
-                                        <dropdown-item :text="__(canEdit ? 'Edit' : 'View')" @click="edit(asset.id)" />
-                                        <div class="divider" v-if="asset.actions.length" />
-                                        <data-list-inline-actions
-                                            :item="asset.id"
-                                            :url="actionUrl"
-                                            :actions="asset.actions"
-                                            @started="actionStarted"
-                                            @completed="actionCompleted"
-                                        />
-                                    </dropdown-list>
-                                </template>
-
-                            </data-list-table>
+                                <data-list-table
+                                    v-if="mode === 'table' && !containerIsEmpty"
+                                    :allow-bulk-actions="true"
+                                    :loading="loading"
+                                    :toggle-selection-on-row-click="true"
+                                    @sorted="sorted"
+                                >
+                                    <template #tbody-start>
+                                        <tr v-if="folder && folder.parent_path && !restrictFolderNavigation">
+                                            <td />
+                                            <td @click="selectFolder(folder.parent_path)">
+                                                <a class="group flex cursor-pointer items-center">
+                                                    <file-icon
+                                                        extension="folder"
+                                                        class="inline-block h-8 w-8 text-blue-400 group-hover:text-blue ltr:mr-2 rtl:ml-2"
+                                                    />
+                                                    ..
+                                                </a>
+                                            </td>
+                                            <td :colspan="columns.length" />
+                                        </tr>
+                                        <tr
+                                            v-for="(folder, i) in folders"
+                                            :key="folder.path"
+                                            v-if="!restrictFolderNavigation"
+                                        >
+                                            <td />
+                                            <td @click="selectFolder(folder.path)">
+                                                <a class="group flex cursor-pointer items-center">
+                                                    <file-icon
+                                                        extension="folder"
+                                                        class="inline-block h-8 w-8 text-blue-400 group-hover:text-blue ltr:mr-2 rtl:ml-2"
+                                                    />
+                                                    {{ folder.basename }}
+                                                </a>
+                                            </td>
+                                            <td />
+                                            <td />
+
+                                            <th class="actions-column" :colspan="columns.length">
+                                                <dropdown-list
+                                                    placement="left-start"
+                                                    v-if="folderActions(folder).length"
+                                                >
+                                                    <data-list-inline-actions
+                                                        :item="folder.path"
+                                                        :url="folderActionUrl"
+                                                        :actions="folderActions(folder)"
+                                                        @started="actionStarted"
+                                                        @completed="actionCompleted"
+                                                    />
+                                                </dropdown-list>
+                                            </th>
+                                        </tr>
+                                    </template>
+
+                                    <template #cell-basename="{ row: asset, checkboxId }">
+                                        <div class="w-fit-content group flex items-center">
+                                            <asset-thumbnail
+                                                :asset="asset"
+                                                :square="true"
+                                                class="h-8 w-8 cursor-pointer ltr:mr-2 rtl:ml-2"
+                                                @click.native.stop="$emit('edit-asset', asset)"
+                                            />
+                                            <label
+                                                :for="checkboxId"
+                                                class="cursor-pointer select-none normal-nums group-hover:text-blue"
+                                                @click.stop="$emit('edit-asset', asset)"
+                                            >
+                                                {{ asset.basename }}
+                                            </label>
+                                        </div>
+                                    </template>
+
+                                    <template #actions="{ row: asset }">
+                                        <dropdown-list placement="left-start">
+                                            <dropdown-item
+                                                :text="__(canEdit ? 'Edit' : 'View')"
+                                                @click="edit(asset.id)"
+                                            />
+                                            <div class="divider" v-if="asset.actions.length" />
+                                            <data-list-inline-actions
+                                                :item="asset.id"
+                                                :url="actionUrl"
+                                                :actions="asset.actions"
+                                                @started="actionStarted"
+                                                @completed="actionCompleted"
+                                            />
+                                        </dropdown-list>
+                                    </template>
+                                </data-list-table>
                             </div>
 
                             <!-- Grid Mode -->
-                            <div v-if="mode === 'grid' && ! containerIsEmpty">
+                            <div v-if="mode === 'grid' && !containerIsEmpty">
                                 <div class="asset-grid-listing px-4 pt-2">
                                     <!-- Parent Folder -->
-                                    <div class="asset-tile" v-if="(folder && folder.parent_path) && !restrictFolderNavigation">
+                                    <div
+                                        class="asset-tile"
+                                        v-if="folder && folder.parent_path && !restrictFolderNavigation"
+                                    >
                                         <div class="asset-thumb-container">
                                             <button @click="selectFolder(folder.parent_path)">
                                                 <div class="asset-thumb">
-                                                    <file-icon extension="folder" class="w-full h-full text-blue-400 hover:text-blue" />
+                                                    <file-icon
+                                                        extension="folder"
+                                                        class="h-full w-full text-blue-400 hover:text-blue"
+                                                    />
                                                 </div>
                                             </button>
                                         </div>
                                         <div class="asset-meta flex items-center">
-                                            <div class="asset-filename text-center w-full px-2 py-1">..</div>
+                                            <div class="asset-filename w-full px-2 py-1 text-center">..</div>
                                         </div>
                                     </div>
                                     <!-- Sub-Folders -->
-                                    <div class="asset-tile group relative" v-for="(folder, i) in folders" :key="folder.path" v-if="!restrictFolderNavigation">
+                                    <div
+                                        class="asset-tile group relative"
+                                        v-for="(folder, i) in folders"
+                                        :key="folder.path"
+                                        v-if="!restrictFolderNavigation"
+                                    >
                                         <div class="asset-thumb-container">
                                             <button @click="selectFolder(folder.path)">
                                                 <div class="asset-thumb">
-                                                    <file-icon extension="folder" class="w-full h-full text-blue-400 hover:text-blue" />
+                                                    <file-icon
+                                                        extension="folder"
+                                                        class="h-full w-full text-blue-400 hover:text-blue"
+                                                    />
                                                 </div>
                                             </button>
                                         </div>
                                         <div class="asset-meta flex items-center">
-                                            <div class="asset-filename text-center w-full px-2 py-1" v-text="folder.basename" :title="folder.basename" />
+                                            <div
+                                                class="asset-filename w-full px-2 py-1 text-center"
+                                                v-text="folder.basename"
+                                                :title="folder.basename"
+                                            />
                                         </div>
-                                        <dropdown-list v-if="folderActions(folder).length"
-                                            class="absolute top-1 rtl:left-2 ltr:right-2 opacity-0 group-hover:opacity-100"
+                                        <dropdown-list
+                                            v-if="folderActions(folder).length"
+                                            class="absolute top-1 opacity-0 group-hover:opacity-100 ltr:right-2 rtl:left-2"
                                             :class="{ 'opacity-100': actionOpened === folder.path }"
                                             @opened="actionOpened = folder.path"
                                             @closed="actionOpened = null"
                                         >
-                                             <data-list-inline-actions
-                                                 :item="folder.path"
-                                                 :url="folderActionUrl"
-                                                 :actions="folderActions(folder)"
-                                                 @started="actionStarted"
-                                                 @completed="actionCompleted"
-                                             />
-                                         </dropdown-list>
+                                            <data-list-inline-actions
+                                                :item="folder.path"
+                                                :url="folderActionUrl"
+                                                :actions="folderActions(folder)"
+                                                @started="actionStarted"
+                                                @completed="actionCompleted"
+                                            />
+                                        </dropdown-list>
                                     </div>
                                     <!-- Assets -->
                                     <button
-                                        class="asset-tile outline-none group relative"
+                                        class="asset-tile group relative outline-none"
                                         v-for="(asset, index) in assets"
                                         :key="asset.id"
-                                        :class="{ 'selected': isSelected(asset.id) }"
+                                        :class="{ selected: isSelected(asset.id) }"
                                     >
                                         <div
                                             class="w-full"
@@ -208,43 +263,59 @@
                                             @dblclick.stop="$emit('edit-asset', asset)"
                                         >
                                             <div class="asset-thumb-container">
-                                                <div class="asset-thumb" :class="{'bg-checkerboard': asset.can_be_transparent}">
-                                                    <img v-if="asset.is_image" :src="asset.thumbnail" loading="lazy" :class="{'p-4 h-full w-full': asset.extension === 'svg'}" />
+                                                <div
+                                                    class="asset-thumb"
+                                                    :class="{ 'bg-checkerboard': asset.can_be_transparent }"
+                                                >
+                                                    <img
+                                                        v-if="asset.is_image"
+                                                        :src="asset.thumbnail"
+                                                        loading="lazy"
+                                                        :class="{ 'h-full w-full p-4': asset.extension === 'svg' }"
+                                                    />
                                                     <file-icon
                                                         v-else
                                                         :extension="asset.extension"
-                                                        class="p-4 h-full w-full"
+                                                        class="h-full w-full p-4"
                                                     />
                                                 </div>
                                             </div>
                                             <div class="asset-meta">
-                                                <div class="asset-filename px-2 py-1 text-center" v-text="asset.basename" :title="asset.basename" />
+                                                <div
+                                                    class="asset-filename px-2 py-1 text-center"
+                                                    v-text="asset.basename"
+                                                    :title="asset.basename"
+                                                />
                                             </div>
                                         </div>
                                         <dropdown-list
-                                            class="absolute top-1 rtl:left-2 ltr:right-2 opacity-0 group-hover:opacity-100"
+                                            class="absolute top-1 opacity-0 group-hover:opacity-100 ltr:right-2 rtl:left-2"
                                             :class="{ 'opacity-100': actionOpened === asset.id }"
                                             @opened="actionOpened = asset.id"
                                             @closed="actionOpened = null"
                                         >
-                                             <dropdown-item :text="__(canEdit ? 'Edit' : 'View')" @click="edit(asset.id)" />
-                                             <div class="divider" v-if="asset.actions.length" />
-                                             <data-list-inline-actions
-                                                 :item="asset.id"
-                                                 :url="actionUrl"
-                                                 :actions="asset.actions"
-                                                 @started="actionStarted"
-                                                 @completed="actionCompleted"
-                                             />
-                                         </dropdown-list>
+                                            <dropdown-item
+                                                :text="__(canEdit ? 'Edit' : 'View')"
+                                                @click="edit(asset.id)"
+                                            />
+                                            <div class="divider" v-if="asset.actions.length" />
+                                            <data-list-inline-actions
+                                                :item="asset.id"
+                                                :url="actionUrl"
+                                                :actions="asset.actions"
+                                                @started="actionStarted"
+                                                @completed="actionCompleted"
+                                            />
+                                        </dropdown-list>
                                     </button>
                                 </div>
                             </div>
 
-                            <div class="p-4 text-gray-700"
+                            <div
+                                class="p-4 text-gray-700"
                                 v-if="containerIsEmpty"
-                                v-text="searchQuery ? __('No results') : __('This container is empty')" />
-
+                                v-text="searchQuery ? __('No results') : __('This container is empty')"
+                            />
                         </div>
 
                         <data-list-pagination
@@ -254,7 +325,6 @@
                             @page-selected="page = $event"
                             @per-page-changed="changePerPage"
                         />
-
                     </div>
                 </data-list>
             </div>
@@ -263,7 +333,7 @@
         <asset-editor
             v-if="showAssetEditor"
             :id="editedAssetId"
-            :read-only="! canEdit"
+            :read-only="!canEdit"
             @closed="closeAssetEditor"
             @saved="assetSaved"
         />
@@ -275,9 +345,7 @@
             @closed="creatingFolder = false"
             @created="folderCreated"
         />
-
     </div>
-
 </template>
 
 <script>
@@ -292,12 +360,7 @@ import Uploads from '../Uploads.vue';
 import HasActions from '../../data-list/HasActions';
 
 export default {
-
-    mixins: [
-        HasActions,
-        HasPagination,
-        HasPreferences,
-    ],
+    mixins: [HasActions, HasPagination, HasPreferences],
 
     components: {
         AssetThumbnail,
@@ -312,15 +375,15 @@ export default {
         // The container to display, determined by a parent component.
         // Either the ID, or the whole container object.
         initialContainer: {},
-        selectedPath: String,        // The path to display, determined by a parent component.
-        restrictFolderNavigation: Boolean,  // Whether to restrict to a single folder and prevent navigation.
+        selectedPath: String, // The path to display, determined by a parent component.
+        restrictFolderNavigation: Boolean, // Whether to restrict to a single folder and prevent navigation.
         selectedAssets: Array,
         maxFiles: Number,
         queryScopes: Array,
         initialEditingAssetId: String,
         autoselectUploads: Boolean,
         autofocusSearch: Boolean,
-        allowSelectingExistingUpload: Boolean
+        allowSelectingExistingUpload: Boolean,
     },
 
     data() {
@@ -328,7 +391,13 @@ export default {
             columns: [
                 { label: __('File'), field: 'basename', visible: true, sortable: true },
                 { label: __('Size'), field: 'size', value: 'size_formatted', visible: true, sortable: true },
-                { label: __('Last Modified'), field: 'last_modified', value: 'last_modified_relative', visible: true, sortable: true },
+                {
+                    label: __('Last Modified'),
+                    field: 'last_modified',
+                    value: 'last_modified_relative',
+                    visible: true,
+                    sortable: true,
+                },
             ],
             containers: [],
             container: {},
@@ -353,19 +422,16 @@ export default {
             shifting: false,
             lastItemClicked: null,
             actionOpened: null,
-        }
+        };
     },
 
     computed: {
-
         selectedContainer() {
-            return (typeof this.initialContainer === 'object')
-                ? this.initialContainer.id
-                : this.initialContainer;
+            return typeof this.initialContainer === 'object' ? this.initialContainer.id : this.initialContainer;
         },
 
         actionContext() {
-            return {container: this.selectedContainer};
+            return { container: this.selectedContainer };
         },
 
         showAssetEditor() {
@@ -373,15 +439,24 @@ export default {
         },
 
         canEdit() {
-            return this.can('edit '+ this.container.id +' assets') || this.can('configure asset containers')
+            return this.can('edit ' + this.container.id + ' assets') || this.can('configure asset containers');
         },
 
         canUpload() {
-            return this.folder && this.container.allow_uploads && (this.can('upload '+ this.container.id +' assets') || this.can('configure asset containers'));
+            return (
+                this.folder &&
+                this.container.allow_uploads &&
+                (this.can('upload ' + this.container.id + ' assets') || this.can('configure asset containers'))
+            );
         },
 
         canCreateFolders() {
-            return this.folder && this.container.create_folders && ! this.restrictFolderNavigation && (this.can('upload '+ this.container.id +' assets') || this.can('configure asset containers'));
+            return (
+                this.folder &&
+                this.container.create_folders &&
+                !this.restrictFolderNavigation &&
+                (this.can('upload ' + this.container.id + ' assets') || this.can('configure asset containers'))
+            );
         },
 
         parameters() {
@@ -392,7 +467,7 @@ export default {
                 order: this.sortDirection,
                 search: this.searchQuery,
                 queryScopes: this.queryScopes,
-            }
+            };
         },
 
         hasMaxFiles() {
@@ -408,21 +483,18 @@ export default {
         },
 
         containerIsEmpty() {
-            return this.assets.length === 0
-                && this.folders.length === 0
-                && (!this.folder || !this.folder.parent_path);
+            return this.assets.length === 0 && this.folders.length === 0 && (!this.folder || !this.folder.parent_path);
         },
 
         editedAssetBasename() {
-            let asset = _.find(this.assets, asset => asset.id == this.editedAssetId);
+            let asset = _.find(this.assets, (asset) => asset.id == this.editedAssetId);
 
             return asset ? asset.basename : null;
         },
 
         modeClass() {
             return 'mode-' + this.mode;
-        }
-
+        },
     },
 
     mounted() {
@@ -440,7 +512,6 @@ export default {
     },
 
     watch: {
-
         initialContainer() {
             this.container = this.initialContainer;
         },
@@ -481,7 +552,7 @@ export default {
 
         editedAssetId(editedAssetId) {
             let path = editedAssetId
-                ? [this.path, this.editedAssetBasename].filter(value => value != '/').join('/') + '/edit'
+                ? [this.path, this.editedAssetBasename].filter((value) => value != '/').join('/') + '/edit'
                 : this.path;
 
             this.$emit('navigated', this.container, path);
@@ -490,17 +561,15 @@ export default {
         searchQuery() {
             this.page = 1;
         },
-
     },
 
     methods: {
-
         afterActionSuccessfullyCompleted() {
             this.loadAssets();
         },
 
         loadContainers() {
-            this.$axios.get(cp_url('asset-containers')).then(response => {
+            this.$axios.get(cp_url('asset-containers')).then((response) => {
                 this.containers = _.chain(response.data).indexBy('id').value();
                 this.container = this.containers[this.selectedContainer];
             });
@@ -510,33 +579,38 @@ export default {
             this.loading = true;
 
             const url = this.searchQuery
-                ? cp_url(`assets/browse/search/${this.container.id}/${this.restrictFolderNavigation ? this.path : ''}`).replace(/\/$/, '')
+                ? cp_url(
+                      `assets/browse/search/${this.container.id}/${this.restrictFolderNavigation ? this.path : ''}`,
+                  ).replace(/\/$/, '')
                 : cp_url(`assets/browse/folders/${this.container.id}/${this.path || ''}`).replace(/\/$/, '');
 
-            this.$axios.get(url, { params: this.parameters }).then(response => {
-                const data = response.data;
-                this.assets = data.data.assets;
-                this.meta = data.meta;
-
-                if (this.searchQuery) {
-                    this.folder = null;
+            this.$axios
+                .get(url, { params: this.parameters })
+                .then((response) => {
+                    const data = response.data;
+                    this.assets = data.data.assets;
+                    this.meta = data.meta;
+
+                    if (this.searchQuery) {
+                        this.folder = null;
+                        this.folders = [];
+                    } else {
+                        this.folder = data.data.folder;
+                        this.folders = data.data.folder.folders;
+                        this.actionUrl = data.links.asset_action;
+                        this.folderActionUrl = data.links.folder_action;
+                    }
+
+                    this.loading = false;
+                    this.initializing = false;
+                })
+                .catch((e) => {
+                    this.$toast.error(e.response.data.message, { action: null, duration: null });
+                    this.assets = [];
                     this.folders = [];
-                } else {
-                    this.folder = data.data.folder;
-                    this.folders = data.data.folder.folders;
-                    this.actionUrl = data.links.asset_action;
-                    this.folderActionUrl = data.links.folder_action;
-                }
-
-                this.loading = false;
-                this.initializing = false;
-            }).catch(e => {
-                this.$toast.error(e.response.data.message, { action: null, duration: null });
-                this.assets = [];
-                this.folders = [];
-                this.loading = false;
-                this.initializing = false;
-            });
+                    this.loading = false;
+                    this.initializing = false;
+                });
         },
 
         selectFolder(path) {
@@ -621,18 +695,15 @@ export default {
 
         toggleSelection(id, index, $event) {
             const i = this.selectedAssets.indexOf(id);
-            this.$refs.browser.focus()
+            this.$refs.browser.focus();
 
             if (this.maxFiles === 1) {
                 this.selectedAssets = [id];
             } else if (i != -1) {
                 this.selectedAssets.splice(i, 1);
-            } else if (! this.reachedSelectionLimit) {
+            } else if (!this.reachedSelectionLimit) {
                 if ($event.shiftKey && this.lastItemClicked !== null) {
-                    this.selectRange(
-                        Math.min(this.lastItemClicked, index),
-                        Math.max(this.lastItemClicked, index)
-                    );
+                    this.selectRange(Math.min(this.lastItemClicked, index), Math.max(this.lastItemClicked, index));
                 } else {
                     this.selectedAssets.push(id);
                 }
@@ -646,24 +717,22 @@ export default {
         },
 
         selectRange(from, to) {
-            for (var i = from; i <= to; i++ ) {
+            for (var i = from; i <= to; i++) {
                 let asset = this.assets[i].id;
-                if (! this.selectedAssets.includes(asset) && ! this.reachedSelectionLimit) {
+                if (!this.selectedAssets.includes(asset) && !this.reachedSelectionLimit) {
                     this.selectedAssets.push(asset);
                 }
                 this.$emit('selections-updated', this.selectedAssets);
-            };
+            }
         },
 
         shiftDown() {
-            this.shifting = true
+            this.shifting = true;
         },
 
         clearShift() {
-            this.shifting = false
+            this.shifting = false;
         },
-
-    }
-
-}
+    },
+};
 </script>
diff --git a/resources/js/components/assets/Browser/CreateFolder.vue b/resources/js/components/assets/Browser/CreateFolder.vue
index ba04482b8e..06d2b228c6 100644
--- a/resources/js/components/assets/Browser/CreateFolder.vue
+++ b/resources/js/components/assets/Browser/CreateFolder.vue
@@ -1,15 +1,6 @@
 <template>
-
-    <confirmation-modal
-        name="folder-editor"
-        :title="modalTitle"
-        :busy="submitting"
-        @cancel="cancel"
-        @confirm="submit"
-    >
-
+    <confirmation-modal name="folder-editor" :title="modalTitle" :busy="submitting" @cancel="cancel" @confirm="submit">
         <div class="publish-fields @container">
-
             <form-group
                 v-if="!initialDirectory"
                 handle="directory"
@@ -21,16 +12,12 @@
                 :config="{ debounce: false }"
                 v-model="directory"
             />
-
         </div>
-
     </confirmation-modal>
-
 </template>
 
 <script>
 export default {
-
     props: {
         initialDirectory: String,
         container: Object,
@@ -44,11 +31,10 @@ export default {
             directory: this.initialDirectory,
             errors: {},
             submitting: false,
-        }
+        };
     },
 
     methods: {
-
         cancel() {
             this.$emit('closed');
         },
@@ -58,19 +44,23 @@ export default {
             const payload = {
                 path: this.path,
                 directory: this.directory,
-                title: this.title
+                title: this.title,
             };
 
             this.submitting = true;
 
-            this.$axios.post(url, payload).then(response => {
-                this.$toast.success(__('Folder created'));
-                this.$emit('created', response.data);
-            }).catch(e => {
-                this.handleErrors(e);
-            }).finally(() => {
-                this.submitting = false;
-            });
+            this.$axios
+                .post(url, payload)
+                .then((response) => {
+                    this.$toast.success(__('Folder created'));
+                    this.$emit('created', response.data);
+                })
+                .catch((e) => {
+                    this.handleErrors(e);
+                })
+                .finally(() => {
+                    this.submitting = false;
+                });
         },
 
         handleErrors(e) {
@@ -82,13 +72,11 @@ export default {
             } else {
                 this.$toast.error(__('Something went wrong'));
             }
-        }
-
+        },
     },
 
     created() {
-        this.$keys.bindGlobal('esc', this.cancel)
+        this.$keys.bindGlobal('esc', this.cancel);
     },
-
-}
+};
 </script>
diff --git a/resources/js/components/assets/Browser/Thumbnail.vue b/resources/js/components/assets/Browser/Thumbnail.vue
index 7f25fef542..3ec63e337d 100644
--- a/resources/js/components/assets/Browser/Thumbnail.vue
+++ b/resources/js/components/assets/Browser/Thumbnail.vue
@@ -1,40 +1,36 @@
 <template>
-
     <div class="">
-        <img v-if="asset.is_image"
+        <img
+            v-if="asset.is_image"
             :src="asset.thumbnail"
-            class="asset-thumbnail max-h-8 max-w-full mx-auto rounded"
+            class="asset-thumbnail mx-auto max-h-8 max-w-full rounded"
             loading="lazy"
-            :class="{'w-8 h-8 object-cover': square}"
-            />
-        <img v-else-if="asset.is_svg"
+            :class="{ 'h-8 w-8 object-cover': square }"
+        />
+        <img
+            v-else-if="asset.is_svg"
             :src="asset.url"
-            class="asset-thumbnail h-8 max-w-full mx-auto rounded"
+            class="asset-thumbnail mx-auto h-8 max-w-full rounded"
             loading="lazy"
-            />
-        <file-icon v-else :extension="asset.extension" class="p-px asset-thumbnail rounded w-8 h-8" />
+        />
+        <file-icon v-else :extension="asset.extension" class="asset-thumbnail h-8 w-8 rounded p-px" />
     </div>
-
 </template>
 
 <script>
 export default {
-
     props: {
-        'asset': Object,
-        'square': {
+        asset: Object,
+        square: {
             default: false,
-            type: Boolean
-        }
+            type: Boolean,
+        },
     },
 
     computed: {
-
         showSvg() {
             return this.asset.extension === 'svg';
-        }
-
-    }
-
-}
+        },
+    },
+};
 </script>
diff --git a/resources/js/components/assets/Editor/Editor.vue b/resources/js/components/assets/Editor/Editor.vue
index e7e3a044e2..485e6980c0 100644
--- a/resources/js/components/assets/Editor/Editor.vue
+++ b/resources/js/components/assets/Editor/Editor.vue
@@ -1,205 +1,291 @@
 <template>
-
-    <stack name="asset-editor"
-        :before-close="shouldClose"
-        :full="true"
-        @closed="close">
-
-    <div class="asset-editor flex flex-col relative bg-gray-100 dark:bg-dark-800 h-full rounded" :class="isImage ? 'is-image' : 'is-file'">
-
-        <div v-if="loading" class="loading">
-            <loading-graphic />
-        </div>
-
-        <template v-if="!loading">
-
-            <!-- Header -->
-            <div id="asset-editor-header" class="flex justify-between w-full px-2 relative">
-                <button class="flex items-center p-4 group" @click="open" v-tooltip.right="__('Open in a new window')" :aria-label="__('Open in a new window')">
-                    <svg-icon name="folder-image" class="text-gray-700 dark:text-dark-175 h-5 w-5" />
-                    <span class="rtl:mr-2 ltr:ml-2 text-sm text-gray-800 dark:text-dark-150 group-hover:text-blue dark:group-hover:text-dark-100">{{ asset.path }}</span>
-                    <svg-icon name="micro/chevron-right" class="text-gray-700 dark:text-dark-175 h-5 w-5 group-hover:text-blue dark:group-hover:text-dark-100 rtl:rotate-180" />
-                </button>
-                <button class="btn-close absolute top-2 rtl:left-2.5 ltr:right-2.5" @click="close" :aria-label="__('Close Editor')">&times;</button>
+    <stack name="asset-editor" :before-close="shouldClose" :full="true" @closed="close">
+        <div
+            class="asset-editor relative flex h-full flex-col rounded bg-gray-100 dark:bg-dark-800"
+            :class="isImage ? 'is-image' : 'is-file'"
+        >
+            <div v-if="loading" class="loading">
+                <loading-graphic />
             </div>
 
-            <div class="flex flex-1 flex-col md:flex-row md:justify-between grow overflow-scroll">
-
-                <!-- Visual Area -->
-                <div class="editor-preview bg-gray-800 dark:bg-dark-950 rtl:md:rounded-tl-md ltr:md:rounded-tr-md flex flex-col justify-between flex-1 min-h-[45vh] md:min-h-auto md:flex-auto md:grow w-full md:w-1/2 lg:w-2/3 shadow-[inset_0px_4px_3px_0px_black]">
-
-                    <!-- Toolbar -->
-                    <div id="asset-editor-toolbar" class="@container/toolbar flex items-center justify-center py-4 px-2 text-2xs text-white dark:text-dark-100 text-center space-x-1 sm:space-x-3 rtl:space-x-reverse " v-if="isToolbarVisible">
-                        <button v-if="isImage && isFocalPointEditorEnabled" type="button" class="flex bg-gray-750 dark:bg-dark-400 hover:bg-gray-900 dark:hover:bg-dark-600 hover:text-yellow-light dark:hover:text-yellow-dark rounded items-center justify-center px-3 py-1.5" @click.prevent="openFocalPointEditor">
-                            <svg-icon name="focal-point" class="h-4" />
-                            <span class="rtl:mr-2 ltr:ml-2 hidden @3xl/toolbar:inline-block">{{ __('Focal Point') }}</span>
-                        </button>
-
-                        <button v-if="canRunAction('rename_asset')" type="button" class="flex bg-gray-750 dark:bg-dark-400 hover:bg-gray-900 dark:hover:bg-dark-600 hover:text-yellow-light dark:hover:text-yellow-dark rounded items-center px-3 py-1.5" @click.prevent="runAction('rename_asset')">
-                            <svg-icon name="rename-file" class="h-4" />
-                            <span class="rtl:mr-2 ltr:ml-2 hidden @3xl/toolbar:inline-block">{{ __('Rename') }}</span>
-                        </button>
-
-                        <button v-if="canRunAction('move_asset')" type="button" class="flex bg-gray-750 dark:bg-dark-400 hover:bg-gray-900 dark:hover:bg-dark-600 hover:text-yellow-light dark:hover:text-yellow-dark rounded items-center px-3 py-1.5" @click.prevent="runAction('move_asset')">
-                            <svg-icon name="move-file" class="h-4" />
-                            <span class="rtl:mr-2 ltr:ml-2 hidden @3xl/toolbar:inline-block">{{ __('Move') }}</span>
-                        </button>
-
-                        <button v-if="canRunAction('replace_asset')" type="button" class="flex bg-gray-750 dark:bg-dark-400 hover:bg-gray-900 dark:hover:bg-dark-600 hover:text-yellow-light dark:hover:text-yellow-dark rounded items-center px-3 py-1.5" @click.prevent="runAction('replace_asset')">
-                            <svg-icon name="swap" class="h-4" />
-                            <span class="rtl:mr-2 ltr:ml-2 hidden @3xl/toolbar:inline-block">{{ __('Replace') }}</span>
-                        </button>
-
-                        <button v-if="canRunAction('reupload_asset')" type="button" class="flex bg-gray-750 dark:bg-dark-400 hover:bg-gray-900 dark:hover:bg-dark-600 hover:text-yellow-light dark:hover:text-yellow-dark rounded items-center px-3 py-1.5" @click.prevent="runAction('reupload_asset')">
-                            <svg-icon name="upload-cloud" class="h-4" />
-                            <span class="rtl:mr-2 ltr:ml-2 hidden @3xl/toolbar:inline-block">{{ __('Reupload') }}</span>
-                        </button>
-
-                        <button v-if="asset.allowDownloading" class="flex bg-gray-750 dark:bg-dark-400 hover:bg-gray-900 dark:hover:bg-dark-600 hover:text-yellow-light dark:hover:text-yellow-dark rounded items-center px-3 py-1.5" @click="download" :aria-label="__('Download file')">
-                            <svg-icon name="download-desktop" class="h-4"/>
-                            <span class="rtl:mr-2 ltr:ml-2 hidden @3xl/toolbar:inline-block">{{ __('Download') }}</span>
-                        </button>
-
-                        <button v-if="allowDeleting && canRunAction('delete')" @click="runAction('delete')" class="flex bg-gray-750 dark:bg-dark-400 hover:bg-gray-900 dark:hover:bg-dark-600 hover:text-red-400 dark:hover:text-dark-red rounded items-center text-center px-3 py-1.5">
-                            <svg-icon name="trash" class="h-4" />
-                            <span class="rtl:mr-2 ltr:ml-2 hidden @3xl/toolbar:inline-block">{{ __('Delete') }}</span>
-                        </button>
-
-                        <dropdown-list class="mr-4" v-if="actionsMenu.length">
-                            <data-list-inline-actions
-                                :item="id"
-                                :url="actionUrl"
-                                :actions="actionsMenu"
-                                @started="actionStarted"
-                                @completed="actionCompleted"
-                            />
-                        </dropdown-list>
-                    </div>
+            <template v-if="!loading">
+                <!-- Header -->
+                <div id="asset-editor-header" class="relative flex w-full justify-between px-2">
+                    <button
+                        class="group flex items-center p-4"
+                        @click="open"
+                        v-tooltip.right="__('Open in a new window')"
+                        :aria-label="__('Open in a new window')"
+                    >
+                        <svg-icon name="folder-image" class="h-5 w-5 text-gray-700 dark:text-dark-175" />
+                        <span
+                            class="text-sm text-gray-800 group-hover:text-blue dark:text-dark-150 dark:group-hover:text-dark-100 ltr:ml-2 rtl:mr-2"
+                            >{{ asset.path }}</span
+                        >
+                        <svg-icon
+                            name="micro/chevron-right"
+                            class="h-5 w-5 text-gray-700 group-hover:text-blue dark:text-dark-175 dark:group-hover:text-dark-100 rtl:rotate-180"
+                        />
+                    </button>
+                    <button
+                        class="btn-close absolute top-2 ltr:right-2.5 rtl:left-2.5"
+                        @click="close"
+                        :aria-label="__('Close Editor')"
+                    >
+                        &times;
+                    </button>
+                </div>
 
-                    <!-- Image Preview -->
+                <div class="flex flex-1 grow flex-col overflow-scroll md:flex-row md:justify-between">
+                    <!-- Visual Area -->
                     <div
-                        v-if="asset.isImage || asset.isSvg || asset.isAudio || asset.isVideo"
-                        class="editor-preview-image"
+                        class="editor-preview md:min-h-auto flex min-h-[45vh] w-full flex-1 flex-col justify-between bg-gray-800 shadow-[inset_0px_4px_3px_0px_black] dark:bg-dark-950 md:w-1/2 md:flex-auto md:grow lg:w-2/3 ltr:md:rounded-tr-md rtl:md:rounded-tl-md"
                     >
-                        <div class="image-wrapper">
-                            <!-- Image -->
-                            <img v-if="asset.isImage" :src="asset.preview" class="asset-thumb" />
-
-                            <!-- SVG -->
-                            <div v-else-if="asset.isSvg" class="bg-checkerboard h-full w-full flex flex-col">
-                                <div class="flex border-b-2 border-gray-900">
-                                    <div class="flex-1 order-r p-4 border-gray-900 flex items-center justify-center">
-                                        <img :src="asset.url" class="asset-thumb w-4 h-4" />
-                                    </div>
-                                    <div class="flex-1 rtl:border-r ltr:border-l rtl:border-l ltr:border-r p-4 border-gray-900 flex items-center justify-center">
-                                        <img :src="asset.url" class="asset-thumb w-12 h-12" />
+                        <!-- Toolbar -->
+                        <div
+                            id="asset-editor-toolbar"
+                            class="flex items-center justify-center space-x-1 px-2 py-4 text-center text-2xs text-white @container/toolbar dark:text-dark-100 sm:space-x-3 rtl:space-x-reverse"
+                            v-if="isToolbarVisible"
+                        >
+                            <button
+                                v-if="isImage && isFocalPointEditorEnabled"
+                                type="button"
+                                class="flex items-center justify-center rounded bg-gray-750 px-3 py-1.5 hover:bg-gray-900 hover:text-yellow-light dark:bg-dark-400 dark:hover:bg-dark-600 dark:hover:text-yellow-dark"
+                                @click.prevent="openFocalPointEditor"
+                            >
+                                <svg-icon name="focal-point" class="h-4" />
+                                <span class="hidden @3xl/toolbar:inline-block ltr:ml-2 rtl:mr-2">{{
+                                    __('Focal Point')
+                                }}</span>
+                            </button>
+
+                            <button
+                                v-if="canRunAction('rename_asset')"
+                                type="button"
+                                class="flex items-center rounded bg-gray-750 px-3 py-1.5 hover:bg-gray-900 hover:text-yellow-light dark:bg-dark-400 dark:hover:bg-dark-600 dark:hover:text-yellow-dark"
+                                @click.prevent="runAction('rename_asset')"
+                            >
+                                <svg-icon name="rename-file" class="h-4" />
+                                <span class="hidden @3xl/toolbar:inline-block ltr:ml-2 rtl:mr-2">{{
+                                    __('Rename')
+                                }}</span>
+                            </button>
+
+                            <button
+                                v-if="canRunAction('move_asset')"
+                                type="button"
+                                class="flex items-center rounded bg-gray-750 px-3 py-1.5 hover:bg-gray-900 hover:text-yellow-light dark:bg-dark-400 dark:hover:bg-dark-600 dark:hover:text-yellow-dark"
+                                @click.prevent="runAction('move_asset')"
+                            >
+                                <svg-icon name="move-file" class="h-4" />
+                                <span class="hidden @3xl/toolbar:inline-block ltr:ml-2 rtl:mr-2">{{ __('Move') }}</span>
+                            </button>
+
+                            <button
+                                v-if="canRunAction('replace_asset')"
+                                type="button"
+                                class="flex items-center rounded bg-gray-750 px-3 py-1.5 hover:bg-gray-900 hover:text-yellow-light dark:bg-dark-400 dark:hover:bg-dark-600 dark:hover:text-yellow-dark"
+                                @click.prevent="runAction('replace_asset')"
+                            >
+                                <svg-icon name="swap" class="h-4" />
+                                <span class="hidden @3xl/toolbar:inline-block ltr:ml-2 rtl:mr-2">{{
+                                    __('Replace')
+                                }}</span>
+                            </button>
+
+                            <button
+                                v-if="canRunAction('reupload_asset')"
+                                type="button"
+                                class="flex items-center rounded bg-gray-750 px-3 py-1.5 hover:bg-gray-900 hover:text-yellow-light dark:bg-dark-400 dark:hover:bg-dark-600 dark:hover:text-yellow-dark"
+                                @click.prevent="runAction('reupload_asset')"
+                            >
+                                <svg-icon name="upload-cloud" class="h-4" />
+                                <span class="hidden @3xl/toolbar:inline-block ltr:ml-2 rtl:mr-2">{{
+                                    __('Reupload')
+                                }}</span>
+                            </button>
+
+                            <button
+                                v-if="asset.allowDownloading"
+                                class="flex items-center rounded bg-gray-750 px-3 py-1.5 hover:bg-gray-900 hover:text-yellow-light dark:bg-dark-400 dark:hover:bg-dark-600 dark:hover:text-yellow-dark"
+                                @click="download"
+                                :aria-label="__('Download file')"
+                            >
+                                <svg-icon name="download-desktop" class="h-4" />
+                                <span class="hidden @3xl/toolbar:inline-block ltr:ml-2 rtl:mr-2">{{
+                                    __('Download')
+                                }}</span>
+                            </button>
+
+                            <button
+                                v-if="allowDeleting && canRunAction('delete')"
+                                @click="runAction('delete')"
+                                class="flex items-center rounded bg-gray-750 px-3 py-1.5 text-center hover:bg-gray-900 hover:text-red-400 dark:bg-dark-400 dark:hover:bg-dark-600 dark:hover:text-dark-red"
+                            >
+                                <svg-icon name="trash" class="h-4" />
+                                <span class="hidden @3xl/toolbar:inline-block ltr:ml-2 rtl:mr-2">{{
+                                    __('Delete')
+                                }}</span>
+                            </button>
+
+                            <dropdown-list class="mr-4" v-if="actionsMenu.length">
+                                <data-list-inline-actions
+                                    :item="id"
+                                    :url="actionUrl"
+                                    :actions="actionsMenu"
+                                    @started="actionStarted"
+                                    @completed="actionCompleted"
+                                />
+                            </dropdown-list>
+                        </div>
+
+                        <!-- Image Preview -->
+                        <div
+                            v-if="asset.isImage || asset.isSvg || asset.isAudio || asset.isVideo"
+                            class="editor-preview-image"
+                        >
+                            <div class="image-wrapper">
+                                <!-- Image -->
+                                <img v-if="asset.isImage" :src="asset.preview" class="asset-thumb" />
+
+                                <!-- SVG -->
+                                <div v-else-if="asset.isSvg" class="bg-checkerboard flex h-full w-full flex-col">
+                                    <div class="flex border-b-2 border-gray-900">
+                                        <div
+                                            class="order-r flex flex-1 items-center justify-center border-gray-900 p-4"
+                                        >
+                                            <img :src="asset.url" class="asset-thumb h-4 w-4" />
+                                        </div>
+                                        <div
+                                            class="flex flex-1 items-center justify-center border-gray-900 p-4 ltr:border-l ltr:border-r rtl:border-l rtl:border-r"
+                                        >
+                                            <img :src="asset.url" class="asset-thumb h-12 w-12" />
+                                        </div>
+                                        <div
+                                            class="flex flex-1 items-center justify-center border-gray-900 p-4 ltr:border-l rtl:border-r"
+                                        >
+                                            <img :src="asset.url" class="asset-thumb h-24 w-24" />
+                                        </div>
                                     </div>
-                                    <div class="flex-1 rtl:border-r ltr:border-l p-4 border-gray-900 flex items-center justify-center">
-                                        <img :src="asset.url" class="asset-thumb w-24 h-24" />
+                                    <div class="flex h-full min-h-0 items-center justify-center p-4">
+                                        <img :src="asset.url" class="asset-thumb max-h-full w-2/3 max-w-full" />
                                     </div>
                                 </div>
-                                <div class="min-h-0 h-full p-4 flex items-center justify-center">
-                                    <img :src="asset.url" class="asset-thumb w-2/3 max-w-full max-h-full" />
+
+                                <!-- Audio -->
+                                <div class="w-full shadow-none" v-else-if="asset.isAudio">
+                                    <audio :src="asset.url" class="w-full" controls preload="auto"></audio>
+                                </div>
+
+                                <!-- Video -->
+                                <div class="w-full shadow-none" v-else-if="asset.isVideo">
+                                    <video :src="asset.url" class="w-full" controls></video>
                                 </div>
                             </div>
+                        </div>
 
-                            <!-- Audio -->
-                            <div class="w-full shadow-none" v-else-if="asset.isAudio"><audio :src="asset.url" class="w-full" controls preload="auto"></audio></div>
+                        <div class="h-full" v-else-if="asset.isPdf">
+                            <pdf-viewer :src="asset.pdfUrl"></pdf-viewer>
+                        </div>
 
-                            <!-- Video -->
-                            <div class="w-full shadow-none" v-else-if="asset.isVideo"><video :src="asset.url" class="w-full" controls></video></div>
+                        <div class="h-full" v-else-if="asset.isPreviewable && canUseGoogleDocsViewer">
+                            <iframe
+                                class="h-full w-full"
+                                frameborder="0"
+                                :src="'https://docs.google.com/gview?url=' + asset.permalink + '&embedded=true'"
+                            ></iframe>
                         </div>
                     </div>
 
-                    <div class="h-full" v-else-if="asset.isPdf">
-                        <pdf-viewer :src="asset.pdfUrl"></pdf-viewer>
-                    </div>
+                    <!-- Fields Area -->
+                    <publish-container
+                        v-if="fields"
+                        :name="publishContainer"
+                        :blueprint="fieldset"
+                        :values="values"
+                        :extra-values="extraValues"
+                        :meta="meta"
+                        :errors="errors"
+                        @updated="values = { ...$event, focus: values.focus }"
+                        v-slot="{ setFieldValue, setFieldMeta }"
+                    >
+                        <div class="h-1/2 w-full overflow-scroll sm:p-4 md:h-full md:w-1/3 md:grow md:pt-px">
+                            <div v-if="saving" class="loading">
+                                <loading-graphic text="Saving" />
+                            </div>
 
-                    <div class="h-full" v-else-if="asset.isPreviewable && canUseGoogleDocsViewer">
-                        <iframe class="h-full w-full" frameborder="0" :src="'https://docs.google.com/gview?url=' + asset.permalink + '&embedded=true'"></iframe>
-                    </div>
+                            <div v-if="error" class="mb-4 bg-red-500 p-4 text-white shadow" v-text="error" />
+
+                            <publish-sections
+                                :sections="fieldset.tabs[0].sections"
+                                :read-only="readOnly"
+                                @updated="setFieldValue"
+                                @meta-updated="setFieldMeta"
+                            />
+                        </div>
+                    </publish-container>
                 </div>
 
-                <!-- Fields Area -->
-                <publish-container
-                    v-if="fields"
-                    :name="publishContainer"
-                    :blueprint="fieldset"
-                    :values="values"
-                    :extra-values="extraValues"
-                    :meta="meta"
-                    :errors="errors"
-                    @updated="values = { ...$event, focus: values.focus }"
-                    v-slot="{ setFieldValue, setFieldMeta }"
+                <div
+                    class="flex w-full items-center justify-end rounded-b border-t bg-gray-200 px-4 py-3 dark:border-dark-200 dark:bg-dark-550"
                 >
-                    <div class="w-full sm:p-4 md:pt-px md:w-1/3 md:grow h-1/2 md:h-full overflow-scroll">
-
-                        <div v-if="saving" class="loading">
-                            <loading-graphic text="Saving" />
+                    <div
+                        id="asset-meta-data"
+                        class="hidden h-full flex-1 space-x-3 py-1 text-xs text-gray-800 dark:text-dark-150 sm:flex rtl:space-x-reverse"
+                    >
+                        <div
+                            class="flex items-center rounded bg-gray-400 py-1 dark:bg-dark-600 ltr:pl-2 ltr:pr-3 rtl:pl-3 rtl:pr-2"
+                            v-if="isImage"
+                        >
+                            <svg-icon name="image-picture" class="h-3 ltr:mr-2 rtl:ml-2" />
+                            <div class="">
+                                {{ __('messages.width_x_height', { width: asset.width, height: asset.height }) }}
+                            </div>
+                        </div>
+                        <div
+                            class="flex items-center rounded bg-gray-400 py-1 dark:bg-dark-600 ltr:pl-2 ltr:pr-3 rtl:pl-3 rtl:pr-2"
+                        >
+                            <svg-icon name="sd-card" class="h-3 ltr:mr-2 rtl:ml-2" />
+                            <div class="">{{ asset.size }}</div>
+                        </div>
+                        <div
+                            class="flex items-center rounded bg-gray-400 py-1 dark:bg-dark-600 ltr:pl-2 ltr:pr-3 rtl:pl-3 rtl:pr-2"
+                        >
+                            <svg-icon name="thumbprint" class="h-3 ltr:mr-2 rtl:ml-2" />
+                            <div class="" :title="asset.lastModified">{{ asset.lastModifiedRelative }}</div>
                         </div>
-
-                        <div v-if="error" class="bg-red-500 text-white p-4 shadow mb-4" v-text="error" />
-
-                        <publish-sections
-                            :sections="fieldset.tabs[0].sections"
-                            :read-only="readOnly"
-                            @updated="setFieldValue"
-                            @meta-updated="setFieldMeta"
-                        />
-
-                    </div>
-                </publish-container>
-            </div>
-
-            <div class="bg-gray-200 dark:bg-dark-550 w-full border-t dark:border-dark-200 flex items-center justify-end py-3 px-4 rounded-b">
-                <div id="asset-meta-data" class="flex-1 hidden sm:flex space-x-3 rtl:space-x-reverse py-1 h-full text-xs text-gray-800 dark:text-dark-150">
-                    <div class="flex items-center bg-gray-400 dark:bg-dark-600 rounded py-1 rtl:pr-2 ltr:pl-2 rtl:pl-3 ltr:pr-3" v-if="isImage">
-                        <svg-icon name="image-picture" class="h-3 rtl:ml-2 ltr:mr-2" />
-                        <div class="">{{ __('messages.width_x_height', { width: asset.width, height: asset.height }) }}</div>
-                    </div>
-                    <div class="flex items-center bg-gray-400 dark:bg-dark-600 rounded py-1 rtl:pr-2 ltr:pl-2 rtl:pl-3 ltr:pr-3">
-                        <svg-icon name="sd-card" class="h-3 rtl:ml-2 ltr:mr-2" />
-                        <div class="">{{ asset.size }}</div>
                     </div>
-                    <div class="flex items-center bg-gray-400 dark:bg-dark-600 rounded py-1 rtl:pr-2 ltr:pl-2 rtl:pl-3 ltr:pr-3">
-                        <svg-icon name="thumbprint" class="h-3 rtl:ml-2 ltr:mr-2" />
-                        <div class="" :title="asset.lastModified">{{ asset.lastModifiedRelative }}</div>
+                    <div class="flex items-center space-x-3 rtl:space-x-reverse">
+                        <button type="button" class="btn" @click="close">
+                            {{ __('Cancel') }}
+                        </button>
+                        <button type="button" class="btn-primary" @click="save" v-if="!readOnly">
+                            {{ __('Save') }}
+                        </button>
                     </div>
                 </div>
-                <div class="flex items-center space-x-3 rtl:space-x-reverse">
-                    <button type="button" class="btn" @click="close">
-                        {{ __('Cancel') }}
-                    </button>
-                    <button type="button" class="btn-primary" @click="save" v-if="!readOnly">
-                        {{ __('Save') }}
-                    </button>
-                </div>
-            </div>
-
-        </template>
-
-        <editor-actions
-            v-if="actions.length"
-            :id="id"
-            :actions="actions"
-            :url="actionUrl"
-            @started="actionStarted"
-            @completed="actionCompleted" />
-
-        <focal-point-editor
-            v-if="showFocalPointEditor && isFocalPointEditorEnabled"
-            :data="values.focus"
-            :image="asset.preview"
-            @selected="selectFocalPoint"
-            @closed="closeFocalPointEditor" />
-
-    </div>
-
+            </template>
+
+            <editor-actions
+                v-if="actions.length"
+                :id="id"
+                :actions="actions"
+                :url="actionUrl"
+                @started="actionStarted"
+                @completed="actionCompleted"
+            />
+
+            <focal-point-editor
+                v-if="showFocalPointEditor && isFocalPointEditorEnabled"
+                :data="values.focus"
+                :image="asset.preview"
+                @selected="selectFocalPoint"
+                @closed="closeFocalPointEditor"
+            />
+        </div>
     </stack>
-
 </template>
 
-
 <script>
 import EditorActions from './EditorActions.vue';
 import FocalPointEditor from './FocalPointEditor.vue';
@@ -209,12 +295,9 @@ import HasHiddenFields from '../../publish/HasHiddenFields';
 import pick from 'underscore/modules/pick';
 
 export default {
-
     emits: ['saved', 'closed', 'action-completed'],
 
-    mixins: [
-        HasHiddenFields,
-    ],
+    mixins: [HasHiddenFields],
 
     components: {
         EditorActions,
@@ -225,7 +308,7 @@ export default {
 
     props: {
         id: {
-            required: true
+            required: true,
         },
         readOnly: {
             type: Boolean,
@@ -238,11 +321,10 @@ export default {
             type: Boolean,
             default() {
                 return true;
-            }
+            },
         },
     },
 
-
     data() {
         return {
             loading: true,
@@ -258,53 +340,49 @@ export default {
             error: null,
             errors: {},
             actions: [],
-        }
+        };
     },
 
-
     computed: {
-
         isImage() {
-            if (! this.asset) return false;
+            if (!this.asset) return false;
 
             return this.asset.isImage;
         },
 
-        hasErrors: function() {
+        hasErrors: function () {
             return this.error || Object.keys(this.errors).length;
         },
 
-        canUseGoogleDocsViewer()
-        {
+        canUseGoogleDocsViewer() {
             return Statamic.$config.get('googleDocsViewer');
         },
 
-        isFocalPointEditorEnabled()
-        {
-            return Statamic.$config.get("focalPointEditorEnabled");
+        isFocalPointEditorEnabled() {
+            return Statamic.$config.get('focalPointEditorEnabled');
         },
 
-        isToolbarVisible()
-        {
-            return ! this.readOnly && this.showToolbar;
+        isToolbarVisible() {
+            return !this.readOnly && this.showToolbar;
         },
 
-        actionsMenu()
-        {
+        actionsMenu() {
             // We filter out the actions that are already in the toolbar.
             // We don't want them to appear in the dropdown as well.
             // If we filtered them out in PHP they wouldn't appear as buttons.
-            return this.actions.filter(action => ![
-                'rename_asset',
-                'move_asset',
-                'replace_asset',
-                'reupload_asset',
-                'download_asset',
-                'delete',
-                'copy_asset_url',
-            ].includes(action.handle));
+            return this.actions.filter(
+                (action) =>
+                    ![
+                        'rename_asset',
+                        'move_asset',
+                        'replace_asset',
+                        'reupload_asset',
+                        'download_asset',
+                        'delete',
+                        'copy_asset_url',
+                    ].includes(action.handle),
+            );
         },
-
     },
 
     mounted() {
@@ -312,15 +390,14 @@ export default {
     },
 
     events: {
-        'close-child-editor': function() {
+        'close-child-editor': function () {
             this.closeFocalPointEditor();
             this.closeImageEditor();
             this.closeRenamer();
-        }
+        },
     },
 
     methods: {
-
         /**
          * Load the asset data
          *
@@ -332,7 +409,7 @@ export default {
 
             const url = cp_url(`assets/${utf8btoa(this.id)}`);
 
-            this.$axios.get(url).then(response => {
+            this.$axios.get(url).then((response) => {
                 const data = response.data.data;
                 this.asset = data;
 
@@ -346,13 +423,22 @@ export default {
 
                 this.fieldset = data.blueprint;
                 this.fields = _.chain(this.fieldset.tabs)
-                    .map(tab => tab.sections)
+                    .map((tab) => tab.sections)
                     .flatten(true)
-                    .map(section => section.fields)
+                    .map((section) => section.fields)
                     .flatten(true)
                     .value();
 
-                this.extraValues = pick(this.asset, ['filename', 'basename', 'extension', 'path', 'mimeType', 'width', 'height', 'duration']);
+                this.extraValues = pick(this.asset, [
+                    'filename',
+                    'basename',
+                    'extension',
+                    'path',
+                    'mimeType',
+                    'width',
+                    'height',
+                    'duration',
+                ]);
 
                 this.loading = false;
             });
@@ -367,7 +453,7 @@ export default {
         },
 
         selectFocalPoint(point) {
-            point = (point === '50-50-1') ? null : point;
+            point = point === '50-50-1' ? null : point;
             this.values['focus'] = point;
             this.$dirty.add(this.publishContainer);
         },
@@ -376,25 +462,28 @@ export default {
             this.saving = true;
             const url = cp_url(`assets/${utf8btoa(this.id)}`);
 
-            this.$axios.patch(url, this.visibleValues).then(response => {
-                this.$emit('saved', response.data.asset);
-                this.$toast.success(__('Saved'));
-                this.saving = false;
-                this.clearErrors();
-            }).catch(e => {
-                this.saving = false;
-
-                if (e.response && e.response.status === 422) {
-                    const { message, errors, error } = e.response.data;
-                    this.error = message;
-                    this.errors = errors;
-                    this.$toast.error(error);
-                } else if (e.response) {
-                    this.$toast.error(e.response.data.message);
-                } else {
-                    this.$toast.error(__('Something went wrong'));
-                }
-            });
+            this.$axios
+                .patch(url, this.visibleValues)
+                .then((response) => {
+                    this.$emit('saved', response.data.asset);
+                    this.$toast.success(__('Saved'));
+                    this.saving = false;
+                    this.clearErrors();
+                })
+                .catch((e) => {
+                    this.saving = false;
+
+                    if (e.response && e.response.status === 422) {
+                        const { message, errors, error } = e.response.data;
+                        this.error = message;
+                        this.errors = errors;
+                        this.$toast.error(error);
+                    } else if (e.response) {
+                        this.$toast.error(e.response.data.message);
+                    } else {
+                        this.$toast.error(__('Something went wrong'));
+                    }
+                });
         },
 
         clearErrors() {
@@ -408,7 +497,7 @@ export default {
 
         shouldClose() {
             if (this.$dirty.has(this.publishContainer)) {
-                if (! confirm(__('Are you sure? Unsaved changes will be lost.'))) {
+                if (!confirm(__('Are you sure? Unsaved changes will be lost.'))) {
                     return false;
                 }
             }
@@ -425,7 +514,7 @@ export default {
         },
 
         canRunAction(handle) {
-            return _.find(this.actions, action => action.handle == handle);
+            return _.find(this.actions, (action) => action.handle == handle);
         },
 
         runAction(handle) {
@@ -446,7 +535,6 @@ export default {
                 this.close();
             }
         },
-    }
-
-}
+    },
+};
 </script>
diff --git a/resources/js/components/assets/Editor/EditorActions.vue b/resources/js/components/assets/Editor/EditorActions.vue
index cb0bc457d7..9cf12f7bca 100644
--- a/resources/js/components/assets/Editor/EditorActions.vue
+++ b/resources/js/components/assets/Editor/EditorActions.vue
@@ -1,5 +1,4 @@
 <template>
-
     <div>
         <data-list-action
             ref="actions"
@@ -8,33 +7,32 @@
             :action="action"
             :selections="1"
             :errors="errors"
-            @selected="run" />
+            @selected="run"
+        />
     </div>
-
 </template>
 
 <script>
 import Actions from '../../data-list/Actions.js';
 
 export default {
-
     mixins: [Actions],
 
     props: {
         actions: {
             type: Array,
-            required: true
+            required: true,
         },
         id: {
             type: String,
-            required: true
+            required: true,
         },
     },
 
     computed: {
         selections() {
             return [this.id];
-        }
+        },
     },
 
     created() {
@@ -42,16 +40,13 @@ export default {
     },
 
     methods: {
-
         findActionComponent(handle) {
-            return _.find(this.$refs.actions, component => component.action.handle === handle);
+            return _.find(this.$refs.actions, (component) => component.action.handle === handle);
         },
 
         actionSelected(event) {
             this.findActionComponent(event.action).confirming = true;
         },
-
-    }
-
-}
+    },
+};
 </script>
diff --git a/resources/js/components/assets/Editor/FocalPointEditor.vue b/resources/js/components/assets/Editor/FocalPointEditor.vue
index c8b7023d98..b781e57902 100644
--- a/resources/js/components/assets/Editor/FocalPointEditor.vue
+++ b/resources/js/components/assets/Editor/FocalPointEditor.vue
@@ -1,82 +1,90 @@
 <template>
-
     <portal name="focal-point">
-    <div class="focal-point">
-        <div class="focal-point-toolbox card p-0">
-            <div class="p-4">
-                <label>{{ __('Focal Point') }}</label>
-                <small class="help-block">{{ __('messages.focal_point_instructions') }}</small>
-                <div class="focal-point-image">
-                    <img ref="image" :src="image" @click="define" @load="setImageDimensions" />
-                    <div class="focal-point-reticle" :class="{ zoomed: z > 1 }" :style="{
-                        top: `${y}%`,
-                        left: `${x}%`,
-                        width: `${reticleSize}px`,
-                        height: `${reticleSize}px`,
-                        marginTop: `-${reticleSize/2}px`,
-                        marginLeft: `-${reticleSize/2}px`,
-                    }"></div>
-                </div>
-            </div>
-            <div class="flex items-center text-sm justify-center mb-4">
-                <div class="flex items-center mx-4">
-                    <div class="rtl:ml-1 ltr:mr-1">X</div>
-                    <div class="value">{{ x }}<sup>%</sup></div>
+        <div class="focal-point">
+            <div class="focal-point-toolbox card p-0">
+                <div class="p-4">
+                    <label>{{ __('Focal Point') }}</label>
+                    <small class="help-block">{{ __('messages.focal_point_instructions') }}</small>
+                    <div class="focal-point-image">
+                        <img ref="image" :src="image" @click="define" @load="setImageDimensions" />
+                        <div
+                            class="focal-point-reticle"
+                            :class="{ zoomed: z > 1 }"
+                            :style="{
+                                top: `${y}%`,
+                                left: `${x}%`,
+                                width: `${reticleSize}px`,
+                                height: `${reticleSize}px`,
+                                marginTop: `-${reticleSize / 2}px`,
+                                marginLeft: `-${reticleSize / 2}px`,
+                            }"
+                        ></div>
+                    </div>
                 </div>
-                <div class="flex items-center mx-4">
-                    <div class="rtl:ml-1 ltr:mr-1">Y</div>
-                    <div class="value">{{ y }}<sup>%</sup></div>
+                <div class="mb-4 flex items-center justify-center text-sm">
+                    <div class="mx-4 flex items-center">
+                        <div class="ltr:mr-1 rtl:ml-1">X</div>
+                        <div class="value">{{ x }}<sup>%</sup></div>
+                    </div>
+                    <div class="mx-4 flex items-center">
+                        <div class="ltr:mr-1 rtl:ml-1">Y</div>
+                        <div class="value">{{ y }}<sup>%</sup></div>
+                    </div>
+                    <div class="mx-4 flex items-center">
+                        <div class="ltr:mr-1 rtl:ml-1">Z</div>
+                        <div class="value">{{ z }}</div>
+                    </div>
                 </div>
-                <div class="flex items-center mx-4">
-                    <div class="rtl:ml-1 ltr:mr-1">Z</div>
-                    <div class="value">{{ z }}</div>
+                <div class="px-4">
+                    <input type="range" v-model="z" min="1" max="10" step="0.1" class="mb-4 w-full" />
+                    <div class="mb-2 flex flex-wrap items-center justify-center">
+                        <button type="button" class="btn mb-2" @click.prevent="close">{{ __('Cancel') }}</button>
+                        <button type="button" class="btn btn-default mx-2 mb-2" @click.prevent="reset">
+                            {{ __('Reset') }}
+                        </button>
+                        <button type="button" class="btn btn-primary mb-2" @click="select">{{ __('Finish') }}</button>
+                    </div>
                 </div>
+                <h6 class="rounded-b bg-gray-300 p-4 text-center dark:border-dark-200 dark:bg-dark-550">
+                    {{ __('messages.focal_point_previews_are_examples') }}
+                </h6>
             </div>
-            <div class="px-4">
-                <input type="range" v-model="z" min="1" max="10" step="0.1" class="w-full mb-4" />
-                <div class="mb-2 flex flex-wrap items-center justify-center">
-                    <button type="button" class="btn mb-2" @click.prevent="close">{{ __('Cancel') }}</button>
-                    <button type="button" class="btn mb-2 btn-default mx-2" @click.prevent="reset">{{ __('Reset') }}</button>
-                    <button type="button" class="btn mb-2 btn-primary" @click="select">{{ __('Finish') }}</button>
-                </div>
+            <div v-for="n in 9" :key="n" :class="`frame frame-${n}`">
+                <focal-point-preview-frame
+                    v-if="imageDimensions"
+                    :x="x"
+                    :y="y"
+                    :z="z"
+                    :image-url="image"
+                    :image-dimensions="imageDimensions"
+                />
             </div>
-            <h6 class="p-4 text-center bg-gray-300 dark:bg-dark-550 rounded-b dark:border-dark-200">{{ __('messages.focal_point_previews_are_examples') }}</h6>
-        </div>
-        <div v-for="n in 9" :key="n"
-             :class="`frame frame-${n}`">
-            <focal-point-preview-frame v-if="imageDimensions" :x="x" :y="y" :z="z" :image-url="image" :image-dimensions="imageDimensions" />
         </div>
-    </div>
     </portal>
-
 </template>
 
 <script>
 import FocalPointPreviewFrame from './FocalPointPreviewFrame.vue';
 
 export default {
-
     components: {
         FocalPointPreviewFrame,
     },
 
-
     props: [
-        'data',   // The initial focus point data stored in the asset, if applicable.
-        'image'   // The url of the image.
+        'data', // The initial focus point data stored in the asset, if applicable.
+        'image', // The url of the image.
     ],
 
-
     data() {
         return {
             x: 50,
             y: 50,
             z: 1,
             imageDimensions: null,
-        }
+        };
     },
 
-
     mounted() {
         const initial = this.data || '50-50-1';
         const coords = initial.split('-');
@@ -85,18 +93,14 @@ export default {
         this.z = coords[2] || 1;
     },
 
-
     computed: {
-
         reticleSize() {
             if (!this.imageDimensions || !this.z) return 0;
             const smaller = Math.min(this.imageDimensions.w, this.imageDimensions.h);
             return smaller / this.z;
         },
-
     },
 
-
     methods: {
         setImageDimensions() {
             const image = this.$refs.image;
@@ -112,8 +116,8 @@ export default {
             var offsetX = e.clientX - rect.left;
             var offsetY = e.clientY - rect.top;
 
-            this.x = ((offsetX/imageW)*100).toFixed();
-            this.y = ((offsetY/imageH)*100).toFixed();
+            this.x = ((offsetX / imageW) * 100).toFixed();
+            this.y = ((offsetY / imageH) * 100).toFixed();
         },
 
         select() {
@@ -129,9 +133,7 @@ export default {
             this.x = 50;
             this.y = 50;
             this.z = 1;
-        }
-
-    }
-
-}
+        },
+    },
+};
 </script>
diff --git a/resources/js/components/assets/Editor/FocalPointPreviewFrame.vue b/resources/js/components/assets/Editor/FocalPointPreviewFrame.vue
index 8c76b986f5..ebd3b6e88d 100644
--- a/resources/js/components/assets/Editor/FocalPointPreviewFrame.vue
+++ b/resources/js/components/assets/Editor/FocalPointPreviewFrame.vue
@@ -1,42 +1,39 @@
 <template>
-    <div class="frame-image" ref="frame" :style="{ backgroundImage: `url('${encodeURI(imageUrl)}')`, backgroundPosition: backgroundPosition, transform: `scale(${z})`, transformOrigin: transformOrigin }"
+    <div
+        class="frame-image"
+        ref="frame"
+        :style="{
+            backgroundImage: `url('${encodeURI(imageUrl)}')`,
+            backgroundPosition: backgroundPosition,
+            transform: `scale(${z})`,
+            transformOrigin: transformOrigin,
+        }"
     />
 </template>
 
 <script>
 export default {
-
-    props: [
-        'x',
-        'y',
-        'z',
-        'imageUrl',
-        'imageDimensions'
-    ],
-
+    props: ['x', 'y', 'z', 'imageUrl', 'imageDimensions'],
 
     data() {
         return {
             frameDimensions: {
                 w: 100,
-                h: 100
-            }
+                h: 100,
+            },
         };
     },
 
-
     mounted() {
         const frame = this.$refs['frame'];
         // this is not responsive, but w/e
         this.frameDimensions = {
             w: frame.clientWidth,
-            h: frame.clientHeight
+            h: frame.clientHeight,
         };
     },
 
-
     computed: {
-
         // the dimensions of the image when used as a background of the frame so that it's shorter dimensions matches the frame dimension along that axis
         bgImageDimensions() {
             const ratio = ({ w, h }) => w / h;
@@ -46,18 +43,14 @@ export default {
                     // background image will be the same height as the frame
                     h: this.frameDimensions.h,
                     // width of the background image is proportional to the scaling of the heights
-                    w:
-                        (this.frameDimensions.h / this.imageDimensions.h) *
-                        this.imageDimensions.w,
+                    w: (this.frameDimensions.h / this.imageDimensions.h) * this.imageDimensions.w,
                 };
             } else {
                 return {
                     // background image will be the same width as the frame
                     w: this.frameDimensions.w,
                     // height of the background image is proportional to the scaling of the widths
-                    h:
-                        (this.frameDimensions.w / this.imageDimensions.w) *
-                        this.imageDimensions.h,
+                    h: (this.frameDimensions.w / this.imageDimensions.w) * this.imageDimensions.h,
                 };
             }
         },
@@ -107,17 +100,11 @@ export default {
         // this has to be calculated because the focal point is not the center of the frame.
         transformOrigin() {
             const origin = {
-                x:
-                    ((this.x - this.relOffsetLeft) / this.frameWidthPercent) *
-                    100,
-                y:
-                    ((this.y - this.relOffsetTop) / this.frameHeightPercent) *
-                    100,
+                x: ((this.x - this.relOffsetLeft) / this.frameWidthPercent) * 100,
+                y: ((this.y - this.relOffsetTop) / this.frameHeightPercent) * 100,
             };
             return `${origin.x}% ${origin.y}%`;
-        }
-
-    }
-
+        },
+    },
 };
-</script>
\ No newline at end of file
+</script>
diff --git a/resources/js/components/assets/Editor/PdfViewer.vue b/resources/js/components/assets/Editor/PdfViewer.vue
index e34f53884e..cae6bf30cc 100644
--- a/resources/js/components/assets/Editor/PdfViewer.vue
+++ b/resources/js/components/assets/Editor/PdfViewer.vue
@@ -1,20 +1,19 @@
 <template>
-    <div id="pdfViewer" class="h-full text-white text-center flex flex-col justify-center items-center"></div>
+    <div id="pdfViewer" class="flex h-full flex-col items-center justify-center text-center text-white"></div>
 </template>
 
 <script>
 import PDFObject from 'pdfobject';
 
 export default {
-
     props: {
         src: {
-            required: true
-        }
+            required: true,
+        },
     },
 
     mounted() {
-        PDFObject.embed(this.src, "#pdfViewer");
+        PDFObject.embed(this.src, '#pdfViewer');
     },
-}
+};
 </script>
diff --git a/resources/js/components/assets/Selector.vue b/resources/js/components/assets/Selector.vue
index 1244cfcdb0..7dd9fe2cef 100644
--- a/resources/js/components/assets/Selector.vue
+++ b/resources/js/components/assets/Selector.vue
@@ -1,55 +1,46 @@
 <template>
+    <div class="flex h-full flex-col justify-end bg-white dark:bg-dark-800">
+        <div class="flex-1 overflow-scroll">
+            <asset-browser
+                :initial-container="container"
+                :initial-per-page="$config.get('paginationSize')"
+                :selected-path="folder"
+                :selected-assets="browserSelections"
+                :restrict-folder-navigation="restrictFolderNavigation"
+                :max-files="maxFiles"
+                :query-scopes="queryScopes"
+                :autoselect-uploads="true"
+                :autofocus-search="true"
+                allow-selecting-existing-upload
+                @selections-updated="selectionsUpdated"
+                @asset-doubleclicked="select"
+            >
+                <template slot="contextual-actions" v-if="browserSelections.length">
+                    <button class="btn action mb-6" @click="browserSelections = []">{{ __('Uncheck All') }}</button>
+                </template>
+            </asset-browser>
+        </div>
 
-        <div class="flex flex-col justify-end h-full bg-white dark:bg-dark-800">
-
-            <div class="flex-1 overflow-scroll">
-                <asset-browser
-                    :initial-container="container"
-                    :initial-per-page="$config.get('paginationSize')"
-                    :selected-path="folder"
-                    :selected-assets="browserSelections"
-                    :restrict-folder-navigation="restrictFolderNavigation"
-                    :max-files="maxFiles"
-                    :query-scopes="queryScopes"
-                    :autoselect-uploads="true"
-                    :autofocus-search="true"
-                    allow-selecting-existing-upload
-                    @selections-updated="selectionsUpdated"
-                    @asset-doubleclicked="select"
-                >
-
-                    <template slot="contextual-actions" v-if="browserSelections.length">
-                        <button class="btn action mb-6" @click="browserSelections = []">{{ __('Uncheck All') }}</button>
-                    </template>
-
-                </asset-browser>
-            </div>
-
-            <div class="p-4 border-t dark:border-dark-200 flex items-center justify-between bg-gray-200 dark:bg-dark-500">
-                <div class="text-sm text-gray-700"
-                    v-text="hasMaxFiles
+        <div class="flex items-center justify-between border-t bg-gray-200 p-4 dark:border-dark-200 dark:bg-dark-500">
+            <div
+                class="text-sm text-gray-700"
+                v-text="
+                    hasMaxFiles
                         ? __n(':count/:max selected', browserSelections, { max: maxFiles })
-                        : __n(':count selected|:count selected', browserSelections)">
-                </div>
-                <div>
-                    <button
-                        type="button"
-                        class="btn"
-                        @click="close">
-                        {{ __('Cancel') }}
-                    </button>
-
-                    <button
-                        type="button"
-                        class="btn-primary rtl:mr-2 ltr:ml-2"
-                        @click="select">
-                        {{ __('Select') }}
-                    </button>
-                </div>
+                        : __n(':count selected|:count selected', browserSelections)
+                "
+            ></div>
+            <div>
+                <button type="button" class="btn" @click="close">
+                    {{ __('Cancel') }}
+                </button>
+
+                <button type="button" class="btn-primary ltr:ml-2 rtl:mr-2" @click="select">
+                    {{ __('Select') }}
+                </button>
             </div>
-
         </div>
-
+    </div>
 </template>
 
 <script>
@@ -64,40 +55,34 @@ export default {
             type: Boolean,
             default() {
                 return false;
-            }
-        }
+            },
+        },
     },
 
-
     data() {
         return {
             // We will initialize the browser component with the selections, but not pass in the selections directly.
             // We only want selection changes to be reflected in the fieldtype once the user is ready to commit
             // them. They should be able to cancel at any time and have their updated selections discarded.
-            browserSelections: this.selected
-        }
+            browserSelections: this.selected,
+        };
     },
 
     computed: {
-
         hasMaxFiles() {
-            return (this.maxFiles === Infinity) ? false : Boolean(this.maxFiles);
-        }
-
+            return this.maxFiles === Infinity ? false : Boolean(this.maxFiles);
+        },
     },
 
     watch: {
-
         browserSelections(selections) {
             if (this.maxFiles === 1 && selections.length === 1) {
                 this.select();
             }
         },
-
     },
 
     methods: {
-
         /**
          * Confirm the updated selections
          */
@@ -118,9 +103,7 @@ export default {
          */
         selectionsUpdated(selections) {
             this.browserSelections = selections;
-        }
-
-    }
-
+        },
+    },
 };
 </script>
diff --git a/resources/js/components/assets/Upload.vue b/resources/js/components/assets/Upload.vue
index 8fb5b5a3b7..da4cada3bc 100644
--- a/resources/js/components/assets/Upload.vue
+++ b/resources/js/components/assets/Upload.vue
@@ -1,34 +1,35 @@
 <template>
-
-    <div class="flex items-center my-4" :class="{'text-red-500': status == 'error'}">
-
-        <div class="flex items-center flex-1">
+    <div class="my-4 flex items-center" :class="{ 'text-red-500': status == 'error' }">
+        <div class="flex flex-1 items-center">
             <div class="mx-2 flex items-center">
-                <svg-icon name="micro/warning" class="text-red-500 h-4 w-4" v-if="status === 'error'" />
+                <svg-icon name="micro/warning" class="h-4 w-4 text-red-500" v-if="status === 'error'" />
                 <loading-graphic v-else :inline="true" text="" />
             </div>
 
             <div class="filename">{{ basename }}</div>
         </div>
 
-        <div
-            v-if="status !== 'error'"
-            class="bg-white flex-1 h-4 mx-2 rounded"
-        >
-            <div class="bg-blue h-full rounded"
-                :style="{ width: percent+'%' }" />
+        <div v-if="status !== 'error'" class="mx-2 h-4 flex-1 rounded bg-white">
+            <div class="h-full rounded bg-blue" :style="{ width: percent + '%' }" />
         </div>
 
-        <div class="ml-4 px-2 flex items-center gap-2" v-if="status === 'error'">
+        <div class="ml-4 flex items-center gap-2 px-2" v-if="status === 'error'">
             {{ error }}
             <dropdown-list v-if="errorStatus === 409">
                 <template #trigger>
-                    <button class="ml-4 btn btn-xs" v-text="`${__('Fix')}...`" />
+                    <button class="btn btn-xs ml-4" v-text="`${__('Fix')}...`" />
                 </template>
                 <dropdown-item @click="retryAndOverwrite" :text="__('messages.uploader_overwrite_existing')" />
-                <dropdown-item @click="openNewFilenameModal" :text="`${__('messages.uploader_choose_new_filename')}...`" />
+                <dropdown-item
+                    @click="openNewFilenameModal"
+                    :text="`${__('messages.uploader_choose_new_filename')}...`"
+                />
                 <dropdown-item @click="retryWithTimestamp" :text="__('messages.uploader_append_timestamp')" />
-                <dropdown-item @click="selectExisting" v-if="allowSelectingExisting" :text="__('messages.uploader_discard_use_existing')" />
+                <dropdown-item
+                    @click="selectExisting"
+                    v-if="allowSelectingExisting"
+                    :text="__('messages.uploader_discard_use_existing')"
+                />
             </dropdown-list>
             <button class="btn btn-xs" @click="clear" v-text="__('Discard')" />
         </div>
@@ -41,15 +42,11 @@
         >
             <text-input autoselect v-model="newFilename" @keydown.enter="confirmNewFilename" />
         </confirmation-modal>
-
     </div>
-
 </template>
 
-
 <script>
 export default {
-
     props: {
         extension: String,
         basename: String,
@@ -63,11 +60,10 @@ export default {
         return {
             showNewFilenameModal: false,
             newFilename: '',
-        }
+        };
     },
 
     computed: {
-
         status() {
             if (this.error) {
                 return 'error';
@@ -76,13 +72,10 @@ export default {
             } else {
                 return 'uploading';
             }
-        }
-
+        },
     },
 
-
     methods: {
-
         clear() {
             this.$emit('clear');
         },
@@ -106,14 +99,12 @@ export default {
         },
 
         retryWithNewFilename() {
-            this.$emit('retry', { option: 'rename', filename: this.newFilename})
+            this.$emit('retry', { option: 'rename', filename: this.newFilename });
         },
 
         selectExisting() {
             this.$emit('existing-selected');
-        }
-
-    }
-
-}
+        },
+    },
+};
 </script>
diff --git a/resources/js/components/assets/Uploader.vue b/resources/js/components/assets/Uploader.vue
index 10da51639a..2a8021b1d7 100644
--- a/resources/js/components/assets/Uploader.vue
+++ b/resources/js/components/assets/Uploader.vue
@@ -4,82 +4,75 @@ import uniqid from 'uniqid';
 import { h } from 'vue';
 
 export default {
-
     render() {
         const fileField = h('input', {
             class: { hidden: true },
             attrs: { type: 'file', multiple: true },
-            ref: 'nativeFileField'
+            ref: 'nativeFileField',
         });
 
-        return h('div', { on: {
-            'dragenter': this.dragenter,
-            'dragover': this.dragover,
-            'dragleave': this.dragleave,
-            'drop': this.drop,
-        }}, [
-            h('div', { class: { 'pointer-events-none': this.dragging }}, [
-                fileField,
-                ...this.$slots.default({ dragging: this.enabled ? this.dragging : false })
-            ])
-        ]);
+        return h(
+            'div',
+            {
+                on: {
+                    dragenter: this.dragenter,
+                    dragover: this.dragover,
+                    dragleave: this.dragleave,
+                    drop: this.drop,
+                },
+            },
+            [
+                h('div', { class: { 'pointer-events-none': this.dragging } }, [
+                    fileField,
+                    ...this.$slots.default({ dragging: this.enabled ? this.dragging : false }),
+                ]),
+            ],
+        );
     },
 
-
     props: {
         enabled: {
             type: Boolean,
-            default: () => true
+            default: () => true,
         },
         container: String,
         path: String,
         url: { type: String, default: () => cp_url('assets') },
         extraData: {
             type: Object,
-            default: () => ({})
-        }
+            default: () => ({}),
+        },
     },
 
-
     data() {
         return {
             dragging: false,
-            uploads: []
-        }
+            uploads: [],
+        };
     },
 
-
     mounted() {
         this.$refs.nativeFileField.addEventListener('change', this.addNativeFileFieldSelections);
     },
 
-
     beforeUnmount() {
         this.$refs.nativeFileField.removeEventListener('change', this.addNativeFileFieldSelections);
     },
 
-
     watch: {
-
         uploads(uploads) {
             this.$emit('updated', uploads);
             this.processUploadQueue();
-        }
-
+        },
     },
 
-
     computed: {
-
         activeUploads() {
-            return this.uploads.filter(u => u.instance.state === 'started');
-        }
-
+            return this.uploads.filter((u) => u.instance.state === 'started');
+        },
     },
 
-
     methods: {
-
         browse() {
             this.$refs.nativeFileField.click();
         },
@@ -140,7 +133,7 @@ export default {
                         this.addFilesFromDirectory(entry, entry.name);
                     }
                 } else if (item.getAsFile) {
-                    if (item.kind === "file" || ! item.kind) {
+                    if (item.kind === 'file' || !item.kind) {
                         this.addFile(item.getAsFile());
                     }
                 }
@@ -149,28 +142,29 @@ export default {
 
         addFilesFromDirectory(directory, path) {
             const reader = directory.createReader();
-            const readEntries = () => reader.readEntries((entries) => {
-                if (!entries.length) return;
-                for (let entry of entries) {
-                    if (entry.isFile) {
-                        entry.file((file) => {
-                            if (! file.name.startsWith('.')) {
-                                file.relativePath = path;
-                                this.addFile(file);
-                            }
-                        });
-                    } else if (entry.isDirectory) {
-                        this.addFilesFromDirectory(entry, `${path}/${entry.name}`);
+            const readEntries = () =>
+                reader.readEntries((entries) => {
+                    if (!entries.length) return;
+                    for (let entry of entries) {
+                        if (entry.isFile) {
+                            entry.file((file) => {
+                                if (!file.name.startsWith('.')) {
+                                    file.relativePath = path;
+                                    this.addFile(file);
+                                }
+                            });
+                        } else if (entry.isDirectory) {
+                            this.addFilesFromDirectory(entry, `${path}/${entry.name}`);
+                        }
                     }
-                }
-                // Handle directories with more than 100 files in Chrome
-                readEntries();
-            }, console.error);
+                    // Handle directories with more than 100 files in Chrome
+                    readEntries();
+                }, console.error);
             return readEntries();
         },
 
         addFile(file, data = {}) {
-            if (! this.enabled) return;
+            if (!this.enabled) return;
 
             const id = uniqid();
             const upload = this.makeUpload(id, file, data);
@@ -183,16 +177,16 @@ export default {
                 errorMessage: null,
                 errorStatus: null,
                 instance: upload,
-                retry: (opts) => this.retry(id, opts)
+                retry: (opts) => this.retry(id, opts),
             });
         },
 
         findUpload(id) {
-            return this.uploads.find(u => u.id === id);
+            return this.uploads.find((u) => u.id === id);
         },
 
         findUploadIndex(id) {
-            return this.uploads.findIndex(u => u.id === id);
+            return this.uploads.findIndex((u) => u.id === id);
         },
 
         makeUpload(id, file, data = {}) {
@@ -200,11 +194,11 @@ export default {
                 url: this.url,
                 form: this.makeFormData(file, data),
                 headers: {
-                    Accept: 'application/json'
-                }
+                    Accept: 'application/json',
+                },
             });
 
-            upload.on('progress', progress => {
+            upload.on('progress', (progress) => {
                 this.findUpload(id).percent = progress * 100;
             });
 
@@ -225,8 +219,8 @@ export default {
                 ...this.extraData,
                 container: this.container,
                 folder: this.path,
-                _token: Statamic.$config.get('csrfToken')
-            }
+                _token: Statamic.$config.get('csrfToken'),
+            };
 
             for (let key in parameters) {
                 form.append(key, parameters[key]);
@@ -244,12 +238,12 @@ export default {
             if (this.activeUploads.length) return;
 
             // Make sure we're not grabbing a running or failed upload
-            const upload = this.uploads.find(u => u.instance.state === 'new' && !u.errorMessage);
+            const upload = this.uploads.find((u) => u.instance.state === 'new' && !u.errorMessage);
             if (!upload) return;
 
             const id = upload.id;
 
-            upload.instance.upload().then(response => {
+            upload.instance.upload().then((response) => {
                 let json = null;
 
                 try {
@@ -274,7 +268,7 @@ export default {
         handleUploadError(id, status, response) {
             const upload = this.findUpload(id);
             let msg = response?.message;
-            if (! msg) {
+            if (!msg) {
                 if (status === 413) {
                     msg = __('Upload failed. The file is larger than is allowed by your server.');
                 } else {
@@ -295,8 +289,7 @@ export default {
             let file = this.findUpload(id).instance.form.get('file');
             this.addFile(file, args);
             this.uploads.splice(this.findUploadIndex(id), 1);
-        }
-    }
-
-}
+        },
+    },
+};
 </script>
diff --git a/resources/js/components/assets/Uploads.vue b/resources/js/components/assets/Uploads.vue
index 58df3dc98c..6dad3a8d87 100644
--- a/resources/js/components/assets/Uploads.vue
+++ b/resources/js/components/assets/Uploads.vue
@@ -1,6 +1,5 @@
 <template>
-
-    <div class="bg-gray-400 dark:bg-dark-800 text-xs p-2">
+    <div class="bg-gray-400 p-2 text-xs dark:bg-dark-800">
         <upload
             v-for="(upload, i) in uploads"
             :key="upload.id"
@@ -15,28 +14,22 @@
             @existing-selected="existingSelected(i)"
         />
     </div>
-
 </template>
 
-
 <script>
 import Upload from './Upload.vue';
 
 export default {
-
     props: {
         uploads: Array,
         allowSelectingExisting: Boolean,
     },
 
-
     components: {
-        Upload
+        Upload,
     },
 
-
     methods: {
-
         clearUpload(i) {
             this.uploads.splice(i, 1);
         },
@@ -48,9 +41,7 @@ export default {
         existingSelected(i) {
             this.$emit('existing-selected', this.uploads[i]);
             this.clearUpload(i);
-        }
-
-    }
-
-}
+        },
+    },
+};
 </script>
diff --git a/resources/js/components/blueprints/BlueprintResetter.vue b/resources/js/components/blueprints/BlueprintResetter.vue
index f7d983b0d1..f5e8dff31b 100644
--- a/resources/js/components/blueprints/BlueprintResetter.vue
+++ b/resources/js/components/blueprints/BlueprintResetter.vue
@@ -14,23 +14,22 @@
 
 <script>
 export default {
-
     props: {
         resource: {
-            type: Object
+            type: Object,
         },
         resourceTitle: {
-            type: String
+            type: String,
         },
         route: {
             type: String,
         },
         redirect: {
-            type: String
+            type: String,
         },
         reload: {
-            type: Boolean
-        }
+            type: Boolean,
+        },
     },
 
     data() {
@@ -38,7 +37,7 @@ export default {
             resetting: false,
             redirectFromServer: null,
             submitting: false,
-        }
+        };
     },
 
     computed: {
@@ -47,7 +46,7 @@ export default {
         },
 
         modalTitle() {
-            return __('Reset :resource', {resource: this.title});
+            return __('Reset :resource', { resource: this.title });
         },
 
         modalBody() {
@@ -56,7 +55,7 @@ export default {
 
         resetUrl() {
             let url = data_get(this.resource, 'reset_url', this.route);
-            if (! url) console.error('BlueprintResetter cannot find reset url');
+            if (!url) console.error('BlueprintResetter cannot find reset url');
             return url;
         },
 
@@ -73,8 +72,9 @@ export default {
         confirmed() {
             this.submitting = true;
 
-            this.$axios.delete(this.resetUrl)
-                .then(response => {
+            this.$axios
+                .delete(this.resetUrl)
+                .then((response) => {
                     this.redirectFromServer = data_get(response, 'data.redirect');
                     this.success();
                 })
@@ -102,7 +102,7 @@ export default {
 
         cancel() {
             this.resetting = false;
-        }
-    }
-}
+        },
+    },
+};
 </script>
diff --git a/resources/js/components/blueprints/Builder.vue b/resources/js/components/blueprints/Builder.vue
index 314a291858..e213948207 100644
--- a/resources/js/components/blueprints/Builder.vue
+++ b/resources/js/components/blueprints/Builder.vue
@@ -1,7 +1,5 @@
 <template>
-
     <div class="blueprint-builder">
-
         <header class="mb-6">
             <div class="flex items-center justify-between">
                 <h1 v-text="__('Edit Blueprint')" />
@@ -9,18 +7,29 @@
             </div>
         </header>
 
-        <div class="publish-form card p-0 @container mb-8" v-if="showTitle">
+        <div class="publish-form card mb-8 p-0 @container" v-if="showTitle">
             <div class="publish-fields">
                 <div class="form-group config-field">
                     <div class="field-inner">
                         <label class="block">{{ __('Title') }}</label>
                         <p class="help-block">{{ __('messages.blueprints_title_instructions') }}</p>
                         <div v-if="errors.title">
-                            <p class="help-block text-red-500" v-for="(error, i) in errors.title" :key="i" v-text="error" />
+                            <p
+                                class="help-block text-red-500"
+                                v-for="(error, i) in errors.title"
+                                :key="i"
+                                v-text="error"
+                            />
                         </div>
                     </div>
                     <div>
-                        <input type="text" name="title" class="input-text" v-model="blueprint.title" autofocus="autofocus">
+                        <input
+                            type="text"
+                            name="title"
+                            class="input-text"
+                            v-model="blueprint.title"
+                            autofocus="autofocus"
+                        />
                     </div>
                 </div>
 
@@ -29,7 +38,12 @@
                         <label class="block">{{ __('Hidden') }}</label>
                         <p class="help-block">{{ __('messages.blueprints_hidden_instructions') }}</p>
                         <div v-if="errors.hidden">
-                            <p class="help-block text-red-500" v-for="(error, i) in errors.hidden" :key="i" v-text="error" />
+                            <p
+                                class="help-block text-red-500"
+                                v-for="(error, i) in errors.hidden"
+                                :key="i"
+                                v-text="error"
+                            />
                         </div>
                     </div>
                     <div>
@@ -46,18 +60,15 @@
             :can-define-localizable="canDefineLocalizable"
             @updated="tabsUpdated"
         />
-
     </div>
-
 </template>
 
 <script>
 import SuggestsConditionalFields from './SuggestsConditionalFields';
 import Tabs from './Tabs.vue';
-import CanDefineLocalizable from "../fields/CanDefineLocalizable";
+import CanDefineLocalizable from '../fields/CanDefineLocalizable';
 
 export default {
-
     mixins: [SuggestsConditionalFields, CanDefineLocalizable],
 
     components: {
@@ -75,20 +86,18 @@ export default {
     data() {
         return {
             blueprint: this.initializeBlueprint(),
-            errors: {}
-        }
+            errors: {},
+        };
     },
 
     computed: {
-
         tabs() {
             return this.blueprint.tabs;
-        }
-
+        },
     },
 
     created() {
-        this.$keys.bindGlobal(['mod+s'], e => {
+        this.$keys.bindGlobal(['mod+s'], (e) => {
             e.preventDefault();
             this.save();
         });
@@ -99,22 +108,19 @@ export default {
     },
 
     watch: {
-
         blueprint: {
             deep: true,
             handler() {
                 this.$dirty.add('blueprints');
-            }
-        }
-
+            },
+        },
     },
 
     methods: {
-
         initializeBlueprint() {
             let blueprint = clone(this.initialBlueprint);
 
-            if (! this.showTitle) delete blueprint.title;
+            if (!this.showTitle) delete blueprint.title;
 
             return blueprint;
         },
@@ -126,20 +132,18 @@ export default {
         save() {
             // this.$axios[this.method](this.action, this.fieldset)
             this.$axios['patch'](this.action, this.blueprint)
-                .then(response => this.saved(response))
-                .catch(e => {
+                .then((response) => this.saved(response))
+                .catch((e) => {
                     this.$toast.error(e.response.data.message);
                     this.errors = e.response.data.errors;
-                })
+                });
         },
 
         saved(response) {
             this.$toast.success(__('Saved'));
             this.errors = {};
             this.$dirty.remove('blueprints');
-        }
-
-    }
-
-}
+        },
+    },
+};
 </script>
diff --git a/resources/js/components/blueprints/Field.vue b/resources/js/components/blueprints/Field.vue
index ef53d41dde..720c8ed2ba 100644
--- a/resources/js/components/blueprints/Field.vue
+++ b/resources/js/components/blueprints/Field.vue
@@ -1,20 +1,18 @@
 <script>
 export default {
-
     props: {
         field: {
             type: Object,
-            required: true
+            required: true,
         },
         isRoot: {
             type: Boolean,
-            default: true
+            default: true,
         },
         fields: {
             type: Array,
         },
-        isEditing: Boolean
-    }
-
-}
+        isEditing: Boolean,
+    },
+};
 </script>
diff --git a/resources/js/components/blueprints/Fields.vue b/resources/js/components/blueprints/Fields.vue
index 9b5e8d3fa0..3ebbf1d7d5 100644
--- a/resources/js/components/blueprints/Fields.vue
+++ b/resources/js/components/blueprints/Fields.vue
@@ -1,9 +1,8 @@
 <template>
-
     <div class="flex flex-col text-sm">
-
-        <div class="blueprint-section-draggable-zone -mx-1"
-            :class="{ 'flex flex-wrap flex-1': fields.length }"
+        <div
+            class="blueprint-section-draggable-zone -mx-1"
+            :class="{ 'flex flex-1 flex-wrap': fields.length }"
             :data-tab="tabId"
             :data-section="sectionId"
         >
@@ -26,29 +25,29 @@
             />
         </div>
 
-        <div class="blueprint-section-field-actions flex mt-2 -mx-1">
+        <div class="blueprint-section-field-actions -mx-1 mt-2 flex">
             <div class="px-1">
-                <link-fields
-                    :exclude-fieldset="excludeFieldset"
-                    @linked="$emit('field-linked', $event)" />
+                <link-fields :exclude-fieldset="excludeFieldset" @linked="$emit('field-linked', $event)" />
             </div>
             <div class="px-1">
-                <button class="btn w-full flex justify-center items-center" @click="isSelectingNewFieldtype = true;">
-                    <svg-icon name="light/wireframe" class="rtl:ml-2 ltr:mr-2 w-4 h-4" />
+                <button class="btn flex w-full items-center justify-center" @click="isSelectingNewFieldtype = true">
+                    <svg-icon name="light/wireframe" class="h-4 w-4 ltr:mr-2 rtl:ml-2" />
                     {{ __('Create Field') }}
                 </button>
             </div>
         </div>
 
-        <stack name="fieldtype-selector"
+        <stack
+            name="fieldtype-selector"
             v-if="isSelectingNewFieldtype"
             @closed="isSelectingNewFieldtype = false"
-           v-slot="{ close }"
+            v-slot="{ close }"
         >
             <fieldtype-selector @closed="close" @selected="fieldtypeSelected" />
         </stack>
 
-        <stack name="field-settings"
+        <stack
+            name="field-settings"
             v-if="pendingCreatedField != null"
             @closed="pendingCreatedField = null"
             v-slot="{ close }"
@@ -65,9 +64,7 @@
                 @closed="close"
             />
         </stack>
-
     </div>
-
 </template>
 
 <script>
@@ -80,7 +77,6 @@ import FieldSettings from '../fields/Settings.vue';
 import CanDefineLocalizable from '../fields/CanDefineLocalizable';
 
 export default {
-
     mixins: [CanDefineLocalizable],
 
     components: {
@@ -108,13 +104,12 @@ export default {
         return {
             isSelectingNewFieldtype: false,
             pendingCreatedField: null,
-        }
+        };
     },
 
     methods: {
-
         fieldComponent(field) {
-            return (field.type === 'import') ? 'ImportField' : 'RegularField';
+            return field.type === 'import' ? 'ImportField' : 'RegularField';
         },
 
         fieldtypeSelected(field) {
@@ -128,10 +123,10 @@ export default {
                 config: {
                     ...field,
                     isNew: true,
-                }
+                },
             };
 
-            this.$nextTick(() => this.pendingCreatedField = pending);
+            this.$nextTick(() => (this.pendingCreatedField = pending));
         },
 
         fieldCreated(created) {
@@ -142,7 +137,7 @@ export default {
             let field = {
                 ...this.pendingCreatedField,
                 ...{ handle },
-                config: created
+                config: created,
             };
 
             this.$emit('field-created', field);
@@ -162,13 +157,11 @@ export default {
                 config: {
                     ...field.config,
                     display,
-                }
+                },
             };
 
-            this.$nextTick(() => this.pendingCreatedField = pending);
+            this.$nextTick(() => (this.pendingCreatedField = pending));
         },
-
-    }
-
-}
+    },
+};
 </script>
diff --git a/resources/js/components/blueprints/ImportField.vue b/resources/js/components/blueprints/ImportField.vue
index 047525157e..ad9a8a27c4 100644
--- a/resources/js/components/blueprints/ImportField.vue
+++ b/resources/js/components/blueprints/ImportField.vue
@@ -1,18 +1,28 @@
 <template>
-
     <div class="blueprint-section-field blueprint-section-import blueprint-section-field-w-full">
         <div class="blueprint-section-field-inner">
-            <div class="blueprint-drag-handle w-4 ltr:border-r rtl:border-l dark:border-dark-300"></div>
+            <div class="blueprint-drag-handle w-4 dark:border-dark-300 ltr:border-r rtl:border-l"></div>
             <div class="flex flex-1 items-center justify-between">
-                <div class="flex items-center flex-1 rtl:pl-4 ltr:pr-4 py-2 rtl:pr-2 ltr:pl-2">
-                    <svg-icon class="flex-none text-gray-700 dark:text-dark-150 h-4 w-4 rtl:ml-2 ltr:mr-2" name="paperclip" v-tooltip="__('Linked fieldset')" />
+                <div class="flex flex-1 items-center py-2 ltr:pl-2 ltr:pr-4 rtl:pl-4 rtl:pr-2">
+                    <svg-icon
+                        class="h-4 w-4 flex-none text-gray-700 dark:text-dark-150 ltr:mr-2 rtl:ml-2"
+                        name="paperclip"
+                        v-tooltip="__('Linked fieldset')"
+                    />
                     <a class="break-all" @click="$emit('edit')">
                         <span v-text="__('Fieldset')" />
-                        <span class="font-mono text-3xs text-gray-600 dark:text-dark-175 rtl:mr-2 ltr:ml-2">{{ field.fieldset }}</span>
+                        <span class="font-mono text-3xs text-gray-600 dark:text-dark-175 ltr:ml-2 rtl:mr-2">{{
+                            field.fieldset
+                        }}</span>
                     </a>
                 </div>
-                <div class="flex-none rtl:pl-2 ltr:pr-2 flex">
-                    <button @click.prevent="$emit('deleted')" class="text-gray-600 dark:text-dark-150 hover:text-gray-950 dark:hover:text-dark-100"><svg-icon name="micro/trash" class="w-4 h-4" /></button>
+                <div class="flex flex-none ltr:pr-2 rtl:pl-2">
+                    <button
+                        @click.prevent="$emit('deleted')"
+                        class="text-gray-600 hover:text-gray-950 dark:text-dark-150 dark:hover:text-dark-100"
+                    >
+                        <svg-icon name="micro/trash" class="h-4 w-4" />
+                    </button>
                     <stack name="field-settings" v-if="isEditing" @closed="editorClosed">
                         <field-settings
                             ref="settings"
@@ -28,7 +38,6 @@
             </div>
         </div>
     </div>
-
 </template>
 
 <script>
@@ -36,21 +45,17 @@ import Field from './Field.vue';
 import FieldSettings from '../fields/ImportSettings.vue';
 
 export default {
-
     mixins: [Field],
 
     components: { FieldSettings },
 
     computed: {
-
         fieldConfig() {
             return _.omit(this.field, ['_id', 'type']);
-        }
-
+        },
     },
 
     methods: {
-
         settingsUpdated(settings) {
             const field = Object.assign({}, this.field, settings);
             this.$emit('updated', field);
@@ -58,9 +63,7 @@ export default {
 
         editorClosed() {
             this.$emit('editor-closed');
-        }
-
-    }
-
-}
+        },
+    },
+};
 </script>
diff --git a/resources/js/components/blueprints/LinkFields.vue b/resources/js/components/blueprints/LinkFields.vue
index 733cdb53d8..7de400933b 100644
--- a/resources/js/components/blueprints/LinkFields.vue
+++ b/resources/js/components/blueprints/LinkFields.vue
@@ -1,29 +1,26 @@
 <template>
-
     <div>
-
-        <button class="btn flex w-full justify-center items-center" @click="open = true">
-            <svg-icon name="light/hyperlink" class="rtl:ml-2 ltr:mr-2 w-4 h-4" />
+        <button class="btn flex w-full items-center justify-center" @click="open = true">
+            <svg-icon name="light/hyperlink" class="h-4 w-4 ltr:mr-2 rtl:ml-2" />
             <span>{{ __('Link Existing') }}</span>
         </button>
 
         <stack narrow v-if="open" @closed="open = false" name="field-linker" v-slot="{ close }">
-            <div class="bg-white dark:bg-dark-800 h-full flex flex-col">
-
-                <div class="bg-gray-200 dark:bg-dark-600 px-6 py-2 border-b border-gray-300 dark:border-dark-900 text-lg font-medium flex items-center justify-between">
+            <div class="flex h-full flex-col bg-white dark:bg-dark-800">
+                <div
+                    class="flex items-center justify-between border-b border-gray-300 bg-gray-200 px-6 py-2 text-lg font-medium dark:border-dark-900 dark:bg-dark-600"
+                >
                     {{ __('Link Fields') }}
-                    <button
-                        type="button"
-                        class="btn-close"
-                        @click="close"
-                        v-html="'&times'" />
+                    <button type="button" class="btn-close" @click="close" v-html="'&times'" />
                 </div>
 
                 <div class="flex-1 overflow-auto p-6">
-
                     <div>
-                        <p class="text-sm font-medium mb-2" v-text="__('Link a single field')" />
-                        <p class="text-2xs text-gray mb-2" v-text="__('Changes to this field in the fieldset will stay in sync.')" />
+                        <p class="mb-2 text-sm font-medium" v-text="__('Link a single field')" />
+                        <p
+                            class="mb-2 text-2xs text-gray"
+                            v-text="__('Changes to this field in the fieldset will stay in sync.')"
+                        />
                         <v-select
                             name="field"
                             :placeholder="__('Fields')"
@@ -31,32 +28,43 @@
                             :multiple="false"
                             :searchable="true"
                             :reduce="(opt) => opt.value"
-                            v-model="reference">
+                            v-model="reference"
+                        >
                             <template v-slot:option="option">
                                 <div class="flex items-center">
-                                    <span v-text="option.fieldset" class="text-2xs text-gray-500 dark:text-dark-150 rtl:ml-2 ltr:mr-2" />
+                                    <span
+                                        v-text="option.fieldset"
+                                        class="text-2xs text-gray-500 dark:text-dark-150 ltr:mr-2 rtl:ml-2"
+                                    />
                                     <span v-text="option.label" />
                                 </div>
                             </template>
                             <template v-slot:no-options>
-                               <div class="text-sm text-gray-700 dark:text-dark-200 rtl:text-right ltr:text-left py-2 px-4" v-text="__('No options to choose from.')" />
-                           </template>
+                                <div
+                                    class="px-4 py-2 text-sm text-gray-700 dark:text-dark-200 ltr:text-left rtl:text-right"
+                                    v-text="__('No options to choose from.')"
+                                />
+                            </template>
                         </v-select>
                         <button
-                            class="btn-primary w-full mt-6"
+                            class="btn-primary mt-6 w-full"
                             :class="{ 'opacity-50': !reference }"
                             :disabled="!reference"
                             @click="linkField"
-                            v-text="__('Link')" />
+                            v-text="__('Link')"
+                        />
                     </div>
                     <div class="my-4 flex items-center">
-                        <div class="border-b border-gray-300 dark:border-dark-200 flex-1" />
-                        <div class="text-2xs text-gray-600 dark:text-dark-175 mx-4" v-text="__('or')"></div>
-                        <div class="border-b border-gray-300 dark:border-dark-200 flex-1" />
+                        <div class="flex-1 border-b border-gray-300 dark:border-dark-200" />
+                        <div class="mx-4 text-2xs text-gray-600 dark:text-dark-175" v-text="__('or')"></div>
+                        <div class="flex-1 border-b border-gray-300 dark:border-dark-200" />
                     </div>
                     <div>
-                        <p class="text-sm font-medium mb-2" v-text="__('Link a fieldset')" />
-                        <p class="text-2xs text-gray dark:text-dark-175 mb-2" v-text="__('Changes to this fieldset will stay in sync.')" />
+                        <p class="mb-2 text-sm font-medium" v-text="__('Link a fieldset')" />
+                        <p
+                            class="mb-2 text-2xs text-gray dark:text-dark-175"
+                            v-text="__('Changes to this fieldset will stay in sync.')"
+                        />
                         <v-select
                             name="field"
                             :placeholder="__('Fieldsets')"
@@ -67,49 +75,53 @@
                             v-model="fieldset"
                         >
                             <template v-slot:no-options>
-                                <div class="text-sm text-gray-700 dark:text-dark-200 rtl:text-right ltr:text-left py-2 px-4" v-text="__('No options to choose from.')" />
+                                <div
+                                    class="px-4 py-2 text-sm text-gray-700 dark:text-dark-200 ltr:text-left rtl:text-right"
+                                    v-text="__('No options to choose from.')"
+                                />
                             </template>
                         </v-select>
-                        <p class="text-sm font-medium mt-6 mb-2" v-text="__('Prefix')" />
-                        <p class="text-2xs text-gray dark:text-dark-175 mb-2" v-text="__('messages.fieldset_link_fields_prefix_instructions')" />
+                        <p class="mb-2 mt-6 text-sm font-medium" v-text="__('Prefix')" />
+                        <p
+                            class="mb-2 text-2xs text-gray dark:text-dark-175"
+                            v-text="__('messages.fieldset_link_fields_prefix_instructions')"
+                        />
                         <text-input v-model="importPrefix" :placeholder="__('e.g. hero_')" />
                         <button
-                            class="btn-primary w-full mt-6"
+                            class="btn-primary mt-6 w-full"
                             :class="{ 'opacity-50': !fieldset }"
                             :disabled="!fieldset"
                             @click="linkFieldset"
-                            v-text="__('Link')" />
+                            v-text="__('Link')"
+                        />
                     </div>
-
                 </div>
-
             </div>
         </stack>
-
     </div>
-
 </template>
 
 <script>
 import uniqid from 'uniqid';
 
 export default {
-
     props: {
-        excludeFieldset: String
+        excludeFieldset: String,
     },
 
     data() {
-        const fieldsets = JSON.parse(JSON.stringify(
-            Object.values(this.$config.get('fieldsets')).filter(fieldset =>
-                fieldset.handle != this.excludeFieldset
-            )
-        ));
-
-        const fieldSuggestions = fieldsets.flatMap(fieldset => {
+        const fieldsets = JSON.parse(
+            JSON.stringify(
+                Object.values(this.$config.get('fieldsets')).filter(
+                    (fieldset) => fieldset.handle != this.excludeFieldset,
+                ),
+            ),
+        );
+
+        const fieldSuggestions = fieldsets.flatMap((fieldset) => {
             return fieldset.fields
-                .filter(field => field.type !== 'import')
-                .map(field => ({
+                .filter((field) => field.type !== 'import')
+                .map((field) => ({
                     value: `${fieldset.handle}.${field.handle}`,
                     label: __(field.config.display),
                     fieldset: __(fieldset.title),
@@ -122,22 +134,21 @@ export default {
             fieldset: null,
             importPrefix: null,
             fieldSuggestions,
-            fieldsetSuggestions: fieldsets.map(fieldset => ({
+            fieldsetSuggestions: fieldsets.map((fieldset) => ({
                 value: fieldset.handle,
                 label: __(fieldset.title),
             })),
             fieldsets,
-        }
+        };
     },
 
     methods: {
-
         linkField() {
             const [fieldsetHandle, fieldHandle] = this.reference.split('.');
 
             const field = this.fieldsets
-                .find(fieldset => fieldset.handle === fieldsetHandle).fields
-                .find(field => field.handle === fieldHandle);
+                .find((fieldset) => fieldset.handle === fieldsetHandle)
+                .fields.find((field) => field.handle === fieldHandle);
 
             field.config.isNew = true;
 
@@ -146,7 +157,7 @@ export default {
                 _id: uniqid(),
                 type: 'reference',
                 field_reference: this.reference,
-                config_overrides: []
+                config_overrides: [],
             });
         },
 
@@ -165,9 +176,7 @@ export default {
             this.reference = null;
             this.fieldset = null;
             this.importPrefix = null;
-        }
-
-    }
-
-}
+        },
+    },
+};
 </script>
diff --git a/resources/js/components/blueprints/Listing.vue b/resources/js/components/blueprints/Listing.vue
index ddc8c41230..81efbb977b 100644
--- a/resources/js/components/blueprints/Listing.vue
+++ b/resources/js/components/blueprints/Listing.vue
@@ -1,13 +1,13 @@
 <template>
     <data-list :visible-columns="columns" :columns="columns" :rows="rows" :sort="false" v-slot="{ filteredRows: rows }">
         <div class="card p-0">
-            <data-list-table
-                :reorderable="reorderable"
-                @reordered="$emit('reordered', $event)"
-            >
+            <data-list-table :reorderable="reorderable" @reordered="$emit('reordered', $event)">
                 <template #cell-title="{ row: blueprint }">
                     <div class="flex items-center">
-                        <div class="little-dot rtl:ml-2 ltr:mr-2" :class="[blueprint.hidden ? 'hollow' : 'bg-green-600']" />
+                        <div
+                            class="little-dot ltr:mr-2 rtl:ml-2"
+                            :class="[blueprint.hidden ? 'hollow' : 'bg-green-600']"
+                        />
                         <a :href="blueprint.edit_url">{{ __(blueprint.title) }}</a>
                     </div>
                 </template>
@@ -25,7 +25,8 @@
                             <resource-deleter
                                 :ref="`deleter_${blueprint.id}`"
                                 :resource="blueprint"
-                                @deleted="removeRow(blueprint)">
+                                @deleted="removeRow(blueprint)"
+                            >
                             </resource-deleter>
                         </dropdown-item>
                     </dropdown-list>
@@ -39,7 +40,6 @@
 import Listing from '../Listing.vue';
 
 export default {
-
     mixins: [Listing],
 
     props: ['initialRows', 'reorderable'],
@@ -51,17 +51,14 @@ export default {
                 { label: __('Title'), field: 'title' },
                 { label: __('Handle'), field: 'handle' },
                 { label: __('Fields'), field: 'fields' },
-            ]
-        }
+            ],
+        };
     },
 
     watch: {
-
         initialRows(rows) {
             this.rows = rows;
-        }
-
-    }
-
-}
+        },
+    },
+};
 </script>
diff --git a/resources/js/components/blueprints/RegularField.vue b/resources/js/components/blueprints/RegularField.vue
index 6d823f7436..7e98e1d0bc 100644
--- a/resources/js/components/blueprints/RegularField.vue
+++ b/resources/js/components/blueprints/RegularField.vue
@@ -1,33 +1,57 @@
 <template>
-
     <div class="blueprint-section-field" :class="widthClass">
         <div class="blueprint-section-field-inner">
             <div class="blueprint-drag-handle"></div>
             <div class="flex flex-1 items-center justify-between">
-                <div class="flex items-center flex-1 rtl:pl-4 ltr:pr-4 py-2 rtl:pr-2 ltr:pl-2">
-                    <svg-icon class="text-gray-800 dark:text-dark-150 rtl:ml-2 ltr:mr-2 h-4 w-4 flex-none" :name="field.icon.startsWith('<svg') ? field.icon : `light/${field.icon}`" v-tooltip="tooltipText" default="light/generic-field" />
+                <div class="flex flex-1 items-center py-2 ltr:pl-2 ltr:pr-4 rtl:pl-4 rtl:pr-2">
+                    <svg-icon
+                        class="h-4 w-4 flex-none text-gray-800 dark:text-dark-150 ltr:mr-2 rtl:ml-2"
+                        :name="field.icon.startsWith('<svg') ? field.icon : `light/${field.icon}`"
+                        v-tooltip="tooltipText"
+                        default="light/generic-field"
+                    />
                     <a class="break-all" v-text="__(labelText)" @click="$emit('edit')" />
-                    <svg-icon name="light/hyperlink" v-if="isReferenceField" class="text-gray-600 dark:text-dark-175 text-3xs rtl:mr-2 ltr:ml-2 h-4 w-4" v-tooltip="__('Imported from fieldset') + ': ' + field.field_reference" />
+                    <svg-icon
+                        name="light/hyperlink"
+                        v-if="isReferenceField"
+                        class="h-4 w-4 text-3xs text-gray-600 dark:text-dark-175 ltr:ml-2 rtl:mr-2"
+                        v-tooltip="__('Imported from fieldset') + ': ' + field.field_reference"
+                    />
                 </div>
-                <div class="flex-none rtl:pl-2 ltr:pr-2 flex">
-                    <width-selector v-if="!isHidden" v-model="width" class="rtl:ml-2 ltr:mr-2" />
+                <div class="flex flex-none ltr:pr-2 rtl:pl-2">
+                    <width-selector v-if="!isHidden" v-model="width" class="ltr:mr-2 rtl:ml-2" />
 
-                    <div v-else class="relative border border-gray-400 dark:border-dark-200 opacity-50 w-12 flex items-center justify-center rtl:ml-2 ltr:mr-2">
+                    <div
+                        v-else
+                        class="relative flex w-12 items-center justify-center border border-gray-400 opacity-50 dark:border-dark-200 ltr:mr-2 rtl:ml-2"
+                    >
                         <svg-icon name="regular/hidden" class="h-4 w-4 opacity-50"></svg-icon>
                     </div>
 
-                    <button v-if="canDefineLocalizable"
-                        class="hover:text-gray-950 dark:hover:text-dark-100 rtl:ml-2 ltr:mr-2 flex items-center"
-                        :class="{ 'text-gray-950 dark:text-dark-150': localizable, 'text-gray-600 dark:text-dark-200': !localizable }"
+                    <button
+                        v-if="canDefineLocalizable"
+                        class="flex items-center hover:text-gray-950 dark:hover:text-dark-100 ltr:mr-2 rtl:ml-2"
+                        :class="{
+                            'text-gray-950 dark:text-dark-150': localizable,
+                            'text-gray-600 dark:text-dark-200': !localizable,
+                        }"
                         v-tooltip="__('Localizable')"
                         @click="localizable = !localizable"
                     >
                         <svg-icon name="light/earth" class="h-4 w-4" />
                     </button>
-                    <button @click.prevent="$emit('duplicate')" class="text-gray-600 dark:text-dark-150 hover:text-gray-950 dark:hover:text-dark-100 flex items-center rtl:ml-2 ltr:mr-2" v-tooltip="__('Duplicate')">
+                    <button
+                        @click.prevent="$emit('duplicate')"
+                        class="flex items-center text-gray-600 hover:text-gray-950 dark:text-dark-150 dark:hover:text-dark-100 ltr:mr-2 rtl:ml-2"
+                        v-tooltip="__('Duplicate')"
+                    >
                         <svg-icon name="light/duplicate" class="h-4 w-4" />
                     </button>
-                    <button @click.prevent="$emit('deleted')" class="text-gray-600 dark:text-dark-150 hover:text-gray-950 dark:hover:text-dark-100 flex items-center" v-tooltip="__('Remove')">
+                    <button
+                        @click.prevent="$emit('deleted')"
+                        class="flex items-center text-gray-600 hover:text-gray-950 dark:text-dark-150 dark:hover:text-dark-100"
+                        v-tooltip="__('Remove')"
+                    >
                         <svg-icon name="micro/trash" class="h-4 w-4" />
                     </button>
                     <stack name="field-settings" v-if="isEditing" @closed="editorClosed">
@@ -49,7 +73,6 @@
             </div>
         </div>
     </div>
-
 </template>
 
 <script>
@@ -61,7 +84,6 @@ import titleize from '../../util/titleize';
 import deslugify from '../../util/deslugify';
 
 export default {
-
     mixins: [Field, CanDefineLocalizable],
 
     components: {
@@ -69,22 +91,19 @@ export default {
         WidthSelector,
     },
 
-    props: [
-        'suggestableConditionFields'
-    ],
+    props: ['suggestableConditionFields'],
 
     inject: {
         isInsideSet: { default: false },
     },
 
-     data() {
+    data() {
         return {
             showHandle: false,
-        }
+        };
     },
 
     computed: {
-
         tooltipText() {
             return this.field.fieldtype;
         },
@@ -99,13 +118,12 @@ export default {
 
         fieldConfig() {
             return Object.assign({}, this.field.config, {
-                handle: this.field.handle
+                handle: this.field.handle,
             });
         },
 
         labelText() {
-            return this.field.config.display
-                || titleize(deslugify(this.field.handle));
+            return this.field.config.display || titleize(deslugify(this.field.handle));
         },
 
         width: {
@@ -117,7 +135,7 @@ export default {
                 field.config.width = width;
                 if (field.type === 'reference') field.config_overrides.push('width');
                 this.$emit('updated', field);
-            }
+            },
         },
 
         isHidden() {
@@ -137,12 +155,11 @@ export default {
                 field.config.localizable = localizable;
                 if (field.type === 'reference') field.config_overrides.push('localizable');
                 this.$emit('updated', field);
-            }
+            },
         },
     },
 
     methods: {
-
         settingsUpdated(settings, editedFields) {
             let field = this.field;
 
@@ -161,9 +178,7 @@ export default {
 
         editorClosed() {
             this.$emit('editor-closed');
-        }
-
-    }
-
-}
+        },
+    },
+};
 </script>
diff --git a/resources/js/components/blueprints/Section.vue b/resources/js/components/blueprints/Section.vue
index 54e3d3291e..d4bbec7c9b 100644
--- a/resources/js/components/blueprints/Section.vue
+++ b/resources/js/components/blueprints/Section.vue
@@ -1,19 +1,29 @@
 <template>
-
     <div class="blueprint-section @container">
-        <div class="blueprint-section-card card dark:bg-dark-800 p-0 h-full flex rounded-t flex-col">
-
-            <div class="bg-gray-200 dark:bg-dark-600 border-b dark:border-none text-sm flex rounded-t">
-                <div class="blueprint-drag-handle blueprint-section-drag-handle w-4 ltr:border-r rtl:border-l dark:border-dark-900"></div>
-                <div class="p-2 flex-1 flex items-center">
-                    <a class="flex items-center flex-1 group" @click="edit">
-                        <svg-icon :name="iconName(section.icon)" :directory="iconBaseDirectory" class="h-4 w-4 rtl:ml-2 ltr:mr-2 text-gray-700 dark:text-dark-150 group-hover:text-blue-500 dark:group-hover:text-dark-blue-100" />
-                        <div class="rtl:ml-2 ltr:mr-2" v-text="__(section.display)" />
+        <div class="blueprint-section-card card flex h-full flex-col rounded-t p-0 dark:bg-dark-800">
+            <div class="flex rounded-t border-b bg-gray-200 text-sm dark:border-none dark:bg-dark-600">
+                <div
+                    class="blueprint-drag-handle blueprint-section-drag-handle w-4 dark:border-dark-900 ltr:border-r rtl:border-l"
+                ></div>
+                <div class="flex flex-1 items-center p-2">
+                    <a class="group flex flex-1 items-center" @click="edit">
+                        <svg-icon
+                            :name="iconName(section.icon)"
+                            :directory="iconBaseDirectory"
+                            class="h-4 w-4 text-gray-700 group-hover:text-blue-500 dark:text-dark-150 dark:group-hover:text-dark-blue-100 ltr:mr-2 rtl:ml-2"
+                        />
+                        <div class="ltr:mr-2 rtl:ml-2" v-text="__(section.display)" />
                     </a>
-                    <button class="flex items-center text-gray-700 dark:text-dark-175 hover:text-gray-950 dark:hover:text-dark-100 rtl:ml-3 ltr:mr-3" @click="edit">
+                    <button
+                        class="flex items-center text-gray-700 hover:text-gray-950 dark:text-dark-175 dark:hover:text-dark-100 ltr:mr-3 rtl:ml-3"
+                        @click="edit"
+                    >
                         <svg-icon class="h-4 w-4" name="pencil" />
                     </button>
-                    <button @click.prevent="$emit('deleted')" class="flex items-center text-gray-700 dark:text-dark-175 hover:text-gray-950 dark:hover:text-dark-100">
+                    <button
+                        @click.prevent="$emit('deleted')"
+                        class="flex items-center text-gray-700 hover:text-gray-950 dark:text-dark-175 dark:hover:text-dark-100"
+                    >
                         <svg-icon class="h-4 w-4" name="micro/trash" />
                     </button>
                 </div>
@@ -33,7 +43,12 @@
                     </div>
                     <div class="form-group w-full" v-if="showHandleField">
                         <label v-text="__('Handle')" />
-                        <input type="text" class="input-text font-mono text-sm" v-model="editingSection.handle" @input="handleSyncedWithDisplay = false" />
+                        <input
+                            type="text"
+                            class="input-text font-mono text-sm"
+                            v-model="editingSection.handle"
+                            @input="handleSyncedWithDisplay = false"
+                        />
                     </div>
                     <div class="form-group w-full">
                         <label v-text="__('Instructions')" />
@@ -42,11 +57,22 @@
                     <div class="form-group w-full" v-if="showHandleField">
                         <label v-text="__('Icon')" />
                         <publish-field-meta
-                            :config="{ handle: 'icon', type: 'icon', directory: this.iconBaseDirectory, folder: this.iconSubFolder }"
+                            :config="{
+                                handle: 'icon',
+                                type: 'icon',
+                                directory: this.iconBaseDirectory,
+                                folder: this.iconSubFolder,
+                            }"
                             :initial-value="editingSection.icon"
                             v-slot="{ meta, value, loading }"
                         >
-                            <icon-fieldtype v-if="!loading" handle="icon" :meta="meta" :value="value" @input="editingSection.icon = $event" />
+                            <icon-fieldtype
+                                v-if="!loading"
+                                handle="icon"
+                                :meta="meta"
+                                :value="value"
+                                @input="editingSection.icon = $event"
+                            />
                         </publish-field-meta>
                     </div>
                     <div class="form-group w-full" v-if="showHideField">
@@ -74,14 +100,12 @@
                 <template v-slot:empty-state>
                     <div
                         v-text="__('Add or drag fields here')"
-                        class="text-2xs text-gray-600 dark:text-dark-150 text-center border dark:border-dark-200 border-dashed rounded mb-2 p-2"
+                        class="mb-2 rounded border border-dashed p-2 text-center text-2xs text-gray-600 dark:border-dark-200 dark:text-dark-150"
                     />
                 </template>
             </fields>
-
         </div>
     </div>
-
 </template>
 
 <script>
@@ -89,11 +113,10 @@ import Fields from './Fields.vue';
 import CanDefineLocalizable from '../fields/CanDefineLocalizable';
 
 export default {
-
     mixins: [CanDefineLocalizable],
 
     inject: {
-        suggestableConditionFieldsProvider: { default: null }
+        suggestableConditionFieldsProvider: { default: null },
     },
 
     components: {
@@ -102,23 +125,23 @@ export default {
 
     props: {
         tabId: {
-            type: String
+            type: String,
         },
         section: {
             type: Object,
-            required: true
+            required: true,
         },
         showHandleField: {
             type: Boolean,
-            default: false
+            default: false,
         },
         showHideField: {
             type: Boolean,
-            default: false
+            default: false,
         },
         editText: {
             type: String,
-        }
+        },
     },
 
     data() {
@@ -126,11 +149,10 @@ export default {
             editingSection: false,
             editingField: null,
             handleSyncedWithDisplay: false,
-        }
+        };
     },
 
     computed: {
-
         suggestableConditionFields() {
             return this.suggestableConditionFieldsProvider?.suggestableFields(this) || [];
         },
@@ -142,24 +164,21 @@ export default {
         iconSubFolder() {
             return this.$config.get('setIconsFolder');
         },
-
     },
 
     watch: {
-
         section: {
             deep: true,
             handler(section) {
                 this.$emit('updated', section);
-            }
+            },
         },
 
-        'editingSection.display': function(display) {
+        'editingSection.display': function (display) {
             if (this.editingSection && this.handleSyncedWithDisplay) {
                 this.editingSection.handle = snake_case(display);
             }
-        }
-
+        },
     },
 
     created() {
@@ -171,13 +190,12 @@ export default {
     },
 
     methods: {
-
         fieldLinked(field) {
             this.section.fields.push(field);
             this.$toast.success(__('Field added'));
 
             if (field.type === 'reference') {
-                this.$nextTick(() => this.editingField = field._id);
+                this.$nextTick(() => (this.editingField = field._id));
             }
         },
 
@@ -204,11 +222,11 @@ export default {
         },
 
         editConfirmed() {
-            if (! this.editingSection.handle) {
-                this.editingSection.handle = snake_case(this.editingSection.display)
+            if (!this.editingSection.handle) {
+                this.editingSection.handle = snake_case(this.editingSection.display);
             }
 
-            this.$emit('updated', {...this.section, ...this.editingSection});
+            this.$emit('updated', { ...this.section, ...this.editingSection });
             this.editingSection = false;
         },
 
@@ -217,14 +235,10 @@ export default {
         },
 
         iconName(name) {
-            if (! name) return 'folder-generic';
+            if (!name) return 'folder-generic';
 
-            return this.iconSubFolder
-                ? this.iconSubFolder+'/'+name
-                : name;
+            return this.iconSubFolder ? this.iconSubFolder + '/' + name : name;
         },
-
-    }
-
-}
+    },
+};
 </script>
diff --git a/resources/js/components/blueprints/Sections.vue b/resources/js/components/blueprints/Sections.vue
index ba0323c13f..8b77a97271 100644
--- a/resources/js/components/blueprints/Sections.vue
+++ b/resources/js/components/blueprints/Sections.vue
@@ -1,13 +1,6 @@
 <template>
-
     <div>
-
-        <div
-            ref="sections"
-            class="blueprint-sections flex flex-wrap -mx-2 outline-none"
-            :data-tab="tabId"
-        >
-
+        <div ref="sections" class="blueprint-sections -mx-2 flex flex-wrap outline-none" :data-tab="tabId">
             <blueprint-section
                 ref="section"
                 v-for="(section, i) in sections"
@@ -24,22 +17,16 @@
 
             <div class="blueprint-add-section-container w-full">
                 <button class="blueprint-add-section-button outline-none" @click="addAndEditSection">
-                    <div class="text-center flex items-center leading-none">
-                        <svg-icon name="micro/plus" class="h-3 w-3 rtl:ml-2 ltr:mr-2" />
+                    <div class="flex items-center text-center leading-none">
+                        <svg-icon name="micro/plus" class="h-3 w-3 ltr:mr-2 rtl:ml-2" />
                         <div v-text="addSectionText" />
                     </div>
 
-                    <div
-                        class="blueprint-section-draggable-zone outline-none"
-                        :data-tab="tabId"
-                    />
+                    <div class="blueprint-section-draggable-zone outline-none" :data-tab="tabId" />
                 </button>
             </div>
-
         </div>
-
     </div>
-
 </template>
 
 <script>
@@ -48,11 +35,10 @@ import BlueprintSection from './Section.vue';
 import CanDefineLocalizable from '../fields/CanDefineLocalizable';
 
 export default {
-
     mixins: [CanDefineLocalizable],
 
     components: {
-        BlueprintSection
+        BlueprintSection,
     },
 
     props: {
@@ -61,54 +47,51 @@ export default {
         },
         initialSections: {
             type: Array,
-            required: true
+            required: true,
         },
         addSectionText: {
             type: String,
-            default: () => __('Add Section')
+            default: () => __('Add Section'),
         },
         editSectionText: {
             type: String,
-            default: () => __('Edit Section')
+            default: () => __('Edit Section'),
         },
         newSectionText: {
             type: String,
-            default: () => __('New Section')
+            default: () => __('New Section'),
         },
         singleSection: {
             type: Boolean,
-            default: false
+            default: false,
         },
         requireSection: {
             type: Boolean,
-            default: true
+            default: true,
         },
         showSectionHandleField: {
             type: Boolean,
-            default: false
+            default: false,
         },
         showSectionHideField: {
             type: Boolean,
-            default: false
-        }
+            default: false,
+        },
     },
 
     data() {
         return {
-            sections: this.initialSections
-        }
+            sections: this.initialSections,
+        };
     },
 
     watch: {
-
         sections(sections) {
             this.$emit('updated', sections);
-        }
-
+        },
     },
 
     methods: {
-
         addSection() {
             const section = {
                 _id: uniqid(),
@@ -117,7 +100,7 @@ export default {
                 icon: null,
                 hide: null,
                 handle: snake_case(this.newSectionText),
-                fields: []
+                fields: [],
             };
 
             this.sections.push(section);
@@ -129,7 +112,7 @@ export default {
             const section = this.addSection();
 
             this.$nextTick(() => {
-                this.$refs.section.find(vm => vm.section._id === section._id).edit();
+                this.$refs.section.find((vm) => vm.section._id === section._id).edit();
             });
         },
 
@@ -147,9 +130,7 @@ export default {
             if (this.requireSection && this.sections.length === 0) {
                 this.addSection();
             }
-        }
-
-    }
-
-}
+        },
+    },
+};
 </script>
diff --git a/resources/js/components/blueprints/SuggestsConditionalFields.js b/resources/js/components/blueprints/SuggestsConditionalFields.js
index a70e961417..afb47ef162 100644
--- a/resources/js/components/blueprints/SuggestsConditionalFields.js
+++ b/resources/js/components/blueprints/SuggestsConditionalFields.js
@@ -1,31 +1,29 @@
 export default {
-
     provide() {
         return {
             suggestableConditionFieldsProvider: this.makeConditionsProvider(),
-        }
+        };
     },
 
     computed: {
-
         fieldsForConditionSuggestions() {
             return this.tabs.reduce((fields, tab) => {
-                return fields.concat(tab.sections.reduce((fields, section) => {
-                    return fields.concat(section.fields);
-                }, []));
+                return fields.concat(
+                    tab.sections.reduce((fields, section) => {
+                        return fields.concat(section.fields);
+                    }, []),
+                );
             }, []);
-        }
-
+        },
     },
 
     methods: {
-
         suggestableConditionFields(section = null) {
             let fields = this.getSectionFieldsForConditionSuggestions(section).reduce((fields, field) => {
                 return fields.concat(
                     field.type === 'import'
                         ? this.getFieldsFromImportedFieldset(field.fieldset, field.prefix)
-                        : [field]
+                        : [field],
                 );
             }, []);
 
@@ -40,21 +38,20 @@ export default {
         },
 
         getFieldsFromImportedFieldset(fieldset, prefix) {
-            return Statamic.$config.get(`fieldsets.${fieldset}.fields`, [])
+            return Statamic.$config
+                .get(`fieldsets.${fieldset}.fields`, [])
                 .reduce((fields, field) => {
                     return fields.concat(
                         field.type === 'import'
                             ? this.getFieldsFromImportedFieldset(field.fieldset, field.prefix)
-                            : [field]
+                            : [field],
                     );
                 }, [])
-                .map(field => prefix ? { ...field, handle: prefix + field.handle } : field);
+                .map((field) => (prefix ? { ...field, handle: prefix + field.handle } : field));
         },
 
         getSectionFieldsForConditionSuggestions(vm = null) {
             return this.fieldsForConditionSuggestions;
-        }
-
-    }
-
-}
+        },
+    },
+};
diff --git a/resources/js/components/blueprints/Tab.vue b/resources/js/components/blueprints/Tab.vue
index 95cf01b716..8b1cbae4ed 100644
--- a/resources/js/components/blueprints/Tab.vue
+++ b/resources/js/components/blueprints/Tab.vue
@@ -1,9 +1,8 @@
 <template>
-
     <button
         class="blueprint-tab tab-button"
         role="tab"
-        :class="{ 'active': isActive }"
+        :class="{ active: isActive }"
         :aria-controls="`tab-panel-${tab._id}`"
         :aria-selected="isActive"
         :id="`tab-${tab._id}`"
@@ -11,13 +10,21 @@
         @click="$emit('selected')"
         @mouseenter="$emit('mouseenter')"
     >
-        <svg-icon v-if="tab.icon" :name="iconName(tab.icon)" :directory="iconBaseDirectory" class="w-4 h-4 rtl:ml-1 ltr:mr-1" />
+        <svg-icon
+            v-if="tab.icon"
+            :name="iconName(tab.icon)"
+            :directory="iconBaseDirectory"
+            class="h-4 w-4 ltr:mr-1 rtl:ml-1"
+        />
 
         {{ __(tab.display) }}
 
-        <dropdown-list v-if="isActive" ref="dropdown" placement="bottom-start" class="rtl:text-right ltr:text-left">
+        <dropdown-list v-if="isActive" ref="dropdown" placement="bottom-start" class="ltr:text-left rtl:text-right">
             <template #trigger>
-                <button class="rtl:mr-2 ltr:ml-2 hover:text-gray-900 dark:hover:text-gray-400 active:text-gray-900" :aria-label="__('Open Dropdown')">
+                <button
+                    class="hover:text-gray-900 active:text-gray-900 dark:hover:text-gray-400 ltr:ml-2 rtl:mr-2"
+                    :aria-label="__('Open Dropdown')"
+                >
                     <svg-icon name="micro/chevron-down-xs" class="w-2" />
                 </button>
             </template>
@@ -35,45 +42,61 @@
             <div class="publish-fields @container">
                 <div class="form-group w-full">
                     <label v-text="__('Title')" />
-                    <input ref="title" type="text"
+                    <input
+                        ref="title"
+                        type="text"
                         :value="display"
                         @input="fieldUpdated('display', $event.target.value)"
-                        class="input-text" />
+                        class="input-text"
+                    />
                 </div>
                 <div class="form-group w-full">
                     <label v-text="__('Handle')" />
-                    <input type="text"
+                    <input
+                        type="text"
                         :value="handle"
                         @input="fieldUpdated('handle', $event.target.value)"
-                        class="input-text font-mono text-sm" />
+                        class="input-text font-mono text-sm"
+                    />
                 </div>
                 <div class="form-group w-full" v-if="showInstructions">
                     <label v-text="__('Instructions')" />
-                    <input type="text"
+                    <input
+                        type="text"
                         :value="instructions"
                         @input="fieldUpdated('instructions', $event.target.value)"
-                        class="input-text text-sm" />
+                        class="input-text text-sm"
+                    />
                 </div>
 
                 <div class="form-group w-full" v-if="showInstructions">
                     <label v-text="__('Icon')" />
                     <publish-field-meta
-                        :config="{ handle: 'icon', type: 'icon', directory: this.iconBaseDirectory, folder: this.iconSubFolder }"
+                        :config="{
+                            handle: 'icon',
+                            type: 'icon',
+                            directory: this.iconBaseDirectory,
+                            folder: this.iconSubFolder,
+                        }"
                         :initial-value="icon"
                         v-slot="{ meta, value, loading }"
                     >
-                        <icon-fieldtype v-if="!loading" handle="icon" :meta="meta" :value="value" @input="fieldUpdated('icon', $event)" />
+                        <icon-fieldtype
+                            v-if="!loading"
+                            handle="icon"
+                            :meta="meta"
+                            :value="value"
+                            @input="fieldUpdated('icon', $event)"
+                        />
                     </publish-field-meta>
                 </div>
             </div>
         </confirmation-modal>
     </button>
-
 </template>
 
 <script>
 export default {
-
     props: {
         tab: {
             type: Object,
@@ -89,7 +112,7 @@ export default {
         },
         editText: {
             type: String,
-        }
+        },
     },
 
     data() {
@@ -100,7 +123,7 @@ export default {
             icon: this.tab.icon,
             editing: false,
             handleSyncedWithDisplay: false,
-        }
+        };
     },
 
     created() {
@@ -112,7 +135,6 @@ export default {
     },
 
     computed: {
-
         isActive() {
             return this.currentTab === this.tab._id;
         },
@@ -124,18 +146,16 @@ export default {
         iconSubFolder() {
             return this.$config.get('setIconsFolder');
         },
-
     },
 
     methods: {
-
         edit() {
             this.editing = true;
         },
 
         editConfirmed() {
-            if (! this.handle) {
-                this.handle = snake_case(this.display)
+            if (!this.handle) {
+                this.handle = snake_case(this.display);
             }
 
             this.$emit('updated', {
@@ -172,14 +192,10 @@ export default {
         },
 
         iconName(name) {
-            if (! name) return null;
+            if (!name) return null;
 
-            return this.iconSubFolder
-                ? this.iconSubFolder+'/'+name
-                : name;
+            return this.iconSubFolder ? this.iconSubFolder + '/' + name : name;
         },
-
-    }
-
-}
+    },
+};
 </script>
diff --git a/resources/js/components/blueprints/TabContent.vue b/resources/js/components/blueprints/TabContent.vue
index ece2950576..207695efc8 100644
--- a/resources/js/components/blueprints/TabContent.vue
+++ b/resources/js/components/blueprints/TabContent.vue
@@ -1,8 +1,5 @@
 <template>
-    <div
-        role="tabpanel"
-        :aria-labelledby="`tab-${tab._id}`"
-        :id="`tab-panel-${tab._id}`">
+    <div role="tabpanel" :aria-labelledby="`tab-${tab._id}`" :id="`tab-panel-${tab._id}`">
         <sections
             ref="sections"
             :tab-id="tab._id"
@@ -20,10 +17,9 @@
 
 <script>
 import Sections from './Sections.vue';
-import CanDefineLocalizable from "../fields/CanDefineLocalizable";
+import CanDefineLocalizable from '../fields/CanDefineLocalizable';
 
 export default {
-
     mixins: [CanDefineLocalizable],
 
     components: {
@@ -54,17 +50,14 @@ export default {
     },
 
     methods: {
-
         addSection() {
             return this.$refs.sections.addSection();
         },
 
         sectionsUpdated(sections) {
-            let tab = {...this.tab, ...{ sections }};
+            let tab = { ...this.tab, ...{ sections } };
             this.$emit('updated', tab);
         },
-
-    }
-
-}
+    },
+};
 </script>
diff --git a/resources/js/components/blueprints/TabSettings.vue b/resources/js/components/blueprints/TabSettings.vue
index 0839054a99..da4b5fb021 100644
--- a/resources/js/components/blueprints/TabSettings.vue
+++ b/resources/js/components/blueprints/TabSettings.vue
@@ -1,60 +1,49 @@
 <template>
-
-    <div class="flex flex-col h-full">
-
-        <div class="flex items-center p-6 bg-gray-200 border-b text-center">
+    <div class="flex h-full flex-col">
+        <div class="flex items-center border-b bg-gray-200 p-6 text-center">
             {{ __('Tabs') }}
         </div>
 
         <div class="flex-1 overflow-scroll">
-
             <div class="p-4">
                 <div class="flex flex-wrap">
-                    <div
-                        v-for="field in fields"
-                        :key="field._id"
-                        class="blueprint-tab-field"
-                    >
+                    <div v-for="field in fields" :key="field._id" class="blueprint-tab-field">
                         <div class="blueprint-tab-field-inner">
                             <div class="blueprint-drag-handle w-4 ltr:border-r rtl:border-l"></div>
 
                             <label class="block">{{ field.display }}</label>
                             <div v-if="field.instructions" class="help-block">{{ field.instructions }}</div>
-                            <div class="h-10 border border-dashed rounded bg-gray-200"></div>
+                            <div class="h-10 rounded border border-dashed bg-gray-200"></div>
                         </div>
                     </div>
                 </div>
             </div>
-
         </div>
     </div>
-
 </template>
 
 <script>
 import PublishField from '../publish/Field.vue';
 
 export default {
-
     components: { PublishField },
 
     props: {
-        tab: Object
+        tab: Object,
     },
 
     computed: {
         fields() {
-            return this.tab.fields.map(field => {
+            return this.tab.fields.map((field) => {
                 const config = field.config || {};
 
                 return {
                     _id: field._id,
                     display: config.display || 'Display',
-                    instructions: config.instructions
+                    instructions: config.instructions,
                 };
             });
-        }
-    }
-
-}
+        },
+    },
+};
 </script>
diff --git a/resources/js/components/blueprints/Tabs.vue b/resources/js/components/blueprints/Tabs.vue
index decbfeef4d..e470c25a70 100644
--- a/resources/js/components/blueprints/Tabs.vue
+++ b/resources/js/components/blueprints/Tabs.vue
@@ -1,7 +1,11 @@
 <template>
     <div>
         <div v-if="!singleTab && tabs.length > 0" class="tabs-container relative">
-            <div ref="tabs" class="tabs flex-1 flex space-x-3 rtl:space-x-reverse overflow-auto rtl:pl-6 ltr:pr-6" role="tablist">
+            <div
+                ref="tabs"
+                class="tabs flex flex-1 space-x-3 overflow-auto ltr:pr-6 rtl:space-x-reverse rtl:pl-6"
+                role="tablist"
+            >
                 <tab
                     ref="tab"
                     v-for="tab in tabs"
@@ -17,9 +21,13 @@
                 />
                 <div class="fade-left" v-if="canScrollLeft" />
             </div>
-            <div class="fade-right rtl:left-10 ltr:right-10" />
-            <button class="btn-round rtl:mr-2 ltr:ml-2 flex items-center justify-center relative top-1" @click="addAndEditTab" v-tooltip="addTabText">
-                <svg-icon name="add" class="w-3 h-3" />
+            <div class="fade-right ltr:right-10 rtl:left-10" />
+            <button
+                class="btn-round relative top-1 flex items-center justify-center ltr:ml-2 rtl:mr-2"
+                @click="addAndEditTab"
+                v-tooltip="addTabText"
+            >
+                <svg-icon name="add" class="h-3 w-3" />
             </button>
         </div>
         <button v-if="!singleTab && tabs.length === 0" class="btn" @click="addAndEditTab" v-text="addTabText" />
@@ -44,14 +52,13 @@
 </template>
 
 <script>
-import {Sortable, Plugins} from '@shopify/draggable';
+import { Sortable, Plugins } from '@shopify/draggable';
 import uniqid from 'uniqid';
 import Tab from './Tab.vue';
 import TabContent from './TabContent.vue';
-import CanDefineLocalizable from "../fields/CanDefineLocalizable";
+import CanDefineLocalizable from '../fields/CanDefineLocalizable';
 
 export default {
-
     mixins: [CanDefineLocalizable],
 
     components: {
@@ -62,7 +69,7 @@ export default {
     props: {
         initialTabs: {
             type: Array,
-            required: true
+            required: true,
         },
         addSectionText: {
             type: String,
@@ -75,39 +82,39 @@ export default {
         },
         addTabText: {
             type: String,
-            default: () => __('Add Tab')
+            default: () => __('Add Tab'),
         },
         editTabText: {
             type: String,
-            default: () => __('Edit Tab')
+            default: () => __('Edit Tab'),
         },
         newTabText: {
             type: String,
-            default: () => __('New Tab')
+            default: () => __('New Tab'),
         },
         singleTab: {
             type: Boolean,
-            default: false
+            default: false,
         },
         requireSection: {
             type: Boolean,
-            default: true
+            default: true,
         },
         showTabInstructionsField: {
             type: Boolean,
-            default: false
+            default: false,
         },
         showSectionHandleField: {
             type: Boolean,
-            default: false
+            default: false,
         },
         showSectionHideField: {
             type: Boolean,
-            default: false
+            default: false,
         },
         errors: {
-            type: Array
-        }
+            type: Array,
+        },
     },
 
     data() {
@@ -122,16 +129,14 @@ export default {
             sortableTabs: null,
             sortableSections: null,
             sortableFields: null,
-        }
+        };
     },
 
     watch: {
-
         tabs(tabs) {
             this.$emit('updated', tabs);
             this.makeSortable();
-        }
-
+        },
     },
 
     mounted() {
@@ -146,7 +151,6 @@ export default {
     },
 
     methods: {
-
         ensureTab() {
             if (this.requireSection && this.tabs.length === 0) {
                 this.addTab();
@@ -154,7 +158,7 @@ export default {
         },
 
         makeSortable() {
-            if (! this.singleTab) this.makeTabsSortable();
+            if (!this.singleTab) this.makeTabsSortable();
 
             this.makeSectionsSortable();
 
@@ -170,9 +174,11 @@ export default {
                 swapAnimation: { horizontal: true },
                 plugins: [Plugins.SwapAnimation],
                 distance: 10,
-            }).on('sortable:stop', e => {
-                this.tabs.splice(e.newIndex, 0, this.tabs.splice(e.oldIndex, 1)[0]);
-            }).on('mirror:create', (e) => e.cancel());
+            })
+                .on('sortable:stop', (e) => {
+                    this.tabs.splice(e.newIndex, 0, this.tabs.splice(e.oldIndex, 1)[0]);
+                })
+                .on('mirror:create', (e) => e.cancel());
         },
 
         makeSectionsSortable() {
@@ -183,13 +189,12 @@ export default {
                 handle: '.blueprint-section-drag-handle',
                 mirror: { constrainDimensions: true, appendTo: 'body' },
             })
-            .on('drag:start', e => this.lastInteractedTab = this.currentTab)
-            .on('drag:stop', e => this.lastInteractedTab = null)
-            .on('sortable:sort', e => this.lastInteractedTab = this.currentTab)
-            .on('sortable:stop', e => this.sectionHasBeenDropped(e));
+                .on('drag:start', (e) => (this.lastInteractedTab = this.currentTab))
+                .on('drag:stop', (e) => (this.lastInteractedTab = null))
+                .on('sortable:sort', (e) => (this.lastInteractedTab = this.currentTab))
+                .on('sortable:stop', (e) => this.sectionHasBeenDropped(e));
         },
 
-
         makeFieldsSortable() {
             if (this.sortableFields) this.sortableFields.destroy();
 
@@ -198,9 +203,9 @@ export default {
                 handle: '.blueprint-drag-handle',
                 mirror: { constrainDimensions: true, appendTo: 'body' },
             })
-            .on('drag:start', e => this.lastInteractedTab = this.currentTab)
-            .on('drag:stop', e => this.lastInteractedTab = null)
-            .on('sortable:stop', e => this.fieldHasBeenDropped(e));
+                .on('drag:start', (e) => (this.lastInteractedTab = this.currentTab))
+                .on('drag:stop', (e) => (this.lastInteractedTab = null))
+                .on('sortable:stop', (e) => this.fieldHasBeenDropped(e));
         },
 
         sectionHasBeenDropped(e) {
@@ -209,8 +214,7 @@ export default {
             let newTabId = e.newContainer.dataset.tab;
             let newIndex = e.newIndex;
 
-            if (this.lastInteractedTab !== this.currentTab
-            && this.currentTab !== newTabId) {
+            if (this.lastInteractedTab !== this.currentTab && this.currentTab !== newTabId) {
                 // Dragged over tab but haven't dragged into a droppable spot yet.
                 // In this case we'll assume they want to drop it at the top of the tab.
                 newTabId = this.currentTab;
@@ -221,15 +225,15 @@ export default {
 
             if (hasMovedTabs) {
                 // Rearrange sections within the tabs.
-                const oldTab = this.tabs.find(tab => tab._id === oldTabId);
-                const newTab = this.tabs.find(tab => tab._id === newTabId);
+                const oldTab = this.tabs.find((tab) => tab._id === oldTabId);
+                const newTab = this.tabs.find((tab) => tab._id === newTabId);
                 const section = oldTab.sections.splice(oldIndex, 1)[0];
                 newTab.sections.splice(newIndex, 0, section);
                 this.updateTab(oldTabId, oldTab);
                 this.updateTab(newTabId, newTab);
             } else {
                 // Update the section within the tab.
-                const tab = this.tabs.find(tab => tab._id === oldTabId);
+                const tab = this.tabs.find((tab) => tab._id === oldTabId);
                 tab.sections.splice(newIndex, 0, tab.sections.splice(oldIndex, 1)[0]);
                 this.updateTab(oldTabId, tab);
             }
@@ -238,28 +242,27 @@ export default {
         fieldHasBeenDropped(e) {
             const oldTabId = e.oldContainer.dataset.tab;
             let newTabId = e.newContainer.dataset.tab;
-            let newTab = this.tabs.find(tab => tab._id === newTabId);
-            let newIndex = e.newIndex
+            let newTab = this.tabs.find((tab) => tab._id === newTabId);
+            let newIndex = e.newIndex;
             let newSection;
 
             if (e.newContainer.parentElement.classList.contains('blueprint-add-section-button')) {
-                newSection = this.$refs.tabContent.find(vm => vm.tab._id === newTabId).addSection();
+                newSection = this.$refs.tabContent.find((vm) => vm.tab._id === newTabId).addSection();
             } else {
-                newSection = newTab.sections.find(section => section._id === e.newContainer.dataset.section);
+                newSection = newTab.sections.find((section) => section._id === e.newContainer.dataset.section);
             }
 
-            if (this.lastInteractedTab !== this.currentTab
-            && this.currentTab !== newTabId) {
+            if (this.lastInteractedTab !== this.currentTab && this.currentTab !== newTabId) {
                 // Dragged over tab but haven't dragged into a droppable spot yet.
                 // In this case we'll assume they want to dropped into the first section of that tab.
                 newTabId = this.currentTab;
-                newTab = this.tabs.find(tab => tab._id === newTabId);
+                newTab = this.tabs.find((tab) => tab._id === newTabId);
                 newSection = newTab.sections[0];
                 newIndex = 0;
             }
 
-            const oldTab = this.tabs.find(tab => tab._id === oldTabId);
-            const oldSection = oldTab.sections.find(section => section._id === e.oldContainer.dataset.section);
+            const oldTab = this.tabs.find((tab) => tab._id === oldTabId);
+            const oldSection = oldTab.sections.find((section) => section._id === e.oldContainer.dataset.section);
 
             const field = oldSection.fields.splice(e.oldIndex, 1)[0];
             newSection.fields.splice(newIndex, 0, field);
@@ -271,7 +274,7 @@ export default {
         },
 
         updateTab(tabId, tab) {
-            const index = this.tabs.findIndex(tab => tab._id === tabId);
+            const index = this.tabs.findIndex((tab) => tab._id === tabId);
             this.tabs.splice(index, 1, tab);
         },
 
@@ -292,28 +295,26 @@ export default {
                 handle: snake_case(this.newTabText),
                 instructions: null,
                 icon: null,
-                sections: []
+                sections: [],
             });
 
             this.selectTab(id);
 
-            this.$nextTick(() => this.$refs.tabContent.find(vm => vm.tab._id === id).addSection());
+            this.$nextTick(() => this.$refs.tabContent.find((vm) => vm.tab._id === id).addSection());
         },
 
         addAndEditTab() {
             this.addTab();
-            this.$nextTick(() => this.$refs.tab.find(vm => vm.tab._id === this.currentTab).edit());
+            this.$nextTick(() => this.$refs.tab.find((vm) => vm.tab._id === this.currentTab).edit());
         },
 
         removeTab(tabId) {
-            this.tabs = this.tabs.filter(tab => tab._id !== tabId);
+            this.tabs = this.tabs.filter((tab) => tab._id !== tabId);
 
             this.selectTab(this.tabs.length ? this.tabs[0]._id : null);
 
             this.ensureTab();
         },
-
-    }
-
-}
+    },
+};
 </script>
diff --git a/resources/js/components/collections/BlueprintListing.vue b/resources/js/components/collections/BlueprintListing.vue
index 71f010b2a0..b1862493b4 100644
--- a/resources/js/components/collections/BlueprintListing.vue
+++ b/resources/js/components/collections/BlueprintListing.vue
@@ -2,21 +2,20 @@
 import BlueprintListing from '../blueprints/Listing.vue';
 
 export default {
-
     components: {
-        BlueprintListing
+        BlueprintListing,
     },
 
     props: {
         initialRows: Array,
-        reorderUrl: String
+        reorderUrl: String,
     },
 
     data() {
         return {
             rows: this.initialRows,
-            hasBeenReordered: false
-        }
+            hasBeenReordered: false,
+        };
     },
 
     methods: {
@@ -26,14 +25,13 @@ export default {
         },
 
         saveOrder() {
-            let order = this.rows.map(blueprint => blueprint.handle);
+            let order = this.rows.map((blueprint) => blueprint.handle);
 
             this.$axios
                 .post(this.reorderUrl, { order })
-                .then(response => this.$toast.success(__('Blueprints successfully reordered')))
-                .catch(error => this.$toast.error(__('Something went wrong')))
-        }
-    }
-
-}
+                .then((response) => this.$toast.success(__('Blueprints successfully reordered')))
+                .catch((error) => this.$toast.error(__('Something went wrong')));
+        },
+    },
+};
 </script>
diff --git a/resources/js/components/collections/CreateForm.vue b/resources/js/components/collections/CreateForm.vue
index 10a7ff5ab3..a4cbe5a7b9 100644
--- a/resources/js/components/collections/CreateForm.vue
+++ b/resources/js/components/collections/CreateForm.vue
@@ -1,46 +1,43 @@
 <template>
-    <div class="max-w-lg mt-4 mx-auto">
-
-        <div class="rounded p-6 lg:px-20 lg:py-10 shadow bg-white dark:bg-dark-600 dark:shadow-dark">
-            <header class="text-center mb-16">
+    <div class="mx-auto mt-4 max-w-lg">
+        <div class="rounded bg-white p-6 shadow dark:bg-dark-600 dark:shadow-dark lg:px-20 lg:py-10">
+            <header class="mb-16 text-center">
                 <h1 class="mb-6">{{ __('Create Collection') }}</h1>
                 <p class="text-gray" v-text="__('messages.collection_configure_intro')" />
             </header>
             <div class="mb-10">
-                <label class="font-bold text-base mb-1" for="name">{{ __('Title') }}</label>
-                <input type="text" v-model="title" class="input-text" autofocus tabindex="1">
-                <div class="text-2xs text-gray-600 mt-2 flex items-center">
+                <label class="mb-1 text-base font-bold" for="name">{{ __('Title') }}</label>
+                <input type="text" v-model="title" class="input-text" autofocus tabindex="1" />
+                <div class="mt-2 flex items-center text-2xs text-gray-600">
                     {{ __('messages.collection_configure_title_instructions') }}
                 </div>
             </div>
             <div class="mb-4">
-                <label class="font-bold text-base mb-1" for="name">{{ __('Handle') }}</label>
+                <label class="mb-1 text-base font-bold" for="name">{{ __('Handle') }}</label>
                 <div class="relative">
-                    <loading-graphic inline text="" v-if="slug.busy" class="absolute top-3 right-3"/>
-                    <input type="text" v-model="handle" class="input-text" tabindex="2">
+                    <loading-graphic inline text="" v-if="slug.busy" class="absolute right-3 top-3" />
+                    <input type="text" v-model="handle" class="input-text" tabindex="2" />
                 </div>
-                <div class="text-2xs text-gray-600 mt-2 flex items-center">
+                <div class="mt-2 flex items-center text-2xs text-gray-600">
                     {{ __('messages.collection_configure_handle_instructions') }}
                 </div>
             </div>
         </div>
 
-        <div class="flex justify-center mt-8">
-            <button tabindex="4" class="btn-primary mx-auto btn-lg" :disabled="! canSubmit" @click="submit">
-                {{ __('Create Collection')}}
+        <div class="mt-8 flex justify-center">
+            <button tabindex="4" class="btn-primary btn-lg mx-auto" :disabled="!canSubmit" @click="submit">
+                {{ __('Create Collection') }}
             </button>
         </div>
     </div>
 </template>
 
 <script>
-
 export default {
-
     props: {
         route: {
-            type: String
-        }
+            type: String,
+        },
     },
 
     data() {
@@ -48,13 +45,13 @@ export default {
             title: null,
             handle: null,
             slug: this.$slug.async().separatedBy('_'),
-        }
+        };
     },
 
     watch: {
         title(title) {
-            this.slug.create(title).then(slug => this.handle = slug);
-        }
+            this.slug.create(title).then((slug) => (this.handle = slug));
+        },
     },
 
     computed: {
@@ -65,20 +62,23 @@ export default {
 
     methods: {
         submit() {
-            this.$axios.post(this.route, {title: this.title, handle: this.handle}).then(response => {
-                window.location = response.data.redirect;
-            }).catch(error => {
-                this.$toast.error(error.response.data.message);
-            });
-        }
+            this.$axios
+                .post(this.route, { title: this.title, handle: this.handle })
+                .then((response) => {
+                    window.location = response.data.redirect;
+                })
+                .catch((error) => {
+                    this.$toast.error(error.response.data.message);
+                });
+        },
     },
 
     mounted() {
-        this.$keys.bindGlobal(['return'], e => {
+        this.$keys.bindGlobal(['return'], (e) => {
             if (this.canSubmit) {
                 this.submit();
             }
         });
-    }
-}
+    },
+};
 </script>
diff --git a/resources/js/components/collections/DeleteEntryConfirmation.vue b/resources/js/components/collections/DeleteEntryConfirmation.vue
index db737514c2..e7a1bab471 100644
--- a/resources/js/components/collections/DeleteEntryConfirmation.vue
+++ b/resources/js/components/collections/DeleteEntryConfirmation.vue
@@ -1,42 +1,44 @@
 <template>
-
     <modal name="delete-entry-confirmation">
-        <div class="confirmation-modal flex flex-col h-full">
-            <div class="text-lg font-medium p-4 pb-0">
+        <div class="confirmation-modal flex h-full flex-col">
+            <div class="p-4 pb-0 text-lg font-medium">
                 {{ __('Delete Entry') }}
             </div>
             <div class="flex-1 px-4 py-6 text-gray dark:text-dark-150">
                 <p class="mb-4" v-text="__('Are you sure you want to delete this entry?')" />
                 <label class="flex items-center" v-if="children">
-                    <input type="checkbox" class="rtl:ml-2 ltr:mr-2" v-model="shouldDeleteChildren" />
+                    <input type="checkbox" class="ltr:mr-2 rtl:ml-2" v-model="shouldDeleteChildren" />
                     {{ __n('Delete child entry|Delete :count child entries', children) }}
                 </label>
             </div>
-            <div class="p-4 bg-gray-200 dark:bg-dark-550 border-t dark:border-dark-900 flex items-center justify-end text-sm">
-                <button class="text-gray dark:text-dark-150 hover:text-gray-900 dark:hover:text-dark-100"
+            <div
+                class="flex items-center justify-end border-t bg-gray-200 p-4 text-sm dark:border-dark-900 dark:bg-dark-550"
+            >
+                <button
+                    class="text-gray hover:text-gray-900 dark:text-dark-150 dark:hover:text-dark-100"
                     @click="$emit('cancel')"
-                    v-text="__('Cancel')" />
-                <button class="rtl:mr-4 ltr:ml-4 btn-danger"
+                    v-text="__('Cancel')"
+                />
+                <button
+                    class="btn-danger ltr:ml-4 rtl:mr-4"
                     @click="$emit('confirm', shouldDeleteChildren)"
-                    v-text="__('Delete')" />
+                    v-text="__('Delete')"
+                />
             </div>
         </div>
     </modal>
-
 </template>
 
 <script>
 export default {
-
     props: {
-        children: Number
+        children: Number,
     },
 
     data() {
         return {
-            shouldDeleteChildren: false
-        }
-    }
-
-}
+            shouldDeleteChildren: false,
+        };
+    },
+};
 </script>
diff --git a/resources/js/components/collections/DeleteLocalizationConfirmation.vue b/resources/js/components/collections/DeleteLocalizationConfirmation.vue
index 8283a94432..8c81c2a4b8 100644
--- a/resources/js/components/collections/DeleteLocalizationConfirmation.vue
+++ b/resources/js/components/collections/DeleteLocalizationConfirmation.vue
@@ -1,8 +1,7 @@
 <template>
-
     <modal name="delete-entry-confirmation">
-        <div class="confirmation-modal flex flex-col h-full">
-            <div class="text-lg font-medium p-4 pb-0">
+        <div class="confirmation-modal flex h-full flex-col">
+            <div class="p-4 pb-0 text-lg font-medium">
                 {{ __('Delete') }}
             </div>
             <div class="flex-1 px-4 py-6 text-gray dark:text-dark-150">
@@ -11,38 +10,54 @@
                         <div class="field-inner">
                             <label class="publish-field-label" for="field_behavior">
                                 <span v-text="__('Localizations')" />
-                                <i class="required rtl:mr-1 ltr:ml-1">*</i>
+                                <i class="required ltr:ml-1 rtl:mr-1">*</i>
                             </label>
                             <div class="help-block -mt-2"><p v-html="instructions" /></div>
                         </div>
 
                         <div class="button-group-fieldtype-wrapper">
                             <div class="btn-group">
-                                <button @click="behavior = 'delete'" class="btn px-4" :class="{ active: behavior === 'delete' }"><span v-text="__('Delete')" /></button>
-                                <button @click="behavior = 'copy'" class="btn px-4" :class="{ active: behavior === 'copy' }"><span v-text="__('Detach')" /></button>
+                                <button
+                                    @click="behavior = 'delete'"
+                                    class="btn px-4"
+                                    :class="{ active: behavior === 'delete' }"
+                                >
+                                    <span v-text="__('Delete')" />
+                                </button>
+                                <button
+                                    @click="behavior = 'copy'"
+                                    class="btn px-4"
+                                    :class="{ active: behavior === 'copy' }"
+                                >
+                                    <span v-text="__('Detach')" />
+                                </button>
                             </div>
                         </div>
 
-                        <small v-if="error" class="help-block text-red-500 mt-2 mb-0" v-text="__('statamic::validation.required')" />
+                        <small
+                            v-if="error"
+                            class="help-block mb-0 mt-2 text-red-500"
+                            v-text="__('statamic::validation.required')"
+                        />
                     </div>
                 </div>
             </div>
-            <div class="p-4 bg-gray-200 dark:bg-dark-550 border-t dark:border-dark-900 flex items-center justify-end text-sm">
-                <button class="text-gray dark:text-dark-150 hover:text-gray-900 dark:hover:text-dark-100"
+            <div
+                class="flex items-center justify-end border-t bg-gray-200 p-4 text-sm dark:border-dark-900 dark:bg-dark-550"
+            >
+                <button
+                    class="text-gray hover:text-gray-900 dark:text-dark-150 dark:hover:text-dark-100"
                     @click="$emit('cancel')"
-                    v-text="__('Cancel')" />
-                <button class="rtl:mr-4 ltr:ml-4 btn-danger"
-                    @click="confirm"
-                    v-text="__('Confirm')" />
+                    v-text="__('Cancel')"
+                />
+                <button class="btn-danger ltr:ml-4 rtl:mr-4" @click="confirm" v-text="__('Confirm')" />
             </div>
         </div>
     </modal>
-
 </template>
 
 <script>
 export default {
-
     props: {
         entries: { type: Number, required: true },
     },
@@ -51,7 +66,7 @@ export default {
         return {
             behavior: null,
             error: false,
-        }
+        };
     },
 
     computed: {
@@ -59,21 +74,18 @@ export default {
             let url = docs_url('/tips/localizing-entries#deleting');
 
             return `${__('messages.choose_entry_localization_deletion_behavior')} <a href="${url}" target="_blank">${__('Learn more')}</a>`;
-        }
+        },
     },
 
     methods: {
-
         confirm() {
-            if (! this.behavior) {
+            if (!this.behavior) {
                 this.error = true;
                 return;
             }
 
             this.$emit('confirm', this.behavior);
-        }
-
-    }
-
-}
+        },
+    },
+};
 </script>
diff --git a/resources/js/components/collections/EditForm.vue b/resources/js/components/collections/EditForm.vue
index 467b8628cc..f5716d36e0 100644
--- a/resources/js/components/collections/EditForm.vue
+++ b/resources/js/components/collections/EditForm.vue
@@ -1,5 +1,4 @@
 <template>
-
     <publish-container
         v-if="blueprint"
         ref="container"
@@ -21,24 +20,19 @@
                     <button type="submit" class="btn-primary" @click="submit">{{ __('Save') }}</button>
                 </div>
             </header>
-            <configure-tabs
-                @updated="setFieldValue"
-                @meta-updated="setFieldMeta"
-                :enable-sidebar="false"/>
+            <configure-tabs @updated="setFieldValue" @meta-updated="setFieldMeta" :enable-sidebar="false" />
         </div>
     </publish-container>
-
 </template>
 
 <script>
 export default {
-
     props: {
         blueprint: Object,
         editTitle: String,
         initialValues: Object,
         meta: Object,
-        url: String
+        url: String,
     },
 
     data() {
@@ -46,11 +40,10 @@ export default {
             values: this.initialValues,
             error: null,
             errors: {},
-        }
+        };
     },
 
     methods: {
-
         clearErrors() {
             this.error = null;
             this.errors = {};
@@ -60,11 +53,14 @@ export default {
             this.saving = true;
             this.clearErrors();
 
-            this.$axios.patch(this.url, this.values).then(response => {
-                this.saving = false;
-                this.$toast.success(__('Saved'));
-                this.$refs.container.saved();
-            }).catch(e => this.handleAxiosError(e));
+            this.$axios
+                .patch(this.url, this.values)
+                .then((response) => {
+                    this.saving = false;
+                    this.$toast.success(__('Saved'));
+                    this.$refs.container.saved();
+                })
+                .catch((e) => this.handleAxiosError(e));
         },
 
         handleAxiosError(e) {
@@ -78,11 +74,10 @@ export default {
                 this.$toast.error(__('Something went wrong'));
             }
         },
-
     },
 
     created() {
-        this.$keys.bindGlobal(['mod+s'], e => {
+        this.$keys.bindGlobal(['mod+s'], (e) => {
             e.preventDefault();
             this.submit();
         });
@@ -91,8 +86,7 @@ export default {
     computed: {
         site() {
             return this.$config.get('selectedSite');
-        }
-    }
-
-}
+        },
+    },
+};
 </script>
diff --git a/resources/js/components/collections/Listing.vue b/resources/js/components/collections/Listing.vue
index 7ff85f21a1..5dfdf053c4 100644
--- a/resources/js/components/collections/Listing.vue
+++ b/resources/js/components/collections/Listing.vue
@@ -3,15 +3,29 @@
         <div class="card overflow-hidden p-0">
             <data-list-table>
                 <template #cell-title="{ row: collection }">
-                    <a :href="collection.available_in_selected_site ? collection.entries_url : collection.edit_url">{{ __(collection.title) }}</a>
+                    <a :href="collection.available_in_selected_site ? collection.entries_url : collection.edit_url">{{
+                        __(collection.title)
+                    }}</a>
                 </template>
                 <template #actions="{ row: collection, index }">
                     <dropdown-list placement="left-start">
                         <dropdown-item :text="__('View')" :redirect="collection.entries_url" />
-                        <dropdown-item v-if="collection.url" :text="__('Visit URL')" :external-link="collection.url"  />
-                        <dropdown-item v-if="collection.editable" :text="__('Edit Collection')" :redirect="collection.edit_url" />
-                        <dropdown-item v-if="collection.blueprint_editable" :text="__('Edit Blueprints')" :redirect="collection.blueprints_url" />
-                        <dropdown-item v-if="collection.editable" :text="__('Scaffold Views')" :redirect="collection.scaffold_url" />
+                        <dropdown-item v-if="collection.url" :text="__('Visit URL')" :external-link="collection.url" />
+                        <dropdown-item
+                            v-if="collection.editable"
+                            :text="__('Edit Collection')"
+                            :redirect="collection.edit_url"
+                        />
+                        <dropdown-item
+                            v-if="collection.blueprint_editable"
+                            :text="__('Edit Blueprints')"
+                            :redirect="collection.blueprints_url"
+                        />
+                        <dropdown-item
+                            v-if="collection.editable"
+                            :text="__('Scaffold Views')"
+                            :redirect="collection.scaffold_url"
+                        />
                         <data-list-inline-actions
                             :item="collection.id"
                             :url="collection.actions_url"
@@ -26,10 +40,9 @@
 </template>
 
 <script>
-import Listing from '../Listing.vue'
+import Listing from '../Listing.vue';
 
 export default {
-
     mixins: [Listing],
 
     props: {
@@ -42,22 +55,21 @@ export default {
             initializedRequest: false,
             items: this.initialRows,
             requestUrl: cp_url(`collections`),
-        }
+        };
     },
 
     methods: {
         request() {
             // If we have initial data, we don't need to perform a request.
             // Subsequent requests, like after performing actions, we do want to perform a request.
-            if (! this.initializedRequest) {
+            if (!this.initializedRequest) {
                 this.loading = false;
                 this.initializedRequest = true;
                 return;
             }
 
             Listing.methods.request.call(this);
-        }
-    }
-
-}
+        },
+    },
+};
 </script>
diff --git a/resources/js/components/collections/OneOrManySitesField.vue b/resources/js/components/collections/OneOrManySitesField.vue
index a3960b7081..bccbc3b298 100644
--- a/resources/js/components/collections/OneOrManySitesField.vue
+++ b/resources/js/components/collections/OneOrManySitesField.vue
@@ -1,15 +1,19 @@
 <template>
-
     <div>
         <div v-if="hasMultipleSites">
             <div class="radio-fieldtype mb-2">
-                <radio-fieldtype :handle="`${handle}_mode`" :value="mode" @input="setMode" :config="{
-                    inline: true,
-                    options: {
-                        single: __('Single'),
-                        multiple: __('Per-site'),
-                    }
-                }" />
+                <radio-fieldtype
+                    :handle="`${handle}_mode`"
+                    :value="mode"
+                    @input="setMode"
+                    :config="{
+                        inline: true,
+                        options: {
+                            single: __('Single'),
+                            multiple: __('Per-site'),
+                        },
+                    }"
+                />
             </div>
             <table class="grid-table" v-if="inMultipleMode">
                 <thead>
@@ -26,7 +30,8 @@
                                 dir="ltr"
                                 class="slug-field"
                                 :value="value[site.handle]"
-                                @input="updateSiteValue(site.handle, $event)" />
+                                @input="updateSiteValue(site.handle, $event)"
+                            />
                         </td>
                     </tr>
                 </tbody>
@@ -37,18 +42,15 @@
             <text-input :value="value" @input="update" class="slug-field" dir="ltr" />
         </div>
     </div>
-
 </template>
 
 <script>
 export default {
-
     props: ['handle', 'value', 'state', 'columnHeader'],
 
     computed: {
-
         mode() {
-            return (this.value === null || typeof this.value === 'string') ? 'single' : 'multiple';
+            return this.value === null || typeof this.value === 'string' ? 'single' : 'multiple';
         },
 
         sites() {
@@ -59,8 +61,8 @@ export default {
             return state.values.sites.map((handle, i) => {
                 return {
                     handle,
-                    name: state.meta.sites.data[i].title
-                }
+                    name: state.meta.sites.data[i].title,
+                };
             });
         },
 
@@ -71,11 +73,9 @@ export default {
         inMultipleMode() {
             return this.mode === 'multiple';
         },
-
     },
 
     methods: {
-
         setMode(mode) {
             if (mode === this.mode) return;
 
@@ -94,7 +94,7 @@ export default {
                     value = this.multipleValue;
                 } else {
                     value = {};
-                    this.sites.forEach(site => value[site.handle] = '');
+                    this.sites.forEach((site) => (value[site.handle] = ''));
                 }
             }
 
@@ -110,7 +110,6 @@ export default {
         update(value) {
             this.$emit('input', value);
         },
-
-    }
-}
+    },
+};
 </script>
diff --git a/resources/js/components/collections/Routes.vue b/resources/js/components/collections/Routes.vue
index 10127b53e0..bd7365c796 100644
--- a/resources/js/components/collections/Routes.vue
+++ b/resources/js/components/collections/Routes.vue
@@ -10,11 +10,11 @@
 
 <script>
 import Fieldtype from '../fieldtypes/Fieldtype.vue';
-import OneOrManySitesField from './OneOrManySitesField.vue'
+import OneOrManySitesField from './OneOrManySitesField.vue';
 
 export default {
     mixins: [Fieldtype],
     inject: ['storeName'],
-    components: { OneOrManySitesField }
-}
+    components: { OneOrManySitesField },
+};
 </script>
diff --git a/resources/js/components/collections/Scaffolder.vue b/resources/js/components/collections/Scaffolder.vue
index ba13d96c5b..95ad445385 100644
--- a/resources/js/components/collections/Scaffolder.vue
+++ b/resources/js/components/collections/Scaffolder.vue
@@ -1,53 +1,61 @@
 <template>
     <div class="">
-        <div class="card p-6 ">
+        <div class="card p-6">
             <header class="mb-6">
                 <p class="text-gray" v-text="__('messages.collection_scaffold_instructions')" />
             </header>
-             <table class="data-table border rounded">
+            <table class="data-table rounded border">
                 <tbody>
                     <tr>
-                        <td class="checkbox-column border-r" @click="selected.index = ! selected.index">
-                            <div class="flex items-center h-full">
-                                <input type="checkbox" v-model="selected.index" class="rtl:ml-4 ltr:mr-4" id="field_index" />
+                        <td class="checkbox-column border-r" @click="selected.index = !selected.index">
+                            <div class="flex h-full items-center">
+                                <input
+                                    type="checkbox"
+                                    v-model="selected.index"
+                                    class="ltr:mr-4 rtl:ml-4"
+                                    id="field_index"
+                                />
                             </div>
                         </td>
                         <td class="border-r">
                             <label for="field_index" v-text="__('Index Template')" />
                         </td>
-                        <td :class="{'opacity-25': ! selected.index }">
-                            <input type="text" v-model="index" class="input-text font-mono" dir="ltr">
+                        <td :class="{ 'opacity-25': !selected.index }">
+                            <input type="text" v-model="index" class="input-text font-mono" dir="ltr" />
                         </td>
                     </tr>
                     <tr>
-                        <td class="checkbox-column border-r" @click="selected.show = ! selected.show">
-                            <div class="flex items-center h-full">
-                                <input type="checkbox" v-model="selected.show" class="rtl:ml-4 ltr:mr-4" id="field_template" />
+                        <td class="checkbox-column border-r" @click="selected.show = !selected.show">
+                            <div class="flex h-full items-center">
+                                <input
+                                    type="checkbox"
+                                    v-model="selected.show"
+                                    class="ltr:mr-4 rtl:ml-4"
+                                    id="field_template"
+                                />
                             </div>
                         </td>
                         <td class="border-r">
                             <label for="field_template" v-text="__('Show Template')" />
                         </td>
-                        <td :class="{'opacity-25': ! selected.show }">
-                            <input type="text" v-model="show" class="input-text font-mono" dir="ltr">
+                        <td :class="{ 'opacity-25': !selected.show }">
+                            <input type="text" v-model="show" class="input-text font-mono" dir="ltr" />
                         </td>
                     </tr>
                 </tbody>
             </table>
         </div>
 
-        <div class="flex justify-center mt-8">
-            <button tabindex="4" class="btn-primary mx-auto btn-lg" :disabled="! canSubmit" @click="submit">
-                {{ __('Create Views')}}
+        <div class="mt-8 flex justify-center">
+            <button tabindex="4" class="btn-primary btn-lg mx-auto" :disabled="!canSubmit" @click="submit">
+                {{ __('Create Views') }}
             </button>
         </div>
     </div>
 </template>
 
 <script>
-
 export default {
-
     props: {
         route: { type: String },
         title: { type: String },
@@ -61,14 +69,14 @@ export default {
             selected: {
                 blueprint: true,
                 index: true,
-                show: true
-            }
-        }
+                show: true,
+            },
+        };
     },
 
     computed: {
         canSubmit() {
-            return ! _.isEmpty(this.files);
+            return !_.isEmpty(this.files);
         },
 
         files() {
@@ -83,25 +91,28 @@ export default {
             }
 
             return files;
-        }
+        },
     },
 
     methods: {
         submit() {
-            this.$axios.post(this.route, this.files).then(response => {
-                window.location = response.data.redirect;
-            }).catch(error => {
-                this.$toast.error(error.response.data.message);
-            });
-        }
+            this.$axios
+                .post(this.route, this.files)
+                .then((response) => {
+                    window.location = response.data.redirect;
+                })
+                .catch((error) => {
+                    this.$toast.error(error.response.data.message);
+                });
+        },
     },
 
     mounted() {
-        this.$keys.bindGlobal(['return'], e => {
+        this.$keys.bindGlobal(['return'], (e) => {
             if (this.canSubmit) {
                 this.submit();
             }
         });
-    }
-}
+    },
+};
 </script>
diff --git a/resources/js/components/collections/TitleFormats.vue b/resources/js/components/collections/TitleFormats.vue
index 7826efe1ea..1b8cde97ba 100644
--- a/resources/js/components/collections/TitleFormats.vue
+++ b/resources/js/components/collections/TitleFormats.vue
@@ -10,11 +10,11 @@
 
 <script>
 import Fieldtype from '../fieldtypes/Fieldtype.vue';
-import OneOrManySitesField from './OneOrManySitesField.vue'
+import OneOrManySitesField from './OneOrManySitesField.vue';
 
 export default {
     mixins: [Fieldtype],
     inject: ['storeName'],
-    components: { OneOrManySitesField }
-}
+    components: { OneOrManySitesField },
+};
 </script>
diff --git a/resources/js/components/collections/View.vue b/resources/js/components/collections/View.vue
index 824d4edfb2..76cdd1fa06 100644
--- a/resources/js/components/collections/View.vue
+++ b/resources/js/components/collections/View.vue
@@ -1,31 +1,37 @@
 <template>
-
     <div>
-
         <header class="mb-6">
-
             <breadcrumb :url="breadcrumbUrl" :title="__('Collections')" />
 
             <div class="flex items-center">
                 <h1 class="flex-1" v-text="__(title)" />
 
-                <dropdown-list class="rtl:ml-2 ltr:mr-2" v-if="!!this.$slots.twirldown">
+                <dropdown-list class="ltr:mr-2 rtl:ml-2" v-if="!!this.$slots.twirldown">
                     <slot name="twirldown" :actionCompleted="actionCompleted" />
                 </dropdown-list>
 
-                <div class="btn-group rtl:ml-4 ltr:mr-4" v-if="canUseStructureTree && !treeIsDirty">
-                    <button class="btn flex items-center px-4" @click="view = 'tree'" :class="{'active': view === 'tree'}" v-tooltip="__('Tree')">
-                        <svg-icon name="light/structures" class="h-4 w-4"/>
+                <div class="btn-group ltr:mr-4 rtl:ml-4" v-if="canUseStructureTree && !treeIsDirty">
+                    <button
+                        class="btn flex items-center px-4"
+                        @click="view = 'tree'"
+                        :class="{ active: view === 'tree' }"
+                        v-tooltip="__('Tree')"
+                    >
+                        <svg-icon name="light/structures" class="h-4 w-4" />
                     </button>
-                    <button class="btn flex items-center px-4" @click="view = 'list'" :class="{'active': view === 'list'}" v-tooltip="__('List')">
+                    <button
+                        class="btn flex items-center px-4"
+                        @click="view = 'list'"
+                        :class="{ active: view === 'list' }"
+                        v-tooltip="__('List')"
+                    >
                         <svg-icon name="assets-mode-table" class="h-4 w-4" />
                     </button>
                 </div>
 
                 <template v-if="view === 'tree'">
-
                     <a
-                        class="text-2xs text-blue rtl:ml-4 ltr:mr-4 underline"
+                        class="text-2xs text-blue underline ltr:mr-4 rtl:ml-4"
                         v-if="treeIsDirty"
                         v-text="__('Discard changes')"
                         @click="cancelTreeProgress"
@@ -33,44 +39,50 @@
 
                     <site-selector
                         v-if="sites.length > 1"
-                        class="rtl:ml-4 ltr:mr-4"
+                        class="ltr:mr-4 rtl:ml-4"
                         :sites="sites"
                         :value="site"
                         @input="site = $event.handle"
                     />
 
                     <button
-                        class="btn rtl:ml-4 ltr:mr-4"
-                        :class="{ 'disabled': !treeIsDirty, 'btn-danger': deletedEntries.length }"
+                        class="btn ltr:mr-4 rtl:ml-4"
+                        :class="{ disabled: !treeIsDirty, 'btn-danger': deletedEntries.length }"
                         :disabled="!treeIsDirty"
                         @click="saveTree"
                         v-text="__('Save Changes')"
-                        v-tooltip="deletedEntries.length ? __n('An entry will be deleted|:count entries will be deleted', deletedEntries.length) : null" />
-
+                        v-tooltip="
+                            deletedEntries.length
+                                ? __n('An entry will be deleted|:count entries will be deleted', deletedEntries.length)
+                                : null
+                        "
+                    />
                 </template>
 
                 <template v-if="view === 'list' && reorderable">
                     <site-selector
                         v-if="sites.length > 1 && reordering && site"
-                        class="rtl:ml-4 ltr:mr-4"
+                        class="ltr:mr-4 rtl:ml-4"
                         :sites="sites"
                         :value="site"
                         @input="site = $event.handle"
                     />
 
-                    <button class="btn rtl:ml-4 ltr:mr-4"
+                    <button
+                        class="btn ltr:mr-4 rtl:ml-4"
                         v-if="!reordering"
                         @click="reordering = true"
-                        v-text="__('Reorder')" />
+                        v-text="__('Reorder')"
+                    />
 
                     <template v-if="reordering">
-                        <button class="btn rtl:mr-2 ltr:ml-2"
-                            @click="reordering = false"
-                            v-text="__('Cancel')" />
+                        <button class="btn ltr:ml-2 rtl:mr-2" @click="reordering = false" v-text="__('Cancel')" />
 
-                        <button class="btn-primary rtl:mr-2 ltr:ml-2"
+                        <button
+                            class="btn-primary ltr:ml-2 rtl:mr-2"
                             @click="$refs.list.saveOrder"
-                            v-text="__('Save Order')" />
+                            v-text="__('Save Order')"
+                        />
                     </template>
                 </template>
 
@@ -79,9 +91,9 @@
                     button-class="btn-primary"
                     :url="createUrl"
                     :blueprints="blueprints"
-                    :text="createLabel" />
+                    :text="createLabel"
+                />
             </div>
-
         </header>
 
         <entry-list
@@ -120,10 +132,12 @@
             @canceled="markTreeClean"
         >
             <template #branch-icon="{ branch }">
-                <svg-icon v-if="isRedirectBranch(branch)"
-                    class="inline-block w-4 h-4 text-gray-500"
+                <svg-icon
+                    v-if="isRedirectBranch(branch)"
+                    class="inline-block h-4 w-4 text-gray-500"
                     name="light/external-link"
-                    v-tooltip="__('Redirect')" />
+                    v-tooltip="__('Redirect')"
+                />
             </template>
 
             <template #branch-options="{ branch, removeBranch, depth }">
@@ -134,14 +148,16 @@
                         v-for="blueprint in blueprints"
                         :key="blueprint.handle"
                         @click="createEntry(blueprint.handle, branch.id)"
-                        v-text="blueprints.length > 1 ? __(blueprint.title) : __('Create Child Entry')" />
+                        v-text="blueprints.length > 1 ? __(blueprint.title) : __('Create Child Entry')"
+                    />
                 </template>
                 <template v-if="branch.can_delete">
                     <li class="divider"></li>
                     <dropdown-item
                         :text="__('Delete')"
                         class="warning"
-                        @click="deleteTreeBranch(branch, removeBranch)" />
+                        @click="deleteTreeBranch(branch, removeBranch)"
+                    />
                 </template>
             </template>
         </page-tree>
@@ -150,7 +166,10 @@
             v-if="showEntryDeletionConfirmation"
             :children="numberOfChildrenToBeDeleted"
             @confirm="entryDeletionConfirmCallback"
-            @cancel="showEntryDeletionConfirmation = false; entryBeingDeleted = null;"
+            @cancel="
+                showEntryDeletionConfirmation = false;
+                entryBeingDeleted = null;
+            "
         />
 
         <delete-localization-confirmation
@@ -160,7 +179,6 @@
             @cancel="showLocalizationDeleteBehaviorConfirmation = false"
         />
     </div>
-
 </template>
 
 <script>
@@ -171,14 +189,13 @@ import SiteSelector from '../SiteSelector.vue';
 import HasActions from '../publish/HasActions';
 
 export default {
-
     mixins: [HasActions],
 
     components: {
         PageTree,
         DeleteEntryConfirmation,
         DeleteLocalizationConfirmation,
-        SiteSelector
+        SiteSelector,
     },
 
     props: {
@@ -221,11 +238,10 @@ export default {
             site: this.initialSite,
             reordering: false,
             preferencesPrefix: `collections.${this.handle}`,
-        }
+        };
     },
 
     computed: {
-
         treeIsDirty() {
             return this.$dirty.has('page-tree');
         },
@@ -241,31 +257,28 @@ export default {
         numberOfChildrenToBeDeleted() {
             let children = 0;
             const countChildren = (entry) => {
-                entry.children.forEach(child => {
+                entry.children.forEach((child) => {
                     children++;
                     countChildren(child);
                 });
-            }
+            };
             countChildren(this.entryBeingDeleted);
             return children;
         },
 
         createUrl() {
             return this.createUrls[this.site || this.initialSite];
-        }
-
+        },
     },
 
     watch: {
-
         view(view) {
             this.site = this.site || this.initialSite;
 
             this.$config.set('wrapperClass', view === 'tree' ? undefined : 'max-w-full');
 
-            localStorage.setItem('statamic.collection-view.'+this.handle, view);
-        }
-
+            localStorage.setItem('statamic.collection-view.' + this.handle, view);
+        },
     },
 
     mounted() {
@@ -274,7 +287,6 @@ export default {
     },
 
     methods: {
-
         cancelTreeProgress() {
             this.$refs.tree.cancel();
             this.deletedEntries = [];
@@ -288,10 +300,10 @@ export default {
 
             // When the user doesn't have permission to access the sites the entry is localized in,
             // we should use the "copy" behavior to detach the entry from the site.
-            if (! this.canChangeLocalizationDeleteBehavior) {
+            if (!this.canChangeLocalizationDeleteBehavior) {
                 this.deleteLocalizationBehavior = 'copy';
                 this.$nextTick(() => this.performTreeSaving());
-                return
+                return;
             }
 
             this.showLocalizationDeleteBehaviorConfirmation = true;
@@ -299,7 +311,7 @@ export default {
                 this.deleteLocalizationBehavior = behavior;
                 this.showLocalizationDeleteBehaviorConfirmation = false;
                 this.$nextTick(() => this.performTreeSaving());
-            }
+            };
         },
 
         performTreeSaving() {
@@ -322,7 +334,7 @@ export default {
 
             const fallback = this.canUseStructureTree ? 'tree' : 'list';
 
-            return localStorage.getItem('statamic.collection-view.'+this.handle) || fallback;
+            return localStorage.getItem('statamic.collection-view.' + this.handle) || fallback;
         },
 
         deleteTreeBranch(branch, removeFromUi) {
@@ -334,12 +346,12 @@ export default {
                 removeFromUi(shouldDeleteChildren);
                 this.showEntryDeletionConfirmation = false;
                 this.entryBeingDeleted = false;
-            }
+            };
         },
 
         markEntriesForDeletion(branch) {
             const addDeletableChildren = (branch) => {
-                branch.children.forEach(child => {
+                branch.children.forEach((child) => {
                     this.deletedEntries.push(child.id);
                     addDeletableChildren(child);
                 });
@@ -360,14 +372,12 @@ export default {
 
         editPage(page, vm, store, $event) {
             const url = page.edit_url;
-            $event.metaKey ? window.open(url) : window.location = url;
+            $event.metaKey ? window.open(url) : (window.location = url);
         },
 
         afterActionSuccessfullyCompleted(response) {
             if (!response.redirect) window.location.reload();
-        }
-
-    }
-
-}
+        },
+    },
+};
 </script>
diff --git a/resources/js/components/configure/Tabs.vue b/resources/js/components/configure/Tabs.vue
index c2736dea0e..3216462f98 100644
--- a/resources/js/components/configure/Tabs.vue
+++ b/resources/js/components/configure/Tabs.vue
@@ -2,7 +2,7 @@
     <element-container @resized="containerWidth = $event.width">
         <div>
             <div v-for="tab in tabs" :key="tab.handle">
-                <div class="mb-2 content">
+                <div class="content mb-2">
                     <h2 v-text="tab.display" class="text-base" />
                     <p v-html="tab.instructions" />
                 </div>
@@ -32,7 +32,7 @@ export default {
 
     props: {
         readOnly: Boolean,
-        syncable: Boolean
+        syncable: Boolean,
     },
 
     data() {
@@ -40,12 +40,11 @@ export default {
 
         return {
             active: state.blueprint.tabs[0].handle,
-            containerWidth: null
-        }
+            containerWidth: null,
+        };
     },
 
     computed: {
-
         state() {
             return this.$store.state.publish[this.storeName];
         },
@@ -56,9 +55,7 @@ export default {
 
         actionsPortal() {
             return `publish-actions-${this.storeName}`;
-        }
-
-    }
-
-}
+        },
+    },
+};
 </script>
diff --git a/resources/js/components/data-list/Action.vue b/resources/js/components/data-list/Action.vue
index 2feff58a51..73f4fe46b0 100644
--- a/resources/js/components/data-list/Action.vue
+++ b/resources/js/components/data-list/Action.vue
@@ -1,5 +1,4 @@
 <template>
-
     <span>
         <slot :action="action" :select="select" />
 
@@ -12,11 +11,25 @@
             @confirm="confirm"
             @cancel="reset"
         >
-            <div v-if="confirmationText" v-text="confirmationText" :class="{ 'mb-4': warningText || showDirtyWarning || action.fields.length }" />
-
-            <div v-if="warningText" v-text="warningText" class="text-red-500" :class="{ 'mb-4': showDirtyWarning || action.fields.length }" />
-
-            <div v-if="showDirtyWarning" v-text="dirtyText" class="text-red-500" :class="{ 'mb-4': action.fields.length }" />
+            <div
+                v-if="confirmationText"
+                v-text="confirmationText"
+                :class="{ 'mb-4': warningText || showDirtyWarning || action.fields.length }"
+            />
+
+            <div
+                v-if="warningText"
+                v-text="warningText"
+                class="text-red-500"
+                :class="{ 'mb-4': showDirtyWarning || action.fields.length }"
+            />
+
+            <div
+                v-if="showDirtyWarning"
+                v-text="dirtyText"
+                class="text-red-500"
+                :class="{ 'mb-4': action.fields.length }"
+            />
 
             <publish-container
                 v-if="action.fields.length"
@@ -28,23 +41,16 @@
                 @updated="values = $event"
                 v-slot="{ setFieldValue, setFieldMeta }"
             >
-                <publish-fields
-                    :fields="action.fields"
-                    @updated="setFieldValue"
-                    @meta-updated="setFieldMeta"
-                />
+                <publish-fields :fields="action.fields" @updated="setFieldValue" @meta-updated="setFieldMeta" />
             </publish-container>
         </confirmation-modal>
     </span>
-
 </template>
 
-
 <script>
 import PublishFields from '../publish/Fields.vue';
 
 export default {
-
     components: {
         PublishFields,
     },
@@ -59,51 +65,49 @@ export default {
             required: true,
         },
         errors: {
-            type: Object
+            type: Object,
         },
         isDirty: {
             type: Boolean,
             default: false,
-        }
+        },
     },
 
     data() {
         return {
             confirming: false,
-            fieldset: {tabs:[{fields:this.action.fields}]},
+            fieldset: { tabs: [{ fields: this.action.fields }] },
             values: this.action.values,
             running: false,
-        }
+        };
     },
 
     computed: {
-
         confirmationText() {
-            if (! this.action.confirmationText) return;
+            if (!this.action.confirmationText) return;
 
             return __n(this.action.confirmationText, this.selections);
         },
 
         warningText() {
-            if (! this.action.warningText) return;
+            if (!this.action.warningText) return;
 
             return __n(this.action.warningText, this.selections);
         },
 
         dirtyText() {
-            if (! this.isDirty) return;
+            if (!this.isDirty) return;
 
             return __(this.action.dirtyWarningText);
         },
 
         showDirtyWarning() {
-            return this.isDirty && this.action.dirtyWarningText && ! this.action.bypassesDirtyWarning;
+            return this.isDirty && this.action.dirtyWarningText && !this.action.bypassesDirtyWarning;
         },
 
         runButtonText() {
             return __n(this.action.buttonText, this.selections);
-        }
-
+        },
     },
 
     created() {
@@ -139,8 +143,6 @@ export default {
 
             this.values = clone(this.action.values);
         },
-
-    }
-
-}
+    },
+};
 </script>
diff --git a/resources/js/components/data-list/Actions.js b/resources/js/components/data-list/Actions.js
index 1a168f0629..2ce9d59284 100644
--- a/resources/js/components/data-list/Actions.js
+++ b/resources/js/components/data-list/Actions.js
@@ -1,32 +1,26 @@
 import DataListAction from './Action.vue';
 
 export default {
-
     components: {
-        DataListAction
+        DataListAction,
     },
 
     props: {
-        url: String
+        url: String,
     },
 
     data() {
         return {
-            errors: {}
-        }
+            errors: {},
+        };
     },
 
     computed: {
-
         sortedActions() {
             let actions = _.sortBy(this.actions, 'title');
 
-            return [
-                ...actions.filter(action => !action.dangerous),
-                ...actions.filter(action => action.dangerous)
-            ];
+            return [...actions.filter((action) => !action.dangerous), ...actions.filter((action) => action.dangerous)];
         },
-
     },
 
     methods: {
@@ -39,7 +33,7 @@ export default {
                 action: action.handle,
                 context: action.context,
                 selections: this.selections,
-                values
+                values,
             };
 
             this.$axios
@@ -51,12 +45,12 @@ export default {
                 })
                 .catch((error) => this.handleActionError(error.response))
                 .finally(() => {
-                    if (done) done()
+                    if (done) done();
                 });
         },
 
         handleActionSuccess(response) {
-            response.data.text().then(data => {
+            response.data.text().then((data) => {
                 data = JSON.parse(data);
                 if (data.redirect) {
                     if (data.bypassesDirtyWarning) this.$dirty.disableWarning();
@@ -68,7 +62,7 @@ export default {
         },
 
         handleActionError(response) {
-            response.data.text().then(data => {
+            response.data.text().then((data) => {
                 data = JSON.parse(data);
                 if (response.status == 422) this.errors = data.errors;
                 this.$toast.error(data.message);
@@ -77,8 +71,10 @@ export default {
         },
 
         handleFileDownload(response) {
-            const attachmentMatch = response.headers['content-disposition'].match(/^attachment.+filename\*?=(?:UTF-8'')?"?([^"]+)"?/i) || [];
-            if (! attachmentMatch.length) return;
+            const attachmentMatch =
+                response.headers['content-disposition'].match(/^attachment.+filename\*?=(?:UTF-8'')?"?([^"]+)"?/i) ||
+                [];
+            if (!attachmentMatch.length) return;
             const filename = attachmentMatch.length >= 2 ? attachmentMatch[1] : 'file.txt';
             const url = window.URL.createObjectURL(new Blob([response.data]));
             const link = document.createElement('a');
@@ -88,7 +84,5 @@ export default {
             link.click();
             this.$emit('completed', true);
         },
-
-    }
-
-}
+    },
+};
diff --git a/resources/js/components/data-list/BulkActions.vue b/resources/js/components/data-list/BulkActions.vue
index 1b2c3c9b94..d1674184e6 100644
--- a/resources/js/components/data-list/BulkActions.vue
+++ b/resources/js/components/data-list/BulkActions.vue
@@ -1,10 +1,11 @@
 <template>
-
     <div v-if="showAlways || hasSelections" class="data-list-bulk-actions">
         <div class="input-group input-group-sm relative">
             <div class="input-group-prepend">
-                <div class="text-gray-700 dark:text-dark-175 hidden md:inline-block"
-                    v-text="__n(`:count item selected|:count items selected`, selections.length)" />
+                <div
+                    class="hidden text-gray-700 dark:text-dark-175 md:inline-block"
+                    v-text="__n(`:count item selected|:count items selected`, selections.length)"
+                />
                 <div class="text-gray-700 dark:text-dark-175 md:hidden" v-text="selections.length" />
             </div>
 
@@ -20,20 +21,22 @@
             >
                 <button
                     class="input-group-item"
-                    :class="{'text-red-500': action.dangerous, 'ltr:rounded-r rtl:rounded-l': index + 1 === sortedActions.length }"
+                    :class="{
+                        'text-red-500': action.dangerous,
+                        'ltr:rounded-r rtl:rounded-l': index + 1 === sortedActions.length,
+                    }"
                     @click="select"
-                    v-text="__(action.title)" />
+                    v-text="__(action.title)"
+                />
             </data-list-action>
         </div>
     </div>
-
 </template>
 
 <script>
 import Actions from './Actions';
 
 export default {
-
     mixins: [Actions],
 
     inject: ['sharedState'],
@@ -41,12 +44,12 @@ export default {
     props: {
         context: {
             type: Object,
-            default: () => {}
+            default: () => {},
         },
         showAlways: {
             type: Boolean,
-            default: false
-        }
+            default: false,
+        },
     },
 
     data() {
@@ -85,11 +88,10 @@ export default {
                 data.context = this.context;
             }
 
-            this.$axios.post(this.url+'/list', data).then(response => {
+            this.$axios.post(this.url + '/list', data).then((response) => {
                 this.actions = response.data;
             });
         },
     },
-
-}
+};
 </script>
diff --git a/resources/js/components/data-list/ColumnPicker.vue b/resources/js/components/data-list/ColumnPicker.vue
index a174dc9965..f1a25ea6de 100644
--- a/resources/js/components/data-list/ColumnPicker.vue
+++ b/resources/js/components/data-list/ColumnPicker.vue
@@ -3,27 +3,52 @@
         <button
             @click="open = true"
             v-tooltip="__('Customize Columns')"
-            class="btn py-1 px-1 h-8 w-8 flex items-center justify-center"
+            class="btn flex h-8 w-8 items-center justify-center px-1 py-1"
         >
-            <svg-icon name="light/settings-horizontal" class="w-4 h-4" />
+            <svg-icon name="light/settings-horizontal" class="h-4 w-4" />
         </button>
 
-        <modal v-if="open" name="column-picker" @closed="open = false" draggable=".modal-drag-handle" click-to-close v-slot="{ close }">
-            <div class="flex flex-col h-full -max-h-screen-px">
-
-                <header class="modal-drag-handle p-4 bg-gray-200 dark:bg-dark-650 border-b dark:border-dark-900 flex items-center justify-between cursor-grab active:cursor-grabbing">
+        <modal
+            v-if="open"
+            name="column-picker"
+            @closed="open = false"
+            draggable=".modal-drag-handle"
+            click-to-close
+            v-slot="{ close }"
+        >
+            <div class="-max-h-screen-px flex h-full flex-col">
+                <header
+                    class="modal-drag-handle flex cursor-grab items-center justify-between border-b bg-gray-200 p-4 active:cursor-grabbing dark:border-dark-900 dark:bg-dark-650"
+                >
                     <h2>{{ __('Customize Columns') }}</h2>
                     <button class="btn-close" @click="close" :aria-label="__('Close Editor')">&times;</button>
                 </header>
 
-                <div class="flex grow min-h-0 rounded-t-md bg-gray-100 dark:bg-dark-600">
+                <div class="flex min-h-0 grow rounded-t-md bg-gray-100 dark:bg-dark-600">
                     <!-- Available Columns -->
-                    <div class="outline-none rtl:text-right ltr:text-left w-1/2 rtl:border-l ltr:border-r dark:border-dark-900 flex flex-col">
-                        <header v-text="__('Available Columns')" class="border-b dark:border-dark-900 py-2 px-3 text-sm bg-white dark:bg-dark-700 font-medium"/>
-                        <div class="flex flex-1 flex-col space-y-1 py-2 px-3 select-none shadow-inner overflow-y-scroll">
-                            <div class="column-picker-item" v-for="column in hiddenColumns" :key="column.field" v-if="hiddenColumns.length">
-                                <label class="flex items-center cursor-pointer">
-                                    <input type="checkbox" class="rtl:ml-2 ltr:mr-2" v-model="column.visible" @change="columnToggled(column) "/>
+                    <div
+                        class="flex w-1/2 flex-col outline-none dark:border-dark-900 ltr:border-r ltr:text-left rtl:border-l rtl:text-right"
+                    >
+                        <header
+                            v-text="__('Available Columns')"
+                            class="border-b bg-white px-3 py-2 text-sm font-medium dark:border-dark-900 dark:bg-dark-700"
+                        />
+                        <div
+                            class="flex flex-1 select-none flex-col space-y-1 overflow-y-scroll px-3 py-2 shadow-inner"
+                        >
+                            <div
+                                class="column-picker-item"
+                                v-for="column in hiddenColumns"
+                                :key="column.field"
+                                v-if="hiddenColumns.length"
+                            >
+                                <label class="flex cursor-pointer items-center">
+                                    <input
+                                        type="checkbox"
+                                        class="ltr:mr-2 rtl:ml-2"
+                                        v-model="column.visible"
+                                        @change="columnToggled(column)"
+                                    />
                                     {{ __(column.label) }}
                                 </label>
                             </div>
@@ -31,8 +56,11 @@
                     </div>
 
                     <!-- Displayed Columns -->
-                    <div class="w-1/2 flex flex-col">
-                        <header v-text="__('Displayed Columns')" class="border-b dark:border-dark-900 px-3 py-2 text-sm bg-white dark:bg-dark-700 font-medium flex-none"/>
+                    <div class="flex w-1/2 flex-col">
+                        <header
+                            v-text="__('Displayed Columns')"
+                            class="flex-none border-b bg-white px-3 py-2 text-sm font-medium dark:border-dark-900 dark:bg-dark-700"
+                        />
                         <div class="grow overflow-y-scroll shadow-inner">
                             <sortable-list
                                 v-model="selectedColumns"
@@ -43,11 +71,22 @@
                                 append-to=".modal-body"
                                 constrain-dimensions
                             >
-                                <div class="space-y-1 px-3 p-3 select-none">
-                                    <div class="item sortable cursor-grab" v-for="column in selectedColumns" :key="column.field" tabindex="-1">
+                                <div class="select-none space-y-1 p-3 px-3">
+                                    <div
+                                        class="item sortable cursor-grab"
+                                        v-for="column in selectedColumns"
+                                        :key="column.field"
+                                        tabindex="-1"
+                                    >
                                         <div class="item-move py-1">&nbsp;</div>
-                                        <div class="flex flex-1 rtl:mr-2 ltr:ml-2 items-center p-0">
-                                            <input type="checkbox" class="rtl:ml-2 ltr:mr-2" v-model="column.visible" @change="columnToggled(column)" :disabled="selectedColumns.length === 1" />
+                                        <div class="flex flex-1 items-center p-0 ltr:ml-2 rtl:mr-2">
+                                            <input
+                                                type="checkbox"
+                                                class="ltr:mr-2 rtl:ml-2"
+                                                v-model="column.visible"
+                                                @change="columnToggled(column)"
+                                                :disabled="selectedColumns.length === 1"
+                                            />
                                             {{ __(column.label) }}
                                         </div>
                                     </div>
@@ -57,11 +96,18 @@
                     </div>
                 </div>
 
-                <footer class="px-3 py-2 border-t dark:bg-dark-700 dark:border-dark-900 flex items-center justify-end" v-if="preferencesKey">
+                <footer
+                    class="flex items-center justify-end border-t px-3 py-2 dark:border-dark-900 dark:bg-dark-700"
+                    v-if="preferencesKey"
+                >
                     <button class="btn" v-text="__('Reset')" @click="reset" :disabled="saving" />
-                    <button class="rtl:mr-3 ltr:ml-3 btn-primary" v-text="__('Save')" @click="save" :disabled="saving" />
+                    <button
+                        class="btn-primary ltr:ml-3 rtl:mr-3"
+                        v-text="__('Save')"
+                        @click="save"
+                        :disabled="saving"
+                    />
                 </footer>
-
             </div>
         </modal>
     </div>
@@ -71,13 +117,12 @@
 import { SortableList } from '../sortable/Sortable';
 
 export default {
-
     components: {
-        SortableList
+        SortableList,
     },
 
     props: {
-        preferencesKey: String
+        preferencesKey: String,
     },
 
     inject: ['sharedState'],
@@ -88,7 +133,7 @@ export default {
             selectedColumns: [],
             hiddenColumns: [],
             open: false,
-        }
+        };
     },
 
     created() {
@@ -100,23 +145,19 @@ export default {
             deep: true,
             handler() {
                 this.setSharedStateColumns();
-            }
-        }
+            },
+        },
     },
 
     methods: {
-
         setLocalColumns() {
-            this.selectedColumns = this.sharedState.columns.filter(column => column.visible);
-            let hiddenColumns = this.sharedState.columns.filter(column => ! column.visible);
-            this.hiddenColumns = _.sortBy(hiddenColumns, column => column.label.toLowerCase());
+            this.selectedColumns = this.sharedState.columns.filter((column) => column.visible);
+            let hiddenColumns = this.sharedState.columns.filter((column) => !column.visible);
+            this.hiddenColumns = _.sortBy(hiddenColumns, (column) => column.label.toLowerCase());
         },
 
         setSharedStateColumns() {
-            this.sharedState.columns = [
-                ...this.selectedColumns,
-                ...this.hiddenColumns,
-            ];
+            this.sharedState.columns = [...this.selectedColumns, ...this.hiddenColumns];
         },
 
         columnToggled(column) {
@@ -127,43 +168,47 @@ export default {
             toArray.push(fromArray[currentIndex]);
             fromArray.splice(currentIndex, 1);
 
-            this.hiddenColumns = _.sortBy(this.hiddenColumns, column => column.label.toLowerCase());
+            this.hiddenColumns = _.sortBy(this.hiddenColumns, (column) => column.label.toLowerCase());
         },
 
         save() {
             this.saving = true;
 
-            this.$preferences.set(this.preferencesKey, this.selectedColumns.map(column => column.field))
-                .then(response => {
+            this.$preferences
+                .set(
+                    this.preferencesKey,
+                    this.selectedColumns.map((column) => column.field),
+                )
+                .then((response) => {
                     this.saving = false;
                     this.open = false;
                     this.$toast.success(__('These are now your default columns.'));
                 })
-                .catch(error => {
+                .catch((error) => {
                     this.saving = false;
                     this.$toast.error(__('Unable to save column preferences.'));
                 });
         },
 
         reset() {
-            this.sharedState.columns.forEach(column => column.visible = column.defaultVisibility);
-            this.sharedState.columns = _.sortBy(this.sharedState.columns, column => column.defaultOrder);
+            this.sharedState.columns.forEach((column) => (column.visible = column.defaultVisibility));
+            this.sharedState.columns = _.sortBy(this.sharedState.columns, (column) => column.defaultOrder);
             this.setLocalColumns();
 
             this.saving = true;
 
-            this.$preferences.remove(this.preferencesKey)
-                .then(response => {
+            this.$preferences
+                .remove(this.preferencesKey)
+                .then((response) => {
                     this.saving = false;
                     this.open = false;
                     this.$toast.success(__('Columns have been reset to their defaults.'));
                 })
-                .catch(error => {
+                .catch((error) => {
                     this.saving = false;
                     this.$toast.error(__('Unable to save column preferences.'));
                 });
         },
-
-    }
-}
+    },
+};
 </script>
diff --git a/resources/js/components/data-list/DataList.vue b/resources/js/components/data-list/DataList.vue
index 750c16c14b..cce0e6623a 100644
--- a/resources/js/components/data-list/DataList.vue
+++ b/resources/js/components/data-list/DataList.vue
@@ -6,7 +6,7 @@ export default {
     props: {
         columns: {
             type: Array,
-            default: () => []
+            default: () => [],
         },
         rows: {
             type: Array,
@@ -14,29 +14,29 @@ export default {
         },
         searchQuery: {
             type: String,
-            default: ''
+            default: '',
         },
         selections: {
             type: Array,
-            default: () => []
+            default: () => [],
         },
         maxSelections: {
-            type: Number
+            type: Number,
         },
         sort: {
             type: Boolean,
-            default: true
+            default: true,
         },
         sortColumn: String,
         sortDirection: {
             type: String,
-            default: 'asc'
-        }
+            default: 'asc',
+        },
     },
     provide() {
         return {
-            sharedState: this.sharedState
-        }
+            sharedState: this.sharedState,
+        };
     },
     data() {
         return {
@@ -49,12 +49,11 @@ export default {
                 originalRows: this.rows,
                 selections: this.selections,
                 maxSelections: this.maxSelections,
-            }
-        }
+            },
+        };
     },
 
     computed: {
-
         filteredRows() {
             let rows = this.rows;
             rows = this.filterBySearch(rows);
@@ -62,24 +61,22 @@ export default {
         },
 
         visibleColumns() {
-            return this.sharedState.columns.filter(column => column.visible);
+            return this.sharedState.columns.filter((column) => column.visible);
         },
 
         searchableColumns() {
             return this.visibleColumns.length
-                ? this.visibleColumns.map(column => column.field)
+                ? this.visibleColumns.map((column) => column.field)
                 : Object.keys(rows[0]);
         },
-
     },
 
     watch: {
-
         filteredRows: {
             immediate: true,
             handler: function (rows) {
                 this.sharedState.rows = rows;
-            }
+            },
         },
 
         selections(selections) {
@@ -101,7 +98,6 @@ export default {
         visibleColumns(columns) {
             this.$emit('visible-columns-updated', columns);
         },
-
     },
 
     created() {
@@ -115,7 +111,6 @@ export default {
     },
 
     methods: {
-
         setInitialSortColumn() {
             const columns = this.sharedState.columns;
 
@@ -127,7 +122,7 @@ export default {
         },
 
         filterBySearch(rows) {
-            if (! this.searchQuery) return rows;
+            if (!this.searchQuery) return rows;
 
             const fuse = new Fuse(rows, {
                 findAllMatches: true,
@@ -136,14 +131,14 @@ export default {
                 keys: this.searchableColumns,
             });
 
-            return fuse.search(this.searchQuery).map(result => result.item);
+            return fuse.search(this.searchQuery).map((result) => result.item);
         },
 
         sortRows(rows) {
-            if (! this.sort) return rows;
+            if (!this.sort) return rows;
 
             // If no column is selected, don't sort.
-            if (! this.sharedState.sortColumn) return rows;
+            if (!this.sharedState.sortColumn) return rows;
 
             rows = _.sortBy(rows, this.sharedState.sortColumn);
 
@@ -157,7 +152,6 @@ export default {
         clearSelections() {
             this.sharedState.selections = [];
         },
-
     },
 
     render() {
@@ -165,7 +159,6 @@ export default {
             rows: this.filteredRows,
             hasSelections: this.sharedState.selections.length > 0,
         })[0];
-    }
-
-}
+    },
+};
 </script>
diff --git a/resources/js/components/data-list/DefaultField.vue b/resources/js/components/data-list/DefaultField.vue
index 2d946a5d51..9041392718 100644
--- a/resources/js/components/data-list/DefaultField.vue
+++ b/resources/js/components/data-list/DefaultField.vue
@@ -2,19 +2,17 @@
 import { h } from 'vue';
 
 export default {
-
     props: {
-        value: { required: true }
+        value: { required: true },
     },
 
     data() {
         return {
-            truncateAt: 50
-        }
+            truncateAt: 50,
+        };
     },
 
     computed: {
-
         text() {
             let value = this.value;
 
@@ -32,13 +30,11 @@ export default {
             }
 
             return value;
-        }
-
+        },
     },
 
     render() {
         return h('div', { innerHTML: this.text });
-    }
-
-}
+    },
+};
 </script>
diff --git a/resources/js/components/data-list/FieldFilter.vue b/resources/js/components/data-list/FieldFilter.vue
index 204ba0d568..754e77b70f 100644
--- a/resources/js/components/data-list/FieldFilter.vue
+++ b/resources/js/components/data-list/FieldFilter.vue
@@ -2,12 +2,11 @@
     <div>
         <div v-if="hasAvailableFieldFilters">
             <div class="flex flex-col p-3">
-
                 <v-select
                     ref="fieldSelect"
                     :placeholder="__('Field')"
                     :options="fieldOptions"
-                    :reduce="option => option.value"
+                    :reduce="(option) => option.value"
                     :model-value="field"
                     @update:model-value="createFilter"
                 />
@@ -25,28 +24,26 @@
                     <publish-fields
                         :fields="filter.fields"
                         name-prefix="filter-field"
-                        class="w-full no-label"
+                        class="no-label w-full"
                         @updated="setFieldValue"
                         @meta-updated="setFieldMeta"
                     />
                     <!-- TODO: handle showing/hiding of labels more elegantly -->
                 </publish-container>
-
             </div>
 
-            <div class="flex border-t dark:border-dark-900 text-gray-800 dark:text-dark-150">
+            <div class="flex border-t text-gray-800 dark:border-dark-900 dark:text-dark-150">
                 <button
-                    class="p-2 hover:bg-gray-100 dark:hover:bg-dark-600 rtl:rounded-br ltr:rounded-bl text-xs flex-1"
+                    class="flex-1 p-2 text-xs hover:bg-gray-100 dark:hover:bg-dark-600 ltr:rounded-bl rtl:rounded-br"
                     v-text="__('Clear')"
                     @click="resetAll"
                 />
                 <button
-                    class="p-2 hover:bg-gray-100 dark:hover:bg-dark-600 flex-1 rtl:rounded-bl ltr:rounded-br rtl:border-r ltr:border-l dark:border-dark-900 text-xs"
+                    class="flex-1 p-2 text-xs hover:bg-gray-100 dark:border-dark-900 dark:hover:bg-dark-600 ltr:rounded-br ltr:border-l rtl:rounded-bl rtl:border-r"
                     v-text="__('Close')"
                     @click="$emit('closed')"
                 />
             </div>
-
         </div>
         <v-select v-else :disabled="true" :placeholder="__('No available filters')" />
     </div>
@@ -57,7 +54,6 @@ import Validator from '../field-conditions/Validator.js';
 import PublishField from '../publish/Field.vue';
 
 export default {
-
     components: { PublishField },
 
     props: {
@@ -77,26 +73,25 @@ export default {
     },
 
     computed: {
-
         availableFieldFilters() {
-            if (! this.config) return [];
+            if (!this.config) return [];
 
-            return this.config.extra.filter(field => ! this.initialValues[field.handle]);
+            return this.config.extra.filter((field) => !this.initialValues[field.handle]);
         },
 
         hasAvailableFieldFilters() {
-            return !! this.availableFieldFilters.length;
+            return !!this.availableFieldFilters.length;
         },
 
         fieldOptions() {
-            let options = this.availableFieldFilters.map(filter => {
+            let options = this.availableFieldFilters.map((filter) => {
                 return {
                     value: filter.handle,
                     label: filter.display,
                 };
             });
 
-            return _.sortBy(options, option => option.label);
+            return _.sortBy(options, (option) => option.label);
         },
 
         showFieldFilter() {
@@ -104,14 +99,22 @@ export default {
         },
 
         isFilterComplete() {
-            if (! this.filter) return false;
-
-            let visibleFields = _.chain(this.filter.fields).filter(function (field) {
-                let validator = new Validator(field, this.fieldValues);
-                return validator.passesConditions();
-            }, this).mapObject(field => field.handle).values().value();
-
-            let allFieldsFilled = _.chain(this.fieldValues).filter((value, handle) => visibleFields.includes(handle) && value).values().value().length === visibleFields.length;
+            if (!this.filter) return false;
+
+            let visibleFields = _.chain(this.filter.fields)
+                .filter(function (field) {
+                    let validator = new Validator(field, this.fieldValues);
+                    return validator.passesConditions();
+                }, this)
+                .mapObject((field) => field.handle)
+                .values()
+                .value();
+
+            let allFieldsFilled =
+                _.chain(this.fieldValues)
+                    .filter((value, handle) => visibleFields.includes(handle) && value)
+                    .values()
+                    .value().length === visibleFields.length;
 
             return this.field !== null && allFieldsFilled;
         },
@@ -121,13 +124,10 @@ export default {
 
             delete values[this.field];
 
-            values[this.field] = this.isFilterComplete
-                ? this.fieldValues
-                : null;
+            values[this.field] = this.isFilterComplete ? this.fieldValues : null;
 
             return values;
         },
-
     },
 
     watch: {
@@ -136,12 +136,12 @@ export default {
             deep: true,
             handler() {
                 this.update();
-            }
+            },
         },
     },
 
     mounted() {
-        if (! this.hasAvailableFieldFilters) return;
+        if (!this.hasAvailableFieldFilters) return;
 
         this.reset();
 
@@ -149,9 +149,8 @@ export default {
     },
 
     methods: {
-
         popoverClosed() {
-            if (! this.badges[this.field]) {
+            if (!this.badges[this.field]) {
                 this.resetAll();
             }
         },
@@ -163,7 +162,6 @@ export default {
             this.filter = null;
             this.field = null;
             this.fieldValues = null;
-
         },
 
         resetAll() {
@@ -194,17 +192,17 @@ export default {
         },
 
         setFilter(field) {
-            this.filter = _.find(this.availableFieldFilters, filter => filter.handle === field);
+            this.filter = _.find(this.availableFieldFilters, (filter) => filter.handle === field);
         },
 
         setDefaultValues() {
-            if (! this.filter) return;
+            if (!this.filter) return;
 
             let values = {};
 
             this.filter.fields
-                .filter(field => field.default)
-                .forEach(field => values[field.handle] = field.default);
+                .filter((field) => field.default)
+                .forEach((field) => (values[field.handle] = field.default));
 
             this.updateValues(values);
         },
@@ -225,8 +223,6 @@ export default {
         update() {
             this.$emit('changed', this.newValues);
         },
-
-    }
-
-}
+    },
+};
 </script>
diff --git a/resources/js/components/data-list/Filter.vue b/resources/js/components/data-list/Filter.vue
index 5711f437b0..78e326cb3b 100644
--- a/resources/js/components/data-list/Filter.vue
+++ b/resources/js/components/data-list/Filter.vue
@@ -1,6 +1,5 @@
 <template>
-
-    <div class="w-full no-label">
+    <div class="no-label w-full">
         <publish-container
             class="p-3"
             v-if="filter.fields.length"
@@ -21,25 +20,23 @@
 
         <div class="flex border-t dark:border-dark-900">
             <button
-                class="p-2 hover:bg-gray-100 dark:hover:bg-dark-600 rtl:rounded-br ltr:rounded-bl text-xs flex-1"
+                class="flex-1 p-2 text-xs hover:bg-gray-100 dark:hover:bg-dark-600 ltr:rounded-bl rtl:rounded-br"
                 v-text="__('Clear')"
                 @click="resetAll"
             />
             <button
-                class="p-2 hover:bg-gray-100 dark:hover:bg-dark-600 flex-1 rtl:rounded-bl ltr:rounded-br rtl:border-r ltr:border-l dark:border-dark-900 text-xs"
+                class="flex-1 p-2 text-xs hover:bg-gray-100 dark:border-dark-900 dark:hover:bg-dark-600 ltr:rounded-br ltr:border-l rtl:rounded-bl rtl:border-r"
                 v-text="__('Close')"
                 @click="$emit('closed')"
             />
         </div>
     </div>
-
 </template>
 
 <script>
 import PublishFields from '../publish/Fields.vue';
 
 export default {
-
     components: {
         PublishFields,
     },
@@ -69,7 +66,7 @@ export default {
         updateValues(values) {
             let filteredValues = clone(values);
 
-            Object.keys(values).forEach(key => {
+            Object.keys(values).forEach((key) => {
                 if (values[key] === null || values[key] === undefined) delete filteredValues[key];
             });
 
@@ -87,8 +84,7 @@ export default {
 
         close() {
             this.$emit('closed');
-        }
+        },
     },
-
-}
+};
 </script>
diff --git a/resources/js/components/data-list/FilterPresets.vue b/resources/js/components/data-list/FilterPresets.vue
index 8d8dfafa0c..4c89c67b35 100644
--- a/resources/js/components/data-list/FilterPresets.vue
+++ b/resources/js/components/data-list/FilterPresets.vue
@@ -1,31 +1,40 @@
 <template>
-    <div class="pt-2 rtl:pl-2 ltr:pr-2">
+    <div class="pt-2 ltr:pr-2 rtl:pl-2">
         <div class="flex flex-wrap items-center">
-
-            <button class="pill-tab rtl:ml-1 ltr:mr-1" :class="{ 'active': ! activePreset }" @click="viewAll" v-text="__('All')" />
+            <button
+                class="pill-tab ltr:mr-1 rtl:ml-1"
+                :class="{ active: !activePreset }"
+                @click="viewAll"
+                v-text="__('All')"
+            />
 
             <template v-for="(preset, handle) in presets">
-                <button class="pill-tab active rtl:ml-1 ltr:mr-1" v-if="handle === activePreset">
+                <button class="pill-tab active ltr:mr-1 rtl:ml-1" v-if="handle === activePreset">
                     {{ preset.display }}
-                    <dropdown-list class="rtl:mr-2 ltr:ml-2" placement="bottom-start">
+                    <dropdown-list class="ltr:ml-2 rtl:mr-2" placement="bottom-start">
                         <template v-slot:trigger>
                             <button class="opacity-50 hover:opacity-100">
-                                <svg-icon name="micro/chevron-down-xs" class="w-2 h-2" />
+                                <svg-icon name="micro/chevron-down-xs" class="h-2 w-2" />
                             </button>
                         </template>
                         <dropdown-item :text="__('Duplicate')" @click="createPreset" />
                         <dropdown-item v-if="canRenamePreset(handle)" :text="__('Rename')" @click="renamePreset" />
                         <div class="divider" />
-                        <dropdown-item v-if="canDeletePreset(handle)" :text="__('Delete')" class="warning" @click="showDeleteModal = true" />
+                        <dropdown-item
+                            v-if="canDeletePreset(handle)"
+                            :text="__('Delete')"
+                            class="warning"
+                            @click="showDeleteModal = true"
+                        />
                     </dropdown-list>
                 </button>
-                <button class="pill-tab rtl:ml-1 ltr:mr-1" v-else @click="viewPreset(handle)">
+                <button class="pill-tab ltr:mr-1 rtl:ml-1" v-else @click="viewPreset(handle)">
                     {{ preset.display }}
                 </button>
             </template>
 
             <button class="pill-tab" @click="createPreset" v-tooltip="__('Create New View')">
-                <svg-icon name="add" class="w-3 h-3"/>
+                <svg-icon name="add" class="h-3 w-3" />
             </button>
         </div>
 
@@ -39,7 +48,10 @@
             <text-input :focus="true" v-model="savingPresetName" @keydown.enter="savePreset(savingPresetSlug)" />
 
             <div v-if="presets && Object.keys(presets).includes(savingPresetSlug)">
-                <small class="help-block text-red-500 mt-2 mb-0" v-text="__('messages.filters_view_already_exists')"></small>
+                <small
+                    class="help-block mb-0 mt-2 text-red-500"
+                    v-text="__('messages.filters_view_already_exists')"
+                ></small>
             </div>
         </confirmation-modal>
 
@@ -52,8 +64,17 @@
         >
             <text-input :focus="true" v-model="savingPresetName" @keydown.enter="savePreset(savingPresetSlug)" />
 
-            <div v-if="Object.keys(presets).filter(preset => preset !== activePreset).includes(savingPresetSlug)">
-                <small class="help-block text-red-500 mt-2 mb-0" v-text="__('messages.filters_view_already_exists')"></small>
+            <div
+                v-if="
+                    Object.keys(presets)
+                        .filter((preset) => preset !== activePreset)
+                        .includes(savingPresetSlug)
+                "
+            >
+                <small
+                    class="help-block mb-0 mt-2 text-red-500"
+                    v-text="__('messages.filters_view_already_exists')"
+                ></small>
             </div>
         </confirmation-modal>
 
@@ -71,7 +92,6 @@
 
 <script>
 export default {
-
     props: {
         activeFilters: Object,
         activePreset: String,
@@ -88,8 +108,8 @@ export default {
             showRenameModal: false,
             showDeleteModal: false,
             savingPresetName: null,
-            test: 'hello!'
-        }
+            test: 'hello!',
+        };
     },
 
     computed: {
@@ -126,7 +146,7 @@ export default {
 
         setPreset(handle) {
             this.getPresets();
-            this.viewPreset(handle)
+            this.viewPreset(handle);
         },
 
         refreshPresets() {
@@ -171,7 +191,7 @@ export default {
         savePreset(handle) {
             let presetHandle = handle || this.activePreset;
 
-            if (! presetHandle) {
+            if (!presetHandle) {
                 this.showCreateModal = true;
                 return;
             }
@@ -179,22 +199,25 @@ export default {
             if (this.showRenameModal) {
                 let preference = this.$preferences.get(`${this.preferencesKey}`);
 
-                preference = Object.fromEntries(Object.entries(preference).map(([key, value]) => {
-                    if (key === this.activePreset) {
-                        return [this.savingPresetSlug, this.presetPreferencesPayload];
-                    }
+                preference = Object.fromEntries(
+                    Object.entries(preference).map(([key, value]) => {
+                        if (key === this.activePreset) {
+                            return [this.savingPresetSlug, this.presetPreferencesPayload];
+                        }
 
-                    return [key, value];
-                }));
+                        return [key, value];
+                    }),
+                );
 
-                this.$preferences.set(`${this.preferencesKey}`, preference)
-                    .then(response => {
+                this.$preferences
+                    .set(`${this.preferencesKey}`, preference)
+                    .then((response) => {
                         this.$toast.success(__('View renamed'));
                         this.$emit('deleted', this.activePreset);
                         this.showRenameModal = false;
                         this.refreshPresets();
                     })
-                    .catch(error => {
+                    .catch((error) => {
                         this.$toast.error(__('Unable to rename view'));
                         this.showRenameModal = false;
                     });
@@ -202,14 +225,15 @@ export default {
                 return;
             }
 
-            this.$preferences.set(`${this.preferencesKey}.${presetHandle}`, this.presetPreferencesPayload)
-                .then(response => {
+            this.$preferences
+                .set(`${this.preferencesKey}.${presetHandle}`, this.presetPreferencesPayload)
+                .then((response) => {
                     this.$toast.success(__('View saved'));
                     this.showCreateModal = false;
                     this.savingPresetName = null;
                     this.setPreset(presetHandle);
                 })
-                .catch(error => {
+                .catch((error) => {
                     this.$toast.error(__('Unable to save view'));
                     this.showCreateModal = false;
                     this.showRenameModal = false;
@@ -218,20 +242,19 @@ export default {
         },
 
         deletePreset() {
-            this.$preferences.remove(`${this.preferencesKey}.${this.activePreset}`)
-                .then(response => {
+            this.$preferences
+                .remove(`${this.preferencesKey}.${this.activePreset}`)
+                .then((response) => {
                     this.$emit('deleted', this.activePreset);
                     this.$toast.success(__('View deleted'));
                     this.showDeleteModal = false;
                     this.refreshPresets();
                 })
-                .catch(error => {
+                .catch((error) => {
                     this.$toast.error(__('Unable to delete view'));
                     this.showDeleteModal = false;
                 });
         },
-
     },
-
-}
+};
 </script>
diff --git a/resources/js/components/data-list/Filters.vue b/resources/js/components/data-list/Filters.vue
index 3397186ec1..cb0445e5e1 100644
--- a/resources/js/components/data-list/Filters.vue
+++ b/resources/js/components/data-list/Filters.vue
@@ -1,24 +1,26 @@
 <template>
-    <div class="shadow-inner bg-gray-300 dark:bg-dark-600">
-        <div class="flex items-center flex-wrap px-3 border-b dark:border-dark-900 pt-2">
-
+    <div class="bg-gray-300 shadow-inner dark:bg-dark-600">
+        <div class="flex flex-wrap items-center border-b px-3 pt-2 dark:border-dark-900">
             <!-- Field filter (requires custom selection UI) -->
             <popover v-if="fieldFilter" placement="bottom-start" @closed="fieldFilterClosed">
                 <template #trigger>
-                    <button class="filter-badge filter-badge-control rtl:ml-2 ltr:mr-2 mb-2" @click="resetFilterPopover">
+                    <button
+                        class="filter-badge filter-badge-control mb-2 ltr:mr-2 rtl:ml-2"
+                        @click="resetFilterPopover"
+                    >
                         {{ fieldFilter.title }}
-                        <svg-icon name="micro/chevron-down-xs" class="w-2 h-2 mx-2" />
+                        <svg-icon name="micro/chevron-down-xs" class="mx-2 h-2 w-2" />
                     </button>
                 </template>
                 <template #default="{ close: closePopover }">
-                    <div class="flex flex-col rtl:text-right ltr:text-left min-w-[18rem]">
+                    <div class="flex min-w-[18rem] flex-col ltr:text-left rtl:text-right">
                         <div class="filter-fields text-sm">
                             <field-filter
                                 ref="fieldFilter"
                                 :config="fieldFilter"
                                 :values="activeFilters.fields || {}"
                                 :badges="fieldFilterBadges"
-                                @changed="$emit('changed', {handle: 'fields', values: $event})"
+                                @changed="$emit('changed', { handle: 'fields', values: $event })"
                                 @cleared="creating = false"
                                 @closed="closePopover"
                             />
@@ -28,11 +30,17 @@
             </popover>
 
             <!-- Standard pinned filters -->
-            <popover v-if="pinnedFilters.length" v-for="filter in pinnedFilters" :key="filter.handle" placement="bottom-start" :stop-propagation="false">
+            <popover
+                v-if="pinnedFilters.length"
+                v-for="filter in pinnedFilters"
+                :key="filter.handle"
+                placement="bottom-start"
+                :stop-propagation="false"
+            >
                 <template #trigger>
-                    <button class="filter-badge filter-badge-control rtl:ml-2 ltr:mr-2 mb-2">
+                    <button class="filter-badge filter-badge-control mb-2 ltr:mr-2 rtl:ml-2">
                         {{ filter.title }}
-                        <svg-icon name="micro/chevron-down-xs" class="w-2 h-2 mx-2" />
+                        <svg-icon name="micro/chevron-down-xs" class="mx-2 h-2 w-2" />
                     </button>
                 </template>
                 <template #default="{ close: closePopover }">
@@ -41,7 +49,7 @@
                             :key="filter.handle"
                             :filter="filter"
                             :values="activeFilters[filter.handle]"
-                            @changed="$emit('changed', {handle: filter.handle, values: $event})"
+                            @changed="$emit('changed', { handle: filter.handle, values: $event })"
                             @closed="closePopover"
                         />
                     </div>
@@ -51,9 +59,12 @@
             <!-- Standard unpinned filters -->
             <popover v-if="unpinnedFilters.length" placement="bottom-start" :stop-propagation="false">
                 <template #trigger>
-                    <button class="filter-badge filter-badge-control rtl:ml-2 ltr:mr-2 mb-2" @click="resetFilterPopover">
+                    <button
+                        class="filter-badge filter-badge-control mb-2 ltr:mr-2 rtl:ml-2"
+                        @click="resetFilterPopover"
+                    >
                         {{ __('Filter') }}
-                        <svg-icon name="micro/chevron-down-xs" class="w-2 h-2 mx-2" />
+                        <svg-icon name="micro/chevron-down-xs" class="mx-2 h-2 w-2" />
                     </button>
                 </template>
                 <template #default="{ close: closePopover }">
@@ -64,7 +75,7 @@
                                 v-for="filter in unpinnedFilters"
                                 :key="filter.handle"
                                 v-text="filter.title"
-                                class="btn w-full mt-1"
+                                class="btn mt-1 w-full"
                                 @click="creating = filter.handle"
                             />
                         </div>
@@ -75,7 +86,7 @@
                                 :key="filter.handle"
                                 :filter="filter"
                                 :values="activeFilters[filter.handle]"
-                                @changed="$emit('changed', {handle: filter.handle, values: $event})"
+                                @changed="$emit('changed', { handle: filter.handle, values: $event })"
                                 @cleared="creating = false"
                                 @closed="closePopover"
                             />
@@ -85,18 +96,16 @@
             </popover>
 
             <!-- Active filter badges -->
-            <div class="filter-badge rtl:ml-2 ltr:mr-2 mb-2" v-for="(badge, handle) in fieldFilterBadges">
+            <div class="filter-badge mb-2 ltr:mr-2 rtl:ml-2" v-for="(badge, handle) in fieldFilterBadges">
                 <span>{{ badge }}</span>
                 <button @click="removeFieldFilter(handle)" v-tooltip="__('Remove Filter')">&times;</button>
             </div>
-            <div class="filter-badge rtl:ml-2 ltr:mr-2 mb-2" v-for="(badge, handle) in standardBadges">
+            <div class="filter-badge mb-2 ltr:mr-2 rtl:ml-2" v-for="(badge, handle) in standardBadges">
                 <span>{{ badge }}</span>
                 <button @click="removeStandardFilter(handle)" v-tooltip="__('Remove Filter')">&times;</button>
             </div>
-
         </div>
     </div>
-
 </template>
 
 <script>
@@ -104,7 +113,6 @@ import DataListFilter from './Filter.vue';
 import FieldFilter from './FieldFilter.vue';
 
 export default {
-
     components: {
         DataListFilter,
         FieldFilter,
@@ -134,7 +142,7 @@ export default {
             deleting: false,
             savingPresetName: null,
             presets: [],
-        }
+        };
     },
 
     inject: ['sharedState'],
@@ -144,30 +152,29 @@ export default {
             deep: true,
             handler(preset) {
                 this.savingPresetName = preset.display || null;
-            }
-        }
+            },
+        },
     },
 
     computed: {
-
         fieldFilter() {
-            return this.filters.find(filter => filter.handle === 'fields');
+            return this.filters.find((filter) => filter.handle === 'fields');
         },
 
         standardFilters() {
-            return this.filters.filter(filter => filter.handle !== 'fields');
+            return this.filters.filter((filter) => filter.handle !== 'fields');
         },
 
         pinnedFilters() {
-            return this.standardFilters.filter(filter => filter.pinned);
+            return this.standardFilters.filter((filter) => filter.pinned);
         },
 
         unpinnedFilters() {
-            return this.standardFilters.filter(filter => ! filter.pinned);
+            return this.standardFilters.filter((filter) => !filter.pinned);
         },
 
         creatingFilter() {
-            return _.find(this.unpinnedFilters, filter => filter.handle === this.creating);
+            return _.find(this.unpinnedFilters, (filter) => filter.handle === this.creating);
         },
 
         creatingFilterHeader() {
@@ -177,7 +184,7 @@ export default {
         },
 
         showUnpinnedFilterSelection() {
-            return ! this.creating;
+            return !this.creating;
         },
 
         fieldFilterBadges() {
@@ -189,15 +196,17 @@ export default {
         },
 
         isFiltering() {
-            return ! _.isEmpty(this.activeFilters) || this.searchQuery || this.activePreset;
+            return !_.isEmpty(this.activeFilters) || this.searchQuery || this.activePreset;
         },
 
         isDirty() {
-            if (! this.isFiltering) return false;
+            if (!this.isFiltering) return false;
 
             if (this.activePreset) {
-                return this.activePresetPayload.query != this.searchQuery
-                    || ! _.isEqual(this.activePresetPayload.filters || {}, this.activeFilters);
+                return (
+                    this.activePresetPayload.query != this.searchQuery ||
+                    !_.isEqual(this.activePresetPayload.filters || {}, this.activeFilters)
+                );
             }
 
             return true;
@@ -218,16 +227,16 @@ export default {
         preferencesKey() {
             let handle = this.savingPresetHandle || this.activePreset;
 
-            if (! this.preferencesPrefix || ! handle) return null;
+            if (!this.preferencesPrefix || !handle) return null;
 
             return `${this.preferencesPrefix}.filters.${handle}`;
         },
 
         preferencesPayload() {
-            if (! this.savingPresetName) return null;
+            if (!this.savingPresetName) return null;
 
             let payload = {
-                display: this.savingPresetName
+                display: this.savingPresetName,
             };
 
             if (this.searchQuery) payload.query = this.searchQuery;
@@ -235,11 +244,9 @@ export default {
 
             return payload;
         },
-
     },
 
     methods: {
-
         resetFilterPopover() {
             this.creating = false;
 
@@ -255,46 +262,52 @@ export default {
 
             delete fields[handle];
 
-            this.$emit('changed', {handle: 'fields', values: fields});
+            this.$emit('changed', { handle: 'fields', values: fields });
         },
 
         removeStandardFilter(handle) {
-            this.$emit('changed', {handle: handle, values: null});
+            this.$emit('changed', { handle: handle, values: null });
         },
 
         save() {
-            if (! this.canSave || ! this.preferencesPayload) return;
+            if (!this.canSave || !this.preferencesPayload) return;
 
             this.saving = true;
 
-            this.$preferences.set(this.preferencesKey, this.preferencesPayload)
-                .then(response => {
+            this.$preferences
+                .set(this.preferencesKey, this.preferencesPayload)
+                .then((response) => {
                     this.$refs.savePopover.close();
                     this.$emit('saved', this.savingPresetHandle);
-                    this.$toast.success(this.isUpdatingPreset ? __('Filter preset updated') : __('Filter preset saved'));
+                    this.$toast.success(
+                        this.isUpdatingPreset ? __('Filter preset updated') : __('Filter preset saved'),
+                    );
                     this.savingPresetName = null;
                     this.saving = false;
                 })
-                .catch(error => {
-                    this.$toast.error(this.isUpdatingPreset ? __('Unable to update filter preset') : __('Unable to save filter preset'));
+                .catch((error) => {
+                    this.$toast.error(
+                        this.isUpdatingPreset
+                            ? __('Unable to update filter preset')
+                            : __('Unable to save filter preset'),
+                    );
                     this.saving = false;
                 });
         },
 
         remove() {
-            this.$preferences.remove(this.preferencesKey)
-                .then(response => {
+            this.$preferences
+                .remove(this.preferencesKey)
+                .then((response) => {
                     this.$emit('deleted', this.activePreset);
                     this.$toast.success(__('Filter preset deleted'));
                     this.deleting = false;
                 })
-                .catch(error => {
+                .catch((error) => {
                     this.$toast.error(__('Unable to delete filter preset'));
                     this.deleting = false;
                 });
         },
-
-    }
-
-}
+    },
+};
 </script>
diff --git a/resources/js/components/data-list/HasActions.js b/resources/js/components/data-list/HasActions.js
index 6e58a50db1..cb3bc20994 100644
--- a/resources/js/components/data-list/HasActions.js
+++ b/resources/js/components/data-list/HasActions.js
@@ -1,12 +1,10 @@
 export default {
-
     methods: {
-
         actionStarted() {
             this.loading = true;
         },
 
-        actionCompleted(successful=null, response={}) {
+        actionCompleted(successful = null, response = {}) {
             this.loading = false;
 
             if (successful === false) return;
@@ -15,9 +13,9 @@ export default {
             this.$events.$emit('reset-action-modals');
 
             if (response.success === false) {
-                this.$toast.error(response.message || __("Action failed"));
+                this.$toast.error(response.message || __('Action failed'));
             } else {
-                this.$toast.success(response.message || __("Action completed"));
+                this.$toast.success(response.message || __('Action completed'));
             }
 
             this.afterActionSuccessfullyCompleted();
@@ -25,8 +23,6 @@ export default {
 
         afterActionSuccessfullyCompleted() {
             this.request();
-        }
-
-    }
-
-}
+        },
+    },
+};
diff --git a/resources/js/components/data-list/HasFilters.js b/resources/js/components/data-list/HasFilters.js
index 0e30b96473..dbd1b71ac7 100644
--- a/resources/js/components/data-list/HasFilters.js
+++ b/resources/js/components/data-list/HasFilters.js
@@ -1,5 +1,4 @@
 export default {
-
     data() {
         return {
             activeFilterBadges: {},
@@ -7,16 +6,15 @@ export default {
             activePreset: null,
             activePresetPayload: {},
             searchQuery: '',
-        }
+        };
     },
 
     computed: {
-
         activeFilterCount() {
             let count = Object.keys(this.activeFilters).length;
 
             if (this.activeFilters.hasOwnProperty('fields')) {
-                count = count + Object.keys(this.activeFilters.fields).filter(field => field != 'badge').length - 1;
+                count = count + Object.keys(this.activeFilters.fields).filter((field) => field != 'badge').length - 1;
             }
 
             return count;
@@ -27,18 +25,20 @@ export default {
         },
 
         isDirty() {
-            if (! this.isFiltering) return false;
+            if (!this.isFiltering) return false;
 
             if (this.activePreset) {
-                return this.activePresetPayload.query != this.searchQuery
-                    || ! _.isEqual(this.activePresetPayload.filters || {}, this.activeFilters);
+                return (
+                    this.activePresetPayload.query != this.searchQuery ||
+                    !_.isEqual(this.activePresetPayload.filters || {}, this.activeFilters)
+                );
             }
 
             return true;
         },
 
         isFiltering() {
-            return ! _.isEmpty(this.activeFilters) || this.searchQuery || this.activePreset;
+            return !_.isEmpty(this.activeFilters) || this.searchQuery || this.activePreset;
         },
 
         hasActiveFilters() {
@@ -52,11 +52,9 @@ export default {
 
             return __('Search');
         },
-
     },
 
     methods: {
-
         searchChanged(query) {
             this.searchQuery = query;
         },
@@ -102,7 +100,7 @@ export default {
             }
         },
 
-        selectPreset(handle, preset)  {
+        selectPreset(handle, preset) {
             this.activePreset = handle;
             this.activePresetPayload = preset;
             this.searchQuery = preset.query;
@@ -111,17 +109,17 @@ export default {
         },
 
         autoApplyFilters(filters) {
-            if (! filters) return;
+            if (!filters) return;
 
             let values = {};
 
-            filters.filter(filter => ! _.isEmpty(filter.auto_apply)).forEach(filter => {
-                values[filter.handle] = filter.auto_apply;
-            });
+            filters
+                .filter((filter) => !_.isEmpty(filter.auto_apply))
+                .forEach((filter) => {
+                    values[filter.handle] = filter.auto_apply;
+                });
 
             this.activeFilters = values;
         },
-
-    }
-
-}
+    },
+};
diff --git a/resources/js/components/data-list/HasPagination.js b/resources/js/components/data-list/HasPagination.js
index d2551c866e..8058e9411d 100644
--- a/resources/js/components/data-list/HasPagination.js
+++ b/resources/js/components/data-list/HasPagination.js
@@ -1,19 +1,18 @@
 export default {
-
     props: {
         initialPerPage: {
             type: Number,
             default() {
                 return Statamic.$config.get('paginationSize');
-            }
-        }
+            },
+        },
     },
 
     data() {
         return {
             perPage: this.initialPerPage,
             page: 1,
-        }
+        };
     },
 
     mounted() {
@@ -21,9 +20,8 @@ export default {
     },
 
     methods: {
-
         setInitialPerPage() {
-            if (! this.hasPreferences) {
+            if (!this.hasPreferences) {
                 return;
             }
 
@@ -37,7 +35,7 @@ export default {
                 ? this.setPreference('per_page', perPage != this.initialPerPage ? perPage : null)
                 : Promise.resolve();
 
-            promise.then(response => {
+            promise.then((response) => {
                 this.perPage = perPage;
                 this.resetPage();
             });
@@ -52,7 +50,5 @@ export default {
             this.page = 1;
             this.$events.$emit('clear-selections');
         },
-
-    }
-
-}
+    },
+};
diff --git a/resources/js/components/data-list/HasPreferences.js b/resources/js/components/data-list/HasPreferences.js
index 73f1c3da9e..de1f41953b 100644
--- a/resources/js/components/data-list/HasPreferences.js
+++ b/resources/js/components/data-list/HasPreferences.js
@@ -1,21 +1,17 @@
 export default {
-
     data() {
         return {
             preferencesPrefix: null,
-        }
+        };
     },
 
     computed: {
-
         hasPreferences() {
             return this.preferencesPrefix !== null;
-        }
-
+        },
     },
 
     methods: {
-
         preferencesKey(type) {
             return `${this.preferencesPrefix}.${type}`;
         },
@@ -28,10 +24,8 @@ export default {
             return this.$preferences.set(this.preferencesKey(type), value);
         },
 
-        removePreference(type, value=null) {
+        removePreference(type, value = null) {
             return this.$preferences.remove(this.preferencesKey(type), value);
-        }
-
-    }
-
-}
+        },
+    },
+};
diff --git a/resources/js/components/data-list/InlineActions.vue b/resources/js/components/data-list/InlineActions.vue
index 8b30c8b106..63871576c3 100644
--- a/resources/js/components/data-list/InlineActions.vue
+++ b/resources/js/components/data-list/InlineActions.vue
@@ -1,5 +1,4 @@
 <template>
-
     <div>
         <data-list-action
             v-for="action in sortedActions"
@@ -12,22 +11,16 @@
             v-slot="{ action, select }"
         >
             <div>
-                <button
-                    v-text="__(action.title)"
-                    :class="{ warning: action.dangerous }"
-                    @click="select" />
+                <button v-text="__(action.title)" :class="{ warning: action.dangerous }" @click="select" />
             </div>
         </data-list-action>
     </div>
-
 </template>
 
-
 <script>
 import Actions from './Actions';
 
 export default {
-
     mixins: [Actions],
 
     props: {
@@ -37,12 +30,9 @@ export default {
     },
 
     computed: {
-
         selections() {
             return [this.item];
         },
-
-    }
-
-}
+    },
+};
 </script>
diff --git a/resources/js/components/data-list/Pagination.vue b/resources/js/components/data-list/Pagination.vue
index a327d428e9..d4ef042014 100644
--- a/resources/js/components/data-list/Pagination.vue
+++ b/resources/js/components/data-list/Pagination.vue
@@ -1,31 +1,27 @@
 <template>
-
-    <div class="w-full flex">
-
-        <div class="flex flex-1 items-center" v-if="! inline">
+    <div class="flex w-full">
+        <div class="flex flex-1 items-center" v-if="!inline">
             <div class="text-xs text-gray-700" v-if="showTotals && totalItems > 0">
                 {{ __(':start-:end of :total', { start: fromItem, end: toItem, total: totalItems }) }}
             </div>
         </div>
 
-        <ul v-if="hasMultiplePages" class="pagination" :class="{'pagination-inline': inline}">
-
+        <ul v-if="hasMultiplePages" class="pagination" :class="{ 'pagination-inline': inline }">
             <li v-if="hasPrevious">
-                <a @click="selectPreviousPage"><span class="text-xs" v-html="direction === 'ltr' ? '&larr;' : '&rarr;'"></span></a>
+                <a @click="selectPreviousPage"
+                    ><span class="text-xs" v-html="direction === 'ltr' ? '&larr;' : '&rarr;'"></span
+                ></a>
             </li>
 
-            <li
-                v-for="(page, i) in pages"
-                v-if="showPageLinks"
-                :key="i"
-                :class="{ 'current': page == currentPage }"
-            >
+            <li v-for="(page, i) in pages" v-if="showPageLinks" :key="i" :class="{ current: page == currentPage }">
                 <span v-if="page === 'separator'" class="unclickable">...</span>
                 <a v-else @click="selectPage(page)">{{ page }}</a>
             </li>
 
             <li v-if="hasNext">
-                <a @click="selectNextPage"><span class="text-xs" v-html="direction === 'ltr' ? '&rarr;' : '&larr;'"></span></a>
+                <a @click="selectNextPage"
+                    ><span class="text-xs" v-html="direction === 'ltr' ? '&rarr;' : '&larr;'"></span
+                ></a>
             </li>
         </ul>
 
@@ -34,42 +30,40 @@
 
             <select-input
                 v-if="perPage && isPerPageEvenUseful"
-                class="rtl:mr-6 ltr:ml-6"
+                class="ltr:ml-6 rtl:mr-6"
                 name="perPage"
                 :placeholder="__('Per Page')"
                 :options="perPageOptions"
                 :value="perPage"
-                @input="$emit('per-page-changed', $event)" />
+                @input="$emit('per-page-changed', $event)"
+            />
         </div>
-
     </div>
-
 </template>
 
 <script>
-import HasInputOptions from '../fieldtypes/HasInputOptions.js'
+import HasInputOptions from '../fieldtypes/HasInputOptions.js';
 
 const onEachSide = 3;
 
 export default {
-
     mixins: [HasInputOptions],
 
     props: {
         inline: {
             type: Boolean,
-            default: false
+            default: false,
         },
         showTotals: {
             type: Boolean,
-            default: false
+            default: false,
         },
         perPage: {
-            type: Number
+            type: Number,
         },
         resourceMeta: {
             type: Object,
-            required: true
+            required: true,
         },
         scrollToTop: {
             type: Boolean,
@@ -78,18 +72,17 @@ export default {
         showPageLinks: {
             type: Boolean,
             default: true,
-        }
+        },
     },
 
     data() {
         return {
             onEachSide,
-            window: onEachSide * 2
-        }
+            window: onEachSide * 2,
+        };
     },
 
     computed: {
-
         totalPages() {
             return this.resourceMeta.last_page;
         },
@@ -101,21 +94,21 @@ export default {
                 els.first,
                 els.slider ? 'separator' : null,
                 els.slider,
-                els.last ? 'separator': null,
-                els.last
-            ].filter(i => i !== null);
+                els.last ? 'separator' : null,
+                els.last,
+            ].filter((i) => i !== null);
 
             return _.flatten(pages);
         },
 
         elements() {
-            if (this.lastPage < (this.onEachSide * 2) + 6) {
+            if (this.lastPage < this.onEachSide * 2 + 6) {
                 return this.getSmallSlider();
             }
 
             if (this.currentPage <= this.window) {
                 return this.getSliderTooCloseToBeginning();
-            } else if (this.currentPage > (this.lastPage - this.window)) {
+            } else if (this.currentPage > this.lastPage - this.window) {
                 return this.getSliderTooCloseToEnding();
             }
 
@@ -144,12 +137,14 @@ export default {
 
         perPageOptions() {
             let defaultPaginationSize = Statamic.$config.get('paginationSize');
-            let defaultOptions = Statamic.$config.get('paginationSizeOptions').filter(size => size !== defaultPaginationSize);
+            let defaultOptions = Statamic.$config
+                .get('paginationSizeOptions')
+                .filter((size) => size !== defaultPaginationSize);
             let options = this.normalizeInputOptions(defaultOptions);
 
             options.push({
                 value: defaultPaginationSize,
-                label: `${defaultPaginationSize}`
+                label: `${defaultPaginationSize}`,
             });
 
             return _.sortBy(options, 'value');
@@ -174,11 +169,9 @@ export default {
         direction() {
             return this.$config.get('direction', 'ltr');
         },
-
     },
 
     methods: {
-
         selectPage(page) {
             if (page === this.currentPage) {
                 return;
@@ -204,7 +197,7 @@ export default {
                 first: this.getRange(1, this.lastPage),
                 slider: null,
                 last: null,
-            }
+            };
         },
 
         getFullSlider() {
@@ -212,7 +205,7 @@ export default {
                 first: this.getStart(),
                 slider: this.getAdjacentRange(),
                 last: this.getFinish(),
-            }
+            };
         },
 
         getSliderTooCloseToBeginning() {
@@ -220,7 +213,7 @@ export default {
                 first: this.getRange(1, this.window + 2),
                 slider: null,
                 last: this.getFinish(),
-            }
+            };
         },
 
         getSliderTooCloseToEnding() {
@@ -230,7 +223,7 @@ export default {
                 first: this.getStart(),
                 slider: null,
                 last,
-            }
+            };
         },
 
         getStart() {
@@ -242,17 +235,12 @@ export default {
         },
 
         getAdjacentRange() {
-            return this.getRange(
-                this.currentPage - this.onEachSide,
-                this.currentPage + this.onEachSide
-            );
+            return this.getRange(this.currentPage - this.onEachSide, this.currentPage + this.onEachSide);
         },
 
         getRange(start, end) {
-            return _.range(start, end+1);
-        }
-
-    }
-
-}
+            return _.range(start, end + 1);
+        },
+    },
+};
 </script>
diff --git a/resources/js/components/data-list/Search.vue b/resources/js/components/data-list/Search.vue
index 322d361ea2..fa73836948 100644
--- a/resources/js/components/data-list/Search.vue
+++ b/resources/js/components/data-list/Search.vue
@@ -7,25 +7,23 @@
         @input="emitEvent"
         @keyup.esc="reset"
         autofocus
-        class="input-text flex-1 bg-white dark:bg-dark-600 text-sm focus:border-blue-300 dark:focus:border-dark-blue-125 outline-0">
+        class="input-text flex-1 bg-white text-sm outline-0 focus:border-blue-300 dark:bg-dark-600 dark:focus:border-dark-blue-125"
+    />
 </template>
 
 <script>
 export default {
-
-    props: [
-        'value'
-    ],
+    props: ['value'],
 
     props: {
         placeholder: {
             type: String,
-            default: 'Search...'
+            default: 'Search...',
         },
         value: {
             type: String,
-            default: ''
-        }
+            default: '',
+        },
     },
 
     methods: {
@@ -39,7 +37,7 @@ export default {
 
         focus() {
             this.$refs.input.focus();
-        }
+        },
     },
-}
+};
 </script>
diff --git a/resources/js/components/data-list/Table.vue b/resources/js/components/data-list/Table.vue
index 77d672b96a..c09ac5cbde 100644
--- a/resources/js/components/data-list/Table.vue
+++ b/resources/js/components/data-list/Table.vue
@@ -1,8 +1,20 @@
 <template>
-    <table :data-size="relativeColumnsSize" ref="table" tabindex="0" class="data-table" :class="{ 'select-none' : shifting }" @keydown.shift="shiftDown" @keyup="clearShift">
+    <table
+        :data-size="relativeColumnsSize"
+        ref="table"
+        tabindex="0"
+        class="data-table"
+        :class="{ 'select-none': shifting }"
+        @keydown.shift="shiftDown"
+        @keyup="clearShift"
+    >
         <thead v-if="allowBulkActions || visibleColumns.length > 1">
             <tr>
-                <th class="rounded-none" :class="{'checkbox-column': ! reorderable, 'handle-column': reorderable}" v-if="allowBulkActions || reorderable">
+                <th
+                    class="rounded-none"
+                    :class="{ 'checkbox-column': !reorderable, 'handle-column': reorderable }"
+                    v-if="allowBulkActions || reorderable"
+                >
                     <data-list-toggle-all ref="toggleAll" v-if="allowBulkActions && !singleSelect" />
                 </th>
                 <th
@@ -12,14 +24,24 @@
                         'current-column': sharedState.sortColumn === column.field,
                         'sortable-column': column.sortable === true,
                         'cursor-not-allowed': !sortable,
-                        'rtl:text-left ltr:text-right rtl:pl-8 ltr:pr-8': column.numeric,
+                        'ltr:pr-8 ltr:text-right rtl:pl-8 rtl:text-left': column.numeric,
                     }"
                     class="group rounded-none"
                     @click.prevent="changeSortColumn(column.field)"
                 >
                     <span v-text="__(column.label)" />
-                    <svg v-if="column.sortable" :class="[sharedState.sortDirection, {'opacity-100 pointer-events-none': sharedState.sortColumn === column.field}]" height="8" width="8" viewBox="0 0 10 6.5" class="rtl:mr-1 ltr:ml-1 opacity-0 group-hover:opacity-100">
-                        <path d="M9.9,1.4L5,6.4L0,1.4L1.4,0L5,3.5L8.5,0L9.9,1.4z" fill="currentColor"/>
+                    <svg
+                        v-if="column.sortable"
+                        :class="[
+                            sharedState.sortDirection,
+                            { 'pointer-events-none opacity-100': sharedState.sortColumn === column.field },
+                        ]"
+                        height="8"
+                        width="8"
+                        viewBox="0 0 10 6.5"
+                        class="opacity-0 group-hover:opacity-100 ltr:ml-1 rtl:mr-1"
+                    >
+                        <path d="M9.9,1.4L5,6.4L0,1.4L1.4,0L5,3.5L8.5,0L9.9,1.4z" fill="currentColor" />
                     </svg>
                 </th>
                 <th class="type-column" v-if="type">
@@ -37,50 +59,65 @@
             handle-class="table-drag-handle"
             @update:model-value="$emit('reordered', $event)"
         >
-        <tbody>
-            <slot name="tbody-start" />
-            <tr v-for="(row, index) in rows" :key="row.id" class="sortable-row outline-none" :class="{'row-selected': sharedState.selections.includes(row.id)}">
-                <td class="table-drag-handle" v-if="reorderable"></td>
-                <th class="checkbox-column" v-if="allowBulkActions && !reorderable">
-                    <input
-                        v-if="!reorderable"
-                        type="checkbox"
-                        :value="row.id"
-                        :checked="isSelected(row.id)"
-                        :disabled="reachedSelectionLimit && !singleSelect && !isSelected(row.id)"
-                        :id="`checkbox-${row.id}`"
-                        @click="checkboxClicked(row, index, $event)"
-                    />
-                </th>
-                <td v-for="column in visibleColumns" :key="column.field" @click="rowClicked(row, index, $event)" :width="column.width" :class="{'rtl:text-left ltr:text-right rtl:pl-8 ltr:pr-8': column.numeric}">
-                    <slot
-                        :name="`cell-${column.field}`"
-                        :value="row[column.value || column.field]"
-                        :values="row"
-                        :row="row"
-                        :index="actualIndex(row)"
-                        :display-index="index"
-                        :checkbox-id="`checkbox-${row.id}`"
+            <tbody>
+                <slot name="tbody-start" />
+                <tr
+                    v-for="(row, index) in rows"
+                    :key="row.id"
+                    class="sortable-row outline-none"
+                    :class="{ 'row-selected': sharedState.selections.includes(row.id) }"
+                >
+                    <td class="table-drag-handle" v-if="reorderable"></td>
+                    <th class="checkbox-column" v-if="allowBulkActions && !reorderable">
+                        <input
+                            v-if="!reorderable"
+                            type="checkbox"
+                            :value="row.id"
+                            :checked="isSelected(row.id)"
+                            :disabled="reachedSelectionLimit && !singleSelect && !isSelected(row.id)"
+                            :id="`checkbox-${row.id}`"
+                            @click="checkboxClicked(row, index, $event)"
+                        />
+                    </th>
+                    <td
+                        v-for="column in visibleColumns"
+                        :key="column.field"
+                        @click="rowClicked(row, index, $event)"
+                        :width="column.width"
+                        :class="{ 'ltr:pr-8 ltr:text-right rtl:pl-8 rtl:text-left': column.numeric }"
                     >
-                        <table-field :handle="column.field" :value="row[column.value || column.field]" :values="row" :fieldtype="column.fieldtype" :key="column.field" />
-                    </slot>
-                </td>
-                <td class="type-column" v-if="type">
-                    <span v-if="type === 'entries' || type === 'terms'" class="rounded px-1 py-px text-2xs uppercase bg-gray-200 dark:bg-dark-400 text-gray dark:text-dark-150">
-                        <template v-if="type === 'entries'">{{ __(row.collection.title) }}</template>
-                        <template v-if="type === 'terms'">{{ __(row.taxonomy.title) }}</template>
-                    </span>
-                </td>
-                <th class="actions-column">
-                    <slot
-                        name="actions"
-                        :row="row"
-                        :index="actualIndex(row)"
-                        :display-index="index"
-                    ></slot>
-                </th>
-            </tr>
-        </tbody>
+                        <slot
+                            :name="`cell-${column.field}`"
+                            :value="row[column.value || column.field]"
+                            :values="row"
+                            :row="row"
+                            :index="actualIndex(row)"
+                            :display-index="index"
+                            :checkbox-id="`checkbox-${row.id}`"
+                        >
+                            <table-field
+                                :handle="column.field"
+                                :value="row[column.value || column.field]"
+                                :values="row"
+                                :fieldtype="column.fieldtype"
+                                :key="column.field"
+                            />
+                        </slot>
+                    </td>
+                    <td class="type-column" v-if="type">
+                        <span
+                            v-if="type === 'entries' || type === 'terms'"
+                            class="rounded bg-gray-200 px-1 py-px text-2xs uppercase text-gray dark:bg-dark-400 dark:text-dark-150"
+                        >
+                            <template v-if="type === 'entries'">{{ __(row.collection.title) }}</template>
+                            <template v-if="type === 'terms'">{{ __(row.taxonomy.title) }}</template>
+                        </span>
+                    </td>
+                    <th class="actions-column">
+                        <slot name="actions" :row="row" :index="actualIndex(row)" :display-index="index"></slot>
+                    </th>
+                </tr>
+            </tbody>
         </sortable-list>
     </table>
 </template>
@@ -90,7 +127,6 @@ import TableField from './TableField.vue';
 import SortableList from '../sortable/SortableList.vue';
 
 export default {
-
     components: {
         TableField,
         SortableList,
@@ -99,47 +135,46 @@ export default {
     data() {
         return {
             shifting: false,
-            lastItemClicked: null
-        }
+            lastItemClicked: null,
+        };
     },
 
     props: {
         loading: {
             type: Boolean,
-            default: false
+            default: false,
         },
         allowBulkActions: {
             default: false,
-            type: Boolean
+            type: Boolean,
         },
         toggleSelectionOnRowClick: {
             type: Boolean,
-            default: false
+            default: false,
         },
         sortable: {
             type: Boolean,
-            default: true
+            default: true,
         },
         reorderable: {
             type: Boolean,
-            default: false
+            default: false,
         },
         type: {
-            type: String
+            type: String,
         },
     },
 
     inject: ['sharedState'],
 
     computed: {
-
         rows: {
             get() {
                 return this.sharedState.rows;
             },
             set(rows) {
                 this.sharedState.rows = rows;
-            }
+            },
         },
 
         reachedSelectionLimit() {
@@ -159,24 +194,21 @@ export default {
         },
 
         visibleColumns() {
-            const columns = this.sharedState.columns.filter(column => column.visible);
+            const columns = this.sharedState.columns.filter((column) => column.visible);
 
             return columns.length ? columns : this.sharedState.columns;
         },
 
         sortableColumns() {
-            return this.sharedState.columns
-                .filter(column => column.sortable)
-                .map(column => column.field);
-        }
-
+            return this.sharedState.columns.filter((column) => column.sortable).map((column) => column.field);
+        },
     },
 
     methods: {
         changeSortColumn(column) {
             if (!this.sortable) return;
 
-            if (! this.sortableColumns.includes(column)) {
+            if (!this.sortableColumns.includes(column)) {
                 return;
             }
 
@@ -184,9 +216,9 @@ export default {
             if (this.sharedState.sortColumn === column) {
                 this.swapSortDirection();
 
-            // Always start sorting by asc unless column is a date field
+                // Always start sorting by asc unless column is a date field
             } else if (this.getFieldtype(column) !== 'date') {
-                this.sharedState.sortDirection = 'asc'
+                this.sharedState.sortDirection = 'asc';
             }
 
             this.sharedState.currentPage = 1;
@@ -200,11 +232,11 @@ export default {
         },
 
         getFieldtype(columnName) {
-            let field = _.find(this.sharedState.columns, function(field) {
-                return columnName === field.field
-            })
+            let field = _.find(this.sharedState.columns, function (field) {
+                return columnName === field.field;
+            });
 
-            return field.fieldtype
+            return field.fieldtype;
         },
 
         actualIndex(row) {
@@ -213,10 +245,7 @@ export default {
 
         rowClicked(row, index, $event) {
             if ($event.shiftKey && this.lastItemClicked !== null) {
-                this.selectRange(
-                    Math.min(this.lastItemClicked, index),
-                    Math.max(this.lastItemClicked, index)
-                );
+                this.selectRange(Math.min(this.lastItemClicked, index), Math.max(this.lastItemClicked, index));
             } else if (this.toggleSelectionOnRowClick) {
                 this.toggleSelection(row.id, index);
             }
@@ -224,12 +253,12 @@ export default {
         },
 
         selectRange(from, to) {
-            for (var i = from; i <= to; i++ ) {
+            for (var i = from; i <= to; i++) {
                 let row = this.sharedState.rows[i].id;
-                if (! this.sharedState.selections.includes(row) && ! this.reachedSelectionLimit) {
+                if (!this.sharedState.selections.includes(row) && !this.reachedSelectionLimit) {
                     this.sharedState.selections.push(row);
                 }
-            };
+            }
         },
 
         isSelected(id) {
@@ -249,34 +278,31 @@ export default {
                 this.sharedState.selections.pop();
             }
 
-            if (! this.reachedSelectionLimit) {
+            if (!this.reachedSelectionLimit) {
                 this.sharedState.selections.push(id);
             }
         },
 
         shiftDown() {
-            this.shifting = true
+            this.shifting = true;
         },
 
         clearShift() {
-            this.shifting = false
+            this.shifting = false;
         },
 
         checkboxClicked(row, index, $event) {
             if ($event.shiftKey && this.lastItemClicked !== null) {
                 this.$refs.table.focus();
-                this.selectRange(
-                    Math.min(this.lastItemClicked, index),
-                    Math.max(this.lastItemClicked, index)
-                );
+                this.selectRange(Math.min(this.lastItemClicked, index), Math.max(this.lastItemClicked, index));
             } else {
-                this.toggleSelection(row.id, index)
+                this.toggleSelection(row.id, index);
             }
 
             if ($event.target.checked) {
-                this.lastItemClicked = index
+                this.lastItemClicked = index;
             }
-        }
+        },
     },
-}
+};
 </script>
diff --git a/resources/js/components/data-list/TableField.vue b/resources/js/components/data-list/TableField.vue
index 6e59e008a0..25a632649b 100644
--- a/resources/js/components/data-list/TableField.vue
+++ b/resources/js/components/data-list/TableField.vue
@@ -6,18 +6,16 @@
 import DefaultField from './DefaultField.vue';
 
 export default {
-
     components: { DefaultField },
 
     props: {
         handle: { type: String, required: true },
         value: { required: true },
         values: { required: true },
-        fieldtype: String
+        fieldtype: String,
     },
 
     computed: {
-
         component() {
             const fallback = 'DefaultField';
             const custom = `${this.fieldtype}-fieldtype-index`;
@@ -29,9 +27,7 @@ export default {
 
         cssClass() {
             return this.fieldtype ? `${this.fieldtype}-index-field` : '';
-        }
-
-    }
-
-}
+        },
+    },
+};
 </script>
diff --git a/resources/js/components/data-list/ToggleAll.vue b/resources/js/components/data-list/ToggleAll.vue
index 0cbf17ec09..495b0944cc 100644
--- a/resources/js/components/data-list/ToggleAll.vue
+++ b/resources/js/components/data-list/ToggleAll.vue
@@ -1,6 +1,12 @@
 <template>
-    <label for="checkerOfAllBoxes" class="flex items-center justify-center relative cursor-pointer">
-        <input type="checkbox" @change="toggle" :checked="anyItemsChecked" id="checkerOfAllBoxes" class="relative top-0">
+    <label for="checkerOfAllBoxes" class="relative flex cursor-pointer items-center justify-center">
+        <input
+            type="checkbox"
+            @change="toggle"
+            :checked="anyItemsChecked"
+            id="checkerOfAllBoxes"
+            class="relative top-0"
+        />
     </label>
 </template>
 
@@ -14,19 +20,19 @@ export default {
     },
     methods: {
         toggle() {
-            this.anyItemsChecked ? this.uncheckAllItems() : this.checkMaximumAmountOfItems()
+            this.anyItemsChecked ? this.uncheckAllItems() : this.checkMaximumAmountOfItems();
         },
 
         checkMaximumAmountOfItems() {
             this.sharedState.selections = _.chain(this.sharedState.rows)
-                .map(item => item.id)
+                .map((item) => item.id)
                 .first(this.sharedState.maxSelections ?? Infinity)
-                .value()
+                .value();
         },
 
         uncheckAllItems() {
-            this.sharedState.selections = []
+            this.sharedState.selections = [];
         },
     },
-}
+};
 </script>
diff --git a/resources/js/components/entries/BaseCreateForm.vue b/resources/js/components/entries/BaseCreateForm.vue
index 7970232f62..de54611122 100644
--- a/resources/js/components/entries/BaseCreateForm.vue
+++ b/resources/js/components/entries/BaseCreateForm.vue
@@ -1,5 +1,4 @@
 <template>
-
     <entry-publish-form
         :is-creating="true"
         publish-container="base"
@@ -25,12 +24,10 @@
         :preview-targets="previewTargets"
         @saved="saved"
     ></entry-publish-form>
-
 </template>
 
 <script>
 export default {
-
     props: [
         'actions',
         'collectionHandle',
@@ -51,12 +48,9 @@ export default {
     ],
 
     methods: {
-
         saved(response) {
             window.location = response.data.data.edit_url + '?created=true';
-        }
-
-    }
-
-}
+        },
+    },
+};
 </script>
diff --git a/resources/js/components/entries/CreateEntryButton.vue b/resources/js/components/entries/CreateEntryButton.vue
index 1f82a6db7a..3c85057388 100644
--- a/resources/js/components/entries/CreateEntryButton.vue
+++ b/resources/js/components/entries/CreateEntryButton.vue
@@ -1,13 +1,12 @@
 <template>
-
     <dropdown-list class="inline-block" :disabled="!hasMultipleBlueprints">
         <template v-slot:trigger>
             <button
-                :class="[buttonClass, {'flex items-center rtl:pl-4 ltr:pr-4': hasMultipleBlueprints }]"
+                :class="[buttonClass, { 'flex items-center ltr:pr-4 rtl:pl-4': hasMultipleBlueprints }]"
                 @click="create"
             >
                 {{ text }}
-                <svg-icon name="micro/chevron-down-xs" class="w-2 rtl:mr-2 ltr:ml-2" v-if="hasMultipleBlueprints" />
+                <svg-icon name="micro/chevron-down-xs" class="w-2 ltr:ml-2 rtl:mr-2" v-if="hasMultipleBlueprints" />
             </button>
         </template>
         <h6 v-text="__('Choose Blueprint')" class="p-2" />
@@ -18,29 +17,24 @@
             </div>
         </div>
     </dropdown-list>
-
 </template>
 
 <script>
 export default {
-
     props: {
         url: String,
         blueprints: Array,
         text: { type: String, default: () => __('Create Entry') },
-        buttonClass: { type: String, default: 'btn' }
+        buttonClass: { type: String, default: 'btn' },
     },
 
     computed: {
-
         hasMultipleBlueprints() {
             return this.blueprints.length > 1;
-        }
-
+        },
     },
 
     methods: {
-
         create($event) {
             if (this.blueprints.length === 1) this.select(null, $event);
         },
@@ -52,10 +46,8 @@ export default {
                 url = url += `?blueprint=${blueprint}`;
             }
 
-            $event.metaKey ? window.open(url) : window.location = url;
-        }
-
-    }
-
-}
+            $event.metaKey ? window.open(url) : (window.location = url);
+        },
+    },
+};
 </script>
diff --git a/resources/js/components/entries/Listing.vue b/resources/js/components/entries/Listing.vue
index 76535824a4..a2816464dd 100644
--- a/resources/js/components/entries/Listing.vue
+++ b/resources/js/components/entries/Listing.vue
@@ -15,9 +15,11 @@
             @visible-columns-updated="visibleColumns = $event"
         >
             <div>
-                <div class="card overflow-hidden p-0 relative">
-                    <div v-if="!reordering" class="flex flex-wrap items-center justify-between px-2 pb-2 text-sm border-b dark:border-dark-900">
-
+                <div class="card relative overflow-hidden p-0">
+                    <div
+                        v-if="!reordering"
+                        class="flex flex-wrap items-center justify-between border-b px-2 pb-2 text-sm dark:border-dark-900"
+                    >
                         <data-list-filter-presets
                             ref="presets"
                             :active-preset="activePreset"
@@ -30,11 +32,26 @@
                             @reset="filtersReset"
                         />
 
-                        <data-list-search class="h-8 mt-2 min-w-[240px] w-full" ref="search" v-model="searchQuery" :placeholder="searchPlaceholder" />
+                        <data-list-search
+                            class="mt-2 h-8 w-full min-w-[240px]"
+                            ref="search"
+                            v-model="searchQuery"
+                            :placeholder="searchPlaceholder"
+                        />
 
-                        <div class="flex space-x-2 rtl:space-x-reverse mt-2">
-                            <button class="btn btn-sm rtl:mr-2 ltr:ml-2" v-text="__('Reset')" v-show="isDirty" @click="$refs.presets.refreshPreset()" />
-                            <button class="btn btn-sm rtl:mr-2 ltr:ml-2" v-text="__('Save')" v-show="isDirty" @click="$refs.presets.savePreset()" />
+                        <div class="mt-2 flex space-x-2 rtl:space-x-reverse">
+                            <button
+                                class="btn btn-sm ltr:ml-2 rtl:mr-2"
+                                v-text="__('Reset')"
+                                v-show="isDirty"
+                                @click="$refs.presets.refreshPreset()"
+                            />
+                            <button
+                                class="btn btn-sm ltr:ml-2 rtl:mr-2"
+                                v-text="__('Save')"
+                                v-show="isDirty"
+                                @click="$refs.presets.savePreset()"
+                            />
                             <data-list-column-picker :preferences-key="preferencesKey('columns')" />
                         </div>
                     </div>
@@ -77,21 +94,43 @@
                             @reordered="reordered"
                         >
                             <template #cell-title="{ row: entry }">
-                                <a class="title-index-field inline-flex items-center" :href="entry.edit_url" @click.stop>
-                                    <span class="little-dot rtl:ml-2 ltr:mr-2" v-tooltip="getStatusLabel(entry)" :class="getStatusClass(entry)" v-if="! columnShowing('status')" />
+                                <a
+                                    class="title-index-field inline-flex items-center"
+                                    :href="entry.edit_url"
+                                    @click.stop
+                                >
+                                    <span
+                                        class="little-dot ltr:mr-2 rtl:ml-2"
+                                        v-tooltip="getStatusLabel(entry)"
+                                        :class="getStatusClass(entry)"
+                                        v-if="!columnShowing('status')"
+                                    />
                                     <span v-text="entry.title" />
                                 </a>
                             </template>
                             <template #cell-status="{ row: entry }">
-                                <div class="status-index-field select-none" v-tooltip="getStatusTooltip(entry)" :class="`status-${entry.status}`" v-text="getStatusLabel(entry)" />
+                                <div
+                                    class="status-index-field select-none"
+                                    v-tooltip="getStatusTooltip(entry)"
+                                    :class="`status-${entry.status}`"
+                                    v-text="getStatusLabel(entry)"
+                                />
                             </template>
                             <template #cell-slug="{ row: entry }">
                                 <div class="slug-index-field" :title="entry.slug">{{ entry.slug }}</div>
                             </template>
                             <template #actions="{ row: entry, index }">
                                 <dropdown-list placement="left-start">
-                                    <dropdown-item :text="__('View')" :external-link="entry.permalink" v-if="entry.viewable && entry.permalink" />
-                                    <dropdown-item :text="__('Edit')" :redirect="entry.edit_url" v-if="entry.editable" />
+                                    <dropdown-item
+                                        :text="__('View')"
+                                        :external-link="entry.permalink"
+                                        v-if="entry.viewable && entry.permalink"
+                                    />
+                                    <dropdown-item
+                                        :text="__('Edit')"
+                                        :redirect="entry.edit_url"
+                                        v-if="entry.editable"
+                                    />
                                     <div class="divider" v-if="entry.actions.length" />
                                     <data-list-inline-actions
                                         :item="entry.id"
@@ -122,7 +161,6 @@
 import Listing from '../Listing.vue';
 
 export default {
-
     mixins: [Listing],
 
     props: {
@@ -141,17 +179,16 @@ export default {
             initialSite: this.site,
             pushQuery: true,
             previousFilters: null,
-        }
+        };
     },
 
     computed: {
         actionContext() {
-            return {collection: this.collection};
+            return { collection: this.collection };
         },
     },
 
     watch: {
-
         reordering(reordering, wasReordering) {
             if (reordering === wasReordering) return;
             reordering ? this.reorder() : this.cancelReordering();
@@ -161,7 +198,7 @@ export default {
             deep: true,
             handler(filters) {
                 this.currentSite = filters.site ? filters.site.site : null;
-            }
+            },
         },
 
         site(site) {
@@ -171,12 +208,10 @@ export default {
         currentSite(site) {
             this.setSiteFilter(site);
             this.$emit('site-changed', site);
-        }
-
+        },
     },
 
     methods: {
-
         getStatusClass(entry) {
             // TODO: Replace with `entry.status` (will need to pass down)
             if (entry.published && entry.private) {
@@ -202,13 +237,11 @@ export default {
 
         getStatusTooltip(entry) {
             if (entry.status === 'published') {
-                return entry.collection.dated
-                    ? __('messages.status_published_with_date', {date: entry.date})
-                    : null; // The label is sufficient.
+                return entry.collection.dated ? __('messages.status_published_with_date', { date: entry.date }) : null; // The label is sufficient.
             } else if (entry.status === 'scheduled') {
-                return __('messages.status_scheduled_with_date', {date: entry.date})
+                return __('messages.status_scheduled_with_date', { date: entry.date });
             } else if (entry.status === 'expired') {
-                return __('messages.status_expired_with_date', {date: entry.date})
+                return __('messages.status_expired_with_date', { date: entry.date });
             } else if (entry.status === 'draft') {
                 return null; // The label is sufficient.
             }
@@ -235,7 +268,7 @@ export default {
         },
 
         columnShowing(column) {
-            return this.visibleColumns.find(c => c.field === column);
+            return this.visibleColumns.find((c) => c.field === column);
         },
 
         reordered(items) {
@@ -243,23 +276,24 @@ export default {
         },
 
         setSiteFilter(site) {
-            this.filterChanged({ handle: 'site', values: { site }});
+            this.filterChanged({ handle: 'site', values: { site } });
         },
 
         saveOrder() {
             const payload = {
-                ids: this.items.map(item => item.id),
+                ids: this.items.map((item) => item.id),
                 page: this.page,
                 perPage: this.perPage,
-                site: this.currentSite
+                site: this.currentSite,
             };
 
-            this.$axios.post(this.reorderUrl, payload)
-                .then(response => {
+            this.$axios
+                .post(this.reorderUrl, payload)
+                .then((response) => {
                     this.$emit('reordered');
-                    this.$toast.success(__('Entries successfully reordered'))
+                    this.$toast.success(__('Entries successfully reordered'));
                 })
-                .catch(e => {
+                .catch((e) => {
                     console.log(e);
                     this.$toast.error(__('Something went wrong'));
                 });
@@ -271,8 +305,7 @@ export default {
             if (this.previousFilters) this.filtersChanged(this.previousFilters);
 
             this.previousFilters = null;
-        }
-    }
-
-}
+        },
+    },
+};
 </script>
diff --git a/resources/js/components/entries/PublishActions.vue b/resources/js/components/entries/PublishActions.vue
index 8b91716a9c..632cb237f9 100644
--- a/resources/js/components/entries/PublishActions.vue
+++ b/resources/js/components/entries/PublishActions.vue
@@ -1,79 +1,64 @@
 <template>
-
     <stack narrow name="publish-options" @closed="$emit('closed')" v-slot="{ close }">
-        <div class="bg-white dark:bg-dark-800 h-full flex flex-col">
-
-            <div class="bg-gray-200 dark:bg-dark-600 px-6 py-2 border-b border-gray-300 dark:border-dark-900 text-lg font-medium flex items-center justify-between">
+        <div class="flex h-full flex-col bg-white dark:bg-dark-800">
+            <div
+                class="flex items-center justify-between border-b border-gray-300 bg-gray-200 px-6 py-2 text-lg font-medium dark:border-dark-900 dark:bg-dark-600"
+            >
                 {{ __('Publish') }}
-                <button
-                    type="button"
-                    class="btn-close"
-                    @click="close"
-                    v-html="'&times'" />
+                <button type="button" class="btn-close" @click="close" v-html="'&times'" />
             </div>
 
             <div class="flex-1 overflow-auto p-6">
-
-                <div class="flex h-full items-center justify-center loading" v-if="saving">
+                <div class="loading flex h-full items-center justify-center" v-if="saving">
                     <loading-graphic text="" />
                 </div>
 
                 <template v-else>
-
-                    <select-input
-                        class="mb-6"
-                        v-model="action"
-                        :options="options"
-                    />
+                    <select-input class="mb-6" v-model="action" :options="options" />
 
                     <div v-if="action">
-
                         <date-fieldtype
                             v-if="action == 'schedule'"
                             class="mb-6"
                             name="publishTime"
-                            :value="publishTime" />
+                            :value="publishTime"
+                        />
 
                         <textarea-input
                             class="mb-6 text-sm"
                             v-model="revisionMessage"
                             :placeholder="__('Notes about this revision')"
                             @keydown.enter="submit"
-                            :focus="true" />
-
-                        <button
-                            class="btn-primary w-full mb-6"
-                            v-text="submitButtonText"
-                            @click="submit"
+                            :focus="true"
                         />
 
-                        <div class="text-gray text-xs flex mb-6">
-                            <div class="pt-px w-4 rtl:ml-2 ltr:mr-2">
+                        <button class="btn-primary mb-6 w-full" v-text="submitButtonText" @click="submit" />
+
+                        <div class="mb-6 flex text-xs text-gray">
+                            <div class="w-4 pt-px ltr:mr-2 rtl:ml-2">
                                 <svg-icon name="info-circle" class="pt-px" />
                             </div>
                             <div class="flex-1" v-text="actionInfoText" />
                         </div>
 
-                        <div class="text-gray text-xs flex mb-6 text-red-500" v-if="action === 'schedule'">
-                            <div class="pt-px w-4 rtl:ml-2 ltr:mr-2">
+                        <div class="mb-6 flex text-xs text-gray text-red-500" v-if="action === 'schedule'">
+                            <div class="w-4 pt-px ltr:mr-2 rtl:ml-2">
                                 <svg-icon name="info-circle" class="pt-px" />
                             </div>
-                            <div class="flex-1" v-text="__('messages.publish_actions_current_becomes_draft_because_scheduled')" />
+                            <div
+                                class="flex-1"
+                                v-text="__('messages.publish_actions_current_becomes_draft_because_scheduled')"
+                            />
                         </div>
-
                     </div>
-
                 </template>
-
             </div>
         </div>
     </stack>
-
 </template>
 
 <script>
 export default {
-
     props: {
         actions: Object,
         published: Boolean,
@@ -88,11 +73,10 @@ export default {
             action: this.canManagePublishState ? 'publish' : 'revision',
             revisionMessage: null,
             saving: false,
-        }
+        };
     },
 
     computed: {
-
         options() {
             const options = [];
 
@@ -124,16 +108,14 @@ export default {
 
         submitButtonText() {
             return _.findWhere(this.options, { value: this.action }).label;
-        }
-
+        },
     },
 
     methods: {
-
         submit() {
             this.saving = true;
             this.$emit('saving');
-            const method = 'submit'+this.action.charAt(0).toUpperCase()+this.action.substring(1);
+            const method = 'submit' + this.action.charAt(0).toUpperCase() + this.action.substring(1);
             this[method]();
         },
 
@@ -143,9 +125,13 @@ export default {
 
         runBeforePublishHook() {
             Statamic.$hooks
-                .run('entry.publishing', { collection: this.collection, message: this.revisionMessage, storeName: this.publishContainer })
+                .run('entry.publishing', {
+                    collection: this.collection,
+                    message: this.revisionMessage,
+                    storeName: this.publishContainer,
+                })
                 .then(this.performPublishRequest)
-                .catch(error => {
+                .catch((error) => {
                     this.saving = false;
                     this.$toast.error(error || __('Something went wrong'));
                 });
@@ -153,17 +139,19 @@ export default {
 
         performPublishRequest() {
             const payload = { message: this.revisionMessage };
-            this.$axios.post(this.actions.publish, payload)
-                .then(response => {
+            this.$axios
+                .post(this.actions.publish, payload)
+                .then((response) => {
                     this.saving = false;
 
-                    if (! response.data.saved) {
+                    if (!response.data.saved) {
                         this.$emit('failed');
                         return this.$toast.error(__(`Couldn't publish entry`));
                     }
                     this.$toast.success(__('Published'));
                     this.runAfterPublishHook(response);
-                }).catch(error => this.handleAxiosError(error));
+                })
+                .catch((error) => this.handleAxiosError(error));
         },
 
         runAfterPublishHook(response) {
@@ -174,14 +162,15 @@ export default {
                     collection: this.collection,
                     reference: this.reference,
                     message: this.revisionMessage,
-                    response
+                    response,
                 })
                 .then(() => {
                     // Finally, we'll emit an event. We need to wait until after the hooks are resolved because
                     // if this form is being shown in a stack, we only want to close it once everything's done.
                     this.revisionMessage = null;
                     this.$emit('saved', { published: true, isWorkingCopy: false, response });
-                }).catch(e => {});
+                })
+                .catch((e) => {});
         },
 
         submitSchedule() {
@@ -191,28 +180,34 @@ export default {
         submitUnpublish() {
             const payload = { message: this.revisionMessage };
 
-            this.$axios.post(this.actions.unpublish, { data: payload }).then(response => {
-                this.saving = false;
+            this.$axios
+                .post(this.actions.unpublish, { data: payload })
+                .then((response) => {
+                    this.saving = false;
 
-                if (! response.data.saved) {
-                    this.$emit('failed');
-                    return this.$toast.error(__(`Couldn't unpublish entry`));
-                }
+                    if (!response.data.saved) {
+                        this.$emit('failed');
+                        return this.$toast.error(__(`Couldn't unpublish entry`));
+                    }
 
-                this.$toast.success(__('Unpublished'));
-                this.revisionMessage = null;
-                this.$emit('saved', { published: false, isWorkingCopy: false, response });
-            }).catch(e => this.handleAxiosError(e));
+                    this.$toast.success(__('Unpublished'));
+                    this.revisionMessage = null;
+                    this.$emit('saved', { published: false, isWorkingCopy: false, response });
+                })
+                .catch((e) => this.handleAxiosError(e));
         },
 
         submitRevision() {
             const payload = { message: this.revisionMessage };
 
-            this.$axios.post(this.actions.createRevision, payload).then(response => {
-                this.$toast.success(__('Revision created'));
-                this.revisionMessage = null;
-                this.$emit('saved', { isWorkingCopy: true, response });
-            }).catch(e => this.handleAxiosError(e));
+            this.$axios
+                .post(this.actions.createRevision, payload)
+                .then((response) => {
+                    this.$toast.success(__('Revision created'));
+                    this.revisionMessage = null;
+                    this.$emit('saved', { isWorkingCopy: true, response });
+                })
+                .catch((e) => this.handleAxiosError(e));
         },
 
         handleAxiosError(e) {
@@ -230,9 +225,7 @@ export default {
 
             this.saving = false;
             this.$emit('failed');
-        }
-
-    }
-
-}
+        },
+    },
+};
 </script>
diff --git a/resources/js/components/entries/PublishForm.vue b/resources/js/components/entries/PublishForm.vue
index 6748287cc9..569e4eb446 100644
--- a/resources/js/components/entries/PublishForm.vue
+++ b/resources/js/components/entries/PublishForm.vue
@@ -1,17 +1,21 @@
 <template>
-
     <div>
         <breadcrumb v-if="breadcrumbs" :url="breadcrumbs[1].url" :title="breadcrumbs[1].text" />
 
-        <div class="flex items-baseline mb-6">
-            <h1 class="flex-1 self-start rtl:ml-4 ltr:mr-4">
+        <div class="mb-6 flex items-baseline">
+            <h1 class="flex-1 self-start ltr:mr-4 rtl:ml-4">
                 <div class="flex items-baseline">
-                    <span v-if="! isCreating" class="little-dot rtl:ml-2 ltr:mr-2 -top-1" :class="activeLocalization.status" v-tooltip="__(activeLocalization.status)" />
+                    <span
+                        v-if="!isCreating"
+                        class="little-dot -top-1 ltr:mr-2 rtl:ml-2"
+                        :class="activeLocalization.status"
+                        v-tooltip="__(activeLocalization.status)"
+                    />
                     <span class="break-overflowing-words" v-html="formattedTitle" />
                 </div>
             </h1>
 
-            <dropdown-list class="rtl:ml-4 ltr:mr-4" v-if="canEditBlueprint || hasItemActions">
+            <dropdown-list class="ltr:mr-4 rtl:ml-4" v-if="canEditBlueprint || hasItemActions">
                 <dropdown-item :text="__('Edit Blueprint')" v-if="canEditBlueprint" :redirect="actions.editBlueprint" />
                 <li class="divider" />
                 <data-list-inline-actions
@@ -25,23 +29,18 @@
                 />
             </dropdown-list>
 
-            <div class="pt-px text-2xs text-gray-600 flex rtl:ml-4 ltr:mr-4" v-if="readOnly">
-                <svg-icon name="light/lock" class="w-4 rtl:ml-1 ltr:mr-1 -mt-1" /> {{ __('Read Only') }}
+            <div class="flex pt-px text-2xs text-gray-600 ltr:mr-4 rtl:ml-4" v-if="readOnly">
+                <svg-icon name="light/lock" class="-mt-1 w-4 ltr:mr-1 rtl:ml-1" /> {{ __('Read Only') }}
             </div>
 
-            <div class="hidden md:flex items-center">
+            <div class="hidden items-center md:flex">
                 <save-button-options
                     v-if="!readOnly"
                     :show-options="!revisionsEnabled && !isInline"
                     :button-class="saveButtonClass"
                     :preferences-prefix="preferencesPrefix"
                 >
-                    <button
-                        :class="saveButtonClass"
-                        :disabled="!canSave"
-                        @click.prevent="save"
-                        v-text="saveText"
-                    />
+                    <button :class="saveButtonClass" :disabled="!canSave" @click.prevent="save" v-text="saveText" />
                 </save-button-options>
 
                 <save-button-options
@@ -51,7 +50,7 @@
                     :preferences-prefix="preferencesPrefix"
                 >
                     <button
-                        class="rtl:mr-4 ltr:ml-4 btn-primary flex items-center"
+                        class="btn-primary flex items-center ltr:ml-4 rtl:mr-4"
                         :disabled="!canPublish"
                         @click="confirmingPublish = true"
                         v-text="publishButtonText"
@@ -90,7 +89,6 @@
                 @opened-via-keyboard="openLivePreview"
                 @closed="closeLivePreview"
             >
-
                 <div>
                     <component
                         v-for="component in components"
@@ -114,152 +112,202 @@
                             @blur="container.$emit('blur', $event)"
                         >
                             <template #actions="{ shouldShowSidebar }">
-                            <div class="card p-0 mb-5">
-
-                                <div v-if="collectionHasRoutes" :class="{ 'hi': !shouldShowSidebar }">
-
-                                    <div class="p-3 flex items-center space-x-2 rtl:space-x-reverse" v-if="showLivePreviewButton || showVisitUrlButton">
-                                        <button
-                                            class="flex items-center justify-center btn w-full"
-                                            v-if="showLivePreviewButton"
-                                            @click="openLivePreview">
-                                            <svg-icon name="light/synchronize" class="h-4 w-4 rtl:ml-2 ltr:mr-2 shrink-0" />
-                                            <span>{{ __('Live Preview') }}</span>
-                                        </button>
-                                        <a
-                                            class="flex items-center justify-center btn w-full"
-                                            v-if="showVisitUrlButton"
-                                            :href="permalink"
-                                            target="_blank">
-                                            <svg-icon name="light/external-link" class="w-4 h-4 rtl:ml-2 ltr:mr-2 shrink-0" />
-                                            <span>{{ __('Visit URL') }}</span>
-                                        </a>
+                                <div class="card mb-5 p-0">
+                                    <div v-if="collectionHasRoutes" :class="{ hi: !shouldShowSidebar }">
+                                        <div
+                                            class="flex items-center space-x-2 p-3 rtl:space-x-reverse"
+                                            v-if="showLivePreviewButton || showVisitUrlButton"
+                                        >
+                                            <button
+                                                class="btn flex w-full items-center justify-center"
+                                                v-if="showLivePreviewButton"
+                                                @click="openLivePreview"
+                                            >
+                                                <svg-icon
+                                                    name="light/synchronize"
+                                                    class="h-4 w-4 shrink-0 ltr:mr-2 rtl:ml-2"
+                                                />
+                                                <span>{{ __('Live Preview') }}</span>
+                                            </button>
+                                            <a
+                                                class="btn flex w-full items-center justify-center"
+                                                v-if="showVisitUrlButton"
+                                                :href="permalink"
+                                                target="_blank"
+                                            >
+                                                <svg-icon
+                                                    name="light/external-link"
+                                                    class="h-4 w-4 shrink-0 ltr:mr-2 rtl:ml-2"
+                                                />
+                                                <span>{{ __('Visit URL') }}</span>
+                                            </a>
+                                        </div>
                                     </div>
-                                </div>
 
-                                <div
-                                    v-if="!revisionsEnabled"
-                                    class="flex items-center justify-between px-4 py-2"
-                                    :class="{ 'border-t dark:border-dark-900': showLivePreviewButton || showVisitUrlButton }"
-                                >
-                                    <label v-text="__('Published')" class="publish-field-label font-medium" />
-                                    <toggle-input :value="published" :read-only="!canManagePublishState" @input="setFieldValue('published', $event)" />
-                                </div>
-
-                                <div
-                                    v-if="revisionsEnabled && !isCreating"
-                                    class="p-4"
-                                    :class="{ 'border-t dark:border-dark-900': showLivePreviewButton || showVisitUrlButton }"
-                                >
-                                    <label class="publish-field-label font-medium mb-2" v-text="__('Revisions')"/>
-                                    <div class="mb-1 flex items-center" v-if="published">
-                                        <span class="text-green-600 w-6 text-center">&check;</span>
-                                        <span class="text-2xs" v-text="__('Entry has a published version')"></span>
-                                    </div>
-                                    <div class="mb-1 flex items-center" v-else>
-                                        <span class="text-orange w-6 text-center">!</span>
-                                        <span class="text-2xs" v-text="__('Entry has not been published')"></span>
-                                    </div>
-                                    <div class="mb-1 flex items-center" v-if="!isWorkingCopy && published">
-                                        <span class="text-green-600 w-6 text-center">&check;</span>
-                                        <span class="text-2xs" v-text="__('This is the published version')"></span>
-                                    </div>
-                                    <div class="mb-1 flex items-center" v-if="isDirty">
-                                        <span class="text-orange w-6 text-center">!</span>
-                                        <span class="text-2xs" v-text="__('Unsaved changes')"></span>
+                                    <div
+                                        v-if="!revisionsEnabled"
+                                        class="flex items-center justify-between px-4 py-2"
+                                        :class="{
+                                            'border-t dark:border-dark-900':
+                                                showLivePreviewButton || showVisitUrlButton,
+                                        }"
+                                    >
+                                        <label v-text="__('Published')" class="publish-field-label font-medium" />
+                                        <toggle-input
+                                            :value="published"
+                                            :read-only="!canManagePublishState"
+                                            @input="setFieldValue('published', $event)"
+                                        />
                                     </div>
-                                    <button
-                                            class="flex items-center justify-center mt-4 btn-flat px-2 w-full"
+
+                                    <div
+                                        v-if="revisionsEnabled && !isCreating"
+                                        class="p-4"
+                                        :class="{
+                                            'border-t dark:border-dark-900':
+                                                showLivePreviewButton || showVisitUrlButton,
+                                        }"
+                                    >
+                                        <label class="publish-field-label mb-2 font-medium" v-text="__('Revisions')" />
+                                        <div class="mb-1 flex items-center" v-if="published">
+                                            <span class="w-6 text-center text-green-600">&check;</span>
+                                            <span class="text-2xs" v-text="__('Entry has a published version')"></span>
+                                        </div>
+                                        <div class="mb-1 flex items-center" v-else>
+                                            <span class="w-6 text-center text-orange">!</span>
+                                            <span class="text-2xs" v-text="__('Entry has not been published')"></span>
+                                        </div>
+                                        <div class="mb-1 flex items-center" v-if="!isWorkingCopy && published">
+                                            <span class="w-6 text-center text-green-600">&check;</span>
+                                            <span class="text-2xs" v-text="__('This is the published version')"></span>
+                                        </div>
+                                        <div class="mb-1 flex items-center" v-if="isDirty">
+                                            <span class="w-6 text-center text-orange">!</span>
+                                            <span class="text-2xs" v-text="__('Unsaved changes')"></span>
+                                        </div>
+                                        <button
+                                            class="btn-flat mt-4 flex w-full items-center justify-center px-2"
                                             v-if="!isCreating && revisionsEnabled"
-                                            @click="showRevisionHistory = true">
-                                            <svg-icon name="light/history" class="h-4 w-4 rtl:ml-2 ltr:mr-2" />
+                                            @click="showRevisionHistory = true"
+                                        >
+                                            <svg-icon name="light/history" class="h-4 w-4 ltr:mr-2 rtl:ml-2" />
                                             <span>{{ __('View History') }}</span>
                                         </button>
-                                </div>
+                                    </div>
 
-                                <div class="p-4 border-t dark:border-dark-900" v-if="localizations.length > 1">
-                                    <label class="publish-field-label font-medium mb-2" v-text="__('Sites')" />
-                                    <div
-                                        v-for="option in localizations"
-                                        :key="option.handle"
-                                        class="text-sm flex items-center -mx-4 px-4 py-2"
-                                        :class="[
-                                            option.active ? 'bg-blue-100 dark:bg-dark-300' : 'hover:bg-gray-200 dark:hover:bg-dark-400',
-                                            !canSave && !option.exists ? 'cursor-not-allowed' : 'cursor-pointer',
-                                        ]"
-                                        @click="localizationSelected(option)"
-                                    >
-                                        <div class="flex-1 flex items-center" :class="{ 'line-through': !option.exists }">
-                                            <span class="little-dot rtl:ml-2 ltr:mr-2" :class="{
-                                                'bg-green-600': option.published,
-                                                'bg-gray-500': !option.published,
-                                                'bg-red-500': !option.exists
-                                            }" />
-                                            {{ __(option.name) }}
-                                            <loading-graphic
-                                                :size="14"
-                                                text=""
-                                                class="rtl:mr-2 ltr:ml-2"
-                                                v-if="localizing && localizing.handle === option.handle" />
+                                    <div class="border-t p-4 dark:border-dark-900" v-if="localizations.length > 1">
+                                        <label class="publish-field-label mb-2 font-medium" v-text="__('Sites')" />
+                                        <div
+                                            v-for="option in localizations"
+                                            :key="option.handle"
+                                            class="-mx-4 flex items-center px-4 py-2 text-sm"
+                                            :class="[
+                                                option.active
+                                                    ? 'bg-blue-100 dark:bg-dark-300'
+                                                    : 'hover:bg-gray-200 dark:hover:bg-dark-400',
+                                                !canSave && !option.exists ? 'cursor-not-allowed' : 'cursor-pointer',
+                                            ]"
+                                            @click="localizationSelected(option)"
+                                        >
+                                            <div
+                                                class="flex flex-1 items-center"
+                                                :class="{ 'line-through': !option.exists }"
+                                            >
+                                                <span
+                                                    class="little-dot ltr:mr-2 rtl:ml-2"
+                                                    :class="{
+                                                        'bg-green-600': option.published,
+                                                        'bg-gray-500': !option.published,
+                                                        'bg-red-500': !option.exists,
+                                                    }"
+                                                />
+                                                {{ __(option.name) }}
+                                                <loading-graphic
+                                                    :size="14"
+                                                    text=""
+                                                    class="ltr:ml-2 rtl:mr-2"
+                                                    v-if="localizing && localizing.handle === option.handle"
+                                                />
+                                            </div>
+                                            <div
+                                                class="badge-sm bg-orange dark:bg-orange-dark"
+                                                v-if="option.origin"
+                                                v-text="__('Origin')"
+                                            />
+                                            <div
+                                                class="badge-sm bg-blue dark:bg-dark-blue-175"
+                                                v-if="option.active"
+                                                v-text="__('Active')"
+                                            />
+                                            <div
+                                                class="badge-sm bg-purple dark:bg-purple-dark"
+                                                v-if="option.root && !option.origin && !option.active"
+                                                v-text="__('Root')"
+                                            />
                                         </div>
-                                        <div class="badge-sm bg-orange dark:bg-orange-dark" v-if="option.origin" v-text="__('Origin')" />
-                                        <div class="badge-sm bg-blue dark:bg-dark-blue-175" v-if="option.active" v-text="__('Active')" />
-                                        <div class="badge-sm bg-purple dark:bg-purple-dark" v-if="option.root && !option.origin && !option.active" v-text="__('Root')" />
                                     </div>
                                 </div>
-                            </div>
                             </template>
                         </publish-tabs>
                     </transition>
                 </div>
                 <template v-slot:buttons>
-                   <button
+                    <button
                         v-if="!readOnly"
-                        class="rtl:mr-4 ltr:ml-4"
+                        class="ltr:ml-4 rtl:mr-4"
                         :class="{
-                            'btn': revisionsEnabled,
+                            btn: revisionsEnabled,
                             'btn-primary': isCreating || !revisionsEnabled,
                         }"
                         :disabled="!canSave"
                         @click.prevent="save"
-                        v-text="saveText">
-                    </button>
+                        v-text="saveText"
+                    ></button>
 
                     <button
                         v-if="revisionsEnabled && !isCreating"
-                        class="rtl:mr-4 ltr:ml-4 btn-primary flex items-center"
+                        class="btn-primary flex items-center ltr:ml-4 rtl:mr-4"
                         :disabled="!canPublish"
-                        @click="confirmingPublish = true">
+                        @click="confirmingPublish = true"
+                    >
                         <span v-text="publishButtonText" />
-                        <svg-icon name="micro/chevron-down-xs" class="rtl:mr-2 ltr:ml-2 w-2" />
+                        <svg-icon name="micro/chevron-down-xs" class="w-2 ltr:ml-2 rtl:mr-2" />
                     </button>
                 </template>
             </live-preview>
         </publish-container>
 
-        <div class="md:hidden mt-6 flex items-center">
+        <div class="mt-6 flex items-center md:hidden">
             <button
                 v-if="!readOnly"
                 class="btn-lg"
                 :class="{
-                    'btn-primary w-full': ! revisionsEnabled,
-                    'btn w-1/2 rtl:ml-4 ltr:mr-4': revisionsEnabled,
+                    'btn-primary w-full': !revisionsEnabled,
+                    'btn w-1/2 ltr:mr-4 rtl:ml-4': revisionsEnabled,
                 }"
                 :disabled="!canSave"
                 @click.prevent="save"
-                v-text="__(revisionsEnabled ? 'Save Changes' : 'Save')" />
+                v-text="__(revisionsEnabled ? 'Save Changes' : 'Save')"
+            />
 
             <button
                 v-if="revisionsEnabled"
-                class="rtl:mr-2 ltr:ml-2 btn btn-lg justify-center btn-primary flex items-center w-1/2"
+                class="btn btn-lg btn-primary flex w-1/2 items-center justify-center ltr:ml-2 rtl:mr-2"
                 :disabled="!canPublish"
-                @click="confirmingPublish = true">
+                @click="confirmingPublish = true"
+            >
                 <span v-text="publishButtonText" />
-                <svg-icon name="micro/chevron-down-xs" class="rtl:mr-2 ltr:ml-2 w-2" />
+                <svg-icon name="micro/chevron-down-xs" class="w-2 ltr:ml-2 rtl:mr-2" />
             </button>
         </div>
 
-        <stack name="revision-history" v-if="showRevisionHistory" @closed="showRevisionHistory = false" :narrow="true" v-slot="{ close }">
+        <stack
+            name="revision-history"
+            v-if="showRevisionHistory"
+            @closed="showRevisionHistory = false"
+            :narrow="true"
+            v-slot="{ close }"
+        >
             <revision-history
                 :index-url="actions.revisions"
                 :restore-url="actions.restore"
@@ -294,20 +342,13 @@
                 <div class="form-group publish-field field-w-full">
                     <label v-text="__('Origin')" />
                     <div class="help-block -mt-2" v-text="__('messages.entry_origin_instructions')"></div>
-                    <select-input
-                        v-model="selectedOrigin"
-                        :options="originOptions"
-                        :placeholder="false"
-                    />
+                    <select-input v-model="selectedOrigin" :options="originOptions" :placeholder="false" />
                 </div>
             </div>
-
         </confirmation-modal>
     </div>
-
 </template>
 
-
 <script>
 import PublishActions from './PublishActions.vue';
 import SaveButtonOptions from '../publish/SaveButtonOptions.vue';
@@ -318,12 +359,7 @@ import HasActions from '../publish/HasActions';
 import striptags from 'striptags';
 
 export default {
-
-    mixins: [
-        HasPreferences,
-        HasHiddenFields,
-        HasActions,
-    ],
+    mixins: [HasPreferences, HasHiddenFields, HasActions],
 
     components: {
         PublishActions,
@@ -410,11 +446,10 @@ export default {
             quickSaveKeyBinding: null,
             quickSave: false,
             isAutosave: false,
-        }
+        };
     },
 
     computed: {
-
         formattedTitle() {
             return striptags(__(this.title));
         },
@@ -424,7 +459,7 @@ export default {
         },
 
         somethingIsLoading() {
-            return ! this.$progress.isComplete();
+            return !this.$progress.isComplete();
         },
 
         canSave() {
@@ -472,7 +507,7 @@ export default {
         },
 
         saveText() {
-            switch(true) {
+            switch (true) {
                 case this.revisionsEnabled:
                     return __('Save Changes');
                 case this.isUnpublishing:
@@ -486,24 +521,24 @@ export default {
 
         publishButtonText() {
             if (this.canManagePublishState) {
-                return `${__('Publish')}…`
+                return `${__('Publish')}…`;
             }
 
-            return `${__('Create Revision')}…`
+            return `${__('Create Revision')}…`;
         },
 
         isUnpublishing() {
-            return this.initialPublished && ! this.published && ! this.isCreating;
+            return this.initialPublished && !this.published && !this.isCreating;
         },
 
         isDraft() {
-            return ! this.published;
+            return !this.published;
         },
 
         saveButtonClass() {
             return {
-                'btn': this.revisionsEnabled,
-                'btn-primary': this.isCreating || ! this.revisionsEnabled,
+                btn: this.revisionsEnabled,
+                'btn-primary': this.isCreating || !this.revisionsEnabled,
             };
         },
 
@@ -513,8 +548,8 @@ export default {
 
         originOptions() {
             return this.localizations
-                .filter(localization => localization.exists)
-                .map(localization => ({
+                .filter((localization) => localization.exists)
+                .map((localization) => ({
                     value: localization.handle,
                     label: localization.name,
                 }));
@@ -523,11 +558,9 @@ export default {
         direction() {
             return this.$config.get('direction', 'ltr');
         },
-
     },
 
     watch: {
-
         saving(saving) {
             this.$progress.loading(`${this.publishContainer}-entry-publish-form`, saving);
         },
@@ -538,18 +571,16 @@ export default {
                 document.title = `${title} ${arrow} ${this.breadcrumbs[1].text} ${arrow} ${this.breadcrumbs[0].text} ${arrow} ${__('Statamic')}`;
             }
         },
-
     },
 
     methods: {
-
         clearErrors() {
             this.error = null;
             this.errors = {};
         },
 
         save() {
-            if (! this.canSave) {
+            if (!this.canSave) {
                 this.quickSave = false;
                 return;
             }
@@ -563,39 +594,45 @@ export default {
         runBeforeSaveHook() {
             this.$refs.container.saving();
 
-            Statamic.$hooks.run('entry.saving', {
-                collection: this.collectionHandle,
-                values: this.values,
-                container: this.$refs.container,
-                storeName: this.publishContainer,
-            })
-            .then(this.performSaveRequest)
-            .catch(error => {
-                this.saving = false;
-                this.$toast.error(error || 'Something went wrong');
-            });
+            Statamic.$hooks
+                .run('entry.saving', {
+                    collection: this.collectionHandle,
+                    values: this.values,
+                    container: this.$refs.container,
+                    storeName: this.publishContainer,
+                })
+                .then(this.performSaveRequest)
+                .catch((error) => {
+                    this.saving = false;
+                    this.$toast.error(error || 'Something went wrong');
+                });
         },
 
         performSaveRequest() {
             // Once the hook has completed, we need to make the actual request.
             // We build the payload here because the before hook may have modified values.
-            const payload = { ...this.visibleValues, ...{
-                _blueprint: this.fieldset.handle,
-                _localized: this.localizedFields,
-            }};
-
-            this.$axios[this.method](this.actions.save, payload).then(response => {
-                this.saving = false;
-                if (! response.data.saved) {
-                    return this.$toast.error(__(`Couldn't save entry`));
-                }
-                this.title = response.data.data.title;
-                this.isWorkingCopy = true;
-                if (!this.revisionsEnabled) this.permalink = response.data.data.permalink;
-                if (!this.isCreating && !this.isAutosave) this.$toast.success(__('Saved'));
-                this.$refs.container.saved();
-                this.runAfterSaveHook(response);
-            }).catch(error => this.handleAxiosError(error));
+            const payload = {
+                ...this.visibleValues,
+                ...{
+                    _blueprint: this.fieldset.handle,
+                    _localized: this.localizedFields,
+                },
+            };
+
+            this.$axios[this.method](this.actions.save, payload)
+                .then((response) => {
+                    this.saving = false;
+                    if (!response.data.saved) {
+                        return this.$toast.error(__(`Couldn't save entry`));
+                    }
+                    this.title = response.data.data.title;
+                    this.isWorkingCopy = true;
+                    if (!this.revisionsEnabled) this.permalink = response.data.data.permalink;
+                    if (!this.isCreating && !this.isAutosave) this.$toast.success(__('Saved'));
+                    this.$refs.container.saved();
+                    this.runAfterSaveHook(response);
+                })
+                .catch((error) => this.handleAxiosError(error));
         },
 
         runAfterSaveHook(response) {
@@ -605,16 +642,16 @@ export default {
                 .run('entry.saved', {
                     collection: this.collectionHandle,
                     reference: this.initialReference,
-                    response
+                    response,
                 })
                 .then(() => {
                     // If revisions are enabled, just emit event.
                     if (this.revisionsEnabled) {
-                        clearTimeout(this.trackDirtyStateTimeout)
-                        this.trackDirtyState = false
+                        clearTimeout(this.trackDirtyStateTimeout);
+                        this.trackDirtyState = false;
                         this.values = this.resetValuesFromResponse(response.data.data.values);
                         this.extraValues = response.data.data.extraValues;
-                        this.trackDirtyStateTimeout = setTimeout(() => (this.trackDirtyState = true), 500)
+                        this.trackDirtyStateTimeout = setTimeout(() => (this.trackDirtyState = true), 500);
                         this.$nextTick(() => this.$emit('saved', response));
                         return;
                     }
@@ -648,7 +685,8 @@ export default {
 
                     this.quickSave = false;
                     this.isAutosave = false;
-                }).catch(e => console.error(e));
+                })
+                .catch((e) => console.error(e));
         },
 
         confirmPublish() {
@@ -681,7 +719,7 @@ export default {
             if (localization.active) return;
 
             if (this.isDirty) {
-                if (! confirm(__('Are you sure? Unsaved changes will be lost.'))) {
+                if (!confirm(__('Are you sure? Unsaved changes will be lost.'))) {
                     return;
                 }
             }
@@ -704,7 +742,7 @@ export default {
         },
 
         editLocalization(localization) {
-            return this.$axios.get(localization.url).then(response => {
+            return this.$axios.get(localization.url).then((response) => {
                 clearTimeout(this.trackDirtyStateTimeout);
                 this.trackDirtyState = false;
 
@@ -728,21 +766,21 @@ export default {
                 this.initialPublished = data.values.published;
                 this.readOnly = data.readOnly;
 
-                this.trackDirtyStateTimeout = setTimeout(() => this.trackDirtyState = true, 500); // after any fieldtypes do a debounced update
-            })
+                this.trackDirtyStateTimeout = setTimeout(() => (this.trackDirtyState = true), 500); // after any fieldtypes do a debounced update
+            });
         },
 
         createLocalization(localization) {
             this.selectingOrigin = false;
 
             if (this.isCreating) {
-                this.$nextTick(() => window.location = localization.url);
+                this.$nextTick(() => (window.location = localization.url));
                 return;
             }
 
-            const originLocalization = this.localizations.find(e => e.handle === this.selectedOrigin);
+            const originLocalization = this.localizations.find((e) => e.handle === this.selectedOrigin);
             const url = originLocalization.url + '/localize';
-            this.$axios.post(url, { site: localization.handle }).then(response => {
+            this.$axios.post(url, { site: localization.handle }).then((response) => {
                 this.editLocalization(response.data).then(() => {
                     this.$events.$emit('localization.created', { store: this.publishContainer });
 
@@ -759,7 +797,7 @@ export default {
         },
 
         localizationStatusText(localization) {
-            if (! localization.exists) return 'This entry does not exist for this site.';
+            if (!localization.exists) return 'This entry does not exist for this site.';
 
             return localization.published
                 ? 'This entry exists in this site, and is published.'
@@ -773,7 +811,7 @@ export default {
                     this.isPreviewing = true;
                     return this.$wait(300);
                 })
-                .then(() => this.tabsVisible = true);
+                .then(() => (this.tabsVisible = true));
         },
 
         closeLivePreview() {
@@ -815,7 +853,7 @@ export default {
                 this.activeLocalization.title = response.data.data.title;
                 this.activeLocalization.published = response.data.data.published;
                 this.activeLocalization.status = response.data.data.status;
-                this.permalink = response.data.data.permalink
+                this.permalink = response.data.data.permalink;
                 this.$nextTick(() => this.$emit('saved', response));
             }
         },
@@ -832,10 +870,10 @@ export default {
         },
 
         syncField(handle) {
-            if (! confirm('Are you sure? This field\'s value will be replaced by the value in the original entry.'))
+            if (!confirm("Are you sure? This field's value will be replaced by the value in the original entry."))
                 return;
 
-            this.localizedFields = this.localizedFields.filter(field => field !== handle);
+            this.localizedFields = this.localizedFields.filter((field) => field !== handle);
             this.$refs.container.setFieldValue(handle, this.originValues[handle]);
 
             // Update the meta for this field. For instance, a relationship field would have its data preloaded into it.
@@ -844,8 +882,7 @@ export default {
         },
 
         desyncField(handle) {
-            if (!this.localizedFields.includes(handle))
-                this.localizedFields.push(handle);
+            if (!this.localizedFields.includes(handle)) this.localizedFields.push(handle);
 
             this.$refs.container.dirty();
         },
@@ -875,17 +912,16 @@ export default {
                 this.itemActions = response.data.itemActions;
             }
         },
-
     },
 
     mounted() {
-        this.saveKeyBinding = this.$keys.bindGlobal(['mod+return'], e => {
+        this.saveKeyBinding = this.$keys.bindGlobal(['mod+return'], (e) => {
             e.preventDefault();
             if (this.confirmingPublish) return;
             this.save();
         });
 
-        this.quickSaveKeyBinding = this.$keys.bindGlobal(['mod+s'], e => {
+        this.quickSaveKeyBinding = this.$keys.bindGlobal(['mod+s'], (e) => {
             e.preventDefault();
             if (this.confirmingPublish) return;
             this.quickSave = true;
@@ -902,9 +938,10 @@ export default {
     created() {
         window.history.replaceState({}, document.title, document.location.href.replace('created=true', ''));
 
-        this.selectedOrigin = this.originBehavior === 'active'
-            ? this.localizations.find(l => l.active)?.handle
-            : this.localizations.find(l => l.root)?.handle;
+        this.selectedOrigin =
+            this.originBehavior === 'active'
+                ? this.localizations.find((l) => l.active)?.handle
+                : this.localizations.find((l) => l.root)?.handle;
     },
 
     unmounted() {
@@ -918,7 +955,6 @@ export default {
     unmounted() {
         this.saveKeyBinding.destroy();
         this.quickSaveKeyBinding.destroy();
-    }
-
-}
+    },
+};
 </script>
diff --git a/resources/js/components/entries/Widget.vue b/resources/js/components/entries/Widget.vue
index a98d494404..322640d082 100644
--- a/resources/js/components/entries/Widget.vue
+++ b/resources/js/components/entries/Widget.vue
@@ -11,23 +11,33 @@
             :sort="false"
             :sort-column="sortColumn"
             :sort-direction="sortDirection"
-            class="h-full flex flex-col justify-between"
+            class="flex h-full flex-col justify-between"
         >
             <div>
                 <data-list-table :loading="loading">
                     <template #cell-title="{ row: entry }">
                         <div class="flex items-center">
-                            <span class="little-dot rtl:ml-2 ltr:mr-2" v-tooltip="getStatusLabel(entry)" :class="getStatusClass(entry)" v-if="! columnShowing('status')" />
+                            <span
+                                class="little-dot ltr:mr-2 rtl:ml-2"
+                                v-tooltip="getStatusLabel(entry)"
+                                :class="getStatusClass(entry)"
+                                v-if="!columnShowing('status')"
+                            />
                             <a :href="entry.edit_url">{{ entry.title }}</a>
                         </div>
                     </template>
                     <template #cell-status="{ row: entry }">
-                        <div class="status-index-field select-none" v-tooltip="getStatusTooltip(entry)" :class="`status-${entry.status}`" v-text="getStatusLabel(entry)" />
+                        <div
+                            class="status-index-field select-none"
+                            v-tooltip="getStatusTooltip(entry)"
+                            :class="`status-${entry.status}`"
+                            v-text="getStatusLabel(entry)"
+                        />
                     </template>
                 </data-list-table>
                 <data-list-pagination
                     v-if="meta.last_page != 1"
-                    class="py-2 border-t bg-gray-200 rounded-b-lg text-sm dark:bg-dark-650 dark:border-gray-900"
+                    class="rounded-b-lg border-t bg-gray-200 py-2 text-sm dark:border-gray-900 dark:bg-dark-650"
                     :resource-meta="meta"
                     @page-selected="selectPage"
                     :scroll-to-top="false"
@@ -39,7 +49,6 @@
         <p v-else-if="!initializing && !items.length" class="p-4 pt-2 text-sm text-gray-600">
             {{ __('There are no entries in this collection') }}
         </p>
-
     </div>
 </template>
 
@@ -47,7 +56,6 @@
 import Listing from '../Listing.vue';
 
 export default {
-
     mixins: [Listing],
 
     props: {
@@ -57,10 +65,10 @@ export default {
 
     data() {
         return {
-            cols: [{ label: "Title", field: "title", visible: true }, ...this.additionalColumns],
+            cols: [{ label: 'Title', field: 'title', visible: true }, ...this.additionalColumns],
             listingKey: 'entries',
             requestUrl: cp_url(`collections/${this.collection}/entries`),
-        }
+        };
     },
 
     methods: {
@@ -89,22 +97,19 @@ export default {
 
         getStatusTooltip(entry) {
             if (entry.status === 'published') {
-                return entry.collection.dated
-                    ? __('messages.status_published_with_date', {date: entry.date})
-                    : null; // The label is sufficient.
+                return entry.collection.dated ? __('messages.status_published_with_date', { date: entry.date }) : null; // The label is sufficient.
             } else if (entry.status === 'scheduled') {
-                return __('messages.status_scheduled_with_date', {date: entry.date})
+                return __('messages.status_scheduled_with_date', { date: entry.date });
             } else if (entry.status === 'expired') {
-                return __('messages.status_expired_with_date', {date: entry.date})
+                return __('messages.status_expired_with_date', { date: entry.date });
             } else if (entry.status === 'draft') {
                 return null; // The label is sufficient.
             }
         },
 
         columnShowing(column) {
-            return this.cols.find(c => c.field === column);
+            return this.cols.find((c) => c.field === column);
         },
-    }
-
-}
+    },
+};
 </script>
diff --git a/resources/js/components/field-actions/DropdownActions.vue b/resources/js/components/field-actions/DropdownActions.vue
index afc8e0ee97..113ca27a26 100644
--- a/resources/js/components/field-actions/DropdownActions.vue
+++ b/resources/js/components/field-actions/DropdownActions.vue
@@ -1,28 +1,21 @@
 <template>
     <div>
-        <button
-            v-for="action in actions"
-            @click="run(action)"
-            v-text="action.title" />
+        <button v-for="action in actions" @click="run(action)" v-text="action.title" />
     </div>
 </template>
 
 <script>
 export default {
-
     props: ['actions'],
 
     inject: ['popover'],
 
     methods: {
-
         run(action) {
             action.run();
 
             this.popover.vm.close();
         },
-
-    }
-
-}
+    },
+};
 </script>
diff --git a/resources/js/components/field-actions/FieldAction.js b/resources/js/components/field-actions/FieldAction.js
index 7e9d41be55..6a959da001 100644
--- a/resources/js/components/field-actions/FieldAction.js
+++ b/resources/js/components/field-actions/FieldAction.js
@@ -37,12 +37,12 @@ export default class FieldAction {
     }
 
     async run() {
-        let payload = {...this.#payload};
+        let payload = { ...this.#payload };
 
         if (this.#confirm) {
             const confirmation = await modal(this.#modalProps());
             if (!confirmation.confirmed) return;
-            payload = {...payload, confirmation};
+            payload = { ...payload, confirmation };
         }
 
         const response = this.#run(payload);
@@ -56,9 +56,9 @@ export default class FieldAction {
     }
 
     #modalProps() {
-        let props = this.#confirm === true ? {} : {...this.#confirm};
+        let props = this.#confirm === true ? {} : { ...this.#confirm };
 
-        if (! props.title) {
+        if (!props.title) {
             props.title = this.title;
         }
 
diff --git a/resources/js/components/field-actions/FieldActionModal.vue b/resources/js/components/field-actions/FieldActionModal.vue
index 418452b909..7e58441353 100644
--- a/resources/js/components/field-actions/FieldActionModal.vue
+++ b/resources/js/components/field-actions/FieldActionModal.vue
@@ -1,5 +1,4 @@
 <template>
-
     <div>
         <confirmation-modal
             :title="title"
@@ -10,7 +9,6 @@
             @cancel="cancel"
         >
             <div class="min-h-20">
-
                 <div v-if="bodyText" v-text="bodyText" :class="{ 'mb-4': warningText || hasFields }" />
 
                 <div v-if="warningText" v-text="warningText" class="text-red-500" :class="{ 'mb-4': hasFields }" />
@@ -31,18 +29,15 @@
                         @meta-updated="setFieldMeta"
                     />
                 </publish-container>
-
             </div>
         </confirmation-modal>
     </div>
-
 </template>
 
 <script>
-import uniqid from "uniqid";
+import uniqid from 'uniqid';
 
 export default {
-
     props: {
         fields: {
             type: Object,
@@ -76,7 +71,7 @@ export default {
             errors: {},
             bodyText: null,
             containerName: `field-action-modal-${uniqid()}`,
-        }
+        };
     },
 
     mounted() {
@@ -85,28 +80,27 @@ export default {
     },
 
     computed: {
-
         hasFields() {
             return this.fields && Object.keys(this.fields).length > 0;
-        }
-
+        },
     },
 
     methods: {
-
         initialize() {
             if (!this.hasFields) {
                 return;
             }
             this.resolving = true;
-            this.$axios.post(cp_url(`field-action-modal/resolve`), {
-                fields: this.fields,
-            }).then(response => {
-                this.blueprint = { tabs: [{ fields: response.data.fields }]};
-                this.values = response.data.values;
-                this.meta = response.data.meta;
-                this.resolving = false;
-            });
+            this.$axios
+                .post(cp_url(`field-action-modal/resolve`), {
+                    fields: this.fields,
+                })
+                .then((response) => {
+                    this.blueprint = { tabs: [{ fields: response.data.fields }] };
+                    this.values = response.data.values;
+                    this.meta = response.data.meta;
+                    this.resolving = false;
+                });
         },
 
         confirm() {
@@ -116,27 +110,31 @@ export default {
             }
 
             this.processing = true;
-            this.$axios.post(cp_url('field-action-modal/process'), {
-                fields: this.fields,
-                values: this.values,
-            }).then(response => {
-                this.$emit('confirm', response.data);
-            }).catch(e => {
-                if (e.response && e.response.status === 422) {
-                    const { message, errors } = e.response.data;
-                    this.error = message;
-                    this.errors = errors;
-                    this.$toast.error(message);
-                } else if (e.response) {
-                    this.$toast.error(e.response.data.message);
-                } else {
-                    this.$toast.error(__('Something went wrong'));
-                }
-            }).finally(() => this.processing = false);
+            this.$axios
+                .post(cp_url('field-action-modal/process'), {
+                    fields: this.fields,
+                    values: this.values,
+                })
+                .then((response) => {
+                    this.$emit('confirm', response.data);
+                })
+                .catch((e) => {
+                    if (e.response && e.response.status === 422) {
+                        const { message, errors } = e.response.data;
+                        this.error = message;
+                        this.errors = errors;
+                        this.$toast.error(message);
+                    } else if (e.response) {
+                        this.$toast.error(e.response.data.message);
+                    } else {
+                        this.$toast.error(__('Something went wrong'));
+                    }
+                })
+                .finally(() => (this.processing = false));
         },
 
         cancel() {
-            this.$emit('cancel')
+            this.$emit('cancel');
         },
 
         initializeBodyText() {
@@ -145,8 +143,7 @@ export default {
             if (this.warningText || this.hasFields) return null;
 
             return __('Are you sure?');
-        }
-
+        },
     },
-}
+};
 </script>
diff --git a/resources/js/components/field-actions/FieldActions.vue b/resources/js/components/field-actions/FieldActions.vue
index 8194ee2bb6..84cdfbdfd3 100644
--- a/resources/js/components/field-actions/FieldActions.vue
+++ b/resources/js/components/field-actions/FieldActions.vue
@@ -3,7 +3,7 @@
         <div class="quick-list">
             <div class="quick-list-content">
                 <a
-                    v-for="(action, index) in actions.filter(a => a.quick)"
+                    v-for="(action, index) in actions.filter((a) => a.quick)"
                     :key="index"
                     @click="action.run()"
                     v-tooltip="action.title"
@@ -22,15 +22,14 @@
 import DropdownActions from '../field-actions/DropdownActions.vue';
 
 export default {
-
     components: {
-        DropdownActions
+        DropdownActions,
     },
 
     props: {
         actions: {
-            type: Array
-        }
-    }
-}
+            type: Array,
+        },
+    },
+};
 </script>
diff --git a/resources/js/components/field-actions/HasFieldActions.js b/resources/js/components/field-actions/HasFieldActions.js
index cd28d0acce..67aae98b47 100644
--- a/resources/js/components/field-actions/HasFieldActions.js
+++ b/resources/js/components/field-actions/HasFieldActions.js
@@ -1,16 +1,11 @@
 import FieldAction from './FieldAction';
 
 export default {
-
     computed: {
-
         fieldActions() {
-            return [
-                ...this.$fieldActions.get(this.$options.name),
-                ...this.internalFieldActions
-            ]
-            .map(action => new FieldAction(action, this.fieldActionPayload))
-            .filter(action => action.visible);
+            return [...this.$fieldActions.get(this.$options.name), ...this.internalFieldActions]
+                .map((action) => new FieldAction(action, this.fieldActionPayload))
+                .filter((action) => action.visible);
         },
 
         internalFieldActions() {
@@ -20,7 +15,5 @@ export default {
         fieldActionPayload() {
             return {};
         },
-
-    }
-
-}
+    },
+};
diff --git a/resources/js/components/field-actions/modal.js b/resources/js/components/field-actions/modal.js
index b8fa6f9488..5406ee7998 100644
--- a/resources/js/components/field-actions/modal.js
+++ b/resources/js/components/field-actions/modal.js
@@ -1,4 +1,4 @@
-export default function(props) {
+export default function (props) {
     return new Promise((resolve) => {
         const component = Statamic.$components.append('field-action-modal', { props });
         const close = () => Statamic.$components.destroy(component.id);
diff --git a/resources/js/components/field-conditions/Builder.vue b/resources/js/components/field-conditions/Builder.vue
index a9f137ed91..64034f0a8a 100644
--- a/resources/js/components/field-conditions/Builder.vue
+++ b/resources/js/components/field-conditions/Builder.vue
@@ -1,28 +1,23 @@
 <template>
-
     <div class="w-full">
-
         <div class="form-group publish-field select-fieldtype field-w-full">
             <label class="publish-field-label">{{ __('Conditions') }}</label>
-            <div class="help-block -mt-2"><p>{{ __('messages.field_conditions_instructions') }}</p></div>
+            <div class="help-block -mt-2">
+                <p>{{ __('messages.field_conditions_instructions') }}</p>
+            </div>
 
-            <div class="flex items-center mb-6">
-                <select-input
-                    v-model="when"
-                    :options="whenOptions"
-                    :placeholder="false" />
+            <div class="mb-6 flex items-center">
+                <select-input v-model="when" :options="whenOptions" :placeholder="false" />
 
                 <select-input
                     v-if="hasConditions"
                     v-model="type"
                     :options="typeOptions"
                     :placeholder="false"
-                    class="rtl:mr-4 ltr:ml-4" />
+                    class="ltr:ml-4 rtl:mr-4"
+                />
 
-                <text-input
-                    v-if="hasConditions && isCustom"
-                    v-model="customMethod"
-                    class="rtl:mr-4 ltr:ml-4 flex-1" />
+                <text-input v-if="hasConditions && isCustom" v-model="customMethod" class="flex-1 ltr:ml-4 rtl:mr-4" />
             </div>
 
             <condition
@@ -38,13 +33,9 @@
                 @removed="remove(index)"
             />
 
-            <div class="border-t dark:border-dark-900 pt-6" v-if="hasConditions && isStandard">
-                <button
-                    v-text="__('Add Condition')"
-                    @click="add"
-                    class="btn-default" />
+            <div class="border-t pt-6 dark:border-dark-900" v-if="hasConditions && isStandard">
+                <button v-text="__('Add Condition')" @click="add" class="btn-default" />
             </div>
-
         </div>
 
         <div class="form-group publish-field select-fieldtype field-w-full">
@@ -54,12 +45,9 @@
             </div>
             <toggle-input v-model="alwaysSave" />
         </div>
-
     </div>
-
 </template>
 
-
 <script>
 import uniqid from 'uniqid';
 import HasInputOptions from '../fieldtypes/HasInputOptions.js';
@@ -69,18 +57,17 @@ import Condition from './Condition.vue';
 import { __ } from '../../bootstrap/globals';
 
 export default {
-
     mixins: [HasInputOptions],
 
     components: { Condition },
 
     props: {
         config: {
-            required: true
+            required: true,
         },
         suggestableFields: {
-            required: true
-        }
+            required: true,
+        },
     },
 
     data() {
@@ -90,16 +77,15 @@ export default {
             customMethod: null,
             conditions: [],
             alwaysSave: false,
-        }
+        };
     },
 
     computed: {
-
         whenOptions() {
             return this.normalizeInputOptions({
                 always: __('Always show'),
                 if: __('Show when'),
-                unless: __('Hide when')
+                unless: __('Hide when'),
             });
         },
 
@@ -107,7 +93,7 @@ export default {
             return this.normalizeInputOptions({
                 all: __('All of the following conditions pass'),
                 any: __('Any of the following conditions pass'),
-                custom: __('Custom method passes')
+                custom: __('Custom method passes'),
             });
         },
 
@@ -116,7 +102,7 @@ export default {
         },
 
         isStandard() {
-            return this.hasConditions && ! this.isCustom;
+            return this.hasConditions && !this.isCustom;
         },
 
         isCustom() {
@@ -128,30 +114,27 @@ export default {
             let key = this.type === 'any' ? `${this.when}_any` : this.when;
             let saveableConditions = this.prepareSaveableConditions(this.conditions);
 
-            if (this.isStandard && ! _.isEmpty(saveableConditions)) {
+            if (this.isStandard && !_.isEmpty(saveableConditions)) {
                 conditions[key] = saveableConditions;
             } else if (this.isCustom && this.customMethod) {
                 conditions[key] = this.customMethod;
             }
 
             return conditions;
-        }
-
+        },
     },
 
     watch: {
-
         saveableConditions: {
             deep: true,
             handler(conditions) {
                 this.$emit('updated', conditions);
-            }
+            },
         },
 
         alwaysSave(alwaysSave) {
             this.$emit('updated-always-save', alwaysSave);
         },
-
     },
 
     created() {
@@ -161,13 +144,12 @@ export default {
     },
 
     methods: {
-
         add() {
             this.conditions.push({
                 _id: uniqid(),
                 field: null,
                 operator: 'equals',
-                value: null
+                value: null,
             });
         },
 
@@ -181,23 +163,19 @@ export default {
 
         getInitialConditions() {
             let key = _.chain(KEYS)
-                .filter(key => this.config[key])
+                .filter((key) => this.config[key])
                 .first()
                 .value();
 
             let conditions = this.config[key];
 
-            if (! conditions) {
+            if (!conditions) {
                 return;
             }
 
-            this.when = key.startsWith('unless') || key.startsWith('hide_when')
-                ? 'unless'
-                : 'if';
+            this.when = key.startsWith('unless') || key.startsWith('hide_when') ? 'unless' : 'if';
 
-            this.type = key.endsWith('_any')
-                ? 'any'
-                : 'all';
+            this.type = key.endsWith('_any') ? 'any' : 'all';
 
             if (typeof conditions === 'string') {
                 this.type = 'custom';
@@ -213,7 +191,7 @@ export default {
         },
 
         prepareEditableConditions(conditions) {
-            return (new Converter).fromBlueprint(conditions).map(condition => {
+            return new Converter().fromBlueprint(conditions).map((condition) => {
                 condition._id = uniqid();
                 condition.operator = this.prepareEditableOperator(condition.operator);
                 return condition;
@@ -221,11 +199,11 @@ export default {
         },
 
         prepareSaveableConditions(conditions) {
-            conditions = _.reject(conditions, condition => {
-                return ! condition.field || ! condition.value;
+            conditions = _.reject(conditions, (condition) => {
+                return !condition.field || !condition.value;
             });
 
-            return (new Converter).toBlueprint(conditions);
+            return new Converter().toBlueprint(conditions);
         },
 
         prepareEditableOperator(operator) {
@@ -240,7 +218,6 @@ export default {
 
             return operator;
         },
-
-    }
-}
+    },
+};
 </script>
diff --git a/resources/js/components/field-conditions/Condition.vue b/resources/js/components/field-conditions/Condition.vue
index 0f213f3c52..2a255349dd 100644
--- a/resources/js/components/field-conditions/Condition.vue
+++ b/resources/js/components/field-conditions/Condition.vue
@@ -1,17 +1,17 @@
 <template>
-    <div class="flex flex-wrap items-center py-4 border-t dark:border-dark-900">
+    <div class="flex flex-wrap items-center border-t py-4 dark:border-dark-900">
         <div v-if="index === 0" class="help-block" v-text="__('messages.field_conditions_field_instructions')" />
 
         <v-select
             ref="fieldSelect"
             :model-value="condition.field"
-            class="w-full md:w-1/3 mb-2 md:mb-0"
+            class="mb-2 w-full md:mb-0 md:w-1/3"
             :options="fieldOptions"
             :placeholder="__('Field')"
             :taggable="true"
             :push-tags="true"
-            :reduce="field => field.value"
-            :create-option="field => ({value: field, label: field })"
+            :reduce="(field) => field.value"
+            :create-option="(field) => ({ value: field, label: field })"
             @update:model-value="fieldSelected"
             @search:blur="fieldSelectBlur"
         >
@@ -19,7 +19,11 @@
             <template #option="option">
                 <div class="flex items-center">
                     <span v-text="option.label" />
-                    <span v-text="option.value" class="font-mono text-2xs text-gray-500 dark:text-dark-150" :class="{ 'ml-2': option.label }" />
+                    <span
+                        v-text="option.value"
+                        class="font-mono text-2xs text-gray-500 dark:text-dark-150"
+                        :class="{ 'ml-2': option.label }"
+                    />
                 </div>
             </template>
         </v-select>
@@ -28,26 +32,28 @@
             :model-value="condition.operator"
             :options="operatorOptions"
             :placeholder="false"
-            class="rtl:md:mr-4 ltr:md:ml-4"
-            @update:model-value="operatorSelected" />
+            class="ltr:md:ml-4 rtl:md:mr-4"
+            @update:model-value="operatorSelected"
+        />
 
         <toggle-input
             v-if="showValueToggle"
-            class="rtl:mr-4 ltr:ml-4"
+            class="ltr:ml-4 rtl:mr-4"
             :model-value="condition.value === 'true'"
-            @update:model-value="valueUpdated" />
+            @update:model-value="valueUpdated"
+        />
 
         <v-select
             v-else-if="showValueDropdown"
             ref="valueSelect"
             :model-value="condition.value"
-            class="rtl:mr-4 ltr:ml-4 w-full md:w-52 mb-2 md:mb-0"
+            class="mb-2 w-full md:mb-0 md:w-52 ltr:ml-4 rtl:mr-4"
             :options="valueOptions"
             :placeholder="__('Option')"
             :taggable="false"
             :push-tags="true"
-            :reduce="field => field.value"
-            :create-option="field => ({value: field, label: field })"
+            :reduce="(field) => field.value"
+            :create-option="(field) => ({ value: field, label: field })"
             @update:model-value="valueUpdated"
             @search:blur="valueSelectBlur"
         >
@@ -57,11 +63,12 @@
         <text-input
             v-else
             :model-value="condition.value"
-            class="rtl:mr-4 ltr:ml-4"
-            @update:model-value="valueUpdated" />
+            class="ltr:ml-4 rtl:mr-4"
+            @update:model-value="valueUpdated"
+        />
 
-        <button @click="remove" class="btn-close rtl:mr-2 ltr:ml-2 group">
-            <svg-icon name="micro/trash" class="w-4 h-4 group-hover:text-red-500" />
+        <button @click="remove" class="btn-close group ltr:ml-2 rtl:mr-2">
+            <svg-icon name="micro/trash" class="h-4 w-4 group-hover:text-red-500" />
         </button>
     </div>
 </template>
@@ -76,82 +83,90 @@ export default {
     props: {
         config: {
             type: Object,
-            required: true
+            required: true,
         },
         condition: {
             type: Object,
-            required: true
+            required: true,
         },
         conditions: {
             type: Array,
-            required: true
+            required: true,
         },
         index: {
             type: Number,
-            required: true
+            required: true,
         },
         suggestableFields: {
             type: Array,
-            required: true
+            required: true,
         },
     },
 
     computed: {
         field() {
-            return this.suggestableFields.find(field => field.handle === this.condition.field);
+            return this.suggestableFields.find((field) => field.handle === this.condition.field);
         },
 
         showValueToggle() {
-            return this.field
-                && ['toggle', 'revealer'].includes(this.field.config.type)
-                && ['equals', 'not', '===', '!=='].includes(this.condition.operator);
+            return (
+                this.field &&
+                ['toggle', 'revealer'].includes(this.field.config.type) &&
+                ['equals', 'not', '===', '!=='].includes(this.condition.operator)
+            );
         },
 
         showValueDropdown() {
-            return this.field
-                && ['button_group', 'checkboxes', 'radio', 'select'].includes(this.field.config.type)
-                && ['equals', 'not', '===', '!=='].includes(this.condition.operator);
+            return (
+                this.field &&
+                ['button_group', 'checkboxes', 'radio', 'select'].includes(this.field.config.type) &&
+                ['equals', 'not', '===', '!=='].includes(this.condition.operator)
+            );
         },
 
         valueOptions() {
-            if (! this.showValueDropdown) return;
+            if (!this.showValueDropdown) return;
 
             return this.normalizeInputOptions(this.field.config.options);
         },
 
         fieldOptions() {
-            const conditions = this.conditions.map(condition => condition.field);
+            const conditions = this.conditions.map((condition) => condition.field);
 
             return _(this.suggestableFields)
-                .reject(field => {
-                    return field.handle === this.config.handle // Exclude the field you're adding a condition to.
-                        || this.condition.field === field.handle // Exclude the field being used in the current condition.
-                        || conditions.includes(field.handle); // Exclude fields already used in other conditions.
+                .reject((field) => {
+                    return (
+                        field.handle === this.config.handle || // Exclude the field you're adding a condition to.
+                        this.condition.field === field.handle || // Exclude the field being used in the current condition.
+                        conditions.includes(field.handle)
+                    ); // Exclude fields already used in other conditions.
                 })
-                .map(field => {
+                .map((field) => {
                     let display = field.config.display;
 
-                    if (! display) {
-                        display = field.handle.replace(/_/g, ' ').replace(/(?:^|\s)\S/g, function(a) { return a.toUpperCase(); });
+                    if (!display) {
+                        display = field.handle.replace(/_/g, ' ').replace(/(?:^|\s)\S/g, function (a) {
+                            return a.toUpperCase();
+                        });
                     }
 
-                    return {value: field.handle, label: display}
+                    return { value: field.handle, label: display };
                 });
         },
 
         operatorOptions() {
             return this.normalizeInputOptions({
-                'equals': __('equals'),
-                'not': __('not'),
-                'contains': __('contains'),
-                'contains_any': __('contains any'),
+                equals: __('equals'),
+                not: __('not'),
+                contains: __('contains'),
+                contains_any: __('contains any'),
                 '===': '===',
                 '!==': '!==',
                 '>': '>',
                 '>=': '>=',
                 '<': '<',
                 '<=': '<=',
-                'custom': __('custom'),
+                custom: __('custom'),
             });
         },
     },
@@ -190,7 +205,7 @@ export default {
 
         remove() {
             this.$emit('removed');
-        }
-    }
-}
+        },
+    },
+};
 </script>
diff --git a/resources/js/components/field-conditions/Constants.js b/resources/js/components/field-conditions/Constants.js
index 868a970e92..a76d690ed5 100644
--- a/resources/js/components/field-conditions/Constants.js
+++ b/resources/js/components/field-conditions/Constants.js
@@ -6,28 +6,16 @@ export const KEYS = [
     'unless',
     'unless_any',
     'hide_when',
-    'hide_when_any'
+    'hide_when_any',
 ];
 
-export const OPERATORS = [
-    'equals',
-    'not',
-    'contains',
-    'contains_any',
-    '===',
-    '!==',
-    '>',
-    '>=',
-    '<',
-    '<=',
-    'custom',
-];
+export const OPERATORS = ['equals', 'not', 'contains', 'contains_any', '===', '!==', '>', '>=', '<', '<=', 'custom'];
 
 export const ALIASES = {
-    'is': 'equals',
+    is: 'equals',
     '==': 'equals',
-    'isnt': 'not',
+    isnt: 'not',
     '!=': 'not',
-    'includes': 'contains',
-    'includes_any': 'contains_any',
+    includes: 'contains',
+    includes_any: 'contains_any',
 };
diff --git a/resources/js/components/field-conditions/Converter.js b/resources/js/components/field-conditions/Converter.js
index 18d36c89c1..572e4b05c0 100644
--- a/resources/js/components/field-conditions/Converter.js
+++ b/resources/js/components/field-conditions/Converter.js
@@ -1,33 +1,32 @@
 import { OPERATORS, ALIASES } from './Constants.js';
-import map from 'underscore/modules/map.js'
-import each from 'underscore/modules/each.js'
-import filter from 'underscore/modules/filter.js'
-import chain from 'underscore/modules/chain.js'
-import chainable from 'underscore/modules/mixin.js'
+import map from 'underscore/modules/map.js';
+import each from 'underscore/modules/each.js';
+import filter from 'underscore/modules/filter.js';
+import chain from 'underscore/modules/chain.js';
+import chainable from 'underscore/modules/mixin.js';
 
 chainable({ chain, filter, each });
 
 export default class {
-
-    fromBlueprint(conditions, prefix=null) {
+    fromBlueprint(conditions, prefix = null) {
         return map(conditions, (condition, field) => this.splitRhs(field, condition, prefix));
     }
 
     toBlueprint(conditions) {
         let converted = {};
 
-        each(conditions, condition => {
+        each(conditions, (condition) => {
             converted[condition.field] = this.combineRhs(condition);
         });
 
         return converted;
     }
 
-    splitRhs(field, condition, prefix=null) {
+    splitRhs(field, condition, prefix = null) {
         return {
-            'field': this.getScopedFieldHandle(field, prefix),
-            'operator': this.getOperatorFromRhs(condition),
-            'value': this.getValueFromRhs(condition)
+            field: this.getScopedFieldHandle(field, prefix),
+            operator: this.getOperatorFromRhs(condition),
+            value: this.getValueFromRhs(condition),
         };
     }
 
@@ -40,33 +39,29 @@ export default class {
             return field;
         }
 
-        return prefix
-            ? prefix + field
-            : field;
+        return prefix ? prefix + field : field;
     }
 
     getOperatorFromRhs(condition) {
         let operator = '==';
 
         chain(this.getOperatorsAndAliases())
-            .filter(value => new RegExp(`^${value} [^=]`).test(this.normalizeConditionString(condition)))
-            .each(value => operator = value);
+            .filter((value) => new RegExp(`^${value} [^=]`).test(this.normalizeConditionString(condition)))
+            .each((value) => (operator = value));
 
         return this.normalizeOperator(operator);
     }
 
     normalizeOperator(operator) {
-        return ALIASES[operator]
-            ? ALIASES[operator]
-            : operator;
+        return ALIASES[operator] ? ALIASES[operator] : operator;
     }
 
     getValueFromRhs(condition) {
         let rhs = this.normalizeConditionString(condition);
 
         chain(this.getOperatorsAndAliases())
-            .filter(value => new RegExp(`^${value} [^=]`).test(rhs))
-            .each(value => rhs = rhs.replace(new RegExp(`^${value}[ ]*`), ''));
+            .filter((value) => new RegExp(`^${value} [^=]`).test(rhs))
+            .each((value) => (rhs = rhs.replace(new RegExp(`^${value}[ ]*`), '')));
 
         return rhs;
     }
diff --git a/resources/js/components/field-conditions/ParentResolver.js b/resources/js/components/field-conditions/ParentResolver.js
index 32710101fa..04cf1714f6 100644
--- a/resources/js/components/field-conditions/ParentResolver.js
+++ b/resources/js/components/field-conditions/ParentResolver.js
@@ -12,9 +12,7 @@ export default class {
             fieldPath = this.removeOneParentKeyword(fieldPath);
         }
 
-        let resolved = parentPath
-            ? `${parentPath}.${fieldPath}`
-            : fieldPath;
+        let resolved = parentPath ? `${parentPath}.${fieldPath}` : fieldPath;
 
         return `$root.${resolved}`;
     }
@@ -26,9 +24,7 @@ export default class {
             dottedFieldPath = dottedFieldPath.replace(regex, '$1');
         }
 
-        return dottedFieldPath.includes('.')
-            ? dottedFieldPath.replace(regex, '$1$2')
-            : '';
+        return dottedFieldPath.includes('.') ? dottedFieldPath.replace(regex, '$1$2') : '';
     }
 
     isAtSetLevel(dottedFieldPath) {
@@ -38,5 +34,4 @@ export default class {
     removeOneParentKeyword(dottedFieldPath) {
         return dottedFieldPath.replace(new RegExp('^\\$parent.'), '');
     }
-
 }
diff --git a/resources/js/components/field-conditions/Validator.js b/resources/js/components/field-conditions/Validator.js
index 42b2a5b877..7e8c34683f 100644
--- a/resources/js/components/field-conditions/Validator.js
+++ b/resources/js/components/field-conditions/Validator.js
@@ -1,24 +1,22 @@
 import Converter from './Converter.js';
 import ParentResolver from './ParentResolver.js';
 import { KEYS } from './Constants.js';
-import { data_get } from  '../../bootstrap/globals.js'
-import isString from 'underscore/modules/isString.js'
-import isObject from 'underscore/modules/isObject.js'
-import isEmpty from 'underscore/modules/isEmpty.js'
-import intersection from 'underscore/modules/intersection.js'
-import map from 'underscore/modules/map.js'
-import each from 'underscore/modules/each.js'
-import filter from 'underscore/modules/filter.js'
-import reject from 'underscore/modules/reject.js'
-import first from 'underscore/modules/first.js'
-import chain from 'underscore/modules/chain.js'
-import chainable from 'underscore/modules/mixin.js'
+import { data_get } from '../../bootstrap/globals.js';
+import isString from 'underscore/modules/isString.js';
+import isObject from 'underscore/modules/isObject.js';
+import isEmpty from 'underscore/modules/isEmpty.js';
+import intersection from 'underscore/modules/intersection.js';
+import map from 'underscore/modules/map.js';
+import each from 'underscore/modules/each.js';
+import filter from 'underscore/modules/filter.js';
+import reject from 'underscore/modules/reject.js';
+import first from 'underscore/modules/first.js';
+import chain from 'underscore/modules/chain.js';
+import chainable from 'underscore/modules/mixin.js';
 
 chainable({ chain, map, each, filter, reject, first, isEmpty });
 
-const NUMBER_SPECIFIC_COMPARISONS = [
-    '>', '>=', '<', '<='
-];
+const NUMBER_SPECIFIC_COMPARISONS = ['>', '>=', '<', '<='];
 
 export default class {
     constructor(field, values, dottedFieldPath, store, storeName) {
@@ -30,7 +28,7 @@ export default class {
         this.rootValues = store ? store.state.publish[storeName].values : false;
         this.passOnAny = false;
         this.showOnPass = true;
-        this.converter = new Converter;
+        this.converter = new Converter();
     }
 
     passesConditions(specificConditions) {
@@ -42,20 +40,18 @@ export default class {
             return this.passesCustomCondition(this.prepareCondition(conditions));
         }
 
-        let passes = this.passOnAny
-            ? this.passesAnyConditions(conditions)
-            : this.passesAllConditions(conditions);
+        let passes = this.passOnAny ? this.passesAnyConditions(conditions) : this.passesAllConditions(conditions);
 
-        return this.showOnPass ? passes : ! passes;
+        return this.showOnPass ? passes : !passes;
     }
 
     getConditions() {
         let key = chain(KEYS)
-            .filter(key => this.field[key])
+            .filter((key) => this.field[key])
             .first()
             .value();
 
-        if (! key) {
+        if (!key) {
             return undefined;
         }
 
@@ -80,16 +76,16 @@ export default class {
 
     passesAllConditions(conditions) {
         return chain(conditions)
-            .map(condition => this.prepareCondition(condition))
-            .reject(condition => this.passesCondition(condition))
+            .map((condition) => this.prepareCondition(condition))
+            .reject((condition) => this.passesCondition(condition))
             .isEmpty()
             .value();
     }
 
     passesAnyConditions(conditions) {
-        return ! chain(conditions)
-            .map(condition => this.prepareCondition(condition))
-            .filter(condition => this.passesCondition(condition))
+        return !chain(conditions)
+            .map((condition) => this.prepareCondition(condition))
+            .filter((condition) => this.passesCondition(condition))
             .isEmpty()
             .value();
     }
@@ -103,7 +99,7 @@ export default class {
         let lhs = this.prepareLhs(condition.field, operator);
         let rhs = this.prepareRhs(condition.value, operator);
 
-        return {lhs, operator, rhs};
+        return { lhs, operator, rhs };
     }
 
     prepareOperator(operator) {
@@ -137,7 +133,7 @@ export default class {
         }
 
         // When performing lhs.includes(), if lhs is not an object or array, cast to string.
-        if (operator === 'includes' && ! isObject(lhs)) {
+        if (operator === 'includes' && !isObject(lhs)) {
             return lhs ? lhs.toString() : '';
         }
 
@@ -147,9 +143,7 @@ export default class {
         }
 
         // Prepare for eval() and return.
-        return isString(lhs)
-            ? JSON.stringify(lhs.trim())
-            : lhs;
+        return isString(lhs) ? JSON.stringify(lhs.trim()) : lhs;
     }
 
     prepareRhs(rhs, operator) {
@@ -174,35 +168,27 @@ export default class {
         }
 
         // Prepare for eval() and return.
-        return isString(rhs)
-            ? JSON.stringify(rhs.trim())
-            : rhs;
+        return isString(rhs) ? JSON.stringify(rhs.trim()) : rhs;
     }
 
     prepareCustomCondition(condition) {
         let functionName = this.prepareFunctionName(condition.value || condition);
         let params = this.prepareParams(condition.value || condition);
 
-        let target = condition.field
-            ? this.getFieldValue(condition.field)
-            : null;
+        let target = condition.field ? this.getFieldValue(condition.field) : null;
         let targetHandle = condition.field;
 
-        return {functionName, params, target, targetHandle};
+        return { functionName, params, target, targetHandle };
     }
 
     prepareFunctionName(condition) {
-        return condition
-            .replace(new RegExp('^custom '), '')
-            .split(':')[0];
+        return condition.replace(new RegExp('^custom '), '').split(':')[0];
     }
 
     prepareParams(condition) {
         let params = condition.split(':')[1];
 
-        return params
-            ? params.split(',').map(string => string.trim())
-            : [];
+        return params ? params.split(',').map((string) => string.trim()) : [];
     }
 
     getFieldValue(field) {
@@ -247,7 +233,7 @@ export default class {
     }
 
     passesIncludesAnyCondition(condition) {
-        let values = condition.rhs.split(',').map(string => string.trim());
+        let values = condition.rhs.split(',').map((string) => string.trim());
 
         if (Array.isArray(condition.lhs)) {
             return intersection(condition.lhs, values).length;
@@ -275,7 +261,7 @@ export default class {
             fieldPath: this.dottedFieldPath,
         });
 
-        return this.showOnPass ? passes : ! passes;
+        return this.showOnPass ? passes : !passes;
     }
 
     passesNonRevealerConditions(dottedPrefix) {
@@ -288,7 +274,9 @@ export default class {
         let revealerFields = data_get(this.store.state.publish[this.storeName], 'revealerFields', []);
 
         let nonRevealerConditions = chain(this.getConditions())
-            .reject(condition => revealerFields.includes(this.relativeLhsToAbsoluteFieldPath(condition.field, dottedPrefix)))
+            .reject((condition) =>
+                revealerFields.includes(this.relativeLhsToAbsoluteFieldPath(condition.field, dottedPrefix)),
+            )
             .value();
 
         return this.passesConditions(nonRevealerConditions);
@@ -303,8 +291,6 @@ export default class {
             return lhs.replace(new RegExp('^\\$?root\\.'), '');
         }
 
-        return dottedPrefix
-            ? dottedPrefix + '.' + lhs
-            : lhs;
+        return dottedPrefix ? dottedPrefix + '.' + lhs : lhs;
     }
 }
diff --git a/resources/js/components/field-conditions/ValidatorMixin.js b/resources/js/components/field-conditions/ValidatorMixin.js
index 6fe2efdd78..92ed1d4e1e 100644
--- a/resources/js/components/field-conditions/ValidatorMixin.js
+++ b/resources/js/components/field-conditions/ValidatorMixin.js
@@ -1,17 +1,17 @@
 import Validator from './Validator.js';
-import { data_get } from  '../../bootstrap/globals.js'
+import { data_get } from '../../bootstrap/globals.js';
 
 export default {
     inject: {
         storeName: {
-            default: 'base'
-        }
+            default: 'base',
+        },
     },
 
     methods: {
         showField(field, dottedKey) {
             let dottedFieldPath = dottedKey || field.handle;
-            let dottedPrefix = dottedKey ? dottedKey.replace(new RegExp('\.'+field.handle+'$'), '') : '';
+            let dottedPrefix = dottedKey ? dottedKey.replace(new RegExp('\.' + field.handle + '$'), '') : '';
 
             // If we know the field is to permanently hidden, bypass validation.
             if (field.visibility === 'hidden' || this.shouldForceHiddenField(dottedFieldPath)) {
@@ -25,14 +25,20 @@ export default {
             }
 
             // Use validation to determine whether field should be shown.
-            let validator = new Validator(field, {...this.values, ...this.extraValues}, dottedFieldPath, this.$store, this.storeName);
+            let validator = new Validator(
+                field,
+                { ...this.values, ...this.extraValues },
+                dottedFieldPath,
+                this.$store,
+                this.storeName,
+            );
             let passes = validator.passesConditions();
 
             // If the field is configured to always save, never omit value.
             if (field.always_save === true) {
                 this.setHiddenFieldState({
                     dottedKey: dottedFieldPath,
-                    hidden: ! passes,
+                    hidden: !passes,
                     omitValue: false,
                 });
 
@@ -43,8 +49,8 @@ export default {
             this.$nextTick(() => {
                 this.setHiddenFieldState({
                     dottedKey: dottedFieldPath,
-                    hidden: ! passes,
-                    omitValue: field.type === 'revealer' || ! validator.passesNonRevealerConditions(dottedPrefix),
+                    hidden: !passes,
+                    omitValue: field.type === 'revealer' || !validator.passesNonRevealerConditions(dottedPrefix),
                 });
             });
 
@@ -52,25 +58,24 @@ export default {
         },
 
         setHiddenFieldState({ dottedKey, hidden, omitValue }) {
-            const currentValue = this.$store.state.publish[this.storeName].hiddenFields[dottedKey]
+            const currentValue = this.$store.state.publish[this.storeName].hiddenFields[dottedKey];
 
             // Prevent infinite loops
-            if (currentValue
-                && currentValue.hidden === hidden
-                && currentValue.omitValue === omitValue
-            ) {
+            if (currentValue && currentValue.hidden === hidden && currentValue.omitValue === omitValue) {
                 return;
             }
 
             this.$store.commit(`publish/${this.storeName}/setHiddenField`, {
                 dottedKey,
                 hidden,
-                omitValue
-            })
+                omitValue,
+            });
         },
 
         shouldForceHiddenField(dottedFieldPath) {
-            return data_get(this.$store.state.publish[this.storeName].hiddenFields[dottedFieldPath], 'hidden') === 'force';
+            return (
+                data_get(this.$store.state.publish[this.storeName].hiddenFields[dottedFieldPath], 'hidden') === 'force'
+            );
         },
-    }
-}
+    },
+};
diff --git a/resources/js/components/field-validation/Builder.vue b/resources/js/components/field-validation/Builder.vue
index f00632164f..81204c5235 100644
--- a/resources/js/components/field-validation/Builder.vue
+++ b/resources/js/components/field-validation/Builder.vue
@@ -1,9 +1,6 @@
 <template>
-
     <div class="w-full">
-
         <div class="flex">
-
             <div class="form-group publish-field select-fieldtype field-w-full">
                 <label class="publish-field-label">{{ __('Required') }}</label>
                 <div class="help-block -mt-2">
@@ -19,7 +16,6 @@
                 </div>
                 <toggle-input v-model="sometimesValidate" />
             </div>
-
         </div>
 
         <div class="form-group publish-field select-fieldtype field-w-full">
@@ -40,7 +36,7 @@
                 ref="rulesSelect"
                 name="rules"
                 :options="allRules"
-                :reduce="rule => rule.value"
+                :reduce="(rule) => rule.value"
                 :placeholder="__('Add Rule')"
                 :multiple="false"
                 :searchable="true"
@@ -59,10 +55,12 @@
                     />
                 </template>
                 <template #option="{ value, display }">
-                    {{ __(display) }} <code class="rtl:mr-2 ltr:ml-2">{{ valueWithoutTrailingColon(value) }}</code>
+                    {{ __(display) }} <code class="ltr:ml-2 rtl:mr-2">{{ valueWithoutTrailingColon(value) }}</code>
                 </template>
                 <template #no-options="{ search }">
-                    <div class="vs__dropdown-option rtl:text-right ltr:text-left">{{ __('Add') }} <code class="rtl:mr-2 ltr:ml-2">{{ search }}</code></div>
+                    <div class="vs__dropdown-option ltr:text-left rtl:text-right">
+                        {{ __('Add') }} <code class="ltr:ml-2 rtl:mr-2">{{ search }}</code>
+                    </div>
                 </template>
             </v-select>
 
@@ -83,34 +81,36 @@
                     v-model="rules"
                 >
                     <div class="vs__selected-options-outside flex flex-wrap outline-none">
-                        <span v-for="rule in rules" :key="rule" class="vs__selected mt-2 sortable-item">
+                        <span v-for="rule in rules" :key="rule" class="vs__selected sortable-item mt-2">
                             {{ rule }}
-                            <button @click="remove(rule)" type="button" :aria-label="__('Delete Rule')" class="vs__deselect">
+                            <button
+                                @click="remove(rule)"
+                                type="button"
+                                :aria-label="__('Delete Rule')"
+                                class="vs__deselect"
+                            >
                                 <span>×</span>
                             </button>
                         </span>
                     </div>
                 </sortable-list>
             </div>
-
         </div>
     </div>
-
 </template>
 
 <style scoped>
-    .draggable-source--is-dragging {
-        @apply opacity-75 bg-transparent border-dashed
-    }
+.draggable-source--is-dragging {
+    @apply border-dashed bg-transparent opacity-75;
+}
 </style>
 
 <script>
 import RULES from './Rules.js';
-import SemVer from 'semver'
+import SemVer from 'semver';
 import { SortableList, SortableItem, SortableHelpers } from '../sortable/Sortable';
 
 export default {
-
     components: {
         SortableList,
         SortableItem,
@@ -118,7 +118,7 @@ export default {
 
     props: {
         config: {
-            required: true
+            required: true,
         },
     },
 
@@ -129,11 +129,10 @@ export default {
             rules: [],
             selectedLaravelRule: null,
             customRule: null,
-        }
+        };
     },
 
     computed: {
-
         laravelVersion() {
             return this.$store.state.statamic.config.laravelVersion;
         },
@@ -151,9 +150,9 @@ export default {
 
         laravelRules() {
             return _.chain(clone(RULES))
-                .filter(rule => rule.minVersion ? SemVer.gte(this.laravelVersion, rule.minVersion) : true)
-                .filter(rule => rule.maxVersion ? SemVer.lte(this.laravelVersion, rule.maxVersion) : true)
-                .map(rule => {
+                .filter((rule) => (rule.minVersion ? SemVer.gte(this.laravelVersion, rule.minVersion) : true))
+                .filter((rule) => (rule.maxVersion ? SemVer.lte(this.laravelVersion, rule.maxVersion) : true))
+                .map((rule) => {
                     return this.prepareRenderableRule(rule);
                 })
                 .value();
@@ -161,7 +160,7 @@ export default {
 
         extensionRules() {
             return _.chain(clone(Statamic.$config.get('extensionRules')))
-                .map(rule => {
+                .map((rule) => {
                     return this.prepareRenderableRule(rule);
                 })
                 .value();
@@ -172,22 +171,20 @@ export default {
         },
 
         helpBlock() {
-            if (! this.selectedLaravelRule) {
+            if (!this.selectedLaravelRule) {
                 return false;
             }
 
             let rule = _.chain(this.allRules)
-                .filter(rule => rule.value === this.selectedLaravelRule)
+                .filter((rule) => rule.value === this.selectedLaravelRule)
                 .first()
                 .value();
 
             return rule.example || false;
         },
-
     },
 
     watch: {
-
         isRequired(value) {
             if (value === true) {
                 this.ensureToggleableRule('required');
@@ -209,7 +206,6 @@ export default {
 
             this.$emit('updated', value);
         },
-
     },
 
     created() {
@@ -217,11 +213,8 @@ export default {
     },
 
     methods: {
-
         getInitial() {
-            this.rules = this.config.validate
-                ? this.explodeRules(this.config.validate)
-                : [];
+            this.rules = this.config.validate ? this.explodeRules(this.config.validate) : [];
         },
 
         resetState() {
@@ -232,9 +225,7 @@ export default {
         },
 
         explodeRules(rules) {
-            return typeof rules === 'string'
-                ? rules.split('|').map(rule => rule.trim())
-                : rules;
+            return typeof rules === 'string' ? rules.split('|').map((rule) => rule.trim()) : rules;
         },
 
         prepareRenderableRule(rule) {
@@ -248,7 +239,7 @@ export default {
         },
 
         ensureToggleableRule(rule) {
-            if (! this.rules.includes(rule)) {
+            if (!this.rules.includes(rule)) {
                 this.rules.unshift(rule);
             }
         },
@@ -256,7 +247,7 @@ export default {
         ensure(rule) {
             this.resetState();
 
-            if (! this.rules.includes(rule)) {
+            if (!this.rules.includes(rule)) {
                 this.rules.push(rule);
             }
         },
@@ -284,7 +275,7 @@ export default {
         },
 
         remove(rule) {
-            this.rules = this.rules.filter(value => value !== rule);
+            this.rules = this.rules.filter((value) => value !== rule);
         },
 
         hasUnfinishedParameters(rule) {
@@ -301,8 +292,7 @@ export default {
 
         valueWithoutTrailingColon(value) {
             return this.hasUnfinishedParameters(value) ? value.replace(':', '') : value;
-        }
-
-    }
-}
+        },
+    },
+};
 </script>
diff --git a/resources/js/components/field-validation/Rules.js b/resources/js/components/field-validation/Rules.js
index fd3f248c20..4918862cd0 100644
--- a/resources/js/components/field-validation/Rules.js
+++ b/resources/js/components/field-validation/Rules.js
@@ -8,117 +8,117 @@ export default [
     // },
     {
         label: 'Accepted',
-        value: 'accepted'
+        value: 'accepted',
     },
     {
         label: 'Accepted If',
         value: 'accepted_if:',
-        example: 'accepted_if:anotherfield,value,...'
+        example: 'accepted_if:anotherfield,value,...',
     },
     {
         label: 'Active URL',
-        value: 'active_url'
+        value: 'active_url',
     },
     {
         label: 'After (Date)',
         value: 'after:',
-        example: 'after:date'
+        example: 'after:date',
     },
     {
         label: 'After Or Equal (Date)',
         value: 'after_or_equal:',
-        example: 'after_or_equal:date'
+        example: 'after_or_equal:date',
     },
     {
         label: 'Alpha',
-        value: 'alpha'
+        value: 'alpha',
     },
     {
         label: 'Alpha Dash',
-        value: 'alpha_dash'
+        value: 'alpha_dash',
     },
     {
         label: 'Alpha Numeric',
-        value: 'alpha_num'
+        value: 'alpha_num',
     },
     {
         label: 'Array',
-        value: 'array'
+        value: 'array',
     },
     {
         label: 'Bail',
-        value: 'bail'
+        value: 'bail',
     },
     {
         label: 'Before (Date)',
         value: 'before:',
-        example: 'before:date'
+        example: 'before:date',
     },
     {
         label: 'Before Or Equal (Date)',
         value: 'before_or_equal:',
-        example: 'before_or_equal:date'
+        example: 'before_or_equal:date',
     },
     {
         label: 'Between',
         value: 'between:',
-        example: 'between:min,max'
+        example: 'between:min,max',
     },
     {
         label: 'Boolean',
-        value: 'boolean'
+        value: 'boolean',
     },
     {
         label: 'Confirmed',
-        value: 'confirmed'
+        value: 'confirmed',
     },
     {
         label: 'Date',
-        value: 'date'
+        value: 'date',
     },
     {
         label: 'Date Equals',
         value: 'date_equals:',
-        example: 'date_equals:date'
+        example: 'date_equals:date',
     },
     {
         label: 'Date Format',
         value: 'date_format:',
-        example: 'date_format:date'
+        example: 'date_format:date',
     },
     {
         label: 'Different',
         value: 'different:',
-        example: 'different:field'
+        example: 'different:field',
     },
     {
         label: 'Digits',
         value: 'digits:',
-        example: 'digits:value'
+        example: 'digits:value',
     },
     {
         label: 'Digits Between',
         value: 'digits_between:',
-        example: 'digits_between:min,max'
+        example: 'digits_between:min,max',
     },
     {
         label: 'Dimensions (Image Files)',
         value: 'dimensions:',
-        example: 'dimensions:min_width=100,min_height=200'
+        example: 'dimensions:min_width=100,min_height=200',
     },
     {
         label: 'Distinct',
-        value: 'distinct'
+        value: 'distinct',
     },
     {
         label: 'E-Mail',
-        value: 'email'
+        value: 'email',
     },
     {
         label: 'Ends With',
         value: 'ends_with:',
         example: 'ends_with:foo,bar,...',
-        minVersion: '5.8.17'
+        minVersion: '5.8.17',
     },
     // {
     //     label: 'Exists (Database)',
@@ -127,65 +127,65 @@ export default [
     // },
     {
         label: 'File',
-        value: 'file'
+        value: 'file',
     },
     {
         label: 'Filled',
-        value: 'filled'
+        value: 'filled',
     },
     {
         label: 'Greater Than',
         value: 'gt:',
-        example: 'gt:field'
+        example: 'gt:field',
     },
     {
         label: 'Greater Than Or Equal',
         value: 'gte:',
-        example: 'gte:field'
+        example: 'gte:field',
     },
     {
         label: 'Image (File)',
-        value: 'image'
+        value: 'image',
     },
     {
         label: 'In',
         value: 'in:',
-        example: 'in:foo,bar,...'
+        example: 'in:foo,bar,...',
     },
     {
         label: 'In Array',
         value: 'in_array:',
-        example: 'in_array:anotherfield'
+        example: 'in_array:anotherfield',
     },
     {
         label: 'Integer',
-        value: 'integer'
+        value: 'integer',
     },
     {
         label: 'IP Address',
-        value: 'ip'
+        value: 'ip',
     },
     {
         label: 'IP Address (ipv4)',
-        value: 'ipv4'
+        value: 'ipv4',
     },
     {
         label: 'IP Address (ipv6)',
-        value: 'ipv6'
+        value: 'ipv6',
     },
     {
         label: 'JSON',
-        value: 'json'
+        value: 'json',
     },
     {
         label: 'Less Than',
         value: 'lt:',
-        example: 'lt:field'
+        example: 'lt:field',
     },
     {
         label: 'Less Than Or Equal',
         value: 'lte:',
-        example: 'lte:field'
+        example: 'lte:field',
     },
     {
         label: 'Max',
@@ -200,17 +200,17 @@ export default [
     {
         label: 'MIME Types',
         value: 'mimetypes:',
-        example: 'mimetypes:text/plain,...'
+        example: 'mimetypes:text/plain,...',
     },
     {
         label: 'MIME Type By File Extension',
         value: 'mimes:',
-        example: 'mimes:foo,bar,...'
+        example: 'mimes:foo,bar,...',
     },
     {
         label: 'Min',
         value: 'min:',
-        example: 'min:value'
+        example: 'min:value',
     },
     {
         label: 'Min Filesize (KB)',
@@ -220,73 +220,73 @@ export default [
     {
         label: 'Not In',
         value: 'not_in:',
-        example: 'not_in:foo,bar,...'
+        example: 'not_in:foo,bar,...',
     },
     {
         label: 'Not Regular Expression',
         value: 'not_regex:',
-        example: 'not_regex:pattern'
+        example: 'not_regex:pattern',
     },
     {
         label: 'Nullable',
-        value: 'nullable'
+        value: 'nullable',
     },
     {
         label: 'Numeric',
-        value: 'numeric'
+        value: 'numeric',
     },
     {
         label: 'Present',
-        value: 'present'
+        value: 'present',
     },
     {
         label: 'Regular Expression',
         value: 'regex:',
-        example: 'regex:pattern'
+        example: 'regex:pattern',
     },
     {
         label: 'Required',
-        value: 'required'
+        value: 'required',
     },
     {
         label: 'Required If',
         value: 'required_if:',
-        example: 'required_if:anotherfield,value,...'
+        example: 'required_if:anotherfield,value,...',
     },
     {
         label: 'Required Unless',
         value: 'required_unless:',
-        example: 'required_unless:anotherfield,value,...'
+        example: 'required_unless:anotherfield,value,...',
     },
     {
         label: 'Required With',
         value: 'required_with:',
-        example: 'required_with:foo,bar,...'
+        example: 'required_with:foo,bar,...',
     },
     {
         label: 'Required With All',
         value: 'required_with_all:',
-        example: 'required_with_all:foo,bar,...'
+        example: 'required_with_all:foo,bar,...',
     },
     {
         label: 'Required Without',
         value: 'required_without:',
-        example: 'required_without:foo,bar,...'
+        example: 'required_without:foo,bar,...',
     },
     {
         label: 'Required Without All',
         value: 'required_without_all:',
-        example: 'required_without_all:foo,bar,...'
+        example: 'required_without_all:foo,bar,...',
     },
     {
         label: 'Same',
         value: 'same:',
-        example: 'same:field'
+        example: 'same:field',
     },
     {
         label: 'Size',
         value: 'size:',
-        example: 'size:value'
+        example: 'size:value',
     },
     {
         label: 'Sometimes',
@@ -296,15 +296,15 @@ export default [
         label: 'Starts With',
         value: 'starts_with:',
         example: 'starts_with:foo,bar,...',
-        minVersion: '5.7.15'
+        minVersion: '5.7.15',
     },
     {
         label: 'String',
-        value: 'string'
+        value: 'string',
     },
     {
         label: 'Timezone',
-        value: 'timezone'
+        value: 'timezone',
     },
     // {
     //     label: 'Unique (Database)',
@@ -325,11 +325,11 @@ export default [
     },
     {
         label: 'URL',
-        value: 'url'
+        value: 'url',
     },
     {
         label: 'UUID',
         value: 'uuid',
-        minVersion: '5.7.10'
-    }
+        minVersion: '5.7.10',
+    },
 ];
diff --git a/resources/js/components/fields/CanDefineLocalizable.js b/resources/js/components/fields/CanDefineLocalizable.js
index 7d1de72cb5..9983a3fbae 100644
--- a/resources/js/components/fields/CanDefineLocalizable.js
+++ b/resources/js/components/fields/CanDefineLocalizable.js
@@ -1,12 +1,10 @@
 export default {
-
     props: {
         canDefineLocalizable: {
             type: Boolean,
             default: () => {
                 return Statamic.$config.get('sites').length > 1;
-            }
-        }
-    }
-
-}
+            },
+        },
+    },
+};
diff --git a/resources/js/components/fields/FieldtypeSelector.vue b/resources/js/components/fields/FieldtypeSelector.vue
index 7a0abbff0f..0f428c41a8 100644
--- a/resources/js/components/fields/FieldtypeSelector.vue
+++ b/resources/js/components/fields/FieldtypeSelector.vue
@@ -1,7 +1,8 @@
 <template>
-
-    <div class="h-full bg-gray-100 dark:bg-dark-600 overflow-auto">
-        <div class="bg-gray-300 dark:bg-dark-600 px-6 py-2 border-b dark:border-dark-900 text-lg font-medium flex items-center justify-between">
+    <div class="h-full overflow-auto bg-gray-100 dark:bg-dark-600">
+        <div
+            class="flex items-center justify-between border-b bg-gray-300 px-6 py-2 text-lg font-medium dark:border-dark-900 dark:bg-dark-600"
+        >
             {{ __('Fieldtypes') }}
             <button type="button" class="btn-close" @click="close">×</button>
         </div>
@@ -10,30 +11,64 @@
             <loading-graphic />
         </div>
 
-        <div class="py-4 px-6 border-b dark:border-dark-900 bg-white dark:bg-dark-550 flex items-center" v-if="fieldtypesLoaded">
-            <input type="text" class="input-text flex-1 text-sm w-full" autofocus v-model="search" ref="search" @keydown.esc="cancelSearch" :placeholder="`${__('Search')}...`" />
+        <div
+            class="flex items-center border-b bg-white px-6 py-4 dark:border-dark-900 dark:bg-dark-550"
+            v-if="fieldtypesLoaded"
+        >
+            <input
+                type="text"
+                class="input-text w-full flex-1 text-sm"
+                autofocus
+                v-model="search"
+                ref="search"
+                @keydown.esc="cancelSearch"
+                :placeholder="`${__('Search')}...`"
+            />
         </div>
 
         <div class="p-4" v-if="fieldtypesLoaded">
-            <div v-for="group in displayedFieldtypes" :key="group.handle" v-show="group.fieldtypes.length > 0" class="mb-8">
-                <h2 v-if="group.title" v-text="group.title" class="px-2 mb-1" />
-                <p v-if="group.description" v-text="group.description" class="px-2 mb-2 text-gray-700 dark:text-dark-150 text-sm"/>
+            <div
+                v-for="group in displayedFieldtypes"
+                :key="group.handle"
+                v-show="group.fieldtypes.length > 0"
+                class="mb-8"
+            >
+                <h2 v-if="group.title" v-text="group.title" class="mb-1 px-2" />
+                <p
+                    v-if="group.description"
+                    v-text="group.description"
+                    class="mb-2 px-2 text-sm text-gray-700 dark:text-dark-150"
+                />
                 <div class="fieldtype-selector">
                     <div class="fieldtype-list">
                         <div class="p-2" v-for="fieldtype in group.fieldtypes" :key="fieldtype.handle">
-                            <button class="bg-white dark:bg-dark-700 border border-gray-500 dark:shadow-dark-sm dark:border-dark-900 flex items-center group w-full rounded hover:border-gray-600 dark:hover:border-dark-950 shadow-sm hover:shadow-md rtl:pl-3 ltr:pr-3"
-                                @click="select(fieldtype)">
-                                <div class="p-2 flex items-center rtl:border-l ltr:border-r border-gray-500 dark:border-dark-900 group-hover:border-gray-600 dark:group-hover:border-dark-950 bg-gray-200 dark:bg-dark-600 rtl:rounded-r ltr:rounded-l">
-                                    <svg-icon class="h-5 w-5 text-gray-800 dark:text-dark-150" :name="fieldtype.icon.startsWith('<svg') ? fieldtype.icon : `light/${fieldtype.icon}`" default="light/generic-field"></svg-icon>
+                            <button
+                                class="group flex w-full items-center rounded border border-gray-500 bg-white shadow-sm hover:border-gray-600 hover:shadow-md dark:border-dark-900 dark:bg-dark-700 dark:shadow-dark-sm dark:hover:border-dark-950 ltr:pr-3 rtl:pl-3"
+                                @click="select(fieldtype)"
+                            >
+                                <div
+                                    class="flex items-center border-gray-500 bg-gray-200 p-2 group-hover:border-gray-600 dark:border-dark-900 dark:bg-dark-600 dark:group-hover:border-dark-950 ltr:rounded-l ltr:border-r rtl:rounded-r rtl:border-l"
+                                >
+                                    <svg-icon
+                                        class="h-5 w-5 text-gray-800 dark:text-dark-150"
+                                        :name="
+                                            fieldtype.icon.startsWith('<svg')
+                                                ? fieldtype.icon
+                                                : `light/${fieldtype.icon}`
+                                        "
+                                        default="light/generic-field"
+                                    ></svg-icon>
                                 </div>
-                                <span class="rtl:pr-3 ltr:pl-3 text-gray-800 dark:text-dark-150 text-md group-hover:text-gray-900 dark:group-hover:text-dark-100">{{ fieldtype.text }}</span>
+                                <span
+                                    class="text-md text-gray-800 group-hover:text-gray-900 dark:text-dark-150 dark:group-hover:text-dark-100 ltr:pl-3 rtl:pr-3"
+                                    >{{ fieldtype.text }}</span
+                                >
                             </button>
                         </div>
                     </div>
                 </div>
             </div>
         </div>
-
     </div>
 </template>
 
@@ -42,22 +77,21 @@ import Fuse from 'fuse.js';
 import ProvidesFieldtypes from '../fields/ProvidesFieldtypes';
 
 export default {
-
     mixins: [ProvidesFieldtypes],
 
     props: {
         allowTitle: {
-            default: false
+            default: false,
         },
         allowSlug: {
-            default: false
+            default: false,
         },
         allowDate: {
-            default: false
+            default: false,
         },
     },
 
-    data: function() {
+    data: function () {
         return {
             categories: {
                 text: {
@@ -89,22 +123,48 @@ export default {
                     description: __('fieldtypes.picker.category.special.description'),
                 },
             },
-            search: ''
-        }
+            search: '',
+        };
     },
 
     computed: {
-
         allFieldtypes() {
             if (!this.fieldtypesLoaded) return [];
 
-            let options = this.fieldtypes.map(fieldtype => {
-                return {text: fieldtype.title, value: fieldtype.handle, categories: fieldtype.categories, keywords: fieldtype.keywords, icon: fieldtype.icon};
+            let options = this.fieldtypes.map((fieldtype) => {
+                return {
+                    text: fieldtype.title,
+                    value: fieldtype.handle,
+                    categories: fieldtype.categories,
+                    keywords: fieldtype.keywords,
+                    icon: fieldtype.icon,
+                };
             });
 
-            if (this.allowDate) options.unshift({text: __('Publish Date'), value: 'date', categories: ['system'], isMeta: true, icon: 'date'});
-            if (this.allowSlug) options.unshift({text: __('Slug'), value: 'slug', categories: ['system'], isMeta: true, icon: 'slug'});
-            if (this.allowTitle) options.unshift({text: __('Title'), value: 'title', categories: ['system'], isMeta: true, icon: 'title'});
+            if (this.allowDate)
+                options.unshift({
+                    text: __('Publish Date'),
+                    value: 'date',
+                    categories: ['system'],
+                    isMeta: true,
+                    icon: 'date',
+                });
+            if (this.allowSlug)
+                options.unshift({
+                    text: __('Slug'),
+                    value: 'slug',
+                    categories: ['system'],
+                    isMeta: true,
+                    icon: 'slug',
+                });
+            if (this.allowTitle)
+                options.unshift({
+                    text: __('Title'),
+                    value: 'title',
+                    categories: ['system'],
+                    isMeta: true,
+                    icon: 'title',
+                });
 
             return options;
         },
@@ -114,11 +174,11 @@ export default {
                 category.handle = handle;
                 category.fieldtypes = [];
 
-                this.allFieldtypes.forEach(fieldtype => {
+                this.allFieldtypes.forEach((fieldtype) => {
                     let categories = fieldtype.categories;
                     if (categories.length === 0) categories = ['special'];
                     if (categories.includes(handle)) category.fieldtypes.push(fieldtype);
-                })
+                });
 
                 return category;
             });
@@ -132,22 +192,20 @@ export default {
                     findAllMatches: true,
                     threshold: 0.1,
                     keys: [
-                        {name: 'text', weight: 1},
-                        {name: 'categories', weight: 0.1},
-                        {name: 'keywords', weight: 0.4},
+                        { name: 'text', weight: 1 },
+                        { name: 'categories', weight: 0.1 },
+                        { name: 'keywords', weight: 0.4 },
                     ],
                 });
 
-                options = fuse.search(this.search).map(result => result.item);
+                options = fuse.search(this.search).map((result) => result.item);
             }
 
             return options;
         },
 
         displayedFieldtypes() {
-            return this.isSearching
-                ? [{fieldtypes: this.searchFieldtypes}]
-                : this.groupedFieldtypes;
+            return this.isSearching ? [{ fieldtypes: this.searchFieldtypes }] : this.groupedFieldtypes;
         },
 
         allowMeta() {
@@ -156,24 +214,21 @@ export default {
 
         isSearching() {
             return this.search;
-        }
+        },
     },
 
     watch: {
-
         fieldtypesLoaded: {
             immediate: true,
             handler() {
                 this.$nextTick(() => {
                     if (this.$refs.search) this.$refs.search.focus();
                 });
-            }
-        }
-
+            },
+        },
     },
 
     methods: {
-
         select(selection) {
             if (selection.isMeta) {
                 return this.selectMeta(selection);
@@ -194,12 +249,15 @@ export default {
 
             let field = this.createField(fieldtype);
 
-            field = Object.assign({
-                display: __(`cp.${selection.value}`),
-                handle: selection.value,
-                type: fieldtype,
-                isMeta: true
-            }, field);
+            field = Object.assign(
+                {
+                    display: __(`cp.${selection.value}`),
+                    handle: selection.value,
+                    type: fieldtype,
+                    isMeta: true,
+                },
+                field,
+            );
 
             this.$emit('selected', field);
             this.close();
@@ -213,21 +271,21 @@ export default {
             // level, grid, or set fields depending on the event listener location.
             let field = {
                 type: fieldtype.handle,
-                display: __(':title Field', {title: fieldtype.title}),
+                display: __(':title Field', { title: fieldtype.title }),
                 handle: null, // The handle will be generated from the display by the "slug" fieldtype.
                 icon: fieldtype.icon,
                 instructions: null,
                 localizable: false,
                 width: 100,
                 listable: 'hidden',
-                isNew: true
+                isNew: true,
             };
 
             // Vue's reactivity works best when an object already has the appropriate values.
             // We'll set up the default values for each config option. Each option might
             // have a default value defined, otherwise will just set it to null.
             let defaults = {};
-            _.each(fieldtype.config, configField => {
+            _.each(fieldtype.config, (configField) => {
                 defaults[configField.handle] = configField.default || null;
             });
 
@@ -242,13 +300,11 @@ export default {
         },
 
         cancelSearch(event) {
-            if (! this.search) return;
+            if (!this.search) return;
 
             event.stopPropagation();
             this.search = '';
-        }
-
-    }
-
-}
+        },
+    },
+};
 </script>
diff --git a/resources/js/components/fields/ImportSettings.vue b/resources/js/components/fields/ImportSettings.vue
index a98abf158c..df0a0d5800 100644
--- a/resources/js/components/fields/ImportSettings.vue
+++ b/resources/js/components/fields/ImportSettings.vue
@@ -1,30 +1,27 @@
 <template>
-
-    <div class="h-full overflow-auto p-8 bg-gray-300 h-full dark:bg-dark-800">
-
-        <div class="flex items-center mb-6 -mt-2">
+    <div class="h-full overflow-auto bg-gray-300 p-8 dark:bg-dark-800">
+        <div class="-mt-2 mb-6 flex items-center">
             <h1 class="flex-1">
-                <small class="block text-xs text-gray-700 dark:text-dark-175 font-medium leading-none mt-2 flex items-center">
-                    <svg-icon class="h-4 w-4 rtl:ml-2 ltr:mr-2 inline-block text-gray-700 dark:text-dark-175" name="paperclip"/>{{ __('Linked fieldset') }}
+                <small
+                    class="mt-2 block flex items-center text-xs font-medium leading-none text-gray-700 dark:text-dark-175"
+                >
+                    <svg-icon
+                        class="inline-block h-4 w-4 text-gray-700 dark:text-dark-175 ltr:mr-2 rtl:ml-2"
+                        name="paperclip"
+                    />{{ __('Linked fieldset') }}
                 </small>
                 {{ __('Fieldset') }}
             </h1>
             <button
-                class="text-gray-700 dark:text-dark-175 hover:text-gray-800 dark:hover:text-dark-100 rtl:ml-6 ltr:mr-6 text-sm"
+                class="text-sm text-gray-700 hover:text-gray-800 dark:text-dark-175 dark:hover:text-dark-100 ltr:mr-6 rtl:ml-6"
                 @click.prevent="close"
                 v-text="__('Cancel')"
             ></button>
-            <button
-                class="btn-primary"
-                @click.prevent="commit"
-                v-text="__('Finish')"
-            ></button>
+            <button class="btn-primary" @click.prevent="commit" v-text="__('Finish')"></button>
         </div>
 
         <div class="card">
-
             <div class="publish-fields @container">
-
                 <form-group
                     handle="fieldset"
                     :display="__('Fieldset')"
@@ -41,31 +38,27 @@
                     :model-value="config.prefix"
                     @update:model-value="updateField('prefix', $event)"
                 />
-
             </div>
         </div>
     </div>
-
 </template>
 
 <script>
 export default {
-
     props: ['config'],
 
     model: {
         prop: 'config',
-        event: 'input'
+        event: 'input',
     },
 
-    data: function() {
+    data: function () {
         return {
             values: clone(this.config),
         };
     },
 
     methods: {
-
         focus() {
             this.$els.display.select();
         },
@@ -81,9 +74,7 @@ export default {
 
         close() {
             this.$emit('closed');
-        }
-
-    }
-
+        },
+    },
 };
 </script>
diff --git a/resources/js/components/fields/ProvidesFieldtypes.js b/resources/js/components/fields/ProvidesFieldtypes.js
index b389a4d45e..9d649a9d48 100644
--- a/resources/js/components/fields/ProvidesFieldtypes.js
+++ b/resources/js/components/fields/ProvidesFieldtypes.js
@@ -1,7 +1,5 @@
 export default {
-
     computed: {
-
         fieldtypes() {
             if (this.fieldtypesLoading) return;
 
@@ -14,8 +12,7 @@ export default {
 
         fieldtypesLoaded() {
             return Array.isArray(this.fieldtypes);
-        }
-
+        },
     },
 
     created() {
@@ -27,7 +24,6 @@ export default {
 
         if (this.$config.get('isFormBlueprint')) url += '&forms=true';
 
-        this.$axios.get(url).then(response => this.$store.commit('statamic/fieldtypes', response.data));
-    }
-
-}
+        this.$axios.get(url).then((response) => this.$store.commit('statamic/fieldtypes', response.data));
+    },
+};
diff --git a/resources/js/components/fields/Settings.vue b/resources/js/components/fields/Settings.vue
index 436e95d8d7..62e4e72673 100644
--- a/resources/js/components/fields/Settings.vue
+++ b/resources/js/components/fields/Settings.vue
@@ -1,45 +1,50 @@
 <template>
-
-    <div class="h-full bg-gray-300 h-full dark:bg-dark-800 overflow-scroll">
-
-        <div v-if="loading" class="absolute inset-0 z-200 flex items-center justify-center text-center ">
+    <div class="h-full overflow-scroll bg-gray-300 dark:bg-dark-800">
+        <div v-if="loading" class="absolute inset-0 z-200 flex items-center justify-center text-center">
             <loading-graphic />
         </div>
 
-        <header v-if="!loading" class="flex items-center sticky top-0 inset-x-0 bg-white dark:bg-dark-550 shadow dark:shadow-dark px-8 py-2 z-1 h-13">
-            <h1 class="flex-1 flex items-center text-xl">
+        <header
+            v-if="!loading"
+            class="sticky inset-x-0 top-0 z-1 flex h-13 items-center bg-white px-8 py-2 shadow dark:bg-dark-550 dark:shadow-dark"
+        >
+            <h1 class="flex flex-1 items-center text-xl">
                 {{ __(values.display) || __(config.display) || config.handle }}
-                <small class="badge-pill bg-gray-100 dark:bg-dark-400 rtl:mr-4 ltr:ml-4 border dark:border-dark-200 text-xs text-gray-700 dark:text-dark-150 font-medium leading-none flex items-center">
-                    <svg-icon class="h-4 w-4 rtl:ml-2 ltr:mr-2 inline-block text-gray-700 dark:text-dark-150" :name="fieldtype.icon.startsWith('<svg') ? fieldtype.icon : `light/${fieldtype.icon}`"></svg-icon>
+                <small
+                    class="badge-pill flex items-center border bg-gray-100 text-xs font-medium leading-none text-gray-700 dark:border-dark-200 dark:bg-dark-400 dark:text-dark-150 ltr:ml-4 rtl:mr-4"
+                >
+                    <svg-icon
+                        class="inline-block h-4 w-4 text-gray-700 dark:text-dark-150 ltr:mr-2 rtl:ml-2"
+                        :name="fieldtype.icon.startsWith('<svg') ? fieldtype.icon : `light/${fieldtype.icon}`"
+                    ></svg-icon>
                     {{ fieldtype.title }}
                 </small>
             </h1>
             <button
-                class="text-gray-700 dark:text-dark-150 hover:text-gray-800 dark:hover:text-dark-100 rtl:ml-6 ltr:mr-6 text-sm"
+                class="text-sm text-gray-700 hover:text-gray-800 dark:text-dark-150 dark:hover:text-dark-100 ltr:mr-6 rtl:ml-6"
                 @click.prevent="close"
                 v-text="__('Cancel')"
             ></button>
-            <button
-                class="btn-primary"
-                @click.prevent="commit"
-                v-text="__('Apply')"
-            ></button>
+            <button class="btn-primary" @click.prevent="commit" v-text="__('Apply')"></button>
         </header>
-        <section class="isolate py-4 px-3 md:px-8">
+        <section class="isolate px-3 py-4 md:px-8">
             <div class="tabs-container">
                 <div class="publish-tabs tabs">
-                    <button class="tab-button"
-                    :class="{ 'active': activeTab === 'settings' }"
+                    <button
+                        class="tab-button"
+                        :class="{ active: activeTab === 'settings' }"
                         @click="activeTab = 'settings'"
                         v-text="__('Settings')"
                     />
-                    <button class="tab-button"
-                    :class="{ 'active': activeTab === 'conditions' }"
+                    <button
+                        class="tab-button"
+                        :class="{ active: activeTab === 'conditions' }"
                         @click="activeTab = 'conditions'"
                         v-text="__('Conditions')"
                     />
-                    <button class="tab-button"
-                    :class="{ 'active': activeTab === 'validation' }"
+                    <button
+                        class="tab-button"
+                        :class="{ active: activeTab === 'validation' }"
                         @click="activeTab = 'validation'"
                         v-text="__('Validation')"
                     />
@@ -47,7 +52,6 @@
             </div>
 
             <div v-if="!loading" class="field-settings">
-
                 <publish-container
                     :name="publishContainer"
                     :blueprint="blueprint"
@@ -59,13 +63,11 @@
                     v-slot="{ setFieldValue, setFieldMeta }"
                 >
                     <div v-show="activeTab === 'settings'">
-
                         <publish-sections
                             :sections="blueprint.tabs[0].sections"
                             @updated="(handle, value) => updateField(handle, value, setFieldValue)"
                             @meta-updated="setFieldMeta"
                         />
-
                     </div>
                 </publish-container>
 
@@ -75,40 +77,38 @@
                             :config="config"
                             :suggestable-fields="suggestableConditionFields"
                             @updated="updateFieldConditions"
-                            @updated-always-save="updateAlwaysSave" />
+                            @updated-always-save="updateAlwaysSave"
+                        />
                     </div>
                 </div>
 
                 <div class="card p-0" v-show="activeTab === 'validation'">
                     <div class="publish-fields @container">
-                        <field-validation-builder
-                            :config="config"
-                            @updated="updateField('validate', $event)" />
+                        <field-validation-builder :config="config" @updated="updateField('validate', $event)" />
                     </div>
                 </div>
-
             </div>
         </section>
     </div>
-
 </template>
 
 <script>
 import PublishField from '../publish/Field.vue';
-import { ValidatesFieldConditions, FieldConditionsBuilder, FIELD_CONDITIONS_KEYS } from '../field-conditions/FieldConditions.js';
+import {
+    ValidatesFieldConditions,
+    FieldConditionsBuilder,
+    FIELD_CONDITIONS_KEYS,
+} from '../field-conditions/FieldConditions.js';
 import FieldValidationBuilder from '../field-validation/Builder.vue';
 
 export default {
-
     components: {
         PublishField,
         FieldConditionsBuilder,
         FieldValidationBuilder,
     },
 
-    mixins: [
-        ValidatesFieldConditions,
-    ],
+    mixins: [ValidatesFieldConditions],
 
     props: {
         id: String,
@@ -126,15 +126,15 @@ export default {
             isInsideConfigFields: true,
             updateFieldSettingsValue: this.updateField,
             getFieldSettingsValue: this.getFieldValue,
-        }
+        };
     },
 
     model: {
         prop: 'config',
-        event: 'input'
+        event: 'input',
     },
 
-    data: function() {
+    data: function () {
         return {
             values: null,
             meta: null,
@@ -153,9 +153,9 @@ export default {
             return `field-settings-${this.$.uid}`;
         },
 
-        selectedWidth: function() {
+        selectedWidth: function () {
             var width = this.config.width || 100;
-            var found = _.findWhere(this.widths, {value: width});
+            var found = _.findWhere(this.widths, { value: width });
             return found.text;
         },
 
@@ -163,15 +163,17 @@ export default {
             return this.fieldtype.config;
         },
 
-        canBeLocalized: function() {
-            return this.root && Object.keys(Statamic.$config.get('locales')).length > 1 && this.fieldtype.canBeLocalized;
+        canBeLocalized: function () {
+            return (
+                this.root && Object.keys(Statamic.$config.get('locales')).length > 1 && this.fieldtype.canBeLocalized
+            );
         },
 
-        canBeValidated: function() {
+        canBeValidated: function () {
             return this.fieldtype.canBeValidated;
         },
 
-        canHaveDefault: function() {
+        canHaveDefault: function () {
             return this.fieldtype.canHaveDefault;
         },
 
@@ -181,15 +183,15 @@ export default {
 
         filteredFieldtypeConfig() {
             if (this.type === 'grid') {
-                return _.filter(this.fieldtypeConfig, config => config.handle !== 'fields');
+                return _.filter(this.fieldtypeConfig, (config) => config.handle !== 'fields');
             }
 
             if (['replicator', 'bard'].includes(this.type)) {
-                return _.filter(this.fieldtypeConfig, config => config.handle !== 'sets');
+                return _.filter(this.fieldtypeConfig, (config) => config.handle !== 'sets');
             }
 
             return this.fieldtypeConfig;
-        }
+        },
     },
 
     created() {
@@ -197,19 +199,15 @@ export default {
     },
 
     methods: {
-
         configFieldClasses(field) {
-            return [
-                `form-group p-4 m-0 ${field.type}-fieldtype`,
-                tailwind_width_class(field.width)
-            ];
+            return [`form-group p-4 m-0 ${field.type}-fieldtype`, tailwind_width_class(field.width)];
         },
 
         getFieldValue(handle) {
             return this.values[handle];
         },
 
-        updateField(handle, value, setStoreValue=null) {
+        updateField(handle, value, setStoreValue = null) {
             this.values[handle] = value;
             this.markFieldEdited(handle);
 
@@ -222,12 +220,12 @@ export default {
             let values = {};
 
             _.each(this.values, (value, key) => {
-                if (! FIELD_CONDITIONS_KEYS.includes(key)) {
+                if (!FIELD_CONDITIONS_KEYS.includes(key)) {
                     values[key] = value;
                 }
             });
 
-            this.values = {...values, ...conditions};
+            this.values = { ...values, ...conditions };
 
             if (Object.keys(conditions).length > 0) {
                 this.markFieldEdited(Object.keys(conditions)[0]);
@@ -249,16 +247,19 @@ export default {
         commit() {
             this.clearErrors();
 
-            this.$axios.post(cp_url('fields/update'), {
-                id: this.id,
-                type: this.type,
-                values: this.values,
-                fields: this.fields,
-                isInsideSet: this.isInsideSet,
-            }).then(response => {
-                this.$emit('committed', response.data, this.editedFields);
-                this.close();
-            }).catch(e => this.handleAxiosError(e));
+            this.$axios
+                .post(cp_url('fields/update'), {
+                    id: this.id,
+                    type: this.type,
+                    values: this.values,
+                    fields: this.fields,
+                    isInsideSet: this.isInsideSet,
+                })
+                .then((response) => {
+                    this.$emit('committed', response.data, this.editedFields);
+                    this.close();
+                })
+                .catch((e) => this.handleAxiosError(e));
         },
 
         handleAxiosError(e) {
@@ -282,19 +283,19 @@ export default {
         },
 
         load() {
-            this.$axios.post(cp_url('fields/edit'), {
-                type: this.type,
-                values: this.config
-            }).then(response => {
-                this.loading = false;
-                this.fieldtype = response.data.fieldtype;
-                this.blueprint = response.data.blueprint;
-                this.values = response.data.values;
-                this.meta = {...response.data.meta};
-            })
-        }
-
-    }
-
+            this.$axios
+                .post(cp_url('fields/edit'), {
+                    type: this.type,
+                    values: this.config,
+                })
+                .then((response) => {
+                    this.loading = false;
+                    this.fieldtype = response.data.fieldtype;
+                    this.blueprint = response.data.blueprint;
+                    this.values = response.data.values;
+                    this.meta = { ...response.data.meta };
+                });
+        },
+    },
 };
 </script>
diff --git a/resources/js/components/fields/WidthSelector.vue b/resources/js/components/fields/WidthSelector.vue
index 1caedea11f..7268a54004 100644
--- a/resources/js/components/fields/WidthSelector.vue
+++ b/resources/js/components/fields/WidthSelector.vue
@@ -1,10 +1,6 @@
 <template>
-    <div
-        class="field-width field-width-selector"
-        @mouseenter="isHovering = true"
-        @mouseleave="isHovering = false"
-    >
-        <div class="w-full flex">
+    <div class="field-width field-width-selector" @mouseenter="isHovering = true" @mouseleave="isHovering = false">
+        <div class="flex w-full">
             <div
                 v-for="width in widths"
                 :key="width"
@@ -13,7 +9,7 @@
                 :class="[
                     'field-width-notch',
                     'notch-' + width,
-                    { 'filled': selected >= width, 'selected': selected == width }
+                    { filled: selected >= width, selected: selected == width },
                 ]"
             />
         </div>
@@ -25,30 +21,24 @@
 export default {
     emits: ['update:model-value'],
 
-    props: [
-        'modelValue',
-        'initialWidths'
-    ],
+    props: ['modelValue', 'initialWidths'],
 
     data() {
         return {
             isHovering: false,
             hoveringOver: null,
-            widths: this.initialWidths ?? [25, 33, 50, 66, 75, 100]
-        }
+            widths: this.initialWidths ?? [25, 33, 50, 66, 75, 100],
+        };
     },
 
     computed: {
-
         selected() {
             if (this.isHovering) {
                 return this.hoveringOver;
             }
 
             return this.modelValue;
-        }
-
-    }
-
-}
+        },
+    },
+};
 </script>
diff --git a/resources/js/components/fieldsets/CreateForm.vue b/resources/js/components/fieldsets/CreateForm.vue
index 6fde7b508c..abd861fe4d 100644
--- a/resources/js/components/fieldsets/CreateForm.vue
+++ b/resources/js/components/fieldsets/CreateForm.vue
@@ -1,46 +1,43 @@
 <template>
-    <div class="max-w-lg mt-4 mx-auto">
-
-        <div class="rounded p-6 lg:px-20 lg:py-10 shadow bg-white dark:bg-dark-600 dark:shadow-dark">
-            <header class="text-center mb-16">
+    <div class="mx-auto mt-4 max-w-lg">
+        <div class="rounded bg-white p-6 shadow dark:bg-dark-600 dark:shadow-dark lg:px-20 lg:py-10">
+            <header class="mb-16 text-center">
                 <h1 class="mb-6">{{ __('Create Fieldset') }}</h1>
                 <p class="text-gray" v-text="__('messages.fields_fieldsets_description')" />
             </header>
             <div class="mb-10">
-                <label class="font-bold text-base mb-1" for="name">{{ __('Title') }}</label>
-                <input type="text" v-model="title" class="input-text" autofocus tabindex="1">
-                <div class="text-2xs text-gray-600 mt-2 flex items-center">
+                <label class="mb-1 text-base font-bold" for="name">{{ __('Title') }}</label>
+                <input type="text" v-model="title" class="input-text" autofocus tabindex="1" />
+                <div class="mt-2 flex items-center text-2xs text-gray-600">
                     {{ __('messages.fieldsets_title_instructions') }}
                 </div>
             </div>
             <div class="mb-4">
-                <label class="font-bold text-base mb-1" for="name">{{ __('Handle') }}</label>
+                <label class="mb-1 text-base font-bold" for="name">{{ __('Handle') }}</label>
                 <div class="relative">
-                    <loading-graphic inline text="" v-if="slug.busy" class="absolute top-3 right-3"/>
-                    <input type="text" v-model="handle" class="input-text" tabindex="2">
+                    <loading-graphic inline text="" v-if="slug.busy" class="absolute right-3 top-3" />
+                    <input type="text" v-model="handle" class="input-text" tabindex="2" />
                 </div>
-                <div class="text-2xs text-gray-600 mt-2 flex items-center">
+                <div class="mt-2 flex items-center text-2xs text-gray-600">
                     {{ __('messages.fieldsets_handle_instructions') }}
                 </div>
             </div>
         </div>
 
-        <div class="flex justify-center mt-8">
-            <button tabindex="4" class="btn-primary mx-auto btn-lg" :disabled="! canSubmit" @click="submit">
-                {{ __('Create Fieldset')}}
+        <div class="mt-8 flex justify-center">
+            <button tabindex="4" class="btn-primary btn-lg mx-auto" :disabled="!canSubmit" @click="submit">
+                {{ __('Create Fieldset') }}
             </button>
         </div>
     </div>
 </template>
 
 <script>
-
 export default {
-
     props: {
         route: {
-            type: String
-        }
+            type: String,
+        },
     },
 
     data() {
@@ -48,13 +45,13 @@ export default {
             title: null,
             handle: null,
             slug: this.$slug.async().separatedBy('_'),
-        }
+        };
     },
 
     watch: {
         title(title) {
-            this.slug.create(title).then(slug => this.handle = slug);
-        }
+            this.slug.create(title).then((slug) => (this.handle = slug));
+        },
     },
 
     computed: {
@@ -65,20 +62,23 @@ export default {
 
     methods: {
         submit() {
-            this.$axios.post(this.route, {title: this.title, handle: this.handle}).then(response => {
-                window.location = response.data.redirect;
-            }).catch(error => {
-                this.$toast.error(error.response.data.message);
-            });
-        }
+            this.$axios
+                .post(this.route, { title: this.title, handle: this.handle })
+                .then((response) => {
+                    window.location = response.data.redirect;
+                })
+                .catch((error) => {
+                    this.$toast.error(error.response.data.message);
+                });
+        },
     },
 
     mounted() {
-        this.$keys.bindGlobal(['return'], e => {
+        this.$keys.bindGlobal(['return'], (e) => {
             if (this.canSubmit) {
                 this.submit();
             }
         });
-    }
-}
+    },
+};
 </script>
diff --git a/resources/js/components/fieldsets/EditForm.vue b/resources/js/components/fieldsets/EditForm.vue
index 4d948ce09d..79ffc9137b 100644
--- a/resources/js/components/fieldsets/EditForm.vue
+++ b/resources/js/components/fieldsets/EditForm.vue
@@ -1,7 +1,5 @@
 <template>
-
     <div>
-
         <header class="mb-6">
             <breadcrumb :url="breadcrumbUrl" :title="__('Fieldsets')" />
             <div class="flex items-center justify-between">
@@ -10,25 +8,35 @@
             </div>
         </header>
 
-        <div class="publish-form card p-0 @container mb-8">
+        <div class="publish-form card mb-8 p-0 @container">
             <div class="publish-fields">
                 <div class="form-group w-full">
                     <div class="field-inner">
                         <label class="block">{{ __('Title') }}</label>
                         <small class="help-block -mt-2">{{ __('messages.fieldsets_title_instructions') }}</small>
                         <div v-if="errors.title">
-                            <small class="help-block text-red-500" v-for="(error, i) in errors.title" :key="i" v-text="error" />
+                            <small
+                                class="help-block text-red-500"
+                                v-for="(error, i) in errors.title"
+                                :key="i"
+                                v-text="error"
+                            />
                         </div>
                     </div>
                     <div>
-                        <input type="text" name="title" class="input-text" v-model="fieldset.title" autofocus="autofocus">
+                        <input
+                            type="text"
+                            name="title"
+                            class="input-text"
+                            v-model="fieldset.title"
+                            autofocus="autofocus"
+                        />
                     </div>
                 </div>
             </div>
-
         </div>
 
-        <div class="content mt-10 mb-4">
+        <div class="content mb-4 mt-10">
             <h2 v-text="__('Fields')" />
         </div>
 
@@ -46,22 +54,19 @@
                 @editor-closed="editingField = null"
             />
         </div>
-
     </div>
-
 </template>
 
 <script>
 import Fields from '../blueprints/Fields.vue';
-import {Sortable, Plugins} from '@shopify/draggable';
+import { Sortable, Plugins } from '@shopify/draggable';
 import SuggestsConditionalFields from '../blueprints/SuggestsConditionalFields';
 
 export default {
-
     mixins: [SuggestsConditionalFields],
 
     components: {
-        Fields
+        Fields,
     },
 
     props: ['action', 'initialFieldset', 'breadcrumbUrl'],
@@ -73,24 +78,22 @@ export default {
             fieldset: clone(this.initialFieldset),
             errors: {},
             editingField: null,
-        }
+        };
     },
 
     computed: {
-
         fields: {
             get() {
                 return this.fieldset.fields;
             },
             set(fields) {
                 this.fieldset.fields = fields;
-            }
+            },
         },
 
         fieldsForConditionSuggestions() {
             return this.fields;
-        }
-
+        },
     },
 
     mounted() {
@@ -98,17 +101,16 @@ export default {
     },
 
     methods: {
-
         save() {
             this.$axios[this.method](this.action, this.fieldset)
-                .then(response => {
+                .then((response) => {
                     this.$toast.success(__('Saved'));
                     this.errors = {};
                 })
-                .catch(e => {
+                .catch((e) => {
                     this.$toast.error(e.response.data.message);
                     this.errors = e.response.data.errors;
-                })
+                });
         },
 
         fieldCreated(field) {
@@ -128,7 +130,7 @@ export default {
             this.$toast.success(__('Field added'));
 
             if (field.type === 'reference') {
-                this.$nextTick(() => this.editingField = field._id);
+                this.$nextTick(() => (this.editingField = field._id));
             }
         },
 
@@ -137,19 +139,18 @@ export default {
                 draggable: '.blueprint-section-field',
                 handle: '.blueprint-drag-handle',
                 mirror: { constrainDimensions: true, appendTo: 'body' },
-                plugins: [Plugins.SwapAnimation]
-            }).on('sortable:stop', e => {
+                plugins: [Plugins.SwapAnimation],
+            }).on('sortable:stop', (e) => {
                 this.fieldset.fields.splice(e.newIndex, 0, this.fieldset.fields.splice(e.oldIndex, 1)[0]);
             });
-        }
+        },
     },
 
     created() {
-        this.$keys.bindGlobal(['mod+s'], e => {
+        this.$keys.bindGlobal(['mod+s'], (e) => {
             e.preventDefault();
             this.save();
         });
     },
-
-}
+};
 </script>
diff --git a/resources/js/components/fieldsets/FieldsetDeleter.vue b/resources/js/components/fieldsets/FieldsetDeleter.vue
index 675d15c7a3..dd0830f7c7 100644
--- a/resources/js/components/fieldsets/FieldsetDeleter.vue
+++ b/resources/js/components/fieldsets/FieldsetDeleter.vue
@@ -10,16 +10,22 @@
     >
         <template slot="body">
             <template v-if="Object.keys(resource.imported_by).length > 0">
-                <p class="mb-2">{{ __(`Before you can delete this fieldset, you need to remove references to it in blueprints and fieldsets:`) }}</p>
+                <p class="mb-2">
+                    {{
+                        __(
+                            `Before you can delete this fieldset, you need to remove references to it in blueprints and fieldsets:`,
+                        )
+                    }}
+                </p>
 
                 <div v-for="(items, group) in resource.imported_by">
-                    <h3 class="little-heading rtl:pr-0 ltr:pl-0 mb-2">{{ group }}</h3>
+                    <h3 class="little-heading mb-2 ltr:pl-0 rtl:pr-0">{{ group }}</h3>
 
-                    <ul class="list-disc rtl:pr-4 ltr:pl-4">
+                    <ul class="list-disc ltr:pl-4 rtl:pr-4">
                         <li
                             v-for="item in items"
                             :key="item.handle"
-                            class="font-mono text-sm mb-1.5"
+                            class="mb-1.5 font-mono text-sm"
                             v-text="item.title"
                         ></li>
                     </ul>
@@ -35,30 +41,29 @@
 
 <script>
 export default {
-
     props: {
         resource: {
-            type: Object
+            type: Object,
         },
         resourceTitle: {
-            type: String
+            type: String,
         },
         route: {
             type: String,
         },
         redirect: {
-            type: String
+            type: String,
         },
         reload: {
-            type: Boolean
-        }
+            type: Boolean,
+        },
     },
 
     data() {
         return {
             deleting: false,
             redirectFromServer: null,
-        }
+        };
     },
 
     computed: {
@@ -67,12 +72,12 @@ export default {
         },
 
         modalTitle() {
-            return __('Delete :resource', {resource: __(this.title)});
+            return __('Delete :resource', { resource: __(this.title) });
         },
 
         deleteUrl() {
             let url = data_get(this.resource, 'delete_url', this.route);
-            if (! url) console.error('ResourceDeleter cannot find delete url');
+            if (!url) console.error('ResourceDeleter cannot find delete url');
             return url;
         },
 
@@ -87,8 +92,9 @@ export default {
         },
 
         confirmed() {
-            this.$axios.delete(this.deleteUrl)
-                .then(response => {
+            this.$axios
+                .delete(this.deleteUrl)
+                .then((response) => {
                     this.redirectFromServer = data_get(response, 'data.redirect');
                     this.success();
                 })
@@ -114,7 +120,7 @@ export default {
 
         cancel() {
             this.deleting = false;
-        }
-    }
-}
+        },
+    },
+};
 </script>
diff --git a/resources/js/components/fieldsets/FieldsetResetter.vue b/resources/js/components/fieldsets/FieldsetResetter.vue
index 496982f9eb..70120d0d87 100644
--- a/resources/js/components/fieldsets/FieldsetResetter.vue
+++ b/resources/js/components/fieldsets/FieldsetResetter.vue
@@ -13,30 +13,29 @@
 
 <script>
 export default {
-
     props: {
         resource: {
-            type: Object
+            type: Object,
         },
         resourceTitle: {
-            type: String
+            type: String,
         },
         route: {
             type: String,
         },
         redirect: {
-            type: String
+            type: String,
         },
         reload: {
-            type: Boolean
-        }
+            type: Boolean,
+        },
     },
 
     data() {
         return {
             resetting: false,
             redirectFromServer: null,
-        }
+        };
     },
 
     computed: {
@@ -45,7 +44,7 @@ export default {
         },
 
         modalTitle() {
-            return __('Reset :resource', {resource: this.title});
+            return __('Reset :resource', { resource: this.title });
         },
 
         modalBody() {
@@ -54,7 +53,7 @@ export default {
 
         resetUrl() {
             let url = data_get(this.resource, 'reset_url', this.route);
-            if (! url) console.error('FieldsetResetter cannot find reset url');
+            if (!url) console.error('FieldsetResetter cannot find reset url');
             return url;
         },
 
@@ -69,8 +68,9 @@ export default {
         },
 
         confirmed() {
-            this.$axios.delete(this.resetUrl)
-                .then(response => {
+            this.$axios
+                .delete(this.resetUrl)
+                .then((response) => {
                     this.redirectFromServer = data_get(response, 'data.redirect');
                     this.success();
                 })
@@ -96,7 +96,7 @@ export default {
 
         cancel() {
             this.resetting = false;
-        }
-    }
-}
+        },
+    },
+};
 </script>
diff --git a/resources/js/components/fieldsets/Listing.vue b/resources/js/components/fieldsets/Listing.vue
index 11c30ccf0c..e895860d6e 100644
--- a/resources/js/components/fieldsets/Listing.vue
+++ b/resources/js/components/fieldsets/Listing.vue
@@ -1,6 +1,6 @@
 <template>
     <data-list :visible-columns="columns" :columns="columns" :rows="rows" v-slot="{ filteredRows: rows }">
-        <div class="card overflow-hidden p-0 relative">
+        <div class="card relative overflow-hidden p-0">
             <div class="overflow-x-auto overflow-y-hidden">
                 <data-list-table>
                     <template #cell-title="{ row: fieldset }">
@@ -18,11 +18,7 @@
                                 class="warning"
                                 @click="$refs[`resetter_${fieldset.id}`].confirm()"
                             >
-                                <fieldset-resetter
-                                    :ref="`resetter_${fieldset.id}`"
-                                    :resource="fieldset"
-                                    :reload="true"
-                                >
+                                <fieldset-resetter :ref="`resetter_${fieldset.id}`" :resource="fieldset" :reload="true">
                                 </fieldset-resetter>
                             </dropdown-item>
                             <dropdown-item
@@ -34,7 +30,8 @@
                                 <fieldset-deleter
                                     :ref="`deleter_${fieldset.id}`"
                                     :resource="fieldset"
-                                    @deleted="removeRow(fieldset)">
+                                    @deleted="removeRow(fieldset)"
+                                >
                                 </fieldset-deleter>
                             </dropdown-item>
                         </dropdown-list>
@@ -51,12 +48,11 @@ import FieldsetDeleter from './FieldsetDeleter.vue';
 import FieldsetResetter from './FieldsetResetter.vue';
 
 export default {
-
     mixins: [Listing],
 
     components: {
         FieldsetDeleter,
-        FieldsetResetter
+        FieldsetResetter,
     },
 
     props: ['initialRows'],
@@ -68,8 +64,8 @@ export default {
                 { label: __('Title'), field: 'title' },
                 { label: __('Handle'), field: 'handle', width: '25%' },
                 { label: __('Fields'), field: 'fields', width: '15%' },
-            ]
-        }
-    }
-}
+            ],
+        };
+    },
+};
 </script>
diff --git a/resources/js/components/fieldtypes/ArrayFieldtype.vue b/resources/js/components/fieldtypes/ArrayFieldtype.vue
index 553f5108e6..3b05c02c5b 100644
--- a/resources/js/components/fieldtypes/ArrayFieldtype.vue
+++ b/resources/js/components/fieldtypes/ArrayFieldtype.vue
@@ -1,27 +1,32 @@
 <template>
     <div class="array-fieldtype-container">
-
         <div v-if="isSingle" class="flex items-center">
             <div class="input-group">
                 <div class="input-group-prepend flex items-center">
-                     <select class="bg-transparent appearance-none shadow-none outline-none border-0 text-sm" @input="setKey($event.target.value)">
+                    <select
+                        class="appearance-none border-0 bg-transparent text-sm shadow-none outline-none"
+                        @input="setKey($event.target.value)"
+                    >
                         <option
                             v-for="(element, index) in keyedData"
                             v-text="keys[element.key] || element.key"
                             :key="element._id"
                             :value="element.key"
-                            :selected="element.key === selectedKey" />
+                            :selected="element.key === selectedKey"
+                        />
                     </select>
-                    <svg-icon name="micro/chevron-down-xs" class="w-2 rtl:mr-2 ltr:ml-2" />
+                    <svg-icon name="micro/chevron-down-xs" class="w-2 ltr:ml-2 rtl:mr-2" />
                 </div>
-                    <input
-                        type="text"
-                        class="input-text"
-                        v-for="(element, index) in keyedData"
-                        :key="element._id"
-                        v-if="element.key === selectedKey"
-                        :id="fieldId+'__'+element.key" v-model="data[index].value" :readonly="isReadOnly"
-                    />
+                <input
+                    type="text"
+                    class="input-text"
+                    v-for="(element, index) in keyedData"
+                    :key="element._id"
+                    v-if="element.key === selectedKey"
+                    :id="fieldId + '__' + element.key"
+                    v-model="data[index].value"
+                    :readonly="isReadOnly"
+                />
             </div>
         </div>
 
@@ -29,9 +34,17 @@
             <table class="array-table">
                 <tbody>
                     <tr v-if="data" v-for="(element, index) in keyedData" :key="element._id">
-                        <th class="w-1/4"><label :for="fieldId+'__'+element.key">{{ keys[element.key] || element.key }}</label></th>
+                        <th class="w-1/4">
+                            <label :for="fieldId + '__' + element.key">{{ keys[element.key] || element.key }}</label>
+                        </th>
                         <td>
-                            <input type="text" class="input-text-minimal" :id="fieldId+'__'+element.key" v-model="data[index].value" :readonly="isReadOnly" />
+                            <input
+                                type="text"
+                                class="input-text-minimal"
+                                :id="fieldId + '__' + element.key"
+                                v-model="data[index].value"
+                                :readonly="isReadOnly"
+                            />
                         </td>
                     </tr>
                 </tbody>
@@ -61,13 +74,27 @@
                             <tr class="sortable-row" v-for="(element, index) in data" :key="element._id">
                                 <td class="sortable-handle table-drag-handle" v-if="!isReadOnly"></td>
                                 <td>
-                                    <input type="text" class="input-text font-bold" v-model="element.key" :readonly="isReadOnly" />
+                                    <input
+                                        type="text"
+                                        class="input-text font-bold"
+                                        v-model="element.key"
+                                        :readonly="isReadOnly"
+                                    />
                                 </td>
                                 <td>
-                                    <input type="text" class="input-text" v-model="element.value" :readonly="isReadOnly" />
+                                    <input
+                                        type="text"
+                                        class="input-text"
+                                        v-model="element.value"
+                                        :readonly="isReadOnly"
+                                    />
                                 </td>
                                 <td class="row-controls" v-if="!isReadOnly">
-                                    <a @click="deleteOrConfirm(index)" class="inline opacity-25 text-lg antialiased hover:opacity-75">&times;</a>
+                                    <a
+                                        @click="deleteOrConfirm(index)"
+                                        class="inline text-lg antialiased opacity-25 hover:opacity-75"
+                                        >&times;</a
+                                    >
                                 </td>
                             </tr>
                         </tbody>
@@ -90,7 +117,6 @@
                 </confirmation-modal>
             </div>
         </template>
-
     </div>
 </template>
 
@@ -99,34 +125,33 @@ import Fieldtype from './Fieldtype.vue';
 import { SortableList, SortableItem, SortableHelpers } from '../sortable/Sortable';
 
 export default {
-
     mixins: [Fieldtype, SortableHelpers],
 
     components: {
         SortableList,
-        SortableItem
+        SortableItem,
     },
 
     data() {
         return {
             data: this.objectToSortable(this.value || []),
-            selectedKey:  Object.keys(this.value)[0],
-            deleting: false
-        }
+            selectedKey: Object.keys(this.value)[0],
+            deleting: false,
+        };
     },
 
     watch: {
         data: {
             deep: true,
-            handler (data) {
+            handler(data) {
                 this.updateDebounced(this.sortableToObject(data));
-            }
+            },
         },
 
         value(value) {
             if (JSON.stringify(value) == JSON.stringify(this.sortableToObject(this.data))) return;
             this.data = this.objectToSortable(value);
-        }
+        },
     },
 
     computed: {
@@ -139,7 +164,7 @@ export default {
         },
 
         isDynamic() {
-            return ! this.isKeyed;
+            return !this.isKeyed;
         },
 
         isSingle() {
@@ -147,7 +172,7 @@ export default {
         },
 
         keyedData() {
-            return this.data.filter(element => this.keys.hasOwnProperty(element.key));
+            return this.data.filter((element) => this.keys.hasOwnProperty(element.key));
         },
 
         maxItems() {
@@ -175,14 +200,18 @@ export default {
         },
 
         replicatorPreview() {
-            if (! this.showFieldPreviews || ! this.config.replicator_preview) return;
-
-            return _.reduce(this.value, (carry, value, key) => {
-                let str = `${key}: ${value}`;
-                if (carry) str = carry + ', ' + str;
-                return str;
-            }, '');
-        }
+            if (!this.showFieldPreviews || !this.config.replicator_preview) return;
+
+            return _.reduce(
+                this.value,
+                (carry, value, key) => {
+                    let str = `${key}: ${value}`;
+                    if (carry) str = carry + ', ' + str;
+                    return str;
+                },
+                '',
+            );
+        },
     },
 
     methods: {
@@ -216,9 +245,8 @@ export default {
         },
 
         setKey(key) {
-            this.selectedKey = key
-        }
-    }
-
-}
+            this.selectedKey = key;
+        },
+    },
+};
 </script>
diff --git a/resources/js/components/fieldtypes/AssetFolderFieldtype.vue b/resources/js/components/fieldtypes/AssetFolderFieldtype.vue
index 7a859e6aa2..dec0e553e9 100644
--- a/resources/js/components/fieldtypes/AssetFolderFieldtype.vue
+++ b/resources/js/components/fieldtypes/AssetFolderFieldtype.vue
@@ -15,24 +15,23 @@
 import Fieldtype from './Fieldtype.vue';
 
 export default {
-
     mixins: [Fieldtype],
 
     inject: ['storeName'],
 
     computed: {
-
         container() {
             return data_get(this.$store.state.publish[this.storeName].values.container, '0', this.config.container);
         },
 
         relationshipMeta() {
-            return {...this.meta, ...{
-                getBaseSelectionsUrlParameters: { container: this.container }
-            }};
-        }
-
-    }
-
+            return {
+                ...this.meta,
+                ...{
+                    getBaseSelectionsUrlParameters: { container: this.container },
+                },
+            };
+        },
+    },
 };
 </script>
diff --git a/resources/js/components/fieldtypes/ButtonGroupFieldtype.vue b/resources/js/components/fieldtypes/ButtonGroupFieldtype.vue
index a0f32035a1..85fecd3575 100644
--- a/resources/js/components/fieldtypes/ButtonGroupFieldtype.vue
+++ b/resources/js/components/fieldtypes/ButtonGroupFieldtype.vue
@@ -1,7 +1,8 @@
 <template>
-    <div class="button-group-fieldtype-wrapper" :class="{'inline-mode': config.inline}">
+    <div class="button-group-fieldtype-wrapper" :class="{ 'inline-mode': config.inline }">
         <div class="btn-group" ref="buttonGroup">
-            <button class="btn px-4"
+            <button
+                class="btn px-4"
                 v-for="(option, $index) in options"
                 :key="$index"
                 ref="button"
@@ -10,7 +11,7 @@
                 @click="updateSelectedOption(option.value)"
                 :value="option.value"
                 :disabled="isReadOnly"
-                :class="{'active': value == option.value}"
+                :class="{ active: value == option.value }"
                 v-text="option.label || option.value"
             />
         </div>
@@ -19,7 +20,7 @@
 
 <script>
 import Fieldtype from './Fieldtype.vue';
-import HasInputOptions from './HasInputOptions.js'
+import HasInputOptions from './HasInputOptions.js';
 import ResizeObserver from 'resize-observer-polyfill';
 
 export default {
@@ -28,7 +29,7 @@ export default {
     data() {
         return {
             resizeObserver: null,
-        }
+        };
     },
 
     mounted() {
@@ -45,15 +46,14 @@ export default {
         },
 
         replicatorPreview() {
-            if (! this.showFieldPreviews || ! this.config.replicator_preview) return;
+            if (!this.showFieldPreviews || !this.config.replicator_preview) return;
 
-            var option = _.findWhere(this.options, {value: this.value});
-            return (option) ? option.label : this.value;
+            var option = _.findWhere(this.options, { value: this.value });
+            return option ? option.label : this.value;
         },
     },
 
     methods: {
-
         updateSelectedOption(newValue) {
             this.update(this.value == newValue && this.config.clearable ? null : newValue);
         },
@@ -72,15 +72,14 @@ export default {
 
             node.classList.remove('btn-vertical');
 
-            if(lastEl.offsetTop > node.clientTop) {
+            if (lastEl.offsetTop > node.clientTop) {
                 node.classList.add('btn-vertical');
             }
         },
 
         focus() {
             this.$refs.button[0].focus();
-        }
-
-    }
+        },
+    },
 };
 </script>
diff --git a/resources/js/components/fieldtypes/CheckboxesFieldtype.vue b/resources/js/components/fieldtypes/CheckboxesFieldtype.vue
index 04d252f251..6560ba0d2f 100644
--- a/resources/js/components/fieldtypes/CheckboxesFieldtype.vue
+++ b/resources/js/components/fieldtypes/CheckboxesFieldtype.vue
@@ -1,13 +1,14 @@
 <template>
-    <div class="checkboxes-fieldtype-wrapper"  :class="{'inline-mode': config.inline}">
+    <div class="checkboxes-fieldtype-wrapper" :class="{ 'inline-mode': config.inline }">
         <div class="option" v-for="(option, $index) in options" :key="$index">
             <label>
-                <input type="checkbox"
-                       ref="checkbox"
-                       :name="name + '[]'"
-                       :value="option.value"
-                       :disabled="isReadOnly"
-                       v-model="values"
+                <input
+                    type="checkbox"
+                    ref="checkbox"
+                    :name="name + '[]'"
+                    :value="option.value"
+                    :disabled="isReadOnly"
+                    v-model="values"
                 />
                 {{ option.label || option.value }}
             </label>
@@ -17,16 +18,15 @@
 
 <script>
 import Fieldtype from './Fieldtype.vue';
-import HasInputOptions from './HasInputOptions.js'
+import HasInputOptions from './HasInputOptions.js';
 
 export default {
-
     mixins: [Fieldtype, HasInputOptions],
 
     data() {
         return {
-            values: this.value || []
-        }
+            values: this.value || [],
+        };
     },
 
     computed: {
@@ -35,17 +35,18 @@ export default {
         },
 
         replicatorPreview() {
-            if (! this.showFieldPreviews || ! this.config.replicator_preview) return;
-
-            return this.values.map(value => {
-                const option = _.findWhere(this.options, { value });
-                return option ? option.label : value;
-            }).join(', ');
+            if (!this.showFieldPreviews || !this.config.replicator_preview) return;
+
+            return this.values
+                .map((value) => {
+                    const option = _.findWhere(this.options, { value });
+                    return option ? option.label : value;
+                })
+                .join(', ');
         },
     },
 
     watch: {
-
         values(values, oldValues) {
             values = this.sortValues(values);
 
@@ -56,12 +57,10 @@ export default {
 
         value(value) {
             this.values = this.sortValues(value);
-        }
-
+        },
     },
 
     methods: {
-
         focus() {
             this.$refs.checkbox[0].focus();
         },
@@ -69,11 +68,8 @@ export default {
         sortValues(values) {
             if (!values) return [];
 
-            return this.options
-                .filter(opt => values.includes(opt.value))
-                .map(opt => opt.value);
-        }
-
-    }
+            return this.options.filter((opt) => values.includes(opt.value)).map((opt) => opt.value);
+        },
+    },
 };
 </script>
diff --git a/resources/js/components/fieldtypes/CodeFieldtype.vue b/resources/js/components/fieldtypes/CodeFieldtype.vue
index b983791609..3e21986cd6 100644
--- a/resources/js/components/fieldtypes/CodeFieldtype.vue
+++ b/resources/js/components/fieldtypes/CodeFieldtype.vue
@@ -1,72 +1,82 @@
 <template>
-
-<portal name="code-fullscreen" :disabled="!fullScreenMode" target-class="code-fieldtype">
-<element-container @resized="refresh">
-    <div class="code-fieldtype-container" :class="[themeClass, {'code-fullscreen': fullScreenMode }]">
-        <publish-field-fullscreen-header
-            v-if="fullScreenMode"
-            :title="config.display"
-            :field-actions="fieldActions"
-            @close="toggleFullscreen">
-            <div class="code-fieldtype-toolbar-fullscreen">
-                <div>
-                    <select-input v-if="config.mode_selectable" :options="modes" v-model="mode" :is-read-only="isReadOnly" class="text-xs leading-none" />
-                    <div v-else v-text="modeLabel" class="text-xs font-mono text-gray-700"></div>
+    <portal name="code-fullscreen" :disabled="!fullScreenMode" target-class="code-fieldtype">
+        <element-container @resized="refresh">
+            <div class="code-fieldtype-container" :class="[themeClass, { 'code-fullscreen': fullScreenMode }]">
+                <publish-field-fullscreen-header
+                    v-if="fullScreenMode"
+                    :title="config.display"
+                    :field-actions="fieldActions"
+                    @close="toggleFullscreen"
+                >
+                    <div class="code-fieldtype-toolbar-fullscreen">
+                        <div>
+                            <select-input
+                                v-if="config.mode_selectable"
+                                :options="modes"
+                                v-model="mode"
+                                :is-read-only="isReadOnly"
+                                class="text-xs leading-none"
+                            />
+                            <div v-else v-text="modeLabel" class="font-mono text-xs text-gray-700"></div>
+                        </div>
+                    </div>
+                </publish-field-fullscreen-header>
+                <div class="code-fieldtype-toolbar" v-if="!fullScreenMode">
+                    <div>
+                        <select-input
+                            v-if="config.mode_selectable"
+                            :options="modes"
+                            v-model="mode"
+                            :is-read-only="isReadOnly"
+                            class="text-xs leading-none"
+                        />
+                        <div v-else v-text="modeLabel" class="font-mono text-xs text-gray-700"></div>
+                    </div>
                 </div>
+                <div ref="codemirror"></div>
             </div>
-        </publish-field-fullscreen-header>
-        <div class="code-fieldtype-toolbar" v-if="!fullScreenMode">
-            <div>
-                <select-input v-if="config.mode_selectable" :options="modes" v-model="mode" :is-read-only="isReadOnly" class="text-xs leading-none" />
-                <div v-else v-text="modeLabel" class="text-xs font-mono text-gray-700"></div>
-            </div>
-        </div>
-        <div ref="codemirror"></div>
-    </div>
-</element-container>
-</portal>
-
+        </element-container>
+    </portal>
 </template>
 
 <script>
 import Fieldtype from './Fieldtype.vue';
-import CodeMirror from 'codemirror'
-import { markRaw } from 'vue'
+import CodeMirror from 'codemirror';
+import { markRaw } from 'vue';
 
 // Addons
-import 'codemirror/addon/edit/matchbrackets'
-import 'codemirror/addon/display/fullscreen'
-import 'codemirror/addon/display/rulers'
+import 'codemirror/addon/edit/matchbrackets';
+import 'codemirror/addon/display/fullscreen';
+import 'codemirror/addon/display/rulers';
 
 // Keymaps
-import 'codemirror/keymap/sublime'
-import 'codemirror/keymap/vim'
+import 'codemirror/keymap/sublime';
+import 'codemirror/keymap/vim';
 
 // Modes
-import 'codemirror/mode/css/css'
-import 'codemirror/mode/clike/clike'
-import 'codemirror/mode/diff/diff'
-import 'codemirror/mode/go/go'
-import 'codemirror/mode/gfm/gfm'
-import 'codemirror/mode/handlebars/handlebars'
-import 'codemirror/mode/haml/haml'
-import 'codemirror/mode/htmlmixed/htmlmixed'
-import 'codemirror/mode/javascript/javascript'
-import 'codemirror/mode/markdown/markdown'
-import 'codemirror/mode/nginx/nginx'
-import 'codemirror/mode/php/php'
-import 'codemirror/mode/python/python'
-import 'codemirror/mode/ruby/ruby'
-import 'codemirror/mode/shell/shell'
-import 'codemirror/mode/sql/sql'
-import 'codemirror/mode/twig/twig'
-import 'codemirror/mode/vue/vue'
-import 'codemirror/mode/xml/xml'
-import 'codemirror/mode/yaml/yaml'
-import 'codemirror/mode/yaml-frontmatter/yaml-frontmatter'
+import 'codemirror/mode/css/css';
+import 'codemirror/mode/clike/clike';
+import 'codemirror/mode/diff/diff';
+import 'codemirror/mode/go/go';
+import 'codemirror/mode/gfm/gfm';
+import 'codemirror/mode/handlebars/handlebars';
+import 'codemirror/mode/haml/haml';
+import 'codemirror/mode/htmlmixed/htmlmixed';
+import 'codemirror/mode/javascript/javascript';
+import 'codemirror/mode/markdown/markdown';
+import 'codemirror/mode/nginx/nginx';
+import 'codemirror/mode/php/php';
+import 'codemirror/mode/python/python';
+import 'codemirror/mode/ruby/ruby';
+import 'codemirror/mode/shell/shell';
+import 'codemirror/mode/sql/sql';
+import 'codemirror/mode/twig/twig';
+import 'codemirror/mode/vue/vue';
+import 'codemirror/mode/xml/xml';
+import 'codemirror/mode/yaml/yaml';
+import 'codemirror/mode/yaml-frontmatter/yaml-frontmatter';
 
 export default {
-
     mixins: [Fieldtype],
 
     data() {
@@ -101,7 +111,7 @@ export default {
             ],
             mode: this.value.mode || this.config.mode,
             fullScreenMode: false,
-        }
+        };
     },
 
     computed: {
@@ -109,13 +119,13 @@ export default {
             return _.findWhere(this.modes, { value: this.mode }).label || this.mode;
         },
         exactTheme() {
-            return (this.config.theme === 'light') ? 'default' : 'material'
+            return this.config.theme === 'light' ? 'default' : 'material';
         },
         themeClass() {
             return 'theme-' + this.config.theme;
         },
         replicatorPreview() {
-            if (! this.showFieldPreviews || ! this.config.replicator_preview) return;
+            if (!this.showFieldPreviews || !this.config.replicator_preview) return;
 
             return this.value.code ? truncate(this.value.code, 60) : '';
         },
@@ -127,9 +137,7 @@ export default {
                 return [];
             }
 
-            let rulerColor = (this.config.theme === 'light')
-                ? '#d1d5db'
-                : '#546e7a';
+            let rulerColor = this.config.theme === 'light' ? '#d1d5db' : '#546e7a';
 
             return Object.entries(this.config.rulers).map(([column, style]) => {
                 let lineStyle = style === 'dashed' ? 'dashed' : 'solid';
@@ -145,7 +153,7 @@ export default {
             return [
                 {
                     title: __('Toggle Fullscreen Mode'),
-                    icon: ({ vm }) => vm.fullScreenMode ? 'shrink-all' : 'expand-bold',
+                    icon: ({ vm }) => (vm.fullScreenMode ? 'shrink-all' : 'expand-bold'),
                     quick: true,
                     visibleWhenReadOnly: true,
                     run: this.toggleFullscreen,
@@ -157,7 +165,7 @@ export default {
     watch: {
         value(value, oldValue) {
             if (value.code == this.codemirror.doc.getValue()) return;
-            if (! value.code) value.code = '';
+            if (!value.code) value.code = '';
 
             this.codemirror.doc.setValue(value.code);
         },
@@ -166,7 +174,7 @@ export default {
         },
         mode(mode) {
             this.codemirror.setOption('mode', mode);
-            this.updateDebounced({code: this.value.code, mode: this.mode});
+            this.updateDebounced({ code: this.value.code, mode: this.mode });
         },
     },
 
@@ -179,36 +187,37 @@ export default {
             this.codemirror.focus();
         },
         refresh() {
-            this.$nextTick(function() {
+            this.$nextTick(function () {
                 this.codemirror.refresh();
-            })
+            });
         },
         initCodeMirror() {
-            this.codemirror = markRaw(CodeMirror(this.$refs.codemirror, {
-                value: this.value.code || '',
-                mode: this.mode,
-                direction: document.querySelector('html').getAttribute('dir') ?? 'ltr',
-                addModeClass: true,
-                keyMap: this.config.key_map,
-                tabSize: this.config.indent_size,
-                indentWithTabs: this.config.indent_type !== 'spaces',
-                lineNumbers: this.config.line_numbers,
-                lineWrapping: this.config.line_wrapping,
-                matchBrackets: true,
-                readOnly: this.readOnlyOption,
-                theme: this.exactTheme,
-                inputStyle: 'contenteditable',
-                rulers: this.rulers,
-            }));
+            this.codemirror = markRaw(
+                CodeMirror(this.$refs.codemirror, {
+                    value: this.value.code || '',
+                    mode: this.mode,
+                    direction: document.querySelector('html').getAttribute('dir') ?? 'ltr',
+                    addModeClass: true,
+                    keyMap: this.config.key_map,
+                    tabSize: this.config.indent_size,
+                    indentWithTabs: this.config.indent_type !== 'spaces',
+                    lineNumbers: this.config.line_numbers,
+                    lineWrapping: this.config.line_wrapping,
+                    matchBrackets: true,
+                    readOnly: this.readOnlyOption,
+                    theme: this.exactTheme,
+                    inputStyle: 'contenteditable',
+                    rulers: this.rulers,
+                }),
+            );
 
             this.codemirror.on('change', (cm) => {
-                this.updateDebounced({code: cm.doc.getValue(), mode: this.mode});
+                this.updateDebounced({ code: cm.doc.getValue(), mode: this.mode });
             });
 
             this.codemirror.on('focus', () => this.$emit('focus'));
             this.codemirror.on('blur', () => this.$emit('blur'));
 
-
             // Refresh to ensure CodeMirror visible and the proper size
             // Most applicable when loaded by another field like Bard
             this.refresh();
@@ -225,6 +234,6 @@ export default {
         toggleFullscreen() {
             this.fullScreenMode = !this.fullScreenMode;
         },
-    }
+    },
 };
 </script>
diff --git a/resources/js/components/fieldtypes/ColorFieldtype.vue b/resources/js/components/fieldtypes/ColorFieldtype.vue
index 442f0a8a21..74d0618a9b 100644
--- a/resources/js/components/fieldtypes/ColorFieldtype.vue
+++ b/resources/js/components/fieldtypes/ColorFieldtype.vue
@@ -1,16 +1,13 @@
 <template>
-    <div class=" flex items-center">
+    <div class="flex items-center">
         <div class="input-group w-auto" :class="{ 'max-w-[130px]': config.allow_any }">
             <popover name="swatches" class="color-picker" placement="bottom-start">
                 <template #trigger>
-                    <div
-                        class="input-group-prepend px-px"
-                        v-tooltip="__('Pick Color')"
-                    >
+                    <div class="input-group-prepend px-px" v-tooltip="__('Pick Color')">
                         <div class="relative flex items-center outline-none">
-                            <div class="inline-block cursor-pointer rounded m-0 p-[2px]">
+                            <div class="m-0 inline-block cursor-pointer rounded p-[2px]">
                                 <div
-                                    class="rounded-sm w-8 h-8"
+                                    class="h-8 w-8 rounded-sm"
                                     :class="{ 'border dark:border-dark-900': !value, 'cursor-not-allowed': isReadOnly }"
                                     :style="{ 'background-color': value }"
                                 />
@@ -23,16 +20,29 @@
                         <div v-if="config.swatches.length" class="grid grid-cols-4 gap-3">
                             <div
                                 v-for="swatch in config.swatches"
-                                class="w-10 h-10 inline-block cursor-pointer rounded flex border border-gray-400"
+                                class="inline-block flex h-10 w-10 cursor-pointer rounded border border-gray-400"
                                 :style="{ 'background-color': swatch }"
-                                @click="() => { update(swatch); closePopover(); }"
+                                @click="
+                                    () => {
+                                        update(swatch);
+                                        closePopover();
+                                    }
+                                "
                             >
-                                <div
-                                    v-if="swatch === value"
-                                    class="flex items-center justify-center h-full w-full"
-                                >
-                                    <div class="w-5 h-5 rounded-full bg-black/10 flex items-center justify-center">
-                                        <svg version="1.1" role="presentation" width="12" height="12" viewBox="0 0 1792 1792" class="text-white fill-current"><path d="M1671 566q0 40-28 68l-724 724-136 136q-28 28-68 28t-68-28l-136-136-362-362q-28-28-28-68t28-68l136-136q28-28 68-28t68 28l294 295 656-657q28-28 68-28t68 28l136 136q28 28 28 68z" ></path></svg>
+                                <div v-if="swatch === value" class="flex h-full w-full items-center justify-center">
+                                    <div class="flex h-5 w-5 items-center justify-center rounded-full bg-black/10">
+                                        <svg
+                                            version="1.1"
+                                            role="presentation"
+                                            width="12"
+                                            height="12"
+                                            viewBox="0 0 1792 1792"
+                                            class="fill-current text-white"
+                                        >
+                                            <path
+                                                d="M1671 566q0 40-28 68l-724 724-136 136q-28 28-68 28t-68-28l-136-136-362-362q-28-28-28-68t28-68l136-136q28-28 68-28t68 28l294 295 656-657q28-28 68-28t68 28l136 136q28 28 28 68z"
+                                            ></path>
+                                        </svg>
                                     </div>
                                 </div>
                             </div>
@@ -44,7 +54,7 @@
                             :class="{ 'mt-5': config.swatches.length }"
                         >
                             <input
-                                class="h-10 w-full cursor-pointer input-text w-full rounded p-[2px] rtl:ml-2 ltr:mr-2"
+                                class="input-text h-10 w-full cursor-pointer rounded p-[2px] ltr:mr-2 rtl:ml-2"
                                 type="color"
                                 :value="customColor"
                                 @input="customColorSelected"
@@ -52,7 +62,12 @@
                             <button
                                 class="btn btn-primary h-10 px-2"
                                 v-text="__('OK')"
-                                @click="() => { commitCustomColor(); closePopover() }"
+                                @click="
+                                    () => {
+                                        commitCustomColor();
+                                        closePopover();
+                                    }
+                                "
                             />
                         </div>
                     </div>
@@ -71,44 +86,40 @@
             />
         </div>
 
-        <button v-if="value" class="btn-close rtl:mr-1 ltr:ml-1" :aria-label="__('Reset')" @click="resetColor">&times;</button>
+        <button v-if="value" class="btn-close ltr:ml-1 rtl:mr-1" :aria-label="__('Reset')" @click="resetColor">
+            &times;
+        </button>
     </div>
 </template>
 
 <script>
 import Fieldtype from './Fieldtype.vue';
 export default {
-
     mixins: [Fieldtype],
 
-    data () {
+    data() {
         return {
-            customColor: this.value
-        }
+            customColor: this.value,
+        };
     },
 
     watch: {
-
         value(value) {
             this.customColor = value;
         },
-
     },
 
     computed: {
-
         replicatorPreview() {
-            if (! this.showFieldPreviews || ! this.config.replicator_preview) return;
+            if (!this.showFieldPreviews || !this.config.replicator_preview) return;
 
             return this.value
                 ? replicatorPreviewHtml(`<span class="little-dot" style="background-color:${this.value}"></span>`)
                 : null;
-        }
-
+        },
     },
 
     methods: {
-
         customColorSelected(event) {
             this.customColor = event.target.value;
         },
@@ -134,8 +145,7 @@ export default {
                 }
                 return `#${color}`;
             }
-        }
-    }
-
+        },
+    },
 };
 </script>
diff --git a/resources/js/components/fieldtypes/DateFieldtype.vue b/resources/js/components/fieldtypes/DateFieldtype.vue
index c9dcb2c491..d79b70f6c7 100644
--- a/resources/js/components/fieldtypes/DateFieldtype.vue
+++ b/resources/js/components/fieldtypes/DateFieldtype.vue
@@ -1,14 +1,17 @@
 <template>
     <div class="datetime min-w-[145px]">
-
-        <button type="button" class="btn flex mb-2 md:mb-0 items-center rtl:pr-3 ltr:pl-3" v-if="!isReadOnly && config.inline === false && !hasDate" @click="addDate" tabindex="0">
-            <svg-icon name="light/calendar" class="w-4 h-4 rtl:ml-2 ltr:mr-2"></svg-icon>
-    		{{ __('Add Date') }}
-    	</button>
-
-        <div v-if="hasDate || config.inline"
-            class="date-time-container flex flex-col @sm:flex-row gap-2"
+        <button
+            type="button"
+            class="btn mb-2 flex items-center md:mb-0 ltr:pl-3 rtl:pr-3"
+            v-if="!isReadOnly && config.inline === false && !hasDate"
+            @click="addDate"
+            tabindex="0"
         >
+            <svg-icon name="light/calendar" class="h-4 w-4 ltr:mr-2 rtl:ml-2"></svg-icon>
+            {{ __('Add Date') }}
+        </button>
+
+        <div v-if="hasDate || config.inline" class="date-time-container flex flex-col gap-2 @sm:flex-row">
             <component
                 :is="pickerComponent"
                 v-bind="pickerProps"
@@ -18,7 +21,7 @@
             />
 
             <div v-if="config.time_enabled && !isRange" class="time-container time-fieldtype">
-				<time-fieldtype
+                <time-fieldtype
                     v-if="hasTime"
                     ref="time"
                     handle=""
@@ -29,10 +32,9 @@
                     :config="{}"
                     @input="setTime"
                 />
-			</div>
+            </div>
         </div>
     </div>
-
 </template>
 
 <script>
@@ -44,7 +46,6 @@ import RangeInline from './date/RangeInline.vue';
 import { useScreens } from 'vue-screen-utils';
 
 export default {
-
     components: {
         SinglePopover,
         SingleInline,
@@ -70,12 +71,11 @@ export default {
     data() {
         return {
             containerWidth: null,
-            focusedField: null
-        }
+            focusedField: null,
+        };
     },
 
     computed: {
-
         pickerComponent() {
             if (this.isRange) {
                 return this.usesPopover ? 'RangePopover' : 'RangeInline';
@@ -116,7 +116,7 @@ export default {
             return {
                 isReadOnly: this.isReadOnly,
                 bindings: this.commonDatePickerBindings,
-            }
+            };
         },
 
         datePickerValue() {
@@ -127,7 +127,7 @@ export default {
             // it will behave as local time. The date that comes from the server will be what
             // we expect. The time is handled separately by the nested time fieldtype.
             // https://github.com/statamic/cms/pull/6688
-            return this.value.date+'T00:00:00';
+            return this.value.date + 'T00:00:00';
         },
 
         commonDatePickerBindings() {
@@ -139,8 +139,8 @@ export default {
                         popover: {
                             label: __('Today'),
                         },
-                        dates: new Date()
-                    }
+                        dates: new Date(),
+                    },
                 ],
                 columns: this.screens({ default: 1, lg: this.config.columns }).value,
                 rows: this.screens({ default: 1, lg: this.config.rows }).value,
@@ -166,11 +166,15 @@ export default {
         },
 
         replicatorPreview() {
-            if (! this.showFieldPreviews || ! this.config.replicator_preview) return;
-            if (! this.value.date) return;
+            if (!this.showFieldPreviews || !this.config.replicator_preview) return;
+            if (!this.value.date) return;
 
             if (this.isRange) {
-                return this.$moment(this.value.date.start).format(this.displayFormat) + ' – ' + this.$moment(this.value.date.end).format(this.displayFormat);
+                return (
+                    this.$moment(this.value.date.start).format(this.displayFormat) +
+                    ' – ' +
+                    this.$moment(this.value.date.end).format(this.displayFormat)
+                );
             }
 
             let preview = this.$moment(this.value.date).format(this.displayFormat);
@@ -181,7 +185,6 @@ export default {
 
             return preview;
         },
-
     },
 
     created() {
@@ -198,9 +201,7 @@ export default {
         this.$events.$off(`container.${this.storeName}.saving`, this.triggerChangeOnFocusedField);
     },
 
-
     methods: {
-
         triggerChangeOnFocusedField() {
             if (!this.focusedField) return;
 
@@ -225,7 +226,6 @@ export default {
             const date = this.isRange ? { start: now, end: now } : now;
             this.update({ date, time: null });
         },
-
     },
 };
 </script>
diff --git a/resources/js/components/fieldtypes/DictionaryFields.vue b/resources/js/components/fieldtypes/DictionaryFields.vue
index 228634b65a..db07013d12 100644
--- a/resources/js/components/fieldtypes/DictionaryFields.vue
+++ b/resources/js/components/fieldtypes/DictionaryFields.vue
@@ -8,16 +8,12 @@
         @updated="update"
         v-slot="{ setFieldValue, setFieldMeta }"
     >
-        <publish-fields
-            :fields="fields"
-            @updated="setFieldValue"
-            @meta-updated="setFieldMeta"
-        />
+        <publish-fields :fields="fields" @updated="setFieldValue" @meta-updated="setFieldMeta" />
     </publish-container>
 </template>
 
 <script>
-import Fieldtype from "./Fieldtype.vue";
+import Fieldtype from './Fieldtype.vue';
 
 export default {
     mixins: [Fieldtype],
@@ -30,42 +26,44 @@ export default {
         },
 
         fields() {
-            return this.meta.type.fields.concat(this.meta.dictionaries[this.dictionary]?.fields || [])
+            return this.meta.type.fields.concat(this.meta.dictionaries[this.dictionary]?.fields || []);
         },
 
         blueprint() {
             return {
-                tabs: [{
-                    fields: this.fields
-                }]
-            }
+                tabs: [
+                    {
+                        fields: this.fields,
+                    },
+                ],
+            };
         },
 
         publishMeta() {
             return {
                 ...this.meta.type.meta,
-                ...this.meta.dictionaries[this.dictionary]?.meta
-            }
+                ...this.meta.dictionaries[this.dictionary]?.meta,
+            };
         },
 
         errors() {
             const state = this.$store.state.publish[this.storeName];
 
-            if (! state) {
+            if (!state) {
                 return {};
             }
 
-            let errors = {}
+            let errors = {};
 
             // Filter errors to only include those for this field, and remove the field path prefix
             // if there is one, then append it to the errors object.
             Object.entries(state.errors)
                 .filter(([key, value]) => key.startsWith(this.fieldPathPrefix || this.handle))
                 .forEach(([key, value]) => {
-                    errors[key.split('.').pop()] = value
-                })
+                    errors[key.split('.').pop()] = value;
+                });
 
-            return errors
+            return errors;
         },
     },
 
@@ -73,9 +71,9 @@ export default {
         dictionary(dictionary) {
             this.update({
                 type: dictionary,
-                ...this.meta.dictionaries[dictionary]?.defaults
-            })
+                ...this.meta.dictionaries[dictionary]?.defaults,
+            });
         },
     },
-}
+};
 </script>
diff --git a/resources/js/components/fieldtypes/DictionaryFieldtype.vue b/resources/js/components/fieldtypes/DictionaryFieldtype.vue
index aef80eb859..bca93c4b9a 100644
--- a/resources/js/components/fieldtypes/DictionaryFieldtype.vue
+++ b/resources/js/components/fieldtypes/DictionaryFieldtype.vue
@@ -19,7 +19,8 @@
             @focus="$emit('focus')"
             @search="search"
             @search:focus="$emit('focus')"
-            @search:blur="$emit('blur')">
+            @search:blur="$emit('blur')"
+        >
             <template #selected-option-container v-if="multiple"><i class="hidden"></i></template>
             <template #search="{ events, attributes }" v-if="multiple">
                 <input
@@ -28,7 +29,7 @@
                     type="search"
                     v-on="events"
                     v-bind="attributes"
-                >
+                />
             </template>
             <template #option="{ label }">
                 <div v-html="label" />
@@ -37,7 +38,10 @@
                 <div v-html="label" />
             </template>
             <template #no-options>
-                <div class="text-sm text-gray-700 rtl:text-right ltr:text-left py-2 px-4" v-text="__('No options to choose from.')" />
+                <div
+                    class="px-4 py-2 text-sm text-gray-700 ltr:text-left rtl:text-right"
+                    v-text="__('No options to choose from.')"
+                />
             </template>
             <template #footer="{ deselect }" v-if="multiple">
                 <sortable-list
@@ -49,9 +53,20 @@
                     @update:model-value="update"
                 >
                     <div class="vs__selected-options-outside flex flex-wrap">
-                        <span v-for="option in selectedOptions" :key="option.value" class="vs__selected mt-2 sortable-item" :class="{'invalid': option.invalid}">
+                        <span
+                            v-for="option in selectedOptions"
+                            :key="option.value"
+                            class="vs__selected sortable-item mt-2"
+                            :class="{ invalid: option.invalid }"
+                        >
                             <div v-html="option.label" />
-                            <button v-if="!readOnly" @click="deselect(option)" type="button" :aria-label="__('Deselect option')" class="vs__deselect">
+                            <button
+                                v-if="!readOnly"
+                                @click="deselect(option)"
+                                type="button"
+                                :aria-label="__('Deselect option')"
+                                class="vs__deselect"
+                            >
                                 <span>×</span>
                             </button>
                             <button v-else type="button" class="vs__deselect">
@@ -62,7 +77,7 @@
                 </sortable-list>
             </template>
         </v-select>
-        <div class="text-xs rtl:mr-2 ltr:ml-2 mt-3" :class="limitIndicatorColor" v-if="config.max_items > 1">
+        <div class="mt-3 text-xs ltr:ml-2 rtl:mr-2" :class="limitIndicatorColor" v-if="config.max_items > 1">
             <span v-text="currentLength"></span>/<span v-text="config.max_items"></span>
         </div>
     </div>
@@ -70,29 +85,28 @@
 
 <style scoped>
 .draggable-source--is-dragging {
-    @apply opacity-75 bg-transparent border-dashed
+    @apply border-dashed bg-transparent opacity-75;
 }
 </style>
 
 <script>
 import Fieldtype from './Fieldtype.vue';
-import HasInputOptions from './HasInputOptions.js'
+import HasInputOptions from './HasInputOptions.js';
 import { SortableList } from '../sortable/Sortable';
 import PositionsSelectOptions from '../../mixins/PositionsSelectOptions';
 
 export default {
-
     mixins: [Fieldtype, HasInputOptions, PositionsSelectOptions],
 
     components: {
-        SortableList
+        SortableList,
     },
 
     data() {
         return {
             options: {},
             selectedOptionData: this.meta.selectedOptions,
-        }
+        };
     },
 
     computed: {
@@ -107,19 +121,19 @@ export default {
                 selections = [selections];
             }
 
-            return selections.map(value => {
-                let option = this.selectedOptionData.find(option => option.value === value);
+            return selections.map((value) => {
+                let option = this.selectedOptionData.find((option) => option.value === value);
 
-                if (! option) return {value, label: value};
+                if (!option) return { value, label: value };
 
-                return {value: option.value, label: option.label, invalid: option.invalid};
+                return { value: option.value, label: option.label, invalid: option.invalid };
             });
         },
 
         replicatorPreview() {
-            if (! this.showFieldPreviews || ! this.config.replicator_preview) return;
+            if (!this.showFieldPreviews || !this.config.replicator_preview) return;
 
-            return this.selectedOptions.map(option => option.label).join(', ');
+            return this.selectedOptions.map((option) => option.label).join(', ');
         },
 
         limitReached() {
@@ -136,7 +150,7 @@ export default {
 
         currentLength() {
             if (this.value) {
-                return (typeof this.value == 'string') ? 1 : this.value.length;
+                return typeof this.value == 'string' ? 1 : this.value.length;
             }
 
             return 0;
@@ -168,12 +182,12 @@ export default {
 
         vueSelectUpdated(value) {
             if (this.multiple) {
-                this.update(value.map(v => v.value));
+                this.update(value.map((v) => v.value));
                 value.forEach((option) => this.selectedOptionData.push(option));
             } else {
                 if (value) {
-                    this.update(value.value)
-                    this.selectedOptionData.push(value)
+                    this.update(value.value);
+                    this.selectedOptionData.push(value);
                 } else {
                     this.update(null);
                 }
@@ -184,9 +198,9 @@ export default {
             params = {
                 config: this.configParameter,
                 ...params,
-            }
+            };
 
-            return this.$axios.get(this.meta.url, { params }).then(response => {
+            return this.$axios.get(this.meta.url, { params }).then((response) => {
                 this.options = response.data.data;
                 return Promise.resolve(response);
             });
@@ -195,8 +209,8 @@ export default {
         search: _.debounce(function (search, loading) {
             loading(true);
 
-            this.request({ search }).then(response => loading(false));
+            this.request({ search }).then((response) => loading(false));
         }, 300),
-    }
+    },
 };
 </script>
diff --git a/resources/js/components/fieldtypes/DictionaryIndexFieldtype.vue b/resources/js/components/fieldtypes/DictionaryIndexFieldtype.vue
index 99854153e1..9dd5cb7ded 100644
--- a/resources/js/components/fieldtypes/DictionaryIndexFieldtype.vue
+++ b/resources/js/components/fieldtypes/DictionaryIndexFieldtype.vue
@@ -6,7 +6,6 @@
 import IndexFieldtype from './IndexFieldtype.vue';
 
 export default {
-
     mixins: [IndexFieldtype],
 
     computed: {
diff --git a/resources/js/components/fieldtypes/FieldDisplayFieldtype.vue b/resources/js/components/fieldtypes/FieldDisplayFieldtype.vue
index 116184bb87..3e81e17761 100644
--- a/resources/js/components/fieldtypes/FieldDisplayFieldtype.vue
+++ b/resources/js/components/fieldtypes/FieldDisplayFieldtype.vue
@@ -1,6 +1,4 @@
 <template>
-
-
     <div class="flex items-center">
         <div class="input-group">
             <input
@@ -14,38 +12,31 @@
                 @keydown="$emit('keydown', $event)"
                 @focus="$emit('focus')"
                 @blur="$emit('blur')"
-            >
+            />
             <button
                 class="input-group-append flex items-center"
                 v-tooltip="hidden ? __('Hidden') : __('Visible')"
                 @click="toggleHidden"
             >
-                <svg-icon v-show="hidden" name="light/hidden" class="w-5 h-5 text-gray-600 dark:text-dark-200" />
-                <svg-icon v-show="!hidden" name="light/eye" class="w-5 h-5 " />
+                <svg-icon v-show="hidden" name="light/hidden" class="h-5 w-5 text-gray-600 dark:text-dark-200" />
+                <svg-icon v-show="!hidden" name="light/eye" class="h-5 w-5" />
             </button>
         </div>
     </div>
-
 </template>
 
 <script>
 import Fieldtype from './Fieldtype.vue';
 
 export default {
-
     mixins: [Fieldtype],
 
-    inject: [
-        'getFieldSettingsValue',
-        'updateFieldSettingsValue',
-    ],
+    inject: ['getFieldSettingsValue', 'updateFieldSettingsValue'],
 
     computed: {
-
         hidden() {
             return this.getFieldSettingsValue('hide_display');
-        }
-
+        },
     },
 
     mounted() {
@@ -53,12 +44,9 @@ export default {
     },
 
     methods: {
-
         toggleHidden() {
-            this.updateFieldSettingsValue('hide_display', ! this.hidden)
-        }
-
-    }
-
-}
+            this.updateFieldSettingsValue('hide_display', !this.hidden);
+        },
+    },
+};
 </script>
diff --git a/resources/js/components/fieldtypes/Fieldtype.vue b/resources/js/components/fieldtypes/Fieldtype.vue
index dc8c4779bd..d0bf58d260 100644
--- a/resources/js/components/fieldtypes/Fieldtype.vue
+++ b/resources/js/components/fieldtypes/Fieldtype.vue
@@ -4,40 +4,42 @@ import HasFieldActions from '../field-actions/HasFieldActions';
 export default {
     emits: ['update:value', 'focus', 'blur', 'meta-updated', 'replicator-preview-updated'],
 
-    mixins: [
-        HasFieldActions,
-    ],
+    mixins: [HasFieldActions],
 
     inject: {
         fieldActionStoreName: {
             from: 'storeName',
             default: null,
-        }
+        },
     },
 
     props: {
         value: {
-            required: true
+            required: true,
         },
         config: {
             type: Object,
-            default: () => { return {}; }
+            default: () => {
+                return {};
+            },
         },
         handle: {
             type: String,
-            required: true
+            required: true,
         },
         meta: {
             type: Object,
-            default: () => { return {}; }
+            default: () => {
+                return {};
+            },
         },
         readOnly: {
             type: Boolean,
-            default: false
+            default: false,
         },
         showFieldPreviews: {
             type: Boolean,
-            default: false
+            default: false,
         },
         namePrefix: String,
         fieldPathPrefix: String,
@@ -54,7 +56,7 @@ export default {
 
         updateMeta(value) {
             this.$emit('meta-updated', value);
-        }
+        },
     },
 
     computed: {
@@ -67,14 +69,16 @@ export default {
         },
 
         isReadOnly() {
-            return this.readOnly
-                || this.config.visibility === 'read_only'
-                || this.config.visibility === 'computed'
-                || false;
+            return (
+                this.readOnly ||
+                this.config.visibility === 'read_only' ||
+                this.config.visibility === 'computed' ||
+                false
+            );
         },
 
         replicatorPreview() {
-            if (! this.showFieldPreviews || ! this.config.replicator_preview) return;
+            if (!this.showFieldPreviews || !this.config.replicator_preview) return;
 
             return this.value;
         },
@@ -86,9 +90,9 @@ export default {
         },
 
         fieldId() {
-            let prefix = this.fieldPathPrefix ? this.fieldPathPrefix+'.' : '';
+            let prefix = this.fieldPathPrefix ? this.fieldPathPrefix + '.' : '';
 
-            return prefix+'field_'+this.config.handle;
+            return prefix + 'field_' + this.config.handle;
         },
 
         fieldActionPayload() {
@@ -106,21 +110,17 @@ export default {
                 storeName: this.fieldActionStoreName,
             };
         },
-
     },
 
     watch: {
-
         replicatorPreview: {
             immediate: true,
             handler(text) {
-                if (! this.showFieldPreviews || ! this.config.replicator_preview) return;
+                if (!this.showFieldPreviews || !this.config.replicator_preview) return;
 
                 this.$emit('replicator-preview-updated', text);
-            }
-        }
-
-    }
-
-}
+            },
+        },
+    },
+};
 </script>
diff --git a/resources/js/components/fieldtypes/FilesFieldtype.vue b/resources/js/components/fieldtypes/FilesFieldtype.vue
index 4a2961ac58..b64c187f71 100644
--- a/resources/js/components/fieldtypes/FilesFieldtype.vue
+++ b/resources/js/components/fieldtypes/FilesFieldtype.vue
@@ -1,7 +1,5 @@
 <template>
-
     <div class="assets-fieldtype">
-
         <uploader
             ref="uploader"
             :url="meta.uploadUrl"
@@ -13,14 +11,13 @@
             v-slot="{ dragging }"
         >
             <div class="assets-fieldtype-drag-container">
-
                 <div class="drag-notification" v-show="dragging">
-                    <svg-icon name="upload" class="h-8 w-8 rtl:ml-6 ltr:mr-6" />
+                    <svg-icon name="upload" class="h-8 w-8 ltr:mr-6 rtl:ml-6" />
                     <span>{{ __('Drop File to Upload') }}</span>
                 </div>
 
                 <div class="assets-fieldtype-picker py-4" :class="{ 'is-expanded': value.length }">
-                    <p class="asset-upload-control text-xs text-gray-600 rtl:mr-0 ltr:ml-0">
+                    <p class="asset-upload-control text-xs text-gray-600 ltr:ml-0 rtl:mr-0">
                         <button type="button" class="upload-text-button" @click.prevent="uploadFile">
                             {{ __('Upload file') }}
                         </button>
@@ -28,10 +25,7 @@
                     </p>
                 </div>
 
-                <uploads
-                    v-if="uploads.length"
-                    :uploads="uploads"
-                />
+                <uploads v-if="uploads.length" :uploads="uploads" />
 
                 <div v-if="value.length" class="asset-table-listing">
                     <table class="table-fixed">
@@ -39,25 +33,25 @@
                             <tr
                                 v-for="(file, i) in value"
                                 :key="file"
-                                class="asset-row bg-white dark:bg-dark-600 hover:bg-gray-100"
+                                class="asset-row bg-white hover:bg-gray-100 dark:bg-dark-600"
                             >
                                 <td class="flex items-center">
                                     <div
-                                        class="w-7 h-7 cursor-pointer whitespace-nowrap flex items-center justify-center"
+                                        class="flex h-7 w-7 cursor-pointer items-center justify-center whitespace-nowrap"
                                     >
                                         <file-icon :extension="getExtension(file)" />
                                     </div>
                                     <div
-                                        class="flex items-center flex-1 rtl:mr-2 ltr:ml-2 text-xs rtl:text-right ltr:text-left truncate"
+                                        class="flex flex-1 items-center truncate text-xs ltr:ml-2 ltr:text-left rtl:mr-2 rtl:text-right"
                                         v-text="file"
                                     />
                                 </td>
-                                <td class="p-0 w-8 rtl:text-left ltr:text-right align-middle">
+                                <td class="w-8 p-0 align-middle ltr:text-right rtl:text-left">
                                     <button
                                         @click="remove(i)"
-                                        class="flex items-center p-2 w-full h-full text-gray-600 dark:text-dark-150 hover:text-gray-950 dark:hover:text-dark-100"
+                                        class="flex h-full w-full items-center p-2 text-gray-600 hover:text-gray-950 dark:text-dark-150 dark:hover:text-dark-100"
                                     >
-                                        <svg-icon name="micro/trash" class="w-6 h-6" />
+                                        <svg-icon name="micro/trash" class="h-6 w-6" />
                                     </button>
                                 </td>
                             </tr>
@@ -67,7 +61,6 @@
             </div>
         </uploader>
     </div>
-
 </template>
 
 <script>
@@ -76,18 +69,17 @@ import Uploader from '../assets/Uploader.vue';
 import Uploads from '../assets/Uploads.vue';
 
 export default {
-
     mixins: [Fieldtype],
 
     components: {
         Uploader,
-        Uploads
+        Uploads,
     },
 
     data() {
         return {
             uploads: [],
-        }
+        };
     },
 
     computed: {
@@ -97,11 +89,10 @@ export default {
     },
 
     methods: {
-
         /**
          * When the uploader component has finished uploading a file.
          */
-         uploadComplete(file) {
+        uploadComplete(file) {
             this.value.push(file.id);
         },
 
@@ -133,7 +124,7 @@ export default {
 
         remove(index) {
             this.update([...this.value.slice(0, index), ...this.value.slice(index + 1)]);
-        }
-    }
-}
+        },
+    },
+};
 </script>
diff --git a/resources/js/components/fieldtypes/FloatFieldtype.vue b/resources/js/components/fieldtypes/FloatFieldtype.vue
index b49fa3d7ff..11ec9bab98 100644
--- a/resources/js/components/fieldtypes/FloatFieldtype.vue
+++ b/resources/js/components/fieldtypes/FloatFieldtype.vue
@@ -17,10 +17,8 @@
 import Fieldtype from './Fieldtype.vue';
 
 export default {
-
     mixins: [Fieldtype],
 
-    props: ['focus']
-
+    props: ['focus'],
 };
 </script>
diff --git a/resources/js/components/fieldtypes/GroupFieldtype.vue b/resources/js/components/fieldtypes/GroupFieldtype.vue
index 06a9427024..5c04ab9d8e 100644
--- a/resources/js/components/fieldtypes/GroupFieldtype.vue
+++ b/resources/js/components/fieldtypes/GroupFieldtype.vue
@@ -1,23 +1,20 @@
 <template>
-    <portal
-        name="group-fullscreen"
-        :disabled="!fullScreenMode"
-        :provide="provide"
-    >
+    <portal name="group-fullscreen" :disabled="!fullScreenMode" :provide="provide">
         <element-container @resized="containerWidth = $event.width">
-            <div
-                class="group-fieldtype-container"
-                :class="{ 'grid-fullscreen bg-white': fullScreenMode }"
-            >
+            <div class="group-fieldtype-container" :class="{ 'grid-fullscreen bg-white': fullScreenMode }">
                 <publish-field-fullscreen-header
                     v-if="fullScreenMode"
                     :title="config.display"
                     :field-actions="fieldActions"
-                    @close="toggleFullscreen">
+                    @close="toggleFullscreen"
+                >
                 </publish-field-fullscreen-header>
                 <section :class="{ 'mt-14 p-4': fullScreenMode }">
-                    <div :class="{ 'border dark:border-dark-900 rounded shadow-sm replicator-set': config.border }">
-                        <div class="publish-fields @container" :class="{ 'replicator-set-body': config.border, '-mx-4': !config.border }">
+                    <div :class="{ 'replicator-set rounded border shadow-sm dark:border-dark-900': config.border }">
+                        <div
+                            class="publish-fields @container"
+                            :class="{ 'replicator-set-body': config.border, '-mx-4': !config.border }"
+                        >
                             <set-field
                                 v-for="field in fields"
                                 :key="field.handle"
@@ -46,27 +43,23 @@
 </template>
 
 <style>
-    .group-fieldtype-button-wrapper {
-        @apply flex rtl:left-6 ltr:right-6 absolute top-5 sm:top-7;
-    }
+.group-fieldtype-button-wrapper {
+    @apply absolute top-5 flex sm:top-7 ltr:right-6 rtl:left-6;
+}
 
-    .replicator-set .group-fieldtype-button-wrapper {
-        @apply top-5 rtl:left-4 ltr:right-4;
-    }
+.replicator-set .group-fieldtype-button-wrapper {
+    @apply top-5 ltr:right-4 rtl:left-4;
+}
 </style>
 
 <script>
 import Fieldtype from './Fieldtype.vue';
 import SetField from './replicator/Field.vue';
 import { ValidatesFieldConditions } from '../field-conditions/FieldConditions.js';
-import ManagesPreviewText from "./replicator/ManagesPreviewText";
+import ManagesPreviewText from './replicator/ManagesPreviewText';
 
 export default {
-    mixins: [
-        Fieldtype,
-        ValidatesFieldConditions,
-        ManagesPreviewText,
-    ],
+    mixins: [Fieldtype, ValidatesFieldConditions, ManagesPreviewText],
     components: { SetField },
     data() {
         return {
@@ -92,7 +85,7 @@ export default {
             return this.config.fields;
         },
         replicatorPreview() {
-            if (! this.showFieldPreviews || ! this.config.replicator_preview) return;
+            if (!this.showFieldPreviews || !this.config.replicator_preview) return;
 
             return replicatorPreviewHtml(this.previewText);
         },
@@ -100,7 +93,7 @@ export default {
             return [
                 {
                     title: __('Toggle Fullscreen Mode'),
-                    icon: ({ vm }) => vm.fullScreenMode ? 'shrink-all' : 'expand-bold',
+                    icon: ({ vm }) => (vm.fullScreenMode ? 'shrink-all' : 'expand-bold'),
                     quick: true,
                     run: this.toggleFullscreen,
                     visible: this.config.fullscreen,
diff --git a/resources/js/components/fieldtypes/HasInputOptions.js b/resources/js/components/fieldtypes/HasInputOptions.js
index e829d93644..6ab86c1c25 100644
--- a/resources/js/components/fieldtypes/HasInputOptions.js
+++ b/resources/js/components/fieldtypes/HasInputOptions.js
@@ -1,11 +1,11 @@
 export default {
     methods: {
         normalizeInputOptions(options) {
-            if (! Array.isArray(options)) {
+            if (!Array.isArray(options)) {
                 return _.map(options, (value, key) => {
                     return {
-                        'value': Array.isArray(options) ? value : key,
-                        'label': __(value) || key
+                        value: Array.isArray(options) ? value : key,
+                        label: __(value) || key,
                     };
                 });
             }
@@ -22,16 +22,16 @@ export default {
                     }
 
                     return {
-                        'value': option[valueKey],
-                        'label': __(option[labelKey]) || option[valueKey]
+                        value: option[valueKey],
+                        label: __(option[labelKey]) || option[valueKey],
                     };
                 }
 
                 return {
-                    'value': option,
-                    'label': __(option) || option
+                    value: option,
+                    label: __(option) || option,
                 };
             });
-        }
-    }
-}
+        },
+    },
+};
diff --git a/resources/js/components/fieldtypes/HiddenFieldtype.vue b/resources/js/components/fieldtypes/HiddenFieldtype.vue
index 015c970a12..3d80d9531d 100644
--- a/resources/js/components/fieldtypes/HiddenFieldtype.vue
+++ b/resources/js/components/fieldtypes/HiddenFieldtype.vue
@@ -6,6 +6,6 @@
 import Fieldtype from './Fieldtype.vue';
 
 export default {
-    mixins: [Fieldtype]
+    mixins: [Fieldtype],
 };
 </script>
diff --git a/resources/js/components/fieldtypes/HtmlFieldtype.vue b/resources/js/components/fieldtypes/HtmlFieldtype.vue
index 3209984bbb..8c991ecd88 100644
--- a/resources/js/components/fieldtypes/HtmlFieldtype.vue
+++ b/resources/js/components/fieldtypes/HtmlFieldtype.vue
@@ -6,6 +6,6 @@
 import Fieldtype from './Fieldtype.vue';
 
 export default {
-    mixins: [Fieldtype]
+    mixins: [Fieldtype],
 };
 </script>
diff --git a/resources/js/components/fieldtypes/IconFieldtype.vue b/resources/js/components/fieldtypes/IconFieldtype.vue
index fa9f6aa441..6154111e53 100644
--- a/resources/js/components/fieldtypes/IconFieldtype.vue
+++ b/resources/js/components/fieldtypes/IconFieldtype.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="flex icon-fieldtype-wrapper">
+    <div class="icon-fieldtype-wrapper flex">
         <v-select
             ref="input"
             class="w-full"
@@ -17,19 +17,28 @@
             :create-option="(value) => ({ value, label: value })"
             @update:model-value="vueSelectUpdated"
             @search:focus="$emit('focus')"
-            @search:blur="$emit('blur')">
+            @search:blur="$emit('blur')"
+        >
             <template #option="option">
                 <div class="flex items-center">
-                    <svg-icon v-if="!option.html" :name="`${meta.set}/${option.label}`" class="w-5 h-5" />
-                    <div v-if="option.html" v-html="option.html" class="w-5 h-5" />
-                    <span class="text-xs rtl:mr-4 ltr:ml-4 text-gray-800 dark:text-dark-150 truncate">{{ __(option.label) }}</span>
+                    <svg-icon v-if="!option.html" :name="`${meta.set}/${option.label}`" class="h-5 w-5" />
+                    <div v-if="option.html" v-html="option.html" class="h-5 w-5" />
+                    <span class="truncate text-xs text-gray-800 dark:text-dark-150 ltr:ml-4 rtl:mr-4">{{
+                        __(option.label)
+                    }}</span>
                 </div>
             </template>
             <template #selected-option="option">
                 <div class="flex items-center">
-                    <svg-icon v-if="!option.html" :name="`${meta.set}/${option.label}`" class="w-5 h-5 flex items-center" />
-                    <div v-if="option.html" v-html="option.html" class="w-5 h-5" />
-                    <span class="text-xs rtl:mr-4 ltr:ml-4 text-gray-800 dark:text-dark-150 truncate">{{ __(option.label) }}</span>
+                    <svg-icon
+                        v-if="!option.html"
+                        :name="`${meta.set}/${option.label}`"
+                        class="flex h-5 w-5 items-center"
+                    />
+                    <div v-if="option.html" v-html="option.html" class="h-5 w-5" />
+                    <span class="truncate text-xs text-gray-800 dark:text-dark-150 ltr:ml-4 rtl:mr-4">{{
+                        __(option.label)
+                    }}</span>
                 </div>
             </template>
         </v-select>
@@ -41,7 +50,6 @@ import Fieldtype from './Fieldtype.vue';
 import PositionsSelectOptions from '../../mixins/PositionsSelectOptions';
 
 export default {
-
     mixins: [Fieldtype, PositionsSelectOptions],
 
     computed: {
@@ -51,15 +59,15 @@ export default {
                 options.push({
                     value: name,
                     label: name,
-                    html
+                    html,
                 });
             }
             return options;
         },
 
         selectedOption() {
-            return this.options.find(option => option.value === this.value);
-        }
+            return this.options.find((option) => option.value === this.value);
+        },
     },
 
     methods: {
@@ -69,11 +77,11 @@ export default {
 
         vueSelectUpdated(value) {
             if (value) {
-                this.update(value.value)
+                this.update(value.value);
             } else {
                 this.update(null);
             }
         },
-    }
+    },
 };
 </script>
diff --git a/resources/js/components/fieldtypes/IndexFieldtype.vue b/resources/js/components/fieldtypes/IndexFieldtype.vue
index 023b7fd2d0..aa01ffe36f 100644
--- a/resources/js/components/fieldtypes/IndexFieldtype.vue
+++ b/resources/js/components/fieldtypes/IndexFieldtype.vue
@@ -1,11 +1,9 @@
 <script>
 export default {
-
     props: {
         handle: { type: String, required: true },
         value: { required: true },
         values: { required: true },
-    }
-
-}
+    },
+};
 </script>
diff --git a/resources/js/components/fieldtypes/IntegerFieldtype.vue b/resources/js/components/fieldtypes/IntegerFieldtype.vue
index 33def3f08a..23aa5220ce 100644
--- a/resources/js/components/fieldtypes/IntegerFieldtype.vue
+++ b/resources/js/components/fieldtypes/IntegerFieldtype.vue
@@ -21,11 +21,10 @@
 import Fieldtype from './Fieldtype.vue';
 
 export default {
-
     mixins: [Fieldtype],
     props: {
         prepend: { default: null },
         append: { default: null },
-    }
+    },
 };
 </script>
diff --git a/resources/js/components/fieldtypes/LinkFieldtype.vue b/resources/js/components/fieldtypes/LinkFieldtype.vue
index 3394c78695..9b60400d5b 100644
--- a/resources/js/components/fieldtypes/LinkFieldtype.vue
+++ b/resources/js/components/fieldtypes/LinkFieldtype.vue
@@ -1,8 +1,7 @@
 <template>
     <div class="flex items-center">
-
         <!-- Link type selector -->
-        <div class="w-28 rtl:ml-4 ltr:mr-4">
+        <div class="w-28 ltr:mr-4 rtl:ml-4">
             <v-select
                 v-model="option"
                 append-to-body
@@ -10,16 +9,14 @@
                 :options="options"
                 :clearable="false"
                 :reduce="(option) => option.value"
-
             >
                 <template #option="{ label }">
-                  {{ __(label) }}
+                    {{ __(label) }}
                 </template>
             </v-select>
         </div>
 
         <div class="flex-1">
-
             <!-- URL text input -->
             <text-input v-if="option === 'url'" v-model="urlValue" />
 
@@ -46,7 +43,6 @@
                 @input="assetsSelected"
                 @meta-updated="meta.asset.meta = $event"
             />
-
         </div>
     </div>
 </template>
@@ -56,7 +52,6 @@ import Fieldtype from './Fieldtype.vue';
 import PositionsSelectOptions from '../../mixins/PositionsSelectOptions';
 
 export default {
-
     mixins: [Fieldtype, PositionsSelectOptions],
 
     provide: {
@@ -64,7 +59,6 @@ export default {
     },
 
     data() {
-
         return {
             option: this.meta.initialOption,
             options: this.initialOptions(),
@@ -72,26 +66,20 @@ export default {
             selectedEntries: this.meta.initialSelectedEntries,
             selectedAssets: this.meta.initialSelectedAssets,
             metaChanging: false,
-        }
-
+        };
     },
 
     computed: {
-
         entryValue() {
-            return this.selectedEntries.length
-                ? `entry::${this.selectedEntries[0]}`
-                : null
+            return this.selectedEntries.length ? `entry::${this.selectedEntries[0]}` : null;
         },
 
         assetValue() {
-            return this.selectedAssets.length
-                ? `asset::${this.selectedAssets[0]}`
-                : null
+            return this.selectedAssets.length ? `asset::${this.selectedAssets[0]}` : null;
         },
 
         replicatorPreview() {
-            if (! this.showFieldPreviews || ! this.config.replicator_preview) return;
+            if (!this.showFieldPreviews || !this.config.replicator_preview) return;
 
             switch (this.option) {
                 case 'url':
@@ -105,12 +93,10 @@ export default {
             }
 
             return this.value;
-        }
-
+        },
     },
 
     watch: {
-
         option(option, oldOption) {
             if (this.metaChanging) return;
 
@@ -134,14 +120,14 @@ export default {
                 }
             }
 
-            this.updateMeta({...this.meta, initialOption: option});
+            this.updateMeta({ ...this.meta, initialOption: option });
         },
 
         urlValue(url) {
             if (this.metaChanging) return;
 
             this.update(url);
-            this.updateMeta({...this.meta, initialUrl: url});
+            this.updateMeta({ ...this.meta, initialUrl: url });
         },
 
         meta(meta, oldMeta) {
@@ -152,48 +138,36 @@ export default {
             this.option = meta.initialOption;
             this.selectedEntries = meta.initialSelectedEntries;
             this.selectedAssets = meta.initialSelectedAssets;
-            this.$nextTick(() => this.metaChanging = false);
-        }
-
+            this.$nextTick(() => (this.metaChanging = false));
+        },
     },
 
     methods: {
-
         initialOptions() {
             return [
-
-                this.config.required
-                    ? null
-                    : { label: __('None'), value: null },
+                this.config.required ? null : { label: __('None'), value: null },
 
                 { label: __('URL'), value: 'url' },
 
-                this.meta.showFirstChildOption
-                    ? { label: __('First Child'), value: 'first-child' }
-                    : null,
+                this.meta.showFirstChildOption ? { label: __('First Child'), value: 'first-child' } : null,
 
                 { label: __('Entry'), value: 'entry' },
 
-                this.meta.showAssetOption
-                    ? { label: __('Asset'), value: 'asset' }
-                    : null,
-
-            ].filter(option => option);
+                this.meta.showAssetOption ? { label: __('Asset'), value: 'asset' } : null,
+            ].filter((option) => option);
         },
 
         entriesSelected(entries) {
             this.selectedEntries = entries;
             this.update(this.entryValue);
-            this.updateMeta({...this.meta, initialSelectedEntries: entries});
+            this.updateMeta({ ...this.meta, initialSelectedEntries: entries });
         },
 
         assetsSelected(assets) {
             this.selectedAssets = assets;
             this.update(this.assetValue);
-            this.updateMeta({...this.meta, initialSelectedAssets: assets});
-        }
-
-    }
-
-}
+            this.updateMeta({ ...this.meta, initialSelectedAssets: assets });
+        },
+    },
+};
 </script>
diff --git a/resources/js/components/fieldtypes/ListFieldtype.vue b/resources/js/components/fieldtypes/ListFieldtype.vue
index ee975ca514..7158c89bdc 100644
--- a/resources/js/components/fieldtypes/ListFieldtype.vue
+++ b/resources/js/components/fieldtypes/ListFieldtype.vue
@@ -12,7 +12,11 @@
             >
                 <tbody>
                     <tr class="sortable-row" v-for="(element, index) in data" :key="element._id">
-                        <td class="sortable-handle table-drag-handle" v-if="!isReadOnly" :class="{'rounded-tl': index === 0 }"></td>
+                        <td
+                            class="sortable-handle table-drag-handle"
+                            v-if="!isReadOnly"
+                            :class="{ 'rounded-tl': index === 0 }"
+                        ></td>
                         <td>
                             <input
                                 type="text"
@@ -29,7 +33,12 @@
                             />
                         </td>
                         <td class="row-controls" v-if="!isReadOnly">
-                            <button @click="deleteValue(index)" class="inline text-lg antialiased text-gray-600 hover:text-gray-800 ">&times;</button>
+                            <button
+                                @click="deleteValue(index)"
+                                class="inline text-lg text-gray-600 antialiased hover:text-gray-800"
+                            >
+                                &times;
+                            </button>
                         </td>
                     </tr>
                 </tbody>
@@ -47,12 +56,11 @@ import Fieldtype from './Fieldtype.vue';
 import { SortableList, SortableItem, SortableHelpers } from '../sortable/Sortable';
 
 export default {
-
     mixins: [Fieldtype, SortableHelpers],
 
     components: {
         SortableList,
-        SortableItem
+        SortableItem,
     },
 
     data() {
@@ -61,12 +69,12 @@ export default {
             editing: null,
             focused: false,
             mounted: false,
-            deleting: false
-        }
+            deleting: false,
+        };
     },
 
     mounted() {
-        this.$nextTick(() => this.mounted = true);
+        this.$nextTick(() => (this.mounted = true));
     },
 
     watch: {
@@ -75,16 +83,15 @@ export default {
             handler(data) {
                 if (!this.mounted) return;
                 this.updateDebounced(this.sortableToArray(data));
-            }
+            },
         },
 
-
         value: {
             immediate: true,
             handler(value) {
                 if (JSON.stringify(value) == JSON.stringify(this.sortableToArray(this.data))) return;
                 this.data = this.arrayToSortable(value);
-            }
+            },
         },
 
         focused(focused, oldFocused) {
@@ -98,7 +105,7 @@ export default {
                     this.editing = null;
                 }
             }, 1);
-        }
+        },
     },
 
     computed: {
@@ -128,13 +135,13 @@ export default {
 
         newItemInputPaste(event) {
             const value = event.clipboardData.getData('text');
-            if (!value.includes("\n")) {
+            if (!value.includes('\n')) {
                 return;
             }
 
-            this.deleteIfEmpty()
+            this.deleteIfEmpty();
 
-            value.split("\n").forEach((item) => {
+            value.split('\n').forEach((item) => {
                 this.data.push(this.newSortableValue(item));
             });
 
@@ -143,7 +150,6 @@ export default {
             event.preventDefault();
         },
 
-
         previousItem() {
             this.deleteIfEmpty();
 
@@ -158,7 +164,6 @@ export default {
             } else {
                 this.editItem(this.editing + 1 - deletedAdjustment);
             }
-
         },
 
         deleteIfEmpty() {
@@ -172,6 +177,6 @@ export default {
         deleteItem(index) {
             return this.data.splice(index, 1);
         },
-    }
+    },
 };
 </script>
diff --git a/resources/js/components/fieldtypes/ListIndexFieldtype.vue b/resources/js/components/fieldtypes/ListIndexFieldtype.vue
index f5cc052a51..02662b1b11 100644
--- a/resources/js/components/fieldtypes/ListIndexFieldtype.vue
+++ b/resources/js/components/fieldtypes/ListIndexFieldtype.vue
@@ -6,7 +6,6 @@
 import IndexFieldtype from './IndexFieldtype.vue';
 
 export default {
-
     mixins: [IndexFieldtype],
 
     computed: {
diff --git a/resources/js/components/fieldtypes/RadioFieldtype.vue b/resources/js/components/fieldtypes/RadioFieldtype.vue
index 9125f0fbc8..edf873eaca 100644
--- a/resources/js/components/fieldtypes/RadioFieldtype.vue
+++ b/resources/js/components/fieldtypes/RadioFieldtype.vue
@@ -1,12 +1,12 @@
 <template>
-    <div class="radio-fieldtype-wrapper" :class="{'inline-mode': config.inline}">
+    <div class="radio-fieldtype-wrapper" :class="{ 'inline-mode': config.inline }">
         <div
             v-for="(option, $index) in options"
             :key="$index"
             class="option"
             :class="{
-                'selected': value === option.value,
-                'disabled': isReadOnly
+                selected: value === option.value,
+                disabled: isReadOnly,
             }"
         >
             <label>
@@ -26,7 +26,8 @@
                     v-show="value == option.value"
                     v-cloak
                 />
-                <input type="radio"
+                <input
+                    type="radio"
                     ref="radio"
                     :name="name"
                     @input.stop="update($event.target.value)"
@@ -42,7 +43,7 @@
 
 <script>
 import Fieldtype from './Fieldtype.vue';
-import HasInputOptions from './HasInputOptions.js'
+import HasInputOptions from './HasInputOptions.js';
 
 export default {
     mixins: [Fieldtype, HasInputOptions],
@@ -53,19 +54,17 @@ export default {
         },
 
         replicatorPreview() {
-            if (! this.showFieldPreviews || ! this.config.replicator_preview) return;
+            if (!this.showFieldPreviews || !this.config.replicator_preview) return;
 
-            var option = _.findWhere(this.options, {value: this.value});
-            return (option) ? option.label : this.value;
+            var option = _.findWhere(this.options, { value: this.value });
+            return option ? option.label : this.value;
         },
     },
 
     methods: {
-
         focus() {
             this.$refs.radio[0].focus();
-        }
-
-    }
+        },
+    },
 };
 </script>
diff --git a/resources/js/components/fieldtypes/RangeFieldtype.vue b/resources/js/components/fieldtypes/RangeFieldtype.vue
index fb371e6994..6b6edf15a8 100644
--- a/resources/js/components/fieldtypes/RangeFieldtype.vue
+++ b/resources/js/components/fieldtypes/RangeFieldtype.vue
@@ -1,7 +1,7 @@
 <template>
-    <div class="range-fieldtype-wrapper bg-gray-200 dark:bg-dark-700 rounded py-2 px-4 border dark:border-dark-900">
+    <div class="range-fieldtype-wrapper rounded border bg-gray-200 px-4 py-2 dark:border-dark-900 dark:bg-dark-700">
         <div class="flex items-center">
-            <div v-if="config.prepend" v-text="__(config.prepend)" class="rtl:ml-2 ltr:mr-2" />
+            <div v-if="config.prepend" v-text="__(config.prepend)" class="ltr:mr-2 rtl:ml-2" />
             <input
                 type="range"
                 v-model="val"
@@ -13,9 +13,13 @@
                 :readonly="isReadOnly"
                 :disabled="isReadOnly"
                 :id="fieldId"
-                class="flex-1 min-w-0"
+                class="min-w-0 flex-1"
             />
-            <div class="rounded border dark:border-dark-900 px-2 py-1 mx-2 bg-gray-100 dark:bg-dark-600 dark:shadow-inner-dark">{{ val }}</div>
+            <div
+                class="mx-2 rounded border bg-gray-100 px-2 py-1 dark:border-dark-900 dark:bg-dark-600 dark:shadow-inner-dark"
+            >
+                {{ val }}
+            </div>
             <div v-if="config.append" v-text="__(config.append)" />
         </div>
     </div>
@@ -25,13 +29,12 @@
 import Fieldtype from './Fieldtype.vue';
 
 export default {
-
     mixins: [Fieldtype],
 
-     data() {
+    data() {
         return {
             val: this.getValue(),
-        }
+        };
     },
 
     methods: {
@@ -50,11 +53,11 @@ export default {
         },
 
         getValue() {
-            if (typeof(this.value) === 'number') {
+            if (typeof this.value === 'number') {
                 return this.value;
             }
 
-            if (typeof(this.config.default) === 'number') {
+            if (typeof this.config.default === 'number') {
                 return this.config.default;
             }
 
@@ -62,15 +65,13 @@ export default {
         },
     },
 
-
     watch: {
         value(value) {
             this.val = value;
         },
         val(value) {
             this.updateDebounced(value);
-        }
-    }
-
-}
+        },
+    },
+};
 </script>
diff --git a/resources/js/components/fieldtypes/RevealerFieldtype.vue b/resources/js/components/fieldtypes/RevealerFieldtype.vue
index d02267c26e..ecc9b4a603 100644
--- a/resources/js/components/fieldtypes/RevealerFieldtype.vue
+++ b/resources/js/components/fieldtypes/RevealerFieldtype.vue
@@ -1,10 +1,11 @@
 <template>
-
     <div>
         <template v-if="isToggleMode">
             <div class="toggle-fieldtype-wrapper">
                 <toggle-input :value="isRevealed" @input="update" :read-only="isReadOnly" />
-                <label v-if="config.input_label" class="rtl:mr-2 ltr:ml-2 font-normal">{{ __(config.input_label) }}</label>
+                <label v-if="config.input_label" class="font-normal ltr:ml-2 rtl:mr-2">{{
+                    __(config.input_label)
+                }}</label>
             </div>
         </template>
 
@@ -14,21 +15,19 @@
                 class="btn"
                 :disabled="isReadOnly"
                 :v-tooltip="__(config.instructions)"
-                v-text="config.input_label || __('Show Fields')" />
+                v-text="config.input_label || __('Show Fields')"
+            />
         </template>
     </div>
-
 </template>
 
 <script>
 import Fieldtype from './Fieldtype.vue';
 
 export default {
-
     mixins: [Fieldtype],
 
     computed: {
-
         isRevealed() {
             return this.value;
         },
@@ -40,7 +39,6 @@ export default {
         fieldPath() {
             return this.fieldPathPrefix || this.handle;
         },
-
     },
 
     inject: ['storeName'],
@@ -59,11 +57,10 @@ export default {
             this.$nextTick(() => {
                 this.$store.commit(`publish/${this.storeName}/setRevealerField`, fieldPath);
             });
-        }
+        },
     },
 
     methods: {
-
         buttonReveal() {
             if (this.isReadOnly) {
                 return;
@@ -75,10 +72,8 @@ export default {
                 omitValue: true,
             });
 
-            this.update(true)
-        }
-
-    }
-
-}
+            this.update(true);
+        },
+    },
+};
 </script>
diff --git a/resources/js/components/fieldtypes/SectionFieldtype.vue b/resources/js/components/fieldtypes/SectionFieldtype.vue
index 9fc644028b..aae5689d62 100644
--- a/resources/js/components/fieldtypes/SectionFieldtype.vue
+++ b/resources/js/components/fieldtypes/SectionFieldtype.vue
@@ -5,6 +5,6 @@ export default {
     mixins: [Fieldtype],
     render() {
         return '';
-    }
+    },
 };
 </script>
diff --git a/resources/js/components/fieldtypes/SelectFieldtype.vue b/resources/js/components/fieldtypes/SelectFieldtype.vue
index 1024f862f1..00083be6cf 100644
--- a/resources/js/components/fieldtypes/SelectFieldtype.vue
+++ b/resources/js/components/fieldtypes/SelectFieldtype.vue
@@ -22,42 +22,56 @@
             @update:model-value="vueSelectUpdated"
             @focus="$emit('focus')"
             @search:focus="$emit('focus')"
-            @search:blur="$emit('blur')">
-                <template #selected-option-container v-if="config.multiple"><i class="hidden"></i></template>
-                <template #search="{ events, attributes }" v-if="config.multiple">
-                    <input
-                        :placeholder="__(config.placeholder)"
-                        class="vs__search"
-                        type="search"
-                        v-on="events"
-                        v-bind="attributes"
-                    >
-                </template>
-                <template #option="{ label }">
-                    <div v-if="config.label_html" v-html="label"></div>
-                    <template v-else v-text="label"></template>
-                </template>
-                <template #selected-option="{ label }">
-                    <div v-if="config.label_html" v-html="label"></div>
-                    <template v-else v-text="label"></template>
-                </template>
-                <template #no-options>
-                    <div class="text-sm text-gray-700 rtl:text-right ltr:text-left py-2 px-4" v-text="__('No options to choose from.')" />
-                </template>
-                <template #footer="{ deselect }" v-if="config.multiple">
-                    <sortable-list
-                        item-class="sortable-item"
-                        handle-class="sortable-item"
-                        :model-value="value"
-                        :distance="5"
-                        :mirror="false"
-                        @update:model-value="update"
-                    >
+            @search:blur="$emit('blur')"
+        >
+            <template #selected-option-container v-if="config.multiple"><i class="hidden"></i></template>
+            <template #search="{ events, attributes }" v-if="config.multiple">
+                <input
+                    :placeholder="__(config.placeholder)"
+                    class="vs__search"
+                    type="search"
+                    v-on="events"
+                    v-bind="attributes"
+                />
+            </template>
+            <template #option="{ label }">
+                <div v-if="config.label_html" v-html="label"></div>
+                <template v-else v-text="label"></template>
+            </template>
+            <template #selected-option="{ label }">
+                <div v-if="config.label_html" v-html="label"></div>
+                <template v-else v-text="label"></template>
+            </template>
+            <template #no-options>
+                <div
+                    class="px-4 py-2 text-sm text-gray-700 ltr:text-left rtl:text-right"
+                    v-text="__('No options to choose from.')"
+                />
+            </template>
+            <template #footer="{ deselect }" v-if="config.multiple">
+                <sortable-list
+                    item-class="sortable-item"
+                    handle-class="sortable-item"
+                    :model-value="value"
+                    :distance="5"
+                    :mirror="false"
+                    @update:model-value="update"
+                >
                     <div class="vs__selected-options-outside flex flex-wrap">
-                        <span v-for="option in selectedOptions" :key="option.value" class="vs__selected mt-2 sortable-item">
+                        <span
+                            v-for="option in selectedOptions"
+                            :key="option.value"
+                            class="vs__selected sortable-item mt-2"
+                        >
                             <div v-if="config.label_html" v-html="option.label"></div>
                             <template v-else>{{ __(option.label) }}</template>
-                            <button v-if="!readOnly" @click="deselect(option)" type="button" :aria-label="__('Deselect option')" class="vs__deselect">
+                            <button
+                                v-if="!readOnly"
+                                @click="deselect(option)"
+                                type="button"
+                                :aria-label="__('Deselect option')"
+                                class="vs__deselect"
+                            >
                                 <span>×</span>
                             </button>
                             <button v-else type="button" class="vs__deselect">
@@ -65,34 +79,32 @@
                             </button>
                         </span>
                     </div>
-                    </sortable-list>
-                </template>
+                </sortable-list>
+            </template>
         </v-select>
-        <div class="text-xs rtl:mr-2 ltr:ml-2 mt-3" :class="limitIndicatorColor" v-if="config.max_items">
+        <div class="mt-3 text-xs ltr:ml-2 rtl:mr-2" :class="limitIndicatorColor" v-if="config.max_items">
             <span v-text="currentLength"></span>/<span v-text="config.max_items"></span>
         </div>
     </div>
 </template>
 
 <style scoped>
-    .draggable-source--is-dragging {
-        @apply opacity-75 bg-transparent border-dashed
-    }
+.draggable-source--is-dragging {
+    @apply border-dashed bg-transparent opacity-75;
+}
 </style>
 
 <script>
 import Fieldtype from './Fieldtype.vue';
-import HasInputOptions from './HasInputOptions.js'
+import HasInputOptions from './HasInputOptions.js';
 import { SortableList } from '../sortable/Sortable';
 import PositionsSelectOptions from '../../mixins/PositionsSelectOptions';
 
-
 export default {
-
     mixins: [Fieldtype, HasInputOptions, PositionsSelectOptions],
 
     components: {
-        SortableList
+        SortableList,
     },
 
     computed: {
@@ -101,8 +113,8 @@ export default {
             if (typeof selections === 'string' || typeof selections === 'number') {
                 selections = [selections];
             }
-            return selections.map(value => {
-                return _.findWhere(this.options, {value}) || { value, label: value };
+            return selections.map((value) => {
+                return _.findWhere(this.options, { value }) || { value, label: value };
             });
         },
 
@@ -111,9 +123,9 @@ export default {
         },
 
         replicatorPreview() {
-            if (! this.showFieldPreviews || ! this.config.replicator_preview) return;
+            if (!this.showFieldPreviews || !this.config.replicator_preview) return;
 
-            return this.selectedOptions.map(option => option.label).join(', ');
+            return this.selectedOptions.map((option) => option.label).join(', ');
         },
 
         resetOnOptionsChange() {
@@ -123,26 +135,26 @@ export default {
 
             // Reset the value if the value doesn't exist in the new set of options.
             return (options, old, val) => {
-                let opts = options.map(o => o.value);
-                return !val.some(v => opts.includes(v.value));
+                let opts = options.map((o) => o.value);
+                return !val.some((v) => opts.includes(v.value));
             };
         },
 
         limitReached() {
-            if (! this.config.max_items) return false;
+            if (!this.config.max_items) return false;
 
             return this.currentLength >= this.config.max_items;
         },
 
         limitExceeded() {
-            if (! this.config.max_items) return false;
+            if (!this.config.max_items) return false;
 
             return this.currentLength > this.config.max_items;
         },
 
         currentLength() {
             if (this.value) {
-                return (typeof this.value == 'string') ? 1 : this.value.length;
+                return typeof this.value == 'string' ? 1 : this.value.length;
             }
 
             return 0;
@@ -156,7 +168,7 @@ export default {
             }
 
             return 'text-gray';
-        }
+        },
     },
 
     methods: {
@@ -166,15 +178,15 @@ export default {
 
         vueSelectUpdated(value) {
             if (this.config.multiple) {
-                this.update(value.map(v => v.value));
+                this.update(value.map((v) => v.value));
             } else {
                 if (value) {
-                    this.update(value.value)
+                    this.update(value.value);
                 } else {
                     this.update(null);
                 }
             }
         },
-    }
+    },
 };
 </script>
diff --git a/resources/js/components/fieldtypes/SlugFieldtype.vue b/resources/js/components/fieldtypes/SlugFieldtype.vue
index 5e21fa39de..d09c8fbdc9 100644
--- a/resources/js/components/fieldtypes/SlugFieldtype.vue
+++ b/resources/js/components/fieldtypes/SlugFieldtype.vue
@@ -8,7 +8,10 @@
         :language="language"
         :async="config.async"
         @slugifying="syncing = true"
-        @slugified="syncing = false; slug = $event"
+        @slugified="
+            syncing = false;
+            slug = $event;
+        "
     >
         <div>
             <text-input
@@ -23,15 +26,20 @@
                 direction="ltr"
             >
                 <template v-slot:append v-if="config.show_regenerate">
-                    <button class="input-group-append items-center flex" @click="sync" v-tooltip="__('Regenerate from: :field', { 'field': config.from })">
-                        <svg-icon name="light/synchronize" class="w-5 h-5" v-show="!syncing" />
-                        <div class="w-5 h-5" v-show="syncing"><loading-graphic inline text="" class="mt-0.5 ml-0.5" /></div>
+                    <button
+                        class="input-group-append flex items-center"
+                        @click="sync"
+                        v-tooltip="__('Regenerate from: :field', { field: config.from })"
+                    >
+                        <svg-icon name="light/synchronize" class="h-5 w-5" v-show="!syncing" />
+                        <div class="h-5 w-5" v-show="syncing">
+                            <loading-graphic inline text="" class="ml-0.5 mt-0.5" />
+                        </div>
                     </button>
                 </template>
             </text-input>
         </div>
     </slugify>
-
 </template>
 
 <script>
@@ -39,11 +47,10 @@ import { data_get } from '../../bootstrap/globals';
 import Fieldtype from './Fieldtype.vue';
 
 export default {
-
     mixins: [Fieldtype],
 
     inject: {
-        storeName: {default: null},
+        storeName: { default: null },
     },
 
     data() {
@@ -51,11 +58,10 @@ export default {
             slug: this.value,
             generate: this.config.generate,
             syncing: false,
-        }
+        };
     },
 
     computed: {
-
         separator() {
             return this.config.separator || '-';
         },
@@ -65,13 +71,13 @@ export default {
         },
 
         source() {
-            if (! this.generate) return;
+            if (!this.generate) return;
 
             const field = this.config.from || 'title';
             let key = field;
 
             if (this.fieldPathPrefix) {
-                let dottedPrefix = this.fieldPathPrefix.replace(new RegExp('\.'+this.handle+'$'), '');
+                let dottedPrefix = this.fieldPathPrefix.replace(new RegExp('\.' + this.handle + '$'), '');
                 key = dottedPrefix + '.' + field;
             }
 
@@ -79,23 +85,20 @@ export default {
         },
 
         language() {
-            if (! this.store) return;
+            if (!this.store) return;
             const targetSite = this.$store.state.publish[this.store].site;
-            return targetSite ? Statamic.$config.get('sites').find(site => site.handle === targetSite).lang : null;
-        }
-
+            return targetSite ? Statamic.$config.get('sites').find((site) => site.handle === targetSite).lang : null;
+        },
     },
 
     watch: {
-
         value(value) {
             this.slug = value;
         },
 
         slug(slug) {
             this.updateDebounced(slug);
-        }
-
+        },
     },
 
     created() {
@@ -111,7 +114,6 @@ export default {
     },
 
     methods: {
-
         handleLocalizationCreated({ store }) {
             // Only reset for the "slug" field in the matching store.
             // Other slug fields that aren't named "slug" should be left alone.
@@ -122,8 +124,7 @@ export default {
 
         sync() {
             this.$refs.slugify.reset();
-        }
-    }
-
-}
+        },
+    },
+};
 </script>
diff --git a/resources/js/components/fieldtypes/TableFieldtype.vue b/resources/js/components/fieldtypes/TableFieldtype.vue
index e45540434e..e277de8809 100644
--- a/resources/js/components/fieldtypes/TableFieldtype.vue
+++ b/resources/js/components/fieldtypes/TableFieldtype.vue
@@ -1,27 +1,36 @@
 <template>
     <portal name="table-fullscreen" :disabled="!fullScreenMode" target-class="table-fieldtype">
-        <div class="table-fieldtype-container" :class="{'table-fullscreen bg-white dark:bg-dark-700': fullScreenMode }">
+        <div
+            class="table-fieldtype-container"
+            :class="{ 'table-fullscreen bg-white dark:bg-dark-700': fullScreenMode }"
+        >
             <publish-field-fullscreen-header
                 v-if="fullScreenMode"
                 :title="config.display"
                 :field-actions="fieldActions"
-                @close="toggleFullscreen">
+                @close="toggleFullscreen"
+            >
             </publish-field-fullscreen-header>
 
-            <section :class="{'mt-14 p-4 dark:bg-dark-700': fullScreenMode}">
+            <section :class="{ 'mt-14 p-4 dark:bg-dark-700': fullScreenMode }">
                 <table class="table-fieldtype-table" v-if="rowCount">
                     <thead>
                         <tr>
                             <th class="grid-drag-handle-header" v-if="!isReadOnly"></th>
                             <th v-for="(column, index) in columnCount" :key="index">
-                                <div class="flex items-center justify-between h-6">
+                                <div class="flex h-6 items-center justify-between">
                                     <span class="column-count">{{ index + 1 }}</span>
-                                    <a v-show="canDeleteColumns" class="opacity-25 text-lg antialiased hover:opacity-75" @click="confirmDeleteColumn(index)" :aria-label="__('Delete Column')">
+                                    <a
+                                        v-show="canDeleteColumns"
+                                        class="text-lg antialiased opacity-25 hover:opacity-75"
+                                        @click="confirmDeleteColumn(index)"
+                                        :aria-label="__('Delete Column')"
+                                    >
                                         &times;
                                     </a>
                                 </div>
                             </th>
-                            <th class="row-controls rtl:pl-0 ltr:pr-0"></th>
+                            <th class="row-controls ltr:pr-0 rtl:pl-0"></th>
                         </tr>
                     </thead>
 
@@ -38,10 +47,23 @@
                             <tr class="sortable-row" v-for="(row, rowIndex) in data" :key="row._id">
                                 <td class="table-drag-handle" v-if="!isReadOnly"></td>
                                 <td v-for="(cell, cellIndex) in row.value.cells">
-                                    <input type="text" v-model="row.value.cells[cellIndex]" class="input-text" :readonly="isReadOnly" @focus="$emit('focus')" @blur="$emit('blur')" />
+                                    <input
+                                        type="text"
+                                        v-model="row.value.cells[cellIndex]"
+                                        class="input-text"
+                                        :readonly="isReadOnly"
+                                        @focus="$emit('focus')"
+                                        @blur="$emit('blur')"
+                                    />
                                 </td>
                                 <td class="row-controls" v-if="canDeleteRows">
-                                    <button @click="confirmDeleteRow(rowIndex)" class="inline opacity-25 text-lg antialiased hover:opacity-75" :aria-label="__('Delete Row')">&times;</button>
+                                    <button
+                                        @click="confirmDeleteRow(rowIndex)"
+                                        class="inline text-lg antialiased opacity-25 hover:opacity-75"
+                                        :aria-label="__('Delete Row')"
+                                    >
+                                        &times;
+                                    </button>
                                 </td>
                             </tr>
                         </tbody>
@@ -52,7 +74,7 @@
                     {{ __('Add Row') }}
                 </button>
 
-                <button class="btn rtl:mr-2 ltr:ml-2" @click="addColumn" :disabled="atColumnMax" v-if="canAddColumns">
+                <button class="btn ltr:ml-2 rtl:mr-2" @click="addColumn" :disabled="atColumnMax" v-if="canAddColumns">
                     {{ __('Add Column') }}
                 </button>
             </section>
@@ -88,12 +110,11 @@ import { SortableList, SortableItem, SortableHelpers } from '../sortable/Sortabl
 import SortableKeyValue from '../sortable/SortableKeyValue';
 
 export default {
-
     mixins: [Fieldtype, SortableHelpers],
 
     components: {
         SortableList,
-        SortableItem
+        SortableItem,
     },
 
     data: function () {
@@ -101,23 +122,23 @@ export default {
             data: this.arrayToSortable(this.value || []),
             deletingRow: false,
             deletingColumn: false,
-            fullScreenMode: false
-        }
+            fullScreenMode: false,
+        };
     },
 
     watch: {
         data: {
             deep: true,
-            handler (data) {
+            handler(data) {
                 this.updateDebounced(this.sortableToArray(data));
-            }
+            },
         },
 
         value(value, oldValue) {
             if (JSON.stringify(value) == JSON.stringify(oldValue)) return;
             if (JSON.stringify(value) == JSON.stringify(this.sortableToArray(this.data))) return;
             this.data = this.arrayToSortable(value);
-        }
+        },
     },
 
     computed: {
@@ -162,19 +183,20 @@ export default {
         },
 
         replicatorPreview() {
-            if (! this.showFieldPreviews || ! this.config.replicator_preview) return;
+            if (!this.showFieldPreviews || !this.config.replicator_preview) return;
 
             // Join all values with commas. Exclude any empties.
             return _(this.data)
-                .map(row => row.value.cells.filter(cell => !!cell).join(', '))
-                .filter(row => !!row).join(', ');
+                .map((row) => row.value.cells.filter((cell) => !!cell).join(', '))
+                .filter((row) => !!row)
+                .join(', ');
         },
 
         internalFieldActions() {
             return [
                 {
                     title: __('Toggle Fullscreen Mode'),
-                    icon: ({ vm }) => vm.fullScreenMode ? 'shrink-all' : 'expand-bold',
+                    icon: ({ vm }) => (vm.fullScreenMode ? 'shrink-all' : 'expand-bold'),
                     quick: true,
                     visibleWhenReadOnly: true,
                     run: this.toggleFullscreen,
@@ -185,9 +207,11 @@ export default {
 
     methods: {
         addRow() {
-            this.data.push(this.newSortableValue({
-                'cells': new Array(this.columnCount || 1)
-            }));
+            this.data.push(
+                this.newSortableValue({
+                    cells: new Array(this.columnCount || 1),
+                }),
+            );
         },
 
         addColumn() {
@@ -230,7 +254,6 @@ export default {
         toggleFullscreen() {
             this.fullScreenMode = !this.fullScreenMode;
         },
-    }
-
-}
+    },
+};
 </script>
diff --git a/resources/js/components/fieldtypes/TagsFieldtype.vue b/resources/js/components/fieldtypes/TagsFieldtype.vue
index fcc8f6f20d..77385f3b7c 100644
--- a/resources/js/components/fieldtypes/TagsFieldtype.vue
+++ b/resources/js/components/fieldtypes/TagsFieldtype.vue
@@ -16,56 +16,64 @@
         :dropdown-should-open="({ open }) => open && config.options.length > 0"
         @update:model-value="update"
         @search:focus="$emit('focus')"
-        @search:blur="$emit('blur')">
-            <template #selected-option-container><i class="hidden"></i></template>
-            <template #search="{ events, attributes }">
-                <input
-                    :placeholder="config.placeholder"
-                    class="vs__search"
-                    type="search"
-                    v-on="events"
-                    v-bind="attributes"
-                    @paste="onPaste"
-                >
-            </template>
-             <template #no-options>
-                <div class="text-sm text-gray-700 rtl:text-right ltr:text-left py-2 px-4" v-text="__('No options to choose from.')" />
-            </template>
-            <template #footer="{ deselect }">
-                <sortable-list
-                    item-class="sortable-item"
-                    handle-class="sortable-item"
-                    :model-value="value"
-                    :distance="5"
-                    :mirror="false"
-                    @update:model-value="update"
-                >
-                    <div class="vs__selected-options-outside flex flex-wrap">
-                        <span v-for="tag in value" :key="tag" class="vs__selected mt-2 sortable-item">
-                            {{ tag }}
-                            <button @click="deselect(tag)" type="button" :aria-label="__('Remove tag')" class="vs__deselect">
-                                <span>×</span>
-                            </button>
-                        </span>
-                    </div>
-                </sortable-list>
-            </template>
+        @search:blur="$emit('blur')"
+    >
+        <template #selected-option-container><i class="hidden"></i></template>
+        <template #search="{ events, attributes }">
+            <input
+                :placeholder="config.placeholder"
+                class="vs__search"
+                type="search"
+                v-on="events"
+                v-bind="attributes"
+                @paste="onPaste"
+            />
+        </template>
+        <template #no-options>
+            <div
+                class="px-4 py-2 text-sm text-gray-700 ltr:text-left rtl:text-right"
+                v-text="__('No options to choose from.')"
+            />
+        </template>
+        <template #footer="{ deselect }">
+            <sortable-list
+                item-class="sortable-item"
+                handle-class="sortable-item"
+                :model-value="value"
+                :distance="5"
+                :mirror="false"
+                @update:model-value="update"
+            >
+                <div class="vs__selected-options-outside flex flex-wrap">
+                    <span v-for="tag in value" :key="tag" class="vs__selected sortable-item mt-2">
+                        {{ tag }}
+                        <button
+                            @click="deselect(tag)"
+                            type="button"
+                            :aria-label="__('Remove tag')"
+                            class="vs__deselect"
+                        >
+                            <span>×</span>
+                        </button>
+                    </span>
+                </div>
+            </sortable-list>
+        </template>
     </v-select>
 </template>
 
 <style scoped>
-    .draggable-source--is-dragging {
-        @apply opacity-75 bg-transparent border-dashed
-    }
+.draggable-source--is-dragging {
+    @apply border-dashed bg-transparent opacity-75;
+}
 </style>
 
 <script>
 import Fieldtype from './Fieldtype.vue';
-import HasInputOptions from './HasInputOptions.js'
+import HasInputOptions from './HasInputOptions.js';
 import { SortableList, SortableItem } from '../sortable/Sortable';
 
 export default {
-
     components: {
         SortableList,
         SortableItem,
@@ -86,6 +94,5 @@ export default {
             event.preventDefault();
         },
     },
-
 };
 </script>
diff --git a/resources/js/components/fieldtypes/TagsIndexFieldtype.vue b/resources/js/components/fieldtypes/TagsIndexFieldtype.vue
index f5cc052a51..02662b1b11 100644
--- a/resources/js/components/fieldtypes/TagsIndexFieldtype.vue
+++ b/resources/js/components/fieldtypes/TagsIndexFieldtype.vue
@@ -6,7 +6,6 @@
 import IndexFieldtype from './IndexFieldtype.vue';
 
 export default {
-
     mixins: [IndexFieldtype],
 
     computed: {
diff --git a/resources/js/components/fieldtypes/TemplateFieldtype.vue b/resources/js/components/fieldtypes/TemplateFieldtype.vue
index 7aa52d6feb..2087bdc577 100644
--- a/resources/js/components/fieldtypes/TemplateFieldtype.vue
+++ b/resources/js/components/fieldtypes/TemplateFieldtype.vue
@@ -10,13 +10,17 @@
             :placeholder="__(config.placeholder)"
             :disabled="isReadOnly"
             :options="options"
-            :reduce="selection => selection.value"
+            :reduce="(selection) => selection.value"
             :searchable="true"
             :push-tags="false"
             :multiple="false"
-            :model-value="value">
+            :model-value="value"
+        >
             <template #no-options>
-                <div class="text-sm text-gray-700 rtl:text-right ltr:text-left py-2 px-4" v-text="__('No templates to choose from.')" />
+                <div
+                    class="px-4 py-2 text-sm text-gray-700 ltr:text-left rtl:text-right"
+                    v-text="__('No templates to choose from.')"
+                />
             </template>
         </v-select>
     </div>
@@ -26,21 +30,18 @@
 import Fieldtype from './Fieldtype.vue';
 import PositionsSelectOptions from '../../mixins/PositionsSelectOptions';
 
-
 export default {
-
     mixins: [Fieldtype, PositionsSelectOptions],
 
-    data: function() {
+    data: function () {
         return {
             loading: true,
-            options: []
-        }
+            options: [],
+        };
     },
 
     mounted() {
-        this.$axios.get(cp_url('api/templates')).then(response => {
-
+        this.$axios.get(cp_url('api/templates')).then((response) => {
             var templates = response.data;
 
             // Filter out partials
@@ -72,17 +73,14 @@ export default {
 
             _.each(templates, (template) => {
                 options.push({
-                    label: this.config.folder
-                        ? template.substring(this.config.folder.length + 1)
-                        : template,
-                    value: template
+                    label: this.config.folder ? template.substring(this.config.folder.length + 1) : template,
+                    value: template,
                 });
             });
 
             this.options = options;
             this.loading = false;
         });
-    }
-
+    },
 };
 </script>
diff --git a/resources/js/components/fieldtypes/TemplateFolderFieldtype.vue b/resources/js/components/fieldtypes/TemplateFolderFieldtype.vue
index c18cdb8905..6fec381503 100644
--- a/resources/js/components/fieldtypes/TemplateFolderFieldtype.vue
+++ b/resources/js/components/fieldtypes/TemplateFolderFieldtype.vue
@@ -14,20 +14,19 @@
 import Fieldtype from './Fieldtype.vue';
 
 export default {
-
     mixins: [Fieldtype],
 
     inject: ['storeName'],
 
     computed: {
-
         relationshipMeta() {
-            return {...this.meta, ...{
-                getBaseSelectionsUrlParameters: { }
-            }};
-        }
-
-    }
-
+            return {
+                ...this.meta,
+                ...{
+                    getBaseSelectionsUrlParameters: {},
+                },
+            };
+        },
+    },
 };
 </script>
diff --git a/resources/js/components/fieldtypes/TextFieldtype.vue b/resources/js/components/fieldtypes/TextFieldtype.vue
index 71b43c3dc5..6fbe93be4e 100644
--- a/resources/js/components/fieldtypes/TextFieldtype.vue
+++ b/resources/js/components/fieldtypes/TextFieldtype.vue
@@ -25,18 +25,16 @@
 import Fieldtype from './Fieldtype.vue';
 
 export default {
-
     mixins: [Fieldtype],
 
     methods: {
         inputUpdated(value) {
-            if (! this.config.debounce) {
-                return this.update(value)
+            if (!this.config.debounce) {
+                return this.update(value);
             }
 
-            this.updateDebounced(value)
-        }
-    }
-
-}
+            this.updateDebounced(value);
+        },
+    },
+};
 </script>
diff --git a/resources/js/components/fieldtypes/TextareaFieldtype.vue b/resources/js/components/fieldtypes/TextareaFieldtype.vue
index 6dc7b773aa..486b717515 100644
--- a/resources/js/components/fieldtypes/TextareaFieldtype.vue
+++ b/resources/js/components/fieldtypes/TextareaFieldtype.vue
@@ -9,15 +9,14 @@
         :id="fieldId"
         @blur="$emit('blur')"
         @focus="$emit('focus')"
-        @update:model-value="updateDebounced" />
+        @update:model-value="updateDebounced"
+    />
 </template>
 
 <script>
 import Fieldtype from './Fieldtype.vue';
 
 export default {
-
-    mixins: [Fieldtype]
-
-}
+    mixins: [Fieldtype],
+};
 </script>
diff --git a/resources/js/components/fieldtypes/TimeFieldtype.vue b/resources/js/components/fieldtypes/TimeFieldtype.vue
index fdc46f67c4..6c38122d6a 100644
--- a/resources/js/components/fieldtypes/TimeFieldtype.vue
+++ b/resources/js/components/fieldtypes/TimeFieldtype.vue
@@ -1,8 +1,13 @@
 <template>
     <div class="time-fieldtype-container">
         <div class="input-group">
-            <button class="input-group-prepend flex items-center" v-tooltip="__('Set to now')" @click="setToNow" v-if="!isReadOnly">
-                <svg-icon name="light/time" class="w-4 h-4" />
+            <button
+                class="input-group-prepend flex items-center"
+                v-tooltip="__('Set to now')"
+                @click="setToNow"
+                v-if="!isReadOnly"
+            >
+                <svg-icon name="light/time" class="h-4 w-4" />
             </button>
             <input
                 type="time"
@@ -24,7 +29,6 @@ import Fieldtype from './Fieldtype.vue';
 import IMask from 'imask';
 
 export default {
-
     mixins: [Fieldtype],
 
     props: {
@@ -63,7 +67,7 @@ export default {
     computed: {
         useSeconds() {
             return this.showSeconds || this.config.seconds_enabled;
-        }
+        },
     },
 
     created() {
@@ -73,7 +77,7 @@ export default {
     mounted() {
         // The mask will replace the need for binding the value to the input.
         this.mask = IMask(this.$refs.time, {
-            mask: this.useSeconds ? '0[0]:`0[0]:`00' : '0[0]:`00'
+            mask: this.useSeconds ? '0[0]:`0[0]:`00' : '0[0]:`00',
         });
 
         // Bind initial value to mask.
@@ -81,7 +85,7 @@ export default {
 
         // We use this instead of v-model or @input because input would be early and give us the raw value.
         // In this event listener, we get masked value (with colons/guides). // e.g. 032 vs. 03:2
-        this.mask.on('accept', e => this.inputValue = this.mask.value);
+        this.mask.on('accept', (e) => (this.inputValue = this.mask.value));
     },
 
     unmounted() {
@@ -96,7 +100,7 @@ export default {
         },
 
         focus() {
-             this.$refs.time.focus();
+            this.$refs.time.focus();
         },
 
         // This will take the value of the input, add appropriate padding, and update the actual fieldtype value.
@@ -105,7 +109,7 @@ export default {
         //      03:20:4 -> 03:20:04
         //      3:2:4   -> 03:02:04
         updateActualValue() {
-            if (! this.inputValue) {
+            if (!this.inputValue) {
                 this.update(null);
                 return;
             }
@@ -113,7 +117,7 @@ export default {
             let parts = this.inputValue.split(':');
             if (parts.length === 1) parts.push('00');
             if (parts.length === 2 && this.useSeconds) parts.push('00');
-            parts = parts.map(part => part.padStart(2, '0'));
+            parts = parts.map((part) => part.padStart(2, '0'));
 
             let newValue = parts.join(':');
 
@@ -127,9 +131,7 @@ export default {
             const minutes = String(date.getMinutes()).padStart(2, '0');
             const seconds = String(date.getSeconds()).padStart(2, '0');
 
-            this.update(this.useSeconds
-                ? `${hours}:${minutes}:${seconds}`
-                : `${hours}:${minutes}`);
+            this.update(this.useSeconds ? `${hours}:${minutes}:${seconds}` : `${hours}:${minutes}`);
         },
 
         adjustPart(e, direction, callback) {
@@ -161,7 +163,6 @@ export default {
                 e.target.selectionEnd = caretPosition;
             });
         },
-    }
-
+    },
 };
 </script>
diff --git a/resources/js/components/fieldtypes/ToggleFieldtype.vue b/resources/js/components/fieldtypes/ToggleFieldtype.vue
index 0ec6fa383f..f2c825dfd2 100644
--- a/resources/js/components/fieldtypes/ToggleFieldtype.vue
+++ b/resources/js/components/fieldtypes/ToggleFieldtype.vue
@@ -12,17 +12,17 @@ export default {
     mixins: [Fieldtype],
 
     computed: {
-
-        inlineLabel(){
-            return this.value ? (this.config.inline_label_when_true || this.config.inline_label) : this.config.inline_label;
+        inlineLabel() {
+            return this.value
+                ? this.config.inline_label_when_true || this.config.inline_label
+                : this.config.inline_label;
         },
 
         replicatorPreview() {
-            if (! this.showFieldPreviews || ! this.config.replicator_preview) return;
+            if (!this.showFieldPreviews || !this.config.replicator_preview) return;
 
             return (this.value ? '✓' : '✗') + ' ' + __(this.config.display);
-        }
-
-    }
+        },
+    },
 };
 </script>
diff --git a/resources/js/components/fieldtypes/ToggleIndexFieldtype.vue b/resources/js/components/fieldtypes/ToggleIndexFieldtype.vue
index c8a5100b65..6d048b5e82 100644
--- a/resources/js/components/fieldtypes/ToggleIndexFieldtype.vue
+++ b/resources/js/components/fieldtypes/ToggleIndexFieldtype.vue
@@ -9,8 +9,6 @@
 import IndexFieldtype from './IndexFieldtype.vue';
 
 export default {
-
     mixins: [IndexFieldtype],
-
 };
 </script>
diff --git a/resources/js/components/fieldtypes/UserRolesFieldtype.vue b/resources/js/components/fieldtypes/UserRolesFieldtype.vue
index 7013f6039d..c470d847b3 100644
--- a/resources/js/components/fieldtypes/UserRolesFieldtype.vue
+++ b/resources/js/components/fieldtypes/UserRolesFieldtype.vue
@@ -7,11 +7,12 @@
             :clearable="config.clearable"
             :disabled="config.disabled"
             :options="options"
-            :reduce="selection => selection.value"
+            :reduce="(selection) => selection.value"
             :searchable="true"
             :push-tags="false"
             :multiple="false"
-            :value="value" />
+            :value="value"
+        />
     </div>
 </template>
 
@@ -19,24 +20,23 @@
 import Fieldtype from './Fieldtype.vue';
 
 export default {
-
     mixins: [Fieldtype],
 
-    data: function() {
+    data: function () {
         return {
             loading: true,
-            options: []
-        }
+            options: [],
+        };
     },
 
     mounted() {
-        this.$axios.get(cp_url('roles')).then(response => {
+        this.$axios.get(cp_url('roles')).then((response) => {
             var options = [];
 
-            _.each(response.data, function(role) {
+            _.each(response.data, function (role) {
                 options.push({
                     value: role.handle,
-                    label: role.title
+                    label: role.title,
                 });
             });
 
@@ -47,9 +47,8 @@ export default {
 
     methods: {
         handleUpdate(value) {
-            this.update(value.value)
-        }
-    }
-
+            this.update(value.value);
+        },
+    },
 };
 </script>
diff --git a/resources/js/components/fieldtypes/VideoFieldtype.vue b/resources/js/components/fieldtypes/VideoFieldtype.vue
index 5a99c3f502..fc5dd0b490 100644
--- a/resources/js/components/fieldtypes/VideoFieldtype.vue
+++ b/resources/js/components/fieldtypes/VideoFieldtype.vue
@@ -3,7 +3,8 @@
         <div class="flex items-center">
             <div class="input-group">
                 <div class="input-group-prepend">{{ __('URL') }}</div>
-                <input type="text"
+                <input
+                    type="text"
                     v-model="data"
                     class="input-text flex-1"
                     :class="{ 'bg-white dark:bg-dark-600': !isReadOnly }"
@@ -11,11 +12,12 @@
                     :readonly="isReadOnly"
                     :placeholder="__(config.placeholder) || 'https://www.youtube.com/watch?v=dQw4w9WgXcQ'"
                     @focus="$emit('focus')"
-                    @blur="$emit('blur')" />
+                    @blur="$emit('blur')"
+                />
             </div>
         </div>
 
-        <p v-if="isInvalid" class="text-red-500 mt-4">{{ __('statamic::validation.url') }}</p>
+        <p v-if="isInvalid" class="mt-4 text-red-500">{{ __('statamic::validation.url') }}</p>
 
         <div class="video-preview-wrapper" v-if="!isInvalid && (isEmbeddable || isVideo)">
             <div class="embed-video" v-if="isEmbeddable && canShowIframe">
@@ -38,19 +40,17 @@ export default {
         return {
             data: this.value || '',
             canShowIframe: false,
-        }
+        };
     },
 
     watch: {
-
-        data: _.debounce(function (value)  {
+        data: _.debounce(function (value) {
             this.update(value);
         }, 500),
 
         value(value) {
             this.data = value;
-        }
-
+        },
     },
 
     mounted() {
@@ -75,7 +75,7 @@ export default {
             if (embed_url.includes('vimeo')) {
                 embed_url = embed_url.replace('/vimeo.com', '/player.vimeo.com/video');
 
-                if (! this.data.includes('progressive_redirect') && embed_url.split('/').length > 5) {
+                if (!this.data.includes('progressive_redirect') && embed_url.split('/').length > 5) {
                     let hash = embed_url.substr(embed_url.lastIndexOf('/') + 1);
                     embed_url = embed_url.substr(0, embed_url.lastIndexOf('/')) + '?h=' + hash.replace('?', '&');
                 }
@@ -90,29 +90,34 @@ export default {
         },
 
         isEmbeddable() {
-            return this.isUrl && this.data.includes('youtube') || this.data.includes('vimeo') || this.data.includes('youtu.be');
+            return (
+                (this.isUrl && this.data.includes('youtube')) ||
+                this.data.includes('vimeo') ||
+                this.data.includes('youtu.be')
+            );
         },
 
         isInvalid() {
-            let htmlRegex = new RegExp(/<([A-Z][A-Z0-9]*)\b[^>]*>.*?<\/\1>|<([A-Z][A-Z0-9]*)\b[^\/]*\/>/i)
+            let htmlRegex = new RegExp(/<([A-Z][A-Z0-9]*)\b[^>]*>.*?<\/\1>|<([A-Z][A-Z0-9]*)\b[^\/]*\/>/i);
 
             return htmlRegex.test(this.data);
         },
 
         isUrl() {
-            let regex = new RegExp('^(https?|ftp):\/\/[^\s/$.?#].*$', 'i')
+            let regex = new RegExp('^(https?|ftp):\/\/[^\s/$.?#].*$', 'i');
 
             return regex.test(this.data);
         },
 
         isVideo() {
-            return ! this.isEmbeddable && (
-                this.data.includes('.mp4') ||
-                this.data.includes('.ogv') ||
-                this.data.includes('.mov') ||
-                this.data.includes('.webm')
-            )
-        }
+            return (
+                !this.isEmbeddable &&
+                (this.data.includes('.mp4') ||
+                    this.data.includes('.ogv') ||
+                    this.data.includes('.mov') ||
+                    this.data.includes('.webm'))
+            );
+        },
     },
 };
 </script>
diff --git a/resources/js/components/fieldtypes/WidthFieldtype.vue b/resources/js/components/fieldtypes/WidthFieldtype.vue
index d1667d52ac..f5b5dedc65 100644
--- a/resources/js/components/fieldtypes/WidthFieldtype.vue
+++ b/resources/js/components/fieldtypes/WidthFieldtype.vue
@@ -20,8 +20,6 @@ export default {
         WidthSelector,
     },
 
-    methods: {
-
-    }
+    methods: {},
 };
 </script>
diff --git a/resources/js/components/fieldtypes/YamlFieldtype.vue b/resources/js/components/fieldtypes/YamlFieldtype.vue
index 96576545e7..860361068d 100644
--- a/resources/js/components/fieldtypes/YamlFieldtype.vue
+++ b/resources/js/components/fieldtypes/YamlFieldtype.vue
@@ -7,23 +7,22 @@
 
 <script>
 import Fieldtype from './Fieldtype.vue';
-import CodeMirror from 'codemirror'
-import 'codemirror/mode/yaml/yaml'
+import CodeMirror from 'codemirror';
+import 'codemirror/mode/yaml/yaml';
 
 export default {
-
     mixins: [Fieldtype],
 
     data() {
         return {
-            codemirror: null
-        }
+            codemirror: null,
+        };
     },
 
     computed: {
         readOnlyOption() {
             return this.isReadOnly ? 'nocursor' : false;
-        }
+        },
     },
 
     mounted() {
@@ -50,14 +49,13 @@ export default {
     watch: {
         readOnlyOption(val) {
             this.codemirror.setOption('readOnly', val);
-        }
+        },
     },
 
     methods: {
         focus() {
             this.codemirror.focus();
-        }
-    }
-
+        },
+    },
 };
 </script>
diff --git a/resources/js/components/fieldtypes/assets/Asset.js b/resources/js/components/fieldtypes/assets/Asset.js
index ab72d882c9..9089894f62 100644
--- a/resources/js/components/fieldtypes/assets/Asset.js
+++ b/resources/js/components/fieldtypes/assets/Asset.js
@@ -1,9 +1,8 @@
 import AssetEditor from '../../assets/Editor/Editor.vue';
 
 export default {
-
     components: {
-        AssetEditor
+        AssetEditor,
     },
 
     props: {
@@ -11,23 +10,21 @@ export default {
         readOnly: Boolean,
         showFilename: {
             type: Boolean,
-            default: true
+            default: true,
         },
         showSetAlt: {
             type: Boolean,
-            default: true
-        }
+            default: true,
+        },
     },
 
     data() {
         return {
-            editing: false
-        }
+            editing: false,
+        };
     },
 
-
     computed: {
-
         isImage() {
             return this.asset.isImage;
         },
@@ -37,11 +34,11 @@ export default {
         },
 
         container() {
-            return this.asset.id.substr(0, this.asset.id.indexOf('::'))
+            return this.asset.id.substr(0, this.asset.id.indexOf('::'));
         },
 
         canBeTransparent() {
-            return ['png', 'svg', 'webp', 'avif'].includes(this.asset.extension)
+            return ['png', 'svg', 'webp', 'avif'].includes(this.asset.extension);
         },
 
         canDownload() {
@@ -58,12 +55,10 @@ export default {
 
         needsAlt() {
             return (this.asset.isImage || this.asset.isSvg) && !this.asset.values.alt;
-        }
+        },
     },
 
-
     methods: {
-
         edit() {
             if (this.readOnly) return;
 
@@ -77,7 +72,7 @@ export default {
         },
 
         open() {
-            if (! this.asset.url) {
+            if (!this.asset.url) {
                 return this.download();
             }
 
@@ -105,7 +100,5 @@ export default {
             }
             this.closeEditor();
         },
-
-    }
-
-}
+    },
+};
diff --git a/resources/js/components/fieldtypes/assets/AssetRow.vue b/resources/js/components/fieldtypes/assets/AssetRow.vue
index b2538abebf..b3bfda9284 100644
--- a/resources/js/components/fieldtypes/assets/AssetRow.vue
+++ b/resources/js/components/fieldtypes/assets/AssetRow.vue
@@ -1,49 +1,49 @@
 <template>
-    <tr class="cursor-grab bg-white dark:bg-dark-750 hover:bg-gray-100 dark:hover:bg-dark-700">
-        <td class="flex items-center h-full">
+    <tr class="cursor-grab bg-white hover:bg-gray-100 dark:bg-dark-750 dark:hover:bg-dark-700">
+        <td class="flex h-full items-center">
             <div
                 v-if="canShowSvg"
-                class="img svg-img h-7 w-7 bg-no-repeat bg-center bg-cover text-center flex items-center justify-center"
+                class="img svg-img flex h-7 w-7 items-center justify-center bg-cover bg-center bg-no-repeat text-center"
                 :style="'background-image:url(' + thumbnail + ')'"
             ></div>
             <button
-                class="w-7 h-7 cursor-pointer whitespace-nowrap flex items-center justify-center"
+                class="flex h-7 w-7 cursor-pointer items-center justify-center whitespace-nowrap"
                 @click="editOrOpen"
                 v-else
             >
                 <img
-                    class="asset-thumbnail max-h-full max-w-full rounded w-7 h-7 object-cover"
+                    class="asset-thumbnail h-7 max-h-full w-7 max-w-full rounded object-cover"
                     loading="lazy"
                     :src="thumbnail"
                     :alt="asset.basename"
                     v-if="isImage"
                 />
-                <file-icon :extension="asset.extension" v-else class="w-7 h-7" />
+                <file-icon :extension="asset.extension" v-else class="h-7 w-7" />
             </button>
             <button
                 v-if="showFilename"
                 @click="editOrOpen"
-                class="flex items-center flex-1 rtl:mr-3 ltr:ml-3 text-xs rtl:text-right ltr:text-left truncate w-full"
+                class="flex w-full flex-1 items-center truncate text-xs ltr:ml-3 ltr:text-left rtl:mr-3 rtl:text-right"
                 :title="__('Edit')"
                 :aria-label="__('Edit Asset')"
             >
                 {{ asset.basename }}
             </button>
-            <div v-text="asset.size" class="hidden @xs:inline asset-filesize text-xs text-gray-600 px-2" />
+            <div v-text="asset.size" class="asset-filesize hidden px-2 text-xs text-gray-600 @xs:inline" />
         </td>
         <td class="w-24" v-if="showSetAlt">
             <button
-                class="asset-set-alt text-blue dark:text-dark-blue-100 px-4 text-sm hover:text-black dark:hover:text-dark-100"
+                class="asset-set-alt px-4 text-sm text-blue hover:text-black dark:text-dark-blue-100 dark:hover:text-dark-100"
                 type="button"
                 @click="editOrOpen"
                 v-if="needsAlt"
             >
-                {{ asset.values.alt ? "✅" : __("Set Alt") }}
+                {{ asset.values.alt ? '✅' : __('Set Alt') }}
             </button>
         </td>
-        <td class="p-0 w-8 rtl:text-left ltr:text-right align-middle" v-if="!readOnly">
+        <td class="w-8 p-0 align-middle ltr:text-right rtl:text-left" v-if="!readOnly">
             <button
-                class="flex items-center p-1 w-6 h-8 text-lg antialiased text-gray-600 dark:text-dark-150 hover:text-gray-900 dark:hover:text-dark-100"
+                class="flex h-8 w-6 items-center p-1 text-lg text-gray-600 antialiased hover:text-gray-900 dark:text-dark-150 dark:hover:text-dark-100"
                 @click="remove"
                 :title="__('Remove')"
                 :aria-label="__('Remove Asset')"
@@ -65,16 +65,14 @@
 </template>
 
 <script>
-import Asset from "./Asset";
+import Asset from './Asset';
 export default {
-
     mixins: [Asset],
 
     methods: {
         editOrOpen() {
             return this.readOnly ? this.open() : this.edit();
-        }
+        },
     },
-
 };
 </script>
diff --git a/resources/js/components/fieldtypes/assets/AssetTile.vue b/resources/js/components/fieldtypes/assets/AssetTile.vue
index f4b7cb788a..e3f19398b0 100644
--- a/resources/js/components/fieldtypes/assets/AssetTile.vue
+++ b/resources/js/components/fieldtypes/assets/AssetTile.vue
@@ -30,11 +30,7 @@
 
                     <template v-else>
                         <img v-if="canShowSvg" :src="asset.url" :title="label" class="p-4" />
-                        <file-icon
-                            v-else
-                            :extension="asset.extension"
-                            class="p-4 h-full w-full"
-                        />
+                        <file-icon v-else :extension="asset.extension" class="h-full w-full p-4" />
                     </template>
                 </template>
 
@@ -42,11 +38,11 @@
                     <div class="flex items-center justify-center space-x-1 rtl:space-x-reverse">
                         <template v-if="!readOnly">
                             <button @click="edit" class="btn btn-icon" :title="__('Edit')">
-                                <svg-icon name="micro/sharp-pencil" class="h-4 my-2" />
+                                <svg-icon name="micro/sharp-pencil" class="my-2 h-4" />
                             </button>
 
                             <button @click="remove" class="btn btn-icon" :title="__('Remove')">
-                                <span class="text-lg antialiased w-4">×</span>
+                                <span class="w-4 text-lg antialiased">×</span>
                             </button>
                         </template>
 
@@ -57,7 +53,7 @@
                                 class="btn btn-icon"
                                 :title="__('Open in a new window')"
                             >
-                                <svg-icon name="light/external-link" class="h-4 my-2" />
+                                <svg-icon name="light/external-link" class="my-2 h-4" />
                             </button>
 
                             <button
@@ -66,37 +62,27 @@
                                 class="btn btn-icon"
                                 :title="__('Download file')"
                             >
-                                <svg-icon name="light/download" class="h-4 my-2" />
+                                <svg-icon name="light/download" class="my-2 h-4" />
                             </button>
                         </template>
                     </div>
                 </div>
-
             </div>
         </div>
 
         <div class="asset-meta flex items-center" v-if="showFilename">
-            <div
-                class="asset-filename flex-1 px-2 py-1"
-                :title="label"
-                :class="{ 'text-center': !needsAlt }"
-            >
+            <div class="asset-filename flex-1 px-2 py-1" :title="label" :class="{ 'text-center': !needsAlt }">
                 {{ label }}
             </div>
-            <button
-                class="asset-meta-btn"
-                type="button"
-                @click="edit"
-                v-if="showSetAlt && needsAlt"
-            >
-                {{ asset.values.alt ? "✅" : __("Set Alt") }}
+            <button class="asset-meta-btn" type="button" @click="edit" v-if="showSetAlt && needsAlt">
+                {{ asset.values.alt ? '✅' : __('Set Alt') }}
             </button>
         </div>
     </div>
 </template>
 
 <script>
-import Asset from "./Asset";
+import Asset from './Asset';
 
 export default {
     mixins: [Asset],
@@ -110,7 +96,7 @@ export default {
 
                 if (!parent) return false;
 
-                if (parent.constructor.name === "AssetBrowser") {
+                if (parent.constructor.name === 'AssetBrowser') {
                     return true;
                 }
 
@@ -121,6 +107,6 @@ export default {
         isInBardField() {
             return this.$parent.isInBardField;
         },
-    }
+    },
 };
 </script>
diff --git a/resources/js/components/fieldtypes/assets/AssetsFieldtype.vue b/resources/js/components/fieldtypes/assets/AssetsFieldtype.vue
index 28e684157b..093be3ca2b 100644
--- a/resources/js/components/fieldtypes/assets/AssetsFieldtype.vue
+++ b/resources/js/components/fieldtypes/assets/AssetsFieldtype.vue
@@ -1,9 +1,8 @@
 <template>
     <div class="@container">
-
         <div
             v-if="hasPendingDynamicFolder"
-            class="py-3 px-4 text-sm w-full rounded-md border border-dashed text-gray-700 dark:text-dark-175 dark:border-dark-200"
+            class="w-full rounded-md border border-dashed px-4 py-3 text-sm text-gray-700 dark:border-dark-200 dark:text-dark-175"
             v-html="pendingText"
         />
 
@@ -18,9 +17,8 @@
             v-slot="{ dragging }"
         >
             <div class="assets-fieldtype-drag-container">
-
                 <div class="drag-notification" v-if="config.allow_uploads" v-show="dragging && !showSelector">
-                    <svg-icon name="upload" class="h-6 @md:h-8 w-6 @md:w-8 rtl:ml-2 ltr:mr-2 @md:mr-6" />
+                    <svg-icon name="upload" class="h-6 w-6 @md:mr-6 @md:h-8 @md:w-8 ltr:mr-2 rtl:ml-2" />
                     <span>{{ __('Drop to Upload') }}</span>
                 </div>
 
@@ -29,25 +27,30 @@
                     class="assets-fieldtype-picker space-x-4"
                     :class="{
                         'is-expanded': expanded,
-                        'bard-drag-handle': isInBardField
+                        'bard-drag-handle': isInBardField,
                     }"
                 >
                     <button
                         v-if="canBrowse"
-                        :class="{'opacity-0': dragging }"
+                        :class="{ 'opacity-0': dragging }"
                         type="button"
                         class="btn btn-with-icon"
                         @click="openSelector"
                         @keyup.space.enter="openSelector"
-                        tabindex="0">
-                        <svg-icon name="folder-image" class="w-4 h-4 text-gray-800 dark:text-dark-150"></svg-icon>
+                        tabindex="0"
+                    >
+                        <svg-icon name="folder-image" class="h-4 w-4 text-gray-800 dark:text-dark-150"></svg-icon>
                         {{ __('Browse') }}
                     </button>
-                    <p class="flex-1 asset-upload-control" v-if="canUpload">
+                    <p class="asset-upload-control flex-1" v-if="canUpload">
                         <button type="button" class="upload-text-button" @click.prevent="uploadFile">
                             {{ __('Upload file') }}
                         </button>
-                        <span v-if="soloAsset" class="drag-drop-text" v-text="__('or drag & drop here to replace.')"></span>
+                        <span
+                            v-if="soloAsset"
+                            class="drag-drop-text"
+                            v-text="__('or drag & drop here to replace.')"
+                        ></span>
                         <span v-else class="drag-drop-text" v-text="__('or drag & drop here.')"></span>
                     </p>
                     <dropdown-list v-if="meta.rename_folder">
@@ -68,7 +71,6 @@
                 />
 
                 <template v-if="expanded">
-
                     <sortable-list
                         v-if="displayMode === 'grid'"
                         v-model="assets"
@@ -82,7 +84,11 @@
                         :animate="false"
                         append-to="body"
                     >
-                        <div class="asset-grid-listing border dark:border-dark-900 rounded overflow-hidden" :class="{ 'rounded-t-none': !isReadOnly && (showPicker || uploads.length) }" ref="assets">
+                        <div
+                            class="asset-grid-listing overflow-hidden rounded border dark:border-dark-900"
+                            :class="{ 'rounded-t-none': !isReadOnly && (showPicker || uploads.length) }"
+                            ref="assets"
+                        >
                             <asset-tile
                                 v-for="asset in assets"
                                 :key="asset.id"
@@ -92,7 +98,8 @@
                                 :show-set-alt="showSetAlt"
                                 @updated="assetUpdated"
                                 @removed="assetRemoved"
-                                @id-changed="idChanged(asset.id, $event)">
+                                @id-changed="idChanged(asset.id, $event)"
+                            >
                             </asset-tile>
                         </div>
                     </sortable-list>
@@ -109,7 +116,8 @@
                                 :mirror="false"
                             >
                                 <tbody ref="assets">
-                                    <component is="assetRow"
+                                    <component
+                                        is="assetRow"
                                         class="asset-row"
                                         v-for="asset in assets"
                                         :key="asset.id"
@@ -119,7 +127,8 @@
                                         :show-set-alt="showSetAlt"
                                         @updated="assetUpdated"
                                         @removed="assetRemoved"
-                                        @id-changed="idChanged(asset.id, $event)" />
+                                        @id-changed="idChanged(asset.id, $event)"
+                                    />
                                 </tbody>
                             </sortable-list>
                         </table>
@@ -138,37 +147,34 @@
                 :max-files="maxFiles"
                 :query-scopes="queryScopes"
                 @selected="assetsSelected"
-                @closed="closeSelector">
+                @closed="closeSelector"
+            >
             </selector>
         </stack>
     </div>
 </template>
 
-
 <style>
+.asset-listing-uploads {
+    border: 1px dashed #ccc;
+    border-top: 0;
+    margin: 0;
+    padding: 10px 20px;
 
-    .asset-listing-uploads {
-        border: 1px dashed #ccc;
-        border-top: 0;
+    table {
         margin: 0;
-        padding: 10px 20px;
-
-        table {
-            margin: 0;
-        }
-
-        thead {
-            display: none;
-        }
+    }
 
-        tr:first-child {
-            border-top: 0;
-        }
+    thead {
+        display: none;
     }
 
+    tr:first-child {
+        border-top: 0;
+    }
+}
 </style>
 
-
 <script>
 import Fieldtype from '../Fieldtype.vue';
 import AssetRow from './AssetRow.vue';
@@ -179,7 +185,6 @@ import Uploads from '../../assets/Uploads.vue';
 import { SortableList } from '../../sortable/Sortable';
 
 export default {
-
     components: {
         AssetTile,
         AssetRow,
@@ -189,10 +194,8 @@ export default {
         SortableList,
     },
 
-
     mixins: [Fieldtype],
 
-
     inject: {
         isInBardField: {
             name: 'isInBardField',
@@ -205,10 +208,9 @@ export default {
         isInLinkField: {
             name: 'isInLinkField',
             default: false,
-        }
+        },
     },
 
-
     data() {
         return {
             assets: [],
@@ -224,9 +226,7 @@ export default {
         };
     },
 
-
     computed: {
-
         /**
          * Whether any assets have been selected.
          */
@@ -265,12 +265,12 @@ export default {
         },
 
         hasPendingDynamicFolder() {
-            return this.isUsingDynamicFolder && ! this.lockedDynamicFolder && ! this.dynamicFolder;
+            return this.isUsingDynamicFolder && !this.lockedDynamicFolder && !this.dynamicFolder;
         },
 
         dynamicFolder() {
             const field = this.config.dynamic;
-            if (! ['id', 'slug', 'author'].includes(field)) {
+            if (!['id', 'slug', 'author'].includes(field)) {
                 throw new Error(`Dynamic folder field [${field}] is invalid. Must be one of: id, slug, author`);
             }
 
@@ -284,7 +284,7 @@ export default {
             let store;
             let parent = this;
 
-            while (! parent.storeName) {
+            while (!parent.storeName) {
                 parent = parent.$parent;
                 store = parent.storeName;
                 if (parent === this.$root) return null;
@@ -305,7 +305,7 @@ export default {
          * The maximum number of files allowed.
          */
         maxFiles() {
-            if (! this.config.max_files) return Infinity;
+            if (!this.config.max_files) return Infinity;
 
             return parseInt(this.config.max_files);
         },
@@ -364,67 +364,72 @@ export default {
         },
 
         replicatorPreview() {
-            if (! this.showFieldPreviews || ! this.config.replicator_preview) return;
+            if (!this.showFieldPreviews || !this.config.replicator_preview) return;
 
-            return replicatorPreviewHtml(_.map(this.assets, (asset) => {
-                return (asset.isImage || asset.isSvg) ?
-                    `<img src="${asset.thumbnail}" width="20" class="max-w-5 max-h-5" height="20" title="${asset.basename}" />`
-                    : asset.basename;
-            }).join(', '));
+            return replicatorPreviewHtml(
+                _.map(this.assets, (asset) => {
+                    return asset.isImage || asset.isSvg
+                        ? `<img src="${asset.thumbnail}" width="20" class="max-w-5 max-h-5" height="20" title="${asset.basename}" />`
+                        : asset.basename;
+                }).join(', '),
+            );
         },
 
         showPicker() {
-            if (! this.canBrowse && ! this.canUpload) return false
+            if (!this.canBrowse && !this.canUpload) return false;
 
-            if (this.maxFilesReached && ! this.isFullWidth) return false
+            if (this.maxFilesReached && !this.isFullWidth) return false;
 
-            if (this.maxFilesReached && (this.isInGridField || this.isInLinkField)) return false
+            if (this.maxFilesReached && (this.isInGridField || this.isInLinkField)) return false;
 
-            return true
+            return true;
         },
 
         isFullWidth() {
-            return ! (this.config.width && this.config.width < 100)
+            return !(this.config.width && this.config.width < 100);
         },
 
         showSetAlt() {
-            return this.config.show_set_alt && ! this.isReadOnly;
+            return this.config.show_set_alt && !this.isReadOnly;
         },
 
         canBrowse() {
-            const hasPermission = this.can('configure asset containers') || this.can('view '+ this.container +' assets');
+            const hasPermission =
+                this.can('configure asset containers') || this.can('view ' + this.container + ' assets');
 
-            if (! hasPermission) return false;
+            if (!hasPermission) return false;
 
-            return ! this.hasPendingDynamicFolder;
+            return !this.hasPendingDynamicFolder;
         },
 
         canUpload() {
-            const hasPermission = this.config.allow_uploads && (this.can('configure asset containers') || this.can('upload '+ this.container +' assets'));
+            const hasPermission =
+                this.config.allow_uploads &&
+                (this.can('configure asset containers') || this.can('upload ' + this.container + ' assets'));
 
-            if (! hasPermission) return false;
+            if (!hasPermission) return false;
 
-            return ! this.hasPendingDynamicFolder;
+            return !this.hasPendingDynamicFolder;
         },
 
         pendingText() {
             return this.config.dynamic === 'id'
                 ? __('statamic::fieldtypes.assets.dynamic_folder_pending_save')
-                : __('statamic::fieldtypes.assets.dynamic_folder_pending_field', {field: `<code>${this.config.dynamic}</code>`});
-        }
-
+                : __('statamic::fieldtypes.assets.dynamic_folder_pending_field', {
+                      field: `<code>${this.config.dynamic}</code>`,
+                  });
+        },
     },
 
     events: {
-        'close-selector' () {
+        'close-selector'() {
             this.closeSelector();
-        }
+        },
     },
 
     methods: {
-
         initializeAssets() {
-            if (! this.meta.data) {
+            if (!this.meta.data) {
                 this.loadAssets(this.value);
                 this.initializing = false;
                 return;
@@ -445,7 +450,7 @@ export default {
          * Accepts an array of asset URLs and/or IDs.
          */
         loadAssets(assets) {
-            if (! assets || ! assets.length) {
+            if (!assets || !assets.length) {
                 this.loading = false;
                 this.assets = [];
                 return;
@@ -453,12 +458,14 @@ export default {
 
             this.loading = true;
 
-            this.$axios.post(cp_url('assets-fieldtype'), {
-                assets
-            }).then(response => {
-                this.assets = response.data;
-                this.loading = false;
-            });
+            this.$axios
+                .post(cp_url('assets-fieldtype'), {
+                    assets,
+                })
+                .then((response) => {
+                    this.assets = response.data;
+                    this.loading = false;
+                });
         },
 
         /**
@@ -542,7 +549,7 @@ export default {
         },
 
         syncDynamicFolderFromValue(value) {
-            if (! this.isUsingDynamicFolder) return;
+            if (!this.isUsingDynamicFolder) return;
 
             this.lockedDynamicFolder = null;
 
@@ -562,20 +569,22 @@ export default {
             this.updateMeta(meta);
         },
 
-        renameFolderActionCompleted(successful=null, response={}) {
+        renameFolderActionCompleted(successful = null, response = {}) {
             if (successful === false) return;
 
             this.$events.$emit('reset-action-modals');
 
             if (response.message !== false) {
-                this.$toast.success(response.message || __("Action completed"));
+                this.$toast.success(response.message || __('Action completed'));
             }
 
             // Update the folder in the current asset values.
             // They will be adjusted in the content but not here automatically since there's no refresh.
             const newFolder = response[0].path;
-            this.update(this.value.map(id => id.replace(`::${this.folder}`, `::${newFolder}`)));
-            this.lockedDynamicFolder = this.configuredFolder ? newFolder.replace(`${this.configuredFolder}/`, '') : newFolder;
+            this.update(this.value.map((id) => id.replace(`::${this.folder}`, `::${newFolder}`)));
+            this.lockedDynamicFolder = this.configuredFolder
+                ? newFolder.replace(`${this.configuredFolder}/`, '')
+                : newFolder;
         },
 
         uploadSelected(upload) {
@@ -591,13 +600,10 @@ export default {
             } else {
                 this.loadAssets([...this.value, id]);
             }
-
-        }
+        },
     },
 
-
     watch: {
-
         assets(assets) {
             if (this.initializing) return;
 
@@ -625,20 +631,16 @@ export default {
 
         showSelector(selecting) {
             this.$emit(selecting ? 'focus' : 'blur');
-        }
-
+        },
     },
 
     mounted() {
-        this.displayMode = this.isInsideGridField
-            ? 'list'
-            : this.config.mode || 'grid';
+        this.displayMode = this.isInsideGridField ? 'list' : this.config.mode || 'grid';
 
         this.selectorViewMode = Cookies.get('statamic.assets.listing_view_mode') || 'grid';
 
         // We only have URLs in the field data, so we'll need to get the asset data.
         this.initializeAssets();
-    }
-
-}
+    },
+};
 </script>
diff --git a/resources/js/components/fieldtypes/assets/AssetsIndexFieldtype.vue b/resources/js/components/fieldtypes/assets/AssetsIndexFieldtype.vue
index af7797d017..9d85ca472b 100644
--- a/resources/js/components/fieldtypes/assets/AssetsIndexFieldtype.vue
+++ b/resources/js/components/fieldtypes/assets/AssetsIndexFieldtype.vue
@@ -1,16 +1,9 @@
 <template>
-
-    <div class="text-2xs flex">
-        <a
-            v-for="asset in value"
-            :key="asset.id"
-            :href="asset.url"
-            target="_blank"
-        >
-            <asset-thumbnail :asset="asset" class="h-8 max-w-3xs -my-1" />
+    <div class="flex text-2xs">
+        <a v-for="asset in value" :key="asset.id" :href="asset.url" target="_blank">
+            <asset-thumbnail :asset="asset" class="-my-1 h-8 max-w-3xs" />
         </a>
     </div>
-
 </template>
 
 <script>
@@ -19,6 +12,6 @@ import AssetThumbnail from '../../assets/Browser/Thumbnail.vue';
 
 export default {
     mixins: [IndexFieldtype],
-    components: {AssetThumbnail}
-}
+    components: { AssetThumbnail },
+};
 </script>
diff --git a/resources/js/components/fieldtypes/bard/BardButtonsSettingFieldtype.vue b/resources/js/components/fieldtypes/bard/BardButtonsSettingFieldtype.vue
index 491a525ffb..fb2fc681ac 100644
--- a/resources/js/components/fieldtypes/bard/BardButtonsSettingFieldtype.vue
+++ b/resources/js/components/fieldtypes/bard/BardButtonsSettingFieldtype.vue
@@ -1,29 +1,26 @@
 <template>
     <div class="relative">
-        <div class="bard-fixed-toolbar dark bard-toolbar-setting" ref="buttons">
-
+        <div class="bard-fixed-toolbar bard-toolbar-setting dark" ref="buttons">
             <button
                 v-for="button in buttons"
                 :key="button.name"
                 v-tooltip="button.text"
-                :class="{'active': enabled(button.name)}"
+                :class="{ active: enabled(button.name) }"
                 @click="toggleButton(button.name)"
             >
                 <svg-icon :name="button.svg" v-if="button.svg"></svg-icon>
                 <div class="flex items-center" v-html="button.html" v-if="button.html"></div>
             </button>
-
         </div>
     </div>
 </template>
 
 <script>
 import Fieldtype from '../Fieldtype.vue';
-import {Sortable, Plugins} from '@shopify/draggable';
+import { Sortable, Plugins } from '@shopify/draggable';
 import { availableButtons, addButtonHtml } from './buttons';
 
 export default {
-
     mixins: [Fieldtype],
 
     data() {
@@ -40,33 +37,28 @@ export default {
     },
 
     watch: {
-
         buttons: {
             deep: true,
             handler(buttons) {
-                const enabledButtonNames = buttons
-                    .filter(button => button.enabled)
-                    .map(button => button.name);
+                const enabledButtonNames = buttons.filter((button) => button.enabled).map((button) => button.name);
                 if (JSON.stringify(enabledButtonNames) !== JSON.stringify(this.data)) {
                     this.data = enabledButtonNames;
                 }
-            }
+            },
         },
 
         data(data) {
             this.update(data);
         },
-
     },
 
     methods: {
-
         initButtons() {
             // Get all default buttons first
             let available = availableButtons();
 
             // Add custom buttons from a project or addon
-            this.$bard.buttonCallbacks.map(callback => {
+            this.$bard.buttonCallbacks.map((callback) => {
                 // Since the developer uses the same callback to add buttons to the field itself, and for the
                 // button configurator, we need to make the button conditional when on the Bard fieldtype,
                 // but not here. Here we want to just show them all, so the user is able to toggle it.
@@ -78,23 +70,21 @@ export default {
                 // buttons object manually. Just continue on.
                 if (!returned) return;
 
-                available = available.concat(
-                    Array.isArray(returned) ? returned : [returned]
-                );
-            })
+                available = available.concat(Array.isArray(returned) ? returned : [returned]);
+            });
 
             available = addButtonHtml(available);
 
-            let buttons = available.map(button => {
+            let buttons = available.map((button) => {
                 button.enabled = this.data.includes(button.name);
                 return button;
             });
 
-            let standardButtons = available.map(button => button.name);
-            let customButtons = this.data.filter(button => !standardButtons.includes(button));
+            let standardButtons = available.map((button) => button.name);
+            let customButtons = this.data.filter((button) => !standardButtons.includes(button));
 
             if (customButtons.length) {
-                customButtons = customButtons.map(name => {
+                customButtons = customButtons.map((name) => {
                     return { name, text: name, html: `<span>${name.charAt(0).toUpperCase()}</span>`, enabled: true };
                 });
                 buttons = [...buttons, ...customButtons];
@@ -103,10 +93,10 @@ export default {
             // If the buttons have been reordered, we will remap everything to use the custom order,
             // and disabled buttons get stuck on the end. Otherwise, things will remain the same,
             // with inactive buttons dispersed throughout the toolbar, which looks cooler.
-            let enabledButtonNames = buttons.filter(button => button.enabled).map(button => button.name);
+            let enabledButtonNames = buttons.filter((button) => button.enabled).map((button) => button.name);
             if (JSON.stringify(enabledButtonNames) !== JSON.stringify(this.data)) {
-                buttons = this.data.map(name => _.findWhere(buttons, { name }));
-                let unused = available.filter(button => !this.data.includes(button.name));
+                buttons = this.data.map((name) => _.findWhere(buttons, { name }));
+                let unused = available.filter((button) => !this.data.includes(button.name));
                 buttons = [...buttons, ...unused];
             }
 
@@ -119,10 +109,12 @@ export default {
                 mirror: { constrainDimensions: true, xAxis: true, appendTo: 'body' },
                 swapAnimation: { horizontal: true },
                 plugins: [Plugins.SwapAnimation],
-                distance: 10
-            }).on('sortable:stop', e => {
-                this.buttons.splice(e.newIndex, 0, this.buttons.splice(e.oldIndex, 1)[0]);
-            }).on('mirror:create', (e) => e.cancel());
+                distance: 10,
+            })
+                .on('sortable:stop', (e) => {
+                    this.buttons.splice(e.newIndex, 0, this.buttons.splice(e.oldIndex, 1)[0]);
+                })
+                .on('mirror:create', (e) => e.cancel());
         },
 
         toggleButton(name) {
@@ -132,7 +124,7 @@ export default {
 
         enabled(name) {
             return _.findWhere(this.buttons, { name }).enabled;
-        }
-    }
+        },
+    },
 };
 </script>
diff --git a/resources/js/components/fieldtypes/bard/BardFieldtype.vue b/resources/js/components/fieldtypes/bard/BardFieldtype.vue
index 4439078ede..2ce580f03f 100644
--- a/resources/js/components/fieldtypes/bard/BardFieldtype.vue
+++ b/resources/js/components/fieldtypes/bard/BardFieldtype.vue
@@ -1,112 +1,131 @@
 <template>
-
-<portal name="bard-fullscreen" :disabled="!fullScreenMode" :provide="provide">
-<!-- These wrappers allow any css that expected the field to
+    <portal name="bard-fullscreen" :disabled="!fullScreenMode" :provide="provide">
+        <!-- These wrappers allow any css that expected the field to
      be within the context of a publish form to continue working
      once it has been portaled out. -->
-<div :class="{ 'publish-fields': fullScreenMode }">
-<div :class="fullScreenMode && wrapperClasses">
-
-    <div
-        class="bard-fieldtype-wrapper"
-        :class="{'bard-fullscreen': fullScreenMode }"
-        ref="container"
-        @dragstart.stop="ignorePageHeader(true)"
-        @dragend="ignorePageHeader(false)"
-    >
-
-        <publish-field-fullscreen-header
-            v-if="fullScreenMode"
-            :title="config.display"
-            :field-actions="fieldActions"
-            @close="toggleFullscreen">
-            <div class="bard-fixed-toolbar border-0" v-if="!readOnly && showFixedToolbar">
-                <div class="flex flex-wrap flex-1 items-center no-select" v-if="toolbarIsFixed">
-                    <component
-                        v-for="button in visibleButtons(buttons)"
-                        :key="button.name"
-                        :is="button.component || 'BardToolbarButton'"
-                        :button="button"
-                        :active="buttonIsActive(button)"
-                        :config="config"
-                        :bard="this"
-                        :editor="editor" />
-                </div>
-            </div>
-        </publish-field-fullscreen-header>
-
-        <div class="bard-fixed-toolbar" v-if="!readOnly && showFixedToolbar && !fullScreenMode">
-            <div class="flex flex-wrap flex-1 items-center no-select" v-if="toolbarIsFixed">
-                <component
-                    v-for="button in visibleButtons(buttons)"
-                    :key="button.name"
-                    :is="button.component || 'BardToolbarButton'"
-                    :button="button"
-                    :active="buttonIsActive(button)"
-                    :config="config"
-                    :bard="this"
-                    :editor="editor" />
-            </div>
-        </div>
-
-        <div class="bard-editor @container/bard" :class="{ 'mode:read-only': readOnly, 'mode:minimal': ! showFixedToolbar, 'mode:inline': inputIsInline }" tabindex="0">
-            <bubble-menu class="bard-floating-toolbar" :editor="editor" :tippy-options="{ maxWidth: 'none', zIndex: 1000 }" v-if="editor && toolbarIsFloating && !readOnly">
-                <component
-                    v-for="button in visibleButtons(buttons)"
-                    :key="button.name"
-                    :is="button.component || 'BardToolbarButton'"
-                    :button="button"
-                    :active="buttonIsActive(button)"
-                    :bard="this"
-                    :config="config"
-                    :editor="editor" />
-            </bubble-menu>
-
-            <floating-menu
-                :editor="editor"
-                :should-show="shouldShowSetButton"
-                :is-showing="showAddSetButton"
-                v-if="editor"
-                v-slot="{ y }"
-                @shown="showAddSetButton = true"
-                @hidden="showAddSetButton = false"
-            >
-                <set-picker
-                    v-if="showAddSetButton"
-                    :sets="groupConfigs"
-                    class="bard-set-selector"
-                    @added="addSet"
-                    @clicked-away="clickedAwayFromSetPicker"
+        <div :class="{ 'publish-fields': fullScreenMode }">
+            <div :class="fullScreenMode && wrapperClasses">
+                <div
+                    class="bard-fieldtype-wrapper"
+                    :class="{ 'bard-fullscreen': fullScreenMode }"
+                    ref="container"
+                    @dragstart.stop="ignorePageHeader(true)"
+                    @dragend="ignorePageHeader(false)"
                 >
-                    <template #trigger>
-                        <button
-                            type="button"
-                            class="btn-round group bard-add-set-button"
-                            :style="{ transform: `translateY(${y}px)` }"
-                            :aria-label="__('Add Set')"
-                            v-tooltip="__('Add Set')"
-                            @click="addSetButtonClicked"
+                    <publish-field-fullscreen-header
+                        v-if="fullScreenMode"
+                        :title="config.display"
+                        :field-actions="fieldActions"
+                        @close="toggleFullscreen"
+                    >
+                        <div class="bard-fixed-toolbar border-0" v-if="!readOnly && showFixedToolbar">
+                            <div class="no-select flex flex-1 flex-wrap items-center" v-if="toolbarIsFixed">
+                                <component
+                                    v-for="button in visibleButtons(buttons)"
+                                    :key="button.name"
+                                    :is="button.component || 'BardToolbarButton'"
+                                    :button="button"
+                                    :active="buttonIsActive(button)"
+                                    :config="config"
+                                    :bard="this"
+                                    :editor="editor"
+                                />
+                            </div>
+                        </div>
+                    </publish-field-fullscreen-header>
+
+                    <div class="bard-fixed-toolbar" v-if="!readOnly && showFixedToolbar && !fullScreenMode">
+                        <div class="no-select flex flex-1 flex-wrap items-center" v-if="toolbarIsFixed">
+                            <component
+                                v-for="button in visibleButtons(buttons)"
+                                :key="button.name"
+                                :is="button.component || 'BardToolbarButton'"
+                                :button="button"
+                                :active="buttonIsActive(button)"
+                                :config="config"
+                                :bard="this"
+                                :editor="editor"
+                            />
+                        </div>
+                    </div>
+
+                    <div
+                        class="bard-editor @container/bard"
+                        :class="{
+                            'mode:read-only': readOnly,
+                            'mode:minimal': !showFixedToolbar,
+                            'mode:inline': inputIsInline,
+                        }"
+                        tabindex="0"
+                    >
+                        <bubble-menu
+                            class="bard-floating-toolbar"
+                            :editor="editor"
+                            :tippy-options="{ maxWidth: 'none', zIndex: 1000 }"
+                            v-if="editor && toolbarIsFloating && !readOnly"
                         >
-                            <svg-icon name="micro/plus" class="w-3 h-3 text-gray-800 dark:text-dark-175 group-hover:text-black dark:group-hover:dark-text-100" />
-                        </button>
-                    </template>
-                </set-picker>
-            </floating-menu>
-
-            <div class="bard-error" v-if="initError" v-html="initError"></div>
-            <editor-content :editor="editor" v-show="!showSource" :id="fieldId" />
-            <bard-source :html="htmlWithReplacedLinks" v-if="showSource" />
-        </div>
-        <div class="bard-footer-toolbar" v-if="editor && (config.reading_time || config.character_limit || config.word_count)">
-            <div v-if="config.reading_time">{{ readingTime }} {{ __('Reading Time') }}</div>
-            <div v-else />
-            <div v-if="config.character_limit || config.word_count" v-text="characterAndWordCountText" />
+                            <component
+                                v-for="button in visibleButtons(buttons)"
+                                :key="button.name"
+                                :is="button.component || 'BardToolbarButton'"
+                                :button="button"
+                                :active="buttonIsActive(button)"
+                                :bard="this"
+                                :config="config"
+                                :editor="editor"
+                            />
+                        </bubble-menu>
+
+                        <floating-menu
+                            :editor="editor"
+                            :should-show="shouldShowSetButton"
+                            :is-showing="showAddSetButton"
+                            v-if="editor"
+                            v-slot="{ y }"
+                            @shown="showAddSetButton = true"
+                            @hidden="showAddSetButton = false"
+                        >
+                            <set-picker
+                                v-if="showAddSetButton"
+                                :sets="groupConfigs"
+                                class="bard-set-selector"
+                                @added="addSet"
+                                @clicked-away="clickedAwayFromSetPicker"
+                            >
+                                <template #trigger>
+                                    <button
+                                        type="button"
+                                        class="btn-round bard-add-set-button group"
+                                        :style="{ transform: `translateY(${y}px)` }"
+                                        :aria-label="__('Add Set')"
+                                        v-tooltip="__('Add Set')"
+                                        @click="addSetButtonClicked"
+                                    >
+                                        <svg-icon
+                                            name="micro/plus"
+                                            class="dark:group-hover:dark-text-100 h-3 w-3 text-gray-800 group-hover:text-black dark:text-dark-175"
+                                        />
+                                    </button>
+                                </template>
+                            </set-picker>
+                        </floating-menu>
+
+                        <div class="bard-error" v-if="initError" v-html="initError"></div>
+                        <editor-content :editor="editor" v-show="!showSource" :id="fieldId" />
+                        <bard-source :html="htmlWithReplacedLinks" v-if="showSource" />
+                    </div>
+                    <div
+                        class="bard-footer-toolbar"
+                        v-if="editor && (config.reading_time || config.character_limit || config.word_count)"
+                    >
+                        <div v-if="config.reading_time">{{ readingTime }} {{ __('Reading Time') }}</div>
+                        <div v-else />
+                        <div v-if="config.character_limit || config.word_count" v-text="characterAndWordCountText" />
+                    </div>
+                </div>
+            </div>
         </div>
-    </div>
-</div>
-</div>
-</portal>
-
+    </portal>
 </template>
 
 <script>
@@ -148,7 +167,7 @@ import Underline from '@tiptap/extension-underline';
 import BardSource from './Source.vue';
 import SetPicker from '../replicator/SetPicker.vue';
 import { DocumentBlock, DocumentInline } from './Document';
-import { Set } from './Set'
+import { Set } from './Set';
 import { Small } from './Small';
 import { Image } from './Image';
 import { Link } from './Link';
@@ -163,7 +182,6 @@ import 'highlight.js/styles/github.css';
 const lowlight = createLowlight(common);
 
 export default {
-
     mixins: [Fieldtype, ManagesSetMeta],
 
     components: {
@@ -201,13 +219,12 @@ export default {
             provide: {
                 bard: this.makeBardProvide(),
                 storeName: this.storeName,
-                bardSets: this.config.sets
-            }
-        }
+                bardSets: this.config.sets,
+            },
+        };
     },
 
     computed: {
-
         allowSource() {
             return this.config.allow_source === undefined ? true : this.config.allow_source;
         },
@@ -221,7 +238,7 @@ export default {
         },
 
         showFixedToolbar() {
-            return this.toolbarIsFixed && (this.visibleButtons.length > 0 || this.allowSource || this.hasExtraButtons)
+            return this.toolbarIsFixed && (this.visibleButtons.length > 0 || this.allowSource || this.hasExtraButtons);
         },
 
         hasExtraButtons() {
@@ -233,7 +250,7 @@ export default {
                 var stats = readTimeEstimate(this.html, 265, 12, 500, ['img', 'Image', 'bard-set']);
                 var duration = moment.duration(stats.duration, 'minutes');
 
-                return moment.utc(duration.asMilliseconds()).format("mm:ss");
+                return moment.utc(duration.asMilliseconds()).format('mm:ss');
             }
         },
 
@@ -264,7 +281,7 @@ export default {
         },
 
         setIndexes() {
-            let indexes = {}
+            let indexes = {};
 
             this.json.forEach((item, i) => {
                 if (item.type === 'set') {
@@ -276,7 +293,7 @@ export default {
         },
 
         storeState() {
-            if (! this.storeName) return undefined;
+            if (!this.storeName) return undefined;
 
             return this.$store.state.publish[this.storeName];
         },
@@ -288,7 +305,7 @@ export default {
         htmlWithReplacedLinks() {
             return this.html.replaceAll(/\"statamic:\/\/(.*?)\"/g, (match, ref) => {
                 const linkData = this.meta.linkData[ref];
-                if (! linkData) {
+                if (!linkData) {
                     this.$toast.error(`${__('No link data found for')} ${ref}`);
                     return '""';
                 }
@@ -298,17 +315,17 @@ export default {
         },
 
         setsWithErrors() {
-            if (! this.storeState) return [];
+            if (!this.storeState) return [];
 
             return Object.values(this.setIndexes).filter((setIndex) => {
                 const prefix = `${this.fieldPathPrefix || this.handle}.${setIndex}.`;
 
-                return Object.keys(this.storeState.errors).some(key => key.startsWith(prefix));
-            })
+                return Object.keys(this.storeState.errors).some((key) => key.startsWith(prefix));
+            });
         },
 
         replicatorPreview() {
-            if (! this.showFieldPreviews || ! this.config.replicator_preview) return;
+            if (!this.showFieldPreviews || !this.config.replicator_preview) return;
             const stack = [...this.value];
             let text = '';
             while (stack.length) {
@@ -317,7 +334,7 @@ export default {
                     text += ` ${node.text || ''}`;
                 } else if (node.type === 'set') {
                     const handle = node.attrs.values.type;
-                    const set = this.setConfigs.find(set => set.handle === handle);
+                    const set = this.setConfigs.find((set) => set.handle === handle);
                     text += ` [${__(set ? set.display : handle)}]`;
                 }
                 if (text.length > 150) {
@@ -339,9 +356,13 @@ export default {
         },
 
         setConfigs() {
-            return reduce(this.groupConfigs, (sets, group) => {
-                return sets.concat(group.sets);
-            }, []);
+            return reduce(
+                this.groupConfigs,
+                (sets, group) => {
+                    return sets.concat(group.sets);
+                },
+                [],
+            );
         },
 
         groupConfigs() {
@@ -368,7 +389,7 @@ export default {
                 },
                 {
                     title: __('Toggle Fullscreen Mode'),
-                    icon: ({ vm }) => vm.fullScreenMode ? 'shrink-all' : 'expand-bold',
+                    icon: ({ vm }) => (vm.fullScreenMode ? 'shrink-all' : 'expand-bold'),
                     quick: true,
                     run: this.toggleFullscreen,
                     visibleWhenReadOnly: true,
@@ -376,13 +397,12 @@ export default {
                 },
                 {
                     title: __('Show HTML Source'),
-                    run: () => this.showSource = !this.showSource,
+                    run: () => (this.showSource = !this.showSource),
                     visibleWhenReadOnly: true,
                     visible: this.allowSource,
                 },
             ];
         },
-
     },
 
     mounted() {
@@ -392,7 +412,7 @@ export default {
         this.json = this.editor.getJSON().content;
         this.html = this.editor.getHTML();
 
-        this.escBinding = this.$keys.bind('esc', this.closeFullscreen)
+        this.escBinding = this.$keys.bind('esc', this.closeFullscreen);
 
         this.$nextTick(() => {
             this.mounted = true;
@@ -417,21 +437,20 @@ export default {
     },
 
     watch: {
-
         json(json, oldJson) {
             if (!this.mounted) return;
-                        
+
             if (json === oldJson) return;
 
             this.updateDebounced(json);
         },
 
-        value(value, oldValue) {    
+        value(value, oldValue) {
             const oldContent = this.editor.getJSON();
             const content = this.valueToContent(value);
 
             if (JSON.stringify(content) !== JSON.stringify(oldContent)) {
-                this.editor.commands.clearContent()
+                this.editor.commands.clearContent();
                 this.editor.commands.setContent(content, true);
             }
         },
@@ -450,18 +469,17 @@ export default {
             deep: true,
             handler(value) {
                 if (JSON.stringify(this.meta.previews) === JSON.stringify(value)) {
-                    return
+                    return;
                 }
                 const meta = this.meta;
                 meta.previews = value;
                 this.updateMeta(meta);
-            }
+            },
         },
 
         fullScreenMode() {
             this.initEditor();
-        }
-
+        },
     },
 
     methods: {
@@ -470,7 +488,7 @@ export default {
             const values = Object.assign({}, { type: handle }, this.meta.defaults[handle]);
 
             let previews = {};
-            Object.keys(this.meta.defaults[handle]).forEach(key => previews[key] = null);
+            Object.keys(this.meta.defaults[handle]).forEach((key) => (previews[key] = null));
             this.previews = Object.assign({}, this.previews, { [id]: previews });
 
             this.updateSetMeta(id, this.meta.new[handle]);
@@ -520,13 +538,13 @@ export default {
 
         collapseSet(id) {
             if (!this.collapsed.includes(id)) {
-                this.collapsed.push(id)
+                this.collapsed.push(id);
             }
         },
 
         expandSet(id) {
             if (this.config.collapse === 'accordion') {
-                this.collapsed = Object.keys(this.meta.existing).filter(v => v !== id);
+                this.collapsed = Object.keys(this.meta.existing).filter((v) => v !== id);
                 return;
             }
 
@@ -545,7 +563,7 @@ export default {
         },
 
         toggleCollapseSets() {
-            (this.collapsed.length === 0) ? this.collapseAll() : this.expandAll();
+            this.collapsed.length === 0 ? this.collapseAll() : this.expandAll();
         },
 
         toggleFullscreen() {
@@ -560,15 +578,27 @@ export default {
             const { selection } = state;
             const { $anchor, empty } = selection;
             const isRootDepth = $anchor.depth === 1;
-            const isEmptyTextBlock = $anchor.parent.isTextblock && !$anchor.parent.type.spec.code && !$anchor.parent.textContent;
-            const isAroundInlineImage = state.selection.$to.nodeBefore?.type.name === 'image' || state.selection.$to.nodeAfter?.type.name === 'image'
+            const isEmptyTextBlock =
+                $anchor.parent.isTextblock && !$anchor.parent.type.spec.code && !$anchor.parent.textContent;
+            const isAroundInlineImage =
+                state.selection.$to.nodeBefore?.type.name === 'image' ||
+                state.selection.$to.nodeAfter?.type.name === 'image';
             const isActive = view.hasFocus() && empty && isRootDepth && isEmptyTextBlock && !isAroundInlineImage;
             return this.setConfigs.length && (this.config.always_show_set_button || isActive);
         },
 
         initToolbarButtons() {
             const selectedButtons = this.config.buttons || [
-                'h2', 'h3', 'bold', 'italic', 'unorderedlist', 'orderedlist', 'removeformat', 'quote', 'anchor', 'table'
+                'h2',
+                'h3',
+                'bold',
+                'italic',
+                'unorderedlist',
+                'orderedlist',
+                'removeformat',
+                'quote',
+                'anchor',
+                'table',
             ];
 
             if (selectedButtons.includes('table')) {
@@ -581,61 +611,113 @@ export default {
                     'addrowafter',
                     'deleterow',
                     'togglecellmerge',
-                    'toggleheadercell'
+                    'toggleheadercell',
                 );
             }
 
             // Get the configured buttons and swap them with corresponding objects
-            let buttons = selectedButtons.map(button => {
+            let buttons = selectedButtons.map((button) => {
                 return _.findWhere(availableButtons(), { name: button.toLowerCase() }) || button;
             });
 
             // Let addons add, remove, or control the position of buttons.
-            this.$bard.buttonCallbacks.forEach(callback => {
+            this.$bard.buttonCallbacks.forEach((callback) => {
                 // Since the developer uses the same callback to add buttons to the field itself, and for the
                 // button configurator, we need to make the button conditional when on the Bard fieldtype
                 // but not in the button configurator. So here we'll filter it out if it's not selected.
-                const buttonFn = (button) => selectedButtons.includes(button.name) ? button : null;
+                const buttonFn = (button) => (selectedButtons.includes(button.name) ? button : null);
 
                 const addedButtons = callback(buttons, buttonFn);
 
                 // No return value means either they literally returned nothing, with the intention
                 // of manipulating the buttons object manually. Or, they used the button() and
                 // the button was not configured in the field so it was stripped out.
-                if (! addedButtons) return;
+                if (!addedButtons) return;
 
-                buttons = buttons.concat(
-                    Array.isArray(addedButtons) ? addedButtons : [addedButtons]
-                );
+                buttons = buttons.concat(Array.isArray(addedButtons) ? addedButtons : [addedButtons]);
             });
 
             // Remove any nulls. This could happen if a developer-added button was not specified in this field's buttons array.
-            buttons = buttons.filter(button => !!button);
+            buttons = buttons.filter((button) => !!button);
 
             // Remove any non-objects. This would happen if you configure a button name that doesn't exist.
-            buttons = buttons.filter(button => typeof button != 'string');
+            buttons = buttons.filter((button) => typeof button != 'string');
 
             // Generate fallback html for each button
             buttons = addButtonHtml(buttons);
 
             // Remove buttons that don't pass conditions.
             // eg. only the insert asset button can be shown if a container has been set.
-            buttons = buttons.filter(button => {
-                return (button.condition) ? button.condition.call(null, this.config) : true;
+            buttons = buttons.filter((button) => {
+                return button.condition ? button.condition.call(null, this.config) : true;
             });
 
-            if (_.findWhere(buttons, {name: 'table'})) {
+            if (_.findWhere(buttons, { name: 'table' })) {
                 buttons.push(
-                    { name: 'deletetable', text: __('Delete Table'), command: (editor) => editor.commands.deleteTable(), svg: 'delete-table', visibleWhenActive: 'table' },
-                    { name: 'addcolumnbefore', text: __('Add Column Before'), command: (editor) => editor.commands.addColumnBefore(), svg: 'add-col-before', visibleWhenActive: 'table' },
-                    { name: 'addcolumnafter', text: __('Add Column After'), command: (editor) => editor.commands.addColumnAfter(), svg: 'add-col-after', visibleWhenActive: 'table' },
-                    { name: 'deletecolumn', text: __('Delete Column'), command: (editor) => editor.commands.deleteColumn(), svg: 'delete-col', visibleWhenActive: 'table' },
-                    { name: 'addrowbefore', text: __('Add Row Before'), command: (editor) => editor.commands.addRowBefore(), svg: 'add-row-before', visibleWhenActive: 'table' },
-                    { name: 'addrowafter', text: __('Add Row After'), command: (editor) => editor.commands.addRowAfter(), svg: 'add-row-after', visibleWhenActive: 'table' },
-                    { name: 'deleterow', text: __('Delete Row'), command: (editor) => editor.commands.deleteRow(), svg: 'delete-row', visibleWhenActive: 'table' },
-                    { name: 'toggleheadercell', text: __('Toggle Header Cell'), command: (editor) => editor.commands.toggleHeaderCell(), svg: 'flip-vertical', visibleWhenActive: 'table' },
-                    { name: 'togglecellmerge', text: __('Merge Cells'), command: (editor) => editor.commands.mergeCells(), svg: 'combine-cells', visibleWhenActive: 'table' },
-                )
+                    {
+                        name: 'deletetable',
+                        text: __('Delete Table'),
+                        command: (editor) => editor.commands.deleteTable(),
+                        svg: 'delete-table',
+                        visibleWhenActive: 'table',
+                    },
+                    {
+                        name: 'addcolumnbefore',
+                        text: __('Add Column Before'),
+                        command: (editor) => editor.commands.addColumnBefore(),
+                        svg: 'add-col-before',
+                        visibleWhenActive: 'table',
+                    },
+                    {
+                        name: 'addcolumnafter',
+                        text: __('Add Column After'),
+                        command: (editor) => editor.commands.addColumnAfter(),
+                        svg: 'add-col-after',
+                        visibleWhenActive: 'table',
+                    },
+                    {
+                        name: 'deletecolumn',
+                        text: __('Delete Column'),
+                        command: (editor) => editor.commands.deleteColumn(),
+                        svg: 'delete-col',
+                        visibleWhenActive: 'table',
+                    },
+                    {
+                        name: 'addrowbefore',
+                        text: __('Add Row Before'),
+                        command: (editor) => editor.commands.addRowBefore(),
+                        svg: 'add-row-before',
+                        visibleWhenActive: 'table',
+                    },
+                    {
+                        name: 'addrowafter',
+                        text: __('Add Row After'),
+                        command: (editor) => editor.commands.addRowAfter(),
+                        svg: 'add-row-after',
+                        visibleWhenActive: 'table',
+                    },
+                    {
+                        name: 'deleterow',
+                        text: __('Delete Row'),
+                        command: (editor) => editor.commands.deleteRow(),
+                        svg: 'delete-row',
+                        visibleWhenActive: 'table',
+                    },
+                    {
+                        name: 'toggleheadercell',
+                        text: __('Toggle Header Cell'),
+                        command: (editor) => editor.commands.toggleHeaderCell(),
+                        svg: 'flip-vertical',
+                        visibleWhenActive: 'table',
+                    },
+                    {
+                        name: 'togglecellmerge',
+                        text: __('Merge Cells'),
+                        command: (editor) => editor.commands.mergeCells(),
+                        svg: 'combine-cells',
+                        visibleWhenActive: 'table',
+                    },
+                );
             }
 
             this.buttons = buttons;
@@ -654,12 +736,12 @@ export default {
             if (button.hasOwnProperty('visible')) {
                 return button.visible(this.editor, button.args);
             }
-            if (! button.hasOwnProperty('visibleWhenActive')) return true;
+            if (!button.hasOwnProperty('visibleWhenActive')) return true;
             return this.editor.isActive(button.visibleWhenActive, button.args);
         },
 
         visibleButtons(buttons) {
-            return buttons.filter(button => this.buttonIsVisible(button));
+            return buttons.filter((button) => this.buttonIsVisible(button));
         },
 
         initEditor() {
@@ -673,7 +755,7 @@ export default {
                 editable: !this.readOnly,
                 enableInputRules: this.config.enable_input_rules,
                 enablePasteRules: this.config.enable_paste_rules,
-                editorProps: { attributes: { class: 'bard-content' }},
+                editorProps: { attributes: { class: 'bard-content' } },
                 onFocus: () => this.$emit('focus'),
                 onBlur: () => {
                     // Since clicking into a field inside a set would also trigger a blur, we can't just emit the
@@ -705,7 +787,7 @@ export default {
                             }
                         }
                     }
-                }
+                },
             });
         },
 
@@ -720,7 +802,11 @@ export default {
             }
 
             let match;
-            if (match = error.message.match(/^(?:There is no|Unknown) (?:node|mark) type:? (\w*)(?: in this schema)?$/)) {
+            if (
+                (match = error.message.match(
+                    /^(?:There is no|Unknown) (?:node|mark) type:? (\w*)(?: in this schema)?$/,
+                ))
+            ) {
                 if (match[1]) {
                     return __('Invalid content, :type button/extension is not enabled', { type: match[1] });
                 } else {
@@ -730,23 +816,23 @@ export default {
         },
 
         valueToContent(value) {
-            return value.length
-                ? { type: 'doc', content: value }
-                : null;
+            return value.length ? { type: 'doc', content: value } : null;
         },
 
         getExtensions() {
             let modeExts = this.inputIsInline ? [DocumentInline] : [DocumentBlock, HardBreak];
 
             if (this.config.inline === 'break') {
-                modeExts.push(HardBreak.extend({
-                    addKeyboardShortcuts() {
-                        return {
-                            ...this.parent?.(),
-                            'Enter': () => this.editor.commands.setHardBreak(),
-                        }
-                    },
-                }));
+                modeExts.push(
+                    HardBreak.extend({
+                        addKeyboardShortcuts() {
+                            return {
+                                ...this.parent?.(),
+                                Enter: () => this.editor.commands.setHardBreak(),
+                            };
+                        },
+                    }),
+                );
             }
 
             if (this.config.placeholder) {
@@ -759,7 +845,7 @@ export default {
                     return {
                         'Ctrl-Enter': () => true,
                         'Cmd-Enter': () => true,
-                    }
+                    };
                 },
             });
 
@@ -772,14 +858,14 @@ export default {
                 History,
                 Paragraph,
                 Set.configure({ bard: this }),
-                Text
+                Text,
             ];
 
             if (this.config.smart_typography) {
                 exts.push(Typography);
             }
 
-            let btns = this.buttons.map(button => button.name);
+            let btns = this.buttons.map((button) => button.name);
 
             if (btns.includes('anchor')) exts.push(Link.configure({ vm: this }));
             if (btns.includes('bold')) exts.push(Bold);
@@ -818,23 +904,16 @@ export default {
             if (alignments.length) exts.push(TextAlign.configure({ types: alignmentTypes, alignments }));
 
             if (btns.includes('table')) {
-                exts.push(
-                    Table.configure({ resizable: true }),
-                    TableHeader,
-                    TableCell,
-                    TableRow,
-                );
+                exts.push(Table.configure({ resizable: true }), TableHeader, TableCell, TableRow);
             }
 
             this.$bard.extensionCallbacks.forEach((callback) => {
-                let returned = callback({ bard: this});
-                exts = exts.concat(
-                    Array.isArray(returned) ? returned : [returned]
-                );
+                let returned = callback({ bard: this });
+                exts = exts.concat(Array.isArray(returned) ? returned : [returned]);
             });
 
             this.$bard.extensionReplacementCallbacks.forEach(({ callback, name }) => {
-                let index = exts.findIndex(ext => ext.name === name);
+                let index = exts.findIndex((ext) => ext.name === name);
                 if (index === -1) return;
                 let extension = exts[index];
                 let newExtension = callback({ bard: this, extension });
@@ -873,7 +952,6 @@ export default {
             if (this.$el.contains($event.target)) return;
             this.showAddSetButton = false;
         },
-
-    }
-}
+    },
+};
 </script>
diff --git a/resources/js/components/fieldtypes/bard/Document.js b/resources/js/components/fieldtypes/bard/Document.js
index 5f43ff0df9..b802fc0871 100644
--- a/resources/js/components/fieldtypes/bard/Document.js
+++ b/resources/js/components/fieldtypes/bard/Document.js
@@ -1,13 +1,9 @@
-import Document from '@tiptap/extension-document'
+import Document from '@tiptap/extension-document';
 
 export const DocumentBlock = Document.extend({
-
-    content: '(block | root)+'
-
-})
+    content: '(block | root)+',
+});
 
 export const DocumentInline = Document.extend({
-
     content: 'paragraph',
-
 });
diff --git a/resources/js/components/fieldtypes/bard/FloatingMenu.js b/resources/js/components/fieldtypes/bard/FloatingMenu.js
index e75b98993c..cc28691f0b 100644
--- a/resources/js/components/fieldtypes/bard/FloatingMenu.js
+++ b/resources/js/components/fieldtypes/bard/FloatingMenu.js
@@ -1,4 +1,4 @@
-import { FloatingMenuPlugin } from './FloatingMenuPlugin'
+import { FloatingMenuPlugin } from './FloatingMenuPlugin';
 
 export const FloatingMenu = {
     emits: ['shown', 'hidden'],
@@ -16,15 +16,15 @@ export const FloatingMenu = {
         },
         isShowing: {
             type: Boolean,
-        }
+        },
     },
 
     data() {
         return {
             show: false,
             x: 0,
-            y: 0
-        }
+            y: 0,
+        };
     },
 
     watch: {
@@ -34,14 +34,16 @@ export const FloatingMenu = {
                 if (!editor) return;
 
                 this.$nextTick(() => {
-                    editor.registerPlugin(FloatingMenuPlugin({
-                        pluginKey: 'floatingMenu',
-                        editor,
-                        vm: this,
-                        element: this.$el,
-                        shouldShow: this.shouldShow,
-                    }))
-                })
+                    editor.registerPlugin(
+                        FloatingMenuPlugin({
+                            pluginKey: 'floatingMenu',
+                            editor,
+                            vm: this,
+                            element: this.$el,
+                            shouldShow: this.shouldShow,
+                        }),
+                    );
+                });
             },
         },
 
@@ -57,7 +59,7 @@ export const FloatingMenu = {
             } else {
                 this.$emit('hidden');
             }
-        }
+        },
     },
 
     render() {
@@ -68,6 +70,6 @@ export const FloatingMenu = {
     },
 
     beforeUnmount() {
-        this.editor.unregisterPlugin('floatingMenu')
+        this.editor.unregisterPlugin('floatingMenu');
     },
-}
+};
diff --git a/resources/js/components/fieldtypes/bard/FloatingMenuPlugin.js b/resources/js/components/fieldtypes/bard/FloatingMenuPlugin.js
index 0000aae422..4ff94d0578 100644
--- a/resources/js/components/fieldtypes/bard/FloatingMenuPlugin.js
+++ b/resources/js/components/fieldtypes/bard/FloatingMenuPlugin.js
@@ -1,28 +1,26 @@
-import { posToDOMRect } from '@tiptap/core'
-import { Plugin, PluginKey } from '@tiptap/pm/state'
+import { posToDOMRect } from '@tiptap/core';
+import { Plugin, PluginKey } from '@tiptap/pm/state';
 
 class FloatingMenuView {
-    constructor({
-        editor, element, view, shouldShow, vm
-    }) {
-        this.editor = editor
-        this.element = element
-        this.view = view
-        this.vm = vm
-        this.shouldShow = shouldShow
+    constructor({ editor, element, view, shouldShow, vm }) {
+        this.editor = editor;
+        this.element = element;
+        this.view = view;
+        this.vm = vm;
+        this.shouldShow = shouldShow;
 
-        this.editor.on('focus', this.focusHandler)
+        this.editor.on('focus', this.focusHandler);
     }
 
     focusHandler = () => {
-        this.update(this.editor.view)
-    }
+        this.update(this.editor.view);
+    };
 
     update(view, oldState) {
-        const { state } = view
-        const { doc, selection } = state
-        const { from, to } = selection
-        const isSame = oldState && oldState.doc.eq(doc) && oldState.selection.eq(selection)
+        const { state } = view;
+        const { doc, selection } = state;
+        const { from, to } = selection;
+        const isSame = oldState && oldState.doc.eq(doc) && oldState.selection.eq(selection);
 
         if (isSame) return;
 
@@ -31,7 +29,7 @@ class FloatingMenuView {
             view,
             state,
             oldState,
-        })
+        });
 
         if (!shouldShow) return this.hide();
 
@@ -40,7 +38,7 @@ class FloatingMenuView {
         // context, we need the dimensions relative to the bard editor.
         const { top: selectionTop } = posToDOMRect(view, from, to);
         const { top: editorTop } = this.editor.options.element.getBoundingClientRect();
-        this.vm.y = Math.round(selectionTop-editorTop);
+        this.vm.y = Math.round(selectionTop - editorTop);
 
         this.show();
     }
@@ -54,13 +52,13 @@ class FloatingMenuView {
     }
 
     destroy() {
-        this.editor.off('focus', this.focusHandler)
+        this.editor.off('focus', this.focusHandler);
     }
 }
 
 export const FloatingMenuPlugin = (options) => {
     return new Plugin({
         key: new PluginKey(options.pluginKey),
-        view: view => new FloatingMenuView({ view, ...options }),
-    })
-}
+        view: (view) => new FloatingMenuView({ view, ...options }),
+    });
+};
diff --git a/resources/js/components/fieldtypes/bard/Image.js b/resources/js/components/fieldtypes/bard/Image.js
index 623ff3f9bc..39850881f2 100644
--- a/resources/js/components/fieldtypes/bard/Image.js
+++ b/resources/js/components/fieldtypes/bard/Image.js
@@ -1,13 +1,12 @@
 import { Node } from '@tiptap/core';
-import { VueNodeViewRenderer } from '@tiptap/vue-3'
+import { VueNodeViewRenderer } from '@tiptap/vue-3';
 import ImageComponent from './Image.vue';
 
 export const Image = Node.create({
-
     name: 'image',
 
     addNodeView() {
-        return VueNodeViewRenderer(ImageComponent)
+        return VueNodeViewRenderer(ImageComponent);
     },
 
     inline: true,
@@ -22,27 +21,27 @@ export const Image = Node.create({
         return {
             src: {
                 default: null,
-                parseHTML: element => element.querySelector('img')?.getAttribute('data-src'),
+                parseHTML: (element) => element.querySelector('img')?.getAttribute('data-src'),
             },
             alt: {
                 default: null,
-                parseHTML: element => element.querySelector('img')?.getAttribute('alt'),
+                parseHTML: (element) => element.querySelector('img')?.getAttribute('alt'),
             },
-        }
+        };
     },
 
     parseHTML() {
         return [
             {
                 tag: 'img[src]',
-                getAttrs: dom => {
+                getAttrs: (dom) => {
                     return {
                         src: dom.getAttribute('data-src'),
                         alt: dom.getAttribute('alt'),
-                    }
-                }
-            }
-        ]
+                    };
+                },
+            },
+        ];
     },
 
     renderHTML({ HTMLAttributes }) {
@@ -52,23 +51,24 @@ export const Image = Node.create({
                 ...HTMLAttributes,
                 src: '',
                 'data-src': HTMLAttributes.src,
-            }
-        ]
+            },
+        ];
     },
 
     addCommands() {
         return {
-            insertImage: (attrs) => ({ tr, dispatch }) => {
-                const { selection } = tr;
-                const position = selection.$cursor ? selection.$cursor.pos : selection.$to.pos;
-                const node = this.type.create(attrs);
-                node.isNew = true;
-                if (dispatch) {
-                    const transaction = tr.insert(position, node);
-                    dispatch(transaction);
-                }
-            },
-        }
+            insertImage:
+                (attrs) =>
+                ({ tr, dispatch }) => {
+                    const { selection } = tr;
+                    const position = selection.$cursor ? selection.$cursor.pos : selection.$to.pos;
+                    const node = this.type.create(attrs);
+                    node.isNew = true;
+                    if (dispatch) {
+                        const transaction = tr.insert(position, node);
+                        dispatch(transaction);
+                    }
+                },
+        };
     },
-
-})
+});
diff --git a/resources/js/components/fieldtypes/bard/Image.vue b/resources/js/components/fieldtypes/bard/Image.vue
index 73475e0712..4e4d94853a 100644
--- a/resources/js/components/fieldtypes/bard/Image.vue
+++ b/resources/js/components/fieldtypes/bard/Image.vue
@@ -1,49 +1,63 @@
 <template>
-
     <node-view-wrapper>
         <div
             class="bard-inline-image-container shadow-sm"
             :class="{
-                'border-blue-400' : selected,
+                'border-blue-400': selected,
             }"
         >
             <div v-if="src" class="p-2 text-center" draggable="true" data-drag-handle>
                 <div ref="content" hidden />
-                <img :src="src" class="block mx-auto rounded-sm" />
+                <img :src="src" class="mx-auto block rounded-sm" />
             </div>
 
-            <div class="@container/toolbar flex items-center border-t dark:border-dark-900 justify-center py-2 px-2 text-2xs text-white dark:text-dark-150 text-center space-x-1 sm:space-x-3 rtl:space-x-reverse">
-                <button v-if="!src" @click="openSelector" type="button" class="flex btn btn-sm px-3 py-1.5">
+            <div
+                class="flex items-center justify-center space-x-1 border-t px-2 py-2 text-center text-2xs text-white @container/toolbar dark:border-dark-900 dark:text-dark-150 sm:space-x-3 rtl:space-x-reverse"
+            >
+                <button v-if="!src" @click="openSelector" type="button" class="btn btn-sm flex px-3 py-1.5">
                     <svg-icon name="folder-image" class="h-4" />
-                    <span class="rtl:mr-2 ltr:ml-2 hidden @md/toolbar:inline-block">{{ __('Choose Image') }}</span>
+                    <span class="hidden @md/toolbar:inline-block ltr:ml-2 rtl:mr-2">{{ __('Choose Image') }}</span>
                 </button>
-                <button v-if="src" @click="edit" type="button" class="flex btn btn-sm px-3 py-1.5">
+                <button v-if="src" @click="edit" type="button" class="btn btn-sm flex px-3 py-1.5">
                     <svg-icon name="pencil" class="h-4" />
-                    <span class="rtl:mr-2 ltr:ml-2 hidden @md/toolbar:inline-block">{{ __('Edit Image') }}</span>
+                    <span class="hidden @md/toolbar:inline-block ltr:ml-2 rtl:mr-2">{{ __('Edit Image') }}</span>
                 </button>
-                <button v-if="src" @click="toggleAltEditor" type="button" class="flex btn btn-sm px-3 py-1.5" :class="{ active: showingAltEdit }">
+                <button
+                    v-if="src"
+                    @click="toggleAltEditor"
+                    type="button"
+                    class="btn btn-sm flex px-3 py-1.5"
+                    :class="{ active: showingAltEdit }"
+                >
                     <svg-icon name="rename-file" class="h-4" />
-                    <span class="rtl:mr-2 ltr:ml-2 hidden @md/toolbar:inline-block">{{ __('Override Alt') }}</span>
+                    <span class="hidden @md/toolbar:inline-block ltr:ml-2 rtl:mr-2">{{ __('Override Alt') }}</span>
                 </button>
-                <button v-if="src" @click="openSelector" type="button" class="flex btn btn-sm px-3 py-1.5">
+                <button v-if="src" @click="openSelector" type="button" class="btn btn-sm flex px-3 py-1.5">
                     <svg-icon name="swap" class="h-4" />
-                    <span class="rtl:mr-2 ltr:ml-2 hidden @md/toolbar:inline-block">{{ __('Replace') }}</span>
+                    <span class="hidden @md/toolbar:inline-block ltr:ml-2 rtl:mr-2">{{ __('Replace') }}</span>
                 </button>
-                <button @click="deleteNode" class="flex btn btn-sm text-red-500 px-3 py-1.5">
+                <button @click="deleteNode" class="btn btn-sm flex px-3 py-1.5 text-red-500">
                     <svg-icon name="trash" class="h-4" />
-                    <span class="rtl:mr-2 ltr:ml-2 hidden @md/toolbar:inline-block">{{ __('Remove') }}</span>
+                    <span class="hidden @md/toolbar:inline-block ltr:ml-2 rtl:mr-2">{{ __('Remove') }}</span>
                 </button>
             </div>
 
-            <div v-if="showingAltEdit" class="flex items-center p-2 border-t dark:border-dark-900 rounded-b" @paste.stop>
-                <text-input name="alt" :focus="showingAltEdit" v-model="alt" :placeholder="assetAlt" :prepend="__('Alt Text')" class="flex-1" />
+            <div
+                v-if="showingAltEdit"
+                class="flex items-center rounded-b border-t p-2 dark:border-dark-900"
+                @paste.stop
+            >
+                <text-input
+                    name="alt"
+                    :focus="showingAltEdit"
+                    v-model="alt"
+                    :placeholder="assetAlt"
+                    :prepend="__('Alt Text')"
+                    class="flex-1"
+                />
             </div>
 
-            <stack
-                v-if="showingSelector"
-                name="asset-selector"
-                @closed="closeSelector"
-            >
+            <stack v-if="showingSelector" name="asset-selector" @closed="closeSelector">
                 <selector
                     :container="extension.options.bard.config.container"
                     :folder="extension.options.bard.config.folder || '/'"
@@ -52,7 +66,8 @@
                     :view-mode="'grid'"
                     :max-files="1"
                     @selected="assetsSelected"
-                    @closed="closeSelector">
+                    @closed="closeSelector"
+                >
                 </selector>
             </stack>
 
@@ -68,7 +83,6 @@
             </asset-editor>
         </div>
     </node-view-wrapper>
-
 </template>
 
 <script>
@@ -106,11 +120,10 @@ export default {
             loading: false,
             alt: this.node.attrs.alt,
             showingAltEdit: !!this.node.attrs.alt,
-        }
+        };
     },
 
     computed: {
-
         src() {
             if (this.editorAsset) {
                 return this.editorAsset.url;
@@ -127,8 +140,7 @@ export default {
 
         selections() {
             return this.assetId ? [this.assetId] : [];
-        }
-
+        },
     },
 
     created() {
@@ -147,21 +159,18 @@ export default {
     },
 
     watch: {
-
         actualSrc(src) {
-            if ( !this.node.attrs.src) {
+            if (!this.node.attrs.src) {
                 this.updateAttributes({ src, asset: !!this.assetId });
             }
         },
 
         alt(alt) {
             this.updateAttributes({ alt });
-        }
-
+        },
     },
 
     methods: {
-
         openSelector() {
             this.showingSelector = true;
         },
@@ -177,7 +186,10 @@ export default {
         },
 
         loadAsset(id) {
-            let preloaded = _.find(this.$store.state.publish[this.storeName].preloadedAssets, asset => asset.id === id);
+            let preloaded = _.find(
+                this.$store.state.publish[this.storeName].preloadedAssets,
+                (asset) => asset.id === id,
+            );
 
             if (preloaded) {
                 // TODO
@@ -187,11 +199,13 @@ export default {
                 // return;
             }
 
-            this.$axios.post(cp_url('assets-fieldtype'), {
-                assets: [id],
-            }).then(response => {
-                this.setAsset(response.data[0]);
-            });
+            this.$axios
+                .post(cp_url('assets-fieldtype'), {
+                    assets: [id],
+                })
+                .then((response) => {
+                    this.setAsset(response.data[0]);
+                });
         },
 
         setAsset(asset) {
@@ -219,6 +233,6 @@ export default {
         // This is a workaround to avoid Firefox's inability to select inputs/textareas when the
         // parent element is set to draggable: https://bugzilla.mozilla.org/show_bug.cgi?id=739071
         this.$el.setAttribute('draggable', false);
-    }
-}
+    },
+};
 </script>
diff --git a/resources/js/components/fieldtypes/bard/Link.js b/resources/js/components/fieldtypes/bard/Link.js
index 86f8926ed1..6c4683fe8e 100644
--- a/resources/js/components/fieldtypes/bard/Link.js
+++ b/resources/js/components/fieldtypes/bard/Link.js
@@ -2,7 +2,6 @@ import { Mark, getAttributes, getMarkRange, markPasteRule } from '@tiptap/core';
 import { Plugin, PluginKey, TextSelection } from '@tiptap/pm/state';
 
 export const Link = Mark.create({
-
     name: 'link',
 
     inclusive: false,
@@ -21,35 +20,33 @@ export const Link = Mark.create({
             title: {
                 default: null,
             },
-        }
+        };
     },
 
     parseHTML() {
         return [
             {
-                tag: 'a[href]'
+                tag: 'a[href]',
             },
-        ]
+        ];
     },
 
     renderHTML({ HTMLAttributes }) {
-        return ['a', HTMLAttributes, 0]
+        return ['a', HTMLAttributes, 0];
     },
 
     addCommands() {
         return {
-            setLink: attributes => ({ chain }) => {
-                if (attributes.href) {
-                    return chain()
-                        .setMark(this.name, attributes)
-                        .run()
-                }
+            setLink:
+                (attributes) =>
+                ({ chain }) => {
+                    if (attributes.href) {
+                        return chain().setMark(this.name, attributes).run();
+                    }
 
-                return chain()
-                    .unsetMark(this.name, { extendEmptyMarkRange: true })
-                    .run()
-            },
-        }
+                    return chain().unsetMark(this.name, { extendEmptyMarkRange: true }).run();
+                },
+        };
     },
 
     addPasteRules() {
@@ -57,17 +54,17 @@ export const Link = Mark.create({
             markPasteRule({
                 find: /https?:\/\/(?:www\.)?[-a-zA-Z0-9@:%._+~#=]{2,256}\.[a-z]{2,6}\b(?:[-a-zA-Z0-9@:%_+.~#?&//=]*)/g,
                 type: this.type,
-                getAttributes: url => ({
-                    href: url[0]
+                getAttributes: (url) => ({
+                    href: url[0],
                 }),
             }),
-        ]
+        ];
     },
 
     addKeyboardShortcuts() {
         return {
             'Mod-k': () => this.options.vm.events.emit('link-toggle'),
-        }
+        };
     },
 
     addProseMirrorPlugins() {
@@ -97,7 +94,6 @@ export const Link = Mark.create({
                     },
                 },
             }),
-        ]
+        ];
     },
-
-})
+});
diff --git a/resources/js/components/fieldtypes/bard/LinkToolbar.vue b/resources/js/components/fieldtypes/bard/LinkToolbar.vue
index 39dc6adb91..072327fec7 100644
--- a/resources/js/components/fieldtypes/bard/LinkToolbar.vue
+++ b/resources/js/components/fieldtypes/bard/LinkToolbar.vue
@@ -1,26 +1,21 @@
 <template>
-
     <div class="bard-link-toolbar">
         <div>
-            <div class="px-4 py-4 border-b dark:border-dark-900">
-
+            <div class="border-b px-4 py-4 dark:border-dark-900">
                 <div class="flex">
-
-                    <div class="h-8 mb-4 bg-gray-100 dark:bg-dark-600 text-gray-800 dark:text-dark-150 border dark:border-dark-200 rounded shadow-inner flex items-center rtl:ml-1 ltr:mr-1">
-                        <select
-                            class="input w-auto text-sm px-1"
-                            v-model="linkType">
-                            <option
-                                v-for="visibleLinkType in visibleLinkTypes"
-                                :value="visibleLinkType.type"
-                            >
+                    <div
+                        class="mb-4 flex h-8 items-center rounded border bg-gray-100 text-gray-800 shadow-inner dark:border-dark-200 dark:bg-dark-600 dark:text-dark-150 ltr:mr-1 rtl:ml-1"
+                    >
+                        <select class="input w-auto px-1 text-sm" v-model="linkType">
+                            <option v-for="visibleLinkType in visibleLinkTypes" :value="visibleLinkType.type">
                                 {{ visibleLinkType.title }}
                             </option>
                         </select>
                     </div>
 
-                    <div class="h-8 mb-4 p-2 bg-gray-100 dark:bg-dark-600 text-gray-800 dark:text-dark-150 w-full border dark:border-dark-200 rounded shadow-inner placeholder:text-gray-600 dark:placeholder:dark-text-dark-175 flex items-center">
-
+                    <div
+                        class="dark:placeholder:dark-text-dark-175 mb-4 flex h-8 w-full items-center rounded border bg-gray-100 p-2 text-gray-800 shadow-inner placeholder:text-gray-600 dark:border-dark-200 dark:bg-dark-600 dark:text-dark-150"
+                    >
                         <!-- URL input -->
                         <input
                             v-if="linkType === 'url'"
@@ -57,23 +52,22 @@
                         <!-- Data input -->
                         <div
                             v-else
-                            class="w-full flex items-center justify-between cursor-pointer"
+                            class="flex w-full cursor-pointer items-center justify-between"
                             @click="openSelector"
                         >
-
                             <loading-graphic v-if="isLoading" :inline="true" />
 
-                            <div v-else class="flex-1 flex items-center rtl:ml-2 ltr:mr-2 truncate">
+                            <div v-else class="flex flex-1 items-center truncate ltr:mr-2 rtl:ml-2">
                                 <img
                                     v-if="linkType === 'asset' && itemData.asset && itemData.isImage"
                                     :src="itemData.asset.thumbnail || itemData.asset.url"
-                                    class="asset-thumbnail max-h-full max-w-full rounded w-6 h-6 rtl:ml-2 ltr:mr-2 object-cover lazyloaded"
-                                >
+                                    class="asset-thumbnail lazyloaded h-6 max-h-full w-6 max-w-full rounded object-cover ltr:mr-2 rtl:ml-2"
+                                />
                                 {{ displayValue }}
                             </div>
 
                             <button
-                            class="flex items-center"
+                                class="flex items-center"
                                 v-tooltip="`${__('Browse')}...`"
                                 :aria-label="`${__('Browse')}...`"
                                 @click="openSelector"
@@ -81,55 +75,60 @@
                                 <svg-icon v-show="linkType === 'asset'" name="folder-image" class="h-4 w-4" />
                                 <svg-icon v-show="linkType !== 'asset'" name="folder-generic" class="h-4 w-4" />
                             </button>
-
                         </div>
-
                     </div>
-
                 </div>
 
-
                 <!-- Title attribute -->
-                <div class="h-8 mb-4 p-2 bg-gray-100 dark:bg-dark-600 text-gray-800 dark:text-dark-150 w-full border dark:border-dark-200 rounded shadow-inner placeholder:text-gray-600 dark:placeholder:dark-text-dark-175 flex items-center" >
+                <div
+                    class="dark:placeholder:dark-text-dark-175 mb-4 flex h-8 w-full items-center rounded border bg-gray-100 p-2 text-gray-800 shadow-inner placeholder:text-gray-600 dark:border-dark-200 dark:bg-dark-600 dark:text-dark-150"
+                >
                     <input
                         type="text"
                         ref="input"
                         v-model="title"
-                        class="input h-auto text-sm placeholder-gray-50"
+                        class="input placeholder-gray-50 h-auto text-sm"
                         :placeholder="`${__('Label')} (${__('Optional')})`"
                     />
                 </div>
 
                 <!-- Rel attribute -->
-                <div class="h-8 p-2 bg-gray-100 dark:bg-dark-600 text-gray-800 dark:text-dark-150 w-full border dark:border-dark-200 rounded shadow-inner placeholder:text-gray-600 dark:placeholder:dark-text-dark-175 flex items-center" >
+                <div
+                    class="dark:placeholder:dark-text-dark-175 flex h-8 w-full items-center rounded border bg-gray-100 p-2 text-gray-800 shadow-inner placeholder:text-gray-600 dark:border-dark-200 dark:bg-dark-600 dark:text-dark-150"
+                >
                     <input
                         type="text"
                         ref="input"
                         v-model="rel"
-                        class="input h-auto text-sm placeholder-gray-50"
+                        class="input placeholder-gray-50 h-auto text-sm"
                         :placeholder="`${__('Relationship')} (${__('Optional')})`"
                     />
                 </div>
 
-                <label for="target-blank" class="mt-4 flex items-center font-normal cursor-pointer text-gray-800 dark:text-dark-150 hover:text-black dark:hover:text-dark-100" v-if="canHaveTarget">
-                    <input class="checkbox rtl:ml-2 ltr:mr-2" type="checkbox" v-model="targetBlank" id="target-blank">
+                <label
+                    for="target-blank"
+                    class="mt-4 flex cursor-pointer items-center font-normal text-gray-800 hover:text-black dark:text-dark-150 dark:hover:text-dark-100"
+                    v-if="canHaveTarget"
+                >
+                    <input class="checkbox ltr:mr-2 rtl:ml-2" type="checkbox" v-model="targetBlank" id="target-blank" />
                     {{ __('Open in new window') }}
                 </label>
             </div>
 
-            <footer class="bg-gray-100 dark:bg-dark-575 rounded-b-md flex items-center justify-end space-x-3 rtl:space-x-reverse font-normal p-2">
-                <button @click="$emit('canceled')" class="text-xs text-gray-600 dark:text-dark-175 hover:text-gray-800 dark:hover-text-dark-100">
-                    {{ __('Cancel') }}
-                </button>
+            <footer
+                class="flex items-center justify-end space-x-3 rounded-b-md bg-gray-100 p-2 font-normal dark:bg-dark-575 rtl:space-x-reverse"
+            >
                 <button
-                    :aria-label="__('Remove Link')"
-                    @click="remove"
-                    class="btn btn-sm"
+                    @click="$emit('canceled')"
+                    class="dark:hover-text-dark-100 text-xs text-gray-600 hover:text-gray-800 dark:text-dark-175"
                 >
+                    {{ __('Cancel') }}
+                </button>
+                <button :aria-label="__('Remove Link')" @click="remove" class="btn btn-sm">
                     {{ __('Remove Link') }}
                 </button>
                 <button
-                    :disabled="! canCommit"
+                    :disabled="!canCommit"
                     v-tooltip="__('Apply Link')"
                     :aria-label="__('Apply Link')"
                     @click="commit"
@@ -138,7 +137,6 @@
                     {{ __('Save') }}
                 </button>
             </footer>
-
         </div>
 
         <!-- Selectors -->
@@ -160,11 +158,7 @@
             @item-data-updated="entrySelected"
         />
 
-         <stack
-            v-if="showAssetSelector"
-            name="asset-selector"
-            @closed="closeAssetSelector"
-        >
+        <stack v-if="showAssetSelector" name="asset-selector" @closed="closeAssetSelector">
             <asset-selector
                 :container="config.container"
                 :folder="config.folder || '/'"
@@ -177,7 +171,6 @@
             />
         </stack>
     </div>
-
 </template>
 
 <script>
@@ -186,10 +179,9 @@ import AssetSelector from '../../assets/Selector.vue';
 import SvgIcon from '../../SvgIcon.vue';
 
 export default {
-
     components: {
         AssetSelector,
-        SvgIcon
+        SvgIcon,
     },
 
     props: {
@@ -216,14 +208,13 @@ export default {
             targetBlank: null,
             showAssetSelector: false,
             isLoading: false,
-        }
+        };
     },
 
     computed: {
-
         visibleLinkTypes() {
             return this.linkTypes.filter((type) => {
-                if (type.type === 'asset' && ! this.config.container) {
+                if (type.type === 'asset' && !this.config.container) {
                     return false;
                 }
                 return true;
@@ -246,7 +237,7 @@ export default {
         },
 
         canCommit() {
-            return !! this.url[this.linkType];
+            return !!this.url[this.linkType];
         },
 
         href() {
@@ -269,23 +260,35 @@ export default {
         },
 
         itemDataUrl() {
-            return cp_url('fieldtypes/relationship/data') + '?' + qs.stringify({
-                config: this.configParameter
-            });
+            return (
+                cp_url('fieldtypes/relationship/data') +
+                '?' +
+                qs.stringify({
+                    config: this.configParameter,
+                })
+            );
         },
 
         selectionsUrl() {
-            return cp_url('fieldtypes/relationship') + '?' + qs.stringify({
-                config: this.configParameter,
-                collections: this.collections,
-            });
+            return (
+                cp_url('fieldtypes/relationship') +
+                '?' +
+                qs.stringify({
+                    config: this.configParameter,
+                    collections: this.collections,
+                })
+            );
         },
 
         filtersUrl() {
-            return cp_url('fieldtypes/relationship/filters') + '?' + qs.stringify({
-                config: this.configParameter,
-                collections: this.collections,
-            });
+            return (
+                cp_url('fieldtypes/relationship/filters') +
+                '?' +
+                qs.stringify({
+                    config: this.configParameter,
+                    collections: this.collections,
+                })
+            );
         },
 
         configParameter() {
@@ -301,17 +304,15 @@ export default {
         },
 
         selectedTextIsEmail() {
-            const { view, state } = this.bard.editor
-            const { from, to } = view.state.selection
-            const text = state.doc.textBetween(from, to, '')
+            const { view, state } = this.bard.editor;
+            const { from, to } = view.state.selection;
+            const text = state.doc.textBetween(from, to, '');
 
-            return text.match(/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/)
+            return text.match(/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/);
         },
-
     },
 
     watch: {
-
         linkType() {
             this.autofocus();
         },
@@ -322,12 +323,12 @@ export default {
                 if (!['mailto', 'tel'].includes(this.linkType)) {
                     return;
                 }
-                this.setUrl(this.linkType, this.urlData[this.linkType]
-                    ? `${this.linkType}:${this.urlData[this.linkType]}`
-                    : null);
+                this.setUrl(
+                    this.linkType,
+                    this.urlData[this.linkType] ? `${this.linkType}:${this.urlData[this.linkType]}` : null,
+                );
             },
         },
-
     },
 
     created() {
@@ -337,8 +338,8 @@ export default {
         this.bard.events.on('link-deselected', () => this.$emit('deselected'));
 
         if (_.isEmpty(this.linkAttrs) && this.selectedTextIsEmail) {
-            this.linkType = 'mailto'
-            this.urlData = { mailto: this.selectedTextIsEmail }
+            this.linkType = 'mailto';
+            this.urlData = { mailto: this.selectedTextIsEmail };
         }
     },
 
@@ -352,7 +353,6 @@ export default {
     },
 
     methods: {
-
         applyAttrs(attrs) {
             this.linkType = this.getLinkTypeForUrl(attrs.href);
 
@@ -361,12 +361,8 @@ export default {
             this.itemData = { [this.linkType]: this.getItemDataForUrl(attrs.href) };
 
             this.title = attrs.title;
-            this.rel = attrs.href
-                ? attrs.rel
-                : this.defaultRel;
-            this.targetBlank = attrs.href
-                ? attrs.target === '_blank'
-                : this.config.target_blank;
+            this.rel = attrs.href ? attrs.rel : this.defaultRel;
+            this.targetBlank = attrs.href ? attrs.target === '_blank' : this.config.target_blank;
         },
 
         autofocus() {
@@ -383,14 +379,14 @@ export default {
             this.url = {
                 ...this.url,
                 [type]: url,
-            }
+            };
         },
 
         setItemData(type, itemData) {
             this.itemData = {
                 ...this.itemData,
                 [type]: itemData,
-            }
+            };
         },
 
         remove() {
@@ -405,7 +401,7 @@ export default {
             this.$emit('updated', {
                 href: this.href,
                 rel: this.rel,
-                target: (this.canHaveTarget && this.targetBlank) ? '_blank' : null,
+                target: this.canHaveTarget && this.targetBlank ? '_blank' : null,
                 title: this.title,
             });
         },
@@ -415,7 +411,7 @@ export default {
 
             return str.match(/^\w[\w\-_\.]+\.(co|uk|com|org|net|gov|biz|info|us|eu|de|fr|it|es|pl|nz)/i)
                 ? `https://${str}`
-                : str
+                : str;
         },
 
         openSelector() {
@@ -445,12 +441,14 @@ export default {
         },
 
         loadAssetData(url) {
-            this.$axios.post(cp_url('assets-fieldtype'), {
-                assets: [url],
-            }).then(response => {
-                this.selectItem('asset', response.data[0])
-                this.isLoading = false;
-            });
+            this.$axios
+                .post(cp_url('assets-fieldtype'), {
+                    assets: [url],
+                })
+                .then((response) => {
+                    this.selectItem('asset', response.data[0]);
+                    this.isLoading = false;
+                });
         },
 
         entrySelected(data) {
@@ -490,7 +488,7 @@ export default {
 
         getUrlDataForUrl(url) {
             const matches = url ? url.match(/^(mailto|tel):(.*)$/) : null;
-            if (! matches) {
+            if (!matches) {
                 return null;
             }
 
@@ -499,7 +497,7 @@ export default {
 
         getItemDataForUrl(url) {
             const { ref } = this.parseDataUrl(url);
-            if (! ref) {
+            if (!ref) {
                 return null;
             }
 
@@ -507,22 +505,21 @@ export default {
         },
 
         parseDataUrl(url) {
-            if (! url) {
-                return {}
+            if (!url) {
+                return {};
             }
 
             const regex = /^statamic:\/\/((.*?)::(.*))$/;
 
             const matches = url.match(regex);
-            if (! matches) {
+            if (!matches) {
                 return {};
             }
 
             const [_, ref, type, id] = matches;
 
-            return { ref, type, id};
-        }
-    }
-
-}
+            return { ref, type, id };
+        },
+    },
+};
 </script>
diff --git a/resources/js/components/fieldtypes/bard/LinkToolbarButton.vue b/resources/js/components/fieldtypes/bard/LinkToolbarButton.vue
index 4403076268..2374c2b039 100644
--- a/resources/js/components/fieldtypes/bard/LinkToolbarButton.vue
+++ b/resources/js/components/fieldtypes/bard/LinkToolbarButton.vue
@@ -31,7 +31,6 @@ import LinkToolbar from './LinkToolbar.vue';
 import BardToolbarButton from './ToolbarButton.vue';
 
 export default {
-
     mixins: [BardToolbarButton],
 
     components: {
@@ -42,13 +41,12 @@ export default {
         return {
             linkAttrs: null,
             showingToolbar: false,
-        }
+        };
     },
 
     methods: {
-
         toggleLinkToolbar() {
-            this.showingToolbar = ! this.showingToolbar;
+            this.showingToolbar = !this.showingToolbar;
 
             if (this.showingToolbar) {
                 this.linkAttrs = this.editor.getAttributes('link');
@@ -70,7 +68,7 @@ export default {
             this.editor.chain().focus().setLink(attributes).run();
             this.linkAttrs = null;
             this.close();
-        }
+        },
     },
 
     created() {
@@ -82,6 +80,6 @@ export default {
 
     beforeUnmount() {
         this.bard.events.off('link-toggle');
-    }
-}
+    },
+};
 </script>
diff --git a/resources/js/components/fieldtypes/bard/Set.js b/resources/js/components/fieldtypes/bard/Set.js
index 7f578ca36c..a9f4352341 100644
--- a/resources/js/components/fieldtypes/bard/Set.js
+++ b/resources/js/components/fieldtypes/bard/Set.js
@@ -1,17 +1,16 @@
 import { Node } from '@tiptap/core';
 import { Plugin, PluginKey } from '@tiptap/pm/state';
 import { Slice, Fragment } from '@tiptap/pm/model';
-import { Decoration, DecorationSet } from "@tiptap/pm/view";
-import { VueNodeViewRenderer } from '@tiptap/vue-3'
+import { Decoration, DecorationSet } from '@tiptap/pm/view';
+import { VueNodeViewRenderer } from '@tiptap/vue-3';
 import SetComponent from './Set.vue';
 import { TextSelection } from '@tiptap/pm/state';
 
 export const Set = Node.create({
-
     name: 'set',
 
     addNodeView() {
-        return VueNodeViewRenderer(SetComponent)
+        return VueNodeViewRenderer(SetComponent);
     },
 
     draggable: true,
@@ -22,57 +21,58 @@ export const Set = Node.create({
         return {
             id: {
                 default: null,
-                parseHTML: element => element.querySelector('div')?.getAttribute('id'),
+                parseHTML: (element) => element.querySelector('div')?.getAttribute('id'),
             },
             enabled: {
                 default: true,
-                parseHTML: element => element.querySelector('div')?.getAttribute('enabled'),
+                parseHTML: (element) => element.querySelector('div')?.getAttribute('enabled'),
             },
             values: {
                 default: null,
-                parseHTML: element => element.querySelector('a')?.getAttribute('values'),
+                parseHTML: (element) => element.querySelector('a')?.getAttribute('values'),
             },
-        }
+        };
     },
 
     parseHTML() {
         return [
             {
                 tag: 'bard-set',
-                getAttrs: dom => JSON.parse(dom.innerHTML)
-            }
-        ]
+                getAttrs: (dom) => JSON.parse(dom.innerHTML),
+            },
+        ];
     },
 
     renderHTML({ HTMLAttributes }) {
-        return [
-            'bard-set',
-            {},
-            JSON.stringify(HTMLAttributes)
-        ]
+        return ['bard-set', {}, JSON.stringify(HTMLAttributes)];
     },
 
     addCommands() {
         return {
-            set: (attrs) => ({ tr, dispatch }) => {
-                const { selection } = tr;
-                const node = this.type.create(attrs);
-                if (dispatch) {
-                    const transaction = selection instanceof TextSelection
-                        ? tr.insert(selection.$cursor.pos - 1, node)
-                        : tr.insert(selection.$head.pos, node);
+            set:
+                (attrs) =>
+                ({ tr, dispatch }) => {
+                    const { selection } = tr;
+                    const node = this.type.create(attrs);
+                    if (dispatch) {
+                        const transaction =
+                            selection instanceof TextSelection
+                                ? tr.insert(selection.$cursor.pos - 1, node)
+                                : tr.insert(selection.$head.pos, node);
 
-                    dispatch(transaction);
-                }
-            },
-            setAt: ({ attrs, pos }) => ({ tr, dispatch }) => {
-                const node = this.type.create(attrs);
-                if (dispatch) {
-                    const transaction = tr.insert(pos, node);
-                    dispatch(transaction);
-                }
-            }
-        }
+                        dispatch(transaction);
+                    }
+                },
+            setAt:
+                ({ attrs, pos }) =>
+                ({ tr, dispatch }) => {
+                    const node = this.type.create(attrs);
+                    if (dispatch) {
+                        const transaction = tr.insert(pos, node);
+                        dispatch(transaction);
+                    }
+                },
+        };
     },
 
     addProseMirrorPlugins() {
@@ -87,13 +87,20 @@ export const Set = Node.create({
                         const decorations = [];
                         state.doc.nodesBetween(from, to, (node, pos) => {
                             if (node.type === type) {
-                                decorations.push(Decoration.node(pos, pos + node.nodeSize, {}, {
-                                    withinSelection: true,
-                                }));
+                                decorations.push(
+                                    Decoration.node(
+                                        pos,
+                                        pos + node.nodeSize,
+                                        {},
+                                        {
+                                            withinSelection: true,
+                                        },
+                                    ),
+                                );
                             }
                         });
                         return DecorationSet.create(state.doc, decorations);
-                    }
+                    },
                 },
             }),
             new Plugin({
@@ -101,16 +108,21 @@ export const Set = Node.create({
                 props: {
                     transformPasted: (slice) => {
                         const { content } = slice.content;
-                        return new Slice(Fragment.fromArray(content.map(node => {
-                            if (node.type === type) {
-                                return node.type.create(bard.pasteSet(node.attrs));
-                            }
-                            return node.copy(node.content);
-                        })), slice.openStart, slice.openEnd);
+                        return new Slice(
+                            Fragment.fromArray(
+                                content.map((node) => {
+                                    if (node.type === type) {
+                                        return node.type.create(bard.pasteSet(node.attrs));
+                                    }
+                                    return node.copy(node.content);
+                                }),
+                            ),
+                            slice.openStart,
+                            slice.openEnd,
+                        );
                     },
                 },
             }),
-        ]
+        ];
     },
-
-})
+});
diff --git a/resources/js/components/fieldtypes/bard/Set.vue b/resources/js/components/fieldtypes/bard/Set.vue
index be53f675b2..107c64eec3 100644
--- a/resources/js/components/fieldtypes/bard/Set.vue
+++ b/resources/js/components/fieldtypes/bard/Set.vue
@@ -1,16 +1,23 @@
 <template>
-
     <node-view-wrapper>
-        <div class="bard-set whitespace-normal my-6 rounded bg-white dark:bg-dark-500 border dark:border-dark-900 shadow-md"
+        <div
+            class="bard-set my-6 whitespace-normal rounded border bg-white shadow-md dark:border-dark-900 dark:bg-dark-500"
             :class="{ 'border-blue-400 dark:border-dark-blue-100': selected || withinSelection, 'has-error': hasError }"
             :data-type="config.handle"
-            contenteditable="false" @copy.stop @paste.stop @cut.stop
+            contenteditable="false"
+            @copy.stop
+            @paste.stop
+            @cut.stop
         >
             <div ref="content" hidden />
-            <div class="replicator-set-header" :class="{'collapsed': collapsed, 'invalid': isInvalid }">
+            <div class="replicator-set-header" :class="{ collapsed: collapsed, invalid: isInvalid }">
                 <div class="item-move sortable-handle" data-drag-handle />
-                <div class="flex items-center flex-1 p-2 replicator-set-header-inner cursor-pointer" :class="{'flex items-center': collapsed}" @click="toggleCollapsedState">
-                    <label class="text-xs rtl:ml-2 ltr:mr-2">
+                <div
+                    class="replicator-set-header-inner flex flex-1 cursor-pointer items-center p-2"
+                    :class="{ 'flex items-center': collapsed }"
+                    @click="toggleCollapsedState"
+                >
+                    <label class="text-xs ltr:mr-2 rtl:ml-2">
                         <span v-if="isSetGroupVisible">
                             {{ __(setGroup.display) }}
                             <svg-icon name="micro/chevron-right" class="w-4" />
@@ -18,24 +25,33 @@
                         {{ display || config.handle }}
                     </label>
                     <div class="flex items-center" v-if="config.instructions && !collapsed">
-                        <svg-icon name="micro/circle-help" class="text-gray-700 dark:text-dark-175 hover:text-gray-800 dark:hover:text-dark-100 h-3 w-3 text-xs" v-tooltip="{ content: $markdown(__(config.instructions)), html:true }" />
+                        <svg-icon
+                            name="micro/circle-help"
+                            class="h-3 w-3 text-xs text-gray-700 hover:text-gray-800 dark:text-dark-175 dark:hover:text-dark-100"
+                            v-tooltip="{ content: $markdown(__(config.instructions)), html: true }"
+                        />
                     </div>
-                    <div v-show="collapsed" class="flex-1 min-w-0 w-1 rtl:pl-8 ltr:pr-8">
+                    <div v-show="collapsed" class="w-1 min-w-0 flex-1 ltr:pr-8 rtl:pl-8">
                         <div
                             v-html="previewText"
-                            class="help-block mb-0 whitespace-nowrap overflow-hidden text-ellipsis" />
+                            class="help-block mb-0 overflow-hidden text-ellipsis whitespace-nowrap"
+                        />
                     </div>
                 </div>
                 <div class="replicator-set-controls">
                     <toggle-fieldtype
                         handle="set-enabled"
-                        class="toggle-sm rtl:ml-4 ltr:mr-4"
+                        class="toggle-sm ltr:mr-4 rtl:ml-4"
                         v-model:value="enabled"
-                        v-tooltip.top="(enabled) ? __('Included in output') : __('Hidden from output')" />
+                        v-tooltip.top="enabled ? __('Included in output') : __('Hidden from output')"
+                    />
                     <dropdown-list>
                         <dropdown-actions :actions="fieldActions" v-if="fieldActions.length" />
                         <div class="divider" />
-                        <dropdown-item :text="__(collapsed ? __('Expand Set') : __('Collapse Set'))" @click="toggleCollapsedState" />
+                        <dropdown-item
+                            :text="__(collapsed ? __('Expand Set') : __('Collapse Set'))"
+                            @click="toggleCollapsedState"
+                        />
                         <dropdown-item :text="__('Duplicate Set')" @click="duplicate" />
                         <dropdown-item :text="__('Delete Set')" class="warning" @click="deleteNode" />
                     </dropdown-list>
@@ -63,7 +79,6 @@
             </div>
         </div>
     </node-view-wrapper>
-
 </template>
 
 <script>
@@ -75,7 +90,6 @@ import HasFieldActions from '../../field-actions/HasFieldActions.js';
 import DropdownActions from '../../field-actions/DropdownActions.vue';
 
 export default {
-
     props: [
         'editor', // the editor instance
         'node', // access the current node
@@ -89,16 +103,11 @@ export default {
 
     components: { NodeViewWrapper, SetField, DropdownActions },
 
-    mixins: [
-        ValidatesFieldConditions,
-        ManagesPreviewText, 
-        HasFieldActions,
-    ],
+    mixins: [ValidatesFieldConditions, ManagesPreviewText, HasFieldActions],
 
     inject: ['bard', 'bardSets', 'storeName'],
 
     computed: {
-
         fields() {
             return this.config.fields;
         },
@@ -156,8 +165,8 @@ export default {
                 return this.node.attrs.enabled;
             },
             set(enabled) {
-                return this.updateAttributes({ enabled })
-            }
+                return this.updateAttributes({ enabled });
+            },
         },
 
         parentName() {
@@ -193,7 +202,7 @@ export default {
         },
 
         fieldVm() {
-            return this.extension.options.bard
+            return this.extension.options.bard;
         },
 
         fieldActionPayload() {
@@ -212,11 +221,9 @@ export default {
                 storeName: this.storeName,
             };
         },
-
     },
 
     methods: {
-
         updated(handle, value) {
             let values = Object.assign({}, this.values);
             values.type = this.config.handle;
@@ -267,20 +274,23 @@ export default {
 
         duplicate() {
             // this.$events.$emit('duplicated', this.node.attrs.id);
-            this.extension.options.bard.duplicateSet(this.node.attrs.id, this.node.attrs, this.getPos() + this.node.nodeSize);
+            this.extension.options.bard.duplicateSet(
+                this.node.attrs.id,
+                this.node.attrs,
+                this.getPos() + this.node.nodeSize,
+            );
         },
 
         fieldPath(field) {
             let prefix = this.extension.options.bard.fieldPathPrefix || this.extension.options.bard.handle;
             return `${prefix}.${this.index}.attrs.values.${field.handle}`;
         },
-
     },
 
     updated() {
         // This is a workaround to avoid Firefox's inability to select inputs/textareas when the
         // parent element is set to draggable: https://bugzilla.mozilla.org/show_bug.cgi?id=739071
         this.$el.setAttribute('draggable', false);
-    }
-}
+    },
+};
 </script>
diff --git a/resources/js/components/fieldtypes/bard/Small.js b/resources/js/components/fieldtypes/bard/Small.js
index 8198f9e025..019a1be250 100644
--- a/resources/js/components/fieldtypes/bard/Small.js
+++ b/resources/js/components/fieldtypes/bard/Small.js
@@ -1,33 +1,33 @@
 import { Mark, mergeAttributes } from '@tiptap/core';
 
 export const Small = Mark.create({
-
     name: 'small',
 
     addOptions() {
         return {
             HTMLAttributes: {},
-        }
+        };
     },
 
     parseHTML() {
         return [
             {
                 tag: 'small',
-            }
-        ]
+            },
+        ];
     },
 
     renderHTML({ HTMLAttributes }) {
-        return ['small', mergeAttributes(this.options.HTMLAttributes, HTMLAttributes), 0]
+        return ['small', mergeAttributes(this.options.HTMLAttributes, HTMLAttributes), 0];
     },
 
     addCommands() {
         return {
-            toggleSmall: () => ({ commands }) => {
-                return commands.toggleMark(this.name)
-            },
-        }
+            toggleSmall:
+                () =>
+                ({ commands }) => {
+                    return commands.toggleMark(this.name);
+                },
+        };
     },
-
-})
+});
diff --git a/resources/js/components/fieldtypes/bard/Source.vue b/resources/js/components/fieldtypes/bard/Source.vue
index 79fa366e11..0c4179d1d9 100644
--- a/resources/js/components/fieldtypes/bard/Source.vue
+++ b/resources/js/components/fieldtypes/bard/Source.vue
@@ -1,58 +1,46 @@
 <template>
-
     <div>
-        <div
-            v-for="(block, i) in blocks"
-            :key="i"
-            class="p-4"
-        >
+        <div v-for="(block, i) in blocks" :key="i" class="p-4">
             <pre
-                class="whitespace-pre-wrap leading-normal text-xs font-mono"
+                class="whitespace-pre-wrap font-mono text-xs leading-normal"
                 v-if="block.type === 'text'"
-                v-text="block.text" />
+                v-text="block.text"
+            />
 
             <div
-                class="border border-dashed p-2 rounded text-xs"
+                class="rounded border border-dashed p-2 text-xs"
                 v-if="block.type === 'set'"
-                v-text="setDisplay(block.set)" />
+                v-text="setDisplay(block.set)"
+            />
         </div>
     </div>
-
 </template>
 
 <script>
 import pretty from 'pretty';
 
 export default {
-
     props: ['html'],
 
     inject: ['bard'],
 
     computed: {
-
         blocks() {
-            return this.html
-                .split(/(<bard-set>.*?<\/bard-set>)/)
-                .map(text => {
-                    if (text.startsWith('<bard-set>')) {
-                        let json = text.match(/^<bard-set>(.*)<\/bard-set>$/)[1];
-                        return { type: 'set', set: JSON.parse(json).values.type };
-                    }
-                    return { type: 'text', text: pretty(text) };
-                });
-        }
-
+            return this.html.split(/(<bard-set>.*?<\/bard-set>)/).map((text) => {
+                if (text.startsWith('<bard-set>')) {
+                    let json = text.match(/^<bard-set>(.*)<\/bard-set>$/)[1];
+                    return { type: 'set', set: JSON.parse(json).values.type };
+                }
+                return { type: 'text', text: pretty(text) };
+            });
+        },
     },
 
     methods: {
-
         setDisplay(handle) {
             const set = _.findWhere(this.bard.setConfigs, { handle });
             return set.display || handle;
-        }
-
-    }
-
-}
+        },
+    },
+};
 </script>
diff --git a/resources/js/components/fieldtypes/bard/ToolbarButton.vue b/resources/js/components/fieldtypes/bard/ToolbarButton.vue
index 129bc78edd..f1dd759738 100644
--- a/resources/js/components/fieldtypes/bard/ToolbarButton.vue
+++ b/resources/js/components/fieldtypes/bard/ToolbarButton.vue
@@ -1,5 +1,4 @@
 <template>
-
     <button
         class="bard-toolbar-button"
         :class="{ active }"
@@ -10,19 +9,16 @@
         <svg-icon :name="button.svg" v-if="button.svg"></svg-icon>
         <div class="flex items-center" v-html="button.html" v-if="button.html"></div>
     </button>
-
 </template>
 
 <script>
 export default {
-
     props: {
         button: Object,
         active: Boolean,
         config: Object,
         bard: {},
-        editor: {}
-    }
-
-}
+        editor: {},
+    },
+};
 </script>
diff --git a/resources/js/components/fieldtypes/bard/buttons.js b/resources/js/components/fieldtypes/bard/buttons.js
index f9fbbf3467..aba989e7b6 100644
--- a/resources/js/components/fieldtypes/bard/buttons.js
+++ b/resources/js/components/fieldtypes/bard/buttons.js
@@ -1,37 +1,190 @@
 const availableButtons = () => [
-    { name: 'h1', text: __('Heading 1'), command: (editor, args) => editor.chain().focus().toggleHeading(args).run(), activeName: 'heading', args: { level: 1 }, svg: 'h1' },
-    { name: 'h2', text: __('Heading 2'), command: (editor, args) => editor.chain().focus().toggleHeading(args).run(), activeName: 'heading', args: { level: 2 }, svg: 'h2' },
-    { name: 'h3', text: __('Heading 3'), command: (editor, args) => editor.chain().focus().toggleHeading(args).run(), activeName: 'heading', args: { level: 3 }, svg: 'h3' },
-    { name: 'h4', text: __('Heading 4'), command: (editor, args) => editor.chain().focus().toggleHeading(args).run(), activeName: 'heading', args: { level: 4 }, svg: 'h4' },
-    { name: 'h5', text: __('Heading 5'), command: (editor, args) => editor.chain().focus().toggleHeading(args).run(), activeName: 'heading', args: { level: 5 }, svg: 'h5' },
-    { name: 'h6', text: __('Heading 6'), command: (editor, args) => editor.chain().focus().toggleHeading(args).run(), activeName: 'heading', args: { level: 6 }, svg: 'h6' },
-    { name: 'bold', text: __('Bold'), command: (editor) => editor.chain().focus().toggleBold().run(), svg: 'text-bold' },
-    { name: 'italic', text: __('Italic'), command: (editor) => editor.chain().focus().toggleItalic().run(), svg: 'text-italic' },
-    { name: 'underline', text: __('Underline'), command: (editor) => editor.chain().focus().toggleUnderline().run(), svg: 'text-underline' },
-    { name: 'strikethrough', text: __('Strikethrough'), command: (editor) => editor.chain().focus().toggleStrike().run(), activeName: 'strike', svg: 'text-strike-through' },
-    { name: 'small', text: __('Small'), command: (editor) => editor.chain().focus().toggleSmall().run(), svg: 'text-small' },
-    { name: 'unorderedlist', text: __('Unordered List'), command: (editor) => editor.chain().focus().toggleBulletList().run(), activeName: 'bulletList', svg: 'list-ul' },
-    { name: 'orderedlist', text: __('Ordered List'), command: (editor) => editor.chain().focus().toggleOrderedList().run(), activeName: 'orderedList', svg: 'list-ol' },
-    { name: 'removeformat', text: __('Remove Formatting'), command: (editor) => editor.chain().focus().clearNodes().unsetAllMarks().run(), svg: 'eraser' },
-    { name: 'quote', text: __('Blockquote'), command: (editor) => editor.chain().focus().toggleBlockquote().run(), activeName: 'blockquote', svg: 'quote' },
-    { name: 'superscript', text: __('Superscript'), command: (editor) => editor.chain().focus().toggleSuperscript().run(), svg: 'superscript' },
-    { name: 'subscript', text: __('Subscript'), command: (editor) => editor.chain().focus().toggleSubscript().run(), svg: 'subscript' },
-    { name: 'anchor', text: __('Link'), command: (editor) => editor.commands.setLink(), activeName: 'link', svg: 'insert-link', component: 'LinkToolbarButton' },
-    { name: 'table', text: __('Table'), command: (editor, args) => editor.commands.insertTable(args), args: { rowsCount: 3, colsCount: 3, withHeaderRow: false }, svg: 'add-table' },
-    { name: 'image', text: __('Image'), command: (editor) => editor.commands.insertImage(), args: { src: '' }, svg: 'insert-image', condition: (config) => config.container },
+    {
+        name: 'h1',
+        text: __('Heading 1'),
+        command: (editor, args) => editor.chain().focus().toggleHeading(args).run(),
+        activeName: 'heading',
+        args: { level: 1 },
+        svg: 'h1',
+    },
+    {
+        name: 'h2',
+        text: __('Heading 2'),
+        command: (editor, args) => editor.chain().focus().toggleHeading(args).run(),
+        activeName: 'heading',
+        args: { level: 2 },
+        svg: 'h2',
+    },
+    {
+        name: 'h3',
+        text: __('Heading 3'),
+        command: (editor, args) => editor.chain().focus().toggleHeading(args).run(),
+        activeName: 'heading',
+        args: { level: 3 },
+        svg: 'h3',
+    },
+    {
+        name: 'h4',
+        text: __('Heading 4'),
+        command: (editor, args) => editor.chain().focus().toggleHeading(args).run(),
+        activeName: 'heading',
+        args: { level: 4 },
+        svg: 'h4',
+    },
+    {
+        name: 'h5',
+        text: __('Heading 5'),
+        command: (editor, args) => editor.chain().focus().toggleHeading(args).run(),
+        activeName: 'heading',
+        args: { level: 5 },
+        svg: 'h5',
+    },
+    {
+        name: 'h6',
+        text: __('Heading 6'),
+        command: (editor, args) => editor.chain().focus().toggleHeading(args).run(),
+        activeName: 'heading',
+        args: { level: 6 },
+        svg: 'h6',
+    },
+    {
+        name: 'bold',
+        text: __('Bold'),
+        command: (editor) => editor.chain().focus().toggleBold().run(),
+        svg: 'text-bold',
+    },
+    {
+        name: 'italic',
+        text: __('Italic'),
+        command: (editor) => editor.chain().focus().toggleItalic().run(),
+        svg: 'text-italic',
+    },
+    {
+        name: 'underline',
+        text: __('Underline'),
+        command: (editor) => editor.chain().focus().toggleUnderline().run(),
+        svg: 'text-underline',
+    },
+    {
+        name: 'strikethrough',
+        text: __('Strikethrough'),
+        command: (editor) => editor.chain().focus().toggleStrike().run(),
+        activeName: 'strike',
+        svg: 'text-strike-through',
+    },
+    {
+        name: 'small',
+        text: __('Small'),
+        command: (editor) => editor.chain().focus().toggleSmall().run(),
+        svg: 'text-small',
+    },
+    {
+        name: 'unorderedlist',
+        text: __('Unordered List'),
+        command: (editor) => editor.chain().focus().toggleBulletList().run(),
+        activeName: 'bulletList',
+        svg: 'list-ul',
+    },
+    {
+        name: 'orderedlist',
+        text: __('Ordered List'),
+        command: (editor) => editor.chain().focus().toggleOrderedList().run(),
+        activeName: 'orderedList',
+        svg: 'list-ol',
+    },
+    {
+        name: 'removeformat',
+        text: __('Remove Formatting'),
+        command: (editor) => editor.chain().focus().clearNodes().unsetAllMarks().run(),
+        svg: 'eraser',
+    },
+    {
+        name: 'quote',
+        text: __('Blockquote'),
+        command: (editor) => editor.chain().focus().toggleBlockquote().run(),
+        activeName: 'blockquote',
+        svg: 'quote',
+    },
+    {
+        name: 'superscript',
+        text: __('Superscript'),
+        command: (editor) => editor.chain().focus().toggleSuperscript().run(),
+        svg: 'superscript',
+    },
+    {
+        name: 'subscript',
+        text: __('Subscript'),
+        command: (editor) => editor.chain().focus().toggleSubscript().run(),
+        svg: 'subscript',
+    },
+    {
+        name: 'anchor',
+        text: __('Link'),
+        command: (editor) => editor.commands.setLink(),
+        activeName: 'link',
+        svg: 'insert-link',
+        component: 'LinkToolbarButton',
+    },
+    {
+        name: 'table',
+        text: __('Table'),
+        command: (editor, args) => editor.commands.insertTable(args),
+        args: { rowsCount: 3, colsCount: 3, withHeaderRow: false },
+        svg: 'add-table',
+    },
+    {
+        name: 'image',
+        text: __('Image'),
+        command: (editor) => editor.commands.insertImage(),
+        args: { src: '' },
+        svg: 'insert-image',
+        condition: (config) => config.container,
+    },
     { name: 'code', text: __('Inline Code'), command: (editor) => editor.commands.toggleCode(), svg: 'code-inline' },
-    { name: 'codeblock', text: __('Code Block'), command: (editor) => editor.commands.toggleCodeBlock(), activeName: 'codeBlock', svg: 'code-block' },
-    { name: 'horizontalrule', text: __('Horizontal Rule'), command: (editor) => editor.commands.setHorizontalRule(), activeName: 'horizontalRule', svg: 'subtract' },
-    { name: 'alignleft', text: __('Align Left'), command: (editor) => editor.chain().focus().setTextAlign('left').run(), svg: 'paragraph-align-left' },
-    { name: 'aligncenter', text: __('Align Center'), command: (editor) => editor.chain().focus().setTextAlign('center').run(), svg: 'paragraph-align-center' },
-    { name: 'alignright', text: __('Align Right'), command: (editor) => editor.chain().focus().setTextAlign('right').run(), svg: 'paragraph-align-right' },
-    { name: 'alignjustify', text: __('Align Justify'), command: (editor) => editor.chain().focus().setTextAlign('justify').run(), svg: 'paragraph-align-justified' },
+    {
+        name: 'codeblock',
+        text: __('Code Block'),
+        command: (editor) => editor.commands.toggleCodeBlock(),
+        activeName: 'codeBlock',
+        svg: 'code-block',
+    },
+    {
+        name: 'horizontalrule',
+        text: __('Horizontal Rule'),
+        command: (editor) => editor.commands.setHorizontalRule(),
+        activeName: 'horizontalRule',
+        svg: 'subtract',
+    },
+    {
+        name: 'alignleft',
+        text: __('Align Left'),
+        command: (editor) => editor.chain().focus().setTextAlign('left').run(),
+        svg: 'paragraph-align-left',
+    },
+    {
+        name: 'aligncenter',
+        text: __('Align Center'),
+        command: (editor) => editor.chain().focus().setTextAlign('center').run(),
+        svg: 'paragraph-align-center',
+    },
+    {
+        name: 'alignright',
+        text: __('Align Right'),
+        command: (editor) => editor.chain().focus().setTextAlign('right').run(),
+        svg: 'paragraph-align-right',
+    },
+    {
+        name: 'alignjustify',
+        text: __('Align Justify'),
+        command: (editor) => editor.chain().focus().setTextAlign('justify').run(),
+        svg: 'paragraph-align-justified',
+    },
 ];
 
 const addButtonHtml = (buttons) => {
-    return buttons.map(button => {
+    return buttons.map((button) => {
         return button;
     });
-}
+};
 
 export { availableButtons, addButtonHtml };
diff --git a/resources/js/components/fieldtypes/date/Picker.js b/resources/js/components/fieldtypes/date/Picker.js
index 9c37361ea6..a576f48a4c 100644
--- a/resources/js/components/fieldtypes/date/Picker.js
+++ b/resources/js/components/fieldtypes/date/Picker.js
@@ -2,5 +2,5 @@ export default {
     props: {
         isReadOnly: { type: Boolean, default: false },
         bindings: { type: Object },
-    }
-}
+    },
+};
diff --git a/resources/js/components/fieldtypes/date/RangeInline.vue b/resources/js/components/fieldtypes/date/RangeInline.vue
index 6e9fce04c8..ceb7cf3c3a 100644
--- a/resources/js/components/fieldtypes/date/RangeInline.vue
+++ b/resources/js/components/fieldtypes/date/RangeInline.vue
@@ -1,5 +1,4 @@
 <template>
-
     <div class="relative w-full">
         <v-date-picker
             v-bind="pickerBindings"
@@ -8,7 +7,6 @@
         />
         <div class="absolute inset-0 z-1 cursor-not-allowed" v-if="isReadOnly" />
     </div>
-
 </template>
 
 <script>
@@ -20,7 +18,6 @@ export default {
     mixins: [Picker],
 
     computed: {
-
         darkMode() {
             return Statamic.darkMode;
         },
@@ -28,11 +25,9 @@ export default {
         pickerBindings() {
             return {
                 ...this.bindings,
-                disabledDates: this.isReadOnly ? { weekdays: [1, 2, 3, 4, 5, 6, 7] } : null
-            }
+                disabledDates: this.isReadOnly ? { weekdays: [1, 2, 3, 4, 5, 6, 7] } : null,
+            };
         },
-
-    }
-
-}
+    },
+};
 </script>
diff --git a/resources/js/components/fieldtypes/date/RangePopover.vue b/resources/js/components/fieldtypes/date/RangePopover.vue
index 05b3d0ae06..32081b973e 100644
--- a/resources/js/components/fieldtypes/date/RangePopover.vue
+++ b/resources/js/components/fieldtypes/date/RangePopover.vue
@@ -1,47 +1,53 @@
 <template>
-
     <div class="w-full">
-
-        <v-date-picker
-                ref="picker"
-                v-bind="pickerBindings"
-                @update:model-value="dateSelected"
-                :is-dark="darkMode"
-        >
-        <template #default="{ inputValue, inputEvents }">
-
-        <div
-            class="w-full flex items-start @md:items-center flex-col @md:flex-row"
-        >
+        <v-date-picker ref="picker" v-bind="pickerBindings" @update:model-value="dateSelected" :is-dark="darkMode">
+            <template #default="{ inputValue, inputEvents }">
+                <div class="flex w-full flex-col items-start @md:flex-row @md:items-center">
                     <div class="input-group">
                         <div class="input-group-prepend flex items-center">
-                            <svg-icon name="light/calendar" class="w-4 h-4" />
+                            <svg-icon name="light/calendar" class="h-4 w-4" />
                         </div>
-                        <div class="input-text border border-gray-500 dark:border-dark-400 rtl:border-r-0 ltr:border-l-0 flex items-center rtl:pl-0 ltr:pr-0" :class="{ 'read-only': isReadOnly }">
+                        <div
+                            class="input-text flex items-center border border-gray-500 dark:border-dark-400 ltr:border-l-0 ltr:pr-0 rtl:border-r-0 rtl:pl-0"
+                            :class="{ 'read-only': isReadOnly }"
+                        >
                             <input
-                                class="input-text-minimal p-0 bg-transparent leading-none"
+                                class="input-text-minimal bg-transparent p-0 leading-none"
                                 :readonly="isReadOnly"
                                 :value="inputValue.start"
                                 v-on="inputEvents.start"
                                 @focus="$emit('focus', $event.target)"
                                 @blur="$emit('blur')"
                             />
-                            <button v-if="!isReadOnly" @click="clear" type="button" title="Clear" aria-label="Clear" class="cursor-pointer px-2 hover:text-blue-500">
+                            <button
+                                v-if="!isReadOnly"
+                                @click="clear"
+                                type="button"
+                                title="Clear"
+                                aria-label="Clear"
+                                class="cursor-pointer px-2 hover:text-blue-500"
+                            >
                                 <span>×</span>
                             </button>
                         </div>
                     </div>
 
-            <svg-icon name="micro/arrow-right" class="w-6 h-6 my-1 mx-2 text-gray-700 hidden @md:block" />
-            <svg-icon name="micro/arrow-right" class="w-3.5 h-3.5 my-2 mx-2.5 rotate-90 text-gray-700 @md:hidden" />
+                    <svg-icon name="micro/arrow-right" class="mx-2 my-1 hidden h-6 w-6 text-gray-700 @md:block" />
+                    <svg-icon
+                        name="micro/arrow-right"
+                        class="mx-2.5 my-2 h-3.5 w-3.5 rotate-90 text-gray-700 @md:hidden"
+                    />
 
                     <div class="input-group">
                         <div class="input-group-prepend flex items-center">
-                            <svg-icon name="light/calendar" class="w-4 h-4" />
+                            <svg-icon name="light/calendar" class="h-4 w-4" />
                         </div>
-                        <div class="input-text border border-gray-500 dark:border-dark-400 rtl:border-r-0 ltr:border-l-0" :class="{ 'read-only': isReadOnly }">
+                        <div
+                            class="input-text border border-gray-500 dark:border-dark-400 ltr:border-l-0 rtl:border-r-0"
+                            :class="{ 'read-only': isReadOnly }"
+                        >
                             <input
-                                class="input-text-minimal p-0 bg-transparent leading-none"
+                                class="input-text-minimal bg-transparent p-0 leading-none"
                                 :readonly="isReadOnly"
                                 :value="inputValue.end"
                                 v-on="inputEvents.end"
@@ -50,15 +56,10 @@
                             />
                         </div>
                     </div>
-
-        </div>
-
-        </template>
-
+                </div>
+            </template>
         </v-date-picker>
-
     </div>
-
 </template>
 
 <script>
@@ -70,7 +71,6 @@ export default {
     mixins: [Picker],
 
     computed: {
-
         darkMode() {
             return Statamic.darkMode;
         },
@@ -78,23 +78,19 @@ export default {
         pickerBindings() {
             return {
                 ...this.bindings,
-                disabledDates: this.isReadOnly ? { weekdays: [1, 2, 3, 4, 5, 6, 7] } : null
-            }
+                disabledDates: this.isReadOnly ? { weekdays: [1, 2, 3, 4, 5, 6, 7] } : null,
+            };
         },
-
     },
 
     methods: {
-
         dateSelected(date) {
-            this.$emit('update:model-value', date)
+            this.$emit('update:model-value', date);
         },
 
         clear() {
-            this.$emit('update:model-value', null)
+            this.$emit('update:model-value', null);
         },
-
-    }
-
-}
+    },
+};
 </script>
diff --git a/resources/js/components/fieldtypes/date/SingleInline.vue b/resources/js/components/fieldtypes/date/SingleInline.vue
index 6e9fce04c8..ceb7cf3c3a 100644
--- a/resources/js/components/fieldtypes/date/SingleInline.vue
+++ b/resources/js/components/fieldtypes/date/SingleInline.vue
@@ -1,5 +1,4 @@
 <template>
-
     <div class="relative w-full">
         <v-date-picker
             v-bind="pickerBindings"
@@ -8,7 +7,6 @@
         />
         <div class="absolute inset-0 z-1 cursor-not-allowed" v-if="isReadOnly" />
     </div>
-
 </template>
 
 <script>
@@ -20,7 +18,6 @@ export default {
     mixins: [Picker],
 
     computed: {
-
         darkMode() {
             return Statamic.darkMode;
         },
@@ -28,11 +25,9 @@ export default {
         pickerBindings() {
             return {
                 ...this.bindings,
-                disabledDates: this.isReadOnly ? { weekdays: [1, 2, 3, 4, 5, 6, 7] } : null
-            }
+                disabledDates: this.isReadOnly ? { weekdays: [1, 2, 3, 4, 5, 6, 7] } : null,
+            };
         },
-
-    }
-
-}
+    },
+};
 </script>
diff --git a/resources/js/components/fieldtypes/date/SinglePopover.vue b/resources/js/components/fieldtypes/date/SinglePopover.vue
index 0bd7eb9cff..e9c7554972 100644
--- a/resources/js/components/fieldtypes/date/SinglePopover.vue
+++ b/resources/js/components/fieldtypes/date/SinglePopover.vue
@@ -1,37 +1,38 @@
 <template>
-
     <div class="flex-1">
-
-        <v-date-picker
-                ref="picker"
-                v-bind="bindings"
-                @update:model-value="dateSelected"
-                :is-dark="darkMode"
-        >
+        <v-date-picker ref="picker" v-bind="bindings" @update:model-value="dateSelected" :is-dark="darkMode">
             <template #default="{ inputValue, inputEvents }">
                 <div class="input-group">
                     <div class="input-group-prepend flex items-center">
-                        <svg-icon name="light/calendar" class="w-4 h-4" />
+                        <svg-icon name="light/calendar" class="h-4 w-4" />
                     </div>
-                    <div class="input-text border border-gray-500 dark:border-dark-900 rtl:border-r-0 ltr:border-l-0 flex items-center rtl:pl-0 ltr:pr-0" :class="{ 'read-only': isReadOnly }">
+                    <div
+                        class="input-text flex items-center border border-gray-500 dark:border-dark-900 ltr:border-l-0 ltr:pr-0 rtl:border-r-0 rtl:pl-0"
+                        :class="{ 'read-only': isReadOnly }"
+                    >
                         <input
-                            class="input-text-minimal p-0 bg-transparent leading-none"
+                            class="input-text-minimal bg-transparent p-0 leading-none"
                             :readonly="isReadOnly"
                             :value="inputValue"
                             v-on="inputEvents"
                             @focus="$emit('focus', $event.target)"
                             @blur="$emit('blur')"
                         />
-                        <button v-if="!isReadOnly" @click="clear" type="button" title="Clear" aria-label="Clear" class="cursor-pointer px-2 hover:text-blue-500">
+                        <button
+                            v-if="!isReadOnly"
+                            @click="clear"
+                            type="button"
+                            title="Clear"
+                            aria-label="Clear"
+                            class="cursor-pointer px-2 hover:text-blue-500"
+                        >
                             <span>×</span>
                         </button>
                     </div>
                 </div>
             </template>
         </v-date-picker>
-
     </div>
-
 </template>
 
 <script>
@@ -43,24 +44,19 @@ export default {
     mixins: [Picker],
 
     computed: {
-
         darkMode() {
             return Statamic.darkMode;
         },
-
     },
     methods: {
-
         dateSelected(date) {
-            this.$emit('update:model-value', date)
+            this.$emit('update:model-value', date);
             this.$nextTick(() => this.$refs.popover?.close());
         },
 
         clear() {
-            this.$emit('update:model-value', null)
-        }
-
-    }
-
-}
+            this.$emit('update:model-value', null);
+        },
+    },
+};
 </script>
diff --git a/resources/js/components/fieldtypes/grid/Cell.vue b/resources/js/components/fieldtypes/grid/Cell.vue
index 4d381f2bed..b74a9d6e01 100644
--- a/resources/js/components/fieldtypes/grid/Cell.vue
+++ b/resources/js/components/fieldtypes/grid/Cell.vue
@@ -1,5 +1,4 @@
 <template>
-
     <td class="grid-cell" :class="classes" :width="width">
         <div v-show="showInner" class="@container">
             <component
@@ -19,56 +18,53 @@
         </div>
 
         <div v-if="hasError">
-            <small class="help-block text-red-500 mt-2 mb-0" v-for="(error, i) in errors" :key="i" v-text="error" />
+            <small class="help-block mb-0 mt-2 text-red-500" v-for="(error, i) in errors" :key="i" v-text="error" />
         </div>
     </td>
-
 </template>
 
 <script>
 export default {
-
     props: {
         field: {
             type: Object,
-            required: true
+            required: true,
         },
         value: {
-            required: true
+            required: true,
         },
         meta: {
-            required: true
+            required: true,
         },
         index: {
             type: Number,
-            required: true
+            required: true,
         },
         rowIndex: {
             type: Number,
-            required: true
+            required: true,
         },
         gridName: {
             type: String,
-            required: true
+            required: true,
         },
         showInner: {
             type: Boolean,
-            required: true
+            required: true,
         },
         errors: {
             type: Array,
-            required: true
+            required: true,
         },
         fieldPath: {
             type: String,
-            required: true
-        }
+            required: true,
+        },
     },
 
     inject: ['grid'],
 
     computed: {
-
         classes() {
             return [this.fieldtypeComponent, this.field.classes];
         },
@@ -89,11 +85,9 @@ export default {
             if (this.field.width) {
                 return this.field.width + '%';
             }
-        }
-
-    }
-
-}
+        },
+    },
+};
 
 // TODO: Cell widths
 </script>
diff --git a/resources/js/components/fieldtypes/grid/FieldsFieldtype.vue b/resources/js/components/fieldtypes/grid/FieldsFieldtype.vue
index deb767a5ba..c04e550654 100644
--- a/resources/js/components/fieldtypes/grid/FieldsFieldtype.vue
+++ b/resources/js/components/fieldtypes/grid/FieldsFieldtype.vue
@@ -1,5 +1,4 @@
 <template>
-
     <fields
         :fields="fields"
         :editing-field="editingField"
@@ -12,21 +11,19 @@
         @field-editing="editingField = $event"
         @editor-closed="editingField = null"
     />
-
 </template>
 
 <script>
 import Fieldtype from '../Fieldtype.vue';
 import Fields from '../../blueprints/Fields.vue';
-import {Sortable, Plugins} from '@shopify/draggable';
+import { Sortable, Plugins } from '@shopify/draggable';
 import SuggestsConditionalFields from '../../blueprints/SuggestsConditionalFields';
 
 export default {
-
     mixins: [Fieldtype, SuggestsConditionalFields],
 
     inject: {
-        suggestableConditionFieldsProvider: { default: null }
+        suggestableConditionFieldsProvider: { default: null },
     },
 
     components: {
@@ -37,7 +34,7 @@ export default {
         return {
             fields: this.value,
             editingField: null,
-        }
+        };
     },
 
     computed: {
@@ -51,7 +48,6 @@ export default {
     },
 
     methods: {
-
         fieldCreated(field) {
             this.fields.push(field);
             this.update(this.fields);
@@ -72,7 +68,7 @@ export default {
             this.$toast.success(__('Field added'));
 
             if (field.type === 'reference') {
-                this.$nextTick(() => this.editingField = field._id);
+                this.$nextTick(() => (this.editingField = field._id));
             }
         },
 
@@ -81,13 +77,12 @@ export default {
                 draggable: '.blueprint-section-field',
                 handle: '.blueprint-drag-handle',
                 mirror: { constrainDimensions: true },
-                plugins: [Plugins.SwapAnimation]
-            }).on('sortable:stop', e => {
+                plugins: [Plugins.SwapAnimation],
+            }).on('sortable:stop', (e) => {
                 this.fields.splice(e.newIndex, 0, this.fields.splice(e.oldIndex, 1)[0]);
                 this.update(this.fields);
             });
-        }
-    }
-
-}
+        },
+    },
+};
 </script>
diff --git a/resources/js/components/fieldtypes/grid/Grid.vue b/resources/js/components/fieldtypes/grid/Grid.vue
index 4dfc23fa40..637086b27c 100644
--- a/resources/js/components/fieldtypes/grid/Grid.vue
+++ b/resources/js/components/fieldtypes/grid/Grid.vue
@@ -1,58 +1,50 @@
 <template>
-
-<portal name="grid-fullscreen" :disabled="!fullScreenMode" :provide="provide">
-
-    <element-container @resized="containerWidth = $event.width">
-    <div class="grid-fieldtype-container" :class="{'grid-fullscreen bg-white dark:bg-dark-600': fullScreenMode }">
-
-        <publish-field-fullscreen-header
-            v-if="fullScreenMode"
-            :title="config.display"
-            :field-actions="fieldActions"
-            @close="fullScreenMode = false">
-        </publish-field-fullscreen-header>
-
-        <section :class="{'mt-14 p-4': fullScreenMode}">
-
-            <small v-if="hasExcessRows" class="help-block text-red-500">
-                {{ __('Max Rows') }}: {{ maxRows }}
-            </small>
-            <small v-else-if="hasNotEnoughRows" class="help-block text-red-500">
-                {{ __('Min Rows') }}: {{ minRows }}
-            </small>
-
-            <component
-                :is="component"
-                :fields="fields"
-                :rows="value"
-                :meta="meta.existing"
-                :name="name"
-                :can-delete-rows="canDeleteRows"
-                :can-add-rows="canAddRows"
-                :allow-fullscreen="config.fullscreen"
-                :hide-display="config.hide_display"
-                @updated="updated"
-                @meta-updated="updateRowMeta"
-                @removed="removed"
-                @duplicate="duplicate"
-                @sorted="sorted"
-                @focus="focused = true"
-                @blur="blurred"
-            />
-
-            <button
-                class="btn"
-                v-if="canAddRows"
-                v-text="__(addRowButtonLabel)"
-                @click.prevent="addRow" />
-
-        </section>
-
-    </div>
-    </element-container>
-
-</portal>
-
+    <portal name="grid-fullscreen" :disabled="!fullScreenMode" :provide="provide">
+        <element-container @resized="containerWidth = $event.width">
+            <div
+                class="grid-fieldtype-container"
+                :class="{ 'grid-fullscreen bg-white dark:bg-dark-600': fullScreenMode }"
+            >
+                <publish-field-fullscreen-header
+                    v-if="fullScreenMode"
+                    :title="config.display"
+                    :field-actions="fieldActions"
+                    @close="fullScreenMode = false"
+                >
+                </publish-field-fullscreen-header>
+
+                <section :class="{ 'mt-14 p-4': fullScreenMode }">
+                    <small v-if="hasExcessRows" class="help-block text-red-500">
+                        {{ __('Max Rows') }}: {{ maxRows }}
+                    </small>
+                    <small v-else-if="hasNotEnoughRows" class="help-block text-red-500">
+                        {{ __('Min Rows') }}: {{ minRows }}
+                    </small>
+
+                    <component
+                        :is="component"
+                        :fields="fields"
+                        :rows="value"
+                        :meta="meta.existing"
+                        :name="name"
+                        :can-delete-rows="canDeleteRows"
+                        :can-add-rows="canAddRows"
+                        :allow-fullscreen="config.fullscreen"
+                        :hide-display="config.hide_display"
+                        @updated="updated"
+                        @meta-updated="updateRowMeta"
+                        @removed="removed"
+                        @duplicate="duplicate"
+                        @sorted="sorted"
+                        @focus="focused = true"
+                        @blur="blurred"
+                    />
+
+                    <button class="btn" v-if="canAddRows" v-text="__(addRowButtonLabel)" @click.prevent="addRow" />
+                </section>
+            </div>
+        </element-container>
+    </portal>
 </template>
 
 <script>
@@ -63,15 +55,11 @@ import GridStacked from './Stacked.vue';
 import ManagesRowMeta from './ManagesRowMeta';
 
 export default {
-
-    mixins: [
-        Fieldtype,
-        ManagesRowMeta
-    ],
+    mixins: [Fieldtype, ManagesRowMeta],
 
     components: {
         GridTable,
-        GridStacked
+        GridStacked,
     },
 
     data() {
@@ -83,7 +71,7 @@ export default {
                 grid: this.makeGridProvide(),
                 storeName: this.storeName,
             },
-        }
+        };
     },
 
     inject: ['storeName'],
@@ -93,13 +81,10 @@ export default {
     },
 
     computed: {
-
         component() {
             const isNarrow = this.fields.length > 1 && this.containerWidth < 600;
 
-            return this.config.mode === 'stacked' || isNarrow
-                ? 'GridStacked'
-                : 'GridTable';
+            return this.config.mode === 'stacked' || isNarrow ? 'GridStacked' : 'GridTable';
         },
 
         fields() {
@@ -115,11 +100,11 @@ export default {
         },
 
         canAddRows() {
-            return ! this.isReadOnly && this.value.length < this.maxRows;
+            return !this.isReadOnly && this.value.length < this.maxRows;
         },
 
         canDeleteRows() {
-            return ! this.isReadOnly && this.value.length > this.minRows;
+            return !this.isReadOnly && this.value.length > this.minRows;
         },
 
         addRowButtonLabel() {
@@ -131,19 +116,19 @@ export default {
         },
 
         hasExcessRows() {
-            return (this.value.length - this.maxRows) > 0;
+            return this.value.length - this.maxRows > 0;
         },
 
         hasNotEnoughRows() {
-            return (this.value.length - this.minRows) < 0;
+            return this.value.length - this.minRows < 0;
         },
 
         isReorderable() {
-            return !this.isReadOnly && this.config.reorderable && this.maxRows > 1
+            return !this.isReadOnly && this.config.reorderable && this.maxRows > 1;
         },
 
         replicatorPreview() {
-            if (! this.showFieldPreviews || ! this.config.replicator_preview) return;
+            if (!this.showFieldPreviews || !this.config.replicator_preview) return;
 
             return `${__(this.config.display)}: ${__n(':count row|:count rows', this.value.length)}`;
         },
@@ -152,23 +137,21 @@ export default {
             return [
                 {
                     title: __('Toggle Fullscreen Mode'),
-                    icon: ({ vm }) => vm.fullScreenMode ? 'shrink-all' : 'expand-bold',
+                    icon: ({ vm }) => (vm.fullScreenMode ? 'shrink-all' : 'expand-bold'),
                     quick: true,
                     visibleWhenReadOnly: true,
                     run: this.toggleFullScreen,
                 },
             ];
         },
-
     },
 
     watch: {
-
         isReorderable: {
             immediate: true,
             handler(reorderable) {
                 this.reorderable = reorderable;
-            }
+            },
         },
 
         focused(focused, oldFocused) {
@@ -181,18 +164,16 @@ export default {
                     this.$emit('blur');
                 }
             }, 1);
-        }
-
+        },
     },
 
     methods: {
-
         addRow() {
             const id = uniqid();
 
             const row = _.chain(this.fields)
                 .indexBy('handle')
-                .mapObject(field => this.meta.defaults[field.handle])
+                .mapObject((field) => this.meta.defaults[field.handle])
                 .value();
 
             row._id = id;
@@ -202,20 +183,13 @@ export default {
         },
 
         updated(index, row) {
-            this.update([
-                ...this.value.slice(0, index),
-                row,
-                ...this.value.slice(index + 1)
-            ]);
+            this.update([...this.value.slice(0, index), row, ...this.value.slice(index + 1)]);
         },
 
         removed(index) {
-            if (! confirm(__('Are you sure?'))) return;
+            if (!confirm(__('Are you sure?'))) return;
 
-            this.update([
-                ...this.value.slice(0, index),
-                ...this.value.slice(index + 1)
-            ]);
+            this.update([...this.value.slice(0, index), ...this.value.slice(index + 1)]);
         },
 
         duplicate(index) {
@@ -260,9 +234,7 @@ export default {
                 toggleFullScreen: { get: () => this.toggleFullScreen },
             });
             return grid;
-        }
-
-    }
-
-}
+        },
+    },
+};
 </script>
diff --git a/resources/js/components/fieldtypes/grid/GridIndex.vue b/resources/js/components/fieldtypes/grid/GridIndex.vue
index 00a7db6b04..e22ff2181c 100644
--- a/resources/js/components/fieldtypes/grid/GridIndex.vue
+++ b/resources/js/components/fieldtypes/grid/GridIndex.vue
@@ -1,17 +1,13 @@
 <template>
-
     <div v-if="value">
         {{ __n(':count row|:count rows', value) }}
     </div>
-
 </template>
 
 <script>
 import IndexFieldtype from '../IndexFieldtype.vue';
 
 export default {
-
     mixins: [IndexFieldtype],
-
-}
+};
 </script>
diff --git a/resources/js/components/fieldtypes/grid/HeaderCell.vue b/resources/js/components/fieldtypes/grid/HeaderCell.vue
index 6c0e219f77..340955387b 100644
--- a/resources/js/components/fieldtypes/grid/HeaderCell.vue
+++ b/resources/js/components/fieldtypes/grid/HeaderCell.vue
@@ -1,23 +1,26 @@
 <template>
-
     <th v-show="field.type !== 'hidden'">
         <div class="flex items-center justify-between">
-            <div><template v-if="!field.hide_display">{{ __(field.display || field.handle) }}</template></div>
-            <svg-icon name="micro/circle-help" class="text-gray-600 hover:text-gray-700 h-3 w-3 text-xs" v-if="field.instructions" v-tooltip="{ content: $markdown(__(field.instructions)), html:true }" />
+            <div>
+                <template v-if="!field.hide_display">{{ __(field.display || field.handle) }}</template>
+            </div>
+            <svg-icon
+                name="micro/circle-help"
+                class="h-3 w-3 text-xs text-gray-600 hover:text-gray-700"
+                v-if="field.instructions"
+                v-tooltip="{ content: $markdown(__(field.instructions)), html: true }"
+            />
         </div>
     </th>
-
 </template>
 
 <script>
 export default {
-
     props: {
         field: {
             type: Object,
-            required: true
-        }
-    }
-
-}
+            required: true,
+        },
+    },
+};
 </script>
diff --git a/resources/js/components/fieldtypes/grid/ManagesRowMeta.js b/resources/js/components/fieldtypes/grid/ManagesRowMeta.js
index 3852672220..057e50f075 100644
--- a/resources/js/components/fieldtypes/grid/ManagesRowMeta.js
+++ b/resources/js/components/fieldtypes/grid/ManagesRowMeta.js
@@ -1,22 +1,20 @@
 export default {
-
     methods: {
         updateRowMeta(row, value) {
             this.updateMeta({
                 ...this.meta,
                 existing: {
                     ...this.meta.existing,
-                    [row]: clone(value)
-                }
+                    [row]: clone(value),
+                },
             });
         },
 
         removeRowMeta(row) {
             this.updateMeta({
                 ...this.meta,
-                existing: _.omit(this.meta.existing, row)
+                existing: _.omit(this.meta.existing, row),
             });
         },
-    }
-
-}
+    },
+};
diff --git a/resources/js/components/fieldtypes/grid/Row.vue b/resources/js/components/fieldtypes/grid/Row.vue
index 39db7da3ed..cfd4321ee5 100644
--- a/resources/js/components/fieldtypes/grid/Row.vue
+++ b/resources/js/components/fieldtypes/grid/Row.vue
@@ -1,5 +1,4 @@
 <template>
-
     <tr :class="[sortableItemClass, { 'opacity-50': isExcessive }]">
         <td class="drag-handle" :class="sortableHandleClass" v-if="grid.isReorderable"></td>
         <grid-cell
@@ -23,17 +22,21 @@
         <td class="grid-row-controls row-controls" v-if="!grid.isReadOnly && (canAddRows || canDelete)">
             <dropdown-list>
                 <dropdown-item :text="__('Duplicate Row')" @click="$emit('duplicate', index)" v-if="canAddRows" />
-                <dropdown-item v-if="canDelete" :text="__('Delete Row')" class="warning" @click="$emit('removed', index)" />
+                <dropdown-item
+                    v-if="canDelete"
+                    :text="__('Delete Row')"
+                    class="warning"
+                    @click="$emit('removed', index)"
+                />
             </dropdown-list>
         </td>
     </tr>
-
 </template>
 
 <style scoped>
-    .draggable-mirror {
-        display: none;
-    }
+.draggable-mirror {
+    display: none;
+}
 </style>
 
 <script>
@@ -41,7 +44,6 @@ import GridCell from './Cell.vue';
 import { ValidatesFieldConditions } from '../../field-conditions/FieldConditions.js';
 
 export default {
-
     components: { GridCell },
 
     mixins: [ValidatesFieldConditions],
@@ -49,56 +51,51 @@ export default {
     props: {
         index: {
             type: Number,
-            required: true
+            required: true,
         },
         fields: {
             type: Array,
-            required: true
+            required: true,
         },
         values: {
             type: Object,
-            required: true
+            required: true,
         },
         meta: {
             type: Object,
-            required: true
+            required: true,
         },
         name: {
             type: String,
-            required: true
+            required: true,
         },
         fieldPathPrefix: {
-            type: String
+            type: String,
         },
         canDelete: {
             type: Boolean,
-            default: true
+            default: true,
         },
         canAddRows: {
             type: Boolean,
-            default: true
+            default: true,
         },
     },
 
-    inject: [
-        'grid',
-        'sortableItemClass',
-        'sortableHandleClass',
-        'storeName',
-    ],
+    inject: ['grid', 'sortableItemClass', 'sortableHandleClass', 'storeName'],
 
     data() {
         return {
-            extraValues: {}
-        }
+            extraValues: {},
+        };
     },
 
     computed: {
         isExcessive() {
             const max = this.grid.config.max_rows;
-            if (! max) return false;
+            if (!max) return false;
             return this.index >= max;
-        }
+        },
     },
 
     methods: {
@@ -120,11 +117,9 @@ export default {
 
         errors(handle) {
             const state = this.$store.state.publish[this.storeName];
-            if (! state) return [];
+            if (!state) return [];
             return state.errors[this.fieldPath(handle)] || [];
         },
-
-    }
-
-}
+    },
+};
 </script>
diff --git a/resources/js/components/fieldtypes/grid/Stacked.vue b/resources/js/components/fieldtypes/grid/Stacked.vue
index ab4c84d754..3ef2fb16cd 100644
--- a/resources/js/components/fieldtypes/grid/Stacked.vue
+++ b/resources/js/components/fieldtypes/grid/Stacked.vue
@@ -1,48 +1,46 @@
 <template>
-<div>
-
-    <sortable-list
-        :model-value="rows"
-        :vertical="true"
-        :item-class="sortableItemClass"
-        :handle-class="sortableHandleClass"
-        append-to="body"
-        constrain-dimensions
-        @dragstart="$emit('focus')"
-        @dragend="$emit('blur')"
-        @update:model-value="(rows) => $emit('sorted', rows)"
-        v-slot="{}"
-    >
-        <div
-            class="grid-stacked"
-            :class="{
-                'mt-0': !allowFullscreen && hideDisplay,
-                'mt-4': !hideDisplay,
-                'mt-10': allowFullscreen,
-            }"
+    <div>
+        <sortable-list
+            :model-value="rows"
+            :vertical="true"
+            :item-class="sortableItemClass"
+            :handle-class="sortableHandleClass"
+            append-to="body"
+            constrain-dimensions
+            @dragstart="$emit('focus')"
+            @dragend="$emit('blur')"
+            @update:model-value="(rows) => $emit('sorted', rows)"
+            v-slot="{}"
         >
-            <stacked-row
-                v-for="(row, index) in rows"
-                :key="`row-${row._id}`"
-                :index="index"
-                :fields="fields"
-                :values="row"
-                :meta="meta[row._id]"
-                :name="name"
-                :field-path-prefix="fieldPathPrefix"
-                :can-delete="canDeleteRows"
-                :can-add-rows="canAddRows"
-                @updated="(row, value) => $emit('updated', row, value)"
-                @duplicate="(row) => $emit('duplicate', row)"
-                @meta-updated="$emit('meta-updated', row._id, $event)"
-                @removed="(row) => $emit('removed', row)"
-                @focus="$emit('focus')"
-                @blur="$emit('blur')"
-            />
-        </div>
-    </sortable-list>
-
-</div>
+            <div
+                class="grid-stacked"
+                :class="{
+                    'mt-0': !allowFullscreen && hideDisplay,
+                    'mt-4': !hideDisplay,
+                    'mt-10': allowFullscreen,
+                }"
+            >
+                <stacked-row
+                    v-for="(row, index) in rows"
+                    :key="`row-${row._id}`"
+                    :index="index"
+                    :fields="fields"
+                    :values="row"
+                    :meta="meta[row._id]"
+                    :name="name"
+                    :field-path-prefix="fieldPathPrefix"
+                    :can-delete="canDeleteRows"
+                    :can-add-rows="canAddRows"
+                    @updated="(row, value) => $emit('updated', row, value)"
+                    @duplicate="(row) => $emit('duplicate', row)"
+                    @meta-updated="$emit('meta-updated', row._id, $event)"
+                    @removed="(row) => $emit('removed', row)"
+                    @focus="$emit('focus')"
+                    @blur="$emit('blur')"
+                />
+            </div>
+        </sortable-list>
+    </div>
 </template>
 
 <script>
@@ -51,13 +49,11 @@ import StackedRow from './StackedRow.vue';
 import { SortableList } from '../../sortable/Sortable';
 
 export default {
-
     mixins: [View],
 
     components: {
         StackedRow,
-        SortableList
+        SortableList,
     },
-
-}
+};
 </script>
diff --git a/resources/js/components/fieldtypes/grid/StackedRow.vue b/resources/js/components/fieldtypes/grid/StackedRow.vue
index 5f82f758af..fb5a369f66 100644
--- a/resources/js/components/fieldtypes/grid/StackedRow.vue
+++ b/resources/js/components/fieldtypes/grid/StackedRow.vue
@@ -1,18 +1,26 @@
 <template>
-
     <div
-        class="replicator-set shadow-sm mb-4 rounded border dark:border-dark-900"
+        class="replicator-set mb-4 rounded border shadow-sm dark:border-dark-900"
         :class="[sortableItemClass, { 'opacity-50': isExcessive }]"
     >
-
         <div class="replicator-set-header">
-            <div class="item-move cursor-grab sortable-handle" :class="{ [sortableHandleClass]: grid.isReorderable }" />
-            <div class="py-2 rtl:pr-2 ltr:pl-2 replicator-set-header-inner flex justify-end items-end w-full">
-                <button v-if="canAddRows" class="flex self-end group items-center rtl:ml-2 ltr:mr-2" @click="$emit('duplicate', index)" :aria-label="__('Duplicate Row')">
-                    <svg-icon name="light/duplicate" class="w-4 h-4 text-gray-600 group-hover:text-gray-900" />
+            <div class="item-move sortable-handle cursor-grab" :class="{ [sortableHandleClass]: grid.isReorderable }" />
+            <div class="replicator-set-header-inner flex w-full items-end justify-end py-2 ltr:pl-2 rtl:pr-2">
+                <button
+                    v-if="canAddRows"
+                    class="group flex items-center self-end ltr:mr-2 rtl:ml-2"
+                    @click="$emit('duplicate', index)"
+                    :aria-label="__('Duplicate Row')"
+                >
+                    <svg-icon name="light/duplicate" class="h-4 w-4 text-gray-600 group-hover:text-gray-900" />
                 </button>
-                <button v-if="canDelete" class="flex self-end group items-center" @click="$emit('removed', index)" :aria-label="__('Delete Row')">
-                    <svg-icon name="micro/trash" class="w-4 h-4 text-gray-600 group-hover:text-gray-900" />
+                <button
+                    v-if="canDelete"
+                    class="group flex items-center self-end"
+                    @click="$emit('removed', index)"
+                    :aria-label="__('Delete Row')"
+                >
+                    <svg-icon name="micro/trash" class="h-4 w-4 text-gray-600 group-hover:text-gray-900" />
                 </button>
             </div>
         </div>
@@ -38,17 +46,16 @@
             />
         </div>
     </div>
-
 </template>
 
 <style scoped>
-    .draggable-mirror {
-        position: relative;
-        z-index: 1000;
-    }
-    .draggable-source--is-dragging {
-        opacity: 0.5;
-    }
+.draggable-mirror {
+    position: relative;
+    z-index: 1000;
+}
+.draggable-source--is-dragging {
+    opacity: 0.5;
+}
 </style>
 
 <script>
@@ -57,13 +64,8 @@ import SetField from '../replicator/Field.vue';
 import { ValidatesFieldConditions } from '../../field-conditions/FieldConditions.js';
 
 export default {
-
-    mixins: [
-        Row,
-        ValidatesFieldConditions,
-    ],
+    mixins: [Row, ValidatesFieldConditions],
 
     components: { SetField },
-
-}
+};
 </script>
diff --git a/resources/js/components/fieldtypes/grid/Table.vue b/resources/js/components/fieldtypes/grid/Table.vue
index 0aef253695..cf100baa48 100644
--- a/resources/js/components/fieldtypes/grid/Table.vue
+++ b/resources/js/components/fieldtypes/grid/Table.vue
@@ -1,14 +1,9 @@
 <template>
-
     <table class="grid-table" v-if="rows.length > 0">
         <thead>
             <tr>
                 <th class="grid-drag-handle-header" v-if="grid.isReorderable"></th>
-                <grid-header-cell
-                    v-for="field in fields"
-                    :key="field.handle"
-                    :field="field"
-                />
+                <grid-header-cell v-for="field in fields" :key="field.handle" :field="field" />
                 <th class="grid-row-controls row-controls"></th>
             </tr>
         </thead>
@@ -45,7 +40,6 @@
             </tbody>
         </sortable-list>
     </table>
-
 </template>
 
 <script>
@@ -55,15 +49,13 @@ import GridHeaderCell from './HeaderCell.vue';
 import { SortableList, SortableItem } from '../../sortable/Sortable';
 
 export default {
-
     mixins: [View],
 
     components: {
         GridRow,
         GridHeaderCell,
         SortableList,
-        SortableItem
-    }
-
-}
+        SortableItem,
+    },
+};
 </script>
diff --git a/resources/js/components/fieldtypes/grid/View.vue b/resources/js/components/fieldtypes/grid/View.vue
index 38f830c90b..1f94f0747d 100644
--- a/resources/js/components/fieldtypes/grid/View.vue
+++ b/resources/js/components/fieldtypes/grid/View.vue
@@ -1,12 +1,10 @@
 <script>
 export default {
-
     props: ['fields', 'rows', 'meta', 'name', 'canDeleteRows', 'canAddRows', 'allowFullscreen', 'hideDisplay'],
 
     inject: ['grid'],
 
     computed: {
-
         sortableItemClass() {
             return `${this.name}-sortable-item`;
         },
@@ -17,16 +15,14 @@ export default {
 
         fieldPathPrefix() {
             return this.grid.fieldPathPrefix || this.grid.handle;
-        }
-
+        },
     },
 
     provide() {
         return {
             sortableItemClass: this.sortableItemClass,
-            sortableHandleClass: this.sortableHandleClass
-        }
+            sortableHandleClass: this.sortableHandleClass,
+        };
     },
-
-}
+};
 </script>
diff --git a/resources/js/components/fieldtypes/markdown/MarkdownButtonsSettingFieldtype.vue b/resources/js/components/fieldtypes/markdown/MarkdownButtonsSettingFieldtype.vue
index 602a3327e7..fd55b387e7 100644
--- a/resources/js/components/fieldtypes/markdown/MarkdownButtonsSettingFieldtype.vue
+++ b/resources/js/components/fieldtypes/markdown/MarkdownButtonsSettingFieldtype.vue
@@ -1,28 +1,25 @@
 <template>
     <div class="relative">
-        <div class="bard-fixed-toolbar dark bard-toolbar-setting" ref="buttons">
-
+        <div class="bard-fixed-toolbar bard-toolbar-setting dark" ref="buttons">
             <button
                 v-for="button in buttons"
                 :key="button.name"
                 v-tooltip="button.text"
-                :class="{'active': enabled(button.name)}"
+                :class="{ active: enabled(button.name) }"
                 @click="toggleButton(button.name)"
             >
                 <svg-icon :name="button.svg"></svg-icon>
             </button>
-
         </div>
     </div>
 </template>
 
 <script>
 import Fieldtype from '../Fieldtype.vue';
-import {Sortable, Plugins} from '@shopify/draggable';
+import { Sortable, Plugins } from '@shopify/draggable';
 import { availableButtons } from './buttons';
 
 export default {
-
     mixins: [Fieldtype],
 
     data() {
@@ -39,41 +36,36 @@ export default {
     },
 
     watch: {
-
         buttons: {
             deep: true,
             handler(buttons) {
-                const enabledButtonNames = buttons
-                    .filter(button => button.enabled)
-                    .map(button => button.name);
+                const enabledButtonNames = buttons.filter((button) => button.enabled).map((button) => button.name);
                 if (JSON.stringify(enabledButtonNames) !== JSON.stringify(this.data)) {
                     this.data = enabledButtonNames;
                 }
-            }
+            },
         },
 
         data(data) {
             this.update(data);
         },
-
     },
 
     methods: {
-
         initButtons() {
             // Get all default buttons first
             let available = availableButtons();
 
-            let buttons = available.map(button => {
+            let buttons = available.map((button) => {
                 button.enabled = this.data.includes(button.name);
                 return button;
             });
 
-            let standardButtons = available.map(button => button.name);
-            let customButtons = this.data.filter(button => !standardButtons.includes(button));
+            let standardButtons = available.map((button) => button.name);
+            let customButtons = this.data.filter((button) => !standardButtons.includes(button));
 
             if (customButtons.length) {
-                customButtons = customButtons.map(name => {
+                customButtons = customButtons.map((name) => {
                     return { name, text: name, html: `<span>${name.charAt(0).toUpperCase()}</span>`, enabled: true };
                 });
                 buttons = [...buttons, ...customButtons];
@@ -82,10 +74,10 @@ export default {
             // If the buttons have been reordered, we will remap everything to use the custom order,
             // and disabled buttons get stuck on the end. Otherwise, things will remain the same,
             // with inactive buttons dispersed throughout the toolbar, which looks cooler.
-            let enabledButtonNames = buttons.filter(button => button.enabled).map(button => button.name);
+            let enabledButtonNames = buttons.filter((button) => button.enabled).map((button) => button.name);
             if (JSON.stringify(enabledButtonNames) !== JSON.stringify(this.data)) {
-                buttons = this.data.map(name => _.findWhere(buttons, { name }));
-                let unused = available.filter(button => !this.data.includes(button.name));
+                buttons = this.data.map((name) => _.findWhere(buttons, { name }));
+                let unused = available.filter((button) => !this.data.includes(button.name));
                 buttons = [...buttons, ...unused];
             }
 
@@ -98,10 +90,12 @@ export default {
                 mirror: { constrainDimensions: true, xAxis: true, appendTo: 'body' },
                 swapAnimation: { horizontal: true },
                 plugins: [Plugins.SwapAnimation],
-                distance: 10
-            }).on('sortable:stop', e => {
-                this.buttons.splice(e.newIndex, 0, this.buttons.splice(e.oldIndex, 1)[0]);
-            }).on('mirror:create', (e) => e.cancel());
+                distance: 10,
+            })
+                .on('sortable:stop', (e) => {
+                    this.buttons.splice(e.newIndex, 0, this.buttons.splice(e.oldIndex, 1)[0]);
+                })
+                .on('mirror:create', (e) => e.cancel());
         },
 
         toggleButton(name) {
@@ -111,7 +105,7 @@ export default {
 
         enabled(name) {
             return _.findWhere(this.buttons, { name }).enabled;
-        }
-    }
+        },
+    },
 };
 </script>
diff --git a/resources/js/components/fieldtypes/markdown/MarkdownFieldtype.vue b/resources/js/components/fieldtypes/markdown/MarkdownFieldtype.vue
index 211fde37d6..2417905097 100644
--- a/resources/js/components/fieldtypes/markdown/MarkdownFieldtype.vue
+++ b/resources/js/components/fieldtypes/markdown/MarkdownFieldtype.vue
@@ -1,137 +1,190 @@
 <template>
-<portal name="markdown-fullscreen" :disabled="!fullScreenMode" target-class="markdown-fieldtype">
-<element-container @resized="refresh">
-    <div class="markdown-fieldtype-wrapper @container/markdown" :class="{'markdown-fullscreen': fullScreenMode, 'markdown-dark-mode': darkMode }">
-
-        <uploader
-            ref="uploader"
-            :enabled="assetsEnabled"
-            :container="container"
-            :path="folder"
-            @updated="uploadsUpdated"
-            @upload-complete="uploadComplete"
-            v-slot="{ dragging }"
-        >
-            <div>
-
-                <publish-field-fullscreen-header
-                    v-if="fullScreenMode"
-                    :title="config.display"
-                    :field-actions="fieldActions"
-                    @close="toggleFullscreen">
-                    <div class="markdown-toolbar">
-                        <div class="markdown-modes">
-                            <button @click="mode = 'write'" :class="{ 'active': mode == 'write' }" v-text=" __('Write')" :aria-pressed="mode === 'write' ? 'true' : 'false'" />
-                            <button @click="mode = 'preview'" :class="{ 'active': mode == 'preview' }" v-text=" __('Preview')" :aria-pressed="mode === 'preview' ? 'true' : 'false'" />
-                        </div>
-                        <div class="markdown-buttons" v-if="! isReadOnly">
-                            <button
-                                v-for="button in buttons"
-                                v-tooltip="button.text"
-                                :aria-label="button.text"
-                                @click="button.command(editor)"
-                            >
-                                <svg-icon :name="button.svg" class="w-4 h-4" />
-                            </button>
-                            <button @click="toggleDarkMode" v-tooltip="darkMode ? __('Light Mode') : __('Dark Mode')" :aria-label="__('Toggle Dark Mode')" v-if="fullScreenMode">
-                                <svg-icon name="dark-mode" class="w-4 h-4" />
-                            </button>
-                        </div>
-                    </div>
-                </publish-field-fullscreen-header>
-
-                <div class="markdown-toolbar" v-if="!fullScreenMode">
-                    <div class="markdown-modes">
-                        <button @click="mode = 'write'" :class="{ 'active': mode == 'write' }" v-text=" __('Write')" :aria-pressed="mode === 'write' ? 'true' : 'false'" />
-                        <button @click="mode = 'preview'" :class="{ 'active': mode == 'preview' }" v-text=" __('Preview')" :aria-pressed="mode === 'preview' ? 'true' : 'false'" />
-                    </div>
-                    <div class="markdown-buttons" v-if="! isReadOnly">
-                        <button
-                            v-for="button in buttons"
-                            v-tooltip="button.text"
-                            :aria-label="button.text"
-                            @click="button.command(editor)"
+    <portal name="markdown-fullscreen" :disabled="!fullScreenMode" target-class="markdown-fieldtype">
+        <element-container @resized="refresh">
+            <div
+                class="markdown-fieldtype-wrapper @container/markdown"
+                :class="{ 'markdown-fullscreen': fullScreenMode, 'markdown-dark-mode': darkMode }"
+            >
+                <uploader
+                    ref="uploader"
+                    :enabled="assetsEnabled"
+                    :container="container"
+                    :path="folder"
+                    @updated="uploadsUpdated"
+                    @upload-complete="uploadComplete"
+                    v-slot="{ dragging }"
+                >
+                    <div>
+                        <publish-field-fullscreen-header
+                            v-if="fullScreenMode"
+                            :title="config.display"
+                            :field-actions="fieldActions"
+                            @close="toggleFullscreen"
                         >
-                            <svg-icon :name="button.svg" class="w-4 h-4" />
-                        </button>
-                        <button @click="toggleDarkMode" v-tooltip="darkMode ? __('Light Mode') : __('Dark Mode')" :aria-label="__('Toggle Dark Mode')" v-if="fullScreenMode">
-                            <svg-icon name="dark-mode" class="w-4 h-4" />
-                        </button>
-                    </div>
-                </div>
-
-                <div class="drag-notification" v-show="dragging">
-                    <svg-icon name="upload" class="h-12 w-12 mb-4" />
-                    {{ __('Drop File to Upload') }}
-                </div>
-
-                <uploads
-                    v-if="uploads.length"
-                    :uploads="uploads"
-                    class="-mt-px"
-                />
-
-                <div :class="`mode-wrap mode-${mode}`" @click="focus">
-                    <div class="markdown-writer"
-                        ref="writer"
-                        v-show="mode == 'write'"
-                        @dragover="draggingFile = true"
-                        @dragleave="draggingFile = false"
-                        @drop="draggingFile = false"
-                        @keydown="shortcut">
-
-                        <div class="editor" ref="codemirror"></div>
-
-                        <div class="helpers">
-                            <div class="flex w-full">
-                                <div class="markdown-cheatsheet-helper">
-                                    <button class="text-link flex items-center" @click="showCheatsheet = true" :aria-label="__('Show Markdown Cheatsheet')">
-                                        <svg-icon name="markdown-icon" class="w-6 h-4 items-start rtl:ml-2 ltr:mr-2" />
-                                        <span>{{ __('Markdown Cheatsheet') }}</span>
+                            <div class="markdown-toolbar">
+                                <div class="markdown-modes">
+                                    <button
+                                        @click="mode = 'write'"
+                                        :class="{ active: mode == 'write' }"
+                                        v-text="__('Write')"
+                                        :aria-pressed="mode === 'write' ? 'true' : 'false'"
+                                    />
+                                    <button
+                                        @click="mode = 'preview'"
+                                        :class="{ active: mode == 'preview' }"
+                                        v-text="__('Preview')"
+                                        :aria-pressed="mode === 'preview' ? 'true' : 'false'"
+                                    />
+                                </div>
+                                <div class="markdown-buttons" v-if="!isReadOnly">
+                                    <button
+                                        v-for="button in buttons"
+                                        v-tooltip="button.text"
+                                        :aria-label="button.text"
+                                        @click="button.command(editor)"
+                                    >
+                                        <svg-icon :name="button.svg" class="h-4 w-4" />
+                                    </button>
+                                    <button
+                                        @click="toggleDarkMode"
+                                        v-tooltip="darkMode ? __('Light Mode') : __('Dark Mode')"
+                                        :aria-label="__('Toggle Dark Mode')"
+                                        v-if="fullScreenMode"
+                                    >
+                                        <svg-icon name="dark-mode" class="h-4 w-4" />
                                     </button>
                                 </div>
                             </div>
-                            <div v-if="fullScreenMode" class="flex items-center rtl:pl-2 ltr:pr-2">
-                                <div class="whitespace-nowrap rtl:ml-4 ltr:mr-4"><span v-text="count.words" /> {{ __('Words') }}</div>
-                                <div class="whitespace-nowrap"><span v-text="count.characters" /> {{ __('Characters') }}</div>
+                        </publish-field-fullscreen-header>
+
+                        <div class="markdown-toolbar" v-if="!fullScreenMode">
+                            <div class="markdown-modes">
+                                <button
+                                    @click="mode = 'write'"
+                                    :class="{ active: mode == 'write' }"
+                                    v-text="__('Write')"
+                                    :aria-pressed="mode === 'write' ? 'true' : 'false'"
+                                />
+                                <button
+                                    @click="mode = 'preview'"
+                                    :class="{ active: mode == 'preview' }"
+                                    v-text="__('Preview')"
+                                    :aria-pressed="mode === 'preview' ? 'true' : 'false'"
+                                />
+                            </div>
+                            <div class="markdown-buttons" v-if="!isReadOnly">
+                                <button
+                                    v-for="button in buttons"
+                                    v-tooltip="button.text"
+                                    :aria-label="button.text"
+                                    @click="button.command(editor)"
+                                >
+                                    <svg-icon :name="button.svg" class="h-4 w-4" />
+                                </button>
+                                <button
+                                    @click="toggleDarkMode"
+                                    v-tooltip="darkMode ? __('Light Mode') : __('Dark Mode')"
+                                    :aria-label="__('Toggle Dark Mode')"
+                                    v-if="fullScreenMode"
+                                >
+                                    <svg-icon name="dark-mode" class="h-4 w-4" />
+                                </button>
                             </div>
                         </div>
 
-                        <div class="drag-notification" v-if="assetsEnabled && draggingFile">
-                            <svg-icon name="upload" class="h-12 w-12 mb-4" />
+                        <div class="drag-notification" v-show="dragging">
+                            <svg-icon name="upload" class="mb-4 h-12 w-12" />
                             {{ __('Drop File to Upload') }}
                         </div>
-                    </div>
 
-                    <div v-show="mode == 'preview'" v-html="markdownPreviewText" class="markdown-preview prose-sm @md/markdown:prose-base"></div>
-                </div>
-            </div>
-        </uploader>
-
-        <stack v-if="showAssetSelector && ! isReadOnly" name="markdown-asset-selector" @closed="closeAssetSelector">
-            <selector
-                  :container="container"
-                  :folder="folder"
-                  :selected="selectedAssets"
-                  :restrict-folder-navigation="restrictAssetNavigation"
-                  @selected="assetsSelected"
-                  @closed="closeAssetSelector"
-            />
-        </stack>
-
-        <stack name="markdownCheatSheet" v-if="showCheatsheet" @closed="showCheatsheet = false">
-            <div class="h-full overflow-auto p-6 bg-white dark:bg-dark-600 relative">
-                <button class="btn-close absolute top-0 rtl:left-0 ltr:right-0 mt-4 rtl:ml-8 ltr:mr-8" @click="showCheatsheet = false" :aria-label="__('Close Markdown Cheatsheet')">&times;</button>
-                <div class="max-w-md mx-auto my-8 prose">
-                    <h2 v-text="__('Markdown Cheatsheet')"></h2>
-                    <div v-html="__('markdown.cheatsheet')"></div>
-                </div>
-            </div>
-        </stack>
+                        <uploads v-if="uploads.length" :uploads="uploads" class="-mt-px" />
+
+                        <div :class="`mode-wrap mode-${mode}`" @click="focus">
+                            <div
+                                class="markdown-writer"
+                                ref="writer"
+                                v-show="mode == 'write'"
+                                @dragover="draggingFile = true"
+                                @dragleave="draggingFile = false"
+                                @drop="draggingFile = false"
+                                @keydown="shortcut"
+                            >
+                                <div class="editor" ref="codemirror"></div>
+
+                                <div class="helpers">
+                                    <div class="flex w-full">
+                                        <div class="markdown-cheatsheet-helper">
+                                            <button
+                                                class="text-link flex items-center"
+                                                @click="showCheatsheet = true"
+                                                :aria-label="__('Show Markdown Cheatsheet')"
+                                            >
+                                                <svg-icon
+                                                    name="markdown-icon"
+                                                    class="h-4 w-6 items-start ltr:mr-2 rtl:ml-2"
+                                                />
+                                                <span>{{ __('Markdown Cheatsheet') }}</span>
+                                            </button>
+                                        </div>
+                                    </div>
+                                    <div v-if="fullScreenMode" class="flex items-center ltr:pr-2 rtl:pl-2">
+                                        <div class="whitespace-nowrap ltr:mr-4 rtl:ml-4">
+                                            <span v-text="count.words" /> {{ __('Words') }}
+                                        </div>
+                                        <div class="whitespace-nowrap">
+                                            <span v-text="count.characters" /> {{ __('Characters') }}
+                                        </div>
+                                    </div>
+                                </div>
+
+                                <div class="drag-notification" v-if="assetsEnabled && draggingFile">
+                                    <svg-icon name="upload" class="mb-4 h-12 w-12" />
+                                    {{ __('Drop File to Upload') }}
+                                </div>
+                            </div>
 
-    </div>
-</element-container>
-</portal>
+                            <div
+                                v-show="mode == 'preview'"
+                                v-html="markdownPreviewText"
+                                class="markdown-preview prose-sm @md/markdown:prose-base"
+                            ></div>
+                        </div>
+                    </div>
+                </uploader>
+
+                <stack
+                    v-if="showAssetSelector && !isReadOnly"
+                    name="markdown-asset-selector"
+                    @closed="closeAssetSelector"
+                >
+                    <selector
+                        :container="container"
+                        :folder="folder"
+                        :selected="selectedAssets"
+                        :restrict-folder-navigation="restrictAssetNavigation"
+                        @selected="assetsSelected"
+                        @closed="closeAssetSelector"
+                    />
+                </stack>
+
+                <stack name="markdownCheatSheet" v-if="showCheatsheet" @closed="showCheatsheet = false">
+                    <div class="relative h-full overflow-auto bg-white p-6 dark:bg-dark-600">
+                        <button
+                            class="btn-close absolute top-0 mt-4 ltr:right-0 ltr:mr-8 rtl:left-0 rtl:ml-8"
+                            @click="showCheatsheet = false"
+                            :aria-label="__('Close Markdown Cheatsheet')"
+                        >
+                            &times;
+                        </button>
+                        <div class="prose mx-auto my-8 max-w-md">
+                            <h2 v-text="__('Markdown Cheatsheet')"></h2>
+                            <div v-html="__('markdown.cheatsheet')"></div>
+                        </div>
+                    </div>
+                </stack>
+            </div>
+        </element-container>
+    </portal>
 </template>
 
 <script>
@@ -160,7 +213,7 @@ import Selector from '../../assets/Selector.vue';
 import Uploader from '../../assets/Uploader.vue';
 import Uploads from '../../assets/Uploads.vue';
 // Keymaps
-import 'codemirror/keymap/sublime'
+import 'codemirror/keymap/sublime';
 
 /**
  * `ucs2decode` function from the punycode.js library.
@@ -184,11 +237,12 @@ function ucs2decode(string) {
     const length = string.length;
     while (counter < length) {
         const value = string.charCodeAt(counter++);
-        if (value >= 0xD800 && value <= 0xDBFF && counter < length) {
+        if (value >= 0xd800 && value <= 0xdbff && counter < length) {
             // It's a high surrogate, and there is a next character.
             const extra = string.charCodeAt(counter++);
-            if ((extra & 0xFC00) == 0xDC00) { // Low surrogate.
-                output.push(((value & 0x3FF) << 10) + (extra & 0x3FF) + 0x10000);
+            if ((extra & 0xfc00) == 0xdc00) {
+                // Low surrogate.
+                output.push(((value & 0x3ff) << 10) + (extra & 0x3ff) + 0x10000);
             } else {
                 // It's an unmatched surrogate; only append this code unit, in case the
                 // next code unit is the high surrogate of a surrogate pair.
@@ -203,7 +257,6 @@ function ucs2decode(string) {
 }
 
 export default {
-
     mixins: [Fieldtype],
 
     components: {
@@ -212,7 +265,7 @@ export default {
         Uploads,
     },
 
-    data: function() {
+    data: function () {
         return {
             data: this.value || '',
             buttons: [],
@@ -232,12 +285,11 @@ export default {
                 words: 0,
             },
             escBinding: null,
-            markdownPreviewText: null
+            markdownPreviewText: null,
         };
     },
 
     watch: {
-
         data(data) {
             this.updateDebounced(data);
             this.updateCount(data);
@@ -250,7 +302,6 @@ export default {
         readOnly(readOnly) {
             this.codemirror.setOption('readOnly', readOnly ? 'nocursor' : false);
         },
-
     },
 
     mounted() {
@@ -276,7 +327,6 @@ export default {
     },
 
     methods: {
-
         closeFullScreen() {
             this.fullScreenMode = false;
             this.escBinding.destroy();
@@ -298,10 +348,10 @@ export default {
         },
 
         toggleDarkMode() {
-            this.darkMode = ! this.darkMode;
+            this.darkMode = !this.darkMode;
         },
 
-        getText: function(selection) {
+        getText: function (selection) {
             var i = _.indexOf(this.selections, selection);
 
             return this.codemirror.getSelections()[i];
@@ -311,27 +361,27 @@ export default {
             var self = this;
             var replacements = [];
             let elements = {
-                "bold": {
-                    "pattern": /^\*{2}(.*)\*{2}$/,
-                    "delimiter": "**"
+                bold: {
+                    pattern: /^\*{2}(.*)\*{2}$/,
+                    delimiter: '**',
                 },
-                "code": {
-                    "pattern": /^\`(.*)\`$/,
-                    "delimiter": "`"
+                code: {
+                    pattern: /^\`(.*)\`$/,
+                    delimiter: '`',
                 },
-                "italic": {
-                    "pattern": /^\_(.*)\_$/,
-                    "delimiter": "_"
+                italic: {
+                    pattern: /^\_(.*)\_$/,
+                    delimiter: '_',
+                },
+                strikethrough: {
+                    pattern: /^\~\~(.*)\~\~$/,
+                    delimiter: '~~',
                 },
-                "strikethrough": {
-                    "pattern": /^\~\~(.*)\~\~$/,
-                    "delimiter": "~~"
-                }
             };
 
             _.each(self.selections, function (selection) {
                 let delimiter = elements[type]['delimiter'];
-                let replacement = (self.getText(selection).match(elements[type]['pattern']))
+                let replacement = self.getText(selection).match(elements[type]['pattern'])
                     ? self.removeInline(selection, elements[type]['delimiter'])
                     : delimiter + self.getText(selection) + delimiter;
 
@@ -347,18 +397,18 @@ export default {
             var self = this;
             var replacements = [];
             let elements = {
-                "code": {
-                    "pattern": /^\`\`\`(.*)\n(.*)\n\`\`\`$/,
-                    "delimiter": "\`\`\`"
+                code: {
+                    pattern: /^\`\`\`(.*)\n(.*)\n\`\`\`$/,
+                    delimiter: '\`\`\`',
                 },
             };
 
             _.each(self.selections, function (selection) {
                 let text = self.getText(selection);
                 let delimiter = elements[type]['delimiter'];
-                let replacement = (text.match(elements[type]['pattern']))
+                let replacement = text.match(elements[type]['pattern'])
                     ? self.removeInline(selection, delimiter)
-                    : delimiter + "\n" + text + "\n" + delimiter;
+                    : delimiter + '\n' + text + '\n' + delimiter;
 
                 replacements.push(replacement);
             });
@@ -372,26 +422,26 @@ export default {
             var text = this.getText(selection);
             var blockLength = delimiter.length;
 
-            return text.substring(blockLength, text.length-blockLength);
+            return text.substring(blockLength, text.length - blockLength);
         },
 
         toggleLine(type) {
-            let startPoint = this.codemirror.getCursor("start");
-            let endPoint = this.codemirror.getCursor("end");
+            let startPoint = this.codemirror.getCursor('start');
+            let endPoint = this.codemirror.getCursor('end');
             let patterns = {
-                "quote": /^(\s*)\>\s+/,
-                "unordered-list": /^(\s*)(\*|\-|\+)\s+/,
-                "ordered-list": /^(\s*)\d+\.\s+/
+                quote: /^(\s*)\>\s+/,
+                'unordered-list': /^(\s*)(\*|\-|\+)\s+/,
+                'ordered-list': /^(\s*)\d+\.\s+/,
             };
             let map = {
-                "quote": "> ",
-                "unordered-list": "- ",
-                "ordered-list": "1. "
+                quote: '> ',
+                'unordered-list': '- ',
+                'ordered-list': '1. ',
             };
 
             for (let i = startPoint.line; i <= endPoint.line; i++) {
                 let text = this.codemirror.getLine(i);
-                text = this.isInside(type) ? text.replace(patterns[type], "$1") : map[type] + text;
+                text = this.isInside(type) ? text.replace(patterns[type], '$1') : map[type] + text;
 
                 this.codemirror.replaceRange(text, { line: i, ch: 0 }, { line: i, ch: Infinity });
             }
@@ -401,44 +451,45 @@ export default {
 
         // Get the state of the current position to see what elements it may be inside
         getState(position) {
-            position = position || this.codemirror.getCursor("start");
+            position = position || this.codemirror.getCursor('start');
             let state = this.codemirror.getTokenAt(position);
 
-            if(!state.type) return {};
+            if (!state.type) return {};
 
-            let types = state.type.split(" ");
+            let types = state.type.split(' ');
 
             let ret = {},
-                data, text;
+                data,
+                text;
 
             for (var i = 0; i < types.length; i++) {
                 data = types[i];
 
-                if (data === "strong") {
+                if (data === 'strong') {
                     ret.bold = true;
-                } else if(data === "variable-2") {
+                } else if (data === 'variable-2') {
                     text = this.codemirror.getLine(position.line);
                     if (/^\s*\d+\.\s/.test(text)) {
-                        ret["ordered-list"] = true;
+                        ret['ordered-list'] = true;
                     } else {
-                        ret["unordered-list"] = true;
+                        ret['unordered-list'] = true;
                     }
-                } else if (data === "atom") {
+                } else if (data === 'atom') {
                     ret.quote = true;
-                } else if (data === "em") {
+                } else if (data === 'em') {
                     ret.italic = true;
-                } else if (data === "quote") {
+                } else if (data === 'quote') {
                     ret.quote = true;
-                } else if (data === "strikethrough") {
+                } else if (data === 'strikethrough') {
                     ret.strikethrough = true;
-                } else if (data === "comment") {
+                } else if (data === 'comment') {
                     ret.code = true;
-                } else if (data === "link") {
+                } else if (data === 'link') {
                     ret.link = true;
-                } else if (data === "tag") {
+                } else if (data === 'tag') {
                     ret.image = true;
                 } else if (data.match(/^header(\-[1-6])?$/)) {
-                    ret[data.replace("header", "heading")] = true;
+                    ret[data.replace('header', 'heading')] = true;
                 }
             }
 
@@ -455,21 +506,21 @@ export default {
             let cursor = doc.getCursor();
             let line = doc.getLine(cursor.line);
             let pos = { line: cursor.line };
-            let table = "|     |     |\n| --- | --- |\n|     |     |";
+            let table = '|     |     |\n| --- | --- |\n|     |     |';
 
             if (line.length === 0) {
                 doc.replaceRange(table, pos);
                 this.codemirror.focus();
                 this.codemirror.setCursor(cursor.line, 2);
             } else {
-                doc.replaceRange("\n\n" + table, pos);
+                doc.replaceRange('\n\n' + table, pos);
                 this.codemirror.focus();
                 this.codemirror.setCursor(cursor.line + 2, 2);
             }
         },
 
-        insertImage: function(url, alt) {
-            var cm = this.codemirror.doc
+        insertImage: function (url, alt) {
+            var cm = this.codemirror.doc;
 
             var selection = '';
             if (cm.somethingSelected()) {
@@ -481,14 +532,14 @@ export default {
             var url = url || '';
 
             // Replace the string
-            var str = '![' + selection + ']('+ url +')';
+            var str = '![' + selection + '](' + url + ')';
 
             cm.replaceSelection(str, 'start');
             // Select the text
             var line = cm.getCursor().line;
             var start = cm.getCursor().ch + 2; // move past the ![
             var end = start + selection.length;
-            cm.setSelection({line:line,ch:start}, {line:line,ch:end});
+            cm.setSelection({ line: line, ch: start }, { line: line, ch: end });
 
             this.codemirror.focus();
         },
@@ -499,13 +550,13 @@ export default {
          * @param  String url  URL of the image
          * @param  String alt  Alt text
          */
-        appendImage: function(url, alt) {
+        appendImage: function (url, alt) {
             alt = alt || '';
-            this.data += '\n\n!['+alt+']('+url+')';
+            this.data += '\n\n![' + alt + '](' + url + ')';
         },
 
-        insertLink: function(url, text) {
-            var cm = this.codemirror.doc
+        insertLink: function (url, text) {
+            var cm = this.codemirror.doc;
 
             var selection = '';
             if (cm.somethingSelected()) {
@@ -514,81 +565,89 @@ export default {
                 selection = text;
             }
 
-            if (! url) {
+            if (!url) {
                 url = prompt(__('Enter URL'), 'https://');
-                if (! url) {
+                if (!url) {
                     return;
                 }
             }
 
             // Replace the string
-            var str = '[' + selection + ']('+ url +')';
+            var str = '[' + selection + '](' + url + ')';
             cm.replaceSelection(str, 'start');
 
             // Select the text
             var line = cm.getCursor().line;
             var start = cm.getCursor().ch + 1; // move past the first [
             var end = start + selection.length;
-            cm.setSelection({line:line,ch:start}, {line:line,ch:end});
+            cm.setSelection({ line: line, ch: start }, { line: line, ch: end });
 
             this.codemirror.focus();
         },
 
-        appendLink: function(url, text) {
+        appendLink: function (url, text) {
             text = text || '';
-            this.data += '\n\n['+text+']('+url+')';
+            this.data += '\n\n[' + text + '](' + url + ')';
         },
 
         /**
          * Open the asset selector
          */
-        addAsset: function() {
+        addAsset: function () {
             this.showAssetSelector = true;
         },
 
         /**
          * Execute a keyboard shortcut, when applicable
          */
-        shortcut: function(e) {
+        shortcut: function (e) {
             var key = e.keyCode;
             var mod = e.metaKey === true || e.ctrlKey === true;
 
-            if (mod && key === 66) { // cmd+b
+            if (mod && key === 66) {
+                // cmd+b
                 this.toggleInline('bold');
                 e.preventDefault();
             }
 
-            if (mod && key === 73) { // cmd+i
+            if (mod && key === 73) {
+                // cmd+i
                 this.toggleInline('italic');
                 e.preventDefault();
             }
 
-            if (mod && key === 190) { // cmd+.
+            if (mod && key === 190) {
+                // cmd+.
                 this.toggleLine('quote');
                 e.preventDefault();
             }
 
-            if (mod && key === 192) { // ctrl+` (tick)
+            if (mod && key === 192) {
+                // ctrl+` (tick)
                 this.toggleInline('code');
                 e.preventDefault();
             }
 
-            if (mod && key === 76) { // cmd+l
+            if (mod && key === 76) {
+                // cmd+l
                 this.toggleLine('unordered-list');
                 e.preventDefault();
             }
 
-            if (mod && key === 79) { // cmd+o
+            if (mod && key === 79) {
+                // cmd+o
                 this.toggleLine('ordered-list');
                 e.preventDefault();
             }
 
-            if (mod && key === 220) { // cmd+\
+            if (mod && key === 220) {
+                // cmd+\
                 this.toggleBlock('code');
                 e.preventDefault();
             }
 
-            if (mod && key === 75) { // cmd+k
+            if (mod && key === 75) {
+                // cmd+k
                 this.insertLink();
                 e.preventDefault();
             }
@@ -602,21 +661,21 @@ export default {
         assetsSelected: function (assets) {
             // If one asset is chosen, it's safe to replace the selection.
             // Otherwise we'll just tack on the assets to the end of the text.
-            var method = (assets.length === 1) ? 'insert' : 'append';
+            var method = assets.length === 1 ? 'insert' : 'append';
 
             this.closeAssetSelector();
 
             // We don't want to maintain the asset selections
             this.selectedAssets = [];
 
-            this.$axios.post(cp_url('assets-fieldtype'), { assets }).then(response => {
+            this.$axios.post(cp_url('assets-fieldtype'), { assets }).then((response) => {
                 _(response.data).each((asset) => {
                     var alt = asset.values.alt || '';
-                    var url = encodeURI('statamic://'+asset.reference);
+                    var url = encodeURI('statamic://' + asset.reference);
                     if (asset.isImage) {
-                        this[method+'Image'](url, alt);
+                        this[method + 'Image'](url, alt);
                     } else {
-                        this[method+'Link'](url, alt);
+                        this[method + 'Link'](url, alt);
                     }
                 });
             });
@@ -661,31 +720,33 @@ export default {
         updateMarkdownPreview() {
             this.$axios
                 .post(this.meta.previewUrl, { value: this.data, config: this.config })
-                .then(response => this.markdownPreviewText = response.data)
-                .catch(e => this.$toast.error(e.response ? e.response.data.message : __('Something went wrong')));
+                .then((response) => (this.markdownPreviewText = response.data))
+                .catch((e) => this.$toast.error(e.response ? e.response.data.message : __('Something went wrong')));
         },
 
         initCodeMirror() {
             var self = this;
 
-            self.codemirror = markRaw(CodeMirror(this.$refs.codemirror, {
-                value: self.data,
-                mode: 'gfm',
-                dragDrop: false,
-                keyMap: 'sublime',
-                direction: document.querySelector('html').getAttribute('dir') ?? 'ltr',
-                lineWrapping: true,
-                viewportMargin: Infinity,
-                tabindex: 0,
-                autoRefresh: true,
-                readOnly: self.isReadOnly ? 'nocursor' : false,
-                inputStyle: 'contenteditable',
-                spellcheck: true,
-                extraKeys: {
-                    "Enter": "newlineAndIndentContinueMarkdownList",
-                    "Cmd-Left": "goLineLeftSmart"
-                }
-            }));
+            self.codemirror = markRaw(
+                CodeMirror(this.$refs.codemirror, {
+                    value: self.data,
+                    mode: 'gfm',
+                    dragDrop: false,
+                    keyMap: 'sublime',
+                    direction: document.querySelector('html').getAttribute('dir') ?? 'ltr',
+                    lineWrapping: true,
+                    viewportMargin: Infinity,
+                    tabindex: 0,
+                    autoRefresh: true,
+                    readOnly: self.isReadOnly ? 'nocursor' : false,
+                    inputStyle: 'contenteditable',
+                    spellcheck: true,
+                    extraKeys: {
+                        Enter: 'newlineAndIndentContinueMarkdownList',
+                        'Cmd-Left': 'goLineLeftSmart',
+                    },
+                }),
+            );
 
             self.codemirror.on('change', function (cm) {
                 self.data = cm.doc.getValue();
@@ -700,7 +761,7 @@ export default {
             });
 
             // Update CodeMirror if we change the value independent of CodeMirror
-            this.$watch('value', function(val) {
+            this.$watch('value', function (val) {
                 if (val !== self.codemirror.doc.getValue()) {
                     self.codemirror.doc.setValue(val);
                 }
@@ -710,20 +771,20 @@ export default {
         },
 
         refresh() {
-            this.$nextTick(function() {
+            this.$nextTick(function () {
                 this.codemirror.refresh();
-            })
+            });
         },
 
         initToolbarButtons() {
-            let buttons = this.config.buttons.map(button => {
+            let buttons = this.config.buttons.map((button) => {
                 return _.findWhere(availableButtons(), { name: button.toLowerCase() }) || button;
             });
 
             // Remove buttons that don't pass conditions.
             // eg. only the insert asset button can be shown if a container has been set.
-            buttons = buttons.filter(button => {
-                return (button.condition) ? button.condition.call(null, this.config) : true;
+            buttons = buttons.filter((button) => {
+                return button.condition ? button.condition.call(null, this.config) : true;
             });
 
             this.buttons = buttons;
@@ -733,7 +794,7 @@ export default {
             let trimmed = data.trim();
 
             this.count.characters = ucs2decode(trimmed.replace(/\s/g, '')).length;
-            this.count.words = trimmed.split(/\s+/).filter(word => word.length > 0).length;
+            this.count.words = trimmed.split(/\s+/).filter((word) => word.length > 0).length;
         },
 
         toggleFullscreen() {
@@ -742,11 +803,11 @@ export default {
     },
 
     computed: {
-        assetsEnabled: function() {
+        assetsEnabled: function () {
             return Boolean(this.config && this.config.container);
         },
 
-        container: function() {
+        container: function () {
             return this.config.container;
         },
 
@@ -754,7 +815,7 @@ export default {
             return this;
         },
 
-        folder: function() {
+        folder: function () {
             return this.config.folder || '/';
         },
 
@@ -763,24 +824,22 @@ export default {
         },
 
         replicatorPreview() {
-            if (! this.showFieldPreviews || ! this.config.replicator_preview) return;
+            if (!this.showFieldPreviews || !this.config.replicator_preview) return;
 
-            return marked(this.data || '', { renderer: new PlainTextRenderer })
-                .replace(/<\/?[^>]+(>|$)/g, "");
+            return marked(this.data || '', { renderer: new PlainTextRenderer() }).replace(/<\/?[^>]+(>|$)/g, '');
         },
 
         internalFieldActions() {
             return [
                 {
                     title: __('Toggle Fullscreen Mode'),
-                    icon: ({ vm }) => vm.fullScreenMode ? 'shrink-all' : 'expand-bold',
+                    icon: ({ vm }) => (vm.fullScreenMode ? 'shrink-all' : 'expand-bold'),
                     quick: true,
                     visibleWhenReadOnly: true,
                     run: this.toggleFullscreen,
                 },
             ];
         },
-    }
-
+    },
 };
 </script>
diff --git a/resources/js/components/fieldtypes/markdown/buttons.js b/resources/js/components/fieldtypes/markdown/buttons.js
index 2835e74e23..66659a72d2 100644
--- a/resources/js/components/fieldtypes/markdown/buttons.js
+++ b/resources/js/components/fieldtypes/markdown/buttons.js
@@ -1,14 +1,35 @@
 const availableButtons = () => [
     { name: 'bold', text: __('Bold'), command: (editor) => editor.toggleInline('bold'), svg: 'text-bold' },
     { name: 'italic', text: __('Italic'), command: (editor) => editor.toggleInline('italic'), svg: 'text-italic' },
-    { name: 'strikethrough', text: __('Strikethrough'), command: (editor) => editor.toggleInline('strikethrough'), svg: 'text-strike-through' },
-    { name: 'unorderedlist', text: __('Unordered List'), command: (editor) => editor.toggleLine('unordered-list'), svg: 'list-ul' },
-    { name: 'orderedlist', text: __('Ordered List'), command: (editor) => editor.toggleLine('ordered-list'), svg: 'list-ol' },
+    {
+        name: 'strikethrough',
+        text: __('Strikethrough'),
+        command: (editor) => editor.toggleInline('strikethrough'),
+        svg: 'text-strike-through',
+    },
+    {
+        name: 'unorderedlist',
+        text: __('Unordered List'),
+        command: (editor) => editor.toggleLine('unordered-list'),
+        svg: 'list-ul',
+    },
+    {
+        name: 'orderedlist',
+        text: __('Ordered List'),
+        command: (editor) => editor.toggleLine('ordered-list'),
+        svg: 'list-ol',
+    },
     { name: 'quote', text: __('Blockquote'), command: (editor) => editor.toggleLine('quote'), svg: 'quote' },
     { name: 'link', text: __('Insert Link'), command: (editor) => editor.insertLink(''), svg: 'insert-link' },
     { name: 'table', text: __('Table'), command: (editor) => editor.insertTable(), svg: 'add-table' },
-    { name: 'image', text: __('Insert Image'), command: (editor) => editor.insertImage(), svg: 'insert-image'},
-    { name: 'asset', text: __('Insert Asset'), command: (editor) => editor.addAsset(), svg: 'asset-folder', condition: (config) => config.container },
+    { name: 'image', text: __('Insert Image'), command: (editor) => editor.insertImage(), svg: 'insert-image' },
+    {
+        name: 'asset',
+        text: __('Insert Asset'),
+        command: (editor) => editor.addAsset(),
+        svg: 'asset-folder',
+        condition: (config) => config.container,
+    },
     { name: 'code', text: __('Inline Code'), command: (editor) => editor.toggleInline('code'), svg: 'code-inline' },
     { name: 'codeblock', text: __('Code Block'), command: (editor) => editor.toggleBlock('code'), svg: 'code-block' },
 ];
diff --git a/resources/js/components/fieldtypes/relationship/RelationshipFieldtype.vue b/resources/js/components/fieldtypes/relationship/RelationshipFieldtype.vue
index 36cf81a21b..74fd6569fe 100644
--- a/resources/js/components/fieldtypes/relationship/RelationshipFieldtype.vue
+++ b/resources/js/components/fieldtypes/relationship/RelationshipFieldtype.vue
@@ -1,5 +1,4 @@
 <template>
-
     <relationship-input
         ref="input"
         :name="name"
@@ -33,7 +32,6 @@
         @input="update"
         @item-data-updated="itemDataUpdated"
     />
-
 </template>
 
 <script>
@@ -41,23 +39,21 @@ import Fieldtype from '../Fieldtype.vue';
 import qs from 'qs';
 
 export default {
-
     mixins: [Fieldtype],
 
     data() {
         return {
             //
-        }
+        };
     },
 
     inject: {
         storeName: {
-            default: null
-        }
+            default: null,
+        },
     },
 
     computed: {
-
         maxItems() {
             return this.config.max_items || Infinity;
         },
@@ -79,10 +75,14 @@ export default {
         },
 
         selectionsUrl() {
-            return this.baseSelectionsUrl + '?' + qs.stringify({
-                config: this.configParameter,
-                ...this.meta.getBaseSelectionsUrlParameters,
-            });
+            return (
+                this.baseSelectionsUrl +
+                '?' +
+                qs.stringify({
+                    config: this.configParameter,
+                    ...this.meta.getBaseSelectionsUrlParameters,
+                })
+            );
         },
 
         baseSelectionsUrl() {
@@ -142,19 +142,16 @@ export default {
         },
 
         replicatorPreview() {
-            if (! this.showFieldPreviews || ! this.config.replicator_preview) return;
+            if (!this.showFieldPreviews || !this.config.replicator_preview) return;
 
-            return this.value.map(id => {
+            return this.value.map((id) => {
                 const item = _.findWhere(this.meta.data, { id });
                 return item ? item.title : id;
             });
-        }
-
+        },
     },
 
-
     methods: {
-
         itemDataUpdated(data) {
             const meta = clone(this.meta);
             meta.data = data;
@@ -163,9 +160,7 @@ export default {
 
         linkExistingItem() {
             this.$refs.input.$refs.existing.click();
-        }
-
-    }
-
-}
+        },
+    },
+};
 </script>
diff --git a/resources/js/components/fieldtypes/relationship/RelationshipIndexFieldtype.vue b/resources/js/components/fieldtypes/relationship/RelationshipIndexFieldtype.vue
index 23b9512f74..ab6831b38e 100644
--- a/resources/js/components/fieldtypes/relationship/RelationshipIndexFieldtype.vue
+++ b/resources/js/components/fieldtypes/relationship/RelationshipIndexFieldtype.vue
@@ -5,20 +5,26 @@
                 v-for="(item, i) in items"
                 :key="item.id"
                 class="relationship-index-field-item h-5"
-                :class="{ 'mb-1.5': i < items.length-1 }"
+                :class="{ 'mb-1.5': i < items.length - 1 }"
             >
-                <div class="flex items-center shrink">
-                    <div v-if="item.hasOwnProperty('published') && item.published !== null"
-                        class="little-dot h-1 w-1 rtl:ml-1 ltr:mr-1" :class="[item.published ? 'bg-green-600' : 'bg-gray-400 dark:bg-dark-200']" />
+                <div class="flex shrink items-center">
+                    <div
+                        v-if="item.hasOwnProperty('published') && item.published !== null"
+                        class="little-dot h-1 w-1 ltr:mr-1 rtl:ml-1"
+                        :class="[item.published ? 'bg-green-600' : 'bg-gray-400 dark:bg-dark-200']"
+                    />
                     <a :href="item.edit_url" :title="item.title" v-text="item.title" />
                 </div>
             </div>
         </div>
-        <button v-if="hasMore && ! showingAll" @click.stop="showAll" class="mt-1 text-blue text-2xs" v-text="__('messages.view_more_count', {count: value.length - 2})" />
-        <button v-if="showingAll" @click.stop="hideExtra" class="mt-1 text-blue text-2xs" v-text="__('Hide')" />
+        <button
+            v-if="hasMore && !showingAll"
+            @click.stop="showAll"
+            class="mt-1 text-2xs text-blue"
+            v-text="__('messages.view_more_count', { count: value.length - 2 })"
+        />
+        <button v-if="showingAll" @click.stop="hideExtra" class="mt-1 text-2xs text-blue" v-text="__('Hide')" />
     </div>
-
-
 </template>
 
 <script>
@@ -29,8 +35,8 @@ export default {
 
     data() {
         return {
-            showingAll: false
-        }
+            showingAll: false,
+        };
     },
 
     computed: {
@@ -50,9 +56,7 @@ export default {
 
         hideExtra() {
             this.showingAll = false;
-        }
-    }
-
-
-}
+        },
+    },
+};
 </script>
diff --git a/resources/js/components/fieldtypes/replicator/AddSetButton.vue b/resources/js/components/fieldtypes/replicator/AddSetButton.vue
index 628fbaf2ba..d47e4f37d0 100644
--- a/resources/js/components/fieldtypes/replicator/AddSetButton.vue
+++ b/resources/js/components/fieldtypes/replicator/AddSetButton.vue
@@ -1,37 +1,40 @@
 <template>
-
     <div class="replicator-set-picker">
         <set-picker :enabled="enabled" :sets="groups" @added="addSet">
             <template #trigger>
-                <div class="replicator-set-picker-button-wrapper flex items-center ">
+                <div class="replicator-set-picker-button-wrapper flex items-center">
                     <button
                         v-if="enabled"
                         class="btn-round flex items-center justify-center"
                         :class="{
-                            'h-5 w-5': ! last,
+                            'h-5 w-5': !last,
                             'mr-2': label?.length > 0,
                         }"
                         @click.stop="addSetButtonClicked"
                     >
-                        <svg-icon name="micro/plus"
+                        <svg-icon
+                            name="micro/plus"
                             :class="{
-                                'w-3 h-3 text-gray-800 dark:text-dark-175 group-hover:text-black dark:group-hover:dark-text-100': last,
-                                'w-2 h-2 text-gray-700 dark:text-dark-200 group-hover:text-black dark:group-hover:dark-text-100 transition duration-150': !last
-                            }" />
+                                'dark:group-hover:dark-text-100 h-3 w-3 text-gray-800 group-hover:text-black dark:text-dark-175':
+                                    last,
+                                'dark:group-hover:dark-text-100 h-2 w-2 text-gray-700 transition duration-150 group-hover:text-black dark:text-dark-200':
+                                    !last,
+                            }"
+                        />
                     </button>
-                    <span @click.stop="addSetButtonClicked" class="cursor-pointer text-sm dark:text-dark-175">{{ __(label) }}</span>
+                    <span @click.stop="addSetButtonClicked" class="cursor-pointer text-sm dark:text-dark-175">{{
+                        __(label)
+                    }}</span>
                 </div>
             </template>
         </set-picker>
     </div>
-
 </template>
 
 <script>
 import SetPicker from './SetPicker.vue';
 
 export default {
-
     components: {
         SetPicker,
     },
@@ -46,7 +49,6 @@ export default {
     },
 
     methods: {
-
         addSet(handle) {
             this.$emit('added', handle, this.index);
         },
@@ -55,9 +57,7 @@ export default {
             if (this.sets.length === 1) {
                 this.addSet(this.sets[0].handle);
             }
-        }
-
-    }
-
-}
+        },
+    },
+};
 </script>
diff --git a/resources/js/components/fieldtypes/replicator/Field.vue b/resources/js/components/fieldtypes/replicator/Field.vue
index a7fa1c4352..14ab9bde68 100644
--- a/resources/js/components/fieldtypes/replicator/Field.vue
+++ b/resources/js/components/fieldtypes/replicator/Field.vue
@@ -1,17 +1,20 @@
 <template>
-
-    <div class="p-4 m-0 @container" :class="classes">
+    <div class="m-0 p-4 @container" :class="classes">
         <div class="field-inner">
             <label class="block" :for="fieldId" v-if="showLabel">
-                <span v-if="showLabelText" v-tooltip="{content: field.handle, delay: 500, autoHide: false}">{{ display }}</span>
+                <span v-if="showLabelText" v-tooltip="{ content: field.handle, delay: 500, autoHide: false }">{{
+                    display
+                }}</span>
                 <i class="required" v-if="field.required">*</i>
-                <span v-if="isReadOnly" class="text-gray-500 font-normal text-2xs mx-1" v-text="__('Read Only')" />
+                <span v-if="isReadOnly" class="mx-1 text-2xs font-normal text-gray-500" v-text="__('Read Only')" />
             </label>
 
             <div
-                class="help-block" :class="{ '-mt-2': showLabel }"
+                class="help-block"
+                :class="{ '-mt-2': showLabel }"
                 v-if="instructions && field.instructions_position !== 'below'"
-                v-html="instructions" />
+                v-html="instructions"
+            />
 
             <publish-field-actions v-if="shouldShowFieldActions" :actions="fieldActions" />
         </div>
@@ -38,40 +41,38 @@
         <div
             class="help-block mt-2"
             v-if="instructions && field.instructions_position === 'below'"
-            v-html="instructions" />
+            v-html="instructions"
+        />
 
         <div v-if="hasError">
-            <small class="help-block text-red-500 mt-2 mb-0" v-for="(error, i) in errors" :key="i" v-text="error" />
+            <small class="help-block mb-0 mt-2 text-red-500" v-for="(error, i) in errors" :key="i" v-text="error" />
         </div>
-
     </div>
-
 </template>
 
 <script>
 export default {
-
     props: {
         field: {
             type: Object,
-            required: true
+            required: true,
         },
         meta: {
             type: Object,
         },
         value: {
-            required: true
+            required: true,
         },
         parentName: {
             type: String,
-            required: true
+            required: true,
         },
         setIndex: {
             type: Number,
-            required: true
+            required: true,
         },
         fieldPath: {
-            type: String
+            type: String,
         },
         readOnly: Boolean,
         showFieldPreviews: Boolean,
@@ -85,11 +86,10 @@ export default {
     data() {
         return {
             hasField: false,
-        }
+        };
     },
 
     computed: {
-
         fieldtypeComponent() {
             return `${this.field.component || this.field.type}-fieldtype`;
         },
@@ -99,13 +99,11 @@ export default {
         },
 
         display() {
-            return __(this.field.display || this.field.handle[0].toUpperCase() + this.field.handle.slice(1))
+            return __(this.field.display || this.field.handle[0].toUpperCase() + this.field.handle.slice(1));
         },
 
         instructions() {
-            return this.field.instructions
-                ? markdown(__(this.field.instructions))
-                : null
+            return this.field.instructions ? markdown(__(this.field.instructions)) : null;
         },
 
         storeState() {
@@ -123,7 +121,7 @@ export default {
         hasNestedError() {
             const prefix = `${this.fieldPath}.`;
 
-            return Object.keys(this.storeState.errors).some(handle => handle.startsWith(prefix));
+            return Object.keys(this.storeState.errors).some((handle) => handle.startsWith(prefix));
         },
 
         isReadOnly() {
@@ -139,14 +137,16 @@ export default {
                 this.shouldShowFieldActions ? 'has-field-dropdown' : '',
                 this.isReadOnly ? 'read-only-field' : '',
                 this.field.classes || '',
-                { 'has-error': this.hasError || this.hasNestedError }
+                { 'has-error': this.hasError || this.hasNestedError },
             ];
         },
 
         showLabel() {
-            return this.showLabelText // Need to see the label
-                || this.isReadOnly // Need to see the "Read Only" text
-                || this.field.required; // Need to see the asterisk
+            return (
+                this.showLabelText || // Need to see the label
+                this.isReadOnly || // Need to see the "Read Only" text
+                this.field.required
+            ); // Need to see the asterisk
         },
 
         showLabelText() {
@@ -154,8 +154,8 @@ export default {
         },
 
         fieldId() {
-            let prefix = this.fieldPath ? this.fieldPath+'.' : '';
-            return prefix+'field_'+this.field.handle;
+            let prefix = this.fieldPath ? this.fieldPath + '.' : '';
+            return prefix + 'field_' + this.field.handle;
         },
 
         shouldShowFieldActions() {
@@ -164,13 +164,11 @@ export default {
 
         fieldActions() {
             return this.hasField ? this.$refs.field.fieldActions : [];
-        }
-
+        },
     },
 
     mounted() {
         if (this.$refs.field) this.hasField = true;
     },
-
-}
+};
 </script>
diff --git a/resources/js/components/fieldtypes/replicator/ManagesPreviewText.js b/resources/js/components/fieldtypes/replicator/ManagesPreviewText.js
index 5cca94bad5..39be1289a5 100644
--- a/resources/js/components/fieldtypes/replicator/ManagesPreviewText.js
+++ b/resources/js/components/fieldtypes/replicator/ManagesPreviewText.js
@@ -1,7 +1,6 @@
-import PreviewHtml from "./PreviewHtml";
+import PreviewHtml from './PreviewHtml';
 
 export default {
-
     computed: {
         previewText() {
             const previews = _(this.previews).filter((value, handle) => {
@@ -10,11 +9,11 @@ export default {
             });
 
             return Object.values(previews)
-                .filter(value => {
+                .filter((value) => {
                     if (['null', '[]', '{}', ''].includes(JSON.stringify(value))) return null;
                     return value;
                 })
-                .map(value => {
+                .map((value) => {
                     if (value instanceof PreviewHtml) return value.html;
 
                     if (typeof value === 'string') return escapeHtml(value);
@@ -26,7 +25,6 @@ export default {
                     return escapeHtml(JSON.stringify(value));
                 })
                 .join(' / ');
-        }
-    }
-
-}
+        },
+    },
+};
diff --git a/resources/js/components/fieldtypes/replicator/ManagesSetMeta.js b/resources/js/components/fieldtypes/replicator/ManagesSetMeta.js
index df18e7b137..b62221d943 100644
--- a/resources/js/components/fieldtypes/replicator/ManagesSetMeta.js
+++ b/resources/js/components/fieldtypes/replicator/ManagesSetMeta.js
@@ -1,7 +1,6 @@
 import ManagesRowMeta from '../grid/ManagesRowMeta';
 
 export default {
-
     mixins: [ManagesRowMeta],
 
     methods: {
@@ -12,6 +11,5 @@ export default {
         removeSetMeta(set) {
             this.removeRowMeta(set);
         },
-    }
-
-}
\ No newline at end of file
+    },
+};
diff --git a/resources/js/components/fieldtypes/replicator/Replicator.vue b/resources/js/components/fieldtypes/replicator/Replicator.vue
index 4c1b9d3694..656556d324 100644
--- a/resources/js/components/fieldtypes/replicator/Replicator.vue
+++ b/resources/js/components/fieldtypes/replicator/Replicator.vue
@@ -1,91 +1,91 @@
 <template>
-
-<portal name="replicator-fullscreen" :disabled="!fullScreenMode" :provide="provide">
-<!-- These wrappers allow any css that expected the field to
+    <portal name="replicator-fullscreen" :disabled="!fullScreenMode" :provide="provide">
+        <!-- These wrappers allow any css that expected the field to
      be within the context of a publish form to continue working
      once it has been portaled out. -->
-<div :class="{ 'publish-fields': fullScreenMode }">
-<div :class="{ wrapperClasses: fullScreenMode }">
-<div class="replicator-fieldtype-container" :class="{'replicator-fullscreen bg-gray-200 dark:bg-dark-700': fullScreenMode }">
-
-    <publish-field-fullscreen-header
-        v-if="fullScreenMode"
-        :title="config.display"
-        :field-actions="fieldActions"
-        @close="toggleFullscreen"
-    />
-
-    <section :class="{'mt-14 p-4 bg-gray-200 dark:bg-dark-700': fullScreenMode}">
-
-        <sortable-list
-            :model-value="value"
-            :vertical="true"
-            :item-class="sortableItemClass"
-            :handle-class="sortableHandleClass"
-            append-to="body"
-            constrain-dimensions
-            @update:model-value="sorted($event)"
-            @dragstart="$emit('focus')"
-            @dragend="$emit('blur')"
-            v-slot="{}"
-        >
-            <div class="replicator-set-container">
-                <replicator-set
-                    v-for="(set, index) in value"
-                    :key="set._id"
-                    :index="index"
-                    :values="set"
-                    :meta="meta.existing[set._id]"
-                    :config="setConfig(set.type)"
-                    :parent-name="name"
-                    :sortable-item-class="sortableItemClass"
-                    :sortable-handle-class="sortableHandleClass"
-                    :is-read-only="isReadOnly"
-                    :collapsed="collapsed.includes(set._id)"
-                    :field-path-prefix="fieldPathPrefix || handle"
-                    :has-error="setHasError(index)"
-                    :previews="previews[set._id]"
-                    :show-field-previews="config.previews"
-                    :can-add-set="canAddSet"
-                    @collapsed="collapseSet(set._id)"
-                    @expanded="expandSet(set._id)"
-                    @duplicated="duplicateSet(set._id)"
-                    @updated="updated"
-                    @meta-updated="updateSetMeta(set._id, $event)"
-                    @removed="removed(set, index)"
-                    @focus="focused = true"
-                    @blur="blurred"
-                    @previews-updated="updateSetPreviews(set._id, $event)"
+        <div :class="{ 'publish-fields': fullScreenMode }">
+            <div :class="{ wrapperClasses: fullScreenMode }">
+                <div
+                    class="replicator-fieldtype-container"
+                    :class="{ 'replicator-fullscreen bg-gray-200 dark:bg-dark-700': fullScreenMode }"
                 >
-                    <template v-slot:picker>
+                    <publish-field-fullscreen-header
+                        v-if="fullScreenMode"
+                        :title="config.display"
+                        :field-actions="fieldActions"
+                        @close="toggleFullscreen"
+                    />
+
+                    <section :class="{ 'mt-14 bg-gray-200 p-4 dark:bg-dark-700': fullScreenMode }">
+                        <sortable-list
+                            :model-value="value"
+                            :vertical="true"
+                            :item-class="sortableItemClass"
+                            :handle-class="sortableHandleClass"
+                            append-to="body"
+                            constrain-dimensions
+                            @update:model-value="sorted($event)"
+                            @dragstart="$emit('focus')"
+                            @dragend="$emit('blur')"
+                            v-slot="{}"
+                        >
+                            <div class="replicator-set-container">
+                                <replicator-set
+                                    v-for="(set, index) in value"
+                                    :key="set._id"
+                                    :index="index"
+                                    :values="set"
+                                    :meta="meta.existing[set._id]"
+                                    :config="setConfig(set.type)"
+                                    :parent-name="name"
+                                    :sortable-item-class="sortableItemClass"
+                                    :sortable-handle-class="sortableHandleClass"
+                                    :is-read-only="isReadOnly"
+                                    :collapsed="collapsed.includes(set._id)"
+                                    :field-path-prefix="fieldPathPrefix || handle"
+                                    :has-error="setHasError(index)"
+                                    :previews="previews[set._id]"
+                                    :show-field-previews="config.previews"
+                                    :can-add-set="canAddSet"
+                                    @collapsed="collapseSet(set._id)"
+                                    @expanded="expandSet(set._id)"
+                                    @duplicated="duplicateSet(set._id)"
+                                    @updated="updated"
+                                    @meta-updated="updateSetMeta(set._id, $event)"
+                                    @removed="removed(set, index)"
+                                    @focus="focused = true"
+                                    @blur="blurred"
+                                    @previews-updated="updateSetPreviews(set._id, $event)"
+                                >
+                                    <template v-slot:picker>
+                                        <add-set-button
+                                            class="between"
+                                            :groups="groupConfigs"
+                                            :sets="setConfigs"
+                                            :index="index"
+                                            :enabled="canAddSet"
+                                            @added="addSet"
+                                        />
+                                    </template>
+                                </replicator-set>
+                            </div>
+                        </sortable-list>
+
                         <add-set-button
-                            class="between"
+                            v-if="canAddSet"
+                            class="mt-3"
+                            :last="true"
                             :groups="groupConfigs"
                             :sets="setConfigs"
-                            :index="index"
-                            :enabled="canAddSet"
-                            @added="addSet" />
-                    </template>
-                </replicator-set>
+                            :index="value.length"
+                            :label="config.button_label"
+                            @added="addSet"
+                        />
+                    </section>
+                </div>
             </div>
-        </sortable-list>
-
-        <add-set-button v-if="canAddSet"
-            class="mt-3"
-            :last="true"
-            :groups="groupConfigs"
-            :sets="setConfigs"
-            :index="value.length"
-            :label="config.button_label"
-            @added="addSet" />
-
-    </section>
-
-</div>
-</div>
-</div>
-</portal>
-
+        </div>
+    </portal>
 </template>
 
 <script>
@@ -98,7 +98,6 @@ import { SortableList } from '../../sortable/Sortable';
 import reduce from 'underscore/modules/reduce';
 
 export default {
-
     mixins: [Fieldtype, ManagesSetMeta],
 
     components: {
@@ -117,13 +116,12 @@ export default {
             fullScreenMode: false,
             provide: {
                 storeName: this.storeName,
-                replicatorSets: this.config.sets
-            }
-        }
+                replicatorSets: this.config.sets,
+            },
+        };
     },
 
     computed: {
-
         canAddSet() {
             if (this.isReadOnly) return false;
 
@@ -131,9 +129,13 @@ export default {
         },
 
         setConfigs() {
-            return reduce(this.groupConfigs, (sets, group) => {
-                return sets.concat(group.sets);
-            }, []);
+            return reduce(
+                this.groupConfigs,
+                (sets, group) => {
+                    return sets.concat(group.sets);
+                },
+                [],
+            );
         },
 
         groupConfigs() {
@@ -153,7 +155,7 @@ export default {
         },
 
         replicatorPreview() {
-            if (! this.showFieldPreviews || ! this.config.replicator_preview) return;
+            if (!this.showFieldPreviews || !this.config.replicator_preview) return;
 
             return `${__(this.config.display)}: ${__n(':count set|:count sets', this.value.length)}`;
         },
@@ -176,7 +178,7 @@ export default {
                 },
                 {
                     title: __('Toggle Fullscreen Mode'),
-                    icon: ({ vm }) => vm.fullScreenMode ? 'shrink-all' : 'expand-bold',
+                    icon: ({ vm }) => (vm.fullScreenMode ? 'shrink-all' : 'expand-bold'),
                     quick: true,
                     visibleWhenReadOnly: true,
                     run: this.toggleFullscreen,
@@ -186,7 +188,6 @@ export default {
     },
 
     methods: {
-
         setConfig(handle) {
             return _.find(this.setConfigs, { handle }) || {};
         },
@@ -217,17 +218,13 @@ export default {
 
             this.updateSetMeta(set._id, this.meta.new[handle]);
 
-            this.update([
-                ...this.value.slice(0, index),
-                set,
-                ...this.value.slice(index)
-            ]);
+            this.update([...this.value.slice(0, index), set, ...this.value.slice(index)]);
 
             this.expandSet(set._id);
         },
 
         duplicateSet(old_id) {
-            const index = this.value.findIndex(v => v._id === old_id);
+            const index = this.value.findIndex((v) => v._id === old_id);
             const old = this.value[index];
             const set = {
                 ...old,
@@ -238,11 +235,7 @@ export default {
 
             this.updateSetMeta(set._id, this.meta.existing[old_id]);
 
-            this.update([
-                ...this.value.slice(0, index + 1),
-                set,
-                ...this.value.slice(index + 1)
-            ]);
+            this.update([...this.value.slice(0, index + 1), set, ...this.value.slice(index + 1)]);
 
             this.expandSet(set._id);
         },
@@ -253,13 +246,13 @@ export default {
 
         collapseSet(id) {
             if (!this.collapsed.includes(id)) {
-                this.collapsed.push(id)
+                this.collapsed.push(id);
             }
         },
 
         expandSet(id) {
             if (this.config.collapse === 'accordion') {
-                this.collapsed = this.value.map(v => v._id).filter(v => v !== id);
+                this.collapsed = this.value.map((v) => v._id).filter((v) => v !== id);
                 return;
             }
 
@@ -292,7 +285,7 @@ export default {
         setHasError(index) {
             const prefix = `${this.fieldPathPrefix || this.handle}.${index}.`;
 
-            return Object.keys(this.storeState.errors ?? []).some(handle => handle.startsWith(prefix));
+            return Object.keys(this.storeState.errors ?? []).some((handle) => handle.startsWith(prefix));
         },
     },
 
@@ -301,7 +294,6 @@ export default {
     },
 
     watch: {
-
         focused(focused, oldFocused) {
             if (focused === oldFocused) return;
 
@@ -322,15 +314,13 @@ export default {
             deep: true,
             handler(value) {
                 if (JSON.stringify(this.meta.previews) === JSON.stringify(value)) {
-                    return
+                    return;
                 }
                 const meta = this.meta;
                 meta.previews = value;
                 this.updateMeta(meta);
-            }
+            },
         },
-
-    }
-
-}
+    },
+};
 </script>
diff --git a/resources/js/components/fieldtypes/replicator/ReplicatorIndex.vue b/resources/js/components/fieldtypes/replicator/ReplicatorIndex.vue
index 96a161334c..6dfe2274c0 100644
--- a/resources/js/components/fieldtypes/replicator/ReplicatorIndex.vue
+++ b/resources/js/components/fieldtypes/replicator/ReplicatorIndex.vue
@@ -1,17 +1,13 @@
 <template>
-
     <div v-if="value">
         {{ __n(':count set|:count sets', value) }}
     </div>
-
 </template>
 
 <script>
 import IndexFieldtype from '../IndexFieldtype.vue';
 
 export default {
-
     mixins: [IndexFieldtype],
-
-}
+};
 </script>
diff --git a/resources/js/components/fieldtypes/replicator/Set.vue b/resources/js/components/fieldtypes/replicator/Set.vue
index ff53f178b1..c3f0c5b9f6 100644
--- a/resources/js/components/fieldtypes/replicator/Set.vue
+++ b/resources/js/components/fieldtypes/replicator/Set.vue
@@ -1,13 +1,15 @@
 <template>
-
     <div :class="sortableItemClass">
         <slot name="picker" />
         <div class="replicator-set" :class="{ 'has-error': this.hasError }" :data-type="config.handle">
-
-            <div class="replicator-set-header" :class="{ 'p-2': isReadOnly, 'collapsed': collapsed, 'invalid': isInvalid }">
+            <div class="replicator-set-header" :class="{ 'p-2': isReadOnly, collapsed: collapsed, invalid: isInvalid }">
                 <div class="item-move sortable-handle" :class="sortableHandleClass" v-if="!isReadOnly"></div>
-                <div class="flex items-center flex-1 p-2 replicator-set-header-inner cursor-pointer" :class="{'flex items-center': collapsed}" @click="toggleCollapsedState">
-                    <label class="text-xs rtl:ml-2 ltr:mr-2 cursor-pointer">
+                <div
+                    class="replicator-set-header-inner flex flex-1 cursor-pointer items-center p-2"
+                    :class="{ 'flex items-center': collapsed }"
+                    @click="toggleCollapsedState"
+                >
+                    <label class="cursor-pointer text-xs ltr:mr-2 rtl:ml-2">
                         <span v-if="isSetGroupVisible">
                             {{ __(setGroup.display) }}
                             <svg-icon name="micro/chevron-right" class="w-4" />
@@ -15,25 +17,34 @@
                         {{ display || config.handle }}
                     </label>
                     <div class="flex items-center" v-if="config.instructions && !collapsed">
-                        <svg-icon name="micro/circle-help" class="text-gray-700 hover:text-gray-800 h-3 w-3 text-xs" v-tooltip="{ content: $markdown(__(config.instructions)), html:true }" />
+                        <svg-icon
+                            name="micro/circle-help"
+                            class="h-3 w-3 text-xs text-gray-700 hover:text-gray-800"
+                            v-tooltip="{ content: $markdown(__(config.instructions)), html: true }"
+                        />
                     </div>
-                    <div v-show="collapsed" class="flex-1 min-w-0 w-1 rtl:pl-8 ltr:pr-8">
+                    <div v-show="collapsed" class="w-1 min-w-0 flex-1 ltr:pr-8 rtl:pl-8">
                         <div
                             v-html="previewText"
-                            class="help-block mb-0 whitespace-nowrap overflow-hidden text-ellipsis" />
+                            class="help-block mb-0 overflow-hidden text-ellipsis whitespace-nowrap"
+                        />
                     </div>
                 </div>
                 <div class="replicator-set-controls" v-if="!isReadOnly">
                     <toggle-fieldtype
                         handle="set-enabled"
-                        class="toggle-sm rtl:ml-2 ltr:mr-2"
+                        class="toggle-sm ltr:mr-2 rtl:ml-2"
                         @update:value="toggleEnabledState"
                         :value="values.enabled"
-                        v-tooltip.top="(values.enabled) ? __('Included in output') : __('Hidden from output')" />
+                        v-tooltip.top="values.enabled ? __('Included in output') : __('Hidden from output')"
+                    />
                     <dropdown-list>
                         <dropdown-actions :actions="fieldActions" v-if="fieldActions.length" />
                         <div class="divider" />
-                        <dropdown-item :text="__(collapsed ? __('Expand Set') : __('Collapse Set'))" @click="toggleCollapsedState" />
+                        <dropdown-item
+                            :text="__(collapsed ? __('Expand Set') : __('Collapse Set'))"
+                            @click="toggleCollapsedState"
+                        />
                         <dropdown-item :text="__('Duplicate Set')" @click="duplicate" v-if="canAddSet" />
                         <dropdown-item :text="__('Delete Set')" class="warning" @click="destroy" />
                     </dropdown-list>
@@ -62,17 +73,16 @@
             </div>
         </div>
     </div>
-
 </template>
 
 <style scoped>
-    .draggable-mirror {
-        position: relative;
-        z-index: 1000;
-    }
-    .draggable-source--is-dragging {
-        opacity: 0.5;
-    }
+.draggable-mirror {
+    position: relative;
+    z-index: 1000;
+}
+.draggable-source--is-dragging {
+    opacity: 0.5;
+}
 </style>
 
 <script>
@@ -83,76 +93,70 @@ import HasFieldActions from '../../field-actions/HasFieldActions.js';
 import DropdownActions from '../../field-actions/DropdownActions.vue';
 
 export default {
-
     components: { SetField, DropdownActions },
 
-    mixins: [
-        ValidatesFieldConditions,
-        ManagesPreviewText,
-        HasFieldActions,
-    ],
+    mixins: [ValidatesFieldConditions, ManagesPreviewText, HasFieldActions],
 
     inject: ['replicatorSets', 'storeName'],
 
     props: {
         config: {
             type: Object,
-            required: true
+            required: true,
         },
         meta: {
             type: Object,
-            required: true
+            required: true,
         },
         index: {
             type: Number,
-            required: true
+            required: true,
         },
         collapsed: {
             type: Boolean,
-            default: false
+            default: false,
         },
         values: {
             type: Object,
-            required: true
+            required: true,
         },
         parentName: {
             type: String,
-            required: true
+            required: true,
         },
         fieldPathPrefix: {
             type: String,
-            required: true
+            required: true,
         },
         hasError: {
             type: Boolean,
-            default: false
+            default: false,
         },
         sortableItemClass: {
-            type: String
+            type: String,
         },
         sortableHandleClass: {
-            type: String
+            type: String,
         },
         canAddSet: {
             type: Boolean,
-            default: true
+            default: true,
         },
         isReadOnly: Boolean,
         previews: Object,
         showFieldPreviews: {
-            type: Boolean
-        }
+            type: Boolean,
+        },
     },
 
     data() {
         return {
             fieldPreviews: this.previews,
             extraValues: {},
-        }
+        };
     },
 
     computed: {
-
         fields() {
             return this.config.fields;
         },
@@ -213,13 +217,11 @@ export default {
                 storeName: this.storeName,
             };
         },
-
     },
 
     methods: {
-
         updated(handle, value) {
-            this.$emit('updated', this.index, {...this.values, [handle]: value });
+            this.$emit('updated', this.index, { ...this.values, [handle]: value });
         },
 
         metaUpdated(handle, value) {
@@ -227,11 +229,11 @@ export default {
         },
 
         previewUpdated(handle, value) {
-            this.$emit('previews-updated', this.fieldPreviews = { ...this.fieldPreviews, [handle]: value });
+            this.$emit('previews-updated', (this.fieldPreviews = { ...this.fieldPreviews, [handle]: value }));
         },
 
         destroy() {
-            if (! confirm(__('Are you sure?'))) return;
+            if (!confirm(__('Are you sure?'))) return;
 
             this.$emit('removed');
         },
@@ -241,7 +243,7 @@ export default {
         },
 
         toggleEnabledState() {
-            this.updated('enabled', ! this.values.enabled);
+            this.updated('enabled', !this.values.enabled);
         },
 
         toggleCollapsedState() {
@@ -267,8 +269,6 @@ export default {
         fieldPath(field) {
             return `${this.fieldPathPrefix}.${this.index}.${field.handle}`;
         },
-
-    }
-
-}
-</script>
\ No newline at end of file
+    },
+};
+</script>
diff --git a/resources/js/components/fieldtypes/replicator/SetPicker.vue b/resources/js/components/fieldtypes/replicator/SetPicker.vue
index 46f5edea0a..ed4115e3d4 100644
--- a/resources/js/components/fieldtypes/replicator/SetPicker.vue
+++ b/resources/js/components/fieldtypes/replicator/SetPicker.vue
@@ -1,5 +1,4 @@
 <template>
-
     <popover
         ref="popover"
         class="set-picker select-none"
@@ -14,46 +13,93 @@
             <slot name="trigger" />
         </template>
         <template #default>
-            <div class="set-picker-header p-3 border-b dark:border-dark-900 text-xs flex items-center">
-                <input ref="search" type="text" class="input-text text-xs h-auto py-1 px-2 border rounded w-full dark:bg-dark-650 dark:border-gray-900" :placeholder="__('Search Sets')" v-show="showSearch" v-model="search" />
-                <div v-if="showGroupBreadcrumb" class="flex items-center text-gray-700 dark:text-gray-600 font-medium">
-                    <button @click="unselectGroup" class="hover:text-gray-900 dark:hover:text-gray-500 rtl:mr-2.5 ltr:ml-2.5 rounded">
+            <div class="set-picker-header flex items-center border-b p-3 text-xs dark:border-dark-900">
+                <input
+                    ref="search"
+                    type="text"
+                    class="input-text h-auto w-full rounded border px-2 py-1 text-xs dark:border-gray-900 dark:bg-dark-650"
+                    :placeholder="__('Search Sets')"
+                    v-show="showSearch"
+                    v-model="search"
+                />
+                <div v-if="showGroupBreadcrumb" class="flex items-center font-medium text-gray-700 dark:text-gray-600">
+                    <button
+                        @click="unselectGroup"
+                        class="rounded hover:text-gray-900 dark:hover:text-gray-500 ltr:ml-2.5 rtl:mr-2.5"
+                    >
                         {{ __('Groups') }}
                     </button>
-                    <svg-icon name="micro/chevron-right" class="w-4 h-4" />
+                    <svg-icon name="micro/chevron-right" class="h-4 w-4" />
                     <span>{{ selectedGroupDisplayText }}</span>
                 </div>
             </div>
-            <div class="p-1 max-h-[21rem] overflow-auto">
-                <div v-for="(item, i) in items" :key="item.handle" class="cursor-pointer rounded" :class="{ 'bg-gray-200 dark:bg-dark-600': selectionIndex === i }" @mouseover="selectionIndex = i">
-                    <div v-if="item.type === 'group'" @click="selectGroup(item.handle)" class="flex items-center group px-2 py-1.5 rounded-md">
-                        <svg-icon :name="groupIconName(item.icon)" :directory="iconBaseDirectory" class="h-9 w-9 rounded bg-white dark:bg-dark-650 border border-gray-600 dark:border-dark-800 rtl:ml-2 ltr:mr-2 p-2 text-gray-800 dark:text-dark-175" />
+            <div class="max-h-[21rem] overflow-auto p-1">
+                <div
+                    v-for="(item, i) in items"
+                    :key="item.handle"
+                    class="cursor-pointer rounded"
+                    :class="{ 'bg-gray-200 dark:bg-dark-600': selectionIndex === i }"
+                    @mouseover="selectionIndex = i"
+                >
+                    <div
+                        v-if="item.type === 'group'"
+                        @click="selectGroup(item.handle)"
+                        class="group flex items-center rounded-md px-2 py-1.5"
+                    >
+                        <svg-icon
+                            :name="groupIconName(item.icon)"
+                            :directory="iconBaseDirectory"
+                            class="h-9 w-9 rounded border border-gray-600 bg-white p-2 text-gray-800 dark:border-dark-800 dark:bg-dark-650 dark:text-dark-175 ltr:mr-2 rtl:ml-2"
+                        />
                         <div class="flex-1">
-                            <div class="text-md font-medium text-gray-800 dark:text-dark-175 truncate w-52">{{ __(item.display || item.handle) }}</div>
-                            <div v-if="item.instructions" class="text-2xs text-gray-700 dark:text-dark-175 truncate w-52">{{ __(item.instructions) }}</div>
+                            <div class="w-52 truncate text-md font-medium text-gray-800 dark:text-dark-175">
+                                {{ __(item.display || item.handle) }}
+                            </div>
+                            <div
+                                v-if="item.instructions"
+                                class="w-52 truncate text-2xs text-gray-700 dark:text-dark-175"
+                            >
+                                {{ __(item.instructions) }}
+                            </div>
                         </div>
-                        <svg-icon name="micro/chevron-right-thin" class="text-gray-600 group-hover:text-dark-800 dark:group-hover:text-dark-175" />
+                        <svg-icon
+                            name="micro/chevron-right-thin"
+                            class="text-gray-600 group-hover:text-dark-800 dark:group-hover:text-dark-175"
+                        />
                     </div>
-                    <div v-if="item.type === 'set'" @click="addSet(item.handle)" class="flex items-center group px-2 py-1.5 rounded-md">
-                        <svg-icon :name="setIconName(item.icon)" :directory="iconBaseDirectory" class="h-9 w-9 rounded bg-white dark:bg-dark-650 border border-gray-600 dark:border-dark-800 rtl:ml-2 ltr:mr-2 p-2 text-gray-800 dark:text-dark-175" />
+                    <div
+                        v-if="item.type === 'set'"
+                        @click="addSet(item.handle)"
+                        class="group flex items-center rounded-md px-2 py-1.5"
+                    >
+                        <svg-icon
+                            :name="setIconName(item.icon)"
+                            :directory="iconBaseDirectory"
+                            class="h-9 w-9 rounded border border-gray-600 bg-white p-2 text-gray-800 dark:border-dark-800 dark:bg-dark-650 dark:text-dark-175 ltr:mr-2 rtl:ml-2"
+                        />
                         <div class="flex-1">
-                            <div class="text-md font-medium text-gray-800 dark:text-dark-175 truncate w-52">{{ __(item.display || item.handle) }}</div>
-                            <div v-if="item.instructions" class="text-2xs text-gray-700 dark:text-dark-175 truncate w-52">{{ __(item.instructions) }}</div>
+                            <div class="w-52 truncate text-md font-medium text-gray-800 dark:text-dark-175">
+                                {{ __(item.display || item.handle) }}
+                            </div>
+                            <div
+                                v-if="item.instructions"
+                                class="w-52 truncate text-2xs text-gray-700 dark:text-dark-175"
+                            >
+                                {{ __(item.instructions) }}
+                            </div>
                         </div>
                     </div>
                 </div>
-                <div v-if="noSearchResults" class="text-center text-gray-600 text-xs p-3">
+                <div v-if="noSearchResults" class="p-3 text-center text-xs text-gray-600">
                     {{ __('No results') }}
                 </div>
             </div>
         </template>
     </popover>
-
 </template>
 
 <script>
 export default {
-
     props: {
         sets: Array,
         enabled: { type: Boolean, default: true },
@@ -65,11 +111,10 @@ export default {
             search: null,
             selectionIndex: 0,
             keybindings: [],
-        }
+        };
     },
 
     computed: {
-
         showSearch() {
             return !this.hasMultipleGroups || !this.selectedGroup;
         },
@@ -83,9 +128,11 @@ export default {
         },
 
         hasMultipleSets() {
-            return this.sets.reduce((count, group) => {
-                return count + group.sets.length;
-            }, 0) > 1;
+            return (
+                this.sets.reduce((count, group) => {
+                    return count + group.sets.length;
+                }, 0) > 1
+            );
         },
 
         hasMultipleGroups() {
@@ -93,7 +140,7 @@ export default {
         },
 
         selectedGroup() {
-            return this.sets.find(group => group.handle === this.selectedGroupHandle);
+            return this.sets.find((group) => group.handle === this.selectedGroupHandle);
         },
 
         selectedGroupDisplayText() {
@@ -103,37 +150,40 @@ export default {
         visibleSets() {
             if (!this.selectedGroup && !this.search) return [];
 
-            let sets = this.selectedGroup ? this.selectedGroup.sets : this.sets.reduce((sets, group) => {
-                return sets.concat(group.sets);
-            }, []);
+            let sets = this.selectedGroup
+                ? this.selectedGroup.sets
+                : this.sets.reduce((sets, group) => {
+                      return sets.concat(group.sets);
+                  }, []);
 
             if (this.search) {
                 return sets
-                    .filter(set => !set.hide)
-                    .filter(set => {
-                        return __(set.display).toLowerCase().includes(this.search.toLowerCase())
-                            || set.handle.toLowerCase().includes(this.search.toLowerCase());
+                    .filter((set) => !set.hide)
+                    .filter((set) => {
+                        return (
+                            __(set.display).toLowerCase().includes(this.search.toLowerCase()) ||
+                            set.handle.toLowerCase().includes(this.search.toLowerCase())
+                        );
                     });
             }
 
-            return sets.filter(set => !set.hide);
+            return sets.filter((set) => !set.hide);
         },
 
         items() {
             let items = [];
 
             if (this.showGroups) {
-                this.sets.forEach(group => {
+                this.sets.forEach((group) => {
                     items.push({ ...group, type: 'group' });
                 });
             }
 
-            this.visibleSets.forEach(set => {
+            this.visibleSets.forEach((set) => {
                 items.push({ ...set, type: 'set' });
             });
 
             return items;
-
         },
 
         noSearchResults() {
@@ -153,24 +203,20 @@ export default {
             let iconFolder = this.$config.get('setIconsFolder');
 
             if (iconFolder) {
-                iconDirectory = iconDirectory+'/'+iconFolder;
+                iconDirectory = iconDirectory + '/' + iconFolder;
             }
 
             return iconDirectory;
         },
-
     },
 
     watch: {
-
         search() {
             this.selectionIndex = 0;
-        }
-
+        },
     },
 
     methods: {
-
         addSet(handle) {
             this.$emit('added', handle);
             this.unselectGroup();
@@ -204,14 +250,14 @@ export default {
 
         bindKeys() {
             this.keybindings = [
-                this.$keys.bindGlobal('up', e => this.keypressUp(e)),
-                this.$keys.bindGlobal('down', e => this.keypressDown(e)),
-                this.$keys.bindGlobal('enter', e => this.keypressEnter(e)),
+                this.$keys.bindGlobal('up', (e) => this.keypressUp(e)),
+                this.$keys.bindGlobal('down', (e) => this.keypressDown(e)),
+                this.$keys.bindGlobal('enter', (e) => this.keypressEnter(e)),
             ];
         },
 
         unbindKeys() {
-            this.keybindings.forEach(binding => binding.destroy());
+            this.keybindings.forEach((binding) => binding.destroy());
             this.keybindings = [];
         },
 
@@ -222,7 +268,7 @@ export default {
 
         keypressDown(e) {
             e.preventDefault();
-            this.selectionIndex = this.selectionIndex === this.items.length-1 ? 0 : this.selectionIndex + 1;
+            this.selectionIndex = this.selectionIndex === this.items.length - 1 ? 0 : this.selectionIndex + 1;
         },
 
         keypressEnter(e) {
@@ -236,28 +282,22 @@ export default {
         },
 
         triggerWasClicked() {
-            if (! this.hasMultipleSets) {
+            if (!this.hasMultipleSets) {
                 this.addSet(this.sets[0].sets[0].handle);
             }
         },
 
         groupIconName(name) {
-            if (! name) return 'folder-generic';
+            if (!name) return 'folder-generic';
 
-            return this.iconSubFolder
-                ? this.iconSubFolder+'/'+name
-                : name;
+            return this.iconSubFolder ? this.iconSubFolder + '/' + name : name;
         },
 
         setIconName(name) {
-            if (! name) return 'light/add';
+            if (!name) return 'light/add';
 
-            return this.iconSubFolder
-                ? this.iconSubFolder+'/'+name
-                : name;
+            return this.iconSubFolder ? this.iconSubFolder + '/' + name : name;
         },
-
-    }
-
-}
+    },
+};
 </script>
diff --git a/resources/js/components/fieldtypes/replicator/SetsFieldtype.vue b/resources/js/components/fieldtypes/replicator/SetsFieldtype.vue
index c2efd11f3c..05e20973a4 100644
--- a/resources/js/components/fieldtypes/replicator/SetsFieldtype.vue
+++ b/resources/js/components/fieldtypes/replicator/SetsFieldtype.vue
@@ -1,7 +1,5 @@
 <template>
-
     <div>
-
         <tabs
             :initial-tabs="tabs"
             :require-section="config.require_set"
@@ -17,9 +15,7 @@
             show-section-hide-field
             @updated="tabsUpdated"
         />
-
     </div>
-
 </template>
 
 <script>
@@ -28,17 +24,16 @@ import SuggestsConditionalFields from '../../blueprints/SuggestsConditionalField
 import Tabs from '../../blueprints/Tabs.vue';
 
 export default {
-
     mixins: [Fieldtype, SuggestsConditionalFields],
 
     components: {
-        Tabs
+        Tabs,
     },
 
     data() {
         return {
-            tabs: this.value
-        }
+            tabs: this.value,
+        };
     },
 
     provide: {
@@ -46,16 +41,13 @@ export default {
     },
 
     methods: {
-
         tabsUpdated(tabs) {
             this.update(tabs);
         },
 
         getSectionFieldsForConditionSuggestions(vm = null) {
             return vm.section.fields;
-        }
-
-    }
-
-}
+        },
+    },
+};
 </script>
diff --git a/resources/js/components/forms/CreateForm.vue b/resources/js/components/forms/CreateForm.vue
index ba11918ab2..6907a19480 100644
--- a/resources/js/components/forms/CreateForm.vue
+++ b/resources/js/components/forms/CreateForm.vue
@@ -1,46 +1,43 @@
 <template>
-    <div class="max-w-lg mt-4 mx-auto">
-
-        <div class="rounded p-6 lg:px-20 lg:py-10 shadow bg-white dark:bg-dark-600 dark:shadow-dark">
-            <header class="text-center mb-16">
+    <div class="mx-auto mt-4 max-w-lg">
+        <div class="rounded bg-white p-6 shadow dark:bg-dark-600 dark:shadow-dark lg:px-20 lg:py-10">
+            <header class="mb-16 text-center">
                 <h1 class="mb-6">{{ __('Create Form') }}</h1>
                 <p class="text-gray" v-text="__('messages.form_configure_intro')" />
             </header>
             <div class="mb-10">
-                <label class="font-bold text-base mb-1" for="name">{{ __('Title') }}</label>
-                <input type="text" v-model="title" class="input-text" autofocus tabindex="1">
-                <div class="text-2xs text-gray-600 mt-2 flex items-center">
+                <label class="mb-1 text-base font-bold" for="name">{{ __('Title') }}</label>
+                <input type="text" v-model="title" class="input-text" autofocus tabindex="1" />
+                <div class="mt-2 flex items-center text-2xs text-gray-600">
                     {{ __('messages.form_configure_title_instructions') }}
                 </div>
             </div>
             <div class="mb-4">
-                <label class="font-bold text-base mb-1" for="name">{{ __('Handle') }}</label>
+                <label class="mb-1 text-base font-bold" for="name">{{ __('Handle') }}</label>
                 <div class="relative">
-                    <loading-graphic inline text="" v-if="slug.busy" class="absolute top-3 right-3"/>
-                    <input type="text" v-model="handle" class="input-text" tabindex="2">
+                    <loading-graphic inline text="" v-if="slug.busy" class="absolute right-3 top-3" />
+                    <input type="text" v-model="handle" class="input-text" tabindex="2" />
                 </div>
-                <div class="text-2xs text-gray-600 mt-2 flex items-center">
+                <div class="mt-2 flex items-center text-2xs text-gray-600">
                     {{ __('messages.form_configure_handle_instructions') }}
                 </div>
             </div>
         </div>
 
-        <div class="flex justify-center mt-8">
-            <button tabindex="4" class="btn-primary mx-auto btn-lg" :disabled="! canSubmit" @click="submit">
-                {{ __('Create Form')}}
+        <div class="mt-8 flex justify-center">
+            <button tabindex="4" class="btn-primary btn-lg mx-auto" :disabled="!canSubmit" @click="submit">
+                {{ __('Create Form') }}
             </button>
         </div>
     </div>
 </template>
 
 <script>
-
 export default {
-
     props: {
         route: {
-            type: String
-        }
+            type: String,
+        },
     },
 
     data() {
@@ -48,13 +45,13 @@ export default {
             title: null,
             handle: null,
             slug: this.$slug.async().separatedBy('_'),
-        }
+        };
     },
 
     watch: {
         title(title) {
-            this.slug.create(title).then(slug => this.handle = slug);
-        }
+            this.slug.create(title).then((slug) => (this.handle = slug));
+        },
     },
 
     computed: {
@@ -65,20 +62,23 @@ export default {
 
     methods: {
         submit() {
-            this.$axios.post(this.route, {title: this.title, handle: this.handle}).then(response => {
-                window.location = response.data.redirect;
-            }).catch(error => {
-                this.$toast.error(error.response.data.message);
-            });
-        }
+            this.$axios
+                .post(this.route, { title: this.title, handle: this.handle })
+                .then((response) => {
+                    window.location = response.data.redirect;
+                })
+                .catch((error) => {
+                    this.$toast.error(error.response.data.message);
+                });
+        },
     },
 
     mounted() {
-        this.$keys.bindGlobal(['return'], e => {
+        this.$keys.bindGlobal(['return'], (e) => {
             if (this.canSubmit) {
                 this.submit();
             }
         });
-    }
-}
+    },
+};
 </script>
diff --git a/resources/js/components/forms/Listing.vue b/resources/js/components/forms/Listing.vue
index 57b6a99a4b..456003ffe6 100644
--- a/resources/js/components/forms/Listing.vue
+++ b/resources/js/components/forms/Listing.vue
@@ -1,6 +1,6 @@
 <template>
     <data-list :visible-columns="columns" :columns="columns" :rows="items" v-slot="{ filteredRows: rows }">
-        <div class="card overflow-hidden p-0 relative">
+        <div class="card relative overflow-hidden p-0">
             <data-list-bulk-actions
                 class="rounded"
                 :url="actionUrl"
@@ -15,7 +15,11 @@
                 <template #actions="{ row: form, index }">
                     <dropdown-list v-if="form.can_edit || form.can_edit_blueprint || form.actions.length">
                         <dropdown-item v-if="form.can_edit" :text="__('Edit')" :redirect="form.edit_url" />
-                        <dropdown-item v-if="form.can_edit_blueprint" :text="__('Edit Blueprint')" :redirect="form.blueprint_url" />
+                        <dropdown-item
+                            v-if="form.can_edit_blueprint"
+                            :text="__('Edit Blueprint')"
+                            :redirect="form.blueprint_url"
+                        />
                         <div class="divider" v-if="form.actions.length" />
                         <data-list-inline-actions
                             :item="form.id"
@@ -32,10 +36,9 @@
 </template>
 
 <script>
-import Listing from '../Listing.vue'
+import Listing from '../Listing.vue';
 
 export default {
-
     mixins: [Listing],
 
     props: ['initialColumns'],
@@ -44,8 +47,7 @@ export default {
         return {
             columns: this.initialColumns,
             requestUrl: cp_url('forms'),
-        }
-    }
-
-}
+        };
+    },
+};
 </script>
diff --git a/resources/js/components/forms/SubmissionListing.vue b/resources/js/components/forms/SubmissionListing.vue
index ad26f53a48..c0a97726dc 100644
--- a/resources/js/components/forms/SubmissionListing.vue
+++ b/resources/js/components/forms/SubmissionListing.vue
@@ -1,6 +1,5 @@
 <template>
     <div>
-
         <div v-if="initializing" class="card loading">
             <loading-graphic />
         </div>
@@ -16,8 +15,10 @@
             v-slot="{ hasSelections }"
         >
             <div>
-                <div class="card p-0 relative">
-                    <div class="flex flex-wrap items-center justify-between px-2 pb-2 text-sm border-b dark:border-dark-900">
+                <div class="card relative p-0">
+                    <div
+                        class="flex flex-wrap items-center justify-between border-b px-2 pb-2 text-sm dark:border-dark-900"
+                    >
                         <data-list-filter-presets
                             ref="presets"
                             :active-preset="activePreset"
@@ -30,11 +31,26 @@
                             @reset="filtersReset"
                         />
 
-                        <data-list-search class="h-8 mt-2 min-w-[240px] w-full" ref="search" v-model="searchQuery" :placeholder="searchPlaceholder" />
+                        <data-list-search
+                            class="mt-2 h-8 w-full min-w-[240px]"
+                            ref="search"
+                            v-model="searchQuery"
+                            :placeholder="searchPlaceholder"
+                        />
 
-                        <div class="flex space-x-2 rtl:space-x-reverse mt-2">
-                            <button class="btn btn-sm rtl:mr-2 ltr:ml-2" v-text="__('Reset')" v-show="isDirty" @click="$refs.presets.refreshPreset()" />
-                            <button class="btn btn-sm rtl:mr-2 ltr:ml-2" v-text="__('Save')" v-show="isDirty" @click="$refs.presets.savePreset()" />
+                        <div class="mt-2 flex space-x-2 rtl:space-x-reverse">
+                            <button
+                                class="btn btn-sm ltr:ml-2 rtl:mr-2"
+                                v-text="__('Reset')"
+                                v-show="isDirty"
+                                @click="$refs.presets.refreshPreset()"
+                            />
+                            <button
+                                class="btn btn-sm ltr:ml-2 rtl:mr-2"
+                                v-text="__('Save')"
+                                v-show="isDirty"
+                                @click="$refs.presets.savePreset()"
+                            />
                             <data-list-column-picker :preferences-key="preferencesKey('columns')" />
                         </div>
                     </div>
@@ -102,7 +118,6 @@
                 />
             </div>
         </data-list>
-
     </div>
 </template>
 
@@ -110,11 +125,10 @@
 import Listing from '../Listing.vue';
 
 export default {
-
     mixins: [Listing],
 
     props: {
-        form: String
+        form: String,
     },
 
     data() {
@@ -122,14 +136,13 @@ export default {
             listingKey: 'submissions',
             preferencesPrefix: `forms.${this.form}`,
             requestUrl: cp_url(`forms/${this.form}/submissions`),
-        }
+        };
     },
 
     computed: {
         actionContext() {
-            return {form: this.form};
+            return { form: this.form };
         },
     },
-
-}
+};
 </script>
diff --git a/resources/js/components/globals/Create.vue b/resources/js/components/globals/Create.vue
index 34439b39a1..3939331f92 100644
--- a/resources/js/components/globals/Create.vue
+++ b/resources/js/components/globals/Create.vue
@@ -1,33 +1,32 @@
 <template>
-    <div class="max-w-lg mt-4 mx-auto">
-
-        <div class="rounded p-6 lg:px-20 lg:py-10 shadow bg-white dark:bg-dark-600 dark:shadow-dark">
-            <header class="text-center mb-16">
+    <div class="mx-auto mt-4 max-w-lg">
+        <div class="rounded bg-white p-6 shadow dark:bg-dark-600 dark:shadow-dark lg:px-20 lg:py-10">
+            <header class="mb-16 text-center">
                 <h1 class="mb-6">{{ __('Create Global Set') }}</h1>
                 <p class="text-gray" v-text="__('messages.globals_configure_intro')" />
             </header>
             <div class="mb-10">
-                <label class="font-bold text-base mb-1" for="name">{{ __('Title') }}</label>
-                <input type="text" v-model="title" class="input-text" autofocus tabindex="1">
-                <div class="text-2xs text-gray-600 mt-2 flex items-center">
+                <label class="mb-1 text-base font-bold" for="name">{{ __('Title') }}</label>
+                <input type="text" v-model="title" class="input-text" autofocus tabindex="1" />
+                <div class="mt-2 flex items-center text-2xs text-gray-600">
                     {{ __('messages.globals_configure_title_instructions') }}
                 </div>
             </div>
             <div class="mb-4">
-                <label class="font-bold text-base mb-1" for="name">{{ __('Handle') }}</label>
+                <label class="mb-1 text-base font-bold" for="name">{{ __('Handle') }}</label>
                 <div class="relative">
-                    <loading-graphic inline text="" v-if="slug.busy" class="absolute top-3 right-3"/>
-                    <input type="text" v-model="handle" class="input-text" tabindex="2">
+                    <loading-graphic inline text="" v-if="slug.busy" class="absolute right-3 top-3" />
+                    <input type="text" v-model="handle" class="input-text" tabindex="2" />
                 </div>
-                <div class="text-2xs text-gray-600 mt-2 flex items-center">
+                <div class="mt-2 flex items-center text-2xs text-gray-600">
                     {{ __('messages.globals_configure_handle_instructions') }}
                 </div>
             </div>
         </div>
 
-        <div class="flex justify-center mt-8">
-            <button tabindex="4" class="btn-primary mx-auto btn-lg" :disabled="! canSubmit" @click="submit">
-                {{ __('Create Global Set')}}
+        <div class="mt-8 flex justify-center">
+            <button tabindex="4" class="btn-primary btn-lg mx-auto" :disabled="!canSubmit" @click="submit">
+                {{ __('Create Global Set') }}
             </button>
         </div>
     </div>
@@ -35,11 +34,10 @@
 
 <script>
 export default {
-
     props: {
         route: {
-            type: String
-        }
+            type: String,
+        },
     },
 
     data() {
@@ -47,13 +45,13 @@ export default {
             title: null,
             handle: null,
             slug: this.$slug.async().separatedBy('_'),
-        }
+        };
     },
 
     watch: {
         title(title) {
-            this.slug.create(title).then(slug => this.handle = slug);
-        }
+            this.slug.create(title).then((slug) => (this.handle = slug));
+        },
     },
 
     computed: {
@@ -64,21 +62,23 @@ export default {
 
     methods: {
         submit() {
-            this.$axios.post(this.route, {title: this.title, handle: this.handle}).then(response => {
-                window.location = response.data.redirect;
-            }).catch(error => {
-                this.$toast.error(error.response.data.message);
-            });
-        }
+            this.$axios
+                .post(this.route, { title: this.title, handle: this.handle })
+                .then((response) => {
+                    window.location = response.data.redirect;
+                })
+                .catch((error) => {
+                    this.$toast.error(error.response.data.message);
+                });
+        },
     },
 
     mounted() {
-        this.$keys.bindGlobal(['return'], e => {
+        this.$keys.bindGlobal(['return'], (e) => {
             if (this.canSubmit) {
                 this.submit();
             }
         });
-    }
-
-}
+    },
+};
 </script>
diff --git a/resources/js/components/globals/EditForm.vue b/resources/js/components/globals/EditForm.vue
index 42faea2f29..c9a3555b3d 100644
--- a/resources/js/components/globals/EditForm.vue
+++ b/resources/js/components/globals/EditForm.vue
@@ -1,5 +1,4 @@
 <template>
-
     <publish-container
         v-if="blueprint"
         ref="container"
@@ -13,28 +12,23 @@
         v-slot="{ setFieldValue, setFieldMeta }"
     >
         <div>
-            <configure-tabs
-                @updated="setFieldValue"
-                @meta-updated="setFieldMeta"
-                :enable-sidebar="false"/>
+            <configure-tabs @updated="setFieldValue" @meta-updated="setFieldMeta" :enable-sidebar="false" />
 
-            <div class="py-4 border-t dark:border-dark-950 flex justify-between">
-                <a :href="url" class="btn" v-text="__('Cancel') "/>
+            <div class="flex justify-between border-t py-4 dark:border-dark-950">
+                <a :href="url" class="btn" v-text="__('Cancel')" />
                 <button type="submit" class="btn-primary" @click="submit">{{ __('Save') }}</button>
             </div>
         </div>
     </publish-container>
-
 </template>
 
 <script>
 export default {
-
     props: {
         blueprint: Object,
         initialValues: Object,
         meta: Object,
-        url: String
+        url: String,
     },
 
     data() {
@@ -42,11 +36,10 @@ export default {
             values: this.initialValues,
             error: null,
             errors: {},
-        }
+        };
     },
 
     methods: {
-
         clearErrors() {
             this.error = null;
             this.errors = {};
@@ -56,11 +49,14 @@ export default {
             this.saving = true;
             this.clearErrors();
 
-            this.$axios.patch(this.url, this.values).then(response => {
-                this.saving = false;
-                this.$toast.success(__('Saved'));
-                this.$refs.container.saved();
-            }).catch(e => this.handleAxiosError(e));
+            this.$axios
+                .patch(this.url, this.values)
+                .then((response) => {
+                    this.saving = false;
+                    this.$toast.success(__('Saved'));
+                    this.$refs.container.saved();
+                })
+                .catch((e) => this.handleAxiosError(e));
         },
 
         handleAxiosError(e) {
@@ -74,15 +70,13 @@ export default {
                 this.$toast.error(__('Something went wrong'));
             }
         },
-
     },
 
     created() {
-        this.$keys.bindGlobal(['mod+s'], e => {
+        this.$keys.bindGlobal(['mod+s'], (e) => {
             e.preventDefault();
             this.submit();
         });
     },
-
-}
+};
 </script>
diff --git a/resources/js/components/globals/Listing.vue b/resources/js/components/globals/Listing.vue
index 6468396efa..c0b6b72c67 100644
--- a/resources/js/components/globals/Listing.vue
+++ b/resources/js/components/globals/Listing.vue
@@ -20,7 +20,8 @@
                             <resource-deleter
                                 :ref="`deleter_${global.id}`"
                                 :resource="global"
-                                @deleted="removeRow(global)">
+                                @deleted="removeRow(global)"
+                            >
                             </resource-deleter>
                         </dropdown-item>
                     </dropdown-list>
@@ -31,10 +32,9 @@
 </template>
 
 <script>
-import Listing from '../Listing.vue'
+import Listing from '../Listing.vue';
 
 export default {
-
     mixins: [Listing],
 
     props: ['globals'],
@@ -45,9 +45,8 @@ export default {
             columns: [
                 { label: __('Title'), field: 'title' },
                 { label: __('Handle'), field: 'handle' },
-            ]
-        }
-    }
-
-}
+            ],
+        };
+    },
+};
 </script>
diff --git a/resources/js/components/globals/PublishForm.vue b/resources/js/components/globals/PublishForm.vue
index fffa128984..8e3df2ff28 100644
--- a/resources/js/components/globals/PublishForm.vue
+++ b/resources/js/components/globals/PublishForm.vue
@@ -1,5 +1,4 @@
 <template>
-
     <div>
         <header class="mb-6">
             <breadcrumb :url="globalsUrl" :title="__('Globals')" />
@@ -7,18 +6,22 @@
             <div class="flex items-center">
                 <h1 class="flex-1" v-text="__(title)" />
 
-                <div class="pt-px text-2xs text-gray-600 dark:text-dark-200 rtl:mr-4 ltr:ml-4 flex" v-if="! canEdit">
-                    <svg-icon name="light/lock" class="w-4 rtl:ml-1 ltr:mr-1 -mt-1" /> {{ __('Read Only') }}
+                <div class="flex pt-px text-2xs text-gray-600 dark:text-dark-200 ltr:ml-4 rtl:mr-4" v-if="!canEdit">
+                    <svg-icon name="light/lock" class="-mt-1 w-4 ltr:mr-1 rtl:ml-1" /> {{ __('Read Only') }}
                 </div>
 
-                <dropdown-list v-if="canConfigure || canEditBlueprint" class="rtl:ml-2 ltr:mr-2">
+                <dropdown-list v-if="canConfigure || canEditBlueprint" class="ltr:mr-2 rtl:ml-2">
                     <dropdown-item v-if="canConfigure" v-text="__('Configure')" :redirect="configureUrl" />
-                    <dropdown-item v-if="canEditBlueprint" :text="__('Edit Blueprint')" :redirect="actions.editBlueprint" />
+                    <dropdown-item
+                        v-if="canEditBlueprint"
+                        :text="__('Edit Blueprint')"
+                        :redirect="actions.editBlueprint"
+                    />
                 </dropdown-list>
 
                 <site-selector
                     v-if="localizations.length > 1"
-                    class="rtl:ml-4 ltr:mr-4"
+                    class="ltr:mr-4 rtl:ml-4"
                     :sites="localizations"
                     :value="site"
                     @input="localizationSelected"
@@ -30,14 +33,18 @@
                     :class="{ 'opacity-25': !canSave }"
                     :disabled="!canSave"
                     @click.prevent="save"
-                    v-text="__('Save')" />
+                    v-text="__('Save')"
+                />
 
                 <slot name="action-buttons-right" />
             </div>
         </header>
 
-        <div v-if="fieldset.empty" class="text-center mt-10 border-2 dark:border-dark-300 border-dashed rounded-lg px-8 py-32">
-            <div class="max-w-md mx-auto opacity-50">
+        <div
+            v-if="fieldset.empty"
+            class="mt-10 rounded-lg border-2 border-dashed px-8 py-32 text-center dark:border-dark-300"
+        >
+            <div class="mx-auto max-w-md opacity-50">
                 <h1 class="my-6" v-text="__('This Global Set has no fields.')" />
                 <p v-text="__('messages.global_set_no_fields_description')" />
             </div>
@@ -67,7 +74,7 @@
                     v-bind="component.props"
                 />
                 <publish-tabs
-                    :read-only="! canEdit"
+                    :read-only="!canEdit"
                     :syncable="hasOrigin"
                     :enable-sidebar="false"
                     @updated="setFieldValue"
@@ -80,7 +87,6 @@
             </div>
         </publish-container>
     </div>
-
 </template>
 
 <script>
@@ -88,13 +94,10 @@ import SiteSelector from '../SiteSelector.vue';
 import HasHiddenFields from '../publish/HasHiddenFields';
 
 export default {
-
-    mixins: [
-        HasHiddenFields,
-    ],
+    mixins: [HasHiddenFields],
 
     components: {
-        SiteSelector
+        SiteSelector,
     },
 
     props: {
@@ -142,17 +145,16 @@ export default {
             error: null,
             errors: {},
             isRoot: this.initialIsRoot,
-        }
+        };
     },
 
     computed: {
-
         hasErrors() {
             return this.error || Object.keys(this.errors).length;
         },
 
         somethingIsLoading() {
-            return ! this.$progress.isComplete();
+            return !this.$progress.isComplete();
         },
 
         canSave() {
@@ -173,20 +175,16 @@ export default {
 
         originLocalization() {
             return _.findWhere(this.localizations, { origin: true });
-        }
-
+        },
     },
 
     watch: {
-
         saving(saving) {
             this.$progress.loading(`${this.publishContainer}-global-publish-form`, saving);
-        }
-
+        },
     },
 
     methods: {
-
         clearErrors() {
             this.error = null;
             this.errors = {};
@@ -202,34 +200,40 @@ export default {
         },
 
         runBeforeSaveHook() {
-            Statamic.$hooks.run('global-set.saving', {
-                globalSet: this.initialHandle,
-                values: this.values,
-                container: this.$refs.container,
-                storeName: this.publishContainer,
-            })
-            .then(this.performSaveRequest)
-            .catch(error => {
-                this.saving = false
-                this.$toast.error(error || 'Something went wrong');
-            })
+            Statamic.$hooks
+                .run('global-set.saving', {
+                    globalSet: this.initialHandle,
+                    values: this.values,
+                    container: this.$refs.container,
+                    storeName: this.publishContainer,
+                })
+                .then(this.performSaveRequest)
+                .catch((error) => {
+                    this.saving = false;
+                    this.$toast.error(error || 'Something went wrong');
+                });
         },
 
         performSaveRequest() {
-            const payload = { ...this.visibleValues, ...{
-                blueprint: this.fieldset.handle,
-                _localized: this.localizedFields,
-            }};
-
-            this.$axios[this.method](this.actions.save, payload).then(response => {
-                this.saving = false;
-                if (!response.data.saved) {
-                    return this.$toast.error(`Couldn't save global set`)
-                }
-                if (!this.isCreating) this.$toast.success(__('Saved'));
-                this.$refs.container.saved();
-                this.runAfterSaveHook(response);
-            }).catch(e => this.handleAxiosError(e));
+            const payload = {
+                ...this.visibleValues,
+                ...{
+                    blueprint: this.fieldset.handle,
+                    _localized: this.localizedFields,
+                },
+            };
+
+            this.$axios[this.method](this.actions.save, payload)
+                .then((response) => {
+                    this.saving = false;
+                    if (!response.data.saved) {
+                        return this.$toast.error(`Couldn't save global set`);
+                    }
+                    if (!this.isCreating) this.$toast.success(__('Saved'));
+                    this.$refs.container.saved();
+                    this.runAfterSaveHook(response);
+                })
+                .catch((e) => this.handleAxiosError(e));
         },
 
         runAfterSaveHook(response) {
@@ -241,7 +245,8 @@ export default {
                 })
                 .then(() => {
                     this.$nextTick(() => this.$emit('saved', response));
-                }).catch(e => {})
+                })
+                .catch((e) => {});
         },
 
         handleAxiosError(e) {
@@ -260,7 +265,7 @@ export default {
             if (localization.active) return;
 
             if (this.isDirty) {
-                if (! confirm(__('Are you sure? Unsaved changes will be lost.'))) {
+                if (!confirm(__('Are you sure? Unsaved changes will be lost.'))) {
                     return;
                 }
             }
@@ -271,7 +276,7 @@ export default {
                 window.history.replaceState({}, '', localization.url);
             }
 
-            this.$axios.get(localization.url).then(response => {
+            this.$axios.get(localization.url).then((response) => {
                 const data = response.data;
                 this.values = data.values;
                 this.originValues = data.originValues;
@@ -285,7 +290,7 @@ export default {
                 this.site = localization.handle;
                 this.localizing = false;
                 this.$nextTick(() => this.$refs.container.clearDirtyState());
-            })
+            });
         },
 
         localizationStatusText(localization) {
@@ -301,10 +306,10 @@ export default {
         },
 
         syncField(handle) {
-            if (! confirm(__('Are you sure? This field\'s value will be replaced by the value in the original entry.')))
+            if (!confirm(__("Are you sure? This field's value will be replaced by the value in the original entry.")))
                 return;
 
-            this.localizedFields = this.localizedFields.filter(field => field !== handle);
+            this.localizedFields = this.localizedFields.filter((field) => field !== handle);
             this.$refs.container.setFieldValue(handle, this.originValues[handle]);
 
             // Update the meta for this field. For instance, a relationship field would have its data preloaded into it.
@@ -313,16 +318,14 @@ export default {
         },
 
         desyncField(handle) {
-            if (!this.localizedFields.includes(handle))
-                this.localizedFields.push(handle);
+            if (!this.localizedFields.includes(handle)) this.localizedFields.push(handle);
 
             this.$refs.container.dirty();
         },
-
     },
 
     mounted() {
-        this.$keys.bindGlobal(['mod+s'], e => {
+        this.$keys.bindGlobal(['mod+s'], (e) => {
             e.preventDefault();
             this.save();
         });
@@ -330,7 +333,6 @@ export default {
 
     created() {
         window.history.replaceState({}, document.title, document.location.href.replace('created=true', ''));
-    }
-
-}
+    },
+};
 </script>
diff --git a/resources/js/components/globals/Sites.vue b/resources/js/components/globals/Sites.vue
index 52a038e930..46bddb7b3b 100644
--- a/resources/js/components/globals/Sites.vue
+++ b/resources/js/components/globals/Sites.vue
@@ -1,5 +1,4 @@
 <template>
-
     <div>
         <table class="grid-table">
             <thead>
@@ -12,7 +11,7 @@
                 <tr v-for="site in sites" :key="site.handle">
                     <td>
                         <div class="flex items-center text-sm">
-                            <toggle-input v-model="site.enabled" class="rtl:ml-4 ltr:mr-4" />
+                            <toggle-input v-model="site.enabled" class="ltr:mr-4 rtl:ml-4" />
                             {{ __(site.name) }}
                         </div>
                     </td>
@@ -21,7 +20,7 @@
                             :options="siteOriginOptions(site)"
                             :value="site.origin"
                             :searchable="false"
-                            :reduce="opt => opt.value"
+                            :reduce="(opt) => opt.value"
                             @input="site.origin = $event"
                         />
                     </td>
@@ -29,44 +28,36 @@
             </tbody>
         </table>
     </div>
-
 </template>
 
 <script>
 import Fieldtype from '../fieldtypes/Fieldtype.vue';
 
 export default {
-
     mixins: [Fieldtype],
 
     inject: ['storeName'],
 
     data() {
         return {
-            sites: this.value
-        }
+            sites: this.value,
+        };
     },
 
-    created() {
-    },
+    created() {},
 
     watch: {
-
         sites(sites) {
             this.update(sites);
-        }
-
+        },
     },
 
     methods: {
-
         siteOriginOptions(site) {
             return this.sites
-                .map(s => ({ value: s.handle, label: __(s.name) }))
-                .filter(s => s.value !== site.handle)
-        }
-
-    }
-
-}
+                .map((s) => ({ value: s.handle, label: __(s.name) }))
+                .filter((s) => s.value !== site.handle);
+        },
+    },
+};
 </script>
diff --git a/resources/js/components/importer/importer.js b/resources/js/components/importer/importer.js
index d9438de8c4..588e91d903 100644
--- a/resources/js/components/importer/importer.js
+++ b/resources/js/components/importer/importer.js
@@ -1,8 +1,7 @@
 export default {
-
     props: ['importer'],
 
-    data: function() {
+    data: function () {
         return {
             exporting: false,
             exported: false,
@@ -15,13 +14,13 @@ export default {
             showCollections: [],
             showTaxonomies: [],
             showGlobals: [],
-        }
+        };
     },
 
     computed: {
         totalPages: function () {
             return Object.keys(this.summary.pages).length;
-        }
+        },
     },
 
     mounted() {
@@ -29,7 +28,6 @@ export default {
     },
 
     methods: {
-
         import: function () {
             this.importing = true;
             this.$http.post(cp_url('import/import'), { summary: this.summary }).success(function (response) {
@@ -39,15 +37,15 @@ export default {
             });
         },
 
-        hasDuplicates (collection) {
-            return !! this.duplicateCount(collection);
+        hasDuplicates(collection) {
+            return !!this.duplicateCount(collection);
         },
 
         duplicateCount: function (items) {
             let count = 0;
 
             _.each(items, (item) => {
-                if (! item.exists) {
+                if (!item.exists) {
                     return;
                 }
 
@@ -57,9 +55,9 @@ export default {
             return count;
         },
 
-        uncheckDuplicates: function(items) {
+        uncheckDuplicates: function (items) {
             _.each(items, (item) => {
-                if (! item.exists) {
+                if (!item.exists) {
                     return;
                 }
 
@@ -79,7 +77,7 @@ export default {
         hideCollection: function (hidden) {
             this.showCollections = _.reject(this.showCollections, function (c) {
                 return c === hidden;
-            })
+            });
         },
 
         shouldShowCollection: function (collection) {
@@ -94,7 +92,7 @@ export default {
         hideTaxonomy: function (hidden) {
             this.showTaxonomies = _.reject(this.showTaxonomies, function (t) {
                 return t === hidden;
-            })
+            });
         },
 
         shouldShowTaxonomy: function (taxonomy) {
@@ -109,11 +107,11 @@ export default {
         hideGlobal: function (hidden) {
             this.showGlobals = _.reject(this.showGlobals, function (g) {
                 return g === hidden;
-            })
+            });
         },
 
         shouldShowGlobal: function (global) {
             return _.contains(this.showGlobals, global);
-        }
-    }
+        },
+    },
 };
diff --git a/resources/js/components/inputs/Select.vue b/resources/js/components/inputs/Select.vue
index 4d7d815043..18c23eae0e 100644
--- a/resources/js/components/inputs/Select.vue
+++ b/resources/js/components/inputs/Select.vue
@@ -1,7 +1,5 @@
 <template>
-
     <div class="select-input-container">
-
         <select
             v-if="display"
             class="select-input"
@@ -12,48 +10,38 @@
             @focus="$emit('focus')"
             @blur="$emit('blur')"
         >
-
-            <option
-                v-if="placeholder"
-                v-text="__(placeholder)"
-                value=""
-                disabled
-                :selected="modelValue === null" />
+            <option v-if="placeholder" v-text="__(placeholder)" value="" disabled :selected="modelValue === null" />
 
             <option
                 v-for="option in options"
                 :key="option.value"
                 v-text="__(option.label)"
                 :value="option.value"
-                :selected="isOptionSelected(option)" />
-
+                :selected="isOptionSelected(option)"
+            />
         </select>
 
         <div class="select-input-toggle">
             <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
-                <path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"/>
+                <path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z" />
             </svg>
         </div>
-
-     </div>
-
+    </div>
 </template>
 
 <script>
-
 export default {
-
     props: {
         name: {},
         disabled: { default: false },
-        options: { default: []},
+        options: { default: [] },
         placeholder: {
             required: false,
-            default: () => __('Choose...')
+            default: () => __('Choose...'),
         },
         modelValue: {},
         isReadOnly: { type: Boolean },
-        resetOnChange: { default: false }
+        resetOnChange: { default: false },
     },
 
     data() {
@@ -63,7 +51,6 @@ export default {
     },
 
     methods: {
-
         isOptionSelected(option) {
             return this.placeholder === false && this.modelValue === undefined
                 ? option.value == this.options[0].value
@@ -75,15 +62,13 @@ export default {
                 this.reset();
             }
 
-            this.$emit('update:model-value', event.target.value)
+            this.$emit('update:model-value', event.target.value);
         },
 
         reset() {
             this.display = false;
-            this.$nextTick(() => this.display = true);
-        }
-
-    }
-
-}
+            this.$nextTick(() => (this.display = true));
+        },
+    },
+};
 </script>
diff --git a/resources/js/components/inputs/Text.vue b/resources/js/components/inputs/Text.vue
index 59c1d55511..4fa6b026f9 100644
--- a/resources/js/components/inputs/Text.vue
+++ b/resources/js/components/inputs/Text.vue
@@ -26,21 +26,21 @@
                 @keydown="$emit('keydown', $event)"
                 @focus="$emit('focus')"
                 @blur="$emit('blur')"
-            >
+            />
             <slot name="append" v-if="append">
                 <div class="input-group-append">
                     {{ __(append) }}
                 </div>
             </slot>
         </div>
-        <div class="text-xs rtl:mr-2 ltr:ml-2" :class="limitIndicatorColor" v-if="limit">
+        <div class="text-xs ltr:ml-2 rtl:mr-2" :class="limitIndicatorColor" v-if="limit">
             <span v-text="currentLength"></span>/<span v-text="limit"></span>
         </div>
     </div>
 </template>
 
 <script>
-import LengthLimiter from '../LengthLimiter.vue'
+import LengthLimiter from '../LengthLimiter.vue';
 
 export default {
     emits: ['update:model-value', 'keydown', 'focus', 'blur'],
@@ -52,7 +52,7 @@ export default {
         id: { default: null },
         isReadOnly: { type: Boolean, default: false },
         placeholder: { required: false },
-        type: { default: "text" },
+        type: { default: 'text' },
         step: {},
         modelValue: { required: true },
         prepend: { default: null },
@@ -61,7 +61,7 @@ export default {
         autocomplete: { default: null },
         autoselect: { type: Boolean },
         min: { type: Number, default: undefined },
-        direction: { type: String }
+        direction: { type: String },
     },
     mounted() {
         if (this.autoselect) {
@@ -70,6 +70,6 @@ export default {
         if (this.focus) {
             this.$refs.input.focus();
         }
-    }
-}
+    },
+};
 </script>
diff --git a/resources/js/components/inputs/Textarea.vue b/resources/js/components/inputs/Textarea.vue
index 7bba8a93cf..506523c273 100644
--- a/resources/js/components/inputs/Textarea.vue
+++ b/resources/js/components/inputs/Textarea.vue
@@ -13,15 +13,18 @@
             @focus.stop="$emit('focus')"
             @blur.stop="$emit('blur')"
         />
-        <div class="rtl:text-left ltr:text-right text-xs -mb-3 @sm:-mb-5 @lg:-mb-5" :class="limitIndicatorColor" v-if="limit">
+        <div
+            class="-mb-3 text-xs @sm:-mb-5 @lg:-mb-5 ltr:text-right rtl:text-left"
+            :class="limitIndicatorColor"
+            v-if="limit"
+        >
             <span v-text="currentLength"></span>/<span v-text="limit"></span>
         </div>
     </div>
-
 </template>
 
 <script>
-import LengthLimiter from '../LengthLimiter.vue'
+import LengthLimiter from '../LengthLimiter.vue';
 import autosize from 'autosize';
 
 export default {
@@ -33,8 +36,7 @@ export default {
         placeholder: { required: false },
         modelValue: { required: true },
         id: { default: null },
-        focus: { type: Boolean, default: false }
-
+        focus: { type: Boolean, default: false },
     },
     mounted() {
         autosize(this.$refs.textarea);
@@ -55,10 +57,10 @@ export default {
 
     methods: {
         updateSize() {
-            this.$nextTick(function() {
-                autosize.update(this.$refs.textarea)
-            })
-        }
-    }
-}
+            this.$nextTick(function () {
+                autosize.update(this.$refs.textarea);
+            });
+        },
+    },
+};
 </script>
diff --git a/resources/js/components/inputs/Toggle.vue b/resources/js/components/inputs/Toggle.vue
index e5b4a6555d..40a4e7083d 100644
--- a/resources/js/components/inputs/Toggle.vue
+++ b/resources/js/components/inputs/Toggle.vue
@@ -2,7 +2,7 @@
     <button
         type="button"
         class="toggle-container"
-        :class="{ 'on': value, 'cursor-not-allowed read-only': readOnly }"
+        :class="{ on: value, 'read-only cursor-not-allowed': readOnly }"
         @click="toggle"
         :aria-pressed="stateLiteral"
         :aria-label="__('Toggle Button')"
@@ -14,15 +14,14 @@
 </template>
 
 <script>
-
 export default {
     props: {
         value: {
-            type: Boolean
+            type: Boolean,
         },
         readOnly: {
             type: Boolean,
-            default: () => false
+            default: () => false,
         },
     },
 
@@ -33,16 +32,15 @@ export default {
             }
 
             return 'false';
-        }
+        },
     },
 
     methods: {
         toggle() {
-            if (! this.readOnly) {
-                this.$emit("input", !this.value)
+            if (!this.readOnly) {
+                this.$emit('input', !this.value);
             }
-        }
-    }
-
-}
+        },
+    },
+};
 </script>
diff --git a/resources/js/components/inputs/relationship/CreateButton.vue b/resources/js/components/inputs/relationship/CreateButton.vue
index a46d2ecfcc..be22de4a4d 100644
--- a/resources/js/components/inputs/relationship/CreateButton.vue
+++ b/resources/js/components/inputs/relationship/CreateButton.vue
@@ -1,13 +1,15 @@
 <template>
-
     <div>
         <dropdown-list :disabled="creatables.length === 1">
             <template #trigger>
                 <button
-                    class="text-button text-blue dark:text-dark-blue-100 hover:text-gray-800 dark:hover:text-dark-100 rtl:ml-6 ltr:mr-6 flex items-center outline-none"
+                    class="text-button flex items-center text-blue outline-none hover:text-gray-800 dark:text-dark-blue-100 dark:hover:text-dark-100 ltr:mr-6 rtl:ml-6"
                     @click="create"
                 >
-                    <svg-icon name="light/content-writing" class="rtl:ml-1 ltr:mr-1 h-4 w-4 flex items-center"></svg-icon>
+                    <svg-icon
+                        name="light/content-writing"
+                        class="flex h-4 w-4 items-center ltr:mr-1 rtl:ml-1"
+                    ></svg-icon>
                     <span class="hidden @sm:block" v-text="__('Create & Link Item')" />
                     <span class="@sm:hidden" v-text="__('Create')" />
                 </button>
@@ -17,7 +19,8 @@
                 v-for="creatable in creatables"
                 :key="creatable.url"
                 :text="creatable.title"
-                @click="select(creatable)" />
+                @click="select(creatable)"
+            />
         </dropdown-list>
 
         <inline-create-form
@@ -31,16 +34,14 @@
             @closed="stopCreating"
         />
     </div>
-
 </template>
 
 <script>
 import InlineCreateForm from './InlineCreateForm.vue';
 
 export default {
-
     components: {
-        InlineCreateForm
+        InlineCreateForm,
     },
 
     props: {
@@ -54,19 +55,16 @@ export default {
     data() {
         return {
             creatable: null,
-        }
+        };
     },
 
     computed: {
-
         isCreating() {
             return this.creatable !== null;
-        }
-
+        },
     },
 
     methods: {
-
         itemCreated(item) {
             this.stopCreating();
             this.$emit('created', item);
@@ -77,15 +75,12 @@ export default {
         },
 
         create() {
-            if (this.creatables.length === 1)
-                this.select(this.creatables[0]);
+            if (this.creatables.length === 1) this.select(this.creatables[0]);
         },
 
         select(creatable) {
             this.creatable = creatable;
-        }
-
-    }
-
-}
+        },
+    },
+};
 </script>
diff --git a/resources/js/components/inputs/relationship/InlineCreateForm.vue b/resources/js/components/inputs/relationship/InlineCreateForm.vue
index 98faa86a37..229cc2c7d5 100644
--- a/resources/js/components/inputs/relationship/InlineCreateForm.vue
+++ b/resources/js/components/inputs/relationship/InlineCreateForm.vue
@@ -2,7 +2,6 @@
 import InlinePublishForm from './InlinePublishForm.vue';
 
 export default {
-
     mixins: [InlinePublishForm],
 
     props: {
@@ -16,20 +15,16 @@ export default {
             method: 'post',
             action: 'store',
             title: __('Create'),
-        }
+        };
     },
 
     inject: ['storeName'],
 
     methods: {
-
         saved(response) {
             this.$emit('created', response.data.data);
             this.$nextTick(() => this.close());
-        }
-
-    }
-
-}
+        },
+    },
+};
 </script>
-
diff --git a/resources/js/components/inputs/relationship/InlineEditForm.vue b/resources/js/components/inputs/relationship/InlineEditForm.vue
index 867eb60111..1301a72638 100644
--- a/resources/js/components/inputs/relationship/InlineEditForm.vue
+++ b/resources/js/components/inputs/relationship/InlineEditForm.vue
@@ -2,11 +2,10 @@
 import InlinePublishForm from './InlinePublishForm.vue';
 
 export default {
-
     mixins: [InlinePublishForm],
 
     props: {
-        item: Object
+        item: Object,
     },
 
     data() {
@@ -15,17 +14,14 @@ export default {
             method: 'patch',
             action: 'update',
             title: this.item.title,
-            itemUrl: this.item.edit_url
-        }
+            itemUrl: this.item.edit_url,
+        };
     },
 
     methods: {
-
         saved(response) {
             this.$emit('updated', response.data.data);
-        }
-
-    }
-
-}
+        },
+    },
+};
 </script>
diff --git a/resources/js/components/inputs/relationship/InlinePublishForm.vue b/resources/js/components/inputs/relationship/InlinePublishForm.vue
index a4b662004f..8695867201 100644
--- a/resources/js/components/inputs/relationship/InlinePublishForm.vue
+++ b/resources/js/components/inputs/relationship/InlinePublishForm.vue
@@ -1,49 +1,41 @@
 <template>
-
     <div>
-    <stack name="inline-editor"
-        :before-close="shouldClose"
-        :narrow="stackSize === 'narrow'"
-        :half="stackSize === 'half'"
-        :full="stackSize === 'full'"
-        @closed="close"
-    >
-    <div class="h-full overflow-scroll overflow-x-auto p-6 bg-gray-300 dark:bg-dark-800">
-
-        <div v-if="loading" class="absolute inset-0 z-200 flex items-center justify-center text-center">
-            <loading-graphic />
-        </div>
-
-        <component
-            class="max-w-3xl mx-auto"
-            :is="component"
-            v-if="!loading"
-            v-bind="componentPropValues"
-            :method="method"
-            :is-creating="creating"
-            :is-inline="true"
-            :publish-container="publishContainer"
-            @saved="saved"
+        <stack
+            name="inline-editor"
+            :before-close="shouldClose"
+            :narrow="stackSize === 'narrow'"
+            :half="stackSize === 'half'"
+            :full="stackSize === 'full'"
+            @closed="close"
         >
-            <template slot="action-buttons-right">
-                <slot name="action-buttons-right" />
-                <button
-                    type="button"
-                    class="btn-close"
-                    @click="confirmClose"
-                    v-html="'&times'" />
-            </template>
-        </component>
-
+            <div class="h-full overflow-scroll overflow-x-auto bg-gray-300 p-6 dark:bg-dark-800">
+                <div v-if="loading" class="absolute inset-0 z-200 flex items-center justify-center text-center">
+                    <loading-graphic />
+                </div>
+
+                <component
+                    class="mx-auto max-w-3xl"
+                    :is="component"
+                    v-if="!loading"
+                    v-bind="componentPropValues"
+                    :method="method"
+                    :is-creating="creating"
+                    :is-inline="true"
+                    :publish-container="publishContainer"
+                    @saved="saved"
+                >
+                    <template slot="action-buttons-right">
+                        <slot name="action-buttons-right" />
+                        <button type="button" class="btn-close" @click="confirmClose" v-html="'&times'" />
+                    </template>
+                </component>
+            </div>
+        </stack>
     </div>
-    </stack>
-    </div>
-
 </template>
 
 <script>
 export default {
-
     props: {
         component: String,
         componentProps: Object,
@@ -55,15 +47,13 @@ export default {
             loading: true,
             readOnly: false,
             componentPropValues: {},
-        }
+        };
     },
 
     computed: {
-
         publishContainer() {
             return `relate-fieldtype-inline-${this.$.uid}`;
-        }
-
+        },
     },
 
     created() {
@@ -71,17 +61,18 @@ export default {
     },
 
     methods: {
-
         getItem() {
-            this.$axios.get(this.itemUrl)
-                .then(response => {
+            this.$axios
+                .get(this.itemUrl)
+                .then((response) => {
                     for (const prop in this.componentProps) {
                         const value = data_get(response.data, this.componentProps[prop]);
                         this.componentPropValues[prop] = value;
                     }
 
                     this.loading = false;
-                }).catch((error) => {
+                })
+                .catch((error) => {
                     if (error.response.status === 500) {
                         this.$toast.error(error.response.data.message);
                         this.close();
@@ -104,14 +95,13 @@ export default {
 
         shouldClose() {
             if (this.$dirty.has(this.publishContainer)) {
-                if (! confirm(__('Are you sure? Unsaved changes will be lost.'))) {
+                if (!confirm(__('Are you sure? Unsaved changes will be lost.'))) {
                     return false;
                 }
             }
 
             return true;
-        }
-    }
-
-}
+        },
+    },
+};
 </script>
diff --git a/resources/js/components/inputs/relationship/Item.vue b/resources/js/components/inputs/relationship/Item.vue
index b2aa55b38f..4188b195fb 100644
--- a/resources/js/components/inputs/relationship/Item.vue
+++ b/resources/js/components/inputs/relationship/Item.vue
@@ -1,19 +1,23 @@
 <template>
-
-    <div
-        class="item select-none"
-        :class="{ 'invalid': item.invalid }"
-    >
+    <div class="item select-none" :class="{ invalid: item.invalid }">
         <div class="item-move" v-if="sortable">&nbsp;</div>
         <div class="item-inner">
-            <div v-if="statusIcon" class="little-dot rtl:ml-2 ltr:mr-2 hidden @sm:block" :class="item.status" />
+            <div v-if="statusIcon" class="little-dot hidden @sm:block ltr:mr-2 rtl:ml-2" :class="item.status" />
 
             <div
                 v-if="item.invalid"
                 v-tooltip.top="__('An item with this ID could not be found')"
-                v-text="__(item.title)" />
+                v-text="__(item.title)"
+            />
 
-            <a v-if="!item.invalid && editable" @click.prevent="edit" v-text="__(item.title)" class="truncate" v-tooltip="item.title" :href="item.edit_url" />
+            <a
+                v-if="!item.invalid && editable"
+                @click.prevent="edit"
+                v-text="__(item.title)"
+                class="truncate"
+                v-tooltip="item.title"
+                :href="item.edit_url"
+            />
 
             <div v-if="!item.invalid && !editable" v-text="__(item.title)" />
 
@@ -27,8 +31,12 @@
                 @closed="isEditing = false"
             />
 
-            <div class="flex items-center flex-1 justify-end">
-                <div v-if="item.hint" v-text="item.hint" class="text-4xs text-gray-600 uppercase whitespace-nowrap rtl:ml-2 ltr:mr-2 hidden @sm:block" />
+            <div class="flex flex-1 items-center justify-end">
+                <div
+                    v-if="item.hint"
+                    v-text="item.hint"
+                    class="hidden whitespace-nowrap text-4xs uppercase text-gray-600 @sm:block ltr:mr-2 rtl:ml-2"
+                />
 
                 <div class="flex items-center" v-if="!readOnly">
                     <dropdown-list>
@@ -37,26 +45,22 @@
                     </dropdown-list>
                 </div>
             </div>
-
         </div>
-
     </div>
-
 </template>
 
 <script>
 import InlineEditForm from './InlineEditForm.vue';
 
 export default {
-
     components: {
-        InlineEditForm
+        InlineEditForm,
     },
 
     inject: {
         storeName: {
-            default: null
-        }
+            default: null,
+        },
     },
 
     props: {
@@ -74,16 +78,20 @@ export default {
     data() {
         return {
             isEditing: false,
-        }
+        };
     },
 
     methods: {
-
         edit() {
-            if (! this.editable) return;
+            if (!this.editable) return;
             if (this.item.invalid) return;
 
-            if (this.item.reference && Object.entries(this.$store.state.publish).find(([key, value]) => value.reference === this.item.reference)) {
+            if (
+                this.item.reference &&
+                Object.entries(this.$store.state.publish).find(
+                    ([key, value]) => value.reference === this.item.reference,
+                )
+            ) {
                 this.$toast.error(__("You're already editing this item."));
                 return;
             }
@@ -99,8 +107,6 @@ export default {
 
             this.$events.$emit(`live-preview.${this.storeName}.refresh`);
         },
-
-    }
-
-}
+    },
+};
 </script>
diff --git a/resources/js/components/inputs/relationship/RelationshipInput.vue b/resources/js/components/inputs/relationship/RelationshipInput.vue
index 24ab72318d..308f604d90 100644
--- a/resources/js/components/inputs/relationship/RelationshipInput.vue
+++ b/resources/js/components/inputs/relationship/RelationshipInput.vue
@@ -1,7 +1,5 @@
 <template>
-
     <div class="relationship-input" :class="{ 'relationship-input-empty': items.length == 0 }">
-
         <relationship-select-field
             v-if="!initializing && usesSelectField"
             :config="config"
@@ -20,7 +18,11 @@
         <loading-graphic v-if="initializing" :inline="true" />
 
         <template v-if="shouldShowSelectedItems">
-            <div ref="items" class="relationship-input-items space-y-1 outline-none" :class="{ 'mt-4': usesSelectField && items.length }">
+            <div
+                ref="items"
+                class="relationship-input-items space-y-1 outline-none"
+                :class="{ 'mt-4': usesSelectField && items.length }"
+            >
                 <component
                     :is="itemComponent"
                     v-for="(item, i) in items"
@@ -40,11 +42,15 @@
             </div>
 
             <div class="py-2 text-xs text-gray" v-if="maxItemsReached && maxItems != 1">
-                <span>{{ __('Maximum items selected:')}}</span>
+                <span>{{ __('Maximum items selected:') }}</span>
                 <span>{{ maxItems }}/{{ maxItems }}</span>
             </div>
-            <div v-if="canSelectOrCreate" class="relationship-input-buttons relative @container" :class="{ 'mt-4': items.length > 0 }" >
-                <div class="flex flex-wrap items-center text-sm -mb-2">
+            <div
+                v-if="canSelectOrCreate"
+                class="relationship-input-buttons relative @container"
+                :class="{ 'mt-4': items.length > 0 }"
+            >
+                <div class="-mb-2 flex flex-wrap items-center text-sm">
                     <div class="relative mb-2">
                         <create-button
                             v-if="canCreate && creatables.length"
@@ -56,8 +62,12 @@
                             @created="itemCreated"
                         />
                     </div>
-                    <button ref="existing" class="text-blue dark:text-dark-blue-100 hover:text-gray-800 dark:hover:text-dark-100 flex items-center mb-2 outline-none" @click.prevent="isSelecting = true">
-                        <svg-icon name="light/hyperlink" class="rtl:ml-1 ltr:mr-1 h-4 w-4 flex items-center"></svg-icon>
+                    <button
+                        ref="existing"
+                        class="mb-2 flex items-center text-blue outline-none hover:text-gray-800 dark:text-dark-blue-100 dark:hover:text-dark-100"
+                        @click.prevent="isSelecting = true"
+                    >
+                        <svg-icon name="light/hyperlink" class="flex h-4 w-4 items-center ltr:mr-1 rtl:ml-1"></svg-icon>
                         <span class="hidden @sm:block" v-text="__('Link Existing Item')" />
                         <span class="@sm:hidden" v-text="__('Link')" />
                     </button>
@@ -87,18 +97,16 @@
             <input v-if="name" type="hidden" :name="name" :value="JSON.stringify(value)" />
         </template>
     </div>
-
 </template>
 
 <script>
 import RelatedItem from './Item.vue';
 import ItemSelector from './Selector.vue';
 import CreateButton from './CreateButton.vue';
-import {Sortable, Plugins} from '@shopify/draggable';
+import { Sortable, Plugins } from '@shopify/draggable';
 import RelationshipSelectField from './SelectField.vue';
 
 export default {
-
     props: {
         name: String,
         value: { required: true },
@@ -131,17 +139,17 @@ export default {
         taggable: Boolean,
         columns: {
             type: Array,
-            default: () => []
+            default: () => [],
         },
         tree: Object,
         initialSortColumn: {
             type: String,
-            default: 'title'
+            default: 'title',
         },
         initialSortDirection: {
             type: String,
-            default: 'asc'
-        }
+            default: 'asc',
+        },
     },
 
     components: {
@@ -160,18 +168,17 @@ export default {
             loading: true,
             inline: false,
             sortable: null,
-        }
+        };
     },
 
     computed: {
-
         items() {
             if (this.value === null) return [];
 
-            return this.value?.map(selection => {
+            return this.value?.map((selection) => {
                 const data = _.find(this.data, (item) => item.id == selection);
 
-                if (! data) return { id: selection, title: selection };
+                if (!data) return { id: selection, title: selection };
 
                 return data;
             });
@@ -195,8 +202,7 @@ export default {
             if (this.usesSelectField && this.maxItems === 1) return false;
 
             return true;
-        }
-
+        },
     },
 
     mounted() {
@@ -217,13 +223,12 @@ export default {
     },
 
     watch: {
-
         loading: {
             immediate: true,
             handler(loading) {
                 this.$emit('loading', loading);
                 this.setLoadingProgress(loading);
-            }
+            },
         },
 
         isSelecting(selecting) {
@@ -233,22 +238,17 @@ export default {
         itemData(data, olddata) {
             if (this.initializing) return;
             this.$emit('item-data-updated', data);
-        }
-
+        },
     },
 
     methods: {
-
         update(selections) {
             if (JSON.stringify(selections) == JSON.stringify(this.value)) return;
             this.$emit('input', selections);
         },
 
         remove(index) {
-            this.update([
-                ...this.value.slice(0, index),
-                ...this.value.slice(index + 1),
-            ]);
+            this.update([...this.value.slice(0, index), ...this.value.slice(index + 1)]);
         },
 
         selectionsUpdated(selections) {
@@ -269,11 +269,14 @@ export default {
         getDataForSelections(selections) {
             this.loading = true;
 
-            return this.$axios.post(this.itemDataUrl, { site: this.site, selections }).then(response => {
-                this.$emit('item-data-updated', response.data.data);
-            }).finally(() => {
-                this.loading = false;
-            });
+            return this.$axios
+                .post(this.itemDataUrl, { site: this.site, selections })
+                .then((response) => {
+                    this.$emit('item-data-updated', response.data.data);
+                })
+                .finally(() => {
+                    this.loading = false;
+                });
         },
 
         makeSortable() {
@@ -283,15 +286,18 @@ export default {
                 mirror: { constrainDimensions: true, xAxis: false, appendTo: 'body' },
                 swapAnimation: { vertical: true },
                 plugins: [Plugins.SwapAnimation],
-            }).on('drag:start', e => {
-                this.value.length === 1 ? e.cancel() : this.$emit('focus');
-            }).on('drag:stop', e => {
-                this.$emit('blur');
-            }).on('sortable:stop', e => {
-                const val = [...this.value];
-                val.splice(e.newIndex, 0, val.splice(e.oldIndex, 1)[0]);
-                this.update(val);
-            });
+            })
+                .on('drag:start', (e) => {
+                    this.value.length === 1 ? e.cancel() : this.$emit('focus');
+                })
+                .on('drag:stop', (e) => {
+                    this.$emit('blur');
+                })
+                .on('sortable:stop', (e) => {
+                    const val = [...this.value];
+                    val.splice(e.newIndex, 0, val.splice(e.oldIndex, 1)[0]);
+                    this.update(val);
+                });
         },
 
         itemCreated(item) {
@@ -301,14 +307,12 @@ export default {
 
         selectFieldSelected(selectedItemData) {
             this.$emit('item-data-updated', selectedItemData);
-            this.update(selectedItemData.map(item => item.id));
+            this.update(selectedItemData.map((item) => item.id));
         },
 
         setLoadingProgress(state) {
             this.$progress.loading(`relationship-fieldtype-${this.$.uid}`, state);
-        }
-
-    }
-
-}
+        },
+    },
+};
 </script>
diff --git a/resources/js/components/inputs/relationship/SelectField.vue b/resources/js/components/inputs/relationship/SelectField.vue
index 07eaafbd94..f2e5985475 100644
--- a/resources/js/components/inputs/relationship/SelectField.vue
+++ b/resources/js/components/inputs/relationship/SelectField.vue
@@ -1,5 +1,4 @@
 <template>
-
     <div>
         <v-select
             ref="input"
@@ -23,12 +22,12 @@
             @search:blur="$emit('blur')"
         >
             <template #option="{ title, hint, status }">
-                <div class="flex justify-between items-center">
+                <div class="flex items-center justify-between">
                     <div class="flex items-center">
-                        <div v-if="status" class="little-dot rtl:ml-2 ltr:mr-2 hidden@sm:block" :class="status" />
+                        <div v-if="status" class="little-dot hidden@sm:block ltr:mr-2 rtl:ml-2" :class="status" />
                         <div v-text="title" />
                     </div>
-                    <div v-if="hint" class="text-4xs text-gray-600 uppercase whitespace-nowrap" v-text="hint" />
+                    <div v-if="hint" class="whitespace-nowrap text-4xs uppercase text-gray-600" v-text="hint" />
                 </div>
             </template>
             <template #selected-option-container v-if="multiple"><i class="hidden"></i></template>
@@ -39,20 +38,22 @@
                     type="search"
                     v-on="events"
                     v-bind="attributes"
-                >
+                />
             </template>
-             <template #no-options>
-                <div class="text-sm text-gray-700 rtl:text-right ltr:text-left py-2 px-4" v-text="__('No options to choose from.')" />
+            <template #no-options>
+                <div
+                    class="px-4 py-2 text-sm text-gray-700 ltr:text-left rtl:text-right"
+                    v-text="__('No options to choose from.')"
+                />
             </template>
         </v-select>
     </div>
-
 </template>
 
 <style scoped>
-    .draggable-source--is-dragging {
-        @apply opacity-75 bg-transparent border-dashed
-    }
+.draggable-source--is-dragging {
+    @apply border-dashed bg-transparent opacity-75;
+}
 </style>
 
 <script>
@@ -60,7 +61,6 @@ import PositionsSelectOptions from '../../../mixins/PositionsSelectOptions';
 import { SortableList, SortableItem } from '../../sortable/Sortable';
 
 export default {
-
     mixins: [PositionsSelectOptions],
 
     components: {
@@ -82,7 +82,7 @@ export default {
     data() {
         return {
             options: [],
-        }
+        };
     },
 
     computed: {
@@ -97,43 +97,42 @@ export default {
                 site: this.site,
                 paginate: false,
                 columns: 'title,id',
-            }
-        }
+            };
+        },
     },
 
     created() {
         // Get the items via ajax.
         // TODO: To save on requests, this should probably be done in the preload step and sent via meta.
-        if (! this.typeahead) this.request();
+        if (!this.typeahead) this.request();
     },
 
     watch: {
         parameters(params) {
-            if (! this.typeahead) this.request();
-        }
+            if (!this.typeahead) this.request();
+        },
     },
 
     methods: {
-
         request(params = {}) {
-            params = {...this.parameters, ...params};
+            params = { ...this.parameters, ...params };
 
-            return this.$axios.get(this.url, { params }).then(response => {
+            return this.$axios.get(this.url, { params }).then((response) => {
                 this.options = response.data.data;
                 return Promise.resolve(response);
             });
         },
 
         search(search, loading) {
-            if (! this.typeahead) return;
+            if (!this.typeahead) return;
 
             loading(true);
 
-            this.request({ search }).then(response => loading(false));
+            this.request({ search }).then((response) => loading(false));
         },
 
         input(items) {
-            if (! this.multiple) {
+            if (!this.multiple) {
                 items = items === null ? [] : [items];
             }
 
@@ -144,8 +143,6 @@ export default {
             const existing = this.options.find((option) => option.title === value);
             return existing || { id: value, title: value };
         },
-
-    }
-
-}
+    },
+};
 </script>
diff --git a/resources/js/components/inputs/relationship/Selector.vue b/resources/js/components/inputs/relationship/Selector.vue
index 91e9105125..069d677d1c 100644
--- a/resources/js/components/inputs/relationship/Selector.vue
+++ b/resources/js/components/inputs/relationship/Selector.vue
@@ -1,7 +1,5 @@
 <template>
-
     <div class="h-full bg-white dark:bg-dark-800">
-
         <div v-if="initializing" class="absolute inset-0 z-200 flex items-center justify-center text-center">
             <loading-graphic />
         </div>
@@ -19,15 +17,30 @@
             @selections-updated="selectionsUpdated"
             v-slot="{}"
         >
-            <div class="flex flex-col h-full">
-                <div class="bg-white dark:bg-dark-800 z-1">
-                    <div class="py-2 px-4 flex items-center justify-between">
-                        <data-list-search class="h-8 min-w-[240px] w-full" ref="search" v-model="searchQuery" :placeholder="searchPlaceholder" />
-                        <div class="btn-group rtl:mr-4 ltr:ml-4" v-if="canUseTree">
-                            <button class="btn flex items-center px-4" @click="view = 'tree'" :class="{'active': view === 'tree'}" v-tooltip="__('Tree')">
-                                <svg-icon name="light/structures" class="h-4 w-4"/>
+            <div class="flex h-full flex-col">
+                <div class="z-1 bg-white dark:bg-dark-800">
+                    <div class="flex items-center justify-between px-4 py-2">
+                        <data-list-search
+                            class="h-8 w-full min-w-[240px]"
+                            ref="search"
+                            v-model="searchQuery"
+                            :placeholder="searchPlaceholder"
+                        />
+                        <div class="btn-group ltr:ml-4 rtl:mr-4" v-if="canUseTree">
+                            <button
+                                class="btn flex items-center px-4"
+                                @click="view = 'tree'"
+                                :class="{ active: view === 'tree' }"
+                                v-tooltip="__('Tree')"
+                            >
+                                <svg-icon name="light/structures" class="h-4 w-4" />
                             </button>
-                            <button class="btn flex items-center px-4" @click="view = 'list'" :class="{'active': view === 'list'}" v-tooltip="__('List')">
+                            <button
+                                class="btn flex items-center px-4"
+                                @click="view = 'list'"
+                                :class="{ active: view === 'list' }"
+                                v-tooltip="__('List')"
+                            >
                                 <svg-icon name="assets-mode-table" class="h-4 w-4" />
                             </button>
                         </div>
@@ -45,8 +58,8 @@
                     </div>
                 </div>
 
-                <div class="flex-1 flex flex-col min-h-0">
-                    <div class="flex flex-col h-full justify-start">
+                <div class="flex min-h-0 flex-1 flex-col">
+                    <div class="flex h-full flex-col justify-start">
                         <div class="flex-1 overflow-scroll">
                             <data-list-table
                                 :loading="loading"
@@ -58,12 +71,22 @@
                             >
                                 <template #cell-title="{ row: entry }">
                                     <div class="flex items-center">
-                                        <div class="little-dot rtl:ml-2 ltr:mr-2" v-tooltip="getStatusLabel(entry)" :class="getStatusClass(entry)" v-if="entry.status && ! columnShowing('status')" />
+                                        <div
+                                            class="little-dot ltr:mr-2 rtl:ml-2"
+                                            v-tooltip="getStatusLabel(entry)"
+                                            :class="getStatusClass(entry)"
+                                            v-if="entry.status && !columnShowing('status')"
+                                        />
                                         {{ entry.title }}
                                     </div>
                                 </template>
                                 <template #cell-status="{ row: entry }">
-                                    <div class="status-index-field select-none" v-tooltip="getStatusTooltip(entry)" :class="`status-${entry.status}`" v-text="getStatusLabel(entry)" />
+                                    <div
+                                        class="status-index-field select-none"
+                                        v-tooltip="getStatusTooltip(entry)"
+                                        :class="`status-${entry.status}`"
+                                        v-text="getStatusLabel(entry)"
+                                    />
                                 </template>
                                 <template #cell-url="{ row: entry }">
                                     <span class="text-2xs">{{ entry.url }}</span>
@@ -77,54 +100,68 @@
                             :resource-meta="meta"
                             :inline="true"
                             :scroll-to-top="false"
-                            @page-selected="setPage" />
+                            @page-selected="setPage"
+                        />
 
-                        <div class="p-4 border-t dark:border-dark-200 flex items-center justify-between bg-gray-200 dark:bg-dark-500">
-                            <div class="text-sm text-gray-700 dark:text-dark-150"
-                                v-text="hasMaxSelections
-                                    ? __n(':count/:max selected', selections, { max: maxSelections })
-                                    : __n(':count item selected|:count items selected', selections)" />
+                        <div
+                            class="flex items-center justify-between border-t bg-gray-200 p-4 dark:border-dark-200 dark:bg-dark-500"
+                        >
+                            <div
+                                class="text-sm text-gray-700 dark:text-dark-150"
+                                v-text="
+                                    hasMaxSelections
+                                        ? __n(':count/:max selected', selections, { max: maxSelections })
+                                        : __n(':count item selected|:count items selected', selections)
+                                "
+                            />
 
                             <div>
-                                <button
-                                    type="button"
-                                    class="btn"
-                                    @click="close">
+                                <button type="button" class="btn" @click="close">
                                     {{ __('Cancel') }}
                                 </button>
 
                                 <button
-                                    v-if="! hasMaxSelections || maxSelections > 1"
+                                    v-if="!hasMaxSelections || maxSelections > 1"
                                     type="button"
-                                    class="btn-primary rtl:mr-2 ltr:ml-2"
-                                    @click="select">
+                                    class="btn-primary ltr:ml-2 rtl:mr-2"
+                                    @click="select"
+                                >
                                     {{ __('Select') }}
                                 </button>
                             </div>
                         </div>
                     </div>
                 </div>
-
             </div>
         </data-list>
 
         <template v-if="!initializing && canUseTree && view === 'tree'">
-            <div class="flex flex-col h-full">
-                <div class="bg-white dark:bg-dark-550 shadow px-4 py-2 z-1 h-13 flex items-center justify-end">
-                    <h1 class="flex-1 flex items-center text-xl">{{ tree.title }}</h1>
-                    <div class="btn-group rtl:mr-4 ltr:ml-4">
-                        <button class="btn flex items-center px-4" @click="view = 'tree'" :class="{'active': view === 'tree'}" v-tooltip="__('Tree')">
-                            <svg-icon name="light/structures" class="h-4 w-4"/>
+            <div class="flex h-full flex-col">
+                <div class="z-1 flex h-13 items-center justify-end bg-white px-4 py-2 shadow dark:bg-dark-550">
+                    <h1 class="flex flex-1 items-center text-xl">{{ tree.title }}</h1>
+                    <div class="btn-group ltr:ml-4 rtl:mr-4">
+                        <button
+                            class="btn flex items-center px-4"
+                            @click="view = 'tree'"
+                            :class="{ active: view === 'tree' }"
+                            v-tooltip="__('Tree')"
+                        >
+                            <svg-icon name="light/structures" class="h-4 w-4" />
                         </button>
-                        <button class="btn flex items-center px-4" @click="view = 'list'" :class="{'active': view === 'list'}" v-tooltip="__('List')">
+                        <button
+                            class="btn flex items-center px-4"
+                            @click="view = 'list'"
+                            :class="{ active: view === 'list' }"
+                            v-tooltip="__('List')"
+                        >
                             <svg-icon name="assets-mode-table" class="h-4 w-4" />
                         </button>
                     </div>
                 </div>
 
-                <div class="flex-1 flex flex-col min-h-0">
-                    <div class="flex flex-col h-full justify-start">
-                        <div class="flex-1 overflow-scroll bg-gray-200 dark:bg-dark-800 p-4">
+                <div class="flex min-h-0 flex-1 flex-col">
+                    <div class="flex h-full flex-col justify-start">
+                        <div class="flex-1 overflow-scroll bg-gray-200 p-4 dark:bg-dark-800">
                             <page-tree
                                 ref="tree"
                                 :pages-url="tree.url"
@@ -141,7 +178,7 @@
                                         <input
                                             :ref="`tree-branch-${branch.id}`"
                                             type="checkbox"
-                                            class="mt-3 rtl:mr-3 ltr:ml-3"
+                                            class="mt-3 ltr:ml-3 rtl:mr-3"
                                             :value="branch.id"
                                             :checked="isSelected(branch.id)"
                                             :disabled="reachedSelectionLimit && !singleSelect && !isSelected(branch.id)"
@@ -152,33 +189,39 @@
                                 </template>
 
                                 <template #branch-icon="{ branch }">
-                                    <svg-icon v-if="isRedirectBranch(branch)"
-                                        class="inline-block w-4 h-4 text-gray-500 dark:text-dark-175"
+                                    <svg-icon
+                                        v-if="isRedirectBranch(branch)"
+                                        class="inline-block h-4 w-4 text-gray-500 dark:text-dark-175"
                                         name="light/external-link"
-                                        v-tooltip="__('Redirect')" />
+                                        v-tooltip="__('Redirect')"
+                                    />
                                 </template>
                             </page-tree>
                         </div>
 
-                        <div class="p-4 border-t dark:border-dark-200 flex items-center justify-between bg-gray-200 dark:bg-dark-500">
-                            <div class="text-sm text-gray-700"
-                                v-text="hasMaxSelections
-                                    ? __n(':count/:max selected', selections, { max: maxSelections })
-                                    : __n(':count item selected|:count items selected', selections)" />
+                        <div
+                            class="flex items-center justify-between border-t bg-gray-200 p-4 dark:border-dark-200 dark:bg-dark-500"
+                        >
+                            <div
+                                class="text-sm text-gray-700"
+                                v-text="
+                                    hasMaxSelections
+                                        ? __n(':count/:max selected', selections, { max: maxSelections })
+                                        : __n(':count item selected|:count items selected', selections)
+                                "
+                            />
 
                             <div>
-                                <button
-                                    type="button"
-                                    class="btn"
-                                    @click="close">
+                                <button type="button" class="btn" @click="close">
                                     {{ __('Cancel') }}
                                 </button>
 
                                 <button
-                                    v-if="! hasMaxSelections || maxSelections > 1"
+                                    v-if="!hasMaxSelections || maxSelections > 1"
                                     type="button"
-                                    class="btn-primary rtl:mr-2 ltr:ml-2"
-                                    @click="select">
+                                    class="btn-primary ltr:ml-2 rtl:mr-2"
+                                    @click="select"
+                                >
                                     {{ __('Select') }}
                                 </button>
                             </div>
@@ -188,7 +231,6 @@
             </div>
         </template>
     </div>
-
 </template>
 
 <script>
@@ -196,10 +238,7 @@ import HasFilters from '../../data-list/HasFilters';
 import PageTree from '../../structures/PageTree.vue';
 
 export default {
-
-    mixins: [
-        HasFilters,
-    ],
+    mixins: [HasFilters],
 
     components: {
         PageTree,
@@ -218,11 +257,11 @@ export default {
         name: String,
         exclusions: {
             type: Array,
-            default: () => []
+            default: () => [],
         },
         initialColumns: {
             type: Array,
-            default: () => []
+            default: () => [],
         },
         tree: Object,
     },
@@ -240,14 +279,13 @@ export default {
             page: 1,
             selections: _.clone(this.initialSelections),
             columns: this.initialColumns,
-            visibleColumns: this.initialColumns.filter(column => column.visible),
+            visibleColumns: this.initialColumns.filter((column) => column.visible),
             view: 'list',
-            lastItemClicked: null
-        }
+            lastItemClicked: null,
+        };
     },
 
     computed: {
-
         parameters() {
             return {
                 sort: this.sortColumn,
@@ -256,12 +294,12 @@ export default {
                 site: this.site,
                 exclusions: this.exclusions,
                 filters: utf8btoa(JSON.stringify(this.activeFilters)),
-                columns: this.visibleColumns.map(column => column.field).join(','),
-            }
+                columns: this.visibleColumns.map((column) => column.field).join(','),
+            };
         },
 
         hasMaxSelections() {
-            return (this.maxSelections === Infinity) ? false : Boolean(this.maxSelections);
+            return this.maxSelections === Infinity ? false : Boolean(this.maxSelections);
         },
 
         reachedSelectionLimit() {
@@ -273,7 +311,7 @@ export default {
         },
 
         canUseTree() {
-            return !! this.tree;
+            return !!this.tree;
         },
 
         initialView() {
@@ -286,8 +324,7 @@ export default {
 
         viewLocalStorageKey() {
             return `statamic.selector.field.${this.name}`;
-        }
-
+        },
     },
 
     mounted() {
@@ -300,21 +337,20 @@ export default {
     },
 
     watch: {
-
         parameters: {
             deep: true,
             handler(after, before) {
                 if (this.initializing) return;
                 if (JSON.stringify(before) === JSON.stringify(after)) return;
                 this.request();
-            }
+            },
         },
 
         loading: {
             immediate: true,
             handler(loading) {
                 this.$progress.loading('relationship-selector-listing', loading);
-            }
+            },
         },
 
         searchQuery(query) {
@@ -334,15 +370,13 @@ export default {
         view(view) {
             localStorage.setItem(this.viewLocalStorageKey, view);
         },
-
     },
 
     methods: {
-
         getFilters() {
             if (!this.filtersUrl) return Promise.resolve();
 
-            return this.$axios.get(this.filtersUrl).then(response => {
+            return this.$axios.get(this.filtersUrl).then((response) => {
                 this.filters = response.data;
             });
         },
@@ -359,23 +393,31 @@ export default {
             if (this.source) this.source.cancel();
             this.source = this.$axios.CancelToken.source();
 
-            const params = {...this.parameters, ...{
-                search: this.searchQuery,
-            }};
-
-            return this.$axios.get(this.selectionsUrl, { params, cancelToken: this.source.token }).then(response => {
-                this.columns = response.data.meta.columns;
-                this.items = response.data.data;
-                this.meta = response.data.meta;
-                this.activeFilterBadges = {...response.data.meta.activeFilterBadges};
-                this.loading = false;
-                this.initializing = false;
-            }).catch(e => {
-                if (this.$axios.isCancel(e)) return;
-                this.loading = false;
-                this.initializing = false;
-                this.$toast.error(e.response ? e.response.data.message : __('Something went wrong'), { duration: null });
-            });
+            const params = {
+                ...this.parameters,
+                ...{
+                    search: this.searchQuery,
+                },
+            };
+
+            return this.$axios
+                .get(this.selectionsUrl, { params, cancelToken: this.source.token })
+                .then((response) => {
+                    this.columns = response.data.meta.columns;
+                    this.items = response.data.data;
+                    this.meta = response.data.meta;
+                    this.activeFilterBadges = { ...response.data.meta.activeFilterBadges };
+                    this.loading = false;
+                    this.initializing = false;
+                })
+                .catch((e) => {
+                    if (this.$axios.isCancel(e)) return;
+                    this.loading = false;
+                    this.initializing = false;
+                    this.$toast.error(e.response ? e.response.data.message : __('Something went wrong'), {
+                        duration: null,
+                    });
+                });
         },
 
         sorted(column, direction) {
@@ -389,7 +431,7 @@ export default {
 
         select() {
             this.$emit('selected', this.selections);
-            this.close()
+            this.close();
         },
 
         close() {
@@ -424,20 +466,18 @@ export default {
 
         getStatusTooltip(entry) {
             if (entry.status === 'published') {
-                return entry.collection.dated
-                    ? __('messages.status_published_with_date', {date: entry.date})
-                    : null; // The label is sufficient.
+                return entry.collection.dated ? __('messages.status_published_with_date', { date: entry.date }) : null; // The label is sufficient.
             } else if (entry.status === 'scheduled') {
-                return __('messages.status_scheduled_with_date', {date: entry.date})
+                return __('messages.status_scheduled_with_date', { date: entry.date });
             } else if (entry.status === 'expired') {
-                return __('messages.status_expired_with_date', {date: entry.date})
+                return __('messages.status_expired_with_date', { date: entry.date });
             } else if (entry.status === 'draft') {
                 return null; // The label is sufficient.
             }
         },
 
         columnShowing(column) {
-            return this.visibleColumns.find(c => c.field === column);
+            return this.visibleColumns.find((c) => c.field === column);
         },
 
         isRedirectBranch(branch) {
@@ -461,27 +501,22 @@ export default {
                 this.selections.pop();
             }
 
-            if (! this.reachedSelectionLimit) {
+            if (!this.reachedSelectionLimit) {
                 this.selections.push(id);
             }
         },
 
         checkboxClicked(row, index, $event) {
             if ($event.shiftKey && this.lastItemClicked !== null) {
-                this.selectRange(
-                    Math.min(this.lastItemClicked, index),
-                    Math.max(this.lastItemClicked, index)
-                );
+                this.selectRange(Math.min(this.lastItemClicked, index), Math.max(this.lastItemClicked, index));
             } else {
-                this.toggleSelection(row.id, index)
+                this.toggleSelection(row.id, index);
             }
 
             if ($event.target.checked) {
-                this.lastItemClicked = index
+                this.lastItemClicked = index;
             }
         },
-
-    }
-
-}
+    },
+};
 </script>
diff --git a/resources/js/components/keys/Binding.js b/resources/js/components/keys/Binding.js
index 5dc171fa68..d053a09aef 100644
--- a/resources/js/components/keys/Binding.js
+++ b/resources/js/components/keys/Binding.js
@@ -1,7 +1,6 @@
 import mousetrap from 'mousetrap';
 
 export default class Binding {
-
     constructor(bindings) {
         this.bindings = bindings;
     }
@@ -9,7 +8,7 @@ export default class Binding {
     bind(bindings, callback) {
         if (typeof bindings === 'string') bindings = [bindings];
 
-        bindings.forEach(binding => {
+        bindings.forEach((binding) => {
             this.bindings[binding] = this.bindings[binding] || [];
             this.bindings[binding].push(callback);
             this.bindMousetrap(binding, callback);
@@ -21,7 +20,7 @@ export default class Binding {
     }
 
     destroy() {
-        this.bound.forEach(binding => {
+        this.bound.forEach((binding) => {
             this.bindings[binding].pop();
             const previous = this.bindings[binding].slice(-1)[0];
             previous ? mousetrap.bind(binding, previous) : mousetrap.unbind(binding);
diff --git a/resources/js/components/keys/GlobalBinding.js b/resources/js/components/keys/GlobalBinding.js
index f3f553174b..40aab429c1 100644
--- a/resources/js/components/keys/GlobalBinding.js
+++ b/resources/js/components/keys/GlobalBinding.js
@@ -3,9 +3,7 @@ import mousetrap from 'mousetrap';
 import 'mousetrap/plugins/global-bind/mousetrap-global-bind';
 
 export default class GlobalBinding extends Binding {
-
     bindMousetrap(binding, callback) {
         mousetrap.bindGlobal(binding, callback);
     }
-
 }
diff --git a/resources/js/components/live-preview/LivePreview.vue b/resources/js/components/live-preview/LivePreview.vue
index a2014701e7..37c4d8f297 100644
--- a/resources/js/components/live-preview/LivePreview.vue
+++ b/resources/js/components/live-preview/LivePreview.vue
@@ -1,5 +1,4 @@
 <template>
-
     <div>
         <v-portal :to="livePreviewFieldsPortal" :disabled="!portalEnabled">
             <provider :variables="provides">
@@ -9,15 +8,28 @@
 
         <portal v-if="previewing" name="live-preview" target-class="live-preview-portal">
             <div class="live-preview fixed flex flex-col">
-
                 <transition name="live-preview-header-slide">
                     <div v-show="headerVisible" class="live-preview-header">
-                        <div class="text-base text-gray-700 dark:text-dark-150 font-medium rtl:ml-4 ltr:mr-4">{{ __('Live Preview') }}</div>
+                        <div class="text-base font-medium text-gray-700 dark:text-dark-150 ltr:mr-4 rtl:ml-4">
+                            {{ __('Live Preview') }}
+                        </div>
                         <div class="flex items-center">
-                            <button v-if="canPopOut && !poppedOut" class="btn" @click="popout">{{ __('Pop out') }}</button>
+                            <button v-if="canPopOut && !poppedOut" class="btn" @click="popout">
+                                {{ __('Pop out') }}
+                            </button>
                             <button v-if="poppedOut" class="btn" @click="closePopout">{{ __('Pop in') }}</button>
-                            <select-input :options="deviceSelectOptions" v-model="previewDevice" v-show="!poppedOut" class="rtl:mr-4 ltr:ml-4" />
-                            <select-input :options="targetSelectOptions" v-model="target" class="rtl:mr-4 ltr:ml-4" v-if="targets.length > 1" />
+                            <select-input
+                                :options="deviceSelectOptions"
+                                v-model="previewDevice"
+                                v-show="!poppedOut"
+                                class="ltr:ml-4 rtl:mr-4"
+                            />
+                            <select-input
+                                :options="targetSelectOptions"
+                                v-model="target"
+                                class="ltr:ml-4 rtl:mr-4"
+                                v-if="targets.length > 1"
+                            />
 
                             <component
                                 v-for="(component, handle) in inputs"
@@ -26,24 +38,24 @@
                                 :value="extras[handle]"
                                 :loading="loading"
                                 @input="componentUpdated(handle, $event)"
-                                class="rtl:mr-4 ltr:ml-4" />
+                                class="ltr:ml-4 rtl:mr-4"
+                            />
 
                             <slot name="buttons" />
 
-                            <button
-                                type="button"
-                                class="btn-close"
-                                @click="close"
-                                v-html="'&times'" />
+                            <button type="button" class="btn-close" @click="close" v-html="'&times'" />
                         </div>
                     </div>
                 </transition>
 
                 <div class="live-preview-main">
-
                     <transition name="live-preview-editor-slide">
-                        <div v-show="panesVisible" class="live-preview-editor @container/live-preview" :style="{ width: poppedOut ? '100%' : `${editorWidth}px` }">
-                            <div class="live-preview-fields flex-1 h-full overflow-scroll">
+                        <div
+                            v-show="panesVisible"
+                            class="live-preview-editor @container/live-preview"
+                            :style="{ width: poppedOut ? '100%' : `${editorWidth}px` }"
+                        >
+                            <div class="live-preview-fields h-full flex-1 overflow-scroll">
                                 <portal-target :name="livePreviewFieldsPortal" />
                             </div>
 
@@ -58,16 +70,17 @@
                     </transition>
 
                     <transition name="live-preview-contents-slide">
-                        <div v-show="panesVisible" ref="contents" class="live-preview-contents items-center justify-center overflow-auto" :class="{ 'pointer-events-none': editorResizing }" />
+                        <div
+                            v-show="panesVisible"
+                            ref="contents"
+                            class="live-preview-contents items-center justify-center overflow-auto"
+                            :class="{ 'pointer-events-none': editorResizing }"
+                        />
                     </transition>
-
                 </div>
-
             </div>
         </portal>
-
     </div>
-
 </template>
 
 <script>
@@ -79,14 +92,11 @@ let source;
 const widthLocalStorageKey = 'statamic.live-preview.editor-width';
 
 export default {
-
-    mixins: [
-        UpdatesIframe
-    ],
+    mixins: [UpdatesIframe],
 
     components: {
         Provider,
-        Resizer
+        Resizer,
     },
 
     props: {
@@ -109,7 +119,7 @@ export default {
             editorCollapsed: false,
             previewDevice: null,
             provides: {
-                storeName: this.name
+                storeName: this.name,
             },
             channel: null,
             poppedOut: false,
@@ -120,34 +130,37 @@ export default {
             keybinding: null,
             token: null,
             target: 0,
-            previousUrl: null
-        }
+            previousUrl: null,
+        };
     },
 
     computed: {
-
         payload() {
             return {
                 blueprint: this.blueprint,
                 preview: this.values,
-                extras: this.extras
-            }
+                extras: this.extras,
+            };
         },
 
         targetSelectOptions() {
-            return Object.values(_.mapObject(this.targets, (target, key) => {
-                return { value: key, label: __(target.label) };
-            }));
+            return Object.values(
+                _.mapObject(this.targets, (target, key) => {
+                    return { value: key, label: __(target.label) };
+                }),
+            );
         },
 
         deviceSelectOptions() {
-            let options = Object.values(_.mapObject(this.$config.get('livePreview.devices'), (dimensions, device) => {
-                if (device === 'Responsive') {
-                    return { value: null, label: __('Responsive') };
-                }
+            let options = Object.values(
+                _.mapObject(this.$config.get('livePreview.devices'), (dimensions, device) => {
+                    if (device === 'Responsive') {
+                        return { value: null, label: __('Responsive') };
+                    }
 
-                return { value: device, label: __(device) };
-            }));
+                    return { value: device, label: __(device) };
+                }),
+            );
 
             if (options.filter((option) => option.label === __('Responsive')).length === 0) {
                 options.unshift({ value: null, label: __('Responsive') });
@@ -188,15 +201,13 @@ export default {
             if (this.token) url += `&token=${this.token}`;
 
             return url;
-        }
-
+        },
     },
 
     watch: {
-
         previewing(enabled, wasEnabled) {
             if (wasEnabled && !enabled) {
-                this.$nextTick(() => this.portalEnabled = false);
+                this.$nextTick(() => (this.portalEnabled = false));
             } else {
                 this.portalEnabled = enabled;
             }
@@ -211,7 +222,7 @@ export default {
             deep: true,
             handler(payload) {
                 if (this.previewing) this.update();
-            }
+            },
         },
 
         target() {
@@ -221,12 +232,11 @@ export default {
         previewDevice() {
             this.setIframeAttributes(document.getElementById('live-preview-iframe'));
         },
-
     },
 
     created() {
         this.previewDevice = this.deviceSelectOptions[0].value;
-        this.editorWidth = localStorage.getItem(widthLocalStorageKey) || 400
+        this.editorWidth = localStorage.getItem(widthLocalStorageKey) || 400;
 
         this.keybinding = this.$keys.bindGlobal('mod+shift+p', () => {
             this.previewing ? this.close() : this.$emit('opened-via-keyboard');
@@ -246,26 +256,28 @@ export default {
     },
 
     methods: {
-
         update: _.debounce(function () {
             if (source) source.abort();
             source = new AbortController();
 
             this.loading = true;
 
-            this.$axios.post(this.tokenizedUrl, this.payload, { signal: source.signal }).then(response => {
-                this.token = response.data.token;
-                const url = response.data.url;
-                const target = this.targets[this.target];
-                const payload = { token: this.token, reference: this.reference };
-                this.poppedOut
-                    ? this.channel.postMessage({ event: 'updated', url, target, payload })
-                    : this.updateIframeContents(url, target, payload);
-                this.loading = false;
-            }).catch(e => {
-                if (e.code === 'ERR_CANCELED') return;
-                throw e;
-            });
+            this.$axios
+                .post(this.tokenizedUrl, this.payload, { signal: source.signal })
+                .then((response) => {
+                    this.token = response.data.token;
+                    const url = response.data.url;
+                    const target = this.targets[this.target];
+                    const payload = { token: this.token, reference: this.reference };
+                    this.poppedOut
+                        ? this.channel.postMessage({ event: 'updated', url, target, payload })
+                        : this.updateIframeContents(url, target, payload);
+                    this.loading = false;
+                })
+                .catch((e) => {
+                    if (e.code === 'ERR_CANCELED') return;
+                    throw e;
+                });
         }, 150),
 
         setIframeAttributes(iframe) {
@@ -285,8 +297,7 @@ export default {
         },
 
         animateIn() {
-            return this
-                .$wait(100)
+            return this.$wait(100)
                 .then(() => {
                     this.headerVisible = true;
                     return this.$wait(200);
@@ -322,7 +333,7 @@ export default {
         popout() {
             this.poppedOut = true;
             this.channel = this.channel || new BroadcastChannel('livepreview');
-            this.channel.onmessage = e => {
+            this.channel.onmessage = (e) => {
                 switch (e.data.event) {
                     case 'popout.opened':
                         this.listenForPopoutClose();
@@ -342,7 +353,11 @@ export default {
             const width = this.$refs.contents.clientWidth;
             const height = this.$refs.contents.clientHeight;
             const left = screen.width - width;
-            this.popoutWindow = window.open(this.url, 'livepreview', `width=${width},height=${height},top=0,left=${left}`);
+            this.popoutWindow = window.open(
+                this.url,
+                'livepreview',
+                `width=${width},height=${height},top=0,left=${left}`,
+            );
         },
 
         closePopout() {
@@ -365,8 +380,7 @@ export default {
 
         componentUpdated(handle, value) {
             this.extras[handle] = value;
-        }
-    }
-
-}
+        },
+    },
+};
 </script>
diff --git a/resources/js/components/live-preview/Popout.vue b/resources/js/components/live-preview/Popout.vue
index 4b7feff5fa..46e17317ef 100644
--- a/resources/js/components/live-preview/Popout.vue
+++ b/resources/js/components/live-preview/Popout.vue
@@ -1,28 +1,23 @@
 <template>
-
     <div class="live-preview-contents min-h-screen" ref="contents" />
-
 </template>
 
 <script>
 import UpdatesIframe from './UpdatesIframe';
 
 export default {
-
-    mixins: [
-        UpdatesIframe
-    ],
+    mixins: [UpdatesIframe],
 
     data() {
         return {
-            channel: null
-        }
+            channel: null,
+        };
     },
 
     created() {
         this.channel = new BroadcastChannel('livepreview');
 
-        this.channel.onmessage = e => {
+        this.channel.onmessage = (e) => {
             switch (e.data.event) {
                 case 'updated':
                     this.updateIframeContents(e.data.url, e.data.target, e.data.payload);
@@ -41,7 +36,7 @@ export default {
     methods: {
         setIframeAttributes(iframe) {
             iframe.setAttribute('class', 'min-h-screen');
-        }
-    }
-}
+        },
+    },
+};
 </script>
diff --git a/resources/js/components/live-preview/Resizer.vue b/resources/js/components/live-preview/Resizer.vue
index 9cf1422eee..c117783a63 100644
--- a/resources/js/components/live-preview/Resizer.vue
+++ b/resources/js/components/live-preview/Resizer.vue
@@ -1,14 +1,10 @@
 <template>
-
     <div class="live-preview-resizer" @mousedown="resizeStart" />
-
 </template>
 
 <script>
 export default {
-
     methods: {
-
         resizeStart() {
             this.$emit('resize-start');
             window.addEventListener('mousemove', this.resizing);
@@ -29,12 +25,10 @@ export default {
             if (width < 16) return this.$emit('collapsed');
 
             // Prevent the width being too narrow.
-            width = (width < 350) ? 350 : width;
+            width = width < 350 ? 350 : width;
 
             this.$emit('resized', width);
-        }
-
-    }
-
-}
+        },
+    },
+};
 </script>
diff --git a/resources/js/components/live-preview/UpdatesIframe.js b/resources/js/components/live-preview/UpdatesIframe.js
index 6120565343..23ff993be4 100644
--- a/resources/js/components/live-preview/UpdatesIframe.js
+++ b/resources/js/components/live-preview/UpdatesIframe.js
@@ -5,24 +5,27 @@ const hasIframeSourceChanged = (existingSrc, newSrc) => {
     newSrc.searchParams.delete('live-preview');
 
     return existingSrc.toString() !== newSrc.toString();
-}
+};
 
 const postMessageToIframe = (container, url, payload) => {
     // If the target is a relative url, we'll get the origin from the current window.
-    const targetOrigin = /^https?:\/\//.test(url) ? (new URL(url))?.origin : window.origin;
+    const targetOrigin = /^https?:\/\//.test(url) ? new URL(url)?.origin : window.origin;
 
-    container.firstChild.contentWindow.postMessage({
-        name: 'statamic.preview.updated',
-        url,
-        ...payload
-    }, targetOrigin);
-}
+    container.firstChild.contentWindow.postMessage(
+        {
+            name: 'statamic.preview.updated',
+            url,
+            ...payload,
+        },
+        targetOrigin,
+    );
+};
 
 export default {
     data() {
         return {
             previousUrl: null,
-        }
+        };
     },
 
     methods: {
@@ -38,7 +41,7 @@ export default {
             let cleanUrl = iframeUrl.host + iframeUrl.pathname;
 
             // If there's no iframe yet, just append it.
-            if (! container.firstChild) {
+            if (!container.firstChild) {
                 container.appendChild(iframe);
                 this.previousUrl = cleanUrl;
                 return;
@@ -50,7 +53,7 @@ export default {
                 shouldRefresh = true;
             }
 
-            if (! shouldRefresh) {
+            if (!shouldRefresh) {
                 postMessageToIframe(container, url, payload);
                 return;
             }
@@ -58,10 +61,9 @@ export default {
             let isSameOrigin = url.startsWith('/') || iframeUrl.host === window.location.host;
             let preserveScroll = isSameOrigin && cleanUrl === this.previousUrl;
 
-            let scroll = preserveScroll ? [
-                container.firstChild.contentWindow.scrollX ?? 0,
-                container.firstChild.contentWindow.scrollY ?? 0
-            ] : null;
+            let scroll = preserveScroll
+                ? [container.firstChild.contentWindow.scrollX ?? 0, container.firstChild.contentWindow.scrollY ?? 0]
+                : null;
 
             container.replaceChild(iframe, container.firstChild);
 
@@ -80,6 +82,6 @@ export default {
 
         setIframeAttributes(iframe) {
             //
-        }
-    }
-}
+        },
+    },
+};
diff --git a/resources/js/components/login/Login.vue b/resources/js/components/login/Login.vue
index 080cf3b329..49d2ca3f76 100644
--- a/resources/js/components/login/Login.vue
+++ b/resources/js/components/login/Login.vue
@@ -4,27 +4,25 @@
 
 <script>
 export default {
-
     props: {
         showEmailLogin: {
-            default: false
+            default: false,
         },
         hasError: {
-            default: false
-        }
+            default: false,
+        },
     },
 
     data() {
         return {
-            busy: false
-        }
+            busy: false,
+        };
     },
 
     mounted() {
         if (this.hasError) {
             this.$el.parentElement.parentElement.classList.add('animation-shake');
         }
-    }
-
+    },
 };
 </script>
diff --git a/resources/js/components/modals/ConfirmationModal.vue b/resources/js/components/modals/ConfirmationModal.vue
index 354cfb8326..7428ba5456 100644
--- a/resources/js/components/modals/ConfirmationModal.vue
+++ b/resources/js/components/modals/ConfirmationModal.vue
@@ -1,7 +1,10 @@
 <template>
     <modal name="confirmation-modal" @opened="$emit('opened')">
-        <form class="confirmation-modal flex flex-col h-full" @submit.prevent="submit">
-            <header v-if="title" class="text-lg font-semibold px-5 py-3 bg-gray-200 dark:bg-dark-550 rounded-t-lg flex items-center justify-between border-b dark:border-dark-900">
+        <form class="confirmation-modal flex h-full flex-col" @submit.prevent="submit">
+            <header
+                v-if="title"
+                class="flex items-center justify-between rounded-t-lg border-b bg-gray-200 px-5 py-3 text-lg font-semibold dark:border-dark-900 dark:bg-dark-550"
+            >
                 {{ __(title) }}
             </header>
             <div class="relative flex-1 px-5 py-6 text-gray dark:text-dark-150">
@@ -11,13 +14,30 @@
                         <p>{{ __('Are you sure?') }}</p>
                     </slot>
                 </slot>
-                <div v-if="busy" class="bg-white dark:bg-dark-700 bg-opacity-75 select-none pointer-events-none absolute inset-0 flex items-center justify-center">
+                <div
+                    v-if="busy"
+                    class="pointer-events-none absolute inset-0 flex select-none items-center justify-center bg-white bg-opacity-75 dark:bg-dark-700"
+                >
                     <loading-graphic text="" />
                 </div>
             </div>
-            <div class="px-5 py-3 bg-gray-200 dark:bg-dark-550 rounded-b-lg border-t dark:border-dark-900 flex items-center justify-end text-sm">
-                <button type="button" class="btn-flat" @click.prevent="$emit('cancel')" v-text="__(cancelText)" v-if="cancellable" :disabled="busy" />
-                <button class="rtl:mr-4 ltr:ml-4" :class="buttonClass" :disabled="disabled || busy" v-text="__(buttonText)" />
+            <div
+                class="flex items-center justify-end rounded-b-lg border-t bg-gray-200 px-5 py-3 text-sm dark:border-dark-900 dark:bg-dark-550"
+            >
+                <button
+                    type="button"
+                    class="btn-flat"
+                    @click.prevent="$emit('cancel')"
+                    v-text="__(cancelText)"
+                    v-if="cancellable"
+                    :disabled="busy"
+                />
+                <button
+                    class="ltr:ml-4 rtl:mr-4"
+                    :class="buttonClass"
+                    :disabled="disabled || busy"
+                    v-text="__(buttonText)"
+                />
             </div>
         </form>
     </modal>
@@ -28,26 +48,26 @@ export default {
     emits: ['opened', 'confirm', 'cancel'],
     props: {
         title: {
-            type: String
+            type: String,
         },
         bodyText: {
-            type: String
+            type: String,
         },
         buttonText: {
             type: String,
-            default: 'Confirm'
+            default: 'Confirm',
         },
         cancellable: {
             type: Boolean,
-            default: true
+            default: true,
         },
         cancelText: {
             type: String,
-            default: 'Cancel'
+            default: 'Cancel',
         },
         danger: {
             type: Boolean,
-            default: false
+            default: false,
         },
         disabled: {
             type: Boolean,
@@ -56,40 +76,40 @@ export default {
         busy: {
             type: Boolean,
             default: false,
-        }
+        },
     },
 
     data() {
         return {
             escBinding: null,
-        }
+        };
     },
 
     computed: {
         buttonClass() {
             return this.danger ? 'btn-danger' : 'btn-primary';
-        }
+        },
     },
 
     methods: {
         dismiss() {
             if (this.busy) return;
 
-            this.$emit('cancel')
+            this.$emit('cancel');
         },
         submit() {
             if (this.busy) return;
 
             this.$emit('confirm');
-        }
+        },
     },
 
     created() {
-        this.escBinding = this.$keys.bind('esc', this.dismiss)
+        this.escBinding = this.$keys.bind('esc', this.dismiss);
     },
 
     beforeUnmount() {
-        this.escBinding.destroy()
+        this.escBinding.destroy();
     },
-}
+};
 </script>
diff --git a/resources/js/components/modals/KeyboardShortcutsModal.vue b/resources/js/components/modals/KeyboardShortcutsModal.vue
index 471905462d..57e04f24fb 100644
--- a/resources/js/components/modals/KeyboardShortcutsModal.vue
+++ b/resources/js/components/modals/KeyboardShortcutsModal.vue
@@ -1,54 +1,59 @@
 <template>
     <modal v-if="open" name="keyboard-shortcuts" :width="380" @closed="open = false" click-to-close>
         <div class="-max-h-screen-px">
-        <h1 class="p-4 bg-gray-200 dark:bg-dark-700 border-b dark:border-dark-900 text-center">
-            {{ __('Keyboard Shortcuts') }}
-        </h1>
-        <div class="p-6 relative">
-            <div class="shortcut-pair">
-                <span class="shortcut-combo">
-                    <span class="shortcut">shift</span><span class="shortcut-joiner">+</span><span class="shortcut">?</span>
-                </span>
-                <span class="shortcut-value">{{ __('Show Keyboard Shortcuts') }}</span>
-            </div>
+            <h1 class="border-b bg-gray-200 p-4 text-center dark:border-dark-900 dark:bg-dark-700">
+                {{ __('Keyboard Shortcuts') }}
+            </h1>
+            <div class="relative p-6">
+                <div class="shortcut-pair">
+                    <span class="shortcut-combo">
+                        <span class="shortcut">shift</span><span class="shortcut-joiner">+</span
+                        ><span class="shortcut">?</span>
+                    </span>
+                    <span class="shortcut-value">{{ __('Show Keyboard Shortcuts') }}</span>
+                </div>
 
-            <div class="shortcut-pair">
-                <span class="shortcut-combo">
-                    <span class="shortcut">/</span> <span class="shortcut-joiner">or</span>
-                    <span class="shortcut">ctrl</span><span class="shortcut-joiner">+</span><span class="shortcut">f</span>
-                </span>
-                <span class="shortcut-value">{{ __('Focus Search') }}</span>
-            </div>
+                <div class="shortcut-pair">
+                    <span class="shortcut-combo">
+                        <span class="shortcut">/</span> <span class="shortcut-joiner">or</span>
+                        <span class="shortcut">ctrl</span><span class="shortcut-joiner">+</span
+                        ><span class="shortcut">f</span>
+                    </span>
+                    <span class="shortcut-value">{{ __('Focus Search') }}</span>
+                </div>
 
-            <div class="shortcut-pair">
-                <span class="shortcut-combo">
-                    <span class="shortcut">⌘</span><span class="shortcut-joiner">+</span><span class="shortcut">return</span>
-                </span>
-                <span class="shortcut-value">{{ __('Save') }}</span>
-            </div>
+                <div class="shortcut-pair">
+                    <span class="shortcut-combo">
+                        <span class="shortcut">⌘</span><span class="shortcut-joiner">+</span
+                        ><span class="shortcut">return</span>
+                    </span>
+                    <span class="shortcut-value">{{ __('Save') }}</span>
+                </div>
 
-            <div class="shortcut-pair">
-                <span class="shortcut-combo">
-                    <span class="shortcut">⌘</span><span class="shortcut-joiner">+</span><span class="shortcut">s</span>
-                </span>
-                <span class="shortcut-value">{{ __('Quick Save') }}</span>
-            </div>
+                <div class="shortcut-pair">
+                    <span class="shortcut-combo">
+                        <span class="shortcut">⌘</span><span class="shortcut-joiner">+</span
+                        ><span class="shortcut">s</span>
+                    </span>
+                    <span class="shortcut-value">{{ __('Quick Save') }}</span>
+                </div>
 
-            <div class="shortcut-pair">
-                <span class="shortcut-combo">
-                    <span class="shortcut">⌘</span><span class="shortcut-joiner">+</span><span class="shortcut">\</span>
-                </span>
-                <span class="shortcut-value">{{ __('Toggle Sidebar') }}</span>
-            </div>
+                <div class="shortcut-pair">
+                    <span class="shortcut-combo">
+                        <span class="shortcut">⌘</span><span class="shortcut-joiner">+</span
+                        ><span class="shortcut">\</span>
+                    </span>
+                    <span class="shortcut-value">{{ __('Toggle Sidebar') }}</span>
+                </div>
 
-            <div class="shortcut-pair mb-0">
-                <span class="shortcut-combo">
-                    <span class="shortcut">esc</span>
-                </span>
-                <span class="shortcut-value">{{ __('Close Modal') }}</span>
+                <div class="shortcut-pair mb-0">
+                    <span class="shortcut-combo">
+                        <span class="shortcut">esc</span>
+                    </span>
+                    <span class="shortcut-value">{{ __('Close Modal') }}</span>
+                </div>
             </div>
         </div>
-        </div>
     </modal>
 </template>
 
@@ -58,14 +63,13 @@ export default {
         return {
             open: false,
             keybinding: null,
-        }
+        };
     },
 
     watch: {
-
         open(open) {
             if (open) {
-                this.keybinding = this.$keys.bind('esc', () => this.open = false);
+                this.keybinding = this.$keys.bind('esc', () => (this.open = false));
             } else {
                 this.keybinding.destroy();
             }
@@ -75,15 +79,15 @@ export default {
     methods: {
         close() {
             this.open = false;
-        }
+        },
     },
 
     created() {
-        this.$keys.bind('?', () => this.open = !this.open);
+        this.$keys.bind('?', () => (this.open = !this.open));
 
         this.$events.$on('keyboard-shortcuts.open', () => {
-           this.open = true;
-       });
+            this.open = true;
+        });
     },
-}
+};
 </script>
diff --git a/resources/js/components/nav/Branch.vue b/resources/js/components/nav/Branch.vue
index a3d59765a1..73683b1074 100644
--- a/resources/js/components/nav/Branch.vue
+++ b/resources/js/components/nav/Branch.vue
@@ -1,22 +1,22 @@
 <template>
-
-    <div class="flex page-tree-branch" :class="{ 'ml-[-24px]': isTopLevel }">
+    <div class="page-tree-branch flex" :class="{ 'ml-[-24px]': isTopLevel }">
         <div class="page-move w-6" />
-        <div class="flex items-center flex-1 p-2 rtl:mr-2 ltr:ml-2 text-xs leading-normal">
-            <div class="flex items-center flex-1" :class="{ 'opacity-50': isHidden || isInHiddenSection }">
-                <template v-if="! isSection && ! isChild">
-                    <i v-if="isAlreadySvg" class="w-4 h-4 rtl:ml-2 ltr:mr-2" v-html="icon"></i>
-                    <svg-icon v-else class="w-4 h-4 rtl:ml-2 ltr:mr-2" :name="'light/'+icon" />
+        <div class="flex flex-1 items-center p-2 text-xs leading-normal ltr:ml-2 rtl:mr-2">
+            <div class="flex flex-1 items-center" :class="{ 'opacity-50': isHidden || isInHiddenSection }">
+                <template v-if="!isSection && !isChild">
+                    <i v-if="isAlreadySvg" class="h-4 w-4 ltr:mr-2 rtl:ml-2" v-html="icon"></i>
+                    <svg-icon v-else class="h-4 w-4 ltr:mr-2 rtl:ml-2" :name="'light/' + icon" />
                 </template>
 
                 <a
                     @click="$emit('edit', $event)"
                     :class="{ 'text-sm font-medium': isSection }"
-                    v-text="__(item.text)" />
+                    v-text="__(item.text)"
+                />
 
                 <button
                     v-if="hasChildren && !isSection"
-                    class="p-2 text-gray-600 dark:text-dark-200 hover:text-gray-700 dark:hover:dark-text-150 transition duration-100 outline-none flex"
+                    class="dark:hover:dark-text-150 flex p-2 text-gray-600 outline-none transition duration-100 hover:text-gray-700 dark:text-dark-200"
                     :class="{ '-rotate-90': !isOpen }"
                     @click="$emit('toggle-open')"
                 >
@@ -24,19 +24,55 @@
                 </button>
             </div>
 
-            <div class="rtl:pl-2 ltr:pr-2 flex items-center">
+            <div class="flex items-center ltr:pr-2 rtl:pl-2">
                 <slot name="branch-icon" :branch="item" />
 
-                <svg-icon v-if="isRenamedSection" class="inline-block w-4 h-4 text-gray-500" name="light/content-writing" v-tooltip="__('Renamed Section')" />
-                <svg-icon v-else-if="isHidden" class="inline-block w-4 h-4 text-gray-500" name="light/hidden" v-tooltip="isSection ? __('Hidden Section') : __('Hidden Item')" />
-                <svg-icon v-else-if="isPinnedAlias" class="inline-block w-4 h-4 text-gray-500" name="light/pin" v-tooltip="__('Pinned Item')" />
-                <svg-icon v-else-if="isAlias" class="inline-block w-4 h-4 text-gray-500" name="light/duplicate-ids" v-tooltip="__('Alias Item')" />
-                <svg-icon v-else-if="isMoved" class="inline-block w-4 text-gray-500" name="regular/flip-vertical" v-tooltip="__('Moved Item')" />
-                <svg-icon v-else-if="isModified" class="inline-block w-4 h-4 text-gray-500" name="light/content-writing" v-tooltip="__('Modified Item')" />
-                <svg-icon v-else-if="isCustom" class="inline-block w-4 text-gray-500" name="light/user-edit" v-tooltip="isSection ? __('Custom Section') : __('Custom Item')" />
-
-                <dropdown-list class="rtl:mr-4 ltr:ml-4">
-                    <slot name="branch-options"
+                <svg-icon
+                    v-if="isRenamedSection"
+                    class="inline-block h-4 w-4 text-gray-500"
+                    name="light/content-writing"
+                    v-tooltip="__('Renamed Section')"
+                />
+                <svg-icon
+                    v-else-if="isHidden"
+                    class="inline-block h-4 w-4 text-gray-500"
+                    name="light/hidden"
+                    v-tooltip="isSection ? __('Hidden Section') : __('Hidden Item')"
+                />
+                <svg-icon
+                    v-else-if="isPinnedAlias"
+                    class="inline-block h-4 w-4 text-gray-500"
+                    name="light/pin"
+                    v-tooltip="__('Pinned Item')"
+                />
+                <svg-icon
+                    v-else-if="isAlias"
+                    class="inline-block h-4 w-4 text-gray-500"
+                    name="light/duplicate-ids"
+                    v-tooltip="__('Alias Item')"
+                />
+                <svg-icon
+                    v-else-if="isMoved"
+                    class="inline-block w-4 text-gray-500"
+                    name="regular/flip-vertical"
+                    v-tooltip="__('Moved Item')"
+                />
+                <svg-icon
+                    v-else-if="isModified"
+                    class="inline-block h-4 w-4 text-gray-500"
+                    name="light/content-writing"
+                    v-tooltip="__('Modified Item')"
+                />
+                <svg-icon
+                    v-else-if="isCustom"
+                    class="inline-block w-4 text-gray-500"
+                    name="light/user-edit"
+                    v-tooltip="isSection ? __('Custom Section') : __('Custom Item')"
+                />
+
+                <dropdown-list class="ltr:ml-4 rtl:mr-4">
+                    <slot
+                        name="branch-options"
                         :item="item"
                         :depth="depth"
                         :remove-branch="remove"
@@ -44,17 +80,14 @@
                     />
                 </dropdown-list>
             </div>
-
         </div>
     </div>
-
 </template>
 
 <script>
-import { data_get } from  '../../bootstrap/globals.js'
+import { data_get } from '../../bootstrap/globals.js';
 
 export default {
-
     props: {
         item: Object,
         parentSection: Object,
@@ -70,11 +103,10 @@ export default {
     data() {
         return {
             editing: false,
-        }
+        };
     },
 
     computed: {
-
         isSection() {
             if (this.disableSections) {
                 return false;
@@ -88,9 +120,7 @@ export default {
         },
 
         icon() {
-            return data_get(this.item, 'config.icon')
-                || data_get(this.item, 'original.icon')
-                || 'entries';
+            return data_get(this.item, 'config.icon') || data_get(this.item, 'original.icon') || 'entries';
         },
 
         isAlreadySvg() {
@@ -130,21 +160,16 @@ export default {
         },
 
         isTopLevel() {
-            return this.stat.data?.text === 'Top Level'
-                || this.stat.parent?.data?.text === 'Top Level';
-        }
-
+            return this.stat.data?.text === 'Top Level' || this.stat.parent?.data?.text === 'Top Level';
+        },
     },
 
     methods: {
-
         remove() {
             const store = this.item._vm.store;
             store.deleteNode(this.item);
             this.$emit('removed', store);
         },
-
-    }
-
-}
+    },
+};
 </script>
diff --git a/resources/js/components/nav/Builder.vue b/resources/js/components/nav/Builder.vue
index 60b88baff7..6e638d659e 100644
--- a/resources/js/components/nav/Builder.vue
+++ b/resources/js/components/nav/Builder.vue
@@ -1,48 +1,64 @@
 <template>
-
     <div>
-
         <header class="mb-6">
             <breadcrumb v-if="indexUrl" :url="indexUrl" :title="__('CP Nav Preferences')" />
 
             <div class="flex items-center">
                 <h1 class="flex-1">{{ __(title) }}</h1>
 
-                <dropdown-list class="rtl:ml-2 ltr:mr-2">
-                    <dropdown-item :text="__('Reset Nav Customizations')" class="warning" @click="confirmingReset = true"></dropdown-item>
+                <dropdown-list class="ltr:mr-2 rtl:ml-2">
+                    <dropdown-item
+                        :text="__('Reset Nav Customizations')"
+                        class="warning"
+                        @click="confirmingReset = true"
+                    ></dropdown-item>
                 </dropdown-list>
 
-                <a @click="discardChanges" class="text-2xs text-blue rtl:ml-4 ltr:mr-4 underline" v-if="isDirty" v-text="__('Discard changes')" />
+                <a
+                    @click="discardChanges"
+                    class="text-2xs text-blue underline ltr:mr-4 rtl:ml-4"
+                    v-if="isDirty"
+                    v-text="__('Discard changes')"
+                />
 
                 <dropdown-list>
                     <template #trigger>
-                        <button class="btn flex items-center rtl:pl-4 ltr:pr-4">
+                        <button class="btn flex items-center ltr:pr-4 rtl:pl-4">
                             {{ __('Add Item') }}
-                            <svg-icon name="micro/chevron-down-xs" class="w-2 rtl:mr-4 ltr:ml-4" />
+                            <svg-icon name="micro/chevron-down-xs" class="w-2 ltr:ml-4 rtl:mr-4" />
                         </button>
                     </template>
                     <dropdown-item :text="__('Add Nav Item')" @click="addItem($refs.tree.rootChildren[0])" />
                     <dropdown-item :text="__('Add Section')" @click="addSection" />
                 </dropdown-list>
 
-                <div class="rtl:mr-4 ltr:ml-4 rtl:text-right ltr:text-left" :class="{ 'btn-group': hasSaveAsOptions }">
+                <div class="ltr:ml-4 ltr:text-left rtl:mr-4 rtl:text-right" :class="{ 'btn-group': hasSaveAsOptions }">
                     <button
-                        class="btn-primary rtl:pr-4 ltr:pl-4"
-                        :class="{ 'disabled': !changed }"
+                        class="btn-primary ltr:pl-4 rtl:pr-4"
+                        :class="{ disabled: !changed }"
                         :disabled="!changed"
                         @click="save"
-                        v-text="__('Save Changes')" />
+                        v-text="__('Save Changes')"
+                    />
 
-                    <dropdown-list v-if="hasSaveAsOptions" class="rtl:mr-0 ltr:ml-0">
+                    <dropdown-list v-if="hasSaveAsOptions" class="ltr:ml-0 rtl:mr-0">
                         <template #trigger>
-                            <button class="btn-primary rtl:rounded-r-none ltr:rounded-l-none flex items-center">
+                            <button class="btn-primary flex items-center ltr:rounded-l-none rtl:rounded-r-none">
                                 <svg-icon name="micro/chevron-down-xs" class="w-2" />
                             </button>
                         </template>
                         <h6 class="p-2">{{ __('Save to') }}...</h6>
-                        <dropdown-item v-for="option in saveAsOptions" :key="option.url" @click="saveAs(option.url)" class="group">
-                            <div class="flex items-start rtl:pl-4 ltr:pr-4">
-                                <svg-icon :name="option.icon" class="text-gray shrink-0 rtl:ml-2 ltr:mr-2 w-4 group-hover:text-white" />
+                        <dropdown-item
+                            v-for="option in saveAsOptions"
+                            :key="option.url"
+                            @click="saveAs(option.url)"
+                            class="group"
+                        >
+                            <div class="flex items-start ltr:pr-4 rtl:pl-4">
+                                <svg-icon
+                                    :name="option.icon"
+                                    class="w-4 shrink-0 text-gray group-hover:text-white ltr:mr-2 rtl:ml-2"
+                                />
                                 <span class="whitespace-normal">{{ __(option.label) }}</span>
                             </div>
                         </dropdown-item>
@@ -52,20 +68,15 @@
         </header>
 
         <div class="mb-2 flex justify-end">
+            <a class="text-2xs text-blue underline ltr:mr-4 rtl:ml-4" v-text="__('Expand All')" @click="expandAll" />
             <a
-                class="text-2xs text-blue rtl:ml-4 ltr:mr-4 underline"
-                v-text="__('Expand All')"
-                @click="expandAll"
-            />
-            <a
-                class="text-2xs text-blue rtl:ml-2 ltr:mr-2 underline"
+                class="text-2xs text-blue underline ltr:mr-2 rtl:ml-2"
                 v-text="__('Collapse All')"
                 @click="collapseAll"
             />
         </div>
 
         <div v-if="!loading" class="page-tree w-full">
-
             <Draggable
                 ref="tree"
                 v-model="treeData"
@@ -84,19 +95,19 @@
                 @before-drag-start="beforeDragStart"
                 @after-drop="afterDrop"
             >
-
                 <template #placeholder>
-                    <div class="w-full bg-blue-500/10 rounded p-2 border border-blue-400 border-dashed"
-                         :class="{
-                        'mt-8': isSectionNode(draggingStat),
-                        'ml-[-24px]': isDraggingIntoTopLevel
-                    }">&nbsp;</div>
+                    <div
+                        class="w-full rounded border border-dashed border-blue-400 bg-blue-500/10 p-2"
+                        :class="{
+                            'mt-8': isSectionNode(draggingStat),
+                            'ml-[-24px]': isDraggingIntoTopLevel,
+                        }"
+                    >
+                        &nbsp;
+                    </div>
                 </template>
                 <template #default="{ node, stat }">
-                    <top-level-tree-branch
-                        v-if="stat.level === 1 && stat.data?.text === 'Top Level'"
-                        :stat="stat"
-                    />
+                    <top-level-tree-branch v-if="stat.level === 1 && stat.data?.text === 'Top Level'" :stat="stat" />
                     <tree-branch
                         v-else
                         :item="node"
@@ -112,31 +123,26 @@
                         @toggle-open="stat.open = !stat.open"
                     >
                         <template #branch-options="{ isTopLevel }">
+                            <dropdown-item v-if="stat.level < 3" :text="__('Add Item')" @click="addItem(stat)" />
+                            <dropdown-item :text="__('Edit')" @click="editItem(stat)" />
                             <dropdown-item
-                                v-if="stat.level < 3"
-                                :text="__('Add Item')"
-                                @click="addItem(stat)" />
-                            <dropdown-item
-                                :text="__('Edit')"
-                                @click="editItem(stat)" />
-                            <dropdown-item
-                                v-if="! isSectionNode(stat) && !isTopLevel"
+                                v-if="!isSectionNode(stat) && !isTopLevel"
                                 :text="__('Pin to Top Level')"
-                                @click="pinItem(stat)" />
+                                @click="pinItem(stat)"
+                            />
                             <dropdown-item
-                                v-if="! isSectionNode(stat)"
+                                v-if="!isSectionNode(stat)"
                                 :text="__('Duplicate')"
-                                @click="aliasItem(stat)" />
+                                @click="aliasItem(stat)"
+                            />
                             <li class="divider" />
                             <dropdown-item
                                 v-if="itemIsVisible(stat)"
                                 :text="isHideable(stat) ? __('Hide') : __('Remove')"
                                 class="warning"
-                                @click="isHideable(stat) ? hideItem(stat) : removeItem(stat)" />
-                            <dropdown-item
-                                v-else
-                                :text="__('Show')"
-                                @click="showItem(stat)" />
+                                @click="isHideable(stat) ? hideItem(stat) : removeItem(stat)"
+                            />
+                            <dropdown-item v-else :text="__('Show')" @click="showItem(stat)" />
                         </template>
                     </tree-branch>
                 </template>
@@ -159,12 +165,7 @@
             @updated="itemUpdated"
         />
 
-        <section-editor
-            v-if="creatingSection"
-            :creating="true"
-            @closed="resetSectionEditor"
-            @updated="sectionAdded"
-        />
+        <section-editor v-if="creatingSection" :creating="true" @closed="resetSectionEditor" @updated="sectionAdded" />
 
         <section-editor
             v-if="editingSection"
@@ -192,9 +193,7 @@
             @confirm="removeItem(confirmingRemoval, true)"
             @cancel="confirmingReset = false"
         />
-
     </div>
-
 </template>
 
 <script>
@@ -203,16 +202,15 @@ import TreeBranch from './Branch.vue';
 import TopLevelTreeBranch from './TopLevelBranch.vue';
 import ItemEditor from './ItemEditor.vue';
 import SectionEditor from './SectionEditor.vue';
-import { data_get } from  '../../bootstrap/globals.js'
+import { data_get } from '../../bootstrap/globals.js';
 
 export default {
-
     components: {
         Draggable,
         TreeBranch,
         ItemEditor,
         SectionEditor,
-        TopLevelTreeBranch
+        TopLevelTreeBranch,
     },
 
     props: {
@@ -258,11 +256,11 @@ export default {
             confirmingRemoval: false,
             draggingStat: false,
             isDraggingIntoTopLevel: false,
-        }
+        };
     },
 
     created() {
-        this.$keys.bindGlobal(['mod+s'], e => {
+        this.$keys.bindGlobal(['mod+s'], (e) => {
             e.preventDefault();
             this.save();
         });
@@ -273,7 +271,6 @@ export default {
     },
 
     computed: {
-
         isDirty() {
             return this.changed;
         },
@@ -285,24 +282,24 @@ export default {
         direction() {
             return this.$config.get('direction', 'ltr');
         },
-
     },
 
     methods: {
-
         setInitialNav(nav) {
             let navConfig = clone(nav);
 
             this.setOriginalSectionItems(navConfig);
 
             this.treeData = _.chain(navConfig)
-                .mapObject(section => this.normalizeNavConfig(section))
+                .mapObject((section) => this.normalizeNavConfig(section))
                 .values()
                 .value();
         },
 
         setOriginalSectionItems(nav) {
-            nav.forEach(section => this.originalSectionItems[section.display_original] = section.items_original || []);
+            nav.forEach(
+                (section) => (this.originalSectionItems[section.display_original] = section.items_original || []),
+            );
         },
 
         discardChanges() {
@@ -324,10 +321,12 @@ export default {
             let children = config.items || config.children || [];
 
             if (children) {
-                item.children = children.map(childItem => {
+                item.children = children.map((childItem) => {
                     return {
                         text: childItem.display,
-                        children: childItem.children.map(childChildItem => this.normalizeNavConfig(childChildItem, false)),
+                        children: childItem.children.map((childChildItem) =>
+                            this.normalizeNavConfig(childChildItem, false),
+                        ),
                         open: false,
                         config: childItem,
                         original: childItem.original,
@@ -386,13 +385,13 @@ export default {
         },
 
         isParentItemNode(stat) {
-            return ! this.isSectionNode(stat) && ! this.isChildItemNode(stat);
+            return !this.isSectionNode(stat) && !this.isChildItemNode(stat);
         },
 
         isChildItemNode(stat) {
             if (!stat.parent) return false;
 
-            return ! this.isSectionNode(stat.parent);
+            return !this.isSectionNode(stat.parent);
         },
 
         isCustomSectionNode(stat) {
@@ -400,7 +399,7 @@ export default {
         },
 
         getParentSectionNode(stat) {
-            if (! this.isSectionNode(stat) && stat !== undefined) {
+            if (!this.isSectionNode(stat) && stat !== undefined) {
                 return this.getParentSectionNode(stat.parent);
             }
 
@@ -524,15 +523,12 @@ export default {
                 return false;
             }
 
-            return this.itemHasMovedWithinSection(stat)
-                || this.itemHasMovedToAnotherSection(stat);
+            return this.itemHasMovedWithinSection(stat) || this.itemHasMovedToAnotherSection(stat);
         },
 
         itemIsWithinOriginalParentItem(stat) {
             let parentOriginal = stat.parent.data.original || { children: [] };
-            let parentsOriginalChildIds = parentOriginal
-                .children
-                .map(child => child.id);
+            let parentsOriginalChildIds = parentOriginal.children.map((child) => child.id);
 
             return this.isChildItemNode(stat) && parentsOriginalChildIds.includes(stat.data.config.id);
         },
@@ -540,11 +536,9 @@ export default {
         itemHasMovedWithinSection(stat) {
             let parentOriginal = stat.parent.data.original || { children: [] };
 
-            let parentsOriginalChildIds = parentOriginal
-                .children
-                .map(child => child.id);
+            let parentsOriginalChildIds = parentOriginal.children.map((child) => child.id);
 
-            if (this.isChildItemNode(stat) && ! parentsOriginalChildIds.includes(stat.data.config.id)) {
+            if (this.isChildItemNode(stat) && !parentsOriginalChildIds.includes(stat.data.config.id)) {
                 return true;
             }
 
@@ -555,7 +549,7 @@ export default {
                 return false;
             }
 
-            if (! this.isChildItemNode(stat) && ! sectionsOriginalIds.includes(stat.data.config.id)) {
+            if (!this.isChildItemNode(stat) && !sectionsOriginalIds.includes(stat.data.config.id)) {
                 return true;
             }
 
@@ -570,8 +564,7 @@ export default {
         },
 
         itemHasBeenModified(stat) {
-            return this.itemHasModifiedProperties(stat)
-                || this.itemHasModifiedChildren(stat);
+            return this.itemHasModifiedProperties(stat) || this.itemHasModifiedChildren(stat);
         },
 
         itemHasModifiedProperties(stat) {
@@ -579,14 +572,16 @@ export default {
         },
 
         itemHasModifiedChildren(stat) {
-            return stat.children.filter(childItem => {
-                return _.chain(childItem.data.manipulations).keys().value().length > 0;
-            }).length > 0;
+            return (
+                stat.children.filter((childItem) => {
+                    return _.chain(childItem.data.manipulations).keys().value().length > 0;
+                }).length > 0
+            );
         },
 
         expandAll() {
             walkTreeData(this.$refs.tree.rootChildren, (stat) => {
-                if (! this.isSectionNode(stat)) {
+                if (!this.isSectionNode(stat)) {
                     stat.open = true;
                 }
             });
@@ -594,7 +589,7 @@ export default {
 
         collapseAll() {
             walkTreeData(this.$refs.tree.rootChildren, (stat) => {
-                if (! this.isSectionNode(stat)) {
+                if (!this.isSectionNode(stat)) {
                     stat.open = false;
                 }
             });
@@ -618,10 +613,10 @@ export default {
 
         aliasItem(stat, parentStat) {
             let currentAction = stat.data.manipulations.action;
-            let newItem = this.normalizeNavConfig({...stat.data.config}, false);
+            let newItem = this.normalizeNavConfig({ ...stat.data.config }, false);
 
             if (currentAction === '@create') {
-                newItem.manipulations = {...stat.data.manipulations};
+                newItem.manipulations = { ...stat.data.manipulations };
             } else {
                 newItem.manipulations = { action: '@alias' };
             }
@@ -650,12 +645,12 @@ export default {
                 return false;
             }
 
-            return ! ['@alias', '@create'].includes(action);
+            return !['@alias', '@create'].includes(action);
         },
 
         removeItem(stat, bypassConfirmation = false) {
-            if (this.isCustomSectionNode(stat) && stat.children.length && ! bypassConfirmation) {
-                return this.confirmingRemoval = stat;
+            if (this.isCustomSectionNode(stat) && stat.children.length && !bypassConfirmation) {
+                return (this.confirmingRemoval = stat);
             }
 
             this.$refs.tree.remove(stat);
@@ -688,7 +683,7 @@ export default {
         },
 
         save() {
-            if (! this.changed) {
+            if (!this.changed) {
                 return;
             }
 
@@ -696,11 +691,10 @@ export default {
         },
 
         saveAs(url) {
-
             let tree = this.preparePreferencesSubmission();
 
             this.$axios
-                .patch(url, {tree})
+                .patch(url, { tree })
                 .then(() => location.reload())
                 .catch(() => this.$toast.error(__('Something went wrong')));
         },
@@ -708,12 +702,12 @@ export default {
         preparePreferencesSubmission() {
             let tree = [];
 
-            this.treeData.forEach(section => {
+            this.treeData.forEach((section) => {
                 tree.push({
-                    'display': section.text,
-                    'display_original': section.config.display_original || section.text,
-                    'action': section.manipulations.action || false,
-                    'items': this.prepareItemsForSubmission(section.children),
+                    display: section.text,
+                    display_original: section.config.display_original || section.text,
+                    action: section.manipulations.action || false,
+                    items: this.prepareItemsForSubmission(section.children),
                 });
             });
 
@@ -723,11 +717,11 @@ export default {
         prepareItemsForSubmission(treeItems) {
             let items = [];
 
-            treeItems.forEach(item => {
+            treeItems.forEach((item) => {
                 items.push({
-                    'id': this.prepareItemIdForSubmission(item),
-                    'manipulations': item.manipulations,
-                    'children': item.children ? this.prepareItemsForSubmission(item.children) : [],
+                    id: this.prepareItemIdForSubmission(item),
+                    manipulations: item.manipulations,
+                    children: item.children ? this.prepareItemsForSubmission(item.children) : [],
                 });
             });
 
@@ -751,9 +745,7 @@ export default {
             this.updateItemAction(this.draggingStat);
             this.draggingStat = false;
             return true;
-        }
-
+        },
     },
-
-}
+};
 </script>
diff --git a/resources/js/components/nav/ItemEditor.vue b/resources/js/components/nav/ItemEditor.vue
index 71bb2d7931..f252cef0e0 100644
--- a/resources/js/components/nav/ItemEditor.vue
+++ b/resources/js/components/nav/ItemEditor.vue
@@ -1,53 +1,61 @@
 <template>
-
     <stack narrow name="nav-item-editor" @closed="$emit('closed')" v-slot="{ close }">
-        <div class="bg-white dark:bg-dark-800 h-full flex flex-col">
-
-            <div class="bg-gray-200 dark:bg-dark-600 px-6 py-2 border-b border-gray-300 dark:border-dark-900 text-lg font-medium flex items-center justify-between">
+        <div class="flex h-full flex-col bg-white dark:bg-dark-800">
+            <div
+                class="flex items-center justify-between border-b border-gray-300 bg-gray-200 px-6 py-2 text-lg font-medium dark:border-dark-900 dark:bg-dark-600"
+            >
                 {{ creating ? __('Add Nav Item') : __('Edit Nav Item') }}
-                <button
-                    type="button"
-                    class="btn-close"
-                    @click="close"
-                    v-html="'&times'" />
+                <button type="button" class="btn-close" @click="close" v-html="'&times'" />
             </div>
 
             <div class="flex-1 overflow-auto">
                 <div class="px-2">
                     <div class="publish-fields @container">
-
                         <div class="form-group publish-field w-full" :class="{ 'has-error': validateDisplay }">
                             <div class="field-inner">
-                                <label class="text-sm font-medium mb-2">{{ __('Display') }} <span class="text-red-500">*</span></label>
+                                <label class="mb-2 text-sm font-medium"
+                                    >{{ __('Display') }} <span class="text-red-500">*</span></label
+                                >
                                 <text-input v-model="config.display" :focus="true" />
-                                <div v-if="validateDisplay" class="help-block text-red-500 mt-2"><p>{{ __('statamic::validation.required') }}</p></div>
+                                <div v-if="validateDisplay" class="help-block mt-2 text-red-500">
+                                    <p>{{ __('statamic::validation.required') }}</p>
+                                </div>
                             </div>
                         </div>
 
                         <div class="form-group publish-field w-full" :class="{ 'has-error': validateUrl }">
                             <div class="field-inner">
-                                <label class="text-sm font-medium mb-2">{{ __('URL') }} <span class="text-red-500">*</span></label>
+                                <label class="mb-2 text-sm font-medium"
+                                    >{{ __('URL') }} <span class="text-red-500">*</span></label
+                                >
                                 <div class="help-block -mt-2">
                                     <p v-text="__('Enter any internal or external URL.')"></p>
                                 </div>
                                 <text-input v-model="config.url" />
-                                <div v-if="validateUrl" class="help-block text-red-500 mt-2"><p>{{ __('statamic::validation.required') }}</p></div>
+                                <div v-if="validateUrl" class="help-block mt-2 text-red-500">
+                                    <p>{{ __('statamic::validation.required') }}</p>
+                                </div>
                             </div>
                         </div>
 
-                        <div class="form-group publish-field w-full" v-if="! isChild">
+                        <div class="form-group publish-field w-full" v-if="!isChild">
                             <div class="field-inner">
-                                <label class="text-sm font-medium mb-2">{{ __('Icon') }}</label>
+                                <label class="mb-2 text-sm font-medium">{{ __('Icon') }}</label>
                                 <publish-field-meta
                                     :config="{ handle: 'icon', type: 'icon', folder: 'light' }"
                                     :initial-value="config.icon"
                                     v-slot="{ meta, value, loading }"
                                 >
-                                    <icon-fieldtype v-if="!loading" handle="icon" :meta="meta" :value="value" @update:value="config.icon = $event" />
+                                    <icon-fieldtype
+                                        v-if="!loading"
+                                        handle="icon"
+                                        :meta="meta"
+                                        :value="value"
+                                        @update:value="config.icon = $event"
+                                    />
                                 </publish-field-meta>
                             </div>
                         </div>
-
                     </div>
                 </div>
 
@@ -57,17 +65,16 @@
                         :class="{ 'opacity-50': false }"
                         :disabled="false"
                         @click="save"
-                        v-text="__('Save')" />
+                        v-text="__('Save')"
+                    />
                 </div>
             </div>
-
         </div>
     </stack>
-
 </template>
 
 <script>
-import { data_get } from  '../../bootstrap/globals.js'
+import { data_get } from '../../bootstrap/globals.js';
 
 export default {
     emits: ['closed', 'updated'],
@@ -80,15 +87,15 @@ export default {
 
     data() {
         return {
-            config: {...(this.item?.data?.config || this.createNewItem())},
+            config: { ...(this.item?.data?.config || this.createNewItem()) },
             saveKeyBinding: null,
             validateDisplay: false,
             validateUrl: false,
-        }
+        };
     },
 
     created() {
-        this.saveKeyBinding = this.$keys.bindGlobal(['enter', 'mod+enter', 'mod+s'], e => {
+        this.saveKeyBinding = this.$keys.bindGlobal(['enter', 'mod+enter', 'mod+s'], (e) => {
             e.preventDefault();
             this.save();
         });
@@ -99,7 +106,6 @@ export default {
     },
 
     methods: {
-
         createNewItem() {
             return {
                 display: '',
@@ -112,11 +118,11 @@ export default {
             this.validateDisplay = false;
             this.validateUrl = false;
 
-            if (! this.config.display) {
+            if (!this.config.display) {
                 this.validateDisplay = true;
             }
 
-            if (! this.config.url) {
+            if (!this.config.url) {
                 this.validateUrl = true;
             }
 
@@ -128,14 +134,12 @@ export default {
 
             if (this.isChild) {
                 config.icon = null;
-            } else if (! config.icon) {
+            } else if (!config.icon) {
                 config.icon = data_get(this.item, 'original.icon');
             }
 
             this.$emit('updated', this.config, this.item);
         },
-
     },
-
-}
+};
 </script>
diff --git a/resources/js/components/nav/SectionEditor.vue b/resources/js/components/nav/SectionEditor.vue
index 70b6af1009..0c3674a46d 100644
--- a/resources/js/components/nav/SectionEditor.vue
+++ b/resources/js/components/nav/SectionEditor.vue
@@ -1,29 +1,27 @@
 <template>
-
     <stack narrow name="nav-item-editor" @closed="$emit('closed')" v-slot="{ close }">
-        <div class="bg-white dark:bg-dark-800 h-full flex flex-col">
-
-            <div class="bg-gray-200 dark:bg-dark-600 px-6 py-2 border-b border-gray-300 dark:border-dark-900 text-lg font-medium flex items-center justify-between">
+        <div class="flex h-full flex-col bg-white dark:bg-dark-800">
+            <div
+                class="flex items-center justify-between border-b border-gray-300 bg-gray-200 px-6 py-2 text-lg font-medium dark:border-dark-900 dark:bg-dark-600"
+            >
                 {{ creating ? __('Add Section') : __('Edit Section') }}
-                <button
-                    type="button"
-                    class="btn-close"
-                    @click="close"
-                    v-html="'&times'" />
+                <button type="button" class="btn-close" @click="close" v-html="'&times'" />
             </div>
 
             <div class="flex-1 overflow-auto">
                 <div class="px-2">
                     <div class="publish-fields @container">
-
                         <div class="form-group publish-field w-full" :class="{ 'has-error': validate }">
                             <div class="field-inner">
-                                <label class="text-sm font-medium mb-2">{{ __('Display') }} <span class="text-red-500">*</span></label>
+                                <label class="mb-2 text-sm font-medium"
+                                    >{{ __('Display') }} <span class="text-red-500">*</span></label
+                                >
                                 <text-input v-model="section" :focus="true" />
-                                <div v-if="validate" class="help-block text-red-500 mt-2"><p>{{ __('statamic::validation.required') }}</p></div>
+                                <div v-if="validate" class="help-block mt-2 text-red-500">
+                                    <p>{{ __('statamic::validation.required') }}</p>
+                                </div>
                             </div>
                         </div>
-
                     </div>
                 </div>
                 <div class="p-6">
@@ -32,13 +30,12 @@
                         :class="{ 'opacity-50': false }"
                         :disabled="false"
                         @click="save"
-                        v-text="__('Save')" />
+                        v-text="__('Save')"
+                    />
                 </div>
             </div>
-
         </div>
     </stack>
-
 </template>
 
 <script>
@@ -55,11 +52,11 @@ export default {
             section: this.sectionItem?.data?.text || '',
             saveKeyBinding: null,
             validate: false,
-        }
+        };
     },
 
     created() {
-        this.saveKeyBinding = this.$keys.bindGlobal(['enter', 'mod+enter', 'mod+s'], e => {
+        this.saveKeyBinding = this.$keys.bindGlobal(['enter', 'mod+enter', 'mod+s'], (e) => {
             e.preventDefault();
             this.save();
         });
@@ -70,19 +67,16 @@ export default {
     },
 
     methods: {
-
         save() {
             this.validate = false;
 
-            if (! this.section) {
+            if (!this.section) {
                 this.validate = true;
                 return;
             }
 
             this.$emit('updated', this.section, this.sectionItem);
         },
-
     },
-
-}
+};
 </script>
diff --git a/resources/js/components/nav/TopLevelBranch.vue b/resources/js/components/nav/TopLevelBranch.vue
index 7ee6cae6b1..84ad7b808a 100644
--- a/resources/js/components/nav/TopLevelBranch.vue
+++ b/resources/js/components/nav/TopLevelBranch.vue
@@ -1,16 +1,16 @@
 <template>
-
     <div class="flex">
-        <div v-if="!hasChildren" class="w-full rounded p-2 border border-gray-500 border-dashed text-xs text-gray-600 text-center">
+        <div
+            v-if="!hasChildren"
+            class="w-full rounded border border-dashed border-gray-500 p-2 text-center text-xs text-gray-600"
+        >
             &nbsp;
         </div>
     </div>
-
 </template>
 
 <script>
 export default {
-
     props: {
         stat: Object,
     },
@@ -18,8 +18,7 @@ export default {
     computed: {
         hasChildren() {
             return this.stat.children.length > 0;
-        }
-    }
-
-}
+        },
+    },
+};
 </script>
diff --git a/resources/js/components/navigation/CreateForm.vue b/resources/js/components/navigation/CreateForm.vue
index 067bd68f44..0ddc8b4325 100644
--- a/resources/js/components/navigation/CreateForm.vue
+++ b/resources/js/components/navigation/CreateForm.vue
@@ -1,33 +1,32 @@
 <template>
-    <div class="max-w-lg mt-4 mx-auto">
-
-        <div class="rounded p-6 lg:px-20 lg:py-10 shadow bg-white dark:bg-dark-600 dark:shadow-dark">
-            <header class="text-center mb-16">
+    <div class="mx-auto mt-4 max-w-lg">
+        <div class="rounded bg-white p-6 shadow dark:bg-dark-600 dark:shadow-dark lg:px-20 lg:py-10">
+            <header class="mb-16 text-center">
                 <h1 class="mb-6">{{ __('Create Navigation') }}</h1>
                 <p class="text-gray" v-text="__('messages.navigation_configure_intro')" />
             </header>
             <div class="mb-10">
-                <label class="font-bold text-base mb-1" for="name">{{ __('Title') }}</label>
-                <input type="text" v-model="title" class="input-text" autofocus tabindex="1">
-                <div class="text-2xs text-gray-600 mt-2 flex items-center">
+                <label class="mb-1 text-base font-bold" for="name">{{ __('Title') }}</label>
+                <input type="text" v-model="title" class="input-text" autofocus tabindex="1" />
+                <div class="mt-2 flex items-center text-2xs text-gray-600">
                     {{ __('messages.navigation_configure_title_instructions') }}
                 </div>
             </div>
             <div class="mb-4">
-                <label class="font-bold text-base mb-1" for="name">{{ __('Handle') }}</label>
+                <label class="mb-1 text-base font-bold" for="name">{{ __('Handle') }}</label>
                 <div class="relative">
-                    <loading-graphic inline text="" v-if="slug.busy" class="absolute top-3 right-3"/>
-                    <input type="text" v-model="handle" class="input-text" tabindex="2">
+                    <loading-graphic inline text="" v-if="slug.busy" class="absolute right-3 top-3" />
+                    <input type="text" v-model="handle" class="input-text" tabindex="2" />
                 </div>
-                <div class="text-2xs text-gray-600 mt-2 flex items-center">
+                <div class="mt-2 flex items-center text-2xs text-gray-600">
                     {{ __('messages.navigation_configure_handle_instructions') }}
                 </div>
             </div>
         </div>
 
-        <div class="flex justify-center mt-8">
-            <button tabindex="4" class="btn-primary mx-auto btn-lg" :disabled="! canSubmit" @click="submit">
-                {{ __('Create Navigation')}}
+        <div class="mt-8 flex justify-center">
+            <button tabindex="4" class="btn-primary btn-lg mx-auto" :disabled="!canSubmit" @click="submit">
+                {{ __('Create Navigation') }}
             </button>
         </div>
     </div>
@@ -35,11 +34,10 @@
 
 <script>
 export default {
-
     props: {
         route: {
-            type: String
-        }
+            type: String,
+        },
     },
 
     data() {
@@ -47,13 +45,13 @@ export default {
             title: null,
             handle: null,
             slug: this.$slug.async().separatedBy('_'),
-        }
+        };
     },
 
     watch: {
         title(title) {
-            this.slug.create(title).then(slug => this.handle = slug);
-        }
+            this.slug.create(title).then((slug) => (this.handle = slug));
+        },
     },
 
     computed: {
@@ -64,20 +62,23 @@ export default {
 
     methods: {
         submit() {
-            this.$axios.post(this.route, {title: this.title, handle: this.handle}).then(response => {
-                window.location = response.data.redirect;
-            }).catch(error => {
-                this.$toast.error(error.response.data.message);
-            });
-        }
+            this.$axios
+                .post(this.route, { title: this.title, handle: this.handle })
+                .then((response) => {
+                    window.location = response.data.redirect;
+                })
+                .catch((error) => {
+                    this.$toast.error(error.response.data.message);
+                });
+        },
     },
 
     mounted() {
-        this.$keys.bindGlobal(['return'], e => {
+        this.$keys.bindGlobal(['return'], (e) => {
             if (this.canSubmit) {
                 this.submit();
             }
         });
-    }
-}
+    },
+};
 </script>
diff --git a/resources/js/components/navigation/EditForm.vue b/resources/js/components/navigation/EditForm.vue
index 12aa96a3e7..793d0058eb 100644
--- a/resources/js/components/navigation/EditForm.vue
+++ b/resources/js/components/navigation/EditForm.vue
@@ -1,5 +1,4 @@
 <template>
-
     <publish-container
         v-if="blueprint"
         ref="container"
@@ -13,28 +12,23 @@
         v-slot="{ setFieldValue, setFieldMeta }"
     >
         <div>
-            <configure-tabs
-                @updated="setFieldValue"
-                @meta-updated="setFieldMeta"
-                :enable-sidebar="false" />
+            <configure-tabs @updated="setFieldValue" @meta-updated="setFieldMeta" :enable-sidebar="false" />
 
-            <div class="py-4 border-t dark:border-dark-950 flex justify-between">
-                <a :href="url" class="btn" v-text="__('Cancel') "/>
+            <div class="flex justify-between border-t py-4 dark:border-dark-950">
+                <a :href="url" class="btn" v-text="__('Cancel')" />
                 <button type="submit" class="btn-primary" @click="submit">{{ __('Save') }}</button>
             </div>
         </div>
     </publish-container>
-
 </template>
 
 <script>
 export default {
-
     props: {
         blueprint: Object,
         initialValues: Object,
         meta: Object,
-        url: String
+        url: String,
     },
 
     data() {
@@ -42,11 +36,10 @@ export default {
             values: this.initialValues,
             error: null,
             errors: {},
-        }
+        };
     },
 
     methods: {
-
         clearErrors() {
             this.error = null;
             this.errors = {};
@@ -56,11 +49,14 @@ export default {
             this.saving = true;
             this.clearErrors();
 
-            this.$axios.patch(this.url, this.values).then(response => {
-                this.saving = false;
-                this.$toast.success(__('Saved'));
-                this.$refs.container.saved();
-            }).catch(e => this.handleAxiosError(e));
+            this.$axios
+                .patch(this.url, this.values)
+                .then((response) => {
+                    this.saving = false;
+                    this.$toast.success(__('Saved'));
+                    this.$refs.container.saved();
+                })
+                .catch((e) => this.handleAxiosError(e));
         },
 
         handleAxiosError(e) {
@@ -74,15 +70,13 @@ export default {
                 this.$toast.error(__('Something went wrong'));
             }
         },
-
     },
 
     created() {
-        this.$keys.bindGlobal(['mod+s'], e => {
+        this.$keys.bindGlobal(['mod+s'], (e) => {
             e.preventDefault();
             this.submit();
         });
     },
-
-}
+};
 </script>
diff --git a/resources/js/components/navigation/Listing.vue b/resources/js/components/navigation/Listing.vue
index e91b838802..f7c486b8ad 100644
--- a/resources/js/components/navigation/Listing.vue
+++ b/resources/js/components/navigation/Listing.vue
@@ -3,7 +3,11 @@
         <div class="card p-0">
             <data-list-table>
                 <template #cell-title="{ row: structure }">
-                    <a :href="structure.available_in_selected_site ? structure.show_url : structure.edit_url" class="flex items-center" v-text="__(structure.title)" />
+                    <a
+                        :href="structure.available_in_selected_site ? structure.show_url : structure.edit_url"
+                        class="flex items-center"
+                        v-text="__(structure.title)"
+                    />
                 </template>
                 <template #actions="{ row: structure, index }">
                     <dropdown-list>
@@ -17,7 +21,8 @@
                             <resource-deleter
                                 :ref="`deleter_${structure.id}`"
                                 :resource="structure"
-                                @deleted="removeRow(structure)">
+                                @deleted="removeRow(structure)"
+                            >
                             </resource-deleter>
                         </dropdown-item>
                     </dropdown-list>
@@ -31,21 +36,15 @@
 import Listing from '../Listing.vue';
 
 export default {
-
     mixins: [Listing],
 
-    props: [
-        'initialRows',
-    ],
+    props: ['initialRows'],
 
     data() {
         return {
             rows: this.initialRows,
-            columns: [
-                { label: __('Title'), field: 'title', visible: true },
-            ]
-        }
-    }
-
-}
+            columns: [{ label: __('Title'), field: 'title', visible: true }],
+        };
+    },
+};
 </script>
diff --git a/resources/js/components/navigation/RemovePageConfirmation.vue b/resources/js/components/navigation/RemovePageConfirmation.vue
index 41cd267dca..6bb41d3be7 100644
--- a/resources/js/components/navigation/RemovePageConfirmation.vue
+++ b/resources/js/components/navigation/RemovePageConfirmation.vue
@@ -1,45 +1,47 @@
 <template>
-
     <modal name="remove-page-confirmation">
-        <div class="confirmation-modal flex flex-col h-full">
-            <div class="text-lg font-medium p-4 pb-0">
+        <div class="confirmation-modal flex h-full flex-col">
+            <div class="p-4 pb-0 text-lg font-medium">
                 {{ __('Remove Page') }}
             </div>
             <div class="flex-1 px-4 py-6 text-gray dark:text-dark-150">
                 <p class="mb-4" v-text="__('Are you sure you want to remove this page?')" />
                 <p class="mb-4" v-text="__('Only the references will be removed. Entries will not be deleted.')" />
                 <label class="flex items-center" v-if="children">
-                    <input type="checkbox" class="rtl:ml-2 ltr:mr-2" v-model="shouldDeleteChildren" />
+                    <input type="checkbox" class="ltr:mr-2 rtl:ml-2" v-model="shouldDeleteChildren" />
                     {{ __n('Remove child page|Remove :count child pages', children) }}
                 </label>
             </div>
-            <div class="p-4 bg-gray-200 dark:bg-dark-550 border-t dark:border-dark-900 flex items-center justify-end text-sm">
-                <button class="text-gray dark:text-dark-150 hover:text-gray-900 dark:hover:text-dark-100"
+            <div
+                class="flex items-center justify-end border-t bg-gray-200 p-4 text-sm dark:border-dark-900 dark:bg-dark-550"
+            >
+                <button
+                    class="text-gray hover:text-gray-900 dark:text-dark-150 dark:hover:text-dark-100"
                     @click="$emit('cancel')"
-                    v-text="__('Cancel')" />
-                <button class="rtl:mr-4 ltr:ml-4 btn-danger"
+                    v-text="__('Cancel')"
+                />
+                <button
+                    class="btn-danger ltr:ml-4 rtl:mr-4"
                     @click="$emit('confirm', shouldDeleteChildren)"
-                    v-text="__('Remove')" />
+                    v-text="__('Remove')"
+                />
             </div>
         </div>
     </modal>
-
 </template>
 
 <script>
 export default {
-
     emits: ['confirm', 'cancel'],
 
     props: {
-        children: Number
+        children: Number,
     },
 
     data() {
         return {
-            shouldDeleteChildren: false
-        }
-    }
-
-}
+            shouldDeleteChildren: false,
+        };
+    },
+};
 </script>
diff --git a/resources/js/components/navigation/View.vue b/resources/js/components/navigation/View.vue
index 6ef686b985..1aa75d397a 100644
--- a/resources/js/components/navigation/View.vue
+++ b/resources/js/components/navigation/View.vue
@@ -1,36 +1,43 @@
 <template>
-
     <div>
-
         <header class="mb-6" v-if="mounted">
             <breadcrumb :url="breadcrumbUrl" :title="__('Navigation')" />
 
             <div class="flex items-center">
                 <h1 class="flex-1" v-text="__(title)" />
 
-                <dropdown-list v-if="canEdit" class="rtl:ml-2 ltr:mr-2">
+                <dropdown-list v-if="canEdit" class="ltr:mr-2 rtl:ml-2">
                     <slot name="twirldown" />
                 </dropdown-list>
 
-                <a @click="$refs.tree.cancel" class="text-2xs text-blue rtl:ml-4 ltr:mr-4 underline" v-if="isDirty" v-text="__('Discard changes')" />
+                <a
+                    @click="$refs.tree.cancel"
+                    class="text-2xs text-blue underline ltr:mr-4 rtl:ml-4"
+                    v-if="isDirty"
+                    v-text="__('Discard changes')"
+                />
 
                 <site-selector
                     v-if="sites.length > 1"
-                    class="rtl:ml-4 ltr:mr-4"
+                    class="ltr:mr-4 rtl:ml-4"
                     :sites="sites"
                     :value="site"
                     @input="siteSelected"
                 />
 
-                <dropdown-list v-if="canEdit" :disabled="! hasCollections">
+                <dropdown-list v-if="canEdit" :disabled="!hasCollections">
                     <template #trigger>
                         <button
                             class="btn"
-                            :class="{ 'flex items-center rtl:pl-4 ltr:pr-4': hasCollections }"
+                            :class="{ 'flex items-center ltr:pr-4 rtl:pl-4': hasCollections }"
                             @click="addLink"
                         >
                             {{ __('Add Nav Item') }}
-                            <svg-icon name="micro/chevron-down-xs" class="w-2 rtl:mr-4 ltr:ml-4" v-if="hasCollections" />
+                            <svg-icon
+                                name="micro/chevron-down-xs"
+                                class="w-2 ltr:ml-4 rtl:mr-4"
+                                v-if="hasCollections"
+                            />
                         </button>
                     </template>
                     <dropdown-item :text="__('Add Nav Item')" @click="linkPage()" />
@@ -39,11 +46,12 @@
 
                 <button
                     v-if="canEdit"
-                    class="btn-primary rtl:mr-4 ltr:ml-4"
-                    :class="{ 'disabled': !changed }"
+                    class="btn-primary ltr:ml-4 rtl:mr-4"
+                    :class="{ disabled: !changed }"
                     :disabled="!changed"
                     @click="$refs.tree.save"
-                    v-text="__('Save Changes')" />
+                    v-text="__('Save Changes')"
+                />
             </div>
         </header>
 
@@ -58,39 +66,79 @@
             :preferences-prefix="preferencesPrefix"
             :editable="canEdit"
             @edit-page="editPage"
-            @changed="changed = true; targetParent = null;"
+            @changed="
+                changed = true;
+                targetParent = null;
+            "
             @saved="treeSaved"
             @canceled="changed = false"
         >
             <template #empty>
-                <div class="card p-4 content w-full">
-                    <div class="flex flex-wrap w-full">
-                        <a :href="editUrl" class="w-full lg:w-1/2 p-4 flex items-start hover:bg-gray-200 dark:hover:bg-dark-550 rounded-md group">
-                            <svg-icon name="light/hammer-wrench" class="h-8 w-8 rtl:ml-4 ltr:mr-4 text-gray-800 dark:text-dark-175" />
-                            <div class="flex-1 mb-4 md:mb-0 rtl:md:ml-6 ltr:md:mr-6">
-                                <h3 class="mb-2 text-blue dark:text-blue-600">{{ __('Configure Navigation') }} <span v-html="direction === 'ltr' ? '&rarr;' : '&larr;'"></span></h3>
+                <div class="card content w-full p-4">
+                    <div class="flex w-full flex-wrap">
+                        <a
+                            :href="editUrl"
+                            class="group flex w-full items-start rounded-md p-4 hover:bg-gray-200 dark:hover:bg-dark-550 lg:w-1/2"
+                        >
+                            <svg-icon
+                                name="light/hammer-wrench"
+                                class="h-8 w-8 text-gray-800 dark:text-dark-175 ltr:mr-4 rtl:ml-4"
+                            />
+                            <div class="mb-4 flex-1 md:mb-0 ltr:md:mr-6 rtl:md:ml-6">
+                                <h3 class="mb-2 text-blue dark:text-blue-600">
+                                    {{ __('Configure Navigation') }}
+                                    <span v-html="direction === 'ltr' ? '&rarr;' : '&larr;'"></span>
+                                </h3>
                                 <p>{{ __('messages.navigation_configure_settings_intro') }}</p>
                             </div>
                         </a>
-                        <a @click="linkPage()" class="w-full lg:w-1/2 p-4 flex items-start hover:bg-gray-200 dark:hover:bg-dark-550 rounded-md group">
-                            <svg-icon name="paperclip" class="h-8 w-8 rtl:ml-4 ltr:mr-4 text-gray-800 dark:text-dark-175" />
-                            <div class="flex-1 mb-4 md:mb-0 rtl:md:ml-6 ltr:md:mr-6">
-                                <h3 class="mb-2 text-blue dark:text-blue-600">{{ __('Link to URL') }} <span v-html="direction === 'ltr' ? '&rarr;' : '&larr;'"></span></h3>
-                                 <p>{{ __('messages.navigation_link_to_url_instructions') }}</p>
+                        <a
+                            @click="linkPage()"
+                            class="group flex w-full items-start rounded-md p-4 hover:bg-gray-200 dark:hover:bg-dark-550 lg:w-1/2"
+                        >
+                            <svg-icon
+                                name="paperclip"
+                                class="h-8 w-8 text-gray-800 dark:text-dark-175 ltr:mr-4 rtl:ml-4"
+                            />
+                            <div class="mb-4 flex-1 md:mb-0 ltr:md:mr-6 rtl:md:ml-6">
+                                <h3 class="mb-2 text-blue dark:text-blue-600">
+                                    {{ __('Link to URL') }}
+                                    <span v-html="direction === 'ltr' ? '&rarr;' : '&larr;'"></span>
+                                </h3>
+                                <p>{{ __('messages.navigation_link_to_url_instructions') }}</p>
                             </div>
                         </a>
-                        <a @click="linkEntries()" v-if="hasCollections" class="w-full lg:w-1/2 p-4 flex items-start hover:bg-gray-200 dark:hover:bg-dark-550 rounded-md group">
-                            <svg-icon name="light/hierarchy-files" class="h-8 w-8 rtl:ml-4 ltr:mr-4 text-gray-800 dark:text-dark-175" />
-                            <div class="flex-1 mb-4 md:mb-0 rtl:md:ml-6 ltr:md:mr-6">
-                                <h3 class="mb-2 text-blue dark:text-blue-600">{{ __('Link to Entry') }} <span v-html="direction === 'ltr' ? '&rarr;' : '&larr;'"></span></h3>
-                                 <p>{{ __('messages.navigation_link_to_entry_instructions') }}</p>
+                        <a
+                            @click="linkEntries()"
+                            v-if="hasCollections"
+                            class="group flex w-full items-start rounded-md p-4 hover:bg-gray-200 dark:hover:bg-dark-550 lg:w-1/2"
+                        >
+                            <svg-icon
+                                name="light/hierarchy-files"
+                                class="h-8 w-8 text-gray-800 dark:text-dark-175 ltr:mr-4 rtl:ml-4"
+                            />
+                            <div class="mb-4 flex-1 md:mb-0 ltr:md:mr-6 rtl:md:ml-6">
+                                <h3 class="mb-2 text-blue dark:text-blue-600">
+                                    {{ __('Link to Entry') }}
+                                    <span v-html="direction === 'ltr' ? '&rarr;' : '&larr;'"></span>
+                                </h3>
+                                <p>{{ __('messages.navigation_link_to_entry_instructions') }}</p>
                             </div>
                         </a>
-                        <a :href="docs_url('navigation')" class="w-full lg:w-1/2 p-4 flex items-start hover:bg-gray-200 dark:hover:bg-dark-550 rounded-md group">
-                            <svg-icon name="light/book-pages" class="h-8 w-8 rtl:ml-4 ltr:mr-4 text-gray-800 dark:text-dark-175" />
-                            <div class="flex-1 mb-4 md:mb-0 rtl:md:ml-6 ltr:md:mr-6">
-                                <h3 class="mb-2 text-blue dark:text-blue-600">{{ __('Read the Documentation') }} <span v-html="direction === 'ltr' ? '&rarr;' : '&larr;'"></span></h3>
-                                 <p>{{ __('messages.navigation_documentation_instructions') }}</p>
+                        <a
+                            :href="docs_url('navigation')"
+                            class="group flex w-full items-start rounded-md p-4 hover:bg-gray-200 dark:hover:bg-dark-550 lg:w-1/2"
+                        >
+                            <svg-icon
+                                name="light/book-pages"
+                                class="h-8 w-8 text-gray-800 dark:text-dark-175 ltr:mr-4 rtl:ml-4"
+                            />
+                            <div class="mb-4 flex-1 md:mb-0 ltr:md:mr-6 rtl:md:ml-6">
+                                <h3 class="mb-2 text-blue dark:text-blue-600">
+                                    {{ __('Read the Documentation') }}
+                                    <span v-html="direction === 'ltr' ? '&rarr;' : '&larr;'"></span>
+                                </h3>
+                                <p>{{ __('messages.navigation_documentation_instructions') }}</p>
                             </div>
                         </a>
                     </div>
@@ -98,28 +146,35 @@
             </template>
 
             <template #branch-icon="{ branch }">
-                <svg-icon v-if="isEntryBranch(branch)" class="inline-block w-4 h-4 text-gray-500" name="light/hyperlink" v-tooltip="__('Entry link')" />
-                <svg-icon v-if="isLinkBranch(branch)" class="inline-block w-4 h-4 text-gray-500" name="light/external-link" v-tooltip="__('External link')" />
-                <svg-icon v-if="isTextBranch(branch)" class="inline-block w-4 h-4 text-gray-500" name="light/file-text" v-tooltip="__('Text')" />
+                <svg-icon
+                    v-if="isEntryBranch(branch)"
+                    class="inline-block h-4 w-4 text-gray-500"
+                    name="light/hyperlink"
+                    v-tooltip="__('Entry link')"
+                />
+                <svg-icon
+                    v-if="isLinkBranch(branch)"
+                    class="inline-block h-4 w-4 text-gray-500"
+                    name="light/external-link"
+                    v-tooltip="__('External link')"
+                />
+                <svg-icon
+                    v-if="isTextBranch(branch)"
+                    class="inline-block h-4 w-4 text-gray-500"
+                    name="light/file-text"
+                    v-tooltip="__('Text')"
+                />
             </template>
 
             <template v-if="canEdit" #branch-options="{ branch, removeBranch, stat, depth }">
-                <dropdown-item
-                    v-if="isEntryBranch(stat)"
-                    :text="__('Edit Entry')"
-                    :redirect="branch.edit_url" />
-                <dropdown-item
-                    v-if="depth < maxDepth"
-                    :text="__('Add child nav item')"
-                    @click="linkPage(stat)" />
+                <dropdown-item v-if="isEntryBranch(stat)" :text="__('Edit Entry')" :redirect="branch.edit_url" />
+                <dropdown-item v-if="depth < maxDepth" :text="__('Add child nav item')" @click="linkPage(stat)" />
                 <dropdown-item
                     v-if="depth < maxDepth && hasCollections"
                     :text="__('Add child link to entry')"
-                    @click="linkEntries(stat)" />
-                <dropdown-item
-                    :text="__('Remove')"
-                    class="warning"
-                    @click="deleteTreeBranch(branch, removeBranch)" />
+                    @click="linkEntries(stat)"
+                />
+                <dropdown-item :text="__('Remove')" class="warning" @click="deleteTreeBranch(branch, removeBranch)" />
             </template>
         </page-tree>
 
@@ -166,11 +221,12 @@
             v-if="showPageDeletionConfirmation"
             :children="numberOfChildrenToBeDeleted"
             @confirm="pageDeletionConfirmCallback"
-            @cancel="showPageDeletionConfirmation = false; pageBeingDeleted = null;"
+            @cancel="
+                showPageDeletionConfirmation = false;
+                pageBeingDeleted = null;
+            "
         />
-
     </div>
-
 </template>
 
 <script>
@@ -182,13 +238,12 @@ import SiteSelector from '../SiteSelector.vue';
 import uniqid from 'uniqid';
 
 export default {
-
     components: {
         PageTree,
         PageEditor,
         PageSelector,
         RemovePageConfirmation,
-        SiteSelector
+        SiteSelector,
     },
 
     props: {
@@ -199,13 +254,13 @@ export default {
         editUrl: { type: String, required: true },
         pagesUrl: { type: String, required: true },
         submitUrl: { type: String, required: true },
-        maxDepth: { type: Number, default: Infinity, },
+        maxDepth: { type: Number, default: Infinity },
         expectsRoot: { type: Boolean, required: true },
         site: { type: String, required: true },
         sites: { type: Array, required: true },
         blueprint: { type: Object, required: true },
         canEdit: { type: Boolean, required: true },
-        canSelectAcrossSites: { type: Boolean, required: true }
+        canSelectAcrossSites: { type: Boolean, required: true },
     },
 
     data() {
@@ -221,11 +276,10 @@ export default {
             removePageOnCancel: false,
             preferencesPrefix: `navs.${this.handle}`,
             publishInfo: {},
-        }
+        };
     },
 
     computed: {
-
         isDirty() {
             return this.$dirty.has('page-tree');
         },
@@ -233,11 +287,11 @@ export default {
         numberOfChildrenToBeDeleted() {
             let children = 0;
             const countChildren = (page) => {
-                page.children.forEach(child => {
+                page.children.forEach((child) => {
                     children++;
                     countChildren(child);
                 });
-            }
+            };
             countChildren(this.pageBeingDeleted);
             return children;
         },
@@ -247,7 +301,7 @@ export default {
         },
 
         submissionData() {
-            return _.mapObject(this.publishInfo, value => {
+            return _.mapObject(this.publishInfo, (value) => {
                 return _.pick(value, ['entry', 'values', 'localizedFields', 'new']);
             });
         },
@@ -256,7 +310,7 @@ export default {
             return this.$config.get('direction', 'ltr');
         },
 
-        fields () {
+        fields() {
             return this.blueprint.tabs.reduce((fields, tab) => {
                 return tab.sections.reduce((fields, section) => {
                     return fields.concat(section.fields);
@@ -265,21 +319,18 @@ export default {
         },
 
         maxPagesSelection() {
-            if (this.fields.filter(field => field.validate?.includes('required')).length > 0) {
+            if (this.fields.filter((field) => field.validate?.includes('required')).length > 0) {
                 return 1;
             }
 
-            return
+            return;
         },
-
     },
 
     watch: {
-
         changed(changed) {
             this.$dirty.state('page-tree', changed);
-        }
-
+        },
     },
 
     mounted() {
@@ -287,7 +338,6 @@ export default {
     },
 
     methods: {
-
         addLink() {
             if (!this.hasCollections) this.linkPage();
         },
@@ -303,19 +353,22 @@ export default {
         },
 
         entriesSelected(pages) {
-            pages = pages.map(page => ({
+            pages = pages.map((page) => ({
                 ...page,
                 id: uniqid(),
                 entry: page.id,
                 entry_title: page.title,
-                title: null
+                title: null,
             }));
 
-            pages.forEach(page => {
-                this.publishInfo = {...this.publishInfo, [page.id]: {
-                    entry: page.entry,
-                    new: true,
-                }};
+            pages.forEach((page) => {
+                this.publishInfo = {
+                    ...this.publishInfo,
+                    [page.id]: {
+                        entry: page.entry,
+                        new: true,
+                    },
+                };
             });
 
             this.$refs.tree.addPages(pages, this.targetParent);
@@ -395,7 +448,7 @@ export default {
                 removeFromUi(shouldDeleteChildren);
                 this.showPageDeletionConfirmation = false;
                 this.pageBeingDeleted = branch;
-            }
+            };
         },
 
         siteSelected(site) {
@@ -419,8 +472,8 @@ export default {
         },
 
         treeSaved(response) {
-            if (! response.data.saved) {
-                return this.$toast.error(`Couldn't save tree`)
+            if (!response.data.saved) {
+                return this.$toast.error(`Couldn't save tree`);
             }
 
             this.replaceGeneratedIds(response.data.generatedIds);
@@ -441,9 +494,7 @@ export default {
                 branch.id = newId;
                 this.$refs.tree.pageUpdated();
             }
-        }
-
-    }
-
-}
+        },
+    },
+};
 </script>
diff --git a/resources/js/components/portals/Portal.js b/resources/js/components/portals/Portal.js
index b955860475..6db6ca2a23 100644
--- a/resources/js/components/portals/Portal.js
+++ b/resources/js/components/portals/Portal.js
@@ -1,7 +1,6 @@
-import uniqid from 'uniqid'
+import uniqid from 'uniqid';
 
 export default class Portal {
-
     constructor(portals, name, data = {}) {
         this.portals = portals;
         this.id = `${name}-${uniqid()}`;
@@ -11,5 +10,4 @@ export default class Portal {
     destroy() {
         this.portals.destroy(this.id);
     }
-
 }
diff --git a/resources/js/components/portals/Portal.vue b/resources/js/components/portals/Portal.vue
index a2c4db43bd..86ca1ba961 100644
--- a/resources/js/components/portals/Portal.vue
+++ b/resources/js/components/portals/Portal.vue
@@ -1,17 +1,11 @@
 <template>
-
-    <teleport
-        :to="`#portal-target-${portal.id}`"
-        :disabled="disabled"
-        v-if="mounted"
-    >
+    <teleport :to="`#portal-target-${portal.id}`" :disabled="disabled" v-if="mounted">
         <div class="vue-portal-target" :class="targetClass">
             <provider :variables="provide">
-               <slot />
+                <slot />
             </provider>
         </div>
     </teleport>
-
 </template>
 
 <script>
@@ -19,32 +13,32 @@ import Provider from './Provider.vue';
 
 export default {
     components: {
-        Provider
+        Provider,
     },
 
     props: {
         name: {
             type: String,
-            required: true
+            required: true,
         },
         provide: {
             type: Object,
-            default: () => ({})
+            default: () => ({}),
         },
         targetClass: {
-            type: String
+            type: String,
         },
         disabled: {
             type: Boolean,
-            default: false
-        }
+            default: false,
+        },
     },
 
     data() {
         return {
             portal: null,
             mounted: false,
-        }
+        };
     },
 
     created() {
@@ -57,7 +51,6 @@ export default {
 
     beforeUnmount() {
         this.portal.destroy();
-    }
-
-}
+    },
+};
 </script>
diff --git a/resources/js/components/portals/PortalTargets.vue b/resources/js/components/portals/PortalTargets.vue
index 2652efb68c..7458015521 100644
--- a/resources/js/components/portals/PortalTargets.vue
+++ b/resources/js/components/portals/PortalTargets.vue
@@ -1,9 +1,6 @@
 <template>
     <div class="portal-targets" :class="{ 'stacks-on-stacks': hasStacks }">
-        <div
-            v-for="(portal, i) in portals"
-            :id="`portal-target-${portal.id}`"
-        />
+        <div v-for="(portal, i) in portals" :id="`portal-target-${portal.id}`" />
     </div>
 </template>
 
@@ -11,40 +8,34 @@
 import { disableBodyScroll, enableBodyScroll } from 'body-scroll-lock';
 
 export default {
-
     computed: {
-
         portals() {
             return this.$portals.all();
         },
 
         hasStacks() {
             return this.$stacks.count() > 0;
-        }
-
+        },
     },
 
     watch: {
-
         hasStacks(hasStacks) {
             hasStacks ? this.initStacks() : this.destroyStacks();
-        }
-
+        },
     },
 
     methods: {
-
         initStacks() {
             this.$events.$on('stacks.hit-area-clicked', (depth) => {
                 for (let count = this.$stacks.count(); count > depth; count--) {
-                    if (! this.$stacks.stacks()[count-1].data.vm.runCloseCallback()) {
+                    if (!this.$stacks.stacks()[count - 1].data.vm.runCloseCallback()) {
                         return;
                     }
                 }
             });
 
             disableBodyScroll(this.$el, {
-                allowTouchMove: el => {
+                allowTouchMove: (el) => {
                     while (el && el !== document.body) {
                         if (el.classList.contains('overflow-scroll')) {
                             return true;
@@ -58,8 +49,7 @@ export default {
         destroyStacks() {
             this.$events.$off('stacks.hit-area-clicked');
             enableBodyScroll(this.$el);
-        }
-
-    }
-}
+        },
+    },
+};
 </script>
diff --git a/resources/js/components/portals/Portals.js b/resources/js/components/portals/Portals.js
index 538d9bc492..b677797950 100644
--- a/resources/js/components/portals/Portals.js
+++ b/resources/js/components/portals/Portals.js
@@ -2,7 +2,6 @@ import Portal from './Portal';
 import { ref } from 'vue';
 
 export default class Portals {
-
     constructor() {
         this.portals = ref([]);
     }
@@ -26,6 +25,6 @@ export default class Portals {
     }
 
     stacks() {
-        return this.portals.value.filter(portal => portal.data?.type === 'stack');
+        return this.portals.value.filter((portal) => portal.data?.type === 'stack');
     }
 }
diff --git a/resources/js/components/portals/Provider.vue b/resources/js/components/portals/Provider.vue
index 7921ab6ac1..d9ed7754d4 100644
--- a/resources/js/components/portals/Provider.vue
+++ b/resources/js/components/portals/Provider.vue
@@ -1,8 +1,7 @@
 <script>
 export default {
-
     props: {
-        variables: Object
+        variables: Object,
     },
 
     provide() {
@@ -11,7 +10,6 @@ export default {
 
     render() {
         return this.$slots.default({})[0];
-    }
-
-}
+    },
+};
 </script>
diff --git a/resources/js/components/preferences/EditForm.vue b/resources/js/components/preferences/EditForm.vue
index 62ca8025b0..3bd9236691 100644
--- a/resources/js/components/preferences/EditForm.vue
+++ b/resources/js/components/preferences/EditForm.vue
@@ -1,5 +1,4 @@
 <template>
-
     <publish-container
         ref="container"
         :name="name"
@@ -14,27 +13,31 @@
         <div>
             <breadcrumbs v-if="breadcrumbs" :crumbs="breadcrumbs" />
 
-            <div class="flex items-center mb-6">
+            <div class="mb-6 flex items-center">
                 <h1 class="flex-1">{{ title }}</h1>
 
-                <div class="rtl:mr-4 ltr:ml-4 rtl:text-right ltr:text-left" :class="{ 'btn-group': hasSaveAsOptions }">
+                <div class="ltr:ml-4 ltr:text-left rtl:mr-4 rtl:text-right" :class="{ 'btn-group': hasSaveAsOptions }">
                     <button
-                        class="btn-primary rtl:pr-4 ltr:pl-4"
-                        :class="{ 'disabled': !isDirty }"
+                        class="btn-primary ltr:pl-4 rtl:pr-4"
+                        :class="{ disabled: !isDirty }"
                         :disabled="!isDirty"
                         @click="save"
-                        v-text="__('Save')" />
+                        v-text="__('Save')"
+                    />
 
-                    <dropdown-list v-if="hasSaveAsOptions" class="rtl:mr-0 ltr:ml-0">
+                    <dropdown-list v-if="hasSaveAsOptions" class="ltr:ml-0 rtl:mr-0">
                         <template #trigger>
-                            <button class="btn-primary rtl:rounded-r-none ltr:rounded-l-none flex items-center">
+                            <button class="btn-primary flex items-center ltr:rounded-l-none rtl:rounded-r-none">
                                 <svg-icon name="micro/chevron-down-xs" class="w-2" />
                             </button>
                         </template>
                         <h6 class="p-2">{{ __('Save to') }}...</h6>
                         <dropdown-item v-for="option in saveAsOptions" :key="option.url" @click="saveAs(option.url)">
-                            <div class="flex items-start rtl:pl-4 ltr:pr-4">
-                                <svg-icon :name="option.icon" class="text-gray shrink-0 rtl:ml-2 ltr:mr-2 w-4 group-hover:text-white" />
+                            <div class="flex items-start ltr:pr-4 rtl:pl-4">
+                                <svg-icon
+                                    :name="option.icon"
+                                    class="w-4 shrink-0 text-gray group-hover:text-white ltr:mr-2 rtl:ml-2"
+                                />
                                 <span class="whitespace-normal">{{ option.label }}</span>
                             </div>
                         </dropdown-item>
@@ -46,15 +49,14 @@
                 @updated="setFieldValue"
                 @meta-updated="setFieldMeta"
                 :enable-sidebar="hasSidebar"
-                :read-only="readOnly" />
+                :read-only="readOnly"
+            />
         </div>
     </publish-container>
-
 </template>
 
 <script>
 export default {
-
     props: {
         blueprint: { required: true, type: Object },
         meta: { required: true, type: Object },
@@ -74,24 +76,21 @@ export default {
             currentValues: this.values,
             error: null,
             errors: {},
-            hasSidebar: this.blueprint.tabs.map(tab => tab.handle).includes('sidebar'),
-        }
+            hasSidebar: this.blueprint.tabs.map((tab) => tab.handle).includes('sidebar'),
+        };
     },
 
     computed: {
-
         hasSaveAsOptions() {
             return this.saveAsOptions.length;
         },
 
         isDirty() {
             return this.$dirty.has(this.name);
-        }
-
+        },
     },
 
     methods: {
-
         clearErrors() {
             this.error = null;
             this.errors = {};
@@ -111,7 +110,7 @@ export default {
                     this.$refs.container.saved();
                     location.reload();
                 })
-                .catch(e => this.handleAxiosError(e));
+                .catch((e) => this.handleAxiosError(e));
         },
 
         handleAxiosError(e) {
@@ -127,23 +126,19 @@ export default {
                 console.log(e);
             }
         },
-
     },
 
     created() {
-        this.$keys.bindGlobal(['mod+s'], e => {
+        this.$keys.bindGlobal(['mod+s'], (e) => {
             e.preventDefault();
             this.save();
         });
     },
 
     watch: {
-
         saving(saving) {
             this.$progress.loading('preferences-edit-form', saving);
-        }
-
+        },
     },
-
-}
+};
 </script>
diff --git a/resources/js/components/publish/Container.vue b/resources/js/components/publish/Container.vue
index 8172134f25..7ec2aacc89 100644
--- a/resources/js/components/publish/Container.vue
+++ b/resources/js/components/publish/Container.vue
@@ -8,36 +8,36 @@ export default {
 
     props: {
         reference: {
-            type: String
+            type: String,
         },
         name: {
             type: String,
-            required: true
+            required: true,
         },
         blueprint: {
             type: Object,
-            default: () => {}
+            default: () => {},
         },
         values: {
             type: Object,
-            default: () => {}
+            default: () => {},
         },
         extraValues: {
             type: Object,
-            default: () => {}
+            default: () => {},
         },
         meta: {
             type: Object,
-            default: () => {}
+            default: () => {},
         },
         errors: {
-            type: Object
+            type: Object,
         },
         site: {
-            type: String
+            type: String,
         },
         localizedFields: {
-            type: Array
+            type: Array,
         },
         isRoot: {
             // intentionally not a boolean. we rely on it being undefined in places.
@@ -51,7 +51,7 @@ export default {
     data() {
         return {
             components: [], // extra components to be injected
-        }
+        };
     },
 
     created() {
@@ -67,12 +67,11 @@ export default {
 
     provide() {
         return {
-            storeName: this.name
-        }
+            storeName: this.name,
+        };
     },
 
     methods: {
-
         registerVuexModule() {
             const vm = this;
 
@@ -88,8 +87,7 @@ export default {
             };
 
             // If the store already exists, just reinitialize the state.
-            if (this.$store.state.hasOwnProperty('publish')
-            && this.$store.state.publish.hasOwnProperty(this.name)) {
+            if (this.$store.state.hasOwnProperty('publish') && this.$store.state.publish.hasOwnProperty(this.name)) {
                 this.$store.commit(`publish/${this.name}/initialize`, initial);
                 return;
             }
@@ -197,7 +195,7 @@ export default {
                     },
                     clearAutosaveInterval(state) {
                         clearInterval(state.autosaveInterval);
-                    }
+                    },
                 },
                 actions: {
                     setFieldValue(context, payload) {
@@ -216,8 +214,8 @@ export default {
                     },
                     setMeta(context, payload) {
                         context.commit('setMeta', payload);
-                    }
-                }
+                    },
+                },
             });
         },
 
@@ -251,32 +249,32 @@ export default {
 
         setFieldValue(handle, value) {
             this.$store.dispatch(`publish/${this.name}/setFieldValue`, {
-                handle, value,
-                user: Statamic.user.id
+                handle,
+                value,
+                user: Statamic.user.id,
             });
         },
 
         setFieldMeta(handle, value) {
             this.$store.dispatch(`publish/${this.name}/setFieldMeta`, {
-                handle, value,
-                user: Statamic.user.id
+                handle,
+                value,
+                user: Statamic.user.id,
             });
         },
 
         dirty() {
             if (this.trackDirtyState) this.$dirty.add(this.name);
-        }
-
+        },
     },
 
     watch: {
-
         values: {
             deep: true,
             handler(after, before) {
                 if (_.isEqual(before, after)) return;
                 this.$store.commit(`publish/${this.name}/setValues`, after);
-            }
+            },
         },
 
         extraValues: {
@@ -284,7 +282,7 @@ export default {
             handler(after, before) {
                 if (_.isEqual(before, after)) return;
                 this.$store.commit(`publish/${this.name}/setExtraValues`, after);
-            }
+            },
         },
 
         meta: {
@@ -292,7 +290,7 @@ export default {
             handler(after, before) {
                 if (_.isEqual(before, after)) return;
                 this.$store.commit(`publish/${this.name}/setMeta`, after);
-            }
+            },
         },
 
         isRoot(isRoot) {
@@ -303,7 +301,7 @@ export default {
             deep: true,
             handler(blueprint) {
                 this.$store.commit(`publish/${this.name}/setBlueprint`, blueprint);
-            }
+            },
         },
 
         site(site) {
@@ -316,8 +314,7 @@ export default {
 
         localizedFields(fields) {
             this.$store.commit(`publish/${this.name}/setLocalizedFields`, fields);
-        }
-
+        },
     },
 
     render() {
@@ -328,7 +325,6 @@ export default {
             setFieldValue: this.setFieldValue,
             setFieldMeta: this.setFieldMeta,
         })[0];
-    }
-
-}
+    },
+};
 </script>
diff --git a/resources/js/components/publish/Field.vue b/resources/js/components/publish/Field.vue
index 79d65eba64..33b46c1d91 100644
--- a/resources/js/components/publish/Field.vue
+++ b/resources/js/components/publish/Field.vue
@@ -1,5 +1,4 @@
 <template>
-
     <publish-field-meta
         :config="config"
         :initial-value="modelValue"
@@ -7,88 +6,116 @@
         @loaded="metaLoaded"
         v-slot="{ meta, value, loading: loadingMeta }"
     >
-    <div :class="classes">
-        <div class="field-inner">
-            <label v-if="showLabel" class="publish-field-label" :class="{'font-bold': config.bold}" :for="fieldId">
-                <span
-                    v-if="showLabelText"
-                    class="rtl:ml-1 ltr:mr-1"
-                    :class="{ 'text-gray-600': syncable && isSynced }"
-                    v-text="__(labelText)"
-                    v-tooltip="{content: config.handle, delay: 500, autoHide: false}"
-                />
-                <i class="required rtl:ml-1 ltr:mr-1" v-if="showLabelText && config.required">*</i>
-                <avatar v-if="isLocked" :user="lockingUser" class="w-6 h-6 rounded-full -mt-px rtl:mr-2 ltr:ml-2 rtl:ml-2 ltr:mr-2" v-tooltip="lockingUser.name" />
-                <span v-if="isReadOnly && !isTab && !isSection" class="text-gray-500 dark:text-dark-200 font-normal text-2xs rtl:ml-1 ltr:mr-1 mt-0.5">
-                    {{ isLocked ? __('Locked') : __('Read Only') }}
-                </span>
-                <svg-icon name="translate" class="h-4 rtl:ml-1 ltr:mr-1 w-4 text-gray-600" v-if="isLocalizable && !isTab" v-tooltip.top="__('Localizable field')" />
-
-                <button
-                    v-if="!isReadOnly && !isTab"
-                    v-show="syncable && isSynced"
-                    class="outline-none"
-                    :class="{ flex: syncable && isSynced }"
-                    @click="$emit('desynced')"
-                >
-                    <svg-icon name="light/hyperlink" class="h-4 w-4 rtl:ml-1.5 ltr:mr-1.5 mb-1 text-gray-600"
-                        v-tooltip.top="__('messages.field_synced_with_origin')" />
-                </button>
-
-                <button
-                    v-if="!isReadOnly && !isTab"
-                    v-show="syncable && !isSynced"
-                    class="outline-none"
-                    :class="{ flex: syncable && !isSynced }"
-                    @click="$emit('synced')"
+        <div :class="classes">
+            <div class="field-inner">
+                <label
+                    v-if="showLabel"
+                    class="publish-field-label"
+                    :class="{ 'font-bold': config.bold }"
+                    :for="fieldId"
                 >
-                    <svg-icon name="light/hyperlink-broken" class="h-4 w-4 rtl:ml-1.5 ltr:mr-1.5 mb-1 text-gray-600"
-                        v-tooltip.top="__('messages.field_desynced_from_origin')" />
-                </button>
-            </label>
-
-            <div
-                class="help-block" :class="{ '-mt-2': showLabel }"
-                v-if="instructions && config.instructions_position !== 'below'"
-                v-html="instructions" />
+                    <span
+                        v-if="showLabelText"
+                        class="ltr:mr-1 rtl:ml-1"
+                        :class="{ 'text-gray-600': syncable && isSynced }"
+                        v-text="__(labelText)"
+                        v-tooltip="{ content: config.handle, delay: 500, autoHide: false }"
+                    />
+                    <i class="required ltr:mr-1 rtl:ml-1" v-if="showLabelText && config.required">*</i>
+                    <avatar
+                        v-if="isLocked"
+                        :user="lockingUser"
+                        class="-mt-px h-6 w-6 rounded-full ltr:ml-2 ltr:mr-2 rtl:ml-2 rtl:mr-2"
+                        v-tooltip="lockingUser.name"
+                    />
+                    <span
+                        v-if="isReadOnly && !isTab && !isSection"
+                        class="mt-0.5 text-2xs font-normal text-gray-500 dark:text-dark-200 ltr:mr-1 rtl:ml-1"
+                    >
+                        {{ isLocked ? __('Locked') : __('Read Only') }}
+                    </span>
+                    <svg-icon
+                        name="translate"
+                        class="h-4 w-4 text-gray-600 ltr:mr-1 rtl:ml-1"
+                        v-if="isLocalizable && !isTab"
+                        v-tooltip.top="__('Localizable field')"
+                    />
+
+                    <button
+                        v-if="!isReadOnly && !isTab"
+                        v-show="syncable && isSynced"
+                        class="outline-none"
+                        :class="{ flex: syncable && isSynced }"
+                        @click="$emit('desynced')"
+                    >
+                        <svg-icon
+                            name="light/hyperlink"
+                            class="mb-1 h-4 w-4 text-gray-600 ltr:mr-1.5 rtl:ml-1.5"
+                            v-tooltip.top="__('messages.field_synced_with_origin')"
+                        />
+                    </button>
+
+                    <button
+                        v-if="!isReadOnly && !isTab"
+                        v-show="syncable && !isSynced"
+                        class="outline-none"
+                        :class="{ flex: syncable && !isSynced }"
+                        @click="$emit('synced')"
+                    >
+                        <svg-icon
+                            name="light/hyperlink-broken"
+                            class="mb-1 h-4 w-4 text-gray-600 ltr:mr-1.5 rtl:ml-1.5"
+                            v-tooltip.top="__('messages.field_desynced_from_origin')"
+                        />
+                    </button>
+                </label>
+
+                <div
+                    class="help-block"
+                    :class="{ '-mt-2': showLabel }"
+                    v-if="instructions && config.instructions_position !== 'below'"
+                    v-html="instructions"
+                />
 
-            <publish-field-actions v-if="shouldShowFieldActions" :actions="fieldActions" />
-        </div>
+                <publish-field-actions v-if="shouldShowFieldActions" :actions="fieldActions" />
+            </div>
+
+            <loading-graphic v-if="loadingMeta" :size="16" :inline="true" />
+
+            <slot name="fieldtype" v-if="!loadingMeta">
+                <div class="text-xs text-red-500" v-if="!fieldtypeComponentExists">
+                    Component <code v-text="fieldtypeComponent"></code> does not exist.
+                </div>
+                <component
+                    v-else
+                    ref="field"
+                    :is="fieldtypeComponent"
+                    :config="config"
+                    :value="value"
+                    :meta="meta"
+                    :handle="config.handle"
+                    :name-prefix="namePrefix"
+                    :field-path-prefix="fieldPathPrefix"
+                    :read-only="isReadOnly"
+                    @update:value="$emit('update:model-value', $event)"
+                    @meta-updated="$emit('meta-updated', $event)"
+                    @focus="focused"
+                    @blur="blurred"
+                />
+                <!-- TODO: name prop should include prefixing when used recursively like inside a grid. -->
+            </slot>
 
-        <loading-graphic v-if="loadingMeta" :size="16" :inline="true" />
-
-        <slot name="fieldtype" v-if="!loadingMeta">
-            <div class="text-xs text-red-500" v-if="!fieldtypeComponentExists">Component <code v-text="fieldtypeComponent"></code> does not exist.</div>
-            <component
-                v-else
-                ref="field"
-                :is="fieldtypeComponent"
-                :config="config"
-                :value="value"
-                :meta="meta"
-                :handle="config.handle"
-                :name-prefix="namePrefix"
-                :field-path-prefix="fieldPathPrefix"
-                :read-only="isReadOnly"
-                @update:value="$emit('update:model-value', $event)"
-                @meta-updated="$emit('meta-updated', $event)"
-                @focus="focused"
-                @blur="blurred"
-            /> <!-- TODO: name prop should include prefixing when used recursively like inside a grid. -->
-        </slot>
-
-        <div
-            class="help-block mt-2"
-            v-if="instructions && config.instructions_position === 'below'"
-            v-html="instructions" />
-
-        <div v-if="hasError">
-            <small class="help-block text-red-500 mt-2 mb-0" v-for="(error, i) in errors" :key="i" v-text="error" />
+            <div
+                class="help-block mt-2"
+                v-if="instructions && config.instructions_position === 'below'"
+                v-html="instructions"
+            />
+
+            <div v-if="hasError">
+                <small class="help-block mb-0 mt-2 text-red-500" v-for="(error, i) in errors" :key="i" v-text="error" />
+            </div>
         </div>
-
-    </div>
     </publish-field-meta>
-
 </template>
 
 <script>
@@ -97,19 +124,17 @@ import titleize from '../../util/titleize';
 import deslugify from '../../util/deslugify';
 
 export default {
-
     props: {
         config: {
             type: Object,
-            required: true
+            required: true,
         },
         modelValue: {
-            required: true
-        },
-        meta: {
+            required: true,
         },
+        meta: {},
         errors: {
-            type: Array
+            type: Array,
         },
         readOnly: Boolean,
         syncable: Boolean,
@@ -125,11 +150,10 @@ export default {
     data() {
         return {
             hasField: false,
-        }
+        };
     },
 
     computed: {
-
         fieldtypeComponent() {
             return `${this.config.component || this.config.type}-fieldtype`;
         },
@@ -139,9 +163,7 @@ export default {
         },
 
         instructions() {
-            return this.config.instructions
-                ? this.renderMarkdownAndLinks(__(this.config.instructions))
-                : null
+            return this.config.instructions ? this.renderMarkdownAndLinks(__(this.config.instructions)) : null;
         },
 
         hasError() {
@@ -170,19 +192,20 @@ export default {
             return [
                 'form-group publish-field',
                 `publish-field__` + this.config.handle,
-                `${this.config.component || this.config.type}-fieldtype`,,
+                `${this.config.component || this.config.type}-fieldtype`,
+                ,
                 this.isReadOnly ? 'read-only-field' : '',
                 this.isInsideConfigFields ? 'config-field' : `${tailwind_width_class(this.config.width)}`,
                 this.showLabel ? 'has-field-label' : '',
                 this.shouldShowFieldActions ? 'has-field-dropdown' : '',
                 this.config.classes || '',
                 this.config.full_width_setting ? 'full-width-setting' : '',
-                { 'has-error': this.hasError || this.hasNestedError }
+                { 'has-error': this.hasError || this.hasNestedError },
             ];
         },
 
         fieldId() {
-            return 'field_'+this.config.handle;
+            return 'field_' + this.config.handle;
         },
 
         locks() {
@@ -212,25 +235,26 @@ export default {
         hasNestedError() {
             const prefix = `${this.fieldPathPrefix || this.config.handle}.`;
 
-            return Object.keys(this.storeState.errors ?? []).some(handle => handle.startsWith(prefix));
+            return Object.keys(this.storeState.errors ?? []).some((handle) => handle.startsWith(prefix));
         },
 
         labelText() {
-             return this.config.display
-                 || titleize(deslugify(this.config.handle));
-         },
+            return this.config.display || titleize(deslugify(this.config.handle));
+        },
 
         showLabelText() {
             return !this.config.hide_display;
         },
 
         showLabel() {
-            return this.showLabelText // Need to see the text
-                || this.isReadOnly // Need to see the "Read Only" text
-                || this.config.required // Need to see the asterisk
-                || this.isLocked // Need to see the avatar
-                || this.isLocalizable // Need to see the icon
-                || this.syncable // Need to see the icon
+            return (
+                this.showLabelText || // Need to see the text
+                this.isReadOnly || // Need to see the "Read Only" text
+                this.config.required || // Need to see the asterisk
+                this.isLocked || // Need to see the avatar
+                this.isLocalizable || // Need to see the icon
+                this.syncable
+            ); // Need to see the icon
         },
 
         shouldShowFieldActions() {
@@ -240,7 +264,6 @@ export default {
         fieldActions() {
             return this.hasField ? this.$refs.field.fieldActions : [];
         },
-
     },
 
     mounted() {
@@ -248,7 +271,6 @@ export default {
     },
 
     methods: {
-
         focused() {
             if (!this.isLocked) {
                 this.$emit('focus');
@@ -264,23 +286,21 @@ export default {
         renderMarkdownAndLinks(text) {
             var renderer = new marked.Renderer();
 
-            renderer.link = function(href, title, text) {
+            renderer.link = function (href, title, text) {
                 var link = marked.Renderer.prototype.link.call(this, href, title, text);
-                return link.replace("<a","<a target='_blank' ");
+                return link.replace('<a', "<a target='_blank' ");
             };
 
             marked.setOptions({
-                renderer: renderer
+                renderer: renderer,
             });
 
             return marked(text);
         },
 
         metaLoaded() {
-            this.$nextTick(() => this.hasField = true);
-        }
-
-    }
-}
-
+            this.$nextTick(() => (this.hasField = true));
+        },
+    },
+};
 </script>
diff --git a/resources/js/components/publish/FieldMeta.vue b/resources/js/components/publish/FieldMeta.vue
index 62a9080c22..97f1a45816 100644
--- a/resources/js/components/publish/FieldMeta.vue
+++ b/resources/js/components/publish/FieldMeta.vue
@@ -13,15 +13,13 @@ export default {
             meta: this.initialMeta,
             value: this.initialValue,
             loading: false,
-        }
+        };
     },
 
     computed: {
-
         isPreloadable() {
             return this.$config.get('preloadableFieldtypes').includes(this.config.type);
-        }
-
+        },
     },
 
     render() {
@@ -34,7 +32,7 @@ export default {
     },
 
     created() {
-        if (! this.isPreloadable) return;
+        if (!this.isPreloadable) return;
 
         // For hardcoded field components (ie. when used inside a custom form, without being generated from
         // a blueprint) the developer wouldn't pass in a `meta` prop to the `form-group` component. In
@@ -43,19 +41,16 @@ export default {
     },
 
     watch: {
-
         initialValue(value) {
             this.value = value;
         },
 
         initialMeta(meta) {
             this.meta = meta;
-        }
-
+        },
     },
 
     methods: {
-
         load() {
             this.loading = true;
 
@@ -64,7 +59,7 @@ export default {
                 value: this.value,
             };
 
-            this.$axios.post(cp_url('fields/field-meta'), params).then(response => {
+            this.$axios.post(cp_url('fields/field-meta'), params).then((response) => {
                 this.meta = response.data.meta;
                 this.value = response.data.value;
                 this.loading = false;
@@ -74,9 +69,7 @@ export default {
 
         updateMeta(value) {
             this.meta = value;
-        }
-
-    }
-
-}
+        },
+    },
+};
 </script>
diff --git a/resources/js/components/publish/Fields.vue b/resources/js/components/publish/Fields.vue
index fa0df6fd6e..0cac3cdc20 100644
--- a/resources/js/components/publish/Fields.vue
+++ b/resources/js/components/publish/Fields.vue
@@ -1,7 +1,5 @@
 <template>
-
     <div class="publish-fields @container">
-
         <publish-field
             v-for="field in fields"
             v-show="showField(field)"
@@ -20,9 +18,7 @@
             @focus="$emit('focus', field.handle)"
             @blur="$emit('blur', field.handle)"
         />
-
     </div>
-
 </template>
 
 <script>
@@ -41,7 +37,7 @@ export default {
     props: {
         fields: {
             type: Array,
-            required: true
+            required: true,
         },
         readOnly: Boolean,
         syncable: Boolean,
@@ -50,7 +46,6 @@ export default {
     },
 
     computed: {
-
         state() {
             return this.$store.state.publish[this.storeName];
         },
@@ -69,21 +64,17 @@ export default {
 
         errors() {
             return this.state.errors;
-        }
-
+        },
     },
 
     methods: {
-
         isSyncableField(field) {
-            if (! this.syncable) return false;
+            if (!this.syncable) return false;
 
-            if (! this.syncableFields) return true;
+            if (!this.syncableFields) return true;
 
             return this.syncableFields.includes(field.handle);
-        }
-
-    }
-
-}
+        },
+    },
+};
 </script>
diff --git a/resources/js/components/publish/FormGroup.vue b/resources/js/components/publish/FormGroup.vue
index e11a41eb1c..ea3725ddbc 100644
--- a/resources/js/components/publish/FormGroup.vue
+++ b/resources/js/components/publish/FormGroup.vue
@@ -1,12 +1,10 @@
 <template>
-
     <publish-field
         :config="fieldConfig"
         :model-value="modelValue"
         :errors="fieldErrors"
         @update:model-value="$emit('update:model-value', $event)"
     />
-
 </template>
 
 <script>
@@ -18,7 +16,6 @@ export default {
     components: { PublishField },
 
     props: {
-
         modelValue: {},
 
         fieldtype: {
@@ -37,38 +34,36 @@ export default {
         },
 
         instructions: {
-            type: String
+            type: String,
         },
 
         width: {
-            default: 100
+            default: 100,
         },
 
         focus: {
-            type: Boolean
+            type: Boolean,
         },
 
         autoselect: {
-            type: Boolean
+            type: Boolean,
         },
 
         errors: {
-            type: Array
+            type: Array,
         },
 
         // A single error, useful when using this component directly in Blade views.
         error: {
-            type: String
+            type: String,
         },
 
         config: {
-            type: Object
-        }
-
+            type: Object,
+        },
     },
 
     computed: {
-
         fieldConfig() {
             return {
                 ...this.config,
@@ -84,9 +79,7 @@ export default {
 
         fieldErrors() {
             return this.error ? [this.error] : this.errors;
-        }
-
-    }
-
-}
+        },
+    },
+};
 </script>
diff --git a/resources/js/components/publish/FullscreenHeader.vue b/resources/js/components/publish/FullscreenHeader.vue
index 23d8a03567..5ca76d57aa 100644
--- a/resources/js/components/publish/FullscreenHeader.vue
+++ b/resources/js/components/publish/FullscreenHeader.vue
@@ -1,34 +1,32 @@
 <template>
-
-    <header class="bg-white dark:bg-dark-550 fixed top-0 inset-x-0 px-4 flex items-center justify-between shadow z-max">
+    <header class="fixed inset-x-0 top-0 z-max flex items-center justify-between bg-white px-4 shadow dark:bg-dark-550">
         <h2 class="w-full" v-text="__(title)" />
-        <div class="grow-1 min-w-max flex gap-4 items-center">
+        <div class="grow-1 flex min-w-max items-center gap-4">
             <slot />
         </div>
-        <div class="w-full py-2.5 flex justify-end items-center">
+        <div class="flex w-full items-center justify-end py-2.5">
             <dropdown-list class="mr-2" v-if="fieldActions.length">
                 <dropdown-actions :actions="fieldActions" v-if="fieldActions.length" />
             </dropdown-list>
             <button
                 class="btn-quick-action"
-                v-for="(action, index) in fieldActions.filter(a => a.quick)"
+                v-for="(action, index) in fieldActions.filter((a) => a.quick)"
                 :key="index"
                 v-tooltip="action.title"
-                @click="action.run()">
+                @click="action.run()"
+            >
                 <svg-icon :name="action.icon" class="h-4 w-4" />
             </button>
         </div>
     </header>
-
 </template>
 
 <script>
-import DropdownActions from "../field-actions/DropdownActions.vue";
+import DropdownActions from '../field-actions/DropdownActions.vue';
 
 export default {
-
     components: {
-        DropdownActions
+        DropdownActions,
     },
 
     props: {
@@ -40,8 +38,6 @@ export default {
             type: Array,
             default: () => [],
         },
-    }
-
-}
-
+    },
+};
 </script>
diff --git a/resources/js/components/publish/HasActions.js b/resources/js/components/publish/HasActions.js
index d7b9fce1b7..571544fb7a 100644
--- a/resources/js/components/publish/HasActions.js
+++ b/resources/js/components/publish/HasActions.js
@@ -1,5 +1,4 @@
 export default {
-
     props: {
         initialItemActions: { type: Array, default: () => [] },
         itemActionUrl: String,
@@ -8,24 +7,21 @@ export default {
     data() {
         return {
             itemActions: this.initialItemActions,
-        }
+        };
     },
 
-    computed: { 
-
+    computed: {
         hasItemActions() {
             return this.itemActions.length > 0;
         },
-
     },
 
     methods: {
-
         actionStarted() {
             this.saving = true;
         },
 
-        actionCompleted(successful=null, response) {
+        actionCompleted(successful = null, response) {
             this.saving = false;
 
             if (successful === false) return;
@@ -33,11 +29,11 @@ export default {
             this.$events.$emit('reset-action-modals');
 
             if (response.success === false) {
-                this.$toast.error(response.message || __("Action failed"));
+                this.$toast.error(response.message || __('Action failed'));
             } else {
-                this.$toast.success(response.message || __("Action completed"));
+                this.$toast.success(response.message || __('Action completed'));
             }
-            
+
             if (response.data) {
                 this.itemActions = response.data.itemActions;
             }
@@ -47,8 +43,6 @@ export default {
 
         afterActionSuccessfullyCompleted(response) {
             //
-        }
-
-    }
-
-}
+        },
+    },
+};
diff --git a/resources/js/components/publish/HasHiddenFields.js b/resources/js/components/publish/HasHiddenFields.js
index 25a215b18c..1ff29b024a 100644
--- a/resources/js/components/publish/HasHiddenFields.js
+++ b/resources/js/components/publish/HasHiddenFields.js
@@ -1,9 +1,7 @@
 import Values from './Values.js';
 
 export default {
-
     computed: {
-
         hiddenFields() {
             return this.$store.state.publish[this.publishContainer].hiddenFields;
         },
@@ -18,17 +16,15 @@ export default {
 
         visibleValues() {
             let omittableFields = _.chain(this.hiddenFields)
-                .pick(field => field.omitValue)
+                .pick((field) => field.omitValue)
                 .keys()
                 .value();
 
             return new Values(this.values, this.jsonSubmittingFields).except(omittableFields);
         },
-
     },
 
     methods: {
-
         resetValuesFromResponse(responseValues) {
             if (!responseValues) return this.values;
 
@@ -40,7 +36,5 @@ export default {
 
             return newValues.all();
         },
-
     },
-
-}
+};
diff --git a/resources/js/components/publish/PublishForm.vue b/resources/js/components/publish/PublishForm.vue
index fce5a7d4fd..133980f79f 100644
--- a/resources/js/components/publish/PublishForm.vue
+++ b/resources/js/components/publish/PublishForm.vue
@@ -1,5 +1,4 @@
 <template>
-
     <publish-container
         ref="container"
         :name="name"
@@ -14,7 +13,7 @@
         <div>
             <breadcrumbs v-if="breadcrumbs" :crumbs="breadcrumbs" />
 
-            <div class="flex items-center mb-6">
+            <div class="mb-6 flex items-center">
                 <h1 class="flex-1">{{ title }}</h1>
                 <button v-if="action" type="submit" class="btn-primary" @click="submit">{{ __('Save') }}</button>
             </div>
@@ -23,15 +22,14 @@
                 @updated="setFieldValue"
                 @meta-updated="setFieldMeta"
                 :enable-sidebar="hasSidebar"
-                :read-only="readOnly" />
+                :read-only="readOnly"
+            />
         </div>
     </publish-container>
-
 </template>
 
 <script>
 export default {
-
     props: {
         blueprint: { required: true, type: Object },
         meta: { required: true, type: Object },
@@ -41,7 +39,7 @@ export default {
         breadcrumbs: Array,
         action: String,
         method: { type: String, default: 'post' },
-        readOnly: { type: Boolean, default: false }
+        readOnly: { type: Boolean, default: false },
     },
 
     data() {
@@ -49,12 +47,11 @@ export default {
             currentValues: this.values,
             error: null,
             errors: {},
-            hasSidebar: this.blueprint.tabs.map(tab => tab.handle).includes('sidebar'),
-        }
+            hasSidebar: this.blueprint.tabs.map((tab) => tab.handle).includes('sidebar'),
+        };
     },
 
     methods: {
-
         clearErrors() {
             this.error = null;
             this.errors = {};
@@ -66,12 +63,14 @@ export default {
             this.saving = true;
             this.clearErrors();
 
-            this.$axios[this.method](this.action, this.currentValues).then(response => {
-                this.saving = false;
-                this.$toast.success(__('Saved'));
-                this.$refs.container.saved();
-                this.$emit('saved', response);
-            }).catch(e => this.handleAxiosError(e));
+            this.$axios[this.method](this.action, this.currentValues)
+                .then((response) => {
+                    this.saving = false;
+                    this.$toast.success(__('Saved'));
+                    this.$refs.container.saved();
+                    this.$emit('saved', response);
+                })
+                .catch((e) => this.handleAxiosError(e));
         },
 
         handleAxiosError(e) {
@@ -87,15 +86,13 @@ export default {
                 console.log(e);
             }
         },
-
     },
 
     created() {
-        this.$keys.bindGlobal(['mod+s'], e => {
+        this.$keys.bindGlobal(['mod+s'], (e) => {
             e.preventDefault();
             this.submit();
         });
     },
-
-}
+};
 </script>
diff --git a/resources/js/components/publish/SaveButtonOptions.vue b/resources/js/components/publish/SaveButtonOptions.vue
index 81e296767b..034cb1a560 100644
--- a/resources/js/components/publish/SaveButtonOptions.vue
+++ b/resources/js/components/publish/SaveButtonOptions.vue
@@ -1,14 +1,12 @@
 <template>
-
     <div :class="{ 'btn-group': showOptions }">
-
         <!-- Save button -->
         <slot></slot>
 
         <!-- Save and continue options dropdown -->
-        <dropdown-list v-if="showOptions" class="rtl:text-right ltr:text-left">
+        <dropdown-list v-if="showOptions" class="ltr:text-left rtl:text-right">
             <template v-slot:trigger>
-                <button :class="buttonClass" class="rtl:rounded-r-none ltr:rounded-l-none">
+                <button :class="buttonClass" class="ltr:rounded-l-none rtl:rounded-r-none">
                     <svg-icon v-if="buttonIcon" :name="buttonIcon.name" :class="buttonIcon.class" />
                 </button>
             </template>
@@ -24,18 +22,15 @@
                 </div>
             </div>
         </dropdown-list>
-
     </div>
-
 </template>
 
 <script>
 export default {
-
     props: {
         showOptions: {
             type: Boolean,
-            default: true
+            default: true,
         },
         buttonClass: {
             default: 'btn-primary',
@@ -64,13 +59,13 @@ export default {
         },
 
         buttonIcon() {
-            switch(true) {
+            switch (true) {
                 case this.currentOption === 'listing':
-                    return {name: 'micro/arrow-go-back', class: 'w-3'};
+                    return { name: 'micro/arrow-go-back', class: 'w-3' };
                 case this.currentOption === 'continue_editing':
-                    return {name: 'micro/chevron-down-xs', class: 'w-2'};
+                    return { name: 'micro/chevron-down-xs', class: 'w-2' };
                 case this.currentOption === 'create_another':
-                    return {name: 'micro/add-circle', class: 'w-3'};
+                    return { name: 'micro/add-circle', class: 'w-3' };
             }
         },
 
@@ -82,7 +77,7 @@ export default {
     mounted() {
         this.setInitialValue();
 
-        this.$watch('currentOption', value => this.setPreference(value));
+        this.$watch('currentOption', (value) => this.setPreference(value));
     },
 
     methods: {
@@ -98,15 +93,18 @@ export default {
                 : this.$preferences.set(this.preferencesKey, value);
         },
     },
-
-}
+};
 </script>
 
 <style>
-    .save-and-continue-options input {
-        margin-bottom: 9px;
-    }
-    .save-and-continue-options input {
-        margin-right: 5px ; [dir="rtl"] & { margin-left: 5px ; margin-right: 0 ; }
+.save-and-continue-options input {
+    margin-bottom: 9px;
+}
+.save-and-continue-options input {
+    margin-right: 5px;
+    [dir='rtl'] & {
+        margin-left: 5px;
+        margin-right: 0;
     }
+}
 </style>
diff --git a/resources/js/components/publish/Sections.vue b/resources/js/components/publish/Sections.vue
index f9e70b832e..cdaf1f6b78 100644
--- a/resources/js/components/publish/Sections.vue
+++ b/resources/js/components/publish/Sections.vue
@@ -1,11 +1,13 @@
 <template>
     <div class="publish-sections">
         <div class="publish-sections-section" v-for="(section, i) in visibleSections" :key="i">
-            <div class="p-0 card">
+            <div class="card p-0">
                 <header class="publish-section-header @container" v-if="section.display">
                     <div class="publish-section-header-inner">
                         <label v-text="__(section.display)" class="text-base font-semibold" />
-                        <div class="help-block" v-if="section.instructions"><p v-html="$markdown(__(section.instructions))" /></div>
+                        <div class="help-block" v-if="section.instructions">
+                            <p v-html="$markdown(__(section.instructions))" />
+                        </div>
                     </div>
                 </header>
                 <publish-fields
@@ -36,7 +38,7 @@ export default {
     props: {
         sections: {
             type: Array,
-            required: true
+            required: true,
         },
         readOnly: Boolean,
         syncable: Boolean,
@@ -58,7 +60,7 @@ export default {
         },
 
         visibleSections() {
-            return this.sections.filter(section => this.sectionHasVisibleFields(section));
+            return this.sections.filter((section) => this.sectionHasVisibleFields(section));
         },
     },
 
@@ -66,13 +68,12 @@ export default {
         sectionHasVisibleFields(section) {
             let visibleFields = 0;
 
-            section.fields.forEach(field => {
+            section.fields.forEach((field) => {
                 if (this.showField(field)) visibleFields++;
             });
 
             return visibleFields > 0;
         },
     },
-
-}
+};
 </script>
diff --git a/resources/js/components/publish/Tabs.vue b/resources/js/components/publish/Tabs.vue
index c86c5626ef..35fffc9e30 100644
--- a/resources/js/components/publish/Tabs.vue
+++ b/resources/js/components/publish/Tabs.vue
@@ -1,120 +1,115 @@
 <template>
-
     <element-container @resized="containerWasResized">
-    <div>
-
-        <!-- Tabs -->
-        <div v-if="showTabs" class="tabs-container flex items-center">
-            <div
-                class="publish-tabs tabs"
-                :class="{ 'tabs-scrolled': canScrollLeft }"
-                ref="tabs"
-                role="tablist"
-                :aria-label="__('Edit Content')"
-                @keydown.prevent.arrow-left="activatePreviousTab"
-                @keydown.prevent.arrow-right="activateNextTab"
-                @keydown.prevent.arrow-up="activatePreviousTab"
-                @keydown.prevent.arrow-down="activateNextTab"
-                @keydown.prevent.home="activateFirstTab"
-                @keydown.prevent.end="activateLastTab"
-                @mousewheel.prevent="scrollTabs"
-                @scroll="updateScrollHints"
-            >
-                <button v-for="tab in mainTabs"
-                    class="tab-button"
-                    ref="tab"
-                    :key="tab.handle"
-                    :class="{
-                        'active': isActive(tab.handle),
-                        'has-error': tabHasError(tab.handle),
-                    }"
-                    role="tab"
-                    :id="tabId(tab.handle)"
-                    :aria-controls="tabPanelId(tab.handle)"
-                    :aria-selected="isActive(tab.handle)"
-                    :tabindex="isActive(tab.handle) ? 0 : -1"
-                    @click="setActive(tab.handle)"
-                    v-text="__(tab.display || `${tab.handle[0].toUpperCase()}${tab.handle.slice(1)}`)"
-                />
-            </div>
-            <div class="fade-left" v-if="canScrollLeft" />
-            <div class="fade-right" :class="{ 'mr-8': showHiddenTabsDropdown }" v-if="canScrollRight" />
-
-
-            <dropdown-list class="rtl:mr-2 ltr:ml-2" v-cloak v-if="showHiddenTabsDropdown">
-                <dropdown-item
-                    v-for="(tab, index) in mainTabs"
-                    v-show="shouldShowInDropdown(index)"
-                    :key="tab.handle"
-                    :text="__(tab.display || `${tab.handle[0].toUpperCase()}${tab.handle.slice(1)}`)"
-                    @click.prevent="setActive(tab.handle)"
-                />
-            </dropdown-list>
-        </div>
-
-        <!-- Main and Sidebar -->
-        <div class="publish-tab-outer">
-
-            <!-- Main -->
-            <div ref="publishTabWrapper" class="publish-tab-wrapper w-full min-w-0">
+        <div>
+            <!-- Tabs -->
+            <div v-if="showTabs" class="tabs-container flex items-center">
                 <div
-                    class="publish-tab tab-panel w-full"
-                    :class="showTabs"
-                    :role="showTabs && 'tabpanel'"
-                    :id="showTabs && tabPanelId(tab.handle)"
-                    :aria-labelledby="showTabs && tabId(tab.handle)"
-                    :data-tab-handle="tab.handle"
-                    tabindex="0"
-                    :key="tab.handle"
-                    v-for="tab in mainTabs"
-                    v-show="isActive(tab.handle)"
+                    class="publish-tabs tabs"
+                    :class="{ 'tabs-scrolled': canScrollLeft }"
+                    ref="tabs"
+                    role="tablist"
+                    :aria-label="__('Edit Content')"
+                    @keydown.prevent.arrow-left="activatePreviousTab"
+                    @keydown.prevent.arrow-right="activateNextTab"
+                    @keydown.prevent.arrow-up="activatePreviousTab"
+                    @keydown.prevent.arrow-down="activateNextTab"
+                    @keydown.prevent.home="activateFirstTab"
+                    @keydown.prevent.end="activateLastTab"
+                    @mousewheel.prevent="scrollTabs"
+                    @scroll="updateScrollHints"
                 >
-                    <publish-sections
-                        :sections="tab.sections"
-                        :read-only="readOnly"
-                        :syncable="syncable"
-                        @updated="(handle, value) => $emit('updated', handle, value)"
-                        @meta-updated="(handle, value) => $emit('meta-updated', handle, value)"
-                        @synced="$emit('synced', $event)"
-                        @desynced="$emit('desynced', $event)"
-                        @focus="$emit('focus', $event)"
-                        @blur="$emit('blur', $event)"
+                    <button
+                        v-for="tab in mainTabs"
+                        class="tab-button"
+                        ref="tab"
+                        :key="tab.handle"
+                        :class="{
+                            active: isActive(tab.handle),
+                            'has-error': tabHasError(tab.handle),
+                        }"
+                        role="tab"
+                        :id="tabId(tab.handle)"
+                        :aria-controls="tabPanelId(tab.handle)"
+                        :aria-selected="isActive(tab.handle)"
+                        :tabindex="isActive(tab.handle) ? 0 : -1"
+                        @click="setActive(tab.handle)"
+                        v-text="__(tab.display || `${tab.handle[0].toUpperCase()}${tab.handle.slice(1)}`)"
                     />
                 </div>
+                <div class="fade-left" v-if="canScrollLeft" />
+                <div class="fade-right" :class="{ 'mr-8': showHiddenTabsDropdown }" v-if="canScrollRight" />
+
+                <dropdown-list class="ltr:ml-2 rtl:mr-2" v-cloak v-if="showHiddenTabsDropdown">
+                    <dropdown-item
+                        v-for="(tab, index) in mainTabs"
+                        v-show="shouldShowInDropdown(index)"
+                        :key="tab.handle"
+                        :text="__(tab.display || `${tab.handle[0].toUpperCase()}${tab.handle.slice(1)}`)"
+                        @click.prevent="setActive(tab.handle)"
+                    />
+                </dropdown-list>
             </div>
 
-            <!-- Sidebar(ish) -->
-            <div :class="{ 'publish-sidebar': shouldShowSidebar }">
-                <div class="publish-tab">
-                    <div class="publish-tab-actions" :class="{ 'as-sidebar': shouldShowSidebar }">
-                        <v-portal :to="actionsPortal" :disabled="shouldShowSidebar">
-                            <slot name="actions" :should-show-sidebar="shouldShowSidebar" />
-                        </v-portal>
+            <!-- Main and Sidebar -->
+            <div class="publish-tab-outer">
+                <!-- Main -->
+                <div ref="publishTabWrapper" class="publish-tab-wrapper w-full min-w-0">
+                    <div
+                        class="publish-tab tab-panel w-full"
+                        :class="showTabs"
+                        :role="showTabs && 'tabpanel'"
+                        :id="showTabs && tabPanelId(tab.handle)"
+                        :aria-labelledby="showTabs && tabId(tab.handle)"
+                        :data-tab-handle="tab.handle"
+                        tabindex="0"
+                        :key="tab.handle"
+                        v-for="tab in mainTabs"
+                        v-show="isActive(tab.handle)"
+                    >
+                        <publish-sections
+                            :sections="tab.sections"
+                            :read-only="readOnly"
+                            :syncable="syncable"
+                            @updated="(handle, value) => $emit('updated', handle, value)"
+                            @meta-updated="(handle, value) => $emit('meta-updated', handle, value)"
+                            @synced="$emit('synced', $event)"
+                            @desynced="$emit('desynced', $event)"
+                            @focus="$emit('focus', $event)"
+                            @blur="$emit('blur', $event)"
+                        />
                     </div>
+                </div>
 
-                    <publish-sections
-                        v-if="layoutReady && shouldShowSidebar && sidebarTab"
-                        :sections="sidebarTab.sections"
-                        :read-only="readOnly"
-                        :syncable="syncable"
-                        @updated="(handle, value) => $emit('updated', handle, value)"
-                        @meta-updated="(handle, value) => $emit('meta-updated', handle, value)"
-                        @synced="$emit('synced', $event)"
-                        @desynced="$emit('desynced', $event)"
-                        @focus="$emit('focus', $event)"
-                        @blur="$emit('blur', $event)"
-                    />
+                <!-- Sidebar(ish) -->
+                <div :class="{ 'publish-sidebar': shouldShowSidebar }">
+                    <div class="publish-tab">
+                        <div class="publish-tab-actions" :class="{ 'as-sidebar': shouldShowSidebar }">
+                            <v-portal :to="actionsPortal" :disabled="shouldShowSidebar">
+                                <slot name="actions" :should-show-sidebar="shouldShowSidebar" />
+                            </v-portal>
+                        </div>
+
+                        <publish-sections
+                            v-if="layoutReady && shouldShowSidebar && sidebarTab"
+                            :sections="sidebarTab.sections"
+                            :read-only="readOnly"
+                            :syncable="syncable"
+                            @updated="(handle, value) => $emit('updated', handle, value)"
+                            @meta-updated="(handle, value) => $emit('meta-updated', handle, value)"
+                            @synced="$emit('synced', $event)"
+                            @desynced="$emit('desynced', $event)"
+                            @focus="$emit('focus', $event)"
+                            @blur="$emit('blur', $event)"
+                        />
+                    </div>
                 </div>
             </div>
-        </div>
 
-        <div class="publish-tab publish-tab-actions-footer">
-            <portal-target :name="actionsPortal" />
+            <div class="publish-tab publish-tab-actions-footer">
+                <portal-target :name="actionsPortal" />
+            </div>
         </div>
-
-    </div>
     </element-container>
-
 </template>
 
 <script>
@@ -122,7 +117,6 @@ import { uniq } from 'underscore';
 import { ValidatesFieldConditions } from '../field-conditions/FieldConditions.js';
 
 export default {
-
     inject: ['storeName'],
 
     mixins: [ValidatesFieldConditions],
@@ -132,8 +126,8 @@ export default {
         syncable: Boolean,
         enableSidebar: {
             type: Boolean,
-            default: true
-        }
+            default: true,
+        },
     },
 
     data() {
@@ -147,17 +141,16 @@ export default {
             tabsAreScrolled: false,
             canScrollLeft: false,
             canScrollRight: false,
-        }
+        };
     },
 
     computed: {
-
         state() {
             return this.$store.state.publish[this.storeName];
         },
 
         tabs() {
-            return this.state.blueprint.tabs.filter(tab => this.tabHasVisibleFields(tab));
+            return this.state.blueprint.tabs.filter((tab) => this.tabHasVisibleFields(tab));
         },
 
         inStack() {
@@ -165,13 +158,13 @@ export default {
         },
 
         mainTabs() {
-            if (this.layoutReady && ! this.shouldShowSidebar) return this.tabs;
+            if (this.layoutReady && !this.shouldShowSidebar) return this.tabs;
 
-            return this.tabs.filter(tab => tab.handle !== 'sidebar');
+            return this.tabs.filter((tab) => tab.handle !== 'sidebar');
         },
 
         sidebarTab() {
-            return this.tabs.find(tab => tab.handle === 'sidebar');
+            return this.tabs.find((tab) => tab.handle === 'sidebar');
         },
 
         numberOfTabs() {
@@ -179,7 +172,7 @@ export default {
         },
 
         showTabs() {
-            return this.layoutReady && this.numberOfTabs > 1
+            return this.layoutReady && this.numberOfTabs > 1;
         },
 
         showHiddenTabsDropdown() {
@@ -192,18 +185,18 @@ export default {
 
         tabsWithErrors() {
             let fields = {};
-            Object.values(this.tabs).forEach(tab => {
-                tab.sections.forEach(section => {
-                    section.fields.forEach(field => {
+            Object.values(this.tabs).forEach((tab) => {
+                tab.sections.forEach((section) => {
+                    section.fields.forEach((field) => {
                         fields[field.handle] = tab.handle;
                     });
                 });
             });
 
             let tabs = Object.keys(this.errors)
-                .map(handle => handle.split('.')[0])
-                .filter(handle => fields[handle])
-                .map(handle => fields[handle]);
+                .map((handle) => handle.split('.')[0])
+                .filter((handle) => fields[handle])
+                .map((handle) => fields[handle]);
 
             return uniq(tabs);
         },
@@ -228,17 +221,14 @@ export default {
     },
 
     watch: {
-
         layoutReady(ready) {
             if (ready) {
                 this.$nextTick(() => this.setActiveTabFromHash());
             }
-        }
-
+        },
     },
 
     methods: {
-
         tabHasError(handle) {
             return this.tabsWithErrors.includes(handle);
         },
@@ -246,8 +236,8 @@ export default {
         tabHasVisibleFields(tab) {
             let visibleFields = 0;
 
-            tab.sections.forEach(section => {
-                section.fields.forEach(field => {
+            tab.sections.forEach((section) => {
+                section.fields.forEach((field) => {
                     if (this.showField(field)) visibleFields++;
                 });
             });
@@ -281,7 +271,7 @@ export default {
         },
 
         tabIndex(handle) {
-            return this.mainTabs.findIndex(tab => tab.handle === (handle || this.active));
+            return this.mainTabs.findIndex((tab) => tab.handle === (handle || this.active));
         },
 
         tabAt(index) {
@@ -337,7 +327,7 @@ export default {
         pascalCase(handle) {
             return handle
                 .split('_')
-                .map(word => word.slice(0, 1).toUpperCase() + word.slice(1))
+                .map((word) => word.slice(0, 1).toUpperCase() + word.slice(1))
                 .join('');
         },
 
@@ -371,25 +361,27 @@ export default {
 
             if (side === 'left') {
                 this.$refs.tabs.scrollLeft = tab.offsetLeft - offset;
-            }
-            else {
-                this.$refs.tabs.scrollLeft = tab.offsetLeft + tab.offsetWidth - this.$refs.tabs.clientWidth + offset + 8;
+            } else {
+                this.$refs.tabs.scrollLeft =
+                    tab.offsetLeft + tab.offsetWidth - this.$refs.tabs.clientWidth + offset + 8;
             }
 
             this.updateHiddenTabs();
         },
 
         updateScrollHints() {
-            this.canScrollLeft = this.$refs.tabs && (this.$refs.tabs.scrollLeft > 0);
-            this.canScrollRight = this.$refs.tabs && (this.$refs.tabs.scrollLeft < (this.$refs.tabs.scrollWidth - this.$refs.tabs.clientWidth));
+            this.canScrollLeft = this.$refs.tabs && this.$refs.tabs.scrollLeft > 0;
+            this.canScrollRight =
+                this.$refs.tabs &&
+                this.$refs.tabs.scrollLeft < this.$refs.tabs.scrollWidth - this.$refs.tabs.clientWidth;
         },
 
         containerWasResized($event) {
             const { width } = $event;
 
             // NOTE Using computed properties for these will cause a lot of unnecessary re-renders
-            this.layoutReady = (width !== null);
-            this.shouldShowSidebar = (this.enableSidebar && width > 920);
+            this.layoutReady = width !== null;
+            this.shouldShowSidebar = this.enableSidebar && width > 920;
 
             if (!this.layoutReady) return;
 
@@ -411,7 +403,7 @@ export default {
             });
 
             if (JSON.stringify(hidden) !== JSON.stringify(this.hiddenTabs)) {
-               this.hiddenTabs = hidden;
+                this.hiddenTabs = hidden;
             }
         },
 
@@ -419,11 +411,11 @@ export default {
             const viewportRect = this.$refs.tabs.getBoundingClientRect();
             const tabRect = tab.getBoundingClientRect();
 
-            if ((viewportRect.left - tabRect.left) > tolerance) {
+            if (viewportRect.left - tabRect.left > tolerance) {
                 return 'left';
             }
 
-            if ((tabRect.right - viewportRect.right) > tolerance) {
+            if (tabRect.right - viewportRect.right > tolerance) {
                 return 'right';
             }
 
@@ -432,8 +424,7 @@ export default {
 
         shouldShowInDropdown(index) {
             return this.hiddenTabs.includes(index);
-        }
-    }
-
-}
+        },
+    },
+};
 </script>
diff --git a/resources/js/components/publish/ValidationErrors.vue b/resources/js/components/publish/ValidationErrors.vue
index c576f003cd..6910812cd2 100644
--- a/resources/js/components/publish/ValidationErrors.vue
+++ b/resources/js/components/publish/ValidationErrors.vue
@@ -1,21 +1,15 @@
 <template>
-
     <validation-errors :errors="errors" />
-
 </template>
 
 <script>
 export default {
-
     inject: ['storeName'],
 
     computed: {
-
         errors() {
             return this.$store.state.publish[this.storeName].errors;
-        }
-
-    }
-
-}
+        },
+    },
+};
 </script>
diff --git a/resources/js/components/publish/Values.js b/resources/js/components/publish/Values.js
index 59dc2b9467..cd6c06b440 100644
--- a/resources/js/components/publish/Values.js
+++ b/resources/js/components/publish/Values.js
@@ -1,14 +1,14 @@
-import { clone } from  '../../bootstrap/globals.js'
-import { data_get } from  '../../bootstrap/globals.js'
-import { data_set } from  '../../bootstrap/globals.js'
-import isObject from 'underscore/modules/isObject.js'
+import { clone } from '../../bootstrap/globals.js';
+import { data_get } from '../../bootstrap/globals.js';
+import { data_set } from '../../bootstrap/globals.js';
+import isObject from 'underscore/modules/isObject.js';
 
 function data_delete(obj, path) {
     var parts = path.split('.');
     while (parts.length - 1) {
         var key = parts.shift();
         var shouldBeArray = parts.length ? new RegExp('^[0-9]+$').test(parts[0]) : false;
-        if (! (key in obj)) obj[key] = shouldBeArray ? [] : {};
+        if (!(key in obj)) obj[key] = shouldBeArray ? [] : {};
         obj = obj[key];
     }
     delete obj[parts[0]];
@@ -24,28 +24,22 @@ export default class Values {
     }
 
     get(dottedKey) {
-        let decodedValues = new this.constructor(clone(this.values), this.jsonFields)
-            .jsonDecode()
-            .values;
+        let decodedValues = new this.constructor(clone(this.values), this.jsonFields).jsonDecode().values;
 
         return data_get(decodedValues, dottedKey);
     }
 
-    set(dottedKey, value)  {
-        this.jsonDecode()
-            .setValue(dottedKey, value)
-            .jsonEncode();
+    set(dottedKey, value) {
+        this.jsonDecode().setValue(dottedKey, value).jsonEncode();
 
         return this;
     }
 
-    mergeDottedKeys(dottedKeys, values)  {
-        let decodedValues = new this.constructor(clone(values.values), values.jsonFields)
-            .jsonDecode()
-            .values;
+    mergeDottedKeys(dottedKeys, values) {
+        let decodedValues = new this.constructor(clone(values.values), values.jsonFields).jsonDecode().values;
 
         this.jsonDecode();
-        dottedKeys.forEach(dottedKey => {
+        dottedKeys.forEach((dottedKey) => {
             data_set(this.values, dottedKey, data_get(decodedValues, dottedKey));
         });
         this.jsonEncode();
@@ -54,10 +48,7 @@ export default class Values {
     }
 
     except(dottedKeys) {
-        return this.jsonDecode()
-            .rejectValuesByKey(dottedKeys)
-            .jsonEncode()
-            .all();
+        return this.jsonDecode().rejectValuesByKey(dottedKeys).jsonEncode().all();
     }
 
     all() {
@@ -65,7 +56,7 @@ export default class Values {
     }
 
     jsonDecode() {
-        this.jsonFields.forEach(dottedKey => {
+        this.jsonFields.forEach((dottedKey) => {
             this.jsonDecodeValue(dottedKey);
         });
 
@@ -73,16 +64,19 @@ export default class Values {
     }
 
     jsonEncode() {
-        clone(this.jsonFields).reverse().forEach(dottedKey => {
-            this.jsonEncodeValue(dottedKey);
-        });
+        clone(this.jsonFields)
+            .reverse()
+            .forEach((dottedKey) => {
+                this.jsonEncodeValue(dottedKey);
+            });
 
         return this;
     }
 
     dottedKeyToJsPath(dottedKey) {
-        return dottedKey.split('.')
-            .map(key => new RegExp(/^\d+.*/).test(key) ? '["' + key + '"]' : key)
+        return dottedKey
+            .split('.')
+            .map((key) => (new RegExp(/^\d+.*/).test(key) ? '["' + key + '"]' : key))
             .join('.')
             .replace(/\.\[/g, '[');
     }
@@ -125,7 +119,7 @@ export default class Values {
     }
 
     rejectValuesByKey(dottedKeys) {
-        dottedKeys.forEach(dottedKey => {
+        dottedKeys.forEach((dottedKey) => {
             this.forgetValue(dottedKey);
         });
 
diff --git a/resources/js/components/revision-history/History.vue b/resources/js/components/revision-history/History.vue
index fcfe2bb0a5..b0ab23a3e5 100644
--- a/resources/js/components/revision-history/History.vue
+++ b/resources/js/components/revision-history/History.vue
@@ -1,34 +1,37 @@
 <template>
-
-    <div class="bg-white dark:bg-dark-800 h-full flex flex-col">
-
-        <div class="bg-gray-200 dark:bg-dark-600 px-4 py-2 border-b border-gray-300 dark:border-dark-900 text-lg font-medium flex items-center justify-between">
+    <div class="flex h-full flex-col bg-white dark:bg-dark-800">
+        <div
+            class="flex items-center justify-between border-b border-gray-300 bg-gray-200 px-4 py-2 text-lg font-medium dark:border-dark-900 dark:bg-dark-600"
+        >
             {{ __('Revision History') }}
-            <button
-                type="button"
-                class="btn-close"
-                @click="close"
-                v-html="'&times'" />
+            <button type="button" class="btn-close" @click="close" v-html="'&times'" />
         </div>
 
         <div class="flex-1 overflow-auto">
-
-            <div class="flex h-full items-center justify-center loading" v-if="loading">
+            <div class="loading flex h-full items-center justify-center" v-if="loading">
                 <loading-graphic />
             </div>
 
-            <div v-if="!loading && revisions.length === 0" class="p-4 text-gray dark:text-dark-150 text-sm">
+            <div v-if="!loading && revisions.length === 0" class="p-4 text-sm text-gray dark:text-dark-150">
                 {{ __('No revisions') }}
             </div>
 
-            <div
-                v-for="group in revisions"
-                :key="group.day"
-            >
-                <h6 class="revision-date" v-text="
-                    $moment.unix(group.day).isBefore($moment().startOf('day'))
-                        ? $moment.unix(group.day).toDate().toLocaleDateString($config.get('locale').replace('_', '-'), { month: 'long', day: 'numeric', year: 'numeric' })
-                        : __('Today')" />
+            <div v-for="group in revisions" :key="group.day">
+                <h6
+                    class="revision-date"
+                    v-text="
+                        $moment.unix(group.day).isBefore($moment().startOf('day'))
+                            ? $moment
+                                  .unix(group.day)
+                                  .toDate()
+                                  .toLocaleDateString($config.get('locale').replace('_', '-'), {
+                                      month: 'long',
+                                      day: 'numeric',
+                                      year: 'numeric',
+                                  })
+                            : __('Today')
+                    "
+                />
                 <div class="revision-list">
                     <revision
                         v-for="revision in group.revisions"
@@ -41,18 +44,14 @@
                     />
                 </div>
             </div>
-
         </div>
-
     </div>
-
 </template>
 
 <script>
 import Revision from './Revision.vue';
 
 export default {
-
     components: {
         Revision,
     },
@@ -69,15 +68,15 @@ export default {
             revisions: [],
             loading: true,
             escBinding: null,
-        }
+        };
     },
 
     mounted() {
-        this.$axios.get(this.indexUrl).then(response => {
+        this.$axios.get(this.indexUrl).then((response) => {
             this.loading = false;
             this.revisions = response.data.reverse();
         });
-        this.escBinding = this.$keys.bindGlobal(['esc'], e => {
+        this.escBinding = this.$keys.bindGlobal(['esc'], (e) => {
             this.close();
         });
     },
@@ -87,12 +86,9 @@ export default {
     },
 
     methods: {
-
         close() {
             this.$emit('closed');
-        }
-
-    }
-
-}
+        },
+    },
+};
 </script>
diff --git a/resources/js/components/revision-history/Preview.vue b/resources/js/components/revision-history/Preview.vue
index 2999005819..dd7af96a4e 100644
--- a/resources/js/components/revision-history/Preview.vue
+++ b/resources/js/components/revision-history/Preview.vue
@@ -2,11 +2,10 @@
 import InlinePublishForm from '../inputs/relationship/InlinePublishForm.vue';
 
 export default {
-
     mixins: [InlinePublishForm],
 
     props: {
-        revision: Object
+        revision: Object,
     },
 
     data() {
@@ -16,22 +15,19 @@ export default {
             method: 'patch',
             action: 'update',
             itemUrl: this.revision.attributes.item_url,
-        }
+        };
     },
 
     computed: {
         title() {
             return this.revision.attributes.data?.title ?? '';
-        }
+        },
     },
 
     methods: {
-
         saved(response) {
             //
-        }
-
-    }
-
-}
+        },
+    },
+};
 </script>
diff --git a/resources/js/components/revision-history/Restore.vue b/resources/js/components/revision-history/Restore.vue
index ce8fdc5b7e..2683d0509a 100644
--- a/resources/js/components/revision-history/Restore.vue
+++ b/resources/js/components/revision-history/Restore.vue
@@ -1,5 +1,4 @@
 <template>
-
     <div>
         <button class="btn" @click="confirming = true" v-text="__('Restore')" />
 
@@ -14,12 +13,10 @@
             <p class="mb-6" v-text="__('Your working copy will be replaced by the contents of this revision.')" />
         </confirmation-modal>
     </div>
-
 </template>
 
 <script>
 export default {
-
     props: {
         revision: Object,
         url: String,
@@ -29,27 +26,22 @@ export default {
     data() {
         return {
             confirming: false,
-        }
+        };
     },
 
     methods: {
-
         restore() {
             const payload = {
                 revision: this.revision.date,
             };
 
-            this.$axios.post(this.url, payload).then(response => {
-                Statamic.$hooks
-                    .run('revision.restored', { reference: this.reference })
-                    .then(() => {
-                        this.$dirty.disableWarning();
-                        window.location.reload();
-                    });
-            })
-        }
-
-    }
-
-}
+            this.$axios.post(this.url, payload).then((response) => {
+                Statamic.$hooks.run('revision.restored', { reference: this.reference }).then(() => {
+                    this.$dirty.disableWarning();
+                    window.location.reload();
+                });
+            });
+        },
+    },
+};
 </script>
diff --git a/resources/js/components/revision-history/Revision.vue b/resources/js/components/revision-history/Revision.vue
index 6905e40dac..ccb525a64e 100644
--- a/resources/js/components/revision-history/Revision.vue
+++ b/resources/js/components/revision-history/Revision.vue
@@ -1,22 +1,31 @@
 <template>
-
-    <div class="revision-item"
+    <div
+        class="revision-item"
         :class="{
             'status-working-copy': revision.working,
-            'status-published': revision.attributes.published
+            'status-published': revision.attributes.published,
         }"
         @click="open"
     >
         <div v-if="revision.message" class="revision-item-note truncate" v-text="revision.message" />
 
         <div class="flex items-center">
-            <avatar v-if="revision.user" :user="revision.user" class="shrink-0 rtl:ml-2 ltr:mr-2 w-6" />
+            <avatar v-if="revision.user" :user="revision.user" class="w-6 shrink-0 ltr:mr-2 rtl:ml-2" />
 
-            <div class="revision-item-content w-full flex">
+            <div class="revision-item-content flex w-full">
                 <div class="flex-1">
-                    <div class="revision-author text-gray-700 dark:text-dark-150 text-2xs">
-                        <template v-if="revision.user">{{ revision.user.name || revision.user.email }} &ndash;</template>
-                        {{ date.toDate().toLocaleTimeString($config.get('locale').replace('_', '-'), { hour: 'numeric', minute: '2-digit' }) }}
+                    <div class="revision-author text-2xs text-gray-700 dark:text-dark-150">
+                        <template v-if="revision.user"
+                            >{{ revision.user.name || revision.user.email }} &ndash;</template
+                        >
+                        {{
+                            date
+                                .toDate()
+                                .toLocaleTimeString($config.get('locale').replace('_', '-'), {
+                                    hour: 'numeric',
+                                    minute: '2-digit',
+                                })
+                        }}
                     </div>
                 </div>
 
@@ -37,13 +46,13 @@
                             :revision="revision"
                             :url="restoreUrl"
                             :reference="reference"
-                            class="rtl:mr-4 ltr:ml-4" />
+                            class="ltr:ml-4 rtl:mr-4"
+                        />
                     </template>
                 </revision-preview>
             </div>
         </div>
     </div>
-
 </template>
 
 <script>
@@ -51,7 +60,6 @@ import RestoreRevision from './Restore.vue';
 import RevisionPreview from './Preview.vue';
 
 export default {
-
     components: {
         RevisionPreview,
         RestoreRevision,
@@ -87,20 +95,17 @@ export default {
                 initialIsWorkingCopy: 'hasWorkingCopy',
                 initialIsRoot: 'isRoot',
                 initialReadOnly: 'readOnly',
-            }
-        }
+            },
+        };
     },
 
     computed: {
-
         date() {
             return moment.unix(this.revision.date);
-        }
-
+        },
     },
 
     methods: {
-
         open() {
             if (this.revision.working) {
                 this.$emit('working-copy-selected');
@@ -108,9 +113,7 @@ export default {
             }
 
             this.showDetails = true;
-        }
-
-    }
-
-}
+        },
+    },
+};
 </script>
diff --git a/resources/js/components/roles/Listing.vue b/resources/js/components/roles/Listing.vue
index 0e2c1b78a1..3004ac9488 100644
--- a/resources/js/components/roles/Listing.vue
+++ b/resources/js/components/roles/Listing.vue
@@ -1,5 +1,5 @@
 <template>
-    <data-list :rows="rows" :columns="columns" v-slot="{ }">
+    <data-list :rows="rows" :columns="columns" v-slot="{}">
         <div class="card p-0">
             <data-list-table>
                 <template #cell-title="{ row: role, index }">
@@ -16,10 +16,7 @@
                             class="warning"
                             @click="$refs[`deleter_${role.id}`].confirm()"
                         >
-                            <resource-deleter
-                                :ref="`deleter_${role.id}`"
-                                :resource="role"
-                                @deleted="removeRow(role)">
+                            <resource-deleter :ref="`deleter_${role.id}`" :resource="role" @deleted="removeRow(role)">
                             </resource-deleter>
                         </dropdown-item>
                     </dropdown-list>
@@ -30,23 +27,18 @@
 </template>
 
 <script>
-import Listing from '../Listing.vue'
+import Listing from '../Listing.vue';
 
 export default {
-
     mixins: [Listing],
 
-    props: [
-        'initialRows',
-        'initialColumns',
-    ],
+    props: ['initialRows', 'initialColumns'],
 
     data() {
         return {
             rows: this.initialRows,
-            columns: this.initialColumns
-        }
-    }
-
-}
+            columns: this.initialColumns,
+        };
+    },
+};
 </script>
diff --git a/resources/js/components/roles/PermissionTree.vue b/resources/js/components/roles/PermissionTree.vue
index 5a95b3ecb6..f3a87a279b 100644
--- a/resources/js/components/roles/PermissionTree.vue
+++ b/resources/js/components/roles/PermissionTree.vue
@@ -1,55 +1,56 @@
 <template>
-
     <div>
         <div v-for="permission in permissions" :key="permission.value">
             <label
-                class="flex items-center justify-between py-2 rtl:pl-4 ltr:pr-4 border-b dark:border-dark-900 group hover:bg-gray-100 dark:hover:bg-dark-700"
-                :style="direction === 'ltr' ? { paddingLeft: `${16*depth}px` } : { paddingRight: `${16*depth}px` }"
+                class="group flex items-center justify-between border-b py-2 hover:bg-gray-100 dark:border-dark-900 dark:hover:bg-dark-700 ltr:pr-4 rtl:pl-4"
+                :style="direction === 'ltr' ? { paddingLeft: `${16 * depth}px` } : { paddingRight: `${16 * depth}px` }"
             >
                 <div class="flex">
                     <div class="leading-normal">
-                        <input type="checkbox"
+                        <input
+                            type="checkbox"
                             v-model="permission.checked"
                             :value="permission.value"
                             name="permissions[]"
                         />
                     </div>
-                    <div class="rtl:pr-2 ltr:pl-2">
+                    <div class="ltr:pl-2 rtl:pr-2">
                         {{ permission.label }}
                     </div>
                 </div>
-                <div class="text-gray-700 dark:text-dark-175 text-xs opacity-0 group-hover:opacity-100" v-if="permission.description" v-text="permission.description" />
+                <div
+                    class="text-xs text-gray-700 opacity-0 group-hover:opacity-100 dark:text-dark-175"
+                    v-if="permission.description"
+                    v-text="permission.description"
+                />
             </label>
 
             <role-permission-tree
                 v-if="permission.children.length"
-                :depth="depth+1"
+                :depth="depth + 1"
                 :initial-permissions="permission.children"
             />
         </div>
     </div>
-
 </template>
 
 <script>
 export default {
-
     props: {
         initialPermissions: Array,
-        depth: Number
+        depth: Number,
     },
 
     data() {
         return {
-            permissions: this.initialPermissions
-        }
+            permissions: this.initialPermissions,
+        };
     },
 
     computed: {
         direction() {
             return this.$config.get('direction', 'ltr');
-        }
-    }
-
-}
+        },
+    },
+};
 </script>
diff --git a/resources/js/components/roles/PublishForm.vue b/resources/js/components/roles/PublishForm.vue
index d03b760509..699df40b48 100644
--- a/resources/js/components/roles/PublishForm.vue
+++ b/resources/js/components/roles/PublishForm.vue
@@ -1,72 +1,67 @@
 <template>
-
-        <div>
-            <header class="mb-6">
-                <breadcrumb :url="breadcrumbUrl" :title="__('Roles & Permissions')" />
-                <div class="flex items-center justify-between">
-                    <h1 v-text="__(initialTitle) || __('Create Role')" />
-                    <button type="submit" class="btn-primary" @click="save">{{ __('Save') }}</button>
-                </div>
-            </header>
-
-            <div class="card p-0 mb-6 configure-tab publish-fields @container">
-
-                <form-group
-                    handle="title"
-                    class="border-b dark:border-dark-900"
-                    :display="__('Title')"
-                    :errors="errors.title"
-                    :instructions="__('messages.role_title_instructions')"
-                    v-model="title"
-                    :focus="true"
-                />
-
-                <form-group
-                    class="border-b dark:border-dark-900"
-                    fieldtype="slug"
-                    handle="handle"
-                    :display="__('Handle')"
-                    :instructions="__('messages.role_handle_instructions')"
-                    :errors="errors.title"
-                    v-model="handle"
-                />
-
-                <div class="text-xs text-red-500 p-6 pt-0" v-if="initialHandle && handle != initialHandle">
-                    {{ __('messages.role_change_handle_warning') }}
-                </div>
-
-                <form-group
-                    v-if="canAssignSuper"
-                    class="toggle-fieldtype"
-                    fieldtype="toggle"
-                    handle="super"
-                    :display="__('permissions.super')"
-                    :instructions="__('permissions.super_desc')"
-                    v-model="isSuper"
-                />
-
+    <div>
+        <header class="mb-6">
+            <breadcrumb :url="breadcrumbUrl" :title="__('Roles & Permissions')" />
+            <div class="flex items-center justify-between">
+                <h1 v-text="__(initialTitle) || __('Create Role')" />
+                <button type="submit" class="btn-primary" @click="save">{{ __('Save') }}</button>
+            </div>
+        </header>
+
+        <div class="card configure-tab publish-fields mb-6 p-0 @container">
+            <form-group
+                handle="title"
+                class="border-b dark:border-dark-900"
+                :display="__('Title')"
+                :errors="errors.title"
+                :instructions="__('messages.role_title_instructions')"
+                v-model="title"
+                :focus="true"
+            />
+
+            <form-group
+                class="border-b dark:border-dark-900"
+                fieldtype="slug"
+                handle="handle"
+                :display="__('Handle')"
+                :instructions="__('messages.role_handle_instructions')"
+                :errors="errors.title"
+                v-model="handle"
+            />
+
+            <div class="p-6 pt-0 text-xs text-red-500" v-if="initialHandle && handle != initialHandle">
+                {{ __('messages.role_change_handle_warning') }}
             </div>
 
-            <div v-if="!isSuper">
-                <div class="mt-6 content" v-for="group in permissions" :key="group.handle">
-                    <h2 class="mt-10 text-base mb-2">{{ group.label }}</h2>
-                    <role-permission-tree class="card p-0" :depth="1" :initial-permissions="group.permissions" />
-                </div>
+            <form-group
+                v-if="canAssignSuper"
+                class="toggle-fieldtype"
+                fieldtype="toggle"
+                handle="super"
+                :display="__('permissions.super')"
+                :instructions="__('permissions.super_desc')"
+                v-model="isSuper"
+            />
+        </div>
+
+        <div v-if="!isSuper">
+            <div class="content mt-6" v-for="group in permissions" :key="group.handle">
+                <h2 class="mb-2 mt-10 text-base">{{ group.label }}</h2>
+                <role-permission-tree class="card p-0" :depth="1" :initial-permissions="group.permissions" />
             </div>
         </div>
+    </div>
 </template>
 
-
 <script>
 const checked = function (permissions) {
     return permissions.reduce((carry, permission) => {
-        if (! permission.checked) return carry;
+        if (!permission.checked) return carry;
         return [...carry, permission.value, ...checked(permission.children)];
     }, []);
 };
 
 export default {
-
     props: {
         initialTitle: String,
         initialHandle: String,
@@ -76,7 +71,7 @@ export default {
         action: String,
         method: String,
         breadcrumbUrl: String,
-        indexUrl: String
+        indexUrl: String,
     },
 
     data() {
@@ -86,18 +81,17 @@ export default {
             title: this.initialTitle,
             handle: this.initialHandle,
             permissions: this.initialPermissions,
-            isSuper: this.initialSuper
-        }
+            isSuper: this.initialSuper,
+        };
     },
 
     watch: {
-        'title': function(display) {
+        title: function (display) {
             this.handle = snake_case(display);
-        }
+        },
     },
 
     computed: {
-
         hasErrors() {
             return this.error || Object.keys(this.errors).length;
         },
@@ -107,20 +101,18 @@ export default {
                 title: this.title,
                 handle: this.handle,
                 super: this.isSuper,
-                permissions: this.checkedPermissions
-            }
+                permissions: this.checkedPermissions,
+            };
         },
 
         checkedPermissions() {
             return this.permissions.reduce((carry, group) => {
                 return [...carry, ...checked(group.permissions)];
             }, []);
-        }
-
+        },
     },
 
     methods: {
-
         clearErrors() {
             this.error = null;
             this.errors = {};
@@ -129,28 +121,28 @@ export default {
         save() {
             this.clearErrors();
 
-            this.$axios[this.method](this.action, this.payload).then(response => {
-                window.location = response.data.redirect;
-            }).catch(e => {
-                if (e.response && e.response.status === 422) {
-                    const { message, errors } = e.response.data;
-                    this.error = message;
-                    this.errors = errors;
-                    this.$toast.error(message);
-                } else {
-                    this.$toast.error(__('Unable to save role'));
-                }
-            });
-        }
-
+            this.$axios[this.method](this.action, this.payload)
+                .then((response) => {
+                    window.location = response.data.redirect;
+                })
+                .catch((e) => {
+                    if (e.response && e.response.status === 422) {
+                        const { message, errors } = e.response.data;
+                        this.error = message;
+                        this.errors = errors;
+                        this.$toast.error(message);
+                    } else {
+                        this.$toast.error(__('Unable to save role'));
+                    }
+                });
+        },
     },
 
     mounted() {
-        this.$keys.bindGlobal(['mod+s'], e => {
+        this.$keys.bindGlobal(['mod+s'], (e) => {
             e.preventDefault();
             this.save();
         });
-    }
-
-}
+    },
+};
 </script>
diff --git a/resources/js/components/sites/EditForm.vue b/resources/js/components/sites/EditForm.vue
index 4f0d5b6690..1ee7e5c7de 100644
--- a/resources/js/components/sites/EditForm.vue
+++ b/resources/js/components/sites/EditForm.vue
@@ -1,5 +1,4 @@
 <template>
-
     <publish-container
         v-if="blueprint"
         ref="container"
@@ -19,23 +18,18 @@
                     <button type="submit" class="btn-primary" @click="submit">{{ __('Save') }}</button>
                 </div>
             </header>
-            <publish-tabs
-                @updated="setFieldValue"
-                @meta-updated="setFieldMeta"
-                :enable-sidebar="false"/>
+            <publish-tabs @updated="setFieldValue" @meta-updated="setFieldMeta" :enable-sidebar="false" />
         </div>
     </publish-container>
-
 </template>
 
 <script>
 export default {
-
     props: {
         blueprint: Object,
         initialValues: Object,
         meta: Object,
-        url: String
+        url: String,
     },
 
     data() {
@@ -43,30 +37,28 @@ export default {
             values: this.initialValues,
             error: null,
             errors: {},
-        }
+        };
     },
 
     computed: {
         pageTitle() {
-            return this.$config.get('multisiteEnabled')
-                ? __('Configure Sites')
-                : __('Configure Site');
+            return this.$config.get('multisiteEnabled') ? __('Configure Sites') : __('Configure Site');
         },
 
         initialSiteHandles() {
             return this.$config.get('multisiteEnabled')
-                ? this.initialValues.sites.map(site => site.handle)
+                ? this.initialValues.sites.map((site) => site.handle)
                 : [this.initialValues.handle];
         },
 
         currentSiteHandles() {
             return this.$config.get('multisiteEnabled')
-                ? this.values.sites.map(site => site.handle)
+                ? this.values.sites.map((site) => site.handle)
                 : [this.values.handle];
         },
 
         initialHandleChanged() {
-            return this.initialSiteHandles.filter(handle => ! this.currentSiteHandles.includes(handle)).length > 0;
+            return this.initialSiteHandles.filter((handle) => !this.currentSiteHandles.includes(handle)).length > 0;
         },
 
         initialHandleChangedWarning() {
@@ -75,25 +67,27 @@ export default {
     },
 
     methods: {
-
         clearErrors() {
             this.error = null;
             this.errors = {};
         },
 
         submit() {
-            if (this.initialHandleChanged && ! confirm(this.initialHandleChangedWarning)) {
+            if (this.initialHandleChanged && !confirm(this.initialHandleChangedWarning)) {
                 return;
             }
 
             this.saving = true;
             this.clearErrors();
 
-            this.$axios.patch(this.url, this.values).then(response => {
-                this.saving = false;
-                this.$toast.success(__('Saved'));
-                this.$refs.container.saved();
-            }).catch(e => this.handleAxiosError(e));
+            this.$axios
+                .patch(this.url, this.values)
+                .then((response) => {
+                    this.saving = false;
+                    this.$toast.success(__('Saved'));
+                    this.$refs.container.saved();
+                })
+                .catch((e) => this.handleAxiosError(e));
         },
 
         handleAxiosError(e) {
@@ -107,15 +101,13 @@ export default {
                 this.$toast.error(__('Something went wrong'));
             }
         },
-
     },
 
     created() {
-        this.$keys.bindGlobal(['mod+s'], e => {
+        this.$keys.bindGlobal(['mod+s'], (e) => {
             e.preventDefault();
             this.submit();
         });
     },
-
-}
+};
 </script>
diff --git a/resources/js/components/slugs/Manager.js b/resources/js/components/slugs/Manager.js
index 2de9865a90..bbc794f357 100644
--- a/resources/js/components/slugs/Manager.js
+++ b/resources/js/components/slugs/Manager.js
@@ -2,9 +2,8 @@ import Slug from './Slug';
 import { markRaw } from 'vue';
 
 class Manager {
-
     make() {
-        return markRaw(new Slug);
+        return markRaw(new Slug());
     }
 
     create(string) {
@@ -22,7 +21,6 @@ class Manager {
     async() {
         return this.make().async();
     }
-
 }
 
 export default Manager;
diff --git a/resources/js/components/slugs/Slug.js b/resources/js/components/slugs/Slug.js
index b40167e5a4..a7cef1c589 100644
--- a/resources/js/components/slugs/Slug.js
+++ b/resources/js/components/slugs/Slug.js
@@ -29,7 +29,7 @@ export default class Slug {
     #setInitialLanguage() {
         const selectedSite = Statamic.$config.get('selectedSite');
         const sites = Statamic.$config.get('sites');
-        const site = sites.find(site => site.handle === selectedSite);
+        const site = sites.find((site) => site.handle === selectedSite);
         this.#language = site?.lang ?? Statamic.$config.get('lang');
     }
 
@@ -38,9 +38,9 @@ export default class Slug {
 
         this.#debounced = _.debounce(function (resolve, reject) {
             return this.#performRequest()
-                .then(slug => resolve(slug))
-                .catch(e => reject(e));
-        }, 300)
+                .then((slug) => resolve(slug))
+                .catch((e) => reject(e));
+        }, 300);
 
         return this;
     }
@@ -48,9 +48,7 @@ export default class Slug {
     create(string) {
         this.#string = (string + '').trim();
 
-        return this.#async
-            ? this.#createAsynchronously()
-            : this.#createSynchronously();
+        return this.#async ? this.#createAsynchronously() : this.#createSynchronously();
     }
 
     #createSynchronously() {
@@ -58,14 +56,12 @@ export default class Slug {
         const charmap = Statamic.$config.get('charmap');
 
         let custom = charmap[this.#language] ?? {};
-        custom["'"] = ""; // Remove apostrophes in all languages
-        custom["’"] = ""; // Remove smart single quotes
-        custom[" - "] = " "; // Prevent `Block - Hero` turning into `block_-_hero`
+        custom["'"] = ''; // Remove apostrophes in all languages
+        custom['’'] = ''; // Remove smart single quotes
+        custom[' - '] = ' '; // Prevent `Block - Hero` turning into `block_-_hero`
         custom['('] = ''; // Remove parentheses
         custom[')'] = ''; // Remove parentheses
-        custom = symbols
-            ? this.#replaceCurrencySymbols(custom, charmap)
-            : this.#removeCurrencySymbols(custom, charmap);
+        custom = symbols ? this.#replaceCurrencySymbols(custom, charmap) : this.#removeCurrencySymbols(custom, charmap);
 
         if (this.#separator !== '-') custom['-'] = this.#separator; // Replace dashes with custom separator
 
@@ -73,7 +69,7 @@ export default class Slug {
             separator: this.#separator,
             lang: this.#language,
             custom,
-            symbols
+            symbols,
         });
     }
 
@@ -90,7 +86,7 @@ export default class Slug {
     }
 
     #createAsynchronously() {
-        if (! this.#string) {
+        if (!this.#string) {
             this.#controller?.abort();
             this.#debounced.cancel();
             this.busy = false;
@@ -106,16 +102,17 @@ export default class Slug {
         const payload = {
             string: this.#string,
             separator: this.#separator,
-            language: this.#language
+            language: this.#language,
         };
 
         if (this.#controller) this.#controller.abort();
-        this.#controller = new AbortController;
+        this.#controller = new AbortController();
 
         let aborted = false;
-        return axios.post(cp_url('slug'), payload, { signal: this.#controller.signal })
-            .then(response => response.data)
-            .catch(e => {
+        return axios
+            .post(cp_url('slug'), payload, { signal: this.#controller.signal })
+            .then((response) => response.data)
+            .catch((e) => {
                 if (axios.isCancel(e)) {
                     aborted = true;
                     return;
@@ -123,7 +120,7 @@ export default class Slug {
                 throw e;
             })
             .finally(() => {
-                if (!aborted) this.busy = false
+                if (!aborted) this.busy = false;
             });
     }
 }
diff --git a/resources/js/components/slugs/Slugify.vue b/resources/js/components/slugs/Slugify.vue
index a6e089b99f..d03d3f2f16 100644
--- a/resources/js/components/slugs/Slugify.vue
+++ b/resources/js/components/slugs/Slugify.vue
@@ -8,16 +8,16 @@ export default {
         language: String,
         separator: {
             type: String,
-            default: '-'
+            default: '-',
         },
         enabled: {
             type: Boolean,
-            default: true
+            default: true,
         },
         async: {
             type: Boolean,
-            default: true
-        }
+            default: true,
+        },
     },
 
     data() {
@@ -27,12 +27,11 @@ export default {
         return {
             slugifier,
             slug: null,
-            shouldSlugify: this.enabled && !this.to
-        }
+            shouldSlugify: this.enabled && !this.to,
+        };
     },
 
     watch: {
-
         from: {
             immediate: true,
             handler() {
@@ -43,7 +42,7 @@ export default {
                 } else {
                     this.slugify();
                 }
-            }
+            },
         },
 
         to(to) {
@@ -52,8 +51,7 @@ export default {
 
         slug(slug) {
             this.$emit('slugified', slug);
-        }
-
+        },
     },
 
     render() {
@@ -61,9 +59,8 @@ export default {
     },
 
     methods: {
-
         reset() {
-            if (! this.enabled) return Promise.resolve();
+            if (!this.enabled) return Promise.resolve();
 
             // If the slug doesn't change, we'll emit the event manually.
             // The watcher will only emit the event if the slug changes.
@@ -73,11 +70,10 @@ export default {
                 this.shouldSlugify = true;
                 if (this.slug === initialSlug) this.$emit('slugified', this.slug);
             });
-
         },
 
         slugify() {
-            if (! this.async) {
+            if (!this.async) {
                 return new Promise((resolve, reject) => {
                     const slug = this.slugifier.create(this.from);
                     this.slug = slug;
@@ -87,14 +83,15 @@ export default {
 
             return new Promise((resolve, reject) => {
                 this.$emit('slugifying');
-                this.slugifier.create(this.from).then(slug => {
-                    this.slug = slug;
-                    resolve(slug);
-                }).catch(error => reject(error));
+                this.slugifier
+                    .create(this.from)
+                    .then((slug) => {
+                        this.slug = slug;
+                        resolve(slug);
+                    })
+                    .catch((error) => reject(error));
             });
-        }
-
-    }
-
-}
+        },
+    },
+};
 </script>
diff --git a/resources/js/components/sortable/SortableHandle.vue b/resources/js/components/sortable/SortableHandle.vue
index 19422eb0e5..9ae6a34d83 100644
--- a/resources/js/components/sortable/SortableHandle.vue
+++ b/resources/js/components/sortable/SortableHandle.vue
@@ -1,15 +1,13 @@
 <script>
 export default {
-
     render() {
-        return this.$slots.default[0]
+        return this.$slots.default[0];
     },
 
     inject: ['handleClass'],
 
     mounted() {
-        this.$el.classList.add(this.handleClass)
-    }
-
-}
+        this.$el.classList.add(this.handleClass);
+    },
+};
 </script>
diff --git a/resources/js/components/sortable/SortableHelpers.js b/resources/js/components/sortable/SortableHelpers.js
index 1c1f7e04d6..c9739043ac 100644
--- a/resources/js/components/sortable/SortableHelpers.js
+++ b/resources/js/components/sortable/SortableHelpers.js
@@ -2,7 +2,7 @@ import SortableKeyValue from './SortableKeyValue.js';
 
 export default {
     methods: {
-        newSortableValue(value=null, key=null) {
+        newSortableValue(value = null, key = null) {
             return new SortableKeyValue(key, value);
         },
 
@@ -11,13 +11,13 @@ export default {
         },
 
         arrayToSortable(arr) {
-            return _.map(clone(arr), value => new SortableKeyValue(null, value));
+            return _.map(clone(arr), (value) => new SortableKeyValue(null, value));
         },
 
         sortableToObject(sortable) {
             let obj = {};
 
-            _.each(sortable, sortableKeyValue => obj[sortableKeyValue.key] = sortableKeyValue.value);
+            _.each(sortable, (sortableKeyValue) => (obj[sortableKeyValue.key] = sortableKeyValue.value));
 
             return obj;
         },
@@ -25,9 +25,9 @@ export default {
         sortableToArray(sortable) {
             let arr = [];
 
-            _.each(sortable, sortableKeyValue => arr.push(sortableKeyValue.value));
+            _.each(sortable, (sortableKeyValue) => arr.push(sortableKeyValue.value));
 
             return arr;
-        }
-    }
-}
+        },
+    },
+};
diff --git a/resources/js/components/sortable/SortableItem.vue b/resources/js/components/sortable/SortableItem.vue
index cb612d0be5..8fb2bea06f 100644
--- a/resources/js/components/sortable/SortableItem.vue
+++ b/resources/js/components/sortable/SortableItem.vue
@@ -1,15 +1,13 @@
 <script>
 export default {
-
     render() {
-        return this.$slots.default[0]
+        return this.$slots.default[0];
     },
 
     inject: ['itemClass'],
 
     mounted() {
-        this.$el.classList.add(this.itemClass)
-    }
-
-}
+        this.$el.classList.add(this.itemClass);
+    },
+};
 </script>
diff --git a/resources/js/components/sortable/SortableKeyValue.js b/resources/js/components/sortable/SortableKeyValue.js
index b5b3be2183..cc927bd614 100644
--- a/resources/js/components/sortable/SortableKeyValue.js
+++ b/resources/js/components/sortable/SortableKeyValue.js
@@ -1,7 +1,7 @@
 import uniqid from 'uniqid';
 
 export default class SortableKeyValue {
-    constructor(key=null, value=null) {
+    constructor(key = null, value = null) {
         this._id = uniqid();
         this.key = key;
         this.value = value;
diff --git a/resources/js/components/sortable/SortableList.vue b/resources/js/components/sortable/SortableList.vue
index 587a0a07ca..3c513146fa 100644
--- a/resources/js/components/sortable/SortableList.vue
+++ b/resources/js/components/sortable/SortableList.vue
@@ -1,17 +1,14 @@
 <script>
-import { Sortable, Plugins } from '@shopify/draggable'
+import { Sortable, Plugins } from '@shopify/draggable';
 
 function move(items, oldIndex, newIndex) {
-    const itemRemovedArray = [
-        ...items.slice(0, oldIndex),
-        ...items.slice(oldIndex + 1, items.length)
-    ]
+    const itemRemovedArray = [...items.slice(0, oldIndex), ...items.slice(oldIndex + 1, items.length)];
 
     return [
         ...itemRemovedArray.slice(0, newIndex),
         items[oldIndex],
-        ...itemRemovedArray.slice(newIndex, itemRemovedArray.length)
-    ]
+        ...itemRemovedArray.slice(newIndex, itemRemovedArray.length),
+    ];
 }
 
 export default {
@@ -29,80 +26,82 @@ export default {
         },
         mirror: {
             type: Boolean,
-            default: true
+            default: true,
         },
         appendTo: {
             default: null,
         },
         options: {
-            default: () => {}
+            default: () => {},
         },
         vertical: {
-            type: Boolean
+            type: Boolean,
         },
         constrainDimensions: {
-            type: Boolean
+            type: Boolean,
         },
         delay: {
             type: Number,
-            default: 0
+            default: 0,
         },
         distance: {
             type: Number,
-            default: 0
+            default: 0,
         },
         disabled: {
             type: Boolean,
-            default: false
+            default: false,
         },
         animate: {
             type: Boolean,
-            default: true
-        }
+            default: true,
+        },
     },
 
     data() {
         return {
             sortable: null,
-        }
+        };
     },
 
     computed: {
-
         computedOptions() {
             let plugins = [];
             if (this.animate) plugins.push(Plugins.SwapAnimation);
 
-            let options = Object.assign({}, {
-                draggable: `.${CSS.escape(this.itemClass)}`,
-                handle: `.${CSS.escape(this.handleClass)}`,
-                delay: this.delay,
-                distance: this.distance,
-                swapAnimation: { vertical: this.vertical, horizontal: !this.vertical },
-                plugins,
-                mirror: {
-                    constrainDimensions: this.constrainDimensions
+            let options = Object.assign(
+                {},
+                {
+                    draggable: `.${CSS.escape(this.itemClass)}`,
+                    handle: `.${CSS.escape(this.handleClass)}`,
+                    delay: this.delay,
+                    distance: this.distance,
+                    swapAnimation: { vertical: this.vertical, horizontal: !this.vertical },
+                    plugins,
+                    mirror: {
+                        constrainDimensions: this.constrainDimensions,
+                    },
                 },
-            }, this.options);
+                this.options,
+            );
 
             if (this.vertical) {
                 options.mirror.xAxis = false;
             }
 
             if (this.appendTo) {
-                options.mirror.appendTo = this.appendTo
+                options.mirror.appendTo = this.appendTo;
             }
 
             return options;
-        }
-
+        },
     },
 
     provide() {
         return {
             itemClass: this.itemClass,
             handleClass: this.handleClass,
-        }
+        };
     },
 
     render() {
@@ -131,8 +130,8 @@ export default {
             this.sortable.on('drag:stop', () => this.$emit('dragend'));
 
             this.sortable.on('sortable:stop', ({ oldIndex, newIndex }) => {
-                this.$emit('update:model-value', move(this.modelValue, oldIndex, newIndex))
-            })
+                this.$emit('update:model-value', move(this.modelValue, oldIndex, newIndex));
+            });
 
             if (this.mirror === false) {
                 this.sortable.on('mirror:create', (e) => e.cancel());
@@ -140,7 +139,7 @@ export default {
         },
 
         destroySortableList() {
-            this.sortable.destroy()
+            this.sortable.destroy();
         },
     },
 
@@ -149,6 +148,5 @@ export default {
             disabled ? this.destroySortableList() : this.setupSortableList();
         },
     },
-
-}
+};
 </script>
diff --git a/resources/js/components/stacks/Stack.vue b/resources/js/components/stacks/Stack.vue
index 8f187d72ab..bbaf9c961e 100644
--- a/resources/js/components/stacks/Stack.vue
+++ b/resources/js/components/stacks/Stack.vue
@@ -1,50 +1,58 @@
 <template>
-
     <teleport :to="portal" :order="depth" v-if="visible">
         <div class="vue-portal-target stack">
-        <div class="stack-container"
-            :class="{ 'stack-is-current': isTopStack, 'hovering': isHovering, 'p-2 shadow-lg': full }"
-            :style="direction === 'ltr' ? { left: `${leftOffset}px` } : { right: `${leftOffset}px` }"
-        >
-            <transition name="stack-overlay-fade">
-                <div class="stack-overlay" v-if="visible" :style="direction === 'ltr' ? { left: `-${leftOffset}px` } : { right: `-${leftOffset}px` }" />
-            </transition>
-
-            <div class="stack-hit-area" :style="direction === 'ltr' ? { left: `-${offset}px` } : { right: `-${offset}px` }" @click="clickedHitArea" @mouseenter="mouseEnterHitArea" @mouseout="mouseOutHitArea" />
-
-            <transition name="stack-slide">
-                <div class="stack-content" v-if="visible">
-                    <slot name="default" :depth="depth" :close="close" />
-                </div>
-            </transition>
-        </div>
+            <div
+                class="stack-container"
+                :class="{ 'stack-is-current': isTopStack, hovering: isHovering, 'p-2 shadow-lg': full }"
+                :style="direction === 'ltr' ? { left: `${leftOffset}px` } : { right: `${leftOffset}px` }"
+            >
+                <transition name="stack-overlay-fade">
+                    <div
+                        class="stack-overlay"
+                        v-if="visible"
+                        :style="direction === 'ltr' ? { left: `-${leftOffset}px` } : { right: `-${leftOffset}px` }"
+                    />
+                </transition>
+
+                <div
+                    class="stack-hit-area"
+                    :style="direction === 'ltr' ? { left: `-${offset}px` } : { right: `-${offset}px` }"
+                    @click="clickedHitArea"
+                    @mouseenter="mouseEnterHitArea"
+                    @mouseout="mouseOutHitArea"
+                />
+
+                <transition name="stack-slide">
+                    <div class="stack-content" v-if="visible">
+                        <slot name="default" :depth="depth" :close="close" />
+                    </div>
+                </transition>
+            </div>
         </div>
     </teleport>
-
 </template>
 
 <script>
 export default {
-
     emits: ['closed'],
 
     props: {
         name: {
             type: String,
-            required: true
+            required: true,
         },
         beforeClose: {
             type: Function,
-            default: () => true
+            default: () => true,
         },
         narrow: {
-            type: Boolean
+            type: Boolean,
         },
         half: {
-            type: Boolean
+            type: Boolean,
         },
         full: {
-            type: Boolean
+            type: Boolean,
         },
     },
 
@@ -54,11 +62,10 @@ export default {
             visible: false,
             isHovering: false,
             escBinding: null,
-        }
+        };
     },
 
     computed: {
-
         portal() {
             return this.stack ? `#portal-target-${this.stack.id}` : null;
         },
@@ -75,11 +82,11 @@ export default {
             if (this.isTopStack && this.narrow) {
                 return window.innerWidth - 400;
             } else if (this.isTopStack && this.half) {
-                return window.innerWidth/ 2 ;
+                return window.innerWidth / 2;
             }
 
             // max of 200px, min of 80px
-            return Math.max(400 / (this.$stacks.count() + 1), 80)
+            return Math.max(400 / (this.$stacks.count() + 1), 80);
         },
 
         leftOffset() {
@@ -104,15 +111,14 @@ export default {
 
         direction() {
             return this.$config.get('direction', 'ltr');
-        }
-
+        },
     },
 
     created() {
         this.stack = this.$stacks.add(this);
 
-        this.$events.$on(`stacks.${this.depth}.hit-area-mouseenter`, () => this.isHovering = true);
-        this.$events.$on(`stacks.${this.depth}.hit-area-mouseout`, () => this.isHovering = false);
+        this.$events.$on(`stacks.${this.depth}.hit-area-mouseenter`, () => (this.isHovering = true));
+        this.$events.$on(`stacks.${this.depth}.hit-area-mouseout`, () => (this.isHovering = false));
         this.escBinding = this.$keys.bindGlobal('esc', this.close);
     },
 
@@ -124,7 +130,6 @@ export default {
     },
 
     methods: {
-
         clickedHitArea() {
             if (!this.visible) {
                 return;
@@ -150,7 +155,7 @@ export default {
         runCloseCallback() {
             const shouldClose = this.beforeClose();
 
-            if (! shouldClose) return false;
+            if (!shouldClose) return false;
 
             this.close();
 
@@ -159,15 +164,14 @@ export default {
 
         close() {
             this.visible = false;
-            this.$wait(300).then(() => { this.$emit('closed') });
+            this.$wait(300).then(() => {
+                this.$emit('closed');
+            });
         },
     },
 
     mounted() {
         this.visible = true;
     },
-
-
-
-}
+};
 </script>
diff --git a/resources/js/components/stacks/StackTest.vue b/resources/js/components/stacks/StackTest.vue
index fb14e342b4..30ac014c53 100644
--- a/resources/js/components/stacks/StackTest.vue
+++ b/resources/js/components/stacks/StackTest.vue
@@ -1,10 +1,9 @@
 <template>
-
     <div>
         <small class="text-gray">Collections > Blog ></small>
-        <h1 class="mt-2 mb-6">Fire!</h1>
+        <h1 class="mb-6 mt-2">Fire!</h1>
 
-        {{ depth === 0 ? 'Base' : `Stack ${depth}` }}<br><br>
+        {{ depth === 0 ? 'Base' : `Stack ${depth}` }}<br /><br />
 
         <button @click="show = true" class="btn">Open Stack {{ depth + 1 }}</button>
 
@@ -14,19 +13,16 @@
             </div>
         </stack>
     </div>
-
 </template>
 
 <script>
 export default {
-
     props: ['depth'],
 
     data() {
         return {
-            show: false
-        }
-    }
-
-}
+            show: false,
+        };
+    },
+};
 </script>
diff --git a/resources/js/components/stacks/Stacks.js b/resources/js/components/stacks/Stacks.js
index 546e1026cb..5059f7685c 100644
--- a/resources/js/components/stacks/Stacks.js
+++ b/resources/js/components/stacks/Stacks.js
@@ -11,7 +11,7 @@ export default class Stacks {
         return this.$portals.create('stack', {
             type: 'stack',
             depth: this.count() + 1,
-            vm
+            vm,
         });
     }
 
diff --git a/resources/js/components/structures/Branch.vue b/resources/js/components/structures/Branch.vue
index aa1d6a7002..3295195643 100644
--- a/resources/js/components/structures/Branch.vue
+++ b/resources/js/components/structures/Branch.vue
@@ -1,35 +1,43 @@
 <template>
-
     <div class="flex">
         <slot name="branch-action" :branch="page">
             <div v-if="editable" class="page-move w-6" />
         </slot>
-        <div class="flex items-center flex-1 p-2 rtl:mr-2 ltr:ml-2 text-xs leading-normal">
-            <div class="flex items-center grow" @click="$emit('branch-clicked', page)">
-                <div class="little-dot rtl:ml-2 ltr:mr-2" :class="getStatusClass()" v-tooltip="getStatusTooltip()" />
-                <svg-icon name="home-page" class="rtl:ml-2 ltr:mr-2 h-4 w-4 text-gray-800 dark:text-dark-150" v-if="isRoot" v-tooltip="__('This is the root page')" />
+        <div class="flex flex-1 items-center p-2 text-xs leading-normal ltr:ml-2 rtl:mr-2">
+            <div class="flex grow items-center" @click="$emit('branch-clicked', page)">
+                <div class="little-dot ltr:mr-2 rtl:ml-2" :class="getStatusClass()" v-tooltip="getStatusTooltip()" />
+                <svg-icon
+                    name="home-page"
+                    class="h-4 w-4 text-gray-800 dark:text-dark-150 ltr:mr-2 rtl:ml-2"
+                    v-if="isRoot"
+                    v-tooltip="__('This is the root page')"
+                />
                 <a
                     @click.prevent="$emit('edit', $event)"
                     :class="{ 'text-sm font-medium': isTopLevel }"
                     :href="page.edit_url"
-                    v-text="title" />
+                    v-text="title"
+                />
 
-                <span v-if="showSlugs" class="rtl:mr-2 ltr:ml-2 font-mono text-gray-700 dark:text-dark-175 text-2xs pt-px">
+                <span
+                    v-if="showSlugs"
+                    class="pt-px font-mono text-2xs text-gray-700 dark:text-dark-175 ltr:ml-2 rtl:mr-2"
+                >
                     {{ isRoot ? '/' : page.slug }}
                 </span>
 
                 <button
                     v-if="hasChildren"
-                    class="p-2 text-gray-600 dark:text-dark-175 hover:text-gray-700 dark:hover:text-dark-150 transition duration-100 outline-none flex"
+                    class="flex p-2 text-gray-600 outline-none transition duration-100 hover:text-gray-700 dark:text-dark-175 dark:hover:text-dark-150"
                     :class="{ '-rotate-90': !isOpen }"
                     @click.stop="$emit('toggle-open')"
                 >
                     <svg-icon name="micro/chevron-down-xs" class="h-1.5" />
                 </button>
 
-                <div v-if="page.collection && editable" class="rtl:mr-4 ltr:ml-4 flex items-center">
-                    <svg-icon name="light/content-writing" class="w-4 h-4" />
-                    <div class="rtl:mr-1 ltr:ml-1">
+                <div v-if="page.collection && editable" class="flex items-center ltr:ml-4 rtl:mr-4">
+                    <svg-icon name="light/content-writing" class="h-4 w-4" />
+                    <div class="ltr:ml-1 rtl:mr-1">
                         <a :href="page.collection.create_url" v-text="__('Add')" />
                         <span class="text-gray">/</span>
                         <a :href="page.collection.edit_url" v-text="__('Edit')" />
@@ -37,28 +45,25 @@
                 </div>
             </div>
 
-            <div class="rtl:pl-2 ltr:pr-2 flex items-center">
-                <div v-if="showBlueprint && page.entry_blueprint" v-text="__(page.entry_blueprint.title)" class="shrink text-4xs text-gray-600 dark:text-dark-175 uppercase ml-4" />
+            <div class="flex items-center ltr:pr-2 rtl:pl-2">
+                <div
+                    v-if="showBlueprint && page.entry_blueprint"
+                    v-text="__(page.entry_blueprint.title)"
+                    class="ml-4 shrink text-4xs uppercase text-gray-600 dark:text-dark-175"
+                />
 
                 <slot name="branch-icon" :branch="page" />
 
-                <dropdown-list class="rtl:mr-4 ltr:ml-4" :class="{'invisible': isRoot, 'hidden': !editable}">
-                    <slot name="branch-options"
-                        :branch="page"
-                        :depth="depth"
-                        :remove-branch="remove"
-                    />
+                <dropdown-list class="ltr:ml-4 rtl:mr-4" :class="{ invisible: isRoot, hidden: !editable }">
+                    <slot name="branch-options" :branch="page" :depth="depth" :remove-branch="remove" />
                 </dropdown-list>
             </div>
-
         </div>
     </div>
-
 </template>
 
 <script>
 export default {
-
     props: {
         page: Object,
         depth: Number,
@@ -75,11 +80,10 @@ export default {
     data() {
         return {
             editing: false,
-        }
+        };
     },
 
     computed: {
-
         isTopLevel() {
             return this.depth === 1;
         },
@@ -102,12 +106,10 @@ export default {
 
         title() {
             return this.page.title || this.page.entry_title || this.page.url;
-        }
-
+        },
     },
 
     methods: {
-
         getStatusClass() {
             switch (this.page.status) {
                 case 'published':
@@ -128,8 +130,6 @@ export default {
         remove(deleteChildren) {
             this.$emit('removed', this.stat, deleteChildren);
         },
-
-    }
-
-}
+    },
+};
 </script>
diff --git a/resources/js/components/structures/PageEditor.vue b/resources/js/components/structures/PageEditor.vue
index eeade28379..096de1f49d 100644
--- a/resources/js/components/structures/PageEditor.vue
+++ b/resources/js/components/structures/PageEditor.vue
@@ -1,25 +1,22 @@
 <template>
-
     <stack narrow name="page-tree-linker" :before-close="shouldClose" @closed="$emit('closed')" v-slot="{ close }">
-        <div class="bg-gray-100 dark:bg-dark-700 h-full flex flex-col">
-
-            <header class="bg-white dark:bg-dark-550 rtl:pr-6 ltr:pl-6 rtl:pl-3 ltr:pr-3 py-2 mb-4 border-b dark:border-dark-950 shadow-md text-lg font-medium flex items-center justify-between">
+        <div class="flex h-full flex-col bg-gray-100 dark:bg-dark-700">
+            <header
+                class="mb-4 flex items-center justify-between border-b bg-white py-2 text-lg font-medium shadow-md dark:border-dark-950 dark:bg-dark-550 ltr:pl-6 ltr:pr-3 rtl:pl-3 rtl:pr-6"
+            >
                 {{ headerText }}
-                <button
-                    type="button"
-                    class="btn-close"
-                    @click="confirmClose(close)"
-                    v-html="'&times'" />
+                <button type="button" class="btn-close" @click="confirmClose(close)" v-html="'&times'" />
             </header>
 
-            <div v-if="loading" class="flex-1 overflow-auto relative">
-                <div class="absolute inset-0 z-10 bg-white dark:bg-dark-700 bg-opacity-75 flex items-center justify-center text-center">
+            <div v-if="loading" class="relative flex-1 overflow-auto">
+                <div
+                    class="absolute inset-0 z-10 flex items-center justify-center bg-white bg-opacity-75 text-center dark:bg-dark-700"
+                >
                     <loading-graphic />
                 </div>
             </div>
 
             <div v-if="!loading" class="flex-1 overflow-auto px-1">
-
                 <publish-container
                     ref="container"
                     :name="publishContainer"
@@ -35,7 +32,10 @@
                     v-slot="{ container, setFieldMeta }"
                 >
                     <div>
-                        <div v-if="validating" class="absolute inset-0 z-10 bg-white dark:bg-dark-500 bg-opacity-75 flex items-center justify-center">
+                        <div
+                            v-if="validating"
+                            class="absolute inset-0 z-10 flex items-center justify-center bg-white bg-opacity-75 dark:bg-dark-500"
+                        >
                             <loading-graphic text="" />
                         </div>
 
@@ -53,35 +53,36 @@
                         />
                     </div>
                 </publish-container>
-
             </div>
 
-            <div v-if="!loading && (!readOnly || type === 'entry')" class="bg-gray-200 dark:bg-dark-500 p-4 border-t dark:border-dark-900 flex items-center justify-between flex-row-reverse">
+            <div
+                v-if="!loading && (!readOnly || type === 'entry')"
+                class="flex flex-row-reverse items-center justify-between border-t bg-gray-200 p-4 dark:border-dark-900 dark:bg-dark-500"
+            >
                 <div v-if="!readOnly">
-                    <button @click="confirmClose(close)" class="btn rtl:ml-2 ltr:mr-2">{{ __('Cancel') }}</button>
+                    <button @click="confirmClose(close)" class="btn ltr:mr-2 rtl:ml-2">{{ __('Cancel') }}</button>
                     <button @click="submit" class="btn-primary">{{ __('Submit') }}</button>
                 </div>
                 <div v-if="type === 'entry'">
-                    <a :href="editEntryUrl" target="_blank" class="text-xs flex items-center justify-center text-blue hover:text-blue underline rtl:ml-4 ltr:mr-4">
-                        <svg-icon name="light/external-link" class="w-4 h-4 rtl:ml-2 ltr:mr-2" />
+                    <a
+                        :href="editEntryUrl"
+                        target="_blank"
+                        class="flex items-center justify-center text-xs text-blue underline hover:text-blue ltr:mr-4 rtl:ml-4"
+                    >
+                        <svg-icon name="light/external-link" class="h-4 w-4 ltr:mr-2 rtl:ml-2" />
                         {{ __('Edit Entry') }}
                     </a>
                 </div>
             </div>
-
         </div>
     </stack>
-
 </template>
 
 <script>
-import HasHiddenFields from "../publish/HasHiddenFields";
+import HasHiddenFields from '../publish/HasHiddenFields';
 
 export default {
-
-    mixins: [
-        HasHiddenFields,
-    ],
+    mixins: [HasHiddenFields],
 
     props: {
         id: String,
@@ -110,8 +111,8 @@ export default {
             errors: {},
             validating: false,
             saveKeyBinding: null,
-            publishContainer: 'tree-page'
-        }
+            publishContainer: 'tree-page',
+        };
     },
 
     computed: {
@@ -122,15 +123,15 @@ export default {
         adjustedBlueprint() {
             function getFields(blueprint) {
                 return _.chain(blueprint.tabs[0].sections)
-                    .map(sections => sections.fields)
+                    .map((sections) => sections.fields)
                     .flatten(true)
                     .value();
             }
             function isMissingField(blueprint, handle) {
-                return ! getFields(blueprint).some(field => field.handle === handle);
+                return !getFields(blueprint).some((field) => field.handle === handle);
             }
             function hasField(blueprint, handle) {
-                return ! isMissingField(blueprint, handle);
+                return !isMissingField(blueprint, handle);
             }
             function getField(handle) {
                 for (let sectionIndex = 0; sectionIndex < blueprint.tabs[0].sections.length; sectionIndex++) {
@@ -161,7 +162,7 @@ export default {
             // Remove the "url" field if it's been added to the blueprint by the user.
             // URL fields only make sense for URL type pages. Entries will have their own URLs.
             if (this.type == 'entry' && hasField(blueprint, 'url')) {
-                const {section, field} = getField('url');
+                const { section, field } = getField('url');
                 blueprint.tabs[0].sections[section].fields.splice(field, 1);
             }
 
@@ -169,7 +170,7 @@ export default {
                 blueprint.tabs[0].sections[0].fields.unshift({
                     handle: 'title',
                     type: 'text',
-                    display: __('Title')
+                    display: __('Title'),
                 });
             }
 
@@ -182,7 +183,7 @@ export default {
             if (this.loading) return;
 
             this.$emit('localized-fields-updated', fields);
-        }
+        },
     },
 
     methods: {
@@ -191,30 +192,33 @@ export default {
 
             const postUrl = cp_url(`navigation/${this.handle}/pages`);
 
-            this.$axios.post(postUrl, {
-                type: this.type,
-                values: this.visibleValues
-            }).then(response => {
-                this.$emit('submitted', this.visibleValues);
-            }).catch(e => {
-                this.validating = false;
-                if (e.response && e.response.status === 422) {
-                    const { message, errors } = e.response.data;
-                    this.error = message;
-                    this.errors = errors;
-                    this.$toast.error(message);
-                } else if (e.response) {
-                    this.$toast.error(e.response.data.message);
-                } else {
-                    console.error(e);
-                    this.$toast.error(e || 'Something went wrong');
-                }
-            });
+            this.$axios
+                .post(postUrl, {
+                    type: this.type,
+                    values: this.visibleValues,
+                })
+                .then((response) => {
+                    this.$emit('submitted', this.visibleValues);
+                })
+                .catch((e) => {
+                    this.validating = false;
+                    if (e.response && e.response.status === 422) {
+                        const { message, errors } = e.response.data;
+                        this.error = message;
+                        this.errors = errors;
+                        this.$toast.error(message);
+                    } else if (e.response) {
+                        this.$toast.error(e.response.data.message);
+                    } else {
+                        console.error(e);
+                        this.$toast.error(e || 'Something went wrong');
+                    }
+                });
         },
 
         shouldClose() {
             if (this.$dirty.has(this.publishContainer)) {
-                if (! confirm(__('Are you sure? Unsaved changes will be lost.'))) {
+                if (!confirm(__('Are you sure? Unsaved changes will be lost.'))) {
                     return false;
                 }
             }
@@ -227,10 +231,10 @@ export default {
         },
 
         syncField(handle) {
-            if (! confirm('Are you sure? This field\'s value will be replaced by the value in the original entry.'))
+            if (!confirm("Are you sure? This field's value will be replaced by the value in the original entry."))
                 return;
 
-            this.localizedFields = this.localizedFields.filter(field => field !== handle);
+            this.localizedFields = this.localizedFields.filter((field) => field !== handle);
             this.$refs.container.setFieldValue(handle, this.originValues[handle]);
 
             // Update the meta for this field. For instance, a relationship field would have its data preloaded into it.
@@ -239,8 +243,7 @@ export default {
         },
 
         desyncField(handle) {
-            if (!this.localizedFields.includes(handle))
-                this.localizedFields.push(handle);
+            if (!this.localizedFields.includes(handle)) this.localizedFields.push(handle);
 
             this.$refs.container.dirty();
         },
@@ -273,7 +276,7 @@ export default {
                 url += `&entry=${this.entry}`;
             }
 
-            this.$axios.get(url).then(response => {
+            this.$axios.get(url).then((response) => {
                 this.updatePublishInfo(response.data);
                 this.emitPublishInfoUpdated(hasPublishInfo && this.publishInfo.new);
                 this.loading = false;
@@ -300,13 +303,13 @@ export default {
                 localizedFields: this.localizedFields,
                 syncableFields: this.syncableFields,
                 entry: this.entry,
-                new: isNew
+                new: isNew,
             });
-        }
+        },
     },
 
     created() {
-        this.saveKeyBinding = this.$keys.bindGlobal(['mod+enter', 'mod+s'], e => {
+        this.saveKeyBinding = this.$keys.bindGlobal(['mod+enter', 'mod+s'], (e) => {
             e.preventDefault();
             this.submit();
         });
@@ -316,7 +319,6 @@ export default {
 
     unmounted() {
         this.saveKeyBinding.destroy();
-    }
-
-}
+    },
+};
 </script>
diff --git a/resources/js/components/structures/PageSelector.vue b/resources/js/components/structures/PageSelector.vue
index 666d56b4c1..ba3767ccf9 100644
--- a/resources/js/components/structures/PageSelector.vue
+++ b/resources/js/components/structures/PageSelector.vue
@@ -1,30 +1,27 @@
 <template>
-
-        <relationship-input
-            class="hidden"
-            ref="input"
-            name="entries"
-            :value="[]"
-            :config="config"
-            :site="site"
-            :item-data-url="itemDataUrl"
-            :selections-url="selectionsUrl"
-            :filters-url="filtersUrl"
-            :search="true"
-            :columns="columns"
-            :can-create="false"
-            :can-reorder="false"
-            :max-items="maxItems"
-            @item-data-updated="itemDataUpdated"
-        />
-
+    <relationship-input
+        class="hidden"
+        ref="input"
+        name="entries"
+        :value="[]"
+        :config="config"
+        :site="site"
+        :item-data-url="itemDataUrl"
+        :selections-url="selectionsUrl"
+        :filters-url="filtersUrl"
+        :search="true"
+        :columns="columns"
+        :can-create="false"
+        :can-reorder="false"
+        :max-items="maxItems"
+        @item-data-updated="itemDataUpdated"
+    />
 </template>
 
 <script>
 import qs from 'qs';
 
 export default {
-
     props: {
         site: String,
         collections: Array,
@@ -45,49 +42,56 @@ export default {
             columns: [
                 { label: __('Title'), field: 'title' },
                 { label: __('Slug'), field: 'slug' },
-            ]
-        }
+            ],
+        };
     },
 
     computed: {
-
         itemDataUrl() {
-            return cp_url('fieldtypes/relationship/data') + '?' + qs.stringify({
-                config: this.configParameter
-            });
+            return (
+                cp_url('fieldtypes/relationship/data') +
+                '?' +
+                qs.stringify({
+                    config: this.configParameter,
+                })
+            );
         },
 
         selectionsUrl() {
-            return cp_url('fieldtypes/relationship') + '?' + qs.stringify({
-                config: this.configParameter,
-                collections: this.collections,
-            });
+            return (
+                cp_url('fieldtypes/relationship') +
+                '?' +
+                qs.stringify({
+                    config: this.configParameter,
+                    collections: this.collections,
+                })
+            );
         },
 
         filtersUrl() {
-            return cp_url('fieldtypes/relationship/filters') + '?' + qs.stringify({
-                config: this.configParameter,
-                collections: this.collections,
-            });
+            return (
+                cp_url('fieldtypes/relationship/filters') +
+                '?' +
+                qs.stringify({
+                    config: this.configParameter,
+                    collections: this.collections,
+                })
+            );
         },
 
         configParameter() {
             return utf8btoa(JSON.stringify(this.config));
-        }
-
+        },
     },
 
     methods: {
-
         linkExistingItem() {
             this.$refs.input.$refs.existing.click();
         },
 
         itemDataUpdated(data) {
             if (data.length) this.$emit('selected', data);
-        }
-
-    }
-
-}
+        },
+    },
+};
 </script>
diff --git a/resources/js/components/structures/PageTree.vue b/resources/js/components/structures/PageTree.vue
index f3119de9ff..9d63728775 100644
--- a/resources/js/components/structures/PageTree.vue
+++ b/resources/js/components/structures/PageTree.vue
@@ -1,13 +1,9 @@
 <template>
     <div>
         <div class="mb-2 flex justify-end">
+            <a class="text-2xs text-blue underline ltr:mr-4 rtl:ml-4" v-text="__('Expand All')" @click="expandAll" />
             <a
-                class="text-2xs text-blue rtl:ml-4 ltr:mr-4 underline"
-                v-text="__('Expand All')"
-                @click="expandAll"
-            />
-            <a
-                class="text-2xs text-blue rtl:ml-2 ltr:mr-2 underline"
+                class="text-2xs text-blue underline ltr:mr-2 rtl:ml-2"
                 v-text="__('Collapse All')"
                 @click="collapseAll"
             />
@@ -17,7 +13,7 @@
             <loading-graphic />
         </div>
 
-        <div v-if="!loading && pages.length == 0" class="no-results w-full flex items-center">
+        <div v-if="!loading && pages.length == 0" class="no-results flex w-full items-center">
             <slot name="empty" />
         </div>
 
@@ -39,9 +35,7 @@
                 @close:node="nodeClosed"
             >
                 <template #placeholder>
-                    <div class="w-full bg-blue-500/10 rounded p-2 border border-blue-400 border-dashed">
-                        &nbsp;
-                    </div>
+                    <div class="w-full rounded border border-dashed border-blue-400 bg-blue-500/10 p-2">&nbsp;</div>
                 </template>
 
                 <template #default="{ node, stat }">
@@ -81,13 +75,11 @@
     </div>
 </template>
 
-
 <script>
 import { dragContext, Draggable, walkTreeData } from '@he-tree/vue';
 import TreeBranch from './Branch.vue';
 
 export default {
-
     components: {
         Draggable,
         TreeBranch,
@@ -100,7 +92,7 @@ export default {
         createUrl: { type: String },
         site: { type: String, required: true },
         localizations: { type: Array },
-        maxDepth: { type: Number, default: Infinity, },
+        maxDepth: { type: Number, default: Infinity },
         expectsRoot: { type: Boolean, required: true },
         showSlugs: { type: Boolean, default: false },
         preferencesPrefix: { type: String },
@@ -115,11 +107,10 @@ export default {
             pages: [],
             treeData: [],
             collapsedState: [],
-        }
+        };
     },
 
     computed: {
-
         activeLocalization() {
             return _.findWhere(this.localizations, { active: true });
         },
@@ -131,11 +122,9 @@ export default {
         direction() {
             return this.$config.get('direction', 'ltr');
         },
-
     },
 
     watch: {
-
         site(site) {
             this.getPages();
         },
@@ -146,8 +135,8 @@ export default {
                 if (this.preferencesKey) {
                     localStorage.setItem(this.preferencesKey, JSON.stringify(state));
                 }
-            }
-        }
+            },
+        },
     },
 
     created() {
@@ -155,29 +144,28 @@ export default {
 
         this.getPages().then(() => {
             this.initialPages = this.pages;
-        })
+        });
 
-        this.$keys.bindGlobal(['mod+s'], e => {
+        this.$keys.bindGlobal(['mod+s'], (e) => {
             e.preventDefault();
             this.save();
         });
     },
 
     methods: {
-
         isRoot(stat) {
             if (!this.expectsRoot) {
-                return false
+                return false;
             }
 
-            return stat.level === 1 && stat.data.id === this.treeData[0]?.id
+            return stat.level === 1 && stat.data.id === this.treeData[0]?.id;
         },
 
         getPages() {
             this.loading = true;
             const url = `${this.pagesUrl}?site=${this.site}`;
 
-            return this.$axios.get(url).then(response => {
+            return this.$axios.get(url).then((response) => {
                 this.pages = response.data.pages;
                 this.updateTreeData();
                 this.loading = false;
@@ -190,14 +178,14 @@ export default {
         },
 
         cleanPagesForSubmission(pages) {
-            return _.map(pages, page => ({
+            return _.map(pages, (page) => ({
                 id: page.id,
-                children: this.cleanPagesForSubmission(page.children)
+                children: this.cleanPagesForSubmission(page.children),
             }));
         },
 
         save() {
-            if (! this.editable) {
+            if (!this.editable) {
                 return;
             }
 
@@ -207,30 +195,34 @@ export default {
                 pages: this.cleanPagesForSubmission(this.pages),
                 site: this.site,
                 expectsRoot: this.expectsRoot,
-                ...this.submitParameters
+                ...this.submitParameters,
             };
 
-            return this.$axios.patch(this.submitUrl, payload).then(response => {
-                if (! response.data.saved) {
-                    return this.$toast.error(`Couldn't save tree`)
-                }
-
-                this.$emit('saved', response);
-                this.$toast.success(__('Saved'));
-                this.initialPages = this.pages;
-                return response;
-            }).catch(e => {
-                let message = e.response ? e.response.data.message : __('Something went wrong');
-
-                // For a validation error, show the first message from any field in the toast.
-                if (e.response && e.response.status === 422) {
-                    const { errors } = e.response.data;
-                    message = errors[Object.keys(errors)[0]][0];
-                }
-
-                this.$toast.error(message);
-                return Promise.reject(e);
-            }).finally(() => this.saving = false);
+            return this.$axios
+                .patch(this.submitUrl, payload)
+                .then((response) => {
+                    if (!response.data.saved) {
+                        return this.$toast.error(`Couldn't save tree`);
+                    }
+
+                    this.$emit('saved', response);
+                    this.$toast.success(__('Saved'));
+                    this.initialPages = this.pages;
+                    return response;
+                })
+                .catch((e) => {
+                    let message = e.response ? e.response.data.message : __('Something went wrong');
+
+                    // For a validation error, show the first message from any field in the toast.
+                    if (e.response && e.response.status === 422) {
+                        const { errors } = e.response.data;
+                        message = errors[Object.keys(errors)[0]][0];
+                    }
+
+                    this.$toast.error(message);
+                    return Promise.reject(e);
+                })
+                .finally(() => (this.saving = false));
         },
 
         addPages(pages, targetParent) {
@@ -248,7 +240,7 @@ export default {
             // the parent. The tree.move() API wasn't working, so instead
             // we're removing the child data and re-adding them as new ones.
             const children = [];
-            if (! deleteChildren) stat.children.forEach(child => children.push({...child.data}));
+            if (!deleteChildren) stat.children.forEach((child) => children.push({ ...child.data }));
 
             this.$refs.tree.batchUpdate(() => {
                 this.$refs.tree.remove(stat);
@@ -277,7 +269,7 @@ export default {
         },
 
         cancel() {
-            if (! confirm(__('Are you sure?'))) return;
+            if (!confirm(__('Are you sure?'))) return;
 
             this.pages = this.initialPages;
             this.updateTreeData();
@@ -286,18 +278,18 @@ export default {
 
         rootDroppable() {
             if (!this.expectsRoot) {
-                return true
+                return true;
             }
 
-            return dragContext.dragNode.children.length === 0
+            return dragContext.dragNode.children.length === 0;
         },
 
         eachDroppable(targetStat) {
             if (!this.expectsRoot) {
-                return true
+                return true;
             }
 
-            return !this.isRoot(targetStat)
+            return !this.isRoot(targetStat);
         },
 
         pageUpdated() {
@@ -317,15 +309,15 @@ export default {
             let branch;
             walkTreeData(this.treeData, (node) => {
                 if (node.id === id) {
-                    branch = node
-                    return false
+                    branch = node;
+                    return false;
                 }
             });
             return branch;
         },
 
         getCollapsedState() {
-            if (! this.preferencesKey) return [];
+            if (!this.preferencesKey) return [];
 
             return JSON.parse(localStorage.getItem(this.preferencesKey) || '[]');
         },
@@ -339,10 +331,9 @@ export default {
         },
 
         statHandler(stat) {
-            stat.open = ! this.collapsedState.includes(stat.data.id);
+            stat.open = !this.collapsedState.includes(stat.data.id);
             return stat;
         },
-
-    }
-}
+    },
+};
 </script>
diff --git a/resources/js/components/taxonomies/BlueprintListing.vue b/resources/js/components/taxonomies/BlueprintListing.vue
index 71f010b2a0..b1862493b4 100644
--- a/resources/js/components/taxonomies/BlueprintListing.vue
+++ b/resources/js/components/taxonomies/BlueprintListing.vue
@@ -2,21 +2,20 @@
 import BlueprintListing from '../blueprints/Listing.vue';
 
 export default {
-
     components: {
-        BlueprintListing
+        BlueprintListing,
     },
 
     props: {
         initialRows: Array,
-        reorderUrl: String
+        reorderUrl: String,
     },
 
     data() {
         return {
             rows: this.initialRows,
-            hasBeenReordered: false
-        }
+            hasBeenReordered: false,
+        };
     },
 
     methods: {
@@ -26,14 +25,13 @@ export default {
         },
 
         saveOrder() {
-            let order = this.rows.map(blueprint => blueprint.handle);
+            let order = this.rows.map((blueprint) => blueprint.handle);
 
             this.$axios
                 .post(this.reorderUrl, { order })
-                .then(response => this.$toast.success(__('Blueprints successfully reordered')))
-                .catch(error => this.$toast.error(__('Something went wrong')))
-        }
-    }
-
-}
+                .then((response) => this.$toast.success(__('Blueprints successfully reordered')))
+                .catch((error) => this.$toast.error(__('Something went wrong')));
+        },
+    },
+};
 </script>
diff --git a/resources/js/components/taxonomies/CreateForm.vue b/resources/js/components/taxonomies/CreateForm.vue
index f406707815..271dc273bd 100644
--- a/resources/js/components/taxonomies/CreateForm.vue
+++ b/resources/js/components/taxonomies/CreateForm.vue
@@ -1,46 +1,43 @@
 <template>
-    <div class="max-w-lg mt-4 mx-auto">
-
-        <div class="rounded p-6 lg:px-20 lg:py-10 shadow bg-white dark:bg-dark-600 dark:shadow-dark">
-            <header class="text-center mb-16">
+    <div class="mx-auto mt-4 max-w-lg">
+        <div class="rounded bg-white p-6 shadow dark:bg-dark-600 dark:shadow-dark lg:px-20 lg:py-10">
+            <header class="mb-16 text-center">
                 <h1 class="mb-6">{{ __('Create Taxonomy') }}</h1>
                 <p class="text-gray" v-text="__('messages.taxonomy_configure_intro')" />
             </header>
             <div class="mb-10">
-                <label class="font-bold text-base mb-1" for="name">{{ __('Title') }}</label>
-                <input type="text" v-model="title" class="input-text" autofocus tabindex="1">
-                <div class="text-2xs text-gray-600 mt-2 flex items-center">
+                <label class="mb-1 text-base font-bold" for="name">{{ __('Title') }}</label>
+                <input type="text" v-model="title" class="input-text" autofocus tabindex="1" />
+                <div class="mt-2 flex items-center text-2xs text-gray-600">
                     {{ __('messages.taxonomy_configure_title_instructions') }}
                 </div>
             </div>
             <div class="mb-4">
-                <label class="font-bold text-base mb-1" for="name">{{ __('Handle') }}</label>
+                <label class="mb-1 text-base font-bold" for="name">{{ __('Handle') }}</label>
                 <div class="relative">
-                    <loading-graphic inline text="" v-if="slug.busy" class="absolute top-3 right-3"/>
-                    <input type="text" v-model="handle" class="input-text" tabindex="2">
+                    <loading-graphic inline text="" v-if="slug.busy" class="absolute right-3 top-3" />
+                    <input type="text" v-model="handle" class="input-text" tabindex="2" />
                 </div>
-                <div class="text-2xs text-gray-600 mt-2 flex items-center">
+                <div class="mt-2 flex items-center text-2xs text-gray-600">
                     {{ __('messages.taxonomy_configure_handle_instructions') }}
                 </div>
             </div>
         </div>
 
-        <div class="flex justify-center mt-8">
-            <button tabindex="4" class="btn-primary mx-auto btn-lg" :disabled="! canSubmit" @click="submit">
-                {{ __('Create Taxonomy')}}
+        <div class="mt-8 flex justify-center">
+            <button tabindex="4" class="btn-primary btn-lg mx-auto" :disabled="!canSubmit" @click="submit">
+                {{ __('Create Taxonomy') }}
             </button>
         </div>
     </div>
 </template>
 
 <script>
-
 export default {
-
     props: {
         route: {
-            type: String
-        }
+            type: String,
+        },
     },
 
     data() {
@@ -48,13 +45,13 @@ export default {
             title: null,
             handle: null,
             slug: this.$slug.async().separatedBy('_'),
-        }
+        };
     },
 
     watch: {
         title(title) {
-            this.slug.create(title).then(slug => this.handle = slug);
-        }
+            this.slug.create(title).then((slug) => (this.handle = slug));
+        },
     },
 
     computed: {
@@ -65,20 +62,23 @@ export default {
 
     methods: {
         submit() {
-            this.$axios.post(this.route, {title: this.title, handle: this.handle}).then(response => {
-                window.location = response.data.redirect;
-            }).catch(error => {
-                this.$toast.error(error.response.data.message);
-            });
-        }
+            this.$axios
+                .post(this.route, { title: this.title, handle: this.handle })
+                .then((response) => {
+                    window.location = response.data.redirect;
+                })
+                .catch((error) => {
+                    this.$toast.error(error.response.data.message);
+                });
+        },
     },
 
     mounted() {
-        this.$keys.bindGlobal(['return'], e => {
+        this.$keys.bindGlobal(['return'], (e) => {
             if (this.canSubmit) {
                 this.submit();
             }
         });
-    }
-}
+    },
+};
 </script>
diff --git a/resources/js/components/taxonomies/EditForm.vue b/resources/js/components/taxonomies/EditForm.vue
index 353dcb102e..4db5824b81 100644
--- a/resources/js/components/taxonomies/EditForm.vue
+++ b/resources/js/components/taxonomies/EditForm.vue
@@ -1,5 +1,4 @@
 <template>
-
     <publish-container
         v-if="blueprint"
         ref="container"
@@ -20,18 +19,13 @@
                     <button type="submit" class="btn-primary" @click="submit">{{ __('Save') }}</button>
                 </div>
             </header>
-            <configure-tabs
-                @updated="setFieldValue"
-                @meta-updated="setFieldMeta"
-                :enable-sidebar="false"/>
+            <configure-tabs @updated="setFieldValue" @meta-updated="setFieldMeta" :enable-sidebar="false" />
         </div>
     </publish-container>
-
 </template>
 
 <script>
 export default {
-
     props: {
         blueprint: Object,
         initialValues: Object,
@@ -44,11 +38,10 @@ export default {
             values: this.initialValues,
             error: null,
             errors: {},
-        }
+        };
     },
 
     methods: {
-
         clearErrors() {
             this.error = null;
             this.errors = {};
@@ -58,11 +51,14 @@ export default {
             this.saving = true;
             this.clearErrors();
 
-            this.$axios.patch(this.url, this.values).then(response => {
-                this.saving = false;
-                this.$toast.success(__('Saved'));
-                this.$refs.container.saved();
-            }).catch(e => this.handleAxiosError(e));
+            this.$axios
+                .patch(this.url, this.values)
+                .then((response) => {
+                    this.saving = false;
+                    this.$toast.success(__('Saved'));
+                    this.$refs.container.saved();
+                })
+                .catch((e) => this.handleAxiosError(e));
         },
 
         handleAxiosError(e) {
@@ -76,15 +72,13 @@ export default {
                 this.$toast.error(__('Something went wrong'));
             }
         },
-
     },
 
     created() {
-        this.$keys.bindGlobal(['command+s'], e => {
+        this.$keys.bindGlobal(['command+s'], (e) => {
             e.preventDefault();
             this.submit();
         });
     },
-
-}
+};
 </script>
diff --git a/resources/js/components/taxonomies/Listing.vue b/resources/js/components/taxonomies/Listing.vue
index 52f5072fb8..a8b93895ea 100644
--- a/resources/js/components/taxonomies/Listing.vue
+++ b/resources/js/components/taxonomies/Listing.vue
@@ -18,7 +18,8 @@
                             <resource-deleter
                                 :ref="`deleter_${taxonomy.id}`"
                                 :resource="taxonomy"
-                                @deleted="removeRow(taxonomy)">
+                                @deleted="removeRow(taxonomy)"
+                            >
                             </resource-deleter>
                         </dropdown-item>
                     </dropdown-list>
@@ -29,23 +30,18 @@
 </template>
 
 <script>
-import Listing from '../Listing.vue'
+import Listing from '../Listing.vue';
 
 export default {
-
     mixins: [Listing],
 
-    props: [
-        'initial-rows',
-        'initial-columns',
-    ],
+    props: ['initial-rows', 'initial-columns'],
 
     data() {
         return {
             rows: this.initialRows,
-            columns: this.initialColumns
-        }
-    }
-
-}
+            columns: this.initialColumns,
+        };
+    },
+};
 </script>
diff --git a/resources/js/components/terms/BaseCreateForm.vue b/resources/js/components/terms/BaseCreateForm.vue
index e14a0f44e4..a40766b07d 100644
--- a/resources/js/components/terms/BaseCreateForm.vue
+++ b/resources/js/components/terms/BaseCreateForm.vue
@@ -1,5 +1,4 @@
 <template>
-
     <term-publish-form
         :is-creating="true"
         publish-container="base"
@@ -22,12 +21,10 @@
         :preview-targets="previewTargets"
         @saved="saved"
     ></term-publish-form>
-
 </template>
 
 <script>
 export default {
-
     props: [
         'actions',
         'taxonomyHandle',
@@ -45,12 +42,9 @@ export default {
     ],
 
     methods: {
-
         saved(response) {
             window.location = response.data.data.edit_url + '?created=true';
-        }
-
-    }
-
-}
+        },
+    },
+};
 </script>
diff --git a/resources/js/components/terms/CreateTermButton.vue b/resources/js/components/terms/CreateTermButton.vue
index 4a7e81fa18..422e34c561 100644
--- a/resources/js/components/terms/CreateTermButton.vue
+++ b/resources/js/components/terms/CreateTermButton.vue
@@ -1,13 +1,13 @@
 <template>
-
     <dropdown-list class="inline-block" :disabled="blueprints.length === 1">
         <template v-slot:trigger>
-            <button
-                class="btn-primary flex items-center"
-                @click="create"
-            >
+            <button class="btn-primary flex items-center" @click="create">
                 <span v-text="text" />
-                <svg-icon name="micro/chevron-down-xs" class="rtl:mr-2 ltr:ml-2 -mr-2 w-2" v-if="blueprints.length > 1" />
+                <svg-icon
+                    name="micro/chevron-down-xs"
+                    class="-mr-2 w-2 ltr:ml-2 rtl:mr-2"
+                    v-if="blueprints.length > 1"
+                />
             </button>
         </template>
 
@@ -17,12 +17,10 @@
             </div>
         </div>
     </dropdown-list>
-
 </template>
 
 <script>
 export default {
-
     props: {
         url: String,
         blueprints: Array,
@@ -30,7 +28,6 @@ export default {
     },
 
     methods: {
-
         create() {
             if (this.blueprints.length === 1) this.select();
         },
@@ -43,9 +40,7 @@ export default {
             }
 
             window.location = url;
-        }
-
-    }
-
-}
+        },
+    },
+};
 </script>
diff --git a/resources/js/components/terms/Listing.vue b/resources/js/components/terms/Listing.vue
index 1d04b1ce95..bb7507c8f6 100644
--- a/resources/js/components/terms/Listing.vue
+++ b/resources/js/components/terms/Listing.vue
@@ -1,6 +1,5 @@
 <template>
     <div>
-
         <div v-if="initializing" class="card loading">
             <loading-graphic />
         </div>
@@ -17,9 +16,10 @@
             v-slot="{ hasSelections }"
         >
             <div>
-                <div class="card overflow-hidden p-0 relative">
-                    <div class="flex flex-wrap items-center justify-between px-2 pb-2 text-sm border-b dark:border-dark-900">
-
+                <div class="card relative overflow-hidden p-0">
+                    <div
+                        class="flex flex-wrap items-center justify-between border-b px-2 pb-2 text-sm dark:border-dark-900"
+                    >
                         <data-list-filter-presets
                             ref="presets"
                             :active-preset="activePreset"
@@ -32,11 +32,26 @@
                             @reset="filtersReset"
                         />
 
-                        <data-list-search class="h-8 mt-2 min-w-[240px] w-full" ref="search" v-model="searchQuery" :placeholder="searchPlaceholder" />
+                        <data-list-search
+                            class="mt-2 h-8 w-full min-w-[240px]"
+                            ref="search"
+                            v-model="searchQuery"
+                            :placeholder="searchPlaceholder"
+                        />
 
-                        <div class="flex space-x-2 rtl:space-x-reverse mt-2">
-                            <button class="btn btn-sm rtl:mr-2 ltr:ml-2" v-text="__('Reset')" v-show="isDirty" @click="$refs.presets.refreshPreset()" />
-                            <button class="btn btn-sm rtl:mr-2 ltr:ml-2" v-text="__('Save')" v-show="isDirty" @click="$refs.presets.savePreset()" />
+                        <div class="mt-2 flex space-x-2 rtl:space-x-reverse">
+                            <button
+                                class="btn btn-sm ltr:ml-2 rtl:mr-2"
+                                v-text="__('Reset')"
+                                v-show="isDirty"
+                                @click="$refs.presets.refreshPreset()"
+                            />
+                            <button
+                                class="btn btn-sm ltr:ml-2 rtl:mr-2"
+                                v-text="__('Save')"
+                                v-show="isDirty"
+                                @click="$refs.presets.savePreset()"
+                            />
                             <data-list-column-picker :preferences-key="preferencesKey('columns')" />
                         </div>
                     </div>
@@ -108,7 +123,6 @@
                 />
             </div>
         </data-list>
-
     </div>
 </template>
 
@@ -116,7 +130,6 @@
 import Listing from '../Listing.vue';
 
 export default {
-
     mixins: [Listing],
 
     props: {
@@ -129,12 +142,12 @@ export default {
             preferencesPrefix: `taxonomies.${this.taxonomy}`,
             requestUrl: cp_url(`taxonomies/${this.taxonomy}/terms`),
             pushQuery: true,
-        }
+        };
     },
 
     computed: {
         actionContext() {
-            return {taxonomy: this.taxonomy};
+            return { taxonomy: this.taxonomy };
         },
     },
 
@@ -142,7 +155,6 @@ export default {
         preferencesKey(type) {
             return `taxonomies.${this.taxonomy}.${type}`;
         },
-    }
-
-}
+    },
+};
 </script>
diff --git a/resources/js/components/terms/PublishActions.vue b/resources/js/components/terms/PublishActions.vue
index 302045c011..3e7d176d63 100644
--- a/resources/js/components/terms/PublishActions.vue
+++ b/resources/js/components/terms/PublishActions.vue
@@ -1,77 +1,57 @@
 <template>
-
     <stack narrow name="publish-options" @closed="$emit('closed')" v-slot="{ close }">
-        <div class="bg-white dark:bg-dark-800 h-full flex flex-col">
-
-            <div class="bg-gray-200 dark:bg-dark-600 px-6 py-2 border-b border-gray-300 dark:border-dark-900 text-lg font-medium flex items-center justify-between">
+        <div class="flex h-full flex-col bg-white dark:bg-dark-800">
+            <div
+                class="flex items-center justify-between border-b border-gray-300 bg-gray-200 px-6 py-2 text-lg font-medium dark:border-dark-900 dark:bg-dark-600"
+            >
                 {{ __('Publish') }}
-                <button
-                    type="button"
-                    class="btn-close"
-                    @click="close"
-                    v-html="'&times'" />
+                <button type="button" class="btn-close" @click="close" v-html="'&times'" />
             </div>
 
             <div class="flex-1 overflow-auto p-6">
-
-                <div class="flex h-full items-center justify-center loading" v-if="saving">
+                <div class="loading flex h-full items-center justify-center" v-if="saving">
                     <loading-graphic text="" />
                 </div>
 
-                <select-input
-                    class="mb-6"
-                    v-model="action"
-                    :options="options"
-                />
+                <select-input class="mb-6" v-model="action" :options="options" />
 
                 <div v-if="action">
-
-                    <date-fieldtype
-                        v-if="action == 'schedule'"
-                        class="mb-6"
-                        name="publishTime"
-                        :value="publishTime" />
+                    <date-fieldtype v-if="action == 'schedule'" class="mb-6" name="publishTime" :value="publishTime" />
 
                     <textarea-input
                         class="mb-6 text-sm"
                         v-model="revisionMessage"
                         :placeholder="__('Notes about this revision')"
                         @keydown.enter="submit"
-                        :focus="true" />
-
-                    <button
-                        class="btn-primary w-full mb-6"
-                        v-text="submitButtonText"
-                        @click="submit"
+                        :focus="true"
                     />
 
-                    <div class="text-gray text-xs flex mb-6">
-                        <div class="pt-px w-4 rtl:ml-2 ltr:mr-2">
+                    <button class="btn-primary mb-6 w-full" v-text="submitButtonText" @click="submit" />
+
+                    <div class="mb-6 flex text-xs text-gray">
+                        <div class="w-4 pt-px ltr:mr-2 rtl:ml-2">
                             <svg-icon name="info-circle" class="pt-px" />
                         </div>
                         <div class="flex-1" v-text="actionInfoText" />
                     </div>
 
-                    <div class="text-gray text-xs flex mb-6 text-red-500" v-if="action === 'schedule'">
-                        <div class="pt-px w-4 rtl:ml-2 ltr:mr-2">
+                    <div class="mb-6 flex text-xs text-gray text-red-500" v-if="action === 'schedule'">
+                        <div class="w-4 pt-px ltr:mr-2 rtl:ml-2">
                             <svg-icon name="info-circle" class="pt-px" />
                         </div>
                         <div class="flex-1">
-                            Since the current revision is published and you've selected a date in the future, once you submit, the revision will act like a draft until the selected date.
+                            Since the current revision is published and you've selected a date in the future, once you
+                            submit, the revision will act like a draft until the selected date.
                         </div>
                     </div>
-
                 </div>
-
             </div>
         </div>
     </stack>
-
 </template>
 
 <script>
 export default {
-
     props: {
         actions: Object,
         published: Boolean,
@@ -83,11 +63,10 @@ export default {
             action: this.canManagePublishState ? 'publish' : 'revision',
             revisionMessage: null,
             saving: false,
-        }
+        };
     },
 
     computed: {
-
         options() {
             const options = [];
 
@@ -119,27 +98,28 @@ export default {
 
         submitButtonText() {
             return _.findWhere(this.options, { value: this.action }).label;
-        }
-
+        },
     },
 
     methods: {
-
         submit() {
             this.saving = true;
             this.$emit('saving');
-            const method = 'submit'+this.action.charAt(0).toUpperCase()+this.action.substring(1);
+            const method = 'submit' + this.action.charAt(0).toUpperCase() + this.action.substring(1);
             this[method]();
         },
 
         submitPublish() {
             const payload = { message: this.revisionMessage };
 
-            this.$axios.post(this.actions.publish, payload).then(response => {
-                this.$toast.success(__('Published'));
-                this.revisionMessage = null;
-                this.$emit('saved', { published: true, isWorkingCopy: false, response });
-            }).catch(e => this.handleAxiosError(e));
+            this.$axios
+                .post(this.actions.publish, payload)
+                .then((response) => {
+                    this.$toast.success(__('Published'));
+                    this.revisionMessage = null;
+                    this.$emit('saved', { published: true, isWorkingCopy: false, response });
+                })
+                .catch((e) => this.handleAxiosError(e));
         },
 
         submitSchedule() {
@@ -149,29 +129,33 @@ export default {
         submitUnpublish() {
             const payload = { message: this.revisionMessage };
 
-            this.$axios.post(this.actions.unpublish, { data: payload }).then(response => {
-                this.$toast.success(__('Unpublished'));
-                this.revisionMessage = null;
-                this.$emit('saved', { published: false, isWorkingCopy: false, response });
-            }).catch(e => this.handleAxiosError(e));
+            this.$axios
+                .post(this.actions.unpublish, { data: payload })
+                .then((response) => {
+                    this.$toast.success(__('Unpublished'));
+                    this.revisionMessage = null;
+                    this.$emit('saved', { published: false, isWorkingCopy: false, response });
+                })
+                .catch((e) => this.handleAxiosError(e));
         },
 
         submitRevision() {
             const payload = { message: this.revisionMessage };
 
-            this.$axios.post(this.actions.createRevision, payload).then(response => {
-                this.$toast.success(__('Revision created'));
-                this.revisionMessage = null;
-                this.$emit('saved', { isWorkingCopy: true, response });
-            }).catch(e => this.handleAxiosError(e));
+            this.$axios
+                .post(this.actions.createRevision, payload)
+                .then((response) => {
+                    this.$toast.success(__('Revision created'));
+                    this.revisionMessage = null;
+                    this.$emit('saved', { isWorkingCopy: true, response });
+                })
+                .catch((e) => this.handleAxiosError(e));
         },
 
         handleAxiosError(e) {
             this.saving = false;
             this.$toast.error(__('Something went wrong'));
-        }
-
-    }
-
-}
+        },
+    },
+};
 </script>
diff --git a/resources/js/components/terms/PublishForm.vue b/resources/js/components/terms/PublishForm.vue
index 3e0d3a6850..8888ac07ff 100644
--- a/resources/js/components/terms/PublishForm.vue
+++ b/resources/js/components/terms/PublishForm.vue
@@ -1,19 +1,20 @@
 <template>
-
     <div>
         <breadcrumb v-if="breadcrumbs" :url="breadcrumbs[1].url" :title="breadcrumbs[1].text" />
 
-        <div class="flex items-baseline mb-6">
-            <h1 class="flex-1 self-start rtl:ml-4 ltr:mr-4">
+        <div class="mb-6 flex items-baseline">
+            <h1 class="flex-1 self-start ltr:mr-4 rtl:ml-4">
                 <div class="flex items-baseline">
-                    <span v-if="! isCreating"
-                        class="little-dot rtl:ml-2 ltr:mr-2 -top-1"
-                        :class="{ 'bg-green-600': published, 'bg-gray-600': !published }" />
+                    <span
+                        v-if="!isCreating"
+                        class="little-dot -top-1 ltr:mr-2 rtl:ml-2"
+                        :class="{ 'bg-green-600': published, 'bg-gray-600': !published }"
+                    />
                     <span class="break-overflowing-words" v-html="formattedTitle" />
                 </div>
             </h1>
 
-            <dropdown-list class="rtl:ml-4 ltr:mr-4" v-if="canEditBlueprint || hasItemActions">
+            <dropdown-list class="ltr:mr-4 rtl:ml-4" v-if="canEditBlueprint || hasItemActions">
                 <dropdown-item :text="__('Edit Blueprint')" v-if="canEditBlueprint" :redirect="actions.editBlueprint" />
                 <li class="divider" />
                 <data-list-inline-actions
@@ -27,33 +28,28 @@
                 />
             </dropdown-list>
 
-            <div class="pt-px text-2xs text-gray-600 flex rtl:ml-4 ltr:mr-4" v-if="readOnly">
-                <svg-icon name="light/lock" class="w-4 rtl:ml-1 ltr:mr-1 -mt-1" /> {{ __('Read Only') }}
+            <div class="flex pt-px text-2xs text-gray-600 ltr:mr-4 rtl:ml-4" v-if="readOnly">
+                <svg-icon name="light/lock" class="-mt-1 w-4 ltr:mr-1 rtl:ml-1" /> {{ __('Read Only') }}
             </div>
 
-            <div class="hidden md:flex items-center">
-
+            <div class="hidden items-center md:flex">
                 <save-button-options
                     v-if="!readOnly"
                     :show-options="!revisionsEnabled && !isInline"
                     :button-class="saveButtonClass"
                     :preferences-prefix="preferencesPrefix"
                 >
-                    <button
-                        :class="saveButtonClass"
-                        :disabled="!canSave"
-                        @click.prevent="save"
-                        v-text="saveText"
-                    />
+                    <button :class="saveButtonClass" :disabled="!canSave" @click.prevent="save" v-text="saveText" />
                 </save-button-options>
 
                 <button
                     v-if="revisionsEnabled"
-                    class="rtl:mr-4 ltr:ml-4 btn-primary flex items-center"
+                    class="btn-primary flex items-center ltr:ml-4 rtl:mr-4"
                     :disabled="!canPublish"
-                    @click="confirmingPublish = true">
+                    @click="confirmingPublish = true"
+                >
                     <span v-text="__('Publish')" />
-                    <svg-icon name="micro/chevron-down-xs" class="rtl:mr-2 ltr:ml-2 w-2" />
+                    <svg-icon name="micro/chevron-down-xs" class="w-2 ltr:ml-2 rtl:mr-2" />
                 </button>
             </div>
 
@@ -108,30 +104,44 @@
                             @blur="container.$emit('blur', $event)"
                         >
                             <template #actions="{ shouldShowSidebar }">
-                            <div class="card p-0" :class="{ 'mb-5': showLivePreviewButton || showVisitUrlButton || localizations.length > 1 }">
-
-                                <div :class="{ 'hi': !shouldShowSidebar }">
-
-                                    <div class="p-3 flex items-center space-x-2" v-if="showLivePreviewButton || showVisitUrlButton">
-                                        <button
-                                            class="flex items-center justify-center btn w-full"
-                                            v-if="showLivePreviewButton"
-                                            @click="openLivePreview">
-                                            <svg-icon name="light/synchronize" class="h-4 w-4 rtl:ml-2 ltr:mr-2 shrink-0" />
-                                            <span>{{ __('Live Preview') }}</span>
-                                        </button>
-                                        <a
-                                            class="flex items-center justify-center btn w-full"
-                                            v-if="showVisitUrlButton"
-                                            :href="permalink"
-                                            target="_blank">
-                                            <svg-icon name="light/external-link" class="w-4 h-4 rtl:ml-2 ltr:mr-2 shrink-0" />
-                                            <span>{{ __('Visit URL') }}</span>
-                                        </a>
+                                <div
+                                    class="card p-0"
+                                    :class="{
+                                        'mb-5': showLivePreviewButton || showVisitUrlButton || localizations.length > 1,
+                                    }"
+                                >
+                                    <div :class="{ hi: !shouldShowSidebar }">
+                                        <div
+                                            class="flex items-center space-x-2 p-3"
+                                            v-if="showLivePreviewButton || showVisitUrlButton"
+                                        >
+                                            <button
+                                                class="btn flex w-full items-center justify-center"
+                                                v-if="showLivePreviewButton"
+                                                @click="openLivePreview"
+                                            >
+                                                <svg-icon
+                                                    name="light/synchronize"
+                                                    class="h-4 w-4 shrink-0 ltr:mr-2 rtl:ml-2"
+                                                />
+                                                <span>{{ __('Live Preview') }}</span>
+                                            </button>
+                                            <a
+                                                class="btn flex w-full items-center justify-center"
+                                                v-if="showVisitUrlButton"
+                                                :href="permalink"
+                                                target="_blank"
+                                            >
+                                                <svg-icon
+                                                    name="light/external-link"
+                                                    class="h-4 w-4 shrink-0 ltr:mr-2 rtl:ml-2"
+                                                />
+                                                <span>{{ __('Visit URL') }}</span>
+                                            </a>
+                                        </div>
                                     </div>
-                                </div>
 
-                                <!--
+                                    <!--
                                 TODO
                                 <div class="flex items-center border-t justify-between px-4 py-2" v-if="!revisionsEnabled">
                                     <label v-text="__('Published')" class="publish-field-label font-medium" />
@@ -170,31 +180,57 @@
                                 </div>
                                 -->
 
-                                <div class="p-4 border-t dark:border-dark-900" v-if="localizations.length > 1">
-                                    <label class="publish-field-label font-medium mb-2" v-text="__('Sites')" />
-                                    <div
-                                        v-for="option in localizations"
-                                        :key="option.handle"
-                                        class="text-sm flex items-center -mx-4 px-4 py-2 cursor-pointer"
-                                        :class="option.active ? 'bg-blue-100 dark:bg-dark-300' : 'hover:bg-gray-200 dark:hover:bg-dark-400'"
-                                        @click="localizationSelected(option)"
-                                    >
-                                        <div class="flex-1 flex items-center" :class="{ 'line-through': !option.exists }">
-                                            <span class="little-dot rtl:ml-2 ltr:mr-2" :class="{
-                                                'bg-green-600': option.published,
-                                                'bg-gray-500': !option.published,
-                                                'bg-red-500': !option.exists
-                                            }" />
-                                            {{ __(option.name) }}
-                                            <loading-graphic :size="14" text="" class="rtl:mr-2 ltr:ml-2" v-if="localizing === option.handle" />
+                                    <div class="border-t p-4 dark:border-dark-900" v-if="localizations.length > 1">
+                                        <label class="publish-field-label mb-2 font-medium" v-text="__('Sites')" />
+                                        <div
+                                            v-for="option in localizations"
+                                            :key="option.handle"
+                                            class="-mx-4 flex cursor-pointer items-center px-4 py-2 text-sm"
+                                            :class="
+                                                option.active
+                                                    ? 'bg-blue-100 dark:bg-dark-300'
+                                                    : 'hover:bg-gray-200 dark:hover:bg-dark-400'
+                                            "
+                                            @click="localizationSelected(option)"
+                                        >
+                                            <div
+                                                class="flex flex-1 items-center"
+                                                :class="{ 'line-through': !option.exists }"
+                                            >
+                                                <span
+                                                    class="little-dot ltr:mr-2 rtl:ml-2"
+                                                    :class="{
+                                                        'bg-green-600': option.published,
+                                                        'bg-gray-500': !option.published,
+                                                        'bg-red-500': !option.exists,
+                                                    }"
+                                                />
+                                                {{ __(option.name) }}
+                                                <loading-graphic
+                                                    :size="14"
+                                                    text=""
+                                                    class="ltr:ml-2 rtl:mr-2"
+                                                    v-if="localizing === option.handle"
+                                                />
+                                            </div>
+                                            <div
+                                                class="badge-sm bg-orange"
+                                                v-if="option.origin"
+                                                v-text="__('Origin')"
+                                            />
+                                            <div
+                                                class="badge-sm bg-blue dark:bg-dark-blue-100"
+                                                v-if="option.active"
+                                                v-text="__('Active')"
+                                            />
+                                            <div
+                                                class="badge-sm bg-purple"
+                                                v-if="option.root && !option.origin && !option.active"
+                                                v-text="__('Root')"
+                                            />
                                         </div>
-                                        <div class="badge-sm bg-orange" v-if="option.origin" v-text="__('Origin')" />
-                                        <div class="badge-sm bg-blue dark:bg-dark-blue-100" v-if="option.active" v-text="__('Active')" />
-                                        <div class="badge-sm bg-purple" v-if="option.root && !option.origin && !option.active" v-text="__('Root')" />
                                     </div>
                                 </div>
-
-                            </div>
                             </template>
                         </publish-tabs>
                     </transition>
@@ -202,34 +238,38 @@
             </live-preview>
         </publish-container>
 
-        <div class="md:hidden mt-6 flex items-center">
+        <div class="mt-6 flex items-center md:hidden">
             <button
                 v-if="!readOnly"
                 class="btn-lg"
                 :class="{
-                    'btn-primary w-full': ! revisionsEnabled,
-                    'btn w-1/2 rtl:ml-4 ltr:mr-4': revisionsEnabled,
+                    'btn-primary w-full': !revisionsEnabled,
+                    'btn w-1/2 ltr:mr-4 rtl:ml-4': revisionsEnabled,
                 }"
                 :disabled="!canSave"
                 @click.prevent="save"
-                v-text="__(revisionsEnabled ? 'Save Changes' : 'Save')" />
+                v-text="__(revisionsEnabled ? 'Save Changes' : 'Save')"
+            />
 
             <button
                 v-if="revisionsEnabled"
-                class="rtl:mr-2 ltr:ml-2 btn-primary btn-lg justify-center flex items-center w-1/2"
+                class="btn-primary btn-lg flex w-1/2 items-center justify-center ltr:ml-2 rtl:mr-2"
                 :disabled="!canPublish"
-                @click="confirmingPublish = true">
+                @click="confirmingPublish = true"
+            >
                 <span v-text="__('Publish')" />
-                <svg-icon name="micro/chevron-down-xs" class="rtl:mr-2 ltr:ml-2 w-2" />
+                <svg-icon name="micro/chevron-down-xs" class="w-2 ltr:ml-2 rtl:mr-2" />
             </button>
         </div>
 
-        <stack name="revision-history" v-if="showRevisionHistory" @closed="showRevisionHistory = false" :narrow="true" v-slot="{ close }">
-            <revision-history
-                :index-url="actions.revisions"
-                :restore-url="actions.restore"
-                @closed="close"
-            />
+        <stack
+            name="revision-history"
+            v-if="showRevisionHistory"
+            @closed="showRevisionHistory = false"
+            :narrow="true"
+            v-slot="{ close }"
+        >
+            <revision-history :index-url="actions.revisions" :restore-url="actions.restore" @closed="close" />
         </stack>
 
         <publish-actions
@@ -242,10 +282,8 @@
             @saved="publishActionCompleted"
         />
     </div>
-
 </template>
 
-
 <script>
 import PublishActions from './PublishActions.vue';
 import SaveButtonOptions from '../publish/SaveButtonOptions.vue';
@@ -256,12 +294,7 @@ import HasActions from '../publish/HasActions';
 import striptags from 'striptags';
 
 export default {
-
-    mixins: [
-        HasPreferences,
-        HasHiddenFields,
-        HasActions,
-    ],
+    mixins: [HasPreferences, HasHiddenFields, HasActions],
 
     components: {
         PublishActions,
@@ -334,11 +367,10 @@ export default {
             saveKeyBinding: null,
             quickSaveKeyBinding: null,
             quickSave: false,
-        }
+        };
     },
 
     computed: {
-
         formattedTitle() {
             return striptags(__(this.title));
         },
@@ -348,7 +380,7 @@ export default {
         },
 
         somethingIsLoading() {
-            return ! this.$progress.isComplete();
+            return !this.$progress.isComplete();
         },
 
         canSave() {
@@ -358,7 +390,9 @@ export default {
         canPublish() {
             if (!this.revisionsEnabled) return false;
 
-            return !this.readOnly && !this.isCreating && !this.canSave && !this.somethingIsLoading && this.isWorkingCopy;
+            return (
+                !this.readOnly && !this.isCreating && !this.canSave && !this.somethingIsLoading && this.isWorkingCopy
+            );
         },
 
         livePreviewUrl() {
@@ -397,38 +431,34 @@ export default {
 
         saveButtonClass() {
             return {
-                'btn': this.revisionsEnabled,
-                'btn-primary': ! this.revisionsEnabled,
+                btn: this.revisionsEnabled,
+                'btn-primary': !this.revisionsEnabled,
             };
         },
 
         afterSaveOption() {
             return this.getPreference('after_save');
         },
-
     },
 
     watch: {
-
         published(published) {
             this.$refs.container.dirty();
         },
 
         saving(saving) {
             this.$progress.loading(`${this.publishContainer}-entry-publish-form`, saving);
-        }
-
+        },
     },
 
     methods: {
-
         clearErrors() {
             this.error = null;
             this.errors = {};
         },
 
         save() {
-            if (! this.canSave) {
+            if (!this.canSave) {
                 this.quickSave = false;
                 return;
             }
@@ -440,38 +470,44 @@ export default {
         },
 
         runBeforeSaveHook() {
-            Statamic.$hooks.run('term.saving', {
-                taxonomy: this.taxonomyHandle,
-                values: this.values,
-                container: this.$refs.container,
-                storeName: this.publishContainer,
-            })
-            .then(this.performSaveRequest)
-            .catch(error => {
-                this.saving = false;
-                this.$toast.error(error || 'Something went wrong');
-            });
+            Statamic.$hooks
+                .run('term.saving', {
+                    taxonomy: this.taxonomyHandle,
+                    values: this.values,
+                    container: this.$refs.container,
+                    storeName: this.publishContainer,
+                })
+                .then(this.performSaveRequest)
+                .catch((error) => {
+                    this.saving = false;
+                    this.$toast.error(error || 'Something went wrong');
+                });
         },
 
         performSaveRequest() {
-            const payload = { ...this.visibleValues, ...{
-                _blueprint: this.fieldset.handle,
-                published: this.published,
-                _localized: this.localizedFields,
-            }};
-
-            this.$axios[this.method](this.actions.save, payload).then(response => {
-                this.saving = false;
-                if (! response.data.saved) {
-                    return this.$toast.error(__(`Couldn't save term`));
-                }
-                this.title = response.data.data.title;
-                this.permalink = response.data.data.permalink;
-                this.isWorkingCopy = true;
-                if (!this.isCreating) this.$toast.success(__('Saved'));
-                this.$refs.container.saved();
-                this.runAfterSaveHook(response);
-            }).catch(e => this.handleAxiosError(e));
+            const payload = {
+                ...this.visibleValues,
+                ...{
+                    _blueprint: this.fieldset.handle,
+                    published: this.published,
+                    _localized: this.localizedFields,
+                },
+            };
+
+            this.$axios[this.method](this.actions.save, payload)
+                .then((response) => {
+                    this.saving = false;
+                    if (!response.data.saved) {
+                        return this.$toast.error(__(`Couldn't save term`));
+                    }
+                    this.title = response.data.data.title;
+                    this.permalink = response.data.data.permalink;
+                    this.isWorkingCopy = true;
+                    if (!this.isCreating) this.$toast.success(__('Saved'));
+                    this.$refs.container.saved();
+                    this.runAfterSaveHook(response);
+                })
+                .catch((e) => this.handleAxiosError(e));
         },
 
         confirmPublish() {
@@ -485,7 +521,7 @@ export default {
                 .run('term.saved', {
                     taxonomy: this.taxonomyHandle,
                     reference: this.initialReference,
-                    response
+                    response,
                 })
                 .then(() => {
                     // If revisions are enabled, just emit event.
@@ -516,7 +552,8 @@ export default {
                     }
 
                     this.quickSave = false;
-                }).catch(e => {});
+                })
+                .catch((e) => {});
         },
 
         handleAxiosError(e) {
@@ -536,7 +573,7 @@ export default {
             if (localization.active) return;
 
             if (this.isDirty) {
-                if (! confirm(__('Are you sure? Unsaved changes will be lost.'))) {
+                if (!confirm(__('Are you sure? Unsaved changes will be lost.'))) {
                     return;
                 }
             }
@@ -555,7 +592,7 @@ export default {
         },
 
         editLocalization(localization) {
-            this.$axios.get(localization.url).then(response => {
+            this.$axios.get(localization.url).then((response) => {
                 const data = response.data;
                 this.values = data.values;
                 this.originValues = data.originValues;
@@ -573,18 +610,18 @@ export default {
                 this.site = localization.handle;
                 this.localizing = false;
                 this.$nextTick(() => this.$refs.container.clearDirtyState());
-            })
+            });
         },
 
         createLocalization(localization) {
             const url = this.activeLocalization.url + '/localize';
-            this.$axios.post(url, { site: localization.handle }).then(response => {
+            this.$axios.post(url, { site: localization.handle }).then((response) => {
                 this.editLocalization(response.data);
             });
         },
 
         localizationStatusText(localization) {
-            if (! localization.exists) return 'This entry does not exist for this site.';
+            if (!localization.exists) return 'This entry does not exist for this site.';
 
             return localization.published
                 ? 'This entry exists in this site, and is published.'
@@ -598,7 +635,7 @@ export default {
                     this.isPreviewing = true;
                     return this.$wait(300);
                 })
-                .then(() => this.tabsVisible = true);
+                .then(() => (this.tabsVisible = true));
         },
 
         closeLivePreview() {
@@ -612,7 +649,7 @@ export default {
             if (published !== undefined) this.published = published;
             this.isWorkingCopy = isWorkingCopy;
             this.confirmingPublish = false;
-            this.permalink = response.data.data.permalink
+            this.permalink = response.data.data.permalink;
             this.$nextTick(() => this.$emit('saved', response));
         },
 
@@ -623,10 +660,10 @@ export default {
         },
 
         syncField(handle) {
-            if (! confirm(__('Are you sure? This field\'s value will be replaced by the value in the original entry.')))
+            if (!confirm(__("Are you sure? This field's value will be replaced by the value in the original entry.")))
                 return;
 
-            this.localizedFields = this.localizedFields.filter(field => field !== handle);
+            this.localizedFields = this.localizedFields.filter((field) => field !== handle);
             this.$refs.container.setFieldValue(handle, this.originValues[handle]);
 
             // Update the meta for this field. For instance, a relationship field would have its data preloaded into it.
@@ -635,8 +672,7 @@ export default {
         },
 
         desyncField(handle) {
-            if (!this.localizedFields.includes(handle))
-                this.localizedFields.push(handle);
+            if (!this.localizedFields.includes(handle)) this.localizedFields.push(handle);
 
             this.$refs.container.dirty();
         },
@@ -648,17 +684,16 @@ export default {
                 this.values = this.resetValuesFromResponse(response.data.values);
             }
         },
-
     },
 
     mounted() {
-        this.saveKeyBinding = this.$keys.bindGlobal(['mod+return'], e => {
+        this.saveKeyBinding = this.$keys.bindGlobal(['mod+return'], (e) => {
             e.preventDefault();
             if (this.confirmingPublish) return;
             this.canPublish ? this.confirmPublish() : this.save();
         });
 
-        this.quickSaveKeyBinding = this.$keys.bindGlobal(['mod+s'], e => {
+        this.quickSaveKeyBinding = this.$keys.bindGlobal(['mod+s'], (e) => {
             e.preventDefault();
             if (this.confirmingPublish) return;
             this.quickSave = true;
@@ -675,7 +710,6 @@ export default {
     unmounted() {
         this.saveKeyBinding.destroy();
         this.quickSaveKeyBinding.destroy();
-    }
-
-}
+    },
+};
 </script>
diff --git a/resources/js/components/updater/Release.vue b/resources/js/components/updater/Release.vue
index 9fded14f0b..7496379424 100644
--- a/resources/js/components/updater/Release.vue
+++ b/resources/js/components/updater/Release.vue
@@ -1,13 +1,13 @@
 <template>
-
     <div class="card update-release mb-10">
-        <div class="flex justify-between mb-6">
+        <div class="mb-6 flex justify-between">
             <div>
                 <h1>{{ release.version }}</h1>
                 <h5 class="date" v-text="__('Released on :date', { date: release.date })" />
             </div>
             <div v-if="showActions">
-                <button class="btn"
+                <button
+                    class="btn"
                     :disabled="release.type === 'current'"
                     v-text="installButtonText"
                     @click="confirmationPrompt = release"
@@ -19,35 +19,33 @@
         </div>
 
         <confirmation-modal
-             v-if="confirmationPrompt"
-             :buttonText="__('OK')"
-             :cancellable="false"
-             @confirm="confirmationPrompt = null"
-         >
+            v-if="confirmationPrompt"
+            :buttonText="__('OK')"
+            :cancellable="false"
+            @confirm="confirmationPrompt = null"
+        >
             <div class="prose">
                 <p v-text="confirmationText" />
                 <code-block copyable :text="command" />
                 <p v-html="link"></p>
             </div>
-         </confirmation-modal>
+        </confirmation-modal>
     </div>
-
 </template>
 
 <script>
 export default {
-
     props: {
         release: { type: Object, required: true },
         package: { type: String, required: true },
         packageName: { type: String, required: true },
-        showActions: { type: Boolean }
+        showActions: { type: Boolean },
     },
 
     data() {
         return {
             confirmationPrompt: null,
-        }
+        };
     },
 
     computed: {
@@ -56,7 +54,7 @@ export default {
                 .replaceAll('[new]', '<span class="label" style="background: #5bc0de;">NEW</span>')
                 .replaceAll('[fix]', '<span class="label" style="background: #5cb85c;">FIX</span>')
                 .replaceAll('[break]', '<span class="label" style="background: #d9534f;">BREAK</span>')
-                .replaceAll('[na]', '<span class="label" style="background: #e8e8e8;">N/A</span>')
+                .replaceAll('[na]', '<span class="label" style="background: #e8e8e8;">N/A</span>');
         },
 
         installButtonText() {
@@ -92,9 +90,12 @@ export default {
         },
 
         link() {
-            return __('Learn more about :link', { link: `<a href="https://statamic.dev/updating" target="_blank">${__('Updates')}</a>`}) + '.';
+            return (
+                __('Learn more about :link', {
+                    link: `<a href="https://statamic.dev/updating" target="_blank">${__('Updates')}</a>`,
+                }) + '.'
+            );
         },
-    }
-
-}
+    },
+};
 </script>
diff --git a/resources/js/components/updater/Updater.vue b/resources/js/components/updater/Updater.vue
index c8e06e2f90..6cc10209fc 100644
--- a/resources/js/components/updater/Updater.vue
+++ b/resources/js/components/updater/Updater.vue
@@ -1,19 +1,24 @@
 <template>
     <div>
-        <div class="flex items-center mb-6">
+        <div class="mb-6 flex items-center">
             <h1 class="flex-1">
                 <span v-text="name" />
-                <span v-if="currentVersion" class="font-normal text-gray-700 rtl:mr-2 ltr:ml-2">{{ currentVersion }}</span>
+                <span v-if="currentVersion" class="font-normal text-gray-700 ltr:ml-2 rtl:mr-2">{{
+                    currentVersion
+                }}</span>
             </h1>
-            <button v-if="!onLatestVersion" class="btn-primary rtl:mr-4 ltr:ml-4" @click="modalOpen = true">{{ __('Update') }}</button>
+            <button v-if="!onLatestVersion" class="btn-primary ltr:ml-4 rtl:mr-4" @click="modalOpen = true">
+                {{ __('Update') }}
+            </button>
             <div v-if="onLatestVersion" v-text="__('Up to date')" />
         </div>
 
         <div v-if="gettingChangelog" class="card p-6 text-center">
-            <loading-graphic  />
+            <loading-graphic />
         </div>
 
-        <div class="bg-yellow border-yellow-dark border-dashed p-4 text-xs border mb-6 rounded cursor-pointer flex items-center justify-between"
+        <div
+            class="mb-6 flex cursor-pointer items-center justify-between rounded border border-dashed border-yellow-dark bg-yellow p-4 text-xs"
             v-if="!showingUnlicensedReleases && hasUnlicensedReleases"
             @click="showingUnlicensedReleases = true"
         >
@@ -44,12 +49,7 @@
             :show-actions="showActions"
         />
 
-        <confirmation-modal
-            v-if="modalOpen"
-            :cancellable="false"
-            :button-text="__('OK')"
-            @confirm="modalOpen = false"
-        >
+        <confirmation-modal v-if="modalOpen" :cancellable="false" :button-text="__('OK')" @confirm="modalOpen = false">
             <div class="prose">
                 <p v-text="`${__('messages.updater_update_to_latest_command')}:`" />
                 <code-block copyable :text="`composer update ${package}`" />
@@ -60,80 +60,79 @@
 </template>
 
 <script>
-    import Release from './Release.vue';
-
-    export default {
-
-        components: {
-            Release
+import Release from './Release.vue';
+
+export default {
+    components: {
+        Release,
+    },
+
+    props: ['slug', 'package', 'name'],
+
+    data() {
+        return {
+            gettingChangelog: true,
+            changelog: [],
+            currentVersion: null,
+            modalOpen: false,
+            latestRelease: null,
+            showingUnlicensedReleases: false,
+        };
+    },
+
+    computed: {
+        toEleven() {
+            return { timeout: Statamic.$config.get('ajaxTimeout') };
         },
 
-        props: [
-            'slug',
-            'package',
-            'name',
-        ],
-
-        data() {
-            return {
-                gettingChangelog: true,
-                changelog: [],
-                currentVersion: null,
-                modalOpen: false,
-                latestRelease: null,
-                showingUnlicensedReleases: false,
-            };
+        showActions() {
+            return !this.gettingChangelog;
         },
 
-        computed: {
-            toEleven() {
-                return {timeout: Statamic.$config.get('ajaxTimeout')};
-            },
-
-            showActions() {
-                return ! this.gettingChangelog;
-            },
-
-            onLatestVersion() {
-                return this.currentVersion && this.currentVersion == this.latestVersion;
-            },
-
-            licensedReleases() {
-                return this.changelog.filter(release => release.licensed);
-            },
-
-            unlicensedReleases() {
-                return this.changelog.filter(release => !release.licensed);
-            },
+        onLatestVersion() {
+            return this.currentVersion && this.currentVersion == this.latestVersion;
+        },
 
-            hasUnlicensedReleases() {
-                return this.unlicensedReleases.length > 0;
-            },
+        licensedReleases() {
+            return this.changelog.filter((release) => release.licensed);
+        },
 
-            latestVersion() {
-                return this.latestRelease && this.latestRelease.version;
-            },
+        unlicensedReleases() {
+            return this.changelog.filter((release) => !release.licensed);
+        },
 
-            link() {
-                return __('Learn more about :link', { link: `<a href="https://statamic.dev/updating" target="_blank">${__('Updates')}</a>`}) + '.';
-            },
+        hasUnlicensedReleases() {
+            return this.unlicensedReleases.length > 0;
         },
 
-        created() {
-            this.getChangelog();
+        latestVersion() {
+            return this.latestRelease && this.latestRelease.version;
         },
 
-        methods: {
-            getChangelog() {
-                this.gettingChangelog = true;
-
-                this.$axios.get(cp_url(`/updater/${this.slug}/changelog`)).then(response => {
-                    this.gettingChangelog = false;
-                    this.changelog = response.data.changelog;
-                    this.currentVersion = response.data.currentVersion;
-                    this.latestRelease = response.data.changelog[0];
-                });
-            },
-        }
-    }
+        link() {
+            return (
+                __('Learn more about :link', {
+                    link: `<a href="https://statamic.dev/updating" target="_blank">${__('Updates')}</a>`,
+                }) + '.'
+            );
+        },
+    },
+
+    created() {
+        this.getChangelog();
+    },
+
+    methods: {
+        getChangelog() {
+            this.gettingChangelog = true;
+
+            this.$axios.get(cp_url(`/updater/${this.slug}/changelog`)).then((response) => {
+                this.gettingChangelog = false;
+                this.changelog = response.data.changelog;
+                this.currentVersion = response.data.currentVersion;
+                this.latestRelease = response.data.changelog[0];
+            });
+        },
+    },
+};
 </script>
diff --git a/resources/js/components/user-groups/Listing.vue b/resources/js/components/user-groups/Listing.vue
index 575268615d..8303654e60 100644
--- a/resources/js/components/user-groups/Listing.vue
+++ b/resources/js/components/user-groups/Listing.vue
@@ -1,5 +1,5 @@
 <template>
-    <data-list :rows="rows" :columns="columns" v-slot="{ }">
+    <data-list :rows="rows" :columns="columns" v-slot="{}">
         <div class="card p-0">
             <data-list-table>
                 <template #cell-title="{ row: group, index }">
@@ -19,7 +19,8 @@
                             <resource-deleter
                                 :ref="`deleter_${group.id}`"
                                 :resource="group"
-                                @deleted="removeRow(group)">
+                                @deleted="removeRow(group)"
+                            >
                             </resource-deleter>
                         </dropdown-item>
                     </dropdown-list>
@@ -30,10 +31,9 @@
 </template>
 
 <script>
-import Listing from '../Listing.vue'
+import Listing from '../Listing.vue';
 
 export default {
-
     mixins: [Listing],
 
     props: {
@@ -48,9 +48,8 @@ export default {
                 { label: __('Handle'), field: 'handle' },
                 { label: __('Users'), field: 'users' },
                 { label: __('Roles'), field: 'roles' },
-            ]
-        }
-    }
-
-}
+            ],
+        };
+    },
+};
 </script>
diff --git a/resources/js/components/user-groups/PublishForm.vue b/resources/js/components/user-groups/PublishForm.vue
index 9833560c96..69ba2de57c 100644
--- a/resources/js/components/user-groups/PublishForm.vue
+++ b/resources/js/components/user-groups/PublishForm.vue
@@ -1,19 +1,14 @@
 <template>
-
     <div>
-
         <header class="mb-3">
             <breadcrumb :url="cp_url('user-groups')" :title="__('User Groups')" />
             <div class="flex items-center">
                 <h1 class="flex-1" v-text="__(title)" />
-                    <dropdown-list class="rtl:ml-2 ltr:mr-2" v-if="canEditBlueprint">
-                        <dropdown-item :text="__('Edit Blueprint')" :redirect="actions.editBlueprint" />
-                    </dropdown-list>
+                <dropdown-list class="ltr:mr-2 rtl:ml-2" v-if="canEditBlueprint">
+                    <dropdown-item :text="__('Edit Blueprint')" :redirect="actions.editBlueprint" />
+                </dropdown-list>
 
-                    <button
-                        class="btn-primary"
-                        @click.prevent="save"
-                        v-text="__('Save')" />
+                <button class="btn-primary" @click.prevent="save" v-text="__('Save')" />
 
                 <slot name="action-buttons-right" />
             </div>
@@ -41,19 +36,14 @@
                 ></publish-tabs>
             </div>
         </publish-container>
-
     </div>
 </template>
 
-
 <script>
 import HasHiddenFields from '../publish/HasHiddenFields';
 
 export default {
-
-    mixins: [
-        HasHiddenFields,
-    ],
+    mixins: [HasHiddenFields],
 
     props: {
         publishContainer: String,
@@ -76,19 +66,16 @@ export default {
             error: null,
             errors: {},
             title: this.initialTitle,
-        }
+        };
     },
 
     computed: {
-
         hasErrors() {
             return this.error || Object.keys(this.errors).length;
-        }
-
+        },
     },
 
     methods: {
-
         clearErrors() {
             this.error = null;
             this.errors = {};
@@ -97,32 +84,32 @@ export default {
         save() {
             this.clearErrors();
 
-            this.$axios[this.method](this.actions.save, this.visibleValues).then(response => {
-                this.title = response.data.title;
-                this.$refs.container.saved();
-                if (this.isCreating) window.location = response.data.redirect;
-                this.$toast.success(__('Saved'));
-                this.$nextTick(() => this.$emit('saved', response));
-            }).catch(e => {
-                if (e.response && e.response.status === 422) {
-                    const { message, errors } = e.response.data;
-                    this.error = message;
-                    this.errors = errors;
-                    this.$toast.error(message);
-                } else {
-                    this.$toast.error(__('Something went wrong'));
-                }
-            });
-        }
-
+            this.$axios[this.method](this.actions.save, this.visibleValues)
+                .then((response) => {
+                    this.title = response.data.title;
+                    this.$refs.container.saved();
+                    if (this.isCreating) window.location = response.data.redirect;
+                    this.$toast.success(__('Saved'));
+                    this.$nextTick(() => this.$emit('saved', response));
+                })
+                .catch((e) => {
+                    if (e.response && e.response.status === 422) {
+                        const { message, errors } = e.response.data;
+                        this.error = message;
+                        this.errors = errors;
+                        this.$toast.error(message);
+                    } else {
+                        this.$toast.error(__('Something went wrong'));
+                    }
+                });
+        },
     },
 
     mounted() {
-        this.$keys.bindGlobal(['mod+s'], e => {
+        this.$keys.bindGlobal(['mod+s'], (e) => {
             e.preventDefault();
             this.save();
         });
-    }
-
-}
+    },
+};
 </script>
diff --git a/resources/js/components/users/ChangePassword.vue b/resources/js/components/users/ChangePassword.vue
index 0a2cc5bd6b..ff298495f2 100644
--- a/resources/js/components/users/ChangePassword.vue
+++ b/resources/js/components/users/ChangePassword.vue
@@ -1,21 +1,17 @@
 <template>
     <popover placement="bottom" ref="popper">
-        <button
-            slot="trigger"
-            class="btn"
-            v-text="__('Change Password')"
-        />
+        <button slot="trigger" class="btn" v-text="__('Change Password')" />
         <div class="saving-overlay flex justify-center text-center" v-if="saving">
             <loading-graphic :text="__('Saving')" />
         </div>
-        <div class="publish-fields p-4 pb-0 w-96">
+        <div class="publish-fields w-96 p-4 pb-0">
             <form-group
                 v-if="requiresCurrentPassword"
                 handle="password"
                 :display="__('Current Password')"
                 v-model="currentPassword"
                 :errors="errors.current_password"
-                class="p-0 mb-6"
+                class="mb-6 p-0"
                 :config="{ input_type: this.inputType }"
             />
             <form-group
@@ -23,31 +19,29 @@
                 :display="__('Password')"
                 v-model="password"
                 :errors="errors.password"
-                class="p-0 mb-6"
+                class="mb-6 p-0"
                 :config="{ input_type: this.inputType }"
             />
             <form-group
                 handle="confirmation"
                 :display="__('Password Confirmation')"
                 v-model="confirmation"
-                class="p-0 mb-6"
+                class="mb-6 p-0"
                 :config="{ input_type: this.inputType }"
             />
         </div>
-        <div class="flex items-center bg-gray-21 dark:bg-dark-575 border-t dark:border-dark-900 rounded-b px-4 py-2">
+        <div class="bg-gray-21 flex items-center rounded-b border-t px-4 py-2 dark:border-dark-900 dark:bg-dark-575">
             <button class="btn-primary" @click.prevent="save">{{ __('Change Password') }}</button>
-            <label class="rtl:mr-4 ltr:ml-4">
+            <label class="ltr:ml-4 rtl:mr-4">
                 <input type="checkbox" v-model="reveal" />
                 {{ __('Reveal Password') }}
             </label>
         </div>
     </popover>
-
 </template>
 
 <script>
 export default {
-
     props: {
         saveUrl: String,
         requiresCurrentPassword: Boolean,
@@ -61,24 +55,21 @@ export default {
             currentPassword: null,
             password: null,
             confirmation: null,
-            reveal: false
-        }
+            reveal: false,
+        };
     },
 
     computed: {
-
         hasErrors() {
             return this.error || Object.keys(this.errors).length;
         },
 
         inputType() {
             return this.reveal ? 'text' : 'password';
-        }
-
+        },
     },
 
     methods: {
-
         clearErrors() {
             this.error = null;
             this.errors = {};
@@ -88,32 +79,33 @@ export default {
             this.clearErrors();
             this.saving = true;
 
-            this.$axios.patch(this.saveUrl, {
-                current_password: this.currentPassword,
-                password: this.password,
-                password_confirmation: this.confirmation
-            }).then(response => {
-                this.$toast.success(__('Password changed'));
-                this.$refs.popper.close();
-                this.saving = false;
-                this.password = null;
-                this.currentPassword = null;
-                this.confirmation = null;
-            }).catch(e => {
-                if (e.response && e.response.status === 422) {
-                    const { message, errors } = e.response.data;
-                    this.error = message;
-                    this.errors = errors;
-                    this.$toast.error(message);
+            this.$axios
+                .patch(this.saveUrl, {
+                    current_password: this.currentPassword,
+                    password: this.password,
+                    password_confirmation: this.confirmation,
+                })
+                .then((response) => {
+                    this.$toast.success(__('Password changed'));
+                    this.$refs.popper.close();
                     this.saving = false;
-                } else {
-                    this.$toast.error(__('Unable to change password'));
-                    this.saving = false;
-                }
-            })
-        }
-
-    }
-
-}
+                    this.password = null;
+                    this.currentPassword = null;
+                    this.confirmation = null;
+                })
+                .catch((e) => {
+                    if (e.response && e.response.status === 422) {
+                        const { message, errors } = e.response.data;
+                        this.error = message;
+                        this.errors = errors;
+                        this.$toast.error(message);
+                        this.saving = false;
+                    } else {
+                        this.$toast.error(__('Unable to change password'));
+                        this.saving = false;
+                    }
+                });
+        },
+    },
+};
 </script>
diff --git a/resources/js/components/users/Listing.vue b/resources/js/components/users/Listing.vue
index 98e52e37a2..53195f04c4 100644
--- a/resources/js/components/users/Listing.vue
+++ b/resources/js/components/users/Listing.vue
@@ -1,6 +1,5 @@
 <template>
     <div>
-
         <div v-if="initializing" class="card loading">
             <loading-graphic />
         </div>
@@ -16,9 +15,10 @@
             v-slot="{ hasSelections }"
         >
             <div>
-                <div class="card overflow-hidden p-0 relative">
-                    <div class="flex flex-wrap items-center justify-between px-2 pb-2 text-sm border-b dark:border-dark-900">
-
+                <div class="card relative overflow-hidden p-0">
+                    <div
+                        class="flex flex-wrap items-center justify-between border-b px-2 pb-2 text-sm dark:border-dark-900"
+                    >
                         <data-list-filter-presets
                             v-show="allowFilterPresets"
                             ref="presets"
@@ -32,11 +32,26 @@
                             @reset="filtersReset"
                         />
 
-                        <data-list-search class="h-8 mt-2 min-w-[240px] w-full" ref="search" v-model="searchQuery" :placeholder="searchPlaceholder" />
+                        <data-list-search
+                            class="mt-2 h-8 w-full min-w-[240px]"
+                            ref="search"
+                            v-model="searchQuery"
+                            :placeholder="searchPlaceholder"
+                        />
 
-                        <div class="flex space-x-2 rtl:space-x-reverse mt-2">
-                            <button class="btn btn-sm rtl:mr-2 ltr:ml-2" v-text="__('Reset')" v-show="isDirty" @click="$refs.presets.refreshPreset()" />
-                            <button class="btn btn-sm rtl:mr-2 ltr:ml-2" v-text="__('Save')" v-show="allowFilterPresets && isDirty" @click="$refs.presets.savePreset()" />
+                        <div class="mt-2 flex space-x-2 rtl:space-x-reverse">
+                            <button
+                                class="btn btn-sm ltr:ml-2 rtl:mr-2"
+                                v-text="__('Reset')"
+                                v-show="isDirty"
+                                @click="$refs.presets.refreshPreset()"
+                            />
+                            <button
+                                class="btn btn-sm ltr:ml-2 rtl:mr-2"
+                                v-text="__('Save')"
+                                v-show="allowFilterPresets && isDirty"
+                                @click="$refs.presets.savePreset()"
+                            />
                             <data-list-column-picker :preferences-key="preferencesKey('columns')" />
                         </div>
                     </div>
@@ -76,20 +91,32 @@
                         >
                             <template #cell-email="{ row: user, value }">
                                 <a :href="user.edit_url" class="flex items-center">
-                                    <avatar :user="user" class="w-8 h-8 rounded-full rtl:ml-2 ltr:mr-2" />
+                                    <avatar :user="user" class="h-8 w-8 rounded-full ltr:mr-2 rtl:ml-2" />
                                     {{ value }}
                                 </a>
                             </template>
                             <template #cell-roles="{ row: user, value: roles }">
                                 <div class="role-index-field">
-                                    <div v-if="user.super" class="role-index-field-item rtl:ml-1 ltr:mr-1 mb-1.5">{{ __('Super Admin') }}</div>
+                                    <div v-if="user.super" class="role-index-field-item mb-1.5 ltr:mr-1 rtl:ml-1">
+                                        {{ __('Super Admin') }}
+                                    </div>
                                     <div v-if="!roles || roles.length === 0" />
-                                    <div v-for="(role, i) in (roles || [])" class="role-index-field-item rtl:ml-1 ltr:mr-1 mb-1.5">{{ __(role.title) }}</div>
+                                    <div
+                                        v-for="(role, i) in roles || []"
+                                        class="role-index-field-item mb-1.5 ltr:mr-1 rtl:ml-1"
+                                    >
+                                        {{ __(role.title) }}
+                                    </div>
                                 </div>
                             </template>
                             <template #cell-groups="{ row: user, value: groups }">
                                 <div class="groups-index-field">
-                                    <div v-for="group in (groups || [])" class="groups-index-field-item rtl:ml-1 ltr:mr-1 mb-1.5">{{ __(group.title) }}</div>
+                                    <div
+                                        v-for="group in groups || []"
+                                        class="groups-index-field-item mb-1.5 ltr:mr-1 rtl:ml-1"
+                                    >
+                                        {{ __(group.title) }}
+                                    </div>
                                 </div>
                             </template>
                             <template #actions="{ row: user, index }">
@@ -119,7 +146,6 @@
                 />
             </div>
         </data-list>
-
     </div>
 </template>
 
@@ -127,7 +153,6 @@
 import Listing from '../Listing.vue';
 
 export default {
-
     mixins: [Listing],
 
     props: {
@@ -143,18 +168,15 @@ export default {
             preferencesPrefix: 'users',
             requestUrl: cp_url('users'),
             pushQuery: true,
-        }
+        };
     },
 
     computed: {
-
         additionalParameters() {
             return {
                 group: this.group,
-            }
-        }
-
-    }
-
-}
+            };
+        },
+    },
+};
 </script>
diff --git a/resources/js/components/users/PublishForm.vue b/resources/js/components/users/PublishForm.vue
index 9f70286bd2..ce88161016 100644
--- a/resources/js/components/users/PublishForm.vue
+++ b/resources/js/components/users/PublishForm.vue
@@ -1,36 +1,35 @@
 <template>
-
     <div>
-
         <header class="mb-6">
             <breadcrumb :url="cp_url('users')" :title="__('Users')" />
             <div class="flex items-center">
                 <h1 class="flex-1" v-text="title" />
-                    <dropdown-list class="rtl:ml-4 ltr:mr-4" v-if="canEditBlueprint || hasItemActions">
-                        <dropdown-item :text="__('Edit Blueprint')" v-if="canEditBlueprint" :redirect="actions.editBlueprint" />
-                        <li class="divider" />
-                        <data-list-inline-actions
-                            v-if="hasItemActions"
-                            :item="values.id"
-                            :url="itemActionUrl"
-                            :actions="itemActions"
-                            :is-dirty="isDirty"
-                            @started="actionStarted"
-                            @completed="actionCompleted"
-                        />
-                    </dropdown-list>
-
-                    <change-password
-                        v-if="canEditPassword"
-                        :save-url="actions.password"
-                        :requires-current-password="requiresCurrentPassword"
-                        class="rtl:ml-4 ltr:mr-4"
+                <dropdown-list class="ltr:mr-4 rtl:ml-4" v-if="canEditBlueprint || hasItemActions">
+                    <dropdown-item
+                        :text="__('Edit Blueprint')"
+                        v-if="canEditBlueprint"
+                        :redirect="actions.editBlueprint"
                     />
+                    <li class="divider" />
+                    <data-list-inline-actions
+                        v-if="hasItemActions"
+                        :item="values.id"
+                        :url="itemActionUrl"
+                        :actions="itemActions"
+                        :is-dirty="isDirty"
+                        @started="actionStarted"
+                        @completed="actionCompleted"
+                    />
+                </dropdown-list>
+
+                <change-password
+                    v-if="canEditPassword"
+                    :save-url="actions.password"
+                    :requires-current-password="requiresCurrentPassword"
+                    class="ltr:mr-4 rtl:ml-4"
+                />
 
-                    <button
-                        class="btn-primary"
-                        @click.prevent="save"
-                        v-text="__('Save')" />
+                <button class="btn-primary" @click.prevent="save" v-text="__('Save')" />
 
                 <slot name="action-buttons-right" />
             </div>
@@ -58,22 +57,16 @@
                 ></publish-tabs>
             </div>
         </publish-container>
-
     </div>
 </template>
 
-
 <script>
 import ChangePassword from './ChangePassword.vue';
 import HasHiddenFields from '../publish/HasHiddenFields';
 import HasActions from '../publish/HasActions';
 
 export default {
-
-    mixins: [
-        HasHiddenFields,
-        HasActions,
-    ],
+    mixins: [HasHiddenFields, HasActions],
 
     components: {
         ChangePassword,
@@ -101,11 +94,10 @@ export default {
             error: null,
             errors: {},
             title: this.initialTitle,
-        }
+        };
     },
 
     computed: {
-
         hasErrors() {
             return this.error || Object.keys(this.errors).length;
         },
@@ -113,11 +105,9 @@ export default {
         isDirty() {
             return this.$dirty.has(this.publishContainer);
         },
-
     },
 
     methods: {
-
         clearErrors() {
             this.error = null;
             this.errors = {};
@@ -126,26 +116,28 @@ export default {
         save() {
             this.clearErrors();
 
-            this.$axios[this.method](this.actions.save, this.visibleValues).then(response => {
-                this.title = response.data.title;
-                this.values = this.resetValuesFromResponse(response.data.data.values);
-                if (!response.data.saved) {
-                    return this.$toast.error(`Couldn't save user`)
-                }
-                if (!this.isCreating) this.$toast.success(__('Saved'));
-                this.$refs.container.saved();
-                this.$nextTick(() => this.$emit('saved', response));
-            }).catch(e => {
-                if (e.response && e.response.status === 422) {
-                    const { message, errors } = e.response.data;
-                    this.error = message;
-                    this.errors = errors;
-                    this.$toast.error(message);
-                    this.$reveal.invalid();
-                } else {
-                    this.$toast.error(__('Something went wrong'));
-                }
-            });
+            this.$axios[this.method](this.actions.save, this.visibleValues)
+                .then((response) => {
+                    this.title = response.data.title;
+                    this.values = this.resetValuesFromResponse(response.data.data.values);
+                    if (!response.data.saved) {
+                        return this.$toast.error(`Couldn't save user`);
+                    }
+                    if (!this.isCreating) this.$toast.success(__('Saved'));
+                    this.$refs.container.saved();
+                    this.$nextTick(() => this.$emit('saved', response));
+                })
+                .catch((e) => {
+                    if (e.response && e.response.status === 422) {
+                        const { message, errors } = e.response.data;
+                        this.error = message;
+                        this.errors = errors;
+                        this.$toast.error(message);
+                        this.$reveal.invalid();
+                    } else {
+                        this.$toast.error(__('Something went wrong'));
+                    }
+                });
         },
 
         afterActionSuccessfullyCompleted(response) {
@@ -154,15 +146,13 @@ export default {
                 this.values = this.resetValuesFromResponse(response.data.values);
             }
         },
-
     },
 
     mounted() {
-        this.$keys.bindGlobal(['mod+s'], e => {
+        this.$keys.bindGlobal(['mod+s'], (e) => {
             e.preventDefault();
             this.save();
         });
-    }
-
-}
+    },
+};
 </script>
diff --git a/resources/js/components/users/Wizard.vue b/resources/js/components/users/Wizard.vue
index 67a278d9fe..ff83466f03 100644
--- a/resources/js/components/users/Wizard.vue
+++ b/resources/js/components/users/Wizard.vue
@@ -1,9 +1,14 @@
 <template>
-    <div class="max-w-xl mx-auto card">
-        <div v-if="steps.length > 1" class="max-w-lg mx-auto pt-16 relative">
+    <div class="card mx-auto max-w-xl">
+        <div v-if="steps.length > 1" class="relative mx-auto max-w-lg pt-16">
             <div class="wizard-steps">
-                <a class="step" :class="{'complete': currentStep >= index}" v-for="(step, index) in steps" @click="goToStep(index)">
-                    <div class="ball">{{ index+1 }}</div>
+                <a
+                    class="step"
+                    :class="{ complete: currentStep >= index }"
+                    v-for="(step, index) in steps"
+                    @click="goToStep(index)"
+                >
+                    <div class="ball">{{ index + 1 }}</div>
                     <div class="label">{{ step }}</div>
                 </a>
             </div>
@@ -11,7 +16,7 @@
 
         <!-- Step: User Info -->
         <div v-if="!completed && onUserInfoStep">
-            <div class="max-w-md mx-auto px-4 py-16 text-center">
+            <div class="mx-auto max-w-md px-4 py-16 text-center">
                 <h1 class="mb-6">{{ __('Create User') }}</h1>
                 <p class="text-gray dark:text-dark-150" v-text="__('messages.user_wizard_intro')" />
             </div>
@@ -22,44 +27,42 @@
                 :values="values"
                 :meta="meta"
                 :track-dirty-state="false"
-                class="max-w-md mx-auto -mt-6 py-0 px-4 pb-20"
+                class="mx-auto -mt-6 max-w-md px-4 py-0 pb-20"
                 @updated="values = $event"
                 v-slot="{ setFieldValue, setFieldMeta }"
             >
                 <div>
                     <div class="-mx-6">
-                        <publish-fields
-                            :fields="fields"
-                            @updated="setFieldValue"
-                            @meta-updated="setFieldMeta"
-                        />
+                        <publish-fields :fields="fields" @updated="setFieldValue" @meta-updated="setFieldMeta" />
                     </div>
                 </div>
             </publish-container>
         </div>
 
         <!-- Step: Roles & Groups -->
-        <div v-if="!completed && onPermissionStep" class="max-w-md mx-auto px-4 pb-4">
+        <div v-if="!completed && onPermissionStep" class="mx-auto max-w-md px-4 pb-4">
             <div class="py-16 text-center">
                 <h1 class="mb-6">{{ __('Roles & Groups') }}</h1>
                 <p class="text-gray dark:text-dark-150" v-text="__('messages.user_wizard_roles_groups_intro')" />
             </div>
 
             <!-- Super Admin -->
-             <div class="pb-10" v-if="canCreateSupers">
+            <div class="pb-10" v-if="canCreateSupers">
                 <div class="flex items-center">
                     <toggle-input v-model="user.super" id="super" />
-                    <label class="font-bold rtl:mr-2 ltr:ml-2" for="super">{{ __('Super Admin') }}</label>
+                    <label class="font-bold ltr:ml-2 rtl:mr-2" for="super">{{ __('Super Admin') }}</label>
                 </div>
-                <div class="text-2xs text-gray-600 dark:text-dark-150 mt-2 flex items-center space-x-1 rtl:space-x-reverse">
-                    <svg-icon name="info-circle" class="h-4 w-4 flex items-center mb-px"></svg-icon>
+                <div
+                    class="mt-2 flex items-center space-x-1 text-2xs text-gray-600 dark:text-dark-150 rtl:space-x-reverse"
+                >
+                    <svg-icon name="info-circle" class="mb-px flex h-4 w-4 items-center"></svg-icon>
                     <span>{{ __('messages.user_wizard_super_admin_instructions') }}</span>
                 </div>
             </div>
 
             <!-- Roles -->
-            <div class="pb-10" v-if="! user.super && canAssignRoles">
-                <label class="font-bold text-base mb-1" for="role">{{ __('Roles') }}</label>
+            <div class="pb-10" v-if="!user.super && canAssignRoles">
+                <label class="mb-1 text-base font-bold" for="role">{{ __('Roles') }}</label>
                 <publish-field-meta
                     :config="{ handle: 'user.roles', type: 'user_roles' }"
                     :initial-value="user.roles"
@@ -73,14 +76,15 @@
                             :value="value"
                             :meta="meta"
                             @input="user.roles = $event"
-                            @meta-updated="updateMeta" />
+                            @meta-updated="updateMeta"
+                        />
                     </div>
                 </publish-field-meta>
             </div>
 
             <!-- Groups -->
-            <div class="pb-10" v-if="! user.super && canAssignGroups">
-                <label class="font-bold text-base mb-1" for="group">{{ __('Groups') }}</label>
+            <div class="pb-10" v-if="!user.super && canAssignGroups">
+                <label class="mb-1 text-base font-bold" for="group">{{ __('Groups') }}</label>
                 <publish-field-meta
                     :config="{ handle: 'user.groups', type: 'user_groups' }"
                     :initial-value="user.groups"
@@ -94,7 +98,8 @@
                             :value="value"
                             :meta="meta"
                             @input="user.groups = $event"
-                            @meta-updated="updateMeta"/>
+                            @meta-updated="updateMeta"
+                        />
                     </div>
                 </publish-field-meta>
             </div>
@@ -102,29 +107,39 @@
 
         <!-- Step: Invitation -->
         <div v-if="!completed && onInvitationStep">
-            <div class="max-w-md mx-auto px-4 py-16 text-center">
+            <div class="mx-auto max-w-md px-4 py-16 text-center">
                 <h1 class="mb-6">{{ __('Invitation') }}</h1>
                 <p class="text-gray dark:text-dark-150" v-text="__('messages.user_wizard_invitation_intro')" />
             </div>
 
             <!-- Send Email? -->
-            <div class="max-w-md mx-auto px-4 mb-6 flex items-center">
+            <div class="mx-auto mb-6 flex max-w-md items-center px-4">
                 <toggle-input v-model="invitation.send" id="send_email_invitation" />
-                <label class="font-bold rtl:mr-2 ltr:ml-2" for="send_email_invitation">{{ __('Send Email Invitation') }}</label>
+                <label class="font-bold ltr:ml-2 rtl:mr-2" for="send_email_invitation">{{
+                    __('Send Email Invitation')
+                }}</label>
             </div>
 
-            <div class="max-w-lg mx-auto bg-gray-100 dark:bg-dark-650 py-10 mb-20 border dark:border-dark-900 rounded-lg " v-if="invitation.send">
+            <div
+                class="mx-auto mb-20 max-w-lg rounded-lg border bg-gray-100 py-10 dark:border-dark-900 dark:bg-dark-650"
+                v-if="invitation.send"
+            >
                 <!-- Subject Line -->
-                <div class="max-w-md mx-auto px-4 pb-10">
-                    <label class="font-bold text-base mb-1" for="invitation_subject">{{ __('Email Subject') }}</label>
-                    <input type="text" v-model="invitation.subject" class="input-text bg-white dark:bg-dark-700" id="invitation_subject">
+                <div class="mx-auto max-w-md px-4 pb-10">
+                    <label class="mb-1 text-base font-bold" for="invitation_subject">{{ __('Email Subject') }}</label>
+                    <input
+                        type="text"
+                        v-model="invitation.subject"
+                        class="input-text bg-white dark:bg-dark-700"
+                        id="invitation_subject"
+                    />
                 </div>
 
                 <!-- Email Content -->
-                <div class="max-w-md mx-auto px-4">
-                    <label class="font-bold text-base mb-1" for="invitation_message">{{ __('Email Content') }}</label>
+                <div class="mx-auto max-w-md px-4">
+                    <label class="mb-1 text-base font-bold" for="invitation_message">{{ __('Email Content') }}</label>
                     <textarea
-                        class="input-text min-h-40 p-4 bg-white dark:bg-dark-700"
+                        class="input-text min-h-40 bg-white p-4 dark:bg-dark-700"
                         id="invitation_message"
                         v-model="invitation.message"
                         v-elastic
@@ -133,44 +148,64 @@
             </div>
 
             <!-- Copy Pasta -->
-            <div class="max-w-md mx-auto px-4 pb-20" v-else>
+            <div class="mx-auto max-w-md px-4 pb-20" v-else>
                 <p class="mb-2" v-html="__('messages.user_wizard_invitation_share_before', { email: values.email })" />
             </div>
         </div>
 
         <!-- Post creation -->
         <div v-if="completed">
-            <div class="max-w-md mx-auto px-4 py-16 text-center">
+            <div class="mx-auto max-w-md px-4 py-16 text-center">
                 <h1 class="mb-6">{{ __('User created') }}</h1>
                 <p class="text-gray" v-html="__('messages.user_wizard_account_created')" />
             </div>
 
             <!-- Copy Pasta -->
-            <div class="max-w-md mx-auto px-4 pb-10">
+            <div class="mx-auto max-w-md px-4 pb-10">
                 <p class="mb-2" v-html="__('messages.user_wizard_invitation_share', { email: values.email })" />
             </div>
-            <div class="max-w-md mx-auto px-4 pb-10">
-                <label class="font-bold text-base mb-1" for="activation_url">{{ __('Activation URL') }}</label>
-                <input type="text" readonly class="input-text" onclick="this.select()" :value="activationUrl" id="activation_url" />
+            <div class="mx-auto max-w-md px-4 pb-10">
+                <label class="mb-1 text-base font-bold" for="activation_url">{{ __('Activation URL') }}</label>
+                <input
+                    type="text"
+                    readonly
+                    class="input-text"
+                    onclick="this.select()"
+                    :value="activationUrl"
+                    id="activation_url"
+                />
             </div>
-            <div class="max-w-md mx-auto px-4 pb-20">
-                <label class="font-bold text-base mb-1" for="email">{{ __('Email Address') }}</label>
-                <input type="text" readonly class="input-text" onclick="this.select()" :value="values.email" id="email" />
+            <div class="mx-auto max-w-md px-4 pb-20">
+                <label class="mb-1 text-base font-bold" for="email">{{ __('Email Address') }}</label>
+                <input
+                    type="text"
+                    readonly
+                    class="input-text"
+                    onclick="this.select()"
+                    :value="values.email"
+                    id="email"
+                />
             </div>
         </div>
 
-        <div class="border-t dark:border-dark-900 p-4">
-            <div class="max-w-md mx-auto flex items-center justify-center">
-                <button tabindex="3" class="btn mx-4 w-32" @click="previous" v-if="! completed && ! onFirstStep">
-                    <span v-html="direction === 'ltr' ? '&larr;' : '&rarr;'"></span> {{ __('Previous')}}
+        <div class="border-t p-4 dark:border-dark-900">
+            <div class="mx-auto flex max-w-md items-center justify-center">
+                <button tabindex="3" class="btn mx-4 w-32" @click="previous" v-if="!completed && !onFirstStep">
+                    <span v-html="direction === 'ltr' ? '&larr;' : '&rarr;'"></span> {{ __('Previous') }}
                 </button>
                 <button tabindex="4" class="btn mx-4 w-32" @click="nextStep" v-if="onUserInfoStep">
-                    {{ __('Next')}} <span v-html="direction === 'ltr' ? '&rarr;' : '&larr;'"></span>
+                    {{ __('Next') }} <span v-html="direction === 'ltr' ? '&rarr;' : '&larr;'"></span>
                 </button>
-                <button tabindex="4" class="btn mx-4 w-32" :disabled="! canContinue" @click="nextStep" v-if="!onUserInfoStep && ! completed && ! onLastStep">
-                    {{ __('Next')}} <span v-html="direction === 'ltr' ? '&rarr;' : '&larr;'"></span>
+                <button
+                    tabindex="4"
+                    class="btn mx-4 w-32"
+                    :disabled="!canContinue"
+                    @click="nextStep"
+                    v-if="!onUserInfoStep && !completed && !onLastStep"
+                >
+                    {{ __('Next') }} <span v-html="direction === 'ltr' ? '&rarr;' : '&larr;'"></span>
                 </button>
-                <button tabindex="4" class="btn-primary mx-4" @click="submit" v-if="! completed && onLastStep">
+                <button tabindex="4" class="btn-primary mx-4" @click="submit" v-if="!completed && onLastStep">
                     {{ finishButtonText }}
                 </button>
                 <a :href="usersIndexUrl" class="btn mx-4" v-if="completed">
@@ -186,8 +221,10 @@
 
 <style scoped>
 :deep(.publish-fields .form-group .field-inner > label) {
-    @apply text-base font-bold mb-1;
-    & + .help-block { @apply -mt-1 !important; }
+    @apply mb-1 text-base font-bold;
+    & + .help-block {
+        @apply -mt-1 !important;
+    }
 }
 </style>
 
@@ -199,7 +236,6 @@ import HasWizardSteps from '../HasWizardSteps.js';
 import uniq from 'underscore/modules/uniq.js';
 
 export default {
-
     mixins: [HasWizardSteps],
 
     props: {
@@ -215,7 +251,7 @@ export default {
         blueprint: { type: Object },
         initialValues: { type: Object },
         fields: { type: Array },
-        meta: { type: Object }
+        meta: { type: Object },
     },
 
     data() {
@@ -223,12 +259,15 @@ export default {
             user: {
                 super: this.canCreateSupers,
                 roles: [],
-                groups: []
+                groups: [],
             },
             invitation: {
                 send: this.canSendInvitation,
                 subject: __('messages.user_wizard_invitation_subject', { site: window.location.hostname }),
-                message: __n('messages.user_wizard_invitation_body', this.activationExpiry, { site: window.location.hostname, expiry: this.activationExpiry }),
+                message: __n('messages.user_wizard_invitation_body', this.activationExpiry, {
+                    site: window.location.hostname,
+                    expiry: this.activationExpiry,
+                }),
             },
             userExists: false,
             completed: false,
@@ -238,7 +277,7 @@ export default {
             error: null,
             storeName: 'userwizard',
             values: this.initialValues,
-        }
+        };
     },
 
     computed: {
@@ -281,21 +320,26 @@ export default {
             return this.valid;
         },
         checkIfUserExists(email) {
-            this.$axios.post(cp_url('user-exists'), { email }).then(response => {
-                this.userExists = response.data.exists
-            }).catch(error => {
-                this.$toast.error(error.response.data.message);
-            });
+            this.$axios
+                .post(cp_url('user-exists'), { email })
+                .then((response) => {
+                    this.userExists = response.data.exists;
+                })
+                .catch((error) => {
+                    this.$toast.error(error.response.data.message);
+                });
         },
         nextStep() {
             if (this.onUserInfoStep) {
-                return this.submit(true).then(this.next).catch(() => {})
+                return this.submit(true)
+                    .then(this.next)
+                    .catch(() => {});
             }
 
             this.next();
         },
         submit(validateOnly) {
-            let payload = {...this.user, ...this.values, invitation: this.invitation};
+            let payload = { ...this.user, ...this.values, invitation: this.invitation };
 
             if (validateOnly === true) {
                 payload._validate_only = true;
@@ -303,24 +347,27 @@ export default {
 
             this.clearErrors();
 
-            return this.$axios.post(this.route, payload).then(response => {
-                this.valid = true;
-
-                if (payload._validate_only) {
-                    return;
-                }
-
-                if (this.invitation.send) {
-                    window.location = response.data.redirect;
-                } else {
-                    this.completed = true;
-                    this.editUrl = response.data.redirect;
-                    this.activationUrl = response.data.activationUrl;
-                }
-            }).catch(e => {
-                this.handleAxiosError(e);
-                throw e;
-            });
+            return this.$axios
+                .post(this.route, payload)
+                .then((response) => {
+                    this.valid = true;
+
+                    if (payload._validate_only) {
+                        return;
+                    }
+
+                    if (this.invitation.send) {
+                        window.location = response.data.redirect;
+                    } else {
+                        this.completed = true;
+                        this.editUrl = response.data.redirect;
+                        this.activationUrl = response.data.activationUrl;
+                    }
+                })
+                .catch((e) => {
+                    this.handleAxiosError(e);
+                    throw e;
+                });
         },
         handleAxiosError(e) {
             if (e.response && e.response.status === 422) {
@@ -340,7 +387,7 @@ export default {
     },
 
     watch: {
-        'values.email': function(email) {
+        'values.email': function (email) {
             if (email && isEmail(email)) this.checkIfUserExists(email);
         },
 
@@ -350,25 +397,24 @@ export default {
             if (exists) {
                 emailErrors.push(error);
             } else {
-                emailErrors = emailErrors.filter(error => error !== error);
+                emailErrors = emailErrors.filter((error) => error !== error);
             }
             this.errors = { ...this.errors, email: uniq(emailErrors) };
         },
 
-        'errors': function (errors) {
+        errors: function (errors) {
             if (this.onUserInfoStep) this.$store.commit(`publish/${this.storeName}/setErrors`, errors);
-        }
+        },
     },
 
     mounted() {
-        this.$keys.bindGlobal(['command+return'], e => {
+        this.$keys.bindGlobal(['command+return'], (e) => {
             this.next();
         });
 
-        this.$keys.bindGlobal(['command+delete'], e => {
+        this.$keys.bindGlobal(['command+delete'], (e) => {
             this.previous();
         });
-    }
-
-}
+    },
+};
 </script>
diff --git a/resources/js/composables/dirty-state.js b/resources/js/composables/dirty-state.js
index 7f42e88d79..b9cd200c86 100644
--- a/resources/js/composables/dirty-state.js
+++ b/resources/js/composables/dirty-state.js
@@ -17,7 +17,7 @@ function add(name) {
 }
 
 function remove(name) {
-    dirty.value = dirty.value.filter(n => n !== name);
+    dirty.value = dirty.value.filter((n) => n !== name);
 }
 
 function enableWarning() {
@@ -35,12 +35,16 @@ function state(name, state) {
 }
 
 function has(name) {
-    return dirty.value.includes(name)
+    return dirty.value.includes(name);
 }
 
-watch(dirty, (newNames) => {
-    newNames.length ? enableWarning() : disableWarning();
-}, { immediate: true })
+watch(
+    dirty,
+    (newNames) => {
+        newNames.length ? enableWarning() : disableWarning();
+    },
+    { immediate: true },
+);
 
 export default function useDirtyState() {
     return {
@@ -51,5 +55,5 @@ export default function useDirtyState() {
         count,
         has,
         disableWarning,
-    }
+    };
 }
diff --git a/resources/js/composables/global-event-bus.js b/resources/js/composables/global-event-bus.js
index 4a5470a69e..2435177cba 100644
--- a/resources/js/composables/global-event-bus.js
+++ b/resources/js/composables/global-event-bus.js
@@ -5,6 +5,6 @@ export default function useGlobalEventBus() {
         $on: (...args) => emitter.on(...args),
         $once: (...args) => emitter.once(...args),
         $off: (...args) => emitter.off(...args),
-        $emit: (...args) => emitter.emit(...args)
-    }
+        $emit: (...args) => emitter.emit(...args),
+    };
 }
diff --git a/resources/js/composables/progress-bar.js b/resources/js/composables/progress-bar.js
index f7db87d5ba..0afa0885a1 100644
--- a/resources/js/composables/progress-bar.js
+++ b/resources/js/composables/progress-bar.js
@@ -27,7 +27,7 @@ function add(name) {
 }
 
 function remove(name) {
-    const newValues = [...progressNames.value]
+    const newValues = [...progressNames.value];
     const i = newValues.indexOf(name);
 
     if (i === -1) return;
@@ -48,15 +48,19 @@ function isComplete() {
     return count() === 0;
 }
 
-watch(names, (newNames) => {
-    if (newNames.length > 0 && !progressing.value) {
-        start();
-    }
+watch(
+    names,
+    (newNames) => {
+        if (newNames.length > 0 && !progressing.value) {
+            start();
+        }
 
-    if (newNames.length === 0 && progressing.value) {
-        stop();
-    }
-}, { immediate: true })
+        if (newNames.length === 0 && progressing.value) {
+            stop();
+        }
+    },
+    { immediate: true },
+);
 
 export default function useProgressBar() {
     return {
@@ -66,5 +70,5 @@ export default function useProgressBar() {
         names,
         count,
         isComplete,
-    }
+    };
 }
diff --git a/resources/js/frontend/helpers.js b/resources/js/frontend/helpers.js
index f4564df788..8377adc06f 100644
--- a/resources/js/frontend/helpers.js
+++ b/resources/js/frontend/helpers.js
@@ -2,8 +2,8 @@ import FieldConditions from './components/FieldConditions.js';
 
 class Statamic {
     constructor() {
-        this.$conditions = new FieldConditions;
+        this.$conditions = new FieldConditions();
     }
 }
 
-window.Statamic = new Statamic;
+window.Statamic = new Statamic();
diff --git a/resources/js/index.js b/resources/js/index.js
index a7e505d1de..48c033a17f 100644
--- a/resources/js/index.js
+++ b/resources/js/index.js
@@ -1,19 +1,21 @@
 import Statamic from './bootstrap/statamic.js';
 import * as Vue from 'vue';
-import Alpine from 'alpinejs'
-import * as Globals from './bootstrap/globals'
-import { default as underscore } from 'underscore'
+import Alpine from 'alpinejs';
+import * as Globals from './bootstrap/globals';
+import { default as underscore } from 'underscore';
 import Cookies from 'cookies-js';
 import Moment from 'moment';
 
 import.meta.glob(['../img/**']);
 
-let global_functions = Object.keys(Globals)
-global_functions.forEach(fnName => { window[fnName] = Globals[fnName] })
+let global_functions = Object.keys(Globals);
+global_functions.forEach((fnName) => {
+    window[fnName] = Globals[fnName];
+});
 
 window.Vue = Vue;
 window.Cookies = Cookies;
-window.Alpine = Alpine
+window.Alpine = Alpine;
 window.Statamic = Statamic;
 window._ = underscore;
 window.moment = Moment;
diff --git a/resources/js/mixins/PositionsSelectOptions.js b/resources/js/mixins/PositionsSelectOptions.js
index c2b6fa95be..8893db369a 100644
--- a/resources/js/mixins/PositionsSelectOptions.js
+++ b/resources/js/mixins/PositionsSelectOptions.js
@@ -1,25 +1,21 @@
 import { computePosition, offset, flip, autoUpdate } from '@floating-ui/dom';
 
 export default {
-
     data() {
         return {
-            cleanupPositionOptions: null
-        }
+            cleanupPositionOptions: null,
+        };
     },
 
     methods: {
-        positionOptions(dropdownList, component, {width}) {
+        positionOptions(dropdownList, component, { width }) {
             dropdownList.style.width = width;
 
             function updatePosition() {
                 computePosition(component.$refs.toggle, dropdownList, {
                     placement: 'bottom',
-                    middleware: [
-                        offset({mainAxis: 0, crossAxis: -1}),
-                        flip(),
-                    ]
-                }).then(({x, y}) => {
+                    middleware: [offset({ mainAxis: 0, crossAxis: -1 }), flip()],
+                }).then(({ x, y }) => {
                     // Round to avoid blurry text
                     Object.assign(dropdownList.style, {
                         left: `${Math.round(x)}px`,
@@ -28,17 +24,13 @@ export default {
                 });
             }
 
-            this.cleanupPositionOptions = autoUpdate(
-                component.$refs.toggle,
-                dropdownList,
-                updatePosition
-            );
-        }
+            this.cleanupPositionOptions = autoUpdate(component.$refs.toggle, dropdownList, updatePosition);
+        },
     },
 
     beforeUnmount() {
         if (this.cleanupPositionOptions) {
             this.cleanupPositionOptions();
         }
-    }
-}
+    },
+};
diff --git a/resources/js/store/statamic.js b/resources/js/store/statamic.js
index 3d2d015b28..aea052e3f8 100644
--- a/resources/js/store/statamic.js
+++ b/resources/js/store/statamic.js
@@ -1,5 +1,4 @@
 export default {
-
     namespaced: true,
 
     state: {
@@ -11,7 +10,6 @@ export default {
     },
 
     mutations: {
-
         windowWidth(state, width) {
             state.windowWidth = width;
         },
@@ -38,8 +36,6 @@ export default {
 
         condition(state, payload) {
             state.conditions[payload.name] = payload.condition;
-        }
-
-    }
-
+        },
+    },
 };
diff --git a/resources/js/store/store.js b/resources/js/store/store.js
index 5ecc4bbd95..ccb0fd1770 100644
--- a/resources/js/store/store.js
+++ b/resources/js/store/store.js
@@ -1,11 +1,11 @@
 import { createStore } from 'vuex';
-import statamic from './statamic.js'
+import statamic from './statamic.js';
 
 export const store = createStore({
     modules: {
         statamic,
         publish: {
-            namespaced: true
-        }
-    }
+            namespaced: true,
+        },
+    },
 });
diff --git a/resources/js/tests/FieldConditionsConverter.test.js b/resources/js/tests/FieldConditionsConverter.test.js
index 064772cd8b..8dd67e9a8f 100644
--- a/resources/js/tests/FieldConditionsConverter.test.js
+++ b/resources/js/tests/FieldConditionsConverter.test.js
@@ -1,7 +1,7 @@
 import Converter from '../components/field-conditions/Converter.js';
 global._ = require('underscore');
 
-const FieldConditionsConverter = new Converter;
+const FieldConditionsConverter = new Converter();
 
 test('it converts from blueprint format', () => {
     let converted = FieldConditionsConverter.fromBlueprint({
@@ -11,67 +11,79 @@ test('it converts from blueprint format', () => {
     });
 
     let expected = [
-        {field: 'name', operator: 'not', value: 'joe'},
-        {field: 'age', operator: 'equals', value: '13'},
-        {field: 'email', operator: 'equals', value: 'san@holo.com'}
+        { field: 'name', operator: 'not', value: 'joe' },
+        { field: 'age', operator: 'equals', value: '13' },
+        { field: 'email', operator: 'equals', value: 'san@holo.com' },
     ];
 
     expect(converted).toEqual(expected);
 });
 
 test('it converts from blueprint format and applies prefixes', () => {
-    let converted = FieldConditionsConverter.fromBlueprint({
-        name: 'isnt joe',
-        age: 13,
-        email: 'equals san@holo.com',
-    }, 'nested_');
+    let converted = FieldConditionsConverter.fromBlueprint(
+        {
+            name: 'isnt joe',
+            age: 13,
+            email: 'equals san@holo.com',
+        },
+        'nested_',
+    );
 
     let expected = [
-        {field: 'nested_name', operator: 'not', value: 'joe'},
-        {field: 'nested_age', operator: 'equals', value: '13'},
-        {field: 'nested_email', operator: 'equals', value: 'san@holo.com'}
+        { field: 'nested_name', operator: 'not', value: 'joe' },
+        { field: 'nested_age', operator: 'equals', value: '13' },
+        { field: 'nested_email', operator: 'equals', value: 'san@holo.com' },
     ];
 
     expect(converted).toEqual(expected);
 });
 
 test('it converts from blueprint format and does not apply prefix to field conditions with root syntax', () => {
-    let converted = FieldConditionsConverter.fromBlueprint({
-        'name': 'isnt joe',
-        '$root.title': 'not empty',
-    }, 'nested_');
+    let converted = FieldConditionsConverter.fromBlueprint(
+        {
+            name: 'isnt joe',
+            '$root.title': 'not empty',
+        },
+        'nested_',
+    );
 
     let expected = [
-        {field: 'nested_name', operator: 'not', value: 'joe'},
-        {field: '$root.title', operator: 'not', value: 'empty'}
+        { field: 'nested_name', operator: 'not', value: 'joe' },
+        { field: '$root.title', operator: 'not', value: 'empty' },
     ];
 
     expect(converted).toEqual(expected);
 });
 
 test('it converts from blueprint format and does not apply prefix to field conditions with legacy root syntax for backwards compatibility', () => {
-    let converted = FieldConditionsConverter.fromBlueprint({
-        'name': 'isnt joe',
-        'root.title': 'not empty',
-    }, 'nested_');
+    let converted = FieldConditionsConverter.fromBlueprint(
+        {
+            name: 'isnt joe',
+            'root.title': 'not empty',
+        },
+        'nested_',
+    );
 
     let expected = [
-        {field: 'nested_name', operator: 'not', value: 'joe'},
-        {field: 'root.title', operator: 'not', value: 'empty'}
+        { field: 'nested_name', operator: 'not', value: 'joe' },
+        { field: 'root.title', operator: 'not', value: 'empty' },
     ];
 
     expect(converted).toEqual(expected);
 });
 
 test('it converts from blueprint format and does not apply prefix to field conditions with parent syntax', () => {
-    let converted = FieldConditionsConverter.fromBlueprint({
-        'name': 'isnt joe',
-        '$parent.title': 'not empty',
-    }, 'nested_');
+    let converted = FieldConditionsConverter.fromBlueprint(
+        {
+            name: 'isnt joe',
+            '$parent.title': 'not empty',
+        },
+        'nested_',
+    );
 
     let expected = [
-        {field: 'nested_name', operator: 'not', value: 'joe'},
-        {field: '$parent.title', operator: 'not', value: 'empty'}
+        { field: 'nested_name', operator: 'not', value: 'joe' },
+        { field: '$parent.title', operator: 'not', value: 'empty' },
     ];
 
     expect(converted).toEqual(expected);
@@ -79,13 +91,13 @@ test('it converts from blueprint format and does not apply prefix to field condi
 
 test('it converts to blueprint format', () => {
     let converted = FieldConditionsConverter.toBlueprint([
-        {field: 'name', operator: 'isnt', value: 'joe'},
-        {field: 'age', operator: '==', value: '13'}
+        { field: 'name', operator: 'isnt', value: 'joe' },
+        { field: 'age', operator: '==', value: '13' },
     ]);
 
     let expected = {
         name: 'isnt joe',
-        age: '== 13'
+        age: '== 13',
     };
 
     expect(converted).toEqual(expected);
@@ -93,13 +105,13 @@ test('it converts to blueprint format', () => {
 
 test('it converts and trims properly with empty operators', () => {
     let converted = FieldConditionsConverter.toBlueprint([
-        {field: 'name', operator: '', value: 'joe'},
-        {field: 'age', operator: null, value: '13'}
+        { field: 'name', operator: '', value: 'joe' },
+        { field: 'age', operator: null, value: '13' },
     ]);
 
     let expected = {
         name: 'joe',
-        age: '13'
+        age: '13',
     };
 
     expect(converted).toEqual(expected);
diff --git a/resources/js/tests/FieldConditionsParentResolver.test.js b/resources/js/tests/FieldConditionsParentResolver.test.js
index b6cb7e7aee..4f656af03d 100644
--- a/resources/js/tests/FieldConditionsParentResolver.test.js
+++ b/resources/js/tests/FieldConditionsParentResolver.test.js
@@ -2,7 +2,7 @@ import ParentResolver from '../components/field-conditions/ParentResolver.js';
 
 let resolve = function (currentFieldPath, pathWithParent) {
     return new ParentResolver(currentFieldPath).resolve(pathWithParent);
-}
+};
 
 test('it resolves from group to top level', () => {
     expect(resolve('group.field', '$parent.name')).toEqual('$root.name');
@@ -58,11 +58,25 @@ test('it resolves from deeply nested mix of everything all the way up to top lev
     let fromField = 'group.replicator.1.group.bard.4.grid.0.group.group.replicator.6.field';
 
     expect(resolve(fromField, '$parent.name')).toEqual('$root.group.replicator.1.group.bard.4.grid.0.group.group.name');
-    expect(resolve(fromField, '$parent.$parent.name')).toEqual('$root.group.replicator.1.group.bard.4.grid.0.group.name');
-    expect(resolve(fromField, '$parent.$parent.$parent.name')).toEqual('$root.group.replicator.1.group.bard.4.grid.0.name');
-    expect(resolve(fromField, '$parent.$parent.$parent.$parent.name')).toEqual('$root.group.replicator.1.group.bard.4.name');
-    expect(resolve(fromField, '$parent.$parent.$parent.$parent.$parent.name')).toEqual('$root.group.replicator.1.group.name');
-    expect(resolve(fromField, '$parent.$parent.$parent.$parent.$parent.$parent.name')).toEqual('$root.group.replicator.1.name');
-    expect(resolve(fromField, '$parent.$parent.$parent.$parent.$parent.$parent.$parent.name')).toEqual('$root.group.name');
-    expect(resolve(fromField, '$parent.$parent.$parent.$parent.$parent.$parent.$parent.$parent.name')).toEqual('$root.name');
+    expect(resolve(fromField, '$parent.$parent.name')).toEqual(
+        '$root.group.replicator.1.group.bard.4.grid.0.group.name',
+    );
+    expect(resolve(fromField, '$parent.$parent.$parent.name')).toEqual(
+        '$root.group.replicator.1.group.bard.4.grid.0.name',
+    );
+    expect(resolve(fromField, '$parent.$parent.$parent.$parent.name')).toEqual(
+        '$root.group.replicator.1.group.bard.4.name',
+    );
+    expect(resolve(fromField, '$parent.$parent.$parent.$parent.$parent.name')).toEqual(
+        '$root.group.replicator.1.group.name',
+    );
+    expect(resolve(fromField, '$parent.$parent.$parent.$parent.$parent.$parent.name')).toEqual(
+        '$root.group.replicator.1.name',
+    );
+    expect(resolve(fromField, '$parent.$parent.$parent.$parent.$parent.$parent.$parent.name')).toEqual(
+        '$root.group.name',
+    );
+    expect(resolve(fromField, '$parent.$parent.$parent.$parent.$parent.$parent.$parent.$parent.name')).toEqual(
+        '$root.name',
+    );
 });
diff --git a/resources/js/tests/FieldConditionsValidator.test.js b/resources/js/tests/FieldConditionsValidator.test.js
index 7e8e39c7e3..83a52b2641 100644
--- a/resources/js/tests/FieldConditionsValidator.test.js
+++ b/resources/js/tests/FieldConditionsValidator.test.js
@@ -2,7 +2,7 @@ import { mount } from '@vue/test-utils';
 import { nextTick } from 'vue';
 import { createStore } from 'vuex';
 import ValidatesFieldConditions from '../components/field-conditions/ValidatorMixin.js';
-import { data_get } from '../bootstrap/globals'
+import { data_get } from '../bootstrap/globals';
 
 const Store = createStore({
     modules: {
@@ -45,17 +45,17 @@ const Store = createStore({
                             state.hiddenFields = {};
                             state.revealerFields = [];
                         },
-                    }
-                }
-            }
-        }
+                    },
+                },
+            },
+        },
     },
 });
 
 const Statamic = {
     $conditions: {
-        add: (name, condition) => Store.commit('statamic/setCondition', {name, condition})
-    }
+        add: (name, condition) => Store.commit('statamic/setCondition', { name, condition }),
+    },
 };
 
 const app = {
@@ -64,7 +64,7 @@ const app = {
         return {
             values: {},
             extraValues: {},
-        }
+        };
     },
     methods: {
         setValues(values, nestedKey) {
@@ -87,31 +87,36 @@ const app = {
             Store.commit('publish/base/setHiddenField', payload);
         },
         setHiddenFieldsState: async (fieldConfigs, dottedPrefix) => {
-            fieldConfigs.filter(fieldConfig => fieldConfig.type === 'revealer').forEach(fieldConfig => {
-                Store.commit('publish/base/setRevealerField', dottedPrefix ? `${dottedPrefix}.${fieldConfig.handle}`: fieldConfig.handle)
-            });
-            fieldConfigs.forEach(fieldConfig => {
-                Fields.showField(fieldConfig, dottedPrefix ? `${dottedPrefix}.${fieldConfig.handle}`: null)
+            fieldConfigs
+                .filter((fieldConfig) => fieldConfig.type === 'revealer')
+                .forEach((fieldConfig) => {
+                    Store.commit(
+                        'publish/base/setRevealerField',
+                        dottedPrefix ? `${dottedPrefix}.${fieldConfig.handle}` : fieldConfig.handle,
+                    );
+                });
+            fieldConfigs.forEach((fieldConfig) => {
+                Fields.showField(fieldConfig, dottedPrefix ? `${dottedPrefix}.${fieldConfig.handle}` : null);
             });
             await nextTick();
         },
-    }
+    },
 };
 
 const wrapper = mount(app, {
     global: {
         plugins: [Store],
-    }
+    },
 });
 
 const Fields = wrapper.vm;
 
-let showFieldIf = function (conditions=null, dottedFieldPath=null) {
+let showFieldIf = function (conditions = null, dottedFieldPath = null) {
     if (dottedFieldPath === null && conditions && Object.keys(conditions).length === 1) {
         dottedFieldPath = Object.keys(conditions)[0].replace(new RegExp('^\\$?root.'), '');
     }
 
-    return Fields.showField(conditions ? {'if': conditions} : {}, dottedFieldPath);
+    return Fields.showField(conditions ? { if: conditions } : {}, dottedFieldPath);
 };
 
 afterEach(() => {
@@ -125,103 +130,97 @@ test('it shows field by default', () => {
 });
 
 test('it shows or hides field based on shorthand equals conditions', () => {
-    Fields.setValues({first_name: 'Jesse'});
+    Fields.setValues({ first_name: 'Jesse' });
 
-    expect(showFieldIf({first_name: 'Jesse'})).toBe(true);
-    expect(showFieldIf({first_name: 'Jack'})).toBe(false);
+    expect(showFieldIf({ first_name: 'Jesse' })).toBe(true);
+    expect(showFieldIf({ first_name: 'Jack' })).toBe(false);
 });
 
 test('it can use comparison operators in conditions', () => {
     Fields.setValues({
         last_name: 'Hasselhoff',
         age: 13,
-        string_age: "3"
+        string_age: '3',
     });
 
-    expect(showFieldIf({age: '== 13'})).toBe(true);
-    expect(showFieldIf({age: '!= 5'})).toBe(true);
-    expect(showFieldIf({last_name: '=== Hasselhoff'})).toBe(true);
-    expect(showFieldIf({last_name: '!== Fischer'})).toBe(true);
-    expect(showFieldIf({age: '=== 13'})).toBe(false); // We don't cast their condition on strict equality comparisons
-
-    expect(showFieldIf({age: '> 5'})).toBe(true);
-    expect(showFieldIf({age: '> 13'})).toBe(false);
-    expect(showFieldIf({age: '> 20'})).toBe(false);
-    expect(showFieldIf({age: '>= 13'})).toBe(true);
-
-    expect(showFieldIf({age: '< 5'})).toBe(false);
-    expect(showFieldIf({age: '< 13'})).toBe(false);
-    expect(showFieldIf({age: '< 20'})).toBe(true);
-    expect(showFieldIf({age: '<= 13'})).toBe(true);
-    expect(showFieldIf({string_age: '<= 13'})).toBe(true); // We cast to number when doing greater/less than comparisons
-
-    expect(showFieldIf({age: 'is 13'})).toBe(true);
-    expect(showFieldIf({age: 'equals 13'})).toBe(true);
-    expect(showFieldIf({age: 'not 13'})).toBe(false);
-    expect(showFieldIf({age: 'isnt 13'})).toBe(false);
-    expect(showFieldIf({age: '¯\\_(ツ)_/¯ 13'})).toBe(false);
+    expect(showFieldIf({ age: '== 13' })).toBe(true);
+    expect(showFieldIf({ age: '!= 5' })).toBe(true);
+    expect(showFieldIf({ last_name: '=== Hasselhoff' })).toBe(true);
+    expect(showFieldIf({ last_name: '!== Fischer' })).toBe(true);
+    expect(showFieldIf({ age: '=== 13' })).toBe(false); // We don't cast their condition on strict equality comparisons
+
+    expect(showFieldIf({ age: '> 5' })).toBe(true);
+    expect(showFieldIf({ age: '> 13' })).toBe(false);
+    expect(showFieldIf({ age: '> 20' })).toBe(false);
+    expect(showFieldIf({ age: '>= 13' })).toBe(true);
+
+    expect(showFieldIf({ age: '< 5' })).toBe(false);
+    expect(showFieldIf({ age: '< 13' })).toBe(false);
+    expect(showFieldIf({ age: '< 20' })).toBe(true);
+    expect(showFieldIf({ age: '<= 13' })).toBe(true);
+    expect(showFieldIf({ string_age: '<= 13' })).toBe(true); // We cast to number when doing greater/less than comparisons
+
+    expect(showFieldIf({ age: 'is 13' })).toBe(true);
+    expect(showFieldIf({ age: 'equals 13' })).toBe(true);
+    expect(showFieldIf({ age: 'not 13' })).toBe(false);
+    expect(showFieldIf({ age: 'isnt 13' })).toBe(false);
+    expect(showFieldIf({ age: '¯\\_(ツ)_/¯ 13' })).toBe(false);
 });
 
 test('it can use includes or contains operators in conditions', () => {
     Fields.setValues({
-        cancellation_reasons: [
-            'found another service',
-            'other'
-        ],
+        cancellation_reasons: ['found another service', 'other'],
         example_string: 'The quick brown fox jumps over the lazy dog',
         age: 13,
         empty_string: '',
         null_value: null,
     });
 
-    expect(showFieldIf({cancellation_reasons: 'includes other'})).toBe(true);
-    expect(showFieldIf({cancellation_reasons: 'contains other'})).toBe(true);
-    expect(showFieldIf({cancellation_reasons: 'includes slow service'})).toBe(false);
-    expect(showFieldIf({cancellation_reasons: 'contains slow service'})).toBe(false);
+    expect(showFieldIf({ cancellation_reasons: 'includes other' })).toBe(true);
+    expect(showFieldIf({ cancellation_reasons: 'contains other' })).toBe(true);
+    expect(showFieldIf({ cancellation_reasons: 'includes slow service' })).toBe(false);
+    expect(showFieldIf({ cancellation_reasons: 'contains slow service' })).toBe(false);
 
-    expect(showFieldIf({example_string: 'includes fox jumps'})).toBe(true);
-    expect(showFieldIf({example_string: 'contains fox jumps'})).toBe(true);
-    expect(showFieldIf({example_string: 'includes dog jumps'})).toBe(false);
-    expect(showFieldIf({example_string: 'contains dog jumps'})).toBe(false);
+    expect(showFieldIf({ example_string: 'includes fox jumps' })).toBe(true);
+    expect(showFieldIf({ example_string: 'contains fox jumps' })).toBe(true);
+    expect(showFieldIf({ example_string: 'includes dog jumps' })).toBe(false);
+    expect(showFieldIf({ example_string: 'contains dog jumps' })).toBe(false);
 
-    expect(showFieldIf({age: 'includes 13'})).toBe(true);
-    expect(showFieldIf({age: 'contains 13'})).toBe(true);
-    expect(showFieldIf({age: 'includes fox'})).toBe(false);
-    expect(showFieldIf({age: 'contains fox'})).toBe(false);
+    expect(showFieldIf({ age: 'includes 13' })).toBe(true);
+    expect(showFieldIf({ age: 'contains 13' })).toBe(true);
+    expect(showFieldIf({ age: 'includes fox' })).toBe(false);
+    expect(showFieldIf({ age: 'contains fox' })).toBe(false);
 
-    expect(showFieldIf({empty_string: 'contains fox'})).toBe(false);
-    expect(showFieldIf({null_value: 'contains fox'})).toBe(false);
+    expect(showFieldIf({ empty_string: 'contains fox' })).toBe(false);
+    expect(showFieldIf({ null_value: 'contains fox' })).toBe(false);
 });
 
 test('it can use includes_any or contains_any operators in conditions', () => {
     Fields.setValues({
-        cancellation_reasons: [
-            'found another service',
-            'other'
-        ],
+        cancellation_reasons: ['found another service', 'other'],
         example_string: 'The quick brown fox jumps over the lazy dog',
         age: 13,
         empty_string: '',
         null_value: null,
     });
 
-    expect(showFieldIf({cancellation_reasons: 'includes_any sick, other'})).toBe(true);
-    expect(showFieldIf({cancellation_reasons: 'contains_any sick, other'})).toBe(true);
-    expect(showFieldIf({cancellation_reasons: 'includes_any sick, found another'})).toBe(false);
-    expect(showFieldIf({cancellation_reasons: 'contains_any sick, found another'})).toBe(false);
+    expect(showFieldIf({ cancellation_reasons: 'includes_any sick, other' })).toBe(true);
+    expect(showFieldIf({ cancellation_reasons: 'contains_any sick, other' })).toBe(true);
+    expect(showFieldIf({ cancellation_reasons: 'includes_any sick, found another' })).toBe(false);
+    expect(showFieldIf({ cancellation_reasons: 'contains_any sick, found another' })).toBe(false);
 
-    expect(showFieldIf({example_string: 'includes_any parrot, lazy dog'})).toBe(true);
-    expect(showFieldIf({example_string: 'contains_any parrot, lazy dog'})).toBe(true);
-    expect(showFieldIf({example_string: 'includes_any parrot, hops'})).toBe(false);
-    expect(showFieldIf({example_string: 'contains_any parrot, hops'})).toBe(false);
+    expect(showFieldIf({ example_string: 'includes_any parrot, lazy dog' })).toBe(true);
+    expect(showFieldIf({ example_string: 'contains_any parrot, lazy dog' })).toBe(true);
+    expect(showFieldIf({ example_string: 'includes_any parrot, hops' })).toBe(false);
+    expect(showFieldIf({ example_string: 'contains_any parrot, hops' })).toBe(false);
 
-    expect(showFieldIf({age: 'includes_any fox, 13'})).toBe(true);
-    expect(showFieldIf({age: 'contains_any fox, 13'})).toBe(true);
-    expect(showFieldIf({age: 'includes_any fox, 14'})).toBe(false);
-    expect(showFieldIf({age: 'contains_any fox, 14'})).toBe(false);
+    expect(showFieldIf({ age: 'includes_any fox, 13' })).toBe(true);
+    expect(showFieldIf({ age: 'contains_any fox, 13' })).toBe(true);
+    expect(showFieldIf({ age: 'includes_any fox, 14' })).toBe(false);
+    expect(showFieldIf({ age: 'contains_any fox, 14' })).toBe(false);
 
-    expect(showFieldIf({empty_string: 'contains_any fox, 13'})).toBe(false);
-    expect(showFieldIf({null_value: 'contains_any fox, 13'})).toBe(false);
+    expect(showFieldIf({ empty_string: 'contains_any fox, 13' })).toBe(false);
+    expect(showFieldIf({ null_value: 'contains_any fox, 13' })).toBe(false);
 });
 
 test('it handles null, true, and false in condition as literal', () => {
@@ -230,125 +229,125 @@ test('it handles null, true, and false in condition as literal', () => {
         likes_food: true,
         likes_animals: false,
         favorite_animal: null,
-        not_real_boolean: 'false'
+        not_real_boolean: 'false',
     });
 
-    expect(showFieldIf({first_name: '=== null'})).toBe(true);
-    expect(showFieldIf({last_name: '!== null'})).toBe(true);
-    expect(showFieldIf({likes_food: '=== true'})).toBe(true);
-    expect(showFieldIf({likes_animals: '=== false'})).toBe(true);
-    expect(showFieldIf({favorite_animal: '=== null'})).toBe(true);
-    expect(showFieldIf({not_real_boolean: '=== false'})).toBe(false);
+    expect(showFieldIf({ first_name: '=== null' })).toBe(true);
+    expect(showFieldIf({ last_name: '!== null' })).toBe(true);
+    expect(showFieldIf({ likes_food: '=== true' })).toBe(true);
+    expect(showFieldIf({ likes_animals: '=== false' })).toBe(true);
+    expect(showFieldIf({ favorite_animal: '=== null' })).toBe(true);
+    expect(showFieldIf({ not_real_boolean: '=== false' })).toBe(false);
 });
 
 test('it can check if value is empty', () => {
     Fields.setValues({
         last_name: 'HasselHoff',
-        user: {email: 'david@hasselhoff.com'},
+        user: { email: 'david@hasselhoff.com' },
         favorite_foods: ['lasagna'],
         empty_string: '',
         empty_array: [],
         empty_object: {},
     });
 
-    expect(showFieldIf({first_name: 'empty'})).toBe(true);
-    expect(showFieldIf({last_name: 'is empty'})).toBe(false);
-    expect(showFieldIf({last_name: 'isnt empty'})).toBe(true);
-    expect(showFieldIf({last_name: 'not empty'})).toBe(true);
-    expect(showFieldIf({user: 'empty'})).toBe(false);
-    expect(showFieldIf({favorite_foods: 'empty'})).toBe(false);
-    expect(showFieldIf({empty_string: 'empty'})).toBe(true);
-    expect(showFieldIf({empty_array: 'empty'})).toBe(true);
-    expect(showFieldIf({empty_object: 'empty'})).toBe(true);
+    expect(showFieldIf({ first_name: 'empty' })).toBe(true);
+    expect(showFieldIf({ last_name: 'is empty' })).toBe(false);
+    expect(showFieldIf({ last_name: 'isnt empty' })).toBe(true);
+    expect(showFieldIf({ last_name: 'not empty' })).toBe(true);
+    expect(showFieldIf({ user: 'empty' })).toBe(false);
+    expect(showFieldIf({ favorite_foods: 'empty' })).toBe(false);
+    expect(showFieldIf({ empty_string: 'empty' })).toBe(true);
+    expect(showFieldIf({ empty_array: 'empty' })).toBe(true);
+    expect(showFieldIf({ empty_object: 'empty' })).toBe(true);
 });
 
 test('it can use operators with multi-word values', () => {
-    Fields.setValues({ace_ventura_says: 'Allllllrighty then!'});
+    Fields.setValues({ ace_ventura_says: 'Allllllrighty then!' });
 
-    expect(showFieldIf({ace_ventura_says: 'Allllllrighty then!'})).toBe(true);
-    expect(showFieldIf({ace_ventura_says: '== Allllllrighty then!'})).toBe(true);
-    expect(showFieldIf({ace_ventura_says: 'is Allllllrighty then!'})).toBe(true);
-    expect(showFieldIf({ace_ventura_says: 'not I am your father'})).toBe(true);
+    expect(showFieldIf({ ace_ventura_says: 'Allllllrighty then!' })).toBe(true);
+    expect(showFieldIf({ ace_ventura_says: '== Allllllrighty then!' })).toBe(true);
+    expect(showFieldIf({ ace_ventura_says: 'is Allllllrighty then!' })).toBe(true);
+    expect(showFieldIf({ ace_ventura_says: 'not I am your father' })).toBe(true);
 });
 
 test('it only shows when multiple conditions are met', () => {
     Fields.setValues({
         first_name: 'San',
         last_name: 'Holo',
-        age: 22
+        age: 22,
     });
 
-    expect(showFieldIf({first_name: 'is San', last_name: 'is Holo', age: '!= 20'})).toBe(true);
-    expect(showFieldIf({first_name: 'is San', last_name: 'is Holo', age: '> 40'})).toBe(false);
+    expect(showFieldIf({ first_name: 'is San', last_name: 'is Holo', age: '!= 20' })).toBe(true);
+    expect(showFieldIf({ first_name: 'is San', last_name: 'is Holo', age: '> 40' })).toBe(false);
 });
 
 test('it shows or hides with parent key variants', () => {
     Fields.setValues({
         first_name: 'Rincess',
-        last_name: 'Pleia'
+        last_name: 'Pleia',
     });
 
-    expect(Fields.showField({if: {first_name: 'is Rincess', last_name: 'is Pleia'}})).toBe(true);
-    expect(Fields.showField({if: {first_name: 'is Rincess', last_name: 'is Holo'}})).toBe(false);
+    expect(Fields.showField({ if: { first_name: 'is Rincess', last_name: 'is Pleia' } })).toBe(true);
+    expect(Fields.showField({ if: { first_name: 'is Rincess', last_name: 'is Holo' } })).toBe(false);
 
-    expect(Fields.showField({show_when: {first_name: 'is Rincess', last_name: 'is Pleia'}})).toBe(true);
-    expect(Fields.showField({show_when: {first_name: 'is Rincess', last_name: 'is Holo'}})).toBe(false);
+    expect(Fields.showField({ show_when: { first_name: 'is Rincess', last_name: 'is Pleia' } })).toBe(true);
+    expect(Fields.showField({ show_when: { first_name: 'is Rincess', last_name: 'is Holo' } })).toBe(false);
 
-    expect(Fields.showField({unless: {first_name: 'is Rincess', last_name: 'is Pleia'}})).toBe(false);
-    expect(Fields.showField({unless: {first_name: 'is Rincess', last_name: 'is Holo'}})).toBe(true);
+    expect(Fields.showField({ unless: { first_name: 'is Rincess', last_name: 'is Pleia' } })).toBe(false);
+    expect(Fields.showField({ unless: { first_name: 'is Rincess', last_name: 'is Holo' } })).toBe(true);
 
-    expect(Fields.showField({hide_when: {first_name: 'is Rincess', last_name: 'is Pleia'}})).toBe(false);
-    expect(Fields.showField({hide_when: {first_name: 'is Rincess', last_name: 'is Holo'}})).toBe(true);
+    expect(Fields.showField({ hide_when: { first_name: 'is Rincess', last_name: 'is Pleia' } })).toBe(false);
+    expect(Fields.showField({ hide_when: { first_name: 'is Rincess', last_name: 'is Holo' } })).toBe(true);
 });
 
 test('it shows or hides when any of the conditions are met', () => {
     Fields.setValues({
         first_name: 'Rincess',
-        last_name: 'Pleia'
+        last_name: 'Pleia',
     });
 
-    expect(Fields.showField({if_any: {first_name: 'is Rincess', last_name: 'is Pleia'}})).toBe(true);
-    expect(Fields.showField({if_any: {first_name: 'is Rincess', last_name: 'is Holo'}})).toBe(true);
-    expect(Fields.showField({if_any: {first_name: 'is San', last_name: 'is Holo'}})).toBe(false);
+    expect(Fields.showField({ if_any: { first_name: 'is Rincess', last_name: 'is Pleia' } })).toBe(true);
+    expect(Fields.showField({ if_any: { first_name: 'is Rincess', last_name: 'is Holo' } })).toBe(true);
+    expect(Fields.showField({ if_any: { first_name: 'is San', last_name: 'is Holo' } })).toBe(false);
 
-    expect(Fields.showField({show_when_any: {first_name: 'is Rincess', last_name: 'is Pleia'}})).toBe(true);
-    expect(Fields.showField({show_when_any: {first_name: 'is Rincess', last_name: 'is Holo'}})).toBe(true);
-    expect(Fields.showField({show_when_any: {first_name: 'is San', last_name: 'is Holo'}})).toBe(false);
+    expect(Fields.showField({ show_when_any: { first_name: 'is Rincess', last_name: 'is Pleia' } })).toBe(true);
+    expect(Fields.showField({ show_when_any: { first_name: 'is Rincess', last_name: 'is Holo' } })).toBe(true);
+    expect(Fields.showField({ show_when_any: { first_name: 'is San', last_name: 'is Holo' } })).toBe(false);
 
-    expect(Fields.showField({unless_any: {first_name: 'is Rincess', last_name: 'is Pleia'}})).toBe(false);
-    expect(Fields.showField({unless_any: {first_name: 'is Rincess', last_name: 'is Holo'}})).toBe(false);
-    expect(Fields.showField({unless_any: {first_name: 'is San', last_name: 'is Holo'}})).toBe(true);
+    expect(Fields.showField({ unless_any: { first_name: 'is Rincess', last_name: 'is Pleia' } })).toBe(false);
+    expect(Fields.showField({ unless_any: { first_name: 'is Rincess', last_name: 'is Holo' } })).toBe(false);
+    expect(Fields.showField({ unless_any: { first_name: 'is San', last_name: 'is Holo' } })).toBe(true);
 
-    expect(Fields.showField({hide_when_any: {first_name: 'is Rincess', last_name: 'is Pleia'}})).toBe(false);
-    expect(Fields.showField({hide_when_any: {first_name: 'is Rincess', last_name: 'is Holo'}})).toBe(false);
-    expect(Fields.showField({hide_when_any: {first_name: 'is San', last_name: 'is Holo'}})).toBe(true);
+    expect(Fields.showField({ hide_when_any: { first_name: 'is Rincess', last_name: 'is Pleia' } })).toBe(false);
+    expect(Fields.showField({ hide_when_any: { first_name: 'is Rincess', last_name: 'is Holo' } })).toBe(false);
+    expect(Fields.showField({ hide_when_any: { first_name: 'is San', last_name: 'is Holo' } })).toBe(true);
 });
 
 test('it can run conditions on nested data', () => {
-    Fields.setValues({
-        name: 'Han',
-        address: {
-            country: 'Canada'
-        }
-    }, 'user');
-
-    expect(showFieldIf({'name': 'Han'})).toBe(true);
-    expect(showFieldIf({'name': 'Chewy'})).toBe(false);
-    expect(showFieldIf({'address.country': 'Canada'})).toBe(true);
-    expect(showFieldIf({'address.country': 'Australia'})).toBe(false);
-    expect(showFieldIf({'$root.user.address.country': 'Canada'})).toBe(true);
-    expect(showFieldIf({'$root.user.address.country': 'Australia'})).toBe(false);
-    expect(showFieldIf({'$parent.name': 'Han'}, 'user.address.country')).toBe(true);
-    expect(showFieldIf({'$parent.name': 'Chewy'}, 'user.address.country')).toBe(false);
+    Fields.setValues(
+        {
+            name: 'Han',
+            address: {
+                country: 'Canada',
+            },
+        },
+        'user',
+    );
+
+    expect(showFieldIf({ name: 'Han' })).toBe(true);
+    expect(showFieldIf({ name: 'Chewy' })).toBe(false);
+    expect(showFieldIf({ 'address.country': 'Canada' })).toBe(true);
+    expect(showFieldIf({ 'address.country': 'Australia' })).toBe(false);
+    expect(showFieldIf({ '$root.user.address.country': 'Canada' })).toBe(true);
+    expect(showFieldIf({ '$root.user.address.country': 'Australia' })).toBe(false);
+    expect(showFieldIf({ '$parent.name': 'Han' }, 'user.address.country')).toBe(true);
+    expect(showFieldIf({ '$parent.name': 'Chewy' }, 'user.address.country')).toBe(false);
 });
 
 test('it can run conditions on parent data using parent syntax', () => {
     Fields.setValues({
         name: 'Han',
-        replicator: [
-            { text: 'Foo' },
-            { text: 'Bar' },
-        ],
+        replicator: [{ text: 'Foo' }, { text: 'Bar' }],
         group: {
             name: 'Chewy',
             text: 'Foo',
@@ -357,14 +356,10 @@ test('it can run conditions on parent data using parent syntax', () => {
                 { text: 'Bar' },
                 {
                     name: 'Luke',
-                    replicator: [
-                        { text: 'Foo' },
-                    ],
+                    replicator: [{ text: 'Foo' }],
                     group: {
                         name: 'Yoda',
-                        replicator: [
-                            { text: 'Foo' },
-                        ],
+                        replicator: [{ text: 'Foo' }],
                     },
                 },
             ],
@@ -372,48 +367,59 @@ test('it can run conditions on parent data using parent syntax', () => {
     });
 
     // Test parent works from replicator to top level
-    expect(showFieldIf({'$parent.name': 'Han'}, 'replicator.0.text')).toBe(true);
-    expect(showFieldIf({'$parent.name': 'Chewy'}, 'replicator.0.text')).toBe(false);
-    expect(showFieldIf({'$parent.name': 'Han'}, 'replicator.1.text')).toBe(true);
-    expect(showFieldIf({'$parent.name': 'Chewy'}, 'replicator.1.text')).toBe(false);
+    expect(showFieldIf({ '$parent.name': 'Han' }, 'replicator.0.text')).toBe(true);
+    expect(showFieldIf({ '$parent.name': 'Chewy' }, 'replicator.0.text')).toBe(false);
+    expect(showFieldIf({ '$parent.name': 'Han' }, 'replicator.1.text')).toBe(true);
+    expect(showFieldIf({ '$parent.name': 'Chewy' }, 'replicator.1.text')).toBe(false);
 
     // Test parent works from nested field group to top level
-    expect(showFieldIf({'$parent.name': 'Han'}, 'group.text')).toBe(true);
-    expect(showFieldIf({'$parent.name': 'Chewy'}, 'group.text')).toBe(false);
+    expect(showFieldIf({ '$parent.name': 'Han' }, 'group.text')).toBe(true);
+    expect(showFieldIf({ '$parent.name': 'Chewy' }, 'group.text')).toBe(false);
 
     // Test parent works in deeply nested situations through multiple replicators and field groups
-    expect(showFieldIf({'$parent.name': 'Han'}, 'group.replicator.0.text')).toBe(false);
-    expect(showFieldIf({'$parent.name': 'Chewy'}, 'group.replicator.0.text')).toBe(true);
-    expect(showFieldIf({'$parent.name': 'Han'}, 'group.replicator.1.text')).toBe(false);
-    expect(showFieldIf({'$parent.name': 'Chewy'}, 'group.replicator.1.text')).toBe(true);
-    expect(showFieldIf({'$parent.name': 'Luke'}, 'group.replicator.2.replicator.0.text')).toBe(true);
-    expect(showFieldIf({'$parent.name': 'Leia'}, 'group.replicator.2.replicator.0.text')).toBe(false);
-    expect(showFieldIf({'$parent.name': 'Yoda'}, 'group.replicator.2.group.replicator.0.text')).toBe(true);
-    expect(showFieldIf({'$parent.name': 'Leia'}, 'group.replicator.2.group.replicator.0.text')).toBe(false);
-    expect(showFieldIf({'$parent.name': 'Luke'}, 'group.replicator.2.replicator.0.text')).toBe(true);
-    expect(showFieldIf({'$parent.name': 'Leia'}, 'group.replicator.2.replicator.0.text')).toBe(false);
+    expect(showFieldIf({ '$parent.name': 'Han' }, 'group.replicator.0.text')).toBe(false);
+    expect(showFieldIf({ '$parent.name': 'Chewy' }, 'group.replicator.0.text')).toBe(true);
+    expect(showFieldIf({ '$parent.name': 'Han' }, 'group.replicator.1.text')).toBe(false);
+    expect(showFieldIf({ '$parent.name': 'Chewy' }, 'group.replicator.1.text')).toBe(true);
+    expect(showFieldIf({ '$parent.name': 'Luke' }, 'group.replicator.2.replicator.0.text')).toBe(true);
+    expect(showFieldIf({ '$parent.name': 'Leia' }, 'group.replicator.2.replicator.0.text')).toBe(false);
+    expect(showFieldIf({ '$parent.name': 'Yoda' }, 'group.replicator.2.group.replicator.0.text')).toBe(true);
+    expect(showFieldIf({ '$parent.name': 'Leia' }, 'group.replicator.2.group.replicator.0.text')).toBe(false);
+    expect(showFieldIf({ '$parent.name': 'Luke' }, 'group.replicator.2.replicator.0.text')).toBe(true);
+    expect(showFieldIf({ '$parent.name': 'Leia' }, 'group.replicator.2.replicator.0.text')).toBe(false);
 
     // Test parent can be chained to check upwards through multiple levels of multiple replicators and field groups
-    expect(showFieldIf({'$parent.$parent.name': 'Luke'}, 'group.replicator.2.group.replicator.0.text')).toBe(true);
-    expect(showFieldIf({'$parent.$parent.name': 'Leia'}, 'group.replicator.2.group.replicator.0.text')).toBe(false);
-    expect(showFieldIf({'$parent.$parent.$parent.name': 'Chewy'}, 'group.replicator.2.group.replicator.0.text')).toBe(true);
-    expect(showFieldIf({'$parent.$parent.$parent.name': 'Leia'}, 'group.replicator.2.group.replicator.0.text')).toBe(false);
-    expect(showFieldIf({'$parent.$parent.$parent.$parent.name': 'Han'}, 'group.replicator.2.group.replicator.0.text')).toBe(true);
-    expect(showFieldIf({'$parent.$parent.$parent.$parent.name': 'Leia'}, 'group.replicator.2.group.replicator.0.text')).toBe(false);
-    expect(showFieldIf({'$parent.$parent.name': 'Chewy'}, 'group.replicator.2.replicator.0.text')).toBe(true);
-    expect(showFieldIf({'$parent.$parent.name': 'Leia'}, 'group.replicator.2.replicator.0.text')).toBe(false);
+    expect(showFieldIf({ '$parent.$parent.name': 'Luke' }, 'group.replicator.2.group.replicator.0.text')).toBe(true);
+    expect(showFieldIf({ '$parent.$parent.name': 'Leia' }, 'group.replicator.2.group.replicator.0.text')).toBe(false);
+    expect(showFieldIf({ '$parent.$parent.$parent.name': 'Chewy' }, 'group.replicator.2.group.replicator.0.text')).toBe(
+        true,
+    );
+    expect(showFieldIf({ '$parent.$parent.$parent.name': 'Leia' }, 'group.replicator.2.group.replicator.0.text')).toBe(
+        false,
+    );
+    expect(
+        showFieldIf({ '$parent.$parent.$parent.$parent.name': 'Han' }, 'group.replicator.2.group.replicator.0.text'),
+    ).toBe(true);
+    expect(
+        showFieldIf({ '$parent.$parent.$parent.$parent.name': 'Leia' }, 'group.replicator.2.group.replicator.0.text'),
+    ).toBe(false);
+    expect(showFieldIf({ '$parent.$parent.name': 'Chewy' }, 'group.replicator.2.replicator.0.text')).toBe(true);
+    expect(showFieldIf({ '$parent.$parent.name': 'Leia' }, 'group.replicator.2.replicator.0.text')).toBe(false);
 });
 
 test('it can run conditions on nested data using `root.` without `$` for backwards compatibility', () => {
-    Fields.setValues({
-        name: 'Han',
-        address: {
-            country: 'Canada'
-        }
-    }, 'user');
+    Fields.setValues(
+        {
+            name: 'Han',
+            address: {
+                country: 'Canada',
+            },
+        },
+        'user',
+    );
 
-    expect(showFieldIf({'root.user.address.country': 'Canada'})).toBe(true);
-    expect(showFieldIf({'root.user.address.country': 'Australia'})).toBe(false);
+    expect(showFieldIf({ 'root.user.address.country': 'Canada' })).toBe(true);
+    expect(showFieldIf({ 'root.user.address.country': 'Australia' })).toBe(false);
 });
 
 test('it can run conditions on root store values', () => {
@@ -421,8 +427,8 @@ test('it can run conditions on root store values', () => {
         favorite_foods: ['pizza', 'lasagna', 'asparagus', 'quinoa', 'peppers'],
     });
 
-    expect(showFieldIf({'favorite_foods': 'contains lasagna'})).toBe(false);
-    expect(showFieldIf({'$root.favorite_foods': 'contains lasagna'})).toBe(true);
+    expect(showFieldIf({ favorite_foods: 'contains lasagna' })).toBe(false);
+    expect(showFieldIf({ '$root.favorite_foods': 'contains lasagna' })).toBe(true);
 });
 
 test('it can run conditions on root store values using `root.` without `$` for backwards compatibility', () => {
@@ -430,34 +436,49 @@ test('it can run conditions on root store values using `root.` without `$` for b
         favorite_foods: ['pizza', 'lasagna', 'asparagus', 'quinoa', 'peppers'],
     });
 
-    expect(showFieldIf({'root.favorite_foods': 'contains lasagna'})).toBe(true);
+    expect(showFieldIf({ 'root.favorite_foods': 'contains lasagna' })).toBe(true);
 });
 
 test('it can run conditions on prefixed fields', async () => {
     Fields.setValues({
         prefixed_first_name: 'Rincess',
-        prefixed_last_name: 'Pleia'
+        prefixed_last_name: 'Pleia',
     });
 
-    expect(Fields.showField({prefix: 'prefixed_', if: {first_name: 'is Rincess', last_name: 'is Pleia'}})).toBe(true);
-    expect(Fields.showField({prefix: 'prefixed_', if: {first_name: 'is Rincess', last_name: 'is Holo'}})).toBe(false);
+    expect(Fields.showField({ prefix: 'prefixed_', if: { first_name: 'is Rincess', last_name: 'is Pleia' } })).toBe(
+        true,
+    );
+    expect(Fields.showField({ prefix: 'prefixed_', if: { first_name: 'is Rincess', last_name: 'is Holo' } })).toBe(
+        false,
+    );
 });
 
 test('it can run conditions on nested prefixed fields', async () => {
-    Fields.setValues({
-        prefixed_first_name: 'Rincess',
-        prefixed_last_name: 'Pleia',
-        prefixed_address: {
-            home_planet: 'Elderaan'
-        }
-    }, 'nested');
-
-    expect(Fields.showField({prefix: 'prefixed_', if: {first_name: 'is Rincess', last_name: 'is Pleia'}})).toBe(true);
-    expect(Fields.showField({prefix: 'prefixed_', if: {first_name: 'is Rincess', last_name: 'is Holo'}})).toBe(false);
-    expect(Fields.showField({if: {'$root.nested.prefixed_last_name': 'is Pleia'}})).toBe(true);
-    expect(Fields.showField({if: {'$root.nested.prefixed_last_name': 'is Holo'}})).toBe(false);
-    expect(Fields.showField({if: {'$parent.prefixed_last_name': 'is Pleia'}}, 'nested.prefixed_address.home_planet')).toBe(true);
-    expect(Fields.showField({if: {'$parent.prefixed_last_name': 'is Holo'}}, 'nested.prefixed_address.home_planet')).toBe(false);
+    Fields.setValues(
+        {
+            prefixed_first_name: 'Rincess',
+            prefixed_last_name: 'Pleia',
+            prefixed_address: {
+                home_planet: 'Elderaan',
+            },
+        },
+        'nested',
+    );
+
+    expect(Fields.showField({ prefix: 'prefixed_', if: { first_name: 'is Rincess', last_name: 'is Pleia' } })).toBe(
+        true,
+    );
+    expect(Fields.showField({ prefix: 'prefixed_', if: { first_name: 'is Rincess', last_name: 'is Holo' } })).toBe(
+        false,
+    );
+    expect(Fields.showField({ if: { '$root.nested.prefixed_last_name': 'is Pleia' } })).toBe(true);
+    expect(Fields.showField({ if: { '$root.nested.prefixed_last_name': 'is Holo' } })).toBe(false);
+    expect(
+        Fields.showField({ if: { '$parent.prefixed_last_name': 'is Pleia' } }, 'nested.prefixed_address.home_planet'),
+    ).toBe(true);
+    expect(
+        Fields.showField({ if: { '$parent.prefixed_last_name': 'is Holo' } }, 'nested.prefixed_address.home_planet'),
+    ).toBe(false);
 });
 
 test('it can call a custom function', () => {
@@ -473,18 +494,15 @@ test('it can call a custom function', () => {
         return values.favorite_animals.length > 3;
     });
 
-    expect(Fields.showField({if: 'reallyLovesAnimals'})).toBe(false);
-    expect(Fields.showField({if: 'custom reallyLovesAnimals'})).toBe(false);
-    expect(Fields.showField({unless: 'reallyLovesAnimals'})).toBe(true);
-    expect(Fields.showField({unless: 'custom reallyLovesAnimals'})).toBe(true);
+    expect(Fields.showField({ if: 'reallyLovesAnimals' })).toBe(false);
+    expect(Fields.showField({ if: 'custom reallyLovesAnimals' })).toBe(false);
+    expect(Fields.showField({ unless: 'reallyLovesAnimals' })).toBe(true);
+    expect(Fields.showField({ unless: 'custom reallyLovesAnimals' })).toBe(true);
 });
 
 test('it can call a custom function that uses `fieldPath` param to evaluate nested fields', () => {
-    Fields.setValues({ nested:
-        [
-            { favorite_animals: ['cats', 'dogs'] },
-            { favorite_animals: ['cats', 'dogs', 'giraffes', 'lions'] }
-        ]
+    Fields.setValues({
+        nested: [{ favorite_animals: ['cats', 'dogs'] }, { favorite_animals: ['cats', 'dogs', 'giraffes', 'lions'] }],
     });
 
     Statamic.$conditions.add('reallyLovesAnimals', function ({ target, params, store, storeName, root, fieldPath }) {
@@ -496,8 +514,8 @@ test('it can call a custom function that uses `fieldPath` param to evaluate nest
         return data_get(root, fieldPath).length > 3;
     });
 
-    expect(showFieldIf({'favorite_animals': 'custom reallyLovesAnimals'}, 'nested.0.favorite_animals')).toBe(false);
-    expect(showFieldIf({'favorite_animals': 'custom reallyLovesAnimals'}, 'nested.1.favorite_animals')).toBe(true);
+    expect(showFieldIf({ favorite_animals: 'custom reallyLovesAnimals' }, 'nested.0.favorite_animals')).toBe(false);
+    expect(showFieldIf({ favorite_animals: 'custom reallyLovesAnimals' }, 'nested.1.favorite_animals')).toBe(true);
 });
 
 test('it can call a custom function using params against root values', () => {
@@ -509,11 +527,11 @@ test('it can call a custom function using params against root values', () => {
         expect(target).toBe(null);
         expect(store).toBe(Store);
         expect(storeName).toBe('base');
-        return params.filter(food => ! root.favorite_foods.includes(food)).length === 0;
+        return params.filter((food) => !root.favorite_foods.includes(food)).length === 0;
     });
 
-    expect(Fields.showField({if: 'reallyLoves:lasagna,pizza'})).toBe(true);
-    expect(Fields.showField({if: 'reallyLoves:lasagna,pizza,sandwiches'})).toBe(false);
+    expect(Fields.showField({ if: 'reallyLoves:lasagna,pizza' })).toBe(true);
+    expect(Fields.showField({ if: 'reallyLoves:lasagna,pizza,sandwiches' })).toBe(false);
 });
 
 test('it can call a custom function on a specific field', () => {
@@ -531,7 +549,7 @@ test('it can call a custom function on a specific field', () => {
         return values.favorite_animals.length > 3;
     });
 
-    expect(showFieldIf({'favorite_animals': 'custom lovesAnimals'})).toBe(true);
+    expect(showFieldIf({ favorite_animals: 'custom lovesAnimals' })).toBe(true);
 });
 
 test('it can call a custom function on a specific field using params against a root value', () => {
@@ -548,9 +566,9 @@ test('it can call a custom function on a specific field using params against a r
         return target.length > (params[0] || 3);
     });
 
-    expect(showFieldIf({'$root.favorite_animals': 'custom lovesAnimals'})).toBe(true);
-    expect(showFieldIf({'$root.favorite_animals': 'custom lovesAnimals:2'})).toBe(true);
-    expect(showFieldIf({'$root.favorite_animals': 'custom lovesAnimals:7'})).toBe(false);
+    expect(showFieldIf({ '$root.favorite_animals': 'custom lovesAnimals' })).toBe(true);
+    expect(showFieldIf({ '$root.favorite_animals': 'custom lovesAnimals:2' })).toBe(true);
+    expect(showFieldIf({ '$root.favorite_animals': 'custom lovesAnimals:7' })).toBe(false);
 });
 
 test('it can call a custom function on a specific field using params against a root value using `root.` backwards compatibility', () => {
@@ -567,9 +585,9 @@ test('it can call a custom function on a specific field using params against a r
         return target.length > (params[0] || 3);
     });
 
-    expect(showFieldIf({'root.favorite_animals': 'custom lovesAnimals'})).toBe(true);
-    expect(showFieldIf({'root.favorite_animals': 'custom lovesAnimals:2'})).toBe(true);
-    expect(showFieldIf({'root.favorite_animals': 'custom lovesAnimals:7'})).toBe(false);
+    expect(showFieldIf({ 'root.favorite_animals': 'custom lovesAnimals' })).toBe(true);
+    expect(showFieldIf({ 'root.favorite_animals': 'custom lovesAnimals:2' })).toBe(true);
+    expect(showFieldIf({ 'root.favorite_animals': 'custom lovesAnimals:7' })).toBe(false);
 });
 
 test('it fails if the condition lhs is not evaluatable', () => {
@@ -577,8 +595,8 @@ test('it fails if the condition lhs is not evaluatable', () => {
         favorite_animals: [],
     });
 
-    expect(Fields.showField({if: {'favorite_animals': 'not null'}})).toBe(false);
-    expect(Fields.showField({unless: {'favorite_animals': 'not null'}})).toBe(true);
+    expect(Fields.showField({ if: { favorite_animals: 'not null' } })).toBe(false);
+    expect(Fields.showField({ unless: { favorite_animals: 'not null' } })).toBe(true);
 });
 
 test('it can mix custom and non-custom conditions', () => {
@@ -596,18 +614,28 @@ test('it can mix custom and non-custom conditions', () => {
         return target[0].toLowerCase() === params[0];
     });
 
-    expect(showFieldIf({first_name: 'is San', last_name: 'custom startsWith:h', age: 'custom isOlderThan:16'})).toBe(true);
-    expect(showFieldIf({first_name: 'is Feedo', last_name: 'custom startsWith:h', age: 'custom isOlderThan:16'})).toBe(false);
-    expect(showFieldIf({first_name: 'is San', last_name: 'custom startsWith:h', age: 'custom isOlderThan:40'})).toBe(false);
-    expect(showFieldIf({first_name: 'is San', last_name: 'custom startsWith:z', age: 'custom isOlderThan:16'})).toBe(false);
-    expect(showFieldIf({first_name: 'is San', last_name: 'custom startsWith:z', age: 'custom isOlderThan:40'})).toBe(false);
+    expect(showFieldIf({ first_name: 'is San', last_name: 'custom startsWith:h', age: 'custom isOlderThan:16' })).toBe(
+        true,
+    );
+    expect(
+        showFieldIf({ first_name: 'is Feedo', last_name: 'custom startsWith:h', age: 'custom isOlderThan:16' }),
+    ).toBe(false);
+    expect(showFieldIf({ first_name: 'is San', last_name: 'custom startsWith:h', age: 'custom isOlderThan:40' })).toBe(
+        false,
+    );
+    expect(showFieldIf({ first_name: 'is San', last_name: 'custom startsWith:z', age: 'custom isOlderThan:16' })).toBe(
+        false,
+    );
+    expect(showFieldIf({ first_name: 'is San', last_name: 'custom startsWith:z', age: 'custom isOlderThan:40' })).toBe(
+        false,
+    );
 });
 
 test('it can externally force hide a field before validator conditions are evaluated', () => {
-    Fields.setValues({first_name: 'Jesse'});
+    Fields.setValues({ first_name: 'Jesse' });
 
-    expect(Fields.showField({handle: 'some_field'})).toBe(true);
-    expect(Fields.showField({handle: 'last_name', if: {first_name: 'Jesse'}})).toBe(true);
+    expect(Fields.showField({ handle: 'some_field' })).toBe(true);
+    expect(Fields.showField({ handle: 'last_name', if: { first_name: 'Jesse' } })).toBe(true);
 
     Fields.setHiddenField({
         dottedKey: 'last_name',
@@ -621,8 +649,8 @@ test('it can externally force hide a field before validator conditions are evalu
         omitValue: false,
     });
 
-    expect(Fields.showField({handle: 'some_field'})).toBe(false);
-    expect(Fields.showField({handle: 'last_name', if: {first_name: 'Jesse'}})).toBe(false);
+    expect(Fields.showField({ handle: 'some_field' })).toBe(false);
+    expect(Fields.showField({ handle: 'last_name', if: { first_name: 'Jesse' } })).toBe(false);
 });
 
 test('it never omits fields with always_save config', async () => {
@@ -632,8 +660,8 @@ test('it never omits fields with always_save config', async () => {
     });
 
     await Fields.setHiddenFieldsState([
-        {handle: 'is_online_event'},
-        {handle: 'venue', if: {is_online_event: true}, always_save: true},
+        { handle: 'is_online_event' },
+        { handle: 'venue', if: { is_online_event: true }, always_save: true },
     ]);
 
     expect(Store.state.publish.base.hiddenFields['is_online_event'].hidden).toBe(false);
@@ -643,15 +671,18 @@ test('it never omits fields with always_save config', async () => {
 });
 
 test('it never omits nested fields with always_save config', async () => {
-    Fields.setValues({
-        is_online_event: false,
-        venue: false,
-    }, 'nested');
+    Fields.setValues(
+        {
+            is_online_event: false,
+            venue: false,
+        },
+        'nested',
+    );
 
-    await Fields.setHiddenFieldsState([
-        {handle: 'is_online_event'},
-        {handle: 'venue', if: {is_online_event: true}, always_save: true},
-    ], 'nested');
+    await Fields.setHiddenFieldsState(
+        [{ handle: 'is_online_event' }, { handle: 'venue', if: { is_online_event: true }, always_save: true }],
+        'nested',
+    );
 
     expect(Store.state.publish.base.hiddenFields['nested.is_online_event'].hidden).toBe(false);
     expect(Store.state.publish.base.hiddenFields['nested.venue'].hidden).toBe(true);
@@ -660,10 +691,7 @@ test('it never omits nested fields with always_save config', async () => {
 });
 
 test('it force hides fields with hidden visibility config', async () => {
-    await Fields.setHiddenFieldsState([
-        {handle: 'first_name'},
-        {handle: 'last_name', visibility: 'hidden'},
-    ]);
+    await Fields.setHiddenFieldsState([{ handle: 'first_name' }, { handle: 'last_name', visibility: 'hidden' }]);
 
     expect(Store.state.publish.base.hiddenFields['first_name'].hidden).toBe(false);
     expect(Store.state.publish.base.hiddenFields['last_name'].hidden).toBe('force');
@@ -678,8 +706,8 @@ test('it tells omitter to omit hidden fields by default', async () => {
     });
 
     await Fields.setHiddenFieldsState([
-        {handle: 'is_online_event'},
-        {handle: 'venue', if: {is_online_event: true}},
+        { handle: 'is_online_event' },
+        { handle: 'venue', if: { is_online_event: true } },
     ]);
 
     expect(Store.state.publish.base.hiddenFields['is_online_event'].hidden).toBe(false);
@@ -689,15 +717,18 @@ test('it tells omitter to omit hidden fields by default', async () => {
 });
 
 test('it tells omitter to omit nested hidden fields by default', async () => {
-    Fields.setValues({
-        is_online_event: false,
-        venue: false,
-    }, 'nested');
+    Fields.setValues(
+        {
+            is_online_event: false,
+            venue: false,
+        },
+        'nested',
+    );
 
-    await Fields.setHiddenFieldsState([
-        {handle: 'is_online_event'},
-        {handle: 'venue', if: {is_online_event: true}},
-    ], 'nested');
+    await Fields.setHiddenFieldsState(
+        [{ handle: 'is_online_event' }, { handle: 'venue', if: { is_online_event: true } }],
+        'nested',
+    );
 
     expect(Store.state.publish.base.hiddenFields['nested.is_online_event'].hidden).toBe(false);
     expect(Store.state.publish.base.hiddenFields['nested.venue'].hidden).toBe(true);
@@ -712,8 +743,8 @@ test('it tells omitter to omit revealer fields', async () => {
     });
 
     await Fields.setHiddenFieldsState([
-        {handle: 'revealer_toggle', type: 'revealer'},
-        {handle: 'regular_toggle', type: 'regular'},
+        { handle: 'revealer_toggle', type: 'revealer' },
+        { handle: 'regular_toggle', type: 'regular' },
     ]);
 
     expect(Store.state.publish.base.hiddenFields['revealer_toggle'].hidden).toBe(false);
@@ -723,15 +754,21 @@ test('it tells omitter to omit revealer fields', async () => {
 });
 
 test('it tells omitter to omit nested revealer fields', async () => {
-    Fields.setValues({
-        revealer_toggle: false,
-        regular_toggle: false,
-    }, 'nested');
+    Fields.setValues(
+        {
+            revealer_toggle: false,
+            regular_toggle: false,
+        },
+        'nested',
+    );
 
-    await Fields.setHiddenFieldsState([
-        {handle: 'revealer_toggle', type: 'revealer'},
-        {handle: 'regular_toggle', type: 'regular'},
-    ], 'nested');
+    await Fields.setHiddenFieldsState(
+        [
+            { handle: 'revealer_toggle', type: 'revealer' },
+            { handle: 'regular_toggle', type: 'regular' },
+        ],
+        'nested',
+    );
 
     expect(Store.state.publish.base.hiddenFields['nested.revealer_toggle'].hidden).toBe(false);
     expect(Store.state.publish.base.hiddenFields['nested.regular_toggle'].hidden).toBe(false);
@@ -746,8 +783,8 @@ test('it tells omitter not omit revealer-hidden fields', async () => {
     });
 
     await Fields.setHiddenFieldsState([
-        {handle: 'show_more_info', type: 'revealer'},
-        {handle: 'venue', if: {show_more_info: true}},
+        { handle: 'show_more_info', type: 'revealer' },
+        { handle: 'venue', if: { show_more_info: true } },
     ]);
 
     expect(Store.state.publish.base.hiddenFields['show_more_info'].hidden).toBe(false);
@@ -763,8 +800,8 @@ test('it tells omitter not omit revealer-hidden fields using root syntax in cond
     });
 
     await Fields.setHiddenFieldsState([
-        {handle: 'show_more_info', type: 'revealer'},
-        {handle: 'venue', if: {'$root.show_more_info': true}},
+        { handle: 'show_more_info', type: 'revealer' },
+        { handle: 'venue', if: { '$root.show_more_info': true } },
     ]);
 
     console.log(Store.state.publish.base.hiddenFields);
@@ -781,8 +818,8 @@ test('it tells omitter not omit revealer-hidden fields using legacy root syntax
     });
 
     await Fields.setHiddenFieldsState([
-        {handle: 'show_more_info', type: 'revealer'},
-        {handle: 'venue', if: {'root.show_more_info': true}},
+        { handle: 'show_more_info', type: 'revealer' },
+        { handle: 'venue', if: { 'root.show_more_info': true } },
     ]);
 
     console.log(Store.state.publish.base.hiddenFields);
@@ -793,15 +830,21 @@ test('it tells omitter not omit revealer-hidden fields using legacy root syntax
 });
 
 test('it tells omitter not omit nested revealer-hidden fields', async () => {
-    Fields.setValues({
-        show_more_info: false,
-        venue: false,
-    }, 'nested');
+    Fields.setValues(
+        {
+            show_more_info: false,
+            venue: false,
+        },
+        'nested',
+    );
 
-    await Fields.setHiddenFieldsState([
-        {handle: 'show_more_info', type: 'revealer'},
-        {handle: 'venue', if: {show_more_info: true}},
-    ], 'nested');
+    await Fields.setHiddenFieldsState(
+        [
+            { handle: 'show_more_info', type: 'revealer' },
+            { handle: 'venue', if: { show_more_info: true } },
+        ],
+        'nested',
+    );
 
     expect(Store.state.publish.base.hiddenFields['nested.show_more_info'].hidden).toBe(false);
     expect(Store.state.publish.base.hiddenFields['nested.venue'].hidden).toBe(true);
@@ -810,15 +853,21 @@ test('it tells omitter not omit nested revealer-hidden fields', async () => {
 });
 
 test('it tells omitter not omit nested revealer-hidden fields using root syntax in condition', async () => {
-    Fields.setValues({
-        show_more_info: false,
-        venue: false,
-    }, 'nested');
+    Fields.setValues(
+        {
+            show_more_info: false,
+            venue: false,
+        },
+        'nested',
+    );
 
-    await Fields.setHiddenFieldsState([
-        {handle: 'show_more_info', type: 'revealer'},
-        {handle: 'venue', if: {'$root.nested.show_more_info': true}},
-    ], 'nested');
+    await Fields.setHiddenFieldsState(
+        [
+            { handle: 'show_more_info', type: 'revealer' },
+            { handle: 'venue', if: { '$root.nested.show_more_info': true } },
+        ],
+        'nested',
+    );
 
     expect(Store.state.publish.base.hiddenFields['nested.show_more_info'].hidden).toBe(false);
     expect(Store.state.publish.base.hiddenFields['nested.venue'].hidden).toBe(true);
@@ -827,15 +876,21 @@ test('it tells omitter not omit nested revealer-hidden fields using root syntax
 });
 
 test('it tells omitter not omit nested revealer-hidden fields using legacy root syntax for backwards compatibility', async () => {
-    Fields.setValues({
-        show_more_info: false,
-        venue: false,
-    }, 'nested');
+    Fields.setValues(
+        {
+            show_more_info: false,
+            venue: false,
+        },
+        'nested',
+    );
 
-    await Fields.setHiddenFieldsState([
-        {handle: 'show_more_info', type: 'revealer'},
-        {handle: 'venue', if: {'root.nested.show_more_info': true}},
-    ], 'nested');
+    await Fields.setHiddenFieldsState(
+        [
+            { handle: 'show_more_info', type: 'revealer' },
+            { handle: 'venue', if: { 'root.nested.show_more_info': true } },
+        ],
+        'nested',
+    );
 
     expect(Store.state.publish.base.hiddenFields['nested.show_more_info'].hidden).toBe(false);
     expect(Store.state.publish.base.hiddenFields['nested.venue'].hidden).toBe(true);
@@ -846,10 +901,7 @@ test('it tells omitter not omit nested revealer-hidden fields using legacy root
 test('it tells omitter not omit nested revealer-hidden fields using parent syntax in condition', async () => {
     Fields.setValues({
         top_level_show_more_info: false,
-        replicator: [
-            { text: 'Foo' },
-            { text: 'Bar' },
-        ],
+        replicator: [{ text: 'Foo' }, { text: 'Bar' }],
         group: {
             show_more_info: false,
             replicator: [
@@ -857,14 +909,10 @@ test('it tells omitter not omit nested revealer-hidden fields using parent synta
                 { text: 'Bar' },
                 {
                     show_more_info: false,
-                    replicator: [
-                        { text: 'Foo' },
-                    ],
+                    replicator: [{ text: 'Foo' }],
                     group: {
                         show_more_info: false,
-                        replicator: [
-                            { text: 'Foo' },
-                        ],
+                        replicator: [{ text: 'Foo' }],
                     },
                 },
             ],
@@ -873,22 +921,28 @@ test('it tells omitter not omit nested revealer-hidden fields using parent synta
 
     // Track revealer toggles
     await Fields.setHiddenFieldsState([
-        {handle: 'top_level_show_more_info', type: 'revealer'},
-        {handle: 'group.show_more_info', type: 'revealer'},
-        {handle: 'group.replicator.2.show_more_info', type: 'revealer'},
-        {handle: 'group.replicator.2.group.show_more_info', type: 'revealer'},
+        { handle: 'top_level_show_more_info', type: 'revealer' },
+        { handle: 'group.show_more_info', type: 'revealer' },
+        { handle: 'group.replicator.2.show_more_info', type: 'revealer' },
+        { handle: 'group.replicator.2.group.show_more_info', type: 'revealer' },
     ]);
 
     // Set revealer hidden fields using `$parent` syntax
     await Fields.setHiddenFieldsState([
-        {handle: 'replicator.1.text', if: {'$parent.top_level_show_more_info': true}},
-        {handle: 'group.replicator.1.text', if: {'$parent.show_more_info': true}},
+        { handle: 'replicator.1.text', if: { '$parent.top_level_show_more_info': true } },
+        { handle: 'group.replicator.1.text', if: { '$parent.show_more_info': true } },
     ]);
 
     // Set revealer hidden fields using chained `$parent` syntax
     await Fields.setHiddenFieldsState([
-        {handle: 'group.replicator.2.replicator.0.text', if: {'$parent.$parent.$parent.top_level_show_more_info': true}},
-        {handle: 'group.replicator.2.group.replicator.0.text', if: {'$parent.$parent.$parent.$parent.top_level_show_more_info': true}},
+        {
+            handle: 'group.replicator.2.replicator.0.text',
+            if: { '$parent.$parent.$parent.top_level_show_more_info': true },
+        },
+        {
+            handle: 'group.replicator.2.group.replicator.0.text',
+            if: { '$parent.$parent.$parent.$parent.top_level_show_more_info': true },
+        },
     ]);
 
     // Ensure revealer toggles should definitely hidden and omited from submitted payload
@@ -923,8 +977,8 @@ test('it tells omitter not omit prefixed revealer-hidden fields', async () => {
     });
 
     await Fields.setHiddenFieldsState([
-        {handle: 'prefixed_show_more_info', prefix: 'prefixed_', type: 'revealer'},
-        {handle: 'prefixed_venue', prefix: 'prefixed_', if: {show_more_info: true}},
+        { handle: 'prefixed_show_more_info', prefix: 'prefixed_', type: 'revealer' },
+        { handle: 'prefixed_venue', prefix: 'prefixed_', if: { show_more_info: true } },
     ]);
 
     expect(Store.state.publish.base.hiddenFields['prefixed_show_more_info'].hidden).toBe(false);
@@ -934,15 +988,21 @@ test('it tells omitter not omit prefixed revealer-hidden fields', async () => {
 });
 
 test('it tells omitter not omit nested prefixed revealer-hidden fields', async () => {
-    Fields.setValues({
-        prefixed_show_more_info: false,
-        prefixed_event_venue: false,
-    }, 'nested');
+    Fields.setValues(
+        {
+            prefixed_show_more_info: false,
+            prefixed_event_venue: false,
+        },
+        'nested',
+    );
 
-    await Fields.setHiddenFieldsState([
-        {handle: 'prefixed_show_more_info', prefix: 'prefixed_', type: 'revealer'},
-        {handle: 'prefixed_venue', prefix: 'prefixed_', if: {show_more_info: true}},
-    ], 'nested');
+    await Fields.setHiddenFieldsState(
+        [
+            { handle: 'prefixed_show_more_info', prefix: 'prefixed_', type: 'revealer' },
+            { handle: 'prefixed_venue', prefix: 'prefixed_', if: { show_more_info: true } },
+        ],
+        'nested',
+    );
 
     expect(Store.state.publish.base.hiddenFields['nested.prefixed_show_more_info'].hidden).toBe(false);
     expect(Store.state.publish.base.hiddenFields['nested.prefixed_venue'].hidden).toBe(true);
@@ -961,12 +1021,12 @@ test('it properly omits revealer-hidden fields when multiple conditions are set'
     });
 
     await Fields.setHiddenFieldsState([
-        {handle: 'show_more_info', type: 'revealer'},
-        {handle: 'has_second_event_venue', type: 'toggle', if: {show_more_info: true}},
-        {handle: 'has_third_event_venue', type: 'toggle', if: {show_more_info: true}},
-        {handle: 'event_venue_one', if: {show_more_info: true}},
-        {handle: 'event_venue_two', if: {show_more_info: true, has_second_event_venue: true}},
-        {handle: 'event_venue_three', if: {show_more_info: true, has_third_event_venue: true}},
+        { handle: 'show_more_info', type: 'revealer' },
+        { handle: 'has_second_event_venue', type: 'toggle', if: { show_more_info: true } },
+        { handle: 'has_third_event_venue', type: 'toggle', if: { show_more_info: true } },
+        { handle: 'event_venue_one', if: { show_more_info: true } },
+        { handle: 'event_venue_two', if: { show_more_info: true, has_second_event_venue: true } },
+        { handle: 'event_venue_three', if: { show_more_info: true, has_third_event_venue: true } },
     ]);
 
     expect(Store.state.publish.base.hiddenFields['show_more_info'].hidden).toBe(false);
@@ -987,23 +1047,29 @@ test('it properly omits revealer-hidden fields when multiple conditions are set'
 });
 
 test('it properly omits nested revealer-hidden fields when multiple conditions are set', async () => {
-    Fields.setValues({
-        show_more_info: false,
-        has_second_event_venue: true,
-        has_third_event_venue: false,
-        event_venue_one: 'Stadium One',
-        event_venue_two: 'Stadium Two',
-        event_venue_three: false,
-    }, 'nested');
+    Fields.setValues(
+        {
+            show_more_info: false,
+            has_second_event_venue: true,
+            has_third_event_venue: false,
+            event_venue_one: 'Stadium One',
+            event_venue_two: 'Stadium Two',
+            event_venue_three: false,
+        },
+        'nested',
+    );
 
-    await Fields.setHiddenFieldsState([
-        {handle: 'show_more_info', type: 'revealer'},
-        {handle: 'has_second_event_venue', type: 'toggle', if: {show_more_info: true}},
-        {handle: 'has_third_event_venue', type: 'toggle', if: {show_more_info: true}},
-        {handle: 'event_venue_one', if: {show_more_info: true}},
-        {handle: 'event_venue_two', if: {show_more_info: true, has_second_event_venue: true}},
-        {handle: 'event_venue_three', if: {show_more_info: true, has_third_event_venue: true}},
-    ], 'nested');
+    await Fields.setHiddenFieldsState(
+        [
+            { handle: 'show_more_info', type: 'revealer' },
+            { handle: 'has_second_event_venue', type: 'toggle', if: { show_more_info: true } },
+            { handle: 'has_third_event_venue', type: 'toggle', if: { show_more_info: true } },
+            { handle: 'event_venue_one', if: { show_more_info: true } },
+            { handle: 'event_venue_two', if: { show_more_info: true, has_second_event_venue: true } },
+            { handle: 'event_venue_three', if: { show_more_info: true, has_third_event_venue: true } },
+        ],
+        'nested',
+    );
 
     expect(Store.state.publish.base.hiddenFields['nested.show_more_info'].hidden).toBe(false);
     expect(Store.state.publish.base.hiddenFields['nested.has_second_event_venue'].hidden).toBe(true);
@@ -1024,8 +1090,8 @@ test('it properly omits nested revealer-hidden fields when multiple conditions a
 
 test('it can use extra values in conditions', () => {
     Fields.setValues({});
-    Fields.setExtraValues({hello: 'world'});
+    Fields.setExtraValues({ hello: 'world' });
 
-    expect(showFieldIf({hello: 'world'})).toBe(true);
-    expect(showFieldIf({hello: 'there'})).toBe(false);
+    expect(showFieldIf({ hello: 'world' })).toBe(true);
+    expect(showFieldIf({ hello: 'there' })).toBe(false);
 });
diff --git a/resources/js/tests/Frontend/FieldConditionsTest.test.js b/resources/js/tests/Frontend/FieldConditionsTest.test.js
index 67502f236f..49c9b2bf1a 100644
--- a/resources/js/tests/Frontend/FieldConditionsTest.test.js
+++ b/resources/js/tests/Frontend/FieldConditionsTest.test.js
@@ -13,14 +13,16 @@ test('it shows field by default', () => {
 });
 
 test('it can show field based on empty checks', () => {
-    expect(Statamic.$conditions.showField({if: {hobby: 'empty'}}, formData)).toBe(true);
-    expect(Statamic.$conditions.showField({if: {bio: 'empty'}}, formData)).toBe(true);
-    expect(Statamic.$conditions.showField({if: {first_name: 'empty'}}, formData)).toBe(false);
-    expect(Statamic.$conditions.showField({if: {first_name: 'not empty'}}, formData)).toBe(true);
+    expect(Statamic.$conditions.showField({ if: { hobby: 'empty' } }, formData)).toBe(true);
+    expect(Statamic.$conditions.showField({ if: { bio: 'empty' } }, formData)).toBe(true);
+    expect(Statamic.$conditions.showField({ if: { first_name: 'empty' } }, formData)).toBe(false);
+    expect(Statamic.$conditions.showField({ if: { first_name: 'not empty' } }, formData)).toBe(true);
 });
 
 test('it can show field if multiple conditions are met', () => {
-    expect(Statamic.$conditions.showField({if: {first_name: 'Bilbo', last_name: 'Baggins'}}, formData)).toBe(true);
-    expect(Statamic.$conditions.showField({if: {first_name: 'Frodo', last_name: 'Baggins'}}, formData)).toBe(false);
-    expect(Statamic.$conditions.showField({if_any: {first_name: 'Frodo', last_name: 'Baggins'}}, formData)).toBe(true);
+    expect(Statamic.$conditions.showField({ if: { first_name: 'Bilbo', last_name: 'Baggins' } }, formData)).toBe(true);
+    expect(Statamic.$conditions.showField({ if: { first_name: 'Frodo', last_name: 'Baggins' } }, formData)).toBe(false);
+    expect(Statamic.$conditions.showField({ if_any: { first_name: 'Frodo', last_name: 'Baggins' } }, formData)).toBe(
+        true,
+    );
 });
diff --git a/resources/js/tests/Globals.test.js b/resources/js/tests/Globals.test.js
index c4f137665e..675668ad8f 100644
--- a/resources/js/tests/Globals.test.js
+++ b/resources/js/tests/Globals.test.js
@@ -1,6 +1,6 @@
-import { tidy_url } from '../bootstrap/globals'
-import { data_get } from '../bootstrap/globals'
-import { data_set } from '../bootstrap/globals'
+import { tidy_url } from '../bootstrap/globals';
+import { data_get } from '../bootstrap/globals';
+import { data_set } from '../bootstrap/globals';
 
 test('it tidies urls', () => {
     expect(tidy_url('foo/bar')).toBe('foo/bar');
@@ -17,16 +17,13 @@ test('it_can_get_value_from_data_using_dotted_path', () => {
         foo: 'alpha',
         nested: {
             foo: 'beta',
-            array_value: [
-                {foo: 'charlie'},
-                {foo: 'delta'},
-            ],
+            array_value: [{ foo: 'charlie' }, { foo: 'delta' }],
         },
     };
 
     expect(data_get(data, 'foo')).toStrictEqual('alpha');
     expect(data_get(data, 'nested.foo')).toStrictEqual('beta');
-    expect(data_get(data, 'nested.array_value')).toStrictEqual([{foo: 'charlie'}, {foo: 'delta'}]);
+    expect(data_get(data, 'nested.array_value')).toStrictEqual([{ foo: 'charlie' }, { foo: 'delta' }]);
     expect(data_get(data, 'nested.array_value.0.foo')).toStrictEqual('charlie');
     expect(data_get(data, 'nested.array_value.1.foo')).toStrictEqual('delta');
 });
@@ -36,10 +33,7 @@ test('it_can_set_value_to_data_using_dotted_path', () => {
         foo: 'alpha',
         nested: {
             foo: 'beta',
-            array_value: [
-                {foo: 'charlie'},
-                {foo: 'delta'},
-            ],
+            array_value: [{ foo: 'charlie' }, { foo: 'delta' }],
         },
     };
 
@@ -59,18 +53,12 @@ test('it_can_set_value_to_data_using_dotted_path', () => {
         nested: {
             foo: 'beta_changed',
             bar: 'bar_added',
-            array_value: [
-                {foo: 'delta_changed'},
-                'element_two_is_now_string',
-                'element_added',
-            ],
+            array_value: [{ foo: 'delta_changed' }, 'element_two_is_now_string', 'element_added'],
         },
         deep: {
             new: {
                 object: 'deep_new_object_value_added',
-                array: [
-                    'deep_new_array_element_added',
-                ],
+                array: ['deep_new_array_element_added'],
             },
         },
     };
diff --git a/resources/js/tests/Hooks.test.js b/resources/js/tests/Hooks.test.js
index 411ec910be..391333d4c4 100644
--- a/resources/js/tests/Hooks.test.js
+++ b/resources/js/tests/Hooks.test.js
@@ -1,19 +1,19 @@
 import Vue from 'vue';
 import Hooks from '../components/Hooks.js';
-const hooks = new Hooks;
+const hooks = new Hooks();
 
 const Statamic = {
     get $hooks() {
         return hooks;
-    }
+    },
 };
 
 afterEach(() => {
-    Statamic.$hooks.hooks = {}
+    Statamic.$hooks.hooks = {};
 });
 
 test('it runs without hooks', () => {
-    let payload = {count: 1};
+    let payload = { count: 1 };
     let promise = Statamic.$hooks.run('example.hook', payload);
 
     return promise.then(() => {
@@ -34,10 +34,10 @@ test('it sets and runs hooks', () => {
         resolve('second');
     });
 
-    let payload = {count: 1};
+    let payload = { count: 1 };
     let promise = Statamic.$hooks.run('example.hook', payload);
 
-    return promise.then(results => {
+    return promise.then((results) => {
         expect(results).toMatchObject(['first', 'second']);
         expect(payload.count).toBe(3);
     });
@@ -53,7 +53,7 @@ test('it sets and runs a failed hook', () => {
         reject('rejected!');
     });
 
-    let payload = {count: 1};
+    let payload = { count: 1 };
     let promise = Statamic.$hooks.run('example.hook', payload);
 
     return expect(promise).rejects.toMatch('rejected!');
@@ -77,10 +77,10 @@ test('a rejected hook will stop other hooks running', () => {
         resolve('third');
     });
 
-    let payload = {count: 1};
+    let payload = { count: 1 };
     let promise = Statamic.$hooks.run('example.hook', payload);
 
-    return promise.catch(error => {
+    return promise.catch((error) => {
         expect(error).toBe('second');
         expect(runHooks).toMatchObject(['first', 'second']);
     });
@@ -94,7 +94,7 @@ test('it waits for hook promise to resolve', () => {
         }, 10);
     });
 
-    let payload = {count: 1};
+    let payload = { count: 1 };
     let promise = Statamic.$hooks.run('example.hook', payload);
 
     return promise.then(() => {
@@ -104,29 +104,39 @@ test('it waits for hook promise to resolve', () => {
 
 test('it runs hooks in order by priority', () => {
     // This hook defaults to priority of 10.
-    Statamic.$hooks.on('example.hook', resolve => {
+    Statamic.$hooks.on('example.hook', (resolve) => {
         resolve('second');
     });
 
-    Statamic.$hooks.on('example.hook', resolve => {
-        resolve('fifth');
-    }, 2);
+    Statamic.$hooks.on(
+        'example.hook',
+        (resolve) => {
+            resolve('fifth');
+        },
+        2,
+    );
 
-    Statamic.$hooks.on('example.hook', resolve => {
+    Statamic.$hooks.on('example.hook', (resolve) => {
         resolve('third');
     });
 
-    Statamic.$hooks.on('example.hook', resolve => {
-        resolve('fourth');
-    }, 5);
-
-    Statamic.$hooks.on('example.hook', resolve => {
-        resolve('first');
-    }, 200);
+    Statamic.$hooks.on(
+        'example.hook',
+        (resolve) => {
+            resolve('fourth');
+        },
+        5,
+    );
+
+    Statamic.$hooks.on(
+        'example.hook',
+        (resolve) => {
+            resolve('first');
+        },
+        200,
+    );
 
     let promise = Statamic.$hooks.run('example.hook');
 
-    return expect(promise).resolves.toMatchObject([
-        'first', 'second', 'third', 'fourth', 'fifth'
-    ]);
+    return expect(promise).resolves.toMatchObject(['first', 'second', 'third', 'fourth', 'fifth']);
 });
diff --git a/resources/js/tests/NormalizeInputOptions.test.js b/resources/js/tests/NormalizeInputOptions.test.js
index 4a96af5993..84d7084a9b 100644
--- a/resources/js/tests/NormalizeInputOptions.test.js
+++ b/resources/js/tests/NormalizeInputOptions.test.js
@@ -1,6 +1,6 @@
 import _ from 'underscore';
 import { __ } from '../bootstrap/globals';
-import hasInputOptions from "../components/fieldtypes/HasInputOptions";
+import hasInputOptions from '../components/fieldtypes/HasInputOptions';
 const normalizeInputOptions = hasInputOptions.methods.normalizeInputOptions;
 
 window._ = _;
@@ -8,60 +8,60 @@ window.__ = __;
 
 const config = {
     translations: {
-        '*.One': 'Uno'
-    }
-}
+        '*.One': 'Uno',
+    },
+};
 
 window.Statamic = {
     $config: {
-        get: (key) => config[key]
-    }
-}
+        get: (key) => config[key],
+    },
+};
 
 it('normalizes input options with simple array', () => {
-   expect(normalizeInputOptions([
-       'one',
-       'two'
-   ])).toEqual([
-       {value: 'one', label: 'one'},
-       {value: 'two', label: 'two'}
-   ]);
+    expect(normalizeInputOptions(['one', 'two'])).toEqual([
+        { value: 'one', label: 'one' },
+        { value: 'two', label: 'two' },
+    ]);
 
-    expect(normalizeInputOptions([
-        'One',
-        'Two'
-    ])).toEqual([
-        {value: 'One', label: 'Uno'},
-        {value: 'Two', label: 'Two'}
+    expect(normalizeInputOptions(['One', 'Two'])).toEqual([
+        { value: 'One', label: 'Uno' },
+        { value: 'Two', label: 'Two' },
     ]);
 });
 
 it('normalizes input options with object', () => {
-    expect(normalizeInputOptions({
-        one: 'One',
-        two: 'Two'
-    })).toEqual([
-        {value: 'one', label: 'Uno'},
-        {value: 'two', label: 'Two'}
+    expect(
+        normalizeInputOptions({
+            one: 'One',
+            two: 'Two',
+        }),
+    ).toEqual([
+        { value: 'one', label: 'Uno' },
+        { value: 'two', label: 'Two' },
     ]);
 });
 
 it('normalizes input options with array of objects with value label keys', () => {
-    expect(normalizeInputOptions([
-        {value: 'one', label: 'One'},
-        {value: 'two', label: 'Two'}
-    ])).toEqual([
-        {value: 'one', label: 'Uno'},
-        {value: 'two', label: 'Two'}
+    expect(
+        normalizeInputOptions([
+            { value: 'one', label: 'One' },
+            { value: 'two', label: 'Two' },
+        ]),
+    ).toEqual([
+        { value: 'one', label: 'Uno' },
+        { value: 'two', label: 'Two' },
     ]);
 });
 
 it('normalizes input options with array of objects with key value keys', () => {
-    expect(normalizeInputOptions([
-        {key: 'one', value: 'One'},
-        {key: 'two', value: 'Two'}
-    ])).toEqual([
-        {value: 'one', label: 'Uno'},
-        {value: 'two', label: 'Two'}
+    expect(
+        normalizeInputOptions([
+            { key: 'one', value: 'One' },
+            { key: 'two', value: 'Two' },
+        ]),
+    ).toEqual([
+        { value: 'one', label: 'Uno' },
+        { value: 'two', label: 'Two' },
     ]);
 });
diff --git a/resources/js/tests/PublishValues.test.js b/resources/js/tests/PublishValues.test.js
index c2b72226be..c9b2a08113 100644
--- a/resources/js/tests/PublishValues.test.js
+++ b/resources/js/tests/PublishValues.test.js
@@ -30,7 +30,7 @@ test('it gets nested values', () => {
                     {
                         name: 'Lando',
                         type: 'Man',
-                    }
+                    },
                 ],
             },
         ],
@@ -39,7 +39,7 @@ test('it gets nested values', () => {
     expect(values.get('ship.name')).toEqual('Falcon');
     expect(values.get('bffs.0.name')).toEqual('Chewy');
     expect(values.get('bffs.1.name')).toEqual('Leia');
-    expect(values.get('bffs.1.crush')).toEqual([{name: 'Lando', type: 'Man'}]);
+    expect(values.get('bffs.1.crush')).toEqual([{ name: 'Lando', type: 'Man' }]);
     expect(values.get('bffs.1.crush.0.name')).toEqual('Lando');
 });
 
@@ -59,7 +59,7 @@ test('it gets nested json field values', () => {
                     {
                         name: 'Lando',
                         type: 'Man',
-                    }
+                    },
                 ]),
             },
         ]),
@@ -74,7 +74,7 @@ test('it gets nested json field values', () => {
 
     expect(encodedValues.get('bffs.0.name')).toEqual('Chewy');
     expect(encodedValues.get('bffs.1.name')).toEqual('Leia');
-    expect(encodedValues.get('bffs.1.crush')).toEqual([{name: 'Lando', type: 'Man'}]);
+    expect(encodedValues.get('bffs.1.crush')).toEqual([{ name: 'Lando', type: 'Man' }]);
     expect(encodedValues.get('bffs.1.crush.0.name')).toEqual('Lando');
     expect(encodedValues.get('bffs.1.crush.0.name')).toEqual('Lando');
 
@@ -99,9 +99,7 @@ test('it sets values at top level', () => {
         new_object: {
             key: 'new_object_value',
         },
-        new_array: [
-            'new_array_element',
-        ],
+        new_array: ['new_array_element'],
     };
 
     expect(values.all()).toEqual(expected);
@@ -123,7 +121,7 @@ test('it sets nested values', () => {
                     {
                         name: 'Lando',
                         type: 'Man',
-                    }
+                    },
                 ],
             },
         ],
@@ -132,7 +130,7 @@ test('it sets nested values', () => {
     values.set('nickname', 'Falcon');
     values.set('bffs.0.type', 'Beast');
     values.set('bffs.1.crush.0.type', 'Scoundrel');
-    values.set('bffs.1.crush.1', {name: 'Tarkin', type: 'Evil Man'});
+    values.set('bffs.1.crush.1', { name: 'Tarkin', type: 'Evil Man' });
     values.set('some.nested.new_object.key', 'new_object_value');
     values.set('some.nested.new_array.0', 'new_array_element');
 
@@ -156,7 +154,7 @@ test('it sets nested values', () => {
                     {
                         name: 'Tarkin',
                         type: 'Evil Man',
-                    }
+                    },
                 ],
             },
         ],
@@ -165,9 +163,7 @@ test('it sets nested values', () => {
                 new_object: {
                     key: 'new_object_value',
                 },
-                new_array: [
-                    'new_array_element',
-                ],
+                new_array: ['new_array_element'],
             },
         },
     };
@@ -191,7 +187,7 @@ test('it sets nested json field values', () => {
                     {
                         name: 'Lando',
                         type: 'Man',
-                    }
+                    },
                 ]),
             },
         ]),
@@ -207,7 +203,7 @@ test('it sets nested json field values', () => {
     encodedValues.set('nickname', 'Falcon');
     encodedValues.set('bffs.0.type', 'Beast');
     encodedValues.set('bffs.1.crush.0.type', 'Scoundrel');
-    encodedValues.set('bffs.1.crush.1', {name: 'Tarkin', type: 'Evil Man'});
+    encodedValues.set('bffs.1.crush.1', { name: 'Tarkin', type: 'Evil Man' });
 
     let expected = {
         first_name: 'Han',
@@ -229,7 +225,7 @@ test('it sets nested json field values', () => {
                     {
                         name: 'Tarkin',
                         type: 'Evil Man',
-                    }
+                    },
                 ]),
             },
         ]),
@@ -246,10 +242,7 @@ test('it rejects values at top level', () => {
         bff: 'Chewy',
     };
 
-    let rejected = new Values(values).except([
-        'last_name',
-        'bff',
-    ]);
+    let rejected = new Values(values).except(['last_name', 'bff']);
 
     let expected = {
         first_name: 'Han',
@@ -280,29 +273,29 @@ test('it rejects nested values', () => {
                     {
                         name: 'Lando',
                         type: 'Man',
-                    }
+                    },
                 ],
             },
         ],
         foo123: [
             {
                 hello: 'alfa',
-                world: 'bravo'
+                world: 'bravo',
             },
             {
                 hello: 'charlie',
-                world: 'delta'
-            }
+                world: 'delta',
+            },
         ],
         foo123bar: [
             {
                 hello: 'alfa',
-                world: 'bravo'
+                world: 'bravo',
             },
             {
                 hello: 'charlie',
-                world: 'delta'
-            }
+                world: 'delta',
+            },
         ],
     };
 
@@ -331,27 +324,27 @@ test('it rejects nested values', () => {
                 crush: [
                     {
                         type: 'Man',
-                    }
+                    },
                 ],
             },
         ],
         foo123: [
             {
-                world: 'bravo'
+                world: 'bravo',
             },
             {
                 hello: 'charlie',
-                world: 'delta'
-            }
+                world: 'delta',
+            },
         ],
         foo123bar: [
             {
-                world: 'bravo'
+                world: 'bravo',
             },
             {
                 hello: 'charlie',
-                world: 'delta'
-            }
+                world: 'delta',
+            },
         ],
     };
 
@@ -430,10 +423,7 @@ test('it rejects null values', () => {
         bff: null, // this is null, but should still get removed
     };
 
-    let rejected = new Values(values).except([
-        'last_name',
-        'bff',
-    ]);
+    let rejected = new Values(values).except(['last_name', 'bff']);
 
     let expected = {
         first_name: 'Han',
@@ -457,17 +447,17 @@ test('it gracefully handles errors', () => {
 
     let jsonFields = [
         'bffs',
-        'bffs',         // duplicate field
-        'middle_name',  // non-existent field
+        'bffs', // duplicate field
+        'middle_name', // non-existent field
         'bffs.0.crush', // non-existent field
     ];
 
     let rejected = new Values(values, jsonFields).except([
         'last_name',
-        'middle_name',  // non-existent field
+        'middle_name', // non-existent field
         'bffs.0.name',
-        'bffs.0.name',  // duplicate field
-        'bffs.1.name',  // non-existent field
+        'bffs.0.name', // duplicate field
+        'bffs.1.name', // non-existent field
         'bffs.0.crush', // non-existent field
         'bffs.0.crush.0.name', // non-existent field
     ]);
@@ -494,7 +484,7 @@ test('it properly rejects keys that javascript considers having numeric separato
         },
         '123_key': {
             '456_key': {
-                'title': 'Y-Wing',
+                title: 'Y-Wing',
                 '404_text': JSON.stringify('Y-Wings are the BOMB!'),
             },
         },
@@ -506,10 +496,7 @@ test('it properly rejects keys that javascript considers having numeric separato
         '123_key.456_key.404_text',
     ];
 
-    let rejected = new Values(values, jsonFields).except([
-        '404_text',
-        '123_key.456_key.404_text',
-    ]);
+    let rejected = new Values(values, jsonFields).except(['404_text', '123_key.456_key.404_text']);
 
     let expected = {
         title: 'Millenium Falcon',
@@ -519,7 +506,7 @@ test('it properly rejects keys that javascript considers having numeric separato
         },
         '123_key': {
             '456_key': {
-                'title': 'Y-Wing',
+                title: 'Y-Wing',
             },
         },
     };
@@ -537,7 +524,7 @@ test('it properly sets keys that javascript considers having numeric separators'
         },
         '123_key': {
             '456_key': {
-                'title': 'Y-Wing',
+                title: 'Y-Wing',
                 '404_text': JSON.stringify('Y-Wings are the BOMB!'),
             },
         },
@@ -565,7 +552,7 @@ test('it properly sets keys that javascript considers having numeric separators'
         },
         '123_key': {
             '456_key': {
-                'title': 'Y-Wing',
+                title: 'Y-Wing',
                 '404_text': JSON.stringify('X-Wings are the BOMB!'),
                 '403_text': 'Unauthorized!',
             },
diff --git a/resources/js/tests/Slug.test.js b/resources/js/tests/Slug.test.js
index 7661b07ff8..67b0e09460 100644
--- a/resources/js/tests/Slug.test.js
+++ b/resources/js/tests/Slug.test.js
@@ -1,31 +1,31 @@
-import Slug from "../components/slugs/Slug";
+import Slug from '../components/slugs/Slug';
 
 let config = {
     asciiReplaceExtraSymbols: false,
     selectedSite: 'en',
-    sites: [{handle: 'en', lang: 'en'}],
+    sites: [{ handle: 'en', lang: 'en' }],
     charmap: {
         // More values would be in this charmap in reality but this enough for the test.
         en: {}, // en *would* be empty by default though.
-        currency_short: {'$': '$'}
-    }
-}
+        currency_short: { $: '$' },
+    },
+};
 
 window.Statamic = {
     $config: {
-        get: (key) => config[key]
-    }
-}
+        get: (key) => config[key],
+    },
+};
 
 test('it slugifies', () => {
-    expect((new Slug).create('One')).toBe('one');
-    expect((new Slug).create('One Two Three')).toBe('one-two-three');
-    expect((new Slug).create(`Apple's`)).toBe('apples');
-    expect((new Slug).create(`Statamic’s latest feature: “Duplicator”`)).toBe('statamics-latest-feature-duplicator');
-    expect((new Slug).separatedBy('_').create('JSON-LD Document')).toBe('json_ld_document');
-    expect((new Slug).create('Block - Hero')).toBe('block-hero');
-    expect((new Slug).create('10% off over $100 & more')).toBe('10-off-over-100-more');
-})
+    expect(new Slug().create('One')).toBe('one');
+    expect(new Slug().create('One Two Three')).toBe('one-two-three');
+    expect(new Slug().create(`Apple's`)).toBe('apples');
+    expect(new Slug().create(`Statamic’s latest feature: “Duplicator”`)).toBe('statamics-latest-feature-duplicator');
+    expect(new Slug().separatedBy('_').create('JSON-LD Document')).toBe('json_ld_document');
+    expect(new Slug().create('Block - Hero')).toBe('block-hero');
+    expect(new Slug().create('10% off over $100 & more')).toBe('10-off-over-100-more');
+});
 
 test('it slugifies with extra symbols', () => {
     // When setting ascii_replace_extra_symbols to true, these would get set by php.
@@ -34,7 +34,7 @@ test('it slugifies with extra symbols', () => {
     config.charmap.en['%'] = ' percent ';
     config.charmap.en['&'] = ' and ';
     config.charmap.en['&'] = ' and ';
-    config.charmap.currency = {'$': ' Dollar '}
+    config.charmap.currency = { $: ' Dollar ' };
 
-    expect((new Slug).create('10% off over $100 & more')).toBe('10-percent-off-over-dollar-100-and-more');
+    expect(new Slug().create('10% off over $100 & more')).toBe('10-percent-off-over-dollar-100-and-more');
 });
diff --git a/resources/js/translations/interval.js b/resources/js/translations/interval.js
index 28c45645a9..06c1e62f2e 100644
--- a/resources/js/translations/interval.js
+++ b/resources/js/translations/interval.js
@@ -1,5 +1,7 @@
-export const intervalRegexp = /^({\s*(\-?\d+(\.\d+)?[\s*,\s*\-?\d+(\.\d+)?]*)\s*})|([\[\]])\s*(-Inf|\*|\-?\d+(\.\d+)?)\s*,\s*(\+?Inf|\*|\-?\d+(\.\d+)?)\s*([\[\]])$/;
-export const anyIntervalRegexp = /({\s*(\-?\d+(\.\d+)?[\s*,\s*\-?\d+(\.\d+)?]*)\s*})|([\[\]])\s*(-Inf|\*|\-?\d+(\.\d+)?)\s*,\s*(\+?Inf|\*|\-?\d+(\.\d+)?)\s*([\[\]])/;
+export const intervalRegexp =
+    /^({\s*(\-?\d+(\.\d+)?[\s*,\s*\-?\d+(\.\d+)?]*)\s*})|([\[\]])\s*(-Inf|\*|\-?\d+(\.\d+)?)\s*,\s*(\+?Inf|\*|\-?\d+(\.\d+)?)\s*([\[\]])$/;
+export const anyIntervalRegexp =
+    /({\s*(\-?\d+(\.\d+)?[\s*,\s*\-?\d+(\.\d+)?]*)\s*})|([\[\]])\s*(-Inf|\*|\-?\d+(\.\d+)?)\s*,\s*(\+?Inf|\*|\-?\d+(\.\d+)?)\s*([\[\]])/;
 
 export const testInterval = function (count, interval) {
     /**
@@ -41,7 +43,7 @@ export const testInterval = function (count, interval) {
         }
     } else {
         // Remove falsy values.
-        matches = matches.filter(function(match) {
+        matches = matches.filter(function (match) {
             return !!match;
         });
 
@@ -53,12 +55,14 @@ export const testInterval = function (count, interval) {
         var rightNumber = convertNumber(matches[3]);
         var rightDelimiter = matches[4];
 
-        return (leftDelimiter === '[' ? count >= leftNumber : count > leftNumber)
-            && (rightDelimiter === ']' ? count <= rightNumber : count < rightNumber);
+        return (
+            (leftDelimiter === '[' ? count >= leftNumber : count > leftNumber) &&
+            (rightDelimiter === ']' ? count <= rightNumber : count < rightNumber)
+        );
     }
 
     return false;
-}
+};
 
 function convertNumber(str) {
     if (str === '-Inf') {
diff --git a/resources/js/translations/message-selector.js b/resources/js/translations/message-selector.js
index d3dcf4643c..e384cb0f0d 100644
--- a/resources/js/translations/message-selector.js
+++ b/resources/js/translations/message-selector.js
@@ -35,7 +35,7 @@ export default function choose(message, number, locale) {
     return messageParts[pluralForm];
 }
 
-const getPluralForm = function(count, locale) {
+const getPluralForm = function (count, locale) {
     // For regional locales with dashes, we just need the main part of the locale
     // e.g. For de_CH we just want de.
     if (locale.includes('_')) {
@@ -110,9 +110,7 @@ const getPluralForm = function(count, locale) {
         case 'tk':
         case 'ur':
         case 'zu':
-            return (count == 1)
-                ? 0
-                : 1;
+            return count == 1 ? 0 : 1;
 
         case 'am':
         case 'bh':
@@ -127,9 +125,7 @@ const getPluralForm = function(count, locale) {
         case 'xbr':
         case 'ti':
         case 'wa':
-            return ((count === 0) || (count === 1))
-                ? 0
-                : 1;
+            return count === 0 || count === 1 ? 0 : 1;
 
         case 'be':
         case 'bs':
@@ -137,99 +133,69 @@ const getPluralForm = function(count, locale) {
         case 'ru':
         case 'sr':
         case 'uk':
-            return ((count % 10 == 1) && (count % 100 != 11))
+            return count % 10 == 1 && count % 100 != 11
                 ? 0
-                : (((count % 10 >= 2) && (count % 10 <= 4) && ((count % 100 < 10) || (count % 100 >= 20)))
-                    ? 1
-                    : 2);
+                : count % 10 >= 2 && count % 10 <= 4 && (count % 100 < 10 || count % 100 >= 20)
+                  ? 1
+                  : 2;
 
         case 'cs':
         case 'sk':
-            return (count == 1)
-                ? 0
-                : (((count >= 2) && (count <= 4))
-                    ? 1
-                    : 2);
+            return count == 1 ? 0 : count >= 2 && count <= 4 ? 1 : 2;
 
         case 'ga':
-            return (count == 1)
-                ? 0
-                : ((count == 2)
-                    ? 1
-                    : 2);
+            return count == 1 ? 0 : count == 2 ? 1 : 2;
 
         case 'lt':
-            return ((count % 10 == 1) && (count % 100 != 11))
+            return count % 10 == 1 && count % 100 != 11
                 ? 0
-                : (((count % 10 >= 2) && ((count % 100 < 10) || (count % 100 >= 20)))
-                    ? 1
-                    : 2);
+                : count % 10 >= 2 && (count % 100 < 10 || count % 100 >= 20)
+                  ? 1
+                  : 2;
 
         case 'sl':
-            return (count % 100 == 1)
-                ? 0
-                : ((count % 100 == 2)
-                    ? 1
-                    : (((count % 100 == 3) || (count % 100 == 4))
-                        ? 2
-                        : 3));
+            return count % 100 == 1 ? 0 : count % 100 == 2 ? 1 : count % 100 == 3 || count % 100 == 4 ? 2 : 3;
 
         case 'mk':
-            return (count % 10 == 1)
-                ? 0
-                : 1;
+            return count % 10 == 1 ? 0 : 1;
 
         case 'mt':
-            return (count == 1)
+            return count == 1
                 ? 0
-                : (((count === 0) || ((count % 100 > 1) && (count % 100 < 11)))
-                    ? 1
-                    : (((count % 100 > 10) && (count % 100 < 20))
-                        ? 2
-                        : 3));
+                : count === 0 || (count % 100 > 1 && count % 100 < 11)
+                  ? 1
+                  : count % 100 > 10 && count % 100 < 20
+                    ? 2
+                    : 3;
 
         case 'lv':
-            return (count === 0)
-                ? 0
-                : (((count % 10 == 1) && (count % 100 != 11))
-                    ? 1
-                    : 2);
+            return count === 0 ? 0 : count % 10 == 1 && count % 100 != 11 ? 1 : 2;
 
         case 'pl':
-            return (count == 1)
+            return count == 1
                 ? 0
-                : (((count % 10 >= 2) && (count % 10 <= 4) && ((count % 100 < 12) || (count % 100 > 14)))
-                    ? 1
-                    : 2);
+                : count % 10 >= 2 && count % 10 <= 4 && (count % 100 < 12 || count % 100 > 14)
+                  ? 1
+                  : 2;
 
         case 'cy':
-            return (count == 1)
-                ? 0
-                : ((count == 2)
-                    ? 1
-                    : (((count == 8) || (count == 11))
-                        ? 2
-                        : 3));
+            return count == 1 ? 0 : count == 2 ? 1 : count == 8 || count == 11 ? 2 : 3;
 
         case 'ro':
-            return (count == 1)
-                ? 0
-                : (((count === 0) || ((count % 100 > 0) && (count % 100 < 20)))
-                    ? 1
-                    : 2);
+            return count == 1 ? 0 : count === 0 || (count % 100 > 0 && count % 100 < 20) ? 1 : 2;
 
         case 'ar':
-            return (count === 0)
+            return count === 0
                 ? 0
-                : ((count == 1)
-                    ? 1
-                    : ((count == 2)
-                        ? 2
-                        : (((count % 100 >= 3) && (count % 100 <= 10))
-                            ? 3
-                            : (((count % 100 >= 11) && (count % 100 <= 99))
-                                ? 4
-                                : 5))));
+                : count == 1
+                  ? 1
+                  : count == 2
+                    ? 2
+                    : count % 100 >= 3 && count % 100 <= 10
+                      ? 3
+                      : count % 100 >= 11 && count % 100 <= 99
+                        ? 4
+                        : 5;
 
         default:
             return 0;
diff --git a/resources/js/translations/translator.js b/resources/js/translations/translator.js
index 6cf2f4e13f..ff9233070c 100644
--- a/resources/js/translations/translator.js
+++ b/resources/js/translations/translator.js
@@ -46,9 +46,11 @@ export const translateChoice = function (key, count, replacements) {
 const getLine = function (key) {
     const translations = Statamic.$config.get('translations');
 
-    return translations[`*.${key}`]
-        || translations[key]
-        || translations[`statamic::${key}`]
-        || translations[`statamic::messages.${key}`]
-        || key;
-}
+    return (
+        translations[`*.${key}`] ||
+        translations[key] ||
+        translations[`statamic::${key}`] ||
+        translations[`statamic::messages.${key}`] ||
+        key
+    );
+};
diff --git a/resources/js/util/deslugify.js b/resources/js/util/deslugify.js
index be657ba5e8..3732d5df31 100644
--- a/resources/js/util/deslugify.js
+++ b/resources/js/util/deslugify.js
@@ -1,3 +1,3 @@
-export default function(value) {
-	return value.replace(/[-_]/g, " ")
-};
+export default function (value) {
+    return value.replace(/[-_]/g, ' ');
+}
diff --git a/resources/js/util/titleize.js b/resources/js/util/titleize.js
index 8f5eb5f149..80bced458a 100644
--- a/resources/js/util/titleize.js
+++ b/resources/js/util/titleize.js
@@ -1,14 +1,14 @@
-export default function(value) {
-    if(!value.split) return value;
+export default function (value) {
+    if (!value.split) return value;
 
-    var _titleizeWord = function(string) {
-        return string.charAt(0).toUpperCase() + string.slice(1).toLowerCase();
-    },
-    result = [];
+    var _titleizeWord = function (string) {
+            return string.charAt(0).toUpperCase() + string.slice(1).toLowerCase();
+        },
+        result = [];
 
-    value.split(" ").forEach(function(w) {
+    value.split(' ').forEach(function (w) {
         result.push(_titleizeWord(w));
     });
 
-    return result.join(" ");
-};
+    return result.join(' ');
+}
diff --git a/resources/views/addons/index.blade.php b/resources/views/addons/index.blade.php
index 529a0d0957..a71a3997bc 100644
--- a/resources/views/addons/index.blade.php
+++ b/resources/views/addons/index.blade.php
@@ -1,11 +1,11 @@
-@php use function Statamic\trans as __; @endphp
+@php
+    use function Statamic\trans as __;
+@endphp
 
 @extends('statamic::layout')
 @section('title', __('Addons'))
 @section('wrapper_class', 'max-w-3xl')
 
 @section('content')
-
     <addon-list :install-count="{{ $addonCount }}"></addon-list>
-
 @endsection
diff --git a/resources/views/addons/settings.blade.php b/resources/views/addons/settings.blade.php
index 6b1510bf5e..89d26b356e 100644
--- a/resources/views/addons/settings.blade.php
+++ b/resources/views/addons/settings.blade.php
@@ -1,23 +1,24 @@
-@php use function Statamic\trans as __; @endphp
+@php
+    use function Statamic\trans as __;
+@endphp
 
 @extends('statamic::layout')
 @section('title', __('Addon Settings'))
 
 @section('content')
-
     <script>
         Statamic.Publish = {
             contentData: {!! json_encode($content_data) !!},
-            fieldset: {!! json_encode($fieldset) !!}
+            fieldset: {!! json_encode($fieldset) !!},
         };
     </script>
 
-    <publish title="{{ $title }}"
-             extra="{{ json_encode($extra) }}"
-             :is-new="false"
-             slug="{{ $slug }}"
-             content-type="{{ $content_type }}"
-             :update-title-on-save="false"
+    <publish
+        title="{{ $title }}"
+        extra="{{ json_encode($extra) }}"
+        :is-new="false"
+        slug="{{ $slug }}"
+        content-type="{{ $content_type }}"
+        :update-title-on-save="false"
     ></publish>
-
 @endsection
diff --git a/resources/views/assets/browse.blade.php b/resources/views/assets/browse.blade.php
index 9ccadf0d70..0bc7b5ae88 100644
--- a/resources/views/assets/browse.blade.php
+++ b/resources/views/assets/browse.blade.php
@@ -1,11 +1,12 @@
-@php use function Statamic\trans as __; @endphp
+@php
+    use function Statamic\trans as __;
+@endphp
 
 @extends('statamic::layout')
 @section('title', Statamic::crumb('Assets', $container['title']))
 @section('wrapper_class', 'max-w-full')
 
 @section('content')
-
     <asset-manager
         :initial-container="{{ json_encode($container) }}"
         initial-path="{{ $folder }}"
@@ -14,9 +15,11 @@
         create-container-url="{{ cp_route('asset-containers.create') }}"
     ></asset-manager>
 
-    @include('statamic::partials.docs-callout', [
-        'topic' => __('Assets'),
-        'url' => Statamic::docsUrl('assets')
-    ])
-
+    @include(
+        'statamic::partials.docs-callout',
+        [
+            'topic' => __('Assets'),
+            'url' => Statamic::docsUrl('assets'),
+        ]
+    )
 @endsection
diff --git a/resources/views/assets/containers/blueprints/edit.blade.php b/resources/views/assets/containers/blueprints/edit.blade.php
index 013bb0a70b..4d1cd61579 100644
--- a/resources/views/assets/containers/blueprints/edit.blade.php
+++ b/resources/views/assets/containers/blueprints/edit.blade.php
@@ -1,14 +1,18 @@
-@php use function Statamic\trans as __; @endphp
+@php
+    use function Statamic\trans as __;
+@endphp
 
 @extends('statamic::layout')
 @section('title', __('Edit Blueprint'))
 
 @section('content')
-
-    @include('statamic::partials.breadcrumb', [
-        'url' => cp_route('assets.browse.show', $container->handle()),
-        'title' => $container->title(),
-    ])
+    @include(
+        'statamic::partials.breadcrumb',
+        [
+            'url' => cp_route('assets.browse.show', $container->handle()),
+            'title' => $container->title(),
+        ]
+    )
 
     <blueprint-builder
         action="{{ cp_route('asset-containers.blueprint.update', $container->handle()) }}"
@@ -17,9 +21,11 @@
         :can-define-localizable="false"
     ></blueprint-builder>
 
-    @include('statamic::partials.docs-callout', [
-        'topic' => __('Blueprints'),
-        'url' => Statamic::docsUrl('blueprints')
-    ])
-
+    @include(
+        'statamic::partials.docs-callout',
+        [
+            'topic' => __('Blueprints'),
+            'url' => Statamic::docsUrl('blueprints'),
+        ]
+    )
 @endsection
diff --git a/resources/views/assets/containers/create.blade.php b/resources/views/assets/containers/create.blade.php
index ec60d541f8..fd5969d850 100644
--- a/resources/views/assets/containers/create.blade.php
+++ b/resources/views/assets/containers/create.blade.php
@@ -1,10 +1,11 @@
-@php use function Statamic\trans as __; @endphp
+@php
+    use function Statamic\trans as __;
+@endphp
 
 @extends('statamic::layout')
 @section('title', __('Create Asset Container'))
 
 @section('content')
-
     <asset-container-create-form
         initial-title="{{ __('Create Asset Container') }}"
         :blueprint="{{ json_encode($blueprint) }}"
@@ -14,5 +15,4 @@
         listing-url="{{ cp_route('assets.browse.index') }}"
         action="post"
     ></asset-container-create-form>
-
 @endsection
diff --git a/resources/views/assets/containers/edit.blade.php b/resources/views/assets/containers/edit.blade.php
index 38c22225a9..6d159eb2fa 100644
--- a/resources/views/assets/containers/edit.blade.php
+++ b/resources/views/assets/containers/edit.blade.php
@@ -1,15 +1,19 @@
-@php use function Statamic\trans as __; @endphp
+@php
+    use function Statamic\trans as __;
+@endphp
 
 @extends('statamic::layout')
 @section('title', __('Configure Asset Container'))
 
 @section('content')
-
     <header class="mb-6">
-        @include('statamic::partials.breadcrumb', [
-            'url' => cp_route('assets.browse.show', $container->handle()),
-            'title' => $container->title()
-        ])
+        @include(
+            'statamic::partials.breadcrumb',
+            [
+                'url' => cp_route('assets.browse.show', $container->handle()),
+                'title' => $container->title(),
+            ]
+        )
         <h1>@yield('title')</h1>
     </header>
 
@@ -22,5 +26,4 @@
         listing-url="{{ cp_route('assets.browse.show', $container->handle()) }}"
         action="patch"
     ></asset-container-edit-form>
-
 @endsection
diff --git a/resources/views/assets/containers/index.blade.php b/resources/views/assets/containers/index.blade.php
index 87065f1229..aebe58a097 100644
--- a/resources/views/assets/containers/index.blade.php
+++ b/resources/views/assets/containers/index.blade.php
@@ -1,11 +1,12 @@
-@php use function Statamic\trans as __; @endphp
+@php
+    use function Statamic\trans as __;
+@endphp
 
 @extends('statamic::layout')
 @section('title', __('Asset Containers'))
 
 @section('content')
-
-    <div class="flex mb-6">
+    <div class="mb-6 flex">
         <h1 class="flex-1">{{ __('Asset Containers') }}</h1>
 
         @can('create', 'Statamic\Contracts\Assets\AssetContainer')
@@ -18,5 +19,4 @@
         :columns="{{ json_encode($columns) }}"
         :visible-columns="{{ json_encode($visibleColumns) }}"
     ></asset-container-list>
-
 @endsection
diff --git a/resources/views/assets/index.blade.php b/resources/views/assets/index.blade.php
index 1a4390e0a3..58a7d609e4 100644
--- a/resources/views/assets/index.blade.php
+++ b/resources/views/assets/index.blade.php
@@ -1,22 +1,28 @@
-@php use function Statamic\trans as __; @endphp
+@php
+    use function Statamic\trans as __;
+@endphp
 
 @extends('statamic::layout')
 @section('title', __('Assets'))
 
 @section('content')
+    @include(
+        'statamic::partials.empty-state',
+        [
+            'title' => __('Asset Containers'),
+            'description' => __('statamic::messages.asset_container_intro'),
+            'svg' => 'empty/asset-container',
+            'button_text' => __('Create Asset Container'),
+            'button_url' => cp_route('asset-containers.create'),
+            'can' => $user->can('create', \Statamic\Contracts\Assets\AssetContainer::class),
+        ]
+    )
 
-    @include('statamic::partials.empty-state', [
-        'title' => __('Asset Containers'),
-        'description' => __('statamic::messages.asset_container_intro'),
-        'svg' => 'empty/asset-container',
-        'button_text' => __('Create Asset Container'),
-        'button_url' => cp_route('asset-containers.create'),
-        'can' => $user->can('create', \Statamic\Contracts\Assets\AssetContainer::class)
-    ])
-
-    @include('statamic::partials.docs-callout', [
-        'topic' => __('Assets'),
-        'url' => Statamic::docsUrl('assets')
-    ])
-
+    @include(
+        'statamic::partials.docs-callout',
+        [
+            'topic' => __('Assets'),
+            'url' => Statamic::docsUrl('assets'),
+        ]
+    )
 @endsection
diff --git a/resources/views/auth/login.blade.php b/resources/views/auth/login.blade.php
index 1cd1f84b70..7a167e85f5 100644
--- a/resources/views/auth/login.blade.php
+++ b/resources/views/auth/login.blade.php
@@ -1,78 +1,101 @@
-@php use function Statamic\trans as __; @endphp
+@php
+    use function Statamic\trans as __;
+@endphp
 
 @inject('str', 'Statamic\Support\Str')
 @extends('statamic::outside')
 @section('title', __('Log in'))
 
 @section('content')
+    @include('statamic::partials.outside-logo')
 
-@include('statamic::partials.outside-logo')
-
-<div class="max-w-xs rounded shadow-lg flex items-center justify-center relative mx-auto">
-    <div class="outside-shadow absolute inset-0"></div>
-    <div class="card auth-card">
-        <login
-            :show-email-login="!{{ $str::bool($oauth) }}"
-            :has-error="{{ $str::bool(count($errors) > 0) }}"
-            v-slot="{ showEmailLogin, busy, hasError }"
-        >
-        <div>
-            @if ($oauth)
-                <div class="login-oauth-providers">
-                    @foreach ($providers as $provider)
-                        <div class="provider mb-2">
-                            <a href="{{ $provider->loginUrl() }}?redirect={{ parse_url(cp_route('index'))['path'] }}" class="w-full btn-primary">
-                                {{ __('Log in with :provider', ['provider' => $provider->label()]) }}
-                            </a>
+    <div class="relative mx-auto flex max-w-xs items-center justify-center rounded shadow-lg">
+        <div class="outside-shadow absolute inset-0"></div>
+        <div class="card auth-card">
+            <login
+                :show-email-login="!{{ $str::bool($oauth) }}"
+                :has-error="{{ $str::bool(count($errors) > 0) }}"
+                v-slot="{ showEmailLogin, busy, hasError }"
+            >
+                <div>
+                    @if ($oauth)
+                        <div class="login-oauth-providers">
+                            @foreach ($providers as $provider)
+                                <div class="provider mb-2">
+                                    <a
+                                        href="{{ $provider->loginUrl() }}?redirect={{ parse_url(cp_route('index'))['path'] }}"
+                                        class="btn-primary w-full"
+                                    >
+                                        {{ __('Log in with :provider', ['provider' => $provider->label()]) }}
+                                    </a>
+                                </div>
+                            @endforeach
                         </div>
-                    @endforeach
-                </div>
 
-                @if($emailLoginEnabled)
-                    <div class="text-center text-sm text-gray-700 py-6">&mdash; {{ __('or') }} &mdash;</div>
+                        @if ($emailLoginEnabled)
+                            <div class="py-6 text-center text-sm text-gray-700">&mdash; {{ __('or') }} &mdash;</div>
 
-                    <div class="login-with-email" v-if="! showEmailLogin">
-                        <a class="btn w-full" @click.prevent="showEmailLogin = true">
-                            {{ __('Log in with email') }}
-                        </a>
-                    </div>
-                @endif
-            @endif
+                            <div class="login-with-email" v-if="! showEmailLogin">
+                                <a class="btn w-full" @click.prevent="showEmailLogin = true">
+                                    {{ __('Log in with email') }}
+                                </a>
+                            </div>
+                        @endif
+                    @endif
 
-            <form method="POST" v-show="showEmailLogin" class="email-login select-none" @if ($oauth) v-cloak @endif @submit="busy = true">
-                {!! csrf_field() !!}
+                    <form
+                        method="POST"
+                        v-show="showEmailLogin"
+                        class="email-login select-none"
+                        @if ($oauth) v-cloak @endif
+                        @submit="busy = true"
+                    >
+                        {!! csrf_field() !!}
 
-                <input type="hidden" name="referer" value="{{ $referer }}" />
+                        <input type="hidden" name="referer" value="{{ $referer }}" />
 
-                <div class="mb-8">
-                    <label class="mb-2" for="input-email">{{ __('Email') }}</label>
-                    <input type="text" class="input-text input-text" name="email" value="{{ old('email') }}" autofocus id="input-email">
-                    @if ($hasError('email'))<div class="text-red-500 text-xs mt-2">{{ $errors->first('email') }}</div>@endif
-                </div>
+                        <div class="mb-8">
+                            <label class="mb-2" for="input-email">{{ __('Email') }}</label>
+                            <input
+                                type="text"
+                                class="input-text input-text"
+                                name="email"
+                                value="{{ old('email') }}"
+                                autofocus
+                                id="input-email"
+                            />
+                            @if ($hasError('email'))
+                                <div class="mt-2 text-xs text-red-500">{{ $errors->first('email') }}</div>
+                            @endif
+                        </div>
 
-                <div class="mb-8">
-                    <label class="mb-2" for="input-password">{{ __('Password') }}</label>
-                    <input type="password" class="input-text input-text" name="password" id="input-password">
-                    @if ($hasError('password'))<div class="text-red-500 text-xs mt-2">{{ $errors->first('password') }}</div>@endif
-                </div>
-                <div class="flex justify-between items-center">
-                    <label for="remember-me" class="flex items-center cursor-pointer">
-                        <input type="checkbox" name="remember" id="remember-me">
-                        <span class="rtl:mr-2 ltr:ml-2">{{ __('Remember me') }}</span>
-                    </label>
-                    <button type="submit" class="btn-primary" :disabled="busy">{{ __('Log in') }}</button>
+                        <div class="mb-8">
+                            <label class="mb-2" for="input-password">{{ __('Password') }}</label>
+                            <input type="password" class="input-text input-text" name="password" id="input-password" />
+                            @if ($hasError('password'))
+                                <div class="mt-2 text-xs text-red-500">{{ $errors->first('password') }}</div>
+                            @endif
+                        </div>
+                        <div class="flex items-center justify-between">
+                            <label for="remember-me" class="flex cursor-pointer items-center">
+                                <input type="checkbox" name="remember" id="remember-me" />
+                                <span class="ltr:ml-2 rtl:mr-2">{{ __('Remember me') }}</span>
+                            </label>
+                            <button type="submit" class="btn-primary" :disabled="busy">{{ __('Log in') }}</button>
+                        </div>
+                    </form>
                 </div>
-            </form>
+            </login>
         </div>
-        </login>
-    </div>
-</div>
-@if ($emailLoginEnabled)
-    <div class="w-full text-center mt-4 dark:mt-6">
-        <a href="{{ cp_route('password.request') }}" class="forgot-password-link text-sm opacity-75 hover:opacity-100">
-            {{ __('Forgot password?') }}
-        </a>
     </div>
-@endif
-
+    @if ($emailLoginEnabled)
+        <div class="mt-4 w-full text-center dark:mt-6">
+            <a
+                href="{{ cp_route('password.request') }}"
+                class="forgot-password-link text-sm opacity-75 hover:opacity-100"
+            >
+                {{ __('Forgot password?') }}
+            </a>
+        </div>
+    @endif
 @endsection
diff --git a/resources/views/auth/passwords/email.blade.php b/resources/views/auth/passwords/email.blade.php
index 0d04ee1294..7cdc796b46 100644
--- a/resources/views/auth/passwords/email.blade.php
+++ b/resources/views/auth/passwords/email.blade.php
@@ -1,16 +1,20 @@
-@php use function Statamic\trans as __; @endphp
+@php
+    use function Statamic\trans as __;
+@endphp
 
 @extends('statamic::outside')
 
 @section('content')
     @include('statamic::partials.outside-logo')
 
-    <div class="max-w-xs rounded shadow-lg flex items-center justify-center relative mx-auto">
+    <div class="relative mx-auto flex max-w-xs items-center justify-center rounded shadow-lg">
         <div class="outside-shadow absolute inset-0"></div>
         <div class="card auth-card">
-            <div class="text-center pb-4 mb-4">
+            <div class="mb-4 pb-4 text-center">
                 <h1 class="mb-4 text-lg text-gray-800 dark:text-white/80">{{ __('Forgot Your Password?') }}</h1>
-                <p class="text-sm text-gray dark:text-dark-175">{{ __('statamic::messages.forgot_password_enter_email') }}</p>
+                <p class="text-sm text-gray dark:text-dark-175">
+                    {{ __('statamic::messages.forgot_password_enter_email') }}
+                </p>
             </div>
 
             @if (session('status'))
@@ -24,10 +28,16 @@
 
                 <div class="mb-8">
                     <label for="email" class="mb-2">{{ __('Email Address') }}</label>
-                    <input id="email" type="text" class="input-text input-text" name="email" value="{{ old('email') }}" >
+                    <input
+                        id="email"
+                        type="text"
+                        class="input-text input-text"
+                        name="email"
+                        value="{{ old('email') }}"
+                    />
 
                     @error('email', 'user.forgot_password')
-                        <div class="text-red-500 text-xs mt-2">{{ $message }}</div>
+                        <div class="mt-2 text-xs text-red-500">{{ $message }}</div>
                     @enderror
                 </div>
 
@@ -35,14 +45,12 @@
                     {{ __('Submit') }}
                 </button>
             </form>
-
         </div>
     </div>
 
-    <div class="w-full text-center mt-4 dark:mt-6">
+    <div class="mt-4 w-full text-center dark:mt-6">
         <a href="{{ cp_route('login') }}" class="forgot-password-link text-sm opacity-75 hover:opacity-100">
             {{ __('I remember my password') }}
         </a>
     </div>
-
 @endsection
diff --git a/resources/views/auth/passwords/reset.blade.php b/resources/views/auth/passwords/reset.blade.php
index 1a6e119189..5b72d5110c 100644
--- a/resources/views/auth/passwords/reset.blade.php
+++ b/resources/views/auth/passwords/reset.blade.php
@@ -1,55 +1,66 @@
-@php use function Statamic\trans as __; @endphp
+@php
+    use function Statamic\trans as __;
+@endphp
 
 @extends('statamic::outside')
 
 @section('content')
-
-
     <h1 class="mb-6 pt-20 text-center text-gray-800 dark:text-white/80">{{ $title }}</h1>
 
-    <div class="max-w-xs rounded shadow-lg flex items-center justify-center relative mx-auto">
+    <div class="relative mx-auto flex max-w-xs items-center justify-center rounded shadow-lg">
         <div class="outside-shadow absolute inset-0"></div>
         <div class="card auth-card" x-data="{ busy: false }" v-pre>
-
             <form method="POST" action="{{ $action }}" x-on:submit="busy = true">
                 @csrf
 
-                <input type="hidden" name="token" value="{{ $token }}">
+                <input type="hidden" name="token" value="{{ $token }}" />
 
                 @if (request('redirect'))
-                    <input type="hidden" name="redirect" value="{{ request('redirect') }}">
+                    <input type="hidden" name="redirect" value="{{ request('redirect') }}" />
                 @endif
 
                 <div class="mb-8">
-                    <label for="email"  class="mb-2">{{ __('Email Address') }}</label>
-
-                    <input id="email" type="email" class="input-text input-text" name="email" value="{{ $email ?? old('email') }}" autofocus required>
+                    <label for="email" class="mb-2">{{ __('Email Address') }}</label>
+
+                    <input
+                        id="email"
+                        type="email"
+                        class="input-text input-text"
+                        name="email"
+                        value="{{ $email ?? old('email') }}"
+                        autofocus
+                        required
+                    />
 
                     @error('email')
-                        <div class="text-red-500 text-xs mt-2">{{ $message }}</div>
+                        <div class="mt-2 text-xs text-red-500">{{ $message }}</div>
                     @enderror
                 </div>
 
                 <div class="mb-8">
                     <label for="password" class="mb-2">{{ __('Password') }}</label>
 
-                    <input id="password" type="password" class="input-text input-text" name="password" required>
+                    <input id="password" type="password" class="input-text input-text" name="password" required />
 
                     @error('password')
-                        <div class="text-red-500 text-xs mt-2">{{ $message }}</div>
+                        <div class="mt-2 text-xs text-red-500">{{ $message }}</div>
                     @enderror
                 </div>
 
                 <div class="mb-8">
                     <label for="password-confirm" class="mb-2">{{ __('Confirm Password') }}</label>
 
-                    <input id="password-confirm" type="password" class="input-text input-text" name="password_confirmation" required>
+                    <input
+                        id="password-confirm"
+                        type="password"
+                        class="input-text input-text"
+                        name="password_confirmation"
+                        required
+                    />
                 </div>
 
                 <button type="submit" class="btn-primary" :disabled="busy">{{ $title }}</button>
-
             </form>
         </div>
     </div>
-
 @endsection
diff --git a/resources/views/auth/unauthorized.blade.php b/resources/views/auth/unauthorized.blade.php
index d781cefc79..add10e2e80 100644
--- a/resources/views/auth/unauthorized.blade.php
+++ b/resources/views/auth/unauthorized.blade.php
@@ -1,21 +1,25 @@
-@php use function Statamic\trans as __; @endphp
+@php
+    use function Statamic\trans as __;
+@endphp
 
 @extends('statamic::outside')
 @section('title', __('Unauthorized'))
 
 @section('content')
-@include('statamic::partials.outside-logo')
+    @include('statamic::partials.outside-logo')
 
-<div class="max-w-xs rounded shadow-lg flex items-center justify-center relative mx-auto">
-    <div class="outside-shadow absolute inset-0"></div>
-    <div class="card auth-card">
-        <div class="mb-6">{{ __('Unauthorized') }}</div>
-        @auth
-            <a class="btn-primary" href="{{ cp_route('logout') }}?redirect={{ $redirect }}">{{ __('Log out') }}</a>
-        @else
-            <a class="btn-primary" href="{{ cp_route('login') }}">{{ __('Log in') }}</a>
-        @endauth
-    </div>
-</div>
+    <div class="relative mx-auto flex max-w-xs items-center justify-center rounded shadow-lg">
+        <div class="outside-shadow absolute inset-0"></div>
+        <div class="card auth-card">
+            <div class="mb-6">{{ __('Unauthorized') }}</div>
 
+            @auth
+                <a class="btn-primary" href="{{ cp_route('logout') }}?redirect={{ $redirect }}">
+                    {{ __('Log out') }}
+                </a>
+            @else
+                <a class="btn-primary" href="{{ cp_route('login') }}">{{ __('Log in') }}</a>
+            @endauth
+        </div>
+    </div>
 @endsection
diff --git a/resources/views/blueprints/edit.blade.php b/resources/views/blueprints/edit.blade.php
index a9fe90b76c..c1030ce583 100644
--- a/resources/views/blueprints/edit.blade.php
+++ b/resources/views/blueprints/edit.blade.php
@@ -1,14 +1,18 @@
-@php use function Statamic\trans as __; @endphp
+@php
+    use function Statamic\trans as __;
+@endphp
 
 @extends('statamic::layout')
 @section('title', __('Edit Blueprint'))
 
 @section('content')
-
-    @include('statamic::partials.breadcrumb', [
-        'url' => cp_route('blueprints.index'),
-        'title' => __('Blueprints')
-    ])
+    @include(
+        'statamic::partials.breadcrumb',
+        [
+            'url' => cp_route('blueprints.index'),
+            'title' => __('Blueprints'),
+        ]
+    )
 
     <blueprint-builder
         show-title
@@ -16,9 +20,11 @@
         :initial-blueprint="{{ json_encode($blueprintVueObject) }}"
     ></blueprint-builder>
 
-    @include('statamic::partials.docs-callout', [
-        'topic' => __('Blueprints'),
-        'url' => Statamic::docsUrl('blueprints')
-    ])
-
+    @include(
+        'statamic::partials.docs-callout',
+        [
+            'topic' => __('Blueprints'),
+            'url' => Statamic::docsUrl('blueprints'),
+        ]
+    )
 @endsection
diff --git a/resources/views/collections/blueprints/create.blade.php b/resources/views/collections/blueprints/create.blade.php
index 4070795ab9..a918428a5a 100644
--- a/resources/views/collections/blueprints/create.blade.php
+++ b/resources/views/collections/blueprints/create.blade.php
@@ -1,4 +1,6 @@
-@php use function Statamic\trans as __; @endphp
+@php
+    use function Statamic\trans as __;
+@endphp
 
 @extends('statamic::layout')
 @section('title', __('Create Blueprint'))
@@ -6,26 +8,34 @@
 @section('content')
 <form action="{{ $action }}" method="POST">
     @csrf
-    <div class="max-w-lg mt-4 mx-auto">
-        <div class="rounded p-6 lg:px-20 lg:py-10 shadow bg-white dark:bg-dark-600 dark:shadow-dark">
-            <header class="text-center mb-16">
+    <div class="mx-auto mt-4 max-w-lg">
+        <div class="rounded bg-white p-6 shadow dark:bg-dark-600 dark:shadow-dark lg:px-20 lg:py-10">
+            <header class="mb-16 text-center">
                 <h1 class="mb-6">{{ __('Create Blueprint') }}</h1>
                 <p class="text-gray">{{ __('statamic::messages.blueprints_intro') }}</p>
             </header>
             <div class="mb-10">
-                <label class="font-bold text-base mb-1" for="name">{{ __('Title') }}</label>
-                <input type="text" name="title" value="{{ old('title') }}" class="input-text" autofocus required tabindex="1">
-                <div class="text-2xs text-gray-600 mt-2 flex items-center">
+                <label class="mb-1 text-base font-bold" for="name">{{ __('Title') }}</label>
+                <input
+                    type="text"
+                    name="title"
+                    value="{{ old('title') }}"
+                    class="input-text"
+                    autofocus
+                    required
+                    tabindex="1"
+                />
+                <div class="mt-2 flex items-center text-2xs text-gray-600">
                     {{ __('statamic::messages.blueprints_title_instructions') }}
                 </div>
                 @if ($errors->has('title'))
-                    <div class="text-red-500 text-xs mt-2">{{ $errors->first('title') }}</div>
+                    <div class="mt-2 text-xs text-red-500">{{ $errors->first('title') }}</div>
                 @endif
             </div>
         </div>
 
-        <div class="flex justify-center mt-8">
-            <button tabindex="4" class="btn-primary mx-auto btn-lg">
+        <div class="mt-8 flex justify-center">
+            <button tabindex="4" class="btn-primary btn-lg mx-auto">
                 {{ __('Create Blueprint') }}
             </button>
         </div>
diff --git a/resources/views/collections/blueprints/edit.blade.php b/resources/views/collections/blueprints/edit.blade.php
index 83c66e01fd..c34a32a425 100644
--- a/resources/views/collections/blueprints/edit.blade.php
+++ b/resources/views/collections/blueprints/edit.blade.php
@@ -1,14 +1,18 @@
-@php use function Statamic\trans as __; @endphp
+@php
+    use function Statamic\trans as __;
+@endphp
 
 @extends('statamic::layout')
 @section('title', __('Edit Blueprint'))
 
 @section('content')
-
-    @include('statamic::partials.breadcrumb', [
-        'url' => cp_route('collections.blueprints.index', $collection),
-        'title' => __('Blueprints')
-    ])
+    @include(
+        'statamic::partials.breadcrumb',
+        [
+            'url' => cp_route('collections.blueprints.index', $collection),
+            'title' => __('Blueprints'),
+        ]
+    )
 
     <blueprint-builder
         show-title
@@ -16,9 +20,11 @@
         :initial-blueprint="{{ json_encode($blueprintVueObject) }}"
     ></blueprint-builder>
 
-    @include('statamic::partials.docs-callout', [
-        'topic' => __('Blueprints'),
-        'url' => Statamic::docsUrl('blueprints')
-    ])
-
+    @include(
+        'statamic::partials.docs-callout',
+        [
+            'topic' => __('Blueprints'),
+            'url' => Statamic::docsUrl('blueprints'),
+        ]
+    )
 @endsection
diff --git a/resources/views/collections/blueprints/index.blade.php b/resources/views/collections/blueprints/index.blade.php
index 9faef7b0a8..8888d8f784 100644
--- a/resources/views/collections/blueprints/index.blade.php
+++ b/resources/views/collections/blueprints/index.blade.php
@@ -1,14 +1,18 @@
-@php use function Statamic\trans as __; @endphp
+@php
+    use function Statamic\trans as __;
+@endphp
 
 @extends('statamic::layout')
 @section('title', __('Blueprints'))
 
 @section('content')
-
-    @include('statamic::partials.breadcrumb', [
-        'url' => cp_route('collections.show', $collection->handle()),
-        'title' => $collection->title()
-    ])
+    @include(
+        'statamic::partials.breadcrumb',
+        [
+            'url' => cp_route('collections.show', $collection->handle()),
+            'title' => $collection->title(),
+        ]
+    )
 
     <collection-blueprint-listing
         inline-template
@@ -16,7 +20,7 @@
         reorder-url="{{ cp_route('collections.blueprints.reorder', $collection) }}"
     >
         <div>
-            <div class="flex justify-between items-center mb-6">
+            <div class="mb-6 flex items-center justify-between">
                 <h1>@yield('title')</h1>
 
                 <div>
@@ -26,10 +30,17 @@ class="btn"
                             :class="{ 'disabled': !hasBeenReordered }"
                             :disabled="!hasBeenReordered"
                             @click="saveOrder"
-                        >{{ __('Save Order') }}</button>
+                        >
+                            {{ __('Save Order') }}
+                        </button>
                     @endif
 
-                    <a href="{{ cp_route('collections.blueprints.create', $collection) }}" class="btn-primary rtl:mr-2 ltr:ml-2">{{ __('Create Blueprint') }}</a>
+                    <a
+                        href="{{ cp_route('collections.blueprints.create', $collection) }}"
+                        class="btn-primary ltr:ml-2 rtl:mr-2"
+                    >
+                        {{ __('Create Blueprint') }}
+                    </a>
                 </div>
             </div>
 
@@ -41,9 +52,11 @@ class="btn"
         </div>
     </collection-blueprint-listing>
 
-    @include('statamic::partials.docs-callout', [
-        'topic' => __('Blueprints'),
-        'url' => Statamic::docsUrl('blueprints')
-    ])
-
+    @include(
+        'statamic::partials.docs-callout',
+        [
+            'topic' => __('Blueprints'),
+            'url' => Statamic::docsUrl('blueprints'),
+        ]
+    )
 @endsection
diff --git a/resources/views/collections/create.blade.php b/resources/views/collections/create.blade.php
index 0ac3159c7c..ccce13a29c 100644
--- a/resources/views/collections/create.blade.php
+++ b/resources/views/collections/create.blade.php
@@ -1,10 +1,10 @@
-@php use function Statamic\trans as __; @endphp
+@php
+    use function Statamic\trans as __;
+@endphp
 
 @extends('statamic::layout')
 @section('title', __('Create Collection'))
 
 @section('content')
-    <collection-create-form
-        route="{{ cp_route('collections.store') }}">
-    </collection-create-form>
+<collection-create-form route="{{ cp_route('collections.store') }}"></collection-create-form>
 @stop
diff --git a/resources/views/collections/edit.blade.php b/resources/views/collections/edit.blade.php
index 4d136aca7f..d494fece42 100644
--- a/resources/views/collections/edit.blade.php
+++ b/resources/views/collections/edit.blade.php
@@ -1,15 +1,17 @@
-@php use function Statamic\trans as __; @endphp
+@php
+    use function Statamic\trans as __;
+@endphp
 
 @extends('statamic::layout')
 @section('title', __('Configure Collection'))
 
 @section('content')
 
-    <collection-edit-form
-        :blueprint="{{ json_encode($blueprint) }}"
-        :initial-values="{{ json_encode($values) }}"
-        :meta="{{ json_encode($meta) }}"
-        url="{{ cp_route('collections.update', $collection->handle()) }}"
-    ></collection-edit-form>
+<collection-edit-form
+    :blueprint="{{ json_encode($blueprint) }}"
+    :initial-values="{{ json_encode($values) }}"
+    :meta="{{ json_encode($meta) }}"
+    url="{{ cp_route('collections.update', $collection->handle()) }}"
+></collection-edit-form>
 
 @stop
diff --git a/resources/views/collections/empty.blade.php b/resources/views/collections/empty.blade.php
index 8ef0939af8..449fbc147b 100644
--- a/resources/views/collections/empty.blade.php
+++ b/resources/views/collections/empty.blade.php
@@ -1,4 +1,6 @@
-@php use function Statamic\trans as __; @endphp
+@php
+    use function Statamic\trans as __;
+@endphp
 
 @extends('statamic::layout')
 @section('title', Statamic::crumb($collection->title(), 'Collections'))
@@ -6,26 +8,36 @@
 @section('content')
 
 <header class="mb-6">
-    @include('statamic::partials.breadcrumb', [
-        'url' => cp_route('collections.index'),
-        'title' => __('Collections')
-    ])
+    @include(
+        'statamic::partials.breadcrumb',
+        [
+            'url' => cp_route('collections.index'),
+            'title' => __('Collections'),
+        ]
+    )
     <h1 v-pre>{{ __($collection->title()) }}</h1>
 </header>
 
-<div class="card p-4 content">
+<div class="card content p-4">
     <div class="flex flex-wrap">
         @can('edit', $collection)
-        <a href="{{ cp_route('collections.edit', $collection->handle()) }}" class="w-full lg:w-1/2 p-4 flex items-start hover:bg-gray-200 dark:hover:bg-dark-550 rounded-md group">
-            <div class="h-8 w-8 rtl:ml-4 ltr:mr-4 text-gray-800 dark:text-dark-175">
-                @cp_svg('icons/light/hammer-wrench')
-            </div>
-            <div class="flex-1 mb-4 md:mb-0 rtl:md:ml-6 ltr:md:mr-6">
-                <h3 class="mb-2 text-blue dark:text-blue-600">{{ __('Configure Collection') }} @rarr</h3>
-                <p>{{ __('statamic::messages.collection_next_steps_configure_description') }}</p>
-            </div>
-        </a>
+            <a
+                href="{{ cp_route('collections.edit', $collection->handle()) }}"
+                class="group flex w-full items-start rounded-md p-4 hover:bg-gray-200 dark:hover:bg-dark-550 lg:w-1/2"
+            >
+                <div class="h-8 w-8 text-gray-800 dark:text-dark-175 ltr:mr-4 rtl:ml-4">
+                    @cp_svg('icons/light/hammer-wrench')
+                </div>
+                <div class="mb-4 flex-1 md:mb-0 ltr:md:mr-6 rtl:md:ml-6">
+                    <h3 class="mb-2 text-blue dark:text-blue-600">
+                        {{ __('Configure Collection') }}
+                        @rarr
+                    </h3>
+                    <p>{{ __('statamic::messages.collection_next_steps_configure_description') }}</p>
+                </div>
+            </a>
         @endcan
+
         {{-- format-ignore-start --}}
         @can('create', ['Statamic\Contracts\Entries\Entry', $collection, \Statamic\Facades\Site::get($site)])
         <?php $multipleBlueprints = $collection->entryBlueprints()->count() > 1 ?>
@@ -83,3 +95,5 @@ class="text-blue text-sm rtl:ml-2 ltr:mr-2">{{ $blueprint->title() }} @rarr</a>
         'url' => Statamic::docsUrl('collections')
     ])
 @stop
+    </div>
+</div>
diff --git a/resources/views/collections/index.blade.php b/resources/views/collections/index.blade.php
index dcda2f2c65..79d4a6158e 100644
--- a/resources/views/collections/index.blade.php
+++ b/resources/views/collections/index.blade.php
@@ -1,13 +1,13 @@
-@php use function Statamic\trans as __; @endphp
+@php
+    use function Statamic\trans as __;
+@endphp
 
 @extends('statamic::layout')
 @section('title', __('Collections'))
 
 @section('content')
-
-    @unless($collections->isEmpty())
-
-        <div class="flex items-center justify-between mb-6">
+    @unless ($collections->isEmpty())
+        <div class="mb-6 flex items-center justify-between">
             <h1>{{ __('Collections') }}</h1>
 
             @can('create', 'Statamic\Contracts\Entries\Collection')
@@ -18,25 +18,26 @@
         <collection-list
             :initial-rows="{{ json_encode($collections) }}"
             :initial-columns="{{ json_encode($columns) }}"
-        >
-        </collection-list>
-
+        ></collection-list>
     @else
-
-        @include('statamic::partials.empty-state', [
-            'title' => __('Collections'),
-            'description' => __('statamic::messages.collection_configure_intro'),
-            'svg' => 'empty/content',
-            'button_text' => __('Create Collection'),
-            'button_url' => cp_route('collections.create'),
-            'can' => $user->can('create', 'Statamic\Contracts\Entries\Collection')
-        ])
-
+        @include(
+            'statamic::partials.empty-state',
+            [
+                'title' => __('Collections'),
+                'description' => __('statamic::messages.collection_configure_intro'),
+                'svg' => 'empty/content',
+                'button_text' => __('Create Collection'),
+                'button_url' => cp_route('collections.create'),
+                'can' => $user->can('create', 'Statamic\Contracts\Entries\Collection'),
+            ]
+        )
     @endunless
 
-    @include('statamic::partials.docs-callout', [
-        'topic' => __('Collections'),
-        'url' => Statamic::docsUrl('collections')
-    ])
-
+    @include(
+        'statamic::partials.docs-callout',
+        [
+            'topic' => __('Collections'),
+            'url' => Statamic::docsUrl('collections'),
+        ]
+    )
 @endsection
diff --git a/resources/views/collections/scaffold.blade.php b/resources/views/collections/scaffold.blade.php
index 4d1b1a0184..37f90960cb 100644
--- a/resources/views/collections/scaffold.blade.php
+++ b/resources/views/collections/scaffold.blade.php
@@ -1,20 +1,25 @@
-@php use function Statamic\trans as __; @endphp
+@php
+    use function Statamic\trans as __;
+@endphp
 
 @extends('statamic::layout')
 @section('title', __('Scaffold Collection'))
 
 @section('content')
-    <header class="mb-6">
-        @include('statamic::partials.breadcrumb', [
+<header class="mb-6">
+    @include(
+        'statamic::partials.breadcrumb',
+        [
             'url' => cp_route('collections.show', $collection->handle()),
-            'title' => $collection->title()
-        ])
-        <h1> {{ __('Scaffold Views') }}</h1>
-    </header>
+            'title' => $collection->title(),
+        ]
+    )
+    <h1>{{ __('Scaffold Views') }}</h1>
+</header>
 
-    <collection-scaffolder
-        title="{{ $collection->title() }}"
-        handle="{{ $collection->handle() }}"
-        route="{{ url()->current() }}" >
-    </collection-scaffolder>
+<collection-scaffolder
+    title="{{ $collection->title() }}"
+    handle="{{ $collection->handle() }}"
+    route="{{ url()->current() }}"
+></collection-scaffolder>
 @stop
diff --git a/resources/views/collections/show.blade.php b/resources/views/collections/show.blade.php
index 55a525350c..d05d0df8db 100644
--- a/resources/views/collections/show.blade.php
+++ b/resources/views/collections/show.blade.php
@@ -1,13 +1,12 @@
-@extends('statamic::layout')
-@section('title', Statamic::crumb($collection->title(), 'Collections'))
-@section('wrapper_class', 'max-w-full')
-
-@section('content')
+@extends("statamic::layout")
+@section("title", Statamic::crumb($collection->title(), "Collections"))
+@section("wrapper_class", "max-w-full")
 
+@section("content")
     <collection-view
         title="{{ $collection->title() }}"
         handle="{{ $collection->handle() }}"
-        breadcrumb-url="{{ cp_route('collections.index') }}"
+        breadcrumb-url="{{ cp_route("collections.index") }}"
         :can-create="{{ Statamic\Support\Str::bool($canCreate) }}"
         :create-urls="{{ Js::from($createUrls) }}"
         create-label="{{ $collection->createLabel() }}"
@@ -16,45 +15,61 @@
         sort-direction="{{ $collection->sortDirection() }}"
         :columns="{{ $columns->toJson() }}"
         :filters="{{ $filters->toJson() }}"
-        action-url="{{ cp_route('collections.entries.actions.run', $collection->handle()) }}"
-        reorder-url="{{ cp_route('collections.entries.reorder', $collection->handle()) }}"
+        action-url="{{ cp_route("collections.entries.actions.run", $collection->handle()) }}"
+        reorder-url="{{ cp_route("collections.entries.reorder", $collection->handle()) }}"
         initial-site="{{ $site }}"
         :sites="{{ json_encode($sites) }}"
         :can-change-localization-delete-behavior="{{ Statamic\Support\Str::bool($canChangeLocalizationDeleteBehavior) }}"
-
         @if ($collection->hasStructure())
-        :structured="{{ Statamic\Support\Str::bool($user->can('reorder', $collection)) }}"
-        structure-pages-url="{{ cp_route('collections.tree.index', $structure->handle()) }}"
-        structure-submit-url="{{ cp_route('collections.tree.update', $collection->handle()) }}"
-        :structure-max-depth="{{ $structure->maxDepth() ?? 'Infinity' }}"
-        :structure-expects-root="{{ Statamic\Support\Str::bool($structure->expectsRoot()) }}"
-        :structure-show-slugs="{{ Statamic\Support\Str::bool($structure->showSlugs()) }}"
+            :structured="{{ Statamic\Support\Str::bool($user->can("reorder", $collection)) }}"
+            structure-pages-url="{{ cp_route("collections.tree.index", $structure->handle()) }}"
+            structure-submit-url="{{ cp_route("collections.tree.update", $collection->handle()) }}"
+            :structure-max-depth="{{ $structure->maxDepth() ?? "Infinity" }}"
+            :structure-expects-root="{{ Statamic\Support\Str::bool($structure->expectsRoot()) }}"
+            :structure-show-slugs="{{ Statamic\Support\Str::bool($structure->showSlugs()) }}"
         @endif
     >
-        @if(
-            auth()->user()->can('edit', $collection)
-            || auth()->user()->can('delete', $collection)
-            || auth()->user()->can('configure fields')
-            || $actions->isNotEmpty()
-        )
-        <template #twirldown="{ actionCompleted }">
-            @can('edit', $collection)
-                <dropdown-item :text="__('Edit Collection')" redirect="{{ $collection->editUrl() }}"></dropdown-item>
-            @endcan
-            @can('configure fields')
-                <dropdown-item :text="__('Edit Blueprints')" redirect="{{ cp_route('collections.blueprints.index', $collection) }}"></dropdown-item>
-            @endcan
-            @can('edit', $collection)
-                <dropdown-item :text="__('Scaffold Views')" redirect="{{ cp_route('collections.scaffold', $collection->handle()) }}"></dropdown-item>
-            @endcan
-            <data-list-inline-actions
-                item="{{ $collection->handle() }}"
-                url="{{ cp_route('collections.actions.run', ['collection' => $collection->handle()]) }}"
-                :actions="{{ $actions }}"
-                @completed="actionCompleted"
-            ></data-list-inline-actions>
-        </template>
+        @if (
+
+            auth()
+                ->user()
+                ->can("edit", $collection) ||
+            auth()
+                ->user()
+                ->can("delete", $collection) ||
+            auth()
+                ->user()
+                ->can("configure fields") ||
+            $actions->isNotEmpty()        )
+            <template #twirldown="{ actionCompleted }">
+                @can("edit", $collection)
+                    <dropdown-item
+                        :text="__('Edit Collection')"
+                        redirect="{{ $collection->editUrl() }}"
+                    ></dropdown-item>
+                @endcan
+
+                @can("configure fields")
+                    <dropdown-item
+                        :text="__('Edit Blueprints')"
+                        redirect="{{ cp_route("collections.blueprints.index", $collection) }}"
+                    ></dropdown-item>
+                @endcan
+
+                @can("edit", $collection)
+                    <dropdown-item
+                        :text="__('Scaffold Views')"
+                        redirect="{{ cp_route("collections.scaffold", $collection->handle()) }}"
+                    ></dropdown-item>
+                @endcan
+
+                <data-list-inline-actions
+                    item="{{ $collection->handle() }}"
+                    url="{{ cp_route("collections.actions.run", ["collection" => $collection->handle()]) }}"
+                    :actions="{{ $actions }}"
+                    @completed="actionCompleted"
+                ></data-list-inline-actions>
+            </template>
         @endif
     </collection-view>
-
 @endsection
diff --git a/resources/views/dashboard.blade.php b/resources/views/dashboard.blade.php
index bb879129e9..94cde97a6b 100644
--- a/resources/views/dashboard.blade.php
+++ b/resources/views/dashboard.blade.php
@@ -1,21 +1,28 @@
-@php use function Statamic\trans as __; @endphp
+@php
+    use function Statamic\trans as __;
+@endphp
 
 @extends('statamic::layout')
 @section('title', __('Dashboard'))
 
 @section('content')
 
-    <div class="widgets @container flex flex-wrap -mx-4 py-2">
-        @foreach($widgets as $widget)
-            <div class="widget w-full md:{{ Statamic\Support\Str::tailwindWidthClass($widget['width']) }} {{ $widget['classes'] }} mb-8 px-4">
-                {!! $widget['html'] !!}
-            </div>
-        @endforeach
-    </div>
+<div class="widgets @container -mx-4 flex flex-wrap py-2">
+    @foreach ($widgets as $widget)
+        <div
+            class="widget md:{{ Statamic\Support\Str::tailwindWidthClass($widget['width']) }} {{ $widget['classes'] }} mb-8 w-full px-4"
+        >
+            {!! $widget['html'] !!}
+        </div>
+    @endforeach
+</div>
 
-    @include('statamic::partials.docs-callout', [
+@include(
+    'statamic::partials.docs-callout',
+    [
         'topic' => __('Widgets'),
-        'url' => Statamic::docsUrl('widgets')
-    ])
+        'url' => Statamic::docsUrl('widgets'),
+    ]
+)
 
 @stop
diff --git a/resources/views/duplicates.blade.php b/resources/views/duplicates.blade.php
index 2e33d35956..97579d3af8 100644
--- a/resources/views/duplicates.blade.php
+++ b/resources/views/duplicates.blade.php
@@ -1,44 +1,45 @@
-@php use function Statamic\trans as __; @endphp
+@php
+    use function Statamic\trans as __;
+@endphp
 
 @extends('statamic::layout')
 @section('title', __('Duplicate IDs'))
 
 @section('content')
 
-    <header class="mb-6">
-        <div class="flex items-center justify-between">
-            <h1>{{ __('Duplicate IDs') }}</h1>
-        </div>
-    </header>
-
-    @if ($duplicates->isEmpty())
-        <div class="card flex items-center">
-            {{ __('No items with duplicate IDs.') }}
-        </div>
-    @endif
-
-    @foreach ($duplicates as $id => $paths)
-        <h6 class="mt-8">{{ $id }}</h6>
-
-        <div class="card p-0 mt-2">
-            <table class="data-table">
-                @foreach ($paths as $path)
-                    <tr>
-                        <td class="font-mono text-xs">
-                            {{ $path }}
-                        </td>
-                        <td class="rtl:text-left ltr:text-right text-2xs">
-                            <form method="POST" action="{{ cp_route('duplicates.regenerate') }}">
-                                @csrf
-                                <input type="hidden" name="path" value="{{ $path }}" />
-                                <button class="text-blue">{{ __('Regenerate') }}</button>
-                            </form>
-                        </td>
-                    </tr>
-                @endforeach
-            </table>
-        </div>
-    @endforeach
-
+<header class="mb-6">
+    <div class="flex items-center justify-between">
+        <h1>{{ __('Duplicate IDs') }}</h1>
+    </div>
+</header>
+
+@if ($duplicates->isEmpty())
+    <div class="card flex items-center">
+        {{ __('No items with duplicate IDs.') }}
+    </div>
+@endif
+
+@foreach ($duplicates as $id => $paths)
+    <h6 class="mt-8">{{ $id }}</h6>
+
+    <div class="card mt-2 p-0">
+        <table class="data-table">
+            @foreach ($paths as $path)
+                <tr>
+                    <td class="font-mono text-xs">
+                        {{ $path }}
+                    </td>
+                    <td class="text-2xs ltr:text-right rtl:text-left">
+                        <form method="POST" action="{{ cp_route('duplicates.regenerate') }}">
+                            @csrf
+                            <input type="hidden" name="path" value="{{ $path }}" />
+                            <button class="text-blue">{{ __('Regenerate') }}</button>
+                        </form>
+                    </td>
+                </tr>
+            @endforeach
+        </table>
+    </div>
+@endforeach
 
 @stop
diff --git a/resources/views/email/test.blade.php b/resources/views/email/test.blade.php
index 1d53a01fd3..4da1ab758a 100644
--- a/resources/views/email/test.blade.php
+++ b/resources/views/email/test.blade.php
@@ -1 +1 @@
-This is a test email.
\ No newline at end of file
+This is a test email.
diff --git a/resources/views/entries/create.blade.php b/resources/views/entries/create.blade.php
index 8f7392289e..434afdad9e 100644
--- a/resources/views/entries/create.blade.php
+++ b/resources/views/entries/create.blade.php
@@ -14,7 +14,7 @@
         :meta="{{ json_encode($meta) }}"
         :published="{{ json_encode($published) }}"
         :localizations="{{ json_encode($localizations) }}"
-        :revisions="{{ Statamic\Support\Str::bool($revisionsEnabled ) }}"
+        :revisions="{{ Statamic\Support\Str::bool($revisionsEnabled) }}"
         :breadcrumbs="{{ $breadcrumbs->toJson() }}"
         site="{{ $locale }}"
         create-another-url="{{ cp_route('collections.entries.create', [$collection, $locale, 'blueprint' => $blueprint['handle'], 'parent' => $values['parent'] ?? null]) }}"
@@ -22,5 +22,4 @@
         :can-manage-publish-state="{{ Statamic\Support\Str::bool($canManagePublishState) }}"
         :preview-targets="{{ json_encode($previewTargets) }}"
     ></base-entry-create-form>
-
 @endsection
diff --git a/resources/views/entries/edit.blade.php b/resources/views/entries/edit.blade.php
index 29b74f3ae4..0bcd3682ee 100644
--- a/resources/views/entries/edit.blade.php
+++ b/resources/views/entries/edit.blade.php
@@ -4,7 +4,6 @@
 @section('wrapper_class', 'max-w-3xl')
 
 @section('content')
-
     <entry-publish-form
         publish-container="base"
         :initial-actions="{{ json_encode($actions) }}"
@@ -40,5 +39,4 @@
         :initial-item-actions="{{ json_encode($itemActions) }}"
         item-action-url="{{ cp_route('collections.entries.actions.run', $collection) }}"
     ></entry-publish-form>
-
 @endsection
diff --git a/resources/views/entries/preview.blade.php b/resources/views/entries/preview.blade.php
index 74f3c7e8ee..120be1e639 100644
--- a/resources/views/entries/preview.blade.php
+++ b/resources/views/entries/preview.blade.php
@@ -4,8 +4,7 @@
     </head>
     <body>
         <div id="statamic">
-            <live-preview-popout>
-            </live-preview-popout>
+            <live-preview-popout></live-preview-popout>
         </div>
 
         @include('statamic::partials.scripts')
diff --git a/resources/views/errors/404.blade.php b/resources/views/errors/404.blade.php
index 447eeddb1c..b0f94af75e 100644
--- a/resources/views/errors/404.blade.php
+++ b/resources/views/errors/404.blade.php
@@ -1,12 +1,12 @@
 @php
-use function Statamic\trans as __;
-$authed = \Statamic\Facades\User::current();
+    use function Statamic\trans as __;
+    $authed = \Statamic\Facades\User::current();
 @endphp
 
 @extends($authed ? 'statamic::layout' : 'statamic::outside')
 
 @section('content')
-    <div class="min-h-screen flex justify-center {{ $authed ? 'pt-30' : 'items-center' }}">
-        <h1 class="text-3xl tracking-tighter mb-10 opacity-50 text-center">{{ __('Page Not Found') }}</h1>
+    <div class="{{ $authed ? 'pt-30' : 'items-center' }} flex min-h-screen justify-center">
+        <h1 class="mb-10 text-center text-3xl tracking-tighter opacity-50">{{ __('Page Not Found') }}</h1>
     </div>
 @endsection
diff --git a/resources/views/fields/index.blade.php b/resources/views/fields/index.blade.php
index c4c5194f77..2af136b3b4 100644
--- a/resources/views/fields/index.blade.php
+++ b/resources/views/fields/index.blade.php
@@ -1,49 +1,81 @@
-@php use function Statamic\trans as __; @endphp
+@php
+    use function Statamic\trans as __;
+@endphp
 
 @extends('statamic::layout')
 @section('title', __('Fields'))
 
 @section('content')
+    <div class="content">
+        <h1>{{ __('Fields') }}</h1>
+    </div>
 
-        <div class="content">
-            <h1>{{ __('Fields') }}</h1>
-        </div>
-
-        <div class="flex flex-wrap md:-mx-6 mt-6">
-            <div class="w-full md:w-1/2 md:px-6 mb-6">
-                <div class="card p-0 content border-t-6 border-blue">
-                    <div class="p-6">
-                        <h2><a href="{{ cp_route('blueprints.index') }}" class="text-gray-900 hover:text-blue">{{ __('Blueprints') }}</a></h2>
-                        <p>{{ __('statamic::messages.fields_blueprints_description') }}</p>
-                        <p><a href="{{ Statamic::docsUrl('blueprints') }}" class="font-bold text-blue">{{ __('Read the Docs') }}</a><span class="inline-block text-blue w-4 h-4 rtl:mr-2 ltr:ml-2">@cp_svg('icons/light/external-link')</span></p>
-                    </div>
-                    <div class="flex p-6 border-t items-center">
-                        <a href="{{ cp_route('blueprints.create') }}" class="btn-primary rtl:ml-4 ltr:mr-4">{{ __('Create Blueprint') }}</a>
-                        @unless($blueprints->isEmpty())
-                            <a href="{{ cp_route('blueprints.index') }}" class="font-bold text-blue text-sm hover:text-gray-900">
-                                {{ __('View All') }} <span class="font-normal">({{ $blueprints->count() }})</span> @rarr
-                            </a>
-                        @endunless
-                    </div>
+    <div class="mt-6 flex flex-wrap md:-mx-6">
+        <div class="mb-6 w-full md:w-1/2 md:px-6">
+            <div class="card content border-t-6 border-blue p-0">
+                <div class="p-6">
+                    <h2>
+                        <a href="{{ cp_route('blueprints.index') }}" class="text-gray-900 hover:text-blue">
+                            {{ __('Blueprints') }}
+                        </a>
+                    </h2>
+                    <p>{{ __('statamic::messages.fields_blueprints_description') }}</p>
+                    <p>
+                        <a href="{{ Statamic::docsUrl('blueprints') }}" class="font-bold text-blue">
+                            {{ __('Read the Docs') }}
+                        </a>
+                        <span class="inline-block h-4 w-4 text-blue ltr:ml-2 rtl:mr-2">
+                            @cp_svg('icons/light/external-link')
+                        </span>
+                    </p>
+                </div>
+                <div class="flex items-center border-t p-6">
+                    <a href="{{ cp_route('blueprints.create') }}" class="btn-primary ltr:mr-4 rtl:ml-4">
+                        {{ __('Create Blueprint') }}
+                    </a>
+                    @unless ($blueprints->isEmpty())
+                        <a
+                            href="{{ cp_route('blueprints.index') }}"
+                            class="text-sm font-bold text-blue hover:text-gray-900"
+                        >
+                            {{ __('View All') }}
+                            <span class="font-normal">({{ $blueprints->count() }})</span>
+                            @rarr
+                        </a>
+                    @endunless
                 </div>
             </div>
-            <div class="w-full md:w-1/2 md:px-6 mb-6">
-                <div class="card p-0 content border-t-6 border-blue">
-                    <div class="p-6">
-                        <h2>{{ __('Fieldsets') }}</h2>
-                        <p>{{ __('statamic::messages.fields_fieldsets_description') }}</p>
-                        <p><a href="{{ Statamic::docsUrl('fieldsets') }}" class="font-bold text-blue">{{ __('Read the Docs') }}</a><span class="inline-block text-blue w-4 h-4 rtl:mr-2 ltr:ml-2">@cp_svg('icons/light/external-link')</span></p>
-                    </div>
-                    <div class="flex p-6 border-t items-center">
-                        <a href="{{ cp_route('fieldsets.create') }}" class="btn-primary rtl:ml-4 ltr:mr-4">{{ __('Create Fieldset') }}</a>
-                        @unless($fieldsets->isEmpty())
-                            <a href="{{ cp_route('fieldsets.index') }}" class="font-bold text-blue text-sm hover:text-gray-900">
-                                {{ __('View All') }} <span class="font-normal">({{ $fieldsets->count() }})</span> @rarr
-                            </a>
-                        @endunless
-                    </div>
+        </div>
+        <div class="mb-6 w-full md:w-1/2 md:px-6">
+            <div class="card content border-t-6 border-blue p-0">
+                <div class="p-6">
+                    <h2>{{ __('Fieldsets') }}</h2>
+                    <p>{{ __('statamic::messages.fields_fieldsets_description') }}</p>
+                    <p>
+                        <a href="{{ Statamic::docsUrl('fieldsets') }}" class="font-bold text-blue">
+                            {{ __('Read the Docs') }}
+                        </a>
+                        <span class="inline-block h-4 w-4 text-blue ltr:ml-2 rtl:mr-2">
+                            @cp_svg('icons/light/external-link')
+                        </span>
+                    </p>
+                </div>
+                <div class="flex items-center border-t p-6">
+                    <a href="{{ cp_route('fieldsets.create') }}" class="btn-primary ltr:mr-4 rtl:ml-4">
+                        {{ __('Create Fieldset') }}
+                    </a>
+                    @unless ($fieldsets->isEmpty())
+                        <a
+                            href="{{ cp_route('fieldsets.index') }}"
+                            class="text-sm font-bold text-blue hover:text-gray-900"
+                        >
+                            {{ __('View All') }}
+                            <span class="font-normal">({{ $fieldsets->count() }})</span>
+                            @rarr
+                        </a>
+                    @endunless
                 </div>
             </div>
         </div>
-
+    </div>
 @endsection
diff --git a/resources/views/fieldsets/create.blade.php b/resources/views/fieldsets/create.blade.php
index ce2113b33b..60d0b341f0 100644
--- a/resources/views/fieldsets/create.blade.php
+++ b/resources/views/fieldsets/create.blade.php
@@ -1,10 +1,10 @@
-@php use function Statamic\trans as __; @endphp
+@php
+    use function Statamic\trans as __;
+@endphp
 
 @extends('statamic::layout')
 @section('title', __('Create Fieldset'))
 
 @section('content')
-    <fieldset-create-form
-        route="{{ cp_route('fieldsets.store') }}">
-    </fieldset-create-form>
+<fieldset-create-form route="{{ cp_route('fieldsets.store') }}"></fieldset-create-form>
 @stop
diff --git a/resources/views/fieldsets/edit.blade.php b/resources/views/fieldsets/edit.blade.php
index f22cc64f9f..b7212414d3 100644
--- a/resources/views/fieldsets/edit.blade.php
+++ b/resources/views/fieldsets/edit.blade.php
@@ -1,14 +1,14 @@
-@php use function Statamic\trans as __; @endphp
+@php
+    use function Statamic\trans as __;
+@endphp
 
 @extends('statamic::layout')
 @section('title', __('Edit Fieldset'))
 
 @section('content')
-
     <fieldset-edit-form
         action="{{ cp_route('fieldsets.update', $fieldset->handle()) }}"
         breadcrumb-url="{{ cp_route('fieldsets.index') }}"
         :initial-fieldset="{{ json_encode($fieldsetVueObject) }}"
     ></fieldset-edit-form>
-
 @endsection
diff --git a/resources/views/fieldsets/index.blade.php b/resources/views/fieldsets/index.blade.php
index eeb2fccd21..5d5bbf24db 100644
--- a/resources/views/fieldsets/index.blade.php
+++ b/resources/views/fieldsets/index.blade.php
@@ -1,39 +1,44 @@
-@php use function Statamic\trans as __; @endphp
+@php
+    use function Statamic\trans as __;
+@endphp
 
 @extends('statamic::layout')
 @section('title', __('Fieldsets'))
 
 @section('content')
-
-    @unless($fieldsets->isEmpty())
-
-        <div class="flex mb-6">
+    @unless ($fieldsets->isEmpty())
+        <div class="mb-6 flex">
             <h1 class="flex-1">{{ __('Fieldsets') }}</h1>
             <a href="{{ cp_route('fieldsets.create') }}" class="btn-primary">{{ __('Create Fieldset') }}</a>
         </div>
 
         @foreach ($fieldsets as $key => $f)
             <div class="mb-4">
-                @if ($fieldsets->count() > 1)<h3 class="rtl:pr-0 ltr:pl-0 mb-2 little-heading">{{ $key }}</h3>@endif
+                @if ($fieldsets->count() > 1)
+                    <h3 class="little-heading mb-2 ltr:pl-0 rtl:pr-0">{{ $key }}</h3>
+                @endif
+
                 <fieldset-listing :initial-rows="{{ json_encode($f) }}"></fieldset-listing>
             </div>
         @endforeach
-
     @else
-
-        @include('statamic::partials.empty-state', [
-            'title' => __('Fieldsets'),
-            'description' => __('statamic::messages.fieldset_intro'),
-            'svg' => 'empty/fieldsets',
-            'button_text' => __('Create Fieldset'),
-            'button_url' => cp_route('fieldsets.create'),
-        ])
-
+        @include(
+            'statamic::partials.empty-state',
+            [
+                'title' => __('Fieldsets'),
+                'description' => __('statamic::messages.fieldset_intro'),
+                'svg' => 'empty/fieldsets',
+                'button_text' => __('Create Fieldset'),
+                'button_url' => cp_route('fieldsets.create'),
+            ]
+        )
     @endunless
 
-    @include('statamic::partials.docs-callout', [
-        'topic' => __('Fieldsets'),
-        'url' => Statamic::docsUrl('fieldsets')
-    ])
-
+    @include(
+        'statamic::partials.docs-callout',
+        [
+            'topic' => __('Fieldsets'),
+            'url' => Statamic::docsUrl('fieldsets'),
+        ]
+    )
 @endsection
diff --git a/resources/views/forms/blueprints/edit.blade.php b/resources/views/forms/blueprints/edit.blade.php
index b4173e872e..040d4a956a 100644
--- a/resources/views/forms/blueprints/edit.blade.php
+++ b/resources/views/forms/blueprints/edit.blade.php
@@ -1,14 +1,18 @@
-@php use function Statamic\trans as __; @endphp
+@php
+    use function Statamic\trans as __;
+@endphp
 
 @extends('statamic::layout')
 @section('title', __('Edit Blueprint'))
 
 @section('content')
-
-    @include('statamic::partials.breadcrumb', [
-        'url' => cp_route('forms.show', $form->handle()),
-        'title' => __($form->title()),
-    ])
+    @include(
+        'statamic::partials.breadcrumb',
+        [
+            'url' => cp_route('forms.show', $form->handle()),
+            'title' => __($form->title()),
+        ]
+    )
 
     <blueprint-builder
         action="{{ cp_route('forms.blueprint.update', $form->handle()) }}"
@@ -18,9 +22,11 @@
         :can-define-localizable="false"
     ></blueprint-builder>
 
-    @include('statamic::partials.docs-callout', [
-        'topic' => __('Blueprints'),
-        'url' => Statamic::docsUrl('blueprints')
-    ])
-
+    @include(
+        'statamic::partials.docs-callout',
+        [
+            'topic' => __('Blueprints'),
+            'url' => Statamic::docsUrl('blueprints'),
+        ]
+    )
 @endsection
diff --git a/resources/views/forms/create.blade.php b/resources/views/forms/create.blade.php
index 246cbe1641..9e90a870ec 100644
--- a/resources/views/forms/create.blade.php
+++ b/resources/views/forms/create.blade.php
@@ -1,10 +1,10 @@
-@php use function Statamic\trans as __; @endphp
+@php
+    use function Statamic\trans as __;
+@endphp
 
 @extends('statamic::layout')
 @section('title', __('Create Form'))
 
 @section('content')
-    <form-create-form
-        route="{{ cp_route('forms.store') }}">
-    </form-create-form>
+<form-create-form route="{{ cp_route('forms.store') }}"></form-create-form>
 @stop
diff --git a/resources/views/forms/edit.blade.php b/resources/views/forms/edit.blade.php
index 743431b68e..5400e7cbc4 100644
--- a/resources/views/forms/edit.blade.php
+++ b/resources/views/forms/edit.blade.php
@@ -1,10 +1,11 @@
-@php use function Statamic\trans as __; @endphp
+@php
+    use function Statamic\trans as __;
+@endphp
 
 @extends('statamic::layout')
 @section('title', __('Configure Form'))
 
 @section('content')
-
     <collection-edit-form
         initial-title="{{ $form->title() }}"
         edit-title="Edit Form"
@@ -14,5 +15,4 @@
         url="{{ cp_route('forms.update', $form->handle()) }}"
         listing-url="{{ cp_route('forms.index') }}"
     ></collection-edit-form>
-
 @endsection
diff --git a/resources/views/forms/index.blade.php b/resources/views/forms/index.blade.php
index 78effd3191..0eb2e733d7 100644
--- a/resources/views/forms/index.blade.php
+++ b/resources/views/forms/index.blade.php
@@ -1,13 +1,13 @@
-@php use function Statamic\trans as __; @endphp
+@php
+    use function Statamic\trans as __;
+@endphp
 
 @extends('statamic::layout')
 @section('title', __('Forms'))
 
 @section('content')
-
-    @unless($forms->isEmpty())
-
-        <div class="flex items-center mb-6">
+    @unless ($forms->isEmpty())
+        <div class="mb-6 flex items-center">
             <h1 class="flex-1">{{ __('Forms') }}</h1>
 
             @if (Statamic::pro() && $user->can('create', 'Statamic\Contracts\Forms\Form'))
@@ -19,23 +19,25 @@
             :initial-columns="{{ json_encode($initialColumns) }}"
             action-url="{{ $actionUrl }}"
         ></form-listing>
-
     @else
-
-        @include('statamic::partials.empty-state', [
-            'title' => __('Forms'),
-            'description' => __('statamic::messages.form_configure_intro'),
-            'svg' => 'empty/form',
-            'button_text' => __('Create Form'),
-            'button_url' => cp_route('forms.create'),
-            'can' => $user->can('create', 'Statamic\Contracts\Forms\Form')
-        ])
-
+        @include(
+            'statamic::partials.empty-state',
+            [
+                'title' => __('Forms'),
+                'description' => __('statamic::messages.form_configure_intro'),
+                'svg' => 'empty/form',
+                'button_text' => __('Create Form'),
+                'button_url' => cp_route('forms.create'),
+                'can' => $user->can('create', 'Statamic\Contracts\Forms\Form'),
+            ]
+        )
     @endunless
 
-    @include('statamic::partials.docs-callout', [
-        'topic' => __('Forms'),
-        'url' => Statamic::docsUrl('forms')
-    ])
-
+    @include(
+        'statamic::partials.docs-callout',
+        [
+            'topic' => __('Forms'),
+            'url' => Statamic::docsUrl('forms'),
+        ]
+    )
 @endsection
diff --git a/resources/views/forms/show.blade.php b/resources/views/forms/show.blade.php
index 573afe21d2..ecfd697c9b 100644
--- a/resources/views/forms/show.blade.php
+++ b/resources/views/forms/show.blade.php
@@ -1,29 +1,38 @@
-@php use function Statamic\trans as __; @endphp
+@php
+    use function Statamic\trans as __;
+@endphp
 
 @extends('statamic::layout')
 @section('title', Statamic::crumb($form->title(), 'Forms'))
 @section('wrapper_class', 'max-w-full')
 
 @section('content')
-
     <header class="mb-6">
-        @include('statamic::partials.breadcrumb', [
-            'url' => cp_route('forms.index'),
-            'title' => __('Forms')
-        ])
+        @include(
+            'statamic::partials.breadcrumb',
+            [
+                'url' => cp_route('forms.index'),
+                'title' => __('Forms'),
+            ]
+        )
         <div class="flex items-center">
             <h1 v-pre class="flex-1">
                 {{ __($form->title()) }}
             </h1>
 
-            @if(\Statamic\Facades\User::current()->can('edit', $form) || \Statamic\Facades\User::current()->can('delete', $form))
-                <dropdown-list class="rtl:ml-2 ltr:mr-2">
+            @if (\Statamic\Facades\User::current()->can('edit', $form) || \Statamic\Facades\User::current()->can('delete', $form))
+                <dropdown-list class="ltr:mr-2 rtl:ml-2">
                     @can('edit', $form)
                         <dropdown-item :text="__('Edit Form')" redirect="{{ $form->editUrl() }}"></dropdown-item>
                     @endcan
+
                     @can('configure form fields')
-                        <dropdown-item :text="__('Edit Blueprint')" redirect="{{ cp_route('forms.blueprint.edit', $form->handle()) }}"></dropdown-item>
+                        <dropdown-item
+                            :text="__('Edit Blueprint')"
+                            redirect="{{ cp_route('forms.blueprint.edit', $form->handle()) }}"
+                        ></dropdown-item>
                     @endcan
+
                     @can('delete', $form)
                         <dropdown-item :text="__('Delete Form')" class="warning" @click="$refs.deleter.confirm()">
                             <resource-deleter
@@ -38,30 +47,30 @@
             @endif
 
             @if (($exporters = $form->exporters()) && $exporters->isNotEmpty())
-            <dropdown-list>
-                <template v-slot:trigger>
-                    <button class="btn" slot="trigger">{{ __('Export Submissions') }}</button>
-                </template>
-                @foreach ($exporters as $exporter)
-                    <dropdown-item
-                        text="{{ $exporter->title() }}"
-                        redirect="{{ $exporter->downloadUrl() }}"
-                    ></dropdown-item>
-                @endforeach
-            </dropdown-list>
+                <dropdown-list>
+                    <template v-slot:trigger>
+                        <button class="btn" slot="trigger">{{ __('Export Submissions') }}</button>
+                    </template>
+                    @foreach ($exporters as $exporter)
+                        <dropdown-item
+                            text="{{ $exporter->title() }}"
+                            redirect="{{ $exporter->downloadUrl() }}"
+                        ></dropdown-item>
+                    @endforeach
+                </dropdown-list>
             @endif
         </div>
     </header>
 
     @if (! empty($form->metrics()))
-    <div class="metrics mb-6">
-        @foreach($form->metrics() as $metric)
-            <div class="card px-6">
-                <h3 class="mb-4 font-bold text-gray dark:text-dark-175">{{ $metric->label() }}</h3>
-                <div class="text-4xl">{{ $metric->result() }}</div>
-            </div>
-        @endforeach
-    </div>
+        <div class="metrics mb-6">
+            @foreach ($form->metrics() as $metric)
+                <div class="card px-6">
+                    <h3 class="mb-4 font-bold text-gray dark:text-dark-175">{{ $metric->label() }}</h3>
+                    <div class="text-4xl">{{ $metric->result() }}</div>
+                </div>
+            @endforeach
+        </div>
     @endif
 
     <form-submission-listing
@@ -73,12 +82,11 @@
         :filters="{{ $filters->toJson() }}"
         v-cloak
     >
-        <div slot="no-results" class="text-center border-2 dark:border-dark-400 border-dashed rounded-lg">
-            <div class="max-w-md mx-auto px-8 py-30">
+        <div slot="no-results" class="rounded-lg border-2 border-dashed text-center dark:border-dark-400">
+            <div class="mx-auto max-w-md px-8 py-30">
                 @cp_svg('empty/form')
                 <h1 class="my-6">{{ __('No submissions') }}</h1>
             </div>
         </div>
     </form-submission-listing>
-
 @endsection
diff --git a/resources/views/forms/submission.blade.php b/resources/views/forms/submission.blade.php
index 15a1561047..a7657c9296 100644
--- a/resources/views/forms/submission.blade.php
+++ b/resources/views/forms/submission.blade.php
@@ -2,11 +2,13 @@
 @section('title', Statamic::crumb('Submission ' . $submission->id(), $submission->form->title(), 'Forms'))
 
 @section('content')
-
-    @include('statamic::partials.breadcrumb', [
-        'url' => cp_route('forms.show', $submission->form->handle()),
-        'title' => $submission->form->title()
-    ])
+    @include(
+        'statamic::partials.breadcrumb',
+        [
+            'url' => cp_route('forms.show', $submission->form->handle()),
+            'title' => $submission->form->title(),
+        ]
+    )
 
     <publish-form
         title="{{ $title }}"
@@ -15,5 +17,4 @@
         :values="{{ Js::from($values) }}"
         read-only
     ></publish-form>
-
 @endsection
diff --git a/resources/views/forms/widget.blade.php b/resources/views/forms/widget.blade.php
index f684c8b030..435c88e23e 100644
--- a/resources/views/forms/widget.blade.php
+++ b/resources/views/forms/widget.blade.php
@@ -1,11 +1,16 @@
-@php use function Statamic\trans as __; @endphp
-@php use Statamic\Support\Arr; @endphp
+@php
+    use function Statamic\trans as __;
+@endphp
 
-<div class="card p-0 overflow-hidden">
-    <div class="flex justify-between items-center p-4 border-b dark:bg-dark-650 dark:border-b dark:border-dark-900">
+@php
+    use Statamic\Support\Arr;
+@endphp
+
+<div class="card overflow-hidden p-0">
+    <div class="flex items-center justify-between border-b p-4 dark:border-b dark:border-dark-900 dark:bg-dark-650">
         <h2>
             <a class="flex items-center" href="{{ $form->showUrl() }}">
-                <div class="h-6 w-6 rtl:ml-2 ltr:mr-2 text-gray-800 dark:text-dark-200">
+                <div class="h-6 w-6 text-gray-800 dark:text-dark-200 ltr:mr-2 rtl:ml-2">
                     @cp_svg('icons/light/drawer-file')
                 </div>
                 <span v-pre>{{ $title }}</span>
@@ -13,17 +18,24 @@
         </h2>
     </div>
     <div>
-        @if ( ! $submissions)
+        @if (! $submissions)
             <p class="p-4 text-sm text-gray-600">{{ __('This form is awaiting responses') }}</p>
         @else
             <table class="data-table">
-                @foreach($submissions as $submission)
+                @foreach ($submissions as $submission)
                     <tr>
-                        @foreach($fields as $key => $field)
-                        <td><a href="{{ cp_route('forms.submissions.show', [$form->handle(), $submission['id']]) }}">{{ Arr::get($submission, $field) }}</a></td>
+                        @foreach ($fields as $key => $field)
+                            <td>
+                                <a
+                                    href="{{ cp_route('forms.submissions.show', [$form->handle(), $submission['id']]) }}"
+                                >
+                                    {{ Arr::get($submission, $field) }}
+                                </a>
+                            </td>
                         @endforeach
-                        <td class="rtl:text-left ltr:text-right">
-                            {{ ($submission['date']->diffInDays() <= 14) ? $submission['date']->diffForHumans() : $submission['date']->format($format) }}
+
+                        <td class="ltr:text-right rtl:text-left">
+                            {{ $submission['date']->diffInDays() <= 14 ? $submission['date']->diffForHumans() : $submission['date']->format($format) }}
                         </td>
                     </tr>
                 @endforeach
diff --git a/resources/views/globals/blueprints/edit.blade.php b/resources/views/globals/blueprints/edit.blade.php
index f6eb5baf42..3e6d98fbe7 100644
--- a/resources/views/globals/blueprints/edit.blade.php
+++ b/resources/views/globals/blueprints/edit.blade.php
@@ -1,23 +1,29 @@
-@php use function Statamic\trans as __; @endphp
+@php
+    use function Statamic\trans as __;
+@endphp
 
 @extends('statamic::layout')
 @section('title', __('Edit Blueprint'))
 
 @section('content')
-
-    @include('statamic::partials.breadcrumb', [
-        'url' => cp_route('globals.variables.edit', $set->handle()),
-        'title' => $set->title(),
-    ])
+    @include(
+        'statamic::partials.breadcrumb',
+        [
+            'url' => cp_route('globals.variables.edit', $set->handle()),
+            'title' => $set->title(),
+        ]
+    )
 
     <blueprint-builder
         action="{{ cp_route('globals.blueprint.update', $set->handle()) }}"
         :initial-blueprint="{{ json_encode($blueprintVueObject) }}"
     ></blueprint-builder>
 
-    @include('statamic::partials.docs-callout', [
-        'topic' => __('Blueprints'),
-        'url' => Statamic::docsUrl('blueprints')
-    ])
-
+    @include(
+        'statamic::partials.docs-callout',
+        [
+            'topic' => __('Blueprints'),
+            'url' => Statamic::docsUrl('blueprints'),
+        ]
+    )
 @endsection
diff --git a/resources/views/globals/configure.blade.php b/resources/views/globals/configure.blade.php
index 00504e3d68..f09099f77a 100644
--- a/resources/views/globals/configure.blade.php
+++ b/resources/views/globals/configure.blade.php
@@ -1,20 +1,22 @@
-@php use function Statamic\trans as __; @endphp
+@php
+    use function Statamic\trans as __;
+@endphp
 
 @extends('statamic::layout')
 @section('title', __('Configure Global Set'))
 
 @section('content')
 
-    <header class="mb-6">
-        @include('statamic::partials.breadcrumb', $breadcrumb)
-        <h1>@yield('title')</h1>
-    </header>
+<header class="mb-6">
+    @include('statamic::partials.breadcrumb', $breadcrumb)
+    <h1>@yield('title')</h1>
+</header>
 
-    <global-edit-form
-        :blueprint="{{ json_encode($blueprint) }}"
-        :initial-values="{{ json_encode($values) }}"
-        :meta="{{ json_encode($meta) }}"
-        url="{{ cp_route('globals.update', $set->id()) }}"
-    ></global-edit-form>
+<global-edit-form
+    :blueprint="{{ json_encode($blueprint) }}"
+    :initial-values="{{ json_encode($values) }}"
+    :meta="{{ json_encode($meta) }}"
+    url="{{ cp_route('globals.update', $set->id()) }}"
+></global-edit-form>
 
 @stop
diff --git a/resources/views/globals/create.blade.php b/resources/views/globals/create.blade.php
index 43a5e09992..d7a638bc13 100644
--- a/resources/views/globals/create.blade.php
+++ b/resources/views/globals/create.blade.php
@@ -1,11 +1,9 @@
-@php use function Statamic\trans as __; @endphp
+@php
+    use function Statamic\trans as __;
+@endphp
 
 @extends('statamic::layout')
 @section('title', __('Create Global Set'))
 @section('content')
-
-    <global-create-form
-        route="{{ cp_route('globals.store') }}">
-    </global-create-form>
-
+    <global-create-form route="{{ cp_route('globals.store') }}"></global-create-form>
 @endsection
diff --git a/resources/views/globals/edit.blade.php b/resources/views/globals/edit.blade.php
index 81b9f46dbb..b9750222b9 100644
--- a/resources/views/globals/edit.blade.php
+++ b/resources/views/globals/edit.blade.php
@@ -1,10 +1,11 @@
-@php use function Statamic\trans as __; @endphp
+@php
+    use function Statamic\trans as __;
+@endphp
 
 @extends('statamic::layout')
 @section('title', __('Edit Global Set'))
 
 @section('content')
-
     <global-publish-form
         publish-container="base"
         :initial-actions="{{ json_encode($actions) }}"
@@ -28,5 +29,4 @@
         :can-edit="{{ json_encode($canEdit) }}"
         :can-edit-blueprint="{{ $actions['editBlueprint'] ? Statamic\Support\Str::bool($user->can('configure fields')) : 'false' }}"
     ></global-publish-form>
-
 @endsection
diff --git a/resources/views/globals/index.blade.php b/resources/views/globals/index.blade.php
index e2dab2ebab..3de22ec026 100644
--- a/resources/views/globals/index.blade.php
+++ b/resources/views/globals/index.blade.php
@@ -1,13 +1,13 @@
-@php use function Statamic\trans as __; @endphp
+@php
+    use function Statamic\trans as __;
+@endphp
 
 @extends('statamic::layout')
 @section('title', __('Global Sets'))
 
 @section('content')
-
-    @unless($globals->isEmpty())
-
-        <div class="flex items-center mb-6">
+    @unless ($globals->isEmpty())
+        <div class="mb-6 flex items-center">
             <h1 class="flex-1">{{ __('Globals') }}</h1>
             @can('create', 'Statamic\Contracts\Globals\GlobalSet')
                 <a href="{{ cp_route('globals.create') }}" class="btn-primary">{{ __('Create Global Set') }}</a>
@@ -15,23 +15,25 @@
         </div>
 
         <global-listing :globals="{{ json_encode($globals) }}"></global-listing>
-
     @else
-
-        @include('statamic::partials.empty-state', [
-            'title' => __('Globals'),
-            'description' => __('statamic::messages.global_set_config_intro'),
-            'svg' => 'empty/globals',
-            'button_url' => cp_route('globals.create'),
-            'button_text' => __('Create Global Set'),
-            'can' => $user->can('create', 'Statamic\Contracts\Globals\GlobalSet')
-        ])
-
+        @include(
+            'statamic::partials.empty-state',
+            [
+                'title' => __('Globals'),
+                'description' => __('statamic::messages.global_set_config_intro'),
+                'svg' => 'empty/globals',
+                'button_url' => cp_route('globals.create'),
+                'button_text' => __('Create Global Set'),
+                'can' => $user->can('create', 'Statamic\Contracts\Globals\GlobalSet'),
+            ]
+        )
     @endunless
 
-    @include('statamic::partials.docs-callout', [
-        'topic' => __('Global Variables'),
-        'url' => Statamic::docsUrl('globals')
-    ])
-
+    @include(
+        'statamic::partials.docs-callout',
+        [
+            'topic' => __('Global Variables'),
+            'url' => Statamic::docsUrl('globals'),
+        ]
+    )
 @endsection
diff --git a/resources/views/graphql/graphiql.blade.php b/resources/views/graphql/graphiql.blade.php
index 6813cdcd42..3ecb708b5d 100644
--- a/resources/views/graphql/graphiql.blade.php
+++ b/resources/views/graphql/graphiql.blade.php
@@ -1,53 +1,53 @@
 <!DOCTYPE html>
 <html>
-  <head>
-    <title>GraphiQL ‹ Statamic</title>
-    <style>
-      body {
-        height: 100%;
-        margin: 0;
-        width: 100%;
-        overflow: hidden;
-      }
+    <head>
+        <title>GraphiQL ‹ Statamic</title>
+        <style>
+            body {
+                height: 100%;
+                margin: 0;
+                width: 100%;
+                overflow: hidden;
+            }
 
-      #graphiql {
-        height: 100vh;
-      }
-    </style>
-    <script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
-    <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
-    <script src="https://unpkg.com/graphiql/graphiql.min.js" type="application/javascript"></script>
-    <link rel="stylesheet" href="https://unpkg.com/graphiql/graphiql.min.css" />
-    <script src="https://unpkg.com/@graphiql/plugin-explorer/dist/index.umd.js" crossorigin></script>
-    <link rel="stylesheet" href="https://unpkg.com/@graphiql/plugin-explorer/dist/style.css" />
-  </head>
-  <body>
-    <div id="graphiql">Loading...</div>
-    <script>
-        var xcsrfToken = null;
-        const root = ReactDOM.createRoot(document.getElementById('graphiql'));
-        const fetcher = GraphiQL.createFetcher({
-            url: '{{ $url }}',
-            headers: {
-                Accept: 'application/json',
-                'Content-Type': 'application/json',
-                'x-csrf-token': xcsrfToken || '{{ csrf_token() }}'
-            },
-            fetch: async (fetchURL, fetchOptions) => {
-                return await fetch(fetchURL, fetchOptions).then((response) => {
-                    xcsrfToken = response.headers.get('x-csrf-token');
-                    return response;
-                });
-            },
-        });
-        const explorerPlugin = GraphiQLPluginExplorer.explorerPlugin();
-        root.render(
-            React.createElement(GraphiQL, {
-                fetcher,
-                defaultEditorToolsVisibility: true,
-                plugins: [explorerPlugin],
-            }),
-        );
-    </script>
-  </body>
+            #graphiql {
+                height: 100vh;
+            }
+        </style>
+        <script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
+        <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
+        <script src="https://unpkg.com/graphiql/graphiql.min.js" type="application/javascript"></script>
+        <link rel="stylesheet" href="https://unpkg.com/graphiql/graphiql.min.css" />
+        <script src="https://unpkg.com/@graphiql/plugin-explorer/dist/index.umd.js" crossorigin></script>
+        <link rel="stylesheet" href="https://unpkg.com/@graphiql/plugin-explorer/dist/style.css" />
+    </head>
+    <body>
+        <div id="graphiql">Loading...</div>
+        <script>
+            var xcsrfToken = null;
+            const root = ReactDOM.createRoot(document.getElementById('graphiql'));
+            const fetcher = GraphiQL.createFetcher({
+                url: '{{ $url }}',
+                headers: {
+                    Accept: 'application/json',
+                    'Content-Type': 'application/json',
+                    'x-csrf-token': xcsrfToken || '{{ csrf_token() }}',
+                },
+                fetch: async (fetchURL, fetchOptions) => {
+                    return await fetch(fetchURL, fetchOptions).then((response) => {
+                        xcsrfToken = response.headers.get('x-csrf-token');
+                        return response;
+                    });
+                },
+            });
+            const explorerPlugin = GraphiQLPluginExplorer.explorerPlugin();
+            root.render(
+                React.createElement(GraphiQL, {
+                    fetcher,
+                    defaultEditorToolsVisibility: true,
+                    plugins: [explorerPlugin],
+                }),
+            );
+        </script>
+    </body>
 </html>
diff --git a/resources/views/graphql/index.blade.php b/resources/views/graphql/index.blade.php
index 3974937425..dfe0912ce2 100644
--- a/resources/views/graphql/index.blade.php
+++ b/resources/views/graphql/index.blade.php
@@ -3,7 +3,9 @@
 @section('title', 'GraphQL')
 
 @section('content')
-
-<iframe src="/cp/graphiql" class="card" style="padding:0;width:100%;height:calc(100vh - 48px - 24px - 24px)"></iframe>
-
+    <iframe
+        src="/cp/graphiql"
+        class="card"
+        style="padding: 0; width: 100%; height: calc(100vh - 48px - 24px - 24px)"
+    ></iframe>
 @endsection
diff --git a/resources/views/impersonator/terminate.blade.php b/resources/views/impersonator/terminate.blade.php
index c4ce6390dc..2ac68866a4 100644
--- a/resources/views/impersonator/terminate.blade.php
+++ b/resources/views/impersonator/terminate.blade.php
@@ -1,34 +1,90 @@
-@php use function Statamic\trans as __; @endphp
+@php
+    use function Statamic\trans as __;
+@endphp
 
 <style>
-  #__impersonator-link__ {
-    position: fixed;
-    display: flex;
-    z-index: 100;
-    align-items: center;
-    bottom: 0;
-    right: 0 ; [dir="rtl"] & { right: auto ; left: 0 ; }
-    padding: 6px 10px;
-    color: #726e23;
-    font-size: 14px;
-    border-radius: 4px 0 0 0;
-    background: #fbfab0;
-    border-left: 1px solid #e8dc1e;
-    border-top: 1px solid #e8dc1e;
-    text-decoration: none;
-    transform: translateX(calc(100% - 35px));
-    transition: transform 0.21s cubic-bezier(0.11, 0, 0.5, 0);
-    box-shadow: -1px -2px 4px 0 rgba(20,20,20,.02);
-  }
-  #__impersonator-link__:hover {
-    transform: translateX(0);
-  }
-  #__impersonator-link__ svg {
-    margin-right: 10px ; [dir="rtl"] & { margin-left: 10px ; margin-right: 0 ; }
-  }
+    #__impersonator-link__ {
+        position: fixed;
+        display: flex;
+        z-index: 100;
+        align-items: center;
+        bottom: 0;
+        right: 0;
+        [dir='rtl'] & {
+            right: auto;
+            left: 0;
+        }
+        padding: 6px 10px;
+        color: #726e23;
+        font-size: 14px;
+        border-radius: 4px 0 0 0;
+        background: #fbfab0;
+        border-left: 1px solid #e8dc1e;
+        border-top: 1px solid #e8dc1e;
+        text-decoration: none;
+        transform: translateX(calc(100% - 35px));
+        transition: transform 0.21s cubic-bezier(0.11, 0, 0.5, 0);
+        box-shadow: -1px -2px 4px 0 rgba(20, 20, 20, 0.02);
+    }
+    #__impersonator-link__:hover {
+        transform: translateX(0);
+    }
+    #__impersonator-link__ svg {
+        margin-right: 10px;
+        [dir='rtl'] & {
+            margin-left: 10px;
+            margin-right: 0;
+        }
+    }
 </style>
 
 <a id="__impersonator-link__" href="{{ $url }}">
-  <svg xmlns="http://www.w3.org/2000/svg" fill="none" height="20" width="20" viewBox="-0.5 -0.5 14 14"><g><path fill="#fbfab0" d="M0.4642857142857143 4.494285714285715C0.4643683571428572 5.727465714285715 0.8797935714285715 6.924672857142857 1.6435714285714287 7.892857142857143l2.35651 1.8977214285714286c0.3400057142857143 0.2738357142857143 0.8248314285714285 0.2738357142857143 1.164837142857143 0L7.521428571428571 7.892857142857143c0.7637778571428572 -0.9681842857142857 1.179202142857143 -2.1653914285714286 1.1792857142857143 -3.398571428571429V1.4671428571428573C7.427884285714286 0.8084895000000001 6.0156478571428575 0.4647388571428572 4.5825 0.4647388571428572 3.149352142857143 0.4647388571428572 1.7371157142857143 0.8084895000000001 0.4642857142857143 1.4671428571428573v3.027142857142857Z" stroke-width="1"></path><path id="Vector_2" stroke="#726e23" stroke-linecap="round" stroke-linejoin="round" d="M1.6435714285714287 7.892857142857143C0.8797935714285715 6.924672857142857 0.4643683571428572 5.727465714285715 0.4642857142857143 4.494285714285715V1.4671428571428573C1.7371157142857143 0.8084895000000001 3.149352142857143 0.4647388571428572 4.5825 0.4647388571428572c1.4331478571428573 0 2.8453842857142857 0.34375064285714285 4.118214285714285 1.002404" stroke-width="1"></path><path id="Vector_3" fill="#e8dc1e" d="M7.23359 12.48c-0.3249535714285714 0.07345 -0.6626842857142857 0.06880714285714286 -0.9855021428571429 -0.013464285714285715 -0.32282714285714287 -0.08236428571428572 -0.62153 -0.2400357142857143 -0.8716407142857143 -0.4601071428571429 -0.8689107142857143 -0.7490785714285715 -1.5123364285714287 -1.7250071428571427 -1.8583500000000002 -2.8188085714285713 -0.3460042857142857 -1.0937828571428572 -0.3809557142857143 -2.2622507142857144 -0.1009357142857143 -3.374762857142857l0.6778571428571428 -2.7114285714285713c1.4722407142857143 -0.37337857142857145 3.0141428571428572 -0.37540285714285715 4.487349285714286 -0.005887142857142857C10.055592857142857 3.465057142857143 11.414 4.194561428571428 12.535714285714286 5.218571428571429l-0.6778571428571428 2.7021428571428574c-0.2732785714285714 1.113515 -0.8502 2.129307142857143 -1.6666928571428572 2.9342857142857146 -0.8164 0.8049785714285714 -1.8402985714285713 1.3675071428571428 -2.957574285714286 1.625Z" stroke-width="1"></path><path id="Vector_4" stroke="#726e23" stroke-linecap="round" stroke-linejoin="round" d="M7.233534285714286 12.48c-0.3249535714285714 0.07345 -0.6626842857142857 0.06880714285714286 -0.9855021428571429 -0.013464285714285715 -0.32282714285714287 -0.08236428571428572 -0.62153 -0.2400357142857143 -0.8716407142857143 -0.4601071428571429v0c-0.8689107142857143 -0.7490785714285715 -1.5123364285714287 -1.7250071428571427 -1.8583500000000002 -2.8188085714285713 -0.3460042857142857 -1.0937828571428572 -0.3809557142857143 -2.2622507142857144 -0.1009357142857143 -3.374762857142857l0.6778571428571428 -2.7114285714285713c1.4722407142857143 -0.37337857142857145 3.0141428571428572 -0.37540285714285715 4.487349285714286 -0.005887142857142857C10.0555 3.465057142857143 11.413907142857143 4.194561428571428 12.535714285714286 5.218571428571429l-0.6778571428571428 2.7021428571428574c-0.2732785714285714 1.113515 -0.8502928571428572 2.129307142857143 -1.6666928571428572 2.9342857142857146 -0.8164928571428571 0.8049785714285714 -1.8403635714285715 1.3675071428571428 -2.95763 1.625v0Z" stroke-width="1"></path><path id="Vector_5" stroke="#726e23" stroke-linecap="round" stroke-linejoin="round" d="M5.209276428571428 6.045c0.11713000000000001 -0.12258071428571428 0.2655992857142857 -0.21075785714285716 0.42928785714285717 -0.25494857142857147 0.16369785714285714 -0.0442 0.3363657142857143 -0.04273285714285714 0.49928357142857144 0.004234285714285714 0.15945428571428574 0.037514285714285715 0.30615928571428574 0.11654500000000001 0.4252114285714286 0.22906928571428573 0.11905214285714286 0.11253357142857144 0.20620785714285714 0.2545492857142857 0.2526457142857143 0.411645" stroke-width="1"></path><path id="Vector_6" stroke="#726e23" stroke-linecap="round" stroke-linejoin="round" d="M8.886437857142857 6.964276428571429c0.11338785714285714 -0.12185642857142859 0.2574464285714286 -0.21099 0.417105 -0.25807785714285714 0.15962142857142858 -0.04708785714285714 0.32899285714285714 -0.050393571428571426 0.49037857142857144 -0.009573571428571428 0.1613857142857143 0.04081071428571429 0.30875 0.12425214285714287 0.42686428571428575 0.2415864285714286 0.11802142857142857 0.117325 0.20242857142857143 0.2642342857142857 0.24421428571428574 0.4253507142857143" stroke-width="1"></path></g></svg>
-  {{ __('Stop impersonating') }}
+    <svg xmlns="http://www.w3.org/2000/svg" fill="none" height="20" width="20" viewBox="-0.5 -0.5 14 14">
+        <g>
+            <path
+                fill="#fbfab0"
+                d="M0.4642857142857143 4.494285714285715C0.4643683571428572 5.727465714285715 0.8797935714285715 6.924672857142857 1.6435714285714287 7.892857142857143l2.35651 1.8977214285714286c0.3400057142857143 0.2738357142857143 0.8248314285714285 0.2738357142857143 1.164837142857143 0L7.521428571428571 7.892857142857143c0.7637778571428572 -0.9681842857142857 1.179202142857143 -2.1653914285714286 1.1792857142857143 -3.398571428571429V1.4671428571428573C7.427884285714286 0.8084895000000001 6.0156478571428575 0.4647388571428572 4.5825 0.4647388571428572 3.149352142857143 0.4647388571428572 1.7371157142857143 0.8084895000000001 0.4642857142857143 1.4671428571428573v3.027142857142857Z"
+                stroke-width="1"
+            ></path>
+            <path
+                id="Vector_2"
+                stroke="#726e23"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                d="M1.6435714285714287 7.892857142857143C0.8797935714285715 6.924672857142857 0.4643683571428572 5.727465714285715 0.4642857142857143 4.494285714285715V1.4671428571428573C1.7371157142857143 0.8084895000000001 3.149352142857143 0.4647388571428572 4.5825 0.4647388571428572c1.4331478571428573 0 2.8453842857142857 0.34375064285714285 4.118214285714285 1.002404"
+                stroke-width="1"
+            ></path>
+            <path
+                id="Vector_3"
+                fill="#e8dc1e"
+                d="M7.23359 12.48c-0.3249535714285714 0.07345 -0.6626842857142857 0.06880714285714286 -0.9855021428571429 -0.013464285714285715 -0.32282714285714287 -0.08236428571428572 -0.62153 -0.2400357142857143 -0.8716407142857143 -0.4601071428571429 -0.8689107142857143 -0.7490785714285715 -1.5123364285714287 -1.7250071428571427 -1.8583500000000002 -2.8188085714285713 -0.3460042857142857 -1.0937828571428572 -0.3809557142857143 -2.2622507142857144 -0.1009357142857143 -3.374762857142857l0.6778571428571428 -2.7114285714285713c1.4722407142857143 -0.37337857142857145 3.0141428571428572 -0.37540285714285715 4.487349285714286 -0.005887142857142857C10.055592857142857 3.465057142857143 11.414 4.194561428571428 12.535714285714286 5.218571428571429l-0.6778571428571428 2.7021428571428574c-0.2732785714285714 1.113515 -0.8502 2.129307142857143 -1.6666928571428572 2.9342857142857146 -0.8164 0.8049785714285714 -1.8402985714285713 1.3675071428571428 -2.957574285714286 1.625Z"
+                stroke-width="1"
+            ></path>
+            <path
+                id="Vector_4"
+                stroke="#726e23"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                d="M7.233534285714286 12.48c-0.3249535714285714 0.07345 -0.6626842857142857 0.06880714285714286 -0.9855021428571429 -0.013464285714285715 -0.32282714285714287 -0.08236428571428572 -0.62153 -0.2400357142857143 -0.8716407142857143 -0.4601071428571429v0c-0.8689107142857143 -0.7490785714285715 -1.5123364285714287 -1.7250071428571427 -1.8583500000000002 -2.8188085714285713 -0.3460042857142857 -1.0937828571428572 -0.3809557142857143 -2.2622507142857144 -0.1009357142857143 -3.374762857142857l0.6778571428571428 -2.7114285714285713c1.4722407142857143 -0.37337857142857145 3.0141428571428572 -0.37540285714285715 4.487349285714286 -0.005887142857142857C10.0555 3.465057142857143 11.413907142857143 4.194561428571428 12.535714285714286 5.218571428571429l-0.6778571428571428 2.7021428571428574c-0.2732785714285714 1.113515 -0.8502928571428572 2.129307142857143 -1.6666928571428572 2.9342857142857146 -0.8164928571428571 0.8049785714285714 -1.8403635714285715 1.3675071428571428 -2.95763 1.625v0Z"
+                stroke-width="1"
+            ></path>
+            <path
+                id="Vector_5"
+                stroke="#726e23"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                d="M5.209276428571428 6.045c0.11713000000000001 -0.12258071428571428 0.2655992857142857 -0.21075785714285716 0.42928785714285717 -0.25494857142857147 0.16369785714285714 -0.0442 0.3363657142857143 -0.04273285714285714 0.49928357142857144 0.004234285714285714 0.15945428571428574 0.037514285714285715 0.30615928571428574 0.11654500000000001 0.4252114285714286 0.22906928571428573 0.11905214285714286 0.11253357142857144 0.20620785714285714 0.2545492857142857 0.2526457142857143 0.411645"
+                stroke-width="1"
+            ></path>
+            <path
+                id="Vector_6"
+                stroke="#726e23"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                d="M8.886437857142857 6.964276428571429c0.11338785714285714 -0.12185642857142859 0.2574464285714286 -0.21099 0.417105 -0.25807785714285714 0.15962142857142858 -0.04708785714285714 0.32899285714285714 -0.050393571428571426 0.49037857142857144 -0.009573571428571428 0.1613857142857143 0.04081071428571429 0.30875 0.12425214285714287 0.42686428571428575 0.2415864285714286 0.11802142857142857 0.117325 0.20242857142857143 0.2642342857142857 0.24421428571428574 0.4253507142857143"
+                stroke-width="1"
+            ></path>
+        </g>
+    </svg>
+    {{ __('Stop impersonating') }}
 </a>
diff --git a/resources/views/layout.blade.php b/resources/views/layout.blade.php
index 212c967423..0e751fc58a 100644
--- a/resources/views/layout.blade.php
+++ b/resources/views/layout.blade.php
@@ -1,63 +1,64 @@
-<!doctype html>
-<html lang="{{ Statamic::cpLocale() }}" dir="{{ Statamic::cpDirection() }}" class="{{ $user->preferredTheme() === 'dark' ? 'dark' : '' }}">
-<head>
-    @include('statamic::partials.head')
-</head>
-
-<body>
-    <div id="statamic">
-
-        @include('statamic::partials.session-expiry')
-        @include('statamic::partials.licensing-alerts')
-        @include('statamic::partials.global-header')
-
-        <div id="main"
-            class="@yield('content-class')"
-            :class="{
+<!DOCTYPE html>
+<html
+    lang="{{ Statamic::cpLocale() }}"
+    dir="{{ Statamic::cpDirection() }}"
+    class="{{ $user->preferredTheme() === 'dark' ? 'dark' : '' }}"
+>
+    <head>
+        @include('statamic::partials.head')
+    </head>
+
+    <body>
+        <div id="statamic">
+            @include('statamic::partials.session-expiry')
+            @include('statamic::partials.licensing-alerts')
+            @include('statamic::partials.global-header')
+
+            <div
+                id="main"
+                class="@yield('content-class')"
+                :class="{
                 'nav-closed': ! navOpen,
                 'nav-mobile-open': mobileNavOpen,
                 'showing-license-banner': showBanner
             }"
-        >
-            @include('statamic::partials.nav-main')
-            @include('statamic::partials.nav-mobile')
+            >
+                @include('statamic::partials.nav-main')
+                @include('statamic::partials.nav-mobile')
 
-            <div class="workspace">
-                <div class="page-wrapper" :class="wrapperClass">
-                    @yield('content')
+                <div class="workspace">
+                    <div class="page-wrapper" :class="wrapperClass">
+                        @yield('content')
+                    </div>
                 </div>
             </div>
 
-        </div>
-
-        <component
-            v-for="component in appendedComponents"
-            :key="component.id"
-            :is="component.name"
-            v-bind="component.props"
-            v-on="component.events"
-        ></component>
-
-        <confirmation-modal
-            v-if="copyToClipboardModalUrl"
-            :cancellable="false"
-            :button-text="__('OK')"
-            :title="__('Copy to clipboard')"
-            @confirm="copyToClipboardModalUrl = null"
-        >
-            <div class="prose">
-                <code-block :text="copyToClipboardModalUrl" />
-            </div>
-        </confirmation-modal>
-
-        <keyboard-shortcuts-modal></keyboard-shortcuts-modal>
+            <component
+                v-for="component in appendedComponents"
+                :key="component.id"
+                :is="component.name"
+                v-bind="component.props"
+                v-on="component.events"
+            ></component>
 
-        <portal-targets></portal-targets>
+            <confirmation-modal
+                v-if="copyToClipboardModalUrl"
+                :cancellable="false"
+                :button-text="__('OK')"
+                :title="__('Copy to clipboard')"
+                @confirm="copyToClipboardModalUrl = null"
+            >
+                <div class="prose">
+                    <code-block :text="copyToClipboardModalUrl" />
+                </div>
+            </confirmation-modal>
 
-    </div>
+            <keyboard-shortcuts-modal></keyboard-shortcuts-modal>
 
-    @include('statamic::partials.scripts')
-    @yield('scripts')
+            <portal-targets></portal-targets>
+        </div>
 
-</body>
+        @include('statamic::partials.scripts')
+        @yield('scripts')
+    </body>
 </html>
diff --git a/resources/views/licensing.blade.php b/resources/views/licensing.blade.php
index ff5aadf91d..d6e4b6a86b 100644
--- a/resources/views/licensing.blade.php
+++ b/resources/views/licensing.blade.php
@@ -1,118 +1,149 @@
-@php use function Statamic\trans as __; @endphp
+@php
+    use function Statamic\trans as __;
+@endphp
 
 @extends('statamic::layout')
 @section('title', __('Licensing'))
 
 @section('content')
 
-    @include('statamic::partials.breadcrumb', [
+@include(
+    'statamic::partials.breadcrumb',
+    [
         'url' => cp_route('utilities.index'),
-        'title' => __('Utilities')
-    ])
-
-    @if ($requestError)
-
-        <div class="no-results md:pt-30 max-w-2xl mx-auto">
-            <div class="flex flex-wrap items-center">
-                <div class="w-full md:w-1/2">
-                    <h1 class="mb-8">{{ __('Licensing') }}</h1>
-                    <p class="text-gray-700 dark:text-dark-175 leading-normal mb-8 text-lg antialiased">
-                        @if ($usingLicenseKeyFile)
-                            {{ __('statamic::messages.outpost_license_key_error') }}
-                        @else
-                            {{ __('statamic::messages.outpost_issue_try_later') }}
-                        @endif
-                    </p>
-                    <a href="{{ cp_route('utilities.licensing.refresh') }}" class="btn-primary btn-lg">{{ __('Try again') }}</a>
-                </div>
-                <div class="hidden md:block w-1/2 rtl:pr-16 ltr:pl-16">
-                    @cp_svg('empty/navigation')
-                </div>
+        'title' => __('Utilities'),
+    ]
+)
+
+@if ($requestError)
+    <div class="no-results mx-auto max-w-2xl md:pt-30">
+        <div class="flex flex-wrap items-center">
+            <div class="w-full md:w-1/2">
+                <h1 class="mb-8">{{ __('Licensing') }}</h1>
+                <p class="mb-8 text-lg leading-normal text-gray-700 antialiased dark:text-dark-175">
+                    @if ($usingLicenseKeyFile)
+                        {{ __('statamic::messages.outpost_license_key_error') }}
+                    @else
+                        {{ __('statamic::messages.outpost_issue_try_later') }}
+                    @endif
+                </p>
+                <a href="{{ cp_route('utilities.licensing.refresh') }}" class="btn-primary btn-lg">
+                    {{ __('Try again') }}
+                </a>
+            </div>
+            <div class="hidden w-1/2 md:block ltr:pl-16 rtl:pr-16">
+                @cp_svg('empty/navigation')
             </div>
         </div>
-
-    @else
-
-        <div class="flex mb-6">
-            <h1 class="flex-1">{{ __('Licensing') }}</h1>
-        </div>
-
-        @if ($configCached)
-            <div class="text-xs border border-yellow-dark rounded p-4 bg-yellow dark:bg-dark-blue-100 dark:border-none">
-                <div class="font-bold mb-2">{{ __('Configuration is cached') }}</div>
-                <p>{!! __('statamic::messages.licensing_config_cached_warning') !!}</p>
-           </div>
-        @endif
-
-        @if ($site->key() && $site->usesIncorrectKeyFormat())
-            <div class="text-xs border border-yellow-dark rounded p-4 bg-yellow dark:bg-dark-blue-100 dark:border-none {{ $configCached ? 'mt-8' : '' }}">
-                <div class="font-bold mb-2">{{ __('statamic::messages.licensing_incorrect_key_format_heading') }}</div>
-                <p>{!! __('statamic::messages.licensing_incorrect_key_format_body') !!}</p>
-           </div>
-        @endif
-
-        <h6 class="mt-8">{{ __('Site') }}</h6>
-        <div class="card p-0 mt-2">
-            <table class="data-table">
-                <tr>
-                    <td class="w-64 font-bold">
-                        <span class="little-dot {{ $site->valid() ? 'bg-green-600' : 'bg-red-500' }} rtl:ml-2 ltr:mr-2"></span>
-                        {{ $site->key() ?? __('No license key') }}
-                    </td>
-                    <td class="relative">
-                        {{ $site->domain()['url'] ?? '' }}
-                        @if ($site->hasMultipleDomains())
-                            <span class="text-2xs">({{ trans_choice('and :count more', $site->additionalDomainCount()) }})</span>
-                        @endif
-                    </td>
-                    <td class="rtl:text-left ltr:text-right text-red-500">{{ $site->invalidReason() }}</td>
-                </tr>
-            </table>
+    </div>
+@else
+    <div class="mb-6 flex">
+        <h1 class="flex-1">{{ __('Licensing') }}</h1>
+    </div>
+
+    @if ($configCached)
+        <div class="rounded border border-yellow-dark bg-yellow p-4 text-xs dark:border-none dark:bg-dark-blue-100">
+            <div class="mb-2 font-bold">{{ __('Configuration is cached') }}</div>
+            <p>{!! __('statamic::messages.licensing_config_cached_warning') !!}</p>
         </div>
+    @endif
 
-        <h6 class="mt-8">{{ __('Core') }}</h6>
-        <div class="card p-0 mt-2">
-            <table class="data-table">
-                <tr>
-                    <td class="w-64 font-bold">
-                        <span class="little-dot {{ $statamic->valid() ? 'bg-green-600' : 'bg-red-500' }} rtl:ml-2 ltr:mr-2"></span>
-                        {{ __('Statamic') }} @if ($statamic->pro())<span class="text-pink">{{ __('Pro') }}</span>@else {{ __('Free') }} @endif
-                    </td>
-                    <td>{{ $statamic->version() }}</td>
-                    <td class="rtl:text-left ltr:text-right text-red-500">{{ $statamic->invalidReason() }}</td>
-                </tr>
-            </table>
+    @if ($site->key() && $site->usesIncorrectKeyFormat())
+        <div
+            class="{{ $configCached ? 'mt-8' : '' }} rounded border border-yellow-dark bg-yellow p-4 text-xs dark:border-none dark:bg-dark-blue-100"
+        >
+            <div class="mb-2 font-bold">{{ __('statamic::messages.licensing_incorrect_key_format_heading') }}</div>
+            <p>{!! __('statamic::messages.licensing_incorrect_key_format_body') !!}</p>
         </div>
+    @endif
 
-        <h6 class="mt-8">{{ __('Addons') }}</h6>
-        @if ($addons->isEmpty())
-        <p class="text-sm text-gray dark:text-dark-150 mt-2">{{ __('No addons installed') }}</p>
-        @else
-        <div class="card p-0 mt-2">
+    <h6 class="mt-8">{{ __('Site') }}</h6>
+    <div class="card mt-2 p-0">
+        <table class="data-table">
+            <tr>
+                <td class="w-64 font-bold">
+                    <span
+                        class="little-dot {{ $site->valid() ? 'bg-green-600' : 'bg-red-500' }} ltr:mr-2 rtl:ml-2"
+                    ></span>
+                    {{ $site->key() ?? __('No license key') }}
+                </td>
+                <td class="relative">
+                    {{ $site->domain()['url'] ?? '' }}
+                    @if ($site->hasMultipleDomains())
+                        <span class="text-2xs">
+                            ({{ trans_choice('and :count more', $site->additionalDomainCount()) }})
+                        </span>
+                    @endif
+                </td>
+                <td class="text-red-500 ltr:text-right rtl:text-left">{{ $site->invalidReason() }}</td>
+            </tr>
+        </table>
+    </div>
+
+    <h6 class="mt-8">{{ __('Core') }}</h6>
+    <div class="card mt-2 p-0">
+        <table class="data-table">
+            <tr>
+                <td class="w-64 font-bold">
+                    <span
+                        class="little-dot {{ $statamic->valid() ? 'bg-green-600' : 'bg-red-500' }} ltr:mr-2 rtl:ml-2"
+                    ></span>
+                    {{ __('Statamic') }}
+                    @if ($statamic->pro())
+                        <span class="text-pink">{{ __('Pro') }}</span>
+                    @else
+                        {{ __('Free') }}
+                    @endif
+                </td>
+                <td>{{ $statamic->version() }}</td>
+                <td class="text-red-500 ltr:text-right rtl:text-left">{{ $statamic->invalidReason() }}</td>
+            </tr>
+        </table>
+    </div>
+
+    <h6 class="mt-8">{{ __('Addons') }}</h6>
+
+    @if ($addons->isEmpty())
+        <p class="mt-2 text-sm text-gray dark:text-dark-150">{{ __('No addons installed') }}</p>
+    @else
+        <div class="card mt-2 p-0">
             <table class="data-table">
                 @foreach ($addons as $addon)
                     <tr>
-                        <td class="w-64 rtl:ml-2 ltr:mr-2">
-                            <span class="little-dot {{ $addon->valid() ? 'bg-green-600' : 'bg-red-500' }} rtl:ml-2 ltr:mr-2"></span>
-                            <span class="font-bold"><a href="{{ $addon->addon()->marketplaceUrl() }}" class="text-gray dark:text-dark-175 hover:text-blue dark:hover:text-dark-blue-100">{{ $addon->name() }}</a></span>
-                            @if ($addon->edition())<span class="badge uppercase font-bold text-gray-600 dark:text-dark-200">{{ $addon->edition() ?? '' }}</span>@endif
+                        <td class="w-64 ltr:mr-2 rtl:ml-2">
+                            <span
+                                class="little-dot {{ $addon->valid() ? 'bg-green-600' : 'bg-red-500' }} ltr:mr-2 rtl:ml-2"
+                            ></span>
+                            <span class="font-bold">
+                                <a
+                                    href="{{ $addon->addon()->marketplaceUrl() }}"
+                                    class="text-gray hover:text-blue dark:text-dark-175 dark:hover:text-dark-blue-100"
+                                >
+                                    {{ $addon->name() }}
+                                </a>
+                            </span>
+                            @if ($addon->edition())
+                                <span class="badge font-bold uppercase text-gray-600 dark:text-dark-200">
+                                    {{ $addon->edition() ?? '' }}
+                                </span>
+                            @endif
                         </td>
                         <td>{{ $addon->version() }}</td>
-                        <td class="rtl:text-left ltr:text-right text-red-500">{{ $addon->invalidReason() }}</td>
+                        <td class="text-red-500 ltr:text-right rtl:text-left">{{ $addon->invalidReason() }}</td>
                     </tr>
                 @endforeach
             </table>
         </div>
-        @endif
+    @endif
 
-        @if (!$unlistedAddons->isEmpty())
+    @if (! $unlistedAddons->isEmpty())
         <h6 class="mt-8">{{ __('Unlisted Addons') }}</h6>
-        <div class="card p-0 mt-2">
+        <div class="card mt-2 p-0">
             <table class="data-table">
                 @foreach ($unlistedAddons as $addon)
                     <tr>
-                        <td class="w-64 font-bold rtl:ml-2 ltr:mr-2">
-                            <span class="little-dot bg-green-600 rtl:ml-2 ltr:mr-2"></span>
+                        <td class="w-64 font-bold ltr:mr-2 rtl:ml-2">
+                            <span class="little-dot bg-green-600 ltr:mr-2 rtl:ml-2"></span>
                             {{ $addon->name() }}
                         </td>
                         <td>{{ $addon->version() }}</td>
@@ -120,20 +151,29 @@
                 @endforeach
             </table>
         </div>
-        @endif
+    @endif
 
-        <div class="mt-10 py-4 border-t dark:border-dark-950 flex items-center">
-            <a href="{{ $site->url() }}" target="_blank" class="btn btn-primary rtl:ml-4 ltr:mr-4">{{ __('Edit Site') }}</a>
-            @if ($addToCartUrl) <a href="{{ $addToCartUrl }}" target="_blank" class="btn rtl:ml-4 ltr:mr-4">{{ __('Buy Licenses') }}</a> @endif
-            <a href="{{ cp_route('utilities.licensing.refresh') }}" class="btn">{{ __('Sync') }}</a>
-            <p class="rtl:mr-4 ltr:ml-4 text-2xs text-gray dark:text-dark-175">{{ __('statamic::messages.licensing_sync_instructions') }}</p>
-        </div>
+    <div class="mt-10 flex items-center border-t py-4 dark:border-dark-950">
+        <a href="{{ $site->url() }}" target="_blank" class="btn btn-primary ltr:mr-4 rtl:ml-4">
+            {{ __('Edit Site') }}
+        </a>
+        @if ($addToCartUrl)
+            <a href="{{ $addToCartUrl }}" target="_blank" class="btn ltr:mr-4 rtl:ml-4">{{ __('Buy Licenses') }}</a>
+        @endif
 
-    @endif
+        <a href="{{ cp_route('utilities.licensing.refresh') }}" class="btn">{{ __('Sync') }}</a>
+        <p class="text-2xs text-gray dark:text-dark-175 ltr:ml-4 rtl:mr-4">
+            {{ __('statamic::messages.licensing_sync_instructions') }}
+        </p>
+    </div>
+@endif
 
-    @include('statamic::partials.docs-callout', [
+@include(
+    'statamic::partials.docs-callout',
+    [
         'topic' => __('Licensing'),
-        'url' => Statamic::docsUrl('licensing')
-    ])
+        'url' => Statamic::docsUrl('licensing'),
+    ]
+)
 
 @stop
diff --git a/resources/views/nav/duplicates.blade.php b/resources/views/nav/duplicates.blade.php
index a8b4c8850d..ebeae90da2 100644
--- a/resources/views/nav/duplicates.blade.php
+++ b/resources/views/nav/duplicates.blade.php
@@ -1,6 +1,9 @@
 <li class="{{ $item->isActive() ? 'current' : '' }}">
     <a href="{{ $item->url() }}">
-        <i>{!! $item->svg() !!}</i><span>{{ __($item->name()) }}</span>
-        <span class="badge-sm bg-red-500 dark:bg-blue-900 rtl:mr-2 ltr:ml-2">{{ Statamic\Facades\Stache::duplicates()->count() }}</span>
+        <i>{!! $item->svg() !!}</i>
+        <span>{{ __($item->name()) }}</span>
+        <span class="badge-sm bg-red-500 dark:bg-blue-900 ltr:ml-2 rtl:mr-2">
+            {{ Statamic\Facades\Stache::duplicates()->count() }}
+        </span>
     </a>
 </li>
diff --git a/resources/views/nav/edit.blade.php b/resources/views/nav/edit.blade.php
index 2fac0edbc9..0a999ee436 100644
--- a/resources/views/nav/edit.blade.php
+++ b/resources/views/nav/edit.blade.php
@@ -1,14 +1,12 @@
 @extends('statamic::layout')
 
 @section('content')
-
-<nav-builder
-    title="{{ $title }}"
-    index-url="{{ Statamic\Statamic::pro() && Statamic\Facades\User::current()->can('manage preferences') ? cp_route('preferences.nav.index') : false }}"
-    update-url="{{ $updateUrl }}"
-    destroy-url="{{ $destroyUrl }}"
-    :save-as-options="{{ json_encode($saveAsOptions) }}"
-    :nav="{{ json_encode($nav) }}"
-></nav-builder>
-
+    <nav-builder
+        title="{{ $title }}"
+        index-url="{{ Statamic\Statamic::pro() && Statamic\Facades\User::current()->can('manage preferences') ? cp_route('preferences.nav.index') : false }}"
+        update-url="{{ $updateUrl }}"
+        destroy-url="{{ $destroyUrl }}"
+        :save-as-options="{{ json_encode($saveAsOptions) }}"
+        :nav="{{ json_encode($nav) }}"
+    ></nav-builder>
 @endsection
diff --git a/resources/views/nav/index.blade.php b/resources/views/nav/index.blade.php
index ee5de3c3fc..e6b4301cdf 100644
--- a/resources/views/nav/index.blade.php
+++ b/resources/views/nav/index.blade.php
@@ -1,24 +1,25 @@
-@php use function Statamic\trans as __; @endphp
+@php
+    use function Statamic\trans as __;
+@endphp
 
 @extends('statamic::layout')
 @section('title', __('CP Nav Preferences'))
 
 @section('content')
-
-    <div class="flex justify-between items-center mb-6">
+    <div class="mb-6 flex items-center justify-between">
         <h1>@yield('title')</h1>
     </div>
 
-    <div class="card p-0 mb-4">
+    <div class="card mb-4 p-0">
         <table class="data-table">
             <tr>
                 <td>
                     <div class="flex items-center">
-                        <div class="w-4 h-4 rtl:ml-4 ltr:mr-4">@cp_svg('icons/light/earth')</div>
+                        <div class="h-4 w-4 ltr:mr-4 rtl:ml-4">@cp_svg('icons/light/earth')</div>
                         <a href="{{ cp_route('preferences.nav.default.edit') }}">{{ __('Default') }}</a>
                     </div>
                 </td>
-                <td class="rtl:text-left ltr:text-right text-2xs text-gray-500">
+                <td class="text-2xs text-gray-500 ltr:text-right rtl:text-left">
                     @if (Statamic\Facades\Preference::default()->hasPreference('nav'))
                         {{ __('Modified') }}
                     @endif
@@ -28,18 +29,20 @@
     </div>
 
     @if (Statamic\Facades\Role::all()->isNotEmpty())
-        <h3 class="little-heading rtl:pr-0 ltr:pl-0 mb-2">{{ __('Override For Role') }}</h3>
-        <div class="card p-0 mb-4">
+        <h3 class="little-heading mb-2 ltr:pl-0 rtl:pr-0">{{ __('Override For Role') }}</h3>
+        <div class="card mb-4 p-0">
             <table class="data-table">
                 @foreach (Statamic\Facades\Role::all() as $role)
                     <tr>
                         <td>
                             <div class="flex items-center">
-                                <div class="w-4 h-4 rtl:ml-4 ltr:mr-4">@cp_svg('icons/light/shield-key')</div>
-                                <a href="{{ cp_route('preferences.nav.role.edit', [$role->handle()]) }}">{{ __($role->title()) }}</a>
+                                <div class="h-4 w-4 ltr:mr-4 rtl:ml-4">@cp_svg('icons/light/shield-key')</div>
+                                <a href="{{ cp_route('preferences.nav.role.edit', [$role->handle()]) }}">
+                                    {{ __($role->title()) }}
+                                </a>
                             </div>
                         </td>
-                        <td class="rtl:text-left ltr:text-right text-2xs text-gray-500">
+                        <td class="text-2xs text-gray-500 ltr:text-right rtl:text-left">
                             @if ($role->hasPreference('nav'))
                                 {{ __('Modified') }}
                             @endif
@@ -50,17 +53,17 @@
         </div>
     @endif
 
-    <h3 class="little-heading rtl:pr-0 ltr:pl-0 mb-2">{{ __('Override For User') }}</h3>
-    <div class="card p-0 mb-4">
+    <h3 class="little-heading mb-2 ltr:pl-0 rtl:pr-0">{{ __('Override For User') }}</h3>
+    <div class="card mb-4 p-0">
         <table class="data-table">
             <tr>
                 <td>
                     <div class="flex items-center">
-                        <div class="w-4 h-4 rtl:ml-4 ltr:mr-4">@cp_svg('icons/light/user')</div>
-                    <a href="{{ cp_route('preferences.nav.user.edit') }}">{{ __('My Nav') }}</a>
+                        <div class="h-4 w-4 ltr:mr-4 rtl:ml-4">@cp_svg('icons/light/user')</div>
+                        <a href="{{ cp_route('preferences.nav.user.edit') }}">{{ __('My Nav') }}</a>
                     </div>
                 </td>
-                <td class="rtl:text-left ltr:text-right text-2xs text-gray-500">
+                <td class="text-2xs text-gray-500 ltr:text-right rtl:text-left">
                     @if (Statamic\Facades\User::current()->hasPreference('nav'))
                         {{ __('Modified') }}
                     @endif
@@ -69,8 +72,11 @@
         </table>
     </div>
 
-    @include('statamic::partials.docs-callout', [
-        'topic' => __('Customizing the Control Panel Nav'),
-        'url' => Statamic::docsUrl('customizing-the-cp-nav')
-    ])
+    @include(
+        'statamic::partials.docs-callout',
+        [
+            'topic' => __('Customizing the Control Panel Nav'),
+            'url' => Statamic::docsUrl('customizing-the-cp-nav'),
+        ]
+    )
 @endsection
diff --git a/resources/views/nav/updates.blade.php b/resources/views/nav/updates.blade.php
index bdf60b4c63..6d1676e5af 100644
--- a/resources/views/nav/updates.blade.php
+++ b/resources/views/nav/updates.blade.php
@@ -1,6 +1,7 @@
 <li class="{{ $item->isActive() ? 'current' : '' }}">
     <a href="{{ $item->url() }}">
-        <i>{!! $item->svg() !!}</i><span v-pre>{{ __($item->name()) }}</span>
-        <updates-badge class="rtl:mr-2 ltr:ml-2"></updates-badge>
+        <i>{!! $item->svg() !!}</i>
+        <span v-pre>{{ __($item->name()) }}</span>
+        <updates-badge class="ltr:ml-2 rtl:mr-2"></updates-badge>
     </a>
 </li>
diff --git a/resources/views/navigation/blueprints/edit.blade.php b/resources/views/navigation/blueprints/edit.blade.php
index a93911340a..01e476b059 100644
--- a/resources/views/navigation/blueprints/edit.blade.php
+++ b/resources/views/navigation/blueprints/edit.blade.php
@@ -1,14 +1,18 @@
-@php use function Statamic\trans as __; @endphp
+@php
+    use function Statamic\trans as __;
+@endphp
 
 @extends('statamic::layout')
 @section('title', __('Edit Blueprint'))
 
 @section('content')
-
-    @include('statamic::partials.breadcrumb', [
-        'url' => cp_route('navigation.show', $nav->handle()),
-        'title' => $nav->title(),
-    ])
+    @include(
+        'statamic::partials.breadcrumb',
+        [
+            'url' => cp_route('navigation.show', $nav->handle()),
+            'title' => $nav->title(),
+        ]
+    )
 
     <blueprint-builder
         action="{{ cp_route('navigation.blueprint.update', $nav->handle()) }}"
@@ -16,9 +20,11 @@
         :use-tabs="false"
     ></blueprint-builder>
 
-    @include('statamic::partials.docs-callout', [
-        'topic' => __('Blueprints'),
-        'url' => Statamic::docsUrl('blueprints')
-    ])
-
+    @include(
+        'statamic::partials.docs-callout',
+        [
+            'topic' => __('Blueprints'),
+            'url' => Statamic::docsUrl('blueprints'),
+        ]
+    )
 @endsection
diff --git a/resources/views/navigation/create.blade.php b/resources/views/navigation/create.blade.php
index 2430ba0c64..e203be1b3f 100644
--- a/resources/views/navigation/create.blade.php
+++ b/resources/views/navigation/create.blade.php
@@ -1,10 +1,10 @@
-@php use function Statamic\trans as __; @endphp
+@php
+    use function Statamic\trans as __;
+@endphp
 
 @extends('statamic::layout')
 @section('title', __('Create Navigation'))
 
 @section('content')
-    <navigation-create-form
-        route="{{ cp_route('navigation.store') }}">
-    </navigation-create-form>
+<navigation-create-form route="{{ cp_route('navigation.store') }}"></navigation-create-form>
 @stop
diff --git a/resources/views/navigation/edit.blade.php b/resources/views/navigation/edit.blade.php
index 8eb010c017..0e7ce29d3d 100644
--- a/resources/views/navigation/edit.blade.php
+++ b/resources/views/navigation/edit.blade.php
@@ -1,15 +1,19 @@
-@php use function Statamic\trans as __; @endphp
+@php
+    use function Statamic\trans as __;
+@endphp
 
 @extends('statamic::layout')
 @section('title', __('Edit Navigation'))
 
 @section('content')
-
     <header class="mb-6">
-        @include('statamic::partials.breadcrumb', [
-            'url' => cp_route('navigation.show', $nav->handle()),
-            'title' => $nav->title()
-        ])
+        @include(
+            'statamic::partials.breadcrumb',
+            [
+                'url' => cp_route('navigation.show', $nav->handle()),
+                'title' => $nav->title(),
+            ]
+        )
         <h1>@yield('title')</h1>
     </header>
 
@@ -19,5 +23,4 @@
         :meta="{{ json_encode($meta) }}"
         url="{{ $nav->showUrl() }}"
     ></navigation-edit-form>
-
 @endsection
diff --git a/resources/views/navigation/index.blade.php b/resources/views/navigation/index.blade.php
index e4f60f9ca9..f13d258925 100644
--- a/resources/views/navigation/index.blade.php
+++ b/resources/views/navigation/index.blade.php
@@ -1,13 +1,13 @@
-@php use function Statamic\trans as __; @endphp
+@php
+    use function Statamic\trans as __;
+@endphp
 
 @extends('statamic::layout')
 @section('title', __('Navigation'))
 
 @section('content')
-
-    @unless($navs->isEmpty())
-
-        <header class="flex items-center justify-between mb-6">
+    @unless ($navs->isEmpty())
+        <header class="mb-6 flex items-center justify-between">
             <h1>{{ __('Navigation') }}</h1>
 
             @can('create', 'Statamic\Contracts\Structures\Nav')
@@ -15,26 +15,26 @@
             @endcan
         </header>
 
-        <navigation-listing
-            :initial-rows="{{ json_encode($navs) }}">
-        </navigation-listing>
-
+        <navigation-listing :initial-rows="{{ json_encode($navs) }}"></navigation-listing>
     @else
-
-        @include('statamic::partials.empty-state', [
-            'title' => __('Navigation'),
-            'description' => __('statamic::messages.navigation_configure_intro'),
-            'svg' => 'empty/navigation',
-            'button_text' => __('Create Navigation'),
-            'button_url' => cp_route('navigation.create'),
-            'can' => $user->can('create', 'Statamic\Contracts\Structures\Nav')
-        ])
-
+        @include(
+            'statamic::partials.empty-state',
+            [
+                'title' => __('Navigation'),
+                'description' => __('statamic::messages.navigation_configure_intro'),
+                'svg' => 'empty/navigation',
+                'button_text' => __('Create Navigation'),
+                'button_url' => cp_route('navigation.create'),
+                'can' => $user->can('create', 'Statamic\Contracts\Structures\Nav'),
+            ]
+        )
     @endunless
 
-    @include('statamic::partials.docs-callout', [
-        'topic' => __('Navigation'),
-        'url' => Statamic::docsUrl('navigation')
-    ])
-
+    @include(
+        'statamic::partials.docs-callout',
+        [
+            'topic' => __('Navigation'),
+            'url' => Statamic::docsUrl('navigation'),
+        ]
+    )
 @endsection
diff --git a/resources/views/navigation/show.blade.php b/resources/views/navigation/show.blade.php
index 277d06323d..71c31a790a 100644
--- a/resources/views/navigation/show.blade.php
+++ b/resources/views/navigation/show.blade.php
@@ -3,7 +3,6 @@
 @section('title', Statamic::crumb($nav->title(), 'Navigation'))
 
 @section('content')
-
     <navigation-view
         title="{{ $nav->title() }}"
         handle="{{ $nav->handle() }}"
@@ -24,10 +23,13 @@
             @can('edit', $nav)
                 <dropdown-item :text="__('Edit Navigation')" redirect="{{ $nav->editUrl() }}"></dropdown-item>
             @endcan
+
             @can('configure fields')
-                <dropdown-item :text="__('Edit Blueprint')" redirect="{{ cp_route('navigation.blueprint.edit', $nav->handle()) }}"></dropdown-item>
+                <dropdown-item
+                    :text="__('Edit Blueprint')"
+                    redirect="{{ cp_route('navigation.blueprint.edit', $nav->handle()) }}"
+                ></dropdown-item>
             @endcan
         </template>
     </navigation-view>
-
 @endsection
diff --git a/resources/views/outside.blade.php b/resources/views/outside.blade.php
index 8bfee4dc75..01bd7f3bbc 100644
--- a/resources/views/outside.blade.php
+++ b/resources/views/outside.blade.php
@@ -1,4 +1,4 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="{{ config('app.locale') }}" dir="{{ Statamic\Facades\Site::current()->direction ?? 'rtl' }}">
     <head>
         @include('statamic::partials.head')
diff --git a/resources/views/partials/breadcrumb.blade.php b/resources/views/partials/breadcrumb.blade.php
index cd6ab2bbe7..fc5f60c2dd 100644
--- a/resources/views/partials/breadcrumb.blade.php
+++ b/resources/views/partials/breadcrumb.blade.php
@@ -1,8 +1,13 @@
-@php use function Statamic\trans as __; @endphp
+@php
+    use function Statamic\trans as __;
+@endphp
 
 <div class="flex">
-    <a href="{{ $url }}" class="flex-initial flex p-2 -m-2 items-center text-xs text-gray-700 dark:text-dark-175 hover:text-gray-900 dark:hover:text-dark-100">
-        <div class="h-6 rotate-180 svg-icon using-svg">
+    <a
+        href="{{ $url }}"
+        class="-m-2 flex flex-initial items-center p-2 text-xs text-gray-700 hover:text-gray-900 dark:text-dark-175 dark:hover:text-dark-100"
+    >
+        <div class="svg-icon using-svg h-6 rotate-180">
             @cp_svg('icons/micro/chevron-right')
         </div>
         <span v-pre>{{ __($title) }}</span>
diff --git a/resources/views/partials/create-first.blade.php b/resources/views/partials/create-first.blade.php
index a0d111ee9d..d9eaf0edaa 100644
--- a/resources/views/partials/create-first.blade.php
+++ b/resources/views/partials/create-first.blade.php
@@ -1,8 +1,9 @@
-@php use function Statamic\trans as __; @endphp
-
-<div class="no-results border-dashed border-2">
-    <div class="text-center max-w-md mx-auto mt-10 rounded-lg px-8 py-30">
+@php
+    use function Statamic\trans as __;
+@endphp
 
+<div class="no-results border-2 border-dashed">
+    <div class="mx-auto mt-10 max-w-md rounded-lg px-8 py-30 text-center">
         @cp_svg($svg)
 
         <h1 class="my-6">
@@ -14,18 +15,17 @@
         </h1>
 
         @if ($description ?? false)
-            <p class="text-gray mb-6">
+            <p class="mb-6 text-gray">
                 {{ __($description) }}
             </p>
         @endif
 
         @if ($can ?? $user->can('super'))
-            @if($button ?? false)
+            @if ($button ?? false)
                 {{ $button }}
             @else
                 <a href="{{ $route ?? null }}" class="btn-primary btn-lg">{{ __("Create {$resource}") }}</a>
             @endif
         @endif
-
     </div>
 </div>
diff --git a/resources/views/partials/docs-callout.blade.php b/resources/views/partials/docs-callout.blade.php
index d3b5de1ea7..e66e5a4651 100644
--- a/resources/views/partials/docs-callout.blade.php
+++ b/resources/views/partials/docs-callout.blade.php
@@ -1,7 +1,13 @@
-@php use function Statamic\trans as __; @endphp
+@php
+    use function Statamic\trans as __;
+@endphp
 
 @if (config('statamic.cp.link_to_docs'))
-    <div class="flex justify-center text-center mt-16">
-        <div class="bg-white dark:bg-dark-900 rounded-full px-6 py-2 shadow-sm text-sm text-gray-700 dark:text-dark-100">{!! $text ?? __('Learn more about :link', ['link' => '<a href="'.$url.'" target="_blank" rel="noopener noopener" class="text-blue hover:text-blue-700">'.$topic.'</a>']) !!}</div>
+    <div class="mt-16 flex justify-center text-center">
+        <div
+            class="rounded-full bg-white px-6 py-2 text-sm text-gray-700 shadow-sm dark:bg-dark-900 dark:text-dark-100"
+        >
+            {!! $text ?? __('Learn more about :link', ['link' => '<a href="' . $url . '" target="_blank" rel="noopener noopener" class="text-blue hover:text-blue-700">' . $topic . '</a>']) !!}
+        </div>
     </div>
 @endif
diff --git a/resources/views/partials/empty-state.blade.php b/resources/views/partials/empty-state.blade.php
index 15cff52853..e3ec611fde 100644
--- a/resources/views/partials/empty-state.blade.php
+++ b/resources/views/partials/empty-state.blade.php
@@ -1,24 +1,24 @@
-<div class="no-results md:mt-4 max-w-md mx-auto">
-    <div class="card rounded-xl text-center p-6 lg:py-10">
-            <h1 class="mb-8">{{ $title }}</h1>
+<div class="no-results mx-auto max-w-md md:mt-4">
+    <div class="card rounded-xl p-6 text-center lg:py-10">
+        <h1 class="mb-8">{{ $title }}</h1>
 
-            <div class="hidden md:block">
-                @cp_svg($svg ?? 'empty/content')
-            </div>
+        <div class="hidden md:block">
+            @cp_svg($svg ?? 'empty/content')
+        </div>
 
-            @if ($description ?? false)
-            <p class="text-gray-700 leading-normal my-8 text-lg antialiased">
+        @if ($description ?? false)
+            <p class="my-8 text-lg leading-normal text-gray-700 antialiased">
                 {{ $description }}
             </p>
-            @endif
+        @endif
 
-            {{--
-                Don't show it if there's no "button_url".
-                If there's no "can", show it.
-                If there's a "can", and its false, don't show it.
-            --}}
-            @unless (!isset($button_url) || (isset($can) && !$can))
-                <a href="{{ $button_url }}" class="btn-primary btn-lg">{{ $button_text }}</a>
-            @endunless
-        </div>
+        {{--
+            Don't show it if there's no "button_url".
+            If there's no "can", show it.
+            If there's a "can", and its false, don't show it.
+        --}}
+        @unless (! isset($button_url) || (isset($can) && ! $can))
+            <a href="{{ $button_url }}" class="btn-primary btn-lg">{{ $button_text }}</a>
+        @endunless
+    </div>
 </div>
diff --git a/resources/views/partials/global-header.blade.php b/resources/views/partials/global-header.blade.php
index 23238c34a8..1ff16aa357 100644
--- a/resources/views/partials/global-header.blade.php
+++ b/resources/views/partials/global-header.blade.php
@@ -1,32 +1,67 @@
-@php use function Statamic\trans as __; @endphp
+@php
+    use function Statamic\trans as __;
+@endphp
 
 <div class="global-header">
-    <div class="lg:min-w-xl rtl:pr-2 ltr:pl-2 rtl:md:pr-6 ltr:md:pl-6 h-full flex items-center">
-        <button class="nav-toggle hidden md:flex rtl:mr-1 ltr:ml-1 shrink-0" @click="toggleNav" aria-label="{{ __('Toggle Nav') }}">@cp_svg('icons/light/burger', 'h-4 w-4')</button>
-        <button class="nav-toggle md:hidden rtl:mr-1 ltr:ml-1 shrink-0" @click="toggleMobileNav" v-if="! mobileNavOpen" aria-label="{{ __('Toggle Mobile Nav') }}">@cp_svg('icons/light/burger', 'h-4 w-4')</button>
-        <button class="nav-toggle md:hidden rtl:mr-1 ltr:ml-1 shrink-0" @click="toggleMobileNav" v-else v-cloak aria-label="{{ __('Toggle Mobile Nav') }}">@cp_svg('icons/light/close', 'h-3 w-3')</button>
+    <div class="lg:min-w-xl flex h-full items-center ltr:pl-2 ltr:md:pl-6 rtl:pr-2 rtl:md:pr-6">
+        <button
+            class="nav-toggle hidden shrink-0 md:flex ltr:ml-1 rtl:mr-1"
+            @click="toggleNav"
+            aria-label="{{ __('Toggle Nav') }}"
+        >
+            @cp_svg('icons/light/burger', 'h-4 w-4')
+        </button>
+        <button
+            class="nav-toggle shrink-0 md:hidden ltr:ml-1 rtl:mr-1"
+            @click="toggleMobileNav"
+            v-if="! mobileNavOpen"
+            aria-label="{{ __('Toggle Mobile Nav') }}"
+        >
+            @cp_svg('icons/light/burger', 'h-4 w-4')
+        </button>
+        <button
+            class="nav-toggle shrink-0 md:hidden ltr:ml-1 rtl:mr-1"
+            @click="toggleMobileNav"
+            v-else
+            v-cloak
+            aria-label="{{ __('Toggle Mobile Nav') }}"
+        >
+            @cp_svg('icons/light/close', 'h-3 w-3')
+        </button>
         <a href="{{ route('statamic.cp.index') }}" class="flex items-end">
-            <div v-tooltip="version" class="hidden md:block shrink-0">
+            <div v-tooltip="version" class="hidden shrink-0 md:block">
                 @if ($customLogo)
-                    <img src="{{ $customLogo }}" alt="{{ config('statamic.cp.custom_cms_name') }}" class="white-label-logo dark:hidden">
-                    <img src="{{ $customDarkLogo }}" alt="{{ config('statamic.cp.custom_cms_name') }}" class="white-label-logo hidden dark:block">
+                    <img
+                        src="{{ $customLogo }}"
+                        alt="{{ config('statamic.cp.custom_cms_name') }}"
+                        class="white-label-logo dark:hidden"
+                    />
+                    <img
+                        src="{{ $customDarkLogo }}"
+                        alt="{{ config('statamic.cp.custom_cms_name') }}"
+                        class="white-label-logo hidden dark:block"
+                    />
                 @elseif ($customLogoText)
                     <span class="font-medium">{{ $customLogoText }}</span>
                 @else
-                    @cp_svg('statamic-wordmark', 'w-24 logo')
-                    @if (Statamic::pro())<span class="font-bold text-4xs align-top uppercase">{{ __('Pro') }}</span>@endif
+                    @cp_svg('statamic-wordmark', 'logo w-24')
+                    @if (Statamic::pro())
+                        <span class="align-top text-4xs font-bold uppercase">{{ __('Pro') }}</span>
+                    @endif
                 @endif
             </div>
         </a>
     </div>
 
-    <div class="sm:px-8 w-full flex-1 lg:flex items-center lg:justify-center mx-auto max-w-full">
-        <global-search ref="globalSearch" endpoint="{{ cp_route('search') }}" placeholder="{{ __('Search...') }}">
-        </global-search>
+    <div class="mx-auto w-full max-w-full flex-1 items-center sm:px-8 lg:flex lg:justify-center">
+        <global-search
+            ref="globalSearch"
+            endpoint="{{ cp_route('search') }}"
+            placeholder="{{ __('Search...') }}"
+        ></global-search>
     </div>
 
-    <div class="head-link h-full px-6 space-x-3 rtl:space-x-reverse flex items-center justify-end">
-
+    <div class="head-link flex h-full items-center justify-end space-x-3 px-6 rtl:space-x-reverse">
         @if (Statamic\Facades\Site::authorized()->count() > 1)
             <global-site-selector>
                 <template slot="icon">@cp_svg('icons/light/sites')</template>
@@ -38,48 +73,72 @@
         <favorite-creator class="hidden md:block"></favorite-creator>
 
         @if (Route::has('horizon.index') && \Laravel\Horizon\Horizon::check(request()))
-            <a class="global-header-icon-button hidden md:block" href="{{ route('horizon.index') }}" target="_blank" v-tooltip="'Laravel Horizon'">
+            <a
+                class="global-header-icon-button hidden md:block"
+                href="{{ route('horizon.index') }}"
+                target="_blank"
+                v-tooltip="'Laravel Horizon'"
+            >
                 @cp_svg('icons/regular/horizon')
             </a>
         @endif
 
         @if (Route::has('pulse') && (app()->environment('local') || $user->can('viewPulse')))
-            <a class="global-header-icon-button hidden md:block" href="{{ route('pulse') }}" target="_blank" v-tooltip="'Laravel Pulse'">
+            <a
+                class="global-header-icon-button hidden md:block"
+                href="{{ route('pulse') }}"
+                target="_blank"
+                v-tooltip="'Laravel Pulse'"
+            >
                 @cp_svg('icons/regular/pulse')
             </a>
         @endif
 
         @if (config('nova.path') && (app()->environment('local') || $user->can('viewNova')))
-            <a class="global-header-icon-button hidden md:block" href="/{{ trim(config('nova.path'), '/') }}/dashboards/main" target="_blank" v-tooltip="'Laravel Nova'">
+            <a
+                class="global-header-icon-button hidden md:block"
+                href="/{{ trim(config('nova.path'), '/') }}/dashboards/main"
+                target="_blank"
+                v-tooltip="'Laravel Nova'"
+            >
                 @cp_svg('icons/regular/nova')
             </a>
         @endif
 
         @if (Route::has('telescope') && \Laravel\Telescope\Telescope::check(request()))
-            <a class="global-header-icon-button hidden md:block" href="{{ route('telescope') }}" target="_blank" v-tooltip="'Laravel Telescope'">
+            <a
+                class="global-header-icon-button hidden md:block"
+                href="{{ route('telescope') }}"
+                target="_blank"
+                v-tooltip="'Laravel Telescope'"
+            >
                 @cp_svg('icons/regular/telescope')
             </a>
         @endif
 
         <dropdown-list v-cloak>
             <template v-slot:trigger>
-                <button class="global-header-icon-button hidden md:block" v-tooltip="__('Useful Links')" aria-label="{{ __('View Useful Links') }}">
+                <button
+                    class="global-header-icon-button hidden md:block"
+                    v-tooltip="__('Useful Links')"
+                    aria-label="{{ __('View Useful Links') }}"
+                >
                     @cp_svg('icons/light/book-open')
                 </button>
             </template>
 
             @if (config('statamic.cp.link_to_docs'))
-            <dropdown-item external-link="https://statamic.dev" class="flex items-center">
-                <span>{{ __('Documentation') }}</span>
-                <i class="w-3 block rtl:mr-2 ltr:ml-2">@cp_svg('icons/light/external-link')</i>
-            </dropdown-item>
+                <dropdown-item external-link="https://statamic.dev" class="flex items-center">
+                    <span>{{ __('Documentation') }}</span>
+                    <i class="block w-3 ltr:ml-2 rtl:mr-2">@cp_svg('icons/light/external-link')</i>
+                </dropdown-item>
             @endif
 
             @if (config('statamic.cp.support_url'))
-            <dropdown-item external-link="{{ config('statamic.cp.support_url') }}" class="flex items-center">
-                <span>{{ __('Support') }}</span>
-                <i class="w-3 block rtl:mr-2 ltr:ml-2">@cp_svg('icons/light/external-link')</i>
-            </dropdown-item>
+                <dropdown-item external-link="{{ config('statamic.cp.support_url') }}" class="flex items-center">
+                    <span>{{ __('Support') }}</span>
+                    <i class="block w-3 ltr:ml-2 rtl:mr-2">@cp_svg('icons/light/external-link')</i>
+                </dropdown-item>
             @endif
 
             <dropdown-item @click="$events.$emit('keyboard-shortcuts.open')" class="flex items-center">
@@ -87,38 +146,67 @@
             </dropdown-item>
         </dropdown-list>
 
-        <a class="global-header-icon-button hidden md:block" href="{{ Statamic\Facades\Site::selected()->url() }}" target="_blank" v-tooltip="'{{ __('View Site') }}'" aria-label="{{ __('View Site') }}">
+        <a
+            class="global-header-icon-button hidden md:block"
+            href="{{ Statamic\Facades\Site::selected()->url() }}"
+            target="_blank"
+            v-tooltip="'{{ __('View Site') }}'"
+            aria-label="{{ __('View Site') }}"
+        >
             @cp_svg('icons/light/browser-com')
         </a>
         <dropdown-list v-cloak>
             <template v-slot:trigger>
-                <a class="dropdown-toggle items-center h-full hide flex relative group">
+                <a class="dropdown-toggle hide group relative flex h-full items-center">
                     @if ($user->avatar())
-                        <div class="icon-header-avatar {{ session()->get('statamic_impersonated_by') ? 'animate-radar' : '' }}"><img src="{{ $user->avatar() }}" /></div>
+                        <div
+                            class="icon-header-avatar {{ session()->get('statamic_impersonated_by') ? 'animate-radar' : '' }}"
+                        >
+                            <img src="{{ $user->avatar() }}" />
+                        </div>
                     @else
-                        <div class="icon-header-avatar {{ session()->get('statamic_impersonated_by') ? 'animate-radar' : '' }} icon-user-initials">{{ $user->initials() }}</div>
+                        <div
+                            class="icon-header-avatar {{ session()->get('statamic_impersonated_by') ? 'animate-radar' : '' }} icon-user-initials"
+                        >
+                            {{ $user->initials() }}
+                        </div>
                     @endif
                 </a>
             </template>
 
             <div class="px-2">
-                <div class="text-base mb-px">{{ $user->email() }}</div>
+                <div class="mb-px text-base">{{ $user->email() }}</div>
                 @if ($user->isSuper())
-                    <div class="text-2xs mt-px text-gray-600">{{ __('Super Admin') }} @if (session()->get('statamic_impersonated_by'))(Impersonating)@endif</div>
+                    <div class="mt-px text-2xs text-gray-600">
+                        {{ __('Super Admin') }}
+                        @if (session()->get('statamic_impersonated_by'))
+                            (Impersonating)
+                        @endif
+                    </div>
                 @elseif (session()->get('statamic_impersonated_by'))
-                    <div class="text-2xs mt-px text-gray-600">{{ __('Impersonating') }}</div>
+                    <div class="mt-px text-2xs text-gray-600">{{ __('Impersonating') }}</div>
                 @endif
             </div>
             <div class="divider"></div>
 
             <dropdown-item :text="__('Profile')" redirect="{{ route('statamic.cp.account') }}"></dropdown-item>
-            <dropdown-item :text="__('Preferences')" redirect="{{ cp_route('preferences.user.edit') }}"></dropdown-item>
+            <dropdown-item
+                :text="__('Preferences')"
+                redirect="{{ cp_route('preferences.user.edit') }}"
+            ></dropdown-item>
             @if (session()->get('statamic_impersonated_by'))
-                <dropdown-item :text="__('Stop Impersonating')" redirect="{{ cp_route('impersonation.stop') }}"></dropdown-item>
+                <dropdown-item
+                    :text="__('Stop Impersonating')"
+                    redirect="{{ cp_route('impersonation.stop') }}"
+                ></dropdown-item>
             @endif
-            <dropdown-item :text="__('Log out')" redirect="{{ route('statamic.cp.logout', ['redirect' => cp_route('index')]) }}"></dropdown-item>
+
+            <dropdown-item
+                :text="__('Log out')"
+                redirect="{{ route('statamic.cp.logout', ['redirect' => cp_route('index')]) }}"
+            ></dropdown-item>
         </dropdown-list>
     </div>
 </div>
 
-<div v-if="$refs.globalSearch?.focused" v-cloak class="fixed inset-0 h-full w-full bg-black/10 z-2"></div>
+<div v-if="$refs.globalSearch?.focused" v-cloak class="fixed inset-0 z-2 h-full w-full bg-black/10"></div>
diff --git a/resources/views/partials/head.blade.php b/resources/views/partials/head.blade.php
index caeacb8792..61264c816c 100644
--- a/resources/views/partials/head.blade.php
+++ b/resources/views/partials/head.blade.php
@@ -1,24 +1,34 @@
-@php use function Statamic\trans as __; @endphp
+@php
+    use function Statamic\trans as __;
+@endphp
 
-<meta charset="utf-8">
-<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
-<meta name="viewport" content="width=device-width">
-<meta name="robots" content="noindex,nofollow">
+<meta charset="utf-8" />
+<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
+<meta name="viewport" content="width=device-width" />
+<meta name="robots" content="noindex,nofollow" />
 
-<title>@yield('title', $title ?? __('Here')) {{ Statamic::cpDirection() === 'ltr' ? '‹' : '›' }} {{ __(Statamic::pro() ? config('statamic.cp.custom_cms_name', 'Statamic') : 'Statamic') }}</title>
+<title>
+    @yield('title', $title ?? __('Here')) {{ Statamic::cpDirection() === 'ltr' ? '‹' : '›' }}
+    {{ __(Statamic::pro() ? config('statamic.cp.custom_cms_name', 'Statamic') : 'Statamic') }}
+</title>
 
 @if (Statamic::pro() && config('statamic.cp.custom_favicon_url'))
     @include('statamic::partials.favicon', ['favicon_url' => config('statamic.cp.custom_favicon_url')])
 @else
     <link rel="icon" type="image/png" href="{{ Statamic::cpViteAsset('img/favicon-32x32.png') }}" sizes="32x32" />
     <link rel="icon" type="image/png" href="{{ Statamic::cpViteAsset('img/favicon-16x16.png') }}" sizes="16x16" />
-    <link rel="shortcut icon" type="image/x-icon" href="{{ Statamic::cpViteAsset('img/favicon.ico') }}" sizes="16x16 32x32"/>
+    <link
+        rel="shortcut icon"
+        type="image/x-icon"
+        href="{{ Statamic::cpViteAsset('img/favicon.ico') }}"
+        sizes="16x16 32x32"
+    />
 @endif
 
 <script>
     (function () {
-        let theme = {!! ($userTheme = $user?->preferredTheme()) ? "'".$userTheme."'" : "null" !!};
-        if (! theme) theme = localStorage.getItem('statamic.theme') ?? 'auto';
+        let theme = {!! ($userTheme = $user?->preferredTheme()) ? "'" . $userTheme . "'" : 'null' !!};
+        if (!theme) theme = localStorage.getItem('statamic.theme') ?? 'auto';
         if (theme === 'auto' && window.matchMedia('(prefers-color-scheme: dark)').matches) theme = 'dark';
         if (theme === 'dark') document.documentElement.classList.add('dark');
     })();
@@ -27,7 +37,7 @@
 {{ Statamic::cpViteScripts() }}
 
 @if (Statamic::pro() && config('statamic.cp.custom_css_url'))
-<link href="{{ config('statamic.cp.custom_css_url') }}?v={{ Statamic::version() }}" rel="stylesheet" />
+    <link href="{{ config('statamic.cp.custom_css_url') }}?v={{ Statamic::version() }}" rel="stylesheet" />
 @endif
 
 @foreach (Statamic::availableExternalStyles(request()) as $url)
diff --git a/resources/views/partials/licensing-alerts.blade.php b/resources/views/partials/licensing-alerts.blade.php
index f5ff86034a..9d9e871921 100644
--- a/resources/views/partials/licensing-alerts.blade.php
+++ b/resources/views/partials/licensing-alerts.blade.php
@@ -1,34 +1,37 @@
-@php use function Statamic\trans as __; @endphp
+@php
+    use function Statamic\trans as __;
+@endphp
+
 @inject('licenses', 'Statamic\Licensing\LicenseManager')
 
 @if ($licenses->requestFailed())
-    <div class="p-2 w-full fixed bottom-0 z-20">
-        <div class="py-3 px-4 text-sm w-full rounded-md bg-yellow border border-yellow-dark dark:bg-dark-blue-100 dark:border-none">
-        @if ($licenses->usingLicenseKeyFile())
-            {{ __('statamic::messages.outpost_license_key_error') }}
-        @elseif ($licenses->requestErrorCode() === 422)
-            {{ __('statamic::messages.outpost_error_422') }}
-            {{ join(' ', $licenses->requestValidationErrors()->unique()) }}
-        @elseif ($licenses->requestErrorCode() === 429)
-            {{ __('statamic::messages.outpost_error_429') }}
-            {{ trans_choice('statamic::messages.try_again_in_seconds', $licenses->failedRequestRetrySeconds()) }}
-        @else
-            {{ __('statamic::messages.outpost_issue_try_later') }}
-        @endif
+    <div class="fixed bottom-0 z-20 w-full p-2">
+        <div
+            class="w-full rounded-md border border-yellow-dark bg-yellow px-4 py-3 text-sm dark:border-none dark:bg-dark-blue-100"
+        >
+            @if ($licenses->usingLicenseKeyFile())
+                {{ __('statamic::messages.outpost_license_key_error') }}
+            @elseif ($licenses->requestErrorCode() === 422)
+                {{ __('statamic::messages.outpost_error_422') }}
+                {{ join(' ', $licenses->requestValidationErrors()->unique()) }}
+            @elseif ($licenses->requestErrorCode() === 429)
+                {{ __('statamic::messages.outpost_error_429') }}
+                {{ trans_choice('statamic::messages.try_again_in_seconds', $licenses->failedRequestRetrySeconds()) }}
+            @else
+                {{ __('statamic::messages.outpost_issue_try_later') }}
+            @endif
         </div>
     </div>
 @else
     @if ($licenses->invalid())
-        <div class="p-2 w-full fixed bottom-0 z-2" v-cloak v-show="showBanner">
-            <div class="
-                py-3 px-4 text-sm w-full rounded-md
-                @if ($licenses->isOnTestDomain()) bg-gray-800 dark:bg-dark-500 text-gray-300 @endif
-                @if ($licenses->isOnPublicDomain()) bg-red-500 text-white @endif
-            ">
+        <div class="fixed bottom-0 z-2 w-full p-2" v-cloak v-show="showBanner">
+            <div
+                class="@if ($licenses->isOnTestDomain()) bg-gray-800 dark:bg-dark-500 text-gray-300 @endif @if ($licenses->isOnPublicDomain()) bg-red-500 text-white @endif w-full rounded-md px-4 py-3 text-sm"
+            >
                 @if ($licenses->isOnTestDomain())
                     <div class="flex items-center justify-between">
                         <span>
-                            <b class="rtl:ml-2 ltr:mr-2">{{ __('Trial Mode') }}:</b>
+                            <b class="ltr:mr-2 rtl:ml-2">{{ __('Trial Mode') }}:</b>
                             @if ($licenses->onlyAddonsAreInvalid())
                                 {{ __('statamic::messages.licensing_trial_mode_alert_addons') }}
                             @elseif ($licenses->onlyStatamicIsInvalid())
@@ -38,11 +41,18 @@
                             @endif
                         </span>
                         <div class="flex">
-                            <button @click="hideBanner" class="rtl:ml-4 ltr:mr-4 text-2xs opacity-50 hover:opacity-75">{{ __('Dismiss') }}</button>
+                            <button @click="hideBanner" class="text-2xs opacity-50 hover:opacity-75 ltr:mr-4 rtl:ml-4">
+                                {{ __('Dismiss') }}
+                            </button>
                             @can('access licensing utility')
-                            <a href="{{ cp_route('utilities.licensing') }}" class="text-2xs text-white hover:text-yellow flex items-center" aria-label="{{ __('Manage Licenses') }}">
-                                {{ __('Manage Licenses') }} @rarr
-                            </a>
+                                <a
+                                    href="{{ cp_route('utilities.licensing') }}"
+                                    class="flex items-center text-2xs text-white hover:text-yellow"
+                                    aria-label="{{ __('Manage Licenses') }}"
+                                >
+                                    {{ __('Manage Licenses') }}
+                                    @rarr
+                                </a>
                             @endcan
                         </div>
                     </div>
@@ -60,10 +70,17 @@
                             {{ __('statamic::messages.licensing_production_alert') }}
                         @endif
                         <div class="flex">
-                            <button @click="hideBanner" class="rtl:ml-4 ltr:mr-4 text-2xs opacity-50 hover:opacity-75">{{ __('Dismiss') }}</button>
+                            <button @click="hideBanner" class="text-2xs opacity-50 hover:opacity-75 ltr:mr-4 rtl:ml-4">
+                                {{ __('Dismiss') }}
+                            </button>
                             @can('access licensing utility')
-                                <a href="{{ cp_route('utilities.licensing') }}" class="text-2xs text-white hover:text-yellow flex items-center" aria-label="{{ __('Manage Licenses') }}">
-                                    {{ __('Manage Licenses') }} @rarr
+                                <a
+                                    href="{{ cp_route('utilities.licensing') }}"
+                                    class="flex items-center text-2xs text-white hover:text-yellow"
+                                    aria-label="{{ __('Manage Licenses') }}"
+                                >
+                                    {{ __('Manage Licenses') }}
+                                    @rarr
                                 </a>
                             @endcan
                         </div>
diff --git a/resources/views/partials/nav-main.blade.php b/resources/views/partials/nav-main.blade.php
index bd0fccb3f6..3dff1e1ed2 100644
--- a/resources/views/partials/nav-main.blade.php
+++ b/resources/views/partials/nav-main.blade.php
@@ -1,37 +1,43 @@
-@php use function Statamic\trans as __; @endphp
+@php
+    use function Statamic\trans as __;
+@endphp
 
 @section('nav-main')
-    <nav class="nav-main" v-cloak>
-        <div class="nav-main-inner">
-            @foreach ($nav as $section)
-                @if ($section['display'] !== 'Top Level')
-                    <h6 v-pre>{{ __($section['display']) }}</h6>
-                @endif
-                <ul class="nav-section-{{ Statamic\Support\Str::slug($section['display']) }}">
-                    @foreach ($section['items'] as $item)
-                        @unless ($item->view())
-                            <li class="{{ $item->isActive() ? 'current' : '' }}" v-pre>
-                                <a href="{{ $item->url() }}" {{ $item->attributes() }}>
-                                    <i>{!! $item->svg() !!}</i><span>{{ __($item->name()) }}</span>
-                                </a>
-                                @if ($item->children() && $item->isActive())
-                                    <ul>
-                                        @foreach ($item->children() as $child)
-                                            <li class="{{ $child->isActive() ? 'current' : '' }}">
-                                                <a href="{{ $child->url() }}" {{ $item->attributes() }}>{{ __($child->name()) }}</a>
-                                            </li>
-                                        @endforeach
-                                    </ul>
-                                @endif
-                            </li>
-                        @else
-                            @include($item->view())
-                        @endunless
-                    @endforeach
-                </ul>
-            @endforeach
-        </div>
-    </nav>
+<nav class="nav-main" v-cloak>
+    <div class="nav-main-inner">
+        @foreach ($nav as $section)
+            @if ($section['display'] !== 'Top Level')
+                <h6 v-pre>{{ __($section['display']) }}</h6>
+            @endif
+
+            <ul class="nav-section-{{ Statamic\Support\Str::slug($section['display']) }}">
+                @foreach ($section['items'] as $item)
+                    @unless ($item->view())
+                        <li class="{{ $item->isActive() ? 'current' : '' }}" v-pre>
+                            <a href="{{ $item->url() }}" {{ $item->attributes() }}>
+                                <i>{!! $item->svg() !!}</i>
+                                <span>{{ __($item->name()) }}</span>
+                            </a>
+                            @if ($item->children() && $item->isActive())
+                                <ul>
+                                    @foreach ($item->children() as $child)
+                                        <li class="{{ $child->isActive() ? 'current' : '' }}">
+                                            <a href="{{ $child->url() }}" {{ $item->attributes() }}>
+                                                {{ __($child->name()) }}
+                                            </a>
+                                        </li>
+                                    @endforeach
+                                </ul>
+                            @endif
+                        </li>
+                    @else
+                        @include($item->view())
+                    @endunless
+                @endforeach
+            </ul>
+        @endforeach
+    </div>
+</nav>
 @stop
 
 @yield('nav-main')
diff --git a/resources/views/partials/nav-mobile.blade.php b/resources/views/partials/nav-mobile.blade.php
index f9499cc7f2..33c15947c5 100644
--- a/resources/views/partials/nav-mobile.blade.php
+++ b/resources/views/partials/nav-mobile.blade.php
@@ -1,4 +1,6 @@
-@php use function Statamic\trans as __; @endphp
+@php
+    use function Statamic\trans as __;
+@endphp
 
 <nav class="nav-main nav-mobile" v-cloak>
     <div class="nav-main-inner">
@@ -6,12 +8,14 @@
             @if ($section['display'] !== 'Top Level')
                 <h6 v-pre>{{ __($section['display']) }}</h6>
             @endif
+
             <ul>
                 @foreach ($section['items'] as $item)
                     @unless ($item->view())
                         <li class="{{ $item->isActive() ? 'current' : '' }}" v-pre>
                             <a href="{{ $item->url() }}">
-                                <i>{!! $item->svg() !!}</i><span>{{ __($item->name()) }}</span>
+                                <i>{!! $item->svg() !!}</i>
+                                <span>{{ __($item->name()) }}</span>
                             </a>
                             @if ($item->children() && $item->isActive())
                                 <ul>
diff --git a/resources/views/partials/outside-logo.blade.php b/resources/views/partials/outside-logo.blade.php
index 35f12a8438..80da457ac8 100644
--- a/resources/views/partials/outside-logo.blade.php
+++ b/resources/views/partials/outside-logo.blade.php
@@ -1,9 +1,17 @@
-<div class="logo pt-20 relative z-10">
+<div class="logo relative z-10 pt-20">
     @if ($customLogo)
-        <img src="{{ $customLogo }}" alt="{{ config('statamic.cp.custom_cms_name') }}" class="white-label-logo dark:hidden">
-        <img src="{{ $customDarkLogo }}" alt="{{ config('statamic.cp.custom_cms_name') }}" class="white-label-logo hidden dark:block">
+        <img
+            src="{{ $customLogo }}"
+            alt="{{ config('statamic.cp.custom_cms_name') }}"
+            class="white-label-logo dark:hidden"
+        />
+        <img
+            src="{{ $customDarkLogo }}"
+            alt="{{ config('statamic.cp.custom_cms_name') }}"
+            class="white-label-logo hidden dark:block"
+        />
     @elseif ($customLogoText)
-        <div class="max-w-xs mx-auto mb-8 text-lg font-medium text-center opacity-50">{{ $customLogoText }}</div>
+        <div class="mx-auto mb-8 max-w-xs text-center text-lg font-medium opacity-50">{{ $customLogoText }}</div>
     @else
         @cp_svg('statamic-wordmark')
     @endif
diff --git a/resources/views/partials/scripts.blade.php b/resources/views/partials/scripts.blade.php
index 7183e21201..098d1fdf51 100644
--- a/resources/views/partials/scripts.blade.php
+++ b/resources/views/partials/scripts.blade.php
@@ -9,20 +9,32 @@
 @endforeach
 
 @foreach (Statamic::availableVites(request()) as $package => $vite)
-    {{ \Illuminate\Support\Facades\Vite::useHotFile($vite['hotFile'])
-           ->useBuildDirectory($vite['buildDirectory'])
-           ->withEntryPoints($vite['input']) }}
+    {{
+        \Illuminate\Support\Facades\Vite::useHotFile($vite['hotFile'])
+            ->useBuildDirectory($vite['buildDirectory'])
+            ->withEntryPoints($vite['input'])
+    }}
 @endforeach
 
 @foreach (Statamic::availableInlineScripts(request()) as $script)
-    <script>{!! $script !!}</script>
+    <script>
+        {!! $script !!};
+    </script>
 @endforeach
 
 <script>
-var StatamicConfig = {!! json_encode(array_merge(Statamic::jsonVariables(request()), [
-    'wrapperClass' => $__env->getSection('wrapper_class', 'max-w-xl')
-])) !!}
+    var StatamicConfig =
+        {!!
+            json_encode(
+                array_merge(Statamic::jsonVariables(request()), [
+                    'wrapperClass' => $__env->getSection('wrapper_class', 'max-w-xl'),
+                ]),
+            )
+        !!};
 </script>
 
 {{-- Deferred to allow Vite modules to load first --}}
-<script src="data:text/javascript;base64,{{ base64_encode('Statamic.config(StatamicConfig); Statamic.start()') }}" defer></script>
+<script
+    src="data:text/javascript;base64,{{ base64_encode('Statamic.config(StatamicConfig); Statamic.start()') }}"
+    defer
+></script>
diff --git a/resources/views/playground.blade.php b/resources/views/playground.blade.php
index 2a61479cd3..f8028e63f4 100644
--- a/resources/views/playground.blade.php
+++ b/resources/views/playground.blade.php
@@ -1,302 +1,313 @@
-@php use function Statamic\trans as __; @endphp
+@php
+    use function Statamic\trans as __;
+@endphp
 
 @extends('statamic::layout')
 @section('wrapper_class', 'max-w-7xl')
 
 @section('nontent')
 
-    <collection-wizard
-        :steps="['Naming', 'Ordering', 'Behavior', 'Content Model', 'Front-End']">
-    </collection-wizard>
+<collection-wizard :steps="['Naming', 'Ordering', 'Behavior', 'Content Model', 'Front-End']"></collection-wizard>
 
 @stop
 
 @section('content')
 
-    <div class="flex mb-10">
-        <h1>{{ __('The Statamic Playground') }}</h1>
-    </div>
+<div class="mb-10 flex">
+    <h1>{{ __('The Statamic Playground') }}</h1>
+</div>
 
-    <h2 class="mb-2">
-        Form Inputs
-    </h2>
+<h2 class="mb-2">Form Inputs</h2>
 
-    <div class="shadow bg-white p-8 rounded-lg mb-16">
-        <div class="mb-4">
-            <input type="text" placeholder="unstyled">
-        </div>
-        <div class="mb-4 flex">
-            <input type="text" class="input-text" placeholder="v3 style">
-            <select class="rtl:mr-2 ltr:ml-2" name="" id="">
+<div class="mb-16 rounded-lg bg-white p-8 shadow">
+    <div class="mb-4">
+        <input type="text" placeholder="unstyled" />
+    </div>
+    <div class="mb-4 flex">
+        <input type="text" class="input-text" placeholder="v3 style" />
+        <select class="ltr:ml-2 rtl:mr-2" name="" id="">
+            <option value="">Oh hai Mark</option>
+        </select>
+    </div>
+    <div class="mb-4 flex">
+        <input type="text" class="input-text" placeholder="v3 style" />
+        <button class="btn ltr:ml-2 rtl:mr-2">Default Button</button>
+        <button class="btn-primary ltr:ml-2 rtl:mr-2">Primary Button</button>
+    </div>
+    <div class="mb-4">
+        <textarea name="" class="input-text" placeholder="v3 style"></textarea>
+    </div>
+    <div class="mb-4">
+        <div class="select-input-container w-64">
+            <select class="select-input">
                 <option value="">Oh hai Mark</option>
+                <option value="">I did not do it i did not</option>
             </select>
-        </div>
-        <div class="mb-4 flex">
-            <input type="text" class="input-text" placeholder="v3 style">
-            <button class="btn rtl:mr-2 ltr:ml-2">Default Button</button>
-            <button class="btn-primary rtl:mr-2 ltr:ml-2">Primary Button</button>
-        </div>
-        <div class="mb-4">
-            <textarea name="" class="input-text" placeholder="v3 style"></textarea>
-        </div>
-        <div class="mb-4">
-            <div class="select-input-container w-64">
-                <select class="select-input">
-                    <option value="">Oh hai Mark</option>
-                    <option value="">I did not do it i did not</option>
-                </select>
-                <div class="select-input-toggle">
-                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"/></svg>
-                 </div>
+            <div class="select-input-toggle">
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
+                    <path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z" />
+                </svg>
             </div>
         </div>
-        <div class="mb-4">
-            <v-select :multiple="true" :options="['Nintendo 64', 'Super Nintendo', 'Nintendo Gameboy', 'Sega Genesis', 'Sega Game Gear', 'Atari 2600']"></v-select>
-        </div>
     </div>
-
-    <h2 class="mb-2">Typography</h2>
-    <div class="shadow bg-white p-8 rounded-lg overflow-hidden mb-16">
-        <h1 class="mb-4">This is first level heading</h1>
-        <h2 class="mb-4">This is a second level heading</h2>
-        <h3 class="mb-4">This is a third level heading</h3>
-        <h4 class="mb-4">This is a fourth level heading</h4>
-        <h5 class="mb-4">This is a fifth level heading</h5>
-        <h6 class="mb-4">This is a sixth level heading</h6>
-        <p>Paragraph text. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam error tempore veritatis, laborum, et assumenda? Necessitatibus excepturi enim quidem maxime! Temporibus dolorum fugit aspernatur.
+    <div class="mb-4">
+        <v-select
+            :multiple="true"
+            :options="['Nintendo 64', 'Super Nintendo', 'Nintendo Gameboy', 'Sega Genesis', 'Sega Game Gear', 'Atari 2600']"
+        ></v-select>
     </div>
+</div>
+
+<h2 class="mb-2">Typography</h2>
+<div class="mb-16 overflow-hidden rounded-lg bg-white p-8 shadow">
+    <h1 class="mb-4">This is first level heading</h1>
+    <h2 class="mb-4">This is a second level heading</h2>
+    <h3 class="mb-4">This is a third level heading</h3>
+    <h4 class="mb-4">This is a fourth level heading</h4>
+    <h5 class="mb-4">This is a fifth level heading</h5>
+    <h6 class="mb-4">This is a sixth level heading</h6>
+    <p>
+        Paragraph text. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam error tempore veritatis, laborum,
+        et assumenda? Necessitatibus excepturi enim quidem maxime! Temporibus dolorum fugit aspernatur.
+    </p>
+</div>
 
-    <h2 class="mb-2">Buttons</h2>
-    <div class="shadow bg-white p-8 rounded-lg mb-16">
-        <h6 class="mb-4">Flavors</h6>
-        <div class="mb-8 flex">
-            <button class="rtl:ml-4 ltr:mr-4 btn">Default Button</button>
-            <button class="rtl:ml-4 ltr:mr-4 btn-primary">Primary Button</button>
-            <button class="rtl:ml-4 ltr:mr-4 btn-danger">Danger Button</button>
-            <button class="btn-flat">Flat Button</button>
+<h2 class="mb-2">Buttons</h2>
+<div class="mb-16 rounded-lg bg-white p-8 shadow">
+    <h6 class="mb-4">Flavors</h6>
+    <div class="mb-8 flex">
+        <button class="btn ltr:mr-4 rtl:ml-4">Default Button</button>
+        <button class="btn-primary ltr:mr-4 rtl:ml-4">Primary Button</button>
+        <button class="btn-danger ltr:mr-4 rtl:ml-4">Danger Button</button>
+        <button class="btn-flat">Flat Button</button>
+    </div>
+    <h6 class="mb-4">With Dropdowns</h6>
+    <div class="mb-8 flex">
+        <div class="btn-group ltr:mr-4 rtl:ml-4">
+            <button class="btn">Default Button</button>
+            <dropdown-list>
+                <template v-slot:trigger>
+                    <button class="btn">
+                        <svg-icon name="micro/chevron-down-xs" class="w-2" />
+                    </button>
+                </template>
+                <li>
+                    <dropdown-item text="Item 1" redirect="https://example.com"></dropdown-item>
+                    <dropdown-item text="Item 2" redirect="https://example2.com"></dropdown-item>
+                </li>
+            </dropdown-list>
         </div>
-        <h6 class="mb-4">With Dropdowns</h6>
-        <div class="mb-8 flex">
-            <div class="btn-group rtl:ml-4 ltr:mr-4">
-                <button class="btn">Default Button</button>
-                <dropdown-list>
-                    <template v-slot:trigger>
-                        <button class="btn">
-                            <svg-icon name="micro/chevron-down-xs" class="w-2" />
-                        </button>
-                    </template>
-                    <li>
-                        <dropdown-item text="Item 1" redirect="https://example.com"></dropdown-item>
-                        <dropdown-item text="Item 2" redirect="https://example2.com"></dropdown-item>
-                    </li>
-                </dropdown-list>
-            </div>
-            <div class="btn-group rtl:ml-4 ltr:mr-4">
-                <button class="btn-primary">Default Button</button>
-                <dropdown-list>
-                    <template v-slot:trigger>
-                        <button class="btn-primary">
-                            <svg-icon name="micro/chevron-down-xs" class="w-2" />
-                        </button>
-                    </template>
-                    <li>
-                        <dropdown-item text="Item 1" redirect="https://example.com"></dropdown-item>
-                        <dropdown-item text="Item 2" redirect="https://example2.com"></dropdown-item>
-                    </li>
-                </dropdown-list>
-            </div>
-            <div class="btn-group rtl:ml-4 ltr:mr-4">
-                <button class="btn-danger">Default Button</button>
-                <dropdown-list>
-                    <template v-slot:trigger>
-                        <button class="btn-danger">
-                            <svg-icon name="micro/chevron-down-xs" class="w-2" />
-                        </button>
-                    </template>
-                    <li>
-                        <dropdown-item text="Item 1" redirect="https://example.com"></dropdown-item>
-                        <dropdown-item text="Item 2" redirect="https://example2.com"></dropdown-item>
-                    </li>
-                </dropdown-list>
-            </div>
-            <div class="btn-group rtl:ml-4 ltr:mr-4">
-                <button class="btn-flat">Default Button</button>
-                <dropdown-list>
-                    <template v-slot:trigger>
-                        <button class="btn-flat">
-                            <svg-icon name="micro/chevron-down-xs" class="w-2" />
-                        </button>
-                    </template>
-                    <li>
-                        <dropdown-item text="Item 1" redirect="https://example.com"></dropdown-item>
-                        <dropdown-item text="Item 2" redirect="https://example2.com"></dropdown-item>
-                    </li>
-                </dropdown-list>
-            </div>
+        <div class="btn-group ltr:mr-4 rtl:ml-4">
+            <button class="btn-primary">Default Button</button>
+            <dropdown-list>
+                <template v-slot:trigger>
+                    <button class="btn-primary">
+                        <svg-icon name="micro/chevron-down-xs" class="w-2" />
+                    </button>
+                </template>
+                <li>
+                    <dropdown-item text="Item 1" redirect="https://example.com"></dropdown-item>
+                    <dropdown-item text="Item 2" redirect="https://example2.com"></dropdown-item>
+                </li>
+            </dropdown-list>
         </div>
-        <h6 class="mb-4">Disabled States</h6>
-        <div class="mb-8 flex">
-            <button disabled class="rtl:ml-4 ltr:mr-4 btn disabled">Default Button</button>
-            <button disabled class="rtl:ml-4 ltr:mr-4 btn-primary disabled">Primary Button</button>
-            <button disabled class="rtl:ml-4 ltr:mr-4 btn-danger disabled">Danger Button</button>
-            <button disabled class="btn-flat disabled">Flat Button</button>
+        <div class="btn-group ltr:mr-4 rtl:ml-4">
+            <button class="btn-danger">Default Button</button>
+            <dropdown-list>
+                <template v-slot:trigger>
+                    <button class="btn-danger">
+                        <svg-icon name="micro/chevron-down-xs" class="w-2" />
+                    </button>
+                </template>
+                <li>
+                    <dropdown-item text="Item 1" redirect="https://example.com"></dropdown-item>
+                    <dropdown-item text="Item 2" redirect="https://example2.com"></dropdown-item>
+                </li>
+            </dropdown-list>
         </div>
-
-        <h6 class="mb-4">Large</h6>
-        <div class="mb-8 flex">
-            <button class="rtl:ml-4 ltr:mr-4 btn btn-lg">Default Button</button>
-            <button class="rtl:ml-4 ltr:mr-4 btn-primary btn-lg">Primary Button</button>
-            <button class="rtl:ml-4 ltr:mr-4 btn-danger btn-lg">Danger Button</button>
-            <button class="btn-flat btn-lg">Flat Button</button>
+        <div class="btn-group ltr:mr-4 rtl:ml-4">
+            <button class="btn-flat">Default Button</button>
+            <dropdown-list>
+                <template v-slot:trigger>
+                    <button class="btn-flat">
+                        <svg-icon name="micro/chevron-down-xs" class="w-2" />
+                    </button>
+                </template>
+                <li>
+                    <dropdown-item text="Item 1" redirect="https://example.com"></dropdown-item>
+                    <dropdown-item text="Item 2" redirect="https://example2.com"></dropdown-item>
+                </li>
+            </dropdown-list>
         </div>
+    </div>
+    <h6 class="mb-4">Disabled States</h6>
+    <div class="mb-8 flex">
+        <button disabled class="btn disabled ltr:mr-4 rtl:ml-4">Default Button</button>
+        <button disabled class="btn-primary disabled ltr:mr-4 rtl:ml-4">Primary Button</button>
+        <button disabled class="btn-danger disabled ltr:mr-4 rtl:ml-4">Danger Button</button>
+        <button disabled class="btn-flat disabled">Flat Button</button>
+    </div>
 
-        <h6 class="mb-4">Small</h6>
-        <div class="flex">
-            <button class="rtl:ml-4 ltr:mr-4 btn btn-xs">Default Button</button>
-            <button class="rtl:ml-4 ltr:mr-4 btn-primary btn-xs">Primary Button</button>
-            <button class="rtl:ml-4 ltr:mr-4 btn-danger btn-xs">Danger Button</button>
-            <button class="btn-flat btn-xs">Flat Button</button>
-        </div>
+    <h6 class="mb-4">Large</h6>
+    <div class="mb-8 flex">
+        <button class="btn btn-lg ltr:mr-4 rtl:ml-4">Default Button</button>
+        <button class="btn-primary btn-lg ltr:mr-4 rtl:ml-4">Primary Button</button>
+        <button class="btn-danger btn-lg ltr:mr-4 rtl:ml-4">Danger Button</button>
+        <button class="btn-flat btn-lg">Flat Button</button>
     </div>
 
-    <h2 class="mb-2">Colors</h2>
-    <div class="bg-white dark:bg-black p-10 shadow rounded-lg overflow-hidden mb-16">
+    <h6 class="mb-4">Small</h6>
+    <div class="flex">
+        <button class="btn btn-xs ltr:mr-4 rtl:ml-4">Default Button</button>
+        <button class="btn-primary btn-xs ltr:mr-4 rtl:ml-4">Primary Button</button>
+        <button class="btn-danger btn-xs ltr:mr-4 rtl:ml-4">Danger Button</button>
+        <button class="btn-flat btn-xs">Flat Button</button>
+    </div>
+</div>
 
-        <h6 class="mb-4">grays</h6>
-        {{-- <div class="p-4" style="background: #48606f"></div> --}}
-        <div class="flex flex-row-reverse text-sm text-center mb-8">
-            <div class="text-black bg-blue-100 p-4 flex-1">100</div>
-            <div class="text-black bg-blue-200 p-4 flex-1">200</div>
-            <div class="text-black bg-blue-300 p-4 flex-1">300</div>
-            <div class="text-black bg-blue-400 p-4 flex-1">400</div>
-            <div class="text-black bg-blue p-4 flex-1">def</div>
-            <div class="text-black bg-blue-500 p-4 flex-1">500</div>
-            <div class="text-black bg-blue-600 p-4 flex-1">600</div>
-            <div class="text-black bg-blue-700 p-4 flex-1">700</div>
-            <div class="text-white bg-blue-800 p-4 flex-1">800</div>
-            <div class="text-white bg-blue-900 p-4 flex-1">900</div>
-        </div>
-        <div class="flex flex-row-reverse text-sm text-center mb-8">
-            <div class="text-black bg-white p-4 flex-1">White</div>
-            <div class="text-black bg-gray-100 p-4 flex-1">100</div>
-            <div class="text-black bg-gray-200 p-4 flex-1">200</div>
-            <div class="text-black bg-gray-300 p-4 flex-1">300</div>
-            <div class="text-black bg-gray-400 p-4 flex-1">400</div>
-            <div class="text-black bg-gray-500 p-4 flex-1">500</div>
-            <div class="text-black bg-gray-600 p-4 flex-1">600</div>
-            <div class="text-black bg-gray-700 p-4 flex-1">700</div>
-            <div class="text-white bg-gray-800 p-4 flex-1">800</div>
-            <div class="text-white bg-gray-900 p-4 flex-1">900</div>
-            {{-- <div class="text-white bg-gray-950 p-4 flex-1">950</div> --}}
-            <div class="text-white bg-black p-4 flex-1">Black</div>
-        </div>
+<h2 class="mb-2">Colors</h2>
+<div class="mb-16 overflow-hidden rounded-lg bg-white p-10 shadow dark:bg-black">
+    <h6 class="mb-4">grays</h6>
+    {{-- <div class="p-4" style="background: #48606f"></div> --}}
+    <div class="mb-8 flex flex-row-reverse text-center text-sm">
+        <div class="flex-1 bg-blue-100 p-4 text-black">100</div>
+        <div class="flex-1 bg-blue-200 p-4 text-black">200</div>
+        <div class="flex-1 bg-blue-300 p-4 text-black">300</div>
+        <div class="flex-1 bg-blue-400 p-4 text-black">400</div>
+        <div class="flex-1 bg-blue p-4 text-black">def</div>
+        <div class="flex-1 bg-blue-500 p-4 text-black">500</div>
+        <div class="flex-1 bg-blue-600 p-4 text-black">600</div>
+        <div class="flex-1 bg-blue-700 p-4 text-black">700</div>
+        <div class="flex-1 bg-blue-800 p-4 text-white">800</div>
+        <div class="flex-1 bg-blue-900 p-4 text-white">900</div>
+    </div>
+    <div class="mb-8 flex flex-row-reverse text-center text-sm">
+        <div class="flex-1 bg-white p-4 text-black">White</div>
+        <div class="flex-1 bg-gray-100 p-4 text-black">100</div>
+        <div class="flex-1 bg-gray-200 p-4 text-black">200</div>
+        <div class="flex-1 bg-gray-300 p-4 text-black">300</div>
+        <div class="flex-1 bg-gray-400 p-4 text-black">400</div>
+        <div class="flex-1 bg-gray-500 p-4 text-black">500</div>
+        <div class="flex-1 bg-gray-600 p-4 text-black">600</div>
+        <div class="flex-1 bg-gray-700 p-4 text-black">700</div>
+        <div class="flex-1 bg-gray-800 p-4 text-white">800</div>
+        <div class="flex-1 bg-gray-900 p-4 text-white">900</div>
+        {{-- <div class="text-white bg-gray-950 p-4 flex-1">950</div> --}}
+        <div class="flex-1 bg-black p-4 text-white">Black</div>
+    </div>
 
-        <div class="flex flex-row-reverse text-sm text-center mb-8">
-            <div class="text-black bg-white p-4 flex-1">White</div>
-            <div class="text-black bg-slate-100 p-4 flex-1">100</div>
-            <div class="text-black bg-slate-200 p-4 flex-1">200</div>
-            <div class="text-black bg-slate-300 p-4 flex-1">300</div>
-            <div class="text-black bg-slate-400 p-4 flex-1">400</div>
-            <div class="text-black bg-slate-500 p-4 flex-1">500</div>
-            <div class="text-black bg-slate-600 p-4 flex-1">600</div>
-            <div class="text-black bg-slate-700 p-4 flex-1">700</div>
-            <div class="text-white bg-slate-800 p-4 flex-1">800</div>
-            <div class="text-white bg-slate-900 p-4 flex-1">900</div>
-            <div class="text-white bg-black p-4 flex-1">Black</div>
-        </div>
+    <div class="mb-8 flex flex-row-reverse text-center text-sm">
+        <div class="flex-1 bg-white p-4 text-black">White</div>
+        <div class="bg-slate-100 flex-1 p-4 text-black">100</div>
+        <div class="bg-slate-200 flex-1 p-4 text-black">200</div>
+        <div class="bg-slate-300 flex-1 p-4 text-black">300</div>
+        <div class="bg-slate-400 flex-1 p-4 text-black">400</div>
+        <div class="bg-slate-500 flex-1 p-4 text-black">500</div>
+        <div class="bg-slate-600 flex-1 p-4 text-black">600</div>
+        <div class="bg-slate-700 flex-1 p-4 text-black">700</div>
+        <div class="bg-slate-800 flex-1 p-4 text-white">800</div>
+        <div class="bg-slate-900 flex-1 p-4 text-white">900</div>
+        <div class="flex-1 bg-black p-4 text-white">Black</div>
+    </div>
 
-         <h6 class="mb-4">dark mode</h6>
-        <div class="flex flex-row-reverse overflow-x-auto text-sm text-center mb-8">
-            <div class="text-black bg-white p-4 flex-1">White</div>
-            <div class="text-black bg-dark-100 p-4 flex-1">100</div>
-            <div class="text-black bg-dark-150 p-4 flex-1">150</div>
-            <div class="text-black bg-dark-175 p-4 flex-1">175</div>
-            <div class="text-black bg-dark-200 p-4 flex-1">200</div>
-            <div class="text-black bg-dark-250 p-4 flex-1">250</div>
-            <div class="text-black bg-dark-275 p-4 flex-1">275</div>
-            <div class="text-black bg-dark-300 p-4 flex-1">300</div>
-            <div class="text-black bg-dark-350 p-4 flex-1">350</div>
-            <div class="text-black bg-dark-400 p-4 flex-1">400</div>
-            <div class="text-black bg-dark-500 p-4 flex-1">500</div>
-            <div class="text-black bg-dark-550 p-4 flex-1">550</div>
-            <div class="text-black bg-dark-575 p-4 flex-1">575</div>
-            <div class="text-black bg-dark-600 p-4 flex-1">600</div>
-            <div class="text-black bg-dark-650 p-4 flex-1">650</div>
-            <div class="text-black bg-dark-700 p-4 flex-1">700</div>
-            <div class="text-black bg-dark-750 p-4 flex-1">750</div>
-            <div class="text-white bg-dark-800 p-4 flex-1">800</div>
-            <div class="text-white bg-dark-900 p-4 flex-1">900</div>
-            <div class="text-white bg-dark-950 p-4 flex-1">950</div>
-            <div class="text-white bg-dark-975 p-4 flex-1">975</div>
-            <div class="text-white bg-black p-4 flex-1">Black</div>
-        </div>
+    <h6 class="mb-4">dark mode</h6>
+    <div class="mb-8 flex flex-row-reverse overflow-x-auto text-center text-sm">
+        <div class="flex-1 bg-white p-4 text-black">White</div>
+        <div class="flex-1 bg-dark-100 p-4 text-black">100</div>
+        <div class="flex-1 bg-dark-150 p-4 text-black">150</div>
+        <div class="flex-1 bg-dark-175 p-4 text-black">175</div>
+        <div class="flex-1 bg-dark-200 p-4 text-black">200</div>
+        <div class="flex-1 bg-dark-250 p-4 text-black">250</div>
+        <div class="flex-1 bg-dark-275 p-4 text-black">275</div>
+        <div class="flex-1 bg-dark-300 p-4 text-black">300</div>
+        <div class="flex-1 bg-dark-350 p-4 text-black">350</div>
+        <div class="flex-1 bg-dark-400 p-4 text-black">400</div>
+        <div class="flex-1 bg-dark-500 p-4 text-black">500</div>
+        <div class="flex-1 bg-dark-550 p-4 text-black">550</div>
+        <div class="flex-1 bg-dark-575 p-4 text-black">575</div>
+        <div class="flex-1 bg-dark-600 p-4 text-black">600</div>
+        <div class="flex-1 bg-dark-650 p-4 text-black">650</div>
+        <div class="flex-1 bg-dark-700 p-4 text-black">700</div>
+        <div class="flex-1 bg-dark-750 p-4 text-black">750</div>
+        <div class="flex-1 bg-dark-800 p-4 text-white">800</div>
+        <div class="flex-1 bg-dark-900 p-4 text-white">900</div>
+        <div class="flex-1 bg-dark-950 p-4 text-white">950</div>
+        <div class="flex-1 bg-dark-975 p-4 text-white">975</div>
+        <div class="flex-1 bg-black p-4 text-white">Black</div>
+    </div>
 
-        <h6 class="mb-4">Other Colors (needs simplifying)</h6>
-        <div class="flex text-sm text-center">
-            <div class="text-black bg-blue p-6 flex-1">Blue</div>
-            <div class="text-black bg-green-600 p-6 flex-1">Green</div>
-            <div class="text-black bg-orange-light border border-orange p-6 m-1 flex-1">Orange</div>
-            <div class="text-black bg-yellow border border-yellow-dark p-6 m-1 flex-1">Yellow</div>
-            <div class="text-black bg-yellow-dark p-6 m-1 flex-1">Yellow Dark</div>
-            <div class="text-black bg-pink border border-pink-dark m-1 p-6 flex-1">Pink</div>
-            <div class="text-black bg-purple-light border border-purple p-6 flex-1">Purple</div>
-        </div>
+    <h6 class="mb-4">Other Colors (needs simplifying)</h6>
+    <div class="flex text-center text-sm">
+        <div class="flex-1 bg-blue p-6 text-black">Blue</div>
+        <div class="flex-1 bg-green-600 p-6 text-black">Green</div>
+        <div class="m-1 flex-1 border border-orange bg-orange-light p-6 text-black">Orange</div>
+        <div class="m-1 flex-1 border border-yellow-dark bg-yellow p-6 text-black">Yellow</div>
+        <div class="m-1 flex-1 bg-yellow-dark p-6 text-black">Yellow Dark</div>
+        <div class="m-1 flex-1 border border-pink-dark bg-pink p-6 text-black">Pink</div>
+        <div class="flex-1 border border-purple bg-purple-light p-6 text-black">Purple</div>
+    </div>
 
-        <h6 class="my-4">Reds</h6>
-        <div class="flex text-sm text-center space-x-1 rtl:space-x-reverse">
-            <div class="text-black bg-red-100 border border-red-200 p-6 flex-1">Red Lighter</div>
-            <div class="text-black bg-red-400 p-6 flex-1">Red Light</div>
-            <div class="text-black bg-red-500 p-6 flex-1">Red</div>
-            <div class="text-black bg-red-700 p-6 flex-1">Red Dark</div>
-        </div>
+    <h6 class="my-4">Reds</h6>
+    <div class="flex space-x-1 text-center text-sm rtl:space-x-reverse">
+        <div class="flex-1 border border-red-200 bg-red-100 p-6 text-black">Red Lighter</div>
+        <div class="flex-1 bg-red-400 p-6 text-black">Red Light</div>
+        <div class="flex-1 bg-red-500 p-6 text-black">Red</div>
+        <div class="flex-1 bg-red-700 p-6 text-black">Red Dark</div>
     </div>
+</div>
 
-    <h2 class="mb-2">Widgets</h2>
-    <div class="flex flex-wrap -mx-4 mb-8">
-        <div class="w-1/3 px-4">
-            <div class="card px-6">
-                <div class="flex justify-between items-center mb-4">
-                    <h3 class="font-bold text-gray">New Users</h3>
-                    <select class="text-xs" name="" id="">
-                        <option value="">30 Days</option>
-                    </select>
-                </div>
-                <div class="text-4xl mb-4">89</div>
-                <div class="flex items-center ">
-                    <span class="w-4 h-4 text-green-500 rtl:ml-2 ltr:mr-2">@cp_svg('icons/light/performance-increase')</span>
-                    <span class="leading-none text-sm">8.54% Increase</span>
-                </div>
+<h2 class="mb-2">Widgets</h2>
+<div class="-mx-4 mb-8 flex flex-wrap">
+    <div class="w-1/3 px-4">
+        <div class="card px-6">
+            <div class="mb-4 flex items-center justify-between">
+                <h3 class="font-bold text-gray">New Users</h3>
+                <select class="text-xs" name="" id="">
+                    <option value="">30 Days</option>
+                </select>
+            </div>
+            <div class="mb-4 text-4xl">89</div>
+            <div class="flex items-center">
+                <span class="h-4 w-4 text-green-500 ltr:mr-2 rtl:ml-2">
+                    @cp_svg('icons/light/performance-increase')
+                </span>
+                <span class="text-sm leading-none">8.54% Increase</span>
             </div>
         </div>
-        <div class="w-1/3 px-4">
-            <div class="card px-6">
-                <div class="flex justify-between items-center mb-4">
-                    <h3 class="font-bold text-gray">Form Submissions</h3>
-                    <select class="text-xs" name="" id="">
-                        <option value="">7 Days</option>
-                    </select>
-                </div>
-                <div class="text-4xl mb-4">35</div>
-                <div class="flex items-center ">
-                    <span class="w-4 h-4 text-green-500 rtl:ml-2 ltr:mr-2">@cp_svg('icons/light/performance-increase')</span>
-                    <span class="leading-none text-sm">2.15% Increase</span>
-                </div>
+    </div>
+    <div class="w-1/3 px-4">
+        <div class="card px-6">
+            <div class="mb-4 flex items-center justify-between">
+                <h3 class="font-bold text-gray">Form Submissions</h3>
+                <select class="text-xs" name="" id="">
+                    <option value="">7 Days</option>
+                </select>
+            </div>
+            <div class="mb-4 text-4xl">35</div>
+            <div class="flex items-center">
+                <span class="h-4 w-4 text-green-500 ltr:mr-2 rtl:ml-2">
+                    @cp_svg('icons/light/performance-increase')
+                </span>
+                <span class="text-sm leading-none">2.15% Increase</span>
             </div>
         </div>
-        <div class="w-1/3 px-4">
-            <div class="card bg-gray-900 px-6">
-                <div class="flex justify-between items-center mb-4">
-                    <h3 class="font-bold text-gray-400">New Users</h3>
-                    <select class="text-xs" name="" id="" class="bg-gray-800 border-gray-800 text-gray-400">
-                        <option value="">30 Days</option>
-                    </select>
-                </div>
-                <div class="text-4xl mb-4 text-gray-400">251</div>
-                <div class="flex items-center ">
-                    <span class="w-4 h-4 text-green-500 rtl:ml-2 ltr:mr-2">@cp_svg('icons/light/performance-increase')</span>
-                    <span class="leading-none text-gray-400 text-sm">8.54% Increase</span>
-                </div>
+    </div>
+    <div class="w-1/3 px-4">
+        <div class="card bg-gray-900 px-6">
+            <div class="mb-4 flex items-center justify-between">
+                <h3 class="font-bold text-gray-400">New Users</h3>
+                <select class="text-xs" name="" id="" class="border-gray-800 bg-gray-800 text-gray-400">
+                    <option value="">30 Days</option>
+                </select>
+            </div>
+            <div class="mb-4 text-4xl text-gray-400">251</div>
+            <div class="flex items-center">
+                <span class="h-4 w-4 text-green-500 ltr:mr-2 rtl:ml-2">
+                    @cp_svg('icons/light/performance-increase')
+                </span>
+                <span class="text-sm leading-none text-gray-400">8.54% Increase</span>
             </div>
         </div>
     </div>
+</div>
 @stop
diff --git a/resources/views/preferences/edit.blade.php b/resources/views/preferences/edit.blade.php
index da5458509b..a2f871649b 100644
--- a/resources/views/preferences/edit.blade.php
+++ b/resources/views/preferences/edit.blade.php
@@ -1,24 +1,29 @@
-@php use function Statamic\trans as __; @endphp
+@php
+    use function Statamic\trans as __;
+@endphp
 
 @extends('statamic::layout')
 @section('title', $title)
 
 @section('content')
 
-    @if($showBreadcrumb)
-        @include('statamic::partials.breadcrumb', [
+@if ($showBreadcrumb)
+    @include(
+        'statamic::partials.breadcrumb',
+        [
             'url' => cp_route('preferences.index'),
             'title' => __('Preferences'),
-        ])
-    @endif
+        ]
+    )
+@endif
 
-    <preferences-edit-form
-        title="{{ $title }}"
-        :blueprint="{{ Js::from($blueprint) }}"
-        :meta="{{ Js::from($meta) }}"
-        :values="{{ Js::from($values) }}"
-        action="{{ $actionUrl }}"
-        :save-as-options="{{ json_encode($saveAsOptions) }}"
-    ></preferences-edit-form>
+<preferences-edit-form
+    title="{{ $title }}"
+    :blueprint="{{ Js::from($blueprint) }}"
+    :meta="{{ Js::from($meta) }}"
+    :values="{{ Js::from($values) }}"
+    action="{{ $actionUrl }}"
+    :save-as-options="{{ json_encode($saveAsOptions) }}"
+></preferences-edit-form>
 
 @stop
diff --git a/resources/views/preferences/index.blade.php b/resources/views/preferences/index.blade.php
index 7c7ba41336..de317cddb0 100644
--- a/resources/views/preferences/index.blade.php
+++ b/resources/views/preferences/index.blade.php
@@ -1,25 +1,26 @@
-@php use function Statamic\trans as __; @endphp
+@php
+    use function Statamic\trans as __;
+@endphp
 
 @extends('statamic::layout')
 @section('title', __('Preferences'))
 
 @section('content')
-
-    <div class="flex justify-between items-center mb-6">
+    <div class="mb-6 flex items-center justify-between">
         <h1>@yield('title')</h1>
     </div>
 
-    <div class="card p-0 mb-4">
+    <div class="card mb-4 p-0">
         <table class="data-table">
             <tr>
                 <td>
                     <div class="flex items-center">
-                        <div class="w-4 h-4 rtl:ml-4 ltr:mr-4">@cp_svg('icons/light/earth')</div>
+                        <div class="h-4 w-4 ltr:mr-4 rtl:ml-4">@cp_svg('icons/light/earth')</div>
                         <a href="{{ cp_route('preferences.default.edit') }}">{{ __('Default') }}</a>
                     </div>
                 </td>
-                <td class="rtl:text-left ltr:text-right text-2xs text-gray-500">
-                    @if (!empty(Statamic\Facades\Preference::default()->all()))
+                <td class="text-2xs text-gray-500 ltr:text-right rtl:text-left">
+                    @if (! empty(Statamic\Facades\Preference::default()->all()))
                         {{ __('Modified') }}
                     @endif
                 </td>
@@ -28,19 +29,21 @@
     </div>
 
     @if (Statamic\Facades\Role::all()->isNotEmpty())
-        <h3 class="little-heading rtl:pr-0 ltr:pl-0 mb-2">{{ __('Override For Role') }}</h3>
-        <div class="card p-0 mb-4">
+        <h3 class="little-heading mb-2 ltr:pl-0 rtl:pr-0">{{ __('Override For Role') }}</h3>
+        <div class="card mb-4 p-0">
             <table class="data-table">
                 @foreach (Statamic\Facades\Role::all() as $role)
                     <tr>
                         <td>
                             <div class="flex items-center">
-                                <div class="w-4 h-4 rtl:ml-4 ltr:mr-4">@cp_svg('icons/light/shield-key')</div>
-                                <a href="{{ cp_route('preferences.role.edit', [$role->handle()]) }}">{{ __($role->title()) }}</a>
+                                <div class="h-4 w-4 ltr:mr-4 rtl:ml-4">@cp_svg('icons/light/shield-key')</div>
+                                <a href="{{ cp_route('preferences.role.edit', [$role->handle()]) }}">
+                                    {{ __($role->title()) }}
+                                </a>
                             </div>
                         </td>
-                        <td class="rtl:text-left ltr:text-right text-2xs text-gray-500">
-                            @if (!empty($role->preferences()))
+                        <td class="text-2xs text-gray-500 ltr:text-right rtl:text-left">
+                            @if (! empty($role->preferences()))
                                 {{ __('Modified') }}
                             @endif
                         </td>
@@ -50,18 +53,18 @@
         </div>
     @endif
 
-    <h3 class="little-heading rtl:pr-0 ltr:pl-0 mb-2">{{ __('Override For User') }}</h3>
-    <div class="card p-0 mb-4">
+    <h3 class="little-heading mb-2 ltr:pl-0 rtl:pr-0">{{ __('Override For User') }}</h3>
+    <div class="card mb-4 p-0">
         <table class="data-table">
             <tr>
                 <td>
                     <div class="flex items-center">
-                        <div class="w-4 h-4 rtl:ml-4 ltr:mr-4">@cp_svg('icons/light/user')</div>
+                        <div class="h-4 w-4 ltr:mr-4 rtl:ml-4">@cp_svg('icons/light/user')</div>
                         <a href="{{ cp_route('preferences.user.edit') }}">{{ __('My Preferences') }}</a>
                     </div>
                 </td>
-                <td class="rtl:text-left ltr:text-right text-2xs text-gray-500">
-                    @if (!empty(Statamic\Facades\User::current()->preferences()))
+                <td class="text-2xs text-gray-500 ltr:text-right rtl:text-left">
+                    @if (! empty(Statamic\Facades\User::current()->preferences()))
                         {{ __('Modified') }}
                     @endif
                 </td>
@@ -69,8 +72,11 @@
         </table>
     </div>
 
-    @include('statamic::partials.docs-callout', [
-        'topic' => __('Preferences'),
-        'url' => Statamic::docsUrl('preferences')
-    ])
+    @include(
+        'statamic::partials.docs-callout',
+        [
+            'topic' => __('Preferences'),
+            'url' => Statamic::docsUrl('preferences'),
+        ]
+    )
 @endsection
diff --git a/resources/views/roles/create.blade.php b/resources/views/roles/create.blade.php
index b07ba247f6..6210e18bc8 100644
--- a/resources/views/roles/create.blade.php
+++ b/resources/views/roles/create.blade.php
@@ -1,10 +1,11 @@
-@php use function Statamic\trans as __; @endphp
+@php
+    use function Statamic\trans as __;
+@endphp
 
 @extends('statamic::layout')
 @section('title', Statamic::crumb(__('Create Role'), __('Roles & Permissions')))
 
 @section('content')
-
     <role-publish-form
         action="{{ cp_route('roles.store') }}"
         method="post"
@@ -14,5 +15,4 @@
         index-url="{{ cp_route('roles.index') }}"
         v-cloak
     ></role-publish-form>
-
 @endsection
diff --git a/resources/views/roles/edit.blade.php b/resources/views/roles/edit.blade.php
index b24b0309fb..e5d165b568 100644
--- a/resources/views/roles/edit.blade.php
+++ b/resources/views/roles/edit.blade.php
@@ -1,10 +1,11 @@
-@php use function Statamic\trans as __; @endphp
+@php
+    use function Statamic\trans as __;
+@endphp
 
 @extends('statamic::layout')
 @section('title', Statamic::crumb(__('Configure Role'), __('Permissions')))
 
 @section('content')
-
     <role-publish-form
         action="{{ cp_route('roles.update', $role->handle()) }}"
         method="patch"
@@ -15,7 +16,5 @@
         :initial-permissions="{{ json_encode($permissions) }}"
         breadcrumb-url="{{ cp_route('roles.index') }}"
         v-cloak
-    >
-    </role-publish-form>
-
+    ></role-publish-form>
 @endsection
diff --git a/resources/views/roles/index.blade.php b/resources/views/roles/index.blade.php
index 937e014613..b4135c3b6c 100644
--- a/resources/views/roles/index.blade.php
+++ b/resources/views/roles/index.blade.php
@@ -1,37 +1,39 @@
-@php use function Statamic\trans as __; @endphp
+@php
+    use function Statamic\trans as __;
+@endphp
 
 @extends('statamic::layout')
 @section('title', __('Roles'))
 
 @section('content')
-
-    @unless($roles->isEmpty())
-
-        <header class="flex items-center justify-between mb-6">
+    @unless ($roles->isEmpty())
+        <header class="mb-6 flex items-center justify-between">
             <h1>{{ __('Roles & Permissions') }}</h1>
             <a href="{{ cp_route('roles.create') }}" class="btn-primary">{{ __('Create Role') }}</a>
         </header>
 
         <role-listing
             :initial-rows="{{ json_encode($roles) }}"
-            :initial-columns="{{ json_encode($columns) }}">
-        </role-listing>
-
+            :initial-columns="{{ json_encode($columns) }}"
+        ></role-listing>
     @else
-
-        @include('statamic::partials.empty-state', [
-            'title' => __('Roles & Permissions'),
-            'description' => __('statamic::messages.role_intro'),
-            'svg' => 'empty/users',
-            'button_text' => __('Create Role'),
-            'button_url' => cp_route('roles.create'),
-        ])
-
+        @include(
+            'statamic::partials.empty-state',
+            [
+                'title' => __('Roles & Permissions'),
+                'description' => __('statamic::messages.role_intro'),
+                'svg' => 'empty/users',
+                'button_text' => __('Create Role'),
+                'button_url' => cp_route('roles.create'),
+            ]
+        )
     @endunless
 
-    @include('statamic::partials.docs-callout', [
-        'topic' => __('Roles & Permissions'),
-        'url' => Statamic::docsUrl('users#permissions')
-    ])
-
+    @include(
+        'statamic::partials.docs-callout',
+        [
+            'topic' => __('Roles & Permissions'),
+            'url' => Statamic::docsUrl('users#permissions'),
+        ]
+    )
 @endsection
diff --git a/resources/views/settings/edit.blade.php b/resources/views/settings/edit.blade.php
index cbafc216b0..1737c32569 100644
--- a/resources/views/settings/edit.blade.php
+++ b/resources/views/settings/edit.blade.php
@@ -1,4 +1,6 @@
-@php use function Statamic\trans as __; @endphp
+@php
+    use function Statamic\trans as __;
+@endphp
 
 @extends('statamic::layout')
 @section('content-class', 'publishing')
@@ -6,19 +8,20 @@
 
 @section('content')
 
-    <script>
-        Statamic.Publish = {
-            contentData: {!! json_encode($content_data) !!},
-            fieldset: {!! json_encode($fieldset) !!},
-        };
-    </script>
+<script>
+    Statamic.Publish = {
+        contentData: {!! json_encode($content_data) !!},
+        fieldset: {!! json_encode($fieldset) !!},
+    };
+</script>
 
-    <publish title="{{ $title }}"
-             extra="{{ json_encode($extra) }}"
-             :is-new="false"
-             slug="{{ $slug }}"
-             content-type="{{ $content_type }}"
-             :update-title-on-save="false"
-    ></publish>
+<publish
+    title="{{ $title }}"
+    extra="{{ json_encode($extra) }}"
+    :is-new="false"
+    slug="{{ $slug }}"
+    content-type="{{ $content_type }}"
+    :update-title-on-save="false"
+></publish>
 
 @stop
diff --git a/resources/views/sites/configure.blade.php b/resources/views/sites/configure.blade.php
index 9886204fc0..9d99d17ff7 100644
--- a/resources/views/sites/configure.blade.php
+++ b/resources/views/sites/configure.blade.php
@@ -1,21 +1,26 @@
-@php use function Statamic\trans as __; @endphp
+@php
+    use function Statamic\trans as __;
+@endphp
 
 @extends('statamic::layout')
 @section('title', __('Configure Sites'))
 
 @section('content')
 
-    <sites-edit-form
-        :blueprint="{{ json_encode($blueprint) }}"
-        :initial-values="{{ json_encode($values) }}"
-        :meta="{{ json_encode($meta) }}"
-        url="{{ cp_route('sites.update') }}"
-        class="-mb-8"
-    ></sites-edit-form>
+<sites-edit-form
+    :blueprint="{{ json_encode($blueprint) }}"
+    :initial-values="{{ json_encode($values) }}"
+    :meta="{{ json_encode($meta) }}"
+    url="{{ cp_route('sites.update') }}"
+    class="-mb-8"
+></sites-edit-form>
 
-    @include('statamic::partials.docs-callout', [
+@include(
+    'statamic::partials.docs-callout',
+    [
         'topic' => __('Multi-Site'),
-        'url' => Statamic::docsUrl('multi-site')
-    ])
+        'url' => Statamic::docsUrl('multi-site'),
+    ]
+)
 
 @stop
diff --git a/resources/views/snippets.blade.php b/resources/views/snippets.blade.php
index 9ed231b9cf..c2766e761d 100644
--- a/resources/views/snippets.blade.php
+++ b/resources/views/snippets.blade.php
@@ -1,17 +1,13 @@
 @extends('statamic::layout')
 
 @section('content')
-
-<div class="row">
-	<div class="col-lg-12">
-		<div class="panel">
-
-			<div class="panel-body">
-				<h1>Put teh snipples up in hurr.</h1>
-			</div>
-
-		</div>
-	</div>
-</div>
-
+    <div class="row">
+        <div class="col-lg-12">
+            <div class="panel">
+                <div class="panel-body">
+                    <h1>Put teh snipples up in hurr.</h1>
+                </div>
+            </div>
+        </div>
+    </div>
 @endsection
diff --git a/resources/views/taxonomies/blueprints/create.blade.php b/resources/views/taxonomies/blueprints/create.blade.php
index 4070795ab9..a918428a5a 100644
--- a/resources/views/taxonomies/blueprints/create.blade.php
+++ b/resources/views/taxonomies/blueprints/create.blade.php
@@ -1,4 +1,6 @@
-@php use function Statamic\trans as __; @endphp
+@php
+    use function Statamic\trans as __;
+@endphp
 
 @extends('statamic::layout')
 @section('title', __('Create Blueprint'))
@@ -6,26 +8,34 @@
 @section('content')
 <form action="{{ $action }}" method="POST">
     @csrf
-    <div class="max-w-lg mt-4 mx-auto">
-        <div class="rounded p-6 lg:px-20 lg:py-10 shadow bg-white dark:bg-dark-600 dark:shadow-dark">
-            <header class="text-center mb-16">
+    <div class="mx-auto mt-4 max-w-lg">
+        <div class="rounded bg-white p-6 shadow dark:bg-dark-600 dark:shadow-dark lg:px-20 lg:py-10">
+            <header class="mb-16 text-center">
                 <h1 class="mb-6">{{ __('Create Blueprint') }}</h1>
                 <p class="text-gray">{{ __('statamic::messages.blueprints_intro') }}</p>
             </header>
             <div class="mb-10">
-                <label class="font-bold text-base mb-1" for="name">{{ __('Title') }}</label>
-                <input type="text" name="title" value="{{ old('title') }}" class="input-text" autofocus required tabindex="1">
-                <div class="text-2xs text-gray-600 mt-2 flex items-center">
+                <label class="mb-1 text-base font-bold" for="name">{{ __('Title') }}</label>
+                <input
+                    type="text"
+                    name="title"
+                    value="{{ old('title') }}"
+                    class="input-text"
+                    autofocus
+                    required
+                    tabindex="1"
+                />
+                <div class="mt-2 flex items-center text-2xs text-gray-600">
                     {{ __('statamic::messages.blueprints_title_instructions') }}
                 </div>
                 @if ($errors->has('title'))
-                    <div class="text-red-500 text-xs mt-2">{{ $errors->first('title') }}</div>
+                    <div class="mt-2 text-xs text-red-500">{{ $errors->first('title') }}</div>
                 @endif
             </div>
         </div>
 
-        <div class="flex justify-center mt-8">
-            <button tabindex="4" class="btn-primary mx-auto btn-lg">
+        <div class="mt-8 flex justify-center">
+            <button tabindex="4" class="btn-primary btn-lg mx-auto">
                 {{ __('Create Blueprint') }}
             </button>
         </div>
diff --git a/resources/views/taxonomies/blueprints/edit.blade.php b/resources/views/taxonomies/blueprints/edit.blade.php
index f2aef8b6db..9f86306adf 100644
--- a/resources/views/taxonomies/blueprints/edit.blade.php
+++ b/resources/views/taxonomies/blueprints/edit.blade.php
@@ -1,14 +1,18 @@
-@php use function Statamic\trans as __; @endphp
+@php
+    use function Statamic\trans as __;
+@endphp
 
 @extends('statamic::layout')
 @section('title', __('Edit Blueprint'))
 
 @section('content')
-
-    @include('statamic::partials.breadcrumb', [
-        'url' => cp_route('taxonomies.blueprints.index', $taxonomy),
-        'title' => __('Blueprints')
-    ])
+    @include(
+        'statamic::partials.breadcrumb',
+        [
+            'url' => cp_route('taxonomies.blueprints.index', $taxonomy),
+            'title' => __('Blueprints'),
+        ]
+    )
 
     <blueprint-builder
         show-title
@@ -16,9 +20,11 @@
         :initial-blueprint="{{ json_encode($blueprintVueObject) }}"
     ></blueprint-builder>
 
-    @include('statamic::partials.docs-callout', [
-        'topic' => __('Blueprints'),
-        'url' => Statamic::docsUrl('blueprints')
-    ])
-
+    @include(
+        'statamic::partials.docs-callout',
+        [
+            'topic' => __('Blueprints'),
+            'url' => Statamic::docsUrl('blueprints'),
+        ]
+    )
 @endsection
diff --git a/resources/views/taxonomies/blueprints/index.blade.php b/resources/views/taxonomies/blueprints/index.blade.php
index c1c487e906..82c8ad86c5 100644
--- a/resources/views/taxonomies/blueprints/index.blade.php
+++ b/resources/views/taxonomies/blueprints/index.blade.php
@@ -1,14 +1,18 @@
-@php use function Statamic\trans as __; @endphp
+@php
+    use function Statamic\trans as __;
+@endphp
 
 @extends('statamic::layout')
 @section('title', __('Blueprints'))
 
 @section('content')
-
-    @include('statamic::partials.breadcrumb', [
-        'url' => cp_route('taxonomies.show', $taxonomy->handle()),
-        'title' => $taxonomy->title()
-    ])
+    @include(
+        'statamic::partials.breadcrumb',
+        [
+            'url' => cp_route('taxonomies.show', $taxonomy->handle()),
+            'title' => $taxonomy->title(),
+        ]
+    )
 
     <taxonomy-blueprint-listing
         inline-template
@@ -16,7 +20,7 @@
         reorder-url="{{ cp_route('taxonomies.blueprints.reorder', $taxonomy) }}"
     >
         <div>
-            <div class="flex justify-between items-center mb-6">
+            <div class="mb-6 flex items-center justify-between">
                 <h1>@yield('title')</h1>
 
                 <div>
@@ -26,10 +30,17 @@ class="btn"
                             :class="{ 'disabled': !hasBeenReordered }"
                             :disabled="!hasBeenReordered"
                             @click="saveOrder"
-                        >{{ __('Save Order') }}</button>
+                        >
+                            {{ __('Save Order') }}
+                        </button>
                     @endif
 
-                    <a href="{{ cp_route('taxonomies.blueprints.create', $taxonomy) }}" class="btn-primary rtl:mr-2 ltr:ml-2">{{ __('Create Blueprint') }}</a>
+                    <a
+                        href="{{ cp_route('taxonomies.blueprints.create', $taxonomy) }}"
+                        class="btn-primary ltr:ml-2 rtl:mr-2"
+                    >
+                        {{ __('Create Blueprint') }}
+                    </a>
                 </div>
             </div>
 
@@ -41,9 +52,11 @@ class="btn"
         </div>
     </taxonomy-blueprint-listing>
 
-    @include('statamic::partials.docs-callout', [
-        'topic' => __('Blueprints'),
-        'url' => Statamic::docsUrl('blueprints')
-    ])
-
+    @include(
+        'statamic::partials.docs-callout',
+        [
+            'topic' => __('Blueprints'),
+            'url' => Statamic::docsUrl('blueprints'),
+        ]
+    )
 @endsection
diff --git a/resources/views/taxonomies/create.blade.php b/resources/views/taxonomies/create.blade.php
index fe3b35c3db..3c1908ea6a 100644
--- a/resources/views/taxonomies/create.blade.php
+++ b/resources/views/taxonomies/create.blade.php
@@ -1,12 +1,10 @@
-@php use function Statamic\trans as __; @endphp
+@php
+    use function Statamic\trans as __;
+@endphp
 
 @extends('statamic::layout')
 @section('title', __('Create Taxonomy'))
 
 @section('content')
-
-    <taxonomy-create-form
-        route="{{ cp_route('taxonomies.store') }}">
-    </taxonomy-create-form>
-
+    <taxonomy-create-form route="{{ cp_route('taxonomies.store') }}"></taxonomy-create-form>
 @endsection
diff --git a/resources/views/taxonomies/edit.blade.php b/resources/views/taxonomies/edit.blade.php
index 5ec975ac36..86af9f485e 100644
--- a/resources/views/taxonomies/edit.blade.php
+++ b/resources/views/taxonomies/edit.blade.php
@@ -1,15 +1,17 @@
-@php use function Statamic\trans as __; @endphp
+@php
+    use function Statamic\trans as __;
+@endphp
 
 @extends('statamic::layout')
 @section('title', __('Configure Taxonomy'))
 
 @section('content')
 
-    <taxonomy-edit-form
-        :blueprint="{{ json_encode($blueprint) }}"
-        :initial-values="{{ json_encode($values) }}"
-        :meta="{{ json_encode($meta) }}"
-        url="{{ cp_route('taxonomies.update', $taxonomy->handle()) }}"
-    ></taxonomy-edit-form>
+<taxonomy-edit-form
+    :blueprint="{{ json_encode($blueprint) }}"
+    :initial-values="{{ json_encode($values) }}"
+    :meta="{{ json_encode($meta) }}"
+    url="{{ cp_route('taxonomies.update', $taxonomy->handle()) }}"
+></taxonomy-edit-form>
 
 @stop
diff --git a/resources/views/taxonomies/empty.blade.php b/resources/views/taxonomies/empty.blade.php
index d8c80abb6c..3cca0fafdb 100644
--- a/resources/views/taxonomies/empty.blade.php
+++ b/resources/views/taxonomies/empty.blade.php
@@ -1,4 +1,6 @@
-@php use function Statamic\trans as __; @endphp
+@php
+    use function Statamic\trans as __;
+@endphp
 
 @extends('statamic::layout')
 @section('title', Statamic::crumb($taxonomy->title(), 'Taxonomies'))
@@ -6,55 +8,82 @@
 @section('content')
 
 <header class="mb-6">
-    @include('statamic::partials.breadcrumb', [
-        'url' => cp_route('taxonomies.index'),
-        'title' => __('Taxonomies')
-    ])
+    @include(
+        'statamic::partials.breadcrumb',
+        [
+            'url' => cp_route('taxonomies.index'),
+            'title' => __('Taxonomies'),
+        ]
+    )
     <h1 v-pre>{{ __($taxonomy->title()) }}</h1>
 </header>
 
-<div class="card p-4 content">
+<div class="card content p-4">
     <div class="flex flex-wrap">
         @can('edit', $taxonomy)
-        <a href="{{ cp_route('taxonomies.edit', $taxonomy->handle()) }}" class="w-full lg:w-1/2 p-4 flex items-start hover:bg-gray-200 dark:hover:bg-dark-550 rounded-md group">
-            <div class="h-8 w-8 rtl:ml-4 ltr:mr-4 text-gray-800 dark:text-dark-175">
-                @cp_svg('icons/light/hammer-wrench')
-            </div>
-            <div class="flex-1 mb-4 md:mb-0 rtl:md:ml-6 ltr:md:mr-6">
-                <h3 class="mb-2 text-blue dark:text-blue-600">{{ __('Configure Taxonomy') }} @rarr</h3>
-                <p>{{ __('statamic::messages.taxonomy_next_steps_configure_description') }}</p>
-            </div>
-        </a>
+            <a
+                href="{{ cp_route('taxonomies.edit', $taxonomy->handle()) }}"
+                class="group flex w-full items-start rounded-md p-4 hover:bg-gray-200 dark:hover:bg-dark-550 lg:w-1/2"
+            >
+                <div class="h-8 w-8 text-gray-800 dark:text-dark-175 ltr:mr-4 rtl:ml-4">
+                    @cp_svg('icons/light/hammer-wrench')
+                </div>
+                <div class="mb-4 flex-1 md:mb-0 ltr:md:mr-6 rtl:md:ml-6">
+                    <h3 class="mb-2 text-blue dark:text-blue-600">
+                        {{ __('Configure Taxonomy') }}
+                        @rarr
+                    </h3>
+                    <p>{{ __('statamic::messages.taxonomy_next_steps_configure_description') }}</p>
+                </div>
+            </a>
         @endcan
+
         @can('create', ['Statamic\Contracts\Taxonomies\Term', $taxonomy, \Statamic\Facades\Site::get($site)])
-        <a href="{{ cp_route('taxonomies.terms.create', [$taxonomy->handle(), $site]) }}" class="w-full lg:w-1/2 p-4 flex items-start hover:bg-gray-200 dark:hover:bg-dark-550 rounded-md group">
-            <div class="h-8 w-8 rtl:ml-4 ltr:mr-4 text-gray-800 dark:text-dark-175">
-                @cp_svg('icons/light/content-writing')
-            </div>
-            <div class="flex-1 mb-4 md:mb-0 rtl:md:ml-6 ltr:md:mr-6">
-                <h3 class="mb-2 text-blue dark:text-blue-600">{{ __('Create Term') }} @rarr</h3>
-                <p>{{ __('statamic::messages.taxonomy_next_steps_create_term_description') }}</p>
-            </div>
-        </a>
+            <a
+                href="{{ cp_route('taxonomies.terms.create', [$taxonomy->handle(), $site]) }}"
+                class="group flex w-full items-start rounded-md p-4 hover:bg-gray-200 dark:hover:bg-dark-550 lg:w-1/2"
+            >
+                <div class="h-8 w-8 text-gray-800 dark:text-dark-175 ltr:mr-4 rtl:ml-4">
+                    @cp_svg('icons/light/content-writing')
+                </div>
+                <div class="mb-4 flex-1 md:mb-0 ltr:md:mr-6 rtl:md:ml-6">
+                    <h3 class="mb-2 text-blue dark:text-blue-600">
+                        {{ __('Create Term') }}
+                        @rarr
+                    </h3>
+                    <p>{{ __('statamic::messages.taxonomy_next_steps_create_term_description') }}</p>
+                </div>
+            </a>
         @endcan
+
         @can('configure fields')
-        <a href="{{ cp_route('taxonomies.blueprints.index', $taxonomy->handle()) }}" class="w-full lg:w-1/2 p-4 flex items-start hover:bg-gray-200 dark:hover:bg-dark-550 rounded-md group">
-            <div class="h-8 w-8 rtl:ml-4 ltr:mr-4 text-gray-800 dark:text-dark-175">
-                @cp_svg('icons/light/blueprint')
-            </div>
-            <div class="flex-1 mb-4 md:mb-0 rtl:md:ml-6 ltr:md:mr-6">
-                <h3 class="mb-2 text-blue dark:text-blue-600">{{ __('Configure Blueprints') }} @rarr</h3>
-                <p>{{ __('statamic::messages.taxonomy_next_steps_blueprints_description') }}</p>
-            </div>
-        </a>
+            <a
+                href="{{ cp_route('taxonomies.blueprints.index', $taxonomy->handle()) }}"
+                class="group flex w-full items-start rounded-md p-4 hover:bg-gray-200 dark:hover:bg-dark-550 lg:w-1/2"
+            >
+                <div class="h-8 w-8 text-gray-800 dark:text-dark-175 ltr:mr-4 rtl:ml-4">
+                    @cp_svg('icons/light/blueprint')
+                </div>
+                <div class="mb-4 flex-1 md:mb-0 ltr:md:mr-6 rtl:md:ml-6">
+                    <h3 class="mb-2 text-blue dark:text-blue-600">
+                        {{ __('Configure Blueprints') }}
+                        @rarr
+                    </h3>
+                    <p>{{ __('statamic::messages.taxonomy_next_steps_blueprints_description') }}</p>
+                </div>
+            </a>
         @endcan
-        <div class="hidden first:flex justify-center items-center p-8 w-full">
+
+        <div class="hidden w-full items-center justify-center p-8 first:flex">
             @cp_svg($svg ?? 'empty/content')
         </div>
     </div>
 </div>
-@include('statamic::partials.docs-callout', [
-    'topic' => __('Taxonomies'),
-    'url' => Statamic::docsUrl('taxonomies')
-])
+@include(
+    'statamic::partials.docs-callout',
+    [
+        'topic' => __('Taxonomies'),
+        'url' => Statamic::docsUrl('taxonomies'),
+    ]
+)
 @stop
diff --git a/resources/views/taxonomies/index.blade.php b/resources/views/taxonomies/index.blade.php
index 63fe6a32be..472b02f214 100644
--- a/resources/views/taxonomies/index.blade.php
+++ b/resources/views/taxonomies/index.blade.php
@@ -1,13 +1,13 @@
-@php use function Statamic\trans as __; @endphp
+@php
+    use function Statamic\trans as __;
+@endphp
 
 @extends('statamic::layout')
 @section('title', __('Taxonomies'))
 
 @section('content')
-
-    @unless($taxonomies->isEmpty())
-
-        <div class="flex mb-6">
+    @unless ($taxonomies->isEmpty())
+        <div class="mb-6 flex">
             <h1 class="flex-1">{{ __('Taxonomies') }}</h1>
 
             @can('create', 'Statamic\Contracts\Taxonomies\Taxonomy')
@@ -18,25 +18,27 @@
         <taxonomy-list
             :initial-rows="{{ json_encode($taxonomies) }}"
             :initial-columns="{{ json_encode($columns) }}"
-            :endpoints="{}">
-        </taxonomy-list>
-
+            :endpoints="{}"
+        ></taxonomy-list>
     @else
-
-        @include('statamic::partials.empty-state', [
-            'title' => __('Taxonomies'),
-            'description' => __('statamic::messages.taxonomy_configure_intro'),
-            'svg' => 'empty/taxonomy',
-            'button_text' => __('Create Taxonomy'),
-            'button_url' => cp_route('taxonomies.create'),
-            'can' => $user->can('create', 'Statamic\Contracts\Taxonomies\Taxonomy')
-        ])
-
+        @include(
+            'statamic::partials.empty-state',
+            [
+                'title' => __('Taxonomies'),
+                'description' => __('statamic::messages.taxonomy_configure_intro'),
+                'svg' => 'empty/taxonomy',
+                'button_text' => __('Create Taxonomy'),
+                'button_url' => cp_route('taxonomies.create'),
+                'can' => $user->can('create', 'Statamic\Contracts\Taxonomies\Taxonomy'),
+            ]
+        )
     @endunless
 
-    @include('statamic::partials.docs-callout', [
-        'topic' => __('Taxonomies'),
-        'url' => Statamic::docsUrl('taxonomies')
-    ])
-
+    @include(
+        'statamic::partials.docs-callout',
+        [
+            'topic' => __('Taxonomies'),
+            'url' => Statamic::docsUrl('taxonomies'),
+        ]
+    )
 @endsection
diff --git a/resources/views/taxonomies/show.blade.php b/resources/views/taxonomies/show.blade.php
index 85649b5ab9..f9a35b1843 100644
--- a/resources/views/taxonomies/show.blade.php
+++ b/resources/views/taxonomies/show.blade.php
@@ -1,26 +1,35 @@
-@php use function Statamic\trans as __; @endphp
+@php
+    use function Statamic\trans as __;
+@endphp
 
 @extends('statamic::layout')
 @section('title', Statamic::crumb($taxonomy->title(), 'Taxonomies'))
 @section('wrapper_class', 'max-w-full')
 
 @section('content')
-
     <header class="mb-6">
-        @include('statamic::partials.breadcrumb', [
-            'url' => cp_route('taxonomies.index'),
-            'title' => __('Taxonomies')
-        ])
+        @include(
+            'statamic::partials.breadcrumb',
+            [
+                'url' => cp_route('taxonomies.index'),
+                'title' => __('Taxonomies'),
+            ]
+        )
         <div class="flex items-center">
             <h1 v-pre class="flex-1">{{ __($taxonomy->title()) }}</h1>
 
-            <dropdown-list class="rtl:ml-2 ltr:mr-2">
+            <dropdown-list class="ltr:mr-2 rtl:ml-2">
                 @can('edit', $taxonomy)
                     <dropdown-item :text="__('Edit Taxonomy')" redirect="{{ $taxonomy->editUrl() }}"></dropdown-item>
                 @endcan
+
                 @can('configure fields')
-                    <dropdown-item :text="__('Edit Blueprints')" redirect="{{ cp_route('taxonomies.blueprints.index', $taxonomy) }}"></dropdown-item>
+                    <dropdown-item
+                        :text="__('Edit Blueprints')"
+                        redirect="{{ cp_route('taxonomies.blueprints.index', $taxonomy) }}"
+                    ></dropdown-item>
                 @endcan
+
                 @can('delete', $taxonomy)
                     <dropdown-item :text="__('Delete Taxonomy')" class="warning" @click="$refs.deleter.confirm()">
                         <resource-deleter
@@ -33,18 +42,17 @@
                 @endcan
             </dropdown-list>
 
-            @if($canCreate)
+            @if ($canCreate)
                 <create-term-button
                     url="{{ cp_route('taxonomies.terms.create', [$taxonomy->handle(), $site]) }}"
                     text="{{ $taxonomy->createLabel() }}"
-                    :blueprints="{{ $blueprints->toJson() }}">
-                </create-term-button>
+                    :blueprints="{{ $blueprints->toJson() }}"
+                ></create-term-button>
             @endif
         </div>
     </header>
 
     @if ($hasTerms)
-
         <term-list
             taxonomy="{{ $taxonomy->handle() }}"
             initial-sort-column="{{ $taxonomy->sortField() }}"
@@ -53,22 +61,23 @@
             :filters="{{ $filters->toJson() }}"
             action-url="{{ cp_route('taxonomies.terms.actions.run', $taxonomy->handle()) }}"
         ></term-list>
-
     @else
-
-        @component('statamic::partials.create-first', [
-            'resource' => __("{$taxonomy->title()} term"),
-            'svg' => 'empty/taxonomy', // TODO: Do we want separate term SVG?
-            'can' => $user->can('create', ['Statamic\Contracts\Taxonomies\Term', $taxonomy])
-        ])
+        @component(
+            'statamic::partials.create-first',
+            [
+                'resource' => __("{$taxonomy->title()} term"),
+                'svg' => 'empty/taxonomy', // TODO: Do we want separate term SVG?
+                'can' => $user->can('create', ['Statamic\Contracts\Taxonomies\Term', $taxonomy]),
+            ]
+        )
             @slot('button')
-                {{-- <create-term-button
+                {{--
+                    <create-term-button
                     url="{{ cp_route('taxonomies.terms.create', [$taxonomy->handle(), $site]) }}"
                     :blueprints="{{ $blueprints->toJson() }}">
-                </create-term-button> --}}
+                    </create-term-button>
+                --}}
             @endslot
         @endcomponent
-
     @endif
-
 @endsection
diff --git a/resources/views/terms/create.blade.php b/resources/views/terms/create.blade.php
index 4e2d9d5796..ef4cac652c 100644
--- a/resources/views/terms/create.blade.php
+++ b/resources/views/terms/create.blade.php
@@ -18,5 +18,4 @@
         listing-url="{{ cp_route('taxonomies.show', $taxonomy) }}"
         :preview-targets="{{ json_encode($previewTargets) }}"
     ></base-term-create-form>
-
 @endsection
diff --git a/resources/views/terms/edit.blade.php b/resources/views/terms/edit.blade.php
index 4df0254892..1371097146 100644
--- a/resources/views/terms/edit.blade.php
+++ b/resources/views/terms/edit.blade.php
@@ -1,4 +1,6 @@
-@php use function Statamic\trans as __; @endphp
+@php
+    use function Statamic\trans as __;
+@endphp
 
 @inject('str', 'Statamic\Support\Str')
 @extends('statamic::layout')
@@ -6,7 +8,6 @@
 @section('wrapper_class', 'max-w-3xl')
 
 @section('content')
-
     <term-publish-form
         publish-container="base"
         :initial-actions="{{ json_encode($actions) }}"
@@ -40,5 +41,4 @@
         item-action-url="{{ cp_route('taxonomies.terms.actions.run', $taxonomy) }}"
         :has-template="{{ $str::bool($hasTemplate) }}"
     ></term-publish-form>
-
 @endsection
diff --git a/resources/views/updater/index.blade.php b/resources/views/updater/index.blade.php
index bd810906f6..d3b7d9a697 100644
--- a/resources/views/updater/index.blade.php
+++ b/resources/views/updater/index.blade.php
@@ -1,73 +1,90 @@
-@php use function Statamic\trans as __; @endphp
+@php
+    use function Statamic\trans as __;
+@endphp
 
 @extends('statamic::layout')
 @section('title', __('Updater'))
 
 @section('content')
-
     @if ($requestError)
-
-        <div class="no-results md:pt-30 max-w-2xl mx-auto">
+        <div class="no-results mx-auto max-w-2xl md:pt-30">
             <div class="flex flex-wrap items-center">
                 <div class="w-full md:w-1/2">
                     <h1 class="mb-8">{{ __('Updates') }}</h1>
-                    <p class="text-gray-700 leading-normal mb-8 text-lg antialiased">
+                    <p class="mb-8 text-lg leading-normal text-gray-700 antialiased">
                         {{ __('statamic::messages.outpost_issue_try_later') }}
                     </p>
-                    <a href="{{ cp_route('updater') }}"
-                        class="btn-primary btn-lg">{{ __('Try again') }}</a>
+                    <a href="{{ cp_route('updater') }}" class="btn-primary btn-lg">{{ __('Try again') }}</a>
                 </div>
-                <div class="hidden md:block w-1/2 rtl:pr-16 ltr:pl-16">
+                <div class="hidden w-1/2 md:block ltr:pl-16 rtl:pr-16">
                     @cp_svg('empty/navigation')
                 </div>
             </div>
         </div>
-
     @else
-
-        <div class="flex mb-6">
+        <div class="mb-6 flex">
             <h1 class="flex-1">{{ __('Updates') }}</h1>
         </div>
 
         <h6 class="mt-8">{{ __('Core') }}</h6>
-        <div class="card p-0 mt-2">
+        <div class="card mt-2 p-0">
             <table class="data-table">
                 <tr>
-                    <td class="w-64"><a href="{{ route('statamic.cp.updater.product', 'statamic') }}" class="text-blue font-bold">{{ __('Statamic') }}</a></td>
+                    <td class="w-64">
+                        <a href="{{ route('statamic.cp.updater.product', 'statamic') }}" class="font-bold text-blue">
+                            {{ __('Statamic') }}
+                        </a>
+                    </td>
                     <td>{{ $statamic->currentVersion() }}</td>
+
                     @if ($count = $statamic->availableUpdatesCount())
-                        <td class="rtl:text-left ltr:text-right"><span class="badge-sm bg-green-600 btn-xs">{{ trans_choice('1 update|:count updates', $count) }}</span></td>
+                        <td class="ltr:text-right rtl:text-left">
+                            <span class="badge-sm btn-xs bg-green-600">
+                                {{ trans_choice('1 update|:count updates', $count) }}
+                            </span>
+                        </td>
                     @else
-                        <td class="rtl:text-left ltr:text-right">{{ __('Up to date') }}</td>
+                        <td class="ltr:text-right rtl:text-left">{{ __('Up to date') }}</td>
                     @endif
                 </tr>
             </table>
         </div>
 
-        @if($addons->count())
+        @if ($addons->count())
             <h6 class="mt-8">{{ __('Addons') }}</h6>
-            <div class="card p-0 mt-2">
+            <div class="card mt-2 p-0">
                 <table class="data-table">
                     @foreach ($addons as $addon)
-                    <tr>
-                        <td class="w-64"><a href="{{ route('statamic.cp.updater.product', $addon -> slug()) }}"
-                                class="text-blue font-bold rtl:ml-2 ltr:mr-2">{{ $addon -> name() }}</a>
-                        <td>{{ $addon -> version() }}</td>
-                        @if ($count = $addon->changelog()->availableUpdatesCount())
-                        <td class="rtl:text-left ltr:text-right"><span
-                                class="badge-sm bg-green-600 btn-xs">{{ trans_choice('1 update|:count updates', $count) }}</span></td>
-                        @else
-                        <td class="rtl:text-left ltr:text-right">{{ __('Up to date') }}</td>
-                        @endif
-                    </tr>
+                        <tr>
+                            <td class="w-64">
+                                <a
+                                    href="{{ route('statamic.cp.updater.product', $addon->slug()) }}"
+                                    class="font-bold text-blue ltr:mr-2 rtl:ml-2"
+                                >
+                                    {{ $addon->name() }}
+                                </a>
+                            </td>
+
+                            <td>{{ $addon->version() }}</td>
+
+                            @if ($count = $addon->changelog()->availableUpdatesCount())
+                                <td class="ltr:text-right rtl:text-left">
+                                    <span class="badge-sm btn-xs bg-green-600">
+                                        {{ trans_choice('1 update|:count updates', $count) }}
+                                    </span>
+                                </td>
+                            @else
+                                <td class="ltr:text-right rtl:text-left">{{ __('Up to date') }}</td>
+                            @endif
+                        </tr>
                     @endforeach
                 </table>
             </div>
         @endif
 
-        @if($unlistedAddons->count())
+        @if ($unlistedAddons->count())
             <h6 class="mt-8">{{ __('Unlisted Addons') }}</h6>
-            <div class="card p-0 mt-2">
+            <div class="card mt-2 p-0">
                 <table class="data-table">
                     @foreach ($unlistedAddons as $addon)
                         <tr>
@@ -79,11 +96,12 @@ class="badge-sm bg-green-600 btn-xs">{{ trans_choice('1 update|:count updates',
             </div>
         @endif
 
-        @include('statamic::partials.docs-callout', [
-            'topic' => __('Updates'),
-            'url' => Statamic::docsUrl('updating')
-        ])
-
+        @include(
+            'statamic::partials.docs-callout',
+            [
+                'topic' => __('Updates'),
+                'url' => Statamic::docsUrl('updating'),
+            ]
+        )
     @endif
-
 @endsection
diff --git a/resources/views/updater/show.blade.php b/resources/views/updater/show.blade.php
index cd79a1c3a7..34c04c598f 100644
--- a/resources/views/updater/show.blade.php
+++ b/resources/views/updater/show.blade.php
@@ -1,15 +1,18 @@
-@php use function Statamic\trans as __; @endphp
+@php
+    use function Statamic\trans as __;
+@endphp
 
 @extends('statamic::layout')
 @section('title', __('Updater'))
 
 @section('content')
-
-    @include('statamic::partials.breadcrumb', [
-        'url' => cp_route('updater'),
-        'title' => __('Updates')
-    ])
+    @include(
+        'statamic::partials.breadcrumb',
+        [
+            'url' => cp_route('updater'),
+            'title' => __('Updates'),
+        ]
+    )
 
     <updater slug="{{ $slug }}" package="{{ $package }}" name="{{ $name }}"></updater>
-
 @endsection
diff --git a/resources/views/usergroups/blueprints/edit.blade.php b/resources/views/usergroups/blueprints/edit.blade.php
index 6d7e13aa3d..8d50b2b5c7 100644
--- a/resources/views/usergroups/blueprints/edit.blade.php
+++ b/resources/views/usergroups/blueprints/edit.blade.php
@@ -1,14 +1,18 @@
-@php use function Statamic\trans as __; @endphp
+@php
+    use function Statamic\trans as __;
+@endphp
 
 @extends('statamic::layout')
 @section('title', __('Edit Blueprint'))
 
 @section('content')
-
-    @include('statamic::partials.breadcrumb', [
-        'url' => cp_route('user-groups.index'),
-        'title' => __('User Groups'),
-    ])
+    @include(
+        'statamic::partials.breadcrumb',
+        [
+            'url' => cp_route('user-groups.index'),
+            'title' => __('User Groups'),
+        ]
+    )
 
     <blueprint-builder
         action="{{ cp_route('user-groups.blueprint.update') }}"
@@ -16,9 +20,11 @@
         :can-define-localizable="false"
     ></blueprint-builder>
 
-    @include('statamic::partials.docs-callout', [
-        'topic' => __('Blueprints'),
-        'url' => Statamic::docsUrl('blueprints')
-    ])
-
+    @include(
+        'statamic::partials.docs-callout',
+        [
+            'topic' => __('Blueprints'),
+            'url' => Statamic::docsUrl('blueprints'),
+        ]
+    )
 @endsection
diff --git a/resources/views/usergroups/create.blade.php b/resources/views/usergroups/create.blade.php
index 111978837a..d161d141d9 100644
--- a/resources/views/usergroups/create.blade.php
+++ b/resources/views/usergroups/create.blade.php
@@ -1,10 +1,11 @@
-@php use function Statamic\trans as __; @endphp
+@php
+    use function Statamic\trans as __;
+@endphp
 
 @extends('statamic::layout')
 @section('title', __('Create User Group'))
 
 @section('content')
-
     <user-group-publish-form
         :actions="{{ json_encode($actions) }}"
         method="post"
@@ -15,5 +16,4 @@
         :initial-meta="{{ json_encode($meta) }}"
         :is-creating="true"
     ></user-group-publish-form>
-
 @endsection
diff --git a/resources/views/usergroups/edit.blade.php b/resources/views/usergroups/edit.blade.php
index cb80fb45cd..53b91228a3 100644
--- a/resources/views/usergroups/edit.blade.php
+++ b/resources/views/usergroups/edit.blade.php
@@ -1,10 +1,11 @@
-@php use function Statamic\trans as __; @endphp
+@php
+    use function Statamic\trans as __;
+@endphp
 
 @extends('statamic::layout')
 @section('title', __('Configure User Group'))
 
 @section('content')
-
     <user-group-publish-form
         :actions="{{ json_encode($actions) }}"
         method="patch"
@@ -16,5 +17,4 @@
         :initial-meta="{{ json_encode($meta) }}"
         :can-edit-blueprint="{{ Statamic\Support\Str::bool($user->can('configure fields')) }}"
     ></user-group-publish-form>
-
 @endsection
diff --git a/resources/views/usergroups/index.blade.php b/resources/views/usergroups/index.blade.php
index a0e36a5d96..203947ae0d 100644
--- a/resources/views/usergroups/index.blade.php
+++ b/resources/views/usergroups/index.blade.php
@@ -1,13 +1,13 @@
-@php use function Statamic\trans as __; @endphp
+@php
+    use function Statamic\trans as __;
+@endphp
 
 @extends('statamic::layout')
 @section('title', __('User Groups'))
 
 @section('content')
-
-    @unless($groups->isEmpty())
-
-        <div class="flex mb-6">
+    @unless ($groups->isEmpty())
+        <div class="mb-6 flex">
             <h1 class="flex-1">
                 {{ __('User Groups') }}
             </h1>
@@ -15,22 +15,24 @@
         </div>
 
         <user-group-listing :initial-rows="{{ json_encode($groups) }}"></user-group-listing>
-
     @else
-
-        @include('statamic::partials.empty-state', [
-            'title' => __('User Groups'),
-            'description' => __('statamic::messages.user_groups_intro'),
-            'svg' => 'empty/users',
-            'button_text' => __('Create User Group'),
-            'button_url' => cp_route('user-groups.create'),
-        ])
-
+        @include(
+            'statamic::partials.empty-state',
+            [
+                'title' => __('User Groups'),
+                'description' => __('statamic::messages.user_groups_intro'),
+                'svg' => 'empty/users',
+                'button_text' => __('Create User Group'),
+                'button_url' => cp_route('user-groups.create'),
+            ]
+        )
     @endunless
 
-    @include('statamic::partials.docs-callout', [
-        'topic' => __('User Groups'),
-        'url' => Statamic::docsUrl('users#user-groups')
-    ])
-
+    @include(
+        'statamic::partials.docs-callout',
+        [
+            'topic' => __('User Groups'),
+            'url' => Statamic::docsUrl('users#user-groups'),
+        ]
+    )
 @endsection
diff --git a/resources/views/usergroups/show.blade.php b/resources/views/usergroups/show.blade.php
index cffd7c4b45..0c92b70490 100644
--- a/resources/views/usergroups/show.blade.php
+++ b/resources/views/usergroups/show.blade.php
@@ -1,22 +1,27 @@
-@php use function Statamic\trans as __; @endphp
+@php
+    use function Statamic\trans as __;
+@endphp
 
 @extends('statamic::layout')
 @section('title', Statamic::crumb($group->title(), 'User Group'))
 @section('wrapper_class', 'max-w-full')
 
 @section('content')
-
-<header class="mb-6">
-        @include('statamic::partials.breadcrumb', [
-            'url' => cp_route('user-groups.index'),
-            'title' => __('User Groups')
-        ])
+    <header class="mb-6">
+        @include(
+            'statamic::partials.breadcrumb',
+            [
+                'url' => cp_route('user-groups.index'),
+                'title' => __('User Groups'),
+            ]
+        )
         <div class="flex items-center">
             <h1 v-pre class="flex-1">{{ __($group->title()) }}</h1>
-            <dropdown-list class="rtl:ml-2 ltr:mr-2">
+            <dropdown-list class="ltr:mr-2 rtl:ml-2">
                 @can('edit', $group)
                     <dropdown-item :text="__('Edit User Group')" redirect="{{ $group->editUrl() }}"></dropdown-item>
                 @endcan
+
                 @can('delete', $group)
                     <dropdown-item :text="__('Delete User Group')" class="warning" @click="$refs.deleter.confirm()">
                         <resource-deleter
@@ -38,5 +43,4 @@
         :allow-filter-presets="false"
         action-url="{{ cp_route('users.actions.run') }}"
     ></user-listing>
-
 @endsection
diff --git a/resources/views/users/blueprints/edit.blade.php b/resources/views/users/blueprints/edit.blade.php
index 78dd72b70d..db250cce8b 100644
--- a/resources/views/users/blueprints/edit.blade.php
+++ b/resources/views/users/blueprints/edit.blade.php
@@ -1,14 +1,18 @@
-@php use function Statamic\trans as __; @endphp
+@php
+    use function Statamic\trans as __;
+@endphp
 
 @extends('statamic::layout')
 @section('title', __('Edit Blueprint'))
 
 @section('content')
-
-    @include('statamic::partials.breadcrumb', [
-        'url' => cp_route('users.index'),
-        'title' => __('Users'),
-    ])
+    @include(
+        'statamic::partials.breadcrumb',
+        [
+            'url' => cp_route('users.index'),
+            'title' => __('Users'),
+        ]
+    )
 
     <blueprint-builder
         action="{{ cp_route('users.blueprint.update') }}"
@@ -16,9 +20,11 @@
         :can-define-localizable="false"
     ></blueprint-builder>
 
-    @include('statamic::partials.docs-callout', [
-        'topic' => __('Blueprints'),
-        'url' => Statamic::docsUrl('blueprints')
-    ])
-
+    @include(
+        'statamic::partials.docs-callout',
+        [
+            'topic' => __('Blueprints'),
+            'url' => Statamic::docsUrl('blueprints'),
+        ]
+    )
 @endsection
diff --git a/resources/views/users/create.blade.php b/resources/views/users/create.blade.php
index 2542a5cac8..b37b60bd57 100644
--- a/resources/views/users/create.blade.php
+++ b/resources/views/users/create.blade.php
@@ -1,24 +1,25 @@
-@php use function Statamic\trans as __; @endphp
+@php
+    use function Statamic\trans as __;
+@endphp
 
 @inject('str', 'Statamic\Support\Str')
 @extends('statamic::layout')
 @section('title', __('Create User'))
 
 @section('content')
-    <user-wizard
-        route="{{ cp_route('users.store') }}"
-        users-index-url="{{ cp_route('users.index') }}"
-        users-create-url="{{ cp_route('users.create') }}"
-        :can-create-supers="{{ $str::bool($user->isSuper()) }}"
-        :can-assign-roles="{{ $str::bool($user->can('assign roles')) }}"
-        :can-assign-groups="{{ $str::bool($user->can('assign user groups')) }}"
-        :activation-expiry="{{ $expiry }}"
-        :separate-name-fields="{{ $str::bool($separateNameFields) }}"
-        :can-send-invitation="{{ $str::bool($canSendInvitation) }}"
-        :blueprint="{{ json_encode($blueprint) }}"
-        :fields="{{ json_encode($fields) }}"
-        :meta="{{ json_encode($meta) }}"
-        :initial-values="{{ json_encode($values) }}"
-    >
-    </user-wizard>
+<user-wizard
+    route="{{ cp_route('users.store') }}"
+    users-index-url="{{ cp_route('users.index') }}"
+    users-create-url="{{ cp_route('users.create') }}"
+    :can-create-supers="{{ $str::bool($user->isSuper()) }}"
+    :can-assign-roles="{{ $str::bool($user->can('assign roles')) }}"
+    :can-assign-groups="{{ $str::bool($user->can('assign user groups')) }}"
+    :activation-expiry="{{ $expiry }}"
+    :separate-name-fields="{{ $str::bool($separateNameFields) }}"
+    :can-send-invitation="{{ $str::bool($canSendInvitation) }}"
+    :blueprint="{{ json_encode($blueprint) }}"
+    :fields="{{ json_encode($fields) }}"
+    :meta="{{ json_encode($meta) }}"
+    :initial-values="{{ json_encode($values) }}"
+></user-wizard>
 @stop
diff --git a/resources/views/users/edit.blade.php b/resources/views/users/edit.blade.php
index 64f4943299..5ca29c5610 100644
--- a/resources/views/users/edit.blade.php
+++ b/resources/views/users/edit.blade.php
@@ -1,10 +1,11 @@
-@php use function Statamic\trans as __; @endphp
+@php
+    use function Statamic\trans as __;
+@endphp
 
 @extends('statamic::layout')
 @section('title', __('Edit User'))
 
 @section('content')
-
     <user-publish-form
         :actions="{{ json_encode($actions) }}"
         method="patch"
@@ -20,5 +21,4 @@
         :initial-item-actions="{{ json_encode($itemActions) }}"
         item-action-url="{{ cp_route('users.actions.run') }}"
     ></user-publish-form>
-
 @endsection
diff --git a/resources/views/users/index.blade.php b/resources/views/users/index.blade.php
index 0c99181ecd..4fbe426ce8 100644
--- a/resources/views/users/index.blade.php
+++ b/resources/views/users/index.blade.php
@@ -1,24 +1,28 @@
-@php use function Statamic\trans as __; @endphp
+@php
+    use function Statamic\trans as __;
+@endphp
 
 @extends('statamic::layout')
 @section('title', __('Users'))
 @section('wrapper_class', 'max-w-full')
 
 @section('content')
-
-    <header class="flex items-center mb-6">
+    <header class="mb-6 flex items-center">
         <h1 class="flex-1">
             {{ __('Users') }}
         </h1>
 
         @can('configure fields')
-            <dropdown-list class="rtl:ml-2 ltr:mr-2">
-                <dropdown-item :text="__('Edit Blueprint')" redirect="{{ cp_route('users.blueprint.edit') }}"></dropdown-item>
+            <dropdown-list class="ltr:mr-2 rtl:ml-2">
+                <dropdown-item
+                    :text="__('Edit Blueprint')"
+                    redirect="{{ cp_route('users.blueprint.edit') }}"
+                ></dropdown-item>
             </dropdown-list>
         @endcan
 
         @if (Statamic::pro() && $user->can('create', 'Statamic\Contracts\Auth\User'))
-            <a href="{{ cp_route('users.create') }}" class="btn-primary rtl:mr-4 ltr:ml-4">{{ __('Create User') }}</a>
+            <a href="{{ cp_route('users.create') }}" class="btn-primary ltr:ml-4 rtl:mr-4">{{ __('Create User') }}</a>
         @endif
     </header>
 
@@ -30,9 +34,11 @@
         action-url="{{ cp_route('users.actions.run') }}"
     ></user-listing>
 
-    @include('statamic::partials.docs-callout', [
-        'topic' => __('Users'),
-        'url' => Statamic::docsUrl('users')
-    ])
-
+    @include(
+        'statamic::partials.docs-callout',
+        [
+            'topic' => __('Users'),
+            'url' => Statamic::docsUrl('users'),
+        ]
+    )
 @endsection
diff --git a/resources/views/utilities/cache.blade.php b/resources/views/utilities/cache.blade.php
index 1aa95072e5..0d7d132a43 100644
--- a/resources/views/utilities/cache.blade.php
+++ b/resources/views/utilities/cache.blade.php
@@ -1,110 +1,155 @@
-@php use function Statamic\trans as __; @endphp
+@php
+    use function Statamic\trans as __;
+@endphp
 
 @extends('statamic::layout')
 @section('title', __('Cache Manager'))
 
 @section('content')
 
-    <header class="mb-6">
-
-        @include('statamic::partials.breadcrumb', [
+<header class="mb-6">
+    @include(
+        'statamic::partials.breadcrumb',
+        [
             'url' => cp_route('utilities.index'),
-            'title' => __('Utilities')
-        ])
-        <div class="flex items-center justify-between">
-            <h1>{{ __('Cache Manager') }}</h1>
+            'title' => __('Utilities'),
+        ]
+    )
+    <div class="flex items-center justify-between">
+        <h1>{{ __('Cache Manager') }}</h1>
 
-            <form method="POST" action="{{ cp_route('utilities.cache.clear', 'all') }}">
-                @csrf
-                <button class="btn-primary">{{ __('Clear All') }}</button>
-            </form>
-        </div>
-    </header>
+        <form method="POST" action="{{ cp_route('utilities.cache.clear', 'all') }}">
+            @csrf
+            <button class="btn-primary">{{ __('Clear All') }}</button>
+        </form>
+    </div>
+</header>
 
-    <div class="card p-0">
-        <div class="p-4">
-            <div class="flex justify-between items-center">
-                <div class="rtl:pl-8 ltr:pr-8">
-                    <h2 class="font-bold">{{ __('Content Stache') }}</h2>
-                    <p class="text-gray dark:text-dark-150 text-sm my-2">{{ __('statamic::messages.cache_utility_stache_description') }}</p>
-                </div>
-                <div class="flex">
-                    <form method="POST" action="{{ cp_route('utilities.cache.warm', 'stache') }}" class="rtl:ml-2 ltr:mr-2">
-                        @csrf
-                        <button class="btn">{{ __('Warm') }}</button>
-                    </form>
-                    <form method="POST" action="{{ cp_route('utilities.cache.clear', 'stache') }}">
-                        @csrf
-                        <button class="btn">{{ __('Clear') }}</button>
-                    </form>
-                </div>
+<div class="card p-0">
+    <div class="p-4">
+        <div class="flex items-center justify-between">
+            <div class="ltr:pr-8 rtl:pl-8">
+                <h2 class="font-bold">{{ __('Content Stache') }}</h2>
+                <p class="my-2 text-sm text-gray dark:text-dark-150">
+                    {{ __('statamic::messages.cache_utility_stache_description') }}
+                </p>
             </div>
-            <div class="text-sm text-gray dark:text-dark-150 flex">
-                <div class="rtl:ml-4 ltr:mr-4 badge-pill-sm"><span class="text-gray-800 dark:text-dark-150 font-medium">{{ __('Records') }}:</span> {{ $stache['records'] }}</div>
-                @if($stache['size'])
-                    <div class="rtl:ml-4 ltr:mr-4 badge-pill-sm"><span class="text-gray-800 dark:text-dark-150 font-medium">{{ __('Size') }}:</span> {{ $stache['size'] }}</div>
-                @endif
-                @if ($stache['time'])
-                    <div class="rtl:ml-4 ltr:mr-4 badge-pill-sm"><span class="text-gray-800 dark:text-dark-150 font-medium">{{ __('Build time') }}:</span> {{ $stache['time'] }}</div>
-                @endif
-                @if ($stache['rebuilt'])
-                    <div class="badge-pill-sm"><span class="text-gray-800 dark:text-dark-150 font-medium">{{ __('Last rebuild') }}:</span> {{ $stache['rebuilt'] }}</div>
-                @endif
+            <div class="flex">
+                <form
+                    method="POST"
+                    action="{{ cp_route('utilities.cache.warm', 'stache') }}"
+                    class="ltr:mr-2 rtl:ml-2"
+                >
+                    @csrf
+                    <button class="btn">{{ __('Warm') }}</button>
+                </form>
+                <form method="POST" action="{{ cp_route('utilities.cache.clear', 'stache') }}">
+                    @csrf
+                    <button class="btn">{{ __('Clear') }}</button>
+                </form>
             </div>
         </div>
-        <div class="p-4 bg-gray-200 dark:bg-dark-700 border-t dark:border-dark-900">
-            <div class="flex justify-between items-center">
-                <div class="rtl:pl-8 ltr:pr-8">
-                    <h2 class="font-bold">{{ __('Static Page Cache') }}</h2>
-                    <p class="text-gray dark:text-dark-150 text-sm my-2">{{ __('statamic::messages.cache_utility_static_cache_description') }}</p>
-                </div>
-                @if ($static['enabled'])
-                    <form method="POST" action="{{ cp_route('utilities.cache.clear', 'static') }}">
-                        @csrf
-                        <button class="btn">{{ __('Clear') }}</button>
-                    </form>
-                @endif
-            </div>
-            <div class="text-sm text-gray dark:text-dark-150 flex">
-                <div class="rtl:ml-4 ltr:mr-4 badge-pill-sm bg-white dark:bg-dark-700 border dark:border-dark-900"><span class="text-gray-800 dark:text-dark-150 font-medium">{{ __('Strategy') }}:</span> {{ $static['strategy'] }}</div>
-                @if ($static['enabled'])
-                    <div class="rtl:ml-4 ltr:mr-4 badge-pill-sm bg-white dark:bg-dark-700 border dark:border-dark-900"><span class="text-gray-800 dark:text-dark-150 font-medium">{{ __('Pages') }}:</span> {{ $static['count'] }}</div>
-                @endif
+        <div class="flex text-sm text-gray dark:text-dark-150">
+            <div class="badge-pill-sm ltr:mr-4 rtl:ml-4">
+                <span class="font-medium text-gray-800 dark:text-dark-150">{{ __('Records') }}:</span>
+                {{ $stache['records'] }}
             </div>
-        </div>
+            @if ($stache['size'])
+                <div class="badge-pill-sm ltr:mr-4 rtl:ml-4">
+                    <span class="font-medium text-gray-800 dark:text-dark-150">{{ __('Size') }}:</span>
+                    {{ $stache['size'] }}
+                </div>
+            @endif
+
+            @if ($stache['time'])
+                <div class="badge-pill-sm ltr:mr-4 rtl:ml-4">
+                    <span class="font-medium text-gray-800 dark:text-dark-150">{{ __('Build time') }}:</span>
+                    {{ $stache['time'] }}
+                </div>
+            @endif
 
-        <div class="p-4 border-t dark:border-dark-900">
-            <div class="flex justify-between items-center">
-                <div class="rtl:pl-8 ltr:pr-8">
-                    <h2 class="font-bold">{{ __('Application Cache') }}</h2>
-                    <p class="text-gray dark:text-dark-150 text-sm my-2">{{ __('statamic::messages.cache_utility_application_cache_description') }}</p>
+            @if ($stache['rebuilt'])
+                <div class="badge-pill-sm">
+                    <span class="font-medium text-gray-800 dark:text-dark-150">{{ __('Last rebuild') }}:</span>
+                    {{ $stache['rebuilt'] }}
                 </div>
-                <form method="POST" action="{{ cp_route('utilities.cache.clear', 'application') }}">
+            @endif
+        </div>
+    </div>
+    <div class="border-t bg-gray-200 p-4 dark:border-dark-900 dark:bg-dark-700">
+        <div class="flex items-center justify-between">
+            <div class="ltr:pr-8 rtl:pl-8">
+                <h2 class="font-bold">{{ __('Static Page Cache') }}</h2>
+                <p class="my-2 text-sm text-gray dark:text-dark-150">
+                    {{ __('statamic::messages.cache_utility_static_cache_description') }}
+                </p>
+            </div>
+            @if ($static['enabled'])
+                <form method="POST" action="{{ cp_route('utilities.cache.clear', 'static') }}">
                     @csrf
                     <button class="btn">{{ __('Clear') }}</button>
                 </form>
+            @endif
+        </div>
+        <div class="flex text-sm text-gray dark:text-dark-150">
+            <div class="badge-pill-sm border bg-white dark:border-dark-900 dark:bg-dark-700 ltr:mr-4 rtl:ml-4">
+                <span class="font-medium text-gray-800 dark:text-dark-150">{{ __('Strategy') }}:</span>
+                {{ $static['strategy'] }}
             </div>
-            <div class="text-sm text-gray dark:text-dark-150 flex">
-                <div class="rtl:ml-4 ltr:mr-4 badge-pill-sm"><span class="text-gray-800 dark:text-dark-150 font-medium">{{ __('Driver') }}:</span> {{ $cache['driver'] }}</div>
+            @if ($static['enabled'])
+                <div class="badge-pill-sm border bg-white dark:border-dark-900 dark:bg-dark-700 ltr:mr-4 rtl:ml-4">
+                    <span class="font-medium text-gray-800 dark:text-dark-150">{{ __('Pages') }}:</span>
+                    {{ $static['count'] }}
+                </div>
+            @endif
+        </div>
+    </div>
+
+    <div class="border-t p-4 dark:border-dark-900">
+        <div class="flex items-center justify-between">
+            <div class="ltr:pr-8 rtl:pl-8">
+                <h2 class="font-bold">{{ __('Application Cache') }}</h2>
+                <p class="my-2 text-sm text-gray dark:text-dark-150">
+                    {{ __('statamic::messages.cache_utility_application_cache_description') }}
+                </p>
+            </div>
+            <form method="POST" action="{{ cp_route('utilities.cache.clear', 'application') }}">
+                @csrf
+                <button class="btn">{{ __('Clear') }}</button>
+            </form>
+        </div>
+        <div class="flex text-sm text-gray dark:text-dark-150">
+            <div class="badge-pill-sm ltr:mr-4 rtl:ml-4">
+                <span class="font-medium text-gray-800 dark:text-dark-150">{{ __('Driver') }}:</span>
+                {{ $cache['driver'] }}
             </div>
         </div>
+    </div>
 
-        <div class="p-4 border-t dark:border-dark-900 bg-gray-200 dark:bg-dark-700 rounded-b">
-            <div class="flex justify-between items-center">
-                <div class="rtl:pl-8 ltr:pr-8">
-                    <h2 class="font-bold">{{ __('Image Cache') }}</h2>
-                    <p class="text-gray dark:text-dark-150 text-sm my-2">{{ __('statamic::messages.cache_utility_image_cache_description') }}</p>
-                </div>
-                <form method="POST" action="{{ cp_route('utilities.cache.clear', 'image') }}">
-                    @csrf
-                    <button class="btn">{{ __('Clear') }}</button>
-                </form>
+    <div class="rounded-b border-t bg-gray-200 p-4 dark:border-dark-900 dark:bg-dark-700">
+        <div class="flex items-center justify-between">
+            <div class="ltr:pr-8 rtl:pl-8">
+                <h2 class="font-bold">{{ __('Image Cache') }}</h2>
+                <p class="my-2 text-sm text-gray dark:text-dark-150">
+                    {{ __('statamic::messages.cache_utility_image_cache_description') }}
+                </p>
+            </div>
+            <form method="POST" action="{{ cp_route('utilities.cache.clear', 'image') }}">
+                @csrf
+                <button class="btn">{{ __('Clear') }}</button>
+            </form>
+        </div>
+        <div class="flex text-sm text-gray dark:text-dark-150">
+            <div class="badge-pill-sm border bg-white dark:border-dark-900 dark:bg-dark-700 ltr:mr-4 rtl:ml-4">
+                <span class="font-medium text-gray-800 dark:text-dark-150">{{ __('Cached images') }}:</span>
+                {{ $images['count'] }}
             </div>
-            <div class="text-sm text-gray dark:text-dark-150 flex">
-                <div class="rtl:ml-4 ltr:mr-4 badge-pill-sm bg-white dark:bg-dark-700 border dark:border-dark-900"><span class="text-gray-800 dark:text-dark-150 font-medium">{{ __('Cached images') }}:</span> {{ $images['count'] }}</div>
-                <div class="rtl:ml-4 ltr:mr-4 badge-pill-sm bg-white dark:bg-dark-700 border dark:border-dark-900"><span class="text-gray-800 dark:text-dark-150 font-medium">{{ __('Size') }}:</span> {{ $images['size'] }}</div>
+            <div class="badge-pill-sm border bg-white dark:border-dark-900 dark:bg-dark-700 ltr:mr-4 rtl:ml-4">
+                <span class="font-medium text-gray-800 dark:text-dark-150">{{ __('Size') }}:</span>
+                {{ $images['size'] }}
             </div>
         </div>
     </div>
+</div>
 
 @stop
diff --git a/resources/views/utilities/email.blade.php b/resources/views/utilities/email.blade.php
index 2ad57f9702..4f91c0c292 100644
--- a/resources/views/utilities/email.blade.php
+++ b/resources/views/utilities/email.blade.php
@@ -1,51 +1,63 @@
-@php use function Statamic\trans as __; @endphp
+@php
+    use function Statamic\trans as __;
+@endphp
 
 @extends('statamic::layout')
 @section('title', Statamic::crumb(__('Email'), __('Utilities')))
 
 @section('content')
 
-    <header class="mb-6">
-        @include('statamic::partials.breadcrumb', [
+<header class="mb-6">
+    @include(
+        'statamic::partials.breadcrumb',
+        [
             'url' => cp_route('utilities.index'),
-            'title' => __('Utilities')
-        ])
-        <h1>{{ __('Email') }}</h1>
-    </header>
+            'title' => __('Utilities'),
+        ]
+    )
+    <h1>{{ __('Email') }}</h1>
+</header>
 
-    <div class="card">
-        <form method="POST" action="{{ cp_route('utilities.email') }}">
-            @csrf
+<div class="card">
+    <form method="POST" action="{{ cp_route('utilities.email') }}">
+        @csrf
 
-            <div class="flex items-center">
-                <input class="input-text rtl:ml-4 ltr:mr-4" type="text" name="email" value="{{ old('email', $user->email()) }}" />
-                <button type="submit" class="btn-primary">{{ __('Send Test Email') }}</button>
-            </div>
-            @if ($errors->has('email'))
-                <p class="mt-2"><small class="help-block text-red-500">{{ $errors->first('email') }}</small></p>
-            @endif
-        </form>
-    </div>
+        <div class="flex items-center">
+            <input
+                class="input-text ltr:mr-4 rtl:ml-4"
+                type="text"
+                name="email"
+                value="{{ old('email', $user->email()) }}"
+            />
+            <button type="submit" class="btn-primary">{{ __('Send Test Email') }}</button>
+        </div>
+        @if ($errors->has('email'))
+            <p class="mt-2"><small class="help-block text-red-500">{{ $errors->first('email') }}</small></p>
+        @endif
+    </form>
+</div>
 
-    <h2 class="mt-10 mb-2 font-bold text-lg">{{ __('Configuration') }}</h2>
-    <p class="text-sm text-gray mb-4">{!! __('statamic::messages.email_utility_configuration_description', ['path' => config_path('mail.php')]) !!}</p>
-    <div class="card p-0">
-        <table class="data-table">
+<h2 class="mb-2 mt-10 text-lg font-bold">{{ __('Configuration') }}</h2>
+<p class="mb-4 text-sm text-gray">
+    {!! __('statamic::messages.email_utility_configuration_description', ['path' => config_path('mail.php')]) !!}
+</p>
+<div class="card p-0">
+    <table class="data-table">
+        <tr>
+            <th class="w-1/4 py-2 ltr:pl-4 rtl:pr-4">{{ __('Default Mailer') }}</th>
+            <td><code>{{ config('mail.default') }}</code></td>
+        </tr>
+        @if (config('mail.default') == 'smtp')
             <tr>
-                <th class="rtl:pr-4 ltr:pl-4 py-2 w-1/4">{{ __('Default Mailer') }}</th>
-                <td><code>{{ config('mail.default') }}</code></td>
-            </tr>
-            @if (config('mail.default') == 'smtp')
-            <tr>
-                <th class="rtl:pr-4 ltr:pl-4 py-2 w-1/4">{{ __('Host') }}</th>
+                <th class="w-1/4 py-2 ltr:pl-4 rtl:pr-4">{{ __('Host') }}</th>
                 <td><code>{{ config('mail.mailers.smtp.host') }}</code></td>
             </tr>
             <tr>
-                <th class="rtl:pr-4 ltr:pl-4 py-2 w-1/4">{{ __('Port') }}</th>
+                <th class="w-1/4 py-2 ltr:pl-4 rtl:pr-4">{{ __('Port') }}</th>
                 <td><code>{{ config('mail.mailers.smtp.port') }}</code></td>
             </tr>
             <tr>
-                <th class="rtl:pr-4 ltr:pl-4 py-2 w-1/4">{{ __('Encryption') }}</th>
+                <th class="w-1/4 py-2 ltr:pl-4 rtl:pr-4">{{ __('Encryption') }}</th>
                 <td>
                     @if (config('mail.mailers.smtp.encryption'))
                         <code>{{ config('mail.mailers.smtp.encryption') }}</code>
@@ -53,7 +65,7 @@
                 </td>
             </tr>
             <tr>
-                <th class="rtl:pr-4 ltr:pl-4 py-2 w-1/4">{{ __('Username') }}</th>
+                <th class="w-1/4 py-2 ltr:pl-4 rtl:pr-4">{{ __('Username') }}</th>
                 <td>
                     @if (config('mail.mailers.smtp.username'))
                         <code>{{ config('mail.mailers.smtp.username') }}</code>
@@ -61,53 +73,56 @@
                 </td>
             </tr>
             <tr>
-                <th class="rtl:pr-4 ltr:pl-4 py-2 w-1/4">{{ __('Password') }}</th>
+                <th class="w-1/4 py-2 ltr:pl-4 rtl:pr-4">{{ __('Password') }}</th>
                 <td>
                     @if (config('mail.mailers.smtp.password'))
                         <code>{{ config('mail.mailers.smtp.password') }}</code>
                     @endif
                 </td>
             </tr>
-            @endif
-            @if (config('mail.default') == 'sendmail')
+        @endif
+
+        @if (config('mail.default') == 'sendmail')
             <tr>
-                <th class="rtl:pr-4 ltr:pl-4 py-2 w-1/4">{{ __('Sendmail') }}</th>
+                <th class="w-1/4 py-2 ltr:pl-4 rtl:pr-4">{{ __('Sendmail') }}</th>
                 <td><code>{{ config('mail.mailers.sendmail.path') }}</code></td>
             </tr>
-            @endif
-            <tr>
-                <th class="rtl:pr-4 ltr:pl-4 py-2 w-1/4">{{ __('Default From Address') }}</th>
-                <td>
-                    @if (config('mail.from.address'))
-                        <code>{{ config('mail.from.address') }}</code>
-                    @endif
-                </td>
-            </tr>
-            <tr>
-                <th class="rtl:pr-4 ltr:pl-4 py-2 w-1/4">{{ __('Default From Name') }}</th>
-                <td>
-                    @if (config('mail.from.name'))
-                        <code>{{ config('mail.from.name') }}</code>
-                    @endif
-                </td>
-            </tr>
-            <tr>
-                <th class="rtl:pr-4 ltr:pl-4 py-2 w-1/4">{{ __('Markdown theme') }}</th>
-                <td>
-                    @if (config('mail.markdown.theme'))
-                        <code>{{ config('mail.markdown.theme') }}</code>
-                    @endif
-                </td>
-            </tr>
-            <tr>
-                <th class="rtl:pr-4 ltr:pl-4 py-2 w-1/4">{{ __('Markdown paths') }}</th>
-                <td>
-                    @foreach (config('mail.markdown.paths') as $path)
-                        <code>{{ $path }}</code><br>
-                    @endforeach
-                </td>
-            </tr>
-        </table>
-    </div>
+        @endif
+
+        <tr>
+            <th class="w-1/4 py-2 ltr:pl-4 rtl:pr-4">{{ __('Default From Address') }}</th>
+            <td>
+                @if (config('mail.from.address'))
+                    <code>{{ config('mail.from.address') }}</code>
+                @endif
+            </td>
+        </tr>
+        <tr>
+            <th class="w-1/4 py-2 ltr:pl-4 rtl:pr-4">{{ __('Default From Name') }}</th>
+            <td>
+                @if (config('mail.from.name'))
+                    <code>{{ config('mail.from.name') }}</code>
+                @endif
+            </td>
+        </tr>
+        <tr>
+            <th class="w-1/4 py-2 ltr:pl-4 rtl:pr-4">{{ __('Markdown theme') }}</th>
+            <td>
+                @if (config('mail.markdown.theme'))
+                    <code>{{ config('mail.markdown.theme') }}</code>
+                @endif
+            </td>
+        </tr>
+        <tr>
+            <th class="w-1/4 py-2 ltr:pl-4 rtl:pr-4">{{ __('Markdown paths') }}</th>
+            <td>
+                @foreach (config('mail.markdown.paths') as $path)
+                    <code>{{ $path }}</code>
+                    <br />
+                @endforeach
+            </td>
+        </tr>
+    </table>
+</div>
 
 @stop
diff --git a/resources/views/utilities/git.blade.php b/resources/views/utilities/git.blade.php
index eebae2bb27..2e65c1ba61 100644
--- a/resources/views/utilities/git.blade.php
+++ b/resources/views/utilities/git.blade.php
@@ -1,51 +1,77 @@
-@php use function Statamic\trans as __; @endphp
+@php
+    use function Statamic\trans as __;
+@endphp
 
 @extends('statamic::layout')
 @section('title', Statamic::crumb('Git', __('Utilities')))
 
 @section('content')
 
-    <header class="mb-6">
-        @include('statamic::partials.breadcrumb', [
+<header class="mb-6">
+    @include(
+        'statamic::partials.breadcrumb',
+        [
             'url' => cp_route('utilities.index'),
-            'title' => __('Utilities')
-        ])
+            'title' => __('Utilities'),
+        ]
+    )
 
-        <div class="flex items-center justify-between">
-            <h1>Git</h1>
+    <div class="flex items-center justify-between">
+        <h1>Git</h1>
 
-            <form method="POST" action="{{ cp_route('utilities.git.commit') }}">
-                @csrf
+        <form method="POST" action="{{ cp_route('utilities.git.commit') }}">
+            @csrf
 
-                <div class="flex items-center">
-                    <button type="submit" class="btn-primary" {{ $statuses ? '': 'disabled' }}>{{ __('Commit') }}</button>
-                </div>
-            </form>
-        </div>
-    </header>
-
-    <div class="card p-0">
-        @forelse($statuses ?? [] as $path => $status)
-            <div class="p-4 {{ $loop->first ? '' : 'border-t dark:border-dark-900' }}">
-                <h2>{{ __('Repository path') }}: <code class="font-normal">{{ $path }}</code></h2>
-                <pre class="mt-4 p-4 rounded text-sm font-mono bg-gray-300 dark:bg-dark-800 text-gray-700 dark:text-dark-150" dir="ltr">{{ $status->status }}</pre>
-                <div class="mt-4 text-sm text-gray dark:text-dark-150 flex">
-                    <div class="rtl:ml-4 ltr:mr-4 badge-pill-sm"><span class="text-gray-800 dark:text-dark-150 font-medium">{{ __('Affected files') }}:</span> {{ $status->totalCount }}</div>
-                    @if ($status->addedCount)
-                        <div class="rtl:ml-4 ltr:mr-4 badge-pill-sm"><span class="text-gray-800 dark:text-dark-150 font-medium">{{ __('Added') }}:</span> {{ $status->addedCount }}</div>
-                    @endif
-                    @if ($status->modifiedCount)
-                        <div class="rtl:ml-4 ltr:mr-4 badge-pill-sm"><span class="text-gray-800 dark:text-dark-150 font-medium">{{ __('Modified') }}:</span> {{ $status->modifiedCount }}</div>
-                    @endif
-                    @if ($status->deletedCount)
-                        <div class="rtl:ml-4 ltr:mr-4 badge-pill-sm"><span class="text-gray-800 dark:text-dark-150 font-medium">{{ __('Deleted') }}:</span> {{ $status->deletedCount }}</div>
-                    @endif
-                </div>
+            <div class="flex items-center">
+                <button type="submit" class="btn-primary" {{ $statuses ? '' : 'disabled' }}>{{ __('Commit') }}</button>
             </div>
-        @empty
-            <p class="p-6 italic text-gray-600 dark:text-dark-200">{{ __('statamic::messages.git_nothing_to_commit') }}</p>
-        @endforelse
+        </form>
     </div>
+</header>
+
+<div class="card p-0">
+    @forelse ($statuses ?? [] as $path => $status)
+        <div class="{{ $loop->first ? '' : 'border-t dark:border-dark-900' }} p-4">
+            <h2>
+                {{ __('Repository path') }}:
+                <code class="font-normal">{{ $path }}</code>
+            </h2>
+            <pre
+                class="mt-4 rounded bg-gray-300 p-4 font-mono text-sm text-gray-700 dark:bg-dark-800 dark:text-dark-150"
+                dir="ltr"
+            >
+{{ $status->status }}</pre
+            >
+            <div class="mt-4 flex text-sm text-gray dark:text-dark-150">
+                <div class="badge-pill-sm ltr:mr-4 rtl:ml-4">
+                    <span class="font-medium text-gray-800 dark:text-dark-150">{{ __('Affected files') }}:</span>
+                    {{ $status->totalCount }}
+                </div>
+                @if ($status->addedCount)
+                    <div class="badge-pill-sm ltr:mr-4 rtl:ml-4">
+                        <span class="font-medium text-gray-800 dark:text-dark-150">{{ __('Added') }}:</span>
+                        {{ $status->addedCount }}
+                    </div>
+                @endif
+
+                @if ($status->modifiedCount)
+                    <div class="badge-pill-sm ltr:mr-4 rtl:ml-4">
+                        <span class="font-medium text-gray-800 dark:text-dark-150">{{ __('Modified') }}:</span>
+                        {{ $status->modifiedCount }}
+                    </div>
+                @endif
 
+                @if ($status->deletedCount)
+                    <div class="badge-pill-sm ltr:mr-4 rtl:ml-4">
+                        <span class="font-medium text-gray-800 dark:text-dark-150">{{ __('Deleted') }}:</span>
+                        {{ $status->deletedCount }}
+                    </div>
+                @endif
+            </div>
+        </div>
+    @empty
+        <p class="p-6 italic text-gray-600 dark:text-dark-200">{{ __('statamic::messages.git_nothing_to_commit') }}</p>
+    @endforelse
+</div>
 
 @stop
diff --git a/resources/views/utilities/index.blade.php b/resources/views/utilities/index.blade.php
index fb91e5baa0..0b23353e2a 100644
--- a/resources/views/utilities/index.blade.php
+++ b/resources/views/utilities/index.blade.php
@@ -1,33 +1,39 @@
-@php use function Statamic\trans as __; @endphp
+@php
+    use function Statamic\trans as __;
+@endphp
 
 @extends('statamic::layout')
 @section('title', __('Utilities'))
 
 @section('content')
-
     <header class="mb-6">
         <h1>{{ __('Utilities') }}</h1>
     </header>
 
-    <div class="card p-4 content">
+    <div class="card content p-4">
         <div class="flex flex-wrap">
-        @foreach ($utilities as $utility)
-            <a href="{{ $utility->url() }}" class="w-full lg:w-1/2 p-4 md:flex items-start hover:bg-gray-200 dark:hover:bg-dark-575 border border-transparent dark:hover:border-dark-400 rounded-md group">
-                <div class="h-8 w-8 rtl:ml-4 ltr:mr-4 text-gray-800 dark:text-dark-175">
-                    {!! $utility->icon() !!}
-                </div>
-                <div class="text-blue flex-1 mb-4 md:mb-0 rtl:md:ml-6 ltr:md:mr-6">
-                    <h3>{{ $utility->title() }}</h3>
-                    <p class="text-xs">{{ $utility->description() }}</p>
-                </div>
-            </a>
-        @endforeach
+            @foreach ($utilities as $utility)
+                <a
+                    href="{{ $utility->url() }}"
+                    class="group w-full items-start rounded-md border border-transparent p-4 hover:bg-gray-200 dark:hover:border-dark-400 dark:hover:bg-dark-575 md:flex lg:w-1/2"
+                >
+                    <div class="h-8 w-8 text-gray-800 dark:text-dark-175 ltr:mr-4 rtl:ml-4">
+                        {!! $utility->icon() !!}
+                    </div>
+                    <div class="mb-4 flex-1 text-blue md:mb-0 ltr:md:mr-6 rtl:md:ml-6">
+                        <h3>{{ $utility->title() }}</h3>
+                        <p class="text-xs">{{ $utility->description() }}</p>
+                    </div>
+                </a>
+            @endforeach
         </div>
     </div>
 
-    @include('statamic::partials.docs-callout', [
-        'topic' => __('Utilities'),
-        'url' => Statamic::docsUrl('extending/utilities')
-    ])
-
+    @include(
+        'statamic::partials.docs-callout',
+        [
+            'topic' => __('Utilities'),
+            'url' => Statamic::docsUrl('extending/utilities'),
+        ]
+    )
 @endsection
diff --git a/resources/views/utilities/phpinfo.blade.php b/resources/views/utilities/phpinfo.blade.php
index 823ed7c878..8e4287fb51 100644
--- a/resources/views/utilities/phpinfo.blade.php
+++ b/resources/views/utilities/phpinfo.blade.php
@@ -1,39 +1,44 @@
-@php use function Statamic\trans as __; @endphp
+@php
+    use function Statamic\trans as __;
+@endphp
 
 @extends('statamic::layout')
 @section('title', __('PHP Info'))
 
 @section('content')
 
-    <header class="mb-6">
-        @include('statamic::partials.breadcrumb', [
+<header class="mb-6">
+    @include(
+        'statamic::partials.breadcrumb',
+        [
             'url' => cp_route('utilities.index'),
-            'title' => __('Utilities')
-        ])
-        <h1>{{ __('PHP Info') }}</h1>
-    </header>
+            'title' => __('Utilities'),
+        ]
+    )
+    <h1>{{ __('PHP Info') }}</h1>
+</header>
 
+<div class="card p-0" dir="ltr">
+    <table class="data-table ltr:text-left">
+        <tr>
+            <th class="w-1/4 py-2 ltr:pl-4 rtl:pr-4">{{ __('PHP Version') }}</th>
+            <td>{{ PHP_VERSION }}</td>
+        </tr>
+    </table>
+</div>
+
+@foreach ($phpinfo as $section => $items)
+    <h2 class="mb-2 mt-8 text-lg font-bold" dir="ltr">{{ $section }}</h2>
     <div class="card p-0" dir="ltr">
         <table class="data-table ltr:text-left">
-            <tr>
-                <th class="rtl:pr-4 ltr:pl-4 py-2 w-1/4">{{ __('PHP Version') }}</th>
-                <td>{{ PHP_VERSION }}</td>
-            </tr>
-        </table>
-    </div>
-
-    @foreach ($phpinfo as $section => $items)
-        <h2 class="mt-8 mb-2 font-bold text-lg" dir="ltr">{{ $section }}</h2>
-        <div class="card p-0" dir="ltr">
-            <table class="data-table ltr:text-left">
-                @foreach ($items as $name => $value)
+            @foreach ($items as $name => $value)
                 <tr>
-                    <th class="rtl:pr-4 ltr:pl-4 py-2 w-1/4">{{ $name }}</th>
+                    <th class="w-1/4 py-2 ltr:pl-4 rtl:pr-4">{{ $name }}</th>
                     <td class="break-all">{{ is_array($value) ? join(', ', $value) : $value }}</td>
                 </tr>
-                @endforeach
-            </table>
-        </div>
-    @endforeach
+            @endforeach
+        </table>
+    </div>
+@endforeach
 
 @stop
diff --git a/resources/views/utilities/search.blade.php b/resources/views/utilities/search.blade.php
index 059f28154f..ed96347e5d 100644
--- a/resources/views/utilities/search.blade.php
+++ b/resources/views/utilities/search.blade.php
@@ -1,95 +1,108 @@
-@php use function Statamic\trans as __; @endphp
+@php
+    use function Statamic\trans as __;
+@endphp
 
 @extends('statamic::layout')
 @section('title', __('Rebuild Search'))
 
 @section('content')
 
-    <header class="mb-6">
-        @include('statamic::partials.breadcrumb', [
+<header class="mb-6">
+    @include(
+        'statamic::partials.breadcrumb',
+        [
             'url' => cp_route('utilities.index'),
-            'title' => __('Utilities')
-        ])
-        <div class="flex items-center justify-between">
-            <h1>{{ __('Search Indexes') }}</h1>
+            'title' => __('Utilities'),
+        ]
+    )
+    <div class="flex items-center justify-between">
+        <h1>{{ __('Search Indexes') }}</h1>
 
-            <form method="POST" action="{{ cp_route('utilities.search', 'all') }}">
-                @csrf
-                @foreach (\Statamic\Facades\Search::indexes() as $index)
-                    <input type="hidden" name="indexes[]" value="{{ $index->name() }}::{{ $index->locale() }}">
-                @endforeach
-                <button class="btn-primary">{{ __('Update All') }}</button>
-            </form>
-        </div>
-    </header>
+        <form method="POST" action="{{ cp_route('utilities.search', 'all') }}">
+            @csrf
+            @foreach (\Statamic\Facades\Search::indexes() as $index)
+                <input type="hidden" name="indexes[]" value="{{ $index->name() }}::{{ $index->locale() }}" />
+            @endforeach
 
-    <div class="card p-0">
-        @if ($errors->has('indexes'))
-            <p class="p-4"><small class="help-block text-red-500">{{ $errors->first() }}</small></p>
-        @endif
+            <button class="btn-primary">{{ __('Update All') }}</button>
+        </form>
+    </div>
+</header>
 
-        <table class="data-table">
-            <thead>
-                <tr>
-                    <th>{{ __('Index') }}</th>
-                    <th>{{ __('Driver') }}</th>
-                    <th>{{ __('Searchables') }}</th>
-                    <th>{{ __('Fields') }}</th>
-                    <th></th>
-                </tr>
-            </thead>
-            <tbody>
-                @foreach (\Statamic\Facades\Search::indexes() as $index)
-                    <tr class="align-top">
-                        <td>
-                            <div class="flex items-start">
-                                @cp_svg('search-drivers/' . $index->config()['driver'], 'flex w-6 h-6 rtl:ml-2 ltr:mr-2 -mt-0.5 shrink-0', 'search-drivers/local')
-                                <span class="text-gray-800 dark:text-dark-150">{{ $index->title() }}</span>
+<div class="card p-0">
+    @if ($errors->has('indexes'))
+        <p class="p-4"><small class="help-block text-red-500">{{ $errors->first() }}</small></p>
+    @endif
+
+    <table class="data-table">
+        <thead>
+            <tr>
+                <th>{{ __('Index') }}</th>
+                <th>{{ __('Driver') }}</th>
+                <th>{{ __('Searchables') }}</th>
+                <th>{{ __('Fields') }}</th>
+                <th></th>
+            </tr>
+        </thead>
+        <tbody>
+            @foreach (\Statamic\Facades\Search::indexes() as $index)
+                <tr class="align-top">
+                    <td>
+                        <div class="flex items-start">
+                            @cp_svg('search-drivers/' . $index->config()['driver'], '-mt-0.5 flex h-6 w-6 shrink-0 ltr:mr-2 rtl:ml-2', 'search-drivers/local')
+                            <span class="text-gray-800 dark:text-dark-150">{{ $index->title() }}</span>
+                        </div>
+                    </td>
+                    <td>
+                        {{ ucwords($index->config()['driver']) }}
+                    </td>
+                    <td>
+                        @if (is_string($index->config()['searchables']))
+                            <div class="flex flex-wrap text-sm text-gray">
+                                <span class="badge-pill-sm">{{ $index->config()['searchables'] }}</span>
                             </div>
-                        </td>
-                        <td>
-                            {{ ucwords($index->config()['driver']) }}
-                        </td>
-                        <td>
-                            @if (is_string($index->config()['searchables']))
-                                <div class="text-sm text-gray flex flex-wrap">
-                                    <span class="badge-pill-sm">{{ $index->config()['searchables'] }}</span>
-                                </div>
-                            @else
-                                <div class="text-sm text-gray flex flex-wrap gap-1">
-                                    @foreach($index->config()['searchables'] as $searchable)
-                                        <div class="badge-pill-sm">
-                                            {{ $searchable }}
-                                        </div>
-                                    @endforeach
-                                </div>
-                            @endif
-                        </td>
-                        <td>
-                            <div class="text-sm text-gray flex flex-wrap gap-1">
-                                @foreach($index->config()['fields'] as $field)
+                        @else
+                            <div class="flex flex-wrap gap-1 text-sm text-gray">
+                                @foreach ($index->config()['searchables'] as $searchable)
                                     <div class="badge-pill-sm">
-                                        {{ $field }}
+                                        {{ $searchable }}
                                     </div>
                                 @endforeach
                             </div>
-                        </td>
-                        <td class="rtl:text-left ltr:text-right">
-                            <form method="POST" action="{{ cp_route('utilities.search') }}">
-                                @csrf
-                                <input type="hidden" name="indexes[]" value="{{ $index->name() }}::{{ $index->locale() }}">
-                                <button type="submit" class="btn btn-xs -my-1">{{ __('Update') }}</button>
-                            </form>
-                        </td>
-                    </tr>
-                    @endforeach
-                </tbody>
-        </table>
-    </div>
+                        @endif
+                    </td>
+                    <td>
+                        <div class="flex flex-wrap gap-1 text-sm text-gray">
+                            @foreach ($index->config()['fields'] as $field)
+                                <div class="badge-pill-sm">
+                                    {{ $field }}
+                                </div>
+                            @endforeach
+                        </div>
+                    </td>
+                    <td class="ltr:text-right rtl:text-left">
+                        <form method="POST" action="{{ cp_route('utilities.search') }}">
+                            @csrf
+                            <input
+                                type="hidden"
+                                name="indexes[]"
+                                value="{{ $index->name() }}::{{ $index->locale() }}"
+                            />
+                            <button type="submit" class="btn btn-xs -my-1">{{ __('Update') }}</button>
+                        </form>
+                    </td>
+                </tr>
+            @endforeach
+        </tbody>
+    </table>
+</div>
 
-    @include('statamic::partials.docs-callout', [
+@include(
+    'statamic::partials.docs-callout',
+    [
         'topic' => __('Search Indexes'),
-        'url' => Statamic::docsUrl('search#indexes')
-    ])
+        'url' => Statamic::docsUrl('search#indexes'),
+    ]
+)
 
 @stop
diff --git a/resources/views/widgets/collection.blade.php b/resources/views/widgets/collection.blade.php
index 6da2090228..c3798d9031 100644
--- a/resources/views/widgets/collection.blade.php
+++ b/resources/views/widgets/collection.blade.php
@@ -1,21 +1,24 @@
-@php use Statamic\Facades\Site; @endphp
+@php
+    use Statamic\Facades\Site;
+@endphp
 
-<div class="card p-0 overflow-hidden h-full flex flex-col">
-    <div class="flex justify-between items-center p-4 border-b dark:bg-dark-650 dark:border-b dark:border-dark-900">
+<div class="card flex h-full flex-col overflow-hidden p-0">
+    <div class="flex items-center justify-between border-b p-4 dark:border-b dark:border-dark-900 dark:bg-dark-650">
         <h2>
             <a class="flex items-center" href="{{ $collection->showUrl() }}">
-                <div class="h-6 w-6 rtl:ml-2 ltr:mr-2 text-gray-800 dark:text-dark-200">
+                <div class="h-6 w-6 text-gray-800 dark:text-dark-200 ltr:mr-2 rtl:ml-2">
                     @cp_svg('icons/light/content-writing')
                 </div>
                 <span v-pre>{{ __($title) }}</span>
             </a>
         </h2>
-        @if($canCreate)
-        <create-entry-button
-            button-class="btn-primary"
-            url="{{ $collection->createEntryUrl(Site::selected()) }}"
-            :blueprints="{{ $blueprints->toJson() }}"
-            text="{{ $button }}"></create-entry-button>
+        @if ($canCreate)
+            <create-entry-button
+                button-class="btn-primary"
+                url="{{ $collection->createEntryUrl(Site::selected()) }}"
+                :blueprints="{{ $blueprints->toJson() }}"
+                text="{{ $button }}"
+            ></create-entry-button>
         @endif
     </div>
     <collection-widget
diff --git a/resources/views/widgets/getting-started.blade.php b/resources/views/widgets/getting-started.blade.php
index 3303001d5f..a37f9dbf7b 100644
--- a/resources/views/widgets/getting-started.blade.php
+++ b/resources/views/widgets/getting-started.blade.php
@@ -1,11 +1,13 @@
-@php use function Statamic\trans as __; @endphp
+@php
+    use function Statamic\trans as __;
+@endphp
 
-<div class="card card-lg p-0 content">
+<div class="card card-lg content p-0">
     <header>
         <h1>{{ __('statamic::messages.getting_started_widget_header') }}</h1>
         <p>{{ __('statamic::messages.getting_started_widget_intro') }}</p>
     </header>
-    <div class="grid lg:grid-cols-2 p-4">
+    <div class="grid p-4 lg:grid-cols-2">
         <a href="https://statamic.dev" class="super-btn">
             @cp_svg('icons/light/book-pages')
             <div class="flex-1">
@@ -13,15 +15,16 @@
                 <p>{{ __('statamic::messages.getting_started_widget_docs') }}</p>
             </div>
         </a>
-        @if (!Statamic::pro())
-        <a href="https://statamic.dev/licensing" class="super-btn">
-            @cp_svg('icons/light/pro-ribbon')
-            <div class="flex-1">
-                <h3>{{ __('Enable Pro Mode') }}</h3>
-                <p>{{ __('statamic::messages.getting_started_widget_pro') }}</p>
-            </div>
-        </a>
+        @if (! Statamic::pro())
+            <a href="https://statamic.dev/licensing" class="super-btn">
+                @cp_svg('icons/light/pro-ribbon')
+                <div class="flex-1">
+                    <h3>{{ __('Enable Pro Mode') }}</h3>
+                    <p>{{ __('statamic::messages.getting_started_widget_pro') }}</p>
+                </div>
+            </a>
         @endif
+
         <a href="{{ cp_route('collections.create') }}" class="super-btn">
             @cp_svg('icons/light/content-writing')
             <div class="flex-1">
diff --git a/resources/views/widgets/updater.blade.php b/resources/views/widgets/updater.blade.php
index 1f474e3e6d..a7ee0e3a0c 100644
--- a/resources/views/widgets/updater.blade.php
+++ b/resources/views/widgets/updater.blade.php
@@ -1,9 +1,11 @@
-@php use function Statamic\trans as __; @endphp
+@php
+    use function Statamic\trans as __;
+@endphp
 
-<div class="card p-0 h-full">
-    <header class="flex justify-between items-center p-4 border-b dark:bg-dark-650 dark:border-b dark:border-dark-900">
+<div class="card h-full p-0">
+    <header class="flex items-center justify-between border-b p-4 dark:border-b dark:border-dark-900 dark:bg-dark-650">
         <h2 class="flex items-center">
-            <div class="h-6 w-6 rtl:ml-2 ltr:mr-2 text-gray-800 dark:text-dark-200">
+            <div class="h-6 w-6 text-gray-800 dark:text-dark-200 ltr:mr-2 rtl:ml-2">
                 @cp_svg('icons/light/loading-bar')
             </div>
             <span>{{ __('Updates') }}</span>
@@ -16,18 +18,20 @@
     </header>
     <section class="px-4 py-2">
         @if (! $count)
-            <p class="text-base text-center text-gray-700">{{ __('Everything is up to date.') }}</p>
+            <p class="text-center text-base text-gray-700">{{ __('Everything is up to date.') }}</p>
         @endif
 
         @if ($hasStatamicUpdate)
             <div class="flex items-center justify-between text-sm">
-                <a href="{{ cp_route('updater.product', 'statamic') }}"class="hover:text-blue font-bold py-1">Statamic Core</a>
+                <a href="{{ cp_route('updater.product', 'statamic') }}" class="py-1 font-bold hover:text-blue">
+                    Statamic Core
+                </a>
             </div>
         @endif
 
         @foreach ($updatableAddons as $slug => $addon)
-            <div class="flex items-center justify-between w-full text-sm">
-                <a href="{{ cp_route('updater.product', $slug) }}" class="hover:text-blue py-1">{{ $addon }}</a>
+            <div class="flex w-full items-center justify-between text-sm">
+                <a href="{{ cp_route('updater.product', $slug) }}" class="py-1 hover:text-blue">{{ $addon }}</a>
             </div>
         @endforeach
     </section>
diff --git a/src/View/Debugbar/AntlersProfiler/resources/widget.css b/src/View/Debugbar/AntlersProfiler/resources/widget.css
index a50112243a..11b8e487ae 100644
--- a/src/View/Debugbar/AntlersProfiler/resources/widget.css
+++ b/src/View/Debugbar/AntlersProfiler/resources/widget.css
@@ -104,7 +104,7 @@
 }
 
 .antlers-trace-editor-link:hover {
-    color: #FF269E !important;
+    color: #ff269e !important;
 }
 
 .antlers-trace-editor-link svg {
@@ -161,12 +161,12 @@
 
 .antlers-trace-property-key {
     font-weight: bold !important;
-    display:inline-block;
+    display: inline-block;
 }
 
 .antlers-trace-property-value {
-    display:block !important;
-    margin-top:5px !important;
+    display: block !important;
+    margin-top: 5px !important;
 }
 
 .antlers-trace-property-desc {
diff --git a/src/View/Debugbar/AntlersProfiler/resources/widget.js b/src/View/Debugbar/AntlersProfiler/resources/widget.js
index 909fcfc29a..f49e66f6c9 100644
--- a/src/View/Debugbar/AntlersProfiler/resources/widget.js
+++ b/src/View/Debugbar/AntlersProfiler/resources/widget.js
@@ -5,7 +5,7 @@
             executionTimeGood: 2,
             executionTimeWarning: 3,
             executionTimeStrongWarning: 4,
-            executionTimeDanger: 5
+            executionTimeDanger: 5,
         },
         colors = {
             hotCode: '#f6eec7',
@@ -71,16 +71,16 @@
 
     function formatBytes(bytes) {
         if (bytes < 1024) {
-            return bytes + " bytes";
+            return bytes + ' bytes';
         } else if (bytes < 1024 * 1024) {
-            return (bytes / 1024).toFixed(2) + " KB";
+            return (bytes / 1024).toFixed(2) + ' KB';
         } else if (bytes < 1024 * 1024 * 1024) {
-            return (bytes / (1024 * 1024)).toFixed(2) + " MB";
+            return (bytes / (1024 * 1024)).toFixed(2) + ' MB';
         } else if (bytes < 1024 * 1024 * 1024 * 1024) {
-            return (bytes / (1024 * 1024 * 1024)).toFixed(2) + " GB";
+            return (bytes / (1024 * 1024 * 1024)).toFixed(2) + ' GB';
         }
 
-        return (bytes / (1024 * 1024 * 1024 * 1024)).toFixed(2) + " TB";
+        return (bytes / (1024 * 1024 * 1024 * 1024)).toFixed(2) + ' TB';
     }
 
     function makeEditorLink(data) {
@@ -96,23 +96,25 @@
                 delete obj.children;
             }
         }
-    };
+    }
 
-    var AntlersWidget = PhpDebugBar.Widgets.StatamicAntlersWidget = PhpDebugBar.Widget.extend({
+    var AntlersWidget = (PhpDebugBar.Widgets.StatamicAntlersWidget = PhpDebugBar.Widget.extend({
         className: csscls('antlers'),
 
         render: function () {
-            this.bindAttr('data', function (data) {
-                var debugWarningLabel = '';
+            this.bindAttr(
+                'data',
+                function (data) {
+                    var debugWarningLabel = '';
 
-                if (data.had_active_debug_sessions) {
-                    debugWarningLabel = `<div id="antlers-trace-debugger-warning" class="antlers-trace-metric" title="An Antlers debugger was active and may influence results." style="display:none">
+                    if (data.had_active_debug_sessions) {
+                        debugWarningLabel = `<div id="antlers-trace-debugger-warning" class="antlers-trace-metric" title="An Antlers debugger was active and may influence results." style="display:none">
     <span id="antlers-trace-debugger-symbol"></span>
     <span>Debugger Attached</span>
 </div>`;
-                }
+                    }
 
-                var $content = $(`
+                    var $content = $(`
 <div id="antlers-trace-toolbar">
     <h2>Antlers Profiler [Experimental]</h2>
     <div id="antlers-trace-metrics">
@@ -156,478 +158,479 @@
 </div>
 `);
 
-                this.$el.empty().append($content);
-
-                var btnCallGraph = document.getElementById('btn-antlers-trace-view-graph'),
-                    btnSourceGraph = document.getElementById('btn-antlers-trace-source-graph'),
-                    btnNodeGraph = document.getElementById('btn-antlers-trace-expression-graph'),
-                    btnCloseProperties = document.getElementById('btn-antlers-trace-close-properties'),
-                    tabCallGraph = document.getElementById('antlers-trace-call-report'),
-                    tabSourceGraph = document.getElementById('antlers-trace-source-graph'),
-                    $sourceGraph = $(tabSourceGraph),
-                    metricsContainer = document.getElementById('antlers-trace-metrics'),
-                    $metricsContainer = $(metricsContainer),
-                    antlersTracePanel = document.querySelector('.phpdebugbar-widgets-antlers'),
-                    debugBarPanel = antlersTracePanel.closest('.phpdebugbar-panel'),
-                    debugBarBody = document.querySelector('.phpdebugbar-body'),
-                    reportViewElement = document.getElementById('antlers-trace-reports'),
-                    propertiesView = document.getElementById('antlers-trace-properties'),
-                    reportTable = document.getElementById('antlers-trace-call-table'),
-                    propertiesContent = document.getElementById('antlers-trace-properties-content'),
-                    $propertiesContent = $(propertiesContent);
-
-                function hidePropertiesWindow() {
-                    propertiesView.style.display = 'none';
-                }
-
-
-                function openPropertiesWindow(obj) {
-                    var objProperties = [],
-                        properties = '';
-                    objProperties.push({
-                        label: 'Expression Content',
-                        value: `<span style="font-family:monospace">${obj.escapedNodeContent}</span>`,
-                        help: '',
-                    });
-
-                    objProperties.push({
-                        label: 'Source File',
-                        value: `<span style="font-family:monospace">${obj.path}</span>`,
-                        help: '',
-                    });
+                    this.$el.empty().append($content);
+
+                    var btnCallGraph = document.getElementById('btn-antlers-trace-view-graph'),
+                        btnSourceGraph = document.getElementById('btn-antlers-trace-source-graph'),
+                        btnNodeGraph = document.getElementById('btn-antlers-trace-expression-graph'),
+                        btnCloseProperties = document.getElementById('btn-antlers-trace-close-properties'),
+                        tabCallGraph = document.getElementById('antlers-trace-call-report'),
+                        tabSourceGraph = document.getElementById('antlers-trace-source-graph'),
+                        $sourceGraph = $(tabSourceGraph),
+                        metricsContainer = document.getElementById('antlers-trace-metrics'),
+                        $metricsContainer = $(metricsContainer),
+                        antlersTracePanel = document.querySelector('.phpdebugbar-widgets-antlers'),
+                        debugBarPanel = antlersTracePanel.closest('.phpdebugbar-panel'),
+                        debugBarBody = document.querySelector('.phpdebugbar-body'),
+                        reportViewElement = document.getElementById('antlers-trace-reports'),
+                        propertiesView = document.getElementById('antlers-trace-properties'),
+                        reportTable = document.getElementById('antlers-trace-call-table'),
+                        propertiesContent = document.getElementById('antlers-trace-properties-content'),
+                        $propertiesContent = $(propertiesContent);
+
+                    function hidePropertiesWindow() {
+                        propertiesView.style.display = 'none';
+                    }
 
-                    if (obj.line > 0) {
+                    function openPropertiesWindow(obj) {
+                        var objProperties = [],
+                            properties = '';
                         objProperties.push({
-                            label: 'Line Number',
-                            value: `<span style="font-family:monospace">${obj.line}</span>`,
-                            help: ''
+                            label: 'Expression Content',
+                            value: `<span style="font-family:monospace">${obj.escapedNodeContent}</span>`,
+                            help: '',
                         });
-                    }
 
-                    objProperties.push({
-                        label: 'Self Execution Time',
-                        value: obj.clientSelfTimeDisplay,
-                        help: 'The time spent evaluating this Antlers expression.'
-                    });
+                        objProperties.push({
+                            label: 'Source File',
+                            value: `<span style="font-family:monospace">${obj.path}</span>`,
+                            help: '',
+                        });
 
-                    objProperties.push({
-                        label: 'Total Execution Time',
-                        value: obj.clientTotalTimeDisplay,
-                        help: 'The time spent evaluating the Antlers expression, and all child expressions.'
-                    });
+                        if (obj.line > 0) {
+                            objProperties.push({
+                                label: 'Line Number',
+                                value: `<span style="font-family:monospace">${obj.line}</span>`,
+                                help: '',
+                            });
+                        }
 
-                    objProperties.push({
-                        label: 'Execution Time %',
-                        value: obj.percentOfExecutionTime,
-                        help: 'The percent of rendering time attributable to this Antlers expression.'
-                    });
+                        objProperties.push({
+                            label: 'Self Execution Time',
+                            value: obj.clientSelfTimeDisplay,
+                            help: 'The time spent evaluating this Antlers expression.',
+                        });
 
-                    objProperties.push({
-                        label: '# of Executions',
-                        value: obj.executionCount,
-                        help: 'The total number of times this Antlers expression was evaluated.'
-                    });
+                        objProperties.push({
+                            label: 'Total Execution Time',
+                            value: obj.clientTotalTimeDisplay,
+                            help: 'The time spent evaluating the Antlers expression, and all child expressions.',
+                        });
 
-                    objProperties.push({
-                        label: 'Cumulative Memory',
-                        value: formatBytes(obj.cumulativeMemorySamples),
-                        help: 'The relative amount of memory consumed while this Antlers expression was being evaluated.'
-                    });
+                        objProperties.push({
+                            label: 'Execution Time %',
+                            value: obj.percentOfExecutionTime,
+                            help: 'The percent of rendering time attributable to this Antlers expression.',
+                        });
 
-                    if (obj.escapedSourceContent.trim().length > 0) {
                         objProperties.push({
-                            label: 'Inner Expression Content',
-                            value: `<span style="font-family:monospace">${obj.escapedSourceContent}</span>`,
-                            help: ''
+                            label: '# of Executions',
+                            value: obj.executionCount,
+                            help: 'The total number of times this Antlers expression was evaluated.',
                         });
-                    }
 
-                    objProperties.forEach((prop) => {
-                        var helpText = '';
+                        objProperties.push({
+                            label: 'Cumulative Memory',
+                            value: formatBytes(obj.cumulativeMemorySamples),
+                            help: 'The relative amount of memory consumed while this Antlers expression was being evaluated.',
+                        });
 
-                        if (prop.help.length > 0) {
-                            helpText = `<span class="antlers-trace-property-desc">${prop.help}</span>`
+                        if (obj.escapedSourceContent.trim().length > 0) {
+                            objProperties.push({
+                                label: 'Inner Expression Content',
+                                value: `<span style="font-family:monospace">${obj.escapedSourceContent}</span>`,
+                                help: '',
+                            });
                         }
 
-                        properties += `<div class="antlers-trace-property">
+                        objProperties.forEach((prop) => {
+                            var helpText = '';
+
+                            if (prop.help.length > 0) {
+                                helpText = `<span class="antlers-trace-property-desc">${prop.help}</span>`;
+                            }
+
+                            properties += `<div class="antlers-trace-property">
     <span class="antlers-trace-property-key">${prop.label}</span>
     <span class="antlers-trace-property-value">${prop.value}</span>
     ${helpText}
 </div>
 `;
-                    });
+                        });
 
-                    var template = `<div class="antlers-trace-properties-window">${properties}</div>`;
+                        var template = `<div class="antlers-trace-properties-window">${properties}</div>`;
 
-                    $propertiesContent.empty().append($(template));
+                        $propertiesContent.empty().append($(template));
 
-                    propertiesView.style.display = 'initial';
-                }
+                        propertiesView.style.display = 'initial';
+                    }
 
-                btnCloseProperties.addEventListener('click', function () {
-                    hidePropertiesWindow();
-                });
+                    btnCloseProperties.addEventListener('click', function () {
+                        hidePropertiesWindow();
+                    });
 
-                function matchHeights() {
-                    var targetHeight = debugBarBody.offsetHeight - 28;
-                    reportViewElement.style.height = targetHeight + 'px';
-                    propertiesView.style.height = (targetHeight - 3) + 'px';
+                    function matchHeights() {
+                        var targetHeight = debugBarBody.offsetHeight - 28;
+                        reportViewElement.style.height = targetHeight + 'px';
+                        propertiesView.style.height = targetHeight - 3 + 'px';
 
-                    var chartHeight = chartContainer.offsetHeight;
+                        var chartHeight = chartContainer.offsetHeight;
 
-                    reportTable.style.height = (targetHeight - chartHeight - 4) + 'px';
-                }
+                        reportTable.style.height = targetHeight - chartHeight - 4 + 'px';
+                    }
 
-                debugBarPanel.style.overflow = 'hidden';
+                    debugBarPanel.style.overflow = 'hidden';
 
-                function addMetric(name, display) {
-                    var metricContainer = $(`<div class="antlers-trace-metric">
+                    function addMetric(name, display) {
+                        var metricContainer = $(`<div class="antlers-trace-metric">
     <span class="antlers-trace-metric-name">${name}:</span>
     <span class="antlers-trace-metric-display">${display}</span>
 </div`);
 
-                    $metricsContainer.append(metricContainer);
-                }
+                        $metricsContainer.append(metricContainer);
+                    }
+
+                    $sourceGraph.empty();
 
-                $sourceGraph.empty();
+                    data.source_samples.forEach((item) => {
+                        var backgroundColor = 'transparent',
+                            color = 'black',
+                            title = '',
+                            cursorStyle = '';
 
-                data.source_samples.forEach((item) => {
-                    var backgroundColor = 'transparent',
-                        color = 'black',
-                        title = '',
-                        cursorStyle = '';
+                        if (item.isNodeObject && item.totalElapsedTime != null && item.totalElapsedTime >= 0) {
+                            backgroundColor = categoryColorMapping[item.executionTimeCategory];
 
-                    if (item.isNodeObject && item.totalElapsedTime != null && item.totalElapsedTime >= 0) {
-                        backgroundColor = categoryColorMapping[item.executionTimeCategory];
+                            title = `title = "${item.clientTotalTimeDisplay}`;
 
-                        title = `title = "${item.clientTotalTimeDisplay}`;
+                            if (item.escapedNodeContent.trim().length > 0) {
+                                title += `: ${item.escapedNodeContent}`;
+                            }
 
-                        if (item.escapedNodeContent.trim().length > 0) {
-                            title += `: ${item.escapedNodeContent}`;
+                            title += '"';
+                            cursorStyle = 'cursor:pointer;';
                         }
 
-                        title += '"';
-                        cursorStyle = 'cursor:pointer;';
-                    }
-
-                    if (item.isCloseOutput) {
-                        color = 'gray';
-                    }
+                        if (item.isCloseOutput) {
+                            color = 'gray';
+                        }
 
-                    var template = `<pre ${title} style="display:inline; line-height: 2; color: ${color}; background-color:${backgroundColor};${cursorStyle}">${item.escapedBufferOutput}</pre>`;
+                        var template = `<pre ${title} style="display:inline; line-height: 2; color: ${color}; background-color:${backgroundColor};${cursorStyle}">${item.escapedBufferOutput}</pre>`;
 
-                    if (!item.isNodeObject) {
-                        $sourceGraph.append(template);
-                    } else {
-                        $nodeEl = $(template)[0];
-                        $nodeEl.addEventListener('click', function () {
-                            openPropertiesWindow(item);
-                        });
+                        if (!item.isNodeObject) {
+                            $sourceGraph.append(template);
+                        } else {
+                            $nodeEl = $(template)[0];
+                            $nodeEl.addEventListener('click', function () {
+                                openPropertiesWindow(item);
+                            });
 
-                        $sourceGraph.append($nodeEl);
-                    }
-                });
-
-                var chartContainer = document.getElementById('antlers-trace-chart'),
-                    chartData = {
-                        labels: data.system_samples.map(obj => obj.time),
-                        datasets: [
-                            {
-                                label: 'Memory Usage (MB)',
-                                data: data.system_samples.map(obj => ({ x: obj.time, y: obj.memory / (1024 * 1024) })),
-                                fill: {
-                                    target: 'origin',
-                                    above: 'rgb(94 190 255)',
-                                    below: '#3498db'
-                                }
-                            }
-                        ],
-                    };
+                            $sourceGraph.append($nodeEl);
+                        }
+                    });
 
-                new Chart(chartContainer, {
-                    type: 'line',
-                    height: 100,
-                    data: chartData,
-                    options: {
-                        maintainAspectRatio: false,
-                        scales: {
-                            x: {
-                                ticks: {
-                                    callback: function (value, index, values) {
-                                        return getSampleTime(data.system_samples[index].time);
+                    var chartContainer = document.getElementById('antlers-trace-chart'),
+                        chartData = {
+                            labels: data.system_samples.map((obj) => obj.time),
+                            datasets: [
+                                {
+                                    label: 'Memory Usage (MB)',
+                                    data: data.system_samples.map((obj) => ({
+                                        x: obj.time,
+                                        y: obj.memory / (1024 * 1024),
+                                    })),
+                                    fill: {
+                                        target: 'origin',
+                                        above: 'rgb(94 190 255)',
+                                        below: '#3498db',
+                                    },
+                                },
+                            ],
+                        };
+
+                    new Chart(chartContainer, {
+                        type: 'line',
+                        height: 100,
+                        data: chartData,
+                        options: {
+                            maintainAspectRatio: false,
+                            scales: {
+                                x: {
+                                    ticks: {
+                                        callback: function (value, index, values) {
+                                            return getSampleTime(data.system_samples[index].time);
+                                        },
                                     },
                                 },
+                                y: {
+                                    beginAtZero: true,
+                                },
                             },
-                            y: {
-                                beginAtZero: true,
+                        },
+                    });
+
+                    var columnConfig = {
+                        expander: {
+                            title: '',
+                        },
+                        sequence: {
+                            title: 'Time',
+                            field: 'sampleTime',
+                            formatter: function (cell) {
+                                var data = cell.getData();
+
+                                return getSampleTime(data.sampleTime);
                             },
                         },
-                    },
-                });
-
-                var columnConfig = {
-                    expander: {
-                        title: '',
-                    },
-                    sequence: {
-                        title: 'Time',
-                        field: 'sampleTime',
-                        formatter: function (cell) {
-                            var data = cell.getData();
-
-                            return getSampleTime(data.sampleTime);
-                        }
-                    },
-                    type: {
-                        title: 'Type',
-                        field: 'type',
-                        formatter: function (cell) {
-                            var data = cell.getData(),
-                                contents = '',
-                                icon = '';
-
-                            if (!data.isNodeObject) {
-                                contents = "View";
-                                icon = svgs.codeBrackets;
-                            } else if (data.isTag) {
-                                contents = "Tag"
-                                icon = svgs.tag;
-                            } else {
-                                contents = "Variable";
-                                icon = svgs.variable;
-                            }
+                        type: {
+                            title: 'Type',
+                            field: 'type',
+                            formatter: function (cell) {
+                                var data = cell.getData(),
+                                    contents = '',
+                                    icon = '';
+
+                                if (!data.isNodeObject) {
+                                    contents = 'View';
+                                    icon = svgs.codeBrackets;
+                                } else if (data.isTag) {
+                                    contents = 'Tag';
+                                    icon = svgs.tag;
+                                } else {
+                                    contents = 'Variable';
+                                    icon = svgs.variable;
+                                }
 
-                            return `<span class="antlers-trace-type-tooltip">${icon}${contents}</span>`;
-                        }
-                    },
-                    item: {
-                        title: 'Item',
-                        maxInitialWidth: 640,
-                        field: 'clientDisplay',
-                        formatter: function (cell) {
-                            var data = cell.getData();
-                            var contents = !data.isNodeObject ? data.path : data.escapedNodeContent;
-
-                            contents = truncateString(contents, 100);
-
-                            return `<span class="antlers-trace-item-tooltip">${contents}</span>`;
-                        }
-                    },
-                    path: {
-                        title: 'View Path',
-                        field: 'path',
-                        visible: false,
-                        formatter: function (cell) {
-                            var data = cell.getData(),
-                                output = data.path;
-
-                            if (data.editorLink.trim().length > 0) {
-                                output += makeEditorLink(data);
-                            }
+                                return `<span class="antlers-trace-type-tooltip">${icon}${contents}</span>`;
+                            },
+                        },
+                        item: {
+                            title: 'Item',
+                            maxInitialWidth: 640,
+                            field: 'clientDisplay',
+                            formatter: function (cell) {
+                                var data = cell.getData();
+                                var contents = !data.isNodeObject ? data.path : data.escapedNodeContent;
 
-                            return output;
-                        }
-                    },
-                    lineNumber: {
-                        title: 'Line',
-                        headerHozAlign: 'right',
-                        formatter: (cell) => cell.getValue(),
-                        field: 'line',
-                        hozAlign: 'right',
-                        formatter: function (cell) {
-                            var data = cell.getData(),
-                                output = data.line;
-
-                            if (data.editorLink.trim().length > 0) {
-                                output += makeEditorLink(data);
-                            }
+                                contents = truncateString(contents, 100);
 
-                            if (output === 0) {
-                                return "&mdash;";
-                            }
+                                return `<span class="antlers-trace-item-tooltip">${contents}</span>`;
+                            },
+                        },
+                        path: {
+                            title: 'View Path',
+                            field: 'path',
+                            visible: false,
+                            formatter: function (cell) {
+                                var data = cell.getData(),
+                                    output = data.path;
+
+                                if (data.editorLink.trim().length > 0) {
+                                    output += makeEditorLink(data);
+                                }
 
-                            return output;
-                        }
-                    },
-                    cumulativeMemoryUsage: {
-                        title: 'Memory Usage',
-                        formatter: function (cell) {
-                            var data = cell.getData();
-
-                            if (!data.isNodeObject) {
-                                return '';
-                            }
+                                return output;
+                            },
+                        },
+                        lineNumber: {
+                            title: 'Line',
+                            headerHozAlign: 'right',
+                            formatter: (cell) => cell.getValue(),
+                            field: 'line',
+                            hozAlign: 'right',
+                            formatter: function (cell) {
+                                var data = cell.getData(),
+                                    output = data.line;
+
+                                if (data.editorLink.trim().length > 0) {
+                                    output += makeEditorLink(data);
+                                }
 
-                            return formatBytes(data.cumulativeMemorySamples);
+                                if (output === 0) {
+                                    return '&mdash;';
+                                }
+
+                                return output;
+                            },
                         },
-                        field: 'cumulativeMemorySamples',
-                        hozAlign: 'right',
-                    },
-                    executionCount: {
-                        title: 'Execution',
-                        field: 'executionCount',
-                        hozAlign: 'right',
-                        formatter: function (cell) {
-                            var data = cell.getData(),
-                                display = '';
-
-                            if (!data.isNodeObject) {
-                                return '';
-                            }
+                        cumulativeMemoryUsage: {
+                            title: 'Memory Usage',
+                            formatter: function (cell) {
+                                var data = cell.getData();
 
-                            if (data.isHot) {
-                                display += `<span title="This code, or code it contains, is executed a large number of times.">${svgs.hotCode}</span>`;
-                            }
+                                if (!data.isNodeObject) {
+                                    return '';
+                                }
 
-                            display += data.executionCount;
+                                return formatBytes(data.cumulativeMemorySamples);
+                            },
+                            field: 'cumulativeMemorySamples',
+                            hozAlign: 'right',
+                        },
+                        executionCount: {
+                            title: 'Execution',
+                            field: 'executionCount',
+                            hozAlign: 'right',
+                            formatter: function (cell) {
+                                var data = cell.getData(),
+                                    display = '';
+
+                                if (!data.isNodeObject) {
+                                    return '';
+                                }
+
+                                if (data.isHot) {
+                                    display += `<span title="This code, or code it contains, is executed a large number of times.">${svgs.hotCode}</span>`;
+                                }
+
+                                display += data.executionCount;
 
-                            return display;
+                                return display;
+                            },
                         },
-                    },
-                    totalExecutionTime: {
-                        title: 'Total Time',
-                        field: 'clientTotalTime',
-                        formatter: function (cell) {
-                            var data = cell.getData();
-
-                            if (!data.isNodeObject) {
-                                return '';
-                            }
+                        totalExecutionTime: {
+                            title: 'Total Time',
+                            field: 'clientTotalTime',
+                            formatter: function (cell) {
+                                var data = cell.getData();
+
+                                if (!data.isNodeObject) {
+                                    return '';
+                                }
 
-                            return data.clientTotalTimeDisplay;
+                                return data.clientTotalTimeDisplay;
+                            },
+                            hozAlign: 'right',
                         },
-                        hozAlign: 'right'
-                    },
-                    selfExecutionTime: {
-                        title: 'Tag Time',
-                        headerHozAlign: 'right',
-                        field: 'clientSelfTime',
-                        formatter: function (cell) {
-                            var data = cell.getData();
-
-                            if (!data.isNodeObject) {
-                                return '';
-                            }
+                        selfExecutionTime: {
+                            title: 'Tag Time',
+                            headerHozAlign: 'right',
+                            field: 'clientSelfTime',
+                            formatter: function (cell) {
+                                var data = cell.getData();
+
+                                if (!data.isNodeObject) {
+                                    return '';
+                                }
 
-                            return data.clientSelfTimeDisplay;
+                                return data.clientSelfTimeDisplay;
+                            },
+                            hozAlign: 'right',
                         },
-                        hozAlign: 'right'
-                    },
-                    percentOfExecutionTime: {
-                        title: '%',
-                        field: 'percentOfExecutionTime',
-                        hozAlign: 'right',
-                        headerHozAlign: 'right',
-                        formatter: function (cell) {
-                            var data = cell.getData(),
-                                contents = '';
-
-                            if (!data.isNodeObject) {
-                                return contents;
-                            } else {
-                                if (data.percentOfExecutionTime > 40) {
-                                    contents += `<span title="This block takes up a disproportionate amount of total execution time.">${svgs.warning}</span>`;
+                        percentOfExecutionTime: {
+                            title: '%',
+                            field: 'percentOfExecutionTime',
+                            hozAlign: 'right',
+                            headerHozAlign: 'right',
+                            formatter: function (cell) {
+                                var data = cell.getData(),
+                                    contents = '';
+
+                                if (!data.isNodeObject) {
+                                    return contents;
+                                } else {
+                                    if (data.percentOfExecutionTime > 40) {
+                                        contents += `<span title="This block takes up a disproportionate amount of total execution time.">${svgs.warning}</span>`;
+                                    }
                                 }
+
+                                contents += data.percentOfExecutionTime;
+
+                                return contents;
+                            },
+                        },
+                    };
+
+                    var tableOptions = {
+                        dataTree: true,
+                        dataTreeStartExpanded: true,
+                        dataTreeChildField: 'children',
+                        responsiveLayout: true,
+                        tooltips: true,
+                        rowFormatter: function (row) {
+                            var data = row.getData(),
+                                rowEl = row.getElement(); // Get the row element
+
+                            if (data.isHot) {
+                                rowEl.style.backgroundColor = colors.hotCode;
                             }
 
-                            contents += data.percentOfExecutionTime
+                            // If we replace the "hot" background color, that is fine.
+                            // The execution time visibility is more important. The
+                            // > 70 limit here is just to reduce the visual noise.
+                            if (data.isNodeObject && data.totalElapsedTime != null && data.totalElapsedTime > 70) {
+                                rowEl.style.backgroundColor = categoryColorMapping[data.executionTimeCategory];
+                            }
+                        },
+                    };
 
-                            return contents;
-                        }
-                    }
-                };
-
-                var tableOptions = {
-                    dataTree: true,
-                    dataTreeStartExpanded: true,
-                    dataTreeChildField: 'children',
-                    responsiveLayout: true,
-                    tooltips: true,
-                    rowFormatter: function (row) {
-                        var data = row.getData(),
-                            rowEl = row.getElement(); // Get the row element
-
-                        if (data.isHot) {
-                            rowEl.style.backgroundColor = colors.hotCode;
-                        }
+                    var callTable = new Tabulator('#antlers-trace-call-table', {
+                        ...tableOptions,
+                        columns: [
+                            columnConfig.expander,
+                            columnConfig.sequence,
+                            columnConfig.type,
+                            columnConfig.item,
+                            columnConfig.path,
+                            columnConfig.lineNumber,
+                            columnConfig.cumulativeMemoryUsage,
+                            columnConfig.executionCount,
+                            columnConfig.selfExecutionTime,
+                            columnConfig.totalExecutionTime,
+                            columnConfig.percentOfExecutionTime,
+                        ],
+                        data: data.data,
+                    });
 
-                        // If we replace the "hot" background color, that is fine.
-                        // The execution time visibility is more important. The
-                        // > 70 limit here is just to reduce the visual noise.
-                        if (data.isNodeObject && data.totalElapsedTime != null && data.totalElapsedTime > 70) {
-                            rowEl.style.backgroundColor = categoryColorMapping[data.executionTimeCategory];
-                        }
-                    }
-                };
-
-                var callTable = new Tabulator('#antlers-trace-call-table', {
-                    ...tableOptions,
-                    columns: [
-                        columnConfig.expander,
-                        columnConfig.sequence,
-                        columnConfig.type,
-                        columnConfig.item,
-                        columnConfig.path,
-                        columnConfig.lineNumber,
-                        columnConfig.cumulativeMemoryUsage,
-                        columnConfig.executionCount,
-                        columnConfig.selfExecutionTime,
-                        columnConfig.totalExecutionTime,
-                        columnConfig.percentOfExecutionTime,
-                    ],
-                    data: data.data
-                });
-
-                callTable.on('rowClick', function (e, row) {
-                    openPropertiesWindow(row.getData());
-                });
-
-                btnCallGraph.addEventListener('click', function () {
-                    tabCallGraph.style.display = 'block';
-                    tabSourceGraph.style.display = 'none';
-
-                    btnCallGraph.classList.add('antlers-trace-button-active');
-                    btnNodeGraph.classList.remove('antlers-trace-button-active');
-                    btnSourceGraph.classList.remove('antlers-trace-button-active');
-
-                    callTable.replaceData(data.data);
-                    callTable.hideColumn('path');
-                });
-
-                btnNodeGraph.addEventListener('click', function () {
-                    tabCallGraph.style.display = 'block';
-                    tabSourceGraph.style.display = 'none';
-
-                    btnCallGraph.classList.remove('antlers-trace-button-active');
-                    btnNodeGraph.classList.add('antlers-trace-button-active');
-                    btnSourceGraph.classList.remove('antlers-trace-button-active');
-
-                    callTable.replaceData(data.performance_items);
-                    callTable.showColumn('path');
-                });
-
-                btnSourceGraph.addEventListener('click', function () {
-                    tabCallGraph.style.display = 'none';
-                    tabSourceGraph.style.display = 'block';
-
-                    btnCallGraph.classList.remove('antlers-trace-button-active');
-                    btnNodeGraph.classList.remove('antlers-trace-button-active');
-                    btnSourceGraph.classList.add('antlers-trace-button-active');
-                });
-
-
-                var observer = new MutationObserver(() => {
-                    matchHeights();
-                });
+                    callTable.on('rowClick', function (e, row) {
+                        openPropertiesWindow(row.getData());
+                    });
 
-                matchHeights();
+                    btnCallGraph.addEventListener('click', function () {
+                        tabCallGraph.style.display = 'block';
+                        tabSourceGraph.style.display = 'none';
 
-                var observerConfig = { attributes: true, attributeFilter: ['style'] };
-                observer.observe(debugBarBody, observerConfig);
+                        btnCallGraph.classList.add('antlers-trace-button-active');
+                        btnNodeGraph.classList.remove('antlers-trace-button-active');
+                        btnSourceGraph.classList.remove('antlers-trace-button-active');
 
-                addMetric('Expressions Processed', data.total_antlers_nodes.toLocaleString());
-            }.bind(this));
-        },
+                        callTable.replaceData(data.data);
+                        callTable.hideColumn('path');
+                    });
+
+                    btnNodeGraph.addEventListener('click', function () {
+                        tabCallGraph.style.display = 'block';
+                        tabSourceGraph.style.display = 'none';
+
+                        btnCallGraph.classList.remove('antlers-trace-button-active');
+                        btnNodeGraph.classList.add('antlers-trace-button-active');
+                        btnSourceGraph.classList.remove('antlers-trace-button-active');
+
+                        callTable.replaceData(data.performance_items);
+                        callTable.showColumn('path');
+                    });
+
+                    btnSourceGraph.addEventListener('click', function () {
+                        tabCallGraph.style.display = 'none';
+                        tabSourceGraph.style.display = 'block';
 
-    });
+                        btnCallGraph.classList.remove('antlers-trace-button-active');
+                        btnNodeGraph.classList.remove('antlers-trace-button-active');
+                        btnSourceGraph.classList.add('antlers-trace-button-active');
+                    });
+
+                    var observer = new MutationObserver(() => {
+                        matchHeights();
+                    });
+
+                    matchHeights();
+
+                    var observerConfig = { attributes: true, attributeFilter: ['style'] };
+                    observer.observe(debugBarBody, observerConfig);
+
+                    addMetric('Expressions Processed', data.total_antlers_nodes.toLocaleString());
+                }.bind(this),
+            );
+        },
+    }));
 })(PhpDebugBar.$);
diff --git a/svgo.config.js b/svgo.config.js
index 22531d54a6..a918baa91a 100644
--- a/svgo.config.js
+++ b/svgo.config.js
@@ -1,9 +1,9 @@
 module.exports = {
     plugins: [
-      {
-        name: 'preset-default',
-      },
-      'sortAttrs',
-      'removeDimensions',
+        {
+            name: 'preset-default',
+        },
+        'sortAttrs',
+        'removeDimensions',
     ],
-  };
+};
diff --git a/tailwind.config.js b/tailwind.config.js
index 0e93a27084..0a726a319b 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,19 +1,16 @@
-const colors = require('tailwindcss/colors')
+const colors = require('tailwindcss/colors');
 
 module.exports = {
     darkMode: 'class',
-    content: [
-        './resources/**/*.{html,js,vue,blade.php}',
-        './tests/**/*.{html,vue,blade.php}'
-    ],
+    content: ['./resources/**/*.{html,js,vue,blade.php}', './tests/**/*.{html,vue,blade.php}'],
     safelist: [
         {
             pattern: /m[l|r]-(?:[0-9]|10|11|12|14|16)$/,
-            variants: ['md', 'lg', 'xl']
+            variants: ['md', 'lg', 'xl'],
         },
         {
             pattern: /p[x|y]-(?:[0-9]|10|11|12|14|16)$/,
-            variants: ['md', 'lg', 'xl']
+            variants: ['md', 'lg', 'xl'],
         },
     ],
     theme: {
@@ -101,13 +98,13 @@ module.exports = {
             amber: colors.amber,
             green: colors.green,
             red: colors.red,
-            'dark-red': '#900000'
+            'dark-red': '#900000',
         },
         screens: {
-            'sm': '576px',
-            'md': '768px',
-            'lg': '992px',
-            'xl': '1200px',
+            sm: '576px',
+            md: '768px',
+            lg: '992px',
+            xl: '1200px',
             '2xl': '1440px',
         },
         extend: {
@@ -115,32 +112,49 @@ module.exports = {
                 DEFAULT: colors.gray[300],
             },
             borderWidth: {
-                '0': '0',
-                '3': '3px',
-                '6': '6px',
+                0: '0',
+                3: '3px',
+                6: '6px',
             },
             boxShadow: {
                 sm: '1px 2px 4px 0 rgba(0,0,0,.03)',
                 md: '0px 2px 6px -1px rgba(0,0,0,.1)',
-                DEFAULT: '0 0 0 1px rgba(49,49,93,.05), 0 2px 5px 0 rgba(49,49,93,.075), 0 1px 3px 0 rgba(49,49,93,.15)',
+                DEFAULT:
+                    '0 0 0 1px rgba(49,49,93,.05), 0 2px 5px 0 rgba(49,49,93,.075), 0 1px 3px 0 rgba(49,49,93,.15)',
                 lg: '0 7px 14px 0 rgba(50,50,93,.1), 0 2px 8px 0 rgba(0,0,0,.075)',
                 xl: '0 12px 24px 0 rgba(50, 50, 93, .1), 0 10px 20px 0 rgba(0, 0, 0, .075)',
-                popover: '0 0 0 1px rgba(40,45,50,0.05), 0 0 0 1px rgba(40,45,50,0.05), 0 2px 7px 1px rgba(40,45,50,0.16)',
+                popover:
+                    '0 0 0 1px rgba(40,45,50,0.05), 0 0 0 1px rgba(40,45,50,0.05), 0 2px 7px 1px rgba(40,45,50,0.16)',
                 quick: '0 0 0 1px rgba(40,45,50,0.075), 0 0 0 1px rgba(40,45,50,0.075)',
                 set: 'rgba(50,50,93,.15) 0 0 0 1px, rgba(50,50,93,.08) 0 2px 5px, rgba(0,0,0,.07) 0 1px 1.5px,rgba(0,0,0,.08) 0 1px 2px 0, transparent 0 0 0 0',
                 button: '0 1px 0 0 rgba(25,30,35,.05)',
                 inner: 'inset 0px 1px 1px 0px rgba(0,0,0,.05)',
                 'inner-dark': 'inset 0px 2px 1px 0px rgba(0,0,0,.15)',
                 dark: '0 20px 35px 0 rgba(22,22,22,.45), 0 10px 23px 0 rgba(23,23,23,.65), 0 0 0 1px rgba(85,87,89,.80)',
-                'dark-lg': '0 40px 78px 0 rgba(22,22,22,.45), 0 15px 28px 0 rgba(23,23,23,.85), 0 0 0 1px rgba(85,87,89,.85)',
+                'dark-lg':
+                    '0 40px 78px 0 rgba(22,22,22,.45), 0 15px 28px 0 rgba(23,23,23,.85), 0 0 0 1px rgba(85,87,89,.85)',
                 'dark-sm': '0 3px 3px 0 rgba(22,22,22,.15), 0 1px 2px 0 rgba(23,23,23,.1)',
-                'dark-popover': '0 10px 17px 10px rgb(31 33 36 / 76%), 0 2px 1px 1px rgb(31 33 36 / 76%), 0 0 0 1px rgb(109 118 118 / 41%), 0 0 0 1px rgb(110 125 140 / 61%)',
-                'dark-set': 'rgba(0,0,0,.25) 0 0 0 1px, rgba(0,0,0,.08) 0 2px 5px, rgba(0,0,0,.17) 0 1px 1.5px,rgba(0,0,0,.18) 0 1px 2px 0, transparent 0 0 0 0',
+                'dark-popover':
+                    '0 10px 17px 10px rgb(31 33 36 / 76%), 0 2px 1px 1px rgb(31 33 36 / 76%), 0 0 0 1px rgb(109 118 118 / 41%), 0 0 0 1px rgb(110 125 140 / 61%)',
+                'dark-set':
+                    'rgba(0,0,0,.25) 0 0 0 1px, rgba(0,0,0,.08) 0 2px 5px, rgba(0,0,0,.17) 0 1px 1.5px,rgba(0,0,0,.18) 0 1px 2px 0, transparent 0 0 0 0',
             },
             fontFamily: {
                 serif: ['Georgia', 'serif'],
                 mono: ['Menlo', 'Monaco', 'Consolas', 'Liberation Mono', 'Courier New', 'monospace'],
-                sans: ['Inter var', '-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue'],
+                sans: [
+                    'Inter var',
+                    '-apple-system',
+                    'BlinkMacSystemFont',
+                    'Segoe UI',
+                    'Roboto',
+                    'Oxygen',
+                    'Ubuntu',
+                    'Cantarell',
+                    'Fira Sans',
+                    'Droid Sans',
+                    'Helvetica Neue',
+                ],
             },
             fontSize: {
                 '5xs': '9px',
@@ -171,16 +185,16 @@ module.exports = {
             maxWidth: {
                 '3xs': '5rem',
                 '2xs': '10rem',
-                'xs': '20rem',
-                'sm': '30rem',
-                'md': '40rem',
-                'lg': '50rem',
-                'xl': '60rem',
+                xs: '20rem',
+                sm: '30rem',
+                md: '40rem',
+                lg: '50rem',
+                xl: '60rem',
                 '2xl': '70rem',
                 '3xl': '80rem',
                 '4xl': '90rem',
                 '5xl': '100rem',
-                'full': '100%',
+                full: '100%',
             },
             spacing: {
                 13: '3.25rem',
@@ -204,9 +218,6 @@ module.exports = {
             },
         },
     },
-    plugins: [
-        require('@tailwindcss/container-queries'),
-        require('@tailwindcss/typography'),
-    ],
+    plugins: [require('@tailwindcss/container-queries'), require('@tailwindcss/typography')],
     important: true,
-}
+};
diff --git a/tests/Translator/__fixtures__/vue/test.vue b/tests/Translator/__fixtures__/vue/test.vue
index 6d456e3eea..6eebfb6c1d 100644
--- a/tests/Translator/__fixtures__/vue/test.vue
+++ b/tests/Translator/__fixtures__/vue/test.vue
@@ -1,13 +1,12 @@
 <template>
-
     <div>
         {{ __('vue template single quote') }}
         {{ __n('vue template single quote :count', 3) }}
         {{ __n('vue template single quote :param', { param: 'test' }) }}
 
-        {{ __("vue template double quote") }}
-        {{ __n("vue template double quote :count", 3) }}
-        {{ __n("vue template double quote :param", { param: 'test' }) }}
+        {{ __('vue template double quote') }}
+        {{ __n('vue template double quote :count', 3) }}
+        {{ __n('vue template double quote :param', { param: 'test' }) }}
 
         {{ __(`vue template backtick quote`) }}
         {{ __n(`vue template backtick quote :count`, 3) }}
@@ -16,8 +15,8 @@
         {{ trans('vue template trans single quote') }}
         {{ trans('vue template trans single quote :param', { param: 'test' }) }}
 
-        {{ trans("vue template trans double quote") }}
-        {{ trans("vue template trans double quote :param", { param: 'test' }) }}
+        {{ trans('vue template trans double quote') }}
+        {{ trans('vue template trans double quote :param', { param: 'test' }) }}
 
         {{ trans(`vue template trans backtick quote`) }}
         {{ trans(`vue template trans backtick quote :param`, { param: 'test' }) }}
@@ -25,8 +24,8 @@
         {{ trans_choice('vue template trans_choice single quote', 2) }}
         {{ trans_choice('vue template trans_choice single quote :param', 2, { param: 'test' }) }}
 
-        {{ trans_choice("vue template trans_choice double quote", 2) }}
-        {{ trans_choice("vue template trans_choice double quote :param", 2, { param: 'test' }) }}
+        {{ trans_choice('vue template trans_choice double quote', 2) }}
+        {{ trans_choice('vue template trans_choice double quote :param', 2, { param: 'test' }) }}
 
         {{ trans_choice(`vue template trans_choice backtick quote`, 2) }}
         {{ trans_choice(`vue template trans_choice backtick quote :param`, 2, { param: 'test' }) }}
@@ -34,42 +33,39 @@
         {{ __('vue template with/slash') }}
         {{ __('vue template with bracket(s)') }}
     </div>
-
 </template>
 
 <script>
 export default {
-
     data() {
         return [
             __('vue script single quote'),
             __n('vue script single quote :count', 2),
             __n('vue script single quote :param', { param: 'test' }),
-            __("vue script double quote"),
-            __n("vue script double quote :count", 2),
-            __n("vue script double quote :param", { param: 'test' }),
+            __('vue script double quote'),
+            __n('vue script double quote :count', 2),
+            __n('vue script double quote :param', { param: 'test' }),
             __(`vue script backtick quote`),
             __n(`vue script backtick quote :count`, 2),
             __n(`vue script backtick quote :param`, { param: 'test' }),
 
             trans('vue script trans single quote'),
             trans('vue script trans single quote :param', { param: 'test' }),
-            trans("vue script trans double quote"),
-            trans("vue script trans double quote :param", { param: 'test' }),
+            trans('vue script trans double quote'),
+            trans('vue script trans double quote :param', { param: 'test' }),
             trans(`vue script trans backtick quote`),
             trans(`vue script trans backtick quote :param`, { param: 'test' }),
 
             trans_choice('vue script trans_choice single quote', 2),
             trans_choice('vue script trans_choice single quote :param', 2, { param: 'test' }),
-            trans_choice("vue script trans_choice double quote", 2),
-            trans_choice("vue script trans_choice double quote :param", 2, { param: 'test' }),
+            trans_choice('vue script trans_choice double quote', 2),
+            trans_choice('vue script trans_choice double quote :param', 2, { param: 'test' }),
             trans_choice(`vue script trans_choice backtick quote`, 2),
             trans_choice(`vue script trans_choice backtick quote :param`, 2, { param: 'test' }),
 
             __('vue script with/slash'),
             __('vue script with bracket(s)'),
         ];
-    }
-
-}
+    },
+};
 </script>
diff --git a/vite-frontend.config.js b/vite-frontend.config.js
index e61d773141..033e86f1fd 100644
--- a/vite-frontend.config.js
+++ b/vite-frontend.config.js
@@ -8,6 +8,6 @@ export default defineConfig({
             name: 'statamic',
             fileName: () => 'helpers.js',
             formats: ['umd'],
-        }
-    }
+        },
+    },
 });
diff --git a/vite.config.js b/vite.config.js
index 8a7843a7b9..6cd7a3dfdd 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -12,10 +12,7 @@ export default defineConfig(({ mode }) => {
         plugins: [
             laravel({
                 valetTls: env.VALET_TLS,
-                input: [
-                    'resources/css/tailwind.css',
-                    'resources/js/index.js'
-                ],
+                input: ['resources/css/tailwind.css', 'resources/js/index.js'],
                 refresh: true,
                 publicDirectory: 'resources/dist',
                 hotFile: 'resources/dist/hot',
@@ -25,18 +22,16 @@ export default defineConfig(({ mode }) => {
             inject({
                 Vue: 'vue',
                 _: 'underscore',
-                include: 'resources/js/**'
-            })
+                include: 'resources/js/**',
+            }),
         ],
         resolve: {
             alias: {
                 vue: 'vue/dist/vue.esm-bundler.js',
-            }
+            },
         },
         optimizeDeps: {
-            include: [
-                'vue'
-            ]
-        }
-    }
+            include: ['vue'],
+        },
+    };
 });