@matteoaliano/forest-ui 0.1.0 → 0.2.1

package/dist/chunk-5C6DAZT2.mjs

@@ -0,0 +1,1384 @@
+import { createTheme } from '@mui/material/styles';
+
+// src/theme/index.ts
+
+// src/theme/tokens.ts
+var colors = {
+  base: {
+    white: "#ffffff",
+    black: "#000000",
+    transparent: "#ffffff00"
+  },
+  brand: {
+    25: "#fcfaff",
+    50: "#f9f5ff",
+    100: "#f4ebff",
+    200: "#e9d7fe",
+    300: "#d6bbfb",
+    400: "#b692f6",
+    500: "#9e77ed",
+    600: "#7f56d9",
+    700: "#6941c6",
+    800: "#53389e",
+    900: "#42307d",
+    950: "#2c1c5f"
+  },
+  gray: {
+    25: "#fcfcfd",
+    50: "#f9fafb",
+    100: "#f2f4f7",
+    200: "#eaecf0",
+    300: "#d0d5dd",
+    400: "#98a2b3",
+    500: "#667085",
+    600: "#475467",
+    700: "#344054",
+    800: "#182230",
+    900: "#101828",
+    950: "#0c111d"
+  },
+  error: {
+    25: "#fffbfa",
+    50: "#fef3f2",
+    100: "#fee4e2",
+    200: "#fecdca",
+    300: "#fda29b",
+    400: "#f97066",
+    500: "#f04438",
+    600: "#d92d20",
+    700: "#b42318",
+    800: "#912018",
+    900: "#7a271a",
+    950: "#55160c"
+  },
+  warning: {
+    25: "#fffcf5",
+    50: "#fffaeb",
+    100: "#fef0c7",
+    200: "#fedf89",
+    300: "#fec84b",
+    400: "#fdb022",
+    500: "#f79009",
+    600: "#dc6803",
+    700: "#b54708",
+    800: "#93370d",
+    900: "#7a2e0e",
+    950: "#4e1d09"
+  },
+  success: {
+    25: "#f6fef9",
+    50: "#ecfdf3",
+    100: "#dcfae6",
+    200: "#abefc6",
+    300: "#75e0a7",
+    400: "#47cd89",
+    500: "#17b26a",
+    600: "#079455",
+    700: "#067647",
+    800: "#085d3a",
+    900: "#074d31",
+    950: "#053321"
+  },
+  blue: {
+    25: "#f5faff",
+    50: "#eff8ff",
+    100: "#d1e9ff",
+    200: "#b2ddff",
+    300: "#84caff",
+    400: "#53b1fd",
+    500: "#2e90fa",
+    600: "#1570ef",
+    700: "#175cd3",
+    800: "#1849a9",
+    900: "#194185",
+    950: "#102a56"
+  }
+};
+var spacing = {
+  none: 0,
+  xxs: 2,
+  xs: 4,
+  sm: 6,
+  md: 8,
+  lg: 12,
+  xl: 16,
+  "2xl": 20,
+  "3xl": 24,
+  "4xl": 32,
+  "5xl": 40,
+  "6xl": 48,
+  "7xl": 64,
+  "8xl": 80,
+  "9xl": 96,
+  "10xl": 128,
+  "11xl": 160
+};
+var radius = {
+  none: 0,
+  xxs: 2,
+  xs: 4,
+  sm: 6,
+  md: 8,
+  lg: 10,
+  xl: 12,
+  "2xl": 16,
+  "3xl": 20,
+  "4xl": 24,
+  full: 9999
+};
+var shadows = {
+  xs: "0px 1px 2px 0px #1018280d",
+  sm: "0px 1px 3px 0px #1018281a, 0px 1px 2px 0px #1018280f",
+  md: "0px 4px 8px -2px #1018281a, 0px 2px 4px -2px #1018280f",
+  lg: "0px 12px 16px -4px #10182814, 0px 4px 6px -2px #10182808",
+  xl: "0px 20px 24px -4px #10182814, 0px 8px 8px -4px #10182808",
+  "2xl": "0px 24px 48px -12px #1018282e",
+  "3xl": "0px 32px 64px -12px #10182824"
+};
+var focusRings = {
+  brand: "0px 0px 0px 4px #9e77ed3d",
+  brandShadowXs: "0px 1px 2px 0px #1018280d, 0px 0px 0px 4px #9e77ed3d",
+  brandShadowSm: "0px 1px 3px 0px #1018281a, 0px 1px 2px 0px #1018280f, 0px 0px 0px 4px #9e77ed3d",
+  gray: "0px 0px 0px 4px #98a2b324",
+  grayShadowXs: "0px 1px 2px 0px #1018280d, 0px 0px 0px 4px #98a2b324",
+  grayShadowSm: "0px 1px 3px 0px #1018281a, 0px 1px 2px 0px #1018280f, 0px 0px 0px 4px #98a2b324",
+  error: "0px 0px 0px 4px #f044383d",
+  errorShadowXs: "0px 1px 2px 0px #1018280d, 0px 0px 0px 4px #f044383d"
+};
+var fontFamily = '"Poppins", sans-serif';
+var fontSize = {
+  xxs: 11,
+  xs: 12,
+  sm: 14,
+  md: 16,
+  lg: 18,
+  xl: 20
+};
+var lineHeight = {
+  xxs: "16px",
+  xs: "18px",
+  sm: "20px",
+  md: "24px",
+  lg: "28px",
+  xl: "30px"
+};
+var fontWeight = {
+  regular: 400,
+  medium: 500,
+  semibold: 600,
+  bold: 700
+};
+var display = {
+  "2xl": { fontSize: 72, lineHeight: "90px", letterSpacing: "-0.02em" },
+  xl: { fontSize: 60, lineHeight: "72px", letterSpacing: "-0.02em" },
+  lg: { fontSize: 48, lineHeight: "60px", letterSpacing: "-0.02em" },
+  md: { fontSize: 36, lineHeight: "44px", letterSpacing: "-0.02em" },
+  sm: { fontSize: 30, lineHeight: "38px" },
+  xs: { fontSize: 24, lineHeight: "32px" }
+};
+var container = {
+  maxWidthDesktop: 1280,
+  paddingDesktop: 32,
+  paddingMobile: 16
+};
+var widths = {
+  xxs: 320,
+  xs: 384,
+  sm: 480,
+  md: 560,
+  lg: 640,
+  xl: 768,
+  "2xl": 1024,
+  "3xl": 1280,
+  "4xl": 1440,
+  "5xl": 1600,
+  "6xl": 1920
+};
+
+// src/theme/palette.ts
+function buildPalette(tokens) {
+  const { colors: colors2 } = tokens;
+  return {
+    primary: {
+      main: colors2.brand[600],
+      light: colors2.brand[400],
+      dark: colors2.brand[700],
+      contrastText: colors2.base.white
+    },
+    secondary: {
+      main: colors2.gray[600],
+      light: colors2.gray[400],
+      dark: colors2.gray[700],
+      contrastText: colors2.base.white
+    },
+    error: {
+      main: colors2.error[600],
+      light: colors2.error[300],
+      dark: colors2.error[700],
+      contrastText: colors2.base.white
+    },
+    warning: {
+      main: colors2.warning[600],
+      light: colors2.warning[300],
+      dark: colors2.warning[700],
+      contrastText: colors2.base.white
+    },
+    success: {
+      main: colors2.success[600],
+      light: colors2.success[300],
+      dark: colors2.success[700],
+      contrastText: colors2.base.white
+    },
+    info: {
+      main: colors2.blue[600],
+      light: colors2.blue[300],
+      dark: colors2.blue[700],
+      contrastText: colors2.base.white
+    },
+    background: {
+      default: colors2.base.white,
+      paper: colors2.base.white
+    },
+    text: {
+      primary: colors2.gray[900],
+      secondary: colors2.gray[700],
+      disabled: colors2.gray[500]
+    },
+    divider: colors2.gray[200],
+    action: {
+      active: colors2.gray[600],
+      hover: colors2.gray[50],
+      selected: colors2.brand[50],
+      disabled: colors2.gray[400],
+      disabledBackground: colors2.gray[100]
+    }
+  };
+}
+var palette = buildPalette({
+  colors
+});
+
+// src/theme/typography.ts
+function buildTypography(tokens) {
+  const { fontFamily: fontFamily2, display: display2, fontSize: fontSize2, lineHeight: lineHeight2, fontWeight: fontWeight2 } = tokens;
+  return {
+    fontFamily: fontFamily2,
+    fontWeightRegular: fontWeight2.regular,
+    fontWeightMedium: fontWeight2.medium,
+    fontWeightBold: fontWeight2.bold,
+    // Display styles → MUI headings
+    h1: {
+      fontSize: display2.xl.fontSize,
+      lineHeight: display2.xl.lineHeight,
+      letterSpacing: display2.xl.letterSpacing,
+      fontWeight: fontWeight2.semibold
+    },
+    h2: {
+      fontSize: display2.lg.fontSize,
+      lineHeight: display2.lg.lineHeight,
+      letterSpacing: display2.lg.letterSpacing,
+      fontWeight: fontWeight2.semibold
+    },
+    h3: {
+      fontSize: display2.md.fontSize,
+      lineHeight: display2.md.lineHeight,
+      letterSpacing: display2.md.letterSpacing,
+      fontWeight: fontWeight2.semibold
+    },
+    h4: {
+      fontSize: display2.sm.fontSize,
+      lineHeight: display2.sm.lineHeight,
+      fontWeight: fontWeight2.semibold
+    },
+    h5: {
+      fontSize: display2.xs.fontSize,
+      lineHeight: display2.xs.lineHeight,
+      fontWeight: fontWeight2.semibold
+    },
+    h6: {
+      fontSize: fontSize2.xl,
+      lineHeight: lineHeight2.xl,
+      fontWeight: fontWeight2.semibold
+    },
+    subtitle1: {
+      fontSize: fontSize2.lg,
+      lineHeight: lineHeight2.lg,
+      fontWeight: fontWeight2.medium
+    },
+    subtitle2: {
+      fontSize: fontSize2.md,
+      lineHeight: lineHeight2.md,
+      fontWeight: fontWeight2.medium
+    },
+    body1: {
+      fontSize: fontSize2.md,
+      lineHeight: lineHeight2.md,
+      fontWeight: fontWeight2.regular
+    },
+    body2: {
+      fontSize: fontSize2.sm,
+      lineHeight: lineHeight2.sm,
+      fontWeight: fontWeight2.regular
+    },
+    caption: {
+      fontSize: fontSize2.xs,
+      lineHeight: lineHeight2.xs,
+      fontWeight: fontWeight2.regular
+    },
+    overline: {
+      fontSize: fontSize2.xxs,
+      lineHeight: lineHeight2.xxs,
+      fontWeight: fontWeight2.medium,
+      textTransform: "uppercase",
+      letterSpacing: "0.08em"
+    },
+    button: {
+      fontSize: fontSize2.sm,
+      lineHeight: lineHeight2.sm,
+      fontWeight: fontWeight2.semibold,
+      textTransform: "none"
+    }
+  };
+}
+var typography = buildTypography({
+  fontFamily,
+  display,
+  fontSize,
+  lineHeight,
+  fontWeight
+});
+
+// src/theme/components.ts
+function buildComponents(tokens) {
+  const { colors: colors2, radius: radius2, focusRings: focusRings2, shadows: tokenShadows } = tokens;
+  return {
+    // ─── Button ─────────────────────────────────────────────────────
+    MuiButton: {
+      defaultProps: {
+        disableElevation: true
+      },
+      styleOverrides: {
+        root: {
+          borderRadius: radius2.md,
+          fontWeight: 600,
+          "&:focus-visible": {
+            boxShadow: focusRings2.brandShadowXs
+          }
+        },
+        sizeLarge: {
+          padding: "12px 20px",
+          fontSize: 16,
+          lineHeight: "24px"
+        },
+        sizeMedium: {
+          padding: "10px 16px",
+          fontSize: 14,
+          lineHeight: "20px"
+        },
+        sizeSmall: {
+          padding: "8px 14px",
+          fontSize: 14,
+          lineHeight: "20px"
+        },
+        containedPrimary: {
+          backgroundColor: colors2.brand[600],
+          "&:hover": {
+            backgroundColor: colors2.brand[700]
+          }
+        },
+        outlinedPrimary: {
+          borderColor: colors2.brand[300],
+          color: colors2.brand[700],
+          "&:hover": {
+            backgroundColor: colors2.brand[50],
+            borderColor: colors2.brand[300]
+          }
+        },
+        textPrimary: {
+          color: colors2.brand[700],
+          "&:hover": {
+            backgroundColor: colors2.brand[50]
+          }
+        }
+      }
+    },
+    // ─── Button Group ───────────────────────────────────────────────
+    MuiButtonGroup: {
+      defaultProps: {
+        disableElevation: true
+      },
+      styleOverrides: {
+        root: {
+          borderRadius: radius2.md
+        },
+        grouped: {
+          "&:not(:last-of-type)": {
+            borderRight: `1px solid ${colors2.brand[700]}`
+          }
+        }
+      }
+    },
+    // ─── FAB ────────────────────────────────────────────────────────
+    MuiFab: {
+      styleOverrides: {
+        root: {
+          boxShadow: tokenShadows.md,
+          "&:hover": {
+            boxShadow: tokenShadows.lg
+          },
+          "&:focus-visible": {
+            boxShadow: focusRings2.brandShadowSm
+          }
+        },
+        primary: {
+          backgroundColor: colors2.brand[600],
+          "&:hover": {
+            backgroundColor: colors2.brand[700]
+          }
+        }
+      }
+    },
+    // ─── TextField / Input ──────────────────────────────────────────
+    MuiTextField: {
+      defaultProps: {
+        variant: "outlined",
+        size: "small"
+      }
+    },
+    MuiOutlinedInput: {
+      styleOverrides: {
+        root: {
+          borderRadius: radius2.md,
+          "&:hover .MuiOutlinedInput-notchedOutline": {
+            borderColor: colors2.brand[300]
+          },
+          "&.Mui-focused .MuiOutlinedInput-notchedOutline": {
+            borderColor: colors2.brand[600],
+            borderWidth: 1,
+            boxShadow: "none"
+          },
+          "&.Mui-error .MuiOutlinedInput-notchedOutline": {
+            borderColor: colors2.error[300]
+          },
+          "&.Mui-error.Mui-focused .MuiOutlinedInput-notchedOutline": {
+            borderColor: colors2.error[600],
+            boxShadow: "none"
+          }
+        },
+        notchedOutline: {
+          borderColor: colors2.gray[300]
+        },
+        input: {
+          padding: "10px 14px",
+          fontSize: 16,
+          lineHeight: "24px",
+          "&::placeholder": {
+            color: colors2.gray[500],
+            opacity: 1
+          }
+        },
+        inputSizeSmall: {
+          padding: "8px 12px",
+          fontSize: 14,
+          lineHeight: "20px"
+        }
+      }
+    },
+    MuiInputLabel: {
+      styleOverrides: {
+        root: {
+          fontSize: 14,
+          fontWeight: 500,
+          color: colors2.gray[700],
+          "&.Mui-focused": {
+            color: colors2.gray[700]
+          },
+          "&.Mui-error": {
+            color: colors2.error[600]
+          }
+        }
+      }
+    },
+    MuiFormHelperText: {
+      styleOverrides: {
+        root: {
+          fontSize: 14,
+          lineHeight: "20px",
+          marginTop: 6,
+          marginLeft: 0,
+          "&.Mui-error": {
+            color: colors2.error[600]
+          }
+        }
+      }
+    },
+    // ─── Select ─────────────────────────────────────────────────────
+    MuiSelect: {
+      defaultProps: {
+        size: "small"
+      },
+      styleOverrides: {
+        icon: {
+          color: colors2.gray[500]
+        }
+      }
+    },
+    // ─── Autocomplete ───────────────────────────────────────────────
+    MuiAutocomplete: {
+      styleOverrides: {
+        paper: {
+          borderRadius: radius2.md,
+          boxShadow: tokenShadows.lg,
+          border: `1px solid ${colors2.gray[200]}`,
+          marginTop: 4
+        },
+        option: {
+          fontSize: 16,
+          lineHeight: "24px",
+          padding: "10px 14px",
+          "&.Mui-focused": {
+            backgroundColor: colors2.gray[50]
+          },
+          '&[aria-selected="true"]': {
+            backgroundColor: colors2.brand[50]
+          }
+        },
+        listbox: {
+          padding: 4
+        }
+      }
+    },
+    // ─── Checkbox ───────────────────────────────────────────────────
+    MuiCheckbox: {
+      defaultProps: {
+        disableRipple: true
+      },
+      styleOverrides: {
+        root: {
+          color: colors2.gray[300],
+          borderRadius: radius2.xs,
+          padding: 0,
+          width: 20,
+          height: 20,
+          "&:hover": {
+            backgroundColor: "transparent",
+            color: colors2.brand[600]
+          },
+          "&.Mui-checked": {
+            color: colors2.brand[600]
+          },
+          "&.Mui-checked:hover": {
+            color: colors2.brand[700]
+          },
+          "&.Mui-focusVisible": {
+            outline: "none",
+            boxShadow: focusRings2.brand,
+            borderRadius: radius2.xs
+          },
+          "&.Mui-disabled": {
+            color: colors2.gray[300]
+          }
+        }
+      }
+    },
+    // ─── Radio ──────────────────────────────────────────────────────
+    MuiRadio: {
+      defaultProps: {
+        disableRipple: true
+      },
+      styleOverrides: {
+        root: {
+          color: colors2.gray[300],
+          padding: 0,
+          "&:hover": {
+            backgroundColor: "transparent",
+            color: colors2.brand[600]
+          },
+          "&.Mui-checked": {
+            color: colors2.brand[600]
+          },
+          "&.Mui-checked:hover": {
+            color: colors2.brand[700]
+          },
+          "&.Mui-focusVisible": {
+            outline: "none",
+            boxShadow: focusRings2.brand,
+            borderRadius: radius2.full
+          },
+          "&.Mui-disabled": {
+            color: colors2.gray[300]
+          }
+        }
+      }
+    },
+    // ─── Switch ─────────────────────────────────────────────────────
+    MuiSwitch: {
+      defaultProps: {
+        disableRipple: true
+      },
+      styleOverrides: {
+        root: {
+          width: 44,
+          height: 24,
+          padding: 0
+        },
+        switchBase: {
+          padding: 2,
+          "&.Mui-checked": {
+            transform: "translateX(20px)",
+            color: colors2.base.white,
+            "& + .MuiSwitch-track": {
+              backgroundColor: colors2.brand[600],
+              opacity: 1
+            }
+          },
+          "&.Mui-checked:hover + .MuiSwitch-track": {
+            backgroundColor: colors2.brand[700]
+          },
+          "&.Mui-focusVisible .MuiSwitch-thumb": {
+            boxShadow: focusRings2.brand
+          },
+          "&.Mui-disabled .MuiSwitch-thumb": {
+            color: colors2.gray[100]
+          },
+          "&.Mui-disabled + .MuiSwitch-track": {
+            opacity: 0.5
+          }
+        },
+        thumb: {
+          width: 20,
+          height: 20,
+          boxShadow: "0px 1px 2px 0px #1018280d"
+        },
+        track: {
+          borderRadius: radius2.full,
+          backgroundColor: colors2.gray[200],
+          opacity: 1
+        }
+      }
+    },
+    // ─── Toggle Button ─────────────────────────────────────────────
+    MuiToggleButton: {
+      styleOverrides: {
+        root: {
+          borderRadius: radius2.md,
+          borderColor: colors2.gray[300],
+          color: colors2.gray[700],
+          fontSize: 14,
+          fontWeight: 600,
+          lineHeight: "20px",
+          padding: "8px 14px",
+          textTransform: "none",
+          "&:hover": {
+            backgroundColor: colors2.gray[50]
+          },
+          "&.Mui-selected": {
+            backgroundColor: colors2.brand[50],
+            color: colors2.brand[700],
+            borderColor: colors2.brand[300],
+            "&:hover": {
+              backgroundColor: colors2.brand[100]
+            }
+          },
+          "&:focus-visible": {
+            boxShadow: focusRings2.brandShadowXs
+          }
+        }
+      }
+    },
+    MuiToggleButtonGroup: {
+      styleOverrides: {
+        root: {
+          borderRadius: radius2.md
+        },
+        grouped: {
+          "&:not(:first-of-type)": {
+            borderRadius: radius2.md,
+            marginLeft: -1
+          },
+          "&:first-of-type": {
+            borderRadius: radius2.md
+          }
+        }
+      }
+    },
+    // ─── Card ───────────────────────────────────────────────────────
+    MuiCard: {
+      defaultProps: {
+        elevation: 0
+      },
+      styleOverrides: {
+        root: {
+          borderRadius: radius2.xl,
+          border: `1px solid ${colors2.gray[200]}`,
+          backgroundColor: colors2.base.white,
+          overflow: "hidden"
+        }
+      }
+    },
+    MuiCardContent: {
+      styleOverrides: {
+        root: {
+          padding: "24px",
+          "&:last-child": {
+            paddingBottom: "24px"
+          }
+        }
+      }
+    },
+    MuiCardHeader: {
+      styleOverrides: {
+        root: {
+          padding: "24px 24px 0 24px"
+        },
+        title: {
+          fontSize: 18,
+          fontWeight: 600,
+          lineHeight: "28px"
+        },
+        subheader: {
+          fontSize: 14,
+          lineHeight: "20px",
+          marginTop: 4
+        },
+        action: {
+          marginTop: -4,
+          marginRight: -4
+        }
+      }
+    },
+    // ─── Paper ──────────────────────────────────────────────────────
+    MuiPaper: {
+      defaultProps: {
+        elevation: 0
+      },
+      styleOverrides: {
+        root: {
+          backgroundImage: "none"
+        },
+        rounded: {
+          borderRadius: radius2.lg
+        },
+        elevation1: {
+          boxShadow: tokenShadows.xs,
+          border: `1px solid ${colors2.gray[200]}`
+        },
+        elevation2: {
+          boxShadow: tokenShadows.sm,
+          border: `1px solid ${colors2.gray[200]}`
+        },
+        elevation3: {
+          boxShadow: tokenShadows.md,
+          border: `1px solid ${colors2.gray[200]}`
+        },
+        elevation4: {
+          boxShadow: tokenShadows.lg,
+          border: `1px solid ${colors2.gray[200]}`
+        },
+        elevation8: {
+          boxShadow: tokenShadows.xl,
+          border: `1px solid ${colors2.gray[200]}`
+        },
+        elevation16: {
+          boxShadow: tokenShadows["2xl"],
+          border: `1px solid ${colors2.gray[200]}`
+        },
+        elevation24: {
+          boxShadow: tokenShadows["3xl"],
+          border: `1px solid ${colors2.gray[200]}`
+        }
+      }
+    },
+    // ─── Accordion ──────────────────────────────────────────────────
+    MuiAccordion: {
+      defaultProps: {
+        disableGutters: true,
+        elevation: 0
+      },
+      styleOverrides: {
+        root: {
+          border: `1px solid ${colors2.gray[200]}`,
+          borderRadius: radius2.lg,
+          "&:not(:last-child)": {
+            marginBottom: 8
+          },
+          "&:before": {
+            display: "none"
+          },
+          "&.Mui-expanded": {
+            margin: 0,
+            marginBottom: 8,
+            borderRadius: radius2.lg
+          }
+        }
+      }
+    },
+    MuiAccordionSummary: {
+      styleOverrides: {
+        root: {
+          padding: "0 24px",
+          minHeight: 56,
+          "&.Mui-expanded": {
+            minHeight: 56,
+            borderBottom: `1px solid ${colors2.gray[200]}`
+          }
+        },
+        content: {
+          margin: "12px 0",
+          "&.Mui-expanded": {
+            margin: "12px 0"
+          }
+        }
+      }
+    },
+    MuiAccordionDetails: {
+      styleOverrides: {
+        root: {
+          padding: "24px"
+        }
+      }
+    },
+    // ─── AppBar ─────────────────────────────────────────────────────
+    MuiAppBar: {
+      defaultProps: {
+        elevation: 0,
+        color: "transparent"
+      },
+      styleOverrides: {
+        root: {
+          borderBottom: `1px solid ${colors2.gray[200]}`,
+          backgroundColor: colors2.base.white
+        }
+      }
+    },
+    MuiToolbar: {
+      styleOverrides: {
+        root: {
+          minHeight: 64,
+          "@media (min-width: 600px)": {
+            minHeight: 64
+          }
+        },
+        dense: {
+          minHeight: 48,
+          "@media (min-width: 600px)": {
+            minHeight: 48
+          }
+        }
+      }
+    },
+    // ─── Chip ───────────────────────────────────────────────────────
+    MuiChip: {
+      styleOverrides: {
+        root: {
+          borderRadius: radius2.md,
+          fontWeight: 500,
+          fontSize: 14
+        }
+      }
+    },
+    // ─── Form Control / Label ───────────────────────────────────────
+    MuiFormControlLabel: {
+      styleOverrides: {
+        root: {
+          marginLeft: 0,
+          gap: 8
+        },
+        label: {
+          fontSize: 14,
+          lineHeight: "20px",
+          fontWeight: 500,
+          color: colors2.gray[700]
+        }
+      }
+    },
+    // ─── Table ───────────────────────────────────────────────────────
+    MuiTable: {
+      styleOverrides: {
+        root: {
+          borderCollapse: "separate",
+          borderSpacing: 0
+        }
+      }
+    },
+    MuiTableCell: {
+      styleOverrides: {
+        root: {
+          borderBottom: `1px solid ${colors2.gray[200]}`,
+          padding: "16px 24px",
+          fontSize: 14,
+          lineHeight: "20px",
+          color: colors2.gray[600]
+        },
+        head: {
+          backgroundColor: colors2.gray[50],
+          color: colors2.gray[600],
+          fontWeight: 500,
+          fontSize: 12,
+          lineHeight: "18px"
+        },
+        body: {
+          color: colors2.gray[600]
+        }
+      }
+    },
+    MuiTableHead: {
+      styleOverrides: {
+        root: {
+          backgroundColor: colors2.gray[50],
+          borderBottom: `1px solid ${colors2.gray[200]}`
+        }
+      }
+    },
+    MuiTableRow: {
+      styleOverrides: {
+        root: {
+          "&:last-child td, &:last-child th": {
+            border: 0
+          },
+          "&:hover": {
+            backgroundColor: colors2.gray[50]
+          },
+          "&.Mui-selected": {
+            backgroundColor: colors2.brand[50],
+            "&:hover": {
+              backgroundColor: colors2.brand[50]
+            }
+          }
+        }
+      }
+    },
+    MuiTableContainer: {
+      styleOverrides: {
+        root: {
+          borderRadius: radius2.xl,
+          border: `1px solid ${colors2.gray[200]}`,
+          boxShadow: "none"
+        }
+      }
+    },
+    // ─── Badge ──────────────────────────────────────────────────────
+    MuiBadge: {
+      styleOverrides: {
+        standard: {
+          fontWeight: 500,
+          fontSize: 12,
+          lineHeight: "18px",
+          minWidth: 20,
+          height: 20,
+          borderRadius: radius2.full
+        },
+        colorPrimary: {
+          backgroundColor: colors2.brand[600]
+        },
+        colorError: {
+          backgroundColor: colors2.error[600]
+        },
+        colorSuccess: {
+          backgroundColor: colors2.success[600]
+        },
+        colorWarning: {
+          backgroundColor: colors2.warning[600]
+        },
+        dot: {
+          minWidth: 8,
+          height: 8,
+          borderRadius: radius2.full
+        }
+      }
+    },
+    // ─── Divider ────────────────────────────────────────────────────
+    MuiDivider: {
+      styleOverrides: {
+        root: {
+          borderColor: colors2.gray[200]
+        }
+      }
+    },
+    // ─── List ───────────────────────────────────────────────────────
+    MuiList: {
+      styleOverrides: {
+        root: {
+          padding: 4
+        }
+      }
+    },
+    MuiListItemButton: {
+      styleOverrides: {
+        root: {
+          borderRadius: radius2.sm,
+          padding: "8px 12px",
+          "&:hover": {
+            backgroundColor: colors2.gray[50]
+          },
+          "&.Mui-selected": {
+            backgroundColor: colors2.brand[50],
+            color: colors2.brand[700],
+            "&:hover": {
+              backgroundColor: colors2.brand[100]
+            }
+          }
+        }
+      }
+    },
+    MuiListItemIcon: {
+      styleOverrides: {
+        root: {
+          minWidth: 36,
+          color: colors2.gray[500]
+        }
+      }
+    },
+    MuiListItemText: {
+      styleOverrides: {
+        primary: {
+          fontSize: 14,
+          lineHeight: "20px",
+          fontWeight: 500,
+          color: colors2.gray[700]
+        },
+        secondary: {
+          fontSize: 14,
+          lineHeight: "20px",
+          color: colors2.gray[500]
+        }
+      }
+    },
+    // ─── Tooltip ────────────────────────────────────────────────────
+    MuiTooltip: {
+      styleOverrides: {
+        tooltip: {
+          backgroundColor: colors2.gray[900],
+          color: colors2.base.white,
+          fontSize: 12,
+          lineHeight: "18px",
+          fontWeight: 600,
+          padding: "8px 12px",
+          borderRadius: radius2.md,
+          boxShadow: tokenShadows.lg
+        },
+        arrow: {
+          color: colors2.gray[900]
+        }
+      }
+    },
+    // ─── Alert ──────────────────────────────────────────────────────
+    MuiAlert: {
+      defaultProps: {
+        variant: "standard"
+      },
+      styleOverrides: {
+        root: {
+          borderRadius: radius2.xl,
+          fontSize: 14,
+          lineHeight: "20px",
+          padding: "12px 16px"
+        },
+        standardError: {
+          backgroundColor: colors2.error[50],
+          color: colors2.error[700],
+          border: `1px solid ${colors2.error[300]}`,
+          "& .MuiAlert-icon": {
+            color: colors2.error[600]
+          }
+        },
+        standardWarning: {
+          backgroundColor: colors2.warning[50],
+          color: colors2.warning[700],
+          border: `1px solid ${colors2.warning[300]}`,
+          "& .MuiAlert-icon": {
+            color: colors2.warning[600]
+          }
+        },
+        standardSuccess: {
+          backgroundColor: colors2.success[50],
+          color: colors2.success[700],
+          border: `1px solid ${colors2.success[300]}`,
+          "& .MuiAlert-icon": {
+            color: colors2.success[600]
+          }
+        },
+        standardInfo: {
+          backgroundColor: colors2.blue[50],
+          color: colors2.blue[700],
+          border: `1px solid ${colors2.blue[300]}`,
+          "& .MuiAlert-icon": {
+            color: colors2.blue[600]
+          }
+        },
+        icon: {
+          padding: "2px 0"
+        }
+      }
+    },
+    MuiAlertTitle: {
+      styleOverrides: {
+        root: {
+          fontWeight: 600,
+          fontSize: 14,
+          lineHeight: "20px",
+          marginBottom: 4
+        }
+      }
+    },
+    // ─── Backdrop ───────────────────────────────────────────────────
+    MuiBackdrop: {
+      styleOverrides: {
+        root: {
+          backgroundColor: "rgba(16, 24, 40, 0.7)"
+        }
+      }
+    },
+    // ─── Dialog ─────────────────────────────────────────────────────
+    MuiDialog: {
+      styleOverrides: {
+        paper: {
+          borderRadius: radius2.xl,
+          boxShadow: tokenShadows.xl,
+          padding: 0
+        }
+      }
+    },
+    MuiDialogTitle: {
+      styleOverrides: {
+        root: {
+          fontSize: 18,
+          lineHeight: "28px",
+          fontWeight: 600,
+          color: colors2.gray[900],
+          padding: "24px 24px 0"
+        }
+      }
+    },
+    MuiDialogContent: {
+      styleOverrides: {
+        root: {
+          padding: "20px 24px",
+          fontSize: 14,
+          lineHeight: "20px",
+          color: colors2.gray[600]
+        }
+      }
+    },
+    MuiDialogActions: {
+      styleOverrides: {
+        root: {
+          padding: "0 24px 24px",
+          gap: 12
+        }
+      }
+    },
+    // ─── Progress ───────────────────────────────────────────────────
+    MuiLinearProgress: {
+      styleOverrides: {
+        root: {
+          borderRadius: radius2.full,
+          height: 8,
+          backgroundColor: colors2.gray[200]
+        },
+        barColorPrimary: {
+          backgroundColor: colors2.brand[600],
+          borderRadius: radius2.full
+        },
+        barColorSecondary: {
+          backgroundColor: colors2.gray[600],
+          borderRadius: radius2.full
+        }
+      }
+    },
+    MuiCircularProgress: {
+      styleOverrides: {
+        colorPrimary: {
+          color: colors2.brand[600]
+        },
+        colorSecondary: {
+          color: colors2.gray[600]
+        }
+      }
+    },
+    // ─── Skeleton ───────────────────────────────────────────────────
+    MuiSkeleton: {
+      defaultProps: {
+        animation: "wave"
+      },
+      styleOverrides: {
+        root: {
+          backgroundColor: colors2.gray[100]
+        },
+        rounded: {
+          borderRadius: radius2.md
+        },
+        circular: {
+          borderRadius: radius2.full
+        }
+      }
+    },
+    // ─── Snackbar ───────────────────────────────────────────────────
+    MuiSnackbarContent: {
+      styleOverrides: {
+        root: {
+          backgroundColor: colors2.gray[900],
+          color: colors2.base.white,
+          borderRadius: radius2.xl,
+          boxShadow: tokenShadows.lg,
+          fontSize: 14,
+          lineHeight: "20px",
+          fontWeight: 500,
+          padding: "6px 16px"
+        }
+      }
+    },
+    // ─── Typography ─────────────────────────────────────────────────
+    MuiTypography: {
+      defaultProps: {
+        variantMapping: {
+          h1: "h1",
+          h2: "h2",
+          h3: "h3",
+          h4: "h4",
+          h5: "h5",
+          h6: "h6",
+          subtitle1: "p",
+          subtitle2: "p",
+          body1: "p",
+          body2: "p",
+          caption: "span",
+          overline: "span"
+        }
+      }
+    }
+  };
+}
+var components = buildComponents({
+  colors,
+  radius,
+  focusRings,
+  shadows
+});
+
+// src/theme/shadows.ts
+function buildShadows(tokens) {
+  const tokenShadows = tokens.shadows;
+  return [
+    "none",
+    // 0
+    tokenShadows.xs,
+    // 1
+    tokenShadows.sm,
+    // 2
+    tokenShadows.sm,
+    // 3
+    tokenShadows.md,
+    // 4
+    tokenShadows.md,
+    // 5
+    tokenShadows.md,
+    // 6
+    tokenShadows.lg,
+    // 7
+    tokenShadows.lg,
+    // 8
+    tokenShadows.lg,
+    // 9
+    tokenShadows.xl,
+    // 10
+    tokenShadows.xl,
+    // 11
+    tokenShadows.xl,
+    // 12
+    tokenShadows["2xl"],
+    // 13
+    tokenShadows["2xl"],
+    // 14
+    tokenShadows["2xl"],
+    // 15
+    tokenShadows["3xl"],
+    // 16
+    tokenShadows["3xl"],
+    // 17
+    tokenShadows["3xl"],
+    // 18
+    tokenShadows["3xl"],
+    // 19
+    tokenShadows["3xl"],
+    // 20
+    tokenShadows["3xl"],
+    // 21
+    tokenShadows["3xl"],
+    // 22
+    tokenShadows["3xl"],
+    // 23
+    tokenShadows["3xl"]
+    // 24
+  ];
+}
+var shadows2 = buildShadows({
+  shadows
+});
+function buildThemeOptions(tokens) {
+  return {
+    palette: buildPalette(tokens),
+    typography: buildTypography(tokens),
+    components: buildComponents(tokens),
+    shadows: buildShadows(tokens),
+    shape: {
+      borderRadius: tokens.radius.md
+    }
+  };
+}
+function buildTheme(tokens) {
+  return createTheme(buildThemeOptions(tokens));
+}
+
+// src/theme/presets/forest.ts
+var forestPreset = {
+  name: "forest",
+  defaultVariant: "light",
+  variants: {
+    light: {
+      tokens: {
+        colors,
+        spacing,
+        radius,
+        shadows,
+        focusRings,
+        fontFamily,
+        fontSize,
+        lineHeight,
+        fontWeight,
+        display,
+        container,
+        widths
+      }
+    }
+  }
+};
+
+// src/theme/presets/index.ts
+var presetRegistry = /* @__PURE__ */ new Map();
+presetRegistry.set(forestPreset.name, forestPreset);
+function getPreset(name) {
+  return presetRegistry.get(name);
+}
+function registerPreset(preset) {
+  presetRegistry.set(preset.name, preset);
+}
+function getAvailablePresets() {
+  return Array.from(presetRegistry.keys());
+}
+
+// src/theme/index.ts
+var forestThemeOptions = {
+  palette,
+  typography,
+  components,
+  shadows: shadows2,
+  shape: {
+    borderRadius: 8
+  }
+};
+var forestTheme = createTheme(forestThemeOptions);
+
+export { buildTheme, buildThemeOptions, colors, components, container, display, focusRings, fontFamily, fontSize, fontWeight, forestPreset, forestTheme, forestThemeOptions, getAvailablePresets, getPreset, lineHeight, palette, radius, registerPreset, shadows, shadows2, spacing, typography, widths };
+//# sourceMappingURL=chunk-5C6DAZT2.mjs.map
+//# sourceMappingURL=chunk-5C6DAZT2.mjs.map