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
};
