@matteoaliano/forest-ui 0.2.1 → 0.2.3

package/dist/{chunk-5C6DAZT2.mjs → chunk-F5PVQ752.mjs}

@@ -194,10 +194,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],
@@ -236,26 +475,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
@@ -350,7 +593,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: {
@@ -361,43 +614,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
           }
         }
       }
@@ -413,7 +665,7 @@ function buildComponents(tokens) {
         },
         grouped: {
           "&:not(:last-of-type)": {
-            borderRight: `1px solid ${colors2.brand[700]}`
+            borderRight: `1px solid ${buttonColors2.primary.borderHover}`
           }
         }
       }
@@ -431,9 +683,9 @@ function buildComponents(tokens) {
           }
         },
         primary: {
-          backgroundColor: colors2.brand[600],
+          backgroundColor: buttonColors2.primary.bg,
           "&:hover": {
-            backgroundColor: colors2.brand[700]
+            backgroundColor: buttonColors2.primary.bgHover
           }
         }
       }
@@ -445,37 +697,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",
@@ -484,17 +745,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
           }
         }
       }
@@ -507,7 +781,7 @@ function buildComponents(tokens) {
           marginTop: 6,
           marginLeft: 0,
           "&.Mui-error": {
-            color: colors2.error[600]
+            color: text2.errorPrimary
           }
         }
       }
@@ -518,8 +792,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
         }
       }
     },
@@ -529,7 +810,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: {
@@ -537,10 +818,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: {
@@ -555,17 +836,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]
@@ -576,7 +857,7 @@ function buildComponents(tokens) {
             borderRadius: radius2.xs
           },
           "&.Mui-disabled": {
-            color: colors2.gray[300]
+            color: border2.primary
           }
         }
       }
@@ -588,14 +869,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]
@@ -606,7 +887,7 @@ function buildComponents(tokens) {
             borderRadius: radius2.full
           },
           "&.Mui-disabled": {
-            color: colors2.gray[300]
+            color: border2.primary
           }
         }
       }
@@ -626,9 +907,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
             }
           },
@@ -639,7 +920,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
@@ -652,7 +933,7 @@ function buildComponents(tokens) {
         },
         track: {
           borderRadius: radius2.full,
-          backgroundColor: colors2.gray[200],
+          backgroundColor: border2.secondary,
           opacity: 1
         }
       }
@@ -661,23 +942,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": {
@@ -689,15 +971,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
           }
         }
       }
@@ -710,8 +998,9 @@ 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,
+          boxShadow: tokenShadows.xs,
           overflow: "hidden"
         }
       }
@@ -761,31 +1050,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}`
         }
       }
     },
@@ -797,7 +1086,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
@@ -820,7 +1109,7 @@ function buildComponents(tokens) {
           minHeight: 56,
           "&.Mui-expanded": {
             minHeight: 56,
-            borderBottom: `1px solid ${colors2.gray[200]}`
+            borderBottom: `1px solid ${border2.secondary}`
           }
         },
         content: {
@@ -846,8 +1135,8 @@ function buildComponents(tokens) {
       },
       styleOverrides: {
         root: {
-          borderBottom: `1px solid ${colors2.gray[200]}`,
-          backgroundColor: colors2.base.white
+          borderBottom: `1px solid ${border2.secondary}`,
+          backgroundColor: bg2.primary
         }
       }
     },
@@ -871,9 +1160,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] }
+          }
         }
       }
     },
@@ -888,7 +1236,7 @@ function buildComponents(tokens) {
           fontSize: 14,
           lineHeight: "20px",
           fontWeight: 500,
-          color: colors2.gray[700]
+          color: text2.secondary
         }
       }
     },
@@ -904,29 +1252,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}`
         }
       }
     },
@@ -937,12 +1285,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
             }
           }
         }
