@octoguide/mui-ui-toolkit 0.1.0

package/dist/index.mjs

@@ -0,0 +1,1723 @@
+// src/ThemeProvider.tsx
+import { ThemeProvider as MuiThemeProvider, CssBaseline } from "@mui/material";
+
+// src/themes/defaultTheme.ts
+var defaultTheme = {
+  colors: {
+    primary: "#BE0D00",
+    primaryDark: "#003c8f",
+    primaryLight: "#5e92f3",
+    primaryContrast: "#ffffff",
+    secondary: "#c95109",
+    secondaryDark: "#38006b",
+    secondaryLight: "#9c4dcc",
+    secondaryContrast: "#ffffff",
+    success: "#1A6D29",
+    warning: "#E6920A",
+    error: "#990000",
+    info: "#0288D1",
+    background: "#F5F7FA",
+    backgroundPaper: "#ffffff",
+    backgroundSubtle: "#EEF2F7",
+    textPrimary: "#1A2340",
+    textSecondary: "#546080",
+    textDisabled: "#A0AABF",
+    divider: "#DDE3EE",
+    border: "#C5CFE0",
+    borderFocus: "#1565C0",
+    overlayLight: "rgba(255, 255, 255, 0.8)",
+    overlayDark: "rgba(0, 0, 0, 0.12)"
+  },
+  typography: {
+    fontFamilyBase: '"Source Sans Pro", sans-serif',
+    fontFamilyMono: '"Inter", "Roboto", "Helvetica Neue", Arial, sans-serif',
+    // ── Sizes (identical across all themes) ──────────────────────────────
+    fontSizeXs: "0.625rem",
+    // 10px
+    fontSizeSm: "0.75rem",
+    // 12px
+    fontSizeMd: "0.875rem",
+    // 14px
+    fontSizeLg: "1rem",
+    // 16px
+    fontSizeXl: "1.125rem",
+    // 18px
+    fontSize2xl: "1.375rem",
+    // 22px
+    fontSize3xl: "1.75rem",
+    // 28px
+    // ── Weights (identical across all themes) ─────────────────────────────
+    fontWeightLight: 300,
+    fontWeightRegular: 400,
+    fontWeightMedium: 500,
+    fontWeightSemiBold: 600,
+    fontWeightBold: 700,
+    lineHeightTight: 1.2,
+    lineHeightBase: 1.5,
+    lineHeightRelaxed: 1.75,
+    letterSpacingTight: "-0.02em",
+    letterSpacingBase: "0em",
+    letterSpacingWide: "0.06em"
+  },
+  // ── Spacing (identical across all themes) ──────────────────────────────
+  spacing: {
+    unit: 8,
+    xs: "4px",
+    sm: "8px",
+    md: "16px",
+    lg: "24px",
+    xl: "32px",
+    xxl: "48px"
+  },
+  borderRadius: {
+    none: "0px",
+    xs: "2px",
+    sm: "4px",
+    md: "8px",
+    lg: "12px",
+    xl: "16px",
+    full: "9999px"
+  },
+  shadows: {
+    none: "none",
+    xs: "0 1px 2px rgba(0, 0, 0, 0.08)",
+    sm: "0 2px 6px rgba(0, 0, 0, 0.10)",
+    md: "0 4px 12px rgba(0, 0, 0, 0.12)",
+    lg: "0 8px 24px rgba(0, 0, 0, 0.14)",
+    xl: "0 16px 48px rgba(0, 0, 0, 0.18)"
+  },
+  transitions: {
+    durationFast: "120ms",
+    durationBase: "200ms",
+    durationSlow: "350ms",
+    easingDefault: "cubic-bezier(0.4, 0, 0.2, 1)",
+    easingIn: "cubic-bezier(0.4, 0, 1, 1)",
+    easingOut: "cubic-bezier(0, 0, 0.2, 1)"
+  },
+  // ── Z-index (identical across all themes) ──────────────────────────────
+  zIndex: {
+    base: 0,
+    dropdown: 100,
+    sticky: 200,
+    overlay: 300,
+    modal: 400,
+    popover: 500,
+    toast: 600,
+    tooltip: 700
+  },
+  components: {
+    button: {
+      // Sizes & paddings (identical across themes)
+      paddingX: "12px",
+      paddingY: "6px",
+      paddingXSm: "8px",
+      paddingYSm: "4px",
+      paddingXLg: "16px",
+      paddingYLg: "8px",
+      paddingXXl: "16px",
+      paddingYXl: "8px",
+      fontSizeSm: "0.8125rem",
+      fontSizeMd: "0.875rem",
+      fontSizeLg: "0.9375rem",
+      heightSm: "30px",
+      heightMd: "36px",
+      heightLg: "48px",
+      heightXl: "56px",
+      // Typography & style (identical across themes)
+      borderWidth: "1.5px",
+      fontWeight: 700,
+      letterSpacing: "0em",
+      textTransform: "none",
+      iconGap: "8px",
+      // Brand-specific — overridden per theme
+      borderRadius: "8px",
+      minWidth: "200px"
+    },
+    input: {
+      // Sizes & paddings (identical across themes)
+      paddingX: "14px",
+      paddingY: "10px",
+      borderWidthFocus: "2px",
+      background: "#ffffff",
+      labelFontSize: "0.875rem",
+      helperFontSize: "0.75rem",
+      // Brand-specific — overridden per theme
+      borderRadius: "8px",
+      borderWidth: "1px",
+      backgroundDisabled: "#F5F7FA",
+      minHeight: "44px"
+    },
+    card: {
+      // Layout (identical across themes)
+      padding: "24px",
+      paddingCompact: "16px",
+      borderWidth: "1px",
+      background: "#ffffff",
+      // Brand-specific — overridden per theme
+      borderRadius: "12px"
+    },
+    // ── Chip (identical across all themes) ───────────────────────────────
+    chip: {
+      height: "32px",
+      heightSm: "24px",
+      paddingX: "12px",
+      borderRadius: "9999px",
+      fontSize: "0.8125rem",
+      fontWeight: 500,
+      iconSize: "16px"
+    },
+    // ── Badge (identical across all themes) ──────────────────────────────
+    badge: {
+      height: "20px",
+      minWidth: "20px",
+      paddingX: "6px",
+      borderRadius: "9999px",
+      fontSize: "0.6875rem",
+      fontWeight: 700,
+      borderWidth: "2px"
+    },
+    tooltip: {
+      paddingX: "10px",
+      paddingY: "6px",
+      fontSize: "0.75rem",
+      maxWidth: "280px",
+      color: "#ffffff",
+      // Brand-specific — overridden per theme
+      borderRadius: "6px",
+      background: "#1A2340"
+    },
+    dialog: {
+      // Layout (identical across themes)
+      padding: "32px",
+      maxWidth: "600px",
+      background: "#ffffff",
+      // Brand-specific — overridden per theme
+      borderRadius: "16px"
+    },
+    table: {
+      // Layout (identical across themes)
+      cellPaddingX: "16px",
+      headerFontWeight: 600,
+      borderWidth: "1px",
+      // Brand-specific — overridden per theme
+      cellPaddingY: "12px",
+      headerBackground: "#EEF2F7",
+      rowHoverBackground: "#F5F7FA",
+      borderColor: "#DDE3EE"
+    },
+    avatar: {
+      // Sizes (identical across themes)
+      sizeXs: "24px",
+      sizeSm: "32px",
+      sizeMd: "40px",
+      sizeLg: "56px",
+      sizeXl: "80px",
+      sizeXxl: "128px",
+      // Style (identical across themes)
+      borderRadius: "50%",
+      groupSpacing: "-8px",
+      groupBorderWidth: "2px",
+      // Brand-specific — overridden per theme
+      borderRadiusRounded: "12px"
+    },
+    divider: {
+      thickness: "1px",
+      // Brand-specific — overridden per theme
+      color: "#DDE3EE"
+    },
+    alert: {
+      // Layout (identical across themes)
+      padding: "6px 16px",
+      // Brand-specific — overridden per theme
+      borderRadius: "8px"
+    },
+    accordion: {
+      // Layout (identical across themes)
+      standaloneRadius: "16px",
+      summaryPaddingX: "16px",
+      summaryPaddingY: "16px",
+      summaryFontWeight: 600,
+      detailsPaddingX: "16px",
+      detailsPaddingBottom: "16px",
+      standaloneBackground: "rgba(145, 158, 171, 0.08)",
+      standaloneBackgroundExpanded: "rgba(145, 158, 171, 0.16)",
+      // Brand-specific — overridden per theme
+      borderRadius: "8px"
+    },
+    toggleButton: {
+      borderRadius: "8px",
+      borderWidth: "1px",
+      paddingXSm: "7px",
+      paddingYSm: "5px",
+      paddingXMd: "11px",
+      paddingYMd: "11px",
+      paddingXLg: "15px",
+      paddingYLg: "15px",
+      fontWeight: 700
+    }
+  }
+};
+var defaultTheme_default = defaultTheme;
+
+// src/themes/mergeTheme.ts
+function isPlainObject(val) {
+  return typeof val === "object" && val !== null && !Array.isArray(val);
+}
+function deepMerge(base, overrides) {
+  const result = { ...base };
+  for (const key of Object.keys(overrides)) {
+    const baseVal = result[key];
+    const overrideVal = overrides[key];
+    if (isPlainObject(baseVal) && isPlainObject(overrideVal)) {
+      result[key] = deepMerge(baseVal, overrideVal);
+    } else if (overrideVal !== void 0) {
+      result[key] = overrideVal;
+    }
+  }
+  return result;
+}
+function mergeTheme(base, overrides) {
+  return deepMerge(base, overrides);
+}
+
+// src/themes/theme1/index.ts
+var theme1Overrides = {
+  colors: {
+    primary: "#1565C0",
+    primaryDark: "#003c8f",
+    primaryLight: "#5e92f3",
+    primaryContrast: "#ffffff",
+    secondary: "#6A1B9A",
+    secondaryDark: "#38006b",
+    secondaryLight: "#9c4dcc",
+    secondaryContrast: "#ffffff",
+    success: "#2E7D32",
+    warning: "#ED6C02",
+    error: "#D32F2F",
+    info: "#0288D1",
+    background: "#F5F7FA",
+    backgroundPaper: "#ffffff",
+    backgroundSubtle: "#EEF2F7",
+    textPrimary: "#1A2340",
+    textSecondary: "#546080",
+    textDisabled: "#A0AABF",
+    divider: "#DDE3EE",
+    border: "#C5CFE0",
+    borderFocus: "#1565C0",
+    overlayLight: "rgba(255, 255, 255, 0.8)",
+    overlayDark: "rgba(21, 101, 192, 0.12)"
+  },
+  typography: {
+    fontFamilyBase: '"Inter", "Roboto", "Helvetica Neue", Arial, sans-serif',
+    fontFamilyMono: '"Fira Code", "Courier New", monospace',
+    lineHeightTight: 1.2,
+    lineHeightBase: 1.5,
+    lineHeightRelaxed: 1.75,
+    letterSpacingTight: "-0.02em",
+    letterSpacingWide: "0.06em"
+  },
+  borderRadius: {
+    xs: "2px",
+    sm: "4px",
+    md: "8px",
+    lg: "12px",
+    xl: "16px"
+  },
+  shadows: {
+    xs: "0 1px 2px rgba(21, 101, 192, 0.08)",
+    sm: "0 2px 6px rgba(21, 101, 192, 0.10)",
+    md: "0 4px 12px rgba(21, 101, 192, 0.12)",
+    lg: "0 8px 24px rgba(21, 101, 192, 0.14)",
+    xl: "0 16px 48px rgba(21, 101, 192, 0.18)"
+  },
+  transitions: {
+    durationFast: "120ms",
+    durationBase: "200ms",
+    durationSlow: "350ms"
+  },
+  components: {
+    button: { borderRadius: "8px" },
+    input: {
+      borderRadius: "8px",
+      borderWidth: "1px",
+      backgroundDisabled: "#F5F7FA",
+      minHeight: "44px"
+    },
+    card: { borderRadius: "12px" },
+    tooltip: {
+      borderRadius: "6px",
+      background: "#1A2340"
+    },
+    dialog: { borderRadius: "16px" },
+    table: {
+      cellPaddingY: "12px",
+      headerBackground: "#EEF2F7",
+      rowHoverBackground: "#F5F7FA",
+      borderColor: "#DDE3EE"
+    },
+    avatar: { borderRadiusRounded: "12px" },
+    divider: { color: "#DDE3EE" },
+    alert: { borderRadius: "8px" },
+    accordion: { borderRadius: "8px" }
+  }
+};
+var theme1_default = theme1Overrides;
+
+// src/themes/theme2/index.ts
+var theme2Overrides = {
+  colors: {
+    primary: "#2E7D32",
+    primaryDark: "#1B5E20",
+    primaryLight: "#60AD5E",
+    primaryContrast: "#ffffff",
+    secondary: "#F57F17",
+    secondaryDark: "#BC5100",
+    secondaryLight: "#FFAD42",
+    secondaryContrast: "#1A1A1A",
+    success: "#388E3C",
+    warning: "#F57C00",
+    error: "#C62828",
+    info: "#01579B",
+    background: "#F7F9F5",
+    backgroundPaper: "#ffffff",
+    backgroundSubtle: "#EDF3EB",
+    textPrimary: "#1C2A1E",
+    textSecondary: "#4A6350",
+    textDisabled: "#9DB09F",
+    divider: "#D4E5D0",
+    border: "#B8D4B2",
+    borderFocus: "#2E7D32",
+    overlayLight: "rgba(255, 255, 255, 0.8)",
+    overlayDark: "rgba(46, 125, 50, 0.12)"
+  },
+  typography: {
+    fontFamilyBase: '"DM Sans", "Roboto", "Helvetica Neue", Arial, sans-serif',
+    fontFamilyMono: '"JetBrains Mono", "Courier New", monospace',
+    lineHeightTight: 1.25,
+    lineHeightBase: 1.6,
+    lineHeightRelaxed: 1.8,
+    letterSpacingTight: "-0.01em",
+    letterSpacingWide: "0.04em"
+  },
+  borderRadius: {
+    xs: "4px",
+    sm: "8px",
+    md: "12px",
+    lg: "20px",
+    xl: "28px"
+  },
+  shadows: {
+    xs: "0 1px 2px rgba(46, 125, 50, 0.06)",
+    sm: "0 2px 8px rgba(46, 125, 50, 0.08)",
+    md: "0 4px 16px rgba(46, 125, 50, 0.10)",
+    lg: "0 8px 28px rgba(46, 125, 50, 0.13)",
+    xl: "0 16px 56px rgba(46, 125, 50, 0.16)"
+  },
+  transitions: {
+    durationFast: "150ms",
+    durationBase: "250ms",
+    durationSlow: "400ms"
+  },
+  components: {
+    button: { borderRadius: "12px" },
+    input: {
+      borderRadius: "12px",
+      borderWidth: "1.5px",
+      backgroundDisabled: "#F7F9F5",
+      minHeight: "46px"
+    },
+    card: { borderRadius: "20px" },
+    tooltip: {
+      borderRadius: "8px",
+      background: "#1C2A1E"
+    },
+    dialog: { borderRadius: "24px" },
+    table: {
+      cellPaddingY: "14px",
+      headerBackground: "#EDF3EB",
+      rowHoverBackground: "#F7F9F5",
+      borderColor: "#D4E5D0"
+    },
+    avatar: { borderRadiusRounded: "16px" },
+    divider: { color: "#D4E5D0" },
+    alert: { borderRadius: "12px" },
+    accordion: { borderRadius: "12px" }
+  }
+};
+var theme2_default = theme2Overrides;
+
+// src/themes/cps/index.ts
+var cpsThemeOverrides = {};
+var cps_default = cpsThemeOverrides;
+
+// src/themes/registry.ts
+var themeRegistry = {
+  theme1: theme1_default,
+  theme2: theme2_default,
+  cpsTheme: cps_default
+};
+function getThemeTokens(name) {
+  const overrides = themeRegistry[name];
+  if (!overrides) {
+    const available = Object.keys(themeRegistry).join(", ");
+    throw new Error(`Unknown theme "${name}". Available themes: ${available}`);
+  }
+  return mergeTheme(defaultTheme_default, overrides);
+}
+
+// src/themes/config.ts
+function resolveThemeName() {
+  const importMetaEnv = typeof import.meta?.env === "object" ? import.meta.env : void 0;
+  const env = importMetaEnv || typeof globalThis !== "undefined" && globalThis.process?.env || {};
+  const raw = env["VITE_THEME"] || env["REACT_APP_THEME"] || env["NEXT_PUBLIC_THEME"] || "cpsTheme";
+  return raw;
+}
+
+// src/themes/createMuiTheme.ts
+import { createTheme, alpha, darken } from "@mui/material/styles";
+function createMuiTheme(tokens) {
+  return createTheme({
+    palette: {
+      primary: {
+        main: tokens.colors.primary,
+        dark: tokens.colors.primaryDark,
+        light: tokens.colors.primaryLight,
+        contrastText: tokens.colors.primaryContrast
+      },
+      secondary: {
+        main: tokens.colors.secondary,
+        dark: tokens.colors.secondaryDark,
+        light: tokens.colors.secondaryLight,
+        contrastText: tokens.colors.secondaryContrast
+      },
+      success: { main: tokens.colors.success },
+      warning: { main: tokens.colors.warning },
+      error: { main: tokens.colors.error },
+      info: { main: tokens.colors.info },
+      background: {
+        default: tokens.colors.background,
+        paper: tokens.colors.backgroundPaper,
+        subtle: tokens.colors.backgroundSubtle
+      },
+      border: tokens.colors.border,
+      text: {
+        primary: tokens.colors.textPrimary,
+        secondary: tokens.colors.textSecondary,
+        disabled: tokens.colors.textDisabled
+      },
+      divider: tokens.colors.divider
+    },
+    typography: {
+      fontFamily: tokens.typography.fontFamilyBase,
+      fontWeightLight: tokens.typography.fontWeightLight,
+      fontWeightRegular: tokens.typography.fontWeightRegular,
+      fontWeightMedium: tokens.typography.fontWeightMedium,
+      fontWeightBold: tokens.typography.fontWeightBold,
+      fontSize: 14
+      // MUI base, actual sizes come from tokens
+    },
+    shape: {
+      borderRadius: 8
+      // MUI uses a number; components use tokens directly
+    },
+    spacing: tokens.spacing.unit,
+    zIndex: {
+      appBar: tokens.zIndex.sticky,
+      drawer: tokens.zIndex.overlay,
+      modal: tokens.zIndex.modal,
+      snackbar: tokens.zIndex.toast,
+      tooltip: tokens.zIndex.tooltip
+    },
+    components: {
+      MuiButton: {
+        defaultProps: {
+          disableElevation: true
+        },
+        styleOverrides: {
+          root: {
+            borderRadius: tokens.components.button.borderRadius,
+            fontWeight: tokens.components.button.fontWeight,
+            letterSpacing: tokens.components.button.letterSpacing,
+            textTransform: tokens.components.button.textTransform,
+            fontSize: tokens.components.button.fontSizeMd,
+            minHeight: tokens.components.button.heightMd,
+            paddingLeft: tokens.components.button.paddingX,
+            paddingRight: tokens.components.button.paddingX,
+            paddingTop: tokens.components.button.paddingY,
+            paddingBottom: tokens.components.button.paddingY,
+            boxShadow: tokens.shadows.none,
+            transition: `all ${tokens.transitions.durationBase} ${tokens.transitions.easingDefault}`,
+            "&:hover": {
+              boxShadow: tokens.shadows.none
+            }
+          },
+          sizeSmall: {
+            fontSize: tokens.components.button.fontSizeSm,
+            minHeight: tokens.components.button.heightSm,
+            paddingLeft: tokens.components.button.paddingXSm,
+            paddingRight: tokens.components.button.paddingXSm,
+            paddingTop: tokens.components.button.paddingYSm,
+            paddingBottom: tokens.components.button.paddingYSm
+          },
+          sizeLarge: {
+            fontSize: tokens.components.button.fontSizeLg,
+            minHeight: tokens.components.button.heightLg,
+            paddingLeft: tokens.components.button.paddingXLg,
+            paddingRight: tokens.components.button.paddingXLg,
+            paddingTop: tokens.components.button.paddingYLg,
+            paddingBottom: tokens.components.button.paddingYLg
+          }
+        },
+        variants: [
+          // xlarge size
+          {
+            props: { size: "xlarge" },
+            style: {
+              fontSize: tokens.components.button.fontSizeLg,
+              minHeight: tokens.components.button.heightXl,
+              paddingLeft: tokens.components.button.paddingXXl,
+              paddingRight: tokens.components.button.paddingXXl,
+              paddingTop: tokens.components.button.paddingYXl,
+              paddingBottom: tokens.components.button.paddingYXl
+            }
+          },
+          // soft variant — base (inherit/no color)
+          {
+            props: { variant: "soft" },
+            style: {
+              backgroundColor: alpha(tokens.colors.textSecondary, 0.12),
+              color: tokens.colors.textPrimary,
+              boxShadow: tokens.shadows.none,
+              "&:hover": {
+                backgroundColor: alpha(tokens.colors.textSecondary, 0.2),
+                boxShadow: tokens.shadows.none
+              },
+              "&.Mui-disabled": {
+                backgroundColor: alpha(tokens.colors.textDisabled, 0.12),
+                color: tokens.colors.textDisabled
+              }
+            }
+          },
+          // soft variant — primary
+          {
+            props: { variant: "soft", color: "primary" },
+            style: {
+              backgroundColor: alpha(tokens.colors.primary, 0.16),
+              color: tokens.colors.primaryDark,
+              "&:hover": { backgroundColor: alpha(tokens.colors.primary, 0.24) }
+            }
+          },
+          // soft variant — secondary
+          {
+            props: { variant: "soft", color: "secondary" },
+            style: {
+              backgroundColor: alpha(tokens.colors.secondary, 0.16),
+              color: tokens.colors.secondaryDark,
+              "&:hover": { backgroundColor: alpha(tokens.colors.secondary, 0.24) }
+            }
+          },
+          // soft variant — error
+          {
+            props: { variant: "soft", color: "error" },
+            style: {
+              backgroundColor: alpha(tokens.colors.error, 0.16),
+              color: darken(tokens.colors.error, 0.2),
+              "&:hover": { backgroundColor: alpha(tokens.colors.error, 0.24) }
+            }
+          },
+          // soft variant — warning
+          {
+            props: { variant: "soft", color: "warning" },
+            style: {
+              backgroundColor: alpha(tokens.colors.warning, 0.16),
+              color: darken(tokens.colors.warning, 0.2),
+              "&:hover": { backgroundColor: alpha(tokens.colors.warning, 0.24) }
+            }
+          },
+          // soft variant — success
+          {
+            props: { variant: "soft", color: "success" },
+            style: {
+              backgroundColor: alpha(tokens.colors.success, 0.16),
+              color: darken(tokens.colors.success, 0.2),
+              "&:hover": { backgroundColor: alpha(tokens.colors.success, 0.24) }
+            }
+          },
+          // soft variant — info
+          {
+            props: { variant: "soft", color: "info" },
+            style: {
+              backgroundColor: alpha(tokens.colors.info, 0.16),
+              color: darken(tokens.colors.info, 0.2),
+              "&:hover": { backgroundColor: alpha(tokens.colors.info, 0.24) }
+            }
+          }
+        ]
+      },
+      MuiTextField: {
+        styleOverrides: {
+          root: {
+            "& .MuiOutlinedInput-root": {
+              borderRadius: tokens.components.input.borderRadius,
+              backgroundColor: tokens.components.input.background,
+              minHeight: tokens.components.input.minHeight,
+              "& fieldset": {
+                borderWidth: tokens.components.input.borderWidth,
+                borderColor: tokens.colors.border
+              },
+              "&:hover fieldset": {
+                borderColor: tokens.colors.primary
+              },
+              "&.Mui-focused fieldset": {
+                borderWidth: tokens.components.input.borderWidthFocus,
+                borderColor: tokens.colors.borderFocus
+              },
+              "&.Mui-disabled": {
+                backgroundColor: tokens.components.input.backgroundDisabled
+              }
+            },
+            "& .MuiInputLabel-root": {
+              fontSize: tokens.components.input.labelFontSize
+            },
+            "& .MuiFormHelperText-root": {
+              fontSize: tokens.components.input.helperFontSize
+            }
+          }
+        }
+      },
+      MuiCard: {
+        styleOverrides: {
+          root: {
+            borderRadius: tokens.components.card.borderRadius,
+            backgroundColor: tokens.components.card.background,
+            boxShadow: tokens.shadows.sm,
+            border: `${tokens.components.card.borderWidth} solid ${tokens.colors.divider}`
+          }
+        }
+      },
+      MuiCardContent: {
+        styleOverrides: {
+          root: {
+            padding: tokens.components.card.padding,
+            "&:last-child": {
+              paddingBottom: tokens.components.card.padding
+            }
+          }
+        }
+      },
+      MuiChip: {
+        styleOverrides: {
+          root: {
+            height: tokens.components.chip.height,
+            borderRadius: tokens.components.chip.borderRadius,
+            fontSize: tokens.components.chip.fontSize,
+            fontWeight: tokens.components.chip.fontWeight,
+            paddingLeft: tokens.components.chip.paddingX,
+            paddingRight: tokens.components.chip.paddingX
+          },
+          sizeSmall: {
+            height: tokens.components.chip.heightSm
+          },
+          icon: {
+            width: tokens.components.chip.iconSize,
+            height: tokens.components.chip.iconSize
+          }
+        },
+        variants: [
+          // ── soft — base (default color) ───────────────────────────────────
+          {
+            props: { variant: "soft" },
+            style: {
+              backgroundColor: alpha(tokens.colors.textSecondary, 0.12),
+              color: tokens.colors.textPrimary,
+              "&:hover": { backgroundColor: alpha(tokens.colors.textSecondary, 0.2) },
+              "&.Mui-disabled": { opacity: 0.6 }
+            }
+          },
+          { props: { variant: "soft", color: "primary" }, style: { backgroundColor: alpha(tokens.colors.primary, 0.16), color: darken(tokens.colors.primary, 0.2), "&:hover": { backgroundColor: alpha(tokens.colors.primary, 0.24) } } },
+          { props: { variant: "soft", color: "secondary" }, style: { backgroundColor: alpha(tokens.colors.secondary, 0.16), color: darken(tokens.colors.secondary, 0.2), "&:hover": { backgroundColor: alpha(tokens.colors.secondary, 0.24) } } },
+          { props: { variant: "soft", color: "info" }, style: { backgroundColor: alpha(tokens.colors.info, 0.16), color: darken(tokens.colors.info, 0.2), "&:hover": { backgroundColor: alpha(tokens.colors.info, 0.24) } } },
+          { props: { variant: "soft", color: "success" }, style: { backgroundColor: alpha(tokens.colors.success, 0.16), color: darken(tokens.colors.success, 0.2), "&:hover": { backgroundColor: alpha(tokens.colors.success, 0.24) } } },
+          { props: { variant: "soft", color: "warning" }, style: { backgroundColor: alpha(tokens.colors.warning, 0.16), color: darken(tokens.colors.warning, 0.2), "&:hover": { backgroundColor: alpha(tokens.colors.warning, 0.24) } } },
+          { props: { variant: "soft", color: "error" }, style: { backgroundColor: alpha(tokens.colors.error, 0.16), color: darken(tokens.colors.error, 0.2), "&:hover": { backgroundColor: alpha(tokens.colors.error, 0.24) } } },
+          // ── black ─────────────────────────────────────────────────────────
+          { props: { variant: "filled", color: "black" }, style: { backgroundColor: tokens.colors.textPrimary, color: tokens.colors.backgroundPaper, "&:hover": { backgroundColor: darken(tokens.colors.textPrimary, 0.1) } } },
+          { props: { variant: "outlined", color: "black" }, style: { borderColor: tokens.colors.textPrimary, color: tokens.colors.textPrimary } },
+          { props: { variant: "soft", color: "black" }, style: { backgroundColor: alpha(tokens.colors.textPrimary, 0.12), color: tokens.colors.textPrimary, "&:hover": { backgroundColor: alpha(tokens.colors.textPrimary, 0.2) } } },
+          // ── white ─────────────────────────────────────────────────────────
+          { props: { variant: "filled", color: "white" }, style: { backgroundColor: tokens.colors.backgroundPaper, color: tokens.colors.textPrimary, border: `1px solid ${tokens.colors.divider}`, "&:hover": { backgroundColor: tokens.colors.backgroundSubtle } } },
+          { props: { variant: "outlined", color: "white" }, style: { borderColor: alpha(tokens.colors.backgroundPaper, 0.32), color: tokens.colors.backgroundPaper } },
+          { props: { variant: "soft", color: "white" }, style: { backgroundColor: alpha(tokens.colors.backgroundPaper, 0.16), color: tokens.colors.backgroundPaper, "&:hover": { backgroundColor: alpha(tokens.colors.backgroundPaper, 0.24) } } }
+        ]
+      },
+      MuiBadge: {
+        styleOverrides: {
+          badge: {
+            height: tokens.components.badge.height,
+            minWidth: tokens.components.badge.minWidth,
+            borderRadius: tokens.components.badge.borderRadius,
+            fontSize: tokens.components.badge.fontSize,
+            fontWeight: tokens.components.badge.fontWeight,
+            padding: `0 ${tokens.components.badge.paddingX}`
+          }
+        }
+      },
+      MuiTooltip: {
+        styleOverrides: {
+          tooltip: {
+            backgroundColor: tokens.components.tooltip.background,
+            color: tokens.components.tooltip.color,
+            borderRadius: tokens.components.tooltip.borderRadius,
+            fontSize: tokens.components.tooltip.fontSize,
+            padding: `${tokens.components.tooltip.paddingY} ${tokens.components.tooltip.paddingX}`,
+            maxWidth: tokens.components.tooltip.maxWidth
+          }
+        }
+      },
+      MuiDialog: {
+        styleOverrides: {
+          paper: {
+            borderRadius: tokens.components.dialog.borderRadius,
+            backgroundColor: tokens.components.dialog.background,
+            maxWidth: tokens.components.dialog.maxWidth
+          }
+        }
+      },
+      MuiDialogContent: {
+        styleOverrides: {
+          root: {
+            padding: tokens.components.dialog.padding
+          }
+        }
+      },
+      MuiTableCell: {
+        styleOverrides: {
+          root: {
+            paddingLeft: tokens.components.table.cellPaddingX,
+            paddingRight: tokens.components.table.cellPaddingX,
+            paddingTop: tokens.components.table.cellPaddingY,
+            paddingBottom: tokens.components.table.cellPaddingY,
+            borderBottom: `${tokens.components.table.borderWidth} solid ${tokens.components.table.borderColor}`
+          },
+          head: {
+            fontWeight: tokens.components.table.headerFontWeight,
+            backgroundColor: tokens.components.table.headerBackground
+          }
+        }
+      },
+      MuiTableRow: {
+        styleOverrides: {
+          root: {
+            "&:hover": {
+              backgroundColor: tokens.components.table.rowHoverBackground
+            }
+          }
+        }
+      },
+      MuiAvatar: {
+        styleOverrides: {
+          root: {
+            width: tokens.components.avatar.sizeMd,
+            height: tokens.components.avatar.sizeMd,
+            borderRadius: tokens.components.avatar.borderRadius,
+            fontSize: tokens.typography.fontSizeLg,
+            fontWeight: tokens.typography.fontWeightSemiBold
+          },
+          rounded: {
+            borderRadius: tokens.components.avatar.borderRadiusRounded
+          }
+        }
+      },
+      MuiAvatarGroup: {
+        styleOverrides: {
+          root: {
+            "& .MuiAvatar-root": {
+              marginLeft: tokens.components.avatar.groupSpacing,
+              border: `${tokens.components.avatar.groupBorderWidth} solid ${tokens.colors.backgroundPaper}`,
+              boxSizing: "content-box"
+            }
+          }
+        }
+      },
+      MuiDivider: {
+        styleOverrides: {
+          root: {
+            borderColor: tokens.components.divider.color,
+            borderBottomWidth: tokens.components.divider.thickness
+          }
+        }
+      },
+      MuiAlert: {
+        styleOverrides: {
+          root: {
+            alignItems: "center",
+            borderRadius: tokens.components.alert.borderRadius,
+            padding: tokens.components.alert.padding,
+            fontSize: tokens.typography.fontSizeMd
+          },
+          // ── Standard ──────────────────────────────────────────────────────
+          standardInfo: {
+            backgroundColor: alpha(tokens.colors.info, 0.16),
+            color: darken(tokens.colors.info, 0.4),
+            "& .MuiAlert-icon": { color: tokens.colors.info }
+          },
+          standardSuccess: {
+            backgroundColor: alpha(tokens.colors.success, 0.16),
+            color: darken(tokens.colors.success, 0.4),
+            "& .MuiAlert-icon": { color: tokens.colors.success }
+          },
+          standardWarning: {
+            backgroundColor: alpha(tokens.colors.warning, 0.16),
+            color: darken(tokens.colors.warning, 0.4),
+            "& .MuiAlert-icon": { color: tokens.colors.warning }
+          },
+          standardError: {
+            backgroundColor: alpha(tokens.colors.error, 0.16),
+            color: darken(tokens.colors.error, 0.4),
+            "& .MuiAlert-icon": { color: tokens.colors.error }
+          },
+          // ── Filled ────────────────────────────────────────────────────────
+          filledInfo: {
+            backgroundColor: tokens.colors.info,
+            color: tokens.colors.primaryContrast,
+            fontWeight: tokens.typography.fontWeightMedium
+          },
+          filledSuccess: {
+            backgroundColor: tokens.colors.success,
+            color: tokens.colors.primaryContrast,
+            fontWeight: tokens.typography.fontWeightMedium
+          },
+          filledWarning: {
+            backgroundColor: tokens.colors.warning,
+            // Warning is light enough to need dark text
+            color: tokens.colors.textPrimary,
+            fontWeight: tokens.typography.fontWeightMedium,
+            "& .MuiAlert-icon": { color: tokens.colors.textPrimary }
+          },
+          filledError: {
+            backgroundColor: tokens.colors.error,
+            color: tokens.colors.primaryContrast,
+            fontWeight: tokens.typography.fontWeightMedium
+          },
+          // ── Outlined ──────────────────────────────────────────────────────
+          outlinedInfo: {
+            backgroundColor: alpha(tokens.colors.info, 0.08),
+            color: darken(tokens.colors.info, 0.2),
+            borderColor: alpha(tokens.colors.info, 0.32),
+            "& .MuiAlert-icon": { color: tokens.colors.info }
+          },
+          outlinedSuccess: {
+            backgroundColor: alpha(tokens.colors.success, 0.08),
+            color: darken(tokens.colors.success, 0.2),
+            borderColor: alpha(tokens.colors.success, 0.32),
+            "& .MuiAlert-icon": { color: tokens.colors.success }
+          },
+          outlinedWarning: {
+            backgroundColor: alpha(tokens.colors.warning, 0.08),
+            color: darken(tokens.colors.warning, 0.2),
+            borderColor: alpha(tokens.colors.warning, 0.32),
+            "& .MuiAlert-icon": { color: tokens.colors.warning }
+          },
+          outlinedError: {
+            backgroundColor: alpha(tokens.colors.error, 0.08),
+            color: darken(tokens.colors.error, 0.2),
+            borderColor: alpha(tokens.colors.error, 0.32),
+            "& .MuiAlert-icon": { color: tokens.colors.error }
+          },
+          icon: {
+            opacity: 1,
+            padding: 0
+          },
+          message: {
+            padding: "4px 0"
+          }
+        }
+      },
+      MuiAlertTitle: {
+        styleOverrides: {
+          root: {
+            fontWeight: tokens.typography.fontWeightSemiBold,
+            marginBottom: "4px"
+          }
+        }
+      },
+      MuiAccordion: {
+        styleOverrides: {
+          root: {
+            borderRadius: tokens.components.accordion.borderRadius,
+            boxShadow: tokens.shadows.md,
+            marginBottom: tokens.spacing.sm,
+            "&:before": { display: "none" },
+            "&.Mui-expanded": { margin: `0 0 ${tokens.spacing.sm}` },
+            "&:first-of-type": { borderRadius: tokens.components.accordion.borderRadius },
+            "&:last-of-type": { borderRadius: tokens.components.accordion.borderRadius }
+          }
+        }
+      },
+      MuiAccordionSummary: {
+        styleOverrides: {
+          root: {
+            padding: `${tokens.components.accordion.summaryPaddingY} 8px ${tokens.components.accordion.summaryPaddingY} ${tokens.components.accordion.summaryPaddingX}`,
+            fontWeight: tokens.components.accordion.summaryFontWeight,
+            minHeight: "auto",
+            "&.Mui-expanded": { minHeight: "auto" }
+          },
+          content: {
+            margin: 0,
+            "&.Mui-expanded": { margin: 0 }
+          },
+          expandIconWrapper: {
+            color: tokens.colors.textSecondary
+          }
+        }
+      },
+      MuiAccordionDetails: {
+        styleOverrides: {
+          root: {
+            padding: `0 ${tokens.components.accordion.detailsPaddingX} ${tokens.components.accordion.detailsPaddingBottom}`
+          }
+        }
+      },
+      MuiToggleButton: {
+        styleOverrides: {
+          root: {
+            borderRadius: tokens.components.toggleButton.borderRadius,
+            borderWidth: tokens.components.toggleButton.borderWidth,
+            borderColor: tokens.colors.border,
+            fontWeight: tokens.components.toggleButton.fontWeight,
+            paddingLeft: tokens.components.toggleButton.paddingXMd,
+            paddingRight: tokens.components.toggleButton.paddingXMd,
+            paddingTop: tokens.components.toggleButton.paddingYMd,
+            paddingBottom: tokens.components.toggleButton.paddingYMd,
+            textTransform: "none",
+            transition: `all ${tokens.transitions.durationBase} ${tokens.transitions.easingDefault}`,
+            "&.Mui-selected": {
+              backgroundColor: alpha(tokens.colors.textPrimary, 0.08),
+              color: tokens.colors.textPrimary,
+              "&:hover": {
+                backgroundColor: alpha(tokens.colors.textPrimary, 0.16)
+              }
+            },
+            "&.Mui-disabled": {
+              borderColor: tokens.colors.border
+            }
+          },
+          sizeSmall: {
+            paddingLeft: tokens.components.toggleButton.paddingXSm,
+            paddingRight: tokens.components.toggleButton.paddingXSm,
+            paddingTop: tokens.components.toggleButton.paddingYSm,
+            paddingBottom: tokens.components.toggleButton.paddingYSm
+          },
+          sizeLarge: {
+            paddingLeft: tokens.components.toggleButton.paddingXLg,
+            paddingRight: tokens.components.toggleButton.paddingXLg,
+            paddingTop: tokens.components.toggleButton.paddingYLg,
+            paddingBottom: tokens.components.toggleButton.paddingYLg
+          }
+        },
+        variants: [
+          { props: { color: "primary" }, style: { "&.Mui-selected": { backgroundColor: alpha(tokens.colors.primary, 0.16), color: tokens.colors.primary, "&:hover": { backgroundColor: alpha(tokens.colors.primary, 0.24) } } } },
+          { props: { color: "secondary" }, style: { "&.Mui-selected": { backgroundColor: alpha(tokens.colors.secondary, 0.16), color: tokens.colors.secondary, "&:hover": { backgroundColor: alpha(tokens.colors.secondary, 0.24) } } } },
+          { props: { color: "info" }, style: { "&.Mui-selected": { backgroundColor: alpha(tokens.colors.info, 0.16), color: tokens.colors.info, "&:hover": { backgroundColor: alpha(tokens.colors.info, 0.24) } } } },
+          { props: { color: "success" }, style: { "&.Mui-selected": { backgroundColor: alpha(tokens.colors.success, 0.16), color: tokens.colors.success, "&:hover": { backgroundColor: alpha(tokens.colors.success, 0.24) } } } },
+          { props: { color: "warning" }, style: { "&.Mui-selected": { backgroundColor: alpha(tokens.colors.warning, 0.16), color: tokens.colors.warning, "&:hover": { backgroundColor: alpha(tokens.colors.warning, 0.24) } } } },
+          { props: { color: "error" }, style: { "&.Mui-selected": { backgroundColor: alpha(tokens.colors.error, 0.16), color: tokens.colors.error, "&:hover": { backgroundColor: alpha(tokens.colors.error, 0.24) } } } }
+        ]
+      },
+      MuiToggleButtonGroup: {
+        styleOverrides: {
+          root: {
+            borderRadius: tokens.components.toggleButton.borderRadius
+          },
+          grouped: {
+            "&:not(:first-of-type)": {
+              borderColor: tokens.colors.border
+            }
+          }
+        }
+      },
+      MuiPaper: {
+        styleOverrides: {
+          root: {
+            backgroundImage: "none"
+            // Remove MUI's default gradient on dark mode
+          },
+          elevation1: { boxShadow: tokens.shadows.sm },
+          elevation2: { boxShadow: tokens.shadows.md },
+          elevation3: { boxShadow: tokens.shadows.lg }
+        }
+      }
+    },
+    // Attach the raw tokens to the theme so any component can access
+    // values not already covered by MUI's built-in theme shape.
+    // @ts-ignore — augmented in src/types/mui.d.ts
+    tokens
+  });
+}
+
+// src/ThemeProvider.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function ToolkitThemeProvider({
+  theme,
+  children,
+  injectCssBaseline = true
+}) {
+  const themeName = theme ?? resolveThemeName();
+  const tokens = getThemeTokens(themeName);
+  const muiTheme = createMuiTheme(tokens);
+  return /* @__PURE__ */ jsxs(MuiThemeProvider, { theme: muiTheme, children: [
+    injectCssBaseline && /* @__PURE__ */ jsx(CssBaseline, {}),
+    children
+  ] });
+}
+
+// src/components/Button/Button.tsx
+import {
+  Button as MuiButton,
+  CircularProgress
+} from "@mui/material";
+import { styled } from "@mui/material/styles";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var StyledButton = styled(MuiButton)(({ theme }) => ({
+  // Gap between icon and label — not surfaced by MUI's styleOverrides
+  "& .MuiButton-startIcon": {
+    marginRight: theme.tokens.components.button.iconGap
+  },
+  "& .MuiButton-endIcon": {
+    marginLeft: theme.tokens.components.button.iconGap
+  }
+}));
+function Button({ loading, disabled, children, ...props }) {
+  const baseLabel = props["aria-label"] ?? (typeof children === "string" ? children : void 0);
+  const ariaLabel = loading && baseLabel ? `${baseLabel}, loading` : props["aria-label"];
+  return /* @__PURE__ */ jsx2(
+    StyledButton,
+    {
+      ...props,
+      disabled: disabled || loading,
+      "aria-busy": loading || void 0,
+      "aria-label": ariaLabel,
+      startIcon: loading ? /* @__PURE__ */ jsx2(CircularProgress, { size: 16, color: "inherit" }) : props.startIcon,
+      children
+    }
+  );
+}
+Button.displayName = "ToolkitButton";
+
+// src/components/Chip/Chip.tsx
+import { Chip as MuiChip, SvgIcon } from "@mui/material";
+import { jsx as jsx3 } from "react/jsx-runtime";
+function CircleXIcon(props) {
+  return /* @__PURE__ */ jsx3(SvgIcon, { ...props, viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx3(
+    "path",
+    {
+      fill: "currentColor",
+      fillRule: "evenodd",
+      d: "M22 12c0 5.523-4.477 10-10 10S2 17.523 2 12S6.477 2 12 2s10 4.477 10 10M8.97 8.97a.75.75 0 0 1 1.06 0L12 10.94l1.97-1.97a.75.75 0 0 1 1.06 1.06L13.06 12l1.97 1.97a.75.75 0 0 1-1.06 1.06L12 13.06l-1.97 1.97a.75.75 0 0 1-1.06-1.06L10.94 12l-1.97-1.97a.75.75 0 0 1 0-1.06",
+      clipRule: "evenodd"
+    }
+  ) });
+}
+function Chip({ deleteIcon, onDelete, ...props }) {
+  return /* @__PURE__ */ jsx3(
+    MuiChip,
+    {
+      ...props,
+      onDelete,
+      deleteIcon: onDelete ? deleteIcon ?? /* @__PURE__ */ jsx3(CircleXIcon, {}) : void 0
+    }
+  );
+}
+Chip.displayName = "ToolkitChip";
+
+// src/components/Card/Card.tsx
+import {
+  Card as MuiCard,
+  CardContent as MuiCardContent,
+  CardHeader as MuiCardHeader,
+  CardActions as MuiCardActions
+} from "@mui/material";
+import { styled as styled2 } from "@mui/material/styles";
+import { jsx as jsx4 } from "react/jsx-runtime";
+var StyledCard = styled2(MuiCard, {
+  shouldForwardProp: (prop) => prop !== "compact"
+})(({ theme, compact }) => ({
+  padding: compact ? theme.tokens.components.card.paddingCompact : theme.tokens.components.card.padding,
+  // Override MUI CardContent's own padding since we set it at the Card level
+  "& .MuiCardContent-root": {
+    padding: 0,
+    "&:last-child": { paddingBottom: 0 }
+  },
+  "&:hover": {
+    boxShadow: theme.tokens.shadows.md,
+    transition: `box-shadow ${theme.tokens.transitions.durationBase} ${theme.tokens.transitions.easingDefault}`
+  }
+}));
+function Card({ compact, children, ...props }) {
+  return /* @__PURE__ */ jsx4(StyledCard, { compact, ...props, children });
+}
+var CardContent = MuiCardContent;
+var CardHeader = MuiCardHeader;
+var CardActions = MuiCardActions;
+Card.displayName = "ToolkitCard";
+
+// src/components/TextField/TextField.tsx
+import {
+  TextField as MuiTextField
+} from "@mui/material";
+import { styled as styled3 } from "@mui/material/styles";
+import { jsx as jsx5 } from "react/jsx-runtime";
+var StyledTextField = styled3(MuiTextField)(({ theme }) => ({
+  // Transition on the entire field when focus changes
+  "& .MuiOutlinedInput-root": {
+    transition: `box-shadow ${theme.tokens.transitions.durationFast} ${theme.tokens.transitions.easingDefault}`,
+    "&.Mui-focused": {
+      boxShadow: theme.tokens.shadows.xs
+    }
+  }
+}));
+function TextField({ error, FormHelperTextProps, inputProps, label, ...props }) {
+  if (process.env.NODE_ENV !== "production") {
+    if (!label && !props["aria-label"] && !props["aria-labelledby"] && !inputProps?.["aria-label"] && !inputProps?.["aria-labelledby"]) {
+      console.warn("[ToolkitTextField] Missing accessible label. Provide `label`, `aria-label`, or `aria-labelledby`.");
+    }
+  }
+  return /* @__PURE__ */ jsx5(
+    StyledTextField,
+    {
+      fullWidth: true,
+      variant: "outlined",
+      label,
+      error,
+      inputProps,
+      FormHelperTextProps: error ? { role: "alert", ...FormHelperTextProps } : FormHelperTextProps,
+      ...props
+    }
+  );
+}
+TextField.displayName = "ToolkitTextField";
+
+// src/components/Alert/Alert.tsx
+import {
+  Alert as MuiAlert,
+  AlertTitle as MuiAlertTitle,
+  SvgIcon as SvgIcon2
+} from "@mui/material";
+import { jsx as jsx6 } from "react/jsx-runtime";
+var InfoIcon = /* @__PURE__ */ jsx6(SvgIcon2, { viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx6("path", { fill: "currentColor", fillRule: "evenodd", d: "M22 12c0 5.523-4.477 10-10 10S2 17.523 2 12S6.477 2 12 2s10 4.477 10 10m-10 5.75a.75.75 0 0 0 .75-.75v-6a.75.75 0 0 0-1.5 0v6c0 .414.336.75.75.75M12 7a1 1 0 1 1 0 2a1 1 0 0 1 0-2", clipRule: "evenodd" }) });
+var SuccessIcon = /* @__PURE__ */ jsx6(SvgIcon2, { viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx6("path", { fill: "currentColor", fillRule: "evenodd", d: "M22 12c0 5.523-4.477 10-10 10S2 17.523 2 12S6.477 2 12 2s10 4.477 10 10m-5.97-3.03a.75.75 0 0 1 0 1.06l-5 5a.75.75 0 0 1-1.06 0l-2-2a.75.75 0 1 1 1.06-1.06l1.47 1.47l2.235-2.235L14.97 8.97a.75.75 0 0 1 1.06 0", clipRule: "evenodd" }) });
+var WarningIcon = /* @__PURE__ */ jsx6(SvgIcon2, { viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx6("path", { fill: "currentColor", fillRule: "evenodd", d: "M5.312 10.762C8.23 5.587 9.689 3 12 3c2.31 0 3.77 2.587 6.688 7.762l.364.644c2.425 4.3 3.638 6.45 2.542 8.022S17.786 21 12.364 21h-.728c-5.422 0-8.134 0-9.23-1.572s.117-3.722 2.542-8.022zM12 7.25a.75.75 0 0 1 .75.75v5a.75.75 0 0 1-1.5 0V8a.75.75 0 0 1 .75-.75M12 17a1 1 0 1 0 0-2a1 1 0 0 0 0 2", clipRule: "evenodd" }) });
+var ErrorIcon = /* @__PURE__ */ jsx6(SvgIcon2, { viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx6("path", { fill: "currentColor", fillRule: "evenodd", d: "M7.843 3.802C9.872 2.601 10.886 2 12 2c1.114 0 2.128.6 4.157 1.802l.686.406c2.029 1.202 3.043 1.803 3.6 2.792c.557.99.557 2.19.557 4.594v.812c0 2.403 0 3.605-.557 4.594c-.557.99-1.571 1.59-3.6 2.791l-.686.407C14.128 21.399 13.114 22 12 22c-1.114 0-2.128-.6-4.157-1.802l-.686-.407c-2.029-1.2-3.043-1.802-3.6-2.791C3 16.01 3 14.81 3 12.406v-.812C3 9.19 3 7.989 3.557 7c.557-.99 1.571-1.59 3.6-2.792zM13 16a1 1 0 1 1-2 0a1 1 0 0 1 2 0m-1-9.75a.75.75 0 0 1 .75.75v6a.75.75 0 0 1-1.5 0V7a.75.75 0 0 1 .75-.75", clipRule: "evenodd" }) });
+var defaultIconMapping = {
+  info: InfoIcon,
+  success: SuccessIcon,
+  warning: WarningIcon,
+  error: ErrorIcon
+};
+function Alert({ iconMapping, ...props }) {
+  return /* @__PURE__ */ jsx6(MuiAlert, { iconMapping: { ...defaultIconMapping, ...iconMapping }, ...props });
+}
+function AlertTitle(props) {
+  return /* @__PURE__ */ jsx6(MuiAlertTitle, { ...props });
+}
+Alert.displayName = "ToolkitAlert";
+AlertTitle.displayName = "ToolkitAlertTitle";
+
+// src/components/Accordion/Accordion.tsx
+import {
+  Accordion as MuiAccordion,
+  AccordionSummary as MuiAccordionSummary,
+  AccordionDetails as MuiAccordionDetails
+} from "@mui/material";
+import { styled as styled4 } from "@mui/material/styles";
+import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
+import { jsx as jsx7 } from "react/jsx-runtime";
+var StandaloneAccordion = styled4(MuiAccordion)(({ theme }) => ({
+  borderRadius: `${theme.tokens.components.accordion.standaloneRadius} !important`,
+  backgroundColor: theme.tokens.components.accordion.standaloneBackground,
+  boxShadow: "none",
+  marginBottom: theme.spacing(1),
+  "&.Mui-expanded": {
+    backgroundColor: theme.tokens.components.accordion.standaloneBackgroundExpanded,
+    margin: `0 0 ${theme.spacing(1)}`
+  },
+  "& .MuiAccordionSummary-root": {
+    padding: `${theme.tokens.components.accordion.summaryPaddingY} ${theme.tokens.components.accordion.summaryPaddingX}`
+  },
+  "& .MuiAccordionDetails-root": {
+    padding: `0 ${theme.tokens.components.accordion.detailsPaddingX} ${theme.tokens.components.accordion.detailsPaddingBottom}`
+  }
+}));
+function Accordion(props) {
+  return /* @__PURE__ */ jsx7(MuiAccordion, { ...props });
+}
+function AccordionSummary({ expandIcon, ...props }) {
+  return /* @__PURE__ */ jsx7(MuiAccordionSummary, { expandIcon: expandIcon ?? /* @__PURE__ */ jsx7(ExpandMoreIcon, {}), ...props });
+}
+function AccordionDetails(props) {
+  return /* @__PURE__ */ jsx7(MuiAccordionDetails, { ...props });
+}
+Accordion.displayName = "ToolkitAccordion";
+AccordionSummary.displayName = "ToolkitAccordionSummary";
+AccordionDetails.displayName = "ToolkitAccordionDetails";
+StandaloneAccordion.displayName = "ToolkitStandaloneAccordion";
+
+// src/components/Avatar/Avatar.tsx
+import MuiAvatar from "@mui/material/Avatar";
+import { styled as styled5 } from "@mui/material/styles";
+import { default as default2 } from "@mui/material/AvatarGroup";
+import { jsx as jsx8 } from "react/jsx-runtime";
+function getDimension(avatar, size) {
+  const map = {
+    xs: avatar.sizeXs,
+    sm: avatar.sizeSm,
+    md: avatar.sizeMd,
+    lg: avatar.sizeLg,
+    xl: avatar.sizeXl,
+    xxl: avatar.sizeXxl
+  };
+  return map[size];
+}
+var StyledAvatar = styled5(MuiAvatar, {
+  shouldForwardProp: (prop) => prop !== "size"
+})(({ theme, size = "md" }) => {
+  const dimension = getDimension(theme.tokens.components.avatar, size);
+  return {
+    width: dimension,
+    height: dimension
+  };
+});
+function Avatar({ size = "md", ...props }) {
+  return /* @__PURE__ */ jsx8(StyledAvatar, { size, ...props });
+}
+
+// src/components/ToggleButton/ToggleButton.tsx
+import {
+  ToggleButton as MuiToggleButton,
+  ToggleButtonGroup as MuiToggleButtonGroup
+} from "@mui/material";
+import { jsx as jsx9 } from "react/jsx-runtime";
+function ToggleButton(props) {
+  return /* @__PURE__ */ jsx9(MuiToggleButton, { ...props });
+}
+ToggleButton.displayName = "ToolkitToggleButton";
+function ToggleButtonGroup(props) {
+  return /* @__PURE__ */ jsx9(MuiToggleButtonGroup, { ...props });
+}
+ToggleButtonGroup.displayName = "ToolkitToggleButtonGroup";
+
+// src/components/DatePicker/DatePicker.tsx
+import { useState } from "react";
+import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
+import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
+import {
+  DatePicker as MuiDatePicker
+} from "@mui/x-date-pickers/DatePicker";
+import {
+  DesktopDatePicker as MuiDesktopDatePicker
+} from "@mui/x-date-pickers/DesktopDatePicker";
+import {
+  MobileDatePicker as MuiMobileDatePicker
+} from "@mui/x-date-pickers/MobileDatePicker";
+import {
+  DateField as MuiDateField
+} from "@mui/x-date-pickers/DateField";
+import {
+  StaticDatePicker as MuiStaticDatePicker
+} from "@mui/x-date-pickers/StaticDatePicker";
+import {
+  TimePicker as MuiTimePicker
+} from "@mui/x-date-pickers/TimePicker";
+import {
+  DesktopTimePicker as MuiDesktopTimePicker
+} from "@mui/x-date-pickers/DesktopTimePicker";
+import {
+  MobileTimePicker as MuiMobileTimePicker
+} from "@mui/x-date-pickers/MobileTimePicker";
+import {
+  TimeField as MuiTimeField
+} from "@mui/x-date-pickers/TimeField";
+import {
+  StaticTimePicker as MuiStaticTimePicker
+} from "@mui/x-date-pickers/StaticTimePicker";
+import {
+  DateTimePicker as MuiDateTimePicker
+} from "@mui/x-date-pickers/DateTimePicker";
+import {
+  DesktopDateTimePicker as MuiDesktopDateTimePicker
+} from "@mui/x-date-pickers/DesktopDateTimePicker";
+import {
+  MobileDateTimePicker as MuiMobileDateTimePicker
+} from "@mui/x-date-pickers/MobileDateTimePicker";
+import {
+  DateTimeField as MuiDateTimeField
+} from "@mui/x-date-pickers/DateTimeField";
+import {
+  StaticDateTimePicker as MuiStaticDateTimePicker
+} from "@mui/x-date-pickers/StaticDateTimePicker";
+import {
+  DateCalendar as MuiDateCalendar
+} from "@mui/x-date-pickers/DateCalendar";
+import Dialog from "@mui/material/Dialog";
+import DialogContent from "@mui/material/DialogContent";
+import DialogActions from "@mui/material/DialogActions";
+import Button2 from "@mui/material/Button";
+import Box from "@mui/material/Box";
+import TextField2 from "@mui/material/TextField";
+import { styled as styled6 } from "@mui/material/styles";
+import { Fragment, jsx as jsx10, jsxs as jsxs2 } from "react/jsx-runtime";
+function DateLocalizationProvider({ children }) {
+  return /* @__PURE__ */ jsx10(LocalizationProvider, { dateAdapter: AdapterDayjs, children });
+}
+DateLocalizationProvider.displayName = "ToolkitDateLocalizationProvider";
+function DatePicker(props) {
+  return /* @__PURE__ */ jsx10(MuiDatePicker, { ...props });
+}
+DatePicker.displayName = "ToolkitDatePicker";
+function DesktopDatePicker(props) {
+  return /* @__PURE__ */ jsx10(MuiDesktopDatePicker, { ...props });
+}
+DesktopDatePicker.displayName = "ToolkitDesktopDatePicker";
+function MobileDatePicker(props) {
+  return /* @__PURE__ */ jsx10(MuiMobileDatePicker, { ...props });
+}
+MobileDatePicker.displayName = "ToolkitMobileDatePicker";
+function DateField(props) {
+  return /* @__PURE__ */ jsx10(MuiDateField, { ...props });
+}
+DateField.displayName = "ToolkitDateField";
+function StaticDatePicker(props) {
+  return /* @__PURE__ */ jsx10(MuiStaticDatePicker, { ...props });
+}
+StaticDatePicker.displayName = "ToolkitStaticDatePicker";
+function TimePicker(props) {
+  return /* @__PURE__ */ jsx10(MuiTimePicker, { ...props });
+}
+TimePicker.displayName = "ToolkitTimePicker";
+function DesktopTimePicker(props) {
+  return /* @__PURE__ */ jsx10(MuiDesktopTimePicker, { ...props });
+}
+DesktopTimePicker.displayName = "ToolkitDesktopTimePicker";
+function MobileTimePicker(props) {
+  return /* @__PURE__ */ jsx10(MuiMobileTimePicker, { ...props });
+}
+MobileTimePicker.displayName = "ToolkitMobileTimePicker";
+function TimeField(props) {
+  return /* @__PURE__ */ jsx10(MuiTimeField, { ...props });
+}
+TimeField.displayName = "ToolkitTimeField";
+function StaticTimePicker(props) {
+  return /* @__PURE__ */ jsx10(MuiStaticTimePicker, { ...props });
+}
+StaticTimePicker.displayName = "ToolkitStaticTimePicker";
+function DateTimePicker(props) {
+  return /* @__PURE__ */ jsx10(MuiDateTimePicker, { ...props });
+}
+DateTimePicker.displayName = "ToolkitDateTimePicker";
+function DesktopDateTimePicker(props) {
+  return /* @__PURE__ */ jsx10(MuiDesktopDateTimePicker, { ...props });
+}
+DesktopDateTimePicker.displayName = "ToolkitDesktopDateTimePicker";
+function MobileDateTimePicker(props) {
+  return /* @__PURE__ */ jsx10(MuiMobileDateTimePicker, { ...props });
+}
+MobileDateTimePicker.displayName = "ToolkitMobileDateTimePicker";
+function DateTimeField(props) {
+  return /* @__PURE__ */ jsx10(MuiDateTimeField, { ...props });
+}
+DateTimeField.displayName = "ToolkitDateTimeField";
+function StaticDateTimePicker(props) {
+  return /* @__PURE__ */ jsx10(MuiStaticDateTimePicker, { ...props });
+}
+StaticDateTimePicker.displayName = "ToolkitStaticDateTimePicker";
+function DateCalendar(props) {
+  return /* @__PURE__ */ jsx10(MuiDateCalendar, { ...props });
+}
+DateCalendar.displayName = "ToolkitDateCalendar";
+var RangeRow = styled6(Box)(({ theme }) => ({
+  display: "flex",
+  gap: theme.spacing(2),
+  alignItems: "center"
+}));
+function DateRangePickerInput({
+  value,
+  onChange,
+  startLabel = "Start date",
+  endLabel = "End date",
+  buttonLabel = "Click me!"
+}) {
+  const [open, setOpen] = useState(false);
+  const [draft, setDraft] = useState(value);
+  const handleOpen = () => {
+    setDraft(value);
+    setOpen(true);
+  };
+  const handleCancel = () => setOpen(false);
+  const handleOk = () => {
+    onChange(draft);
+    setOpen(false);
+  };
+  return /* @__PURE__ */ jsxs2(Fragment, { children: [
+    /* @__PURE__ */ jsx10(Button2, { variant: "contained", color: "inherit", disableElevation: true, onClick: handleOpen, children: buttonLabel }),
+    /* @__PURE__ */ jsxs2(Dialog, { open, onClose: handleCancel, maxWidth: "sm", fullWidth: true, children: [
+      /* @__PURE__ */ jsx10(DialogContent, { children: /* @__PURE__ */ jsxs2(RangeRow, { children: [
+        /* @__PURE__ */ jsx10(
+          MuiDatePicker,
+          {
+            label: startLabel,
+            value: draft.start,
+            onChange: (v) => setDraft((prev) => ({ ...prev, start: v })),
+            slotProps: { textField: { fullWidth: true } }
+          }
+        ),
+        /* @__PURE__ */ jsx10(
+          MuiDatePicker,
+          {
+            label: endLabel,
+            value: draft.end,
+            onChange: (v) => setDraft((prev) => ({ ...prev, end: v })),
+            slotProps: { textField: { fullWidth: true } }
+          }
+        )
+      ] }) }),
+      /* @__PURE__ */ jsxs2(DialogActions, { children: [
+        /* @__PURE__ */ jsx10(Button2, { onClick: handleCancel, color: "inherit", children: "Cancel" }),
+        /* @__PURE__ */ jsx10(Button2, { onClick: handleOk, color: "inherit", children: "OK" })
+      ] })
+    ] })
+  ] });
+}
+DateRangePickerInput.displayName = "ToolkitDateRangePickerInput";
+function DateRangePickerCalendar({
+  value,
+  onChange,
+  buttonLabel = "Click me!"
+}) {
+  const [open, setOpen] = useState(false);
+  const [draft, setDraft] = useState(value);
+  const [selecting, setSelecting] = useState("start");
+  const handleOpen = () => {
+    setDraft(value);
+    setSelecting("start");
+    setOpen(true);
+  };
+  const handleCancel = () => setOpen(false);
+  const handleOk = () => {
+    onChange(draft);
+    setOpen(false);
+  };
+  const handleDaySelect = (date) => {
+    if (selecting === "start") {
+      setDraft({ start: date, end: null });
+      setSelecting("end");
+    } else {
+      setDraft((prev) => ({ ...prev, end: date }));
+    }
+  };
+  return /* @__PURE__ */ jsxs2(Fragment, { children: [
+    /* @__PURE__ */ jsx10(Button2, { variant: "contained", color: "inherit", disableElevation: true, onClick: handleOpen, children: buttonLabel }),
+    /* @__PURE__ */ jsxs2(Dialog, { open, onClose: handleCancel, children: [
+      /* @__PURE__ */ jsxs2(DialogContent, { sx: { p: 1 }, children: [
+        /* @__PURE__ */ jsx10(Box, { sx: { mb: 1, px: 1 }, children: /* @__PURE__ */ jsx10(
+          TextField2,
+          {
+            size: "small",
+            label: "Selecting",
+            value: selecting === "start" ? "Start date" : "End date",
+            inputProps: { readOnly: true },
+            fullWidth: true
+          }
+        ) }),
+        /* @__PURE__ */ jsx10(
+          MuiDateCalendar,
+          {
+            value: selecting === "start" ? draft.start : draft.end,
+            onChange: handleDaySelect
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs2(DialogActions, { children: [
+        /* @__PURE__ */ jsx10(Button2, { onClick: handleCancel, color: "inherit", children: "Cancel" }),
+        /* @__PURE__ */ jsx10(Button2, { onClick: handleOk, color: "inherit", children: "OK" })
+      ] })
+    ] })
+  ] });
+}
+DateRangePickerCalendar.displayName = "ToolkitDateRangePickerCalendar";
+
+// src/foundation/Grid/Grid.tsx
+import { Grid2 as MuiGrid2 } from "@mui/material";
+import { jsx as jsx11 } from "react/jsx-runtime";
+function Grid({ container, spacing, ...props }) {
+  return /* @__PURE__ */ jsx11(
+    MuiGrid2,
+    {
+      container,
+      spacing: container && spacing === void 0 ? 2 : spacing,
+      ...props
+    }
+  );
+}
+Grid.displayName = "ToolkitGrid";
+
+// src/foundation/H1/H1.tsx
+import { Typography } from "@mui/material";
+import { jsx as jsx12 } from "react/jsx-runtime";
+function H1({ color = "text.primary", children, ...props }) {
+  return /* @__PURE__ */ jsx12(Typography, { variant: "h1", color, ...props, children });
+}
+H1.displayName = "ToolkitH1";
+
+// src/foundation/H2/H2.tsx
+import { Typography as Typography2 } from "@mui/material";
+import { jsx as jsx13 } from "react/jsx-runtime";
+function H2({ color = "text.primary", children, ...props }) {
+  return /* @__PURE__ */ jsx13(Typography2, { variant: "h2", color, ...props, children });
+}
+H2.displayName = "ToolkitH2";
+
+// src/foundation/H3/H3.tsx
+import { Typography as Typography3 } from "@mui/material";
+import { jsx as jsx14 } from "react/jsx-runtime";
+function H3({ color = "text.primary", children, ...props }) {
+  return /* @__PURE__ */ jsx14(Typography3, { variant: "h3", color, ...props, children });
+}
+H3.displayName = "ToolkitH3";
+
+// src/foundation/H4/H4.tsx
+import { Typography as Typography4 } from "@mui/material";
+import { jsx as jsx15 } from "react/jsx-runtime";
+function H4({ color = "text.primary", children, ...props }) {
+  return /* @__PURE__ */ jsx15(Typography4, { variant: "h4", color, ...props, children });
+}
+H4.displayName = "ToolkitH4";
+
+// src/foundation/H5/H5.tsx
+import { Typography as Typography5 } from "@mui/material";
+import { jsx as jsx16 } from "react/jsx-runtime";
+function H5({ color = "text.primary", children, ...props }) {
+  return /* @__PURE__ */ jsx16(Typography5, { variant: "h5", color, ...props, children });
+}
+H5.displayName = "ToolkitH5";
+
+// src/foundation/H6/H6.tsx
+import { Typography as Typography6 } from "@mui/material";
+import { jsx as jsx17 } from "react/jsx-runtime";
+function H6({ color = "text.primary", children, ...props }) {
+  return /* @__PURE__ */ jsx17(Typography6, { variant: "h6", color, ...props, children });
+}
+H6.displayName = "ToolkitH6";
+
+// src/foundation/Subtitle1/Subtitle1.tsx
+import { Typography as Typography7 } from "@mui/material";
+import { jsx as jsx18 } from "react/jsx-runtime";
+function Subtitle1({ color = "text.primary", children, ...props }) {
+  return /* @__PURE__ */ jsx18(Typography7, { variant: "subtitle1", color, ...props, children });
+}
+Subtitle1.displayName = "ToolkitSubtitle1";
+
+// src/foundation/Subtitle2/Subtitle2.tsx
+import { Typography as Typography8 } from "@mui/material";
+import { jsx as jsx19 } from "react/jsx-runtime";
+function Subtitle2({ color = "text.primary", children, ...props }) {
+  return /* @__PURE__ */ jsx19(Typography8, { variant: "subtitle2", color, ...props, children });
+}
+Subtitle2.displayName = "ToolkitSubtitle2";
+
+// src/foundation/Body1/Body1.tsx
+import { Typography as Typography9 } from "@mui/material";
+import { jsx as jsx20 } from "react/jsx-runtime";
+function Body1({ color = "text.primary", children, ...props }) {
+  return /* @__PURE__ */ jsx20(Typography9, { variant: "body1", color, ...props, children });
+}
+Body1.displayName = "ToolkitBody1";
+
+// src/foundation/Body2/Body2.tsx
+import { Typography as Typography10 } from "@mui/material";
+import { jsx as jsx21 } from "react/jsx-runtime";
+function Body2({ color = "text.primary", children, ...props }) {
+  return /* @__PURE__ */ jsx21(Typography10, { variant: "body2", color, ...props, children });
+}
+Body2.displayName = "ToolkitBody2";
+
+// src/foundation/Caption/Caption.tsx
+import { Typography as Typography11 } from "@mui/material";
+import { jsx as jsx22 } from "react/jsx-runtime";
+function Caption({ color = "text.primary", children, ...props }) {
+  return /* @__PURE__ */ jsx22(Typography11, { variant: "caption", color, ...props, children });
+}
+Caption.displayName = "ToolkitCaption";
+
+// src/foundation/Overline/Overline.tsx
+import { Typography as Typography12 } from "@mui/material";
+import { jsx as jsx23 } from "react/jsx-runtime";
+function Overline({ color = "text.primary", children, ...props }) {
+  return /* @__PURE__ */ jsx23(Typography12, { variant: "overline", color, ...props, children });
+}
+Overline.displayName = "ToolkitOverline";
+
+// src/foundation/TypographyButton/TypographyButton.tsx
+import { Typography as Typography13 } from "@mui/material";
+import { jsx as jsx24 } from "react/jsx-runtime";
+function TypographyButton({ color = "text.primary", children, ...props }) {
+  return /* @__PURE__ */ jsx24(Typography13, { variant: "button", color, ...props, children });
+}
+TypographyButton.displayName = "ToolkitTypographyButton";
+export {
+  Accordion,
+  AccordionDetails,
+  AccordionSummary,
+  Alert,
+  AlertTitle,
+  Avatar,
+  default2 as AvatarGroup,
+  Body1,
+  Body2,
+  Button,
+  Caption,
+  Card,
+  CardActions,
+  CardContent,
+  CardHeader,
+  Chip,
+  DateCalendar,
+  DateField,
+  DateLocalizationProvider,
+  DatePicker,
+  DateRangePickerCalendar,
+  DateRangePickerInput,
+  DateTimeField,
+  DateTimePicker,
+  DesktopDatePicker,
+  DesktopDateTimePicker,
+  DesktopTimePicker,
+  Grid,
+  H1,
+  H2,
+  H3,
+  H4,
+  H5,
+  H6,
+  MobileDatePicker,
+  MobileDateTimePicker,
+  MobileTimePicker,
+  Overline,
+  StandaloneAccordion,
+  StaticDatePicker,
+  StaticDateTimePicker,
+  StaticTimePicker,
+  Subtitle1,
+  Subtitle2,
+  TextField,
+  TimeField,
+  TimePicker,
+  ToggleButton,
+  ToggleButtonGroup,
+  ToolkitThemeProvider,
+  TypographyButton,
+  createMuiTheme,
+  getThemeTokens,
+  resolveThemeName,
+  themeRegistry
+};
+//# sourceMappingURL=index.mjs.map