@matteoaliano/forest-ui 0.2.1 → 0.2.2

package/dist/index.js

@@ -19,6 +19,7 @@ var MuiToggleButton = require('@mui/material/ToggleButton');
 var MuiToggleButtonGroup = require('@mui/material/ToggleButtonGroup');
 var MuiBadge = require('@mui/material/Badge');
 var MuiChip = require('@mui/material/Chip');
+var utils = require('@mui/material/utils');
 var MuiDivider = require('@mui/material/Divider');
 var MuiList = require('@mui/material/List');
 var MuiListItem = require('@mui/material/ListItem');
@@ -33,6 +34,7 @@ var MuiTableCell = require('@mui/material/TableCell');
 var MuiTableContainer = require('@mui/material/TableContainer');
 var MuiTableHead = require('@mui/material/TableHead');
 var MuiTableRow = require('@mui/material/TableRow');
+var xDataGrid = require('@mui/x-data-grid');
 var MuiTooltip = require('@mui/material/Tooltip');
 var MuiTypography = require('@mui/material/Typography');
 var MuiAlert = require('@mui/material/Alert');
@@ -289,10 +291,249 @@ var widths = {
   "5xl": 1600,
   "6xl": 1920
 };
+var text = {
+  primary: colors.gray[900],
+  secondary: colors.gray[700],
+  secondaryHover: colors.gray[800],
+  tertiary: colors.gray[600],
+  tertiaryHover: colors.gray[700],
+  quaternary: colors.gray[500],
+  disabled: colors.gray[500],
+  placeholder: colors.gray[500],
+  placeholderSubtle: colors.gray[300],
+  white: colors.base.white,
+  brandPrimary: colors.brand[900],
+  brandSecondary: colors.brand[700],
+  brandTertiary: colors.brand[600],
+  brandTertiaryAlt: colors.brand[600],
+  primaryOnBrand: colors.base.white,
+  secondaryOnBrand: colors.brand[200],
+  tertiaryOnBrand: colors.brand[200],
+  quaternaryOnBrand: colors.brand[300],
+  errorPrimary: colors.error[600],
+  warningPrimary: colors.warning[600],
+  successPrimary: colors.success[600]
+};
+var bg = {
+  primary: colors.base.white,
+  primaryAlt: colors.base.white,
+  primaryHover: colors.gray[50],
+  primarySolid: colors.gray[950],
+  secondary: colors.gray[50],
+  secondaryAlt: colors.gray[50],
+  secondarySubtle: colors.gray[25],
+  secondaryHover: colors.gray[100],
+  secondarySolid: colors.gray[600],
+  tertiary: colors.gray[100],
+  quaternary: colors.gray[200],
+  active: colors.gray[50],
+  disabled: colors.gray[100],
+  disabledSubtle: colors.gray[50],
+  overlay: colors.gray[950],
+  brandPrimary: colors.brand[50],
+  brandPrimaryAlt: colors.brand[50],
+  brandSecondary: colors.brand[100],
+  brandSolid: colors.brand[600],
+  brandSolidHover: colors.brand[700],
+  brandSection: colors.brand[800],
+  brandSectionSubtle: colors.brand[700],
+  errorPrimary: colors.error[50],
+  errorSecondary: colors.error[100],
+  errorSolid: colors.error[600],
+  warningPrimary: colors.warning[50],
+  warningSecondary: colors.warning[100],
+  warningSolid: colors.warning[600],
+  successPrimary: colors.success[50],
+  successSecondary: colors.success[100],
+  successSolid: colors.success[600]
+};
+var fg = {
+  primary: colors.gray[900],
+  secondary: colors.gray[700],
+  secondaryHover: colors.gray[800],
+  tertiary: colors.gray[600],
+  tertiaryHover: colors.gray[700],
+  quaternary: colors.gray[500],
+  quaternaryHover: colors.gray[600],
+  quinary: colors.gray[400],
+  quinaryHover: colors.gray[500],
+  senary: colors.gray[300],
+  white: colors.base.white,
+  disabled: colors.gray[400],
+  disabledSubtle: colors.gray[300],
+  brandPrimary: colors.brand[600],
+  brandPrimaryAlt: colors.brand[600],
+  brandSecondary: colors.brand[500],
+  errorPrimary: colors.error[600],
+  errorSecondary: colors.error[500],
+  warningPrimary: colors.warning[600],
+  warningSecondary: colors.warning[500],
+  successPrimary: colors.success[600],
+  successSecondary: colors.success[500]
+};
+var border = {
+  primary: colors.gray[300],
+  secondary: colors.gray[200],
+  tertiary: colors.gray[100],
+  disabled: colors.gray[300],
+  disabledSubtle: colors.gray[200],
+  brand: colors.brand[300],
+  brandSolid: colors.brand[600],
+  brandSolidAlt: colors.brand[600],
+  error: colors.error[300],
+  errorSolid: colors.error[600]
+};
+var buttonColors = {
+  primary: {
+    bg: colors.brand[600],
+    bgHover: colors.brand[700],
+    fg: colors.base.white,
+    fgHover: colors.base.white,
+    border: colors.brand[600],
+    borderHover: colors.brand[700]
+  },
+  secondary: {
+    bg: colors.base.white,
+    bgHover: colors.gray[50],
+    fg: colors.gray[700],
+    fgHover: colors.gray[800],
+    border: colors.gray[300],
+    borderHover: colors.gray[300]
+  },
+  secondaryColor: {
+    bg: colors.base.white,
+    bgHover: colors.brand[50],
+    fg: colors.brand[700],
+    fgHover: colors.brand[800],
+    border: colors.brand[300],
+    borderHover: colors.brand[300]
+  },
+  tertiary: {
+    fg: colors.gray[600],
+    fgHover: colors.gray[700],
+    bgHover: colors.gray[50]
+  },
+  tertiaryColor: {
+    fg: colors.brand[700],
+    fgHover: colors.brand[800],
+    bgHover: colors.brand[50]
+  },
+  primaryError: {
+    bg: colors.error[600],
+    bgHover: colors.error[700],
+    fg: colors.base.white,
+    fgHover: colors.base.white,
+    border: colors.error[600],
+    borderHover: colors.error[700]
+  },
+  secondaryError: {
+    bg: colors.base.white,
+    bgHover: colors.error[50],
+    fg: colors.error[700],
+    fgHover: colors.error[800],
+    border: colors.error[300],
+    borderHover: colors.error[300]
+  },
+  tertiaryError: {
+    fg: colors.error[700],
+    fgHover: colors.error[800],
+    bgHover: colors.error[50]
+  }
+};
+var avatarColors = {
+  bg: colors.gray[100],
+  contrastBorder: "#00000014",
+  profilePhotoBorder: colors.base.white,
+  focusBorder: "#98a2b324"
+};
+var breadcrumbColors = {
+  fg: colors.gray[600],
+  fgHover: colors.gray[700],
+  bgHover: colors.gray[50],
+  brandBgHover: colors.brand[50],
+  brandFgHover: colors.brand[700],
+  iconFg: colors.gray[500],
+  iconFgHover: colors.gray[700],
+  brandIconFgHover: colors.brand[700]
+};
+var iconColors = {
+  fgBrand: colors.brand[600],
+  fgBrandOnBrand: colors.brand[200],
+  featuredModernBorder: colors.gray[200],
+  featuredLightFgBrand: colors.brand[600],
+  featuredLightFgGray: colors.gray[500],
+  featuredLightFgError: colors.error[600],
+  featuredLightFgWarning: colors.warning[600],
+  featuredLightFgSuccess: colors.success[600],
+  featuredDarkFgBrand: colors.base.white,
+  featuredDarkFgGray: colors.base.white,
+  featuredDarkFgError: colors.base.white,
+  featuredDarkFgWarning: colors.base.white,
+  featuredDarkFgSuccess: colors.base.white
+};
+var navColors = {
+  itemIconFg: colors.gray[500],
+  itemIconFgActive: colors.gray[500],
+  itemButtonIconFg: colors.gray[500],
+  itemButtonIconFgActive: colors.gray[700]
+};
+var sliderColors = {
+  handleBorder: colors.brand[600],
+  handleBg: colors.base.white
+};
+var toggleColors = {
+  buttonFgDisabled: colors.gray[50]
+};
+var chartColors = {
+  axisFg: colors.gray[200],
+  gridlineFg: colors.gray[100],
+  labelFg: colors.gray[600],
+  labelFgEmphasis: colors.gray[700],
+  bg: colors.base.white,
+  bgAlt: colors.gray[50],
+  tooltipBg: colors.gray[950],
+  tooltipFg: colors.base.white,
+  crosshairFg: colors.gray[500],
+  legendFg: colors.gray[700],
+  series1Fg: colors.blue[600],
+  series1FgHover: colors.blue[700],
+  series1Bg: colors.blue[100],
+  series1BgHover: colors.blue[200],
+  series2Fg: colors.brand[600],
+  series2FgHover: colors.brand[700],
+  series2Bg: colors.brand[100],
+  series2BgHover: colors.brand[200]
+};
+var alpha = {
+  white: {
+    10: "#ffffff1a",
+    20: "#ffffff33",
+    30: "#ffffff4d",
+    40: "#ffffff66",
+    50: "#ffffff80",
+    60: "#ffffff99",
+    70: "#ffffffb3",
+    80: "#ffffffcc",
+    90: "#ffffffe6",
+    100: "#ffffff"
+  },
+  black: {
+    10: "#0000001a",
+    20: "#00000033",
+    30: "#0000004d",
+    40: "#00000066",
+    50: "#00000080",
+    60: "#00000099",
+    70: "#000000b3",
+    80: "#000000cc",
+    90: "#000000e6",
+    100: "#000000"
+  }
+};
 
 // src/theme/palette.ts
 function buildPalette(tokens) {
-  const { colors: colors2 } = tokens;
+  const { colors: colors2, text: text2, bg: bg2, fg: fg2, border: border2 } = tokens;
   return {
     primary: {
       main: colors2.brand[600],
@@ -331,26 +572,30 @@ function buildPalette(tokens) {
       contrastText: colors2.base.white
     },
     background: {
-      default: colors2.base.white,
-      paper: colors2.base.white
+      default: bg2.primary,
+      paper: bg2.primary
     },
     text: {
-      primary: colors2.gray[900],
-      secondary: colors2.gray[700],
-      disabled: colors2.gray[500]
+      primary: text2.primary,
+      secondary: text2.secondary,
+      disabled: text2.disabled
     },
-    divider: colors2.gray[200],
+    divider: border2.secondary,
     action: {
-      active: colors2.gray[600],
-      hover: colors2.gray[50],
-      selected: colors2.brand[50],
-      disabled: colors2.gray[400],
-      disabledBackground: colors2.gray[100]
+      active: fg2.tertiary,
+      hover: bg2.primaryHover,
+      selected: bg2.brandPrimary,
+      disabled: fg2.disabled,
+      disabledBackground: bg2.disabled
     }
   };
 }
 var palette = buildPalette({
-  colors
+  colors,
+  text,
+  bg,
+  fg,
+  border
 });
 
 // src/theme/typography.ts
@@ -445,7 +690,17 @@ var typography = buildTypography({
 
 // src/theme/components.ts
 function buildComponents(tokens) {
-  const { colors: colors2, radius: radius2, focusRings: focusRings2, shadows: tokenShadows } = tokens;
+  const {
+    colors: colors2,
+    radius: radius2,
+    focusRings: focusRings2,
+    shadows: tokenShadows,
+    text: text2,
+    bg: bg2,
+    fg: fg2,
+    border: border2,
+    buttonColors: buttonColors2
+  } = tokens;
   return {
     // ─── Button ─────────────────────────────────────────────────────
     MuiButton: {
@@ -456,43 +711,42 @@ function buildComponents(tokens) {
         root: {
           borderRadius: radius2.md,
           fontWeight: 600,
+          boxShadow: tokenShadows.xs,
+          height: 32,
+          padding: "6px 12px",
+          fontSize: 14,
+          lineHeight: "20px",
           "&: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],
+          backgroundColor: buttonColors2.primary.bg,
           "&:hover": {
-            backgroundColor: colors2.brand[700]
+            backgroundColor: buttonColors2.primary.bgHover
           }
         },
         outlinedPrimary: {
-          borderColor: colors2.brand[300],
-          color: colors2.brand[700],
+          borderColor: buttonColors2.secondaryColor.border,
+          color: buttonColors2.secondaryColor.fg,
           "&:hover": {
-            backgroundColor: colors2.brand[50],
-            borderColor: colors2.brand[300]
+            backgroundColor: buttonColors2.secondaryColor.bgHover,
+            borderColor: buttonColors2.secondaryColor.borderHover
+          }
+        },
+        outlinedSecondary: {
+          borderColor: buttonColors2.secondary.border,
+          "&:hover": {
+            borderColor: buttonColors2.secondary.borderHover
           }
         },
+        text: {
+          boxShadow: "none"
+        },
         textPrimary: {
-          color: colors2.brand[700],
+          color: buttonColors2.tertiaryColor.fg,
           "&:hover": {
-            backgroundColor: colors2.brand[50]
+            backgroundColor: buttonColors2.tertiaryColor.bgHover
           }
         }
       }
@@ -508,7 +762,7 @@ function buildComponents(tokens) {
         },
         grouped: {
           "&:not(:last-of-type)": {
-            borderRight: `1px solid ${colors2.brand[700]}`
+            borderRight: `1px solid ${buttonColors2.primary.borderHover}`
           }
         }
       }
@@ -526,9 +780,9 @@ function buildComponents(tokens) {
           }
         },
         primary: {
-          backgroundColor: colors2.brand[600],
+          backgroundColor: buttonColors2.primary.bg,
           "&:hover": {
-            backgroundColor: colors2.brand[700]
+            backgroundColor: buttonColors2.primary.bgHover
           }
         }
       }
@@ -540,37 +794,46 @@ function buildComponents(tokens) {
         size: "small"
       }
     },
+    MuiInputBase: {
+      styleOverrides: {
+        input: {
+          "&::placeholder": {
+            color: text2.placeholder,
+            WebkitTextFillColor: text2.placeholder,
+            fontWeight: 400,
+            opacity: 1
+          }
+        }
+      }
+    },
     MuiOutlinedInput: {
       styleOverrides: {
         root: {
           borderRadius: radius2.md,
+          boxShadow: tokenShadows.xs,
           "&:hover .MuiOutlinedInput-notchedOutline": {
-            borderColor: colors2.brand[300]
+            borderColor: border2.brand
           },
           "&.Mui-focused .MuiOutlinedInput-notchedOutline": {
-            borderColor: colors2.brand[600],
+            borderColor: border2.brandSolid,
             borderWidth: 1,
             boxShadow: "none"
           },
           "&.Mui-error .MuiOutlinedInput-notchedOutline": {
-            borderColor: colors2.error[300]
+            borderColor: border2.error
           },
           "&.Mui-error.Mui-focused .MuiOutlinedInput-notchedOutline": {
-            borderColor: colors2.error[600],
+            borderColor: border2.errorSolid,
             boxShadow: "none"
           }
         },
         notchedOutline: {
-          borderColor: colors2.gray[300]
+          borderColor: border2.primary
         },
         input: {
           padding: "10px 14px",
           fontSize: 16,
-          lineHeight: "24px",
-          "&::placeholder": {
-            color: colors2.gray[500],
-            opacity: 1
-          }
+          lineHeight: "24px"
         },
         inputSizeSmall: {
           padding: "8px 12px",
@@ -579,17 +842,30 @@ function buildComponents(tokens) {
         }
       }
     },
+    MuiFormLabel: {
+      styleOverrides: {
+        root: {
+          color: text2.placeholder,
+          "&.Mui-focused": {
+            color: text2.placeholder
+          },
+          "&.Mui-error": {
+            color: text2.errorPrimary
+          }
+        }
+      }
+    },
     MuiInputLabel: {
       styleOverrides: {
         root: {
           fontSize: 14,
           fontWeight: 500,
-          color: colors2.gray[700],
+          color: text2.placeholder,
           "&.Mui-focused": {
-            color: colors2.gray[700]
+            color: text2.placeholder
           },
           "&.Mui-error": {
-            color: colors2.error[600]
+            color: text2.errorPrimary
           }
         }
       }
@@ -602,7 +878,7 @@ function buildComponents(tokens) {
           marginTop: 6,
           marginLeft: 0,
           "&.Mui-error": {
-            color: colors2.error[600]
+            color: text2.errorPrimary
           }
         }
       }
@@ -613,8 +889,15 @@ function buildComponents(tokens) {
         size: "small"
       },
       styleOverrides: {
+        select: {
+          "&.MuiSelect-select": {
+            "&[aria-placeholder], &:empty + .MuiSelect-nativeInput[value='']~&": {
+              color: text2.placeholder
+            }
+          }
+        },
         icon: {
-          color: colors2.gray[500]
+          color: text2.placeholder
         }
       }
     },
@@ -624,7 +907,7 @@ function buildComponents(tokens) {
         paper: {
           borderRadius: radius2.md,
           boxShadow: tokenShadows.lg,
-          border: `1px solid ${colors2.gray[200]}`,
+          border: `1px solid ${border2.secondary}`,
           marginTop: 4
         },
         option: {
@@ -632,10 +915,10 @@ function buildComponents(tokens) {
           lineHeight: "24px",
           padding: "10px 14px",
           "&.Mui-focused": {
-            backgroundColor: colors2.gray[50]
+            backgroundColor: bg2.primaryHover
           },
           '&[aria-selected="true"]': {
-            backgroundColor: colors2.brand[50]
+            backgroundColor: bg2.brandPrimary
           }
         },
         listbox: {
@@ -650,17 +933,17 @@ function buildComponents(tokens) {
       },
       styleOverrides: {
         root: {
-          color: colors2.gray[300],
+          color: border2.primary,
           borderRadius: radius2.xs,
           padding: 0,
           width: 20,
           height: 20,
           "&:hover": {
             backgroundColor: "transparent",
-            color: colors2.brand[600]
+            color: fg2.brandPrimary
           },
           "&.Mui-checked": {
-            color: colors2.brand[600]
+            color: fg2.brandPrimary
           },
           "&.Mui-checked:hover": {
             color: colors2.brand[700]
@@ -671,7 +954,7 @@ function buildComponents(tokens) {
             borderRadius: radius2.xs
           },
           "&.Mui-disabled": {
-            color: colors2.gray[300]
+            color: border2.primary
           }
         }
       }
@@ -683,14 +966,14 @@ function buildComponents(tokens) {
       },
       styleOverrides: {
         root: {
-          color: colors2.gray[300],
+          color: border2.primary,
           padding: 0,
           "&:hover": {
             backgroundColor: "transparent",
-            color: colors2.brand[600]
+            color: fg2.brandPrimary
           },
           "&.Mui-checked": {
-            color: colors2.brand[600]
+            color: fg2.brandPrimary
           },
           "&.Mui-checked:hover": {
             color: colors2.brand[700]
@@ -701,7 +984,7 @@ function buildComponents(tokens) {
             borderRadius: radius2.full
           },
           "&.Mui-disabled": {
-            color: colors2.gray[300]
+            color: border2.primary
           }
         }
       }
@@ -721,9 +1004,9 @@ function buildComponents(tokens) {
           padding: 2,
           "&.Mui-checked": {
             transform: "translateX(20px)",
-            color: colors2.base.white,
+            color: fg2.white,
             "& + .MuiSwitch-track": {
-              backgroundColor: colors2.brand[600],
+              backgroundColor: fg2.brandPrimary,
               opacity: 1
             }
           },
@@ -734,7 +1017,7 @@ function buildComponents(tokens) {
             boxShadow: focusRings2.brand
           },
           "&.Mui-disabled .MuiSwitch-thumb": {
-            color: colors2.gray[100]
+            color: bg2.disabled
           },
           "&.Mui-disabled + .MuiSwitch-track": {
             opacity: 0.5
@@ -747,7 +1030,7 @@ function buildComponents(tokens) {
         },
         track: {
           borderRadius: radius2.full,
-          backgroundColor: colors2.gray[200],
+          backgroundColor: border2.secondary,
           opacity: 1
         }
       }
@@ -756,23 +1039,24 @@ function buildComponents(tokens) {
     MuiToggleButton: {
       styleOverrides: {
         root: {
-          borderRadius: radius2.md,
-          borderColor: colors2.gray[300],
-          color: colors2.gray[700],
+          borderColor: border2.primary,
+          color: text2.secondary,
           fontSize: 14,
           fontWeight: 600,
           lineHeight: "20px",
-          padding: "8px 14px",
+          height: 32,
+          padding: "6px 12px",
           textTransform: "none",
           "&:hover": {
-            backgroundColor: colors2.gray[50]
+            backgroundColor: bg2.primaryHover,
+            borderColor: border2.primary
           },
           "&.Mui-selected": {
-            backgroundColor: colors2.brand[50],
-            color: colors2.brand[700],
-            borderColor: colors2.brand[300],
+            backgroundColor: bg2.brandPrimary,
+            color: buttonColors2.secondaryColor.fg,
+            borderColor: border2.brand,
             "&:hover": {
-              backgroundColor: colors2.brand[100]
+              backgroundColor: bg2.brandSecondary
             }
           },
           "&:focus-visible": {
@@ -784,15 +1068,21 @@ function buildComponents(tokens) {
     MuiToggleButtonGroup: {
       styleOverrides: {
         root: {
-          borderRadius: radius2.md
+          borderRadius: radius2.md,
+          overflow: "hidden"
         },
         grouped: {
+          borderRadius: 0,
           "&:not(:first-of-type)": {
-            borderRadius: radius2.md,
             marginLeft: -1
           },
           "&:first-of-type": {
-            borderRadius: radius2.md
+            borderTopLeftRadius: radius2.md,
+            borderBottomLeftRadius: radius2.md
+          },
+          "&:last-of-type": {
+            borderTopRightRadius: radius2.md,
+            borderBottomRightRadius: radius2.md
           }
         }
       }
@@ -805,8 +1095,8 @@ function buildComponents(tokens) {
       styleOverrides: {
         root: {
           borderRadius: radius2.xl,
-          border: `1px solid ${colors2.gray[200]}`,
-          backgroundColor: colors2.base.white,
+          border: `1px solid ${border2.secondary}`,
+          backgroundColor: bg2.primary,
           overflow: "hidden"
         }
       }
@@ -856,31 +1146,31 @@ function buildComponents(tokens) {
         },
         elevation1: {
           boxShadow: tokenShadows.xs,
-          border: `1px solid ${colors2.gray[200]}`
+          border: `1px solid ${border2.secondary}`
         },
         elevation2: {
           boxShadow: tokenShadows.sm,
-          border: `1px solid ${colors2.gray[200]}`
+          border: `1px solid ${border2.secondary}`
         },
         elevation3: {
           boxShadow: tokenShadows.md,
-          border: `1px solid ${colors2.gray[200]}`
+          border: `1px solid ${border2.secondary}`
         },
         elevation4: {
           boxShadow: tokenShadows.lg,
-          border: `1px solid ${colors2.gray[200]}`
+          border: `1px solid ${border2.secondary}`
         },
         elevation8: {
           boxShadow: tokenShadows.xl,
-          border: `1px solid ${colors2.gray[200]}`
+          border: `1px solid ${border2.secondary}`
         },
         elevation16: {
           boxShadow: tokenShadows["2xl"],
-          border: `1px solid ${colors2.gray[200]}`
+          border: `1px solid ${border2.secondary}`
         },
         elevation24: {
           boxShadow: tokenShadows["3xl"],
-          border: `1px solid ${colors2.gray[200]}`
+          border: `1px solid ${border2.secondary}`
         }
       }
     },
@@ -892,7 +1182,7 @@ function buildComponents(tokens) {
       },
       styleOverrides: {
         root: {
-          border: `1px solid ${colors2.gray[200]}`,
+          border: `1px solid ${border2.secondary}`,
           borderRadius: radius2.lg,
           "&:not(:last-child)": {
             marginBottom: 8
@@ -915,7 +1205,7 @@ function buildComponents(tokens) {
           minHeight: 56,
           "&.Mui-expanded": {
             minHeight: 56,
-            borderBottom: `1px solid ${colors2.gray[200]}`
+            borderBottom: `1px solid ${border2.secondary}`
           }
         },
         content: {
@@ -941,8 +1231,8 @@ function buildComponents(tokens) {
       },
       styleOverrides: {
         root: {
-          borderBottom: `1px solid ${colors2.gray[200]}`,
-          backgroundColor: colors2.base.white
+          borderBottom: `1px solid ${border2.secondary}`,
+          backgroundColor: bg2.primary
         }
       }
     },
@@ -966,9 +1256,68 @@ function buildComponents(tokens) {
     MuiChip: {
       styleOverrides: {
         root: {
-          borderRadius: radius2.md,
-          fontWeight: 500,
-          fontSize: 14
+          borderRadius: radius2.md
+        },
+        label: {
+          fontWeight: 500
+        },
+        sizeSmall: {
+          fontSize: 12,
+          height: 20
+        },
+        sizeMedium: {
+          fontSize: 14,
+          height: 24,
+          "& .MuiChip-deleteIcon": { fontSize: 16 }
+        },
+        colorDefault: {
+          "&.MuiChip-filled": {
+            backgroundColor: colors2.gray[50],
+            color: colors2.gray[700],
+            "& .MuiChip-deleteIcon": { color: colors2.gray[400] }
+          }
+        },
+        colorPrimary: {
+          "&.MuiChip-filled": {
+            backgroundColor: colors2.brand[50],
+            color: colors2.brand[700],
+            "& .MuiChip-deleteIcon": { color: colors2.brand[400] }
+          }
+        },
+        colorSecondary: {
+          "&.MuiChip-filled": {
+            backgroundColor: colors2.gray[50],
+            color: colors2.gray[700],
+            "& .MuiChip-deleteIcon": { color: colors2.gray[400] }
+          }
+        },
+        colorError: {
+          "&.MuiChip-filled": {
+            backgroundColor: colors2.error[50],
+            color: colors2.error[700],
+            "& .MuiChip-deleteIcon": { color: colors2.error[400] }
+          }
+        },
+        colorWarning: {
+          "&.MuiChip-filled": {
+            backgroundColor: colors2.warning[50],
+            color: colors2.warning[700],
+            "& .MuiChip-deleteIcon": { color: colors2.warning[400] }
+          }
+        },
+        colorSuccess: {
+          "&.MuiChip-filled": {
+            backgroundColor: colors2.success[50],
+            color: colors2.success[700],
+            "& .MuiChip-deleteIcon": { color: colors2.success[400] }
+          }
+        },
+        colorInfo: {
+          "&.MuiChip-filled": {
+            backgroundColor: colors2.blue[50],
+            color: colors2.blue[700],
+            "& .MuiChip-deleteIcon": { color: colors2.blue[400] }
+          }
         }
       }
     },
@@ -983,7 +1332,7 @@ function buildComponents(tokens) {
           fontSize: 14,
           lineHeight: "20px",
           fontWeight: 500,
-          color: colors2.gray[700]
+          color: text2.secondary
         }
       }
     },
@@ -999,29 +1348,29 @@ function buildComponents(tokens) {
     MuiTableCell: {
       styleOverrides: {
         root: {
-          borderBottom: `1px solid ${colors2.gray[200]}`,
+          borderBottom: `1px solid ${border2.secondary}`,
           padding: "16px 24px",
           fontSize: 14,
           lineHeight: "20px",
-          color: colors2.gray[600]
+          color: fg2.tertiary
         },
         head: {
-          backgroundColor: colors2.gray[50],
-          color: colors2.gray[600],
+          backgroundColor: bg2.secondary,
+          color: fg2.tertiary,
           fontWeight: 500,
           fontSize: 12,
           lineHeight: "18px"
         },
         body: {
-          color: colors2.gray[600]
+          color: fg2.tertiary
         }
       }
     },
     MuiTableHead: {
       styleOverrides: {
         root: {
-          backgroundColor: colors2.gray[50],
-          borderBottom: `1px solid ${colors2.gray[200]}`
+          backgroundColor: bg2.secondary,
+          borderBottom: `1px solid ${border2.secondary}`
         }
       }
     },
@@ -1032,12 +1381,12 @@ function buildComponents(tokens) {
             border: 0
           },
           "&:hover": {
-            backgroundColor: colors2.gray[50]
+            backgroundColor: bg2.primaryHover
           },
           "&.Mui-selected": {
-            backgroundColor: colors2.brand[50],
+            backgroundColor: bg2.brandPrimary,
             "&:hover": {
-              backgroundColor: colors2.brand[50]
+              backgroundColor: bg2.brandPrimary
             }
           }
         }
@@ -1047,7 +1396,7 @@ function buildComponents(tokens) {
       styleOverrides: {
         root: {
           borderRadius: radius2.xl,
-          border: `1px solid ${colors2.gray[200]}`,
+          border: `1px solid ${border2.secondary}`,
           boxShadow: "none"
         }
       }
@@ -1064,16 +1413,16 @@ function buildComponents(tokens) {
           borderRadius: radius2.full
         },
         colorPrimary: {
-          backgroundColor: colors2.brand[600]
+          backgroundColor: bg2.brandSolid
         },
         colorError: {
-          backgroundColor: colors2.error[600]
+          backgroundColor: bg2.errorSolid
         },
         colorSuccess: {
-          backgroundColor: colors2.success[600]
+          backgroundColor: bg2.successSolid
         },
         colorWarning: {
-          backgroundColor: colors2.warning[600]
+          backgroundColor: bg2.warningSolid
         },
         dot: {
           minWidth: 8,
@@ -1086,7 +1435,7 @@ function buildComponents(tokens) {
     MuiDivider: {
       styleOverrides: {
         root: {
-          borderColor: colors2.gray[200]
+          borderColor: border2.secondary
         }
       }
     },
@@ -1104,13 +1453,13 @@ function buildComponents(tokens) {
           borderRadius: radius2.sm,
           padding: "8px 12px",
           "&:hover": {
-            backgroundColor: colors2.gray[50]
+            backgroundColor: bg2.primaryHover
           },
           "&.Mui-selected": {
-            backgroundColor: colors2.brand[50],
-            color: colors2.brand[700],
+            backgroundColor: bg2.brandPrimary,
+            color: buttonColors2.secondaryColor.fg,
             "&:hover": {
-              backgroundColor: colors2.brand[100]
+              backgroundColor: bg2.brandSecondary
             }
           }
         }
@@ -1120,7 +1469,7 @@ function buildComponents(tokens) {
       styleOverrides: {
         root: {
           minWidth: 36,
-          color: colors2.gray[500]
+          color: fg2.quaternary
         }
       }
     },
@@ -1130,12 +1479,12 @@ function buildComponents(tokens) {
           fontSize: 14,
           lineHeight: "20px",
           fontWeight: 500,
-          color: colors2.gray[700]
+          color: text2.secondary
         },
         secondary: {
           fontSize: 14,
           lineHeight: "20px",
-          color: colors2.gray[500]
+          color: text2.quaternary
         }
       }
     },
@@ -1143,8 +1492,8 @@ function buildComponents(tokens) {
     MuiTooltip: {
       styleOverrides: {
         tooltip: {
-          backgroundColor: colors2.gray[900],
-          color: colors2.base.white,
+          backgroundColor: bg2.primarySolid,
+          color: text2.white,
           fontSize: 12,
           lineHeight: "18px",
           fontWeight: 600,
@@ -1153,7 +1502,7 @@ function buildComponents(tokens) {
           boxShadow: tokenShadows.lg
         },
         arrow: {
-          color: colors2.gray[900]
+          color: bg2.primarySolid
         }
       }
     },
@@ -1167,30 +1516,31 @@ function buildComponents(tokens) {
           borderRadius: radius2.xl,
           fontSize: 14,
           lineHeight: "20px",
-          padding: "12px 16px"
+          padding: "12px 16px",
+          alignItems: "center"
         },
         standardError: {
-          backgroundColor: colors2.error[50],
+          backgroundColor: bg2.errorPrimary,
           color: colors2.error[700],
-          border: `1px solid ${colors2.error[300]}`,
+          border: `1px solid ${border2.error}`,
           "& .MuiAlert-icon": {
-            color: colors2.error[600]
+            color: fg2.errorPrimary
           }
         },
         standardWarning: {
-          backgroundColor: colors2.warning[50],
+          backgroundColor: bg2.warningPrimary,
           color: colors2.warning[700],
           border: `1px solid ${colors2.warning[300]}`,
           "& .MuiAlert-icon": {
-            color: colors2.warning[600]
+            color: fg2.warningPrimary
           }
         },
         standardSuccess: {
-          backgroundColor: colors2.success[50],
+          backgroundColor: bg2.successPrimary,
           color: colors2.success[700],
           border: `1px solid ${colors2.success[300]}`,
           "& .MuiAlert-icon": {
-            color: colors2.success[600]
+            color: fg2.successPrimary
           }
         },
         standardInfo: {
@@ -1202,7 +1552,8 @@ function buildComponents(tokens) {
           }
         },
         icon: {
-          padding: "2px 0"
+          padding: 0,
+          marginRight: 12
         }
       }
     },
@@ -1240,7 +1591,7 @@ function buildComponents(tokens) {
           fontSize: 18,
           lineHeight: "28px",
           fontWeight: 600,
-          color: colors2.gray[900],
+          color: text2.primary,
           padding: "24px 24px 0"
         }
       }
@@ -1251,7 +1602,7 @@ function buildComponents(tokens) {
           padding: "20px 24px",
           fontSize: 14,
           lineHeight: "20px",
-          color: colors2.gray[600]
+          color: text2.tertiary
         }
       }
     },
@@ -1269,14 +1620,14 @@ function buildComponents(tokens) {
         root: {
           borderRadius: radius2.full,
           height: 8,
-          backgroundColor: colors2.gray[200]
+          backgroundColor: border2.secondary
         },
         barColorPrimary: {
-          backgroundColor: colors2.brand[600],
+          backgroundColor: fg2.brandPrimary,
           borderRadius: radius2.full
         },
         barColorSecondary: {
-          backgroundColor: colors2.gray[600],
+          backgroundColor: bg2.secondarySolid,
           borderRadius: radius2.full
         }
       }
@@ -1284,10 +1635,10 @@ function buildComponents(tokens) {
     MuiCircularProgress: {
       styleOverrides: {
         colorPrimary: {
-          color: colors2.brand[600]
+          color: fg2.brandPrimary
         },
         colorSecondary: {
-          color: colors2.gray[600]
+          color: bg2.secondarySolid
         }
       }
     },
@@ -1298,7 +1649,7 @@ function buildComponents(tokens) {
       },
       styleOverrides: {
         root: {
-          backgroundColor: colors2.gray[100]
+          backgroundColor: bg2.tertiary
         },
         rounded: {
           borderRadius: radius2.md
@@ -1312,8 +1663,8 @@ function buildComponents(tokens) {
     MuiSnackbarContent: {
       styleOverrides: {
         root: {
-          backgroundColor: colors2.gray[900],
-          color: colors2.base.white,
+          backgroundColor: bg2.primarySolid,
+          color: text2.white,
           borderRadius: radius2.xl,
           boxShadow: tokenShadows.lg,
           fontSize: 14,
@@ -1341,6 +1692,62 @@ function buildComponents(tokens) {
           overline: "span"
         }
       }
+    },
+    // ─── DataGrid (@mui/x-data-grid) ──────────────────────────────
+    // Not part of MUI core's Components<Theme> type, so we merge via assertion.
+    ...{
+      MuiDataGrid: {
+        styleOverrides: {
+          root: {
+            border: `1px solid ${border2.secondary}`,
+            borderRadius: radius2.xl,
+            fontFamily: "inherit",
+            "& .MuiDataGrid-withBorderColor": {
+              borderColor: border2.secondary
+            }
+          },
+          columnHeaders: {
+            backgroundColor: bg2.secondary
+          },
+          columnHeader: {
+            fontSize: 12,
+            lineHeight: "18px",
+            fontWeight: 500,
+            color: fg2.tertiary,
+            "&:focus, &:focus-within": {
+              outline: "none"
+            }
+          },
+          columnHeaderTitle: {
+            fontWeight: 500
+          },
+          cell: {
+            fontSize: 14,
+            lineHeight: "20px",
+            color: fg2.tertiary,
+            "&:focus, &:focus-within": {
+              outline: "none"
+            }
+          },
+          row: {
+            "&:hover": {
+              backgroundColor: bg2.primaryHover
+            },
+            "&.Mui-selected": {
+              backgroundColor: bg2.brandPrimary,
+              "&:hover": {
+                backgroundColor: bg2.brandPrimary
+              }
+            }
+          },
+          footerContainer: {
+            borderTop: `1px solid ${border2.secondary}`
+          },
+          columnSeparator: {
+            color: border2.secondary
+          }
+        }
+      }
     }
   };
 }
@@ -1348,8 +1755,12 @@ var components = buildComponents({
   colors,
   radius,
   focusRings,
-  shadows
-});
+  shadows,
+  text,
+  bg,
+  fg,
+  border,
+  buttonColors});
 
 // src/theme/shadows.ts
 function buildShadows(tokens) {
@@ -1443,7 +1854,20 @@ var forestPreset = {
         fontWeight,
         display,
         container,
-        widths
+        widths,
+        text,
+        bg,
+        fg,
+        border,
+        buttonColors,
+        avatarColors,
+        breadcrumbColors,
+        iconColors,
+        navColors,
+        sliderColors,
+        toggleColors,
+        chartColors,
+        alpha
       }
     }
   }
@@ -1506,7 +1930,7 @@ function ForestProvider({
 function Autocomplete(props) {
   return /* @__PURE__ */ jsxRuntime.jsx(MuiAutocomplete__default.default, { ...props });
 }
-function Button(props) {
+function Button({ ...props }) {
   return /* @__PURE__ */ jsxRuntime.jsx(MuiButton__default.default, { variant: "contained", ...props });
 }
 function ButtonGroup(props) {
@@ -1545,8 +1969,17 @@ function ToggleButtonGroup(props) {
 function Badge(props) {
   return /* @__PURE__ */ jsxRuntime.jsx(MuiBadge__default.default, { ...props });
 }
+var Close_default = utils.createSvgIcon(/* @__PURE__ */ jsxRuntime.jsx("path", {
+  d: "M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
+}), "Close");
 function Chip(props) {
-  return /* @__PURE__ */ jsxRuntime.jsx(MuiChip__default.default, { ...props });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    MuiChip__default.default,
+    {
+      deleteIcon: /* @__PURE__ */ jsxRuntime.jsx(Close_default, {}),
+      ...props
+    }
+  );
 }
 function Divider(props) {
   return /* @__PURE__ */ jsxRuntime.jsx(MuiDivider__default.default, { ...props });
@@ -1590,6 +2023,9 @@ function TableHead(props) {
 function TableRow(props) {
   return /* @__PURE__ */ jsxRuntime.jsx(MuiTableRow__default.default, { ...props });
 }
+function DataGrid(props) {
+  return /* @__PURE__ */ jsxRuntime.jsx(xDataGrid.DataGrid, { ...props });
+}
 function Tooltip(props) {
   return /* @__PURE__ */ jsxRuntime.jsx(MuiTooltip__default.default, { arrow: true, ...props });
 }
@@ -1643,6 +2079,7 @@ exports.ButtonGroup = ButtonGroup;
 exports.Checkbox = Checkbox;
 exports.Chip = Chip;
 exports.CircularProgress = CircularProgress;
+exports.DataGrid = DataGrid;
 exports.Dialog = Dialog;
 exports.DialogActions = DialogActions;
 exports.DialogContent = DialogContent;
@@ -1677,11 +2114,19 @@ exports.ToggleButton = ToggleButton;
 exports.ToggleButtonGroup = ToggleButtonGroup;
 exports.Tooltip = Tooltip;
 exports.Typography = Typography;
+exports.alpha = alpha;
+exports.avatarColors = avatarColors;
+exports.bg = bg;
+exports.border = border;
+exports.breadcrumbColors = breadcrumbColors;
 exports.buildTheme = buildTheme;
 exports.buildThemeOptions = buildThemeOptions;
+exports.buttonColors = buttonColors;
+exports.chartColors = chartColors;
 exports.colors = colors;
 exports.container = container;
 exports.display = display;
+exports.fg = fg;
 exports.focusRings = focusRings;
 exports.fontFamily = fontFamily;
 exports.fontSize = fontSize;
@@ -1691,10 +2136,15 @@ exports.forestTheme = forestTheme;
 exports.forestThemeOptions = forestThemeOptions;
 exports.getAvailablePresets = getAvailablePresets;
 exports.getPreset = getPreset;
+exports.iconColors = iconColors;
 exports.lineHeight = lineHeight;
+exports.navColors = navColors;
 exports.radius = radius;
 exports.registerPreset = registerPreset;
+exports.sliderColors = sliderColors;
 exports.spacing = spacing;
+exports.text = text;
+exports.toggleColors = toggleColors;
 exports.tokenShadows = shadows;
 exports.widths = widths;
 //# sourceMappingURL=index.js.map