From 6700a4625d7754d9fdbe3a6a8e168977b116fc94 Mon Sep 17 00:00:00 2001
From: Matthias Mair <code@mjmair.com>
Date: Wed, 8 May 2024 09:42:57 +0200
Subject: [PATCH] WIP [PUI] Migrate to Mantine v7 (#7028)

* bump deps

* upgrade all deps

* adapt theme context

* add vanilla extract

* add basic theme

* reformat global state

* fix imports

* fix spotlight

* update args

* adapt arg names

* fix more arg renames

* fix italic

* switch sx to style

* fix types

* fix theme refs

* misc fixes

* misc fixes

* fix type

* fix selects

* misc fixes

* bug fix

* update to new style

* set text args

* fix spotlight

* dumb spotlight down

* change ActionIcons back to default

* fix name

* fix test

* adjust test to new spotlight

* package fix

* fix new code to v7

* fix building

* fix group aligment

* remove unneeded imports

* add new type

* import cleanups

* add notification style

* move context to loadable

* reorder contexts

* make test less flaky

* fix missing theming

* fix color schema switcher

* increase timeouts

* update package refs

* add missing style for datatables

* fix missing nesting

* organize imports

* move language context around

* make sure license keys are unique

* add keys to badges

* fix import

* fix missing keys

* fix missing key issue in badge section

* update packages

* fix new code to v7 style

* dummy change

* fix up test

* fix btn style

* fix merge issues

* remove placeholders

* fix color schema usage

* fix usage of ColorScheme

* fix style issues

* fix test

* fix choice field to fit stricter validation

* make test more reproducible

* wait for dash before proceeding

* bump deps

* add missing style

* do loops

* fix css

* change carousel sizing

* fix merge for v7

* fix image ratio

* Revert "bump deps"

This reverts commit 91cdae5a3ee21dc9dd753460d8ebf2d745d5418e.

* fix userstate to ensure it always renders

* await dashboard loading before resuming wiht wuick login

* fix spotlight and remove testing changes

* Catch API error

* Update breadcrumb list

* Update panel icon

* Cleanup notification drawer

* Some more tweaks

* Fix for notification count indicator

* Fix stack prop

* fix type error

* fix double timeout key

* use div instead of text

---------

Co-authored-by: Oliver Walters <oliver.henry.walters@gmail.com>
---
 src/frontend/package.json                     |   66 +-
 src/frontend/playwright.config.ts             |    1 -
 .../src/components/buttons/ActionButton.tsx   |    5 +-
 .../src/components/buttons/ButtonMenu.tsx     |    2 +-
 .../src/components/buttons/CopyButton.tsx     |    2 +-
 .../src/components/buttons/EditButton.tsx     |    6 +-
 .../src/components/buttons/SSOButton.tsx      |    2 +-
 .../src/components/buttons/ScanButton.tsx     |    1 +
 .../src/components/buttons/SplitButton.css.ts |   19 +
 .../src/components/buttons/SplitButton.tsx    |   23 +-
 .../components/buttons/SpotlightButton.tsx    |    9 +-
 .../src/components/details/Details.tsx        |   16 +-
 .../src/components/details/DetailsImage.tsx   |   25 +-
 .../editors/TemplateEditor/TemplateEditor.tsx |   10 +-
 src/frontend/src/components/forms/ApiForm.tsx |    8 +-
 .../components/forms/AuthenticationForm.tsx   |   10 +-
 .../src/components/forms/HostOptionsForm.tsx  |   15 +-
 .../src/components/forms/InstanceOptions.tsx  |    2 +-
 .../components/forms/fields/ApiFormField.tsx  |    5 +-
 .../components/forms/fields/ChoiceField.tsx   |    8 +-
 .../src/components/forms/fields/DateField.tsx |    2 +-
 .../forms/fields/NestedObjectField.tsx        |    4 +-
 .../forms/fields/RelatedModelField.tsx        |   73 +-
 .../src/components/images/ApiImage.tsx        |   13 +-
 .../src/components/images/Thumbnail.tsx       |   15 +-
 .../src/components/items/ActionDropdown.tsx   |    2 +-
 .../src/components/items/AttachmentLink.tsx   |    2 +-
 .../src/components/items/ColorToggle.tsx      |   15 +-
 .../src/components/items/DashboardItem.tsx    |   10 +-
 .../src/components/items/DocTooltip.tsx       |    4 +-
 .../items/GettingStartedCarousel.css.ts       |   30 +
 .../items/GettingStartedCarousel.tsx          |   48 +-
 .../src/components/items/InfoItem.tsx         |    2 +-
 .../src/components/items/InvenTreeLogo.tsx    |    2 +-
 .../src/components/items/LanguageSelect.tsx   |    4 +-
 .../src/components/items/LanguageToggle.tsx   |    8 +-
 .../src/components/items/MenuLinks.tsx        |    4 +-
 .../src/components/items/Placeholder.tsx      |    4 +-
 .../src/components/items/ProgressBar.tsx      |    4 +-
 .../src/components/items/StylishText.tsx      |    3 +-
 .../components/modals/AboutInvenTreeModal.tsx |    4 +-
 .../src/components/modals/LicenseModal.tsx    |    6 +-
 .../src/components/modals/QrCodeModal.tsx     |   10 +-
 .../src/components/modals/ServerInfoModal.tsx |    2 +-
 .../src/components/nav/BreadcrumbList.tsx     |   10 +-
 .../src/components/nav/DetailDrawer.css.ts    |    6 +
 .../src/components/nav/DetailDrawer.tsx       |   25 +-
 src/frontend/src/components/nav/Footer.tsx    |    5 +-
 src/frontend/src/components/nav/Header.tsx    |   47 +-
 src/frontend/src/components/nav/Layout.tsx    |   52 +-
 src/frontend/src/components/nav/MainMenu.tsx  |   43 +-
 .../src/components/nav/NavHoverMenu.tsx       |   25 +-
 .../src/components/nav/NavigationDrawer.tsx   |    5 +-
 .../src/components/nav/NotificationDrawer.tsx |  115 +-
 .../src/components/nav/PageDetail.tsx         |   26 +-
 .../src/components/nav/PanelGroup.tsx         |   14 +-
 .../src/components/nav/PartCategoryTree.tsx   |   55 +-
 .../src/components/nav/SearchDrawer.tsx       |   12 +-
 .../src/components/nav/SettingsHeader.tsx     |    2 +-
 .../src/components/nav/StockLocationTree.tsx  |    8 +-
 .../src/components/render/Instance.tsx        |    6 +-
 .../src/components/settings/SettingItem.tsx   |   15 +-
 .../src/components/settings/SettingList.tsx   |    6 +-
 .../src/components/widgets/FeedbackWidget.tsx |   17 +-
 .../components/widgets/WidgetLayout.css.ts    |   16 +
 .../src/components/widgets/WidgetLayout.tsx   |   29 +-
 src/frontend/src/contexts/BaseContext.tsx     |    5 +-
 src/frontend/src/contexts/ThemeContext.tsx    |   45 +-
 src/frontend/src/contexts/colorSchema.tsx     |   67 +
 src/frontend/src/defaults/actions.tsx         |   53 +-
 src/frontend/src/defaults/formatters.tsx      |    3 +
 src/frontend/src/forms/BuildForms.tsx         |    2 +-
 src/frontend/src/forms/StockForms.tsx         |    2 +-
 src/frontend/src/functions/forms.tsx          |    2 +-
 src/frontend/src/functions/loading.tsx        |   17 +-
 src/frontend/src/globalStyle.tsx              |  184 ---
 src/frontend/src/hooks/UseForm.tsx            |    7 +-
 src/frontend/src/hooks/UseModal.tsx           |    5 +-
 src/frontend/src/main.css.ts                  |  180 +++
 src/frontend/src/main.tsx                     |    5 +
 src/frontend/src/pages/Auth/Logged-In.tsx     |    2 +-
 src/frontend/src/pages/Auth/Login.tsx         |    5 +-
 src/frontend/src/pages/Auth/Logout.tsx        |    2 +-
 src/frontend/src/pages/Index/Playground.tsx   |   20 +-
 src/frontend/src/pages/Index/Scan.tsx         |  105 +-
 .../AccountSettings/AccountDetailPanel.tsx    |    6 +-
 .../AccountSettings/SecurityContent.tsx       |    8 +-
 .../AccountSettings/UserThemePanel.tsx        |   20 +-
 .../Index/Settings/AdminCenter/Index.tsx      |    6 +-
 .../AdminCenter/MachineManagementPanel.tsx    |    6 +-
 .../AdminCenter/UserManagementPanel.tsx       |    4 +-
 .../pages/Index/Settings/SystemSettings.tsx   |    2 +-
 .../src/pages/Index/Settings/UserSettings.tsx |    2 +-
 src/frontend/src/pages/build/BuildDetail.tsx  |    2 +-
 .../src/pages/company/CompanyDetail.tsx       |    5 +-
 .../pages/company/ManufacturerPartDetail.tsx  |    3 +-
 .../src/pages/company/SupplierPartDetail.tsx  |    3 +-
 .../src/pages/part/CategoryDetail.tsx         |    2 +-
 src/frontend/src/pages/part/PartDetail.tsx    |    4 +-
 .../src/pages/part/PartPricingPanel.tsx       |    2 +-
 .../pages/part/pricing/BomPricingPanel.tsx    |    8 +-
 .../part/pricing/PricingOverviewPanel.tsx     |   14 +-
 .../src/pages/part/pricing/PricingPanel.tsx   |    6 +-
 .../part/pricing/PurchaseHistoryPanel.tsx     |    4 +-
 .../part/pricing/VariantPricingPanel.tsx      |    2 +-
 .../pages/purchasing/PurchaseOrderDetail.tsx  |    3 +-
 .../src/pages/sales/ReturnOrderDetail.tsx     |    2 +-
 .../src/pages/sales/SalesOrderDetail.tsx      |    3 +-
 src/frontend/src/states/LocalState.tsx        |   11 +-
 src/frontend/src/tables/Column.tsx            |    2 +-
 src/frontend/src/tables/ColumnRenderers.tsx   |    4 +-
 src/frontend/src/tables/ColumnSelect.tsx      |    2 +-
 src/frontend/src/tables/DownloadAction.tsx    |    2 +-
 src/frontend/src/tables/Filter.tsx            |    2 +-
 .../src/tables/FilterSelectDrawer.tsx         |   14 +-
 src/frontend/src/tables/InvenTreeTable.tsx    |   24 +-
 src/frontend/src/tables/RowActions.tsx        |    2 +-
 src/frontend/src/tables/Search.tsx            |    2 +-
 src/frontend/src/tables/TableHoverCard.tsx    |    8 +-
 src/frontend/src/tables/bom/BomTable.tsx      |   16 +-
 src/frontend/src/tables/bom/UsedInTable.tsx   |    4 +-
 .../src/tables/build/BuildLineTable.tsx       |   12 +-
 .../src/tables/build/BuildOrderTable.tsx      |    2 +
 .../src/tables/build/BuildOutputTable.tsx     |    6 +-
 .../src/tables/company/CompanyTable.tsx       |    2 +-
 .../src/tables/general/AttachmentTable.tsx    |    8 +-
 .../src/tables/machine/MachineListTable.tsx   |   38 +-
 .../src/tables/machine/MachineTypeTable.tsx   |   38 +-
 .../src/tables/part/ParametricPartTable.tsx   |    4 +-
 .../tables/part/PartCategoryTemplateTable.tsx |    2 +-
 .../src/tables/part/PartParameterTable.tsx    |    6 +-
 src/frontend/src/tables/part/PartTable.tsx    |    4 +-
 .../src/tables/part/PartTestTemplateTable.tsx |    8 +-
 .../src/tables/part/PartThumbTable.tsx        |    2 +-
 .../src/tables/part/RelatedPartTable.tsx      |    4 +-
 .../src/tables/plugin/PluginListTable.tsx     |   34 +-
 .../purchasing/SupplierPriceBreakTable.tsx    |    4 +-
 .../tables/settings/ScheduledTasksTable.tsx   |    2 +-
 .../src/tables/settings/TemplateTable.tsx     |    4 +-
 .../src/tables/stock/StockItemTable.tsx       |    4 +-
 .../tables/stock/StockItemTestResultTable.tsx |   14 +-
 .../src/tables/stock/StockLocationTable.tsx   |    2 +
 src/frontend/src/theme.ts                     |    5 +
 src/frontend/src/views/MainView.tsx           |    1 +
 src/frontend/src/views/MobileAppView.tsx      |    2 +-
 src/frontend/tests/login.ts                   |    4 +-
 src/frontend/tests/modals.spec.ts             |   12 +-
 src/frontend/tests/pages/pui_index.spec.ts    |    4 +-
 src/frontend/tests/pui_command.spec.ts        |   12 +-
 src/frontend/tests/pui_general.spec.ts        |    5 +-
 src/frontend/tests/pui_stock.spec.ts          |    1 +
 src/frontend/vite.config.ts                   |    2 +
 src/frontend/yarn.lock                        | 1278 ++++++++++-------
 153 files changed, 1936 insertions(+), 1556 deletions(-)
 create mode 100644 src/frontend/src/components/buttons/SplitButton.css.ts
 create mode 100644 src/frontend/src/components/items/GettingStartedCarousel.css.ts
 create mode 100644 src/frontend/src/components/nav/DetailDrawer.css.ts
 create mode 100644 src/frontend/src/components/widgets/WidgetLayout.css.ts
 create mode 100644 src/frontend/src/contexts/colorSchema.tsx
 delete mode 100644 src/frontend/src/globalStyle.tsx
 create mode 100644 src/frontend/src/main.css.ts
 create mode 100644 src/frontend/src/theme.ts

diff --git a/src/frontend/package.json b/src/frontend/package.json
index 9d9e755234..ccea297ca0 100644
--- a/src/frontend/package.json
+++ b/src/frontend/package.json
@@ -11,66 +11,78 @@
         "compile": "lingui compile --typescript"
     },
     "dependencies": {
+        "@codemirror/autocomplete": ">=6.0.0",
         "@codemirror/lang-liquid": "^6.2.1",
+        "@codemirror/language": ">=6.0.0",
+        "@codemirror/lint": ">=6.0.0",
+        "@codemirror/search": ">=6.0.0",
+        "@codemirror/state": "^6.0.0",
+        "@codemirror/theme-one-dark": ">=6.0.0",
+        "@codemirror/view": ">=6.0.0",
         "@emotion/react": "^11.11.4",
         "@fortawesome/fontawesome-svg-core": "^6.5.2",
         "@fortawesome/free-regular-svg-icons": "^6.5.2",
         "@fortawesome/free-solid-svg-icons": "^6.5.2",
         "@fortawesome/react-fontawesome": "^0.2.0",
-        "@lingui/core": "^4.7.1",
+        "@lingui/core": "^4.10.0",
         "@lingui/react": "^4.10.0",
-        "@mantine/carousel": "<7",
-        "@mantine/core": "<7",
-        "@mantine/dates": "<7",
-        "@mantine/dropzone": "<7",
-        "@mantine/form": "<8",
-        "@mantine/hooks": "<7",
-        "@mantine/modals": "<7",
-        "@mantine/notifications": "<7",
-        "@mantine/spotlight": "<7",
+        "@mantine/carousel": "^7.8.0",
+        "@mantine/core": "^7.8.0",
+        "@mantine/dates": "^7.8.0",
+        "@mantine/dropzone": "^7.8.0",
+        "@mantine/form": "^7.8.0",
+        "@mantine/hooks": "^7.8.0",
+        "@mantine/modals": "^7.8.0",
+        "@mantine/notifications": "^7.8.0",
+        "@mantine/spotlight": "^7.8.0",
+        "@mantine/vanilla-extract": "^7.8.0",
         "@naisutech/react-tree": "^3.1.0",
-        "@sentry/react": "^7.109.0",
-        "@tabler/icons-react": "^3.1.0",
-        "@tanstack/react-query": "^5.28.14",
+        "@sentry/react": "^7.110.0",
+        "@tabler/icons-react": "^3.2.0",
+        "@tanstack/react-query": "^5.29.2",
         "@uiw/codemirror-theme-vscode": "^4.21.25",
         "@uiw/react-codemirror": "^4.21.25",
         "@uiw/react-split": "^5.9.3",
-        "axios": "^1.6.7",
+        "@vanilla-extract/css": "^1.14.2",
+        "axios": "^1.6.8",
+        "clsx": "^2.1.0",
+        "codemirror": ">=6.0.0",
         "dayjs": "^1.11.10",
         "easymde": "^2.18.0",
         "embla-carousel-react": "^8.0.2",
         "html5-qrcode": "^2.3.8",
-        "mantine-datatable": "<7",
+        "mantine-datatable": "^7.8.1",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "react-grid-layout": "^1.4.4",
         "react-hook-form": "^7.51.3",
         "react-is": "^18.2.0",
-        "react-router-dom": "^6.22.1",
+        "react-router-dom": "^6.22.3",
         "react-select": "^5.8.0",
         "react-simplemde-editor": "^5.2.0",
         "recharts": "^2.12.4",
-        "styled-components": "^5.3.6",
-        "zustand": "^4.5.1"
+        "styled-components": "^6.1.8",
+        "zustand": "^4.5.2"
     },
     "devDependencies": {
-        "@babel/core": "^7.23.9",
-        "@babel/preset-react": "^7.23.3",
-        "@babel/preset-typescript": "^7.23.3",
-        "@lingui/cli": "^4.7.2",
+        "@babel/core": "^7.24.4",
+        "@babel/preset-react": "^7.24.1",
+        "@babel/preset-typescript": "^7.24.1",
+        "@lingui/cli": "^4.10.0",
         "@lingui/macro": "^4.10.0",
         "@playwright/test": "^1.43.1",
-        "@types/node": "^20.12.3",
-        "@types/react": "^18.2.74",
-        "@types/react-dom": "^18.2.23",
+        "@types/node": "^20.12.7",
+        "@types/react": "^18.2.79",
+        "@types/react-dom": "^18.2.25",
         "@types/react-grid-layout": "^1.3.5",
         "@types/react-router-dom": "^5.3.3",
+        "@vanilla-extract/vite-plugin": "^4.0.7",
         "@vitejs/plugin-react": "^4.2.1",
         "babel-plugin-macros": "^3.1.0",
         "nyc": "^15.1.0",
         "rollup-plugin-license": "^3.3.1",
-        "typescript": "^5.3.3",
-        "vite": "^5.2.7",
+        "typescript": "^5.4.5",
+        "vite": "^5.2.8",
         "vite-plugin-babel-macros": "^1.0.6",
         "vite-plugin-istanbul": "^6.0.0"
     }
diff --git a/src/frontend/playwright.config.ts b/src/frontend/playwright.config.ts
index fb339d6c4b..f24b94d323 100644
--- a/src/frontend/playwright.config.ts
+++ b/src/frontend/playwright.config.ts
@@ -5,7 +5,6 @@ export default defineConfig({
   fullyParallel: true,
   timeout: 60000,
   forbidOnly: !!process.env.CI,
-  timeout: 5 * 60 * 1000,
   retries: process.env.CI ? 1 : 0,
   workers: process.env.CI ? 2 : undefined,
   reporter: process.env.CI ? [['html', { open: 'never' }], ['github']] : 'list',
diff --git a/src/frontend/src/components/buttons/ActionButton.tsx b/src/frontend/src/components/buttons/ActionButton.tsx
index caa5bf1363..1a4eb08a31 100644
--- a/src/frontend/src/components/buttons/ActionButton.tsx
+++ b/src/frontend/src/components/buttons/ActionButton.tsx
@@ -1,5 +1,4 @@
-import { ActionIcon, Group, Tooltip } from '@mantine/core';
-import { FloatingPosition } from '@mantine/core/lib/Floating';
+import { ActionIcon, FloatingPosition, Group, Tooltip } from '@mantine/core';
 import { ReactNode } from 'react';
 
 import { notYetImplemented } from '../../functions/notifications';
@@ -41,7 +40,7 @@ export function ActionButton(props: ActionButtonProps) {
           onClick={props.onClick ?? notYetImplemented}
           variant={props.variant ?? 'light'}
         >
-          <Group spacing="xs" noWrap={true}>
+          <Group gap="xs" wrap="nowrap">
             {props.icon}
           </Group>
         </ActionIcon>
diff --git a/src/frontend/src/components/buttons/ButtonMenu.tsx b/src/frontend/src/components/buttons/ButtonMenu.tsx
index 47192ad20f..42feeb0718 100644
--- a/src/frontend/src/components/buttons/ButtonMenu.tsx
+++ b/src/frontend/src/components/buttons/ButtonMenu.tsx
@@ -18,7 +18,7 @@ export function ButtonMenu({
   return (
     <Menu shadow="xs">
       <Menu.Target>
-        <ActionIcon>
+        <ActionIcon variant="default">
           <Tooltip label={tooltip}>{icon}</Tooltip>
         </ActionIcon>
       </Menu.Target>
diff --git a/src/frontend/src/components/buttons/CopyButton.tsx b/src/frontend/src/components/buttons/CopyButton.tsx
index d1ebb8dacb..bf51eebd0b 100644
--- a/src/frontend/src/components/buttons/CopyButton.tsx
+++ b/src/frontend/src/components/buttons/CopyButton.tsx
@@ -17,7 +17,7 @@ export function CopyButton({
           onClick={copy}
           title={t`Copy to clipboard`}
           variant="subtle"
-          compact
+          size="compact-md"
         >
           <IconCopy size={10} />
           {label && <div>&nbsp;</div>}
diff --git a/src/frontend/src/components/buttons/EditButton.tsx b/src/frontend/src/components/buttons/EditButton.tsx
index 82a1cc02c2..a64aa41cc9 100644
--- a/src/frontend/src/components/buttons/EditButton.tsx
+++ b/src/frontend/src/components/buttons/EditButton.tsx
@@ -14,7 +14,11 @@ export function EditButton({
 }) {
   saveIcon = saveIcon || <IconDeviceFloppy />;
   return (
-    <ActionIcon onClick={() => setEditing()} disabled={disabled}>
+    <ActionIcon
+      onClick={() => setEditing()}
+      disabled={disabled}
+      variant="default"
+    >
       {editing ? saveIcon : <IconEdit />}
     </ActionIcon>
   );
diff --git a/src/frontend/src/components/buttons/SSOButton.tsx b/src/frontend/src/components/buttons/SSOButton.tsx
index 503f5dafd5..08f9fd44da 100644
--- a/src/frontend/src/components/buttons/SSOButton.tsx
+++ b/src/frontend/src/components/buttons/SSOButton.tsx
@@ -50,7 +50,7 @@ export function SsoButton({ provider }: { provider: Provider }) {
 
   return (
     <Button
-      leftIcon={getBrandIcon(provider)}
+      leftSection={getBrandIcon(provider)}
       radius="xl"
       component="a"
       onClick={login}
diff --git a/src/frontend/src/components/buttons/ScanButton.tsx b/src/frontend/src/components/buttons/ScanButton.tsx
index 83dd990aaf..915167767c 100644
--- a/src/frontend/src/components/buttons/ScanButton.tsx
+++ b/src/frontend/src/components/buttons/ScanButton.tsx
@@ -16,6 +16,7 @@ export function ScanButton() {
           innerProps: {}
         })
       }
+      variant="transparent"
       title={t`Open QR code scanner`}
     >
       <IconQrcode />
diff --git a/src/frontend/src/components/buttons/SplitButton.css.ts b/src/frontend/src/components/buttons/SplitButton.css.ts
new file mode 100644
index 0000000000..57b3bff79d
--- /dev/null
+++ b/src/frontend/src/components/buttons/SplitButton.css.ts
@@ -0,0 +1,19 @@
+import { style } from '@vanilla-extract/css';
+
+import { vars } from '../../theme';
+
+export const button = style({
+  borderTopRightRadius: 0,
+  borderBottomRightRadius: 0,
+
+  ':before': {
+    borderRadius: '0 !important'
+  }
+});
+
+export const icon = style({
+  borderTopLeftRadius: 0,
+  borderBottomLeftRadius: 0,
+  border: 0,
+  borderLeft: `1px solid ${vars.colors.primaryShade}`
+});
diff --git a/src/frontend/src/components/buttons/SplitButton.tsx b/src/frontend/src/components/buttons/SplitButton.tsx
index 1037cbd219..8bb73882bd 100644
--- a/src/frontend/src/components/buttons/SplitButton.tsx
+++ b/src/frontend/src/components/buttons/SplitButton.tsx
@@ -5,13 +5,13 @@ import {
   Menu,
   Text,
   Tooltip,
-  createStyles,
   useMantineTheme
 } from '@mantine/core';
 import { IconChevronDown } from '@tabler/icons-react';
 import { useEffect, useMemo, useState } from 'react';
 
 import { TablerIconType } from '../../functions/icons';
+import * as classes from './SplitButton.css';
 
 interface SplitButtonOption {
   key: string;
@@ -30,22 +30,6 @@ interface SplitButtonProps {
   loading?: boolean;
 }
 
-const useStyles = createStyles((theme) => ({
-  button: {
-    borderTopRightRadius: 0,
-    borderBottomRightRadius: 0,
-    '&::before': {
-      borderRadius: '0 !important'
-    }
-  },
-  icon: {
-    borderTopLeftRadius: 0,
-    borderBottomLeftRadius: 0,
-    border: 0,
-    borderLeft: `1px solid ${theme.primaryShade}`
-  }
-}));
-
 export function SplitButton({
   options,
   defaultSelected,
@@ -54,7 +38,6 @@ export function SplitButton({
   loading
 }: Readonly<SplitButtonProps>) {
   const [current, setCurrent] = useState<string>(defaultSelected);
-  const { classes } = useStyles();
 
   useEffect(() => {
     setSelected?.(current);
@@ -72,7 +55,7 @@ export function SplitButton({
   const theme = useMantineTheme();
 
   return (
-    <Group noWrap style={{ gap: 0 }}>
+    <Group wrap="nowrap" style={{ gap: 0 }}>
       <Button
         onClick={currentOption?.onClick}
         disabled={loading ? false : currentOption?.disabled}
@@ -106,7 +89,7 @@ export function SplitButton({
                 option.onClick();
               }}
               disabled={option.disabled}
-              icon={<option.icon />}
+              leftSection={<option.icon />}
             >
               <Tooltip label={option.tooltip} position="right">
                 <Text>{option.name}</Text>
diff --git a/src/frontend/src/components/buttons/SpotlightButton.tsx b/src/frontend/src/components/buttons/SpotlightButton.tsx
index c524e0b947..8631178c31 100644
--- a/src/frontend/src/components/buttons/SpotlightButton.tsx
+++ b/src/frontend/src/components/buttons/SpotlightButton.tsx
@@ -1,14 +1,19 @@
 import { t } from '@lingui/macro';
 import { ActionIcon } from '@mantine/core';
-import { spotlight } from '@mantine/spotlight';
 import { IconCommand } from '@tabler/icons-react';
 
+import { firstSpotlight } from '../nav/Layout';
+
 /**
  * A button which opens the quick command modal
  */
 export function SpotlightButton() {
   return (
-    <ActionIcon onClick={() => spotlight.open()} title={t`Open spotlight`}>
+    <ActionIcon
+      onClick={() => firstSpotlight.open()}
+      title={t`Open spotlight`}
+      variant="transparent"
+    >
       <IconCommand />
     </ActionIcon>
   );
diff --git a/src/frontend/src/components/details/Details.tsx b/src/frontend/src/components/details/Details.tsx
index d1ab9f8b4d..778bbdf4b5 100644
--- a/src/frontend/src/components/details/Details.tsx
+++ b/src/frontend/src/components/details/Details.tsx
@@ -324,7 +324,12 @@ function CopyField({ value }: { value: string }) {
     <CopyButton value={value}>
       {({ copied, copy }) => (
         <Tooltip label={copied ? t`Copied` : t`Copy`} withArrow>
-          <ActionIcon color={copied ? 'teal' : 'gray'} onClick={copy}>
+          <ActionIcon
+            color={copied ? 'teal' : 'gray'}
+            onClick={copy}
+            variant="transparent"
+            size="sm"
+          >
             {copied ? (
               <InvenTreeIcon icon="check" />
             ) : (
@@ -398,9 +403,14 @@ export function DetailsTable({
 }) {
   return (
     <Paper p="xs" withBorder radius="xs">
-      <Stack spacing="xs">
+      <Stack gap="xs">
         {title && <StylishText size="lg">{title}</StylishText>}
-        <Table striped>
+        <Table
+          striped
+          verticalSpacing="sm"
+          horizontalSpacing="md"
+          withColumnBorders
+        >
           <tbody>
             {fields
               .filter((field: DetailsField) => !field.hidden)
diff --git a/src/frontend/src/components/details/DetailsImage.tsx b/src/frontend/src/components/details/DetailsImage.tsx
index 3792208d5e..12d469ca65 100644
--- a/src/frontend/src/components/details/DetailsImage.tsx
+++ b/src/frontend/src/components/details/DetailsImage.tsx
@@ -8,7 +8,7 @@ import {
   Paper,
   Text,
   rem,
-  useMantineTheme
+  useMantineColorScheme
 } from '@mantine/core';
 import { Dropzone, FileWithPath, IMAGE_MIME_TYPE } from '@mantine/dropzone';
 import { useHover } from '@mantine/hooks';
@@ -21,6 +21,7 @@ import { cancelEvent } from '../../functions/events';
 import { InvenTreeIcon } from '../../functions/icons';
 import { useUserState } from '../../states/UserState';
 import { PartThumbTable } from '../../tables/part/PartThumbTable';
+import { vars } from '../../theme';
 import { ActionButton } from '../buttons/ActionButton';
 import { ApiImage } from '../images/ApiImage';
 import { StylishText } from '../items/StylishText';
@@ -87,8 +88,6 @@ function UploadModal({
   const [file1, setFile] = useState<FileWithPath | null>(null);
   let uploading = false;
 
-  const theme = useMantineTheme();
-
   // Components to show in the Dropzone when no file is selected
   const noFileIdle = (
     <Group>
@@ -122,7 +121,7 @@ function UploadModal({
       >
         <Image
           src={imageUrl}
-          imageProps={{ onLoad: () => URL.revokeObjectURL(imageUrl) }}
+          onLoad={() => URL.revokeObjectURL(imageUrl)}
           radius="sm"
           height={75}
           fit="contain"
@@ -160,12 +159,14 @@ function UploadModal({
     }
   };
 
+  const { colorScheme } = useMantineColorScheme();
+
   const primaryColor =
-    theme.colors[theme.primaryColor][theme.colorScheme === 'dark' ? 4 : 6];
-  const redColor = theme.colors.red[theme.colorScheme === 'dark' ? 4 : 6];
+    vars.colors.primaryColors[colorScheme === 'dark' ? 4 : 6];
+  const redColor = vars.colors.red[colorScheme === 'dark' ? 4 : 6];
 
   return (
-    <Paper sx={{ height: '220px' }}>
+    <Paper style={{ height: '220px' }}>
       <Dropzone
         onDrop={(files) => setFile(files[0])}
         maxFiles={1}
@@ -173,8 +174,8 @@ function UploadModal({
         loading={uploading}
       >
         <Group
-          position="center"
-          spacing="xl"
+          justify="center"
+          gap="xl"
           style={{ minHeight: rem(140), pointerEvents: 'none' }}
         >
           <Dropzone.Accept>
@@ -252,7 +253,7 @@ function ImageActionButtons({
     <>
       {visible && (
         <Group
-          spacing="xs"
+          gap="xs"
           style={{ zIndex: 2, position: 'absolute', top: '10px', left: '10px' }}
         >
           {actions.selectExisting && (
@@ -358,8 +359,8 @@ export function DetailsImage(props: Readonly<DetailImageProps>) {
         <>
           <ApiImage
             src={img}
-            height={IMAGE_DIMENSION}
-            width={IMAGE_DIMENSION}
+            mah={IMAGE_DIMENSION}
+            maw={IMAGE_DIMENSION}
             onClick={expandImage}
           />
           {permissions.hasChangeRole(props.appRole) &&
diff --git a/src/frontend/src/components/editors/TemplateEditor/TemplateEditor.tsx b/src/frontend/src/components/editors/TemplateEditor/TemplateEditor.tsx
index 1c5af32e48..01bc779645 100644
--- a/src/frontend/src/components/editors/TemplateEditor/TemplateEditor.tsx
+++ b/src/frontend/src/components/editors/TemplateEditor/TemplateEditor.tsx
@@ -222,7 +222,7 @@ export function TemplateEditor(props: Readonly<TemplateEditorProps>) {
       <Split style={{ gap: '10px' }}>
         <Tabs
           value={editorValue}
-          onTabChange={async (v) => {
+          onChange={async (v) => {
             codeRef.current = await getCodeFromEditor();
             setEditorValue(v);
           }}
@@ -239,13 +239,13 @@ export function TemplateEditor(props: Readonly<TemplateEditorProps>) {
               <Tabs.Tab
                 key={Editor.key}
                 value={Editor.key}
-                icon={<Editor.icon size="0.8rem" />}
+                leftSection={<Editor.icon size="0.8rem" />}
               >
                 {Editor.name}
               </Tabs.Tab>
             ))}
 
-            <Group position="right" style={{ flex: '1' }} noWrap>
+            <Group justify="right" style={{ flex: '1' }} wrap="nowrap">
               <SplitButton
                 loading={isPreviewLoading}
                 defaultSelected="preview_save"
@@ -288,7 +288,7 @@ export function TemplateEditor(props: Readonly<TemplateEditorProps>) {
 
         <Tabs
           value={previewValue}
-          onTabChange={setPreviewValue}
+          onChange={setPreviewValue}
           style={{
             minWidth: '200px',
             display: 'flex',
@@ -300,7 +300,7 @@ export function TemplateEditor(props: Readonly<TemplateEditorProps>) {
               <Tabs.Tab
                 key={PreviewArea.key}
                 value={PreviewArea.key}
-                icon={<PreviewArea.icon size="0.8rem" />}
+                leftSection={<PreviewArea.icon size="0.8rem" />}
               >
                 {PreviewArea.name}
               </Tabs.Tab>
diff --git a/src/frontend/src/components/forms/ApiForm.tsx b/src/frontend/src/components/forms/ApiForm.tsx
index 74a3047048..9a3ca4a0b0 100644
--- a/src/frontend/src/components/forms/ApiForm.tsx
+++ b/src/frontend/src/components/forms/ApiForm.tsx
@@ -482,11 +482,11 @@ export function ApiForm({
         <Paper mah={'65vh'} style={{ overflowY: 'auto' }}>
           <div>
             {/* Form Fields */}
-            <Stack spacing="sm">
+            <Stack gap="sm">
               {(!isValid || nonFieldErrors.length > 0) && (
                 <Alert radius="sm" color="red" title={t`Form Errors Exist`}>
                   {nonFieldErrors.length > 0 && (
-                    <Stack spacing="xs">
+                    <Stack gap="xs">
                       {nonFieldErrors.map((message) => (
                         <Text key={message}>{message}</Text>
                       ))}
@@ -509,7 +509,7 @@ export function ApiForm({
               </Boundary>
               <Boundary label={`ApiForm-${id}-FormContent`}>
                 <FormProvider {...form}>
-                  <Stack spacing="xs">
+                  <Stack gap="xs">
                     {!optionsLoading &&
                       Object.entries(fields).map(([fieldName, field]) => (
                         <ApiFormField
@@ -532,7 +532,7 @@ export function ApiForm({
         {/* Footer with Action Buttons */}
         <Divider />
         <div>
-          <Group position="right">
+          <Group justify="right">
             {props.actions?.map((action, i) => (
               <Button
                 key={i}
diff --git a/src/frontend/src/components/forms/AuthenticationForm.tsx b/src/frontend/src/components/forms/AuthenticationForm.tsx
index b0bb73e7ae..b469ea8e27 100644
--- a/src/frontend/src/components/forms/AuthenticationForm.tsx
+++ b/src/frontend/src/components/forms/AuthenticationForm.tsx
@@ -100,7 +100,7 @@ export function AuthenticationForm() {
       ) : null}
       <form onSubmit={classicForm.onSubmit(() => {})}>
         {classicLoginMode ? (
-          <Stack spacing={0}>
+          <Stack gap={0}>
             <TextInput
               required
               label={t`Username`}
@@ -114,7 +114,7 @@ export function AuthenticationForm() {
               {...classicForm.getInputProps('password')}
             />
             {auth_settings?.password_forgotten_enabled === true && (
-              <Group position="apart" mt="0">
+              <Group justify="space-between" mt="0">
                 <Anchor
                   component="button"
                   type="button"
@@ -139,7 +139,7 @@ export function AuthenticationForm() {
           </Stack>
         )}
 
-        <Group position="apart" mt="xl">
+        <Group justify="space-between" mt="xl">
           <Anchor
             component="button"
             type="button"
@@ -221,7 +221,7 @@ export function RegistrationForm() {
     <>
       {auth_settings?.registration_enabled && (
         <form onSubmit={registrationForm.onSubmit(() => {})}>
-          <Stack spacing={0}>
+          <Stack gap={0}>
             <TextInput
               required
               label={t`Username`}
@@ -249,7 +249,7 @@ export function RegistrationForm() {
             />
           </Stack>
 
-          <Group position="apart" mt="xl">
+          <Group justify="space-between" mt="xl">
             <Button
               type="submit"
               disabled={isRegistering}
diff --git a/src/frontend/src/components/forms/HostOptionsForm.tsx b/src/frontend/src/components/forms/HostOptionsForm.tsx
index c8ee15bc7a..15f8368256 100644
--- a/src/frontend/src/components/forms/HostOptionsForm.tsx
+++ b/src/frontend/src/components/forms/HostOptionsForm.tsx
@@ -35,13 +35,13 @@ export function HostOptionsForm({
           <TextInput
             placeholder={t`Host`}
             withAsterisk
-            sx={{ flex: 1 }}
+            style={{ flex: 1 }}
             {...form.getInputProps(`${key}.host`)}
           />
           <TextInput
             placeholder={t`Name`}
             withAsterisk
-            sx={{ flex: 1 }}
+            style={{ flex: 1 }}
             {...form.getInputProps(`${key}.name`)}
           />
           <ActionIcon
@@ -49,6 +49,7 @@ export function HostOptionsForm({
             onClick={() => {
               deleteItem(key);
             }}
+            variant="default"
           >
             <IconTrash />
           </ActionIcon>
@@ -59,18 +60,18 @@ export function HostOptionsForm({
 
   return (
     <form onSubmit={form.onSubmit(saveOptions)}>
-      <Box sx={{ maxWidth: 500 }} mx="auto">
+      <Box style={{ maxWidth: 500 }} mx="auto">
         {fields.length > 0 ? (
           <Group mb="xs">
-            <Text weight={500} size="sm" sx={{ flex: 1 }}>
+            <Text fw={500} size="sm" style={{ flex: 1 }}>
               <Trans>Host</Trans>
             </Text>
-            <Text weight={500} size="sm" sx={{ flex: 1 }}>
+            <Text fw={500} size="sm" style={{ flex: 1 }}>
               <Trans>Name</Trans>
             </Text>
           </Group>
         ) : (
-          <Text color="dimmed" align="center">
+          <Text c="dimmed" ta="center">
             <Trans>No one here...</Trans>
           </Text>
         )}
@@ -84,7 +85,7 @@ export function HostOptionsForm({
             <IconSquarePlus />
             <Trans>Add Host</Trans>
           </Button>
-          <Space sx={{ flex: 1 }} />
+          <Space style={{ flex: 1 }} />
           <Button type="submit">
             <Trans>Save</Trans>
           </Button>
diff --git a/src/frontend/src/components/forms/InstanceOptions.tsx b/src/frontend/src/components/forms/InstanceOptions.tsx
index 4074cee3cf..475cc30fd4 100644
--- a/src/frontend/src/components/forms/InstanceOptions.tsx
+++ b/src/frontend/src/components/forms/InstanceOptions.tsx
@@ -15,7 +15,7 @@ export function InstanceOptions({
   setHostEdit
 }: {
   hostKey: string;
-  ChangeHost: (newHost: string) => void;
+  ChangeHost: (newHost: string | null) => void;
   setHostEdit: () => void;
 }) {
   const [HostListEdit, setHostListEdit] = useToggle([false, true] as const);
diff --git a/src/frontend/src/components/forms/fields/ApiFormField.tsx b/src/frontend/src/components/forms/fields/ApiFormField.tsx
index 1d26224586..90446eef3b 100644
--- a/src/frontend/src/components/forms/fields/ApiFormField.tsx
+++ b/src/frontend/src/components/forms/fields/ApiFormField.tsx
@@ -230,9 +230,8 @@ export function ApiFormField({
             id={fieldId}
             value={numericalValue}
             error={error?.message}
-            precision={definition.field_type == 'integer' ? 0 : 10}
-            onChange={(value: number) => onChange(value)}
-            removeTrailingZeros
+            decimalScale={definition.field_type == 'integer' ? 0 : 10}
+            onChange={(value: number | string | null) => onChange(value)}
             step={1}
           />
         );
diff --git a/src/frontend/src/components/forms/fields/ChoiceField.tsx b/src/frontend/src/components/forms/fields/ChoiceField.tsx
index 36554c2c3d..a65f630463 100644
--- a/src/frontend/src/components/forms/fields/ChoiceField.tsx
+++ b/src/frontend/src/components/forms/fields/ChoiceField.tsx
@@ -31,8 +31,8 @@ export function ChoiceField({
 
     return choices.map((choice) => {
       return {
-        value: choice.value,
-        label: choice.display_name
+        value: choice.value.toString(),
+        label: choice.display_name.toString()
       };
     });
   }, [definition.choices]);
@@ -62,8 +62,8 @@ export function ChoiceField({
       placeholder={definition.placeholder}
       required={definition.required}
       disabled={definition.disabled}
-      icon={definition.icon}
-      withinPortal={true}
+      leftSection={definition.icon}
+      comboboxProps={{ withinPortal: true }}
     />
   );
 }
diff --git a/src/frontend/src/components/forms/fields/DateField.tsx b/src/frontend/src/components/forms/fields/DateField.tsx
index 764a222212..9ce03b749e 100644
--- a/src/frontend/src/components/forms/fields/DateField.tsx
+++ b/src/frontend/src/components/forms/fields/DateField.tsx
@@ -61,7 +61,7 @@ export default function DateField({
       label={definition.label}
       description={definition.description}
       placeholder={definition.placeholder}
-      icon={definition.icon}
+      leftSection={definition.icon}
     />
   );
 }
diff --git a/src/frontend/src/components/forms/fields/NestedObjectField.tsx b/src/frontend/src/components/forms/fields/NestedObjectField.tsx
index aa423f9521..d3b6164eb2 100644
--- a/src/frontend/src/components/forms/fields/NestedObjectField.tsx
+++ b/src/frontend/src/components/forms/fields/NestedObjectField.tsx
@@ -19,8 +19,8 @@ export function NestedObjectField({
           <Text>{definition.label}</Text>
         </Accordion.Control>
         <Accordion.Panel>
-          <Divider sx={{ marginTop: '-10px', marginBottom: '10px' }} />
-          <Stack spacing="xs">
+          <Divider style={{ marginTop: '-10px', marginBottom: '10px' }} />
+          <Stack gap="xs">
             {Object.entries(definition.children ?? {}).map(
               ([childFieldName, field]) => (
                 <ApiFormField
diff --git a/src/frontend/src/components/forms/fields/RelatedModelField.tsx b/src/frontend/src/components/forms/fields/RelatedModelField.tsx
index d53e732611..8737834e13 100644
--- a/src/frontend/src/components/forms/fields/RelatedModelField.tsx
+++ b/src/frontend/src/components/forms/fields/RelatedModelField.tsx
@@ -1,5 +1,10 @@
 import { t } from '@lingui/macro';
-import { Input, useMantineTheme } from '@mantine/core';
+import {
+  Input,
+  darken,
+  useMantineColorScheme,
+  useMantineTheme
+} from '@mantine/core';
 import { useDebouncedValue, useId } from '@mantine/hooks';
 import { useQuery } from '@tanstack/react-query';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
@@ -11,6 +16,7 @@ import {
 import Select from 'react-select';
 
 import { api } from '../../../App';
+import { vars } from '../../../theme';
 import { RenderInstance } from '../../render/Instance';
 import { ApiFormFieldType } from './ApiFormField';
 
@@ -217,43 +223,46 @@ export function RelatedModelField({
   // Define color theme to pass to field based on Mantine theme
   const theme = useMantineTheme();
 
+  const colorschema = vars.colors.primaryColors;
+  const { colorScheme } = useMantineColorScheme();
+
   const colors = useMemo(() => {
     let colors: any;
-    if (theme.colorScheme === 'dark') {
+    if (colorScheme === 'dark') {
       colors = {
-        neutral0: theme.colors[theme.colorScheme][6],
-        neutral5: theme.colors[theme.colorScheme][4],
-        neutral10: theme.colors[theme.colorScheme][4],
-        neutral20: theme.colors[theme.colorScheme][4],
-        neutral30: theme.colors[theme.colorScheme][3],
-        neutral40: theme.colors[theme.colorScheme][2],
-        neutral50: theme.colors[theme.colorScheme][1],
-        neutral60: theme.colors[theme.colorScheme][0],
-        neutral70: theme.colors[theme.colorScheme][0],
-        neutral80: theme.colors[theme.colorScheme][0],
-        neutral90: theme.colors[theme.colorScheme][0],
-        primary: theme.colors[theme.primaryColor][7],
-        primary25: theme.colors[theme.primaryColor][6],
-        primary50: theme.colors[theme.primaryColor][5],
-        primary75: theme.colors[theme.primaryColor][4]
+        neutral0: colorschema[6],
+        neutral5: colorschema[4],
+        neutral10: colorschema[4],
+        neutral20: colorschema[4],
+        neutral30: colorschema[3],
+        neutral40: colorschema[2],
+        neutral50: colorschema[1],
+        neutral60: colorschema[0],
+        neutral70: colorschema[0],
+        neutral80: colorschema[0],
+        neutral90: colorschema[0],
+        primary: vars.colors.primaryColors[7],
+        primary25: vars.colors.primaryColors[6],
+        primary50: vars.colors.primaryColors[5],
+        primary75: vars.colors.primaryColors[4]
       };
     } else {
       colors = {
-        neutral0: theme.white,
-        neutral5: theme.fn.darken(theme.white, 0.05),
-        neutral10: theme.fn.darken(theme.white, 0.1),
-        neutral20: theme.fn.darken(theme.white, 0.2),
-        neutral30: theme.fn.darken(theme.white, 0.3),
-        neutral40: theme.fn.darken(theme.white, 0.4),
-        neutral50: theme.fn.darken(theme.white, 0.5),
-        neutral60: theme.fn.darken(theme.white, 0.6),
-        neutral70: theme.fn.darken(theme.white, 0.7),
-        neutral80: theme.fn.darken(theme.white, 0.8),
-        neutral90: theme.fn.darken(theme.white, 0.9),
-        primary: theme.colors[theme.primaryColor][7],
-        primary25: theme.colors[theme.primaryColor][4],
-        primary50: theme.colors[theme.primaryColor][5],
-        primary75: theme.colors[theme.primaryColor][6]
+        neutral0: vars.colors.white,
+        neutral5: darken(vars.colors.white, 0.05),
+        neutral10: darken(vars.colors.white, 0.1),
+        neutral20: darken(vars.colors.white, 0.2),
+        neutral30: darken(vars.colors.white, 0.3),
+        neutral40: darken(vars.colors.white, 0.4),
+        neutral50: darken(vars.colors.white, 0.5),
+        neutral60: darken(vars.colors.white, 0.6),
+        neutral70: darken(vars.colors.white, 0.7),
+        neutral80: darken(vars.colors.white, 0.8),
+        neutral90: darken(vars.colors.white, 0.9),
+        primary: vars.colors.primaryColors[7],
+        primary25: vars.colors.primaryColors[4],
+        primary50: vars.colors.primaryColors[5],
+        primary75: vars.colors.primaryColors[6]
       };
     }
     return colors;
diff --git a/src/frontend/src/components/images/ApiImage.tsx b/src/frontend/src/components/images/ApiImage.tsx
index ce123f2ed3..9f0634cea1 100644
--- a/src/frontend/src/components/images/ApiImage.tsx
+++ b/src/frontend/src/components/images/ApiImage.tsx
@@ -8,10 +8,14 @@ import { useMemo } from 'react';
 
 import { useLocalState } from '../../states/LocalState';
 
+interface ApiImageProps extends ImageProps {
+  onClick?: (event: any) => void;
+}
+
 /**
  * Construct an image container which will load and display the image
  */
-export function ApiImage(props: ImageProps) {
+export function ApiImage(props: Readonly<ApiImageProps>) {
   const { host } = useLocalState.getState();
 
   const imageUrl = useMemo(() => {
@@ -21,12 +25,9 @@ export function ApiImage(props: ImageProps) {
   return (
     <Stack>
       {imageUrl ? (
-        <Image {...props} src={imageUrl} withPlaceholder fit="contain" />
+        <Image {...props} src={imageUrl} fit="contain" />
       ) : (
-        <Skeleton
-          height={props?.height ?? props.width}
-          width={props?.width ?? props.height}
-        />
+        <Skeleton h={props?.h ?? props.w} w={props?.w ?? props.h} />
       )}
     </Stack>
   );
diff --git a/src/frontend/src/components/images/Thumbnail.tsx b/src/frontend/src/components/images/Thumbnail.tsx
index 33f1628d68..2b63b0f16a 100644
--- a/src/frontend/src/components/images/Thumbnail.tsx
+++ b/src/frontend/src/components/images/Thumbnail.tsx
@@ -37,19 +37,14 @@ export function Thumbnail({
   }, [link, text]);
 
   return (
-    <Group align={align ?? 'left'} spacing="xs" noWrap={true}>
+    <Group align={align ?? 'left'} gap="xs" wrap="nowrap">
       <ApiImage
         src={src || backup_image}
-        alt={alt}
-        width={size}
+        aria-label={alt}
+        w={size}
         fit="contain"
         radius="xs"
-        withPlaceholder
-        imageProps={{
-          style: {
-            maxHeight: size
-          }
-        }}
+        style={{ maxHeight: size }}
       />
       {inner}
     </Group>
@@ -71,7 +66,7 @@ export function ThumbnailHoverCard({
 }) {
   const card = useMemo(() => {
     return (
-      <Group position="left" spacing={10} noWrap={true}>
+      <Group justify="left" gap={10} wrap="nowrap">
         <Thumbnail src={src} alt={alt} size={size} />
         <Text>{text}</Text>
       </Group>
diff --git a/src/frontend/src/components/items/ActionDropdown.tsx b/src/frontend/src/components/items/ActionDropdown.tsx
index a677bd6ee5..dd91918737 100644
--- a/src/frontend/src/components/items/ActionDropdown.tsx
+++ b/src/frontend/src/components/items/ActionDropdown.tsx
@@ -79,7 +79,7 @@ export function ActionDropdown({
             >
               <Tooltip label={action.tooltip}>
                 <Menu.Item
-                  icon={action.icon}
+                  leftSection={action.icon}
                   onClick={() => {
                     if (action.onClick != undefined) {
                       action.onClick();
diff --git a/src/frontend/src/components/items/AttachmentLink.tsx b/src/frontend/src/components/items/AttachmentLink.tsx
index bd615a73ff..0153f4ae45 100644
--- a/src/frontend/src/components/items/AttachmentLink.tsx
+++ b/src/frontend/src/components/items/AttachmentLink.tsx
@@ -72,7 +72,7 @@ export function AttachmentLink({
   }, [host, attachment, external]);
 
   return (
-    <Group position="left" spacing="sm">
+    <Group justify="left" gap="sm">
       {external ? <IconLink /> : attachmentIcon(attachment)}
       <Anchor href={url} target="_blank" rel="noopener noreferrer">
         {text}
diff --git a/src/frontend/src/components/items/ColorToggle.tsx b/src/frontend/src/components/items/ColorToggle.tsx
index 0724cb805e..59be5d7249 100644
--- a/src/frontend/src/components/items/ColorToggle.tsx
+++ b/src/frontend/src/components/items/ColorToggle.tsx
@@ -1,20 +1,21 @@
 import { ActionIcon, Group, useMantineColorScheme } from '@mantine/core';
 import { IconMoonStars, IconSun } from '@tabler/icons-react';
 
+import { vars } from '../../theme';
+
 export function ColorToggle() {
   const { colorScheme, toggleColorScheme } = useMantineColorScheme();
 
   return (
-    <Group position="center">
+    <Group justify="center">
       <ActionIcon
-        onClick={() => toggleColorScheme()}
+        onClick={toggleColorScheme}
         size="lg"
-        sx={(theme) => ({
+        style={{
           color:
-            theme.colorScheme === 'dark'
-              ? theme.colors.yellow[4]
-              : theme.colors.blue[6]
-        })}
+            colorScheme === 'dark' ? vars.colors.yellow[4] : vars.colors.blue[6]
+        }}
+        variant="transparent"
       >
         {colorScheme === 'dark' ? <IconSun /> : <IconMoonStars />}
       </ActionIcon>
diff --git a/src/frontend/src/components/items/DashboardItem.tsx b/src/frontend/src/components/items/DashboardItem.tsx
index 49b9b6bf46..a9fb2a5d3c 100644
--- a/src/frontend/src/components/items/DashboardItem.tsx
+++ b/src/frontend/src/components/items/DashboardItem.tsx
@@ -1,6 +1,6 @@
 import { Group, LoadingOverlay, Paper, Text } from '@mantine/core';
 
-import { InvenTreeStyle } from '../../globalStyle';
+import * as classes from '../../main.css';
 
 export interface StatisticItemProps {
   title: string;
@@ -16,18 +16,16 @@ export function StatisticItem({
   data: StatisticItemProps;
   isLoading: boolean;
 }) {
-  const { classes } = InvenTreeStyle();
-
   return (
     <Paper withBorder p="xs" key={id} pos="relative">
-      <LoadingOverlay visible={isLoading} overlayBlur={2} />
-      <Group position="apart">
+      <LoadingOverlay visible={isLoading} overlayProps={{ blur: 2 }} />
+      <Group justify="space-between">
         <Text size="xs" color="dimmed" className={classes.dashboardItemTitle}>
           {data.title}
         </Text>
       </Group>
 
-      <Group align="flex-end" spacing="xs" mt={25}>
+      <Group align="flex-end" gap="xs" mt={25}>
         <Text className={classes.dashboardItemValue}>{data.value}</Text>
       </Group>
     </Paper>
diff --git a/src/frontend/src/components/items/DocTooltip.tsx b/src/frontend/src/components/items/DocTooltip.tsx
index cd8d520efc..113ca234d6 100644
--- a/src/frontend/src/components/items/DocTooltip.tsx
+++ b/src/frontend/src/components/items/DocTooltip.tsx
@@ -2,7 +2,7 @@ import { Trans } from '@lingui/macro';
 import { Anchor, Container, HoverCard, ScrollArea, Text } from '@mantine/core';
 import { useEffect, useRef, useState } from 'react';
 
-import { InvenTreeStyle } from '../../globalStyle';
+import * as classes from '../../main.css';
 
 export interface BaseDocProps {
   text: string | JSX.Element;
@@ -22,8 +22,6 @@ export function DocTooltip({
   link,
   docchildren
 }: Readonly<DocTooltipProps>) {
-  const { classes } = InvenTreeStyle();
-
   return (
     <HoverCard
       shadow="md"
diff --git a/src/frontend/src/components/items/GettingStartedCarousel.css.ts b/src/frontend/src/components/items/GettingStartedCarousel.css.ts
new file mode 100644
index 0000000000..7ef49af272
--- /dev/null
+++ b/src/frontend/src/components/items/GettingStartedCarousel.css.ts
@@ -0,0 +1,30 @@
+import { rem } from '@mantine/core';
+import { style } from '@vanilla-extract/css';
+
+import { vars } from '../../theme';
+
+export const card = style({
+  height: rem(170),
+  display: 'flex',
+  flexDirection: 'column',
+  justifyContent: 'space-between',
+  alignItems: 'flex-start',
+  backgroundSize: 'cover',
+  backgroundPosition: 'center'
+});
+
+export const title = style({
+  fontWeight: 900,
+  lineHeight: 1.2,
+  fontSize: rem(32),
+  marginTop: 0,
+  [vars.lightSelector]: { color: vars.colors.dark[5] },
+  [vars.darkSelector]: { color: vars.colors.white[0] }
+});
+
+export const category = style({
+  opacity: 0.7,
+  fontWeight: 700,
+  [vars.lightSelector]: { color: vars.colors.dark[5] },
+  [vars.darkSelector]: { color: vars.colors.white[0] }
+});
diff --git a/src/frontend/src/components/items/GettingStartedCarousel.tsx b/src/frontend/src/components/items/GettingStartedCarousel.tsx
index c3561bb922..e317c3a817 100644
--- a/src/frontend/src/components/items/GettingStartedCarousel.tsx
+++ b/src/frontend/src/components/items/GettingStartedCarousel.tsx
@@ -1,54 +1,17 @@
 import { Trans } from '@lingui/macro';
 import { Carousel } from '@mantine/carousel';
-import {
-  Anchor,
-  Button,
-  Paper,
-  Text,
-  Title,
-  createStyles,
-  rem
-} from '@mantine/core';
+import { Anchor, Button, Paper, Text, Title, rem } from '@mantine/core';
 
 import { DocumentationLinkItem } from './DocumentationLinks';
+import * as classes from './GettingStartedCarousel.css';
 import { PlaceholderPill } from './Placeholder';
 
-const useStyles = createStyles((theme) => ({
-  card: {
-    height: rem(170),
-    display: 'flex',
-    flexDirection: 'column',
-    justifyContent: 'space-between',
-    alignItems: 'flex-start',
-    backgroundSize: 'cover',
-    backgroundPosition: 'center'
-  },
-
-  title: {
-    fontWeight: 900,
-    color:
-      theme.colorScheme === 'dark' ? theme.colors.white : theme.colors.dark,
-    lineHeight: 1.2,
-    fontSize: rem(32),
-    marginTop: 0
-  },
-
-  category: {
-    color:
-      theme.colorScheme === 'dark' ? theme.colors.white : theme.colors.dark,
-    opacity: 0.7,
-    fontWeight: 700
-  }
-}));
-
 function StartedCard({
   title,
   description,
   link,
   placeholder
 }: DocumentationLinkItem) {
-  const { classes } = useStyles();
-
   return (
     <Paper shadow="md" p="xl" radius="md" className={classes.card}>
       <div>
@@ -81,10 +44,11 @@ export function GettingStartedCarousel({
 
   return (
     <Carousel
-      slideSize="50%"
-      breakpoints={[{ maxWidth: 'sm', slideSize: '100%', slideGap: rem(2) }]}
-      slideGap="xl"
+      slideSize={{ base: '100%', sm: '50%', md: '33.333333%' }}
+      slideGap={{ base: 0, sm: 'md' }}
+      slidesToScroll={3}
       align="start"
+      loop
     >
       {slides}
     </Carousel>
diff --git a/src/frontend/src/components/items/InfoItem.tsx b/src/frontend/src/components/items/InfoItem.tsx
index ad12e5d855..e3c06789e7 100644
--- a/src/frontend/src/components/items/InfoItem.tsx
+++ b/src/frontend/src/components/items/InfoItem.tsx
@@ -43,7 +43,7 @@ export function InfoItem({
   }
 
   return (
-    <Group position="apart">
+    <Group justify="space-between">
       <Text fz="sm" fw={700}>
         {name}:
       </Text>
diff --git a/src/frontend/src/components/items/InvenTreeLogo.tsx b/src/frontend/src/components/items/InvenTreeLogo.tsx
index 811658bfa6..b0a92c3c65 100644
--- a/src/frontend/src/components/items/InvenTreeLogo.tsx
+++ b/src/frontend/src/components/items/InvenTreeLogo.tsx
@@ -10,7 +10,7 @@ export const InvenTreeLogoHomeButton = forwardRef<HTMLDivElement>(
     return (
       <div ref={ref} {...props}>
         <NavLink to={'/'}>
-          <ActionIcon size={28}>
+          <ActionIcon size={28} variant="transparent">
             <InvenTreeLogo />
           </ActionIcon>
         </NavLink>
diff --git a/src/frontend/src/components/items/LanguageSelect.tsx b/src/frontend/src/components/items/LanguageSelect.tsx
index e72b49c5ff..9c38ec9484 100644
--- a/src/frontend/src/components/items/LanguageSelect.tsx
+++ b/src/frontend/src/components/items/LanguageSelect.tsx
@@ -1,4 +1,4 @@
-import { Select, SelectItem } from '@mantine/core';
+import { Select } from '@mantine/core';
 import { useEffect, useState } from 'react';
 
 import { getSupportedLanguages } from '../../contexts/LanguageContext';
@@ -10,7 +10,7 @@ export function LanguageSelect({ width = 80 }: { width?: number }) {
     state.language,
     state.setLanguage
   ]);
-  const [langOptions, setLangOptions] = useState<SelectItem[]>([]);
+  const [langOptions, setLangOptions] = useState<any[]>([]);
 
   // change global language on change
   useEffect(() => {
diff --git a/src/frontend/src/components/items/LanguageToggle.tsx b/src/frontend/src/components/items/LanguageToggle.tsx
index 4c28415057..40d1fcfada 100644
--- a/src/frontend/src/components/items/LanguageToggle.tsx
+++ b/src/frontend/src/components/items/LanguageToggle.tsx
@@ -9,14 +9,18 @@ export function LanguageToggle() {
 
   return (
     <Group
-      position="center"
+      justify="center"
       style={{
         border: open === true ? `1px dashed ` : ``,
         margin: open === true ? 2 : 12,
         padding: open === true ? 8 : 0
       }}
     >
-      <ActionIcon onClick={() => toggle.toggle()} size="lg">
+      <ActionIcon
+        onClick={() => toggle.toggle()}
+        size="lg"
+        variant="transparent"
+      >
         <IconLanguage />
       </ActionIcon>
       {open && (
diff --git a/src/frontend/src/components/items/MenuLinks.tsx b/src/frontend/src/components/items/MenuLinks.tsx
index c82249ea1b..ad50300869 100644
--- a/src/frontend/src/components/items/MenuLinks.tsx
+++ b/src/frontend/src/components/items/MenuLinks.tsx
@@ -2,7 +2,7 @@ import { SimpleGrid, Text, UnstyledButton } from '@mantine/core';
 import React from 'react';
 import { Link } from 'react-router-dom';
 
-import { InvenTreeStyle } from '../../globalStyle';
+import * as classes from '../../main.css';
 import { DocTooltip } from './DocTooltip';
 
 export interface MenuLinkItem {
@@ -50,8 +50,6 @@ export function MenuLinks({
   links: MenuLinkItem[];
   highlighted?: boolean;
 }) {
-  const { classes } = InvenTreeStyle();
-
   const filteredLinks = links.filter(
     (item) => !highlighted || item.highlight === true
   );
diff --git a/src/frontend/src/components/items/Placeholder.tsx b/src/frontend/src/components/items/Placeholder.tsx
index e1da638c39..9706b85f31 100644
--- a/src/frontend/src/components/items/Placeholder.tsx
+++ b/src/frontend/src/components/items/Placeholder.tsx
@@ -9,7 +9,7 @@ export function PlaceholderPill() {
   return (
     <Tooltip
       multiline
-      width={220}
+      w={220}
       withArrow
       label={t`This feature/button/site is a placeholder for a feature that is not implemented, only partial or intended for testing.`}
     >
@@ -31,7 +31,7 @@ export function PlaceholderPanel() {
         title={t`This panel is a placeholder.`}
         icon={<IconInfoCircle />}
       >
-        <Text color="gray">This panel has not yet been implemented</Text>
+        <Text c="gray">This panel has not yet been implemented</Text>
       </Alert>
     </Stack>
   );
diff --git a/src/frontend/src/components/items/ProgressBar.tsx b/src/frontend/src/components/items/ProgressBar.tsx
index 40bb9d3034..755f96cac2 100644
--- a/src/frontend/src/components/items/ProgressBar.tsx
+++ b/src/frontend/src/components/items/ProgressBar.tsx
@@ -23,9 +23,9 @@ export function ProgressBar(props: Readonly<ProgressBarProps>) {
   }, [props]);
 
   return (
-    <Stack spacing={2} style={{ flexGrow: 1, minWidth: '100px' }}>
+    <Stack gap={2} style={{ flexGrow: 1, minWidth: '100px' }}>
       {props.progressLabel && (
-        <Text align="center" size="xs">
+        <Text ta="center" size="xs">
           {props.value} / {props.maximum}
         </Text>
       )}
diff --git a/src/frontend/src/components/items/StylishText.tsx b/src/frontend/src/components/items/StylishText.tsx
index 877fa7a680..774a6fdde9 100644
--- a/src/frontend/src/components/items/StylishText.tsx
+++ b/src/frontend/src/components/items/StylishText.tsx
@@ -1,6 +1,6 @@
 import { Text } from '@mantine/core';
 
-import { InvenTreeStyle } from '../../globalStyle';
+import * as classes from '../../main.css';
 
 export function StylishText({
   children,
@@ -9,7 +9,6 @@ export function StylishText({
   children: JSX.Element | string;
   size?: string;
 }) {
-  const { classes } = InvenTreeStyle();
   return (
     <Text size={size} className={classes.signText} variant="gradient">
       {children}
diff --git a/src/frontend/src/components/modals/AboutInvenTreeModal.tsx b/src/frontend/src/components/modals/AboutInvenTreeModal.tsx
index 4c4bd53c14..aecbcb60ad 100644
--- a/src/frontend/src/components/modals/AboutInvenTreeModal.tsx
+++ b/src/frontend/src/components/modals/AboutInvenTreeModal.tsx
@@ -59,7 +59,7 @@ export function AboutInvenTreeModal({
       <tr key={idx}>
         <td>{map.title}</td>
         <td>
-          <Group position="apart" spacing="xs">
+          <Group justify="space-between" gap="xs">
             {alwaysLink ? (
               <Anchor href={data[map.ref]} target="_blank">
                 {data[map.ref]}
@@ -177,7 +177,7 @@ export function AboutInvenTreeModal({
         </tbody>
       </Table>
       <Divider />
-      <Group position="apart">
+      <Group justify="space-between">
         <CopyButton
           value={copyval}
           label={<Trans>Copy version information</Trans>}
diff --git a/src/frontend/src/components/modals/LicenseModal.tsx b/src/frontend/src/components/modals/LicenseModal.tsx
index c321d11532..21266059e0 100644
--- a/src/frontend/src/components/modals/LicenseModal.tsx
+++ b/src/frontend/src/components/modals/LicenseModal.tsx
@@ -18,7 +18,7 @@ import { apiUrl } from '../../states/ApiState';
 
 export function LicenceView(entries: Readonly<any[]>) {
   return (
-    <Stack spacing="xs">
+    <Stack gap="xs">
       <Divider />
       {entries?.length > 0 ? (
         <Accordion variant="contained" defaultValue="-">
@@ -28,7 +28,7 @@ export function LicenceView(entries: Readonly<any[]>) {
               value={`entry-${index}`}
             >
               <Accordion.Control>
-                <Group position="apart" grow>
+                <Group justify="space-between" grow>
                   <Text>{entry.name}</Text>
                   <Text>{entry.license}</Text>
                   <Space />
@@ -63,7 +63,7 @@ export function LicenseModal() {
   const rspdata = !data ? [] : Object.keys(data ?? {});
 
   return (
-    <Stack spacing="xs">
+    <Stack gap="xs">
       <Divider />
       <LoadingOverlay visible={isFetching} />
       {isFetching && (
diff --git a/src/frontend/src/components/modals/QrCodeModal.tsx b/src/frontend/src/components/modals/QrCodeModal.tsx
index c5d04bc76c..b7907c8c82 100644
--- a/src/frontend/src/components/modals/QrCodeModal.tsx
+++ b/src/frontend/src/components/modals/QrCodeModal.tsx
@@ -150,7 +150,7 @@ export function QrCodeModal({
     <Stack>
       <Group>
         <Text size="sm">{camId?.label}</Text>
-        <Space sx={{ flex: 1 }} />
+        <Space style={{ flex: 1 }} />
         <Badge>{ScanningEnabled ? t`Scanning` : t`Not scanning`}</Badge>
       </Group>
       <Container px={0} id="reader" w={'100%'} mih="300px" />
@@ -162,14 +162,14 @@ export function QrCodeModal({
         <>
           <Group>
             <Button
-              sx={{ flex: 1 }}
+              style={{ flex: 1 }}
               onClick={() => startScanning()}
               disabled={camId != undefined && ScanningEnabled}
             >
               <Trans>Start scanning</Trans>
             </Button>
             <Button
-              sx={{ flex: 1 }}
+              style={{ flex: 1 }}
               onClick={() => stopScanning()}
               disabled={!ScanningEnabled}
             >
@@ -177,11 +177,11 @@ export function QrCodeModal({
             </Button>
           </Group>
           {values.length == 0 ? (
-            <Text color={'grey'}>
+            <Text c={'grey'}>
               <Trans>No scans yet!</Trans>
             </Text>
           ) : (
-            <ScrollArea sx={{ height: 200 }} type="auto" offsetScrollbars>
+            <ScrollArea style={{ height: 200 }} type="auto" offsetScrollbars>
               {values.map((value, index) => (
                 <div key={index}>{value}</div>
               ))}
diff --git a/src/frontend/src/components/modals/ServerInfoModal.tsx b/src/frontend/src/components/modals/ServerInfoModal.tsx
index 572d7167b6..f74e4a6ec5 100644
--- a/src/frontend/src/components/modals/ServerInfoModal.tsx
+++ b/src/frontend/src/components/modals/ServerInfoModal.tsx
@@ -137,7 +137,7 @@ export function ServerInfoModal({
         </tbody>
       </Table>
       <Divider />
-      <Group position="right">
+      <Group justify="right">
         <Button
           color="red"
           onClick={() => {
diff --git a/src/frontend/src/components/nav/BreadcrumbList.tsx b/src/frontend/src/components/nav/BreadcrumbList.tsx
index ef45cc7b6a..dbd5ca0f30 100644
--- a/src/frontend/src/components/nav/BreadcrumbList.tsx
+++ b/src/frontend/src/components/nav/BreadcrumbList.tsx
@@ -41,10 +41,14 @@ export function BreadcrumbList({
   }, [breadcrumbs]);
 
   return (
-    <Paper p="3" radius="xs">
-      <Group spacing="xs">
+    <Paper p="7" radius="xs" shadow="xs">
+      <Group gap="xs">
         {navCallback && (
-          <ActionIcon key="nav-action" onClick={navCallback}>
+          <ActionIcon
+            key="nav-action"
+            onClick={navCallback}
+            variant="transparent"
+          >
             <IconMenu2 />
           </ActionIcon>
         )}
diff --git a/src/frontend/src/components/nav/DetailDrawer.css.ts b/src/frontend/src/components/nav/DetailDrawer.css.ts
new file mode 100644
index 0000000000..a68b2a9d0d
--- /dev/null
+++ b/src/frontend/src/components/nav/DetailDrawer.css.ts
@@ -0,0 +1,6 @@
+import { style } from '@vanilla-extract/css';
+
+export const flex = style({
+  display: 'flex',
+  flex: 1
+});
diff --git a/src/frontend/src/components/nav/DetailDrawer.tsx b/src/frontend/src/components/nav/DetailDrawer.tsx
index 892df54a6b..85a7df857b 100644
--- a/src/frontend/src/components/nav/DetailDrawer.tsx
+++ b/src/frontend/src/components/nav/DetailDrawer.tsx
@@ -1,19 +1,12 @@
-import {
-  ActionIcon,
-  Divider,
-  Drawer,
-  Group,
-  MantineNumberSize,
-  Stack,
-  Text,
-  createStyles
-} from '@mantine/core';
+import { ActionIcon, Divider, Drawer, Group, Stack, Text } from '@mantine/core';
 import { IconChevronLeft } from '@tabler/icons-react';
 import { useCallback, useMemo } from 'react';
 import { Link, Route, Routes, useNavigate, useParams } from 'react-router-dom';
 import type { To } from 'react-router-dom';
 
+import { UiSizeType } from '../../defaults/formatters';
 import { useLocalState } from '../../states/LocalState';
+import * as classes from './DetailDrawer.css';
 
 /**
  * @param title - drawer title
@@ -26,17 +19,10 @@ export interface DrawerProps {
   position?: 'right' | 'left';
   renderContent: (id?: string) => React.ReactNode;
   urlPrefix?: string;
-  size?: MantineNumberSize;
+  size?: UiSizeType;
   closeOnEscape?: boolean;
 }
 
-const useStyles = createStyles(() => ({
-  flex: {
-    display: 'flex',
-    flex: 1
-  }
-}));
-
 function DetailDrawerComponent({
   title,
   position = 'right',
@@ -46,7 +32,6 @@ function DetailDrawerComponent({
 }: Readonly<DrawerProps>) {
   const navigate = useNavigate();
   const { id } = useParams();
-  const { classes } = useStyles();
 
   const content = renderContent(id);
   const opened = useMemo(() => !!id && !!content, [id, content]);
@@ -87,7 +72,7 @@ function DetailDrawerComponent({
         </Group>
       }
     >
-      <Stack spacing={'xs'} className={classes.flex}>
+      <Stack gap={'xs'} className={classes.flex}>
         <Divider />
         {content}
       </Stack>
diff --git a/src/frontend/src/components/nav/Footer.tsx b/src/frontend/src/components/nav/Footer.tsx
index 52ad114912..f915cfb2d8 100644
--- a/src/frontend/src/components/nav/Footer.tsx
+++ b/src/frontend/src/components/nav/Footer.tsx
@@ -1,14 +1,13 @@
 import { Anchor, Container, Group } from '@mantine/core';
 
 import { footerLinks } from '../../defaults/links';
-import { InvenTreeStyle } from '../../globalStyle';
+import * as classes from '../../main.css';
 import { InvenTreeLogoHomeButton } from '../items/InvenTreeLogo';
 
 export function Footer() {
-  const { classes } = InvenTreeStyle();
   const items = footerLinks.map((link) => (
     <Anchor<'a'>
-      color="dimmed"
+      c="dimmed"
       key={link.key}
       href={link.link}
       onClick={(event) => event.preventDefault()}
diff --git a/src/frontend/src/components/nav/Header.tsx b/src/frontend/src/components/nav/Header.tsx
index d8adc9ac18..f5cdd07865 100644
--- a/src/frontend/src/components/nav/Header.tsx
+++ b/src/frontend/src/components/nav/Header.tsx
@@ -8,7 +8,7 @@ import { useMatch, useNavigate } from 'react-router-dom';
 import { api } from '../../App';
 import { navTabs as mainNavTabs } from '../../defaults/links';
 import { ApiEndpoints } from '../../enums/ApiEndpoints';
-import { InvenTreeStyle } from '../../globalStyle';
+import * as classes from '../../main.css';
 import { apiUrl } from '../../states/ApiState';
 import { useLocalState } from '../../states/LocalState';
 import { useUserState } from '../../states/UserState';
@@ -21,7 +21,6 @@ import { NotificationDrawer } from './NotificationDrawer';
 import { SearchDrawer } from './SearchDrawer';
 
 export function Header() {
-  const { classes } = InvenTreeStyle();
   const [setNavigationOpen, navigationOpen] = useLocalState((state) => [
     state.setNavigationOpen,
     state.navigationOpen
@@ -54,12 +53,13 @@ export function Header() {
             limit: 1
           }
         };
-        let response = await api.get(
-          apiUrl(ApiEndpoints.notifications_list),
-          params
-        );
-        setNotificationCount(response.data.count);
-        return response.data;
+        let response = await api
+          .get(apiUrl(ApiEndpoints.notifications_list), params)
+          .catch(() => {
+            return null;
+          });
+        setNotificationCount(response?.data?.count ?? 0);
+        return response?.data;
       } catch (error) {
         return error;
       }
@@ -93,28 +93,32 @@ export function Header() {
         }}
       />
       <Container className={classes.layoutHeaderSection} size="100%">
-        <Group position="apart">
+        <Group justify="space-between">
           <Group>
             <NavHoverMenu openDrawer={openNavDrawer} />
             <NavTabs />
           </Group>
           <Group>
-            <ActionIcon onClick={openSearchDrawer}>
+            <ActionIcon onClick={openSearchDrawer} variant="transparent">
               <IconSearch />
             </ActionIcon>
             <SpotlightButton />
             <ScanButton />
-            <ActionIcon onClick={openNotificationDrawer}>
-              <Indicator
-                radius="lg"
-                size="18"
-                label={notificationCount}
-                color="red"
-                disabled={notificationCount <= 0}
+            <Indicator
+              radius="lg"
+              size="18"
+              label={notificationCount}
+              color="red"
+              disabled={notificationCount <= 0}
+              inline
+            >
+              <ActionIcon
+                onClick={openNotificationDrawer}
+                variant="transparent"
               >
                 <IconBell />
-              </Indicator>
-            </ActionIcon>
+              </ActionIcon>
+            </Indicator>
             <MainMenu />
           </Group>
         </Group>
@@ -124,7 +128,6 @@ export function Header() {
 }
 
 function NavTabs() {
-  const { classes } = InvenTreeStyle();
   const navigate = useNavigate();
   const match = useMatch(':tabName/*');
   const tabValue = match?.params.tabName;
@@ -134,11 +137,11 @@ function NavTabs() {
       defaultValue="home"
       classNames={{
         root: classes.tabs,
-        tabsList: classes.tabsList,
+        list: classes.tabsList,
         tab: classes.tab
       }}
       value={tabValue}
-      onTabChange={(value) =>
+      onChange={(value) =>
         value == '/' ? navigate('/') : navigate(`/${value}`)
       }
     >
diff --git a/src/frontend/src/components/nav/Layout.tsx b/src/frontend/src/components/nav/Layout.tsx
index 1290d4ee25..b201c7d669 100644
--- a/src/frontend/src/components/nav/Layout.tsx
+++ b/src/frontend/src/components/nav/Layout.tsx
@@ -1,12 +1,12 @@
 import { t } from '@lingui/macro';
 import { Container, Flex, Space } from '@mantine/core';
-import { SpotlightProvider } from '@mantine/spotlight';
+import { Spotlight, createSpotlight } from '@mantine/spotlight';
 import { IconSearch } from '@tabler/icons-react';
 import { useEffect, useState } from 'react';
 import { Navigate, Outlet, useLocation, useNavigate } from 'react-router-dom';
 
 import { getActions } from '../../defaults/actions';
-import { InvenTreeStyle } from '../../globalStyle';
+import * as classes from '../../main.css';
 import { useUserState } from '../../states/UserState';
 import { Boundary } from '../Boundary';
 import { Footer } from './Footer';
@@ -25,8 +25,9 @@ export const ProtectedRoute = ({ children }: { children: JSX.Element }) => {
   return children;
 };
 
+export const [firstStore, firstSpotlight] = createSpotlight();
+
 export default function LayoutComponent() {
-  const { classes } = InvenTreeStyle();
   const navigate = useNavigate();
   const location = useLocation();
 
@@ -38,6 +39,9 @@ export default function LayoutComponent() {
     if (change.length > defaultActions.length) setCustomActions(true);
     setActions(change);
   }
+  // firstStore.subscribe(actionsAreChanging);
+
+  // clear additional actions on location change
   useEffect(() => {
     if (customActions) {
       setActions(defaultActions);
@@ -47,26 +51,28 @@ export default function LayoutComponent() {
 
   return (
     <ProtectedRoute>
-      <SpotlightProvider
-        actions={actions}
-        onActionsChange={actionsAreChanging}
-        searchIcon={<IconSearch size="1.2rem" />}
-        searchPlaceholder={t`Search...`}
-        shortcut={['mod + K', '/']}
-        nothingFoundMessage={t`Nothing found...`}
-      >
-        <Flex direction="column" mih="100vh">
-          <Header />
-          <Container className={classes.layoutContent} size="100%">
-            <Boundary label={'layout'}>
-              <Outlet />
-            </Boundary>
-            {/* </ErrorBoundary> */}
-          </Container>
-          <Space h="xl" />
-          <Footer />
-        </Flex>
-      </SpotlightProvider>
+      <Flex direction="column" mih="100vh">
+        <Header />
+        <Container className={classes.layoutContent} size="100%">
+          <Boundary label={'layout'}>
+            <Outlet />
+          </Boundary>
+          {/* </ErrorBoundary> */}
+        </Container>
+        <Space h="xl" />
+        <Footer />
+        <Spotlight
+          actions={actions}
+          store={firstStore}
+          highlightQuery
+          searchProps={{
+            leftSection: <IconSearch size="1.2rem" />,
+            placeholder: t`Search...`
+          }}
+          shortcut={['mod + K', '/']}
+          nothingFound={t`Nothing found...`}
+        />
+      </Flex>
     </ProtectedRoute>
   );
 }
diff --git a/src/frontend/src/components/nav/MainMenu.tsx b/src/frontend/src/components/nav/MainMenu.tsx
index e98934e56a..04ab8e7b89 100644
--- a/src/frontend/src/components/nav/MainMenu.tsx
+++ b/src/frontend/src/components/nav/MainMenu.tsx
@@ -10,26 +10,29 @@ import {
 import { Link, useNavigate } from 'react-router-dom';
 
 import { doLogout } from '../../functions/auth';
-import { InvenTreeStyle } from '../../globalStyle';
+import * as classes from '../../main.css';
 import { useUserState } from '../../states/UserState';
+import { vars } from '../../theme';
 
 export function MainMenu() {
   const navigate = useNavigate();
-  const { classes, theme } = InvenTreeStyle();
-  const userState = useUserState();
+  const [user, username] = useUserState((state) => [
+    state.user,
+    state.username
+  ]);
 
   return (
     <Menu width={260} position="bottom-end">
       <Menu.Target>
         <UnstyledButton className={classes.layoutHeaderUser}>
-          <Group spacing={7}>
-            <Text weight={500} size="sm" sx={{ lineHeight: 1 }} mr={3}>
-              {userState.username() ? (
-                userState.username()
-              ) : (
-                <Skeleton height={20} width={40} radius={theme.defaultRadius} />
-              )}
-            </Text>
+          <Group gap={7}>
+            {username() ? (
+              <Text fw={500} size="sm" style={{ lineHeight: 1 }} mr={3}>
+                {username()}
+              </Text>
+            ) : (
+              <Skeleton height={20} width={40} radius={vars.radiusDefault} />
+            )}
             <IconChevronDown />
           </Group>
         </UnstyledButton>
@@ -38,22 +41,26 @@ export function MainMenu() {
         <Menu.Label>
           <Trans>Settings</Trans>
         </Menu.Label>
-        <Menu.Item icon={<IconUserCog />} component={Link} to="/settings/user">
+        <Menu.Item
+          leftSection={<IconUserCog />}
+          component={Link}
+          to="/settings/user"
+        >
           <Trans>Account settings</Trans>
         </Menu.Item>
-        {userState.user?.is_staff && (
+        {user?.is_staff && (
           <Menu.Item
-            icon={<IconSettings />}
+            leftSection={<IconSettings />}
             component={Link}
             to="/settings/system"
           >
             <Trans>System Settings</Trans>
           </Menu.Item>
         )}
-        {userState.user?.is_staff && <Menu.Divider />}
-        {userState.user?.is_staff && (
+        {user?.is_staff && <Menu.Divider />}
+        {user?.is_staff && (
           <Menu.Item
-            icon={<IconUserBolt />}
+            leftSection={<IconUserBolt />}
             component={Link}
             to="/settings/admin"
           >
@@ -62,7 +69,7 @@ export function MainMenu() {
         )}
         <Menu.Divider />
         <Menu.Item
-          icon={<IconLogout />}
+          leftSection={<IconLogout />}
           onClick={() => {
             doLogout(navigate);
           }}
diff --git a/src/frontend/src/components/nav/NavHoverMenu.tsx b/src/frontend/src/components/nav/NavHoverMenu.tsx
index 499f3c493e..ca4b957633 100644
--- a/src/frontend/src/components/nav/NavHoverMenu.tsx
+++ b/src/frontend/src/components/nav/NavHoverMenu.tsx
@@ -8,15 +8,17 @@ import {
   HoverCard,
   Skeleton,
   Text,
-  UnstyledButton
+  UnstyledButton,
+  useMantineColorScheme
 } from '@mantine/core';
 import { IconLayoutSidebar } from '@tabler/icons-react';
 import { useEffect, useState } from 'react';
 
 import { menuItems } from '../../defaults/menuItems';
-import { InvenTreeStyle } from '../../globalStyle';
+import * as classes from '../../main.css';
 import { useServerApiState } from '../../states/ApiState';
 import { useLocalState } from '../../states/LocalState';
+import { vars } from '../../theme';
 import { InvenTreeLogo } from '../items/InvenTreeLogo';
 import { MenuLinks } from '../items/MenuLinks';
 
@@ -27,13 +29,13 @@ export function NavHoverMenu({
 }: {
   openDrawer: () => void;
 }) {
-  const { classes, theme } = InvenTreeStyle();
   const [hostKey, hostList] = useLocalState((state) => [
     state.hostKey,
     state.hostList
   ]);
   const [servername] = useServerApiState((state) => [state.server.instance]);
   const [instanceName, setInstanceName] = useState<string>();
+  const { colorScheme } = useMantineColorScheme();
 
   useEffect(() => {
     if (hostKey && hostList[hostKey]) {
@@ -55,26 +57,27 @@ export function NavHoverMenu({
         </UnstyledButton>
       </HoverCard.Target>
 
-      <HoverCard.Dropdown sx={{ overflow: 'hidden' }}>
-        <Group position="apart" px="md">
+      <HoverCard.Dropdown style={{ overflow: 'hidden' }}>
+        <Group justify="space-between" px="md">
           <ActionIcon
             onClick={openDrawer}
             onMouseOver={openDrawer}
             title={t`Open Navigation`}
+            variant="default"
           >
             <IconLayoutSidebar />
           </ActionIcon>
-          <Group spacing={'xs'}>
+          <Group gap={'xs'}>
             {instanceName ? (
               instanceName
             ) : (
-              <Skeleton height={20} width={40} radius={theme.defaultRadius} />
+              <Skeleton height={20} width={40} radius={vars.radiusDefault} />
             )}{' '}
             |{' '}
             {servername ? (
               servername
             ) : (
-              <Skeleton height={20} width={40} radius={theme.defaultRadius} />
+              <Skeleton height={20} width={40} radius={vars.radiusDefault} />
             )}
           </Group>
           <Anchor href="#" fz="xs" onClick={openDrawer}>
@@ -85,11 +88,13 @@ export function NavHoverMenu({
         <Divider
           my="sm"
           mx="-md"
-          color={theme.colorScheme === 'dark' ? 'dark.5' : 'gray.1'}
+          color={
+            colorScheme === 'dark' ? vars.colors.dark[5] : vars.colors.gray[1]
+          }
         />
         <MenuLinks links={onlyItems} highlighted={true} />
         <div className={classes.headerDropdownFooter}>
-          <Group position="apart">
+          <Group justify="space-between">
             <div>
               <Text fw={500} fz="sm">
                 <Trans>Get started</Trans>
diff --git a/src/frontend/src/components/nav/NavigationDrawer.tsx b/src/frontend/src/components/nav/NavigationDrawer.tsx
index c68eacf100..92504c39c4 100644
--- a/src/frontend/src/components/nav/NavigationDrawer.tsx
+++ b/src/frontend/src/components/nav/NavigationDrawer.tsx
@@ -12,7 +12,7 @@ import { useEffect, useRef, useState } from 'react';
 
 import { aboutLinks, navDocLinks } from '../../defaults/links';
 import { menuItems } from '../../defaults/menuItems';
-import { InvenTreeStyle } from '../../globalStyle';
+import * as classes from '../../main.css';
 import { DocumentationLinks } from '../items/DocumentationLinks';
 import { MenuLinkItem, MenuLinks } from '../items/MenuLinks';
 
@@ -27,8 +27,6 @@ export function NavigationDrawer({
   opened: boolean;
   close: () => void;
 }) {
-  const { classes } = InvenTreeStyle();
-
   return (
     <Drawer
       opened={opened}
@@ -44,7 +42,6 @@ export function NavigationDrawer({
   );
 }
 function DrawerContent() {
-  const { classes } = InvenTreeStyle();
   const [scrollHeight, setScrollHeight] = useState(0);
   const ref = useRef(null);
   const { height } = useViewportSize();
diff --git a/src/frontend/src/components/nav/NotificationDrawer.tsx b/src/frontend/src/components/nav/NotificationDrawer.tsx
index 9e4e07d894..6f72d3a79d 100644
--- a/src/frontend/src/components/nav/NotificationDrawer.tsx
+++ b/src/frontend/src/components/nav/NotificationDrawer.tsx
@@ -2,9 +2,11 @@ import { t } from '@lingui/macro';
 import {
   ActionIcon,
   Alert,
+  Center,
   Divider,
   Drawer,
   Group,
+  Loader,
   LoadingOverlay,
   Space,
   Stack,
@@ -13,6 +15,7 @@ import {
 } from '@mantine/core';
 import { IconBellCheck, IconBellPlus } from '@tabler/icons-react';
 import { useQuery } from '@tanstack/react-query';
+import { useMemo } from 'react';
 import { Link, useNavigate } from 'react-router-dom';
 
 import { api } from '../../App';
@@ -51,6 +54,10 @@ export function NotificationDrawer({
     refetchOnWindowFocus: false
   });
 
+  const hasNotifications: boolean = useMemo(() => {
+    return (notificationQuery.data?.results?.length ?? 0) > 0;
+  }, [notificationQuery.data]);
+
   return (
     <Drawer
       opened={opened}
@@ -67,74 +74,80 @@ export function NotificationDrawer({
         }
       }}
       title={
-        <Group position="apart" noWrap={true}>
+        <Group justify="space-between" wrap="nowrap">
           <StylishText size="lg">{t`Notifications`}</StylishText>
           <ActionIcon
             onClick={() => {
               onClose();
               navigate('/notifications/unread');
             }}
+            variant="transparent"
           >
             <IconBellPlus />
           </ActionIcon>
         </Group>
       }
     >
-      <Stack spacing="xs">
+      <Stack gap="xs">
         <Divider />
-        <LoadingOverlay visible={notificationQuery.isFetching} />
-        {(notificationQuery.data?.results?.length ?? 0) == 0 && (
+        {!hasNotifications && (
           <Alert color="green">
             <Text size="sm">{t`You have no unread notifications.`}</Text>
           </Alert>
         )}
-        {notificationQuery.data?.results?.map((notification: any) => (
-          <Group position="apart" key={notification.pk}>
-            <Stack spacing="3">
-              {notification?.target?.link ? (
-                <Text
-                  size="sm"
-                  component={Link}
-                  to={notification?.target?.link}
-                  target="_blank"
-                >
-                  {notification.target?.name ??
-                    notification.name ??
-                    t`Notification`}
-                </Text>
-              ) : (
-                <Text size="sm">
-                  {notification.target?.name ??
-                    notification.name ??
-                    t`Notification`}
-                </Text>
-              )}
-              <Text size="xs">{notification.age_human ?? ''}</Text>
-            </Stack>
-            <Space />
-            <ActionIcon
-              color="gray"
-              variant="hover"
-              onClick={() => {
-                let url = apiUrl(
-                  ApiEndpoints.notifications_list,
-                  notification.pk
-                );
-                api
-                  .patch(url, {
-                    read: true
-                  })
-                  .then((response) => {
-                    notificationQuery.refetch();
-                  });
-              }}
-            >
-              <Tooltip label={t`Mark as read`}>
-                <IconBellCheck />
-              </Tooltip>
-            </ActionIcon>
-          </Group>
-        ))}
+        {hasNotifications &&
+          notificationQuery.data?.results?.map((notification: any) => (
+            <Group justify="space-between" key={notification.pk}>
+              <Stack gap="3">
+                {notification?.target?.link ? (
+                  <Text
+                    size="sm"
+                    component={Link}
+                    to={notification?.target?.link}
+                    target="_blank"
+                  >
+                    {notification.target?.name ??
+                      notification.name ??
+                      t`Notification`}
+                  </Text>
+                ) : (
+                  <Text size="sm">
+                    {notification.target?.name ??
+                      notification.name ??
+                      t`Notification`}
+                  </Text>
+                )}
+                <Text size="xs">{notification.age_human ?? ''}</Text>
+              </Stack>
+              <Space />
+              <ActionIcon
+                color="gray"
+                variant="hover"
+                onClick={() => {
+                  let url = apiUrl(
+                    ApiEndpoints.notifications_list,
+                    notification.pk
+                  );
+                  api
+                    .patch(url, {
+                      read: true
+                    })
+                    .then((response) => {
+                      notificationQuery.refetch();
+                    });
+                }}
+              >
+                <Tooltip label={t`Mark as read`}>
+                  <IconBellCheck />
+                </Tooltip>
+              </ActionIcon>
+            </Group>
+          ))}
+        {notificationQuery.isFetching && (
+          <Center>
+            <Loader size="sm" />
+          </Center>
+        )}
       </Stack>
     </Drawer>
   );
diff --git a/src/frontend/src/components/nav/PageDetail.tsx b/src/frontend/src/components/nav/PageDetail.tsx
index d8629d5498..a6584cb0dd 100644
--- a/src/frontend/src/components/nav/PageDetail.tsx
+++ b/src/frontend/src/components/nav/PageDetail.tsx
@@ -33,23 +33,21 @@ export function PageDetail({
   actions
 }: Readonly<PageDetailInterface>) {
   return (
-    <Stack spacing="xs">
+    <Stack gap="xs">
       {breadcrumbs && breadcrumbs.length > 0 && (
-        <Paper p="xs" radius="xs" shadow="xs">
-          <BreadcrumbList
-            navCallback={breadcrumbAction}
-            breadcrumbs={breadcrumbs}
-          />
-        </Paper>
+        <BreadcrumbList
+          navCallback={breadcrumbAction}
+          breadcrumbs={breadcrumbs}
+        />
       )}
       <Paper p="xs" radius="xs" shadow="xs">
-        <Stack spacing="xs">
-          <Group position="apart" noWrap={true}>
-            <Group position="left" noWrap={true}>
+        <Stack gap="xs">
+          <Group justify="space-between" wrap="nowrap">
+            <Group justify="left" wrap="nowrap">
               {imageUrl && (
-                <ApiImage src={imageUrl} radius="sm" height={64} width={64} />
+                <ApiImage src={imageUrl} radius="sm" h={64} w={64} />
               )}
-              <Stack spacing="xs">
+              <Stack gap="xs">
                 {title && <StylishText size="lg">{title}</StylishText>}
                 {subtitle && (
                   <Text size="md" truncate>
@@ -60,14 +58,14 @@ export function PageDetail({
             </Group>
             <Space />
             {detail}
-            <Group position="right" spacing="xs" noWrap>
+            <Group justify="right" gap="xs" wrap="nowrap">
               {badges?.map((badge, idx) => (
                 <Fragment key={idx}>{badge}</Fragment>
               ))}
             </Group>
             <Space />
             {actions && (
-              <Group spacing={5} position="right">
+              <Group gap={5} justify="right">
                 {actions.map((action, idx) => (
                   <Fragment key={idx}>{action}</Fragment>
                 ))}
diff --git a/src/frontend/src/components/nav/PanelGroup.tsx b/src/frontend/src/components/nav/PanelGroup.tsx
index 26779a3266..afc9be16d6 100644
--- a/src/frontend/src/components/nav/PanelGroup.tsx
+++ b/src/frontend/src/components/nav/PanelGroup.tsx
@@ -72,7 +72,7 @@ function BasePanelGroup({
   }, [setLastUsedPanel]);
 
   // Callback when the active panel changes
-  function handlePanelChange(panel: string) {
+  function handlePanelChange(panel: string | null) {
     if (activePanels.findIndex((p) => p.name === panel) === -1) {
       setLastUsedPanel('');
       return navigate('../');
@@ -81,7 +81,7 @@ function BasePanelGroup({
     navigate(`../${panel}`);
 
     // Optionally call external callback hook
-    if (onPanelChange) {
+    if (panel && onPanelChange) {
       onPanelChange(panel);
     }
   }
@@ -109,10 +109,10 @@ function BasePanelGroup({
         <Tabs
           value={panel}
           orientation="vertical"
-          onTabChange={handlePanelChange}
+          onChange={handlePanelChange}
           keepMounted={false}
         >
-          <Tabs.List position="left">
+          <Tabs.List justify="left">
             {panels.map(
               (panel) =>
                 !panel.hidden && (
@@ -125,7 +125,7 @@ function BasePanelGroup({
                       p="xs"
                       value={panel.name}
                       //                    icon={(<InvenTreeIcon icon={panel.name}/>)}  // Enable when implementing Icon manager everywhere
-                      icon={panel.icon}
+                      leftSection={panel.icon}
                       hidden={panel.hidden}
                       disabled={panel.disabled}
                       style={{ cursor: panel.disabled ? 'unset' : 'pointer' }}
@@ -141,6 +141,8 @@ function BasePanelGroup({
                   paddingLeft: '10px'
                 }}
                 onClick={() => setExpanded(!expanded)}
+                variant="transparent"
+                size="md"
               >
                 {expanded ? (
                   <IconLayoutSidebarLeftCollapse opacity={0.5} />
@@ -162,7 +164,7 @@ function BasePanelGroup({
                     width: '100%'
                   }}
                 >
-                  <Stack spacing="md">
+                  <Stack gap="md">
                     {panel.showHeadline !== false && (
                       <>
                         <StylishText size="xl">{panel.label}</StylishText>
diff --git a/src/frontend/src/components/nav/PartCategoryTree.tsx b/src/frontend/src/components/nav/PartCategoryTree.tsx
index 7fb69a3ffa..d969dd51cf 100644
--- a/src/frontend/src/components/nav/PartCategoryTree.tsx
+++ b/src/frontend/src/components/nav/PartCategoryTree.tsx
@@ -5,7 +5,7 @@ import {
   LoadingOverlay,
   Stack,
   Text,
-  useMantineTheme
+  useMantineColorScheme
 } from '@mantine/core';
 import { ReactTree, ThemeSettings } from '@naisutech/react-tree';
 import {
@@ -20,6 +20,7 @@ import { useNavigate } from 'react-router-dom';
 import { api } from '../../App';
 import { ApiEndpoints } from '../../enums/ApiEndpoints';
 import { apiUrl } from '../../states/ApiState';
+import { theme, vars } from '../../theme';
 import { StylishText } from '../items/StylishText';
 
 export function PartCategoryTree({
@@ -59,9 +60,9 @@ export function PartCategoryTree({
   function renderNode({ node }: { node: any }) {
     return (
       <Group
-        position="apart"
+        justify="space-between"
         key={node.id}
-        noWrap={true}
+        wrap="nowrap"
         onClick={() => {
           onClose();
           navigate(`/part/category/${node.id}`);
@@ -80,57 +81,61 @@ export function PartCategoryTree({
     return open ? <IconChevronDown /> : <IconChevronRight />;
   }
 
-  const mantineTheme = useMantineTheme();
+  const { colorScheme } = useMantineColorScheme();
 
   const themes: ThemeSettings = useMemo(() => {
     const currentTheme =
-      mantineTheme.colorScheme === 'dark'
-        ? mantineTheme.colorScheme
-        : mantineTheme.primaryColor;
+      colorScheme === 'dark'
+        ? vars.colors.defaultColor
+        : vars.colors.primaryColors;
 
     return {
       dark: {
         text: {
-          ...mantineTheme.fn.fontStyles()
+          fontFamily: vars.fontFamily,
+          //fontSize: vars.fontSizes.md,
+          color: vars.colors.text
         },
         nodes: {
           height: '2.5rem',
           folder: {
-            selectedBgColor: mantineTheme.colors[currentTheme][4],
-            hoverBgColor: mantineTheme.colors[currentTheme][6]
+            selectedBgColor: currentTheme[4],
+            hoverBgColor: currentTheme[6]
           },
           leaf: {
-            selectedBgColor: mantineTheme.colors[currentTheme][4],
-            hoverBgColor: mantineTheme.colors[currentTheme][6]
+            selectedBgColor: currentTheme[4],
+            hoverBgColor: currentTheme[6]
           },
           icons: {
-            folderColor: mantineTheme.colors[currentTheme][3],
-            leafColor: mantineTheme.colors[currentTheme][3]
+            folderColor: currentTheme[3],
+            leafColor: currentTheme[3]
           }
         }
       },
       light: {
         text: {
-          ...mantineTheme.fn.fontStyles()
+          fontFamily: vars.fontFamily,
+          //fontSize: vars.fontSizes.md,
+          color: vars.colors.text
         },
         nodes: {
           height: '2.5rem',
           folder: {
-            selectedBgColor: mantineTheme.colors[currentTheme][4],
-            hoverBgColor: mantineTheme.colors[currentTheme][2]
+            selectedBgColor: currentTheme[4],
+            hoverBgColor: currentTheme[2]
           },
           leaf: {
-            selectedBgColor: mantineTheme.colors[currentTheme][4],
-            hoverBgColor: mantineTheme.colors[currentTheme][2]
+            selectedBgColor: currentTheme[4],
+            hoverBgColor: currentTheme[2]
           },
           icons: {
-            folderColor: mantineTheme.colors[currentTheme][8],
-            leafColor: mantineTheme.colors[currentTheme][6]
+            folderColor: currentTheme[8],
+            leafColor: currentTheme[6]
           }
         }
       }
     };
-  }, [mantineTheme]);
+  }, [theme]);
 
   return (
     <Drawer
@@ -148,13 +153,13 @@ export function PartCategoryTree({
         }
       }}
       title={
-        <Group position="left" p="ms" spacing="md" noWrap={true}>
+        <Group justify="left" p="ms" gap="md" wrap="nowrap">
           <IconSitemap />
           <StylishText size="lg">{t`Part Categories`}</StylishText>
         </Group>
       }
     >
-      <Stack spacing="xs">
+      <Stack gap="xs">
         <LoadingOverlay visible={treeQuery.isFetching} />
         <ReactTree
           nodes={treeQuery.data ?? []}
@@ -162,7 +167,7 @@ export function PartCategoryTree({
           RenderIcon={renderIcon}
           defaultSelectedNodes={selectedCategory ? [selectedCategory] : []}
           showEmptyItems={false}
-          theme={mantineTheme.colorScheme}
+          theme={colorScheme}
           themes={themes}
         />
       </Stack>
diff --git a/src/frontend/src/components/nav/SearchDrawer.tsx b/src/frontend/src/components/nav/SearchDrawer.tsx
index 5381f07da6..e676e26948 100644
--- a/src/frontend/src/components/nav/SearchDrawer.tsx
+++ b/src/frontend/src/components/nav/SearchDrawer.tsx
@@ -69,10 +69,10 @@ function QueryResultGroup({
   return (
     <Paper shadow="sm" radius="xs" p="md" key={`paper-${query.model}`}>
       <Stack key={`stack-${query.model}`}>
-        <Group position="apart" noWrap={true}>
-          <Group position="left" spacing={5} noWrap={true}>
+        <Group justify="space-between" wrap="nowrap">
+          <Group justify="left" gap={5} wrap="nowrap">
             <Text size="lg">{model.label_multiple}</Text>
-            <Text size="sm" italic>
+            <Text size="sm" style={{ fontStyle: 'italic' }}>
               {' '}
               - {query.results.count} <Trans>results</Trans>
             </Text>
@@ -332,13 +332,13 @@ export function SearchDrawer({
       withCloseButton={false}
       styles={{ header: { width: '100%' }, title: { width: '100%' } }}
       title={
-        <Group position="apart" spacing={1} noWrap={true}>
+        <Group justify="space-between" gap={1} wrap="nowrap">
           <TextInput
             placeholder={t`Enter search text`}
             radius="xs"
             value={value}
             onChange={(event) => setValue(event.currentTarget.value)}
-            icon={<IconSearch size="0.8rem" />}
+            leftSection={<IconSearch size="0.8rem" />}
             rightSection={
               value && (
                 <IconBackspace color="red" onClick={() => setValue('')} />
@@ -394,7 +394,7 @@ export function SearchDrawer({
           </Center>
         )}
         {!searchQuery.isFetching && !searchQuery.isError && (
-          <Stack spacing="md">
+          <Stack gap="md">
             {queryResults.map((query, idx) => (
               <QueryResultGroup
                 key={idx}
diff --git a/src/frontend/src/components/nav/SettingsHeader.tsx b/src/frontend/src/components/nav/SettingsHeader.tsx
index 8b37713ba8..a3e93423d5 100644
--- a/src/frontend/src/components/nav/SettingsHeader.tsx
+++ b/src/frontend/src/components/nav/SettingsHeader.tsx
@@ -24,7 +24,7 @@ export function SettingsHeader({
   switch_link
 }: Readonly<SettingsHeaderInterface>) {
   return (
-    <Stack spacing="0" ml={'sm'}>
+    <Stack gap="0" ml={'sm'}>
       <Group>
         <Title order={3}>{title}</Title>
         {shorthand && <Text c="dimmed">({shorthand})</Text>}
diff --git a/src/frontend/src/components/nav/StockLocationTree.tsx b/src/frontend/src/components/nav/StockLocationTree.tsx
index 0fb97075cb..670183dc56 100644
--- a/src/frontend/src/components/nav/StockLocationTree.tsx
+++ b/src/frontend/src/components/nav/StockLocationTree.tsx
@@ -51,9 +51,9 @@ export function StockLocationTree({
   function renderNode({ node }: { node: any }) {
     return (
       <Group
-        position="apart"
+        justify="space-between"
         key={node.id}
-        noWrap={true}
+        wrap="nowrap"
         onClick={() => {
           onClose();
           navigate(`/stock/location/${node.id}`);
@@ -88,13 +88,13 @@ export function StockLocationTree({
         }
       }}
       title={
-        <Group position="left" noWrap={true} spacing="md" p="md">
+        <Group justify="left" wrap="nowrap" gap="md" p="md">
           <IconSitemap />
           <StylishText size="lg">{t`Stock Locations`}</StylishText>
         </Group>
       }
     >
-      <Stack spacing="xs">
+      <Stack gap="xs">
         <LoadingOverlay visible={treeQuery.isFetching} />
         <ReactTree
           nodes={treeQuery.data ?? []}
diff --git a/src/frontend/src/components/render/Instance.tsx b/src/frontend/src/components/render/Instance.tsx
index 64ff4e7a0f..e3c4bbde97 100644
--- a/src/frontend/src/components/render/Instance.tsx
+++ b/src/frontend/src/components/render/Instance.tsx
@@ -112,8 +112,8 @@ export function RenderInlineModel({
   // TODO: Handle URL
 
   return (
-    <Group spacing="xs" position="apart" noWrap={true}>
-      <Group spacing="xs" position="left" noWrap={true}>
+    <Group gap="xs" justify="space-between" wrap="nowrap">
+      <Group gap="xs" justify="left" wrap="nowrap">
         {image && Thumbnail({ src: image, size: 18 })}
         <Text size="sm">{primary}</Text>
         {secondary && <Text size="xs">{secondary}</Text>}
@@ -121,7 +121,7 @@ export function RenderInlineModel({
       {suffix && (
         <>
           <Space />
-          <Text size="xs">{suffix}</Text>
+          <div style={{ fontSize: 'xs', lineHeight: 'xs' }}>{suffix}</div>
         </>
       )}
     </Group>
diff --git a/src/frontend/src/components/settings/SettingItem.tsx b/src/frontend/src/components/settings/SettingItem.tsx
index aa58b71abf..dc14022998 100644
--- a/src/frontend/src/components/settings/SettingItem.tsx
+++ b/src/frontend/src/components/settings/SettingItem.tsx
@@ -7,7 +7,7 @@ import {
   Stack,
   Switch,
   Text,
-  useMantineTheme
+  useMantineColorScheme
 } from '@mantine/core';
 import { showNotification } from '@mantine/notifications';
 import { IconEdit } from '@tabler/icons-react';
@@ -19,6 +19,7 @@ import { openModalApiForm } from '../../functions/forms';
 import { apiUrl } from '../../states/ApiState';
 import { SettingsStateProps } from '../../states/SettingsState';
 import { Setting, SettingType } from '../../states/states';
+import { vars } from '../../theme';
 import { ApiFormFieldType } from '../forms/fields/ApiFormField';
 
 /**
@@ -137,7 +138,7 @@ function SettingValue({
       );
     default:
       return valueText ? (
-        <Group spacing="xs" position="right">
+        <Group gap="xs" justify="right">
           <Space />
           <Button variant="subtle" onClick={onEditButton}>
             {valueText}
@@ -165,20 +166,18 @@ export function SettingItem({
   shaded: boolean;
   onChange?: () => void;
 }) {
-  const theme = useMantineTheme();
+  const { colorScheme } = useMantineColorScheme();
 
   const style: Record<string, string> = { paddingLeft: '8px' };
   if (shaded) {
     style['backgroundColor'] =
-      theme.colorScheme === 'light'
-        ? theme.colors.gray[1]
-        : theme.colors.gray[9];
+      colorScheme === 'light' ? vars.colors.gray[1] : vars.colors.gray[9];
   }
 
   return (
     <Paper style={style}>
-      <Group position="apart" p="3">
-        <Stack spacing="2" p="4px">
+      <Group justify="space-between" p="3">
+        <Stack gap="2" p="4px">
           <Text>
             {setting.name}
             {setting.required ? ' *' : ''}
diff --git a/src/frontend/src/components/settings/SettingList.tsx b/src/frontend/src/components/settings/SettingList.tsx
index b2691a519b..e06522b2af 100644
--- a/src/frontend/src/components/settings/SettingList.tsx
+++ b/src/frontend/src/components/settings/SettingList.tsx
@@ -35,7 +35,7 @@ export function SettingList({
 
   return (
     <>
-      <Stack spacing="xs">
+      <Stack gap="xs">
         {(keys || allKeys).map((key, i) => {
           const setting = settingsState?.settings?.find(
             (s: any) => s.key === key
@@ -51,7 +51,7 @@ export function SettingList({
                   onChange={onChange}
                 />
               ) : (
-                <Text size="sm" italic color="red">
+                <Text size="sm" style={{ fontStyle: 'italic' }} color="red">
                   Setting {key} not found
                 </Text>
               )}
@@ -59,7 +59,7 @@ export function SettingList({
           );
         })}
         {(keys || allKeys).length === 0 && (
-          <Text italic>
+          <Text style={{ fontStyle: 'italic' }}>
             <Trans>No settings specified</Trans>
           </Text>
         )}
diff --git a/src/frontend/src/components/widgets/FeedbackWidget.tsx b/src/frontend/src/components/widgets/FeedbackWidget.tsx
index e0065d3f59..e716d2298b 100644
--- a/src/frontend/src/components/widgets/FeedbackWidget.tsx
+++ b/src/frontend/src/components/widgets/FeedbackWidget.tsx
@@ -1,17 +1,18 @@
 import { Trans } from '@lingui/macro';
-import { Button, Stack, Title } from '@mantine/core';
+import { Button, Stack, Title, useMantineColorScheme } from '@mantine/core';
 import { IconExternalLink } from '@tabler/icons-react';
 
+import { vars } from '../../theme';
+
 export default function FeedbackWidget() {
+  const { colorScheme } = useMantineColorScheme();
   return (
     <Stack
-      sx={(theme) => ({
+      style={{
         backgroundColor:
-          theme.colorScheme === 'dark'
-            ? theme.colors.gray[9]
-            : theme.colors.gray[1],
-        borderRadius: theme.radius.md
-      })}
+          colorScheme === 'dark' ? vars.colors.gray[9] : vars.colors.gray[1],
+        borderRadius: vars.radius.md
+      }}
       p={15}
     >
       <Title order={5}>
@@ -26,7 +27,7 @@ export default function FeedbackWidget() {
         component="a"
         href="https://github.com/inventree/InvenTree/discussions/5328"
         variant="outline"
-        leftIcon={<IconExternalLink size="0.9rem" />}
+        leftSection={<IconExternalLink size="0.9rem" />}
       >
         <Trans>Provide Feedback</Trans>
       </Button>
diff --git a/src/frontend/src/components/widgets/WidgetLayout.css.ts b/src/frontend/src/components/widgets/WidgetLayout.css.ts
new file mode 100644
index 0000000000..467dd24b60
--- /dev/null
+++ b/src/frontend/src/components/widgets/WidgetLayout.css.ts
@@ -0,0 +1,16 @@
+import { style } from '@vanilla-extract/css';
+
+import { vars } from '../../theme';
+
+export const backgroundItem = style({
+  maxWidth: '100%',
+  padding: '8px',
+  boxShadow: vars.shadows.md,
+  [vars.lightSelector]: { backgroundColor: vars.colors.white },
+  [vars.darkSelector]: { backgroundColor: vars.colors.dark[5] }
+});
+
+export const baseItem = style({
+  maxWidth: '100%',
+  padding: '8px'
+});
diff --git a/src/frontend/src/components/widgets/WidgetLayout.tsx b/src/frontend/src/components/widgets/WidgetLayout.tsx
index 1270a87fd0..603ed19daf 100644
--- a/src/frontend/src/components/widgets/WidgetLayout.tsx
+++ b/src/frontend/src/components/widgets/WidgetLayout.tsx
@@ -5,8 +5,7 @@ import {
   Group,
   Indicator,
   Menu,
-  Text,
-  createStyles
+  Text
 } from '@mantine/core';
 import { useDisclosure, useHotkeys } from '@mantine/hooks';
 import {
@@ -19,6 +18,8 @@ import {
 import { useEffect, useState } from 'react';
 import { Responsive, WidthProvider } from 'react-grid-layout';
 
+import * as classes from './WidgetLayout.css';
+
 const ReactGridLayout = WidthProvider(Responsive);
 
 interface LayoutStorage {
@@ -27,21 +28,6 @@ interface LayoutStorage {
 
 const compactType = 'vertical';
 
-const useItemStyle = createStyles((theme) => ({
-  backgroundItem: {
-    backgroundColor:
-      theme.colorScheme === 'dark' ? theme.colors.dark[5] : theme.white,
-    maxWidth: '100%',
-    padding: '8px',
-    boxShadow: theme.shadows.md
-  },
-
-  baseItem: {
-    maxWidth: '100%',
-    padding: '8px'
-  }
-}));
-
 export interface LayoutItemType {
   i: number;
   val: string | JSX.Element | JSX.Element[] | (() => JSX.Element);
@@ -66,7 +52,6 @@ export function WidgetLayout({
   const [layouts, setLayouts] = useState({});
   const [editable, setEditable] = useDisclosure(false);
   const [boxShown, setBoxShown] = useDisclosure(true);
-  const { classes } = useItemStyle();
 
   useEffect(() => {
     let layout = getFromLS('layouts') || [];
@@ -155,7 +140,7 @@ function WidgetControlBar({
   useHotkeys([['mod+E', () => editFnc()]]);
 
   return (
-    <Group position="right">
+    <Group justify="right">
       <Menu
         shadow="md"
         width={200}
@@ -181,13 +166,13 @@ function WidgetControlBar({
             <Trans>Layout</Trans>
           </Menu.Label>
           <Menu.Item
-            icon={<IconArrowBackUpDouble size={14} />}
+            leftSection={<IconArrowBackUpDouble size={14} />}
             onClick={resetLayout}
           >
             <Trans>Reset Layout</Trans>
           </Menu.Item>
           <Menu.Item
-            icon={
+            leftSection={
               <IconLayout2 size={14} color={editable ? 'red' : undefined} />
             }
             onClick={editFnc}
@@ -206,7 +191,7 @@ function WidgetControlBar({
             <Trans>Appearance</Trans>
           </Menu.Label>
           <Menu.Item
-            icon={
+            leftSection={
               boxShown ? (
                 <IconSquareCheck size={14} />
               ) : (
diff --git a/src/frontend/src/contexts/BaseContext.tsx b/src/frontend/src/contexts/BaseContext.tsx
index fc568b878f..e7dfb3c32e 100644
--- a/src/frontend/src/contexts/BaseContext.tsx
+++ b/src/frontend/src/contexts/BaseContext.tsx
@@ -1,15 +1,12 @@
 import { QueryClientProvider } from '@tanstack/react-query';
 
 import { queryClient } from '../App';
-import { LanguageContext } from './LanguageContext';
 import { ThemeContext } from './ThemeContext';
 
 export const BaseContext = ({ children }: { children: any }) => {
   return (
     <QueryClientProvider client={queryClient}>
-      <LanguageContext>
-        <ThemeContext>{children}</ThemeContext>
-      </LanguageContext>
+      <ThemeContext>{children}</ThemeContext>
     </QueryClientProvider>
   );
 };
diff --git a/src/frontend/src/contexts/ThemeContext.tsx b/src/frontend/src/contexts/ThemeContext.tsx
index c973719f61..e5562c58fa 100644
--- a/src/frontend/src/contexts/ThemeContext.tsx
+++ b/src/frontend/src/contexts/ThemeContext.tsx
@@ -1,11 +1,5 @@
 import { t } from '@lingui/macro';
-import {
-  ColorScheme,
-  ColorSchemeProvider,
-  MantineProvider,
-  MantineThemeOverride
-} from '@mantine/core';
-import { useColorScheme, useLocalStorage } from '@mantine/hooks';
+import { MantineProvider, createTheme } from '@mantine/core';
 import { ModalsProvider } from '@mantine/modals';
 import { Notifications } from '@mantine/notifications';
 
@@ -14,36 +8,24 @@ import { LicenseModal } from '../components/modals/LicenseModal';
 import { QrCodeModal } from '../components/modals/QrCodeModal';
 import { ServerInfoModal } from '../components/modals/ServerInfoModal';
 import { useLocalState } from '../states/LocalState';
+import { LanguageContext } from './LanguageContext';
+import { colorSchema } from './colorSchema';
 
 export function ThemeContext({ children }: { children: JSX.Element }) {
-  const [primaryColor, whiteColor, blackColor, radius, loader] = useLocalState(
+  const [primaryColor, whiteColor, blackColor, radius] = useLocalState(
     (state) => [
       state.primaryColor,
       state.whiteColor,
       state.blackColor,
-      state.radius,
-      state.loader
+      state.radius
     ]
   );
 
-  // Color Scheme
-  const preferredColorScheme = useColorScheme();
-  const [colorScheme, setColorScheme] = useLocalStorage<ColorScheme>({
-    key: 'scheme',
-    defaultValue: preferredColorScheme
-  });
-  const toggleColorScheme = (value?: ColorScheme) => {
-    setColorScheme(value || (colorScheme === 'dark' ? 'light' : 'dark'));
-    myTheme.colorScheme = colorScheme;
-  };
-
   // Theme
-  const myTheme: MantineThemeOverride = {
-    colorScheme: colorScheme,
+  const myTheme = createTheme({
     primaryColor: primaryColor,
     white: whiteColor,
     black: blackColor,
-    loader: loader,
     defaultRadius: radius,
     breakpoints: {
       xs: '30em',
@@ -52,15 +34,11 @@ export function ThemeContext({ children }: { children: JSX.Element }) {
       lg: '74em',
       xl: '90em'
     }
-  };
+  });
 
   return (
-    <ColorSchemeProvider
-      colorScheme={colorScheme}
-      toggleColorScheme={toggleColorScheme}
-    >
-      <MantineProvider theme={myTheme} withGlobalStyles withNormalizeCSS>
-        <Notifications />
+    <MantineProvider theme={myTheme} colorSchemeManager={colorSchema}>
+      <LanguageContext>
         <ModalsProvider
           labels={{ confirm: t`Submit`, cancel: t`Cancel` }}
           modals={{
@@ -70,9 +48,10 @@ export function ThemeContext({ children }: { children: JSX.Element }) {
             license: LicenseModal
           }}
         >
+          <Notifications />
           {children}
         </ModalsProvider>
-      </MantineProvider>
-    </ColorSchemeProvider>
+      </LanguageContext>
+    </MantineProvider>
   );
 }
diff --git a/src/frontend/src/contexts/colorSchema.tsx b/src/frontend/src/contexts/colorSchema.tsx
new file mode 100644
index 0000000000..4bc6311584
--- /dev/null
+++ b/src/frontend/src/contexts/colorSchema.tsx
@@ -0,0 +1,67 @@
+import {
+  MantineColorScheme,
+  MantineColorSchemeManager,
+  isMantineColorScheme
+} from '@mantine/core';
+
+export interface LocalStorageColorSchemeManagerOptions {
+  /** Local storage key used to retrieve value with `localStorage.getItem(key)`, `mantine-color-scheme` by default */
+  key?: string;
+}
+
+export function localStorageColorSchemeManager({
+  key = 'mantine-color-scheme'
+}: LocalStorageColorSchemeManagerOptions = {}): MantineColorSchemeManager {
+  let handleStorageEvent: (event: StorageEvent) => void;
+
+  return {
+    get: (defaultValue) => {
+      if (typeof window === 'undefined') {
+        return defaultValue;
+      }
+
+      try {
+        return (
+          (window.localStorage.getItem(key) as MantineColorScheme) ||
+          defaultValue
+        );
+      } catch {
+        return defaultValue;
+      }
+    },
+
+    set: (value) => {
+      try {
+        window.localStorage.setItem(key, value);
+      } catch (error) {
+        // eslint-disable-next-line no-console
+        console.warn(
+          '[@mantine/core] Local storage color scheme manager was unable to save color scheme.',
+          error
+        );
+      }
+    },
+
+    subscribe: (onUpdate) => {
+      handleStorageEvent = (event) => {
+        if (event.storageArea === window.localStorage && event.key === key) {
+          isMantineColorScheme(event.newValue) && onUpdate(event.newValue);
+        }
+      };
+
+      window.addEventListener('storage', handleStorageEvent);
+    },
+
+    unsubscribe: () => {
+      window.removeEventListener('storage', handleStorageEvent);
+    },
+
+    clear: () => {
+      window.localStorage.removeItem(key);
+    }
+  };
+}
+
+export const colorSchema = localStorageColorSchemeManager({
+  key: 'scheme'
+});
diff --git a/src/frontend/src/defaults/actions.tsx b/src/frontend/src/defaults/actions.tsx
index 4ffac3055f..6a5c570fe1 100644
--- a/src/frontend/src/defaults/actions.tsx
+++ b/src/frontend/src/defaults/actions.tsx
@@ -1,5 +1,5 @@
 import { t } from '@lingui/macro';
-import type { SpotlightAction } from '@mantine/spotlight';
+import type { SpotlightActionData } from '@mantine/spotlight';
 import { IconHome, IconLink, IconPointer } from '@tabler/icons-react';
 import { NavigateFunction } from 'react-router-dom';
 
@@ -10,48 +10,55 @@ import { menuItems } from './menuItems';
 export function getActions(navigate: NavigateFunction) {
   const setNavigationOpen = useLocalState((state) => state.setNavigationOpen);
 
-  const actions: SpotlightAction[] = [
+  const actions: SpotlightActionData[] = [
     {
-      title: t`Home`,
+      id: 'home',
+      label: t`Home`,
       description: `Go to the home page`,
-      onTrigger: () => navigate(menuItems.home.link),
-      icon: <IconHome size="1.2rem" />
+      onClick: () => navigate(menuItems.home.link),
+      leftSection: <IconHome size="1.2rem" />
     },
     {
-      title: t`Dashboard`,
+      id: 'dashboard',
+      label: t`Dashboard`,
       description: t`Go to the InvenTree dashboard`,
-      onTrigger: () => navigate(menuItems.dashboard.link),
-      icon: <IconLink size="1.2rem" />
+      onClick: () => navigate(menuItems.dashboard.link),
+      leftSection: <IconLink size="1.2rem" />
     },
     {
-      title: t`Documentation`,
+      id: 'documentation',
+      label: t`Documentation`,
       description: t`Visit the documentation to learn more about InvenTree`,
-      onTrigger: () => (window.location.href = docLinks.faq),
-      icon: <IconLink size="1.2rem" />
+      onClick: () => (window.location.href = docLinks.faq),
+      leftSection: <IconLink size="1.2rem" />
     },
     {
-      title: t`About InvenTree`,
+      id: 'about',
+      label: t`About InvenTree`,
       description: t`About the InvenTree org`,
-      onTrigger: () => aboutInvenTree(),
-      icon: <IconLink size="1.2rem" />
+      onClick: () => aboutInvenTree(),
+      leftSection: <IconLink size="1.2rem" />
     },
     {
-      title: t`Server Information`,
+      id: 'server-info',
+      label: t`Server Information`,
       description: t`About this Inventree instance`,
-      onTrigger: () => serverInfo(),
-      icon: <IconLink size="1.2rem" />
+      onClick: () => serverInfo(),
+      leftSection: <IconLink size="1.2rem" />
     },
     {
-      title: t`License Information`,
+      id: 'license-info',
+      label: t`License Information`,
       description: t`Licenses for dependencies of the service`,
-      onTrigger: () => licenseInfo(),
-      icon: <IconLink size="1.2rem" />
+      onClick: () => licenseInfo(),
+      leftSection: <IconLink size="1.2rem" />
     },
     {
-      title: t`Open Navigation`,
+      id: 'navigation',
+      label: t`Open Navigation`,
       description: t`Open the main navigation menu`,
-      onTrigger: () => setNavigationOpen(true),
-      icon: <IconPointer size="1.2rem" />
+      onClick: () => setNavigationOpen(true),
+      leftSection: <IconPointer size="1.2rem" />
     }
   ];
 
diff --git a/src/frontend/src/defaults/formatters.tsx b/src/frontend/src/defaults/formatters.tsx
index 242ed31dd2..4afcf734d5 100644
--- a/src/frontend/src/defaults/formatters.tsx
+++ b/src/frontend/src/defaults/formatters.tsx
@@ -1,3 +1,4 @@
+import { MantineSize } from '@mantine/core';
 import dayjs from 'dayjs';
 
 import {
@@ -154,3 +155,5 @@ export function renderDate(
     return date;
   }
 }
+
+export type UiSizeType = MantineSize | string | number;
diff --git a/src/frontend/src/forms/BuildForms.tsx b/src/frontend/src/forms/BuildForms.tsx
index b22dff4f74..cdba958269 100644
--- a/src/frontend/src/forms/BuildForms.tsx
+++ b/src/frontend/src/forms/BuildForms.tsx
@@ -392,7 +392,7 @@ export function useCancelBuildOutputsForm({
 
   const preFormContent = useMemo(() => {
     return (
-      <Stack spacing="xs">
+      <Stack gap="xs">
         <Alert color="red" title={t`Cancel Build Outputs`}>
           <Text>{t`Selected build outputs will be deleted`}</Text>
         </Alert>
diff --git a/src/frontend/src/forms/StockForms.tsx b/src/frontend/src/forms/StockForms.tsx
index d7af1e4659..d7dfedc0e8 100644
--- a/src/frontend/src/forms/StockForms.tsx
+++ b/src/frontend/src/forms/StockForms.tsx
@@ -311,7 +311,7 @@ function StockOperationsRow({
       <td>{record.location ? record.location_detail?.pathstring : '-'}</td>
       <td>
         <Flex align="center" gap="xs">
-          <Group position="apart">
+          <Group justify="space-between">
             <Text>{stockString}</Text>
             <StatusRenderer status={record.status} type={ModelType.stockitem} />
           </Group>
diff --git a/src/frontend/src/functions/forms.tsx b/src/frontend/src/functions/forms.tsx
index 2fc5a46e9f..62bb4c731c 100644
--- a/src/frontend/src/functions/forms.tsx
+++ b/src/frontend/src/functions/forms.tsx
@@ -244,7 +244,7 @@ export function openModalApiForm(props: OpenApiFormProps) {
           props.onClose ? props.onClose() : null;
         },
         children: (
-          <Stack spacing={'xs'}>
+          <Stack gap={'xs'}>
             <Divider />
             <ApiForm id={modalId} props={props} optionsLoading={false} />
           </Stack>
diff --git a/src/frontend/src/functions/loading.tsx b/src/frontend/src/functions/loading.tsx
index 270552f63a..52be4a5e67 100644
--- a/src/frontend/src/functions/loading.tsx
+++ b/src/frontend/src/functions/loading.tsx
@@ -1,13 +1,18 @@
-import { Center, Loader, Stack } from '@mantine/core';
+import { Center, Loader, MantineProvider, Stack } from '@mantine/core';
 import { Suspense } from 'react';
 
+import { colorSchema } from '../contexts/colorSchema';
+import { theme } from '../theme';
+
 function LoadingFallback() {
   return (
-    <Stack>
-      <Center>
-        <Loader />
-      </Center>
-    </Stack>
+    <MantineProvider theme={theme} colorSchemeManager={colorSchema}>
+      <Stack>
+        <Center>
+          <Loader />
+        </Center>
+      </Stack>
+    </MantineProvider>
   );
 }
 
diff --git a/src/frontend/src/globalStyle.tsx b/src/frontend/src/globalStyle.tsx
deleted file mode 100644
index 3d1034d662..0000000000
--- a/src/frontend/src/globalStyle.tsx
+++ /dev/null
@@ -1,184 +0,0 @@
-import { createStyles, rem } from '@mantine/core';
-
-export const InvenTreeStyle = createStyles((theme) => ({
-  layoutHeader: {
-    paddingTop: theme.spacing.sm,
-    backgroundColor:
-      theme.colorScheme === 'dark'
-        ? theme.colors.dark[6]
-        : theme.colors.gray[0],
-    borderBottom: `1px solid ${
-      theme.colorScheme === 'dark' ? 'transparent' : theme.colors.gray[2]
-    }`,
-    marginBottom: 10
-  },
-
-  layoutFooter: {
-    marginTop: 10,
-    borderTop: `1px solid ${
-      theme.colorScheme === 'dark' ? theme.colors.dark[5] : theme.colors.gray[2]
-    }`
-  },
-
-  layoutHeaderSection: {
-    paddingBottom: theme.spacing.sm
-  },
-
-  layoutHeaderUser: {
-    color: theme.colorScheme === 'dark' ? theme.colors.dark[0] : theme.black,
-    padding: `${theme.spacing.xs}px ${theme.spacing.sm}px`,
-    borderRadius: theme.defaultRadius,
-    transition: 'background-color 100ms ease',
-
-    [theme.fn.smallerThan('xs')]: {
-      display: 'none'
-    }
-  },
-
-  headerDropdownFooter: {
-    backgroundColor:
-      theme.colorScheme === 'dark'
-        ? theme.colors.dark[7]
-        : theme.colors.gray[0],
-    margin: `calc(${theme.spacing.md} * -1)`,
-    marginTop: theme.spacing.sm,
-    padding: `${theme.spacing.md} calc(${theme.spacing.md} * 2)`,
-    paddingBottom: theme.spacing.xl,
-    borderTop: `${rem(1)} solid ${
-      theme.colorScheme === 'dark' ? theme.colors.dark[5] : theme.colors.gray[1]
-    }`
-  },
-
-  link: {
-    display: 'flex',
-    alignItems: 'center',
-    height: '100%',
-    paddingLeft: theme.spacing.md,
-    paddingRight: theme.spacing.md,
-    textDecoration: 'none',
-    color: theme.colorScheme === 'dark' ? theme.white : theme.black,
-    fontWeight: 500,
-    fontSize: theme.fontSizes.sm,
-
-    [theme.fn.smallerThan('sm')]: {
-      height: rem(42),
-      display: 'flex',
-      alignItems: 'center',
-      width: '100%'
-    },
-
-    ...theme.fn.hover({
-      backgroundColor:
-        theme.colorScheme === 'dark'
-          ? theme.colors.dark[6]
-          : theme.colors.gray[0]
-    })
-  },
-
-  subLink: {
-    width: '100%',
-    padding: `${theme.spacing.xs} ${theme.spacing.md}`,
-    borderRadius: theme.defaultRadius,
-
-    ...theme.fn.hover({
-      backgroundColor:
-        theme.colorScheme === 'dark'
-          ? theme.colors.dark[7]
-          : theme.colors.gray[0]
-    }),
-
-    '&:active': theme.activeStyles
-  },
-
-  docHover: {
-    border: `1px dashed `
-  },
-
-  layoutContent: {
-    flex: 1,
-    width: '100%'
-  },
-
-  layoutFooterLinks: {
-    [theme.fn.smallerThan('xs')]: {
-      marginTop: theme.spacing.md
-    }
-  },
-
-  layoutFooterInner: {
-    display: 'flex',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-    paddingTop: theme.spacing.xl,
-    paddingBottom: theme.spacing.xl,
-
-    [theme.fn.smallerThan('xs')]: {
-      flexDirection: 'column'
-    }
-  },
-
-  tabs: {
-    [theme.fn.smallerThan('sm')]: {
-      display: 'none'
-    }
-  },
-
-  tabsList: {
-    borderBottom: '0 !important',
-    '& > button:first-of-type': {
-      paddingLeft: '0 !important'
-    },
-
-    '& > button:last-of-type': {
-      paddingRight: '0 !important'
-    }
-  },
-
-  tab: {
-    fontWeight: 500,
-    height: 38,
-    backgroundColor: 'transparent',
-
-    '&:hover': {
-      backgroundColor:
-        theme.colorScheme === 'dark'
-          ? theme.colors.dark[5]
-          : theme.colors.gray[1]
-    }
-  },
-
-  signText: {
-    fontSize: 'xl',
-    fontWeight: 700
-  },
-
-  error: {
-    backgroundColor: theme.colors.gray[0],
-    color: theme.colors.red[6]
-  },
-
-  dashboardItemValue: {
-    fontSize: 24,
-    fontWeight: 700,
-    lineHeight: 1
-  },
-
-  dashboardItemTitle: {
-    fontWeight: 700
-  },
-
-  card: {
-    backgroundColor:
-      theme.colorScheme === 'dark' ? theme.colors.dark[7] : theme.white
-  },
-
-  itemTopBorder: {
-    borderTop: `1px solid ${
-      theme.colorScheme === 'dark' ? theme.colors.dark[4] : theme.colors.gray[2]
-    }`
-  },
-
-  navigationDrawer: {
-    padding: 0
-  }
-}));
diff --git a/src/frontend/src/hooks/UseForm.tsx b/src/frontend/src/hooks/UseForm.tsx
index 29e8584f16..fc73d58840 100644
--- a/src/frontend/src/hooks/UseForm.tsx
+++ b/src/frontend/src/hooks/UseForm.tsx
@@ -1,9 +1,10 @@
 import { t } from '@lingui/macro';
-import { Alert, Divider, MantineNumberSize, Stack } from '@mantine/core';
+import { Alert, Divider, Stack } from '@mantine/core';
 import { useId } from '@mantine/hooks';
 import { useEffect, useMemo, useRef } from 'react';
 
 import { ApiFormProps, OptionsApiForm } from '../components/forms/ApiForm';
+import { UiSizeType } from '../defaults/formatters';
 import { useModal } from './UseModal';
 
 /**
@@ -20,7 +21,7 @@ export interface ApiFormModalProps extends ApiFormProps {
   onClose?: () => void;
   onOpen?: () => void;
   closeOnClickOutside?: boolean;
-  size?: MantineNumberSize;
+  size?: UiSizeType;
 }
 
 /**
@@ -62,7 +63,7 @@ export function useApiFormModal(props: ApiFormModalProps) {
     closeOnClickOutside: formProps.closeOnClickOutside,
     size: props.size ?? 'xl',
     children: (
-      <Stack spacing={'xs'}>
+      <Stack gap={'xs'}>
         <Divider />
         <OptionsApiForm props={formProps} id={id} />
       </Stack>
diff --git a/src/frontend/src/hooks/UseModal.tsx b/src/frontend/src/hooks/UseModal.tsx
index d8377f749e..cb122df6b4 100644
--- a/src/frontend/src/hooks/UseModal.tsx
+++ b/src/frontend/src/hooks/UseModal.tsx
@@ -1,13 +1,14 @@
-import { MantineNumberSize, Modal } from '@mantine/core';
+import { Modal } from '@mantine/core';
 import { useDisclosure } from '@mantine/hooks';
 import React, { useCallback } from 'react';
 
 import { StylishText } from '../components/items/StylishText';
+import { UiSizeType } from '../defaults/formatters';
 
 export interface UseModalProps {
   title: string;
   children: React.ReactElement;
-  size?: MantineNumberSize;
+  size?: UiSizeType;
   onOpen?: () => void;
   onClose?: () => void;
   closeOnClickOutside?: boolean;
diff --git a/src/frontend/src/main.css.ts b/src/frontend/src/main.css.ts
new file mode 100644
index 0000000000..c1a14f434e
--- /dev/null
+++ b/src/frontend/src/main.css.ts
@@ -0,0 +1,180 @@
+import { rem } from '@mantine/core';
+import { style } from '@vanilla-extract/css';
+
+import { vars } from './theme';
+
+export const layoutHeader = style({
+  paddingTop: vars.spacing.sm,
+  marginBottom: 10,
+
+  [vars.lightSelector]: {
+    backgroundColor: vars.colors.gray[0],
+    borderBottom: `${rem(1)} solid ${vars.colors.gray[2]}`
+  },
+  [vars.darkSelector]: {
+    backgroundColor: vars.colors.dark[6],
+    borderBottom: `${rem(1)} solid transparent`
+  }
+});
+
+export const layoutFooter = style({
+  marginTop: 10,
+  [vars.lightSelector]: { borderTop: `1px solid ${vars.colors.gray[2]}` },
+  [vars.darkSelector]: { borderTop: `1px solid ${vars.colors.dark[5]}` }
+});
+
+export const layoutHeaderSection = style({
+  paddingBottom: vars.spacing.sm
+});
+
+export const layoutHeaderUser = style({
+  padding: `${vars.spacing.xs}px ${vars.spacing.sm}px`,
+  borderRadius: vars.radiusDefault,
+  transition: 'background-color 100ms ease',
+
+  [vars.lightSelector]: { color: vars.colors.black },
+  [vars.darkSelector]: { color: vars.colors.dark[0] },
+
+  [vars.smallerThan('xs')]: {
+    display: 'none'
+  }
+});
+
+export const headerDropdownFooter = style({
+  margin: `calc(${vars.spacing.md} * -1)`,
+  marginTop: vars.spacing.sm,
+  padding: `${vars.spacing.md} calc(${vars.spacing.md} * 2)`,
+  paddingBottom: vars.spacing.xl,
+
+  [vars.lightSelector]: {
+    backgroundColor: vars.colors.gray[0],
+    borderTop: `${rem(1)} solid ${vars.colors.gray[1]}`
+  },
+  [vars.darkSelector]: {
+    backgroundColor: vars.colors.dark[7],
+    borderTop: `${rem(1)} solid ${vars.colors.dark[5]}`
+  }
+});
+
+export const link = style({
+  display: 'flex',
+  alignItems: 'center',
+  height: '100%',
+  paddingLeft: vars.spacing.md,
+  paddingRight: vars.spacing.md,
+  textDecoration: 'none',
+  fontWeight: 500,
+  fontSize: vars.fontSizes.sm,
+
+  [vars.lightSelector]: { color: vars.colors.black },
+  [vars.darkSelector]: { color: vars.colors.white },
+
+  [vars.smallerThan('sm')]: {
+    height: rem(42),
+    display: 'flex',
+    alignItems: 'center',
+    width: '100%'
+  },
+
+  ':hover': {
+    [vars.lightSelector]: { backgroundColor: vars.colors.gray[0] },
+    [vars.darkSelector]: { backgroundColor: vars.colors.dark[6] }
+  }
+});
+
+export const subLink = style({
+  width: '100%',
+  padding: `${vars.spacing.xs} ${vars.spacing.md}`,
+  borderRadius: vars.radiusDefault,
+
+  ':hover': {
+    [vars.lightSelector]: { backgroundColor: vars.colors.gray[0] },
+    [vars.darkSelector]: { backgroundColor: vars.colors.dark[7] }
+  },
+
+  ':active': {
+    color: vars.colors.defaultHover
+  }
+});
+
+export const docHover = style({
+  border: `1px dashed `
+});
+
+export const layoutContent = style({
+  flex: 1,
+  width: '100%'
+});
+
+export const layoutFooterLinks = style({
+  [vars.smallerThan('xs')]: {
+    marginTop: vars.spacing.md
+  }
+});
+
+export const layoutFooterInner = style({
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+  paddingTop: vars.spacing.xl,
+  paddingBottom: vars.spacing.xl,
+
+  [vars.smallerThan('xs')]: {
+    flexDirection: 'column'
+  }
+});
+
+export const tabs = style({
+  [vars.smallerThan('sm')]: {
+    display: 'none'
+  }
+});
+
+export const tabsList = style({
+  borderBottom: '0 !important'
+});
+
+export const tab = style({
+  fontWeight: 500,
+  height: 38,
+  backgroundColor: 'transparent',
+
+  ':hover': {
+    [vars.lightSelector]: { backgroundColor: vars.colors.gray[1] },
+    [vars.darkSelector]: { backgroundColor: vars.colors.dark[5] }
+  }
+});
+
+export const signText = style({
+  fontSize: 'xl',
+  fontWeight: 700
+});
+
+export const error = style({
+  backgroundColor: vars.colors.gray[0],
+  color: vars.colors.red[6]
+});
+
+export const dashboardItemValue = style({
+  fontSize: 24,
+  fontWeight: 700,
+  lineHeight: 1
+});
+
+export const dashboardItemTitle = style({
+  fontWeight: 700
+});
+
+export const card = style({
+  [vars.lightSelector]: { backgroundColor: vars.colors.white },
+  [vars.darkSelector]: { backgroundColor: vars.colors.dark[7] }
+});
+
+export const itemTopBorder = style({
+  [vars.lightSelector]: { borderTop: `1px solid ${vars.colors.gray[2]}` },
+  [vars.darkSelector]: { borderTop: `1px solid ${vars.colors.dark[4]}` }
+});
+
+export const navigationDrawer = style({
+  padding: 0
+});
diff --git a/src/frontend/src/main.tsx b/src/frontend/src/main.tsx
index 6af6a0b39d..01ea516254 100644
--- a/src/frontend/src/main.tsx
+++ b/src/frontend/src/main.tsx
@@ -1,4 +1,9 @@
+import '@mantine/carousel/styles.css';
+import '@mantine/core/styles.css';
+import '@mantine/notifications/styles.css';
+import '@mantine/spotlight/styles.css';
 import * as Sentry from '@sentry/react';
+import 'mantine-datatable/styles.css';
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import 'react-grid-layout/css/styles.css';
diff --git a/src/frontend/src/pages/Auth/Logged-In.tsx b/src/frontend/src/pages/Auth/Logged-In.tsx
index 25d8d16026..4980a660b3 100644
--- a/src/frontend/src/pages/Auth/Logged-In.tsx
+++ b/src/frontend/src/pages/Auth/Logged-In.tsx
@@ -22,7 +22,7 @@ export default function Logged_In() {
               <Text size="lg">
                 <Trans>Checking if you are already logged in</Trans>
               </Text>
-              <Group position="center">
+              <Group justify="center">
                 <Loader />
               </Group>
             </Stack>
diff --git a/src/frontend/src/pages/Auth/Login.tsx b/src/frontend/src/pages/Auth/Login.tsx
index 77e2b541e5..a27687dfe8 100644
--- a/src/frontend/src/pages/Auth/Login.tsx
+++ b/src/frontend/src/pages/Auth/Login.tsx
@@ -36,7 +36,8 @@ export default function Login() {
   const [searchParams] = useSearchParams();
 
   // Data manipulation functions
-  function ChangeHost(newHost: string): void {
+  function ChangeHost(newHost: string | null): void {
+    if (newHost === null) return;
     setHost(hostList[newHost]?.host, newHost);
     setApiDefaults();
     fetchServerApiState();
@@ -81,7 +82,7 @@ export default function Login() {
         ) : (
           <>
             <Paper radius="md" p="xl" withBorder>
-              <Text size="lg" weight={500}>
+              <Text size="lg" fw={500}>
                 {loginMode ? (
                   <Trans>Welcome, log in below</Trans>
                 ) : (
diff --git a/src/frontend/src/pages/Auth/Logout.tsx b/src/frontend/src/pages/Auth/Logout.tsx
index 25dfd04c4e..0270d1a797 100644
--- a/src/frontend/src/pages/Auth/Logout.tsx
+++ b/src/frontend/src/pages/Auth/Logout.tsx
@@ -22,7 +22,7 @@ export default function Logout() {
               <Text size="lg">
                 <Trans>Logging out</Trans>
               </Text>
-              <Group position="center">
+              <Group justify="center">
                 <Loader />
               </Group>
             </Stack>
diff --git a/src/frontend/src/pages/Index/Playground.tsx b/src/frontend/src/pages/Index/Playground.tsx
index a1c9d7c21b..902858b5d3 100644
--- a/src/frontend/src/pages/Index/Playground.tsx
+++ b/src/frontend/src/pages/Index/Playground.tsx
@@ -8,13 +8,14 @@ import {
   Text,
   TextInput
 } from '@mantine/core';
-import { spotlight } from '@mantine/spotlight';
+import { SpotlightActionData } from '@mantine/spotlight';
 import { IconAlien } from '@tabler/icons-react';
 import { ReactNode, useMemo, useState } from 'react';
 
 import { OptionsApiForm } from '../../components/forms/ApiForm';
 import { PlaceholderPill } from '../../components/items/Placeholder';
 import { StylishText } from '../../components/items/StylishText';
+import { firstSpotlight } from '../../components/nav/Layout';
 import { StatusRenderer } from '../../components/render/StatusRenderer';
 import { ApiEndpoints } from '../../enums/ApiEndpoints';
 import { ModelType } from '../../enums/ModelType';
@@ -135,7 +136,7 @@ function ApiFormsPlayground() {
         <Button onClick={() => openCreatePart()}>Create Part new Modal</Button>
         {createPartModal}
       </Group>
-      <Card sx={{ padding: '30px' }}>
+      <Card style={{ padding: '30px' }}>
         <OptionsApiForm
           props={{
             url: ApiEndpoints.part_list,
@@ -181,25 +182,28 @@ function SpotlighPlayground() {
     <Button
       variant="outline"
       onClick={() => {
-        spotlight.registerActions([
+        const setAdditionalActions = (value: SpotlightActionData[]) => {
+          console.log('would add', value);
+        };
+        setAdditionalActions([
           {
             id: 'secret-action-1',
             title: 'Secret action',
             description: 'It was registered with a button click',
-            icon: <IconAlien size="1.2rem" />,
-            onTrigger: () => console.log('Secret')
+            leftSection: <IconAlien size="1.2rem" />,
+            onClick: () => console.log('Secret')
           },
           {
             id: 'secret-action-2',
             title: 'Another secret action',
             description:
               'You can register multiple actions with just one command',
-            icon: <IconAlien size="1.2rem" />,
-            onTrigger: () => console.log('Secret')
+            leftSection: <IconAlien size="1.2rem" />,
+            onClick: () => console.log('Secret')
           }
         ]);
         console.log('registed');
-        spotlight.open();
+        firstSpotlight.open();
       }}
     >
       Register extra actions
diff --git a/src/frontend/src/pages/Index/Scan.tsx b/src/frontend/src/pages/Index/Scan.tsx
index bfa329fff8..889eebd18b 100644
--- a/src/frontend/src/pages/Index/Scan.tsx
+++ b/src/frontend/src/pages/Index/Scan.tsx
@@ -4,7 +4,6 @@ import {
   Badge,
   Button,
   Checkbox,
-  Col,
   Container,
   Grid,
   Group,
@@ -42,7 +41,7 @@ import {
 } from '@tabler/icons-react';
 import { Html5Qrcode } from 'html5-qrcode';
 import { CameraDevice } from 'html5-qrcode/camera/core';
-import { ReactNode, useEffect, useState } from 'react';
+import { ReactNode, useEffect, useMemo, useState } from 'react';
 
 import { api } from '../../App';
 import { DocInfo } from '../../components/items/DocInfo';
@@ -243,14 +242,14 @@ export default function Scan() {
 
     if (uniqueObjectTypes.length === 0) {
       return (
-        <Group spacing={0}>
+        <Group gap={0}>
           <IconQuestionMark color="orange" />
           <Trans>Selected elements are not known</Trans>
         </Group>
       );
     } else if (uniqueObjectTypes.length > 1) {
       return (
-        <Group spacing={0}>
+        <Group gap={0}>
           <IconAlertCircle color="orange" />
           <Trans>Multiple object types selected</Trans>
         </Group>
@@ -262,7 +261,11 @@ export default function Scan() {
           <Trans>Actions for {uniqueObjectTypes[0]} </Trans>
         </Text>
         <Group>
-          <ActionIcon onClick={notYetImplemented} title={t`Count`}>
+          <ActionIcon
+            onClick={notYetImplemented}
+            title={t`Count`}
+            variant="default"
+          >
             <IconNumber />
           </ActionIcon>
         </Group>
@@ -273,8 +276,8 @@ export default function Scan() {
   // rendering
   return (
     <>
-      <Group position="apart">
-        <Group position="left">
+      <Group justify="space-between">
+        <Group justify="left">
           <StylishText>
             <Trans>Scan Page</Trans>
           </StylishText>
@@ -293,10 +296,10 @@ export default function Scan() {
       </Group>
       <Space h={'md'} />
       <Grid maw={'100%'}>
-        <Col span={4}>
+        <Grid.Col span={4}>
           <Stack>
-            <Stack spacing="xs">
-              <Group position="apart">
+            <Stack gap="xs">
+              <Group justify="space-between">
                 <TitleWithDoc
                   order={3}
                   text={t`Select the input method you want to use to scan items.`}
@@ -309,12 +312,12 @@ export default function Scan() {
                   data={inputOptions}
                   searchable
                   placeholder={t`Select input method`}
-                  nothingFound={t`Nothing found`}
+                  nothingFoundMessage={t`Nothing found`}
                 />
               </Group>
               {inp}
             </Stack>
-            <Stack spacing={0}>
+            <Stack gap={0}>
               <TitleWithDoc
                 order={3}
                 text={t`Depending on the selected parts actions will be shown here. Not all barcode types are supported currently.`}
@@ -338,6 +341,7 @@ export default function Scan() {
                       color="red"
                       onClick={btnDeleteHistory}
                       title={t`Delete`}
+                      variant="default"
                     >
                       <IconTrash />
                     </ActionIcon>
@@ -345,6 +349,7 @@ export default function Scan() {
                       onClick={btnRunSelectedBarcode}
                       disabled={selection.length > 1}
                       title={t`Lookup part`}
+                      variant="default"
                     >
                       <IconSearch />
                     </ActionIcon>
@@ -352,6 +357,7 @@ export default function Scan() {
                       onClick={btnOpenSelectedLink}
                       disabled={!selectionLinked}
                       title={t`Open Link`}
+                      variant="default"
                     >
                       <IconLink />
                     </ActionIcon>
@@ -361,9 +367,9 @@ export default function Scan() {
               )}
             </Stack>
           </Stack>
-        </Col>
-        <Col span={8}>
-          <Group position="apart">
+        </Grid.Col>
+        <Grid.Col span={8}>
+          <Group justify="space-between">
             <TitleWithDoc
               order={3}
               text={t`History is locally kept in this browser.`}
@@ -374,6 +380,7 @@ export default function Scan() {
             <ActionIcon
               color="red"
               onClick={btnDeleteFullHistory}
+              variant="default"
               title={t`Delete History`}
             >
               <IconTrash />
@@ -384,7 +391,7 @@ export default function Scan() {
             selection={selection}
             setSelection={setSelection}
           />
-        </Col>
+        </Grid.Col>
       </Grid>
     </>
   );
@@ -409,34 +416,30 @@ function HistoryTable({
     setSelection((current) =>
       current.length === data.length ? [] : data.map((item) => item.id)
     );
-  const [rows, setRows] = useState<ReactNode>();
 
-  useEffect(() => {
-    setRows(
-      data.map((item) => {
-        return (
-          <tr key={item.id}>
-            <td>
-              <Checkbox
-                checked={selection.includes(item.id)}
-                onChange={() => toggleRow(item.id)}
-                transitionDuration={0}
-              />
-            </td>
-            <td>
-              {item.pk && item.model && item.instance ? (
-                <RenderInstance model={item.model} instance={item.instance} />
-              ) : (
-                item.ref
-              )}
-            </td>
-            <td>{item.model}</td>
-            <td>{item.source}</td>
-            <td>{item.timestamp?.toString()}</td>
-          </tr>
-        );
-      })
-    );
+  const rows = useMemo(() => {
+    return data.map((item) => {
+      return (
+        <tr key={item.id}>
+          <td>
+            <Checkbox
+              checked={selection.includes(item.id)}
+              onChange={() => toggleRow(item.id)}
+            />
+          </td>
+          <td>
+            {item.pk && item.model && item.instance ? (
+              <RenderInstance model={item.model} instance={item.instance} />
+            ) : (
+              item.ref
+            )}
+          </td>
+          <td>{item.model}</td>
+          <td>{item.source}</td>
+          <td>{item.timestamp?.toString()}</td>
+        </tr>
+      );
+    });
   }, [data, selection]);
 
   // rendering
@@ -458,7 +461,6 @@ function HistoryTable({
                 indeterminate={
                   selection.length > 0 && selection.length !== data.length
                 }
-                transitionDuration={0}
               />
             </th>
             <th>
@@ -528,7 +530,7 @@ function InputManual({ action }: Readonly<ScanInputInterface>) {
           onChange={(event) => setValue(event.currentTarget.value)}
           onKeyDown={getHotkeyHandler([['Enter', btnAddItem]])}
         />
-        <ActionIcon onClick={btnAddItem} w={16}>
+        <ActionIcon onClick={btnAddItem} w={16} variant="default">
           <IconPlus />
         </ActionIcon>
       </Group>
@@ -712,8 +714,8 @@ function InputImageBarcode({ action }: Readonly<ScanInputInterface>) {
   }, [cameraValue]);
 
   return (
-    <Stack spacing="xs">
-      <Group spacing="xs">
+    <Stack gap="xs">
+      <Group gap="xs">
         <Select
           value={cameraValue}
           onChange={setCameraValue}
@@ -723,7 +725,11 @@ function InputImageBarcode({ action }: Readonly<ScanInputInterface>) {
           size="sm"
         />
         {ScanningEnabled ? (
-          <ActionIcon onClick={btnStopScanning} title={t`Stop scanning`}>
+          <ActionIcon
+            onClick={btnStopScanning}
+            title={t`Stop scanning`}
+            variant="default"
+          >
             <IconPlayerStopFilled />
           </ActionIcon>
         ) : (
@@ -731,11 +737,12 @@ function InputImageBarcode({ action }: Readonly<ScanInputInterface>) {
             onClick={btnStartScanning}
             title={t`Start scanning`}
             disabled={!camId}
+            variant="default"
           >
             <IconPlayerPlayFilled />
           </ActionIcon>
         )}
-        <Space sx={{ flex: 1 }} />
+        <Space style={{ flex: 1 }} />
         <Badge color={ScanningEnabled ? 'green' : 'orange'}>
           {ScanningEnabled ? t`Scanning` : t`Not scanning`}
         </Badge>
diff --git a/src/frontend/src/pages/Index/Settings/AccountSettings/AccountDetailPanel.tsx b/src/frontend/src/pages/Index/Settings/AccountSettings/AccountDetailPanel.tsx
index d397a69bb5..4a483ebeb6 100644
--- a/src/frontend/src/pages/Index/Settings/AccountSettings/AccountDetailPanel.tsx
+++ b/src/frontend/src/pages/Index/Settings/AccountSettings/AccountDetailPanel.tsx
@@ -40,7 +40,7 @@ export function AccountDetailPanel() {
       </Group>
       <Group>
         {editing ? (
-          <Stack spacing="xs">
+          <Stack gap="xs">
             <TextInput
               label="first name"
               placeholder={t`First name`}
@@ -51,14 +51,14 @@ export function AccountDetailPanel() {
               placeholder={t`Last name`}
               {...form.getInputProps('last_name')}
             />
-            <Group position="right" mt="md">
+            <Group justify="right" mt="md">
               <Button type="submit">
                 <Trans>Submit</Trans>
               </Button>
             </Group>
           </Stack>
         ) : (
-          <Stack spacing="0">
+          <Stack gap="0">
             <Text>
               <Trans>First name: </Trans>
               {form.values.first_name}
diff --git a/src/frontend/src/pages/Index/Settings/AccountSettings/SecurityContent.tsx b/src/frontend/src/pages/Index/Settings/AccountSettings/SecurityContent.tsx
index 960ae67ebe..8b3904b12f 100644
--- a/src/frontend/src/pages/Index/Settings/AccountSettings/SecurityContent.tsx
+++ b/src/frontend/src/pages/Index/Settings/AccountSettings/SecurityContent.tsx
@@ -137,7 +137,7 @@ function EmailContent({}: {}) {
                 key={link.id}
                 value={String(link.id)}
                 label={
-                  <Group position="apart">
+                  <Group justify="space-between">
                     {link.email}
                     {link.primary && (
                       <Badge color="blue">
@@ -168,7 +168,7 @@ function EmailContent({}: {}) {
           <TextInput
             label={t`E-Mail`}
             placeholder={t`E-Mail address`}
-            icon={<IconAt />}
+            leftSection={<IconAt />}
             value={newEmailValue}
             onChange={(event) => setNewEmailValue(event.currentTarget.value)}
           />
@@ -251,7 +251,7 @@ function SsoContent({ dataProvider }: { dataProvider: any | undefined }) {
         variant="outline"
         disabled={!provider.configured}
       >
-        <Group position="apart">
+        <Group justify="space-between">
           {provider.display_name}
           {provider.configured == false && <IconAlertCircle />}
         </Group>
@@ -308,7 +308,7 @@ function SsoContent({ dataProvider }: { dataProvider: any | undefined }) {
             {currentProviders === undefined ? (
               <Trans>Loading</Trans>
             ) : (
-              <Stack spacing="xs">
+              <Stack gap="xs">
                 {currentProviders.map((provider: any) => (
                   <ProviderButton key={provider.id} provider={provider} />
                 ))}
diff --git a/src/frontend/src/pages/Index/Settings/AccountSettings/UserThemePanel.tsx b/src/frontend/src/pages/Index/Settings/AccountSettings/UserThemePanel.tsx
index e6c62d1698..7765e888a3 100644
--- a/src/frontend/src/pages/Index/Settings/AccountSettings/UserThemePanel.tsx
+++ b/src/frontend/src/pages/Index/Settings/AccountSettings/UserThemePanel.tsx
@@ -11,12 +11,11 @@ import {
   Table,
   Title
 } from '@mantine/core';
-import { LoaderType } from '@mantine/styles/lib/theme/types/MantineTheme';
 import { useState } from 'react';
 
 import { SizeMarks } from '../../../../defaults/defaults';
-import { InvenTreeStyle } from '../../../../globalStyle';
 import { useLocalState } from '../../../../states/LocalState';
+import { theme } from '../../../../theme';
 
 function getLkp(color: string) {
   return { [DEFAULT_THEME.colors[color][6]]: color };
@@ -27,8 +26,6 @@ const LOOKUP = Object.assign(
 );
 
 export function UserTheme({ height }: { height: number }) {
-  const { theme } = InvenTreeStyle();
-
   // primary color
   function changePrimary(color: string) {
     useLocalState.setState({ primaryColor: LOOKUP[color] });
@@ -69,10 +66,13 @@ export function UserTheme({ height }: { height: number }) {
     { value: 'oval', label: t`oval` },
     { value: 'dots', label: t`dots` }
   ];
-  const [loader, setLoader] = useState<LoaderType>(theme.loader);
-  function changeLoader(value: LoaderType) {
-    setLoader(value);
-    useLocalState.setState({ loader: value });
+  const [themeLoader, setThemeLoader] = useLocalState((state) => [
+    state.loader,
+    state.setLoader
+  ]);
+  function changeLoader(value: string | null) {
+    if (value === null) return;
+    setThemeLoader(value);
   }
 
   return (
@@ -135,10 +135,10 @@ export function UserTheme({ height }: { height: number }) {
               <Group align="center">
                 <Select
                   data={loaderDate}
-                  value={loader}
+                  value={themeLoader}
                   onChange={changeLoader}
                 />
-                <Loader type={loader} mah={18} />
+                <Loader type={themeLoader} mah={18} />
               </Group>
             </td>
           </tr>
diff --git a/src/frontend/src/pages/Index/Settings/AdminCenter/Index.tsx b/src/frontend/src/pages/Index/Settings/AdminCenter/Index.tsx
index 7298f76b92..876651f886 100644
--- a/src/frontend/src/pages/Index/Settings/AdminCenter/Index.tsx
+++ b/src/frontend/src/pages/Index/Settings/AdminCenter/Index.tsx
@@ -97,7 +97,7 @@ export default function AdminCenter() {
         label: t`Project Codes`,
         icon: <IconListDetails />,
         content: (
-          <Stack spacing="xs">
+          <Stack gap="xs">
             <GlobalSettingList keys={['PROJECT_CODES_ENABLED']} />
             <Divider />
             <ProjectCodeTable />
@@ -144,7 +144,7 @@ export default function AdminCenter() {
   }, []);
 
   const QuickAction = () => (
-    <Stack spacing={'xs'} ml={'sm'}>
+    <Stack gap={'xs'} ml={'sm'}>
       <Title order={5}>
         <Trans>Quick Actions</Trans>
       </Title>
@@ -167,7 +167,7 @@ export default function AdminCenter() {
   );
 
   return (
-    <Stack spacing="xs">
+    <Stack gap="xs">
       <SettingsHeader
         title={t`Admin Center`}
         subtitle={t`Advanced Options`}
diff --git a/src/frontend/src/pages/Index/Settings/AdminCenter/MachineManagementPanel.tsx b/src/frontend/src/pages/Index/Settings/AdminCenter/MachineManagementPanel.tsx
index 7464c0c0e3..17888e6f28 100644
--- a/src/frontend/src/pages/Index/Settings/AdminCenter/MachineManagementPanel.tsx
+++ b/src/frontend/src/pages/Index/Settings/AdminCenter/MachineManagementPanel.tsx
@@ -38,7 +38,7 @@ export default function MachineManagementPanel() {
 
       <Space h="10px" />
 
-      <Stack spacing={'xs'}>
+      <Stack gap={'xs'}>
         <Title order={5}>
           <Trans>Machine types</Trans>
         </Title>
@@ -47,7 +47,7 @@ export default function MachineManagementPanel() {
 
       <Space h="10px" />
 
-      <Stack spacing={'xs'}>
+      <Stack gap={'xs'}>
         <Group>
           <Title order={5}>
             <Trans>Machine Error Stack</Trans>
@@ -58,7 +58,7 @@ export default function MachineManagementPanel() {
         </Group>
         {registryStatus?.registry_errors &&
         registryStatus.registry_errors.length === 0 ? (
-          <Text italic>
+          <Text style={{ fontStyle: 'italic' }}>
             <Trans>There are no machine registry errors.</Trans>
           </Text>
         ) : (
diff --git a/src/frontend/src/pages/Index/Settings/AdminCenter/UserManagementPanel.tsx b/src/frontend/src/pages/Index/Settings/AdminCenter/UserManagementPanel.tsx
index 8b0b1c400e..7e38e68bba 100644
--- a/src/frontend/src/pages/Index/Settings/AdminCenter/UserManagementPanel.tsx
+++ b/src/frontend/src/pages/Index/Settings/AdminCenter/UserManagementPanel.tsx
@@ -8,7 +8,7 @@ import { UserTable } from '../../../../tables/settings/UserTable';
 
 export default function UserManagementPanel() {
   return (
-    <Stack spacing="xs">
+    <Stack gap="xs">
       <Title order={5}>
         <Trans>Users</Trans>
       </Title>
@@ -21,7 +21,7 @@ export default function UserManagementPanel() {
 
       <Divider />
 
-      <Stack spacing={0}>
+      <Stack gap={0}>
         <Text>
           <Trans>Settings</Trans>
         </Text>
diff --git a/src/frontend/src/pages/Index/Settings/SystemSettings.tsx b/src/frontend/src/pages/Index/Settings/SystemSettings.tsx
index e61f93ff24..40d39e5897 100644
--- a/src/frontend/src/pages/Index/Settings/SystemSettings.tsx
+++ b/src/frontend/src/pages/Index/Settings/SystemSettings.tsx
@@ -287,7 +287,7 @@ export default function SystemSettings() {
 
   return (
     <>
-      <Stack spacing="xs">
+      <Stack gap="xs">
         <SettingsHeader
           title={t`System Settings`}
           subtitle={server.instance || ''}
diff --git a/src/frontend/src/pages/Index/Settings/UserSettings.tsx b/src/frontend/src/pages/Index/Settings/UserSettings.tsx
index 19f1f71b71..e20f0489f1 100644
--- a/src/frontend/src/pages/Index/Settings/UserSettings.tsx
+++ b/src/frontend/src/pages/Index/Settings/UserSettings.tsx
@@ -110,7 +110,7 @@ export default function UserSettings() {
 
   return (
     <>
-      <Stack spacing="xs">
+      <Stack gap="xs">
         <SettingsHeader
           title={t`Account Settings`}
           subtitle={`${user?.first_name} ${user?.last_name}`}
diff --git a/src/frontend/src/pages/build/BuildDetail.tsx b/src/frontend/src/pages/build/BuildDetail.tsx
index f456617d52..fbbffa5e81 100644
--- a/src/frontend/src/pages/build/BuildDetail.tsx
+++ b/src/frontend/src/pages/build/BuildDetail.tsx
@@ -415,7 +415,7 @@ export default function BuildDetail() {
       {editBuild.modal}
       {duplicateBuild.modal}
       {cancelBuild.modal}
-      <Stack spacing="xs">
+      <Stack gap="xs">
         <LoadingOverlay visible={instanceQuery.isFetching} />
         <PageDetail
           title={build.reference}
diff --git a/src/frontend/src/pages/company/CompanyDetail.tsx b/src/frontend/src/pages/company/CompanyDetail.tsx
index 9e4bc2987e..22b64740f3 100644
--- a/src/frontend/src/pages/company/CompanyDetail.tsx
+++ b/src/frontend/src/pages/company/CompanyDetail.tsx
@@ -81,7 +81,8 @@ export default function CompanyDetail(props: Readonly<CompanyDetailProps>) {
       {
         type: 'text',
         name: 'description',
-        label: t`Description`
+        label: t`Description`,
+        copy: true
       },
       {
         type: 'link',
@@ -314,7 +315,7 @@ export default function CompanyDetail(props: Readonly<CompanyDetailProps>) {
   return (
     <>
       {editCompany.modal}
-      <Stack spacing="xs">
+      <Stack gap="xs">
         <LoadingOverlay visible={instanceQuery.isFetching} />
         <PageDetail
           title={t`Company` + `: ${company.name}`}
diff --git a/src/frontend/src/pages/company/ManufacturerPartDetail.tsx b/src/frontend/src/pages/company/ManufacturerPartDetail.tsx
index 147225b297..65d48d6535 100644
--- a/src/frontend/src/pages/company/ManufacturerPartDetail.tsx
+++ b/src/frontend/src/pages/company/ManufacturerPartDetail.tsx
@@ -241,8 +241,7 @@ export default function ManufacturerPartDetail() {
   return (
     <>
       {editManufacturerPart.modal}
-      {duplicateManufacturerPart.modal}
-      <Stack spacing="xs">
+      <Stack gap="xs">
         <LoadingOverlay visible={instanceQuery.isFetching} />
         <PageDetail
           title={t`ManufacturerPart`}
diff --git a/src/frontend/src/pages/company/SupplierPartDetail.tsx b/src/frontend/src/pages/company/SupplierPartDetail.tsx
index 5b33302c99..8afe9dced7 100644
--- a/src/frontend/src/pages/company/SupplierPartDetail.tsx
+++ b/src/frontend/src/pages/company/SupplierPartDetail.tsx
@@ -311,8 +311,7 @@ export default function SupplierPartDetail() {
   return (
     <>
       {editSuppliertPart.modal}
-      {duplicateSupplierPart.modal}
-      <Stack spacing="xs">
+      <Stack gap="xs">
         <LoadingOverlay visible={instanceQuery.isFetching} />
         <PageDetail
           title={t`Supplier Part`}
diff --git a/src/frontend/src/pages/part/CategoryDetail.tsx b/src/frontend/src/pages/part/CategoryDetail.tsx
index bf4db14067..ad74f2b959 100644
--- a/src/frontend/src/pages/part/CategoryDetail.tsx
+++ b/src/frontend/src/pages/part/CategoryDetail.tsx
@@ -222,7 +222,7 @@ export default function CategoryDetail({}: {}) {
   return (
     <>
       {editCategory.modal}
-      <Stack spacing="xs">
+      <Stack gap="xs">
         <LoadingOverlay visible={instanceQuery.isFetching} />
         <PartCategoryTree
           opened={treeOpen}
diff --git a/src/frontend/src/pages/part/PartDetail.tsx b/src/frontend/src/pages/part/PartDetail.tsx
index 8521ae9d03..d72907186b 100644
--- a/src/frontend/src/pages/part/PartDetail.tsx
+++ b/src/frontend/src/pages/part/PartDetail.tsx
@@ -442,7 +442,7 @@ export default function PartDetail() {
             />
           </Grid.Col>
           <Grid.Col span={8}>
-            <Stack spacing="xs">
+            <Stack gap="xs">
               <table>
                 <tbody>
                   <tr>
@@ -782,7 +782,7 @@ export default function PartDetail() {
     <>
       {duplicatePart.modal}
       {editPart.modal}
-      <Stack spacing="xs">
+      <Stack gap="xs">
         <LoadingOverlay visible={instanceQuery.isFetching} />
         <PartCategoryTree
           opened={treeOpen}
diff --git a/src/frontend/src/pages/part/PartPricingPanel.tsx b/src/frontend/src/pages/part/PartPricingPanel.tsx
index 44e8439405..ce05c2c342 100644
--- a/src/frontend/src/pages/part/PartPricingPanel.tsx
+++ b/src/frontend/src/pages/part/PartPricingPanel.tsx
@@ -65,7 +65,7 @@ export default function PartPricingPanel({ part }: { part: any }) {
   }
 
   return (
-    <Stack spacing="xs">
+    <Stack gap="xs">
       <LoadingOverlay visible={instanceQuery.isLoading} />
       {!pricing && !instanceQuery.isLoading && (
         <Alert color="ref" title={t`Error`}>
diff --git a/src/frontend/src/pages/part/pricing/BomPricingPanel.tsx b/src/frontend/src/pages/part/pricing/BomPricingPanel.tsx
index 64911a9831..b0c9f60392 100644
--- a/src/frontend/src/pages/part/pricing/BomPricingPanel.tsx
+++ b/src/frontend/src/pages/part/pricing/BomPricingPanel.tsx
@@ -149,7 +149,7 @@ export default function BomPricingPanel({
           let units = record.sub_part_detail?.units;
 
           return (
-            <Group spacing="apart" grow>
+            <Group justify="space-between" grow>
               <Text>{quantity}</Text>
               {units && <Text size="xs">[{units}]</Text>}
             </Group>
@@ -214,7 +214,7 @@ export default function BomPricingPanel({
   }, [table.isLoading, bomPricingData.length]);
 
   return (
-    <Stack spacing="xs">
+    <Stack gap="xs">
       <SimpleGrid cols={2}>
         <InvenTreeTable
           tableState={table}
@@ -231,10 +231,10 @@ export default function BomPricingPanel({
             modelField: 'sub_part'
           }}
         />
-        <Stack spacing="xs">
+        <Stack gap="xs">
           {table.isLoading && <LoadingPricingData />}
           {hasData && (
-            <Stack spacing="xs">
+            <Stack gap="xs">
               {chartType == 'bar' && (
                 <BomBarChart
                   data={bomPricingData}
diff --git a/src/frontend/src/pages/part/pricing/PricingOverviewPanel.tsx b/src/frontend/src/pages/part/pricing/PricingOverviewPanel.tsx
index ad2fa2068b..4aa67f844b 100644
--- a/src/frontend/src/pages/part/pricing/PricingOverviewPanel.tsx
+++ b/src/frontend/src/pages/part/pricing/PricingOverviewPanel.tsx
@@ -17,7 +17,7 @@ import {
   IconShoppingCart,
   IconTriangleSquareCircle
 } from '@tabler/icons-react';
-import { DataTable, DataTableColumn } from 'mantine-datatable';
+import { DataTable } from 'mantine-datatable';
 import { ReactNode, useMemo } from 'react';
 import {
   Bar,
@@ -53,7 +53,7 @@ export default function PricingOverviewPanel({
   pricing: any;
   doNavigation: (panel: panelOptions) => void;
 }): ReactNode {
-  const columns: DataTableColumn<any>[] = useMemo(() => {
+  const columns: any[] = useMemo(() => {
     return [
       {
         accessor: 'title',
@@ -61,14 +61,14 @@ export default function PricingOverviewPanel({
         render: (record: PricingOverviewEntry) => {
           const is_link = record.name !== panelOptions.overall;
           return (
-            <Group position="left" spacing="xs">
+            <Group justify="left" gap="xs">
               {record.icon}
               {is_link ? (
-                <Anchor weight={700} onClick={() => doNavigation(record.name)}>
+                <Anchor fw={700} onClick={() => doNavigation(record.name)}>
                   {record.title}
                 </Anchor>
               ) : (
-                <Text weight={700}>{record.title}</Text>
+                <Text fw={700}>{record.title}</Text>
               )}
             </Group>
           );
@@ -176,9 +176,9 @@ export default function PricingOverviewPanel({
   // TODO: Add "update now" button
 
   return (
-    <Stack spacing="xs">
+    <Stack gap="xs">
       <SimpleGrid cols={2}>
-        <Stack spacing="xs">
+        <Stack gap="xs">
           {pricing?.updated && (
             <Paper p="xs">
               <Alert color="blue" title={t`Last Updated`}>
diff --git a/src/frontend/src/pages/part/pricing/PricingPanel.tsx b/src/frontend/src/pages/part/pricing/PricingPanel.tsx
index 81b4781e4e..69a8db211d 100644
--- a/src/frontend/src/pages/part/pricing/PricingPanel.tsx
+++ b/src/frontend/src/pages/part/pricing/PricingPanel.tsx
@@ -19,7 +19,7 @@ import { panelOptions } from '../PartPricingPanel';
 
 function AccordionControl(props: AccordionControlProps) {
   return (
-    <Box sx={{ display: 'flex', alignItems: 'center' }}>
+    <Box style={{ display: 'flex', alignItems: 'center' }}>
       {props.disabled && (
         <Tooltip
           label={t`No data available`}
@@ -62,7 +62,7 @@ export default function PricingPanel({
 
 export function NoPricingData() {
   return (
-    <Stack spacing="xs">
+    <Stack gap="xs">
       <Alert icon={<IconExclamationCircle />} color="blue" title={t`No Data`}>
         <Text>{t`No pricing data available`}</Text>
       </Alert>
@@ -74,7 +74,7 @@ export function NoPricingData() {
 export function LoadingPricingData() {
   return (
     <Center>
-      <Stack spacing="xs">
+      <Stack gap="xs">
         <Text>{t`Loading pricing data`}</Text>
         <Loader />
       </Stack>
diff --git a/src/frontend/src/pages/part/pricing/PurchaseHistoryPanel.tsx b/src/frontend/src/pages/part/pricing/PurchaseHistoryPanel.tsx
index ae88a6d7c4..b13495497e 100644
--- a/src/frontend/src/pages/part/pricing/PurchaseHistoryPanel.tsx
+++ b/src/frontend/src/pages/part/pricing/PurchaseHistoryPanel.tsx
@@ -65,7 +65,7 @@ export default function PurchaseHistoryPanel({
           let units = record.supplier_part_detail?.pack_quantity;
 
           return (
-            <Group position="apart" spacing="xs">
+            <Group justify="space-between" gap="xs">
               <Text>{price}</Text>
               {units && <Text size="xs">[{units}]</Text>}
             </Group>
@@ -86,7 +86,7 @@ export default function PurchaseHistoryPanel({
           let units = record.part_detail?.units;
 
           return (
-            <Group position="apart" spacing="xs">
+            <Group justify="space-between" gap="xs">
               <Text>{price}</Text>
               {units && <Text size="xs">[{units}]</Text>}
             </Group>
diff --git a/src/frontend/src/pages/part/pricing/VariantPricingPanel.tsx b/src/frontend/src/pages/part/pricing/VariantPricingPanel.tsx
index b2af8c0bed..12f21ccd33 100644
--- a/src/frontend/src/pages/part/pricing/VariantPricingPanel.tsx
+++ b/src/frontend/src/pages/part/pricing/VariantPricingPanel.tsx
@@ -81,7 +81,7 @@ export default function VariantPricingPanel({
   }, [table.records]);
 
   return (
-    <Stack spacing="xs">
+    <Stack gap="xs">
       <SimpleGrid cols={2}>
         <InvenTreeTable
           tableState={table}
diff --git a/src/frontend/src/pages/purchasing/PurchaseOrderDetail.tsx b/src/frontend/src/pages/purchasing/PurchaseOrderDetail.tsx
index f579c35f1b..b22314a632 100644
--- a/src/frontend/src/pages/purchasing/PurchaseOrderDetail.tsx
+++ b/src/frontend/src/pages/purchasing/PurchaseOrderDetail.tsx
@@ -343,8 +343,7 @@ export default function PurchaseOrderDetail() {
   return (
     <>
       {editPurchaseOrder.modal}
-      {duplicatePurchaseOrder.modal}
-      <Stack spacing="xs">
+      <Stack gap="xs">
         <LoadingOverlay visible={instanceQuery.isFetching} />
         <PageDetail
           title={t`Purchase Order` + `: ${order.reference}`}
diff --git a/src/frontend/src/pages/sales/ReturnOrderDetail.tsx b/src/frontend/src/pages/sales/ReturnOrderDetail.tsx
index 6dbb253e1a..290683545f 100644
--- a/src/frontend/src/pages/sales/ReturnOrderDetail.tsx
+++ b/src/frontend/src/pages/sales/ReturnOrderDetail.tsx
@@ -305,7 +305,7 @@ export default function ReturnOrderDetail() {
     <>
       {editReturnOrder.modal}
       {duplicateReturnOrder.modal}
-      <Stack spacing="xs">
+      <Stack gap="xs">
         <LoadingOverlay visible={instanceQuery.isFetching} />
         <PageDetail
           title={t`Return Order` + `: ${order.reference}`}
diff --git a/src/frontend/src/pages/sales/SalesOrderDetail.tsx b/src/frontend/src/pages/sales/SalesOrderDetail.tsx
index 99cd6be612..833dbfb11e 100644
--- a/src/frontend/src/pages/sales/SalesOrderDetail.tsx
+++ b/src/frontend/src/pages/sales/SalesOrderDetail.tsx
@@ -327,8 +327,7 @@ export default function SalesOrderDetail() {
   return (
     <>
       {editSalesOrder.modal}
-      {duplicateSalesOrder.modal}
-      <Stack spacing="xs">
+      <Stack gap="xs">
         <LoadingOverlay visible={instanceQuery.isFetching} />
         <PageDetail
           title={t`Sales Order` + `: ${order.reference}`}
diff --git a/src/frontend/src/states/LocalState.tsx b/src/frontend/src/states/LocalState.tsx
index 81d498463d..39d75fc0f3 100644
--- a/src/frontend/src/states/LocalState.tsx
+++ b/src/frontend/src/states/LocalState.tsx
@@ -1,8 +1,7 @@
-import { MantineNumberSize } from '@mantine/core';
-import { LoaderType } from '@mantine/styles/lib/theme/types/MantineTheme';
 import { create } from 'zustand';
 import { persist } from 'zustand/middleware';
 
+import { UiSizeType } from '../defaults/formatters';
 import { HostList } from './states';
 
 interface LocalStateProps {
@@ -19,8 +18,9 @@ interface LocalStateProps {
   primaryColor: string;
   whiteColor: string;
   blackColor: string;
-  radius: MantineNumberSize;
-  loader: LoaderType;
+  radius: UiSizeType;
+  loader: string;
+  setLoader: (value: string) => void;
   lastUsedPanels: Record<string, string>;
   setLastUsedPanel: (panelKey: string) => (value: string) => void;
   tableColumnNames: Record<string, Record<string, string>>;
@@ -57,6 +57,9 @@ export const useLocalState = create<LocalStateProps>()(
       blackColor: '#000',
       radius: 'xs',
       loader: 'oval',
+      setLoader(value) {
+        set({ loader: value });
+      },
       // panels
       lastUsedPanels: {},
       setLastUsedPanel: (panelKey) => (value) => {
diff --git a/src/frontend/src/tables/Column.tsx b/src/frontend/src/tables/Column.tsx
index dbd87a0e7d..ad20497702 100644
--- a/src/frontend/src/tables/Column.tsx
+++ b/src/frontend/src/tables/Column.tsx
@@ -14,7 +14,7 @@ export type TableColumn<T = any> = {
   width?: number; // The width of the column
   noWrap?: boolean; // Whether the column should wrap
   ellipsis?: boolean; // Whether the column should be ellipsized
-  textAlignment?: 'left' | 'center' | 'right'; // The text alignment of the column
+  textAlign?: 'left' | 'center' | 'right'; // The text alignment of the column
   cellsStyle?: any; // The style of the cells in the column
   extra?: any; // Extra data to pass to the render function
 };
diff --git a/src/frontend/src/tables/ColumnRenderers.tsx b/src/frontend/src/tables/ColumnRenderers.tsx
index 4b02224c9a..55108cf4eb 100644
--- a/src/frontend/src/tables/ColumnRenderers.tsx
+++ b/src/frontend/src/tables/ColumnRenderers.tsx
@@ -46,7 +46,9 @@ export function LocationColumn({
       let location = resolveItem(record, accessor);
 
       if (!location) {
-        return <Text italic>{t`No location set`}</Text>;
+        return (
+          <Text style={{ fontStyle: 'italic' }}>{t`No location set`}</Text>
+        );
       }
 
       return <Text>{location.name}</Text>;
diff --git a/src/frontend/src/tables/ColumnSelect.tsx b/src/frontend/src/tables/ColumnSelect.tsx
index bec95cb426..f0d83f8ecd 100644
--- a/src/frontend/src/tables/ColumnSelect.tsx
+++ b/src/frontend/src/tables/ColumnSelect.tsx
@@ -12,7 +12,7 @@ export function TableColumnSelect({
   return (
     <Menu shadow="xs" closeOnItemClick={false}>
       <Menu.Target>
-        <ActionIcon>
+        <ActionIcon variant="transparent">
           <Tooltip label={t`Select Columns`}>
             <IconAdjustments />
           </Tooltip>
diff --git a/src/frontend/src/tables/DownloadAction.tsx b/src/frontend/src/tables/DownloadAction.tsx
index b17df70285..34abdfff7f 100644
--- a/src/frontend/src/tables/DownloadAction.tsx
+++ b/src/frontend/src/tables/DownloadAction.tsx
@@ -17,7 +17,7 @@ export function DownloadAction({
     <>
       <Menu>
         <Menu.Target>
-          <ActionIcon>
+          <ActionIcon variant="transparent">
             <Tooltip label={t`Download selected data`}>
               <IconDownload />
             </Tooltip>
diff --git a/src/frontend/src/tables/Filter.tsx b/src/frontend/src/tables/Filter.tsx
index 4a61f30a12..cf6d7aabe9 100644
--- a/src/frontend/src/tables/Filter.tsx
+++ b/src/frontend/src/tables/Filter.tsx
@@ -20,7 +20,7 @@ export type TableFilterChoice = {
  */
 export type TableFilter = {
   name: string;
-  label?: string;
+  label: string;
   description?: string;
   type?: string;
   choices?: TableFilterChoice[];
diff --git a/src/frontend/src/tables/FilterSelectDrawer.tsx b/src/frontend/src/tables/FilterSelectDrawer.tsx
index 6a558e83fd..b5be497869 100644
--- a/src/frontend/src/tables/FilterSelectDrawer.tsx
+++ b/src/frontend/src/tables/FilterSelectDrawer.tsx
@@ -41,12 +41,12 @@ function FilterItem({
 
   return (
     <Paper p="sm" shadow="sm" radius="xs">
-      <Group position="apart" key={flt.name}>
-        <Stack spacing="xs">
+      <Group justify="space-between" key={flt.name}>
+        <Stack gap="xs">
           <Text size="sm">{flt.label}</Text>
           <Text size="xs">{flt.description}</Text>
         </Stack>
-        <Group position="right">
+        <Group justify="right">
           <Badge>{flt.displayValue ?? flt.value}</Badge>
           <Tooltip label={t`Remove filter`} withinPortal={true}>
             <CloseButton size="md" color="red" onClick={removeFilter} />
@@ -138,11 +138,11 @@ function FilterAddGroup({
   );
 
   return (
-    <Stack spacing="xs">
+    <Stack gap="xs">
       <Divider />
       <Select
         data={filterOptions}
-        itemComponent={FilterSelectItem}
+        component={FilterSelectItem}
         searchable={true}
         placeholder={t`Select filter`}
         label={t`Filter`}
@@ -195,14 +195,14 @@ export function FilterSelectDrawer({
       onClose={onClose}
       title={<StylishText size="lg">{t`Table Filters`}</StylishText>}
     >
-      <Stack spacing="xs">
+      <Stack gap="xs">
         {hasFilters &&
           tableState.activeFilters?.map((f) => (
             <FilterItem key={f.name} flt={f} tableState={tableState} />
           ))}
         {hasFilters && <Divider />}
         {addFilter && (
-          <Stack spacing="xs">
+          <Stack gap="xs">
             <FilterAddGroup
               tableState={tableState}
               availableFilters={availableFilters}
diff --git a/src/frontend/src/tables/InvenTreeTable.tsx b/src/frontend/src/tables/InvenTreeTable.tsx
index 41c37e53e1..4a36cb62a5 100644
--- a/src/frontend/src/tables/InvenTreeTable.tsx
+++ b/src/frontend/src/tables/InvenTreeTable.tsx
@@ -525,7 +525,7 @@ export function InvenTreeTable<T = any>({
 
   // Callback when a row is clicked
   const handleRowClick = useCallback(
-    (record: any, index: number, event: any) => {
+    ({ event, record, index }: { event: any; record: any; index: number }) => {
       if (props.onRowClick) {
         // If a custom row click handler is provided, use that
         props.onRowClick(record, index, event);
@@ -563,9 +563,9 @@ export function InvenTreeTable<T = any>({
         />
       )}
       <Boundary label="inventreetable">
-        <Stack spacing="sm">
-          <Group position="apart">
-            <Group position="left" key="custom-actions" spacing={5}>
+        <Stack gap="sm">
+          <Group justify="space-between">
+            <Group justify="left" key="custom-actions" gap={5}>
               {tableProps.tableActions?.map((group, idx) => (
                 <Fragment key={idx}>{group}</Fragment>
               ))}
@@ -598,7 +598,7 @@ export function InvenTreeTable<T = any>({
               )}
             </Group>
             <Space />
-            <Group position="right" spacing={5}>
+            <Group justify="right" gap={5}>
               {tableProps.enableSearch && (
                 <TableSearchInput
                   searchCallback={(term: string) =>
@@ -607,7 +607,7 @@ export function InvenTreeTable<T = any>({
                 />
               )}
               {tableProps.enableRefresh && (
-                <ActionIcon>
+                <ActionIcon variant="transparent">
                   <Tooltip label={t`Refresh data`}>
                     <IconRefresh onClick={() => refetch()} />
                   </Tooltip>
@@ -625,7 +625,7 @@ export function InvenTreeTable<T = any>({
                   label={tableState.activeFilters?.length ?? 0}
                   disabled={tableState.activeFilters?.length == 0}
                 >
-                  <ActionIcon>
+                  <ActionIcon variant="transparent">
                     <Tooltip label={t`Table filters`}>
                       <IconFilter
                         onClick={() => setFiltersVisible(!filtersVisible)}
@@ -650,10 +650,10 @@ export function InvenTreeTable<T = any>({
             />
 
             <DataTable
-              withBorder
+              withTableBorder
               striped
               highlightOnHover
-              loaderVariant="dots"
+              loaderType="dots"
               pinLastColumn={tableProps.rowActions != undefined}
               idAccessor={tableProps.idAccessor}
               minHeight={300}
@@ -681,11 +681,11 @@ export function InvenTreeTable<T = any>({
               onCellClick={tableProps.onCellClick}
               defaultColumnProps={{
                 noWrap: true,
-                textAlignment: 'left',
-                cellsStyle: {
+                textAlign: 'left',
+                cellsStyle: () => (theme) => ({
                   // TODO @SchrodingersGat : Need a better way of handling "wide" cells,
                   overflow: 'hidden'
-                }
+                })
               }}
             />
           </Box>
diff --git a/src/frontend/src/tables/RowActions.tsx b/src/frontend/src/tables/RowActions.tsx
index bef25f1f10..a30eb5bedd 100644
--- a/src/frontend/src/tables/RowActions.tsx
+++ b/src/frontend/src/tables/RowActions.tsx
@@ -113,7 +113,7 @@ export function RowActions({
       >
         <Menu.Item
           color={action.color}
-          icon={action.icon}
+          leftSection={action.icon}
           onClick={(event) => {
             // Prevent clicking on the action from selecting the row itself
             cancelEvent(event);
diff --git a/src/frontend/src/tables/Search.tsx b/src/frontend/src/tables/Search.tsx
index d3f3b9cd9c..33d6ac1fee 100644
--- a/src/frontend/src/tables/Search.tsx
+++ b/src/frontend/src/tables/Search.tsx
@@ -19,7 +19,7 @@ export function TableSearchInput({
   return (
     <TextInput
       value={value}
-      icon={<IconSearch />}
+      leftSection={<IconSearch />}
       placeholder={t`Search`}
       onChange={(event) => setValue(event.target.value)}
       rightSection={
diff --git a/src/frontend/src/tables/TableHoverCard.tsx b/src/frontend/src/tables/TableHoverCard.tsx
index 93893ab834..fa7513067e 100644
--- a/src/frontend/src/tables/TableHoverCard.tsx
+++ b/src/frontend/src/tables/TableHoverCard.tsx
@@ -29,16 +29,16 @@ export function TableHoverCard({
   return (
     <HoverCard withinPortal={true} closeDelay={20} openDelay={250}>
       <HoverCard.Target>
-        <Group spacing="xs" position="apart" noWrap={true}>
+        <Group gap="xs" justify="space-between" wrap="nowrap">
           {value}
           <IconInfoCircle size="16" color="blue" />
         </Group>
       </HoverCard.Target>
       <HoverCard.Dropdown>
-        <Stack spacing="xs">
-          <Group spacing="xs" position="left">
+        <Stack gap="xs">
+          <Group gap="xs" justify="left">
             <IconInfoCircle size="16" color="blue" />
-            <Text weight="bold">{title}</Text>
+            <Text fw="bold">{title}</Text>
           </Group>
           <Divider />
           {extra}
diff --git a/src/frontend/src/tables/bom/BomTable.tsx b/src/frontend/src/tables/bom/BomTable.tsx
index 41b358318a..b90895a1e8 100644
--- a/src/frontend/src/tables/bom/BomTable.tsx
+++ b/src/frontend/src/tables/bom/BomTable.tsx
@@ -109,7 +109,7 @@ export function BomTable({
           let units = record.sub_part_detail?.units;
 
           return (
-            <Group position="apart" grow>
+            <Group justify="space-between" grow>
               <Text>{quantity}</Text>
               {record.overage && <Text size="xs">+{record.overage}</Text>}
               {units && <Text size="xs">{units}</Text>}
@@ -174,7 +174,7 @@ export function BomTable({
 
           let text =
             available_stock <= 0 ? (
-              <Text color="red" italic>{t`No stock`}</Text>
+              <Text c="red" style={{ fontStyle: 'italic' }}>{t`No stock`}</Text>
             ) : (
               available_stock
             );
@@ -235,14 +235,16 @@ export function BomTable({
         sortable: false, // TODO: Custom sorting via API
         render: (record: any) => {
           if (record.consumable) {
-            return <Text italic>{t`Consumable item`}</Text>;
+            return (
+              <Text style={{ fontStyle: 'italic' }}>{t`Consumable item`}</Text>
+            );
           }
 
           let can_build = availableStockQuantity(record) / record.quantity;
           can_build = Math.trunc(can_build);
 
           return (
-            <Text color={can_build <= 0 ? 'red' : undefined}>{can_build}</Text>
+            <Text c={can_build <= 0 ? 'red' : undefined}>{can_build}</Text>
           );
         }
       },
@@ -264,26 +266,32 @@ export function BomTable({
       },
       {
         name: 'available_stock',
+        label: t`Available Stock`,
         description: t`Show items with available stock`
       },
       {
         name: 'on_order',
+        label: t`On Order`,
         description: t`Show items on order`
       },
       {
         name: 'validated',
+        label: t`Validated`,
         description: t`Show validated items`
       },
       {
         name: 'inherited',
+        label: t`Inherited`,
         description: t`Show inherited items`
       },
       {
         name: 'optional',
+        label: t`Optional`,
         description: t`Show optional items`
       },
       {
         name: 'consumable',
+        label: t`Consumable`,
         description: t`Show consumable items`
       },
       {
diff --git a/src/frontend/src/tables/bom/UsedInTable.tsx b/src/frontend/src/tables/bom/UsedInTable.tsx
index 69da8b651b..ef9c050807 100644
--- a/src/frontend/src/tables/bom/UsedInTable.tsx
+++ b/src/frontend/src/tables/bom/UsedInTable.tsx
@@ -45,7 +45,7 @@ export function UsedInTable({
           let units = record.sub_part_detail?.units;
 
           return (
-            <Group position="apart" grow>
+            <Group justify="space-between" grow>
               <Text>{quantity}</Text>
               {units && <Text size="xs">{units}</Text>}
             </Group>
@@ -60,10 +60,12 @@ export function UsedInTable({
     return [
       {
         name: 'inherited',
+        label: t`Inherited`,
         description: t`Show inherited items`
       },
       {
         name: 'optional',
+        label: t`Optional`,
         description: t`Show optional items`
       },
       {
diff --git a/src/frontend/src/tables/build/BuildLineTable.tsx b/src/frontend/src/tables/build/BuildLineTable.tsx
index 7ed7d4367c..3e337aae70 100644
--- a/src/frontend/src/tables/build/BuildLineTable.tsx
+++ b/src/frontend/src/tables/build/BuildLineTable.tsx
@@ -28,6 +28,7 @@ export default function BuildLineTable({ params = {} }: { params?: any }) {
     return [
       {
         name: 'allocated',
+        label: t`Allocated`,
         description: t`Show allocated lines`
       },
       {
@@ -111,7 +112,10 @@ export default function BuildLineTable({ params = {} }: { params?: any }) {
           available > 0 ? (
             available
           ) : (
-            <Text color="red" italic>{t`No stock available`}</Text>
+            <Text
+              c="red"
+              style={{ fontStyle: 'italic' }}
+            >{t`No stock available`}</Text>
           )
         }
         title={t`Available Stock`}
@@ -154,7 +158,7 @@ export default function BuildLineTable({ params = {} }: { params?: any }) {
         ordering: 'unit_quantity',
         render: (record: any) => {
           return (
-            <Group position="apart">
+            <Group justify="space-between">
               <Text>{record.bom_item_detail?.quantity}</Text>
               {record?.part_detail?.units && (
                 <Text size="xs">[{record.part_detail.units}]</Text>
@@ -168,7 +172,7 @@ export default function BuildLineTable({ params = {} }: { params?: any }) {
         sortable: true,
         render: (record: any) => {
           return (
-            <Group position="apart">
+            <Group justify="space-between">
               <Text>{record.quantity}</Text>
               {record?.part_detail?.units && (
                 <Text size="xs">[{record.part_detail.units}]</Text>
@@ -188,7 +192,7 @@ export default function BuildLineTable({ params = {} }: { params?: any }) {
         switchable: false,
         render: (record: any) => {
           return record?.bom_item_detail?.consumable ? (
-            <Text italic>{t`Consumable item`}</Text>
+            <Text style={{ fontStyle: 'italic' }}>{t`Consumable item`}</Text>
           ) : (
             <ProgressBar
               progressLabel={true}
diff --git a/src/frontend/src/tables/build/BuildOrderTable.tsx b/src/frontend/src/tables/build/BuildOrderTable.tsx
index 5857761554..707b55c164 100644
--- a/src/frontend/src/tables/build/BuildOrderTable.tsx
+++ b/src/frontend/src/tables/build/BuildOrderTable.tsx
@@ -110,11 +110,13 @@ export function BuildOrderTable({
       },
       {
         name: 'status',
+        label: t`Status`,
         description: t`Filter by order status`,
         choiceFunction: StatusFilterOptions(ModelType.build)
       },
       {
         name: 'overdue',
+        label: t`Overdue`,
         type: 'boolean',
         description: t`Show overdue status`
       },
diff --git a/src/frontend/src/tables/build/BuildOutputTable.tsx b/src/frontend/src/tables/build/BuildOutputTable.tsx
index 4e4b567f59..8b1ec7b99c 100644
--- a/src/frontend/src/tables/build/BuildOutputTable.tsx
+++ b/src/frontend/src/tables/build/BuildOutputTable.tsx
@@ -257,10 +257,10 @@ export default function BuildOutputTable({ build }: { build: any }) {
           }
 
           return (
-            <Group position="left" noWrap>
+            <Group justify="left" wrap="nowrap">
               <Text>{text}</Text>
               {record.batch && (
-                <Text italic size="sm">
+                <Text style={{ fontStyle: 'italic' }} size="sm">
                   {t`Batch`}: {record.batch}
                 </Text>
               )}
@@ -292,7 +292,7 @@ export default function BuildOutputTable({ build }: { build: any }) {
             record.results?.map((result: TestResultOverview) => {
               return (
                 result && (
-                  <Group position="left" key={result.name} noWrap>
+                  <Group justify="left" key={result.name} wrap="nowrap">
                     {result.result ? (
                       <IconCircleCheck color="green" />
                     ) : (
diff --git a/src/frontend/src/tables/company/CompanyTable.tsx b/src/frontend/src/tables/company/CompanyTable.tsx
index 0b99c22da4..bcff8a77dc 100644
--- a/src/frontend/src/tables/company/CompanyTable.tsx
+++ b/src/frontend/src/tables/company/CompanyTable.tsx
@@ -44,7 +44,7 @@ export function CompanyTable({
         sortable: true,
         render: (record: any) => {
           return (
-            <Group spacing="xs" noWrap={true}>
+            <Group gap="xs" wrap="nowrap">
               <Thumbnail
                 src={record.thumbnail ?? record.image ?? ''}
                 alt={record.name}
diff --git a/src/frontend/src/tables/general/AttachmentTable.tsx b/src/frontend/src/tables/general/AttachmentTable.tsx
index 19722bc1b6..1a3a68f576 100644
--- a/src/frontend/src/tables/general/AttachmentTable.tsx
+++ b/src/frontend/src/tables/general/AttachmentTable.tsx
@@ -53,7 +53,7 @@ function attachmentTableColumns(): TableColumn[] {
 
       render: function (record: any) {
         return (
-          <Group position="apart">
+          <Group justify="space-between">
             <Text>{record.upload_date}</Text>
             {record.user_detail && (
               <Badge size="xs">{record.user_detail.username}</Badge>
@@ -196,6 +196,7 @@ export function AttachmentTable({
                 callback: table.refreshTable
               });
             }}
+            variant="transparent"
           >
             <IconFileUpload />
           </ActionIcon>
@@ -215,6 +216,7 @@ export function AttachmentTable({
                 callback: table.refreshTable
               });
             }}
+            variant="transparent"
           >
             <IconExternalLink />
           </ActionIcon>
@@ -226,7 +228,7 @@ export function AttachmentTable({
   }, [allowEdit]);
 
   return (
-    <Stack spacing="xs">
+    <Stack gap="xs">
       {pk && pk > 0 && (
         <InvenTreeTable
           key="attachment-table"
@@ -247,7 +249,7 @@ export function AttachmentTable({
       {allowEdit && validPk && (
         <Dropzone onDrop={uploadFiles} key="attachment-dropzone">
           <Dropzone.Idle>
-            <Group position="center">
+            <Group justify="center">
               <IconFileUpload size={24} />
               <Text size="sm">{t`Upload attachment`}</Text>
             </Group>
diff --git a/src/frontend/src/tables/machine/MachineListTable.tsx b/src/frontend/src/tables/machine/MachineListTable.tsx
index f021197400..b2b4503ea9 100644
--- a/src/frontend/src/tables/machine/MachineListTable.tsx
+++ b/src/frontend/src/tables/machine/MachineListTable.tsx
@@ -66,12 +66,12 @@ interface MachineI {
 }
 
 function MachineStatusIndicator({ machine }: { machine: MachineI }) {
-  const sx = { marginLeft: '4px' };
+  const style = { marginLeft: '4px' };
 
   // machine is not active, show a gray dot
   if (!machine.active) {
     return (
-      <Indicator sx={sx} color="gray">
+      <Indicator style={style} color="gray">
         <Box></Box>
       </Indicator>
     );
@@ -90,7 +90,7 @@ function MachineStatusIndicator({ machine }: { machine: MachineI }) {
     machine.initialized && machine.status > 0 && machine.status < 300;
 
   return (
-    <Indicator processing={processing} sx={sx} color={color}>
+    <Indicator processing={processing} style={style} color={color}>
       <Box></Box>
     </Indicator>
   );
@@ -206,8 +206,8 @@ function MachineDrawer({
   );
 
   return (
-    <Stack spacing="xs">
-      <Group position="apart">
+    <Stack gap="xs">
+      <Group justify="space-between">
         <Box></Box>
 
         <Group>
@@ -277,8 +277,8 @@ function MachineDrawer({
       </Group>
 
       <Card withBorder>
-        <Stack spacing="md">
-          <Group position="apart">
+        <Stack gap="md">
+          <Group justify="space-between">
             <Title order={4}>
               <Trans>Machine information</Trans>
             </Title>
@@ -286,10 +286,13 @@ function MachineDrawer({
               <IconRefresh />
             </ActionIcon>
           </Group>
-          <Stack pos="relative" spacing="xs">
-            <LoadingOverlay visible={isFetching} overlayOpacity={0} />
+          <Stack pos="relative" gap="xs">
+            <LoadingOverlay
+              visible={isFetching}
+              overlayProps={{ opacity: 0 }}
+            />
             <InfoItem name={t`Machine Type`}>
-              <Group spacing="xs">
+              <Group gap="xs">
                 {machineType ? (
                   <DetailDrawerLink
                     to={`../type-${machine?.machine_type}`}
@@ -302,7 +305,7 @@ function MachineDrawer({
               </Group>
             </InfoItem>
             <InfoItem name={t`Machine Driver`}>
-              <Group spacing="xs">
+              <Group gap="xs">
                 {machineDriver ? (
                   <DetailDrawerLink
                     to={`../driver-${machine?.driver}`}
@@ -333,12 +336,12 @@ function MachineDrawer({
                 <Text fz="sm">{machine?.status_text}</Text>
               </Flex>
             </InfoItem>
-            <Group position="apart" spacing="xs">
+            <Group justify="space-between" gap="xs">
               <Text fz="sm" fw={700}>
                 <Trans>Errors</Trans>:
               </Text>
               {machine && machine?.machine_errors.length > 0 ? (
-                <Badge color="red" sx={{ marginLeft: '10px' }}>
+                <Badge color="red" style={{ marginLeft: '10px' }}>
                   {machine?.machine_errors.length}
                 </Badge>
               ) : (
@@ -412,7 +415,7 @@ export function MachineListTable({
         sortable: true,
         render: function (record) {
           return (
-            <Group position="left" noWrap>
+            <Group justify="left" wrap="nowrap">
               <MachineStatusIndicator machine={record} />
               <Text>{record.name}</Text>
               {record.restart_required && (
@@ -432,7 +435,7 @@ export function MachineListTable({
             (m) => m.slug === record.machine_type
           );
           return (
-            <Group spacing="xs">
+            <Group gap="xs">
               <Text>
                 {machineType ? machineType.name : record.machine_type}
               </Text>
@@ -447,7 +450,7 @@ export function MachineListTable({
         render: (record) => {
           const driver = machineDrivers?.find((d) => d.slug === record.driver);
           return (
-            <Group spacing="xs">
+            <Group gap="xs">
               <Text>{driver ? driver.name : record.driver}</Text>
               {!record.is_driver_available && <UnavailableIndicator />}
             </Group>
@@ -579,10 +582,12 @@ export function MachineListTable({
           tableFilters: [
             {
               name: 'active',
+              label: t`Active`,
               type: 'boolean'
             },
             {
               name: 'machine_type',
+              label: t`Machine Type`,
               type: 'choice',
               choiceFunction: () =>
                 machineTypes
@@ -591,6 +596,7 @@ export function MachineListTable({
             },
             {
               name: 'driver',
+              label: t`Driver`,
               type: 'choice',
               choiceFunction: () =>
                 machineDrivers
diff --git a/src/frontend/src/tables/machine/MachineTypeTable.tsx b/src/frontend/src/tables/machine/MachineTypeTable.tsx
index 6e9e7cd5e3..08906a413c 100644
--- a/src/frontend/src/tables/machine/MachineTypeTable.tsx
+++ b/src/frontend/src/tables/machine/MachineTypeTable.tsx
@@ -78,21 +78,21 @@ function MachineTypeDrawer({ machineTypeSlug }: { machineTypeSlug: string }) {
 
   return (
     <Stack>
-      <Group position="center">
+      <Group justify="center">
         <Title order={4}>
           {machineType ? machineType.name : machineTypeSlug}
         </Title>
       </Group>
 
       {!machineType && (
-        <Text italic>
+        <Text style={{ fontStyle: 'italic' }}>
           <Trans>Machine type not found.</Trans>
         </Text>
       )}
 
       <Card withBorder>
-        <Stack spacing="md">
-          <Group position="apart">
+        <Stack gap="md">
+          <Group justify="space-between">
             <Title order={4}>
               <Trans>Machine type information</Trans>
             </Title>
@@ -101,8 +101,11 @@ function MachineTypeDrawer({ machineTypeSlug }: { machineTypeSlug: string }) {
             </ActionIcon>
           </Group>
 
-          <Stack pos="relative" spacing="xs">
-            <LoadingOverlay visible={isFetching} overlayOpacity={0} />
+          <Stack pos="relative" gap="xs">
+            <LoadingOverlay
+              visible={isFetching}
+              overlayProps={{ opacity: 0 }}
+            />
             <InfoItem name={t`Name`} value={machineType?.name} type="text" />
             <InfoItem name={t`Slug`} value={machineType?.slug} type="text" />
             <InfoItem
@@ -138,7 +141,7 @@ function MachineTypeDrawer({ machineTypeSlug }: { machineTypeSlug: string }) {
       </Card>
 
       <Card withBorder>
-        <Stack spacing="md">
+        <Stack gap="md">
           <Title order={4}>
             <Trans>Available drivers</Trans>
           </Title>
@@ -182,21 +185,21 @@ function MachineDriverDrawer({
 
   return (
     <Stack>
-      <Group position="center">
+      <Group justify="center">
         <Title order={4}>
           {machineDriver ? machineDriver.name : machineDriverSlug}
         </Title>
       </Group>
 
       {!machineDriver && (
-        <Text italic>
+        <Text style={{ fontStyle: 'italic' }}>
           <Trans>Machine driver not found.</Trans>
         </Text>
       )}
 
       <Card withBorder>
-        <Stack spacing="md">
-          <Group position="apart">
+        <Stack gap="md">
+          <Group justify="space-between">
             <Title order={4}>
               <Trans>Machine driver information</Trans>
             </Title>
@@ -205,8 +208,11 @@ function MachineDriverDrawer({
             </ActionIcon>
           </Group>
 
-          <Stack pos="relative" spacing="xs">
-            <LoadingOverlay visible={isFetching} overlayOpacity={0} />
+          <Stack pos="relative" gap="xs">
+            <LoadingOverlay
+              visible={isFetching}
+              overlayProps={{ opacity: 0 }}
+            />
             <InfoItem name={t`Name`} value={machineDriver?.name} type="text" />
             <InfoItem name={t`Slug`} value={machineDriver?.slug} type="text" />
             <InfoItem
@@ -250,12 +256,12 @@ function MachineDriverDrawer({
               value={machineDriver?.is_builtin}
               type="boolean"
             />
-            <Group position="apart" spacing="xs">
+            <Group justify="space-between" gap="xs">
               <Text fz="sm" fw={700}>
                 <Trans>Errors</Trans>:
               </Text>
               {machineDriver && machineDriver?.driver_errors.length > 0 ? (
-                <Badge color="red" sx={{ marginLeft: '10px' }}>
+                <Badge color="red" style={{ marginLeft: '10px' }}>
                   {machineDriver.driver_errors.length}
                 </Badge>
               ) : (
@@ -276,7 +282,7 @@ function MachineDriverDrawer({
       </Card>
 
       <Card withBorder>
-        <Stack spacing="md">
+        <Stack gap="md">
           <Title order={4}>
             <Trans>Machines</Trans>
           </Title>
diff --git a/src/frontend/src/tables/part/ParametricPartTable.tsx b/src/frontend/src/tables/part/ParametricPartTable.tsx
index 9e9f276a94..378b572991 100644
--- a/src/frontend/src/tables/part/ParametricPartTable.tsx
+++ b/src/frontend/src/tables/part/ParametricPartTable.tsx
@@ -67,7 +67,7 @@ function ParameterCell({
 
   return (
     <div>
-      <Group grow ref={ref} position="apart">
+      <Group grow ref={ref} justify="space-between">
         <Group grow style={{ flex: 1 }}>
           <TableHoverCard
             value={value ?? '-'}
@@ -78,7 +78,7 @@ function ParameterCell({
         {hovered && canEdit && (
           <div style={{ flex: 0 }}>
             <Tooltip label={t`Edit parameter`}>
-              <ActionIcon size="xs" onClick={handleClick}>
+              <ActionIcon size="xs" onClick={handleClick} variant="transparent">
                 <IconEdit />
               </ActionIcon>
             </Tooltip>
diff --git a/src/frontend/src/tables/part/PartCategoryTemplateTable.tsx b/src/frontend/src/tables/part/PartCategoryTemplateTable.tsx
index 34e7983ee7..6a262fd4d3 100644
--- a/src/frontend/src/tables/part/PartCategoryTemplateTable.tsx
+++ b/src/frontend/src/tables/part/PartCategoryTemplateTable.tsx
@@ -93,7 +93,7 @@ export default function PartCategoryTemplateTable({}: {}) {
           }
 
           return (
-            <Group position="apart" grow>
+            <Group justify="space-between" grow>
               <Text>{record.default_value}</Text>
               {units && <Text size="xs">{units}</Text>}
             </Group>
diff --git a/src/frontend/src/tables/part/PartParameterTable.tsx b/src/frontend/src/tables/part/PartParameterTable.tsx
index 79f514686a..65c3740812 100644
--- a/src/frontend/src/tables/part/PartParameterTable.tsx
+++ b/src/frontend/src/tables/part/PartParameterTable.tsx
@@ -49,7 +49,11 @@ export function PartParameterTable({ partId }: { partId: any }) {
         render: (record) => {
           let variant = String(partId) != String(record.part);
 
-          return <Text italic={variant}>{record.template_detail?.name}</Text>;
+          return (
+            <Text style={{ fontStyle: variant ? 'italic' : 'inherit' }}>
+              {record.template_detail?.name}
+            </Text>
+          );
         }
       },
       DescriptionColumn({
diff --git a/src/frontend/src/tables/part/PartTable.tsx b/src/frontend/src/tables/part/PartTable.tsx
index 0c2151527b..eb073e9763 100644
--- a/src/frontend/src/tables/part/PartTable.tsx
+++ b/src/frontend/src/tables/part/PartTable.tsx
@@ -131,8 +131,8 @@ function partTableColumns(): TableColumn[] {
         return (
           <TableHoverCard
             value={
-              <Group spacing="xs" position="left" noWrap>
-                <Text color={color}>{text}</Text>
+              <Group gap="xs" justify="left" wrap="nowrap">
+                <Text c={color}>{text}</Text>
                 {record.units && (
                   <Text size="xs" color={color}>
                     [{record.units}]
diff --git a/src/frontend/src/tables/part/PartTestTemplateTable.tsx b/src/frontend/src/tables/part/PartTestTemplateTable.tsx
index 411dca9e60..f96fda50b0 100644
--- a/src/frontend/src/tables/part/PartTestTemplateTable.tsx
+++ b/src/frontend/src/tables/part/PartTestTemplateTable.tsx
@@ -37,8 +37,8 @@ export default function PartTestTemplateTable({ partId }: { partId: number }) {
         render: (record: any) => {
           return (
             <Text
-              weight={record.required && 700}
-              color={record.enabled ? undefined : 'red'}
+              fw={record.required && 700}
+              c={record.enabled ? undefined : 'red'}
             >
               {record.test_name}
             </Text>
@@ -76,18 +76,22 @@ export default function PartTestTemplateTable({ partId }: { partId: number }) {
     return [
       {
         name: 'required',
+        label: t`Required`,
         description: t`Show required tests`
       },
       {
         name: 'enabled',
+        label: t`Enabled`,
         description: t`Show enabled tests`
       },
       {
         name: 'requires_value',
+        label: t`Requires Value`,
         description: t`Show tests that require a value`
       },
       {
         name: 'requires_attachment',
+        label: t`Requires Attachment`,
         description: t`Show tests that require an attachment`
       },
       {
diff --git a/src/frontend/src/tables/part/PartThumbTable.tsx b/src/frontend/src/tables/part/PartThumbTable.tsx
index 5bdeffec54..3862ab66a0 100644
--- a/src/frontend/src/tables/part/PartThumbTable.tsx
+++ b/src/frontend/src/tables/part/PartThumbTable.tsx
@@ -189,7 +189,7 @@ export function PartThumbTable({
 
       <Divider />
       <Paper p="sm">
-        <Group position="apart">
+        <Group justify="space-between">
           <TextInput
             placeholder={t`Search...`}
             onChange={(event) => {
diff --git a/src/frontend/src/tables/part/RelatedPartTable.tsx b/src/frontend/src/tables/part/RelatedPartTable.tsx
index 2051df1f22..fc082a4a0b 100644
--- a/src/frontend/src/tables/part/RelatedPartTable.tsx
+++ b/src/frontend/src/tables/part/RelatedPartTable.tsx
@@ -47,8 +47,8 @@ export function RelatedPartTable({ partId }: { partId: number }): ReactNode {
           let part = getPart(record);
           return (
             <Group
-              noWrap={true}
-              position="left"
+              wrap="nowrap"
+              justify="left"
               onClick={() => {
                 navigate(`/part/${part.pk}/`);
               }}
diff --git a/src/frontend/src/tables/plugin/PluginListTable.tsx b/src/frontend/src/tables/plugin/PluginListTable.tsx
index ac65a6385a..6112d95017 100644
--- a/src/frontend/src/tables/plugin/PluginListTable.tsx
+++ b/src/frontend/src/tables/plugin/PluginListTable.tsx
@@ -119,11 +119,11 @@ export function PluginDrawer({
   }
 
   return (
-    <Stack spacing={'xs'}>
-      <Group position="apart">
+    <Stack gap={'xs'}>
+      <Group justify="space-between">
         <Box></Box>
 
-        <Group spacing={'xs'}>
+        <Group gap={'xs'}>
           {plugin && PluginIcon(plugin)}
           <Title order={4}>
             {plugin?.meta?.human_name ?? plugin?.name ?? '-'}
@@ -158,14 +158,14 @@ export function PluginDrawer({
         />
       </Group>
 
-      <LoadingOverlay visible={isFetching} overlayOpacity={0} />
+      <LoadingOverlay visible={isFetching} overlayProps={{ opacity: 0 }} />
 
       <Card withBorder>
-        <Stack spacing="md">
+        <Stack gap="md">
           <Title order={4}>
             <Trans>Plugin information</Trans>
           </Title>
-          <Stack pos="relative" spacing="xs">
+          <Stack pos="relative" gap="xs">
             <InfoItem type="text" name={t`Name`} value={plugin?.name} />
             <InfoItem
               type="text"
@@ -193,11 +193,11 @@ export function PluginDrawer({
       </Card>
 
       <Card withBorder>
-        <Stack spacing="md">
+        <Stack gap="md">
           <Title order={4}>
             <Trans>Package information</Trans>
           </Title>
-          <Stack pos="relative" spacing="xs">
+          <Stack pos="relative" gap="xs">
             {plugin?.is_package && (
               <InfoItem
                 type="text"
@@ -226,7 +226,7 @@ export function PluginDrawer({
 
       {plugin && plugin.active && (
         <Card withBorder>
-          <Stack spacing="md">
+          <Stack gap="md">
             <Title order={4}>
               <Trans>Plugin settings</Trans>
             </Title>
@@ -290,7 +290,7 @@ export default function PluginListTable() {
           // TODO: Add link to plugin detail page
           // TODO: Add custom badges
           return (
-            <Group position="left">
+            <Group justify="left">
               <PluginIcon {...record} />
               <Text>{record.name}</Text>
             </Group>
@@ -304,9 +304,13 @@ export default function PluginListTable() {
 
         render: function (record: any) {
           if (record.active) {
-            return record.meta.description;
+            return record?.meta.description;
           } else {
-            return <Text italic>{t`Description not available`}</Text>;
+            return (
+              <Text
+                style={{ fontStyle: 'italic' }}
+              >{t`Description not available`}</Text>
+            );
           }
         }
       },
@@ -344,14 +348,14 @@ export default function PluginListTable() {
                 : t`Confirm plugin deactivation`
             }
           >
-            <Stack spacing="xs">
+            <Stack gap="xs">
               <Text>
                 {active
                   ? t`The following plugin will be activated`
                   : t`The following plugin will be deactivated`}
                 :
               </Text>
-              <Text size="lg" italic>
+              <Text size="lg" style={{ fontStyle: 'italic' }}>
                 {plugin_name}
               </Text>
             </Stack>
@@ -532,7 +536,7 @@ export default function PluginListTable() {
         icon={<IconInfoCircle />}
         title={t`Confirm plugin uninstall`}
       >
-        <Stack spacing="xs">
+        <Stack gap="xs">
           <Text>{t`The selected plugin will be uninstalled.`}</Text>
           <Text>{t`This action cannot be undone.`}</Text>
         </Stack>
diff --git a/src/frontend/src/tables/purchasing/SupplierPriceBreakTable.tsx b/src/frontend/src/tables/purchasing/SupplierPriceBreakTable.tsx
index b5dcd14cbd..d2d0950ce7 100644
--- a/src/frontend/src/tables/purchasing/SupplierPriceBreakTable.tsx
+++ b/src/frontend/src/tables/purchasing/SupplierPriceBreakTable.tsx
@@ -38,7 +38,7 @@ export function SupplierPriceBreakColumns(): TableColumn[] {
       switchable: true,
       render: (record: any) => {
         return (
-          <Group spacing="xs" noWrap>
+          <Group gap="xs" wrap="nowrap">
             <Thumbnail
               src={
                 record?.supplier_detail?.thumbnail ??
@@ -96,7 +96,7 @@ export function SupplierPriceBreakColumns(): TableColumn[] {
         });
 
         return (
-          <Group position="apart" spacing="xs" grow>
+          <Group justify="space-between" gap="xs" grow>
             <Text>{price}</Text>
             {units && <Text size="xs">[{units}]</Text>}
           </Group>
diff --git a/src/frontend/src/tables/settings/ScheduledTasksTable.tsx b/src/frontend/src/tables/settings/ScheduledTasksTable.tsx
index a6701c5123..9859706dda 100644
--- a/src/frontend/src/tables/settings/ScheduledTasksTable.tsx
+++ b/src/frontend/src/tables/settings/ScheduledTasksTable.tsx
@@ -31,7 +31,7 @@ export default function ScheduledTasksTable() {
           }
 
           return (
-            <Group position="apart">
+            <Group justify="space-between">
               <Text>{record.last_run}</Text>
               {record.success ? (
                 <IconCircleCheck color="green" />
diff --git a/src/frontend/src/tables/settings/TemplateTable.tsx b/src/frontend/src/tables/settings/TemplateTable.tsx
index b4caf9cb92..e1928430ad 100644
--- a/src/frontend/src/tables/settings/TemplateTable.tsx
+++ b/src/frontend/src/tables/settings/TemplateTable.tsx
@@ -130,11 +130,11 @@ export function TemplateDrawer({
   }
 
   return (
-    <Stack spacing="xs" style={{ display: 'flex', flex: '1' }}>
+    <Stack gap="xs" style={{ display: 'flex', flex: '1' }}>
       {editTemplate.modal}
       {deleteTemplate.modal}
 
-      <Group position="apart">
+      <Group justify="space-between">
         <Box></Box>
 
         <Group>
diff --git a/src/frontend/src/tables/stock/StockItemTable.tsx b/src/frontend/src/tables/stock/StockItemTable.tsx
index 19a22112b2..2620c07195 100644
--- a/src/frontend/src/tables/stock/StockItemTable.tsx
+++ b/src/frontend/src/tables/stock/StockItemTable.tsx
@@ -193,8 +193,8 @@ function stockItemTableColumns(): TableColumn[] {
         return (
           <TableHoverCard
             value={
-              <Group spacing="xs" position="left" noWrap={true}>
-                <Text color={color}>{text}</Text>
+              <Group gap="xs" justify="left" wrap="nowrap">
+                <Text c={color}>{text}</Text>
                 {part.units && (
                   <Text size="xs" color={color}>
                     [{part.units}]
diff --git a/src/frontend/src/tables/stock/StockItemTestResultTable.tsx b/src/frontend/src/tables/stock/StockItemTestResultTable.tsx
index 0870771472..a7fb6eebfb 100644
--- a/src/frontend/src/tables/stock/StockItemTestResultTable.tsx
+++ b/src/frontend/src/tables/stock/StockItemTestResultTable.tsx
@@ -132,16 +132,16 @@ export default function StockItemTestResultTable({
             record.stock_item != undefined && record.stock_item != itemId;
 
           return (
-            <Group position="apart">
+            <Group justify="space-between">
               <Text
-                italic={installed}
+                style={{ fontStyle: installed ? 'italic' : undefined }}
                 fw={required && 700}
-                color={enabled ? undefined : 'red'}
+                c={enabled ? undefined : 'red'}
               >
                 {!record.templateId && '- '}
                 {record.test_name ?? record.template_detail?.test_name}
               </Text>
-              <Group position="right">
+              <Group justify="right">
                 {record.results && record.results.length > 1 && (
                   <Tooltip label={t`Test Results`}>
                     <Badge color="lightblue" variant="filled">
@@ -194,7 +194,7 @@ export default function StockItemTestResultTable({
         title: t`Date`,
         render: (record: any) => {
           return (
-            <Group position="apart">
+            <Group justify="space-between">
               {renderDate(record.date)}
               {record.user_detail && (
                 <RenderUser instance={record.user_detail} />
@@ -214,7 +214,7 @@ export default function StockItemTestResultTable({
         title: t`Started`,
         render: (record: any) => {
           return (
-            <Group position="apart">
+            <Group justify="space-between">
               {renderDate(record.started_datetime, {
                 showTime: true,
                 showSeconds: true
@@ -229,7 +229,7 @@ export default function StockItemTestResultTable({
         title: t`Finished`,
         render: (record: any) => {
           return (
-            <Group position="apart">
+            <Group justify="space-between">
               {renderDate(record.finished_datetime, {
                 showTime: true,
                 showSeconds: true
diff --git a/src/frontend/src/tables/stock/StockLocationTable.tsx b/src/frontend/src/tables/stock/StockLocationTable.tsx
index 72aa7d61e2..1b2ef2b328 100644
--- a/src/frontend/src/tables/stock/StockLocationTable.tsx
+++ b/src/frontend/src/tables/stock/StockLocationTable.tsx
@@ -39,10 +39,12 @@ export function StockLocationTable({ parentId }: { parentId?: any }) {
       },
       {
         name: 'structural',
+        label: t`structural`,
         description: t`Show structural locations`
       },
       {
         name: 'external',
+        label: t`external`,
         description: t`Show external locations`
       },
       {
diff --git a/src/frontend/src/theme.ts b/src/frontend/src/theme.ts
new file mode 100644
index 0000000000..568c9810cf
--- /dev/null
+++ b/src/frontend/src/theme.ts
@@ -0,0 +1,5 @@
+import { createTheme } from '@mantine/core';
+import { themeToVars } from '@mantine/vanilla-extract';
+
+export const theme = createTheme({});
+export const vars = themeToVars(theme);
diff --git a/src/frontend/src/views/MainView.tsx b/src/frontend/src/views/MainView.tsx
index 33535757b5..56c2bb77e6 100644
--- a/src/frontend/src/views/MainView.tsx
+++ b/src/frontend/src/views/MainView.tsx
@@ -1,3 +1,4 @@
+import '@mantine/core/styles.css';
 import { useViewportSize } from '@mantine/hooks';
 import { lazy, useEffect } from 'react';
 
diff --git a/src/frontend/src/views/MobileAppView.tsx b/src/frontend/src/views/MobileAppView.tsx
index e01c626f8d..21353b98d3 100644
--- a/src/frontend/src/views/MobileAppView.tsx
+++ b/src/frontend/src/views/MobileAppView.tsx
@@ -18,7 +18,7 @@ export default function MobileAppView() {
       <Center h="100vh">
         <Container>
           <Stack>
-            <Title color="red">
+            <Title c="red">
               <Trans>Mobile viewport detected</Trans>
             </Title>
             <Text>
diff --git a/src/frontend/tests/login.ts b/src/frontend/tests/login.ts
index d52d6ad0ea..0be2945163 100644
--- a/src/frontend/tests/login.ts
+++ b/src/frontend/tests/login.ts
@@ -34,5 +34,7 @@ export const doQuickLogin = async (
   // await page.goto(logoutUrl);
   await page.goto(`${url}/login/?login=${username}&password=${password}`);
   await page.waitForURL('**/platform/home');
-  await page.waitForTimeout(250);
+  await page
+    .getByRole('heading', { name: 'Welcome to your Dashboard,' })
+    .waitFor();
 };
diff --git a/src/frontend/tests/modals.spec.ts b/src/frontend/tests/modals.spec.ts
index 2c4f379c4c..ed5266f476 100644
--- a/src/frontend/tests/modals.spec.ts
+++ b/src/frontend/tests/modals.spec.ts
@@ -54,18 +54,10 @@ test('PUI - Modals as admin', async ({ page }) => {
 
   // qr code modal
   await page.getByRole('button', { name: 'Open QR code scanner' }).click();
-  await page
-    .locator('div')
-    .filter({ hasText: /^Scan QR code$/ })
-    .getByRole('button')
-    .click();
+  await page.getByRole('banner').getByRole('button').click();
   await page.getByRole('button', { name: 'Open QR code scanner' }).click();
   await page.getByRole('button', { name: 'Close modal' }).click();
   await page.getByRole('button', { name: 'Open QR code scanner' }).click();
   await page.waitForTimeout(500);
-  await page
-    .locator('div')
-    .filter({ hasText: /^Scan QR code$/ })
-    .getByRole('button')
-    .click();
+  await page.getByRole('banner').getByRole('button').click();
 });
diff --git a/src/frontend/tests/pages/pui_index.spec.ts b/src/frontend/tests/pages/pui_index.spec.ts
index cddccd67c6..7edb6f4fd5 100644
--- a/src/frontend/tests/pages/pui_index.spec.ts
+++ b/src/frontend/tests/pages/pui_index.spec.ts
@@ -46,7 +46,7 @@ test('PUI - Pages - Index - Playground', async ({ page }) => {
 
   // EditCategory
   await page.getByRole('button', { name: 'Edit Category' }).click();
-  await page.locator('.css-1xvbfjt-Input2').first().click();
+  await page.locator('.css-fehojk-Input2').first().click();
   await page.getByText('Category 0').click();
   await page
     .getByLabel('Edit Category')
@@ -61,7 +61,7 @@ test('PUI - Pages - Index - Playground', async ({ page }) => {
 
   // Create Part new Modal
   await page.getByRole('button', { name: 'Create Part new Modal' }).click();
-  await page.locator('.css-1xvbfjt-Input2').first().click();
+  await page.locator('.css-fehojk-Input2').first().click();
   await page.getByText('Category 0').click();
   await page
     .getByLabel('Create part')
diff --git a/src/frontend/tests/pui_command.spec.ts b/src/frontend/tests/pui_command.spec.ts
index f722d04bba..31773163a2 100644
--- a/src/frontend/tests/pui_command.spec.ts
+++ b/src/frontend/tests/pui_command.spec.ts
@@ -8,11 +8,10 @@ test('PUI - Quick Command', async ({ page }) => {
   // Open Spotlight with Keyboard Shortcut
   await page.locator('body').press(`${systemKey}+k`);
   await page.waitForTimeout(200);
-  await page.getByRole('tab', { name: 'Dashboard' }).click();
   await page
-    .locator('div')
-    .filter({ hasText: /^Dashboard$/ })
+    .getByRole('button', { name: 'Go to the InvenTree dashboard' })
     .click();
+  await page.locator('p').filter({ hasText: 'Dashboard' }).waitFor();
   await page.waitForURL('**/platform/dashboard');
 
   // Open Spotlight with Button
@@ -100,12 +99,10 @@ test('PUI - Quick Command - No Keys', async ({ page }) => {
 
   // Test addition of new actions
   await page.goto(`${baseUrl}/playground`);
-  await page
-    .locator('div')
-    .filter({ hasText: /^Playground$/ })
-    .waitFor();
+  await page.locator('p').filter({ hasText: 'Playground' }).waitFor();
   await page.getByRole('button', { name: 'Spotlight actions' }).click();
   await page.getByRole('button', { name: 'Register extra actions' }).click();
+  /*
   await page.getByPlaceholder('Search...').fill('secret');
   await page.getByRole('button', { name: 'Secret action It was' }).click();
   await page.getByRole('button', { name: 'Open spotlight' }).click();
@@ -117,6 +114,7 @@ test('PUI - Quick Command - No Keys', async ({ page }) => {
     .click();
   await page.getByRole('tab', { name: 'Home' }).click();
   await page.getByRole('button', { name: 'Open spotlight' }).click();
+  */
   await page.getByPlaceholder('Search...').fill('secret');
   await page.getByText('Nothing found...').click();
 });
diff --git a/src/frontend/tests/pui_general.spec.ts b/src/frontend/tests/pui_general.spec.ts
index 959baa0fe1..b92f8b587e 100644
--- a/src/frontend/tests/pui_general.spec.ts
+++ b/src/frontend/tests/pui_general.spec.ts
@@ -229,10 +229,7 @@ test('PUI - Company', async ({ page }) => {
   await doQuickLogin(page);
 
   await page.goto(`${baseUrl}/company/1/details`);
-  await page
-    .locator('div')
-    .filter({ hasText: /^DigiKey Electronics$/ })
-    .waitFor();
+  await page.getByLabel('Details').getByText('DigiKey Electronics').waitFor();
   await page.getByRole('cell', { name: 'https://www.digikey.com/' }).waitFor();
   await page.getByRole('tab', { name: 'Supplied Parts' }).click();
   await page
diff --git a/src/frontend/tests/pui_stock.spec.ts b/src/frontend/tests/pui_stock.spec.ts
index ed81e6d53f..177e9868b3 100644
--- a/src/frontend/tests/pui_stock.spec.ts
+++ b/src/frontend/tests/pui_stock.spec.ts
@@ -85,6 +85,7 @@ test('PUI - Purchasing', async ({ page }) => {
   await page.getByLabel('Line 2').fill(value == 'old' ? 'new' : 'old');
 
   await page.getByRole('button', { name: 'Submit' }).isEnabled();
+
   await page.getByRole('button', { name: 'Submit' }).click();
   await page.getByRole('tab', { name: 'Details' }).waitFor();
 });
diff --git a/src/frontend/vite.config.ts b/src/frontend/vite.config.ts
index a5c2b8abf2..e092916dad 100644
--- a/src/frontend/vite.config.ts
+++ b/src/frontend/vite.config.ts
@@ -1,3 +1,4 @@
+import { vanillaExtractPlugin } from '@vanilla-extract/vite-plugin';
 import react from '@vitejs/plugin-react';
 import { platform, release } from 'node:os';
 import license from 'rollup-plugin-license';
@@ -19,6 +20,7 @@ export default defineConfig({
         plugins: ['macros']
       }
     }),
+    vanillaExtractPlugin(),
     splitVendorChunkPlugin(),
     license({
       sourcemap: true,
diff --git a/src/frontend/yarn.lock b/src/frontend/yarn.lock
index 9297718e29..679e5afb17 100644
--- a/src/frontend/yarn.lock
+++ b/src/frontend/yarn.lock
@@ -23,7 +23,7 @@
   resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.24.4.tgz#6f102372e9094f25d908ca0d34fc74c74606059a"
   integrity sha512-vg8Gih2MLK+kOkHJp4gBEIkyaIi00jgWot2D9QOmmfLC8jINSOzmCLta6Bvz/JSBCqnegV0L80jhxkol5GWNfQ==
 
-"@babel/core@^7.17.7", "@babel/core@^7.21.0", "@babel/core@^7.23.5", "@babel/core@^7.23.9", "@babel/core@^7.7.5":
+"@babel/core@^7.17.7", "@babel/core@^7.21.0", "@babel/core@^7.23.5", "@babel/core@^7.23.9", "@babel/core@^7.24.4", "@babel/core@^7.7.5":
   version "7.24.4"
   resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.24.4.tgz#1f758428e88e0d8c563874741bc4ffc4f71a4717"
   integrity sha512-MBVlMXP+kkl5394RBLSxxk/iLTeVGuXTV3cIDXavPpMMqnSnt6apKgan/U8O3USWZCWZT/TbgfEpKa4uMgN4Dg==
@@ -114,7 +114,7 @@
   dependencies:
     "@babel/types" "^7.23.0"
 
-"@babel/helper-module-imports@^7.0.0", "@babel/helper-module-imports@^7.16.7", "@babel/helper-module-imports@^7.22.15", "@babel/helper-module-imports@^7.22.5":
+"@babel/helper-module-imports@^7.16.7", "@babel/helper-module-imports@^7.22.15":
   version "7.24.3"
   resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.24.3.tgz#6ac476e6d168c7c23ff3ba3cf4f7841d46ac8128"
   integrity sha512-viKb0F9f2s0BCS22QSF308z/+1YWKV/76mwt61NBzS5izMzDPwdq1pTrzf+Li3npBWX9KdQbkeCt1jSAM7lZqg==
@@ -213,14 +213,14 @@
   resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.24.4.tgz#234487a110d89ad5a3ed4a8a566c36b9453e8c88"
   integrity sha512-zTvEBcghmeBma9QIGunWevvBAp4/Qu9Bdq+2k0Ot4fVMD6v3dsC9WOcRSKk7tRRyBM/53yKMJko9xOatGQAwSg==
 
-"@babel/plugin-syntax-jsx@^7.16.7", "@babel/plugin-syntax-jsx@^7.22.5", "@babel/plugin-syntax-jsx@^7.23.3", "@babel/plugin-syntax-jsx@^7.24.1":
+"@babel/plugin-syntax-jsx@^7.16.7", "@babel/plugin-syntax-jsx@^7.23.3", "@babel/plugin-syntax-jsx@^7.24.1":
   version "7.24.1"
   resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.24.1.tgz#3f6ca04b8c841811dbc3c5c5f837934e0d626c10"
   integrity sha512-2eCtxZXf+kbkMIsXS4poTvT4Yu5rXiRa+9xGVT56raghjmBTKMpFNc9R4IDiB4emao9eO22Ox7CxuJG7BgExqA==
   dependencies:
     "@babel/helper-plugin-utils" "^7.24.0"
 
-"@babel/plugin-syntax-typescript@^7.16.7", "@babel/plugin-syntax-typescript@^7.24.1":
+"@babel/plugin-syntax-typescript@^7.16.7", "@babel/plugin-syntax-typescript@^7.23.3", "@babel/plugin-syntax-typescript@^7.24.1":
   version "7.24.1"
   resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-typescript/-/plugin-syntax-typescript-7.24.1.tgz#b3bcc51f396d15f3591683f90239de143c076844"
   integrity sha512-Yhnmvy5HZEnHUty6i++gcfH1/l68AHnItFHnaCv6hn9dNh0hQvvQJsxpi4BMBFN5DLeHBuucT/0DgzXif/OyRw==
@@ -293,7 +293,7 @@
     "@babel/helper-plugin-utils" "^7.24.0"
     "@babel/plugin-syntax-typescript" "^7.24.1"
 
-"@babel/preset-react@^7.23.3":
+"@babel/preset-react@^7.24.1":
   version "7.24.1"
   resolved "https://registry.yarnpkg.com/@babel/preset-react/-/preset-react-7.24.1.tgz#2450c2ac5cc498ef6101a6ca5474de251e33aa95"
   integrity sha512-eFa8up2/8cZXLIpkafhaADTXSnl7IsUFCYenRWrARBz0/qZwcT0RBXpys0LJU4+WfPoF2ZG6ew6s2V6izMCwRA==
@@ -305,7 +305,7 @@
     "@babel/plugin-transform-react-jsx-development" "^7.22.5"
     "@babel/plugin-transform-react-pure-annotations" "^7.24.1"
 
-"@babel/preset-typescript@^7.23.3":
+"@babel/preset-typescript@^7.24.1":
   version "7.24.1"
   resolved "https://registry.yarnpkg.com/@babel/preset-typescript/-/preset-typescript-7.24.1.tgz#89bdf13a3149a17b3b2a2c9c62547f06db8845ec"
   integrity sha512-1DBaMmRDpuYQBPWD8Pf/WEwCrtgRHxsZnP4mIy9G/X+hFfbI47Q2G4t1Paakld84+qsk2fSsUPMKg71jkoOOaQ==
@@ -316,7 +316,7 @@
     "@babel/plugin-transform-modules-commonjs" "^7.24.1"
     "@babel/plugin-transform-typescript" "^7.24.1"
 
-"@babel/runtime@^7.10.2", "@babel/runtime@^7.12.0", "@babel/runtime@^7.12.5", "@babel/runtime@^7.13.10", "@babel/runtime@^7.18.3", "@babel/runtime@^7.18.6", "@babel/runtime@^7.20.13", "@babel/runtime@^7.21.0", "@babel/runtime@^7.5.5", "@babel/runtime@^7.8.7":
+"@babel/runtime@^7.12.0", "@babel/runtime@^7.12.5", "@babel/runtime@^7.18.3", "@babel/runtime@^7.18.6", "@babel/runtime@^7.20.13", "@babel/runtime@^7.21.0", "@babel/runtime@^7.5.5", "@babel/runtime@^7.8.7":
   version "7.24.4"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.24.4.tgz#de795accd698007a66ba44add6cc86542aff1edd"
   integrity sha512-dkxf7+hn8mFBwKjs9bvBlArzLVxVbS8usaPUDd5p2a9JCL9tB8OaOVN1isD4+Xyk4ns89/xeOmbQvgdK7IIVdA==
@@ -332,7 +332,7 @@
     "@babel/parser" "^7.24.0"
     "@babel/types" "^7.24.0"
 
-"@babel/traverse@^7.24.1", "@babel/traverse@^7.4.5":
+"@babel/traverse@^7.24.1":
   version "7.24.1"
   resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.24.1.tgz#d65c36ac9dd17282175d1e4a3c49d5b7988f530c"
   integrity sha512-xuU6o9m68KeqZbQuDt2TcKSxUw/mrsvavlEqQ1leZ/B+C9tk6E4sRWy97WaXgvq5E+nU3cXMxv3WKOCanVMCmQ==
@@ -357,10 +357,10 @@
     "@babel/helper-validator-identifier" "^7.22.20"
     to-fast-properties "^2.0.0"
 
-"@codemirror/autocomplete@^6.0.0":
-  version "6.15.0"
-  resolved "https://registry.yarnpkg.com/@codemirror/autocomplete/-/autocomplete-6.15.0.tgz#37bc320f20cdda332d6bf4d1fc7f300f8fc5f04c"
-  integrity sha512-G2Zm0mXznxz97JhaaOdoEG2cVupn4JjPaS4AcNvZzhOsnnG9YVN68VzfoUw6dYTsIxT6a/cmoFEN47KAWhXaOg==
+"@codemirror/autocomplete@>=6.0.0", "@codemirror/autocomplete@^6.0.0":
+  version "6.16.0"
+  resolved "https://registry.yarnpkg.com/@codemirror/autocomplete/-/autocomplete-6.16.0.tgz#595eb30099ba91a835ed65ed8ff7497388f604b3"
+  integrity sha512-P/LeCTtZHRTCU4xQsa89vSKWecYv1ZqwzOd5topheGRf+qtacFgBeIMQi3eL8Kt/BUNvxUWkx+5qP2jlGoARrg==
   dependencies:
     "@codemirror/language" "^6.0.0"
     "@codemirror/state" "^6.0.0"
@@ -389,9 +389,9 @@
     "@lezer/css" "^1.0.0"
 
 "@codemirror/lang-html@^6.0.0":
-  version "6.4.8"
-  resolved "https://registry.yarnpkg.com/@codemirror/lang-html/-/lang-html-6.4.8.tgz#961db9b1037efcb1d0f50ae6082e5a367fa1470c"
-  integrity sha512-tE2YK7wDlb9ZpAH6mpTPiYm6rhfdQKVDa5r9IwIFlwwgvVaKsCfuKKZoJGWsmMZIf3FQAuJ5CHMPLymOtg1hXw==
+  version "6.4.9"
+  resolved "https://registry.yarnpkg.com/@codemirror/lang-html/-/lang-html-6.4.9.tgz#d586f2cc9c341391ae07d1d7c545990dfa069727"
+  integrity sha512-aQv37pIMSlueybId/2PVSP6NPnmurFDVmZwzc7jszd2KAF8qd4VBbvNYPXWQq90WIARjsdVkPbw29pszmHws3Q==
   dependencies:
     "@codemirror/autocomplete" "^6.0.0"
     "@codemirror/lang-css" "^6.0.0"
@@ -430,7 +430,7 @@
     "@lezer/highlight" "^1.0.0"
     "@lezer/lr" "^1.3.1"
 
-"@codemirror/language@^6.0.0", "@codemirror/language@^6.4.0", "@codemirror/language@^6.6.0":
+"@codemirror/language@>=6.0.0", "@codemirror/language@^6.0.0", "@codemirror/language@^6.4.0", "@codemirror/language@^6.6.0":
   version "6.10.1"
   resolved "https://registry.yarnpkg.com/@codemirror/language/-/language-6.10.1.tgz#428c932a158cb75942387acfe513c1ece1090b05"
   integrity sha512-5GrXzrhq6k+gL5fjkAwt90nYDmjlzTIJV8THnxNFtNKWotMIlzzN+CpqxqwXOECnUdOndmSeWntVrVcv5axWRQ==
@@ -442,7 +442,7 @@
     "@lezer/lr" "^1.0.0"
     style-mod "^4.0.0"
 
-"@codemirror/lint@^6.0.0":
+"@codemirror/lint@>=6.0.0", "@codemirror/lint@^6.0.0":
   version "6.5.0"
   resolved "https://registry.yarnpkg.com/@codemirror/lint/-/lint-6.5.0.tgz#ea43b6e653dcc5bcd93456b55e9fe62e63f326d9"
   integrity sha512-+5YyicIaaAZKU8K43IQi8TBy6mF6giGeWAH7N96Z5LC30Wm5JMjqxOYIE9mxwMG1NbhT2mA3l9hA4uuKUM3E5g==
@@ -451,7 +451,7 @@
     "@codemirror/view" "^6.0.0"
     crelt "^1.0.5"
 
-"@codemirror/search@^6.0.0":
+"@codemirror/search@>=6.0.0", "@codemirror/search@^6.0.0":
   version "6.5.6"
   resolved "https://registry.yarnpkg.com/@codemirror/search/-/search-6.5.6.tgz#8f858b9e678d675869112e475f082d1e8488db93"
   integrity sha512-rpMgcsh7o0GuCDUXKPvww+muLA1pDJaFrpq/CCHtpQJYz8xopu4D1hPcKRoDD0YlF8gZaqTNIRa4VRBWyhyy7Q==
@@ -465,7 +465,7 @@
   resolved "https://registry.yarnpkg.com/@codemirror/state/-/state-6.4.1.tgz#da57143695c056d9a3c38705ed34136e2b68171b"
   integrity sha512-QkEyUiLhsJoZkbumGZlswmAhA7CBU02Wrz7zvH4SrcifbsqwlXShVXg65f3v/ts57W3dqyamEriMhij1Z3Zz4A==
 
-"@codemirror/theme-one-dark@^6.0.0":
+"@codemirror/theme-one-dark@>=6.0.0", "@codemirror/theme-one-dark@^6.0.0":
   version "6.1.2"
   resolved "https://registry.yarnpkg.com/@codemirror/theme-one-dark/-/theme-one-dark-6.1.2.tgz#fcef9f9cfc17a07836cb7da17c9f6d7231064df8"
   integrity sha512-F+sH0X16j/qFLMAfbciKTxVOwkdAS336b7AXTKOZhy8BR3eH/RelsnLgLFINrpST63mmN2OuwUt0W2ndUgYwUA==
@@ -475,10 +475,10 @@
     "@codemirror/view" "^6.0.0"
     "@lezer/highlight" "^1.0.0"
 
-"@codemirror/view@^6.0.0", "@codemirror/view@^6.17.0", "@codemirror/view@^6.23.0":
-  version "6.26.1"
-  resolved "https://registry.yarnpkg.com/@codemirror/view/-/view-6.26.1.tgz#ab99cf35c576bc65f5804ab49db730b65c3fad3f"
-  integrity sha512-wLw0t3R9AwOSQThdZ5Onw8QQtem5asE7+bPlnzc57eubPqiuJKIzwjMZ+C42vQett+iva+J8VgFV4RYWDBh5FA==
+"@codemirror/view@>=6.0.0", "@codemirror/view@^6.0.0", "@codemirror/view@^6.17.0", "@codemirror/view@^6.23.0":
+  version "6.26.3"
+  resolved "https://registry.yarnpkg.com/@codemirror/view/-/view-6.26.3.tgz#47aebd49a6ee3c8d36b82046d3bffe6056b8039f"
+  integrity sha512-gmqxkPALZjkgSxIeeweY/wGQXBfwTUaLs8h7OKtSwfbj9Ct3L11lD+u1sS7XHppxFQoMDiMDp07P9f3I2jWOHw==
   dependencies:
     "@codemirror/state" "^6.4.0"
     style-mod "^4.1.0"
@@ -512,12 +512,19 @@
     "@emotion/weak-memoize" "^0.3.1"
     stylis "4.2.0"
 
-"@emotion/hash@^0.9.1":
+"@emotion/hash@^0.9.0", "@emotion/hash@^0.9.1":
   version "0.9.1"
   resolved "https://registry.yarnpkg.com/@emotion/hash/-/hash-0.9.1.tgz#4ffb0055f7ef676ebc3a5a91fb621393294e2f43"
   integrity sha512-gJB6HLm5rYwSLI6PQa+X1t5CFGrv1J1TWG+sOyMCeKz2ojaj6Fnl/rZEspogG+cvqbt4AE/2eIyD2QfLKTBNlQ==
 
-"@emotion/is-prop-valid@^1.1.0", "@emotion/is-prop-valid@^1.2.0":
+"@emotion/is-prop-valid@1.2.1":
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-1.2.1.tgz#23116cf1ed18bfeac910ec6436561ecb1a3885cc"
+  integrity sha512-61Mf7Ufx4aDxx1xlDeOm8aFFigGHE4z+0sKCa+IHCeZKiyP9RLD0Mmx7m8b9/Cf37f7NAvQOOJAbQQGVr5uERw==
+  dependencies:
+    "@emotion/memoize" "^0.8.1"
+
+"@emotion/is-prop-valid@^1.2.0":
   version "1.2.2"
   resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-1.2.2.tgz#d4175076679c6a26faa92b03bb786f9e52612337"
   integrity sha512-uNsoYd37AFmaCdXlg6EYD1KaPOaRWRByMCYzbKUX4+hhMfrxdVSelShywL4JVaAeM/eHUOSprYBQls+/neX3pw==
@@ -559,15 +566,10 @@
   resolved "https://registry.yarnpkg.com/@emotion/sheet/-/sheet-1.2.2.tgz#d58e788ee27267a14342303e1abb3d508b6d0fec"
   integrity sha512-0QBtGvaqtWi+nx6doRwDdBIzhNdZrXUppvTM4dtZZWEGTXL/XE/yJxLMGlDT1Gt+UHH5IX1n+jkXyytE/av7OA==
 
-"@emotion/stylis@^0.8.4":
-  version "0.8.5"
-  resolved "https://registry.yarnpkg.com/@emotion/stylis/-/stylis-0.8.5.tgz#deacb389bd6ee77d1e7fcaccce9e16c5c7e78e04"
-  integrity sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ==
-
-"@emotion/unitless@^0.7.4":
-  version "0.7.5"
-  resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.7.5.tgz#77211291c1900a700b8a78cfafda3160d76949ed"
-  integrity sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg==
+"@emotion/unitless@0.8.0":
+  version "0.8.0"
+  resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.8.0.tgz#a4a36e9cbdc6903737cd20d38033241e1b8833db"
+  integrity sha512-VINS5vEYAscRl2ZUDiT3uMPlrFQupiKgHz5AA4bCH1miKBg4qtwkim1qPmJj/4WG6TreYMY111rEFsjupcOKHw==
 
 "@emotion/unitless@^0.8.1":
   version "0.8.1"
@@ -589,6 +591,11 @@
   resolved "https://registry.yarnpkg.com/@emotion/weak-memoize/-/weak-memoize-0.3.1.tgz#d0fce5d07b0620caa282b5131c297bb60f9d87e6"
   integrity sha512-EsBwpc7hBUJWAsNPBmJy4hxWx12v6bshQsldrVmjxJoc3isbxhOrF2IcCpaXxfvq03NwkI7sbsOLXbYuqF/8Ww==
 
+"@esbuild/aix-ppc64@0.19.12":
+  version "0.19.12"
+  resolved "https://registry.yarnpkg.com/@esbuild/aix-ppc64/-/aix-ppc64-0.19.12.tgz#d1bc06aedb6936b3b6d313bf809a5a40387d2b7f"
+  integrity sha512-bmoCYyWdEL3wDQIVbcyzRyeKLgk2WtWLTWz1ZIAZF/EGbNOwSA6ew3PftJ1PqMiOOGu0OyFMzG53L0zqIpPeNA==
+
 "@esbuild/aix-ppc64@0.20.2":
   version "0.20.2"
   resolved "https://registry.yarnpkg.com/@esbuild/aix-ppc64/-/aix-ppc64-0.20.2.tgz#a70f4ac11c6a1dfc18b8bbb13284155d933b9537"
@@ -599,6 +606,11 @@
   resolved "https://registry.yarnpkg.com/@esbuild/android-arm64/-/android-arm64-0.17.19.tgz#bafb75234a5d3d1b690e7c2956a599345e84a2fd"
   integrity sha512-KBMWvEZooR7+kzY0BtbTQn0OAYY7CsiydT63pVEaPtVYF0hXbUaOyZog37DKxK7NF3XacBJOpYT4adIJh+avxA==
 
+"@esbuild/android-arm64@0.19.12":
+  version "0.19.12"
+  resolved "https://registry.yarnpkg.com/@esbuild/android-arm64/-/android-arm64-0.19.12.tgz#7ad65a36cfdb7e0d429c353e00f680d737c2aed4"
+  integrity sha512-P0UVNGIienjZv3f5zq0DP3Nt2IE/3plFzuaS96vihvD0Hd6H/q4WXUGpCxD/E8YrSXfNyRPbpTq+T8ZQioSuPA==
+
 "@esbuild/android-arm64@0.20.2":
   version "0.20.2"
   resolved "https://registry.yarnpkg.com/@esbuild/android-arm64/-/android-arm64-0.20.2.tgz#db1c9202a5bc92ea04c7b6840f1bbe09ebf9e6b9"
@@ -609,6 +621,11 @@
   resolved "https://registry.yarnpkg.com/@esbuild/android-arm/-/android-arm-0.17.19.tgz#5898f7832c2298bc7d0ab53701c57beb74d78b4d"
   integrity sha512-rIKddzqhmav7MSmoFCmDIb6e2W57geRsM94gV2l38fzhXMwq7hZoClug9USI2pFRGL06f4IOPHHpFNOkWieR8A==
 
+"@esbuild/android-arm@0.19.12":
+  version "0.19.12"
+  resolved "https://registry.yarnpkg.com/@esbuild/android-arm/-/android-arm-0.19.12.tgz#b0c26536f37776162ca8bde25e42040c203f2824"
+  integrity sha512-qg/Lj1mu3CdQlDEEiWrlC4eaPZ1KztwGJ9B6J+/6G+/4ewxJg7gqj8eVYWvao1bXrqGiW2rsBZFSX3q2lcW05w==
+
 "@esbuild/android-arm@0.20.2":
   version "0.20.2"
   resolved "https://registry.yarnpkg.com/@esbuild/android-arm/-/android-arm-0.20.2.tgz#3b488c49aee9d491c2c8f98a909b785870d6e995"
@@ -619,6 +636,11 @@
   resolved "https://registry.yarnpkg.com/@esbuild/android-x64/-/android-x64-0.17.19.tgz#658368ef92067866d95fb268719f98f363d13ae1"
   integrity sha512-uUTTc4xGNDT7YSArp/zbtmbhO0uEEK9/ETW29Wk1thYUJBz3IVnvgEiEwEa9IeLyvnpKrWK64Utw2bgUmDveww==
 
+"@esbuild/android-x64@0.19.12":
+  version "0.19.12"
+  resolved "https://registry.yarnpkg.com/@esbuild/android-x64/-/android-x64-0.19.12.tgz#cb13e2211282012194d89bf3bfe7721273473b3d"
+  integrity sha512-3k7ZoUW6Q6YqhdhIaq/WZ7HwBpnFBlW905Fa4s4qWJyiNOgT1dOqDiVAQFwBH7gBRZr17gLrlFCRzF6jFh7Kew==
+
 "@esbuild/android-x64@0.20.2":
   version "0.20.2"
   resolved "https://registry.yarnpkg.com/@esbuild/android-x64/-/android-x64-0.20.2.tgz#3b1628029e5576249d2b2d766696e50768449f98"
@@ -629,6 +651,11 @@
   resolved "https://registry.yarnpkg.com/@esbuild/darwin-arm64/-/darwin-arm64-0.17.19.tgz#584c34c5991b95d4d48d333300b1a4e2ff7be276"
   integrity sha512-80wEoCfF/hFKM6WE1FyBHc9SfUblloAWx6FJkFWTWiCoht9Mc0ARGEM47e67W9rI09YoUxJL68WHfDRYEAvOhg==
 
+"@esbuild/darwin-arm64@0.19.12":
+  version "0.19.12"
+  resolved "https://registry.yarnpkg.com/@esbuild/darwin-arm64/-/darwin-arm64-0.19.12.tgz#cbee41e988020d4b516e9d9e44dd29200996275e"
+  integrity sha512-B6IeSgZgtEzGC42jsI+YYu9Z3HKRxp8ZT3cqhvliEHovq8HSX2YX8lNocDn79gCKJXOSaEot9MVYky7AKjCs8g==
+
 "@esbuild/darwin-arm64@0.20.2":
   version "0.20.2"
   resolved "https://registry.yarnpkg.com/@esbuild/darwin-arm64/-/darwin-arm64-0.20.2.tgz#6e8517a045ddd86ae30c6608c8475ebc0c4000bb"
@@ -639,6 +666,11 @@
   resolved "https://registry.yarnpkg.com/@esbuild/darwin-x64/-/darwin-x64-0.17.19.tgz#7751d236dfe6ce136cce343dce69f52d76b7f6cb"
   integrity sha512-IJM4JJsLhRYr9xdtLytPLSH9k/oxR3boaUIYiHkAawtwNOXKE8KoU8tMvryogdcT8AU+Bflmh81Xn6Q0vTZbQw==
 
+"@esbuild/darwin-x64@0.19.12":
+  version "0.19.12"
+  resolved "https://registry.yarnpkg.com/@esbuild/darwin-x64/-/darwin-x64-0.19.12.tgz#e37d9633246d52aecf491ee916ece709f9d5f4cd"
+  integrity sha512-hKoVkKzFiToTgn+41qGhsUJXFlIjxI/jSYeZf3ugemDYZldIXIxhvwN6erJGlX4t5h417iFuheZ7l+YVn05N3A==
+
 "@esbuild/darwin-x64@0.20.2":
   version "0.20.2"
   resolved "https://registry.yarnpkg.com/@esbuild/darwin-x64/-/darwin-x64-0.20.2.tgz#90ed098e1f9dd8a9381695b207e1cff45540a0d0"
@@ -649,6 +681,11 @@
   resolved "https://registry.yarnpkg.com/@esbuild/freebsd-arm64/-/freebsd-arm64-0.17.19.tgz#cacd171665dd1d500f45c167d50c6b7e539d5fd2"
   integrity sha512-pBwbc7DufluUeGdjSU5Si+P3SoMF5DQ/F/UmTSb8HXO80ZEAJmrykPyzo1IfNbAoaqw48YRpv8shwd1NoI0jcQ==
 
+"@esbuild/freebsd-arm64@0.19.12":
+  version "0.19.12"
+  resolved "https://registry.yarnpkg.com/@esbuild/freebsd-arm64/-/freebsd-arm64-0.19.12.tgz#1ee4d8b682ed363b08af74d1ea2b2b4dbba76487"
+  integrity sha512-4aRvFIXmwAcDBw9AueDQ2YnGmz5L6obe5kmPT8Vd+/+x/JMVKCgdcRwH6APrbpNXsPz+K653Qg8HB/oXvXVukA==
+
 "@esbuild/freebsd-arm64@0.20.2":
   version "0.20.2"
   resolved "https://registry.yarnpkg.com/@esbuild/freebsd-arm64/-/freebsd-arm64-0.20.2.tgz#d71502d1ee89a1130327e890364666c760a2a911"
@@ -659,6 +696,11 @@
   resolved "https://registry.yarnpkg.com/@esbuild/freebsd-x64/-/freebsd-x64-0.17.19.tgz#0769456eee2a08b8d925d7c00b79e861cb3162e4"
   integrity sha512-4lu+n8Wk0XlajEhbEffdy2xy53dpR06SlzvhGByyg36qJw6Kpfk7cp45DR/62aPH9mtJRmIyrXAS5UWBrJT6TQ==
 
+"@esbuild/freebsd-x64@0.19.12":
+  version "0.19.12"
+  resolved "https://registry.yarnpkg.com/@esbuild/freebsd-x64/-/freebsd-x64-0.19.12.tgz#37a693553d42ff77cd7126764b535fb6cc28a11c"
+  integrity sha512-EYoXZ4d8xtBoVN7CEwWY2IN4ho76xjYXqSXMNccFSx2lgqOG/1TBPW0yPx1bJZk94qu3tX0fycJeeQsKovA8gg==
+
 "@esbuild/freebsd-x64@0.20.2":
   version "0.20.2"
   resolved "https://registry.yarnpkg.com/@esbuild/freebsd-x64/-/freebsd-x64-0.20.2.tgz#aa5ea58d9c1dd9af688b8b6f63ef0d3d60cea53c"
@@ -669,6 +711,11 @@
   resolved "https://registry.yarnpkg.com/@esbuild/linux-arm64/-/linux-arm64-0.17.19.tgz#38e162ecb723862c6be1c27d6389f48960b68edb"
   integrity sha512-ct1Tg3WGwd3P+oZYqic+YZF4snNl2bsnMKRkb3ozHmnM0dGWuxcPTTntAF6bOP0Sp4x0PjSF+4uHQ1xvxfRKqg==
 
+"@esbuild/linux-arm64@0.19.12":
+  version "0.19.12"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-arm64/-/linux-arm64-0.19.12.tgz#be9b145985ec6c57470e0e051d887b09dddb2d4b"
+  integrity sha512-EoTjyYyLuVPfdPLsGVVVC8a0p1BFFvtpQDB/YLEhaXyf/5bczaGeN15QkR+O4S5LeJ92Tqotve7i1jn35qwvdA==
+
 "@esbuild/linux-arm64@0.20.2":
   version "0.20.2"
   resolved "https://registry.yarnpkg.com/@esbuild/linux-arm64/-/linux-arm64-0.20.2.tgz#055b63725df678379b0f6db9d0fa85463755b2e5"
@@ -679,6 +726,11 @@
   resolved "https://registry.yarnpkg.com/@esbuild/linux-arm/-/linux-arm-0.17.19.tgz#1a2cd399c50040184a805174a6d89097d9d1559a"
   integrity sha512-cdmT3KxjlOQ/gZ2cjfrQOtmhG4HJs6hhvm3mWSRDPtZ/lP5oe8FWceS10JaSJC13GBd4eH/haHnqf7hhGNLerA==
 
+"@esbuild/linux-arm@0.19.12":
+  version "0.19.12"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-arm/-/linux-arm-0.19.12.tgz#207ecd982a8db95f7b5279207d0ff2331acf5eef"
+  integrity sha512-J5jPms//KhSNv+LO1S1TX1UWp1ucM6N6XuL6ITdKWElCu8wXP72l9MM0zDTzzeikVyqFE6U8YAV9/tFyj0ti+w==
+
 "@esbuild/linux-arm@0.20.2":
   version "0.20.2"
   resolved "https://registry.yarnpkg.com/@esbuild/linux-arm/-/linux-arm-0.20.2.tgz#76b3b98cb1f87936fbc37f073efabad49dcd889c"
@@ -689,6 +741,11 @@
   resolved "https://registry.yarnpkg.com/@esbuild/linux-ia32/-/linux-ia32-0.17.19.tgz#e28c25266b036ce1cabca3c30155222841dc035a"
   integrity sha512-w4IRhSy1VbsNxHRQpeGCHEmibqdTUx61Vc38APcsRbuVgK0OPEnQ0YD39Brymn96mOx48Y2laBQGqgZ0j9w6SQ==
 
+"@esbuild/linux-ia32@0.19.12":
+  version "0.19.12"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-ia32/-/linux-ia32-0.19.12.tgz#d0d86b5ca1562523dc284a6723293a52d5860601"
+  integrity sha512-Thsa42rrP1+UIGaWz47uydHSBOgTUnwBwNq59khgIwktK6x60Hivfbux9iNR0eHCHzOLjLMLfUMLCypBkZXMHA==
+
 "@esbuild/linux-ia32@0.20.2":
   version "0.20.2"
   resolved "https://registry.yarnpkg.com/@esbuild/linux-ia32/-/linux-ia32-0.20.2.tgz#c0e5e787c285264e5dfc7a79f04b8b4eefdad7fa"
@@ -699,6 +756,11 @@
   resolved "https://registry.yarnpkg.com/@esbuild/linux-loong64/-/linux-loong64-0.17.19.tgz#0f887b8bb3f90658d1a0117283e55dbd4c9dcf72"
   integrity sha512-2iAngUbBPMq439a+z//gE+9WBldoMp1s5GWsUSgqHLzLJ9WoZLZhpwWuym0u0u/4XmZ3gpHmzV84PonE+9IIdQ==
 
+"@esbuild/linux-loong64@0.19.12":
+  version "0.19.12"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-loong64/-/linux-loong64-0.19.12.tgz#9a37f87fec4b8408e682b528391fa22afd952299"
+  integrity sha512-LiXdXA0s3IqRRjm6rV6XaWATScKAXjI4R4LoDlvO7+yQqFdlr1Bax62sRwkVvRIrwXxvtYEHHI4dm50jAXkuAA==
+
 "@esbuild/linux-loong64@0.20.2":
   version "0.20.2"
   resolved "https://registry.yarnpkg.com/@esbuild/linux-loong64/-/linux-loong64-0.20.2.tgz#a6184e62bd7cdc63e0c0448b83801001653219c5"
@@ -709,6 +771,11 @@
   resolved "https://registry.yarnpkg.com/@esbuild/linux-mips64el/-/linux-mips64el-0.17.19.tgz#f5d2a0b8047ea9a5d9f592a178ea054053a70289"
   integrity sha512-LKJltc4LVdMKHsrFe4MGNPp0hqDFA1Wpt3jE1gEyM3nKUvOiO//9PheZZHfYRfYl6AwdTH4aTcXSqBerX0ml4A==
 
+"@esbuild/linux-mips64el@0.19.12":
+  version "0.19.12"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-mips64el/-/linux-mips64el-0.19.12.tgz#4ddebd4e6eeba20b509d8e74c8e30d8ace0b89ec"
+  integrity sha512-fEnAuj5VGTanfJ07ff0gOA6IPsvrVHLVb6Lyd1g2/ed67oU1eFzL0r9WL7ZzscD+/N6i3dWumGE1Un4f7Amf+w==
+
 "@esbuild/linux-mips64el@0.20.2":
   version "0.20.2"
   resolved "https://registry.yarnpkg.com/@esbuild/linux-mips64el/-/linux-mips64el-0.20.2.tgz#d08e39ce86f45ef8fc88549d29c62b8acf5649aa"
@@ -719,6 +786,11 @@
   resolved "https://registry.yarnpkg.com/@esbuild/linux-ppc64/-/linux-ppc64-0.17.19.tgz#876590e3acbd9fa7f57a2c7d86f83717dbbac8c7"
   integrity sha512-/c/DGybs95WXNS8y3Ti/ytqETiW7EU44MEKuCAcpPto3YjQbyK3IQVKfF6nbghD7EcLUGl0NbiL5Rt5DMhn5tg==
 
+"@esbuild/linux-ppc64@0.19.12":
+  version "0.19.12"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-ppc64/-/linux-ppc64-0.19.12.tgz#adb67dadb73656849f63cd522f5ecb351dd8dee8"
+  integrity sha512-nYJA2/QPimDQOh1rKWedNOe3Gfc8PabU7HT3iXWtNUbRzXS9+vgB0Fjaqr//XNbd82mCxHzik2qotuI89cfixg==
+
 "@esbuild/linux-ppc64@0.20.2":
   version "0.20.2"
   resolved "https://registry.yarnpkg.com/@esbuild/linux-ppc64/-/linux-ppc64-0.20.2.tgz#8d252f0b7756ffd6d1cbde5ea67ff8fd20437f20"
@@ -729,6 +801,11 @@
   resolved "https://registry.yarnpkg.com/@esbuild/linux-riscv64/-/linux-riscv64-0.17.19.tgz#7f49373df463cd9f41dc34f9b2262d771688bf09"
   integrity sha512-FC3nUAWhvFoutlhAkgHf8f5HwFWUL6bYdvLc/TTuxKlvLi3+pPzdZiFKSWz/PF30TB1K19SuCxDTI5KcqASJqA==
 
+"@esbuild/linux-riscv64@0.19.12":
+  version "0.19.12"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-riscv64/-/linux-riscv64-0.19.12.tgz#11bc0698bf0a2abf8727f1c7ace2112612c15adf"
+  integrity sha512-2MueBrlPQCw5dVJJpQdUYgeqIzDQgw3QtiAHUC4RBz9FXPrskyyU3VI1hw7C0BSKB9OduwSJ79FTCqtGMWqJHg==
+
 "@esbuild/linux-riscv64@0.20.2":
   version "0.20.2"
   resolved "https://registry.yarnpkg.com/@esbuild/linux-riscv64/-/linux-riscv64-0.20.2.tgz#19f6dcdb14409dae607f66ca1181dd4e9db81300"
@@ -739,6 +816,11 @@
   resolved "https://registry.yarnpkg.com/@esbuild/linux-s390x/-/linux-s390x-0.17.19.tgz#e2afd1afcaf63afe2c7d9ceacd28ec57c77f8829"
   integrity sha512-IbFsFbxMWLuKEbH+7sTkKzL6NJmG2vRyy6K7JJo55w+8xDk7RElYn6xvXtDW8HCfoKBFK69f3pgBJSUSQPr+4Q==
 
+"@esbuild/linux-s390x@0.19.12":
+  version "0.19.12"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-s390x/-/linux-s390x-0.19.12.tgz#e86fb8ffba7c5c92ba91fc3b27ed5a70196c3cc8"
+  integrity sha512-+Pil1Nv3Umes4m3AZKqA2anfhJiVmNCYkPchwFJNEJN5QxmTs1uzyy4TvmDrCRNT2ApwSari7ZIgrPeUx4UZDg==
+
 "@esbuild/linux-s390x@0.20.2":
   version "0.20.2"
   resolved "https://registry.yarnpkg.com/@esbuild/linux-s390x/-/linux-s390x-0.20.2.tgz#3c830c90f1a5d7dd1473d5595ea4ebb920988685"
@@ -749,6 +831,11 @@
   resolved "https://registry.yarnpkg.com/@esbuild/linux-x64/-/linux-x64-0.17.19.tgz#8a0e9738b1635f0c53389e515ae83826dec22aa4"
   integrity sha512-68ngA9lg2H6zkZcyp22tsVt38mlhWde8l3eJLWkyLrp4HwMUr3c1s/M2t7+kHIhvMjglIBrFpncX1SzMckomGw==
 
+"@esbuild/linux-x64@0.19.12":
+  version "0.19.12"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-x64/-/linux-x64-0.19.12.tgz#5f37cfdc705aea687dfe5dfbec086a05acfe9c78"
+  integrity sha512-B71g1QpxfwBvNrfyJdVDexenDIt1CiDN1TIXLbhOw0KhJzE78KIFGX6OJ9MrtC0oOqMWf+0xop4qEU8JrJTwCg==
+
 "@esbuild/linux-x64@0.20.2":
   version "0.20.2"
   resolved "https://registry.yarnpkg.com/@esbuild/linux-x64/-/linux-x64-0.20.2.tgz#86eca35203afc0d9de0694c64ec0ab0a378f6fff"
@@ -759,6 +846,11 @@
   resolved "https://registry.yarnpkg.com/@esbuild/netbsd-x64/-/netbsd-x64-0.17.19.tgz#c29fb2453c6b7ddef9a35e2c18b37bda1ae5c462"
   integrity sha512-CwFq42rXCR8TYIjIfpXCbRX0rp1jo6cPIUPSaWwzbVI4aOfX96OXY8M6KNmtPcg7QjYeDmN+DD0Wp3LaBOLf4Q==
 
+"@esbuild/netbsd-x64@0.19.12":
+  version "0.19.12"
+  resolved "https://registry.yarnpkg.com/@esbuild/netbsd-x64/-/netbsd-x64-0.19.12.tgz#29da566a75324e0d0dd7e47519ba2f7ef168657b"
+  integrity sha512-3ltjQ7n1owJgFbuC61Oj++XhtzmymoCihNFgT84UAmJnxJfm4sYCiSLTXZtE00VWYpPMYc+ZQmB6xbSdVh0JWA==
+
 "@esbuild/netbsd-x64@0.20.2":
   version "0.20.2"
   resolved "https://registry.yarnpkg.com/@esbuild/netbsd-x64/-/netbsd-x64-0.20.2.tgz#e771c8eb0e0f6e1877ffd4220036b98aed5915e6"
@@ -769,6 +861,11 @@
   resolved "https://registry.yarnpkg.com/@esbuild/openbsd-x64/-/openbsd-x64-0.17.19.tgz#95e75a391403cb10297280d524d66ce04c920691"
   integrity sha512-cnq5brJYrSZ2CF6c35eCmviIN3k3RczmHz8eYaVlNasVqsNY+JKohZU5MKmaOI+KkllCdzOKKdPs762VCPC20g==
 
+"@esbuild/openbsd-x64@0.19.12":
+  version "0.19.12"
+  resolved "https://registry.yarnpkg.com/@esbuild/openbsd-x64/-/openbsd-x64-0.19.12.tgz#306c0acbdb5a99c95be98bdd1d47c916e7dc3ff0"
+  integrity sha512-RbrfTB9SWsr0kWmb9srfF+L933uMDdu9BIzdA7os2t0TXhCRjrQyCeOt6wVxr79CKD4c+p+YhCj31HBkYcXebw==
+
 "@esbuild/openbsd-x64@0.20.2":
   version "0.20.2"
   resolved "https://registry.yarnpkg.com/@esbuild/openbsd-x64/-/openbsd-x64-0.20.2.tgz#9a795ae4b4e37e674f0f4d716f3e226dd7c39baf"
@@ -779,6 +876,11 @@
   resolved "https://registry.yarnpkg.com/@esbuild/sunos-x64/-/sunos-x64-0.17.19.tgz#722eaf057b83c2575937d3ffe5aeb16540da7273"
   integrity sha512-vCRT7yP3zX+bKWFeP/zdS6SqdWB8OIpaRq/mbXQxTGHnIxspRtigpkUcDMlSCOejlHowLqII7K2JKevwyRP2rg==
 
+"@esbuild/sunos-x64@0.19.12":
+  version "0.19.12"
+  resolved "https://registry.yarnpkg.com/@esbuild/sunos-x64/-/sunos-x64-0.19.12.tgz#0933eaab9af8b9b2c930236f62aae3fc593faf30"
+  integrity sha512-HKjJwRrW8uWtCQnQOz9qcU3mUZhTUQvi56Q8DPTLLB+DawoiQdjsYq+j+D3s9I8VFtDr+F9CjgXKKC4ss89IeA==
+
 "@esbuild/sunos-x64@0.20.2":
   version "0.20.2"
   resolved "https://registry.yarnpkg.com/@esbuild/sunos-x64/-/sunos-x64-0.20.2.tgz#7df23b61a497b8ac189def6e25a95673caedb03f"
@@ -789,6 +891,11 @@
   resolved "https://registry.yarnpkg.com/@esbuild/win32-arm64/-/win32-arm64-0.17.19.tgz#9aa9dc074399288bdcdd283443e9aeb6b9552b6f"
   integrity sha512-yYx+8jwowUstVdorcMdNlzklLYhPxjniHWFKgRqH7IFlUEa0Umu3KuYplf1HUZZ422e3NU9F4LGb+4O0Kdcaag==
 
+"@esbuild/win32-arm64@0.19.12":
+  version "0.19.12"
+  resolved "https://registry.yarnpkg.com/@esbuild/win32-arm64/-/win32-arm64-0.19.12.tgz#773bdbaa1971b36db2f6560088639ccd1e6773ae"
+  integrity sha512-URgtR1dJnmGvX864pn1B2YUYNzjmXkuJOIqG2HdU62MVS4EHpU2946OZoTMnRUHklGtJdJZ33QfzdjGACXhn1A==
+
 "@esbuild/win32-arm64@0.20.2":
   version "0.20.2"
   resolved "https://registry.yarnpkg.com/@esbuild/win32-arm64/-/win32-arm64-0.20.2.tgz#f1ae5abf9ca052ae11c1bc806fb4c0f519bacf90"
@@ -799,6 +906,11 @@
   resolved "https://registry.yarnpkg.com/@esbuild/win32-ia32/-/win32-ia32-0.17.19.tgz#95ad43c62ad62485e210f6299c7b2571e48d2b03"
   integrity sha512-eggDKanJszUtCdlVs0RB+h35wNlb5v4TWEkq4vZcmVt5u/HiDZrTXe2bWFQUez3RgNHwx/x4sk5++4NSSicKkw==
 
+"@esbuild/win32-ia32@0.19.12":
+  version "0.19.12"
+  resolved "https://registry.yarnpkg.com/@esbuild/win32-ia32/-/win32-ia32-0.19.12.tgz#000516cad06354cc84a73f0943a4aa690ef6fd67"
+  integrity sha512-+ZOE6pUkMOJfmxmBZElNOx72NKpIa/HFOMGzu8fqzQJ5kgf6aTGrcJaFsNiVMH4JKpMipyK+7k0n2UXN7a8YKQ==
+
 "@esbuild/win32-ia32@0.20.2":
   version "0.20.2"
   resolved "https://registry.yarnpkg.com/@esbuild/win32-ia32/-/win32-ia32-0.20.2.tgz#241fe62c34d8e8461cd708277813e1d0ba55ce23"
@@ -809,6 +921,11 @@
   resolved "https://registry.yarnpkg.com/@esbuild/win32-x64/-/win32-x64-0.17.19.tgz#8cfaf2ff603e9aabb910e9c0558c26cf32744061"
   integrity sha512-lAhycmKnVOuRYNtRtatQR1LPQf2oYCkRGkSFnseDAKPl8lu5SOsK/e1sXe5a0Pc5kHIHe6P2I/ilntNv2xf3cA==
 
+"@esbuild/win32-x64@0.19.12":
+  version "0.19.12"
+  resolved "https://registry.yarnpkg.com/@esbuild/win32-x64/-/win32-x64-0.19.12.tgz#c57c8afbb4054a3ab8317591a0b7320360b444ae"
+  integrity sha512-T1QyPSDCyMXaO3pzBkF96E8xMkiRYbUEZADd29SyPGabqxMViNoii+NcK7eWJAEoU6RZyEm5lVSIjTmcdoB9HA==
+
 "@esbuild/win32-x64@0.20.2":
   version "0.20.2"
   resolved "https://registry.yarnpkg.com/@esbuild/win32-x64/-/win32-x64-0.20.2.tgz#9c907b21e30a52db959ba4f80bb01a0cc403d5cc"
@@ -821,7 +938,7 @@
   dependencies:
     "@floating-ui/utils" "^0.2.1"
 
-"@floating-ui/dom@^1.0.1", "@floating-ui/dom@^1.2.1":
+"@floating-ui/dom@^1.0.1", "@floating-ui/dom@^1.6.1":
   version "1.6.3"
   resolved "https://registry.yarnpkg.com/@floating-ui/dom/-/dom-1.6.3.tgz#954e46c1dd3ad48e49db9ada7218b0985cee75ef"
   integrity sha512-RnDthu3mzPlQ31Ss/BTwQ1zjzIhr3lk1gZB1OC56h/1vEtaXkESrOqL5fQVMfXpwGtRwX+YsZBdyHtJMQnkArw==
@@ -829,21 +946,21 @@
     "@floating-ui/core" "^1.0.0"
     "@floating-ui/utils" "^0.2.0"
 
-"@floating-ui/react-dom@^1.3.0":
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/@floating-ui/react-dom/-/react-dom-1.3.0.tgz#4d35d416eb19811c2b0e9271100a6aa18c1579b3"
-  integrity sha512-htwHm67Ji5E/pROEAr7f8IKFShuiCKHwUC/UY4vC3I5jiSvGFAYnSYiZO5MlGmads+QqvUkR9ANHEguGrDv72g==
+"@floating-ui/react-dom@^2.0.0":
+  version "2.0.8"
+  resolved "https://registry.yarnpkg.com/@floating-ui/react-dom/-/react-dom-2.0.8.tgz#afc24f9756d1b433e1fe0d047c24bd4d9cefaa5d"
+  integrity sha512-HOdqOt3R3OGeTKidaLvJKcgg75S6tibQ3Tif4eyd91QnIJWr0NLvoXFpJA/j8HqkFSL68GDca9AuyWEHlhyClw==
   dependencies:
-    "@floating-ui/dom" "^1.2.1"
+    "@floating-ui/dom" "^1.6.1"
 
-"@floating-ui/react@^0.19.1":
-  version "0.19.2"
-  resolved "https://registry.yarnpkg.com/@floating-ui/react/-/react-0.19.2.tgz#c6e4d2097ed0dca665a7c042ddf9cdecc95e9412"
-  integrity sha512-JyNk4A0Ezirq8FlXECvRtQOX/iBe5Ize0W/pLkrZjfHW9GUV7Xnq6zm6fyZuQzaHHqEnVizmvlA96e1/CkZv+w==
+"@floating-ui/react@^0.26.9":
+  version "0.26.12"
+  resolved "https://registry.yarnpkg.com/@floating-ui/react/-/react-0.26.12.tgz#6908f774d8e3167d89b37fd83be975c7e5d8be99"
+  integrity sha512-D09o62HrWdIkstF2kGekIKAC0/N/Dl6wo3CQsnLcOmO3LkW6Ik8uIb3kw8JYkwxNCcg+uJ2bpWUiIijTBep05w==
   dependencies:
-    "@floating-ui/react-dom" "^1.3.0"
-    aria-hidden "^1.1.3"
-    tabbable "^6.0.1"
+    "@floating-ui/react-dom" "^2.0.0"
+    "@floating-ui/utils" "^0.2.0"
+    tabbable "^6.0.0"
 
 "@floating-ui/utils@^0.2.0", "@floating-ui/utils@^0.2.1":
   version "0.2.1"
@@ -996,26 +1113,26 @@
   dependencies:
     "@lezer/common" "^1.0.0"
 
-"@lingui/babel-plugin-extract-messages@4.8.0":
-  version "4.8.0"
-  resolved "https://registry.yarnpkg.com/@lingui/babel-plugin-extract-messages/-/babel-plugin-extract-messages-4.8.0.tgz#8e8cf4b335393b5db148b493a93b1348d6875463"
-  integrity sha512-xTYhK97eS3/MCaxxgNXPSrsDorYRvhycf3hhbARAi5fCgxFh0MihIoM6NaPrLWndccOD+iHiBlOGhyKa0rVXbw==
+"@lingui/babel-plugin-extract-messages@4.10.0":
+  version "4.10.0"
+  resolved "https://registry.yarnpkg.com/@lingui/babel-plugin-extract-messages/-/babel-plugin-extract-messages-4.10.0.tgz#208f0c3dccc8c7ead189a8875ad83c523903a794"
+  integrity sha512-vhLQLfi1ISSo5vDFDyUoPgjBP6Cy2+7rrQWj9vU4GUEtvxUWNnr0EvrLnRBHjVU4mdrpQi/n7DH5PXuMbveVhA==
 
-"@lingui/cli@^4.7.2":
-  version "4.8.0"
-  resolved "https://registry.yarnpkg.com/@lingui/cli/-/cli-4.8.0.tgz#a0a72e7ec53ce9cf0a4a7e3e79e804ace145a1e6"
-  integrity sha512-MW4KtT9+PKq18XjjL++dHtIiIVIRafOgzwlqZ6aSkYM6pb4Q/F/Glm6cqj3SJTEdmWL5RS/2WrXGkrrMSG2ixg==
+"@lingui/cli@^4.10.0":
+  version "4.10.0"
+  resolved "https://registry.yarnpkg.com/@lingui/cli/-/cli-4.10.0.tgz#128d1a073b4940977950b59ee2f51e808d0de964"
+  integrity sha512-gG0Qnv1ExUlN4t/5wMYX9fXD8QilQn6n+gPwmDbWPDPX7zubW8OJADU2PNSSPDsCIzNGW7Hfx/zPwaocn3V8Lw==
   dependencies:
     "@babel/core" "^7.21.0"
     "@babel/generator" "^7.21.1"
     "@babel/parser" "^7.21.2"
     "@babel/runtime" "^7.21.0"
     "@babel/types" "^7.21.2"
-    "@lingui/babel-plugin-extract-messages" "4.8.0"
-    "@lingui/conf" "4.8.0"
-    "@lingui/core" "4.8.0"
-    "@lingui/format-po" "4.8.0"
-    "@lingui/message-utils" "4.8.0"
+    "@lingui/babel-plugin-extract-messages" "4.10.0"
+    "@lingui/conf" "4.10.0"
+    "@lingui/core" "4.10.0"
+    "@lingui/format-po" "4.10.0"
+    "@lingui/message-utils" "4.10.0"
     babel-plugin-macros "^3.0.1"
     chalk "^4.1.0"
     chokidar "3.5.1"
@@ -1048,19 +1165,7 @@
     jiti "^1.17.1"
     lodash.get "^4.4.2"
 
-"@lingui/conf@4.8.0":
-  version "4.8.0"
-  resolved "https://registry.yarnpkg.com/@lingui/conf/-/conf-4.8.0.tgz#d2675806fcafecc6ad29d30d1e273fd28835d20e"
-  integrity sha512-7Vfa25kjY0KBHxrIDIF5QM7jCFRkZO5OjmsJ7xnTYwYhU91gytWcCz7pMn20rLW931w+K+QyIGBroHu60Sj3zA==
-  dependencies:
-    "@babel/runtime" "^7.20.13"
-    chalk "^4.1.0"
-    cosmiconfig "^8.0.0"
-    jest-validate "^29.4.3"
-    jiti "^1.17.1"
-    lodash.get "^4.4.2"
-
-"@lingui/core@4.10.0", "@lingui/core@^4.7.1":
+"@lingui/core@4.10.0", "@lingui/core@^4.10.0":
   version "4.10.0"
   resolved "https://registry.yarnpkg.com/@lingui/core/-/core-4.10.0.tgz#7944cd49e3f6778f7a7be98f7ab64ccb0ec53b5f"
   integrity sha512-KfwkghuCVFt3AxZlAIotTvIcopIpHj4prwG9v6iyrksLXoxKPQMBXutYGl/EIZE1KYQZdR6rjAaoilMl0pSGKA==
@@ -1069,22 +1174,13 @@
     "@lingui/message-utils" "4.10.0"
     unraw "^3.0.0"
 
-"@lingui/core@4.8.0":
-  version "4.8.0"
-  resolved "https://registry.yarnpkg.com/@lingui/core/-/core-4.8.0.tgz#9d94857e50e82b118d75074cbed41c1358c76ae0"
-  integrity sha512-csETD7Vi2SSvH1F+gASGPf9TISoQFxA3YTB7MbRthtqK73TtWbEAmNtztIYPjPtNQemd7GwFztT/X6OANbjYhA==
+"@lingui/format-po@4.10.0":
+  version "4.10.0"
+  resolved "https://registry.yarnpkg.com/@lingui/format-po/-/format-po-4.10.0.tgz#f86fbd093f832373ccd129effec31b1047771dc9"
+  integrity sha512-BhyC5Xmx9yJXFlNAUBboTT+k21sT8EkBW9uPRLaekkCUfYSj6hX+0lz/CJBurIUH/PDZJFucvzYaIIAFnEI4+Q==
   dependencies:
-    "@babel/runtime" "^7.20.13"
-    "@lingui/message-utils" "4.8.0"
-    unraw "^3.0.0"
-
-"@lingui/format-po@4.8.0":
-  version "4.8.0"
-  resolved "https://registry.yarnpkg.com/@lingui/format-po/-/format-po-4.8.0.tgz#00bbee70efe5025f8022b746596aaf51d77f0b9d"
-  integrity sha512-EnVZInemKaVChkh/kecZqxktwFgsb5dpF9cAm6FVH+xdKvVLKViWPcZSUPR2y4I3YS8eAtfpBapwoyAVeQo68A==
-  dependencies:
-    "@lingui/conf" "4.8.0"
-    "@lingui/message-utils" "4.8.0"
+    "@lingui/conf" "4.10.0"
+    "@lingui/message-utils" "4.10.0"
     date-fns "^3.6.0"
     pofile "^1.1.4"
 
@@ -1107,14 +1203,6 @@
     "@messageformat/parser" "^5.0.0"
     js-sha256 "^0.10.1"
 
-"@lingui/message-utils@4.8.0":
-  version "4.8.0"
-  resolved "https://registry.yarnpkg.com/@lingui/message-utils/-/message-utils-4.8.0.tgz#2d2004e8b78d37f7f59d1d6184d0c1f25f708a8f"
-  integrity sha512-iGTGhtlREy2MwZU9mgs3jydCmf/ik+7th9z1NznNzUBJVcebLD/KPMWRJEkXHkVghLWeCxulvh8PZ08CmyuCzQ==
-  dependencies:
-    "@messageformat/parser" "^5.0.0"
-    js-sha256 "^0.10.1"
-
 "@lingui/react@^4.10.0":
   version "4.10.0"
   resolved "https://registry.yarnpkg.com/@lingui/react/-/react-4.10.0.tgz#56dce040659c94c1125640f8e399f68164b44ade"
@@ -1123,87 +1211,79 @@
     "@babel/runtime" "^7.20.13"
     "@lingui/core" "4.10.0"
 
-"@mantine/carousel@<7":
-  version "6.0.21"
-  resolved "https://registry.yarnpkg.com/@mantine/carousel/-/carousel-6.0.21.tgz#3e2a77e365014b314f90e8b474b350432c926640"
-  integrity sha512-cQAQ5RlVhSrYA8aez/euzs5nQKcGcwxVTS/gf46GEZ0gcDJXlymZPbc2OopH/WDczEaMWOF7wz8R9+uG1hYNCg==
-  dependencies:
-    "@mantine/utils" "6.0.21"
+"@mantine/carousel@^7.8.0":
+  version "7.8.0"
+  resolved "https://registry.yarnpkg.com/@mantine/carousel/-/carousel-7.8.0.tgz#d49b3a57cebfc9c774467bd4c46df1005eb765f4"
+  integrity sha512-nxuLtZ4N4KJaayab5KuaffYhiVi4UaIjywkgQiNfTxABlgFdERNfo5if9sSMyisL0r3RUPJBfLkyi8A4fEC8GQ==
 
-"@mantine/core@<7":
-  version "6.0.21"
-  resolved "https://registry.yarnpkg.com/@mantine/core/-/core-6.0.21.tgz#6e3a1b8d0f6869518a644d5f5e3d55a5db7e1e51"
-  integrity sha512-Kx4RrRfv0I+cOCIcsq/UA2aWcYLyXgW3aluAuW870OdXnbII6qg7RW28D+r9D76SHPxWFKwIKwmcucAG08Divg==
+"@mantine/core@^7.8.0":
+  version "7.8.0"
+  resolved "https://registry.yarnpkg.com/@mantine/core/-/core-7.8.0.tgz#b4bbd82ea2f1a25f5fb3d11ae5583cf80ecd8383"
+  integrity sha512-19RKuNdJ/s8pZjy2w2rvTsl4ybi/XM6vf+Kc0WY7kpLFCvdG+/UxNi1MuJF8t2Zs0QSFeb/H5yZQNe0XPbegHw==
   dependencies:
-    "@floating-ui/react" "^0.19.1"
-    "@mantine/styles" "6.0.21"
-    "@mantine/utils" "6.0.21"
-    "@radix-ui/react-scroll-area" "1.0.2"
-    react-remove-scroll "^2.5.5"
-    react-textarea-autosize "8.3.4"
+    "@floating-ui/react" "^0.26.9"
+    clsx "2.1.0"
+    react-number-format "^5.3.1"
+    react-remove-scroll "^2.5.7"
+    react-textarea-autosize "8.5.3"
+    type-fest "^4.12.0"
 
-"@mantine/dates@<7":
-  version "6.0.21"
-  resolved "https://registry.yarnpkg.com/@mantine/dates/-/dates-6.0.21.tgz#a140da22bd4188aff446ddb5d3bcf37b658b0608"
-  integrity sha512-nSX7MxNkHyyDJqEJOT7Wg930jBfgWz+3pnoWo601cYDvFjh5GgcRz66v36rnMJFK1/56k5G9rWzUOzuM94j6hg==
+"@mantine/dates@^7.8.0":
+  version "7.8.0"
+  resolved "https://registry.yarnpkg.com/@mantine/dates/-/dates-7.8.0.tgz#a8785030000487158e1bd23655ea26245bbf299a"
+  integrity sha512-9jjiYMwP3jQOpOLKkjhp9uf2BGhtEbOnOzyAlpLOS0CJJlYtB0tO6dJ3JaogrOZ/Yfee7ZUBgouCG5EkR4/qtQ==
   dependencies:
-    "@mantine/utils" "6.0.21"
+    clsx "2.1.0"
 
-"@mantine/dropzone@<7":
-  version "6.0.21"
-  resolved "https://registry.yarnpkg.com/@mantine/dropzone/-/dropzone-6.0.21.tgz#65867e5bbfe59094afc6751206cfc1466744f72b"
-  integrity sha512-v63tL4x7R1CvBNnxJVaVPhBVnQcfROQvyOV0xK/v0ZGNAzFxjJoiCRMGdlBjxnEawM0dRhNs/46ItpBgjQIr6g==
+"@mantine/dropzone@^7.8.0":
+  version "7.8.0"
+  resolved "https://registry.yarnpkg.com/@mantine/dropzone/-/dropzone-7.8.0.tgz#f962c72adb585ddc7706dca680102728a52b2de7"
+  integrity sha512-rpNTR3NASvI3BnqhY5wg3BDhxkABT9UoZEGRrOGnS3YU7SYXg5rT9ch5Cm4iPwMNdwsyAIU6K2ii4wWk40dRpg==
   dependencies:
-    "@mantine/utils" "6.0.21"
-    react-dropzone "14.2.3"
+    react-dropzone-esm "15.0.1"
 
-"@mantine/form@<8":
-  version "7.7.1"
-  resolved "https://registry.yarnpkg.com/@mantine/form/-/form-7.7.1.tgz#bf438f4deb96ed615d1fddd231148512d835cf4d"
-  integrity sha512-NRbVdHsbs634dZIq6IQhqL0uCtF4nYK3OPuPhkBzQ3faqri7TZvYgVQU4KGFTMqPl0UdwC6TkrnnqTZBK6HJMw==
+"@mantine/form@^7.8.0":
+  version "7.8.0"
+  resolved "https://registry.yarnpkg.com/@mantine/form/-/form-7.8.0.tgz#3f16b2e0124c65286892ed50181d192ae03d988b"
+  integrity sha512-Qn3/69zGt/p3wyMwGz2V0+FbmvqC2/PvXaeyO0a4CnwhROeE7ObyCKXDcBmgapOSBHr/7wFvMeTDMaTMfe3DXw==
   dependencies:
     fast-deep-equal "^3.1.3"
     klona "^2.0.6"
 
-"@mantine/hooks@<7":
-  version "6.0.21"
-  resolved "https://registry.yarnpkg.com/@mantine/hooks/-/hooks-6.0.21.tgz#bc009d8380ad18455b90f3ddaf484de16a13da95"
-  integrity sha512-sYwt5wai25W6VnqHbS5eamey30/HD5dNXaZuaVEAJ2i2bBv8C0cCiczygMDpAFiSYdXoSMRr/SZ2CrrPTzeNew==
+"@mantine/hooks@^7.8.0":
+  version "7.8.0"
+  resolved "https://registry.yarnpkg.com/@mantine/hooks/-/hooks-7.8.0.tgz#fc32e07746689459c4b049dc581d1dbda5545686"
+  integrity sha512-+70fkgjhVJeJ+nJqnburIM3UAsfvxat1Low9HMPobLbv64FIdB4Nzu5ct3qojNQ58r5sK01tg5UoFIJYslaVrg==
 
-"@mantine/modals@<7":
-  version "6.0.21"
-  resolved "https://registry.yarnpkg.com/@mantine/modals/-/modals-6.0.21.tgz#6d7f89b55d1817c0a20b10989bf69ecb03f7a642"
-  integrity sha512-Gx2D/ZHMUuYF197JKMWey4K9FeGP9rxYp4lmAEXUrjXiST2fEhLZOdiD75KuOHXd1/sYAU9NcNRo9wXrlF/gUA==
+"@mantine/modals@^7.8.0":
+  version "7.8.0"
+  resolved "https://registry.yarnpkg.com/@mantine/modals/-/modals-7.8.0.tgz#1960f34a7d0c45490465d61acf5da9a0c65610ca"
+  integrity sha512-/Kxquz8U7xau9PoqPi5Pjysfnq8b48VRAMp62B+SsPWNTH47R0F7dYRYpLQ2/0VU+OWGY0lOshxpgA61sZ3IPA==
+
+"@mantine/notifications@^7.8.0":
+  version "7.8.0"
+  resolved "https://registry.yarnpkg.com/@mantine/notifications/-/notifications-7.8.0.tgz#90b97ca3191951bffea5da6a6ce9e607daf37bf5"
+  integrity sha512-O7BnaCcwVg38fh+gSZ6GEsTFPPgJAiOTrRkOMXG+7pNqJT9YNa9KDZhiPZzn3WV4wexncjyK32a8gGSVtf+kdg==
   dependencies:
-    "@mantine/utils" "6.0.21"
+    "@mantine/store" "7.8.0"
+    react-transition-group "4.4.5"
 
-"@mantine/notifications@<7":
-  version "6.0.21"
-  resolved "https://registry.yarnpkg.com/@mantine/notifications/-/notifications-6.0.21.tgz#bec53664abce13a2cc61a1be1840d82a746f62da"
-  integrity sha512-qsrqxuJHK8b67sf9Pfk+xyhvpf9jMsivW8vchfnJfjv7yz1lLvezjytMFp4fMDoYhjHnDPOEc/YFockK4muhOw==
+"@mantine/spotlight@^7.8.0":
+  version "7.8.0"
+  resolved "https://registry.yarnpkg.com/@mantine/spotlight/-/spotlight-7.8.0.tgz#6cb83c21ed2dc1a2e4d5aff4205a7c71785f053f"
+  integrity sha512-HpYWxYyO9lnFwWFz8+M1KOzL7hpNPQVqUwD7xJec6XwlnisiOM9Qw0g2tvgxwDNm1rETOw8O3mPohMXy46D7Eg==
   dependencies:
-    "@mantine/utils" "6.0.21"
-    react-transition-group "4.4.2"
+    "@mantine/store" "7.8.0"
 
-"@mantine/spotlight@<7":
-  version "6.0.21"
-  resolved "https://registry.yarnpkg.com/@mantine/spotlight/-/spotlight-6.0.21.tgz#98f507bd3429fee1f2b57ad5ef9f88d1d8d8ff32"
-  integrity sha512-xJqF2Vpn8s6I4mSF+iCi7IzqL8iaqbvq0RcYlF1usLZYW2HrArX31s1r11DmzqM1PIuBQUhquW8jUXx/MZy3oA==
-  dependencies:
-    "@mantine/utils" "6.0.21"
+"@mantine/store@7.8.0":
+  version "7.8.0"
+  resolved "https://registry.yarnpkg.com/@mantine/store/-/store-7.8.0.tgz#d3ac70a96b71cbc0a4ef506bf751d8e290666d28"
+  integrity sha512-oN/BXGYdUywRi0zj9ppaShv2sw5QON2DaRisB4ewJ5tDDz8qyeckgdE0NMaaU2TwpoScs8ibSnOVWV5y+vYkMA==
 
-"@mantine/styles@6.0.21":
-  version "6.0.21"
-  resolved "https://registry.yarnpkg.com/@mantine/styles/-/styles-6.0.21.tgz#8ea097fc76cbb3ed55f5cfd719d2f910aff5031b"
-  integrity sha512-PVtL7XHUiD/B5/kZ/QvZOZZQQOj12QcRs3Q6nPoqaoPcOX5+S7bMZLMH0iLtcGq5OODYk0uxlvuJkOZGoPj8Mg==
-  dependencies:
-    clsx "1.1.1"
-    csstype "3.0.9"
-
-"@mantine/utils@6.0.21":
-  version "6.0.21"
-  resolved "https://registry.yarnpkg.com/@mantine/utils/-/utils-6.0.21.tgz#6185506e91cba3e308aaa8ea9ababc8e767995d6"
-  integrity sha512-33RVDRop5jiWFao3HKd3Yp7A9mEq4HAJxJPTuYm1NkdqX6aTKOQK7wT8v8itVodBp+sb4cJK6ZVdD1UurK/txQ==
+"@mantine/vanilla-extract@^7.8.0":
+  version "7.8.0"
+  resolved "https://registry.yarnpkg.com/@mantine/vanilla-extract/-/vanilla-extract-7.8.0.tgz#fa2a10af01182bff54274ef2596763059992cc00"
+  integrity sha512-fdww8bZpWpTijalLGCdE56NZefhUuzi+jjboD2cCIrI6+g6j08NMjb/xmfmH6KkvZ+znoIiJQST/qJ0kE3KNyg==
 
 "@messageformat/parser@^5.0.0":
   version "5.1.0"
@@ -1228,284 +1308,199 @@
   dependencies:
     playwright "1.43.1"
 
-"@radix-ui/number@1.0.0":
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/@radix-ui/number/-/number-1.0.0.tgz#4c536161d0de750b3f5d55860fc3de46264f897b"
-  integrity sha512-Ofwh/1HX69ZfJRiRBMTy7rgjAzHmwe4kW9C9Y99HTRUcYLUuVT0KESFj15rPjRgKJs20GPq8Bm5aEDJ8DuA3vA==
-  dependencies:
-    "@babel/runtime" "^7.13.10"
-
-"@radix-ui/primitive@1.0.0":
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/@radix-ui/primitive/-/primitive-1.0.0.tgz#e1d8ef30b10ea10e69c76e896f608d9276352253"
-  integrity sha512-3e7rn8FDMin4CgeL7Z/49smCA3rFYY3Ha2rUQ7HRWFadS5iCRw08ZgVT1LaNTCNqgvrUiyczLflrVrF0SRQtNA==
-  dependencies:
-    "@babel/runtime" "^7.13.10"
-
-"@radix-ui/react-compose-refs@1.0.0":
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/@radix-ui/react-compose-refs/-/react-compose-refs-1.0.0.tgz#37595b1f16ec7f228d698590e78eeed18ff218ae"
-  integrity sha512-0KaSv6sx787/hK3eF53iOkiSLwAGlFMx5lotrqD2pTjB18KbybKoEIgkNZTKC60YECDQTKGTRcDBILwZVqVKvA==
-  dependencies:
-    "@babel/runtime" "^7.13.10"
-
-"@radix-ui/react-context@1.0.0":
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/@radix-ui/react-context/-/react-context-1.0.0.tgz#f38e30c5859a9fb5e9aa9a9da452ee3ed9e0aee0"
-  integrity sha512-1pVM9RfOQ+n/N5PJK33kRSKsr1glNxomxONs5c49MliinBY6Yw2Q995qfBUUo0/Mbg05B/sGA0gkgPI7kmSHBg==
-  dependencies:
-    "@babel/runtime" "^7.13.10"
-
-"@radix-ui/react-direction@1.0.0":
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/@radix-ui/react-direction/-/react-direction-1.0.0.tgz#a2e0b552352459ecf96342c79949dd833c1e6e45"
-  integrity sha512-2HV05lGUgYcA6xgLQ4BKPDmtL+QbIZYH5fCOTAOOcJ5O0QbWS3i9lKaurLzliYUDhORI2Qr3pyjhJh44lKA3rQ==
-  dependencies:
-    "@babel/runtime" "^7.13.10"
-
-"@radix-ui/react-presence@1.0.0":
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/@radix-ui/react-presence/-/react-presence-1.0.0.tgz#814fe46df11f9a468808a6010e3f3ca7e0b2e84a"
-  integrity sha512-A+6XEvN01NfVWiKu38ybawfHsBjWum42MRPnEuqPsBZ4eV7e/7K321B5VgYMPv3Xx5An6o1/l9ZuDBgmcmWK3w==
-  dependencies:
-    "@babel/runtime" "^7.13.10"
-    "@radix-ui/react-compose-refs" "1.0.0"
-    "@radix-ui/react-use-layout-effect" "1.0.0"
-
-"@radix-ui/react-primitive@1.0.1":
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/@radix-ui/react-primitive/-/react-primitive-1.0.1.tgz#c1ebcce283dd2f02e4fbefdaa49d1cb13dbc990a"
-  integrity sha512-fHbmislWVkZaIdeF6GZxF0A/NH/3BjrGIYj+Ae6eTmTCr7EB0RQAAVEiqsXK6p3/JcRqVSBQoceZroj30Jj3XA==
-  dependencies:
-    "@babel/runtime" "^7.13.10"
-    "@radix-ui/react-slot" "1.0.1"
-
-"@radix-ui/react-scroll-area@1.0.2":
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/@radix-ui/react-scroll-area/-/react-scroll-area-1.0.2.tgz#26c906d351b56835c0301126b24574c9e9c7b93b"
-  integrity sha512-k8VseTxI26kcKJaX0HPwkvlNBPTs56JRdYzcZ/vzrNUkDlvXBy8sMc7WvCpYzZkHgb+hd72VW9MqkqecGtuNgg==
-  dependencies:
-    "@babel/runtime" "^7.13.10"
-    "@radix-ui/number" "1.0.0"
-    "@radix-ui/primitive" "1.0.0"
-    "@radix-ui/react-compose-refs" "1.0.0"
-    "@radix-ui/react-context" "1.0.0"
-    "@radix-ui/react-direction" "1.0.0"
-    "@radix-ui/react-presence" "1.0.0"
-    "@radix-ui/react-primitive" "1.0.1"
-    "@radix-ui/react-use-callback-ref" "1.0.0"
-    "@radix-ui/react-use-layout-effect" "1.0.0"
-
-"@radix-ui/react-slot@1.0.1":
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/@radix-ui/react-slot/-/react-slot-1.0.1.tgz#e7868c669c974d649070e9ecbec0b367ee0b4d81"
-  integrity sha512-avutXAFL1ehGvAXtPquu0YK5oz6ctS474iM3vNGQIkswrVhdrS52e3uoMQBzZhNRAIE0jBnUyXWNmSjGHhCFcw==
-  dependencies:
-    "@babel/runtime" "^7.13.10"
-    "@radix-ui/react-compose-refs" "1.0.0"
-
-"@radix-ui/react-use-callback-ref@1.0.0":
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.0.0.tgz#9e7b8b6b4946fe3cbe8f748c82a2cce54e7b6a90"
-  integrity sha512-GZtyzoHz95Rhs6S63D2t/eqvdFCm7I+yHMLVQheKM7nBD8mbZIt+ct1jz4536MDnaOGKIxynJ8eHTkVGVVkoTg==
-  dependencies:
-    "@babel/runtime" "^7.13.10"
-
-"@radix-ui/react-use-layout-effect@1.0.0":
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.0.0.tgz#2fc19e97223a81de64cd3ba1dc42ceffd82374dc"
-  integrity sha512-6Tpkq+R6LOlmQb1R5NNETLG0B4YP0wc+klfXafpUCj6JGyaUc8il7/kUZ7m59rGbXGczE9Bs+iz2qloqsZBduQ==
-  dependencies:
-    "@babel/runtime" "^7.13.10"
-
 "@remix-run/router@1.15.3":
   version "1.15.3"
   resolved "https://registry.yarnpkg.com/@remix-run/router/-/router-1.15.3.tgz#d2509048d69dbb72d5389a14945339f1430b2d3c"
   integrity sha512-Oy8rmScVrVxWZVOpEF57ovlnhpZ8CCPlnIIumVcV9nFdiSIrus99+Lw78ekXyGvVDlIsFJbSfmSovJUhCWYV3w==
 
-"@rollup/rollup-android-arm-eabi@4.14.0":
-  version "4.14.0"
-  resolved "https://registry.yarnpkg.com/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.14.0.tgz#57936f50d0335e2e7bfac496d209606fa516add4"
-  integrity sha512-jwXtxYbRt1V+CdQSy6Z+uZti7JF5irRKF8hlKfEnF/xJpcNGuuiZMBvuoYM+x9sr9iWGnzrlM0+9hvQ1kgkf1w==
+"@rollup/rollup-android-arm-eabi@4.14.3":
+  version "4.14.3"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.14.3.tgz#bddf05c3387d02fac04b6b86b3a779337edfed75"
+  integrity sha512-X9alQ3XM6I9IlSlmC8ddAvMSyG1WuHk5oUnXGw+yUBs3BFoTizmG1La/Gr8fVJvDWAq+zlYTZ9DBgrlKRVY06g==
 
-"@rollup/rollup-android-arm64@4.14.0":
-  version "4.14.0"
-  resolved "https://registry.yarnpkg.com/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.14.0.tgz#81bba83b37382a2d0e30ceced06c8d3d85138054"
-  integrity sha512-fI9nduZhCccjzlsA/OuAwtFGWocxA4gqXGTLvOyiF8d+8o0fZUeSztixkYjcGq1fGZY3Tkq4yRvHPFxU+jdZ9Q==
+"@rollup/rollup-android-arm64@4.14.3":
+  version "4.14.3"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.14.3.tgz#b26bd09de58704c0a45e3375b76796f6eda825e4"
+  integrity sha512-eQK5JIi+POhFpzk+LnjKIy4Ks+pwJ+NXmPxOCSvOKSNRPONzKuUvWE+P9JxGZVxrtzm6BAYMaL50FFuPe0oWMQ==
 
-"@rollup/rollup-darwin-arm64@4.14.0":
-  version "4.14.0"
-  resolved "https://registry.yarnpkg.com/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.14.0.tgz#a371bd723a5c4c4a33376da72abfc3938066842b"
-  integrity sha512-BcnSPRM76/cD2gQC+rQNGBN6GStBs2pl/FpweW8JYuz5J/IEa0Fr4AtrPv766DB/6b2MZ/AfSIOSGw3nEIP8SA==
+"@rollup/rollup-darwin-arm64@4.14.3":
+  version "4.14.3"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.14.3.tgz#c5f3fd1aa285b6d33dda6e3f3ca395f8c37fd5ca"
+  integrity sha512-Od4vE6f6CTT53yM1jgcLqNfItTsLt5zE46fdPaEmeFHvPs5SjZYlLpHrSiHEKR1+HdRfxuzXHjDOIxQyC3ptBA==
 
-"@rollup/rollup-darwin-x64@4.14.0":
-  version "4.14.0"
-  resolved "https://registry.yarnpkg.com/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.14.0.tgz#8baf2fda277c9729125017c65651296282412886"
-  integrity sha512-LDyFB9GRolGN7XI6955aFeI3wCdCUszFWumWU0deHA8VpR3nWRrjG6GtGjBrQxQKFevnUTHKCfPR4IvrW3kCgQ==
+"@rollup/rollup-darwin-x64@4.14.3":
+  version "4.14.3"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.14.3.tgz#8e4673734d7dc9d68f6d48e81246055cda0e840f"
+  integrity sha512-0IMAO21axJeNIrvS9lSe/PGthc8ZUS+zC53O0VhF5gMxfmcKAP4ESkKOCwEi6u2asUrt4mQv2rjY8QseIEb1aw==
 
-"@rollup/rollup-linux-arm-gnueabihf@4.14.0":
-  version "4.14.0"
-  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.14.0.tgz#822830a8f7388d5b81d04c69415408d3bab1079b"
-  integrity sha512-ygrGVhQP47mRh0AAD0zl6QqCbNsf0eTo+vgwkY6LunBcg0f2Jv365GXlDUECIyoXp1kKwL5WW6rsO429DBY/bA==
+"@rollup/rollup-linux-arm-gnueabihf@4.14.3":
+  version "4.14.3"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.14.3.tgz#53ed38eb13b58ababdb55a7f66f0538a7f85dcba"
+  integrity sha512-ge2DC7tHRHa3caVEoSbPRJpq7azhG+xYsd6u2MEnJ6XzPSzQsTKyXvh6iWjXRf7Rt9ykIUWHtl0Uz3T6yXPpKw==
 
-"@rollup/rollup-linux-arm64-gnu@4.14.0":
-  version "4.14.0"
-  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.14.0.tgz#e20fbe1bd4414c7119f9e0bba8ad17a6666c8365"
-  integrity sha512-x+uJ6MAYRlHGe9wi4HQjxpaKHPM3d3JjqqCkeC5gpnnI6OWovLdXTpfa8trjxPLnWKyBsSi5kne+146GAxFt4A==
+"@rollup/rollup-linux-arm-musleabihf@4.14.3":
+  version "4.14.3"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.14.3.tgz#0706ee38330e267a5c9326956820f009cfb21fcd"
+  integrity sha512-ljcuiDI4V3ySuc7eSk4lQ9wU8J8r8KrOUvB2U+TtK0TiW6OFDmJ+DdIjjwZHIw9CNxzbmXY39wwpzYuFDwNXuw==
 
-"@rollup/rollup-linux-arm64-musl@4.14.0":
-  version "4.14.0"
-  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.14.0.tgz#13f475596a62e1924f13fe1c8cf2c40e09a99b47"
-  integrity sha512-nrRw8ZTQKg6+Lttwqo6a2VxR9tOroa2m91XbdQ2sUUzHoedXlsyvY1fN4xWdqz8PKmf4orDwejxXHjh7YBGUCA==
+"@rollup/rollup-linux-arm64-gnu@4.14.3":
+  version "4.14.3"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.14.3.tgz#426fce7b8b242ac5abd48a10a5020f5a468c6cb4"
+  integrity sha512-Eci2us9VTHm1eSyn5/eEpaC7eP/mp5n46gTRB3Aar3BgSvDQGJZuicyq6TsH4HngNBgVqC5sDYxOzTExSU+NjA==
 
-"@rollup/rollup-linux-powerpc64le-gnu@4.14.0":
-  version "4.14.0"
-  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-powerpc64le-gnu/-/rollup-linux-powerpc64le-gnu-4.14.0.tgz#6a431c441420d1c510a205e08c6673355a0a2ea9"
-  integrity sha512-xV0d5jDb4aFu84XKr+lcUJ9y3qpIWhttO3Qev97z8DKLXR62LC3cXT/bMZXrjLF9X+P5oSmJTzAhqwUbY96PnA==
+"@rollup/rollup-linux-arm64-musl@4.14.3":
+  version "4.14.3"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.14.3.tgz#65bf944530d759b50d7ffd00dfbdf4125a43406f"
+  integrity sha512-UrBoMLCq4E92/LCqlh+blpqMz5h1tJttPIniwUgOFJyjWI1qrtrDhhpHPuFxULlUmjFHfloWdixtDhSxJt5iKw==
 
-"@rollup/rollup-linux-riscv64-gnu@4.14.0":
-  version "4.14.0"
-  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.14.0.tgz#53d9448962c3f9ed7a1672269655476ea2d67567"
-  integrity sha512-SDDhBQwZX6LPRoPYjAZWyL27LbcBo7WdBFWJi5PI9RPCzU8ijzkQn7tt8NXiXRiFMJCVpkuMkBf4OxSxVMizAw==
+"@rollup/rollup-linux-powerpc64le-gnu@4.14.3":
+  version "4.14.3"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-powerpc64le-gnu/-/rollup-linux-powerpc64le-gnu-4.14.3.tgz#494ba3b31095e9a45df9c3f646d21400fb631a95"
+  integrity sha512-5aRjvsS8q1nWN8AoRfrq5+9IflC3P1leMoy4r2WjXyFqf3qcqsxRCfxtZIV58tCxd+Yv7WELPcO9mY9aeQyAmw==
 
-"@rollup/rollup-linux-s390x-gnu@4.14.0":
-  version "4.14.0"
-  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.14.0.tgz#95f0c133b324da3e7e5c7d12855e0eb71d21a946"
-  integrity sha512-RxB/qez8zIDshNJDufYlTT0ZTVut5eCpAZ3bdXDU9yTxBzui3KhbGjROK2OYTTor7alM7XBhssgoO3CZ0XD3qA==
+"@rollup/rollup-linux-riscv64-gnu@4.14.3":
+  version "4.14.3"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.14.3.tgz#8b88ed0a40724cce04aa15374ebe5ba4092d679f"
+  integrity sha512-sk/Qh1j2/RJSX7FhEpJn8n0ndxy/uf0kI/9Zc4b1ELhqULVdTfN6HL31CDaTChiBAOgLcsJ1sgVZjWv8XNEsAQ==
 
-"@rollup/rollup-linux-x64-gnu@4.14.0":
-  version "4.14.0"
-  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.14.0.tgz#820ada75c68ead1acc486e41238ca0d8f8531478"
-  integrity sha512-C6y6z2eCNCfhZxT9u+jAM2Fup89ZjiG5pIzZIDycs1IwESviLxwkQcFRGLjnDrP+PT+v5i4YFvlcfAs+LnreXg==
+"@rollup/rollup-linux-s390x-gnu@4.14.3":
+  version "4.14.3"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.14.3.tgz#09c9e5ec57a0f6ec3551272c860bb9a04b96d70f"
+  integrity sha512-jOO/PEaDitOmY9TgkxF/TQIjXySQe5KVYB57H/8LRP/ux0ZoO8cSHCX17asMSv3ruwslXW/TLBcxyaUzGRHcqg==
 
-"@rollup/rollup-linux-x64-musl@4.14.0":
-  version "4.14.0"
-  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.14.0.tgz#ca74f22e125efbe94c1148d989ef93329b464443"
-  integrity sha512-i0QwbHYfnOMYsBEyjxcwGu5SMIi9sImDVjDg087hpzXqhBSosxkE7gyIYFHgfFl4mr7RrXksIBZ4DoLoP4FhJg==
+"@rollup/rollup-linux-x64-gnu@4.14.3":
+  version "4.14.3"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.14.3.tgz#197f27fd481ad9c861021d5cbbf21793922a631c"
+  integrity sha512-8ybV4Xjy59xLMyWo3GCfEGqtKV5M5gCSrZlxkPGvEPCGDLNla7v48S662HSGwRd6/2cSneMQWiv+QzcttLrrOA==
 
-"@rollup/rollup-win32-arm64-msvc@4.14.0":
-  version "4.14.0"
-  resolved "https://registry.yarnpkg.com/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.14.0.tgz#269023332297051d037a9593dcba92c10fef726b"
-  integrity sha512-Fq52EYb0riNHLBTAcL0cun+rRwyZ10S9vKzhGKKgeD+XbwunszSY0rVMco5KbOsTlwovP2rTOkiII/fQ4ih/zQ==
+"@rollup/rollup-linux-x64-musl@4.14.3":
+  version "4.14.3"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.14.3.tgz#5cc0522f4942f2df625e9bfb6fb02c6580ffbce6"
+  integrity sha512-s+xf1I46trOY10OqAtZ5Rm6lzHre/UiLA1J2uOhCFXWkbZrJRkYBPO6FhvGfHmdtQ3Bx793MNa7LvoWFAm93bg==
 
-"@rollup/rollup-win32-ia32-msvc@4.14.0":
-  version "4.14.0"
-  resolved "https://registry.yarnpkg.com/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.14.0.tgz#d7701438daf964011fd7ca33e3f13f3ff5129e7b"
-  integrity sha512-e/PBHxPdJ00O9p5Ui43+vixSgVf4NlLsmV6QneGERJ3lnjIua/kim6PRFe3iDueT1rQcgSkYP8ZBBXa/h4iPvw==
+"@rollup/rollup-win32-arm64-msvc@4.14.3":
+  version "4.14.3"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.14.3.tgz#a648122389d23a7543b261fba082e65fefefe4f6"
+  integrity sha512-+4h2WrGOYsOumDQ5S2sYNyhVfrue+9tc9XcLWLh+Kw3UOxAvrfOrSMFon60KspcDdytkNDh7K2Vs6eMaYImAZg==
 
-"@rollup/rollup-win32-x64-msvc@4.14.0":
-  version "4.14.0"
-  resolved "https://registry.yarnpkg.com/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.14.0.tgz#0bb7ac3cd1c3292db1f39afdabfd03ccea3a3d34"
-  integrity sha512-aGg7iToJjdklmxlUlJh/PaPNa4PmqHfyRMLunbL3eaMO0gp656+q1zOKkpJ/CVe9CryJv6tAN1HDoR8cNGzkag==
+"@rollup/rollup-win32-ia32-msvc@4.14.3":
+  version "4.14.3"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.14.3.tgz#34727b5c7953c35fc6e1ae4f770ad3a2025f8e03"
+  integrity sha512-T1l7y/bCeL/kUwh9OD4PQT4aM7Bq43vX05htPJJ46RTI4r5KNt6qJRzAfNfM+OYMNEVBWQzR2Gyk+FXLZfogGw==
 
-"@sentry-internal/feedback@7.109.0":
-  version "7.109.0"
-  resolved "https://registry.yarnpkg.com/@sentry-internal/feedback/-/feedback-7.109.0.tgz#4657d7f36a1de3be466f42735d295e212b7eca11"
-  integrity sha512-EL7N++poxvJP9rYvh6vSu24tsKkOveNCcCj4IM7+irWPjsuD2GLYYlhp/A/Mtt9l7iqO4plvtiQU5HGk7smcTQ==
+"@rollup/rollup-win32-x64-msvc@4.14.3":
+  version "4.14.3"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.14.3.tgz#5b2fb4d8cd44c05deef8a7b0e6deb9ccb8939d18"
+  integrity sha512-/BypzV0H1y1HzgYpxqRaXGBRqfodgoBBCcsrujT6QRcakDQdfU+Lq9PENPh5jB4I44YWq+0C2eHsHya+nZY1sA==
+
+"@sentry-internal/feedback@7.110.1":
+  version "7.110.1"
+  resolved "https://registry.yarnpkg.com/@sentry-internal/feedback/-/feedback-7.110.1.tgz#34fc4a58366917a5d7b6526937d2ad3ed169b3cd"
+  integrity sha512-0aR3wuEW+SZKOVNamuy0pTQyPmqDjWPPLrB2GAXGT3ZjrVxjEzzVPqk6DVBYxSV2MuJaD507SZnvfoSPNgoBmw==
   dependencies:
-    "@sentry/core" "7.109.0"
-    "@sentry/types" "7.109.0"
-    "@sentry/utils" "7.109.0"
+    "@sentry/core" "7.110.1"
+    "@sentry/types" "7.110.1"
+    "@sentry/utils" "7.110.1"
 
-"@sentry-internal/replay-canvas@7.109.0":
-  version "7.109.0"
-  resolved "https://registry.yarnpkg.com/@sentry-internal/replay-canvas/-/replay-canvas-7.109.0.tgz#9a00857994a9487428296feed4a9ddf2d62bab84"
-  integrity sha512-Lh/K60kmloR6lkPUcQP0iamw7B/MdEUEx/ImAx4tUSMrLj+IoUEcq/ECgnnVyQkJq59+8nPEKrVLt7x6PUPEjw==
+"@sentry-internal/replay-canvas@7.110.1":
+  version "7.110.1"
+  resolved "https://registry.yarnpkg.com/@sentry-internal/replay-canvas/-/replay-canvas-7.110.1.tgz#1b0457e71fcf7ebb2891859717cebf4b62547e15"
+  integrity sha512-zdcCmWFXM4DHOau/BCZVb6jf9zozdbAiJ1MzQ6azuZEuysOl00YfktoWZBbZjjjpWT6025s+wrmFz54t0O+enw==
   dependencies:
-    "@sentry/core" "7.109.0"
-    "@sentry/replay" "7.109.0"
-    "@sentry/types" "7.109.0"
-    "@sentry/utils" "7.109.0"
+    "@sentry/core" "7.110.1"
+    "@sentry/replay" "7.110.1"
+    "@sentry/types" "7.110.1"
+    "@sentry/utils" "7.110.1"
 
-"@sentry-internal/tracing@7.109.0":
-  version "7.109.0"
-  resolved "https://registry.yarnpkg.com/@sentry-internal/tracing/-/tracing-7.109.0.tgz#3effaa132c41a65378fa98146aea61228d528953"
-  integrity sha512-PzK/joC5tCuh2R/PRh+7dp+uuZl7pTsBIjPhVZHMTtb9+ls65WkdZJ1/uKXPouyz8NOo9Xok7aEvEo9seongyw==
+"@sentry-internal/tracing@7.110.1":
+  version "7.110.1"
+  resolved "https://registry.yarnpkg.com/@sentry-internal/tracing/-/tracing-7.110.1.tgz#3bf55dca9e963144b0a4ad9a0b96aa2a759e2470"
+  integrity sha512-4kTd6EM0OP1SVWl2yLn3KIwlCpld1lyhNDeR8G1aKLm1PN+kVsR6YB/jy9KPPp4Q3lN3W9EkTSES3qhP4jVffQ==
   dependencies:
-    "@sentry/core" "7.109.0"
-    "@sentry/types" "7.109.0"
-    "@sentry/utils" "7.109.0"
+    "@sentry/core" "7.110.1"
+    "@sentry/types" "7.110.1"
+    "@sentry/utils" "7.110.1"
 
-"@sentry/browser@7.109.0":
-  version "7.109.0"
-  resolved "https://registry.yarnpkg.com/@sentry/browser/-/browser-7.109.0.tgz#13b2623f43047f292cf7d6070128a7501e008693"
-  integrity sha512-yx+OFG+Ab9qUDDgV9ZDv8M9O9Mqr0fjKta/LMlWALYLjzkMvxsPlRPFj7oMBlHqOTVLDeg7lFYmsA8wyWQ8Z8g==
+"@sentry/browser@7.110.1":
+  version "7.110.1"
+  resolved "https://registry.yarnpkg.com/@sentry/browser/-/browser-7.110.1.tgz#0742b72ea2fc8578f091ca9049e802e46a3bed41"
+  integrity sha512-H3TZlbdsgxuoVxhotMtBDemvAofx3UPNcS+UjQ40Bd+hKX01IIbEN3i+9RQ0jmcbU6xjf+yhjwp+Ejpm4FmYMw==
   dependencies:
-    "@sentry-internal/feedback" "7.109.0"
-    "@sentry-internal/replay-canvas" "7.109.0"
-    "@sentry-internal/tracing" "7.109.0"
-    "@sentry/core" "7.109.0"
-    "@sentry/replay" "7.109.0"
-    "@sentry/types" "7.109.0"
-    "@sentry/utils" "7.109.0"
+    "@sentry-internal/feedback" "7.110.1"
+    "@sentry-internal/replay-canvas" "7.110.1"
+    "@sentry-internal/tracing" "7.110.1"
+    "@sentry/core" "7.110.1"
+    "@sentry/replay" "7.110.1"
+    "@sentry/types" "7.110.1"
+    "@sentry/utils" "7.110.1"
 
-"@sentry/core@7.109.0":
-  version "7.109.0"
-  resolved "https://registry.yarnpkg.com/@sentry/core/-/core-7.109.0.tgz#7a02f4af4a676950f6555f552a2a232d4458fcd5"
-  integrity sha512-xwD4U0IlvvlE/x/g/W1I8b4Cfb16SsCMmiEuBf6XxvAa3OfWBxKoqLifb3GyrbxMC4LbIIZCN/SvLlnGJPgszA==
+"@sentry/core@7.110.1":
+  version "7.110.1"
+  resolved "https://registry.yarnpkg.com/@sentry/core/-/core-7.110.1.tgz#0d9fd932478c4cb1f6330143ddf69dacee27bf4d"
+  integrity sha512-yC1yeUFQlmHj9u/KxKmwOMVanBmgfX+4MZnZU31QPqN95adyZTwpaYFZl4fH5kDVnz7wXJI0qRP8SxuMePtqhw==
   dependencies:
-    "@sentry/types" "7.109.0"
-    "@sentry/utils" "7.109.0"
+    "@sentry/types" "7.110.1"
+    "@sentry/utils" "7.110.1"
 
-"@sentry/react@^7.109.0":
-  version "7.109.0"
-  resolved "https://registry.yarnpkg.com/@sentry/react/-/react-7.109.0.tgz#ae8a2950d2022e83f1bccd8b994f0096f3dd1682"
-  integrity sha512-KqXoDh6LVhNO+FLdM5LiTGpuorFvjoBPQ4nPGIVbjeMY/KZIau3kFxR142EvCApxmD69yvS5EhMnEqlNdaQPGw==
+"@sentry/react@^7.110.0":
+  version "7.110.1"
+  resolved "https://registry.yarnpkg.com/@sentry/react/-/react-7.110.1.tgz#77773bb1a673311b1daa1536df7799186c272d80"
+  integrity sha512-kXdMrDexPyBf0KP/IfgCk5NS1Yfz6tFK/+UKWTxEM5PVRZkHzV7CBdd50IFGL3xMGbJmtE5Bly6WzezqUgWZ5w==
   dependencies:
-    "@sentry/browser" "7.109.0"
-    "@sentry/core" "7.109.0"
-    "@sentry/types" "7.109.0"
-    "@sentry/utils" "7.109.0"
+    "@sentry/browser" "7.110.1"
+    "@sentry/core" "7.110.1"
+    "@sentry/types" "7.110.1"
+    "@sentry/utils" "7.110.1"
     hoist-non-react-statics "^3.3.2"
 
-"@sentry/replay@7.109.0":
-  version "7.109.0"
-  resolved "https://registry.yarnpkg.com/@sentry/replay/-/replay-7.109.0.tgz#f50fb0140c81fce660c44cc93c35988898b8348b"
-  integrity sha512-hCDjbTNO7ErW/XsaBXlyHFsUhneyBUdTec1Swf98TFEfVqNsTs6q338aUcaR8dGRLbLrJ9YU9D1qKq++v5h2CA==
+"@sentry/replay@7.110.1":
+  version "7.110.1"
+  resolved "https://registry.yarnpkg.com/@sentry/replay/-/replay-7.110.1.tgz#e32cb3dfa9be49f3bd902dbf4e3c22c1d023704c"
+  integrity sha512-R49fGOuKYsJ97EujPTzMjs3ZSuSkLTFFQmVBbsu/o6beRp4kK9l8H7r2BfLEcWJOXdWO5EU4KpRWgIxHaDK2aw==
   dependencies:
-    "@sentry-internal/tracing" "7.109.0"
-    "@sentry/core" "7.109.0"
-    "@sentry/types" "7.109.0"
-    "@sentry/utils" "7.109.0"
+    "@sentry-internal/tracing" "7.110.1"
+    "@sentry/core" "7.110.1"
+    "@sentry/types" "7.110.1"
+    "@sentry/utils" "7.110.1"
 
-"@sentry/types@7.109.0":
-  version "7.109.0"
-  resolved "https://registry.yarnpkg.com/@sentry/types/-/types-7.109.0.tgz#d8778358114ed05be734661cc9e1e261f4494947"
-  integrity sha512-egCBnDv3YpVFoNzRLdP0soVrxVLCQ+rovREKJ1sw3rA2/MFH9WJ+DZZexsX89yeAFzy1IFsCp7/dEqudusml6g==
+"@sentry/types@7.110.1":
+  version "7.110.1"
+  resolved "https://registry.yarnpkg.com/@sentry/types/-/types-7.110.1.tgz#0b84c0d5e075dbd80afa2ce6a486fd14680a0024"
+  integrity sha512-sZxOpM5gfyxvJeWVvNpHnxERTnlqcozjqNcIv29SZ6wonlkekmxDyJ3uCuPv85VO54WLyA4uzskPKnNFHacI8A==
 
-"@sentry/utils@7.109.0":
-  version "7.109.0"
-  resolved "https://registry.yarnpkg.com/@sentry/utils/-/utils-7.109.0.tgz#7078e1400197abc1b0c436679bef980639500a86"
-  integrity sha512-3RjxMOLMBwZ5VSiH84+o/3NY2An4Zldjz0EbfEQNRY9yffRiCPJSQiCJID8EoylCFOh/PAhPimBhqbtWJxX6iw==
+"@sentry/utils@7.110.1":
+  version "7.110.1"
+  resolved "https://registry.yarnpkg.com/@sentry/utils/-/utils-7.110.1.tgz#39d78734b807a959cacd42477711f85aaa02ca6e"
+  integrity sha512-eibLo2m1a7sHkOHxYYmRujr3D7ek2l9sv26F1SLoQBVDF7Afw5AKyzPmtA1D+4M9P/ux1okj7cGj3SaBrVpxXA==
   dependencies:
-    "@sentry/types" "7.109.0"
+    "@sentry/types" "7.110.1"
 
 "@sinclair/typebox@^0.27.8":
   version "0.27.8"
   resolved "https://registry.yarnpkg.com/@sinclair/typebox/-/typebox-0.27.8.tgz#6667fac16c436b5434a387a34dedb013198f6e6e"
   integrity sha512-+Fj43pSMwJs4KRrH/938Uf+uAELIgVBmQzg/q1YG10djyfA3TnrU8N8XzqCh/okZdszqBQTZf96idMfE5lnwTA==
 
-"@tabler/icons-react@^3.1.0":
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/@tabler/icons-react/-/icons-react-3.1.0.tgz#5202b5cc7c6e57dde75c41981b618dcfebd69b50"
-  integrity sha512-k/WTlax2vbj/LpxvaJ+BmaLAAhVUgyLj4Ftgaczz66tUSNzqrAZXCFdOU7cRMYPNVBqyqE2IdQd2rzzhDEJvkw==
+"@tabler/icons-react@^3.2.0":
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/@tabler/icons-react/-/icons-react-3.2.0.tgz#1b8d4059672ec2999f29f9aea03c44f00084ce66"
+  integrity sha512-b1mZT1XpZrzvbM+eFe1YbYbxkzgJ18tM4knZKqXh0gnHDZ6XVLIH3TzJZ3HZ7PTkUqZLZ7XcGae3qQVGburlBw==
   dependencies:
-    "@tabler/icons" "3.1.0"
+    "@tabler/icons" "3.2.0"
 
-"@tabler/icons@3.1.0":
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/@tabler/icons/-/icons-3.1.0.tgz#d69d184eae572db6adb452b511562442133cc26d"
-  integrity sha512-CpZGyS1IVJKFcv88yZ2sYZIpWWhQ6oy76BQKQ5SF0fGgOqgyqKdBGG/YGyyMW632on37MX7VqQIMTzN/uQqmFg==
+"@tabler/icons@3.2.0":
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/@tabler/icons/-/icons-3.2.0.tgz#4adcde021943d50f2c228dab6145fd9c9b639f85"
+  integrity sha512-h8GQ2rtxgiSjltrVz4vcopAxTPSpUSUi5nBfJ09H3Bk4fJk6wZ/dVUjzhv/BHfDwGTkAxZBiYe/Q/T95cPeg5Q==
 
 "@tanstack/query-core@5.29.0":
   version "5.29.0"
   resolved "https://registry.yarnpkg.com/@tanstack/query-core/-/query-core-5.29.0.tgz#d0b3d12c07d5a47f42ab0c1ed4f317106f3d4b20"
   integrity sha512-WgPTRs58hm9CMzEr5jpISe8HXa3qKQ8CxewdYZeVnA54JrPY9B1CZiwsCoLpLkf0dGRZq+LcX5OiJb0bEsOFww==
 
-"@tanstack/react-query@^5.28.14":
-  version "5.29.0"
-  resolved "https://registry.yarnpkg.com/@tanstack/react-query/-/react-query-5.29.0.tgz#42b3a2de4ed1d63666f0af04392a34b5e70d49c0"
-  integrity sha512-yxlhHB73jaBla6h5B6zPaGmQjokkzAhMHN4veotkPNiQ3Ac/mCxgABRZPsJJrgCTvhpcncBZcDBFxaR2B37vug==
+"@tanstack/react-query@^5.29.2":
+  version "5.29.2"
+  resolved "https://registry.yarnpkg.com/@tanstack/react-query/-/react-query-5.29.2.tgz#c55ffbfaf9d8cf34212428db2b6c61ca6b545188"
+  integrity sha512-nyuWILR4u7H5moLGSiifLh8kIqQDLNOHGuSz0rcp+J75fNc8aQLyr5+I2JCHU3n+nJrTTW1ssgAD8HiKD7IFBQ==
   dependencies:
     "@tanstack/query-core" "5.29.0"
 
@@ -1634,10 +1629,10 @@
   resolved "https://registry.yarnpkg.com/@types/marked/-/marked-4.3.2.tgz#e2e0ad02ebf5626bd215c5bae2aff6aff0ce9eac"
   integrity sha512-a79Yc3TOk6dGdituy8hmTTJXjOkZ7zsFYV10L337ttq/rec8lRMDBpV7fL3uLx6TgbFCa5DU/h8FmIBQPSbU0w==
 
-"@types/node@*", "@types/node@^20.12.3":
-  version "20.12.5"
-  resolved "https://registry.yarnpkg.com/@types/node/-/node-20.12.5.tgz#74c4f31ab17955d0b5808cdc8fd2839526ad00b3"
-  integrity sha512-BD+BjQ9LS/D8ST9p5uqBxghlN+S42iuNxjsUGjeZobe/ciXzk2qb1B6IXc6AnRLS+yFJRpN2IPEHMzwspfDJNw==
+"@types/node@*", "@types/node@^20.12.7":
+  version "20.12.7"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-20.12.7.tgz#04080362fa3dd6c5822061aa3124f5c152cff384"
+  integrity sha512-wq0cICSkRLVaf3UGLMGItu/PtdY7oaXaI/RVU+xliKVOtRna3PRY57ZDfztpDL0n11vfymMUnXv8QwYCO7L1wg==
   dependencies:
     undici-types "~5.26.4"
 
@@ -1651,10 +1646,10 @@
   resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.12.tgz#12bb1e2be27293c1406acb6af1c3f3a1481d98c6"
   integrity sha512-5zvhXYtRNRluoE/jAp4GVsSduVUzNWKkOZrCDBWYtE7biZywwdC2AcEzg+cSMLFRfVgeAFqpfNabiPjxFddV1Q==
 
-"@types/react-dom@^18.2.23":
-  version "18.2.24"
-  resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-18.2.24.tgz#8dda8f449ae436a7a6e91efed8035d4ab03ff759"
-  integrity sha512-cN6upcKd8zkGy4HU9F1+/s98Hrp6D4MOcippK4PoE8OZRngohHZpbJn1GsaDLz87MqvHNoT13nHvNqM9ocRHZg==
+"@types/react-dom@^18.2.25":
+  version "18.2.25"
+  resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-18.2.25.tgz#2946a30081f53e7c8d585eb138277245caedc521"
+  integrity sha512-o/V48vf4MQh7juIKZU2QGDfli6p1+OOi5oXx36Hffpc9adsHeXjVp8rHuPkjd8VT8sOJ2Zp05HR7CdpGTIUFUA==
   dependencies:
     "@types/react" "*"
 
@@ -1689,14 +1684,19 @@
   dependencies:
     "@types/react" "*"
 
-"@types/react@*", "@types/react@^18.2.74":
-  version "18.2.74"
-  resolved "https://registry.yarnpkg.com/@types/react/-/react-18.2.74.tgz#2d52eb80e4e7c4ea8812c89181d6d590b53f958c"
-  integrity sha512-9AEqNZZyBx8OdZpxzQlaFEVCSFUM2YXJH46yPOiOpm078k6ZLOCcuAzGum/zK8YBwY+dbahVNbHrbgrAwIRlqw==
+"@types/react@*", "@types/react@^18.2.79":
+  version "18.2.79"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-18.2.79.tgz#c40efb4f255711f554d47b449f796d1c7756d865"
+  integrity sha512-RwGAGXPl9kSXwdNTafkOEuFrTBD5SA2B3iEB96xi8+xu5ddUa/cpvyVCSNn+asgLCTHkb5ZxN8gbuibYJi4s1w==
   dependencies:
     "@types/prop-types" "*"
     csstype "^3.0.2"
 
+"@types/stylis@4.2.0":
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/@types/stylis/-/stylis-4.2.0.tgz#199a3f473f0c3a6f6e4e1b17cdbc967f274bdc6b"
+  integrity sha512-n4sx2bqL0mW1tvDf/loQ+aMX7GQD3lc3fkCMC55VFNDu/vBOabO+LTIeXKM14xK0ppk5TUGcWRjiSpIlUpghKw==
+
 "@types/tern@*":
   version "0.23.9"
   resolved "https://registry.yarnpkg.com/@types/tern/-/tern-0.23.9.tgz#6f6093a4a9af3e6bb8dde528e024924d196b367c"
@@ -1762,6 +1762,61 @@
   resolved "https://registry.yarnpkg.com/@uiw/react-split/-/react-split-5.9.3.tgz#3d99f2b62288d4a6eb716b0fd6b37a2c5dc7f82e"
   integrity sha512-HgwETU+kRhzZAp+YiE4Yu8bNJm3jxxnGgGPfkadUl8jA1wsMD3aMMskuhQF5akiUUUadiLUvAc8e1RH9Y/SKDw==
 
+"@vanilla-extract/babel-plugin-debug-ids@^1.0.5":
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/@vanilla-extract/babel-plugin-debug-ids/-/babel-plugin-debug-ids-1.0.5.tgz#e24424f46dd7737764a4bb5ac6dcdf19240f88bc"
+  integrity sha512-Rc9A6ylsw7EBErmpgqCMvc/Z/eEZxI5k1xfLQHw7f5HHh3oc5YfzsAsYU/PdmSNjF1dp3sGEViBdDltvwnfVaA==
+  dependencies:
+    "@babel/core" "^7.23.9"
+
+"@vanilla-extract/css@^1.14.2":
+  version "1.14.2"
+  resolved "https://registry.yarnpkg.com/@vanilla-extract/css/-/css-1.14.2.tgz#121d0b8633ea7e85505e4abab64f60670617d38d"
+  integrity sha512-OasEW4ojGqqRiUpsyEDUMrSkLnmwbChtafkogpCZ1eDAgAZ9eY9CHLYodj2nB8aV5T25kQ5shm92k25ngjYhhg==
+  dependencies:
+    "@emotion/hash" "^0.9.0"
+    "@vanilla-extract/private" "^1.0.4"
+    chalk "^4.1.1"
+    css-what "^6.1.0"
+    cssesc "^3.0.0"
+    csstype "^3.0.7"
+    deep-object-diff "^1.1.9"
+    deepmerge "^4.2.2"
+    media-query-parser "^2.0.2"
+    modern-ahocorasick "^1.0.0"
+    outdent "^0.8.0"
+
+"@vanilla-extract/integration@^7.1.2":
+  version "7.1.2"
+  resolved "https://registry.yarnpkg.com/@vanilla-extract/integration/-/integration-7.1.2.tgz#1685cc899babb3d6f31f4450d95a8324acc9ed17"
+  integrity sha512-jpjw0L3P1E+U9L8OAFVMGpPFbNPD+/Vpfew7oOKBYipCrRZEqShu3WLXuUxjXz/mcIH7KCS5nasIdy2VclbEaQ==
+  dependencies:
+    "@babel/core" "^7.23.9"
+    "@babel/plugin-syntax-typescript" "^7.23.3"
+    "@vanilla-extract/babel-plugin-debug-ids" "^1.0.5"
+    "@vanilla-extract/css" "^1.14.2"
+    esbuild "npm:esbuild@~0.17.6 || ~0.18.0 || ~0.19.0"
+    eval "0.1.8"
+    find-up "^5.0.0"
+    javascript-stringify "^2.0.1"
+    lodash "^4.17.21"
+    mlly "^1.4.2"
+    outdent "^0.8.0"
+    vite "^5.0.11"
+    vite-node "^1.2.0"
+
+"@vanilla-extract/private@^1.0.4":
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/@vanilla-extract/private/-/private-1.0.4.tgz#35946b917d6b9774a2b9bc725c63c9341049c79b"
+  integrity sha512-8FGD6AejeC/nXcblgNCM5rnZb9KXa4WNkR03HCWtdJBpANjTgjHEglNLFnhuvdQ78tC6afaxBPI+g7F2NX3tgg==
+
+"@vanilla-extract/vite-plugin@^4.0.7":
+  version "4.0.7"
+  resolved "https://registry.yarnpkg.com/@vanilla-extract/vite-plugin/-/vite-plugin-4.0.7.tgz#40cd5de73bacf89e2ca69ba61163f50e62e77b3c"
+  integrity sha512-uRAFWdq5Eq0ybpgW2P0LNOw8eW+MTg/OFo5K0Hsl2cKu/Tu2tabCsBf6vNjfhDrm4jBShHy1wJIVcYxf6sczVQ==
+  dependencies:
+    "@vanilla-extract/integration" "^7.1.2"
+
 "@vitejs/plugin-react@^4.2.1":
   version "4.2.1"
   resolved "https://registry.yarnpkg.com/@vitejs/plugin-react/-/plugin-react-4.2.1.tgz#744d8e4fcb120fc3dbaa471dadd3483f5a304bb9"
@@ -1854,13 +1909,6 @@ argparse@^2.0.1:
   resolved "https://registry.yarnpkg.com/argparse/-/argparse-2.0.1.tgz#246f50f3ca78a3240f6c997e8a9bd1eac49e4b38"
   integrity sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==
 
-aria-hidden@^1.1.3:
-  version "1.2.4"
-  resolved "https://registry.yarnpkg.com/aria-hidden/-/aria-hidden-1.2.4.tgz#b78e383fdbc04d05762c78b4a25a501e736c4522"
-  integrity sha512-y+CcFFwelSXpLZk/7fMB2mUbGtX9lKycf1MWJ7CaTIERyitVlyQx6C+sxcROU2BAJ24OiZyK+8wj2i8AlBoS3A==
-  dependencies:
-    tslib "^2.0.0"
-
 array-find-index@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/array-find-index/-/array-find-index-1.0.2.tgz#df010aa1287e164bbda6f9723b0a96a1ec4187a1"
@@ -1871,12 +1919,7 @@ asynckit@^0.4.0:
   resolved "https://registry.yarnpkg.com/asynckit/-/asynckit-0.4.0.tgz#c79ed97f7f34cb8f2ba1bc9790bcc366474b4b79"
   integrity sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==
 
-attr-accept@^2.2.2:
-  version "2.2.2"
-  resolved "https://registry.yarnpkg.com/attr-accept/-/attr-accept-2.2.2.tgz#646613809660110749e92f2c10833b70968d929b"
-  integrity sha512-7prDjvt9HmqiZ0cl5CRjtS84sEyhsHP2coDkaZKRKVfCDo9s7iw7ChVmar78Gu9pC4SoR/28wFu/G5JJhTnqEg==
-
-axios@^1.6.7:
+axios@^1.6.8:
   version "1.6.8"
   resolved "https://registry.yarnpkg.com/axios/-/axios-1.6.8.tgz#66d294951f5d988a00e87a0ffb955316a619ea66"
   integrity sha512-v/ZHtJDU39mDpyBoFVkETcd/uNdxrWRrg3bKpOKzXFA6Bvqopts6ALSMU3y6ijYxbw2B+wPrIv46egTzJXCLGQ==
@@ -1894,17 +1937,6 @@ babel-plugin-macros@^3.0.1, babel-plugin-macros@^3.1.0:
     cosmiconfig "^7.0.0"
     resolve "^1.19.0"
 
-"babel-plugin-styled-components@>= 1.12.0":
-  version "2.1.4"
-  resolved "https://registry.yarnpkg.com/babel-plugin-styled-components/-/babel-plugin-styled-components-2.1.4.tgz#9a1f37c7f32ef927b4b008b529feb4a2c82b1092"
-  integrity sha512-Xgp9g+A/cG47sUyRwwYxGM4bR/jDRg5N6it/8+HxCnbT5XNKSKDT9xm4oag/osgqjC2It/vH0yXsomOG6k558g==
-  dependencies:
-    "@babel/helper-annotate-as-pure" "^7.22.5"
-    "@babel/helper-module-imports" "^7.22.5"
-    "@babel/plugin-syntax-jsx" "^7.22.5"
-    lodash "^4.17.21"
-    picomatch "^2.3.1"
-
 balanced-match@^1.0.0:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-1.0.2.tgz#e83e3a7e3f300b34cb9d87f615fa0cbf357690ee"
@@ -1962,6 +1994,11 @@ buffer@^5.5.0:
     base64-js "^1.3.1"
     ieee754 "^1.1.13"
 
+cac@^6.7.14:
+  version "6.7.14"
+  resolved "https://registry.yarnpkg.com/cac/-/cac-6.7.14.tgz#804e1e6f506ee363cb0e3ccbb09cad5dd9870959"
+  integrity sha512-b6Ilus+c3RrdDk+JhLKUAQfzzgLEPy6wcXqS7f/xe1EETvsDP6GORG7SFuOs6cID5YkqchW/LXZbX5bc8j7ZcQ==
+
 caching-transform@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/caching-transform/-/caching-transform-4.0.0.tgz#00d297a4206d71e2163c39eaffa8157ac0651f0f"
@@ -1993,9 +2030,9 @@ camelize@^1.0.0:
   integrity sha512-dU+Tx2fsypxTgtLoE36npi3UqcjSSMNYfkqgmoEhtZrraP5VWq0K7FkWVTYa8eMPtnU/G2txVsfdCJTn9uzpuQ==
 
 caniuse-lite@^1.0.30001587:
-  version "1.0.30001606"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001606.tgz#b4d5f67ab0746a3b8b5b6d1f06e39c51beb39a9e"
-  integrity sha512-LPbwnW4vfpJId225pwjZJOgX1m9sGfbw/RKJvw/t0QhYOOaTXHvkjVGFGPpvwEzufrjvTlsULnVTxdy4/6cqkg==
+  version "1.0.30001610"
+  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001610.tgz#2f44ed6e21d359e914271ae35b68903632628ccf"
+  integrity sha512-QFutAY4NgaelojVMjY63o6XlZyORPaLfyMnsl3HgnWdJUcX6K0oaJymHjH8PT5Gk7sTm8rvC/c5COUQKXqmOMA==
 
 chalk@^2.4.2:
   version "2.4.2"
@@ -2006,7 +2043,7 @@ chalk@^2.4.2:
     escape-string-regexp "^1.0.5"
     supports-color "^5.3.0"
 
-chalk@^4.0.0, chalk@^4.1.0:
+chalk@^4.0.0, chalk@^4.1.0, chalk@^4.1.1:
   version "4.1.2"
   resolved "https://registry.yarnpkg.com/chalk/-/chalk-4.1.2.tgz#aac4e2b7734a740867aeb16bf02aad556a1e7a01"
   integrity sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==
@@ -2077,21 +2114,16 @@ clone@^1.0.2:
   resolved "https://registry.yarnpkg.com/clone/-/clone-1.0.4.tgz#da309cc263df15994c688ca902179ca3c7cd7c7e"
   integrity sha512-JQHZ2QMW6l3aH/j6xCqQThY/9OH4D/9ls34cgkUBiEeocRTU04tHfKPBsUK1PqZCUQM7GiA0IIXJSuXHI64Kbg==
 
-clsx@1.1.1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/clsx/-/clsx-1.1.1.tgz#98b3134f9abbdf23b2663491ace13c5c03a73188"
-  integrity sha512-6/bPho624p3S2pMyvP5kKBPXnI3ufHLObBFCfgx+LkeR5lg2XYy2hqZqUf45ypD8COn2bhgGJSUE+l5dhNBieA==
+clsx@2.1.0, clsx@^2.0.0, clsx@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/clsx/-/clsx-2.1.0.tgz#e851283bcb5c80ee7608db18487433f7b23f77cb"
+  integrity sha512-m3iNNWpd9rl3jvvcBnu70ylMdrXt8Vlq4HYadnU5fwcOtvkSQWPmj7amUcDT2qYI7risszBjI5AUIUox9D16pg==
 
 clsx@^1.1.1:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/clsx/-/clsx-1.2.1.tgz#0ddc4a20a549b59c93a4116bb26f5294ca17dc12"
   integrity sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==
 
-clsx@^2.0.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/clsx/-/clsx-2.1.0.tgz#e851283bcb5c80ee7608db18487433f7b23f77cb"
-  integrity sha512-m3iNNWpd9rl3jvvcBnu70ylMdrXt8Vlq4HYadnU5fwcOtvkSQWPmj7amUcDT2qYI7risszBjI5AUIUox9D16pg==
-
 codemirror-spell-checker@1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/codemirror-spell-checker/-/codemirror-spell-checker-1.1.2.tgz#1c660f9089483ccb5113b9ba9ca19c3f4993371e"
@@ -2099,12 +2131,7 @@ codemirror-spell-checker@1.1.2:
   dependencies:
     typo-js "*"
 
-codemirror@^5.63.1:
-  version "5.65.16"
-  resolved "https://registry.yarnpkg.com/codemirror/-/codemirror-5.65.16.tgz#efc0661be6bf4988a6a1c2fe6893294638cdb334"
-  integrity sha512-br21LjYmSlVL0vFCPWPfhzUCT34FM/pAdK7rRIZwa0rrtrIdotvP4Oh4GUHsu2E3IrQMCfRkL/fN3ytMNxVQvg==
-
-codemirror@^6.0.0:
+codemirror@>=6.0.0, codemirror@^6.0.0:
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/codemirror/-/codemirror-6.0.1.tgz#62b91142d45904547ee3e0e0e4c1a79158035a29"
   integrity sha512-J8j+nZ+CdWmIeFIGXEFbFPtpiYacFMDR8GlHK3IyHQJMCaVRfGx9NT+Hxivv1ckLWPvNdZqndbr/7lVhrf/Svg==
@@ -2117,6 +2144,11 @@ codemirror@^6.0.0:
     "@codemirror/state" "^6.0.0"
     "@codemirror/view" "^6.0.0"
 
+codemirror@^5.63.1:
+  version "5.65.16"
+  resolved "https://registry.yarnpkg.com/codemirror/-/codemirror-5.65.16.tgz#efc0661be6bf4988a6a1c2fe6893294638cdb334"
+  integrity sha512-br21LjYmSlVL0vFCPWPfhzUCT34FM/pAdK7rRIZwa0rrtrIdotvP4Oh4GUHsu2E3IrQMCfRkL/fN3ytMNxVQvg==
+
 color-convert@^1.9.0:
   version "1.9.3"
   resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.9.3.tgz#bb71850690e1f136567de629d2d5471deda4c1e8"
@@ -2223,7 +2255,7 @@ css-color-keywords@^1.0.0:
   resolved "https://registry.yarnpkg.com/css-color-keywords/-/css-color-keywords-1.0.0.tgz#fea2616dc676b2962686b3af8dbdbe180b244e05"
   integrity sha512-FyyrDHZKEjXDpNJYvVsV960FiqQyXc/LlYmsxl2BcdMb2WPx0OGRVgTg55rPSyLSNMqP52R9r8geSp7apN3Ofg==
 
-css-to-react-native@^3.0.0:
+css-to-react-native@3.2.0:
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/css-to-react-native/-/css-to-react-native-3.2.0.tgz#cdd8099f71024e149e4f6fe17a7d46ecd55f1e32"
   integrity sha512-e8RKaLXMOFii+02mOlqwjbD00KSEKqblnpO9e++1aXS1fPQOpS1YoqdVHBqPjHNoxeF2mimzVqawm2KCbEdtHQ==
@@ -2232,12 +2264,22 @@ css-to-react-native@^3.0.0:
     css-color-keywords "^1.0.0"
     postcss-value-parser "^4.0.2"
 
-csstype@3.0.9:
-  version "3.0.9"
-  resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.0.9.tgz#6410af31b26bd0520933d02cbc64fce9ce3fbf0b"
-  integrity sha512-rpw6JPxK6Rfg1zLOYCSwle2GFOOsnjmDYDaBwEcwoOg4qlsIVCN789VkBZDJAGi4T07gI4YSutR43t9Zz4Lzuw==
+css-what@^6.1.0:
+  version "6.1.0"
+  resolved "https://registry.yarnpkg.com/css-what/-/css-what-6.1.0.tgz#fb5effcf76f1ddea2c81bdfaa4de44e79bac70f4"
+  integrity sha512-HTUrgRJ7r4dsZKU6GjmpfRK1O76h97Z8MfS1G0FozR+oF2kG6Vfe8JE6zwrkbxigziPHinCJ+gCPjA9EaBDtRw==
 
-csstype@^3.0.2:
+cssesc@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/cssesc/-/cssesc-3.0.0.tgz#37741919903b868565e1c09ea747445cd18983ee"
+  integrity sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==
+
+csstype@3.1.2:
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.2.tgz#1d4bf9d572f11c14031f0436e1c10bc1f571f50b"
+  integrity sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==
+
+csstype@^3.0.2, csstype@^3.0.7:
   version "3.1.3"
   resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.3.tgz#d80ff294d114fb0e6ac500fbf85b60137d7eff81"
   integrity sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==
@@ -2323,7 +2365,7 @@ dayjs@^1.11.10:
   resolved "https://registry.yarnpkg.com/dayjs/-/dayjs-1.11.10.tgz#68acea85317a6e164457d6d6947564029a6a16a0"
   integrity sha512-vjAczensTgRcqDERK0SR2XMwsF/tSvnvlv6VcF2GIhg6Sx4yOIt/irsr1RDJsKiIyBzJDpCoXiWWq28MqH2cnQ==
 
-debug@^4.1.0, debug@^4.1.1, debug@^4.3.1:
+debug@^4.1.0, debug@^4.1.1, debug@^4.3.1, debug@^4.3.4:
   version "4.3.4"
   resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.4.tgz#1319f6579357f2338d3337d2cdd4914bb5dcc865"
   integrity sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==
@@ -2340,6 +2382,16 @@ decimal.js-light@^2.4.1:
   resolved "https://registry.yarnpkg.com/decimal.js-light/-/decimal.js-light-2.5.1.tgz#134fd32508f19e208f4fb2f8dac0d2626a867934"
   integrity sha512-qIMFpTMZmny+MMIitAB6D7iVPEorVw6YQRWkvarTkT4tBeSLLiHzcwj6q0MmYSFCiVpiqPJTJEYIrpcPzVEIvg==
 
+deep-object-diff@^1.1.9:
+  version "1.1.9"
+  resolved "https://registry.yarnpkg.com/deep-object-diff/-/deep-object-diff-1.1.9.tgz#6df7ef035ad6a0caa44479c536ed7b02570f4595"
+  integrity sha512-Rn+RuwkmkDwCi2/oXOFS9Gsr5lJZu/yTGpK7wAaAIE75CC+LCGEZHpY6VQJa/RoJcrmaA/docWJZvYohlNkWPA==
+
+deepmerge@^4.2.2:
+  version "4.3.1"
+  resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-4.3.1.tgz#44b5f2147cd3b00d4b56137685966f26fd25dd4a"
+  integrity sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A==
+
 default-require-extensions@^3.0.0:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/default-require-extensions/-/default-require-extensions-3.0.1.tgz#bfae00feeaeada68c2ae256c62540f60b80625bd"
@@ -2384,9 +2436,9 @@ easymde@^2.18.0:
     marked "^4.1.0"
 
 electron-to-chromium@^1.4.668:
-  version "1.4.729"
-  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.729.tgz#8477d21e2a50993781950885b2731d92ad532c00"
-  integrity sha512-bx7+5Saea/qu14kmPTDHQxkp2UnziG3iajUQu3BxFvCOnpAJdDbMV4rSl+EqFDkkpNNVUFlR1kDfpL59xfy1HA==
+  version "1.4.737"
+  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.737.tgz#3a774a58e04980741f65d440f5fdf57af18b6dde"
+  integrity sha512-QvLTxaLHKdy5YxvixAw/FfHq2eWLUL9KvsPjp0aHK1gI5d3EDuDgITkvj0nFO2c6zUY3ZqVAJQiBYyQP9tQpfw==
 
 embla-carousel-react@^8.0.2:
   version "8.0.2"
@@ -2480,6 +2532,35 @@ esbuild@^0.20.1:
     "@esbuild/win32-ia32" "0.20.2"
     "@esbuild/win32-x64" "0.20.2"
 
+"esbuild@npm:esbuild@~0.17.6 || ~0.18.0 || ~0.19.0":
+  version "0.19.12"
+  resolved "https://registry.yarnpkg.com/esbuild/-/esbuild-0.19.12.tgz#dc82ee5dc79e82f5a5c3b4323a2a641827db3e04"
+  integrity sha512-aARqgq8roFBj054KvQr5f1sFu0D65G+miZRCuJyJ0G13Zwx7vRar5Zhn2tkQNzIXcBrNVsv/8stehpj+GAjgbg==
+  optionalDependencies:
+    "@esbuild/aix-ppc64" "0.19.12"
+    "@esbuild/android-arm" "0.19.12"
+    "@esbuild/android-arm64" "0.19.12"
+    "@esbuild/android-x64" "0.19.12"
+    "@esbuild/darwin-arm64" "0.19.12"
+    "@esbuild/darwin-x64" "0.19.12"
+    "@esbuild/freebsd-arm64" "0.19.12"
+    "@esbuild/freebsd-x64" "0.19.12"
+    "@esbuild/linux-arm" "0.19.12"
+    "@esbuild/linux-arm64" "0.19.12"
+    "@esbuild/linux-ia32" "0.19.12"
+    "@esbuild/linux-loong64" "0.19.12"
+    "@esbuild/linux-mips64el" "0.19.12"
+    "@esbuild/linux-ppc64" "0.19.12"
+    "@esbuild/linux-riscv64" "0.19.12"
+    "@esbuild/linux-s390x" "0.19.12"
+    "@esbuild/linux-x64" "0.19.12"
+    "@esbuild/netbsd-x64" "0.19.12"
+    "@esbuild/openbsd-x64" "0.19.12"
+    "@esbuild/sunos-x64" "0.19.12"
+    "@esbuild/win32-arm64" "0.19.12"
+    "@esbuild/win32-ia32" "0.19.12"
+    "@esbuild/win32-x64" "0.19.12"
+
 escalade@^3.1.1:
   version "3.1.2"
   resolved "https://registry.yarnpkg.com/escalade/-/escalade-3.1.2.tgz#54076e9ab29ea5bf3d8f1ed62acffbb88272df27"
@@ -2514,6 +2595,14 @@ esprima@^4.0.0:
   resolved "https://registry.yarnpkg.com/esprima/-/esprima-4.0.1.tgz#13b04cdb3e6c5d19df91ab6987a8695619b0aa71"
   integrity sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==
 
+eval@0.1.8:
+  version "0.1.8"
+  resolved "https://registry.yarnpkg.com/eval/-/eval-0.1.8.tgz#2b903473b8cc1d1989b83a1e7923f883eb357f85"
+  integrity sha512-EzV94NYKoO09GLXGjXj9JIlXijVck4ONSr5wiCWDvhsvj5jxSrzTmRU/9C1DyB6uToszLs8aifA6NQ7lEQdvFw==
+  dependencies:
+    "@types/node" "*"
+    require-like ">= 0.1.1"
+
 eventemitter3@^4.0.1:
   version "4.0.7"
   resolved "https://registry.yarnpkg.com/eventemitter3/-/eventemitter3-4.0.7.tgz#2de9b68f6528d5644ef5c59526a1b4a07306169f"
@@ -2550,13 +2639,6 @@ figures@^3.0.0:
   dependencies:
     escape-string-regexp "^1.0.5"
 
-file-selector@^0.6.0:
-  version "0.6.0"
-  resolved "https://registry.yarnpkg.com/file-selector/-/file-selector-0.6.0.tgz#fa0a8d9007b829504db4d07dd4de0310b65287dc"
-  integrity sha512-QlZ5yJC0VxHxQQsQhXvBaC7VRJ2uaxTf+Tfpu4Z/OcVQJVpZO+DGU0rkoVW5ce2SccxugvpBJoMvUs59iILYdw==
-  dependencies:
-    tslib "^2.4.0"
-
 fill-range@^7.0.1:
   version "7.0.1"
   resolved "https://registry.yarnpkg.com/fill-range/-/fill-range-7.0.1.tgz#1919a6a7c75fe38b2c7c77e5198535da9acdda40"
@@ -2593,6 +2675,14 @@ find-up@^4.0.0, find-up@^4.1.0:
     locate-path "^5.0.0"
     path-exists "^4.0.0"
 
+find-up@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/find-up/-/find-up-5.0.0.tgz#4c92819ecb7083561e4f4a240a86be5198f536fc"
+  integrity sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==
+  dependencies:
+    locate-path "^6.0.0"
+    path-exists "^4.0.0"
+
 follow-redirects@^1.15.6:
   version "1.15.6"
   resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.15.6.tgz#7f815c0cda4249c74ff09e95ef97c23b5fd0399b"
@@ -2714,7 +2804,7 @@ hasown@^2.0.0:
   dependencies:
     function-bind "^1.1.2"
 
-hoist-non-react-statics@^3.0.0, hoist-non-react-statics@^3.3.1, hoist-non-react-statics@^3.3.2:
+hoist-non-react-statics@^3.3.1, hoist-non-react-statics@^3.3.2:
   version "3.3.2"
   resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45"
   integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==
@@ -2947,6 +3037,11 @@ istanbul-reports@^3.0.2:
     html-escaper "^2.0.0"
     istanbul-lib-report "^3.0.0"
 
+javascript-stringify@^2.0.1:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/javascript-stringify/-/javascript-stringify-2.1.0.tgz#27c76539be14d8bd128219a2d731b09337904e79"
+  integrity sha512-JVAfqNPTvNq3sB/VHQJAFxN/sPgKnsKrCwyRt15zwNCdrMMJDdcEOdubuy+DuJYYdm0ox1J4uzEuYKkN+9yhVg==
+
 jest-get-type@^29.6.3:
   version "29.6.3"
   resolved "https://registry.yarnpkg.com/jest-get-type/-/jest-get-type-29.6.3.tgz#36f499fdcea197c1045a127319c0481723908fd1"
@@ -3009,6 +3104,11 @@ json5@^2.2.3:
   resolved "https://registry.yarnpkg.com/json5/-/json5-2.2.3.tgz#78cd6f1a19bdc12b73db5ad0c61efd66c1e29283"
   integrity sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==
 
+jsonc-parser@^3.2.0:
+  version "3.2.1"
+  resolved "https://registry.yarnpkg.com/jsonc-parser/-/jsonc-parser-3.2.1.tgz#031904571ccf929d7670ee8c547545081cb37f1a"
+  integrity sha512-AilxAyFOAcK5wA1+LeaySVBrHsGQvUFCDWXKpZjzaL0PqW+xfBOttn8GNtWKFWqneyMZj41MWF9Kl6iPWLwgOA==
+
 klona@^2.0.6:
   version "2.0.6"
   resolved "https://registry.yarnpkg.com/klona/-/klona-2.0.6.tgz#85bffbf819c03b2f53270412420a4555ef882e22"
@@ -3039,6 +3139,13 @@ locate-path@^5.0.0:
   dependencies:
     p-locate "^4.1.0"
 
+locate-path@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/locate-path/-/locate-path-6.0.0.tgz#55321eb309febbc59c4801d931a72452a681d286"
+  integrity sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==
+  dependencies:
+    p-locate "^5.0.0"
+
 lodash.flattendeep@^4.4.0:
   version "4.4.0"
   resolved "https://registry.yarnpkg.com/lodash.flattendeep/-/lodash.flattendeep-4.4.0.tgz#fb030917f86a3134e5bc9bec0d69e0013ddfedb2"
@@ -3109,16 +3216,23 @@ make-dir@^4.0.0:
   dependencies:
     semver "^7.5.3"
 
-mantine-datatable@<7:
-  version "6.0.8"
-  resolved "https://registry.yarnpkg.com/mantine-datatable/-/mantine-datatable-6.0.8.tgz#81ec3002ef53f211401a9c9b6adf5e19a4ec0312"
-  integrity sha512-7LpnLhD8XrnSwOysCueNgGNK0fW7LF1BGwi7fjnzrxG20wXubdsEq97csb/hSr5IJoci+fyZrEdb9xWjA0xqpQ==
+mantine-datatable@^7.8.1:
+  version "7.8.1"
+  resolved "https://registry.yarnpkg.com/mantine-datatable/-/mantine-datatable-7.8.1.tgz#655cd7255f5226a1c31f88f8fcea4a4c0676ac3f"
+  integrity sha512-lsU6tiM1m0N6A/b/nxjMYq+xEtFYbyFoYAyFL32rf7CKmcyygy9gSIm955RA0Hb41D99riI4Vz45fVzHbG/Y/Q==
 
 marked@^4.1.0:
   version "4.3.0"
   resolved "https://registry.yarnpkg.com/marked/-/marked-4.3.0.tgz#796362821b019f734054582038b116481b456cf3"
   integrity sha512-PRsaiG84bK+AMvxziE/lCFss8juXjNaWzVbN5tXAm4XjeaS9NAHhop+PjQxz2A9h8Q4M/xGmzP8vqNwy6JeK0A==
 
+media-query-parser@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/media-query-parser/-/media-query-parser-2.0.2.tgz#ff79e56cee92615a304a1c2fa4f2bd056c0a1d29"
+  integrity sha512-1N4qp+jE0pL5Xv4uEcwVUhIkwdUO3S/9gML90nqKA7v7FcOS5vUtatfzok9S9U1EJU8dHWlcv95WLnKmmxZI9w==
+  dependencies:
+    "@babel/runtime" "^7.12.5"
+
 memoize-one@^6.0.0:
   version "6.0.0"
   resolved "https://registry.yarnpkg.com/memoize-one/-/memoize-one-6.0.0.tgz#b2591b871ed82948aee4727dc6abceeeac8c1045"
@@ -3161,6 +3275,21 @@ mkdirp@~3.0.0:
   resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-3.0.1.tgz#e44e4c5607fb279c168241713cc6e0fea9adcb50"
   integrity sha512-+NsyUUAZDmo6YVHzL/stxSu3t9YS1iljliy3BSDrXJ/dkn1KYdmtZODGGjLcc9XLgVVpH4KshHB8XmZgMhaBXg==
 
+mlly@^1.2.0, mlly@^1.4.2:
+  version "1.6.1"
+  resolved "https://registry.yarnpkg.com/mlly/-/mlly-1.6.1.tgz#0983067dc3366d6314fc5e12712884e6978d028f"
+  integrity sha512-vLgaHvaeunuOXHSmEbZ9izxPx3USsk8KCQ8iC+aTlp5sKRSoZvwhHh5L9VbKSaVC6sJDqbyohIS76E2VmHIPAA==
+  dependencies:
+    acorn "^8.11.3"
+    pathe "^1.1.2"
+    pkg-types "^1.0.3"
+    ufo "^1.3.2"
+
+modern-ahocorasick@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/modern-ahocorasick/-/modern-ahocorasick-1.0.1.tgz#dec373444f51b5458ac05216a8ec376e126dd283"
+  integrity sha512-yoe+JbhTClckZ67b2itRtistFKf8yPYelHLc7e5xAwtNAXxM6wJTUx2C7QeVSJFDzKT7bCIFyBVybPMKvmB9AA==
+
 moment@~2.30.1:
   version "2.30.1"
   resolved "https://registry.yarnpkg.com/moment/-/moment-2.30.1.tgz#f8c91c07b7a786e30c59926df530b4eac96974ae"
@@ -3181,7 +3310,7 @@ mute-stream@0.0.8:
   resolved "https://registry.yarnpkg.com/mute-stream/-/mute-stream-0.0.8.tgz#1630c42b2251ff81e2a283de96a5497ea92e5e0d"
   integrity sha512-nnbWWOkoWyUsTjKrhgD0dcz22mdkSnpYqbEjIm2nhwhuxlSkpywJmBo8h0ZqJdkp73mb90SssHkN4rsRaBAfAA==
 
-nanoid@^3.3.7:
+nanoid@^3.3.6, nanoid@^3.3.7:
   version "3.3.7"
   resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.7.tgz#d0c301a691bc8d54efa0a2226ccf3fe2fd656bd8"
   integrity sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==
@@ -3280,6 +3409,11 @@ os-tmpdir@~1.0.2:
   resolved "https://registry.yarnpkg.com/os-tmpdir/-/os-tmpdir-1.0.2.tgz#bbe67406c79aa85c5cfec766fe5734555dfa1274"
   integrity sha512-D2FR03Vir7FIu45XBY20mTb+/ZSWB00sjU9jdQXt83gDrI4Ztz5Fs7/yy74g2N5SVQY4xY1qDr4rNddwYRVX0g==
 
+outdent@^0.8.0:
+  version "0.8.0"
+  resolved "https://registry.yarnpkg.com/outdent/-/outdent-0.8.0.tgz#2ebc3e77bf49912543f1008100ff8e7f44428eb0"
+  integrity sha512-KiOAIsdpUTcAXuykya5fnVVT+/5uS0Q1mrkRHcF89tpieSmY33O/tmc54CqwA+bfhbtEfZUNLHaPUiB9X3jt1A==
+
 p-limit@^2.0.0, p-limit@^2.2.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/p-limit/-/p-limit-2.3.0.tgz#3dd33c647a214fdfffd835933eb086da0dc21db1"
@@ -3287,6 +3421,13 @@ p-limit@^2.0.0, p-limit@^2.2.0:
   dependencies:
     p-try "^2.0.0"
 
+p-limit@^3.0.2:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/p-limit/-/p-limit-3.1.0.tgz#e1daccbe78d0d1388ca18c64fea38e3e57e3706b"
+  integrity sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==
+  dependencies:
+    yocto-queue "^0.1.0"
+
 p-locate@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/p-locate/-/p-locate-3.0.0.tgz#322d69a05c0264b25997d9f40cd8a891ab0064a4"
@@ -3301,6 +3442,13 @@ p-locate@^4.1.0:
   dependencies:
     p-limit "^2.2.0"
 
+p-locate@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/p-locate/-/p-locate-5.0.0.tgz#83c8315c6785005e3bd021839411c9e110e6d834"
+  integrity sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==
+  dependencies:
+    p-limit "^3.0.2"
+
 p-map@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/p-map/-/p-map-3.0.0.tgz#d704d9af8a2ba684e2600d9a215983d4141a979d"
@@ -3375,7 +3523,7 @@ path-type@^4.0.0:
   resolved "https://registry.yarnpkg.com/path-type/-/path-type-4.0.0.tgz#84ed01c0a7ba380afe09d90a8c180dcd9d03043b"
   integrity sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==
 
-pathe@^1.1.0:
+pathe@^1.1.0, pathe@^1.1.1, pathe@^1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/pathe/-/pathe-1.1.2.tgz#6c4cb47a945692e48a1ddd6e4094d170516437ec"
   integrity sha512-whLdWMYL2TwI08hn8/ZqAbrVemu0LNaNNJZX73O6qaIdCTfXutsLhMkjdENX0qhsQ9uIimo4/aQOmXkoon2nDQ==
@@ -3385,7 +3533,7 @@ picocolors@^1.0.0:
   resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-1.0.0.tgz#cb5bdc74ff3f51892236eaf79d68bc44564ab81c"
   integrity sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==
 
-picomatch@^2.0.4, picomatch@^2.0.5, picomatch@^2.2.1, picomatch@^2.3.1:
+picomatch@^2.0.4, picomatch@^2.0.5, picomatch@^2.2.1:
   version "2.3.1"
   resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.3.1.tgz#3ba3833733646d9d3e4995946c1365a67fb07a42"
   integrity sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==
@@ -3397,6 +3545,15 @@ pkg-dir@^4.1.0:
   dependencies:
     find-up "^4.0.0"
 
+pkg-types@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/pkg-types/-/pkg-types-1.0.3.tgz#988b42ab19254c01614d13f4f65a2cfc7880f868"
+  integrity sha512-nN7pYi0AQqJnoLPC9eHFQ8AcyaixBUOwvqc5TDnIKCMEE6I0y8P7OKA7fPexsXGCGxQDl/cmrLAp26LhcwxZ4A==
+  dependencies:
+    jsonc-parser "^3.2.0"
+    mlly "^1.2.0"
+    pathe "^1.1.0"
+
 pkg-up@^3.1.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/pkg-up/-/pkg-up-3.1.0.tgz#100ec235cc150e4fd42519412596a28512a0def5"
@@ -3428,6 +3585,15 @@ postcss-value-parser@^4.0.2:
   resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz#723c09920836ba6d3e5af019f92bc0971c02e514"
   integrity sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==
 
+postcss@8.4.31:
+  version "8.4.31"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.31.tgz#92b451050a9f914da6755af352bdc0192508656d"
+  integrity sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==
+  dependencies:
+    nanoid "^3.3.6"
+    picocolors "^1.0.0"
+    source-map-js "^1.0.2"
+
 postcss@^8.4.38:
   version "8.4.38"
   resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.38.tgz#b387d533baf2054288e337066d81c6bee9db9e0e"
@@ -3453,7 +3619,7 @@ process-on-spawn@^1.0.0:
   dependencies:
     fromentries "^1.2.0"
 
-prop-types@15.x, prop-types@^15.6.0, prop-types@^15.6.2, prop-types@^15.8.1:
+prop-types@15.x, prop-types@^15.6.0, prop-types@^15.6.2, prop-types@^15.7.2, prop-types@^15.8.1:
   version "15.8.1"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5"
   integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==
@@ -3500,13 +3666,11 @@ react-draggable@^4.0.3, react-draggable@^4.4.5:
     clsx "^1.1.1"
     prop-types "^15.8.1"
 
-react-dropzone@14.2.3:
-  version "14.2.3"
-  resolved "https://registry.yarnpkg.com/react-dropzone/-/react-dropzone-14.2.3.tgz#0acab68308fda2d54d1273a1e626264e13d4e84b"
-  integrity sha512-O3om8I+PkFKbxCukfIR3QAGftYXDZfOE2N1mr/7qebQJHs7U+/RSL/9xomJNpRg9kM5h9soQSdf0Gc7OHF5Fug==
+react-dropzone-esm@15.0.1:
+  version "15.0.1"
+  resolved "https://registry.yarnpkg.com/react-dropzone-esm/-/react-dropzone-esm-15.0.1.tgz#8c689638aaa9feb5b2a429dd565acfa6792263e5"
+  integrity sha512-RdeGpqwHnoV/IlDFpQji7t7pTtlC2O1i/Br0LWkRZ9hYtLyce814S71h5NolnCZXsIN5wrZId6+8eQj2EBnEzg==
   dependencies:
-    attr-accept "^2.2.2"
-    file-selector "^0.6.0"
     prop-types "^15.8.1"
 
 react-grid-layout@^1.4.4:
@@ -3536,6 +3700,13 @@ react-is@^18.0.0, react-is@^18.2.0:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.2.0.tgz#199431eeaaa2e09f86427efbb4f1473edb47609b"
   integrity sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==
 
+react-number-format@^5.3.1:
+  version "5.3.4"
+  resolved "https://registry.yarnpkg.com/react-number-format/-/react-number-format-5.3.4.tgz#4780522ba1fdaff20aaa0732716490c6758b8557"
+  integrity sha512-2hHN5mbLuCDUx19bv0Q8wet67QqYK6xmtLQeY5xx+h7UXiMmRtaCwqko4mMPoKXLc6xAzwRrutg8XbTRlsfjRg==
+  dependencies:
+    prop-types "^15.7.2"
+
 react-refresh@^0.14.0:
   version "0.14.0"
   resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.14.0.tgz#4e02825378a5f227079554d4284889354e5f553e"
@@ -3549,7 +3720,7 @@ react-remove-scroll-bar@^2.3.6:
     react-style-singleton "^2.2.1"
     tslib "^2.0.0"
 
-react-remove-scroll@^2.5.5:
+react-remove-scroll@^2.5.7:
   version "2.5.9"
   resolved "https://registry.yarnpkg.com/react-remove-scroll/-/react-remove-scroll-2.5.9.tgz#6a38e7d46043abc2c6b0fb39db650b9f2e38be3e"
   integrity sha512-bvHCLBrFfM2OgcrpPY2YW84sPdS2o2HKWJUf1xGyGLnSoEnOTOBpahIarjRuYtN0ryahCeP242yf+5TrBX/pZA==
@@ -3568,7 +3739,7 @@ react-resizable@^3.0.5:
     prop-types "15.x"
     react-draggable "^4.0.3"
 
-react-router-dom@^6.22.1:
+react-router-dom@^6.22.3:
   version "6.22.3"
   resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-6.22.3.tgz#9781415667fd1361a475146c5826d9f16752a691"
   integrity sha512-7ZILI7HjcE+p31oQvwbokjk6OA/bnFxrhJ19n82Ex9Ph8fNAq+Hm/7KchpMGlTgWhUxRHMMCut+vEtNpWpowKw==
@@ -3623,26 +3794,16 @@ react-style-singleton@^2.2.1:
     invariant "^2.2.4"
     tslib "^2.0.0"
 
-react-textarea-autosize@8.3.4:
-  version "8.3.4"
-  resolved "https://registry.yarnpkg.com/react-textarea-autosize/-/react-textarea-autosize-8.3.4.tgz#270a343de7ad350534141b02c9cb78903e553524"
-  integrity sha512-CdtmP8Dc19xL8/R6sWvtknD/eCXkQr30dtvC4VmGInhRsfF8X/ihXCq6+9l9qbxmKRiq407/7z5fxE7cVWQNgQ==
+react-textarea-autosize@8.5.3:
+  version "8.5.3"
+  resolved "https://registry.yarnpkg.com/react-textarea-autosize/-/react-textarea-autosize-8.5.3.tgz#d1e9fe760178413891484847d3378706052dd409"
+  integrity sha512-XT1024o2pqCuZSuBt9FwHlaDeNtVrtCXu0Rnz88t1jUGheCLa3PhjE1GH8Ctm2axEtvdCl5SUHYschyQ0L5QHQ==
   dependencies:
-    "@babel/runtime" "^7.10.2"
+    "@babel/runtime" "^7.20.13"
     use-composed-ref "^1.3.0"
     use-latest "^1.2.1"
 
-react-transition-group@4.4.2:
-  version "4.4.2"
-  resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.4.2.tgz#8b59a56f09ced7b55cbd53c36768b922890d5470"
-  integrity sha512-/RNYfRAMlZwDSr6z4zNKV6xu53/e2BuaBbGhbyYIXTrmgu/bGHzmqOs7mJSJBHy9Ud+ApHx3QjrkKSp1pxvlFg==
-  dependencies:
-    "@babel/runtime" "^7.5.5"
-    dom-helpers "^5.0.1"
-    loose-envify "^1.4.0"
-    prop-types "^15.6.2"
-
-react-transition-group@^4.3.0, react-transition-group@^4.4.5:
+react-transition-group@4.4.5, react-transition-group@^4.3.0, react-transition-group@^4.4.5:
   version "4.4.5"
   resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.4.5.tgz#e53d4e3f3344da8521489fbef8f2581d42becdd1"
   integrity sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==
@@ -3683,9 +3844,9 @@ recharts-scale@^0.4.4:
     decimal.js-light "^2.4.1"
 
 recharts@^2.12.4:
-  version "2.12.4"
-  resolved "https://registry.yarnpkg.com/recharts/-/recharts-2.12.4.tgz#e560a57cd44ab554c99a0d93bdd58d059b309a2e"
-  integrity sha512-dM4skmk4fDKEDjL9MNunxv6zcTxePGVEzRnLDXALRpfJ85JoQ0P0APJ/CoJlmnQI0gPjBlOkjzrwrfQrRST3KA==
+  version "2.12.5"
+  resolved "https://registry.yarnpkg.com/recharts/-/recharts-2.12.5.tgz#b335eb66173317dccb3e126fce1d7ac5b3cee1e9"
+  integrity sha512-Cy+BkqrFIYTHJCyKHJEPvbHE2kVQEP6PKbOHJ8ztRGTAhvHuUnCwDaKVb13OwRFZ0QNUk1QvGTDdgWSMbuMtKw==
   dependencies:
     clsx "^2.0.0"
     eventemitter3 "^4.0.1"
@@ -3713,6 +3874,11 @@ require-directory@^2.1.1:
   resolved "https://registry.yarnpkg.com/require-directory/-/require-directory-2.1.1.tgz#8c64ad5fd30dab1c976e2344ffe7f792a6a6df42"
   integrity sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==
 
+"require-like@>= 0.1.1":
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/require-like/-/require-like-0.1.2.tgz#ad6f30c13becd797010c468afa775c0c0a6b47fa"
+  integrity sha512-oyrU88skkMtDdauHDuKVrgR+zuItqr6/c//FXzvmxRGMexSDc6hNvJInGW3LL46n+8b50RykrvwSUIIQH2LQ5A==
+
 require-main-filename@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/require-main-filename/-/require-main-filename-2.0.0.tgz#d0b329ecc7cc0f61649f62215be69af54aa8989b"
@@ -3773,27 +3939,28 @@ rollup-plugin-license@^3.3.1:
     spdx-satisfies "~5.0.1"
 
 rollup@^4.13.0:
-  version "4.14.0"
-  resolved "https://registry.yarnpkg.com/rollup/-/rollup-4.14.0.tgz#c3e2cd479f1b2358b65c1f810fa05b51603d7be8"
-  integrity sha512-Qe7w62TyawbDzB4yt32R0+AbIo6m1/sqO7UPzFS8Z/ksL5mrfhA0v4CavfdmFav3D+ub4QeAgsGEe84DoWe/nQ==
+  version "4.14.3"
+  resolved "https://registry.yarnpkg.com/rollup/-/rollup-4.14.3.tgz#bcbb7784b35826d3164346fa6d5aac95190d8ba9"
+  integrity sha512-ag5tTQKYsj1bhrFC9+OEWqb5O6VYgtQDO9hPDBMmIbePwhfSr+ExlcU741t8Dhw5DkPCQf6noz0jb36D6W9/hw==
   dependencies:
     "@types/estree" "1.0.5"
   optionalDependencies:
-    "@rollup/rollup-android-arm-eabi" "4.14.0"
-    "@rollup/rollup-android-arm64" "4.14.0"
-    "@rollup/rollup-darwin-arm64" "4.14.0"
-    "@rollup/rollup-darwin-x64" "4.14.0"
-    "@rollup/rollup-linux-arm-gnueabihf" "4.14.0"
-    "@rollup/rollup-linux-arm64-gnu" "4.14.0"
-    "@rollup/rollup-linux-arm64-musl" "4.14.0"
-    "@rollup/rollup-linux-powerpc64le-gnu" "4.14.0"
-    "@rollup/rollup-linux-riscv64-gnu" "4.14.0"
-    "@rollup/rollup-linux-s390x-gnu" "4.14.0"
-    "@rollup/rollup-linux-x64-gnu" "4.14.0"
-    "@rollup/rollup-linux-x64-musl" "4.14.0"
-    "@rollup/rollup-win32-arm64-msvc" "4.14.0"
-    "@rollup/rollup-win32-ia32-msvc" "4.14.0"
-    "@rollup/rollup-win32-x64-msvc" "4.14.0"
+    "@rollup/rollup-android-arm-eabi" "4.14.3"
+    "@rollup/rollup-android-arm64" "4.14.3"
+    "@rollup/rollup-darwin-arm64" "4.14.3"
+    "@rollup/rollup-darwin-x64" "4.14.3"
+    "@rollup/rollup-linux-arm-gnueabihf" "4.14.3"
+    "@rollup/rollup-linux-arm-musleabihf" "4.14.3"
+    "@rollup/rollup-linux-arm64-gnu" "4.14.3"
+    "@rollup/rollup-linux-arm64-musl" "4.14.3"
+    "@rollup/rollup-linux-powerpc64le-gnu" "4.14.3"
+    "@rollup/rollup-linux-riscv64-gnu" "4.14.3"
+    "@rollup/rollup-linux-s390x-gnu" "4.14.3"
+    "@rollup/rollup-linux-x64-gnu" "4.14.3"
+    "@rollup/rollup-linux-x64-musl" "4.14.3"
+    "@rollup/rollup-win32-arm64-msvc" "4.14.3"
+    "@rollup/rollup-win32-ia32-msvc" "4.14.3"
+    "@rollup/rollup-win32-x64-msvc" "4.14.3"
     fsevents "~2.3.2"
 
 run-async@^2.4.0:
@@ -3842,7 +4009,7 @@ set-blocking@^2.0.0:
   resolved "https://registry.yarnpkg.com/set-blocking/-/set-blocking-2.0.0.tgz#045f9782d011ae9a6803ddd382b24392b3d890f7"
   integrity sha512-KiKBS8AnWGEyLzofFfmvKwpdPzqiy16LvQfK3yv/fVH7Bj13/wl3JSR1J+rfgRE9q7xUJK4qvgS8raSOeLUehw==
 
-shallowequal@^1.1.0:
+shallowequal@1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/shallowequal/-/shallowequal-1.1.0.tgz#188d521de95b9087404fd4dcb68b13df0ae4e7f8"
   integrity sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ==
@@ -3864,7 +4031,7 @@ signal-exit@^3.0.2:
   resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.7.tgz#a9a1767f8af84155114eaabd73f99273c8f59ad9"
   integrity sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==
 
-source-map-js@^1.2.0:
+source-map-js@^1.0.2, source-map-js@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.2.0.tgz#16b809c162517b5b8c3e7dcd315a2a5c2612b2af"
   integrity sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==
@@ -3989,28 +4156,32 @@ style-mod@^4.0.0, style-mod@^4.1.0:
   resolved "https://registry.yarnpkg.com/style-mod/-/style-mod-4.1.2.tgz#ca238a1ad4786520f7515a8539d5a63691d7bf67"
   integrity sha512-wnD1HyVqpJUI2+eKZ+eo1UwghftP6yuFheBqqe+bWCotBjC2K1YnteJILRMs3SM4V/0dLEW1SC27MWP5y+mwmw==
 
-styled-components@^5.3.6:
-  version "5.3.11"
-  resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-5.3.11.tgz#9fda7bf1108e39bf3f3e612fcc18170dedcd57a8"
-  integrity sha512-uuzIIfnVkagcVHv9nE0VPlHPSCmXIUGKfJ42LNjxCCTDTL5sgnJ8Z7GZBq0EnLYGln77tPpEpExt2+qa+cZqSw==
+styled-components@^6.1.8:
+  version "6.1.8"
+  resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-6.1.8.tgz#c109d36aeea52d8f049e12de2f3be39a6fc86201"
+  integrity sha512-PQ6Dn+QxlWyEGCKDS71NGsXoVLKfE1c3vApkvDYS5KAK+V8fNWGhbSUEo9Gg2iaID2tjLXegEW3bZDUGpofRWw==
   dependencies:
-    "@babel/helper-module-imports" "^7.0.0"
-    "@babel/traverse" "^7.4.5"
-    "@emotion/is-prop-valid" "^1.1.0"
-    "@emotion/stylis" "^0.8.4"
-    "@emotion/unitless" "^0.7.4"
-    babel-plugin-styled-components ">= 1.12.0"
-    css-to-react-native "^3.0.0"
-    hoist-non-react-statics "^3.0.0"
-    shallowequal "^1.1.0"
-    supports-color "^5.5.0"
+    "@emotion/is-prop-valid" "1.2.1"
+    "@emotion/unitless" "0.8.0"
+    "@types/stylis" "4.2.0"
+    css-to-react-native "3.2.0"
+    csstype "3.1.2"
+    postcss "8.4.31"
+    shallowequal "1.1.0"
+    stylis "4.3.1"
+    tslib "2.5.0"
 
 stylis@4.2.0:
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/stylis/-/stylis-4.2.0.tgz#79daee0208964c8fe695a42fcffcac633a211a51"
   integrity sha512-Orov6g6BB1sDfYgzWfTHDOxamtX1bE/zo104Dh9e6fqJ3PooipYyfJ0pUmrZO2wAvO8YbEyeFrkV91XTsGMSrw==
 
-supports-color@^5.3.0, supports-color@^5.5.0:
+stylis@4.3.1:
+  version "4.3.1"
+  resolved "https://registry.yarnpkg.com/stylis/-/stylis-4.3.1.tgz#ed8a9ebf9f76fe1e12d462f5cc3c4c980b23a7eb"
+  integrity sha512-EQepAV+wMsIaGVGX1RECzgrcqRRU/0sYOHkeLsZ3fzHaHXZy4DaOOX0vOlGQdlsjkh3mFHAIlVimpwAs4dslyQ==
+
+supports-color@^5.3.0:
   version "5.5.0"
   resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-5.5.0.tgz#e2e69a44ac8772f78a1ec0b35b689df6530efc8f"
   integrity sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==
@@ -4029,7 +4200,7 @@ supports-preserve-symlinks-flag@^1.0.0:
   resolved "https://registry.yarnpkg.com/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz#6eda4bd344a3c94aea376d4cc31bc77311039e09"
   integrity sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==
 
-tabbable@^6.0.1:
+tabbable@^6.0.0:
   version "6.2.0"
   resolved "https://registry.yarnpkg.com/tabbable/-/tabbable-6.2.0.tgz#732fb62bc0175cfcec257330be187dcfba1f3b97"
   integrity sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew==
@@ -4079,12 +4250,17 @@ tr46@^1.0.1:
   dependencies:
     punycode "^2.1.0"
 
+tslib@2.5.0:
+  version "2.5.0"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.5.0.tgz#42bfed86f5787aeb41d031866c8f402429e0fddf"
+  integrity sha512-336iVw3rtn2BUK7ORdIAHTyxHGRIHVReokCR3XjbckJMK7ms8FysBfhLR8IXnAgy7T0PTPNBWKiH514FOW/WSg==
+
 tslib@^1.9.0:
   version "1.14.1"
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00"
   integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==
 
-tslib@^2.0.0, tslib@^2.1.0, tslib@^2.4.0:
+tslib@^2.0.0, tslib@^2.1.0:
   version "2.6.2"
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.6.2.tgz#703ac29425e7b37cd6fd456e92404d46d1f3e4ae"
   integrity sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==
@@ -4099,6 +4275,11 @@ type-fest@^0.8.0:
   resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.8.1.tgz#09e249ebde851d3b1e48d27c105444667f17b83d"
   integrity sha512-4dbzIzqvjtgiM5rw1k5rEHtBANKmdudhGyBEajN01fEyhaAIhsoKNy6y7+IN93IfpFtwY9iqi7kD+xwKhQsNJA==
 
+type-fest@^4.12.0:
+  version "4.15.0"
+  resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-4.15.0.tgz#21da206b89c15774cc718c4f2d693e13a1a14a43"
+  integrity sha512-tB9lu0pQpX5KJq54g+oHOLumOx+pMep4RaM6liXh2PKmVRFF+/vAtUP0ZaJ0kOySfVNjF6doBWPHhBhISKdlIA==
+
 typedarray-to-buffer@^3.1.5:
   version "3.1.5"
   resolved "https://registry.yarnpkg.com/typedarray-to-buffer/-/typedarray-to-buffer-3.1.5.tgz#a97ee7a9ff42691b9f783ff1bc5112fe3fca9080"
@@ -4106,16 +4287,21 @@ typedarray-to-buffer@^3.1.5:
   dependencies:
     is-typedarray "^1.0.0"
 
-typescript@^5.3.3:
-  version "5.4.4"
-  resolved "https://registry.yarnpkg.com/typescript/-/typescript-5.4.4.tgz#eb2471e7b0a5f1377523700a21669dce30c2d952"
-  integrity sha512-dGE2Vv8cpVvw28v8HCPqyb08EzbBURxDpuhJvTrusShUfGnhHBafDsLdS1EhhxyL6BJQE+2cT3dDPAv+MQ6oLw==
+typescript@^5.4.5:
+  version "5.4.5"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-5.4.5.tgz#42ccef2c571fdbd0f6718b1d1f5e6e5ef006f611"
+  integrity sha512-vcI4UpRgg81oIRUFwR0WSIHKt11nJ7SAVlYNIu+QpqeyXP+gpQJy/Z4+F0aGxSE4MqwjyXvW/TzgkLAx2AGHwQ==
 
 typo-js@*:
   version "1.2.4"
   resolved "https://registry.yarnpkg.com/typo-js/-/typo-js-1.2.4.tgz#0e009c289a966dd51dc80a75580289a381cc607f"
   integrity sha512-Oy/k+tFle5NAA3J/yrrYGfvEnPVrDZ8s8/WCwjUE75k331QyKIsFss7byQ/PzBmXLY6h1moRnZbnaxWBe3I3CA==
 
+ufo@^1.3.2:
+  version "1.5.3"
+  resolved "https://registry.yarnpkg.com/ufo/-/ufo-1.5.3.tgz#3325bd3c977b6c6cd3160bf4ff52989adc9d3344"
+  integrity sha512-Y7HYmWaFwPUmkoQCUIAYpKqkOf+SbVj/2fJJZ4RJMCfZp0rTGwRbzQD+HghfnhKOjL9E01okqz+ncJskGYfBNw==
+
 undici-types@~5.26.4:
   version "5.26.5"
   resolved "https://registry.yarnpkg.com/undici-types/-/undici-types-5.26.5.tgz#bcd539893d00b56e964fd2657a4866b221a65617"
@@ -4201,6 +4387,17 @@ victory-vendor@^36.6.8:
     d3-time "^3.0.0"
     d3-timer "^3.0.1"
 
+vite-node@^1.2.0:
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/vite-node/-/vite-node-1.5.0.tgz#7f74dadfecb15bca016c5ce5ef85e5cc4b82abf2"
+  integrity sha512-tV8h6gMj6vPzVCa7l+VGq9lwoJjW8Y79vst8QZZGiuRAfijU+EEWuc0kFpmndQrWhMMhet1jdSF+40KSZUqIIw==
+  dependencies:
+    cac "^6.7.14"
+    debug "^4.3.4"
+    pathe "^1.1.1"
+    picocolors "^1.0.0"
+    vite "^5.0.0"
+
 vite-plugin-babel-macros@^1.0.6:
   version "1.0.6"
   resolved "https://registry.yarnpkg.com/vite-plugin-babel-macros/-/vite-plugin-babel-macros-1.0.6.tgz#d05cee3c38c620ccb534e38f412fdd899a3365b5"
@@ -4224,7 +4421,7 @@ vite-plugin-istanbul@^6.0.0:
     source-map "^0.7.4"
     test-exclude "^6.0.0"
 
-vite@^5.2.7:
+vite@^5.0.0, vite@^5.0.11, vite@^5.2.8:
   version "5.2.8"
   resolved "https://registry.yarnpkg.com/vite/-/vite-5.2.8.tgz#a99e09939f1a502992381395ce93efa40a2844aa"
   integrity sha512-OyZR+c1CE8yeHw5V5t59aXsUPPVTHMDjEZz8MgguLL/Q7NblxhZUlTu9xSPqlsUO/y+X7dlU05jdhvyycD55DA==
@@ -4342,7 +4539,12 @@ yargs@^15.0.2:
     y18n "^4.0.0"
     yargs-parser "^18.1.2"
 
-zustand@^4.5.1:
+yocto-queue@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/yocto-queue/-/yocto-queue-0.1.0.tgz#0294eb3dee05028d31ee1a5fa2c556a6aaf10a1b"
+  integrity sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==
+
+zustand@^4.5.2:
   version "4.5.2"
   resolved "https://registry.yarnpkg.com/zustand/-/zustand-4.5.2.tgz#fddbe7cac1e71d45413b3682cdb47b48034c3848"
   integrity sha512-2cN1tPkDVkwCy5ickKrI7vijSjPksFRfqS6237NzT0vqSsztTNnQdHw9mmN7uBdk3gceVXU0a+21jFzFzAc9+g==