@omniviewdev/ui 0.1.0

package/dist/theme.js

@@ -0,0 +1,1362 @@
+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 { 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]
+      }
+    },
+    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]
+      }
+    },
+    warning: {
+      light: s[300],
+      main: s[400],
+      dark: s[800],
+      ...o === "dark" && {
+        light: s[400],
+        main: s[500],
+        dark: s[700]
+      }
+    },
+    error: {
+      light: p[300],
+      main: p[400],
+      dark: p[800],
+      ...o === "dark" && {
+        light: p[400],
+        main: p[500],
+        dark: p[700]
+      }
+    },
+    success: {
+      light: d[300],
+      main: d[400],
+      dark: d[800],
+      ...o === "dark" && {
+        light: d[400],
+        main: d[500],
+        dark: d[700]
+      }
+    },
+    secondary: {
+      light: n[300],
+      main: n[400],
+      dark: n[700],
+      contrastText: n[50],
+      ...o === "dark" && {
+        light: n[300],
+        main: n[400],
+        dark: n[800]
+      }
+    },
+    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)"
+    },
+    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)"
+    },
+    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
+    },
+    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"
+        }
+      })
+    }
+  },
+  MuiButton: {
+    defaultProps: {
+      disableElevation: !0
+    },
+    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",
+            "&:hover": {
+              backgroundColor: M(a.main, 0.12)
+            },
+            "&:active": {
+              backgroundColor: M(a.main, 0.2)
+            },
+            ...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) }
+            })
+          }
+        })), 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) }
+            })
+          }
+        })), T = i.map(([g, a]) => ({
+          props: { color: g, variant: "link" },
+          style: {
+            color: a.main,
+            ...o.applyStyles("dark", { color: a.light })
+          }
+        }));
+        return {
+          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)",
+          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" }
+              }
+            },
+            ...b,
+            // === Outlined: default/neutral gets gray ===
+            {
+              props: { variant: "outlined" },
+              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] }
+                })
+              }
+            },
+            ...h,
+            // === Text (ghost): default/neutral gets gray ===
+            {
+              props: { variant: "text" },
+              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) }
+                })
+              }
+            },
+            ...y,
+            // === Soft (custom): default/neutral gets gray ===
+            {
+              props: { variant: "soft" },
+              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) }
+                })
+              }
+            },
+            ...z,
+            // === Link (custom): base ===
+            {
+              props: { variant: "link" },
+              style: {
+                color: r[600],
+                backgroundColor: "transparent",
+                padding: "0 4px",
+                minWidth: "auto",
+                textDecoration: "none",
+                "&:hover": {
+                  backgroundColor: "transparent",
+                  textDecoration: "underline"
+                },
+                ...o.applyStyles("dark", {
+                  color: r[300]
+                })
+              }
+            },
+            ...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) }
+              })
+            }
+          }
+        ]
+      })
+    }
+  },
+  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"
+        }
+      }
+    }
+  },
+  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)"
+        }
+      }
+    }
+  },
+  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"
+        })
+      })
+    }
+  },
+  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" }
+        })
+      })
+    }
+  }
+}, 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)"
+        })
+      })
+    }
+  },
+  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,
+          "&.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}`]: {
+            "&.Mui-selected": {
+              backgroundColor: e(r[600], 0.3),
+              [`& .${k.root}`]: { color: r[100] },
+              "&:hover": { backgroundColor: e(r[600], 0.5) }
+            }
+          }
+        })
+      })
+    }
+  },
+  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: 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: 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" }
+    }
+  }
+};
+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"
+    },
+    colorSchemes: {
+      light: {
+        palette: R("light").palette
+      },
+      dark: {
+        palette: R("dark").palette
+      }
+    },
+    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
+  ] });
+}
+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);
+  }
+  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(
+    "--ov-text-base",
+    `${o.typography.fontSize / 16}rem`
+  );
+}
+function vo(o = "dark") {
+  const i = document.documentElement;
+  i.setAttribute("data-ov-theme", o), i.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
+};