@matteoaliano/forest-ui 0.1.0

package/dist/theme.js

@@ -0,0 +1,1320 @@
+'use strict';
+
+var styles = require('@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
+var palette = {
+  primary: {
+    main: colors.brand[600],
+    light: colors.brand[400],
+    dark: colors.brand[700],
+    contrastText: colors.base.white
+  },
+  secondary: {
+    main: colors.gray[600],
+    light: colors.gray[400],
+    dark: colors.gray[700],
+    contrastText: colors.base.white
+  },
+  error: {
+    main: colors.error[600],
+    light: colors.error[300],
+    dark: colors.error[700],
+    contrastText: colors.base.white
+  },
+  warning: {
+    main: colors.warning[600],
+    light: colors.warning[300],
+    dark: colors.warning[700],
+    contrastText: colors.base.white
+  },
+  success: {
+    main: colors.success[600],
+    light: colors.success[300],
+    dark: colors.success[700],
+    contrastText: colors.base.white
+  },
+  info: {
+    main: colors.blue[600],
+    light: colors.blue[300],
+    dark: colors.blue[700],
+    contrastText: colors.base.white
+  },
+  background: {
+    default: colors.base.white,
+    paper: colors.base.white
+  },
+  text: {
+    primary: colors.gray[900],
+    secondary: colors.gray[700],
+    disabled: colors.gray[500]
+  },
+  divider: colors.gray[200],
+  action: {
+    active: colors.gray[600],
+    hover: colors.gray[50],
+    selected: colors.brand[50],
+    disabled: colors.gray[400],
+    disabledBackground: colors.gray[100]
+  }
+};
+
+// src/theme/typography.ts
+var typography = {
+  fontFamily,
+  fontWeightRegular: fontWeight.regular,
+  fontWeightMedium: fontWeight.medium,
+  fontWeightBold: fontWeight.bold,
+  // Display styles → MUI headings
+  h1: {
+    fontSize: display.xl.fontSize,
+    lineHeight: display.xl.lineHeight,
+    letterSpacing: display.xl.letterSpacing,
+    fontWeight: fontWeight.semibold
+  },
+  h2: {
+    fontSize: display.lg.fontSize,
+    lineHeight: display.lg.lineHeight,
+    letterSpacing: display.lg.letterSpacing,
+    fontWeight: fontWeight.semibold
+  },
+  h3: {
+    fontSize: display.md.fontSize,
+    lineHeight: display.md.lineHeight,
+    letterSpacing: display.md.letterSpacing,
+    fontWeight: fontWeight.semibold
+  },
+  h4: {
+    fontSize: display.sm.fontSize,
+    lineHeight: display.sm.lineHeight,
+    fontWeight: fontWeight.semibold
+  },
+  h5: {
+    fontSize: display.xs.fontSize,
+    lineHeight: display.xs.lineHeight,
+    fontWeight: fontWeight.semibold
+  },
+  h6: {
+    fontSize: fontSize.xl,
+    lineHeight: lineHeight.xl,
+    fontWeight: fontWeight.semibold
+  },
+  subtitle1: {
+    fontSize: fontSize.lg,
+    lineHeight: lineHeight.lg,
+    fontWeight: fontWeight.medium
+  },
+  subtitle2: {
+    fontSize: fontSize.md,
+    lineHeight: lineHeight.md,
+    fontWeight: fontWeight.medium
+  },
+  body1: {
+    fontSize: fontSize.md,
+    lineHeight: lineHeight.md,
+    fontWeight: fontWeight.regular
+  },
+  body2: {
+    fontSize: fontSize.sm,
+    lineHeight: lineHeight.sm,
+    fontWeight: fontWeight.regular
+  },
+  caption: {
+    fontSize: fontSize.xs,
+    lineHeight: lineHeight.xs,
+    fontWeight: fontWeight.regular
+  },
+  overline: {
+    fontSize: fontSize.xxs,
+    lineHeight: lineHeight.xxs,
+    fontWeight: fontWeight.medium,
+    textTransform: "uppercase",
+    letterSpacing: "0.08em"
+  },
+  button: {
+    fontSize: fontSize.sm,
+    lineHeight: lineHeight.sm,
+    fontWeight: fontWeight.semibold,
+    textTransform: "none"
+  }
+};
+
+// src/theme/components.ts
+var components = {
+  // ─── Button ─────────────────────────────────────────────────────
+  MuiButton: {
+    defaultProps: {
+      disableElevation: true
+    },
+    styleOverrides: {
+      root: {
+        borderRadius: radius.md,
+        fontWeight: 600,
+        "&:focus-visible": {
+          boxShadow: focusRings.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: colors.brand[600],
+        "&:hover": {
+          backgroundColor: colors.brand[700]
+        }
+      },
+      outlinedPrimary: {
+        borderColor: colors.brand[300],
+        color: colors.brand[700],
+        "&:hover": {
+          backgroundColor: colors.brand[50],
+          borderColor: colors.brand[300]
+        }
+      },
+      textPrimary: {
+        color: colors.brand[700],
+        "&:hover": {
+          backgroundColor: colors.brand[50]
+        }
+      }
+    }
+  },
+  // ─── Button Group ───────────────────────────────────────────────
+  MuiButtonGroup: {
+    defaultProps: {
+      disableElevation: true
+    },
+    styleOverrides: {
+      root: {
+        borderRadius: radius.md
+      },
+      grouped: {
+        "&:not(:last-of-type)": {
+          borderRight: `1px solid ${colors.brand[700]}`
+        }
+      }
+    }
+  },
+  // ─── FAB ────────────────────────────────────────────────────────
+  MuiFab: {
+    styleOverrides: {
+      root: {
+        boxShadow: shadows.md,
+        "&:hover": {
+          boxShadow: shadows.lg
+        },
+        "&:focus-visible": {
+          boxShadow: focusRings.brandShadowSm
+        }
+      },
+      primary: {
+        backgroundColor: colors.brand[600],
+        "&:hover": {
+          backgroundColor: colors.brand[700]
+        }
+      }
+    }
+  },
+  // ─── TextField / Input ──────────────────────────────────────────
+  MuiTextField: {
+    defaultProps: {
+      variant: "outlined",
+      size: "small"
+    }
+  },
+  MuiOutlinedInput: {
+    styleOverrides: {
+      root: {
+        borderRadius: radius.md,
+        "&:hover .MuiOutlinedInput-notchedOutline": {
+          borderColor: colors.brand[300]
+        },
+        "&.Mui-focused .MuiOutlinedInput-notchedOutline": {
+          borderColor: colors.brand[600],
+          borderWidth: 1,
+          boxShadow: focusRings.brand
+        },
+        "&.Mui-error .MuiOutlinedInput-notchedOutline": {
+          borderColor: colors.error[300]
+        },
+        "&.Mui-error.Mui-focused .MuiOutlinedInput-notchedOutline": {
+          borderColor: colors.error[600],
+          boxShadow: focusRings.error
+        }
+      },
+      notchedOutline: {
+        borderColor: colors.gray[300]
+      },
+      input: {
+        padding: "10px 14px",
+        fontSize: 16,
+        lineHeight: "24px",
+        "&::placeholder": {
+          color: colors.gray[500],
+          opacity: 1
+        }
+      },
+      inputSizeSmall: {
+        padding: "8px 12px",
+        fontSize: 14,
+        lineHeight: "20px"
+      }
+    }
+  },
+  MuiInputLabel: {
+    styleOverrides: {
+      root: {
+        fontSize: 14,
+        fontWeight: 500,
+        color: colors.gray[700],
+        "&.Mui-focused": {
+          color: colors.gray[700]
+        },
+        "&.Mui-error": {
+          color: colors.error[600]
+        }
+      }
+    }
+  },
+  MuiFormHelperText: {
+    styleOverrides: {
+      root: {
+        fontSize: 14,
+        lineHeight: "20px",
+        marginTop: 6,
+        marginLeft: 0,
+        "&.Mui-error": {
+          color: colors.error[600]
+        }
+      }
+    }
+  },
+  // ─── Select ─────────────────────────────────────────────────────
+  MuiSelect: {
+    defaultProps: {
+      size: "small"
+    },
+    styleOverrides: {
+      icon: {
+        color: colors.gray[500]
+      }
+    }
+  },
+  // ─── Autocomplete ───────────────────────────────────────────────
+  MuiAutocomplete: {
+    styleOverrides: {
+      paper: {
+        borderRadius: radius.md,
+        boxShadow: shadows.lg,
+        border: `1px solid ${colors.gray[200]}`,
+        marginTop: 4
+      },
+      option: {
+        fontSize: 16,
+        lineHeight: "24px",
+        padding: "10px 14px",
+        "&.Mui-focused": {
+          backgroundColor: colors.gray[50]
+        },
+        '&[aria-selected="true"]': {
+          backgroundColor: colors.brand[50]
+        }
+      },
+      listbox: {
+        padding: 4
+      }
+    }
+  },
+  // ─── Checkbox ───────────────────────────────────────────────────
+  MuiCheckbox: {
+    defaultProps: {
+      disableRipple: true
+    },
+    styleOverrides: {
+      root: {
+        color: colors.gray[300],
+        borderRadius: radius.xs,
+        padding: 0,
+        width: 20,
+        height: 20,
+        "&:hover": {
+          backgroundColor: "transparent",
+          color: colors.brand[600]
+        },
+        "&.Mui-checked": {
+          color: colors.brand[600]
+        },
+        "&.Mui-checked:hover": {
+          color: colors.brand[700]
+        },
+        "&.Mui-focusVisible": {
+          outline: "none",
+          boxShadow: focusRings.brand,
+          borderRadius: radius.xs
+        },
+        "&.Mui-disabled": {
+          color: colors.gray[300]
+        }
+      }
+    }
+  },
+  // ─── Radio ──────────────────────────────────────────────────────
+  MuiRadio: {
+    defaultProps: {
+      disableRipple: true
+    },
+    styleOverrides: {
+      root: {
+        color: colors.gray[300],
+        padding: 0,
+        "&:hover": {
+          backgroundColor: "transparent",
+          color: colors.brand[600]
+        },
+        "&.Mui-checked": {
+          color: colors.brand[600]
+        },
+        "&.Mui-checked:hover": {
+          color: colors.brand[700]
+        },
+        "&.Mui-focusVisible": {
+          outline: "none",
+          boxShadow: focusRings.brand,
+          borderRadius: radius.full
+        },
+        "&.Mui-disabled": {
+          color: colors.gray[300]
+        }
+      }
+    }
+  },
+  // ─── Switch ─────────────────────────────────────────────────────
+  MuiSwitch: {
+    defaultProps: {
+      disableRipple: true
+    },
+    styleOverrides: {
+      root: {
+        width: 44,
+        height: 24,
+        padding: 0
+      },
+      switchBase: {
+        padding: 2,
+        "&.Mui-checked": {
+          transform: "translateX(20px)",
+          color: colors.base.white,
+          "& + .MuiSwitch-track": {
+            backgroundColor: colors.brand[600],
+            opacity: 1
+          }
+        },
+        "&.Mui-checked:hover + .MuiSwitch-track": {
+          backgroundColor: colors.brand[700]
+        },
+        "&.Mui-focusVisible .MuiSwitch-thumb": {
+          boxShadow: focusRings.brand
+        },
+        "&.Mui-disabled .MuiSwitch-thumb": {
+          color: colors.gray[100]
+        },
+        "&.Mui-disabled + .MuiSwitch-track": {
+          opacity: 0.5
+        }
+      },
+      thumb: {
+        width: 20,
+        height: 20,
+        boxShadow: "0px 1px 2px 0px #1018280d"
+      },
+      track: {
+        borderRadius: radius.full,
+        backgroundColor: colors.gray[200],
+        opacity: 1
+      }
+    }
+  },
+  // ─── Toggle Button ─────────────────────────────────────────────
+  MuiToggleButton: {
+    styleOverrides: {
+      root: {
+        borderRadius: radius.md,
+        borderColor: colors.gray[300],
+        color: colors.gray[700],
+        fontSize: 14,
+        fontWeight: 600,
+        lineHeight: "20px",
+        padding: "8px 14px",
+        textTransform: "none",
+        "&:hover": {
+          backgroundColor: colors.gray[50]
+        },
+        "&.Mui-selected": {
+          backgroundColor: colors.brand[50],
+          color: colors.brand[700],
+          borderColor: colors.brand[300],
+          "&:hover": {
+            backgroundColor: colors.brand[100]
+          }
+        },
+        "&:focus-visible": {
+          boxShadow: focusRings.brandShadowXs
+        }
+      }
+    }
+  },
+  MuiToggleButtonGroup: {
+    styleOverrides: {
+      root: {
+        borderRadius: radius.md
+      },
+      grouped: {
+        "&:not(:first-of-type)": {
+          borderRadius: radius.md,
+          marginLeft: -1
+        },
+        "&:first-of-type": {
+          borderRadius: radius.md
+        }
+      }
+    }
+  },
+  // ─── Card ───────────────────────────────────────────────────────
+  MuiCard: {
+    defaultProps: {
+      elevation: 0
+    },
+    styleOverrides: {
+      root: {
+        borderRadius: radius.xl,
+        border: `1px solid ${colors.gray[200]}`,
+        backgroundColor: colors.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: radius.lg
+      },
+      elevation1: {
+        boxShadow: shadows.xs,
+        border: `1px solid ${colors.gray[200]}`
+      },
+      elevation2: {
+        boxShadow: shadows.sm,
+        border: `1px solid ${colors.gray[200]}`
+      },
+      elevation3: {
+        boxShadow: shadows.md,
+        border: `1px solid ${colors.gray[200]}`
+      },
+      elevation4: {
+        boxShadow: shadows.lg,
+        border: `1px solid ${colors.gray[200]}`
+      },
+      elevation8: {
+        boxShadow: shadows.xl,
+        border: `1px solid ${colors.gray[200]}`
+      },
+      elevation16: {
+        boxShadow: shadows["2xl"],
+        border: `1px solid ${colors.gray[200]}`
+      },
+      elevation24: {
+        boxShadow: shadows["3xl"],
+        border: `1px solid ${colors.gray[200]}`
+      }
+    }
+  },
+  // ─── Accordion ──────────────────────────────────────────────────
+  MuiAccordion: {
+    defaultProps: {
+      disableGutters: true,
+      elevation: 0
+    },
+    styleOverrides: {
+      root: {
+        border: `1px solid ${colors.gray[200]}`,
+        borderRadius: radius.lg,
+        "&:not(:last-child)": {
+          marginBottom: 8
+        },
+        "&:before": {
+          display: "none"
+        },
+        "&.Mui-expanded": {
+          margin: 0,
+          marginBottom: 8,
+          borderRadius: radius.lg
+        }
+      }
+    }
+  },
+  MuiAccordionSummary: {
+    styleOverrides: {
+      root: {
+        padding: "0 24px",
+        minHeight: 56,
+        "&.Mui-expanded": {
+          minHeight: 56,
+          borderBottom: `1px solid ${colors.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 ${colors.gray[200]}`,
+        backgroundColor: colors.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: radius.md,
+        fontWeight: 500,
+        fontSize: 14
+      }
+    }
+  },
+  // ─── Form Control / Label ───────────────────────────────────────
+  MuiFormControlLabel: {
+    styleOverrides: {
+      root: {
+        marginLeft: 0,
+        gap: 8
+      },
+      label: {
+        fontSize: 14,
+        lineHeight: "20px",
+        fontWeight: 500,
+        color: colors.gray[700]
+      }
+    }
+  },
+  // ─── Table ───────────────────────────────────────────────────────
+  MuiTable: {
+    styleOverrides: {
+      root: {
+        borderCollapse: "separate",
+        borderSpacing: 0
+      }
+    }
+  },
+  MuiTableCell: {
+    styleOverrides: {
+      root: {
+        borderBottom: `1px solid ${colors.gray[200]}`,
+        padding: "16px 24px",
+        fontSize: 14,
+        lineHeight: "20px",
+        color: colors.gray[600]
+      },
+      head: {
+        backgroundColor: colors.gray[50],
+        color: colors.gray[600],
+        fontWeight: 500,
+        fontSize: 12,
+        lineHeight: "18px"
+      },
+      body: {
+        color: colors.gray[600]
+      }
+    }
+  },
+  MuiTableHead: {
+    styleOverrides: {
+      root: {
+        backgroundColor: colors.gray[50],
+        borderBottom: `1px solid ${colors.gray[200]}`
+      }
+    }
+  },
+  MuiTableRow: {
+    styleOverrides: {
+      root: {
+        "&:last-child td, &:last-child th": {
+          border: 0
+        },
+        "&:hover": {
+          backgroundColor: colors.gray[50]
+        },
+        "&.Mui-selected": {
+          backgroundColor: colors.brand[50],
+          "&:hover": {
+            backgroundColor: colors.brand[50]
+          }
+        }
+      }
+    }
+  },
+  MuiTableContainer: {
+    styleOverrides: {
+      root: {
+        borderRadius: radius.xl,
+        border: `1px solid ${colors.gray[200]}`,
+        boxShadow: "none"
+      }
+    }
+  },
+  // ─── Badge ──────────────────────────────────────────────────────
+  MuiBadge: {
+    styleOverrides: {
+      standard: {
+        fontWeight: 500,
+        fontSize: 12,
+        lineHeight: "18px",
+        minWidth: 20,
+        height: 20,
+        borderRadius: radius.full
+      },
+      colorPrimary: {
+        backgroundColor: colors.brand[600]
+      },
+      colorError: {
+        backgroundColor: colors.error[600]
+      },
+      colorSuccess: {
+        backgroundColor: colors.success[600]
+      },
+      colorWarning: {
+        backgroundColor: colors.warning[600]
+      },
+      dot: {
+        minWidth: 8,
+        height: 8,
+        borderRadius: radius.full
+      }
+    }
+  },
+  // ─── Divider ────────────────────────────────────────────────────
+  MuiDivider: {
+    styleOverrides: {
+      root: {
+        borderColor: colors.gray[200]
+      }
+    }
+  },
+  // ─── List ───────────────────────────────────────────────────────
+  MuiList: {
+    styleOverrides: {
+      root: {
+        padding: 4
+      }
+    }
+  },
+  MuiListItemButton: {
+    styleOverrides: {
+      root: {
+        borderRadius: radius.sm,
+        padding: "8px 12px",
+        "&:hover": {
+          backgroundColor: colors.gray[50]
+        },
+        "&.Mui-selected": {
+          backgroundColor: colors.brand[50],
+          color: colors.brand[700],
+          "&:hover": {
+            backgroundColor: colors.brand[100]
+          }
+        }
+      }
+    }
+  },
+  MuiListItemIcon: {
+    styleOverrides: {
+      root: {
+        minWidth: 36,
+        color: colors.gray[500]
+      }
+    }
+  },
+  MuiListItemText: {
+    styleOverrides: {
+      primary: {
+        fontSize: 14,
+        lineHeight: "20px",
+        fontWeight: 500,
+        color: colors.gray[700]
+      },
+      secondary: {
+        fontSize: 14,
+        lineHeight: "20px",
+        color: colors.gray[500]
+      }
+    }
+  },
+  // ─── Tooltip ────────────────────────────────────────────────────
+  MuiTooltip: {
+    styleOverrides: {
+      tooltip: {
+        backgroundColor: colors.gray[900],
+        color: colors.base.white,
+        fontSize: 12,
+        lineHeight: "18px",
+        fontWeight: 600,
+        padding: "8px 12px",
+        borderRadius: radius.md,
+        boxShadow: shadows.lg
+      },
+      arrow: {
+        color: colors.gray[900]
+      }
+    }
+  },
+  // ─── Alert ──────────────────────────────────────────────────────
+  MuiAlert: {
+    defaultProps: {
+      variant: "standard"
+    },
+    styleOverrides: {
+      root: {
+        borderRadius: radius.xl,
+        fontSize: 14,
+        lineHeight: "20px",
+        padding: "12px 16px"
+      },
+      standardError: {
+        backgroundColor: colors.error[50],
+        color: colors.error[700],
+        border: `1px solid ${colors.error[300]}`,
+        "& .MuiAlert-icon": {
+          color: colors.error[600]
+        }
+      },
+      standardWarning: {
+        backgroundColor: colors.warning[50],
+        color: colors.warning[700],
+        border: `1px solid ${colors.warning[300]}`,
+        "& .MuiAlert-icon": {
+          color: colors.warning[600]
+        }
+      },
+      standardSuccess: {
+        backgroundColor: colors.success[50],
+        color: colors.success[700],
+        border: `1px solid ${colors.success[300]}`,
+        "& .MuiAlert-icon": {
+          color: colors.success[600]
+        }
+      },
+      standardInfo: {
+        backgroundColor: colors.blue[50],
+        color: colors.blue[700],
+        border: `1px solid ${colors.blue[300]}`,
+        "& .MuiAlert-icon": {
+          color: colors.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: radius.xl,
+        boxShadow: shadows.xl,
+        padding: 0
+      }
+    }
+  },
+  MuiDialogTitle: {
+    styleOverrides: {
+      root: {
+        fontSize: 18,
+        lineHeight: "28px",
+        fontWeight: 600,
+        color: colors.gray[900],
+        padding: "24px 24px 0"
+      }
+    }
+  },
+  MuiDialogContent: {
+    styleOverrides: {
+      root: {
+        padding: "20px 24px",
+        fontSize: 14,
+        lineHeight: "20px",
+        color: colors.gray[600]
+      }
+    }
+  },
+  MuiDialogActions: {
+    styleOverrides: {
+      root: {
+        padding: "0 24px 24px",
+        gap: 12
+      }
+    }
+  },
+  // ─── Progress ───────────────────────────────────────────────────
+  MuiLinearProgress: {
+    styleOverrides: {
+      root: {
+        borderRadius: radius.full,
+        height: 8,
+        backgroundColor: colors.gray[200]
+      },
+      barColorPrimary: {
+        backgroundColor: colors.brand[600],
+        borderRadius: radius.full
+      },
+      barColorSecondary: {
+        backgroundColor: colors.gray[600],
+        borderRadius: radius.full
+      }
+    }
+  },
+  MuiCircularProgress: {
+    styleOverrides: {
+      colorPrimary: {
+        color: colors.brand[600]
+      },
+      colorSecondary: {
+        color: colors.gray[600]
+      }
+    }
+  },
+  // ─── Skeleton ───────────────────────────────────────────────────
+  MuiSkeleton: {
+    defaultProps: {
+      animation: "wave"
+    },
+    styleOverrides: {
+      root: {
+        backgroundColor: colors.gray[100]
+      },
+      rounded: {
+        borderRadius: radius.md
+      },
+      circular: {
+        borderRadius: radius.full
+      }
+    }
+  },
+  // ─── Snackbar ───────────────────────────────────────────────────
+  MuiSnackbarContent: {
+    styleOverrides: {
+      root: {
+        backgroundColor: colors.gray[900],
+        color: colors.base.white,
+        borderRadius: radius.xl,
+        boxShadow: shadows.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"
+      }
+    }
+  }
+};
+
+// src/theme/shadows.ts
+var shadows2 = [
+  "none",
+  // 0
+  shadows.xs,
+  // 1
+  shadows.sm,
+  // 2
+  shadows.sm,
+  // 3
+  shadows.md,
+  // 4
+  shadows.md,
+  // 5
+  shadows.md,
+  // 6
+  shadows.lg,
+  // 7
+  shadows.lg,
+  // 8
+  shadows.lg,
+  // 9
+  shadows.xl,
+  // 10
+  shadows.xl,
+  // 11
+  shadows.xl,
+  // 12
+  shadows["2xl"],
+  // 13
+  shadows["2xl"],
+  // 14
+  shadows["2xl"],
+  // 15
+  shadows["3xl"],
+  // 16
+  shadows["3xl"],
+  // 17
+  shadows["3xl"],
+  // 18
+  shadows["3xl"],
+  // 19
+  shadows["3xl"],
+  // 20
+  shadows["3xl"],
+  // 21
+  shadows["3xl"],
+  // 22
+  shadows["3xl"],
+  // 23
+  shadows["3xl"]
+  // 24
+];
+
+// src/theme/index.ts
+var forestThemeOptions = {
+  palette,
+  typography,
+  components,
+  shadows: shadows2,
+  shape: {
+    borderRadius: 8
+  }
+};
+var forestTheme = styles.createTheme(forestThemeOptions);
+
+exports.colors = colors;
+exports.components = components;
+exports.container = container;
+exports.display = display;
+exports.focusRings = focusRings;
+exports.fontFamily = fontFamily;
+exports.fontSize = fontSize;
+exports.fontWeight = fontWeight;
+exports.forestTheme = forestTheme;
+exports.forestThemeOptions = forestThemeOptions;
+exports.lineHeight = lineHeight;
+exports.palette = palette;
+exports.radius = radius;
+exports.shadows = shadows2;
+exports.spacing = spacing;
+exports.typography = typography;
+exports.widths = widths;
+//# sourceMappingURL=theme.js.map
+//# sourceMappingURL=theme.js.map