@omniviewdev/ui 0.1.10 → 0.1.11

package/dist/theme.js

@@ -1,1362 +1,1337 @@
-import { jsx as x, Fragment as I, jsxs as B } from "react/jsx-runtime";
-import { createTheme as v, ThemeProvider as W, CssBaseline as F, useColorScheme as H } from "@mui/material";
-import * as C from "react";
-import { useMemo as P, useEffect as D } from "react";
-import { createTheme as L, alpha as e, lighten as S, darken as M } from "@mui/material/styles";
+import { g as x, b as f, a as I, o as P, r as H, p as W, c as j, d as N, T as B } from "./AppTheme-wAxlNjgN.js";
+import { A as Do, e as Ao, s as Io, t as Po, u as Ho } from "./AppTheme-wAxlNjgN.js";
+import * as v from "react";
+import { alpha as e, lighten as T, darken as E, createTheme as U } from "@mui/material/styles";
 import { outlinedInputClasses as u } from "@mui/material/OutlinedInput";
-import { toggleButtonGroupClasses as $ } from "@mui/material/ToggleButtonGroup";
-import { toggleButtonClasses as O } from "@mui/material/ToggleButton";
-import A from "@mui/icons-material/CheckBoxOutlineBlankRounded";
-import E from "@mui/icons-material/CheckRounded";
-import V from "@mui/icons-material/RemoveRounded";
-import { buttonBaseClasses as m } from "@mui/material/ButtonBase";
-import { dividerClasses as j } from "@mui/material/Divider";
-import { menuItemClasses as f } from "@mui/material/MenuItem";
-import { tabClasses as w } from "@mui/material/Tab";
-import G from "@mui/icons-material/UnfoldMoreRounded";
-import { svgIconClasses as k } from "@mui/material/SvgIcon";
-import { typographyClasses as U } from "@mui/material/Typography";
-import { chipClasses as l } from "@mui/material/Chip";
-import { iconButtonClasses as N } from "@mui/material/IconButton";
-const c = L(), t = {
-  50: "hsl(210, 100%, 95%)",
-  100: "hsl(210, 100%, 92%)",
-  200: "hsl(210, 100%, 80%)",
-  300: "hsl(210, 100%, 65%)",
-  400: "hsl(210, 98%, 48%)",
-  500: "hsl(210, 98%, 42%)",
-  600: "hsl(210, 98%, 55%)",
-  700: "hsl(210, 100%, 35%)",
-  800: "hsl(210, 100%, 16%)",
-  900: "hsl(210, 100%, 21%)"
-}, r = {
-  50: "#ECF0F6",
-  // --ov-scale-gray-13
-  100: "#CBD5E1",
-  // --ov-scale-gray-12
-  200: "#ABB8CC",
-  // --ov-scale-gray-11
-  300: "#8B9BB5",
-  // --ov-scale-gray-10
-  400: "#6B7D96",
-  // --ov-scale-gray-9
-  500: "#3E4F66",
-  // --ov-scale-gray-8
-  600: "#2D3D52",
-  // --ov-scale-gray-6
-  700: "#1F2937",
-  // --ov-scale-gray-4
-  800: "#151B23",
-  // --ov-scale-gray-2
-  900: "#0D1117"
-  // --ov-scale-gray-0
-}, d = {
-  50: "hsl(120, 80%, 98%)",
-  100: "hsl(120, 75%, 94%)",
-  200: "hsl(120, 75%, 87%)",
-  300: "hsl(120, 61%, 77%)",
-  400: "hsl(120, 44%, 53%)",
-  500: "hsl(120, 59%, 30%)",
-  600: "hsl(120, 70%, 25%)",
-  700: "hsl(120, 75%, 16%)",
-  800: "hsl(120, 84%, 10%)",
-  900: "hsl(120, 87%, 6%)"
-}, s = {
-  50: "hsl(45, 100%, 97%)",
-  100: "hsl(45, 92%, 90%)",
-  200: "hsl(45, 94%, 80%)",
-  300: "hsl(45, 90%, 65%)",
-  400: "hsl(45, 90%, 40%)",
-  500: "hsl(45, 90%, 35%)",
-  600: "hsl(45, 91%, 25%)",
-  700: "hsl(45, 94%, 20%)",
-  800: "hsl(45, 95%, 16%)",
-  900: "hsl(45, 93%, 12%)"
-}, p = {
-  50: "hsl(0, 100%, 97%)",
-  100: "hsl(0, 92%, 90%)",
-  200: "hsl(0, 94%, 80%)",
-  300: "hsl(0, 90%, 65%)",
-  400: "hsl(0, 90%, 40%)",
-  500: "hsl(0, 90%, 30%)",
-  600: "hsl(0, 91%, 25%)",
-  700: "hsl(0, 94%, 18%)",
-  800: "hsl(0, 95%, 12%)",
-  900: "hsl(0, 93%, 6%)"
-}, n = {
-  50: "hsl(270, 100%, 97%)",
-  100: "hsl(270, 92%, 90%)",
-  200: "hsl(270, 80%, 80%)",
-  300: "hsl(270, 70%, 65%)",
-  400: "hsl(270, 70%, 50%)",
-  500: "hsl(270, 70%, 42%)",
-  600: "hsl(270, 70%, 35%)",
-  700: "hsl(270, 75%, 25%)",
-  800: "hsl(270, 80%, 16%)",
-  900: "hsl(270, 85%, 10%)"
-}, R = (o) => ({
-  palette: {
-    mode: o,
-    primary: {
-      light: t[200],
-      main: t[400],
-      dark: t[700],
-      contrastText: t[50],
-      ...o === "dark" && {
-        contrastText: t[50],
-        light: t[300],
-        main: t[400],
-        dark: t[700]
+import { toggleButtonGroupClasses as F } from "@mui/material/ToggleButtonGroup";
+import { toggleButtonClasses as D } from "@mui/material/ToggleButton";
+import X from "@mui/icons-material/CheckBoxOutlineBlankRounded";
+import q from "@mui/icons-material/CheckRounded";
+import J from "@mui/icons-material/RemoveRounded";
+import { jsx as K } from "react/jsx-runtime";
+import { buttonBaseClasses as $ } from "@mui/material/ButtonBase";
+import { dividerClasses as Q } from "@mui/material/Divider";
+import { menuItemClasses as S } from "@mui/material/MenuItem";
+import { tabClasses as A } from "@mui/material/Tab";
+import Y from "@mui/icons-material/UnfoldMoreRounded";
+import { svgIconClasses as m } from "@mui/material/SvgIcon";
+import { typographyClasses as Z } from "@mui/material/Typography";
+import { chipClasses as n } from "@mui/material/Chip";
+import { iconButtonClasses as _ } from "@mui/material/IconButton";
+function w(i) {
+  const o = i?.gray ?? x, a = i?.brand ?? f;
+  return {
+    MuiButtonBase: {
+      defaultProps: {
+        disableTouchRipple: !0,
+        disableRipple: !0
+      },
+      styleOverrides: {
+        root: ({ theme: r }) => ({
+          boxSizing: "border-box",
+          transition: "color 80ms cubic-bezier(0.33,1,0.68,1), background-color 80ms cubic-bezier(0.33,1,0.68,1), border-color 80ms cubic-bezier(0.33,1,0.68,1), box-shadow 80ms cubic-bezier(0.33,1,0.68,1)",
+          "&:focus-visible": {
+            outline: `3px solid ${e(r.palette.primary.main, 0.5)}`,
+            outlineOffset: "2px"
+          }
+        })
       }
     },
-    info: {
-      light: t[100],
-      main: t[300],
-      dark: t[600],
-      contrastText: r[50],
-      ...o === "dark" && {
-        contrastText: t[300],
-        light: t[500],
-        main: t[700],
-        dark: t[900]
+    MuiButton: {
+      defaultProps: {
+        disableElevation: !0
+      },
+      styleOverrides: {
+        root: ({ theme: r }) => {
+          const d = [
+            ["primary", r.palette.primary],
+            ["secondary", r.palette.secondary],
+            ["success", r.palette.success],
+            ["warning", r.palette.warning],
+            ["error", r.palette.error],
+            ["info", r.palette.info]
+          ], p = d.map(([b, l]) => ({
+            props: { color: b, variant: "contained" },
+            style: {
+              backgroundColor: l.main,
+              color: l.contrastText || "#fff",
+              "&:hover": {
+                backgroundColor: E(l.main, 0.12)
+              },
+              "&:active": {
+                backgroundColor: E(l.main, 0.2)
+              },
+              ...r.applyStyles("dark", {
+                backgroundColor: l.main,
+                color: l.contrastText || "#fff",
+                "&:hover": {
+                  backgroundColor: T(l.main, 0.12)
+                },
+                "&:active": {
+                  backgroundColor: T(l.main, 0.04)
+                }
+              })
+            }
+          })), c = d.map(([b, l]) => ({
+            props: { color: b, variant: "outlined" },
+            style: {
+              color: l.main,
+              borderColor: e(l.main, 0.5),
+              backgroundColor: "transparent",
+              "&:hover": { backgroundColor: e(l.main, 0.06), borderColor: l.main },
+              "&:active": { backgroundColor: e(l.main, 0.12) },
+              ...r.applyStyles("dark", {
+                color: l.light,
+                borderColor: e(l.light, 0.4),
+                "&:hover": { backgroundColor: e(l.main, 0.12), borderColor: l.light },
+                "&:active": { backgroundColor: e(l.main, 0.2) }
+              })
+            }
+          })), t = d.map(([b, l]) => ({
+            props: { color: b, variant: "text" },
+            style: {
+              color: l.main,
+              "&:hover": { backgroundColor: e(l.main, 0.06) },
+              "&:active": { backgroundColor: e(l.main, 0.12) },
+              ...r.applyStyles("dark", {
+                color: l.light,
+                "&:hover": { backgroundColor: e(l.main, 0.12) },
+                "&:active": { backgroundColor: e(l.main, 0.2) }
+              })
+            }
+          })), V = d.map(([b, l]) => ({
+            props: { color: b, variant: "soft" },
+            style: {
+              color: l.main,
+              backgroundColor: e(l.main, 0.1),
+              "&:hover": { backgroundColor: e(l.main, 0.18) },
+              "&:active": { backgroundColor: e(l.main, 0.26) },
+              ...r.applyStyles("dark", {
+                color: l.light,
+                backgroundColor: e(l.main, 0.15),
+                "&:hover": { backgroundColor: e(l.main, 0.25) },
+                "&:active": { backgroundColor: e(l.main, 0.32) }
+              })
+            }
+          })), G = d.map(([b, l]) => ({
+            props: { color: b, variant: "link" },
+            style: {
+              color: l.main,
+              ...r.applyStyles("dark", { color: l.light })
+            }
+          }));
+          return {
+            boxShadow: "none",
+            borderRadius: r.shape.borderRadius,
+            textTransform: "none",
+            whiteSpace: "nowrap",
+            // GitHub Primer-style fast, smooth transition on bg-color
+            transition: "color 80ms cubic-bezier(0.33,1,0.68,1), background-color 80ms cubic-bezier(0.33,1,0.68,1), border-color 80ms cubic-bezier(0.33,1,0.68,1), box-shadow 80ms cubic-bezier(0.33,1,0.68,1)",
+            variants: [
+              // === Sizes ===
+              { props: { size: "small" }, style: { minHeight: "2rem", padding: "6px 12px" } },
+              { props: { size: "medium" }, style: { minHeight: "2.25rem", padding: "8px 16px" } },
+              { props: { size: "large" }, style: { minHeight: "2.75rem", padding: "10px 20px" } },
+              { props: { size: "xs" }, style: { minHeight: "1.5rem", padding: "2px 8px", fontSize: "0.6875rem" } },
+              { props: { size: "xl" }, style: { minHeight: "3.25rem", padding: "12px 24px", fontSize: "1rem" } },
+              // === Contained: flat solid ===
+              // Default/neutral: gray solid
+              {
+                props: { variant: "contained" },
+                style: {
+                  boxShadow: "none",
+                  "&:hover": { boxShadow: "none" }
+                }
+              },
+              ...p,
+              // === Outlined: default/neutral gets gray ===
+              {
+                props: { variant: "outlined" },
+                style: {
+                  color: o[700],
+                  border: "1px solid",
+                  borderColor: o[200],
+                  backgroundColor: e(o[50], 0.3),
+                  "&:hover": { backgroundColor: o[100], borderColor: o[300] },
+                  "&:active": { backgroundColor: o[200] },
+                  ...r.applyStyles("dark", {
+                    color: o[200],
+                    backgroundColor: e(o[800], 0.3),
+                    borderColor: o[600],
+                    "&:hover": { backgroundColor: e(o[700], 0.5), borderColor: o[500] },
+                    "&:active": { backgroundColor: o[700] }
+                  })
+                }
+              },
+              ...c,
+              // === Text (ghost): default/neutral gets gray ===
+              {
+                props: { variant: "text" },
+                style: {
+                  color: o[600],
+                  "&:hover": { backgroundColor: e(o[500], 0.08) },
+                  "&:active": { backgroundColor: e(o[500], 0.16) },
+                  ...r.applyStyles("dark", {
+                    color: o[300],
+                    "&:hover": { backgroundColor: e(o[500], 0.12) },
+                    "&:active": { backgroundColor: e(o[500], 0.2) }
+                  })
+                }
+              },
+              ...t,
+              // === Soft (custom): default/neutral gets gray ===
+              {
+                props: { variant: "soft" },
+                style: {
+                  color: o[700],
+                  backgroundColor: e(o[500], 0.08),
+                  "&:hover": { backgroundColor: e(o[500], 0.16) },
+                  "&:active": { backgroundColor: e(o[500], 0.24) },
+                  ...r.applyStyles("dark", {
+                    color: o[200],
+                    backgroundColor: e(o[500], 0.12),
+                    "&:hover": { backgroundColor: e(o[500], 0.2) },
+                    "&:active": { backgroundColor: e(o[500], 0.28) }
+                  })
+                }
+              },
+              ...V,
+              // === Link (custom): base ===
+              {
+                props: { variant: "link" },
+                style: {
+                  color: o[600],
+                  backgroundColor: "transparent",
+                  padding: "0 4px",
+                  minWidth: "auto",
+                  textDecoration: "none",
+                  "&:hover": {
+                    backgroundColor: "transparent",
+                    textDecoration: "underline"
+                  },
+                  ...r.applyStyles("dark", {
+                    color: o[300]
+                  })
+                }
+              },
+              ...G
+            ]
+          };
+        }
       }
     },
-    warning: {
-      light: s[300],
-      main: s[400],
-      dark: s[800],
-      ...o === "dark" && {
-        light: s[400],
-        main: s[500],
-        dark: s[700]
+    MuiIconButton: {
+      styleOverrides: {
+        root: ({ theme: r }) => ({
+          boxSizing: "border-box",
+          borderRadius: r.shape.borderRadius,
+          color: o[600],
+          "&:hover": { backgroundColor: e(o[500], 0.1) },
+          ...r.applyStyles("dark", {
+            color: o[300],
+            "&:hover": { backgroundColor: e(o[500], 0.2) }
+          }),
+          variants: [
+            { props: { size: "small" }, style: { width: "2rem", height: "2rem", padding: "0.25rem" } },
+            { props: { size: "medium" }, style: { width: "2.5rem", height: "2.5rem" } },
+            {
+              props: { color: "primary" },
+              style: {
+                color: a[600],
+                "&:hover": { backgroundColor: e(a[500], 0.1) },
+                ...r.applyStyles("dark", {
+                  color: a[300],
+                  "&:hover": { backgroundColor: e(a[500], 0.2) }
+                })
+              }
+            }
+          ]
+        })
       }
     },
-    error: {
-      light: p[300],
-      main: p[400],
-      dark: p[800],
-      ...o === "dark" && {
-        light: p[400],
-        main: p[500],
-        dark: p[700]
+    MuiToggleButtonGroup: {
+      styleOverrides: {
+        root: ({ theme: r }) => ({
+          borderRadius: r.shape.borderRadius,
+          backgroundColor: o[100],
+          border: `1px solid ${o[200]}`,
+          boxShadow: "none",
+          [`& .${F.grouped}`]: {
+            border: "none",
+            "&:not(:first-of-type)": { marginLeft: 0, borderLeft: "1px solid", borderLeftColor: o[300] }
+          },
+          ...r.applyStyles("dark", {
+            backgroundColor: e(o[800], 0.5),
+            border: `1px solid ${o[700]}`,
+            [`& .${F.grouped}`]: {
+              "&:not(:first-of-type)": { borderLeftColor: o[700] }
+            }
+          })
+        })
       }
     },
-    success: {
-      light: d[300],
-      main: d[400],
-      dark: d[800],
-      ...o === "dark" && {
-        light: d[400],
-        main: d[500],
-        dark: d[700]
+    MuiToggleButton: {
+      styleOverrides: {
+        root: ({ theme: r }) => ({
+          padding: "8px 16px",
+          fontWeight: 500,
+          color: o[600],
+          textTransform: "none",
+          border: "none",
+          borderRadius: r.shape.borderRadius,
+          "&:hover": { backgroundColor: e(o[500], 0.1) },
+          [`&.${D.selected}`]: {
+            color: a[600],
+            backgroundColor: e(a[500], 0.1),
+            "&:hover": { backgroundColor: e(a[500], 0.15) }
+          },
+          ...r.applyStyles("dark", {
+            color: o[400],
+            "&:hover": { backgroundColor: e(o[500], 0.15) },
+            [`&.${D.selected}`]: {
+              color: a[300],
+              backgroundColor: e(a[500], 0.2),
+              "&:hover": { backgroundColor: e(a[500], 0.25) }
+            }
+          })
+        })
       }
     },
-    secondary: {
-      light: n[300],
-      main: n[400],
-      dark: n[700],
-      contrastText: n[50],
-      ...o === "dark" && {
-        light: n[300],
-        main: n[400],
-        dark: n[800]
+    MuiCheckbox: {
+      defaultProps: {
+        disableRipple: !0,
+        icon: v.createElement(X, { sx: { color: "hsla(210, 0%, 0%, 0.0)" } }),
+        checkedIcon: v.createElement(q, { sx: { height: 14, width: 14 } }),
+        indeterminateIcon: v.createElement(J, { sx: { height: 14, width: 14 } })
+      },
+      styleOverrides: {
+        root: ({ theme: r }) => ({
+          margin: 10,
+          height: 16,
+          width: 16,
+          borderRadius: 5,
+          border: "1px solid",
+          borderColor: e(o[300], 0.8),
+          boxShadow: "0 0 0 1.5px hsla(210, 0%, 0%, 0.04) inset",
+          backgroundColor: e(o[100], 0.4),
+          transition: "border-color, background-color, 120ms ease-in",
+          "&:hover": { borderColor: a[300] },
+          "&.Mui-checked": {
+            color: "white",
+            backgroundColor: a[500],
+            borderColor: a[500],
+            boxShadow: "none",
+            "&:hover": { backgroundColor: a[600] }
+          },
+          ...r.applyStyles("dark", {
+            borderColor: e(o[700], 0.8),
+            boxShadow: "0 0 0 1.5px hsl(210, 0%, 0%) inset",
+            backgroundColor: e(o[900], 0.8),
+            "&:hover": { borderColor: a[300] }
+          })
+        })
       }
     },
-    grey: r,
-    // Matches --ov-border-default / --ov-border-muted
-    divider: o === "dark" ? "rgba(62, 79, 102, 0.6)" : "rgba(208, 215, 222, 0.6)",
-    // alpha(--ov-border-default light, 0.6)
-    background: {
-      // Matches --ov-bg-base / --ov-bg-surface
-      default: o === "dark" ? "#0D1117" : "#FFFFFF",
-      paper: o === "dark" ? "#151B23" : "#F6F8FA"
-    },
-    text: {
-      // Matches --ov-fg-default / --ov-fg-muted
-      primary: o === "dark" ? "rgba(236, 240, 246, 0.92)" : "rgba(31, 35, 40, 0.92)",
-      secondary: o === "dark" ? "rgba(236, 240, 246, 0.64)" : "rgba(31, 35, 40, 0.64)"
+    MuiSelect: {
+      styleOverrides: {
+        select: {
+          // Prevent chips from wrapping to multiple lines.
+          display: "flex",
+          alignItems: "center",
+          overflow: "hidden",
+          "& > .MuiBox-root": {
+            flexWrap: "nowrap",
+            overflow: "hidden"
+          }
+        }
+      }
     },
-    action: {
-      // Matches --ov-state-hover / --ov-state-selected
-      hover: o === "dark" ? "rgba(255, 255, 255, 0.04)" : "rgba(31, 35, 40, 0.04)",
-      selected: o === "dark" ? "rgba(88, 166, 255, 0.10)" : "rgba(9, 105, 218, 0.10)"
+    MuiAutocomplete: {
+      styleOverrides: {
+        inputRoot: {
+          // Prevent the tag container from wrapping and keep fixed height.
+          flexWrap: "nowrap !important",
+          overflow: "hidden"
+        },
+        tag: {
+          // Constrain chip tags to match the input line-height.
+          maxHeight: 20
+        }
+      }
     },
-    baseShadow: o === "dark" ? "0 4px 12px rgba(0, 0, 0, 0.35), 0 2px 4px rgba(0, 0, 0, 0.25)" : "0 4px 12px rgba(31, 35, 40, 0.12), 0 2px 4px rgba(31, 35, 40, 0.08)"
-  }
-}), X = {
-  fontFamily: [
-    "-apple-system",
-    "BlinkMacSystemFont",
-    '"Segoe UI"',
-    '"Noto Sans"',
-    "Helvetica",
-    "Arial",
-    "sans-serif"
-  ].join(","),
-  h1: { fontSize: c.typography.pxToRem(48), fontWeight: 600, lineHeight: 1.2, letterSpacing: -0.5 },
-  h2: { fontSize: c.typography.pxToRem(36), fontWeight: 600, lineHeight: 1.2 },
-  h3: { fontSize: c.typography.pxToRem(30), fontWeight: 600, lineHeight: 1.2 },
-  h4: { fontSize: c.typography.pxToRem(24), fontWeight: 600, lineHeight: 1.5 },
-  h5: { fontSize: c.typography.pxToRem(20), fontWeight: 600 },
-  h6: { fontSize: c.typography.pxToRem(18), fontWeight: 600 },
-  subtitle1: { fontSize: c.typography.pxToRem(18) },
-  subtitle2: { fontSize: c.typography.pxToRem(14), fontWeight: 500 },
-  body1: { fontSize: c.typography.pxToRem(14) },
-  body2: { fontSize: c.typography.pxToRem(14), fontWeight: 400 },
-  caption: { fontSize: c.typography.pxToRem(12), fontWeight: 400 },
-  button: { textTransform: "none", fontWeight: 600 },
-  overline: {
-    fontSize: c.typography.pxToRem(12),
-    fontWeight: 600,
-    textTransform: "uppercase",
-    letterSpacing: "0.08em"
-  }
-}, q = { borderRadius: 8 }, J = (o) => {
-  const i = o === "dark" ? "0 4px 12px rgba(0, 0, 0, 0.35), 0 2px 4px rgba(0, 0, 0, 0.25)" : "0 4px 12px rgba(31, 35, 40, 0.12), 0 2px 4px rgba(31, 35, 40, 0.08)", b = [...c.shadows];
-  return b[1] = i, b;
-}, K = {
-  MuiButtonBase: {
-    defaultProps: {
-      disableTouchRipple: !0,
-      disableRipple: !0
+    MuiFormControl: {
+      styleOverrides: {
+        root: () => ({
+          // Input height token — read by OutlinedInput (height) and
+          // InputLabel (vertical centering).  Our wrapper components
+          // override this for the full xs/sm/md/lg/xl range.
+          "--ov-input-height": "2.75rem",
+          variants: [
+            { props: { size: "small" }, style: { "--ov-input-height": "2.25rem" } }
+          ]
+        })
+      }
     },
-    styleOverrides: {
-      root: ({ theme: o }) => ({
-        boxSizing: "border-box",
-        transition: "color 80ms cubic-bezier(0.33,1,0.68,1), background-color 80ms cubic-bezier(0.33,1,0.68,1), border-color 80ms cubic-bezier(0.33,1,0.68,1), box-shadow 80ms cubic-bezier(0.33,1,0.68,1)",
-        "&:focus-visible": {
-          outline: `3px solid ${e(o.palette.primary.main, 0.5)}`,
-          outlineOffset: "2px"
+    MuiInputLabel: {
+      styleOverrides: {
+        root: {
+          // Shrunk (floating) label — centered on the top border
+          "&.MuiInputLabel-shrink": {
+            transform: "translate(14px, -6px) scale(0.75)"
+          },
+          // Non-shrunk label — auto-center vertically using calc().
+          // 1.4375em = the label's line-height (unitless 1.4375 × font-size),
+          // expressed in em so it auto-adapts to both small and medium labels.
+          "&.MuiInputLabel-outlined:not(.MuiInputLabel-shrink)": {
+            transform: "translate(14px, calc((var(--ov-input-height) - 1.4375em) / 2)) scale(1)"
+          }
         }
-      })
-    }
-  },
-  MuiButton: {
-    defaultProps: {
-      disableElevation: !0
+      }
+    },
+    MuiInputBase: {
+      defaultProps: {
+        autoCapitalize: "off",
+        autoCorrect: "off",
+        spellCheck: !1
+      },
+      styleOverrides: {
+        root: ({ theme: r }) => ({
+          border: "none",
+          ...r.applyStyles("dark", { "&.Mui-disabled": { color: o[600] } })
+        }),
+        input: ({ theme: r }) => ({
+          // Disable WebKit auto-capitalize / auto-correct text transformations
+          textTransform: "none",
+          WebkitTextSecurity: "none",
+          "&::placeholder": { opacity: 0.7, color: o[500] },
+          ...r.applyStyles("dark", { "&::placeholder": { color: o[500] } })
+        })
+      }
     },
-    styleOverrides: {
-      root: ({ theme: o }) => {
-        const i = [
-          ["primary", o.palette.primary],
-          ["secondary", o.palette.secondary],
-          ["success", o.palette.success],
-          ["warning", o.palette.warning],
-          ["error", o.palette.error],
-          ["info", o.palette.info]
-        ], b = i.map(([g, a]) => ({
-          props: { color: g, variant: "contained" },
-          style: {
-            backgroundColor: a.main,
-            color: a.contrastText || "#fff",
+    MuiOutlinedInput: {
+      styleOverrides: {
+        input: { padding: "10px 14px" },
+        inputMultiline: { padding: 0 },
+        root: ({ theme: r }) => ({
+          borderRadius: r.shape.borderRadius,
+          backgroundColor: o[50],
+          transition: "background-color 120ms ease-in",
+          // Fixed height from the --ov-input-height CSS variable
+          // (set on the parent FormControl).  Multiline inputs use
+          // minHeight so they can grow.
+          "&:not(.MuiInputBase-multiline)": {
+            boxSizing: "border-box",
+            height: "var(--ov-input-height)"
+          },
+          "&.MuiInputBase-multiline": {
+            padding: "10px 14px",
+            minHeight: "var(--ov-input-height)"
+          },
+          "&:hover": {
+            backgroundColor: o[100],
+            [`& .${u.notchedOutline}`]: { borderColor: o[400] }
+          },
+          [`&.${u.focused}`]: {
+            [`& .${u.notchedOutline}`]: { borderColor: a[500], borderWidth: 2 }
+          },
+          [`&.${u.disabled}`]: {
+            backgroundColor: o[100],
+            [`& .${u.notchedOutline}`]: { borderColor: o[200] }
+          },
+          ...r.applyStyles("dark", {
+            backgroundColor: e(o[800], 0.8),
             "&:hover": {
-              backgroundColor: M(a.main, 0.12)
+              backgroundColor: e(o[800], 0.9),
+              [`& .${u.notchedOutline}`]: { borderColor: o[500] }
             },
-            "&:active": {
-              backgroundColor: M(a.main, 0.2)
+            [`&.${u.focused}`]: {
+              backgroundColor: e(o[800], 0.9),
+              [`& .${u.notchedOutline}`]: { borderColor: a[400] }
             },
-            ...o.applyStyles("dark", {
-              backgroundColor: a.main,
-              color: a.contrastText || "#fff",
-              "&:hover": {
-                backgroundColor: S(a.main, 0.12)
-              },
-              "&:active": {
-                backgroundColor: S(a.main, 0.04)
-              }
-            })
-          }
-        })), h = i.map(([g, a]) => ({
-          props: { color: g, variant: "outlined" },
-          style: {
-            color: a.main,
-            borderColor: e(a.main, 0.5),
-            backgroundColor: "transparent",
-            "&:hover": { backgroundColor: e(a.main, 0.06), borderColor: a.main },
-            "&:active": { backgroundColor: e(a.main, 0.12) },
-            ...o.applyStyles("dark", {
-              color: a.light,
-              borderColor: e(a.light, 0.4),
-              "&:hover": { backgroundColor: e(a.main, 0.12), borderColor: a.light },
-              "&:active": { backgroundColor: e(a.main, 0.2) }
-            })
-          }
-        })), y = i.map(([g, a]) => ({
-          props: { color: g, variant: "text" },
-          style: {
-            color: a.main,
-            "&:hover": { backgroundColor: e(a.main, 0.06) },
-            "&:active": { backgroundColor: e(a.main, 0.12) },
-            ...o.applyStyles("dark", {
-              color: a.light,
-              "&:hover": { backgroundColor: e(a.main, 0.12) },
-              "&:active": { backgroundColor: e(a.main, 0.2) }
-            })
+            [`&.${u.disabled}`]: {
+              backgroundColor: e(o[900], 0.6),
+              [`& .${u.notchedOutline}`]: { borderColor: o[800] }
+            }
+          })
+        }),
+        notchedOutline: ({ theme: r }) => ({
+          borderColor: o[300],
+          transition: "border-color 120ms ease-in",
+          ...r.applyStyles("dark", { borderColor: o[700] })
+        })
+      }
+    },
+    MuiInputAdornment: {
+      styleOverrides: {
+        root: ({ theme: r }) => ({
+          color: r.palette.grey[500],
+          ...r.applyStyles("dark", { color: r.palette.grey[400] })
+        })
+      }
+    },
+    MuiSwitch: {
+      styleOverrides: {
+        // Track: 44×24 pill (shadcn/Radix proportions).
+        root: { width: 44, height: 24, padding: 0 },
+        switchBase: ({ theme: r }) => ({
+          padding: 0,
+          margin: 2,
+          // Radix-style snappy thumb slide.
+          transitionDuration: "140ms",
+          transitionTimingFunction: "cubic-bezier(0.45, 0.05, 0.55, 0.95)",
+          transitionProperty: "transform",
+          "&.Mui-checked": {
+            // translateX = trackWidth - thumbDiameter - 2*margin = 44 - 20 - 4 = 20
+            transform: "translateX(20px)",
+            color: "#fff",
+            "& + .MuiSwitch-track": {
+              backgroundColor: a[500],
+              opacity: 1,
+              border: 0
+            }
+          },
+          "&.Mui-focusVisible + .MuiSwitch-track": {
+            outline: `2px solid ${e(a[500], 0.5)}`,
+            outlineOffset: 2
+          },
+          "&.Mui-disabled + .MuiSwitch-track": { opacity: 0.4 },
+          "&.Mui-disabled .MuiSwitch-thumb": { opacity: 0.7 },
+          ...r.applyStyles("dark", {
+            "&.Mui-checked": {
+              "& + .MuiSwitch-track": { backgroundColor: a[400] }
+            }
+          })
+        }),
+        // Thumb: 20px circle with layered shadow for depth (key polish factor).
+        thumb: {
+          boxSizing: "border-box",
+          width: 20,
+          height: 20,
+          boxShadow: "0 0 0 1px rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.10), 0 2px 6px rgba(0,0,0,0.08)"
+        },
+        // Track: full pill with fast color transition.
+        track: ({ theme: r }) => ({
+          borderRadius: 9999,
+          backgroundColor: o[300],
+          opacity: 1,
+          transition: "background-color 120ms linear",
+          ...r.applyStyles("dark", { backgroundColor: o[600] })
+        })
+      }
+    }
+  };
+}
+const Mo = w();
+function O(i) {
+  const o = i?.gray ?? x, a = i?.brand ?? f;
+  return {
+    MuiMenuItem: {
+      styleOverrides: {
+        root: ({ theme: r }) => ({
+          borderRadius: r.shape.borderRadius,
+          padding: "6px 8px",
+          [`&.${S.focusVisible}`]: { backgroundColor: "transparent" },
+          [`&.${S.selected}`]: {
+            [`&.${S.focusVisible}`]: {
+              backgroundColor: e(r.palette.action.selected, 0.3)
+            }
           }
-        })), z = i.map(([g, a]) => ({
-          props: { color: g, variant: "soft" },
-          style: {
-            color: a.main,
-            backgroundColor: e(a.main, 0.1),
-            "&:hover": { backgroundColor: e(a.main, 0.18) },
-            "&:active": { backgroundColor: e(a.main, 0.26) },
-            ...o.applyStyles("dark", {
-              color: a.light,
-              backgroundColor: e(a.main, 0.15),
-              "&:hover": { backgroundColor: e(a.main, 0.25) },
-              "&:active": { backgroundColor: e(a.main, 0.32) }
+        })
+      }
+    },
+    MuiMenu: {
+      styleOverrides: {
+        list: {
+          gap: "0px",
+          padding: "4px",
+          [`&.${Q.root}`]: { margin: "0 -8px" }
+        },
+        paper: ({ theme: r }) => ({
+          marginTop: "4px",
+          borderRadius: r.shape.borderRadius,
+          border: `1px solid ${r.palette.divider}`,
+          backgroundImage: "none",
+          background: o[50],
+          boxShadow: "hsla(220, 30%, 5%, 0.07) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.07) 0px 8px 16px -5px",
+          [`& .${$.root}`]: {
+            "&.Mui-selected": { backgroundColor: e(r.palette.action.selected, 0.3) }
+          },
+          ...r.applyStyles("dark", {
+            background: o[900],
+            boxShadow: "hsla(220, 30%, 5%, 0.7) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.8) 0px 8px 16px -5px"
+          })
+        })
+      }
+    },
+    MuiSelect: {
+      defaultProps: {
+        IconComponent: v.forwardRef((r, d) => /* @__PURE__ */ K(Y, { fontSize: "small", ...r, ref: d }))
+      },
+      styleOverrides: {
+        select: { display: "flex", alignItems: "center" }
+      }
+    },
+    MuiLink: {
+      defaultProps: { underline: "none" },
+      styleOverrides: {
+        root: ({ theme: r }) => ({
+          color: o[800],
+          fontWeight: 500,
+          position: "relative",
+          textDecoration: "none",
+          width: "fit-content",
+          "&::before": {
+            content: '""',
+            position: "absolute",
+            width: "100%",
+            height: "1px",
+            bottom: 0,
+            left: 0,
+            backgroundColor: o[600],
+            opacity: 0.3,
+            transition: "width 0.3s ease, opacity 0.3s ease"
+          },
+          "&:hover::before": { width: 0 },
+          "&:focus-visible": {
+            outline: `3px solid ${e(a[500], 0.5)}`,
+            outlineOffset: "4px",
+            borderRadius: "2px"
+          },
+          ...r.applyStyles("dark", {
+            color: o[100],
+            "&::before": { backgroundColor: o[400] }
+          })
+        })
+      }
+    },
+    MuiDrawer: {
+      styleOverrides: {
+        paper: ({ theme: r }) => ({ backgroundColor: r.palette.background.default })
+      }
+    },
+    MuiListItemButton: {
+      styleOverrides: {
+        root: ({ theme: r }) => ({
+          borderRadius: r.shape.borderRadius,
+          padding: "8px 12px",
+          gap: 12,
+          border: "1px solid transparent",
+          transition: "all 100ms ease-in",
+          "&:hover": { backgroundColor: e(o[500], 0.08) },
+          "&.Mui-selected": {
+            backgroundColor: e(a[500], 0.08),
+            border: `1px solid ${e(a[500], 0.2)}`,
+            "&:hover": { backgroundColor: e(a[500], 0.12) }
+          },
+          ...r.applyStyles("dark", {
+            "&:hover": { backgroundColor: e(o[500], 0.12) },
+            "&.Mui-selected": {
+              backgroundColor: e(a[400], 0.12),
+              border: `1px solid ${e(a[400], 0.25)}`,
+              "&:hover": { backgroundColor: e(a[400], 0.16) }
+            }
+          })
+        })
+      }
+    },
+    MuiTabs: {
+      styleOverrides: {
+        root: { minHeight: "fit-content" },
+        indicator: ({ theme: r }) => ({
+          backgroundColor: r.palette.grey[800],
+          ...r.applyStyles("dark", { backgroundColor: r.palette.grey[200] })
+        })
+      }
+    },
+    MuiTab: {
+      styleOverrides: {
+        root: ({ theme: r }) => ({
+          padding: "6px 8px",
+          marginBottom: "8px",
+          textTransform: "none",
+          minWidth: "fit-content",
+          minHeight: "fit-content",
+          color: o[600],
+          borderRadius: r.shape.borderRadius,
+          border: "1px solid transparent",
+          ":hover": { color: o[800], backgroundColor: o[100], borderColor: o[200] },
+          [`&.${A.selected}`]: { color: o[900] },
+          ...r.applyStyles("dark", {
+            color: o[400],
+            ":hover": { color: o[100], backgroundColor: o[800], borderColor: o[700] },
+            [`&.${A.selected}`]: { color: "#fff" }
+          })
+        })
+      }
+    }
+  };
+}
+const wo = O();
+function z(i) {
+  const o = i?.gray ?? x;
+  return {
+    MuiAlert: {
+      styleOverrides: {
+        root: {}
+      }
+    },
+    MuiDialog: {
+      styleOverrides: {
+        root: ({ theme: a }) => ({
+          "& .MuiDialog-paper": {
+            borderRadius: "10px",
+            border: "1px solid",
+            borderColor: a.palette.divider,
+            backgroundColor: o[50],
+            ...a.applyStyles("dark", {
+              backgroundColor: o[900],
+              borderColor: e(o[700], 0.6)
             })
           }
-        })), T = i.map(([g, a]) => ({
-          props: { color: g, variant: "link" },
-          style: {
-            color: a.main,
-            ...o.applyStyles("dark", { color: a.light })
-          }
-        }));
-        return {
+        })
+      }
+    },
+    MuiPopover: {
+      styleOverrides: {
+        paper: ({ theme: a }) => ({
+          borderRadius: "10px",
+          border: "1px solid",
+          borderColor: a.palette.divider,
+          backgroundImage: "none",
+          backgroundColor: o[50],
+          boxShadow: "0 4px 20px rgba(0, 0, 0, 0.08)",
+          ...a.applyStyles("dark", {
+            backgroundColor: o[900],
+            borderColor: e(o[700], 0.6),
+            boxShadow: "0 4px 20px rgba(0, 0, 0, 0.5)"
+          })
+        })
+      }
+    },
+    MuiLinearProgress: {
+      styleOverrides: {
+        root: ({ theme: a }) => ({
+          height: 8,
+          borderRadius: 8,
+          backgroundColor: o[200],
+          ...a.applyStyles("dark", { backgroundColor: o[800] })
+        })
+      }
+    }
+  };
+}
+const Oo = z();
+function R(i) {
+  const o = i?.gray ?? x, a = i?.brand ?? f, r = i?.green ?? I, d = i?.orange ?? P, p = i?.red ?? H, c = i?.purple ?? W;
+  return {
+    MuiList: {
+      styleOverrides: {
+        root: { padding: "8px", display: "flex", flexDirection: "column", gap: 0 }
+      }
+    },
+    MuiListItem: {
+      styleOverrides: {
+        root: ({ theme: t }) => ({
+          [`& > .${m.root}`]: { width: "1rem", height: "1rem", color: o[600] },
+          [`& .${Z.root}`]: { fontWeight: 500 },
+          [`& .${$.root}`]: {
+            display: "flex",
+            gap: 8,
+            padding: "2px 8px",
+            borderRadius: t.shape.borderRadius,
+            opacity: 0.7,
+            "&.Mui-selected": {
+              opacity: 1,
+              backgroundColor: e(o[200], 0.6),
+              [`& .${m.root}`]: { color: o[800] },
+              "&:hover": { backgroundColor: e(o[200], 0.8) }
+            }
+          },
+          ...t.applyStyles("dark", {
+            [`& > .${m.root}`]: { color: o[400] },
+            [`& .${$.root}`]: {
+              "&.Mui-selected": {
+                backgroundColor: e(o[600], 0.3),
+                [`& .${m.root}`]: { color: o[100] },
+                "&:hover": { backgroundColor: e(o[600], 0.5) }
+              }
+            }
+          })
+        })
+      }
+    },
+    MuiListItemText: {
+      styleOverrides: {
+        primary: ({ theme: t }) => ({
+          fontSize: t.typography.body2.fontSize,
+          fontWeight: 500,
+          lineHeight: t.typography.body2.lineHeight
+        }),
+        secondary: ({ theme: t }) => ({
+          fontSize: t.typography.caption.fontSize,
+          lineHeight: t.typography.caption.lineHeight
+        })
+      }
+    },
+    MuiListSubheader: {
+      styleOverrides: {
+        root: ({ theme: t }) => ({
+          backgroundColor: "transparent",
+          padding: "4px 8px",
+          fontSize: t.typography.caption.fontSize,
+          fontWeight: 500,
+          lineHeight: t.typography.caption.lineHeight
+        })
+      }
+    },
+    MuiListItemIcon: {
+      styleOverrides: { root: { minWidth: 0 } }
+    },
+    MuiCard: {
+      defaultProps: { elevation: 0 },
+      styleOverrides: {
+        root: ({ theme: t }) => ({
+          display: "flex",
+          flexDirection: "column",
+          padding: 16,
+          gap: 16,
+          overflow: "visible",
+          transition: "all 150ms ease-in-out",
+          backgroundColor: o[50],
+          borderRadius: t.shape.borderRadius,
+          border: `1px solid ${t.palette.divider}`,
           boxShadow: "none",
-          borderRadius: o.shape.borderRadius,
-          textTransform: "none",
-          whiteSpace: "nowrap",
-          // GitHub Primer-style fast, smooth transition on bg-color
-          transition: "color 80ms cubic-bezier(0.33,1,0.68,1), background-color 80ms cubic-bezier(0.33,1,0.68,1), border-color 80ms cubic-bezier(0.33,1,0.68,1), box-shadow 80ms cubic-bezier(0.33,1,0.68,1)",
+          "&:hover": {
+            borderColor: o[300],
+            boxShadow: "0 2px 8px 0 rgba(0, 0, 0, 0.08)"
+          },
+          ...t.applyStyles("dark", {
+            backgroundColor: o[800],
+            "&:hover": {
+              borderColor: o[600],
+              boxShadow: "0 2px 8px 0 rgba(0, 0, 0, 0.3)"
+            }
+          }),
           variants: [
-            // === Sizes ===
-            { props: { size: "small" }, style: { minHeight: "2rem", padding: "6px 12px" } },
-            { props: { size: "medium" }, style: { minHeight: "2.25rem", padding: "8px 16px" } },
-            { props: { size: "large" }, style: { minHeight: "2.75rem", padding: "10px 20px" } },
-            { props: { size: "xs" }, style: { minHeight: "1.5rem", padding: "2px 8px", fontSize: "0.6875rem" } },
-            { props: { size: "xl" }, style: { minHeight: "3.25rem", padding: "12px 24px", fontSize: "1rem" } },
-            // === Contained: flat solid ===
-            // Default/neutral: gray solid
             {
-              props: { variant: "contained" },
+              props: { variant: "outlined" },
               style: {
+                border: `1px solid ${t.palette.divider}`,
                 boxShadow: "none",
-                "&:hover": { boxShadow: "none" }
+                background: o[50],
+                "&:hover": {
+                  borderColor: o[300],
+                  boxShadow: "0 2px 8px 0 rgba(0, 0, 0, 0.08)"
+                },
+                ...t.applyStyles("dark", {
+                  background: e(o[900], 0.4),
+                  "&:hover": {
+                    borderColor: o[600],
+                    boxShadow: "0 2px 8px 0 rgba(0, 0, 0, 0.3)"
+                  }
+                })
+              }
+            }
+          ]
+        })
+      }
+    },
+    MuiCardContent: {
+      styleOverrides: { root: { padding: 0, "&:last-child": { paddingBottom: 0 } } }
+    },
+    MuiCardHeader: {
+      styleOverrides: { root: { padding: 0 } }
+    },
+    MuiCardActions: {
+      styleOverrides: { root: { padding: 0 } }
+    },
+    MuiPaper: {
+      defaultProps: { elevation: 0 },
+      styleOverrides: {
+        root: ({ theme: t }) => ({
+          backgroundImage: "none",
+          ...t.applyStyles("dark", { backgroundColor: o[800] })
+        })
+      }
+    },
+    MuiChip: {
+      defaultProps: { size: "small" },
+      styleOverrides: {
+        root: ({ theme: t }) => ({
+          border: "1px solid",
+          borderRadius: 6,
+          [`& .${n.label}`]: { fontWeight: 600 },
+          variants: [
+            {
+              props: { color: "default" },
+              style: {
+                borderColor: o[200],
+                backgroundColor: o[100],
+                [`& .${n.label}`]: { color: o[500] },
+                [`& .${n.icon}`]: { color: o[500] },
+                [`& .${n.deleteIcon}`]: { color: o[400], "&:hover": { color: o[600] } },
+                ...t.applyStyles("dark", {
+                  borderColor: o[600],
+                  backgroundColor: e(o[600], 0.3),
+                  [`& .${n.label}`]: { color: o[200] },
+                  [`& .${n.icon}`]: { color: o[200] },
+                  [`& .${n.deleteIcon}`]: { color: o[400], "&:hover": { color: o[200] } }
+                })
               }
             },
-            ...b,
-            // === Outlined: default/neutral gets gray ===
             {
-              props: { variant: "outlined" },
+              props: { color: "success" },
               style: {
-                color: r[700],
-                border: "1px solid",
                 borderColor: r[200],
-                backgroundColor: e(r[50], 0.3),
-                "&:hover": { backgroundColor: r[100], borderColor: r[300] },
-                "&:active": { backgroundColor: r[200] },
-                ...o.applyStyles("dark", {
-                  color: r[200],
-                  backgroundColor: e(r[800], 0.3),
-                  borderColor: r[600],
-                  "&:hover": { backgroundColor: e(r[700], 0.5), borderColor: r[500] },
-                  "&:active": { backgroundColor: r[700] }
+                backgroundColor: r[50],
+                [`& .${n.label}`]: { color: r[500] },
+                [`& .${n.icon}`]: { color: r[500] },
+                ...t.applyStyles("dark", {
+                  borderColor: r[800],
+                  backgroundColor: r[900],
+                  [`& .${n.label}`]: { color: r[200] },
+                  [`& .${n.icon}`]: { color: r[200] }
+                })
+              }
+            },
+            {
+              props: { color: "error" },
+              style: {
+                borderColor: p[100],
+                backgroundColor: p[50],
+                [`& .${n.label}`]: { color: p[500] },
+                [`& .${n.icon}`]: { color: p[500] },
+                ...t.applyStyles("dark", {
+                  borderColor: p[800],
+                  backgroundColor: p[900],
+                  [`& .${n.label}`]: { color: p[100] },
+                  [`& .${n.icon}`]: { color: p[100] }
+                })
+              }
+            },
+            {
+              props: { color: "warning" },
+              style: {
+                borderColor: d[200],
+                backgroundColor: d[50],
+                [`& .${n.label}`]: { color: d[500] },
+                [`& .${n.icon}`]: { color: d[500] },
+                ...t.applyStyles("dark", {
+                  borderColor: d[800],
+                  backgroundColor: d[900],
+                  [`& .${n.label}`]: { color: d[200] },
+                  [`& .${n.icon}`]: { color: d[200] }
                 })
               }
             },
-            ...h,
-            // === Text (ghost): default/neutral gets gray ===
             {
-              props: { variant: "text" },
+              props: { color: "primary" },
               style: {
-                color: r[600],
-                "&:hover": { backgroundColor: e(r[500], 0.08) },
-                "&:active": { backgroundColor: e(r[500], 0.16) },
-                ...o.applyStyles("dark", {
-                  color: r[300],
-                  "&:hover": { backgroundColor: e(r[500], 0.12) },
-                  "&:active": { backgroundColor: e(r[500], 0.2) }
+                borderColor: a[200],
+                backgroundColor: a[50],
+                [`& .${n.label}`]: { color: a[500] },
+                [`& .${n.icon}`]: { color: a[500] },
+                ...t.applyStyles("dark", {
+                  borderColor: a[800],
+                  backgroundColor: a[900],
+                  [`& .${n.label}`]: { color: a[100] },
+                  [`& .${n.icon}`]: { color: a[100] }
                 })
               }
             },
-            ...y,
-            // === Soft (custom): default/neutral gets gray ===
             {
-              props: { variant: "soft" },
+              props: { color: "secondary" },
               style: {
-                color: r[700],
-                backgroundColor: e(r[500], 0.08),
-                "&:hover": { backgroundColor: e(r[500], 0.16) },
-                "&:active": { backgroundColor: e(r[500], 0.24) },
-                ...o.applyStyles("dark", {
-                  color: r[200],
-                  backgroundColor: e(r[500], 0.12),
-                  "&:hover": { backgroundColor: e(r[500], 0.2) },
-                  "&:active": { backgroundColor: e(r[500], 0.28) }
+                borderColor: c[200],
+                backgroundColor: c[50],
+                [`& .${n.label}`]: { color: c[500] },
+                [`& .${n.icon}`]: { color: c[500] },
+                ...t.applyStyles("dark", {
+                  borderColor: c[700],
+                  backgroundColor: c[900],
+                  [`& .${n.label}`]: { color: c[100] },
+                  [`& .${n.icon}`]: { color: c[100] }
                 })
               }
             },
-            ...z,
-            // === Link (custom): base ===
             {
-              props: { variant: "link" },
+              props: { variant: "outlined", color: "default" },
               style: {
-                color: r[600],
                 backgroundColor: "transparent",
-                padding: "0 4px",
-                minWidth: "auto",
-                textDecoration: "none",
-                "&:hover": {
+                borderColor: o[300],
+                [`& .${n.label}`]: { color: o[500] },
+                ...t.applyStyles("dark", {
                   backgroundColor: "transparent",
-                  textDecoration: "underline"
-                },
-                ...o.applyStyles("dark", {
-                  color: r[300]
+                  borderColor: o[500],
+                  [`& .${n.label}`]: { color: o[200] }
                 })
               }
             },
-            ...T
-          ]
-        };
-      }
-    }
-  },
-  MuiIconButton: {
-    styleOverrides: {
-      root: ({ theme: o }) => ({
-        boxSizing: "border-box",
-        borderRadius: o.shape.borderRadius,
-        color: r[600],
-        "&:hover": { backgroundColor: e(r[500], 0.1) },
-        ...o.applyStyles("dark", {
-          color: r[300],
-          "&:hover": { backgroundColor: e(r[500], 0.2) }
-        }),
-        variants: [
-          { props: { size: "small" }, style: { width: "2rem", height: "2rem", padding: "0.25rem" } },
-          { props: { size: "medium" }, style: { width: "2.5rem", height: "2.5rem" } },
-          {
-            props: { color: "primary" },
-            style: {
-              color: t[600],
-              "&:hover": { backgroundColor: e(t[500], 0.1) },
-              ...o.applyStyles("dark", {
-                color: t[300],
-                "&:hover": { backgroundColor: e(t[500], 0.2) }
-              })
+            {
+              props: { size: "small" },
+              style: {
+                height: 20,
+                borderRadius: 6,
+                [`& .${n.label}`]: { fontSize: t.typography.caption.fontSize, padding: "0 6px" }
+              }
+            },
+            {
+              props: { size: "medium" },
+              style: {
+                height: 28,
+                borderRadius: 8,
+                [`& .${n.label}`]: { fontSize: t.typography.caption.fontSize }
+              }
             }
-          }
-        ]
-      })
-    }
-  },
-  MuiToggleButtonGroup: {
-    styleOverrides: {
-      root: ({ theme: o }) => ({
-        borderRadius: o.shape.borderRadius,
-        backgroundColor: r[100],
-        border: `1px solid ${r[200]}`,
-        boxShadow: "none",
-        [`& .${$.grouped}`]: {
-          border: "none",
-          "&:not(:first-of-type)": { marginLeft: 0, borderLeft: "1px solid", borderLeftColor: r[300] }
-        },
-        ...o.applyStyles("dark", {
-          backgroundColor: e(r[800], 0.5),
-          border: `1px solid ${r[700]}`,
-          [`& .${$.grouped}`]: {
-            "&:not(:first-of-type)": { borderLeftColor: r[700] }
-          }
-        })
-      })
-    }
-  },
-  MuiToggleButton: {
-    styleOverrides: {
-      root: ({ theme: o }) => ({
-        padding: "8px 16px",
-        fontWeight: 500,
-        color: r[600],
-        textTransform: "none",
-        border: "none",
-        borderRadius: o.shape.borderRadius,
-        "&:hover": { backgroundColor: e(r[500], 0.1) },
-        [`&.${O.selected}`]: {
-          color: t[600],
-          backgroundColor: e(t[500], 0.1),
-          "&:hover": { backgroundColor: e(t[500], 0.15) }
-        },
-        ...o.applyStyles("dark", {
-          color: r[400],
-          "&:hover": { backgroundColor: e(r[500], 0.15) },
-          [`&.${O.selected}`]: {
-            color: t[300],
-            backgroundColor: e(t[500], 0.2),
-            "&:hover": { backgroundColor: e(t[500], 0.25) }
-          }
+          ]
         })
-      })
-    }
-  },
-  MuiCheckbox: {
-    defaultProps: {
-      disableRipple: !0,
-      icon: C.createElement(A, { sx: { color: "hsla(210, 0%, 0%, 0.0)" } }),
-      checkedIcon: C.createElement(E, { sx: { height: 14, width: 14 } }),
-      indeterminateIcon: C.createElement(V, { sx: { height: 14, width: 14 } })
+      }
     },
-    styleOverrides: {
-      root: ({ theme: o }) => ({
-        margin: 10,
-        height: 16,
-        width: 16,
-        borderRadius: 5,
-        border: "1px solid",
-        borderColor: e(r[300], 0.8),
-        boxShadow: "0 0 0 1.5px hsla(210, 0%, 0%, 0.04) inset",
-        backgroundColor: e(r[100], 0.4),
-        transition: "border-color, background-color, 120ms ease-in",
-        "&:hover": { borderColor: t[300] },
-        "&.Mui-checked": {
-          color: "white",
-          backgroundColor: t[500],
-          borderColor: t[500],
-          boxShadow: "none",
-          "&:hover": { backgroundColor: t[600] }
-        },
-        ...o.applyStyles("dark", {
-          borderColor: e(r[700], 0.8),
-          boxShadow: "0 0 0 1.5px hsl(210, 0%, 0%) inset",
-          backgroundColor: e(r[900], 0.8),
-          "&:hover": { borderColor: t[300] }
-        })
-      })
-    }
-  },
-  MuiSelect: {
-    styleOverrides: {
-      select: {
-        // Prevent chips from wrapping to multiple lines.
-        display: "flex",
-        alignItems: "center",
-        overflow: "hidden",
-        "& > .MuiBox-root": {
-          flexWrap: "nowrap",
-          overflow: "hidden"
+    MuiTablePagination: {
+      styleOverrides: {
+        actions: {
+          display: "flex",
+          gap: 8,
+          marginRight: 6,
+          [`& .${_.root}`]: { minWidth: 0, width: 36, height: 36 }
         }
       }
-    }
-  },
-  MuiAutocomplete: {
-    styleOverrides: {
-      inputRoot: {
-        // Prevent the tag container from wrapping and keep fixed height.
-        flexWrap: "nowrap !important",
-        overflow: "hidden"
-      },
-      tag: {
-        // Constrain chip tags to match the input line-height.
-        maxHeight: 20
-      }
-    }
-  },
-  MuiFormControl: {
-    styleOverrides: {
-      root: () => ({
-        // Input height token — read by OutlinedInput (height) and
-        // InputLabel (vertical centering).  Our wrapper components
-        // override this for the full xs/sm/md/lg/xl range.
-        "--ov-input-height": "2.75rem",
-        variants: [
-          { props: { size: "small" }, style: { "--ov-input-height": "2.25rem" } }
-        ]
-      })
-    }
-  },
-  MuiInputLabel: {
-    styleOverrides: {
-      root: {
-        // Shrunk (floating) label — centered on the top border
-        "&.MuiInputLabel-shrink": {
-          transform: "translate(14px, -6px) scale(0.75)"
-        },
-        // Non-shrunk label — auto-center vertically using calc().
-        // 1.4375em = the label's line-height (unitless 1.4375 × font-size),
-        // expressed in em so it auto-adapts to both small and medium labels.
-        "&.MuiInputLabel-outlined:not(.MuiInputLabel-shrink)": {
-          transform: "translate(14px, calc((var(--ov-input-height) - 1.4375em) / 2)) scale(1)"
+    },
+    MuiAvatar: {
+      styleOverrides: {
+        root: {
+          color: "#ffffff",
+          fontWeight: 600
         }
       }
-    }
-  },
-  MuiInputBase: {
-    defaultProps: {
-      autoCapitalize: "off",
-      autoCorrect: "off",
-      spellCheck: !1
     },
-    styleOverrides: {
-      root: ({ theme: o }) => ({
-        border: "none",
-        ...o.applyStyles("dark", { "&.Mui-disabled": { color: r[600] } })
-      }),
-      input: ({ theme: o }) => ({
-        // Disable WebKit auto-capitalize / auto-correct text transformations
-        textTransform: "none",
-        WebkitTextSecurity: "none",
-        "&::placeholder": { opacity: 0.7, color: r[500] },
-        ...o.applyStyles("dark", { "&::placeholder": { color: r[500] } })
-      })
-    }
-  },
-  MuiOutlinedInput: {
-    styleOverrides: {
-      input: { padding: "10px 14px" },
-      inputMultiline: { padding: 0 },
-      root: ({ theme: o }) => ({
-        borderRadius: o.shape.borderRadius,
-        backgroundColor: r[50],
-        transition: "background-color 120ms ease-in",
-        // Fixed height from the --ov-input-height CSS variable
-        // (set on the parent FormControl).  Multiline inputs use
-        // minHeight so they can grow.
-        "&:not(.MuiInputBase-multiline)": {
-          boxSizing: "border-box",
-          height: "var(--ov-input-height)"
-        },
-        "&.MuiInputBase-multiline": {
-          padding: "10px 14px",
-          minHeight: "var(--ov-input-height)"
-        },
-        "&:hover": {
-          backgroundColor: r[100],
-          [`& .${u.notchedOutline}`]: { borderColor: r[400] }
-        },
-        [`&.${u.focused}`]: {
-          [`& .${u.notchedOutline}`]: { borderColor: t[500], borderWidth: 2 }
-        },
-        [`&.${u.disabled}`]: {
-          backgroundColor: r[100],
-          [`& .${u.notchedOutline}`]: { borderColor: r[200] }
-        },
-        ...o.applyStyles("dark", {
-          backgroundColor: e(r[800], 0.8),
-          "&:hover": {
-            backgroundColor: e(r[800], 0.9),
-            [`& .${u.notchedOutline}`]: { borderColor: r[500] }
-          },
-          [`&.${u.focused}`]: {
-            backgroundColor: e(r[800], 0.9),
-            [`& .${u.notchedOutline}`]: { borderColor: t[400] }
-          },
-          [`&.${u.disabled}`]: {
-            backgroundColor: e(r[900], 0.6),
-            [`& .${u.notchedOutline}`]: { borderColor: r[800] }
-          }
-        })
-      }),
-      notchedOutline: ({ theme: o }) => ({
-        borderColor: r[300],
-        transition: "border-color 120ms ease-in",
-        ...o.applyStyles("dark", { borderColor: r[700] })
-      })
-    }
-  },
-  MuiInputAdornment: {
-    styleOverrides: {
-      root: ({ theme: o }) => ({
-        color: o.palette.grey[500],
-        ...o.applyStyles("dark", { color: o.palette.grey[400] })
-      })
-    }
-  },
-  MuiSwitch: {
-    styleOverrides: {
-      // Track: 44×24 pill (shadcn/Radix proportions).
-      root: { width: 44, height: 24, padding: 0 },
-      switchBase: ({ theme: o }) => ({
-        padding: 0,
-        margin: 2,
-        // Radix-style snappy thumb slide.
-        transitionDuration: "140ms",
-        transitionTimingFunction: "cubic-bezier(0.45, 0.05, 0.55, 0.95)",
-        transitionProperty: "transform",
-        "&.Mui-checked": {
-          // translateX = trackWidth - thumbDiameter - 2*margin = 44 - 20 - 4 = 20
-          transform: "translateX(20px)",
-          color: "#fff",
-          "& + .MuiSwitch-track": {
-            backgroundColor: t[500],
-            opacity: 1,
-            border: 0
-          }
-        },
-        "&.Mui-focusVisible + .MuiSwitch-track": {
-          outline: `2px solid ${e(t[500], 0.5)}`,
-          outlineOffset: 2
-        },
-        "&.Mui-disabled + .MuiSwitch-track": { opacity: 0.4 },
-        "&.Mui-disabled .MuiSwitch-thumb": { opacity: 0.7 },
-        ...o.applyStyles("dark", {
-          "&.Mui-checked": {
-            "& + .MuiSwitch-track": { backgroundColor: t[400] }
-          }
-        })
-      }),
-      // Thumb: 20px circle with layered shadow for depth (key polish factor).
-      thumb: {
-        boxSizing: "border-box",
-        width: 20,
-        height: 20,
-        boxShadow: "0 0 0 1px rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.10), 0 2px 6px rgba(0,0,0,0.08)"
-      },
-      // Track: full pill with fast color transition.
-      track: ({ theme: o }) => ({
-        borderRadius: 9999,
-        backgroundColor: r[300],
-        opacity: 1,
-        transition: "background-color 120ms linear",
-        ...o.applyStyles("dark", { backgroundColor: r[600] })
-      })
-    }
-  }
-}, Q = {
-  MuiMenuItem: {
-    styleOverrides: {
-      root: ({ theme: o }) => ({
-        borderRadius: o.shape.borderRadius,
-        padding: "6px 8px",
-        [`&.${f.focusVisible}`]: { backgroundColor: "transparent" },
-        [`&.${f.selected}`]: {
-          [`&.${f.focusVisible}`]: {
-            backgroundColor: e(o.palette.action.selected, 0.3)
-          }
-        }
-      })
-    }
-  },
-  MuiMenu: {
-    styleOverrides: {
-      list: {
-        gap: "0px",
-        padding: "4px",
-        [`&.${j.root}`]: { margin: "0 -8px" }
-      },
-      paper: ({ theme: o }) => ({
-        marginTop: "4px",
-        borderRadius: o.shape.borderRadius,
-        border: `1px solid ${o.palette.divider}`,
-        backgroundImage: "none",
-        background: "hsl(0, 0%, 100%)",
-        boxShadow: "hsla(220, 30%, 5%, 0.07) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.07) 0px 8px 16px -5px",
-        [`& .${m.root}`]: {
-          "&.Mui-selected": { backgroundColor: e(o.palette.action.selected, 0.3) }
-        },
-        ...o.applyStyles("dark", {
-          background: r[900],
-          boxShadow: "hsla(220, 30%, 5%, 0.7) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.8) 0px 8px 16px -5px"
+    MuiDivider: {
+      styleOverrides: {
+        root: ({ theme: t }) => ({
+          borderColor: o[200],
+          ...t.applyStyles("dark", { borderColor: o[700] })
         })
-      })
-    }
-  },
-  MuiSelect: {
-    defaultProps: {
-      IconComponent: C.forwardRef((o, i) => /* @__PURE__ */ x(G, { fontSize: "small", ...o, ref: i }))
+      }
     },
-    styleOverrides: {
-      select: { display: "flex", alignItems: "center" }
-    }
-  },
-  MuiLink: {
-    defaultProps: { underline: "none" },
-    styleOverrides: {
-      root: ({ theme: o }) => ({
-        color: r[800],
-        fontWeight: 500,
-        position: "relative",
-        textDecoration: "none",
-        width: "fit-content",
-        "&::before": {
-          content: '""',
-          position: "absolute",
-          width: "100%",
-          height: "1px",
-          bottom: 0,
-          left: 0,
-          backgroundColor: r[600],
-          opacity: 0.3,
-          transition: "width 0.3s ease, opacity 0.3s ease"
-        },
-        "&:hover::before": { width: 0 },
-        "&:focus-visible": {
-          outline: `3px solid ${e(t[500], 0.5)}`,
-          outlineOffset: "4px",
-          borderRadius: "2px"
-        },
-        ...o.applyStyles("dark", {
-          color: r[100],
-          "&::before": { backgroundColor: r[400] }
-        })
-      })
-    }
-  },
-  MuiDrawer: {
-    styleOverrides: {
-      paper: ({ theme: o }) => ({ backgroundColor: o.palette.background.default })
-    }
-  },
-  MuiListItemButton: {
-    styleOverrides: {
-      root: ({ theme: o }) => ({
-        borderRadius: o.shape.borderRadius,
-        padding: "8px 12px",
-        gap: 12,
-        border: "1px solid transparent",
-        transition: "all 100ms ease-in",
-        "&:hover": { backgroundColor: e(r[500], 0.08) },
-        "&.Mui-selected": {
-          backgroundColor: e(t[500], 0.08),
-          border: `1px solid ${e(t[500], 0.2)}`,
-          "&:hover": { backgroundColor: e(t[500], 0.12) }
-        },
-        ...o.applyStyles("dark", {
-          "&:hover": { backgroundColor: e(r[500], 0.12) },
-          "&.Mui-selected": {
-            backgroundColor: e(t[400], 0.12),
-            border: `1px solid ${e(t[400], 0.25)}`,
-            "&:hover": { backgroundColor: e(t[400], 0.16) }
-          }
-        })
-      })
-    }
-  },
-  MuiTabs: {
-    styleOverrides: {
-      root: { minHeight: "fit-content" },
-      indicator: ({ theme: o }) => ({
-        backgroundColor: o.palette.grey[800],
-        ...o.applyStyles("dark", { backgroundColor: o.palette.grey[200] })
-      })
-    }
-  },
-  MuiTab: {
-    styleOverrides: {
-      root: ({ theme: o }) => ({
-        padding: "6px 8px",
-        marginBottom: "8px",
-        textTransform: "none",
-        minWidth: "fit-content",
-        minHeight: "fit-content",
-        color: r[600],
-        borderRadius: o.shape.borderRadius,
-        border: "1px solid transparent",
-        ":hover": { color: r[800], backgroundColor: r[100], borderColor: r[200] },
-        [`&.${w.selected}`]: { color: r[900] },
-        ...o.applyStyles("dark", {
-          color: r[400],
-          ":hover": { color: r[100], backgroundColor: r[800], borderColor: r[700] },
-          [`&.${w.selected}`]: { color: "#fff" }
+    MuiTable: {
+      styleOverrides: { root: { borderCollapse: "separate", borderSpacing: 0 } }
+    },
+    MuiTableHead: {
+      styleOverrides: {
+        root: ({ theme: t }) => ({
+          backgroundColor: o[50],
+          ...t.applyStyles("dark", { backgroundColor: o[900] })
         })
-      })
-    }
-  }
-}, Y = {
-  MuiAlert: {
-    styleOverrides: {
-      root: {
-        // Sizing and color are handled by the Alert wrapper component.
-        // We intentionally don't set padding, borderRadius, or severity-based
-        // color variants here to avoid specificity fights with the sx prop.
       }
-    }
-  },
-  MuiDialog: {
-    styleOverrides: {
-      root: ({ theme: o }) => ({
-        "& .MuiDialog-paper": {
-          borderRadius: "10px",
-          border: "1px solid",
-          borderColor: o.palette.divider,
-          backgroundColor: r[50],
-          ...o.applyStyles("dark", {
-            backgroundColor: "hsl(220, 25%, 10%)",
-            borderColor: e(r[700], 0.6)
-          })
-        }
-      })
-    }
-  },
-  MuiPopover: {
-    styleOverrides: {
-      paper: ({ theme: o }) => ({
-        borderRadius: "10px",
-        border: "1px solid",
-        borderColor: o.palette.divider,
-        backgroundImage: "none",
-        backgroundColor: r[50],
-        boxShadow: "0 4px 20px rgba(0, 0, 0, 0.08)",
-        ...o.applyStyles("dark", {
-          backgroundColor: "hsl(220, 25%, 10%)",
-          borderColor: e(r[700], 0.6),
-          boxShadow: "0 4px 20px rgba(0, 0, 0, 0.5)"
+    },
+    MuiTableCell: {
+      styleOverrides: {
+        root: ({ theme: t }) => ({
+          borderColor: o[200],
+          padding: "0.75rem 1rem",
+          ...t.applyStyles("dark", { borderColor: o[700] })
+        }),
+        head: ({ theme: t }) => ({
+          fontWeight: 600,
+          color: o[700],
+          ...t.applyStyles("dark", { color: o[300] })
         })
-      })
-    }
-  },
-  MuiLinearProgress: {
-    styleOverrides: {
-      root: ({ theme: o }) => ({
-        height: 8,
-        borderRadius: 8,
-        backgroundColor: r[200],
-        ...o.applyStyles("dark", { backgroundColor: r[800] })
-      })
-    }
-  }
-}, Z = {
-  MuiList: {
-    styleOverrides: {
-      root: { padding: "8px", display: "flex", flexDirection: "column", gap: 0 }
-    }
-  },
-  MuiListItem: {
-    styleOverrides: {
-      root: ({ theme: o }) => ({
-        [`& > .${k.root}`]: { width: "1rem", height: "1rem", color: r[600] },
-        [`& .${U.root}`]: { fontWeight: 500 },
-        [`& .${m.root}`]: {
-          display: "flex",
-          gap: 8,
-          padding: "2px 8px",
-          borderRadius: o.shape.borderRadius,
-          opacity: 0.7,
+      }
+    },
+    MuiTableRow: {
+      styleOverrides: {
+        root: ({ theme: t }) => ({
+          "&:hover": { backgroundColor: e(o[100], 0.5) },
           "&.Mui-selected": {
-            opacity: 1,
-            backgroundColor: e(r[200], 0.6),
-            [`& .${k.root}`]: { color: r[800] },
-            "&:hover": { backgroundColor: e(r[200], 0.8) }
-          }
-        },
-        ...o.applyStyles("dark", {
-          [`& > .${k.root}`]: { color: r[400] },
-          [`& .${m.root}`]: {
+            backgroundColor: e(a[500], 0.08),
+            "&:hover": { backgroundColor: e(a[500], 0.12) }
+          },
+          ...t.applyStyles("dark", {
+            "&:hover": { backgroundColor: e(o[700], 0.3) },
             "&.Mui-selected": {
-              backgroundColor: e(r[600], 0.3),
-              [`& .${k.root}`]: { color: r[100] },
-              "&:hover": { backgroundColor: e(r[600], 0.5) }
+              backgroundColor: e(a[400], 0.15),
+              "&:hover": { backgroundColor: e(a[400], 0.2) }
             }
-          }
+          })
         })
-      })
-    }
-  },
-  MuiListItemText: {
-    styleOverrides: {
-      primary: ({ theme: o }) => ({
-        fontSize: o.typography.body2.fontSize,
-        fontWeight: 500,
-        lineHeight: o.typography.body2.lineHeight
-      }),
-      secondary: ({ theme: o }) => ({
-        fontSize: o.typography.caption.fontSize,
-        lineHeight: o.typography.caption.lineHeight
-      })
-    }
-  },
-  MuiListSubheader: {
-    styleOverrides: {
-      root: ({ theme: o }) => ({
-        backgroundColor: "transparent",
-        padding: "4px 8px",
-        fontSize: o.typography.caption.fontSize,
-        fontWeight: 500,
-        lineHeight: o.typography.caption.lineHeight
-      })
-    }
-  },
-  MuiListItemIcon: {
-    styleOverrides: { root: { minWidth: 0 } }
-  },
-  MuiCard: {
-    defaultProps: { elevation: 0 },
-    styleOverrides: {
-      root: ({ theme: o }) => ({
-        display: "flex",
-        flexDirection: "column",
-        padding: 16,
-        gap: 16,
-        overflow: "visible",
-        transition: "all 150ms ease-in-out",
-        backgroundColor: r[50],
-        borderRadius: o.shape.borderRadius,
-        border: `1px solid ${o.palette.divider}`,
-        boxShadow: "none",
-        "&:hover": {
-          borderColor: r[300],
-          boxShadow: "0 2px 8px 0 rgba(0, 0, 0, 0.08)"
-        },
-        ...o.applyStyles("dark", {
-          backgroundColor: r[800],
-          "&:hover": {
-            borderColor: r[600],
-            boxShadow: "0 2px 8px 0 rgba(0, 0, 0, 0.3)"
-          }
-        }),
-        variants: [
-          {
-            props: { variant: "outlined" },
-            style: {
-              border: `1px solid ${o.palette.divider}`,
-              boxShadow: "none",
-              background: "hsl(0, 0%, 100%)",
-              "&:hover": {
-                borderColor: r[300],
-                boxShadow: "0 2px 8px 0 rgba(0, 0, 0, 0.08)"
-              },
-              ...o.applyStyles("dark", {
-                background: e(r[900], 0.4),
-                "&:hover": {
-                  borderColor: r[600],
-                  boxShadow: "0 2px 8px 0 rgba(0, 0, 0, 0.3)"
-                }
-              })
-            }
-          }
-        ]
-      })
-    }
-  },
-  MuiCardContent: {
-    styleOverrides: { root: { padding: 0, "&:last-child": { paddingBottom: 0 } } }
-  },
-  MuiCardHeader: {
-    styleOverrides: { root: { padding: 0 } }
-  },
-  MuiCardActions: {
-    styleOverrides: { root: { padding: 0 } }
-  },
-  MuiPaper: {
-    defaultProps: { elevation: 0 },
-    styleOverrides: {
-      root: ({ theme: o }) => ({
-        backgroundImage: "none",
-        ...o.applyStyles("dark", { backgroundColor: r[800] })
-      })
-    }
-  },
-  MuiChip: {
-    defaultProps: { size: "small" },
-    styleOverrides: {
-      root: ({ theme: o }) => ({
-        border: "1px solid",
-        borderRadius: 6,
-        [`& .${l.label}`]: { fontWeight: 600 },
-        variants: [
-          {
-            props: { color: "default" },
-            style: {
-              borderColor: r[200],
-              backgroundColor: r[100],
-              [`& .${l.label}`]: { color: r[500] },
-              [`& .${l.icon}`]: { color: r[500] },
-              [`& .${l.deleteIcon}`]: { color: r[400], "&:hover": { color: r[600] } },
-              ...o.applyStyles("dark", {
-                borderColor: r[600],
-                backgroundColor: e(r[600], 0.3),
-                [`& .${l.label}`]: { color: r[200] },
-                [`& .${l.icon}`]: { color: r[200] },
-                [`& .${l.deleteIcon}`]: { color: r[400], "&:hover": { color: r[200] } }
-              })
-            }
-          },
-          {
-            props: { color: "success" },
-            style: {
-              borderColor: d[200],
-              backgroundColor: d[50],
-              [`& .${l.label}`]: { color: d[500] },
-              [`& .${l.icon}`]: { color: d[500] },
-              ...o.applyStyles("dark", {
-                borderColor: d[800],
-                backgroundColor: d[900],
-                [`& .${l.label}`]: { color: d[200] },
-                [`& .${l.icon}`]: { color: d[200] }
-              })
-            }
-          },
-          {
-            props: { color: "error" },
-            style: {
-              borderColor: p[100],
-              backgroundColor: p[50],
-              [`& .${l.label}`]: { color: p[500] },
-              [`& .${l.icon}`]: { color: p[500] },
-              ...o.applyStyles("dark", {
-                borderColor: p[800],
-                backgroundColor: p[900],
-                [`& .${l.label}`]: { color: p[100] },
-                [`& .${l.icon}`]: { color: p[100] }
-              })
-            }
-          },
-          {
-            props: { color: "warning" },
-            style: {
-              borderColor: s[200],
-              backgroundColor: s[50],
-              [`& .${l.label}`]: { color: s[500] },
-              [`& .${l.icon}`]: { color: s[500] },
-              ...o.applyStyles("dark", {
-                borderColor: s[800],
-                backgroundColor: s[900],
-                [`& .${l.label}`]: { color: s[200] },
-                [`& .${l.icon}`]: { color: s[200] }
-              })
-            }
-          },
-          {
-            props: { color: "primary" },
-            style: {
-              borderColor: t[200],
-              backgroundColor: t[50],
-              [`& .${l.label}`]: { color: t[500] },
-              [`& .${l.icon}`]: { color: t[500] },
-              ...o.applyStyles("dark", {
-                borderColor: t[800],
-                backgroundColor: t[900],
-                [`& .${l.label}`]: { color: t[100] },
-                [`& .${l.icon}`]: { color: t[100] }
-              })
-            }
-          },
-          {
-            props: { color: "secondary" },
-            style: {
-              borderColor: n[200],
-              backgroundColor: n[50],
-              [`& .${l.label}`]: { color: n[500] },
-              [`& .${l.icon}`]: { color: n[500] },
-              ...o.applyStyles("dark", {
-                borderColor: n[700],
-                backgroundColor: n[900],
-                [`& .${l.label}`]: { color: n[100] },
-                [`& .${l.icon}`]: { color: n[100] }
-              })
-            }
-          },
-          {
-            props: { variant: "outlined", color: "default" },
-            style: {
-              backgroundColor: "transparent",
-              borderColor: r[300],
-              [`& .${l.label}`]: { color: r[500] },
-              ...o.applyStyles("dark", {
-                backgroundColor: "transparent",
-                borderColor: r[500],
-                [`& .${l.label}`]: { color: r[200] }
-              })
-            }
-          },
-          {
-            props: { size: "small" },
-            style: {
-              height: 20,
-              borderRadius: 6,
-              [`& .${l.label}`]: { fontSize: o.typography.caption.fontSize, padding: "0 6px" }
-            }
-          },
-          {
-            props: { size: "medium" },
-            style: {
-              height: 28,
-              borderRadius: 8,
-              [`& .${l.label}`]: { fontSize: o.typography.caption.fontSize }
-            }
-          }
-        ]
-      })
-    }
-  },
-  MuiTablePagination: {
-    styleOverrides: {
-      actions: {
-        display: "flex",
-        gap: 8,
-        marginRight: 6,
-        [`& .${N.root}`]: { minWidth: 0, width: 36, height: 36 }
-      }
-    }
-  },
-  MuiAvatar: {
-    styleOverrides: {
-      root: {
-        color: "#ffffff",
-        fontWeight: 600
       }
-    }
-  },
-  MuiDivider: {
-    styleOverrides: {
-      root: ({ theme: o }) => ({
-        borderColor: r[200],
-        ...o.applyStyles("dark", { borderColor: r[700] })
-      })
-    }
-  },
-  MuiTable: {
-    styleOverrides: { root: { borderCollapse: "separate", borderSpacing: 0 } }
-  },
-  MuiTableHead: {
-    styleOverrides: {
-      root: ({ theme: o }) => ({
-        backgroundColor: r[50],
-        ...o.applyStyles("dark", { backgroundColor: r[900] })
-      })
-    }
-  },
-  MuiTableCell: {
-    styleOverrides: {
-      root: ({ theme: o }) => ({
-        borderColor: r[200],
-        padding: "0.75rem 1rem",
-        ...o.applyStyles("dark", { borderColor: r[700] })
-      }),
-      head: ({ theme: o }) => ({
-        fontWeight: 600,
-        color: r[700],
-        ...o.applyStyles("dark", { color: r[300] })
-      })
-    }
-  },
-  MuiTableRow: {
-    styleOverrides: {
-      root: ({ theme: o }) => ({
-        "&:hover": { backgroundColor: e(r[100], 0.5) },
-        "&.Mui-selected": {
-          backgroundColor: e(t[500], 0.08),
-          "&:hover": { backgroundColor: e(t[500], 0.12) }
-        },
-        ...o.applyStyles("dark", {
-          "&:hover": { backgroundColor: e(r[700], 0.3) },
-          "&.Mui-selected": {
-            backgroundColor: e(t[400], 0.15),
-            "&:hover": { backgroundColor: e(t[400], 0.2) }
-          }
+    },
+    MuiAccordion: {
+      styleOverrides: {
+        root: ({ theme: t }) => ({
+          border: `1px solid ${o[200]}`,
+          borderRadius: t.shape.borderRadius,
+          "&:before": { display: "none" },
+          "&.Mui-expanded": { margin: 0 },
+          ...t.applyStyles("dark", {
+            border: `1px solid ${o[700]}`,
+            backgroundColor: o[800]
+          })
         })
-      })
-    }
-  },
-  MuiAccordion: {
-    styleOverrides: {
-      root: ({ theme: o }) => ({
-        border: `1px solid ${r[200]}`,
-        borderRadius: o.shape.borderRadius,
-        "&:before": { display: "none" },
-        "&.Mui-expanded": { margin: 0 },
-        ...o.applyStyles("dark", {
-          border: `1px solid ${r[700]}`,
-          backgroundColor: r[800]
+      }
+    },
+    MuiAccordionSummary: {
+      styleOverrides: {
+        root: ({ theme: t }) => ({
+          borderRadius: t.shape.borderRadius,
+          fontWeight: 600,
+          "&.Mui-expanded": { minHeight: 48 }
+        }),
+        content: { "&.Mui-expanded": { margin: "12px 0" } }
+      }
+    },
+    MuiAccordionDetails: {
+      styleOverrides: {
+        root: ({ theme: t }) => ({
+          borderTop: `1px solid ${o[200]}`,
+          ...t.applyStyles("dark", { borderTop: `1px solid ${o[700]}` })
         })
-      })
-    }
-  },
-  MuiAccordionSummary: {
-    styleOverrides: {
-      root: ({ theme: o }) => ({
-        borderRadius: o.shape.borderRadius,
-        fontWeight: 600,
-        "&.Mui-expanded": { minHeight: 48 }
-      }),
-      content: { "&.Mui-expanded": { margin: "12px 0" } }
-    }
-  },
-  MuiAccordionDetails: {
-    styleOverrides: {
-      root: ({ theme: o }) => ({
-        borderTop: `1px solid ${r[200]}`,
-        ...o.applyStyles("dark", { borderTop: `1px solid ${r[700]}` })
-      })
-    }
-  },
-  MuiTypography: {
-    styleOverrides: {
-      root: { WebkitFontSmoothing: "antialiased", MozOsxFontSmoothing: "grayscale" }
+      }
+    },
+    MuiTypography: {
+      styleOverrides: {
+        root: { WebkitFontSmoothing: "antialiased", MozOsxFontSmoothing: "grayscale" }
+      }
     }
-  }
-};
-function _({ mode: o }) {
-  const { setMode: i } = H();
-  return D(() => {
-    i && i(o);
-  }, [o, i]), null;
+  };
 }
-function fo({
-  children: o,
-  disableCustomTheme: i,
-  themeComponents: b,
-  defaultMode: h = "dark"
-}) {
-  const y = P(() => i ? v() : v({
-    cssVariables: {
-      colorSchemeSelector: "data-mui-color-scheme",
-      cssVarPrefix: "ov-mui"
+const zo = R(), oo = { gray: x, brand: f, green: I, orange: P, red: H, purple: W }, ro = {
+  palettes: oo,
+  getDesignTokens: N,
+  getShadows: j,
+  getCustomizations: () => ({
+    ...w(),
+    ...O(),
+    ...z(),
+    ...R()
+  })
+}, eo = U(), M = {
+  50: "#EEE8D5",
+  // base2
+  100: "#93A1A1",
+  // base1
+  200: "#839496",
+  // base0
+  300: "#657B83",
+  // base00
+  400: "#586E75",
+  // base01
+  500: "#4C666E",
+  600: "#35565F",
+  700: "#1E4651",
+  800: "#073642",
+  // base02
+  900: "#002B36"
+  // base03
+}, s = {
+  50: "#E4F1FB",
+  100: "#C6E2F8",
+  200: "#7CBCE8",
+  300: "#4FA3DD",
+  400: "#268BD2",
+  500: "#1A73AD",
+  600: "#155F94",
+  700: "#0F4E7A",
+  800: "#07354F",
+  900: "#032A40"
+}, y = {
+  50: "#F2F7E8",
+  100: "#DCEBC4",
+  200: "#8FBB4D",
+  300: "#84B86A",
+  400: "#7A9B00",
+  500: "#5E7F00",
+  600: "#4D6B06",
+  700: "#384F04",
+  800: "#0F3D2A",
+  900: "#083320"
+}, k = {
+  50: "#FEF8E6",
+  100: "#FAECBA",
+  200: "#DFB540",
+  300: "#B89A4A",
+  400: "#B58900",
+  500: "#997300",
+  600: "#9B4A08",
+  700: "#6E5302",
+  800: "#2A1E06",
+  900: "#1A1204"
+}, C = {
+  50: "#FBECEC",
+  100: "#F5CECE",
+  200: "#EA9695",
+  300: "#DE6462",
+  400: "#DC322F",
+  500: "#BC2320",
+  600: "#981D1B",
+  700: "#701411",
+  800: "#4A0B09",
+  900: "#2F0504"
+}, g = {
+  50: "#EEEEF9",
+  100: "#D1D2F0",
+  200: "#A4A7DD",
+  300: "#8387CF",
+  400: "#6C71C4",
+  500: "#5559AC",
+  600: "#474A92",
+  700: "#363972",
+  800: "#232547",
+  900: "#14152D"
+}, L = (i) => i === "dark" ? "0 4px 12px rgba(0, 20, 26, 0.35), 0 2px 4px rgba(0, 20, 26, 0.25)" : "0 4px 12px rgba(88, 110, 117, 0.12), 0 2px 4px rgba(88, 110, 117, 0.08)", ao = (i) => ({
+  palette: {
+    mode: i,
+    primary: {
+      light: s[200],
+      main: s[400],
+      dark: s[700],
+      contrastText: s[50],
+      ...i === "dark" && {
+        light: s[300],
+        dark: s[700]
+      }
     },
-    colorSchemes: {
-      light: {
-        palette: R("light").palette
-      },
-      dark: {
-        palette: R("dark").palette
+    info: {
+      light: s[100],
+      main: s[300],
+      dark: s[600],
+      contrastText: M[50],
+      ...i === "dark" && {
+        contrastText: s[300],
+        light: s[500],
+        main: s[700],
+        dark: s[900]
       }
     },
-    typography: X,
-    shape: q,
-    shadows: J("light"),
-    components: {
-      MuiCssBaseline: {
-        styleOverrides: {
-          html: { height: "100%" },
-          body: { height: "100%" }
-        }
-      },
-      ...K,
-      ...Q,
-      ...Y,
-      ...Z,
-      ...b
-    }
-  }), [i, b]);
-  return i ? /* @__PURE__ */ x(I, { children: o }) : /* @__PURE__ */ B(W, { theme: y, children: [
-    /* @__PURE__ */ x(F, { enableColorScheme: !0 }),
-    /* @__PURE__ */ x(_, { mode: h }),
-    o
-  ] });
+    warning: {
+      light: k[300],
+      main: k[400],
+      dark: k[800],
+      ...i === "dark" && {
+        light: k[400],
+        main: k[500],
+        dark: k[700]
+      }
+    },
+    error: {
+      light: C[300],
+      main: C[400],
+      dark: C[800],
+      ...i === "dark" && {
+        light: C[400],
+        main: C[500],
+        dark: C[700]
+      }
+    },
+    success: {
+      light: y[300],
+      main: y[400],
+      dark: y[800],
+      ...i === "dark" && {
+        light: y[400],
+        main: y[500],
+        dark: y[700]
+      }
+    },
+    secondary: {
+      light: g[300],
+      main: g[400],
+      dark: g[700],
+      contrastText: g[50],
+      ...i === "dark" && {
+        light: g[300],
+        main: g[400],
+        dark: g[800]
+      }
+    },
+    grey: M,
+    divider: i === "dark" ? "rgba(76, 102, 110, 0.6)" : "rgba(201, 194, 175, 0.6)",
+    background: {
+      default: i === "dark" ? "#002B36" : "#FDF6E3",
+      paper: i === "dark" ? "#073642" : "#EEE8D5"
+    },
+    text: {
+      primary: i === "dark" ? "rgba(147, 161, 161, 0.92)" : "rgba(88, 110, 117, 0.92)",
+      secondary: i === "dark" ? "rgba(147, 161, 161, 0.64)" : "rgba(88, 110, 117, 0.64)"
+    },
+    action: {
+      hover: i === "dark" ? "rgba(147, 161, 161, 0.04)" : "rgba(88, 110, 117, 0.04)",
+      selected: "rgba(38, 139, 210, 0.10)"
+    },
+    baseShadow: L(i)
+  }
+}), to = (i) => {
+  const o = L(i), a = [...eo.shadows];
+  return a[1] = o, a;
+}, h = {
+  gray: M,
+  brand: s,
+  green: y,
+  orange: k,
+  red: C,
+  purple: g
+}, io = {
+  palettes: h,
+  getDesignTokens: ao,
+  getShadows: to,
+  getCustomizations: () => ({
+    ...w(h),
+    ...O(h),
+    ...z(h),
+    ...R(h)
+  })
+};
+function Ro() {
+  B.register("default", ro), B.register("solarized", io);
 }
-function mo(o) {
-  const i = document.documentElement;
-  i.setAttribute("data-ov-theme", o.type);
-  for (const [b, h] of Object.entries(o.colors)) {
-    const y = `--ov-${b.replace(/\./g, "-")}`;
-    i.style.setProperty(y, h);
+function Bo(i) {
+  const o = document.documentElement;
+  o.setAttribute("data-ov-theme", i.type);
+  for (const [a, r] of Object.entries(i.colors)) {
+    const d = `--ov-${a.replace(/\./g, "-")}`;
+    o.style.setProperty(d, r);
   }
-  o.typography?.fontFamily && i.style.setProperty("--ov-font-ui", o.typography.fontFamily), o.typography?.monoFontFamily && i.style.setProperty("--ov-font-mono", o.typography.monoFontFamily), o.typography?.fontSize && i.style.setProperty(
+  i.typography?.fontFamily && o.style.setProperty("--ov-font-ui", i.typography.fontFamily), i.typography?.monoFontFamily && o.style.setProperty("--ov-font-mono", i.typography.monoFontFamily), i.typography?.fontSize && o.style.setProperty(
     "--ov-text-base",
-    `${o.typography.fontSize / 16}rem`
+    `${i.typography.fontSize / 16}rem`
   );
 }
-function vo(o = "dark") {
-  const i = document.documentElement;
-  i.setAttribute("data-ov-theme", o), i.removeAttribute("style");
+function To(i = "dark") {
+  const o = document.documentElement;
+  o.setAttribute("data-ov-theme", i), o.removeAttribute("style");
 }
 export {
-  fo as AppTheme,
-  mo as applyTheme,
-  t as brand,
-  J as customShadows,
-  Z as dataDisplayCustomizations,
-  Y as feedbackCustomizations,
-  R as getDesignTokens,
-  r as gray,
-  d as green,
-  K as inputsCustomizations,
-  Q as navigationCustomizations,
-  s as orange,
-  n as purple,
-  p as red,
-  vo as resetTheme,
-  q as shape,
-  X as typography
+  Do as AppTheme,
+  B as ThemeRegistry,
+  Ao as ThemeVariantContext,
+  Bo as applyTheme,
+  f as brand,
+  R as createDataDisplayCustomizations,
+  z as createFeedbackCustomizations,
+  w as createInputsCustomizations,
+  O as createNavigationCustomizations,
+  j as customShadows,
+  zo as dataDisplayCustomizations,
+  Oo as feedbackCustomizations,
+  N as getDesignTokens,
+  ao as getSolarizedDesignTokens,
+  x as gray,
+  I as green,
+  Ro as initThemeRegistry,
+  Mo as inputsCustomizations,
+  wo as navigationCustomizations,
+  P as orange,
+  W as purple,
+  H as red,
+  To as resetTheme,
+  Io as shape,
+  s as solarizedBrand,
+  to as solarizedCustomShadows,
+  M as solarizedGray,
+  y as solarizedGreen,
+  k as solarizedOrange,
+  g as solarizedPurple,
+  C as solarizedRed,
+  Po as typography,
+  Ho as useThemeVariant
 };