@matteoaliano/forest-ui 0.3.2 → 0.3.3

package/dist/index.js

@@ -181,6 +181,17 @@ var violet = {
   700: "#3a1aad",
   800: "#190a8a",
   900: "#000066"};
+var magenta = {
+  50: "#fff0fa",
+  100: "#ffe0f5",
+  200: "#ffc0eb",
+  300: "#ff90d8",
+  400: "#FF78F3",
+  500: "#e650d4",
+  600: "#cc28b5",
+  700: "#a3008c",
+  800: "#7a0066",
+  900: "#520044"};
 var gray = {
   25: "#fdfcfc",
   50: "#faf9f8",
@@ -195,20 +206,6 @@ var gray = {
   900: "#18181b",
   950: "#09090b"
 };
-var info = {
-  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 misc = {
   teal: {
     50: "#f0fdf9",
@@ -264,55 +261,66 @@ var misc = {
     600: "#088ab2",
     700: "#0e7090"}
 };
-var colors = {
-  base: {
-    white: "#ffffff",
-    black: "#000000",
-    transparent: "#ffffff00"
-  },
-  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"
-  },
-  info
+var base = {
+  white: "#ffffff",
+  black: "#000000",
+  transparent: "#ffffff00"
+};
+var 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"
+};
+var 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"
+};
+var 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"
+};
+var info = {
+  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,
@@ -424,26 +432,26 @@ var text = {
   disabled: gray[500],
   placeholder: gray[500],
   placeholderSubtle: gray[300],
-  white: colors.base.white,
+  white: base.white,
   brandPrimary: violet[900],
   brandSecondary: violet[700],
   brandTertiary: violet[600],
   brandTertiaryAlt: violet[600],
-  primaryOnBrand: colors.base.white,
+  primaryOnBrand: base.white,
   secondaryOnBrand: violet[200],
   tertiaryOnBrand: violet[200],
   quaternaryOnBrand: violet[300],
-  errorPrimary: colors.error[600],
-  warningPrimary: colors.warning[600],
-  successPrimary: colors.success[600]
+  errorPrimary: error[600],
+  warningPrimary: warning[600],
+  successPrimary: success[600]
 };
 var bg = {
   primary: gray[50],
   primaryAlt: gray[50],
   primaryHover: gray[100],
   primarySolid: gray[950],
-  secondary: colors.base.white,
-  secondaryAlt: colors.base.white,
+  secondary: base.white,
+  secondaryAlt: base.white,
   secondarySubtle: gray[25],
   secondaryHover: gray[50],
   secondarySolid: gray[600],
@@ -460,15 +468,15 @@ var bg = {
   brandSolidHover: violet[700],
   brandSection: violet[800],
   brandSectionSubtle: violet[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]
+  errorPrimary: error[50],
+  errorSecondary: error[100],
+  errorSolid: error[600],
+  warningPrimary: warning[50],
+  warningSecondary: warning[100],
+  warningSolid: warning[600],
+  successPrimary: success[50],
+  successSecondary: success[100],
+  successSolid: success[600]
 };
 var fg = {
   primary: gray[900],
@@ -481,18 +489,18 @@ var fg = {
   quinary: gray[400],
   quinaryHover: gray[500],
   senary: gray[300],
-  white: colors.base.white,
+  white: base.white,
   disabled: gray[400],
   disabledSubtle: gray[300],
   brandPrimary: violet[600],
   brandPrimaryAlt: violet[600],
   brandSecondary: violet[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]
+  errorPrimary: error[600],
+  errorSecondary: error[500],
+  warningPrimary: warning[600],
+  warningSecondary: warning[500],
+  successPrimary: success[600],
+  successSecondary: success[500]
 };
 var border = {
   primary: gray[300],
@@ -503,28 +511,28 @@ var border = {
   brand: violet[300],
   brandSolid: violet[600],
   brandSolidAlt: violet[600],
-  error: colors.error[300],
-  errorSolid: colors.error[600]
+  error: error[300],
+  errorSolid: error[600]
 };
 var buttonColors = {
   primary: {
     bg: violet[600],
     bgHover: violet[700],
-    fg: colors.base.white,
-    fgHover: colors.base.white,
+    fg: base.white,
+    fgHover: base.white,
     border: violet[600],
     borderHover: violet[700]
   },
   secondary: {
-    bg: colors.base.white,
-    bgHover: gray[50],
-    fg: gray[700],
-    fgHover: gray[800],
-    border: gray[300],
-    borderHover: gray[300]
+    bg: gray[900],
+    bgHover: gray[950],
+    fg: base.white,
+    fgHover: base.white,
+    border: gray[900],
+    borderHover: gray[950]
   },
   secondaryColor: {
-    bg: colors.base.white,
+    bg: base.white,
     bgHover: violet[50],
     fg: violet[700],
     fgHover: violet[800],
@@ -542,31 +550,31 @@ var buttonColors = {
     bgHover: violet[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]
+    bg: error[600],
+    bgHover: error[700],
+    fg: base.white,
+    fgHover: base.white,
+    border: error[600],
+    borderHover: 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]
+    bg: base.white,
+    bgHover: error[50],
+    fg: error[700],
+    fgHover: error[800],
+    border: error[300],
+    borderHover: error[300]
   },
   tertiaryError: {
-    fg: colors.error[700],
-    fgHover: colors.error[800],
-    bgHover: colors.error[50]
+    fg: error[700],
+    fgHover: error[800],
+    bgHover: error[50]
   }
 };
 var avatarColors = {
   bg: gray[100],
   contrastBorder: "#00000014",
-  profilePhotoBorder: colors.base.white,
+  profilePhotoBorder: base.white,
   focusBorder: "#a0a0a624"
 };
 var breadcrumbColors = {
@@ -585,14 +593,14 @@ var iconColors = {
   featuredModernBorder: gray[200],
   featuredLightFgBrand: violet[600],
   featuredLightFgGray: 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
+  featuredLightFgError: error[600],
+  featuredLightFgWarning: warning[600],
+  featuredLightFgSuccess: success[600],
+  featuredDarkFgBrand: base.white,
+  featuredDarkFgGray: base.white,
+  featuredDarkFgError: base.white,
+  featuredDarkFgWarning: base.white,
+  featuredDarkFgSuccess: base.white
 };
 var navColors = {
   itemIconFg: gray[500],
@@ -602,7 +610,7 @@ var navColors = {
 };
 var sliderColors = {
   handleBorder: violet[600],
-  handleBg: colors.base.white
+  handleBg: base.white
 };
 var toggleColors = {
   buttonFgDisabled: gray[50]
@@ -612,17 +620,17 @@ var chartColors = {
   gridlineFg: gray[100],
   labelFg: gray[600],
   labelFgEmphasis: gray[700],
-  bg: colors.base.white,
+  bg: base.white,
   bgAlt: gray[50],
   tooltipBg: gray[950],
-  tooltipFg: colors.base.white,
+  tooltipFg: base.white,
   crosshairFg: gray[500],
   legendFg: text.tertiary,
   series: [
     { fg: misc.purple[500], fgHover: misc.purple[600], bg: misc.purple[100], bgHover: misc.purple[200] },
     { fg: misc.orangeDark[400], fgHover: misc.orangeDark[500], bg: misc.orangeDark[100], bgHover: misc.orangeDark[200] },
     { fg: misc.teal[300], fgHover: misc.teal[400], bg: misc.teal[50], bgHover: misc.teal[100] },
-    { fg: colors.warning[400], fgHover: colors.warning[500], bg: colors.warning[100], bgHover: colors.warning[200] },
+    { fg: warning[400], fgHover: warning[500], bg: warning[100], bgHover: warning[200] },
     { fg: misc.rose[400], fgHover: misc.rose[500], bg: misc.rose[100], bgHover: misc.rose[200] },
     { fg: misc.blueLight[400], fgHover: misc.blueLight[500], bg: misc.blueLight[100], bgHover: misc.blueLight[200] },
     { fg: misc.orange[300], fgHover: misc.orange[400], bg: misc.orange[100], bgHover: misc.orange[200] },
@@ -663,43 +671,43 @@ var alpha = {
 // src/theme/palette.ts
 function buildPalette(tokens) {
   var _a;
-  const { colors: colors5, text: text5, bg: bg5, fg: fg5, border: border5 } = tokens;
+  const { base: base2, error: error2, warning: warning2, success: success2, info: info2, text: text5, bg: bg5, fg: fg5, border: border5 } = tokens;
   return {
     primary: {
       main: violet[600],
       light: violet[400],
       dark: violet[700],
-      contrastText: tokens.colors.base.white
+      contrastText: tokens.base.white
     },
     secondary: {
       main: gray[600],
       light: gray[400],
       dark: gray[700],
-      contrastText: tokens.colors.base.white
+      contrastText: tokens.base.white
     },
     error: {
-      main: colors5.error[600],
-      light: colors5.error[300],
-      dark: colors5.error[700],
-      contrastText: colors5.base.white
+      main: tokens.error[600],
+      light: tokens.error[300],
+      dark: tokens.error[700],
+      contrastText: tokens.base.white
     },
     warning: {
-      main: colors5.warning[600],
-      light: colors5.warning[300],
-      dark: colors5.warning[700],
-      contrastText: colors5.base.white
+      main: tokens.warning[600],
+      light: tokens.warning[300],
+      dark: tokens.warning[700],
+      contrastText: tokens.base.white
     },
     success: {
-      main: colors5.success[600],
-      light: colors5.success[300],
-      dark: colors5.success[700],
-      contrastText: colors5.base.white
+      main: tokens.success[600],
+      light: tokens.success[300],
+      dark: tokens.success[700],
+      contrastText: tokens.base.white
     },
     info: {
-      main: tokens.colors.info[600],
-      light: tokens.colors.info[300],
-      dark: tokens.colors.info[700],
-      contrastText: tokens.colors.base.white
+      main: tokens.info[600],
+      light: tokens.info[300],
+      dark: tokens.info[700],
+      contrastText: tokens.base.white
     },
     background: {
       default: bg5.primary,
@@ -722,7 +730,11 @@ function buildPalette(tokens) {
   };
 }
 buildPalette({
-  colors,
+  base,
+  error,
+  warning,
+  success,
+  info,
   text,
   bg,
   fg,
@@ -883,7 +895,11 @@ buildShadows({
 // src/theme/components.ts
 function buildComponents(tokens) {
   const {
-    colors: colors5,
+    base: base2,
+    error: error2,
+    warning: warning2,
+    success: success2,
+    info: info2,
     radius: radius5,
     focusRings: focusRings5,
     shadows: tokenShadows,
@@ -891,7 +907,8 @@ function buildComponents(tokens) {
     bg: bg5,
     fg: fg5,
     border: border5,
-    buttonColors: buttonColors5
+    buttonColors: buttonColors5,
+    sliderColors: sliderColors5
   } = tokens;
   return {
     // ─── Button ─────────────────────────────────────────────────────
@@ -926,9 +943,12 @@ function buildComponents(tokens) {
             borderColor: buttonColors5.secondaryColor.borderHover
           }
         },
-        outlinedSecondary: {
-          borderColor: buttonColors5.secondary.border,
+        containedSecondary: {
+          backgroundColor: buttonColors5.secondary.bg,
+          color: buttonColors5.secondary.fg,
+          border: `1px solid ${buttonColors5.secondary.border}`,
           "&:hover": {
+            backgroundColor: buttonColors5.secondary.bgHover,
             borderColor: buttonColors5.secondary.borderHover
           }
         },
@@ -959,6 +979,14 @@ function buildComponents(tokens) {
         }
       }
     },
+    // ─── IconButton ─────────────────────────────────────────────────
+    MuiIconButton: {
+      styleOverrides: {
+        root: {
+          borderRadius: radius5.md
+        }
+      }
+    },
     // ─── FAB ────────────────────────────────────────────────────────
     MuiFab: {
       styleOverrides: {
@@ -1094,13 +1122,14 @@ function buildComponents(tokens) {
         select: {
           "&.MuiSelect-select": {
             minHeight: "auto",
-            padding: "6px 12px",
+            padding: "6px 32px 6px 12px",
             fontSize: 14,
             lineHeight: "20px"
           }
         },
         icon: {
-          color: text5.placeholder
+          color: text5.placeholder,
+          right: 8
         }
       }
     },
@@ -1170,7 +1199,7 @@ function buildComponents(tokens) {
             color: fg5.brandPrimary
           },
           "&.Mui-checked:hover": {
-            color: violet[700]
+            color: buttonColors5.primary.bgHover
           },
           "&.Mui-focusVisible": {
             outline: "none",
@@ -1200,7 +1229,7 @@ function buildComponents(tokens) {
             color: fg5.brandPrimary
           },
           "&.Mui-checked:hover": {
-            color: violet[700]
+            color: buttonColors5.primary.bgHover
           },
           "&.Mui-focusVisible": {
             outline: "none",
@@ -1235,7 +1264,7 @@ function buildComponents(tokens) {
             }
           },
           "&.Mui-checked:hover + .MuiSwitch-track": {
-            backgroundColor: violet[700]
+            backgroundColor: buttonColors5.primary.bgHover
           },
           "&.Mui-focusVisible .MuiSwitch-thumb": {
             boxShadow: focusRings5.brand
@@ -1527,30 +1556,30 @@ function buildComponents(tokens) {
         },
         colorError: {
           "&.MuiChip-filled": {
-            backgroundColor: colors5.error[50],
-            color: colors5.error[700],
-            "& .MuiChip-deleteIcon": { color: colors5.error[400] }
+            backgroundColor: error2[50],
+            color: error2[700],
+            "& .MuiChip-deleteIcon": { color: error2[400] }
           }
         },
         colorWarning: {
           "&.MuiChip-filled": {
-            backgroundColor: colors5.warning[50],
-            color: colors5.warning[700],
-            "& .MuiChip-deleteIcon": { color: colors5.warning[400] }
+            backgroundColor: warning2[50],
+            color: warning2[700],
+            "& .MuiChip-deleteIcon": { color: warning2[400] }
           }
         },
         colorSuccess: {
           "&.MuiChip-filled": {
-            backgroundColor: colors5.success[50],
-            color: colors5.success[700],
-            "& .MuiChip-deleteIcon": { color: colors5.success[400] }
+            backgroundColor: success2[50],
+            color: success2[700],
+            "& .MuiChip-deleteIcon": { color: success2[400] }
           }
         },
         colorInfo: {
           "&.MuiChip-filled": {
-            backgroundColor: info[50],
-            color: info[700],
-            "& .MuiChip-deleteIcon": { color: info[400] }
+            backgroundColor: info2[50],
+            color: info2[700],
+            "& .MuiChip-deleteIcon": { color: info2[400] }
           }
         }
       }
@@ -1755,7 +1784,7 @@ function buildComponents(tokens) {
         },
         standardError: {
           backgroundColor: bg5.errorPrimary,
-          color: colors5.error[700],
+          color: error2[700],
           border: `1px solid ${border5.error}`,
           "& .MuiAlert-icon": {
             color: fg5.errorPrimary
@@ -1763,26 +1792,26 @@ function buildComponents(tokens) {
         },
         standardWarning: {
           backgroundColor: bg5.warningPrimary,
-          color: colors5.warning[700],
-          border: `1px solid ${colors5.warning[300]}`,
+          color: warning2[700],
+          border: `1px solid ${warning2[300]}`,
           "& .MuiAlert-icon": {
             color: fg5.warningPrimary
           }
         },
         standardSuccess: {
           backgroundColor: bg5.successPrimary,
-          color: colors5.success[700],
-          border: `1px solid ${colors5.success[300]}`,
+          color: success2[700],
+          border: `1px solid ${success2[300]}`,
           "& .MuiAlert-icon": {
             color: fg5.successPrimary
           }
         },
         standardInfo: {
-          backgroundColor: info[50],
-          color: info[700],
-          border: `1px solid ${info[300]}`,
+          backgroundColor: info2[50],
+          color: info2[700],
+          border: `1px solid ${info2[300]}`,
           "& .MuiAlert-icon": {
-            color: info[600]
+            color: info2[600]
           }
         },
         icon: {
@@ -1956,6 +1985,8 @@ function buildComponents(tokens) {
             fontWeight: 500
           },
           cell: {
+            display: "flex",
+            alignItems: "center",
             fontSize: 14,
             lineHeight: "20px",
             color: fg5.tertiary,
@@ -1982,11 +2013,198 @@ function buildComponents(tokens) {
           }
         }
       }
+    },
+    // ─── DatePicker (@mui/x-date-pickers) ────────────────────────────
+    // MUI X uses its own sub-components that are separate from MuiOutlinedInput,
+    // so height/padding and brand colours must be set here independently.
+    ...{
+      // Input field — mirrors MuiOutlinedInput sizing
+      MuiPickersTextField: {
+        styleOverrides: {
+          root: {
+            "& .MuiInputBase-root": {
+              height: 32,
+              borderRadius: radius5.md,
+              boxShadow: tokenShadows.xs,
+              fontSize: 14,
+              lineHeight: "20px"
+            },
+            "& .MuiInputBase-input": {
+              padding: "6px 12px",
+              fontSize: 14,
+              lineHeight: "20px"
+            },
+            "& .MuiOutlinedInput-notchedOutline": {
+              borderColor: border5.primary
+            },
+            "&:hover .MuiOutlinedInput-notchedOutline": {
+              borderColor: border5.brand
+            },
+            "& .Mui-focused .MuiOutlinedInput-notchedOutline": {
+              borderColor: border5.brandSolid,
+              borderWidth: 1,
+              boxShadow: "none"
+            },
+            "& .MuiInputAdornment-root .MuiIconButton-root": {
+              color: fg5.quaternary,
+              padding: 4,
+              "&:hover": {
+                backgroundColor: bg5.primaryHover,
+                color: fg5.brandPrimary
+              }
+            }
+          }
+        }
+      },
+      // Calendar popup container
+      MuiPickersPopper: {
+        styleOverrides: {
+          paper: {
+            borderRadius: radius5.xl,
+            boxShadow: tokenShadows.lg,
+            border: `1px solid ${border5.secondary}`,
+            marginTop: 4
+          }
+        }
+      },
+      // Calendar layout
+      MuiDateCalendar: {
+        styleOverrides: {
+          root: {
+            width: 280,
+            height: "auto"
+          }
+        }
+      },
+      // Month/year header navigation
+      MuiPickersCalendarHeader: {
+        styleOverrides: {
+          root: {
+            paddingLeft: 16,
+            paddingRight: 8,
+            marginTop: 8
+          },
+          label: {
+            fontSize: 14,
+            fontWeight: 600,
+            color: text5.primary
+          },
+          switchViewButton: {
+            color: fg5.quaternary,
+            "&:hover": { backgroundColor: bg5.primaryHover, color: fg5.brandPrimary }
+          }
+        }
+      },
+      MuiPickersArrowSwitcher: {
+        styleOverrides: {
+          button: {
+            color: fg5.quaternary,
+            "&:hover": { backgroundColor: bg5.primaryHover, color: fg5.brandPrimary }
+          }
+        }
+      },
+      // Day/week header labels
+      MuiDayCalendar: {
+        styleOverrides: {
+          weekDayLabel: {
+            fontSize: 12,
+            fontWeight: 500,
+            color: text5.tertiary,
+            width: 32,
+            height: 32
+          },
+          weekContainer: {
+            margin: "2px 0"
+          }
+        }
+      },
+      // Individual day cells
+      MuiPickersDay: {
+        defaultProps: {
+          disableRipple: true
+        },
+        styleOverrides: {
+          root: {
+            fontSize: 13,
+            fontWeight: 400,
+            width: 32,
+            height: 32,
+            borderRadius: radius5.md,
+            color: text5.primary,
+            backgroundColor: "transparent",
+            "&:hover": {
+              backgroundColor: bg5.primaryHover
+            },
+            "&.Mui-selected": {
+              backgroundColor: fg5.brandPrimary,
+              color: base2.white,
+              fontWeight: 600,
+              "&:hover": {
+                backgroundColor: buttonColors5.primary.bgHover
+              },
+              "&:focus": {
+                backgroundColor: fg5.brandPrimary
+              }
+            },
+            "&.MuiPickersDay-today": {
+              border: `1px solid ${border5.brandSolid}`,
+              color: fg5.brandPrimary,
+              backgroundColor: "transparent",
+              fontWeight: 600,
+              "&.Mui-selected": {
+                backgroundColor: fg5.brandPrimary,
+                color: base2.white,
+                border: "none"
+              }
+            },
+            "&.Mui-focusVisible": {
+              boxShadow: focusRings5.brand
+            },
+            "&.Mui-disabled": {
+              color: text5.disabled
+            }
+          }
+        }
+      },
+      // Year picker cells
+      MuiPickersYear: {
+        styleOverrides: {
+          yearButton: {
+            fontSize: 13,
+            borderRadius: radius5.md,
+            "&:hover": { backgroundColor: bg5.primaryHover },
+            "&.Mui-selected": {
+              backgroundColor: fg5.brandPrimary,
+              color: base2.white,
+              "&:hover": { backgroundColor: buttonColors5.primary.bgHover }
+            }
+          }
+        }
+      },
+      // Month picker cells
+      MuiPickersMonth: {
+        styleOverrides: {
+          monthButton: {
+            fontSize: 13,
+            borderRadius: radius5.md,
+            "&:hover": { backgroundColor: bg5.primaryHover },
+            "&.Mui-selected": {
+              backgroundColor: fg5.brandPrimary,
+              color: base2.white,
+              "&:hover": { backgroundColor: buttonColors5.primary.bgHover }
+            }
+          }
+        }
+      }
     }
   };
 }
 buildComponents({
-  colors,
+  base,
+  error,
+  warning,
+  success,
+  info,
   radius,
   focusRings,
   shadows,
@@ -1994,7 +2212,8 @@ buildComponents({
   bg,
   fg,
   border,
-  buttonColors});
+  buttonColors,
+  sliderColors});
 
 // src/theme/buildTheme.ts
 function buildThemeOptions(tokens) {
@@ -2013,39 +2232,6 @@ function buildTheme(tokens) {
 }
 
 // src/theme/presets/forest-external.ts
-var colors2 = {
-  ...colors,
-  /** Brand scale — purple for client-facing products (#9D5FFF) */
-  brand: {
-    25: "#faf8ff",
-    50: "#f5f0ff",
-    100: "#ebe0ff",
-    200: "#d6c0ff",
-    300: "#b090ff",
-    400: "#9D5FFF",
-    500: "#7c4de6",
-    600: "#5b3acc",
-    700: "#3a1aad",
-    800: "#190a8a",
-    900: "#000066",
-    950: "#000033"
-  },
-  /** Warm-neutral gray scale */
-  gray: {
-    25: "#fdfcfc",
-    50: "#faf9f8",
-    100: "#f5f3f1",
-    200: "#e8e5e3",
-    300: "#d8d8dc",
-    400: "#a0a0a6",
-    500: "#71717a",
-    600: "#52525b",
-    700: "#3f3f46",
-    800: "#27272a",
-    900: "#18181b",
-    950: "#09090b"
-  }
-};
 var radius2 = {
   ...radius,
   xxs: 1,
@@ -2059,215 +2245,215 @@ var radius2 = {
   "4xl": 12
 };
 var text2 = {
-  primary: colors2.gray[900],
-  secondary: colors2.gray[700],
-  secondaryHover: colors2.gray[800],
-  tertiary: colors2.gray[600],
-  tertiaryHover: colors2.gray[700],
-  quaternary: colors2.gray[500],
-  disabled: colors2.gray[500],
-  placeholder: colors2.gray[500],
-  placeholderSubtle: colors2.gray[300],
-  white: colors2.base.white,
-  brandPrimary: colors2.brand[900],
-  brandSecondary: colors2.brand[700],
-  brandTertiary: colors2.brand[600],
-  brandTertiaryAlt: colors2.brand[600],
-  primaryOnBrand: colors2.base.white,
-  secondaryOnBrand: colors2.brand[200],
-  tertiaryOnBrand: colors2.brand[200],
-  quaternaryOnBrand: colors2.brand[300],
-  errorPrimary: colors2.error[600],
-  warningPrimary: colors2.warning[600],
-  successPrimary: colors2.success[600]
+  primary: gray[900],
+  secondary: gray[700],
+  secondaryHover: gray[800],
+  tertiary: gray[600],
+  tertiaryHover: gray[700],
+  quaternary: gray[500],
+  disabled: gray[500],
+  placeholder: gray[500],
+  placeholderSubtle: gray[300],
+  white: base.white,
+  brandPrimary: violet[900],
+  brandSecondary: violet[700],
+  brandTertiary: violet[600],
+  brandTertiaryAlt: violet[600],
+  primaryOnBrand: base.white,
+  secondaryOnBrand: violet[200],
+  tertiaryOnBrand: violet[200],
+  quaternaryOnBrand: violet[300],
+  errorPrimary: error[600],
+  warningPrimary: warning[600],
+  successPrimary: success[600]
 };
 var bg2 = {
-  primary: colors2.gray[50],
-  primaryAlt: colors2.gray[50],
-  primaryHover: colors2.gray[100],
-  primarySolid: colors2.gray[950],
-  secondary: colors2.base.white,
-  secondaryAlt: colors2.base.white,
-  secondarySubtle: colors2.gray[25],
-  secondaryHover: colors2.gray[50],
-  secondarySolid: colors2.gray[600],
-  tertiary: colors2.gray[100],
-  quaternary: colors2.gray[200],
-  active: colors2.gray[200],
-  disabled: colors2.gray[100],
-  disabledSubtle: colors2.gray[50],
-  overlay: colors2.gray[950],
-  brandPrimary: colors2.brand[50],
-  brandPrimaryAlt: colors2.brand[50],
-  brandSecondary: colors2.brand[100],
-  brandSolid: colors2.brand[600],
-  brandSolidHover: colors2.brand[700],
-  brandSection: colors2.brand[800],
-  brandSectionSubtle: colors2.brand[700],
-  errorPrimary: colors2.error[50],
-  errorSecondary: colors2.error[100],
-  errorSolid: colors2.error[600],
-  warningPrimary: colors2.warning[50],
-  warningSecondary: colors2.warning[100],
-  warningSolid: colors2.warning[600],
-  successPrimary: colors2.success[50],
-  successSecondary: colors2.success[100],
-  successSolid: colors2.success[600]
+  primary: gray[50],
+  primaryAlt: gray[50],
+  primaryHover: gray[100],
+  primarySolid: gray[950],
+  secondary: base.white,
+  secondaryAlt: base.white,
+  secondarySubtle: gray[25],
+  secondaryHover: gray[50],
+  secondarySolid: gray[600],
+  tertiary: gray[100],
+  quaternary: gray[200],
+  active: gray[200],
+  disabled: gray[100],
+  disabledSubtle: gray[50],
+  overlay: gray[950],
+  brandPrimary: violet[50],
+  brandPrimaryAlt: violet[50],
+  brandSecondary: violet[100],
+  brandSolid: violet[400],
+  brandSolidHover: violet[500],
+  brandSection: violet[800],
+  brandSectionSubtle: violet[700],
+  errorPrimary: error[50],
+  errorSecondary: error[100],
+  errorSolid: error[600],
+  warningPrimary: warning[50],
+  warningSecondary: warning[100],
+  warningSolid: warning[600],
+  successPrimary: success[50],
+  successSecondary: success[100],
+  successSolid: success[600]
 };
 var fg2 = {
-  primary: colors2.gray[900],
-  secondary: colors2.gray[700],
-  secondaryHover: colors2.gray[800],
-  tertiary: colors2.gray[600],
-  tertiaryHover: colors2.gray[700],
-  quaternary: colors2.gray[500],
-  quaternaryHover: colors2.gray[600],
-  quinary: colors2.gray[400],
-  quinaryHover: colors2.gray[500],
-  senary: colors2.gray[300],
-  white: colors2.base.white,
-  disabled: colors2.gray[400],
-  disabledSubtle: colors2.gray[300],
-  brandPrimary: colors2.brand[600],
-  brandPrimaryAlt: colors2.brand[600],
-  brandSecondary: colors2.brand[500],
-  errorPrimary: colors2.error[600],
-  errorSecondary: colors2.error[500],
-  warningPrimary: colors2.warning[600],
-  warningSecondary: colors2.warning[500],
-  successPrimary: colors2.success[600],
-  successSecondary: colors2.success[500]
+  primary: gray[900],
+  secondary: gray[700],
+  secondaryHover: gray[800],
+  tertiary: gray[600],
+  tertiaryHover: gray[700],
+  quaternary: gray[500],
+  quaternaryHover: gray[600],
+  quinary: gray[400],
+  quinaryHover: gray[500],
+  senary: gray[300],
+  white: base.white,
+  disabled: gray[400],
+  disabledSubtle: gray[300],
+  brandPrimary: violet[400],
+  brandPrimaryAlt: violet[400],
+  brandSecondary: violet[400],
+  errorPrimary: error[600],
+  errorSecondary: error[500],
+  warningPrimary: warning[600],
+  warningSecondary: warning[500],
+  successPrimary: success[600],
+  successSecondary: success[500]
 };
 var border2 = {
-  primary: colors2.gray[300],
-  secondary: colors2.gray[200],
-  tertiary: colors2.gray[100],
-  disabled: colors2.gray[300],
-  disabledSubtle: colors2.gray[200],
-  brand: colors2.brand[300],
-  brandSolid: colors2.brand[600],
-  brandSolidAlt: colors2.brand[600],
-  error: colors2.error[300],
-  errorSolid: colors2.error[600]
+  primary: gray[300],
+  secondary: gray[200],
+  tertiary: gray[100],
+  disabled: gray[300],
+  disabledSubtle: gray[200],
+  brand: violet[300],
+  brandSolid: violet[400],
+  brandSolidAlt: violet[400],
+  error: error[300],
+  errorSolid: error[600]
 };
 var buttonColors2 = {
   primary: {
-    bg: colors2.brand[600],
-    bgHover: colors2.brand[700],
-    fg: colors2.base.white,
-    fgHover: colors2.base.white,
-    border: colors2.brand[600],
-    borderHover: colors2.brand[700]
+    bg: violet[400],
+    bgHover: violet[500],
+    fg: base.white,
+    fgHover: base.white,
+    border: violet[400],
+    borderHover: violet[500]
   },
   secondary: {
-    bg: colors2.base.white,
-    bgHover: colors2.gray[50],
-    fg: colors2.gray[700],
-    fgHover: colors2.gray[800],
-    border: colors2.gray[300],
-    borderHover: colors2.gray[300]
+    bg: gray[900],
+    bgHover: gray[950],
+    fg: base.white,
+    fgHover: base.white,
+    border: gray[900],
+    borderHover: gray[950]
   },
   secondaryColor: {
-    bg: colors2.base.white,
-    bgHover: colors2.brand[50],
-    fg: colors2.brand[700],
-    fgHover: colors2.brand[800],
-    border: colors2.brand[300],
-    borderHover: colors2.brand[300]
+    bg: base.white,
+    bgHover: violet[50],
+    fg: violet[400],
+    fgHover: violet[500],
+    border: violet[300],
+    borderHover: violet[300]
   },
   tertiary: {
-    fg: colors2.gray[600],
-    fgHover: colors2.gray[700],
-    bgHover: colors2.gray[50]
+    fg: gray[600],
+    fgHover: gray[700],
+    bgHover: gray[50]
   },
   tertiaryColor: {
-    fg: colors2.brand[700],
-    fgHover: colors2.brand[800],
-    bgHover: colors2.brand[50]
+    fg: violet[400],
+    fgHover: violet[500],
+    bgHover: violet[50]
   },
   primaryError: {
-    bg: colors2.error[600],
-    bgHover: colors2.error[700],
-    fg: colors2.base.white,
-    fgHover: colors2.base.white,
-    border: colors2.error[600],
-    borderHover: colors2.error[700]
+    bg: error[600],
+    bgHover: error[700],
+    fg: base.white,
+    fgHover: base.white,
+    border: error[600],
+    borderHover: error[700]
   },
   secondaryError: {
-    bg: colors2.base.white,
-    bgHover: colors2.error[50],
-    fg: colors2.error[700],
-    fgHover: colors2.error[800],
-    border: colors2.error[300],
-    borderHover: colors2.error[300]
+    bg: base.white,
+    bgHover: error[50],
+    fg: error[700],
+    fgHover: error[800],
+    border: error[300],
+    borderHover: error[300]
   },
   tertiaryError: {
-    fg: colors2.error[700],
-    fgHover: colors2.error[800],
-    bgHover: colors2.error[50]
+    fg: error[700],
+    fgHover: error[800],
+    bgHover: error[50]
   }
 };
 var avatarColors2 = {
-  bg: colors2.gray[100],
+  bg: gray[100],
   contrastBorder: "#00000014",
-  profilePhotoBorder: colors2.base.white,
+  profilePhotoBorder: base.white,
   focusBorder: "#a0a0a624"
   // gray[400] + 14% alpha
 };
 var breadcrumbColors2 = {
-  fg: colors2.gray[600],
-  fgHover: colors2.gray[700],
-  bgHover: colors2.gray[50],
-  brandBgHover: colors2.brand[50],
-  brandFgHover: colors2.brand[700],
-  iconFg: colors2.gray[500],
-  iconFgHover: colors2.gray[700],
-  brandIconFgHover: colors2.brand[700]
+  fg: gray[600],
+  fgHover: gray[700],
+  bgHover: gray[50],
+  brandBgHover: violet[50],
+  brandFgHover: violet[700],
+  iconFg: gray[500],
+  iconFgHover: gray[700],
+  brandIconFgHover: violet[700]
 };
 var iconColors2 = {
-  fgBrand: colors2.brand[600],
-  fgBrandOnBrand: colors2.brand[200],
-  featuredModernBorder: colors2.gray[200],
-  featuredLightFgBrand: colors2.brand[600],
-  featuredLightFgGray: colors2.gray[500],
-  featuredLightFgError: colors2.error[600],
-  featuredLightFgWarning: colors2.warning[600],
-  featuredLightFgSuccess: colors2.success[600],
-  featuredDarkFgBrand: colors2.base.white,
-  featuredDarkFgGray: colors2.base.white,
-  featuredDarkFgError: colors2.base.white,
-  featuredDarkFgWarning: colors2.base.white,
-  featuredDarkFgSuccess: colors2.base.white
+  fgBrand: violet[400],
+  fgBrandOnBrand: violet[200],
+  featuredModernBorder: gray[200],
+  featuredLightFgBrand: violet[400],
+  featuredLightFgGray: gray[500],
+  featuredLightFgError: error[600],
+  featuredLightFgWarning: warning[600],
+  featuredLightFgSuccess: success[600],
+  featuredDarkFgBrand: base.white,
+  featuredDarkFgGray: base.white,
+  featuredDarkFgError: base.white,
+  featuredDarkFgWarning: base.white,
+  featuredDarkFgSuccess: base.white
 };
 var navColors2 = {
-  itemIconFg: colors2.gray[500],
-  itemIconFgActive: colors2.gray[700],
-  itemButtonIconFg: colors2.gray[500],
-  itemButtonIconFgActive: colors2.gray[700]
+  itemIconFg: gray[500],
+  itemIconFgActive: gray[700],
+  itemButtonIconFg: gray[500],
+  itemButtonIconFgActive: gray[700]
 };
 var sliderColors2 = {
-  handleBorder: colors2.brand[600],
-  handleBg: colors2.base.white
+  handleBorder: violet[400],
+  handleBg: base.white
 };
 var toggleColors2 = {
-  buttonFgDisabled: colors2.gray[50]
+  buttonFgDisabled: gray[50]
 };
 var chartColors2 = {
-  axisFg: colors2.gray[100],
-  gridlineFg: colors2.gray[100],
-  labelFg: colors2.gray[600],
-  labelFgEmphasis: colors2.gray[700],
-  bg: colors2.base.white,
-  bgAlt: colors2.gray[50],
-  tooltipBg: colors2.gray[950],
-  tooltipFg: colors2.base.white,
-  crosshairFg: colors2.gray[500],
+  axisFg: gray[100],
+  gridlineFg: gray[100],
+  labelFg: gray[600],
+  labelFgEmphasis: gray[700],
+  bg: base.white,
+  bgAlt: gray[50],
+  tooltipBg: gray[950],
+  tooltipFg: base.white,
+  crosshairFg: gray[500],
   legendFg: text2.tertiary,
   series: [
     { fg: misc.purple[500], fgHover: misc.purple[600], bg: misc.purple[100], bgHover: misc.purple[200] },
     { fg: misc.orangeDark[400], fgHover: misc.orangeDark[500], bg: misc.orangeDark[100], bgHover: misc.orangeDark[200] },
     { fg: misc.teal[300], fgHover: misc.teal[400], bg: misc.teal[50], bgHover: misc.teal[100] },
-    { fg: colors2.warning[400], fgHover: colors2.warning[500], bg: colors2.warning[100], bgHover: colors2.warning[200] },
+    { fg: warning[400], fgHover: warning[500], bg: warning[100], bgHover: warning[200] },
     { fg: misc.rose[400], fgHover: misc.rose[500], bg: misc.rose[100], bgHover: misc.rose[200] },
     { fg: misc.blueLight[400], fgHover: misc.blueLight[500], bg: misc.blueLight[100], bgHover: misc.blueLight[200] },
     { fg: misc.orange[300], fgHover: misc.orange[400], bg: misc.orange[100], bgHover: misc.orange[200] },
@@ -2279,9 +2465,9 @@ var chartColors2 = {
   ]
 };
 var focusRings2 = {
-  brand: "0px 0px 0px 4px #4040403d",
-  brandShadowXs: "0px 1px 2px 0px #1018280d, 0px 0px 0px 4px #4040403d",
-  brandShadowSm: "0px 1px 3px 0px #1018281a, 0px 1px 2px 0px #1018280f, 0px 0px 0px 4px #4040403d",
+  brand: "0px 0px 0px 4px #9D5FFF3d",
+  brandShadowXs: "0px 1px 2px 0px #1018280d, 0px 0px 0px 4px #9D5FFF3d",
+  brandShadowSm: "0px 1px 3px 0px #1018281a, 0px 1px 2px 0px #1018280f, 0px 0px 0px 4px #9D5FFF3d",
   gray: "0px 0px 0px 4px #a0a0a624",
   grayShadowXs: "0px 1px 2px 0px #1018280d, 0px 0px 0px 4px #a0a0a624",
   grayShadowSm: "0px 1px 3px 0px #1018281a, 0px 1px 2px 0px #1018280f, 0px 0px 0px 4px #a0a0a624",
@@ -2294,7 +2480,11 @@ var forestExternalPreset = {
   variants: {
     light: {
       tokens: {
-        colors: colors2,
+        base,
+        error,
+        warning,
+        success,
+        info,
         spacing,
         radius: radius2,
         shadows,
@@ -2325,54 +2515,19 @@ var forestExternalPreset = {
 };
 
 // src/theme/presets/forest-agency.ts
-var colors3 = {
-  ...colors,
-  /** Brand scale — black-based for primary actions */
+var colors = {
   brand: {
-    25: "#fafafa",
-    50: "#f5f5f5",
-    100: "#ebebeb",
-    200: "#d6d6d6",
-    300: "#b0b0b0",
-    400: "#737373",
-    500: "#404040",
-    600: "#1a1a1a",
-    700: "#0d0d0d",
-    800: "#050505",
-    900: "#000000",
-    950: "#000000"
-  },
-  /** Accent color — red/orange sparingly used (#FF2821) */
-  accent: {
-    25: "#fff8f7",
-    50: "#fff0ee",
-    100: "#ffe0dd",
-    200: "#ffc0bb",
-    300: "#ff9090",
-    400: "#FF2821",
-    500: "#e61a1a",
-    600: "#cc1010",
-    700: "#a30808",
-    800: "#7a0000",
-    900: "#520000",
-    950: "#290000"
-  },
-  /** Warm-neutral gray scale */
-  gray: {
-    25: "#fdfcfc",
-    50: "#faf9f8",
-    100: "#f5f3f1",
-    200: "#e8e5e3",
-    300: "#d8d8dc",
-    400: "#a0a0a6",
-    500: "#71717a",
-    600: "#52525b",
-    700: "#3f3f46",
-    800: "#27272a",
-    900: "#18181b",
-    950: "#09090b"
-  }
-};
+    50: gray[50],
+    100: gray[100],
+    200: gray[200],
+    300: gray[300],
+    500: gray[500],
+    600: gray[900],
+    // #18181b - dark brand
+    700: gray[950],
+    // #09090b - primary brand
+    800: gray[950],
+    900: gray[950]}};
 var radius3 = {
   ...radius,
   xxs: 1,
@@ -2386,215 +2541,215 @@ var radius3 = {
   "4xl": 12
 };
 var text3 = {
-  primary: colors3.gray[900],
-  secondary: colors3.gray[700],
-  secondaryHover: colors3.gray[800],
-  tertiary: colors3.gray[600],
-  tertiaryHover: colors3.gray[700],
-  quaternary: colors3.gray[500],
-  disabled: colors3.gray[500],
-  placeholder: colors3.gray[500],
-  placeholderSubtle: colors3.gray[300],
-  white: colors3.base.white,
-  brandPrimary: colors3.brand[900],
-  brandSecondary: colors3.brand[700],
-  brandTertiary: colors3.brand[600],
-  brandTertiaryAlt: colors3.brand[600],
-  primaryOnBrand: colors3.base.white,
-  secondaryOnBrand: colors3.brand[200],
-  tertiaryOnBrand: colors3.brand[200],
-  quaternaryOnBrand: colors3.brand[300],
-  errorPrimary: colors3.error[600],
-  warningPrimary: colors3.warning[600],
-  successPrimary: colors3.success[600]
+  primary: gray[900],
+  secondary: gray[700],
+  secondaryHover: gray[800],
+  tertiary: gray[600],
+  tertiaryHover: gray[700],
+  quaternary: gray[500],
+  disabled: gray[500],
+  placeholder: gray[500],
+  placeholderSubtle: gray[300],
+  white: base.white,
+  brandPrimary: colors.brand[900],
+  brandSecondary: colors.brand[700],
+  brandTertiary: colors.brand[600],
+  brandTertiaryAlt: colors.brand[600],
+  primaryOnBrand: base.white,
+  secondaryOnBrand: colors.brand[200],
+  tertiaryOnBrand: colors.brand[200],
+  quaternaryOnBrand: colors.brand[300],
+  errorPrimary: error[600],
+  warningPrimary: warning[600],
+  successPrimary: success[600]
 };
 var bg3 = {
-  primary: colors3.gray[50],
-  primaryAlt: colors3.gray[50],
-  primaryHover: colors3.gray[100],
-  primarySolid: colors3.gray[950],
-  secondary: colors3.base.white,
-  secondaryAlt: colors3.base.white,
-  secondarySubtle: colors3.gray[25],
-  secondaryHover: colors3.gray[50],
-  secondarySolid: colors3.gray[600],
-  tertiary: colors3.gray[100],
-  quaternary: colors3.gray[200],
-  active: colors3.gray[200],
-  disabled: colors3.gray[100],
-  disabledSubtle: colors3.gray[50],
-  overlay: colors3.gray[950],
-  brandPrimary: colors3.brand[50],
-  brandPrimaryAlt: colors3.brand[50],
-  brandSecondary: colors3.brand[100],
-  brandSolid: colors3.brand[600],
-  brandSolidHover: colors3.brand[700],
-  brandSection: colors3.brand[800],
-  brandSectionSubtle: colors3.brand[700],
-  errorPrimary: colors3.error[50],
-  errorSecondary: colors3.error[100],
-  errorSolid: colors3.error[600],
-  warningPrimary: colors3.warning[50],
-  warningSecondary: colors3.warning[100],
-  warningSolid: colors3.warning[600],
-  successPrimary: colors3.success[50],
-  successSecondary: colors3.success[100],
-  successSolid: colors3.success[600]
+  primary: gray[50],
+  primaryAlt: gray[50],
+  primaryHover: gray[100],
+  primarySolid: gray[950],
+  secondary: base.white,
+  secondaryAlt: base.white,
+  secondarySubtle: gray[25],
+  secondaryHover: gray[50],
+  secondarySolid: gray[600],
+  tertiary: gray[100],
+  quaternary: gray[200],
+  active: gray[200],
+  disabled: gray[100],
+  disabledSubtle: gray[50],
+  overlay: 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: error[50],
+  errorSecondary: error[100],
+  errorSolid: error[600],
+  warningPrimary: warning[50],
+  warningSecondary: warning[100],
+  warningSolid: warning[600],
+  successPrimary: success[50],
+  successSecondary: success[100],
+  successSolid: success[600]
 };
 var fg3 = {
-  primary: colors3.gray[900],
-  secondary: colors3.gray[700],
-  secondaryHover: colors3.gray[800],
-  tertiary: colors3.gray[600],
-  tertiaryHover: colors3.gray[700],
-  quaternary: colors3.gray[500],
-  quaternaryHover: colors3.gray[600],
-  quinary: colors3.gray[400],
-  quinaryHover: colors3.gray[500],
-  senary: colors3.gray[300],
-  white: colors3.base.white,
-  disabled: colors3.gray[400],
-  disabledSubtle: colors3.gray[300],
-  brandPrimary: colors3.brand[600],
-  brandPrimaryAlt: colors3.brand[600],
-  brandSecondary: colors3.brand[500],
-  errorPrimary: colors3.error[600],
-  errorSecondary: colors3.error[500],
-  warningPrimary: colors3.warning[600],
-  warningSecondary: colors3.warning[500],
-  successPrimary: colors3.success[600],
-  successSecondary: colors3.success[500]
+  primary: gray[900],
+  secondary: gray[700],
+  secondaryHover: gray[800],
+  tertiary: gray[600],
+  tertiaryHover: gray[700],
+  quaternary: gray[500],
+  quaternaryHover: gray[600],
+  quinary: gray[400],
+  quinaryHover: gray[500],
+  senary: gray[300],
+  white: base.white,
+  disabled: gray[400],
+  disabledSubtle: gray[300],
+  brandPrimary: colors.brand[600],
+  brandPrimaryAlt: colors.brand[600],
+  brandSecondary: colors.brand[500],
+  errorPrimary: error[600],
+  errorSecondary: error[500],
+  warningPrimary: warning[600],
+  warningSecondary: warning[500],
+  successPrimary: success[600],
+  successSecondary: success[500]
 };
 var border3 = {
-  primary: colors3.gray[300],
-  secondary: colors3.gray[200],
-  tertiary: colors3.gray[100],
-  disabled: colors3.gray[300],
-  disabledSubtle: colors3.gray[200],
-  brand: colors3.brand[300],
-  brandSolid: colors3.brand[600],
-  brandSolidAlt: colors3.brand[600],
-  error: colors3.error[300],
-  errorSolid: colors3.error[600]
+  primary: gray[300],
+  secondary: gray[200],
+  tertiary: gray[100],
+  disabled: gray[300],
+  disabledSubtle: gray[200],
+  brand: colors.brand[300],
+  brandSolid: colors.brand[600],
+  brandSolidAlt: colors.brand[600],
+  error: error[300],
+  errorSolid: error[600]
 };
 var buttonColors3 = {
   primary: {
-    bg: colors3.brand[600],
-    bgHover: colors3.brand[700],
-    fg: colors3.base.white,
-    fgHover: colors3.base.white,
-    border: colors3.brand[600],
-    borderHover: colors3.brand[700]
+    bg: colors.brand[700],
+    bgHover: colors.brand[800],
+    fg: base.white,
+    fgHover: base.white,
+    border: colors.brand[700],
+    borderHover: colors.brand[800]
   },
   secondary: {
-    bg: colors3.base.white,
-    bgHover: colors3.gray[50],
-    fg: colors3.gray[700],
-    fgHover: colors3.gray[800],
-    border: colors3.gray[300],
-    borderHover: colors3.gray[300]
+    bg: gray[900],
+    bgHover: gray[950],
+    fg: base.white,
+    fgHover: base.white,
+    border: gray[900],
+    borderHover: gray[950]
   },
   secondaryColor: {
-    bg: colors3.base.white,
-    bgHover: colors3.brand[50],
-    fg: colors3.brand[700],
-    fgHover: colors3.brand[800],
-    border: colors3.brand[300],
-    borderHover: colors3.brand[300]
+    bg: base.white,
+    bgHover: colors.brand[50],
+    fg: colors.brand[700],
+    fgHover: colors.brand[800],
+    border: colors.brand[300],
+    borderHover: colors.brand[300]
   },
   tertiary: {
-    fg: colors3.gray[600],
-    fgHover: colors3.gray[700],
-    bgHover: colors3.gray[50]
+    fg: gray[600],
+    fgHover: gray[700],
+    bgHover: gray[50]
   },
   tertiaryColor: {
-    fg: colors3.brand[700],
-    fgHover: colors3.brand[800],
-    bgHover: colors3.brand[50]
+    fg: colors.brand[700],
+    fgHover: colors.brand[800],
+    bgHover: colors.brand[50]
   },
   primaryError: {
-    bg: colors3.error[600],
-    bgHover: colors3.error[700],
-    fg: colors3.base.white,
-    fgHover: colors3.base.white,
-    border: colors3.error[600],
-    borderHover: colors3.error[700]
+    bg: error[600],
+    bgHover: error[700],
+    fg: base.white,
+    fgHover: base.white,
+    border: error[600],
+    borderHover: error[700]
   },
   secondaryError: {
-    bg: colors3.base.white,
-    bgHover: colors3.error[50],
-    fg: colors3.error[700],
-    fgHover: colors3.error[800],
-    border: colors3.error[300],
-    borderHover: colors3.error[300]
+    bg: base.white,
+    bgHover: error[50],
+    fg: error[700],
+    fgHover: error[800],
+    border: error[300],
+    borderHover: error[300]
   },
   tertiaryError: {
-    fg: colors3.error[700],
-    fgHover: colors3.error[800],
-    bgHover: colors3.error[50]
+    fg: error[700],
+    fgHover: error[800],
+    bgHover: error[50]
   }
 };
 var avatarColors3 = {
-  bg: colors3.gray[100],
+  bg: gray[100],
   contrastBorder: "#00000014",
-  profilePhotoBorder: colors3.base.white,
+  profilePhotoBorder: base.white,
   focusBorder: "#a0a0a624"
   // gray[400] + 14% alpha
 };
 var breadcrumbColors3 = {
-  fg: colors3.gray[600],
-  fgHover: colors3.gray[700],
-  bgHover: colors3.gray[50],
-  brandBgHover: colors3.brand[50],
-  brandFgHover: colors3.brand[700],
-  iconFg: colors3.gray[500],
-  iconFgHover: colors3.gray[700],
-  brandIconFgHover: colors3.brand[700]
+  fg: gray[600],
+  fgHover: gray[700],
+  bgHover: gray[50],
+  brandBgHover: colors.brand[50],
+  brandFgHover: colors.brand[700],
+  iconFg: gray[500],
+  iconFgHover: gray[700],
+  brandIconFgHover: colors.brand[700]
 };
 var iconColors3 = {
-  fgBrand: colors3.brand[600],
-  fgBrandOnBrand: colors3.brand[200],
-  featuredModernBorder: colors3.gray[200],
-  featuredLightFgBrand: colors3.brand[600],
-  featuredLightFgGray: colors3.gray[500],
-  featuredLightFgError: colors3.error[600],
-  featuredLightFgWarning: colors3.warning[600],
-  featuredLightFgSuccess: colors3.success[600],
-  featuredDarkFgBrand: colors3.base.white,
-  featuredDarkFgGray: colors3.base.white,
-  featuredDarkFgError: colors3.base.white,
-  featuredDarkFgWarning: colors3.base.white,
-  featuredDarkFgSuccess: colors3.base.white
+  fgBrand: colors.brand[600],
+  fgBrandOnBrand: colors.brand[200],
+  featuredModernBorder: gray[200],
+  featuredLightFgBrand: colors.brand[600],
+  featuredLightFgGray: gray[500],
+  featuredLightFgError: error[600],
+  featuredLightFgWarning: warning[600],
+  featuredLightFgSuccess: success[600],
+  featuredDarkFgBrand: base.white,
+  featuredDarkFgGray: base.white,
+  featuredDarkFgError: base.white,
+  featuredDarkFgWarning: base.white,
+  featuredDarkFgSuccess: base.white
 };
 var navColors3 = {
-  itemIconFg: colors3.gray[500],
-  itemIconFgActive: colors3.gray[700],
-  itemButtonIconFg: colors3.gray[500],
-  itemButtonIconFgActive: colors3.gray[700]
+  itemIconFg: gray[500],
+  itemIconFgActive: gray[700],
+  itemButtonIconFg: gray[500],
+  itemButtonIconFgActive: gray[700]
 };
 var sliderColors3 = {
-  handleBorder: colors3.brand[600],
-  handleBg: colors3.base.white
+  handleBorder: colors.brand[600],
+  handleBg: base.white
 };
 var toggleColors3 = {
-  buttonFgDisabled: colors3.gray[50]
+  buttonFgDisabled: gray[50]
 };
 var chartColors3 = {
-  axisFg: colors3.gray[100],
-  gridlineFg: colors3.gray[100],
-  labelFg: colors3.gray[600],
-  labelFgEmphasis: colors3.gray[700],
-  bg: colors3.base.white,
-  bgAlt: colors3.gray[50],
-  tooltipBg: colors3.gray[950],
-  tooltipFg: colors3.base.white,
-  crosshairFg: colors3.gray[500],
+  axisFg: gray[100],
+  gridlineFg: gray[100],
+  labelFg: gray[600],
+  labelFgEmphasis: gray[700],
+  bg: base.white,
+  bgAlt: gray[50],
+  tooltipBg: gray[950],
+  tooltipFg: base.white,
+  crosshairFg: gray[500],
   legendFg: text3.tertiary,
   series: [
     { fg: misc.purple[500], fgHover: misc.purple[600], bg: misc.purple[100], bgHover: misc.purple[200] },
     { fg: misc.orangeDark[400], fgHover: misc.orangeDark[500], bg: misc.orangeDark[100], bgHover: misc.orangeDark[200] },
     { fg: misc.teal[300], fgHover: misc.teal[400], bg: misc.teal[50], bgHover: misc.teal[100] },
-    { fg: colors3.warning[400], fgHover: colors3.warning[500], bg: colors3.warning[100], bgHover: colors3.warning[200] },
+    { fg: warning[400], fgHover: warning[500], bg: warning[100], bgHover: warning[200] },
     { fg: misc.rose[400], fgHover: misc.rose[500], bg: misc.rose[100], bgHover: misc.rose[200] },
     { fg: misc.blueLight[400], fgHover: misc.blueLight[500], bg: misc.blueLight[100], bgHover: misc.blueLight[200] },
     { fg: misc.orange[300], fgHover: misc.orange[400], bg: misc.orange[100], bgHover: misc.orange[200] },
@@ -2621,7 +2776,11 @@ var forestAgencyPreset = {
   variants: {
     light: {
       tokens: {
-        colors: colors3,
+        base,
+        error,
+        warning,
+        success,
+        info,
         spacing,
         radius: radius3,
         shadows,
@@ -2652,39 +2811,6 @@ var forestAgencyPreset = {
 };
 
 // src/theme/presets/forest-internal.ts
-var colors4 = {
-  ...colors,
-  /** Brand scale — pink/magenta for internal tools (#FF78F3) */
-  brand: {
-    25: "#fff8fd",
-    50: "#fff0fa",
-    100: "#ffe0f5",
-    200: "#ffc0eb",
-    300: "#ff90d8",
-    400: "#FF78F3",
-    500: "#e650d4",
-    600: "#cc28b5",
-    700: "#a3008c",
-    800: "#7a0066",
-    900: "#520044",
-    950: "#290022"
-  },
-  /** Warm-neutral gray scale */
-  gray: {
-    25: "#fdfcfc",
-    50: "#faf9f8",
-    100: "#f5f3f1",
-    200: "#e8e5e3",
-    300: "#d8d8dc",
-    400: "#a0a0a6",
-    500: "#71717a",
-    600: "#52525b",
-    700: "#3f3f46",
-    800: "#27272a",
-    900: "#18181b",
-    950: "#09090b"
-  }
-};
 var radius4 = {
   ...radius,
   xxs: 1,
@@ -2698,215 +2824,215 @@ var radius4 = {
   "4xl": 12
 };
 var text4 = {
-  primary: colors4.gray[900],
-  secondary: colors4.gray[700],
-  secondaryHover: colors4.gray[800],
-  tertiary: colors4.gray[600],
-  tertiaryHover: colors4.gray[700],
-  quaternary: colors4.gray[500],
-  disabled: colors4.gray[500],
-  placeholder: colors4.gray[500],
-  placeholderSubtle: colors4.gray[300],
-  white: colors4.base.white,
-  brandPrimary: colors4.brand[900],
-  brandSecondary: colors4.brand[700],
-  brandTertiary: colors4.brand[600],
-  brandTertiaryAlt: colors4.brand[600],
-  primaryOnBrand: colors4.base.white,
-  secondaryOnBrand: colors4.brand[200],
-  tertiaryOnBrand: colors4.brand[200],
-  quaternaryOnBrand: colors4.brand[300],
-  errorPrimary: colors4.error[600],
-  warningPrimary: colors4.warning[600],
-  successPrimary: colors4.success[600]
+  primary: gray[900],
+  secondary: gray[700],
+  secondaryHover: gray[800],
+  tertiary: gray[600],
+  tertiaryHover: gray[700],
+  quaternary: gray[500],
+  disabled: gray[500],
+  placeholder: gray[500],
+  placeholderSubtle: gray[300],
+  white: base.white,
+  brandPrimary: magenta[900],
+  brandSecondary: magenta[700],
+  brandTertiary: magenta[600],
+  brandTertiaryAlt: magenta[600],
+  primaryOnBrand: base.white,
+  secondaryOnBrand: magenta[200],
+  tertiaryOnBrand: magenta[200],
+  quaternaryOnBrand: magenta[300],
+  errorPrimary: error[600],
+  warningPrimary: warning[600],
+  successPrimary: success[600]
 };
 var bg4 = {
-  primary: colors4.gray[50],
-  primaryAlt: colors4.gray[50],
-  primaryHover: colors4.gray[100],
-  primarySolid: colors4.gray[950],
-  secondary: colors4.base.white,
-  secondaryAlt: colors4.base.white,
-  secondarySubtle: colors4.gray[25],
-  secondaryHover: colors4.gray[50],
-  secondarySolid: colors4.gray[600],
-  tertiary: colors4.gray[100],
-  quaternary: colors4.gray[200],
-  active: colors4.gray[200],
-  disabled: colors4.gray[100],
-  disabledSubtle: colors4.gray[50],
-  overlay: colors4.gray[950],
-  brandPrimary: colors4.brand[50],
-  brandPrimaryAlt: colors4.brand[50],
-  brandSecondary: colors4.brand[100],
-  brandSolid: colors4.brand[600],
-  brandSolidHover: colors4.brand[700],
-  brandSection: colors4.brand[800],
-  brandSectionSubtle: colors4.brand[700],
-  errorPrimary: colors4.error[50],
-  errorSecondary: colors4.error[100],
-  errorSolid: colors4.error[600],
-  warningPrimary: colors4.warning[50],
-  warningSecondary: colors4.warning[100],
-  warningSolid: colors4.warning[600],
-  successPrimary: colors4.success[50],
-  successSecondary: colors4.success[100],
-  successSolid: colors4.success[600]
+  primary: gray[50],
+  primaryAlt: gray[50],
+  primaryHover: gray[100],
+  primarySolid: gray[950],
+  secondary: base.white,
+  secondaryAlt: base.white,
+  secondarySubtle: gray[25],
+  secondaryHover: gray[50],
+  secondarySolid: gray[600],
+  tertiary: gray[100],
+  quaternary: gray[200],
+  active: gray[200],
+  disabled: gray[100],
+  disabledSubtle: gray[50],
+  overlay: gray[950],
+  brandPrimary: magenta[50],
+  brandPrimaryAlt: magenta[50],
+  brandSecondary: magenta[100],
+  brandSolid: magenta[400],
+  brandSolidHover: magenta[500],
+  brandSection: magenta[800],
+  brandSectionSubtle: magenta[700],
+  errorPrimary: error[50],
+  errorSecondary: error[100],
+  errorSolid: error[600],
+  warningPrimary: warning[50],
+  warningSecondary: warning[100],
+  warningSolid: warning[600],
+  successPrimary: success[50],
+  successSecondary: success[100],
+  successSolid: success[600]
 };
 var fg4 = {
-  primary: colors4.gray[900],
-  secondary: colors4.gray[700],
-  secondaryHover: colors4.gray[800],
-  tertiary: colors4.gray[600],
-  tertiaryHover: colors4.gray[700],
-  quaternary: colors4.gray[500],
-  quaternaryHover: colors4.gray[600],
-  quinary: colors4.gray[400],
-  quinaryHover: colors4.gray[500],
-  senary: colors4.gray[300],
-  white: colors4.base.white,
-  disabled: colors4.gray[400],
-  disabledSubtle: colors4.gray[300],
-  brandPrimary: colors4.brand[600],
-  brandPrimaryAlt: colors4.brand[600],
-  brandSecondary: colors4.brand[500],
-  errorPrimary: colors4.error[600],
-  errorSecondary: colors4.error[500],
-  warningPrimary: colors4.warning[600],
-  warningSecondary: colors4.warning[500],
-  successPrimary: colors4.success[600],
-  successSecondary: colors4.success[500]
+  primary: gray[900],
+  secondary: gray[700],
+  secondaryHover: gray[800],
+  tertiary: gray[600],
+  tertiaryHover: gray[700],
+  quaternary: gray[500],
+  quaternaryHover: gray[600],
+  quinary: gray[400],
+  quinaryHover: gray[500],
+  senary: gray[300],
+  white: base.white,
+  disabled: gray[400],
+  disabledSubtle: gray[300],
+  brandPrimary: magenta[400],
+  brandPrimaryAlt: magenta[400],
+  brandSecondary: magenta[400],
+  errorPrimary: error[600],
+  errorSecondary: error[500],
+  warningPrimary: warning[600],
+  warningSecondary: warning[500],
+  successPrimary: success[600],
+  successSecondary: success[500]
 };
 var border4 = {
-  primary: colors4.gray[300],
-  secondary: colors4.gray[200],
-  tertiary: colors4.gray[100],
-  disabled: colors4.gray[300],
-  disabledSubtle: colors4.gray[200],
-  brand: colors4.brand[300],
-  brandSolid: colors4.brand[600],
-  brandSolidAlt: colors4.brand[600],
-  error: colors4.error[300],
-  errorSolid: colors4.error[600]
+  primary: gray[300],
+  secondary: gray[200],
+  tertiary: gray[100],
+  disabled: gray[300],
+  disabledSubtle: gray[200],
+  brand: magenta[300],
+  brandSolid: magenta[400],
+  brandSolidAlt: magenta[400],
+  error: error[300],
+  errorSolid: error[600]
 };
 var buttonColors4 = {
   primary: {
-    bg: colors4.brand[600],
-    bgHover: colors4.brand[700],
-    fg: colors4.base.white,
-    fgHover: colors4.base.white,
-    border: colors4.brand[600],
-    borderHover: colors4.brand[700]
+    bg: magenta[400],
+    bgHover: magenta[500],
+    fg: base.white,
+    fgHover: base.white,
+    border: magenta[400],
+    borderHover: magenta[500]
   },
   secondary: {
-    bg: colors4.base.white,
-    bgHover: colors4.gray[50],
-    fg: colors4.gray[700],
-    fgHover: colors4.gray[800],
-    border: colors4.gray[300],
-    borderHover: colors4.gray[300]
+    bg: gray[900],
+    bgHover: gray[950],
+    fg: base.white,
+    fgHover: base.white,
+    border: gray[900],
+    borderHover: gray[950]
   },
   secondaryColor: {
-    bg: colors4.base.white,
-    bgHover: colors4.brand[50],
-    fg: colors4.brand[700],
-    fgHover: colors4.brand[800],
-    border: colors4.brand[300],
-    borderHover: colors4.brand[300]
+    bg: base.white,
+    bgHover: magenta[50],
+    fg: magenta[400],
+    fgHover: magenta[500],
+    border: magenta[300],
+    borderHover: magenta[300]
   },
   tertiary: {
-    fg: colors4.gray[600],
-    fgHover: colors4.gray[700],
-    bgHover: colors4.gray[50]
+    fg: gray[600],
+    fgHover: gray[700],
+    bgHover: gray[50]
   },
   tertiaryColor: {
-    fg: colors4.brand[700],
-    fgHover: colors4.brand[800],
-    bgHover: colors4.brand[50]
+    fg: magenta[400],
+    fgHover: magenta[500],
+    bgHover: magenta[50]
   },
   primaryError: {
-    bg: colors4.error[600],
-    bgHover: colors4.error[700],
-    fg: colors4.base.white,
-    fgHover: colors4.base.white,
-    border: colors4.error[600],
-    borderHover: colors4.error[700]
+    bg: error[600],
+    bgHover: error[700],
+    fg: base.white,
+    fgHover: base.white,
+    border: error[600],
+    borderHover: error[700]
   },
   secondaryError: {
-    bg: colors4.base.white,
-    bgHover: colors4.error[50],
-    fg: colors4.error[700],
-    fgHover: colors4.error[800],
-    border: colors4.error[300],
-    borderHover: colors4.error[300]
+    bg: base.white,
+    bgHover: error[50],
+    fg: error[700],
+    fgHover: error[800],
+    border: error[300],
+    borderHover: error[300]
   },
   tertiaryError: {
-    fg: colors4.error[700],
-    fgHover: colors4.error[800],
-    bgHover: colors4.error[50]
+    fg: error[700],
+    fgHover: error[800],
+    bgHover: error[50]
   }
 };
 var avatarColors4 = {
-  bg: colors4.gray[100],
+  bg: gray[100],
   contrastBorder: "#00000014",
-  profilePhotoBorder: colors4.base.white,
+  profilePhotoBorder: base.white,
   focusBorder: "#a0a0a624"
   // gray[400] + 14% alpha
 };
 var breadcrumbColors4 = {
-  fg: colors4.gray[600],
-  fgHover: colors4.gray[700],
-  bgHover: colors4.gray[50],
-  brandBgHover: colors4.brand[50],
-  brandFgHover: colors4.brand[700],
-  iconFg: colors4.gray[500],
-  iconFgHover: colors4.gray[700],
-  brandIconFgHover: colors4.brand[700]
+  fg: gray[600],
+  fgHover: gray[700],
+  bgHover: gray[50],
+  brandBgHover: magenta[50],
+  brandFgHover: magenta[700],
+  iconFg: gray[500],
+  iconFgHover: gray[700],
+  brandIconFgHover: magenta[700]
 };
 var iconColors4 = {
-  fgBrand: colors4.brand[600],
-  fgBrandOnBrand: colors4.brand[200],
-  featuredModernBorder: colors4.gray[200],
-  featuredLightFgBrand: colors4.brand[600],
-  featuredLightFgGray: colors4.gray[500],
-  featuredLightFgError: colors4.error[600],
-  featuredLightFgWarning: colors4.warning[600],
-  featuredLightFgSuccess: colors4.success[600],
-  featuredDarkFgBrand: colors4.base.white,
-  featuredDarkFgGray: colors4.base.white,
-  featuredDarkFgError: colors4.base.white,
-  featuredDarkFgWarning: colors4.base.white,
-  featuredDarkFgSuccess: colors4.base.white
+  fgBrand: magenta[400],
+  fgBrandOnBrand: magenta[200],
+  featuredModernBorder: gray[200],
+  featuredLightFgBrand: magenta[400],
+  featuredLightFgGray: gray[500],
+  featuredLightFgError: error[600],
+  featuredLightFgWarning: warning[600],
+  featuredLightFgSuccess: success[600],
+  featuredDarkFgBrand: base.white,
+  featuredDarkFgGray: base.white,
+  featuredDarkFgError: base.white,
+  featuredDarkFgWarning: base.white,
+  featuredDarkFgSuccess: base.white
 };
 var navColors4 = {
-  itemIconFg: colors4.gray[500],
-  itemIconFgActive: colors4.gray[700],
-  itemButtonIconFg: colors4.gray[500],
-  itemButtonIconFgActive: colors4.gray[700]
+  itemIconFg: gray[500],
+  itemIconFgActive: gray[700],
+  itemButtonIconFg: gray[500],
+  itemButtonIconFgActive: gray[700]
 };
 var sliderColors4 = {
-  handleBorder: colors4.brand[600],
-  handleBg: colors4.base.white
+  handleBorder: magenta[400],
+  handleBg: base.white
 };
 var toggleColors4 = {
-  buttonFgDisabled: colors4.gray[50]
+  buttonFgDisabled: gray[50]
 };
 var chartColors4 = {
-  axisFg: colors4.gray[100],
-  gridlineFg: colors4.gray[100],
-  labelFg: colors4.gray[600],
-  labelFgEmphasis: colors4.gray[700],
-  bg: colors4.base.white,
-  bgAlt: colors4.gray[50],
-  tooltipBg: colors4.gray[950],
-  tooltipFg: colors4.base.white,
-  crosshairFg: colors4.gray[500],
+  axisFg: gray[100],
+  gridlineFg: gray[100],
+  labelFg: gray[600],
+  labelFgEmphasis: gray[700],
+  bg: base.white,
+  bgAlt: gray[50],
+  tooltipBg: gray[950],
+  tooltipFg: base.white,
+  crosshairFg: gray[500],
   legendFg: text4.tertiary,
   series: [
     { fg: misc.purple[500], fgHover: misc.purple[600], bg: misc.purple[100], bgHover: misc.purple[200] },
     { fg: misc.orangeDark[400], fgHover: misc.orangeDark[500], bg: misc.orangeDark[100], bgHover: misc.orangeDark[200] },
     { fg: misc.teal[300], fgHover: misc.teal[400], bg: misc.teal[50], bgHover: misc.teal[100] },
-    { fg: colors4.warning[400], fgHover: colors4.warning[500], bg: colors4.warning[100], bgHover: colors4.warning[200] },
+    { fg: warning[400], fgHover: warning[500], bg: warning[100], bgHover: warning[200] },
     { fg: misc.rose[400], fgHover: misc.rose[500], bg: misc.rose[100], bgHover: misc.rose[200] },
     { fg: misc.blueLight[400], fgHover: misc.blueLight[500], bg: misc.blueLight[100], bgHover: misc.blueLight[200] },
     { fg: misc.orange[300], fgHover: misc.orange[400], bg: misc.orange[100], bgHover: misc.orange[200] },
@@ -2918,9 +3044,9 @@ var chartColors4 = {
   ]
 };
 var focusRings4 = {
-  brand: "0px 0px 0px 4px #4040403d",
-  brandShadowXs: "0px 1px 2px 0px #1018280d, 0px 0px 0px 4px #4040403d",
-  brandShadowSm: "0px 1px 3px 0px #1018281a, 0px 1px 2px 0px #1018280f, 0px 0px 0px 4px #4040403d",
+  brand: "0px 0px 0px 4px #FF78F33d",
+  brandShadowXs: "0px 1px 2px 0px #1018280d, 0px 0px 0px 4px #FF78F33d",
+  brandShadowSm: "0px 1px 3px 0px #1018281a, 0px 1px 2px 0px #1018280f, 0px 0px 0px 4px #FF78F33d",
   gray: "0px 0px 0px 4px #a0a0a624",
   grayShadowXs: "0px 1px 2px 0px #1018280d, 0px 0px 0px 4px #a0a0a624",
   grayShadowSm: "0px 1px 3px 0px #1018281a, 0px 1px 2px 0px #1018280f, 0px 0px 0px 4px #a0a0a624",
@@ -2933,7 +3059,11 @@ var forestInternalPreset = {
   variants: {
     light: {
       tokens: {
-        colors: colors4,
+        base,
+        error,
+        warning,
+        success,
+        info,
         spacing,
         radius: radius4,
         shadows,
@@ -3015,17 +3145,17 @@ function ForestProvider({
 function Autocomplete(props) {
   return /* @__PURE__ */ jsxRuntime.jsx(MuiAutocomplete__default.default, { ...props });
 }
-function Button({ ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(MuiButton__default.default, { variant: "contained", ...props });
+function Button({ variant = "contained", ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(MuiButton__default.default, { variant, ...props });
 }
-function ButtonGroup(props) {
-  return /* @__PURE__ */ jsxRuntime.jsx(MuiButtonGroup__default.default, { variant: "contained", ...props });
+function ButtonGroup({ variant = "contained", ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(MuiButtonGroup__default.default, { variant, ...props });
 }
 function Checkbox(props) {
   return /* @__PURE__ */ jsxRuntime.jsx(MuiCheckbox__default.default, { ...props });
 }
-function Fab(props) {
-  return /* @__PURE__ */ jsxRuntime.jsx(MuiFab__default.default, { color: "primary", ...props });
+function Fab({ color = "primary", ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(MuiFab__default.default, { color, ...props });
 }
 function RadioGroup(props) {
   return /* @__PURE__ */ jsxRuntime.jsx(MuiRadioGroup__default.default, { ...props });
@@ -3115,6 +3245,7 @@ function Search({
   onChange,
   onClear,
   placeholder = "Search\u2026",
+  variant = "outlined",
   slotProps,
   ...props
 }) {
@@ -3135,7 +3266,7 @@ function Search({
   return /* @__PURE__ */ jsxRuntime.jsx(
     MuiTextField__default.default,
     {
-      variant: "outlined",
+      variant,
       placeholder,
       value: currentValue,
       onChange: handleChange,
@@ -3246,11 +3377,11 @@ function Badge(props) {
 var CloseOutlined_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"
 }), "CloseOutlined");
-function Chip(props) {
+function Chip({ deleteIcon = /* @__PURE__ */ jsxRuntime.jsx(CloseOutlined_default, {}), ...props }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     MuiChip__default.default,
     {
-      deleteIcon: /* @__PURE__ */ jsxRuntime.jsx(CloseOutlined_default, {}),
+      deleteIcon,
       ...props
     }
   );
@@ -3300,8 +3431,8 @@ function TableRow(props) {
 function DataGrid(props) {
   return /* @__PURE__ */ jsxRuntime.jsx(xDataGrid.DataGrid, { ...props });
 }
-function Tooltip(props) {
-  return /* @__PURE__ */ jsxRuntime.jsx(MuiTooltip__default.default, { arrow: true, ...props });
+function Tooltip({ arrow = true, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(MuiTooltip__default.default, { arrow, ...props });
 }
 function Typography(props) {
   return /* @__PURE__ */ jsxRuntime.jsx(MuiTypography__default.default, { ...props });
@@ -3576,8 +3707,8 @@ function SidebarItem({
 function useChartColors(count) {
   const theme = styles.useTheme();
   const chart = theme.palette.chart;
-  const colors5 = chart.series.map((s) => s.fg);
-  return colors5.slice(0, Math.min(count, colors5.length));
+  const colors2 = chart.series.map((s) => s.fg);
+  return colors2.slice(0, Math.min(count, colors2.length));
 }
 function formatDate(date) {
   if (!date) return "";
@@ -3688,7 +3819,7 @@ function CustomTooltip(props) {
     }
   );
 }
-function LineChart({ series, colors: colors5, ...props }) {
+function LineChart({ series, colors: colors2, ...props }) {
   var _a, _b;
   const theme = styles.useTheme();
   const chart = theme.palette.chart;
@@ -3705,7 +3836,7 @@ function LineChart({ series, colors: colors5, ...props }) {
     LineChart$1.LineChart,
     {
       series: modifiedSeries != null ? modifiedSeries : [],
-      colors: colors5 != null ? colors5 : seriesColors,
+      colors: colors2 != null ? colors2 : seriesColors,
       grid: { horizontal: true },
       slots: {
         axisContent: CustomTooltip
@@ -3769,12 +3900,12 @@ function LineChart({ series, colors: colors5, ...props }) {
     }
   );
 }
-function BarChart({ series, colors: colors5, ...props }) {
+function BarChart({ series, colors: colors2, ...props }) {
   var _a, _b;
   const theme = styles.useTheme();
   const chart = theme.palette.chart;
   const seriesColors = useChartColors((_a = series == null ? void 0 : series.length) != null ? _a : 0);
-  const resolvedColors = colors5 != null ? colors5 : seriesColors;
+  const resolvedColors = colors2 != null ? colors2 : seriesColors;
   const modifiedSeries = series == null ? void 0 : series.map((s, idx) => {
     var _a2;
     const baseColor = s.color || resolvedColors[idx % resolvedColors.length];
@@ -3790,7 +3921,7 @@ function BarChart({ series, colors: colors5, ...props }) {
     BarChart$1.BarChart,
     {
       series: modifiedSeries != null ? modifiedSeries : [],
-      colors: colors5 != null ? colors5 : seriesColors,
+      colors: colors2 != null ? colors2 : seriesColors,
       grid: { horizontal: true },
       borderRadius: 4,
       slots: {
@@ -3868,7 +3999,7 @@ function BarChart({ series, colors: colors5, ...props }) {
     }
   );
 }
-function PieChart({ series, colors: colors5, ...props }) {
+function PieChart({ series, colors: colors2, ...props }) {
   var _a, _b, _c, _d;
   const theme = styles.useTheme();
   const chart = theme.palette.chart;
@@ -3885,7 +4016,7 @@ function PieChart({ series, colors: colors5, ...props }) {
     PieChart$1.PieChart,
     {
       series: modifiedSeries != null ? modifiedSeries : [],
-      colors: colors5 != null ? colors5 : seriesColors,
+      colors: colors2 != null ? colors2 : seriesColors,
       slotProps: {
         legend: {
           itemMarkWidth: 12,
@@ -4003,6 +4134,7 @@ exports.Tooltip = Tooltip;
 exports.Typography = Typography;
 exports.alpha = alpha;
 exports.avatarColors = avatarColors;
+exports.base = base;
 exports.bg = bg;
 exports.border = border;
 exports.breadcrumbColors = breadcrumbColors;
@@ -4010,9 +4142,9 @@ exports.buildTheme = buildTheme;
 exports.buildThemeOptions = buildThemeOptions;
 exports.buttonColors = buttonColors;
 exports.chartColors = chartColors;
-exports.colors = colors;
 exports.container = container;
 exports.display = display;
+exports.error = error;
 exports.fg = fg;
 exports.focusRings = focusRings;
 exports.fontFamily = fontFamily;
@@ -4026,17 +4158,20 @@ exports.forestThemeOptions = forestThemeOptions;
 exports.getAvailablePresets = getAvailablePresets;
 exports.getPreset = getPreset;
 exports.iconColors = iconColors;
+exports.info = info;
 exports.lineHeight = lineHeight;
 exports.navColors = navColors;
 exports.radius = radius;
 exports.registerPreset = registerPreset;
 exports.sliderColors = sliderColors;
 exports.spacing = spacing;
+exports.success = success;
 exports.text = text;
 exports.toggleColors = toggleColors;
 exports.tokenShadows = shadows;
 exports.useChartColors = useChartColors;
 exports.useSidebar = useSidebar;
+exports.warning = warning;
 exports.widths = widths;
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map