@@ -952,7 +1300,7 @@ function buildComponents(tokens) {
       styleOverrides: {
         root: {
           borderRadius: radius2.xl,
-          border: `1px solid ${colors2.gray[200]}`,
+          border: `1px solid ${border2.secondary}`,
           boxShadow: "none"
         }
       }
@@ -969,16 +1317,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,
@@ -991,7 +1339,7 @@ function buildComponents(tokens) {
     MuiDivider: {
       styleOverrides: {
         root: {
-          borderColor: colors2.gray[200]
+          borderColor: border2.secondary
         }
       }
     },
@@ -1009,13 +1357,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
             }
           }
         }
@@ -1025,7 +1373,7 @@ function buildComponents(tokens) {
       styleOverrides: {
         root: {
           minWidth: 36,
-          color: colors2.gray[500]
+          color: fg2.quaternary
         }
       }
     },
@@ -1035,12 +1383,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
         }
       }
     },
@@ -1048,8 +1396,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,
@@ -1058,7 +1406,7 @@ function buildComponents(tokens) {
           boxShadow: tokenShadows.lg
         },
         arrow: {
-          color: colors2.gray[900]
+          color: bg2.primarySolid
         }
       }
     },
@@ -1072,30 +1420,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: {
@@ -1107,7 +1456,8 @@ function buildComponents(tokens) {
           }
         },
         icon: {
-          padding: "2px 0"
+          padding: 0,
+          marginRight: 12
         }
       }
     },
@@ -1145,7 +1495,7 @@ function buildComponents(tokens) {
           fontSize: 18,
           lineHeight: "28px",
           fontWeight: 600,
-          color: colors2.gray[900],
+          color: text2.primary,
           padding: "24px 24px 0"
         }
       }
@@ -1156,7 +1506,7 @@ function buildComponents(tokens) {
           padding: "20px 24px",
           fontSize: 14,
           lineHeight: "20px",
-          color: colors2.gray[600]
+          color: text2.tertiary
         }
       }
     },
@@ -1174,14 +1524,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
         }
       }
@@ -1189,10 +1539,10 @@ function buildComponents(tokens) {
     MuiCircularProgress: {
       styleOverrides: {
         colorPrimary: {
-          color: colors2.brand[600]
+          color: fg2.brandPrimary
         },
         colorSecondary: {
-          color: colors2.gray[600]
+          color: bg2.secondarySolid
         }
       }
     },
@@ -1203,7 +1553,7 @@ function buildComponents(tokens) {
       },
       styleOverrides: {
         root: {
-          backgroundColor: colors2.gray[100]
+          backgroundColor: bg2.tertiary
         },
         rounded: {
           borderRadius: radius2.md
@@ -1217,8 +1567,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,
@@ -1246,6 +1596,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
+          }
+        }
+      }
     }
   };
 }
@@ -1253,8 +1659,12 @@ var components = buildComponents({
   colors,
   radius,
   focusRings,
-  shadows
-});
+  shadows,
+  text,
+  bg,
+  fg,
+  border,
+  buttonColors});
 
 // src/theme/shadows.ts
 function buildShadows(tokens) {
@@ -1348,7 +1758,20 @@ var forestPreset = {
         fontWeight,
         display,
         container,
-        widths
+        widths,
+        text,
+        bg,
+        fg,
+        border,
+        buttonColors,
+        avatarColors,
+        breadcrumbColors,
+        iconColors,
+        navColors,
+        sliderColors,
+        toggleColors,
+        chartColors,
+        alpha
       }
     }
   }
@@ -1379,6 +1802,6 @@ var forestThemeOptions = {
 };
 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
+export { alpha, avatarColors, bg, border, breadcrumbColors, buildTheme, buildThemeOptions, buttonColors, chartColors, colors, components, container, display, fg, focusRings, fontFamily, fontSize, fontWeight, forestPreset, forestTheme, forestThemeOptions, getAvailablePresets, getPreset, iconColors, lineHeight, navColors, palette, radius, registerPreset, shadows, shadows2, sliderColors, spacing, text, toggleColors, typography, widths };
+//# sourceMappingURL=chunk-F5PVQ752.mjs.map
+//# sourceMappingURL=chunk-F5PVQ752.mjs.map