@matteoaliano/forest-ui 0.2.0 → 0.2.1

package/dist/theme.js

@@ -198,1094 +198,1176 @@ var widths = {
 };
 
 // src/theme/palette.ts
-var palette = {
-  primary: {
-    main: colors.brand[600],
-    light: colors.brand[400],
-    dark: colors.brand[700],
-    contrastText: colors.base.white
-  },
-  secondary: {
-    main: colors.gray[600],
-    light: colors.gray[400],
-    dark: colors.gray[700],
-    contrastText: colors.base.white
-  },
-  error: {
-    main: colors.error[600],
-    light: colors.error[300],
-    dark: colors.error[700],
-    contrastText: colors.base.white
-  },
-  warning: {
-    main: colors.warning[600],
-    light: colors.warning[300],
-    dark: colors.warning[700],
-    contrastText: colors.base.white
-  },
-  success: {
-    main: colors.success[600],
-    light: colors.success[300],
-    dark: colors.success[700],
-    contrastText: colors.base.white
-  },
-  info: {
-    main: colors.blue[600],
-    light: colors.blue[300],
-    dark: colors.blue[700],
-    contrastText: colors.base.white
-  },
-  background: {
-    default: colors.base.white,
-    paper: colors.base.white
-  },
-  text: {
-    primary: colors.gray[900],
-    secondary: colors.gray[700],
-    disabled: colors.gray[500]
-  },
-  divider: colors.gray[200],
-  action: {
-    active: colors.gray[600],
-    hover: colors.gray[50],
-    selected: colors.brand[50],
-    disabled: colors.gray[400],
-    disabledBackground: colors.gray[100]
-  }
-};
+function buildPalette(tokens) {
+  const { colors: colors2 } = tokens;
+  return {
+    primary: {
+      main: colors2.brand[600],
+      light: colors2.brand[400],
+      dark: colors2.brand[700],
+      contrastText: colors2.base.white
+    },
+    secondary: {
+      main: colors2.gray[600],
+      light: colors2.gray[400],
+      dark: colors2.gray[700],
+      contrastText: colors2.base.white
+    },
+    error: {
+      main: colors2.error[600],
+      light: colors2.error[300],
+      dark: colors2.error[700],
+      contrastText: colors2.base.white
+    },
+    warning: {
+      main: colors2.warning[600],
+      light: colors2.warning[300],
+      dark: colors2.warning[700],
+      contrastText: colors2.base.white
+    },
+    success: {
+      main: colors2.success[600],
+      light: colors2.success[300],
+      dark: colors2.success[700],
+      contrastText: colors2.base.white
+    },
+    info: {
+      main: colors2.blue[600],
+      light: colors2.blue[300],
+      dark: colors2.blue[700],
+      contrastText: colors2.base.white
+    },
+    background: {
+      default: colors2.base.white,
+      paper: colors2.base.white
+    },
+    text: {
+      primary: colors2.gray[900],
+      secondary: colors2.gray[700],
+      disabled: colors2.gray[500]
+    },
+    divider: colors2.gray[200],
+    action: {
+      active: colors2.gray[600],
+      hover: colors2.gray[50],
+      selected: colors2.brand[50],
+      disabled: colors2.gray[400],
+      disabledBackground: colors2.gray[100]
+    }
+  };
+}
+var palette = buildPalette({
+  colors
+});
 
 // src/theme/typography.ts
-var typography = {
+function buildTypography(tokens) {
+  const { fontFamily: fontFamily2, display: display2, fontSize: fontSize2, lineHeight: lineHeight2, fontWeight: fontWeight2 } = tokens;
+  return {
+    fontFamily: fontFamily2,
+    fontWeightRegular: fontWeight2.regular,
+    fontWeightMedium: fontWeight2.medium,
+    fontWeightBold: fontWeight2.bold,
+    // Display styles → MUI headings
+    h1: {
+      fontSize: display2.xl.fontSize,
+      lineHeight: display2.xl.lineHeight,
+      letterSpacing: display2.xl.letterSpacing,
+      fontWeight: fontWeight2.semibold
+    },
+    h2: {
+      fontSize: display2.lg.fontSize,
+      lineHeight: display2.lg.lineHeight,
+      letterSpacing: display2.lg.letterSpacing,
+      fontWeight: fontWeight2.semibold
+    },
+    h3: {
+      fontSize: display2.md.fontSize,
+      lineHeight: display2.md.lineHeight,
+      letterSpacing: display2.md.letterSpacing,
+      fontWeight: fontWeight2.semibold
+    },
+    h4: {
+      fontSize: display2.sm.fontSize,
+      lineHeight: display2.sm.lineHeight,
+      fontWeight: fontWeight2.semibold
+    },
+    h5: {
+      fontSize: display2.xs.fontSize,
+      lineHeight: display2.xs.lineHeight,
+      fontWeight: fontWeight2.semibold
+    },
+    h6: {
+      fontSize: fontSize2.xl,
+      lineHeight: lineHeight2.xl,
+      fontWeight: fontWeight2.semibold
+    },
+    subtitle1: {
+      fontSize: fontSize2.lg,
+      lineHeight: lineHeight2.lg,
+      fontWeight: fontWeight2.medium
+    },
+    subtitle2: {
+      fontSize: fontSize2.md,
+      lineHeight: lineHeight2.md,
+      fontWeight: fontWeight2.medium
+    },
+    body1: {
+      fontSize: fontSize2.md,
+      lineHeight: lineHeight2.md,
+      fontWeight: fontWeight2.regular
+    },
+    body2: {
+      fontSize: fontSize2.sm,
+      lineHeight: lineHeight2.sm,
+      fontWeight: fontWeight2.regular
+    },
+    caption: {
+      fontSize: fontSize2.xs,
+      lineHeight: lineHeight2.xs,
+      fontWeight: fontWeight2.regular
+    },
+    overline: {
+      fontSize: fontSize2.xxs,
+      lineHeight: lineHeight2.xxs,
+      fontWeight: fontWeight2.medium,
+      textTransform: "uppercase",
+      letterSpacing: "0.08em"
+    },
+    button: {
+      fontSize: fontSize2.sm,
+      lineHeight: lineHeight2.sm,
+      fontWeight: fontWeight2.semibold,
+      textTransform: "none"
+    }
+  };
+}
+var typography = buildTypography({
   fontFamily,
-  fontWeightRegular: fontWeight.regular,
-  fontWeightMedium: fontWeight.medium,
-  fontWeightBold: fontWeight.bold,
-  // Display styles → MUI headings
-  h1: {
-    fontSize: display.xl.fontSize,
-    lineHeight: display.xl.lineHeight,
-    letterSpacing: display.xl.letterSpacing,
-    fontWeight: fontWeight.semibold
-  },
-  h2: {
-    fontSize: display.lg.fontSize,
-    lineHeight: display.lg.lineHeight,
-    letterSpacing: display.lg.letterSpacing,
-    fontWeight: fontWeight.semibold
-  },
-  h3: {
-    fontSize: display.md.fontSize,
-    lineHeight: display.md.lineHeight,
-    letterSpacing: display.md.letterSpacing,
-    fontWeight: fontWeight.semibold
-  },
-  h4: {
-    fontSize: display.sm.fontSize,
-    lineHeight: display.sm.lineHeight,
-    fontWeight: fontWeight.semibold
-  },
-  h5: {
-    fontSize: display.xs.fontSize,
-    lineHeight: display.xs.lineHeight,
-    fontWeight: fontWeight.semibold
-  },
-  h6: {
-    fontSize: fontSize.xl,
-    lineHeight: lineHeight.xl,
-    fontWeight: fontWeight.semibold
-  },
-  subtitle1: {
-    fontSize: fontSize.lg,
-    lineHeight: lineHeight.lg,
-    fontWeight: fontWeight.medium
-  },
-  subtitle2: {
-    fontSize: fontSize.md,
-    lineHeight: lineHeight.md,
-    fontWeight: fontWeight.medium
-  },
-  body1: {
-    fontSize: fontSize.md,
-    lineHeight: lineHeight.md,
-    fontWeight: fontWeight.regular
-  },
-  body2: {
-    fontSize: fontSize.sm,
-    lineHeight: lineHeight.sm,
-    fontWeight: fontWeight.regular
-  },
-  caption: {
-    fontSize: fontSize.xs,
-    lineHeight: lineHeight.xs,
-    fontWeight: fontWeight.regular
-  },
-  overline: {
-    fontSize: fontSize.xxs,
-    lineHeight: lineHeight.xxs,
-    fontWeight: fontWeight.medium,
-    textTransform: "uppercase",
-    letterSpacing: "0.08em"
-  },
-  button: {
-    fontSize: fontSize.sm,
-    lineHeight: lineHeight.sm,
-    fontWeight: fontWeight.semibold,
-    textTransform: "none"
-  }
-};
+  display,
+  fontSize,
+  lineHeight,
+  fontWeight
+});
 
 // src/theme/components.ts
-var components = {
-  // ─── Button ─────────────────────────────────────────────────────
-  MuiButton: {
-    defaultProps: {
-      disableElevation: true
-    },
-    styleOverrides: {
-      root: {
-        borderRadius: radius.md,
-        fontWeight: 600,
-        "&:focus-visible": {
-          boxShadow: focusRings.brandShadowXs
-        }
-      },
-      sizeLarge: {
-        padding: "12px 20px",
-        fontSize: 16,
-        lineHeight: "24px"
-      },
-      sizeMedium: {
-        padding: "10px 16px",
-        fontSize: 14,
-        lineHeight: "20px"
-      },
-      sizeSmall: {
-        padding: "8px 14px",
-        fontSize: 14,
-        lineHeight: "20px"
+function buildComponents(tokens) {
+  const { colors: colors2, radius: radius2, focusRings: focusRings2, shadows: tokenShadows } = tokens;
+  return {
+    // ─── Button ─────────────────────────────────────────────────────
+    MuiButton: {
+      defaultProps: {
+        disableElevation: true
       },
-      containedPrimary: {
-        backgroundColor: colors.brand[600],
-        "&:hover": {
-          backgroundColor: colors.brand[700]
-        }
-      },
-      outlinedPrimary: {
-        borderColor: colors.brand[300],
-        color: colors.brand[700],
-        "&:hover": {
-          backgroundColor: colors.brand[50],
-          borderColor: colors.brand[300]
-        }
-      },
-      textPrimary: {
-        color: colors.brand[700],
-        "&:hover": {
-          backgroundColor: colors.brand[50]
+      styleOverrides: {
+        root: {
+          borderRadius: radius2.md,
+          fontWeight: 600,
+          "&:focus-visible": {
+            boxShadow: focusRings2.brandShadowXs
+          }
+        },
+        sizeLarge: {
+          padding: "12px 20px",
+          fontSize: 16,
+          lineHeight: "24px"
+        },
+        sizeMedium: {
+          padding: "10px 16px",
+          fontSize: 14,
+          lineHeight: "20px"
+        },
+        sizeSmall: {
+          padding: "8px 14px",
+          fontSize: 14,
+          lineHeight: "20px"
+        },
+        containedPrimary: {
+          backgroundColor: colors2.brand[600],
+          "&:hover": {
+            backgroundColor: colors2.brand[700]
+          }
+        },
+        outlinedPrimary: {
+          borderColor: colors2.brand[300],
+          color: colors2.brand[700],
+          "&:hover": {
+            backgroundColor: colors2.brand[50],
+            borderColor: colors2.brand[300]
+          }
+        },
+        textPrimary: {
+          color: colors2.brand[700],
+          "&:hover": {
+            backgroundColor: colors2.brand[50]
+          }
         }
       }
-    }
-  },
-  // ─── Button Group ───────────────────────────────────────────────
-  MuiButtonGroup: {
-    defaultProps: {
-      disableElevation: true
-    },
-    styleOverrides: {
-      root: {
-        borderRadius: radius.md
+    },
+    // ─── Button Group ───────────────────────────────────────────────
+    MuiButtonGroup: {
+      defaultProps: {
+        disableElevation: true
       },
-      grouped: {
-        "&:not(:last-of-type)": {
-          borderRight: `1px solid ${colors.brand[700]}`
+      styleOverrides: {
+        root: {
+          borderRadius: radius2.md
+        },
+        grouped: {
+          "&:not(:last-of-type)": {
+            borderRight: `1px solid ${colors2.brand[700]}`
+          }
         }
       }
-    }
-  },
-  // ─── FAB ────────────────────────────────────────────────────────
-  MuiFab: {
-    styleOverrides: {
-      root: {
-        boxShadow: shadows.md,
-        "&:hover": {
-          boxShadow: shadows.lg
+    },
+    // ─── FAB ────────────────────────────────────────────────────────
+    MuiFab: {
+      styleOverrides: {
+        root: {
+          boxShadow: tokenShadows.md,
+          "&:hover": {
+            boxShadow: tokenShadows.lg
+          },
+          "&:focus-visible": {
+            boxShadow: focusRings2.brandShadowSm
+          }
         },
-        "&:focus-visible": {
-          boxShadow: focusRings.brandShadowSm
-        }
-      },
-      primary: {
-        backgroundColor: colors.brand[600],
-        "&:hover": {
-          backgroundColor: colors.brand[700]
+        primary: {
+          backgroundColor: colors2.brand[600],
+          "&:hover": {
+            backgroundColor: colors2.brand[700]
+          }
         }
       }
-    }
-  },
-  // ─── TextField / Input ──────────────────────────────────────────
-  MuiTextField: {
-    defaultProps: {
-      variant: "outlined",
-      size: "small"
-    }
-  },
-  MuiOutlinedInput: {
-    styleOverrides: {
-      root: {
-        borderRadius: radius.md,
-        "&:hover .MuiOutlinedInput-notchedOutline": {
-          borderColor: colors.brand[300]
+    },
+    // ─── TextField / Input ──────────────────────────────────────────
+    MuiTextField: {
+      defaultProps: {
+        variant: "outlined",
+        size: "small"
+      }
+    },
+    MuiOutlinedInput: {
+      styleOverrides: {
+        root: {
+          borderRadius: radius2.md,
+          "&:hover .MuiOutlinedInput-notchedOutline": {
+            borderColor: colors2.brand[300]
+          },
+          "&.Mui-focused .MuiOutlinedInput-notchedOutline": {
+            borderColor: colors2.brand[600],
+            borderWidth: 1,
+            boxShadow: "none"
+          },
+          "&.Mui-error .MuiOutlinedInput-notchedOutline": {
+            borderColor: colors2.error[300]
+          },
+          "&.Mui-error.Mui-focused .MuiOutlinedInput-notchedOutline": {
+            borderColor: colors2.error[600],
+            boxShadow: "none"
+          }
         },
-        "&.Mui-focused .MuiOutlinedInput-notchedOutline": {
-          borderColor: colors.brand[600],
-          borderWidth: 1,
-          boxShadow: focusRings.brand
+        notchedOutline: {
+          borderColor: colors2.gray[300]
         },
-        "&.Mui-error .MuiOutlinedInput-notchedOutline": {
-          borderColor: colors.error[300]
+        input: {
+          padding: "10px 14px",
+          fontSize: 16,
+          lineHeight: "24px",
+          "&::placeholder": {
+            color: colors2.gray[500],
+            opacity: 1
+          }
         },
-        "&.Mui-error.Mui-focused .MuiOutlinedInput-notchedOutline": {
-          borderColor: colors.error[600],
-          boxShadow: focusRings.error
-        }
-      },
-      notchedOutline: {
-        borderColor: colors.gray[300]
-      },
-      input: {
-        padding: "10px 14px",
-        fontSize: 16,
-        lineHeight: "24px",
-        "&::placeholder": {
-          color: colors.gray[500],
-          opacity: 1
+        inputSizeSmall: {
+          padding: "8px 12px",
+          fontSize: 14,
+          lineHeight: "20px"
         }
-      },
-      inputSizeSmall: {
-        padding: "8px 12px",
-        fontSize: 14,
-        lineHeight: "20px"
       }
-    }
-  },
-  MuiInputLabel: {
-    styleOverrides: {
-      root: {
-        fontSize: 14,
-        fontWeight: 500,
-        color: colors.gray[700],
-        "&.Mui-focused": {
-          color: colors.gray[700]
-        },
-        "&.Mui-error": {
-          color: colors.error[600]
+    },
+    MuiInputLabel: {
+      styleOverrides: {
+        root: {
+          fontSize: 14,
+          fontWeight: 500,
+          color: colors2.gray[700],
+          "&.Mui-focused": {
+            color: colors2.gray[700]
+          },
+          "&.Mui-error": {
+            color: colors2.error[600]
+          }
         }
       }
-    }
-  },
-  MuiFormHelperText: {
-    styleOverrides: {
-      root: {
-        fontSize: 14,
-        lineHeight: "20px",
-        marginTop: 6,
-        marginLeft: 0,
-        "&.Mui-error": {
-          color: colors.error[600]
+    },
+    MuiFormHelperText: {
+      styleOverrides: {
+        root: {
+          fontSize: 14,
+          lineHeight: "20px",
+          marginTop: 6,
+          marginLeft: 0,
+          "&.Mui-error": {
+            color: colors2.error[600]
+          }
         }
       }
-    }
-  },
-  // ─── Select ─────────────────────────────────────────────────────
-  MuiSelect: {
-    defaultProps: {
-      size: "small"
-    },
-    styleOverrides: {
-      icon: {
-        color: colors.gray[500]
-      }
-    }
-  },
-  // ─── Autocomplete ───────────────────────────────────────────────
-  MuiAutocomplete: {
-    styleOverrides: {
-      paper: {
-        borderRadius: radius.md,
-        boxShadow: shadows.lg,
-        border: `1px solid ${colors.gray[200]}`,
-        marginTop: 4
+    },
+    // ─── Select ─────────────────────────────────────────────────────
+    MuiSelect: {
+      defaultProps: {
+        size: "small"
       },
-      option: {
-        fontSize: 16,
-        lineHeight: "24px",
-        padding: "10px 14px",
-        "&.Mui-focused": {
-          backgroundColor: colors.gray[50]
-        },
-        '&[aria-selected="true"]': {
-          backgroundColor: colors.brand[50]
+      styleOverrides: {
+        icon: {
+          color: colors2.gray[500]
         }
-      },
-      listbox: {
-        padding: 4
       }
-    }
-  },
-  // ─── Checkbox ───────────────────────────────────────────────────
-  MuiCheckbox: {
-    defaultProps: {
-      disableRipple: true
-    },
-    styleOverrides: {
-      root: {
-        color: colors.gray[300],
-        borderRadius: radius.xs,
-        padding: 0,
-        width: 20,
-        height: 20,
-        "&:hover": {
-          backgroundColor: "transparent",
-          color: colors.brand[600]
-        },
-        "&.Mui-checked": {
-          color: colors.brand[600]
-        },
-        "&.Mui-checked:hover": {
-          color: colors.brand[700]
+    },
+    // ─── Autocomplete ───────────────────────────────────────────────
+    MuiAutocomplete: {
+      styleOverrides: {
+        paper: {
+          borderRadius: radius2.md,
+          boxShadow: tokenShadows.lg,
+          border: `1px solid ${colors2.gray[200]}`,
+          marginTop: 4
         },
-        "&.Mui-focusVisible": {
-          outline: "none",
-          boxShadow: focusRings.brand,
-          borderRadius: radius.xs
+        option: {
+          fontSize: 16,
+          lineHeight: "24px",
+          padding: "10px 14px",
+          "&.Mui-focused": {
+            backgroundColor: colors2.gray[50]
+          },
+          '&[aria-selected="true"]': {
+            backgroundColor: colors2.brand[50]
+          }
         },
-        "&.Mui-disabled": {
-          color: colors.gray[300]
+        listbox: {
+          padding: 4
         }
       }
-    }
-  },
-  // ─── Radio ──────────────────────────────────────────────────────
-  MuiRadio: {
-    defaultProps: {
-      disableRipple: true
-    },
-    styleOverrides: {
-      root: {
-        color: colors.gray[300],
-        padding: 0,
-        "&:hover": {
-          backgroundColor: "transparent",
-          color: colors.brand[600]
-        },
-        "&.Mui-checked": {
-          color: colors.brand[600]
-        },
-        "&.Mui-checked:hover": {
-          color: colors.brand[700]
-        },
-        "&.Mui-focusVisible": {
-          outline: "none",
-          boxShadow: focusRings.brand,
-          borderRadius: radius.full
-        },
-        "&.Mui-disabled": {
-          color: colors.gray[300]
+    },
+    // ─── Checkbox ───────────────────────────────────────────────────
+    MuiCheckbox: {
+      defaultProps: {
+        disableRipple: true
+      },
+      styleOverrides: {
+        root: {
+          color: colors2.gray[300],
+          borderRadius: radius2.xs,
+          padding: 0,
+          width: 20,
+          height: 20,
+          "&:hover": {
+            backgroundColor: "transparent",
+            color: colors2.brand[600]
+          },
+          "&.Mui-checked": {
+            color: colors2.brand[600]
+          },
+          "&.Mui-checked:hover": {
+            color: colors2.brand[700]
+          },
+          "&.Mui-focusVisible": {
+            outline: "none",
+            boxShadow: focusRings2.brand,
+            borderRadius: radius2.xs
+          },
+          "&.Mui-disabled": {
+            color: colors2.gray[300]
+          }
         }
       }
-    }
-  },
-  // ─── Switch ─────────────────────────────────────────────────────
-  MuiSwitch: {
-    defaultProps: {
-      disableRipple: true
-    },
-    styleOverrides: {
-      root: {
-        width: 44,
-        height: 24,
-        padding: 0
+    },
+    // ─── Radio ──────────────────────────────────────────────────────
+    MuiRadio: {
+      defaultProps: {
+        disableRipple: true
       },
-      switchBase: {
-        padding: 2,
-        "&.Mui-checked": {
-          transform: "translateX(20px)",
-          color: colors.base.white,
-          "& + .MuiSwitch-track": {
-            backgroundColor: colors.brand[600],
-            opacity: 1
+      styleOverrides: {
+        root: {
+          color: colors2.gray[300],
+          padding: 0,
+          "&:hover": {
+            backgroundColor: "transparent",
+            color: colors2.brand[600]
+          },
+          "&.Mui-checked": {
+            color: colors2.brand[600]
+          },
+          "&.Mui-checked:hover": {
+            color: colors2.brand[700]
+          },
+          "&.Mui-focusVisible": {
+            outline: "none",
+            boxShadow: focusRings2.brand,
+            borderRadius: radius2.full
+          },
+          "&.Mui-disabled": {
+            color: colors2.gray[300]
           }
+        }
+      }
+    },
+    // ─── Switch ─────────────────────────────────────────────────────
+    MuiSwitch: {
+      defaultProps: {
+        disableRipple: true
+      },
+      styleOverrides: {
+        root: {
+          width: 44,
+          height: 24,
+          padding: 0
         },
-        "&.Mui-checked:hover + .MuiSwitch-track": {
-          backgroundColor: colors.brand[700]
-        },
-        "&.Mui-focusVisible .MuiSwitch-thumb": {
-          boxShadow: focusRings.brand
+        switchBase: {
+          padding: 2,
+          "&.Mui-checked": {
+            transform: "translateX(20px)",
+            color: colors2.base.white,
+            "& + .MuiSwitch-track": {
+              backgroundColor: colors2.brand[600],
+              opacity: 1
+            }
+          },
+          "&.Mui-checked:hover + .MuiSwitch-track": {
+            backgroundColor: colors2.brand[700]
+          },
+          "&.Mui-focusVisible .MuiSwitch-thumb": {
+            boxShadow: focusRings2.brand
+          },
+          "&.Mui-disabled .MuiSwitch-thumb": {
+            color: colors2.gray[100]
+          },
+          "&.Mui-disabled + .MuiSwitch-track": {
+            opacity: 0.5
+          }
         },
-        "&.Mui-disabled .MuiSwitch-thumb": {
-          color: colors.gray[100]
+        thumb: {
+          width: 20,
+          height: 20,
+          boxShadow: "0px 1px 2px 0px #1018280d"
         },
-        "&.Mui-disabled + .MuiSwitch-track": {
-          opacity: 0.5
+        track: {
+          borderRadius: radius2.full,
+          backgroundColor: colors2.gray[200],
+          opacity: 1
         }
-      },
-      thumb: {
-        width: 20,
-        height: 20,
-        boxShadow: "0px 1px 2px 0px #1018280d"
-      },
-      track: {
-        borderRadius: radius.full,
-        backgroundColor: colors.gray[200],
-        opacity: 1
       }
-    }
-  },
-  // ─── Toggle Button ─────────────────────────────────────────────
-  MuiToggleButton: {
-    styleOverrides: {
-      root: {
-        borderRadius: radius.md,
-        borderColor: colors.gray[300],
-        color: colors.gray[700],
-        fontSize: 14,
-        fontWeight: 600,
-        lineHeight: "20px",
-        padding: "8px 14px",
-        textTransform: "none",
-        "&:hover": {
-          backgroundColor: colors.gray[50]
-        },
-        "&.Mui-selected": {
-          backgroundColor: colors.brand[50],
-          color: colors.brand[700],
-          borderColor: colors.brand[300],
+    },
+    // ─── Toggle Button ─────────────────────────────────────────────
+    MuiToggleButton: {
+      styleOverrides: {
+        root: {
+          borderRadius: radius2.md,
+          borderColor: colors2.gray[300],
+          color: colors2.gray[700],
+          fontSize: 14,
+          fontWeight: 600,
+          lineHeight: "20px",
+          padding: "8px 14px",
+          textTransform: "none",
           "&:hover": {
-            backgroundColor: colors.brand[100]
+            backgroundColor: colors2.gray[50]
+          },
+          "&.Mui-selected": {
+            backgroundColor: colors2.brand[50],
+            color: colors2.brand[700],
+            borderColor: colors2.brand[300],
+            "&:hover": {
+              backgroundColor: colors2.brand[100]
+            }
+          },
+          "&:focus-visible": {
+            boxShadow: focusRings2.brandShadowXs
           }
-        },
-        "&:focus-visible": {
-          boxShadow: focusRings.brandShadowXs
         }
       }
-    }
-  },
-  MuiToggleButtonGroup: {
-    styleOverrides: {
-      root: {
-        borderRadius: radius.md
-      },
-      grouped: {
-        "&:not(:first-of-type)": {
-          borderRadius: radius.md,
-          marginLeft: -1
+    },
+    MuiToggleButtonGroup: {
+      styleOverrides: {
+        root: {
+          borderRadius: radius2.md
         },
-        "&:first-of-type": {
-          borderRadius: radius.md
+        grouped: {
+          "&:not(:first-of-type)": {
+            borderRadius: radius2.md,
+            marginLeft: -1
+          },
+          "&:first-of-type": {
+            borderRadius: radius2.md
+          }
         }
       }
-    }
-  },
-  // ─── Card ───────────────────────────────────────────────────────
-  MuiCard: {
-    defaultProps: {
-      elevation: 0
-    },
-    styleOverrides: {
-      root: {
-        borderRadius: radius.xl,
-        border: `1px solid ${colors.gray[200]}`,
-        backgroundColor: colors.base.white,
-        overflow: "hidden"
+    },
+    // ─── Card ───────────────────────────────────────────────────────
+    MuiCard: {
+      defaultProps: {
+        elevation: 0
+      },
+      styleOverrides: {
+        root: {
+          borderRadius: radius2.xl,
+          border: `1px solid ${colors2.gray[200]}`,
+          backgroundColor: colors2.base.white,
+          overflow: "hidden"
+        }
       }
-    }
-  },
-  MuiCardContent: {
-    styleOverrides: {
-      root: {
-        padding: "24px",
-        "&:last-child": {
-          paddingBottom: "24px"
+    },
+    MuiCardContent: {
+      styleOverrides: {
+        root: {
+          padding: "24px",
+          "&:last-child": {
+            paddingBottom: "24px"
+          }
         }
       }
-    }
-  },
-  MuiCardHeader: {
-    styleOverrides: {
-      root: {
-        padding: "24px 24px 0 24px"
-      },
-      title: {
-        fontSize: 18,
-        fontWeight: 600,
-        lineHeight: "28px"
-      },
-      subheader: {
-        fontSize: 14,
-        lineHeight: "20px",
-        marginTop: 4
-      },
-      action: {
-        marginTop: -4,
-        marginRight: -4
+    },
+    MuiCardHeader: {
+      styleOverrides: {
+        root: {
+          padding: "24px 24px 0 24px"
+        },
+        title: {
+          fontSize: 18,
+          fontWeight: 600,
+          lineHeight: "28px"
+        },
+        subheader: {
+          fontSize: 14,
+          lineHeight: "20px",
+          marginTop: 4
+        },
+        action: {
+          marginTop: -4,
+          marginRight: -4
+        }
       }
-    }
-  },
-  // ─── Paper ──────────────────────────────────────────────────────
-  MuiPaper: {
-    defaultProps: {
-      elevation: 0
-    },
-    styleOverrides: {
-      root: {
-        backgroundImage: "none"
-      },
-      rounded: {
-        borderRadius: radius.lg
-      },
-      elevation1: {
-        boxShadow: shadows.xs,
-        border: `1px solid ${colors.gray[200]}`
-      },
-      elevation2: {
-        boxShadow: shadows.sm,
-        border: `1px solid ${colors.gray[200]}`
-      },
-      elevation3: {
-        boxShadow: shadows.md,
-        border: `1px solid ${colors.gray[200]}`
-      },
-      elevation4: {
-        boxShadow: shadows.lg,
-        border: `1px solid ${colors.gray[200]}`
-      },
-      elevation8: {
-        boxShadow: shadows.xl,
-        border: `1px solid ${colors.gray[200]}`
-      },
-      elevation16: {
-        boxShadow: shadows["2xl"],
-        border: `1px solid ${colors.gray[200]}`
+    },
+    // ─── Paper ──────────────────────────────────────────────────────
+    MuiPaper: {
+      defaultProps: {
+        elevation: 0
       },
-      elevation24: {
-        boxShadow: shadows["3xl"],
-        border: `1px solid ${colors.gray[200]}`
-      }
-    }
-  },
-  // ─── Accordion ──────────────────────────────────────────────────
-  MuiAccordion: {
-    defaultProps: {
-      disableGutters: true,
-      elevation: 0
-    },
-    styleOverrides: {
-      root: {
-        border: `1px solid ${colors.gray[200]}`,
-        borderRadius: radius.lg,
-        "&:not(:last-child)": {
-          marginBottom: 8
+      styleOverrides: {
+        root: {
+          backgroundImage: "none"
+        },
+        rounded: {
+          borderRadius: radius2.lg
+        },
+        elevation1: {
+          boxShadow: tokenShadows.xs,
+          border: `1px solid ${colors2.gray[200]}`
+        },
+        elevation2: {
+          boxShadow: tokenShadows.sm,
+          border: `1px solid ${colors2.gray[200]}`
         },
-        "&:before": {
-          display: "none"
+        elevation3: {
+          boxShadow: tokenShadows.md,
+          border: `1px solid ${colors2.gray[200]}`
         },
-        "&.Mui-expanded": {
-          margin: 0,
-          marginBottom: 8,
-          borderRadius: radius.lg
+        elevation4: {
+          boxShadow: tokenShadows.lg,
+          border: `1px solid ${colors2.gray[200]}`
+        },
+        elevation8: {
+          boxShadow: tokenShadows.xl,
+          border: `1px solid ${colors2.gray[200]}`
+        },
+        elevation16: {
+          boxShadow: tokenShadows["2xl"],
+          border: `1px solid ${colors2.gray[200]}`
+        },
+        elevation24: {
+          boxShadow: tokenShadows["3xl"],
+          border: `1px solid ${colors2.gray[200]}`
         }
       }
-    }
-  },
-  MuiAccordionSummary: {
-    styleOverrides: {
-      root: {
-        padding: "0 24px",
-        minHeight: 56,
-        "&.Mui-expanded": {
-          minHeight: 56,
-          borderBottom: `1px solid ${colors.gray[200]}`
-        }
+    },
+    // ─── Accordion ──────────────────────────────────────────────────
+    MuiAccordion: {
+      defaultProps: {
+        disableGutters: true,
+        elevation: 0
       },
-      content: {
-        margin: "12px 0",
-        "&.Mui-expanded": {
-          margin: "12px 0"
+      styleOverrides: {
+        root: {
+          border: `1px solid ${colors2.gray[200]}`,
+          borderRadius: radius2.lg,
+          "&:not(:last-child)": {
+            marginBottom: 8
+          },
+          "&:before": {
+            display: "none"
+          },
+          "&.Mui-expanded": {
+            margin: 0,
+            marginBottom: 8,
+            borderRadius: radius2.lg
+          }
         }
       }
-    }
-  },
-  MuiAccordionDetails: {
-    styleOverrides: {
-      root: {
-        padding: "24px"
-      }
-    }
-  },
-  // ─── AppBar ─────────────────────────────────────────────────────
-  MuiAppBar: {
-    defaultProps: {
-      elevation: 0,
-      color: "transparent"
-    },
-    styleOverrides: {
-      root: {
-        borderBottom: `1px solid ${colors.gray[200]}`,
-        backgroundColor: colors.base.white
+    },
+    MuiAccordionSummary: {
+      styleOverrides: {
+        root: {
+          padding: "0 24px",
+          minHeight: 56,
+          "&.Mui-expanded": {
+            minHeight: 56,
+            borderBottom: `1px solid ${colors2.gray[200]}`
+          }
+        },
+        content: {
+          margin: "12px 0",
+          "&.Mui-expanded": {
+            margin: "12px 0"
+          }
+        }
       }
-    }
-  },
-  MuiToolbar: {
-    styleOverrides: {
-      root: {
-        minHeight: 64,
-        "@media (min-width: 600px)": {
-          minHeight: 64
+    },
+    MuiAccordionDetails: {
+      styleOverrides: {
+        root: {
+          padding: "24px"
         }
+      }
+    },
+    // ─── AppBar ─────────────────────────────────────────────────────
+    MuiAppBar: {
+      defaultProps: {
+        elevation: 0,
+        color: "transparent"
       },
-      dense: {
-        minHeight: 48,
-        "@media (min-width: 600px)": {
-          minHeight: 48
+      styleOverrides: {
+        root: {
+          borderBottom: `1px solid ${colors2.gray[200]}`,
+          backgroundColor: colors2.base.white
         }
       }
-    }
-  },
-  // ─── Chip ───────────────────────────────────────────────────────
-  MuiChip: {
-    styleOverrides: {
-      root: {
-        borderRadius: radius.md,
-        fontWeight: 500,
-        fontSize: 14
-      }
-    }
-  },
-  // ─── Form Control / Label ───────────────────────────────────────
-  MuiFormControlLabel: {
-    styleOverrides: {
-      root: {
-        marginLeft: 0,
-        gap: 8
-      },
-      label: {
-        fontSize: 14,
-        lineHeight: "20px",
-        fontWeight: 500,
-        color: colors.gray[700]
+    },
+    MuiToolbar: {
+      styleOverrides: {
+        root: {
+          minHeight: 64,
+          "@media (min-width: 600px)": {
+            minHeight: 64
+          }
+        },
+        dense: {
+          minHeight: 48,
+          "@media (min-width: 600px)": {
+            minHeight: 48
+          }
+        }
       }
-    }
-  },
-  // ─── Table ───────────────────────────────────────────────────────
-  MuiTable: {
-    styleOverrides: {
-      root: {
-        borderCollapse: "separate",
-        borderSpacing: 0
+    },
+    // ─── Chip ───────────────────────────────────────────────────────
+    MuiChip: {
+      styleOverrides: {
+        root: {
+          borderRadius: radius2.md,
+          fontWeight: 500,
+          fontSize: 14
+        }
       }
-    }
-  },
-  MuiTableCell: {
-    styleOverrides: {
-      root: {
-        borderBottom: `1px solid ${colors.gray[200]}`,
-        padding: "16px 24px",
-        fontSize: 14,
-        lineHeight: "20px",
-        color: colors.gray[600]
-      },
-      head: {
-        backgroundColor: colors.gray[50],
-        color: colors.gray[600],
-        fontWeight: 500,
-        fontSize: 12,
-        lineHeight: "18px"
-      },
-      body: {
-        color: colors.gray[600]
+    },
+    // ─── Form Control / Label ───────────────────────────────────────
+    MuiFormControlLabel: {
+      styleOverrides: {
+        root: {
+          marginLeft: 0,
+          gap: 8
+        },
+        label: {
+          fontSize: 14,
+          lineHeight: "20px",
+          fontWeight: 500,
+          color: colors2.gray[700]
+        }
       }
-    }
-  },
-  MuiTableHead: {
-    styleOverrides: {
-      root: {
-        backgroundColor: colors.gray[50],
-        borderBottom: `1px solid ${colors.gray[200]}`
+    },
+    // ─── Table ───────────────────────────────────────────────────────
+    MuiTable: {
+      styleOverrides: {
+        root: {
+          borderCollapse: "separate",
+          borderSpacing: 0
+        }
       }
-    }
-  },
-  MuiTableRow: {
-    styleOverrides: {
-      root: {
-        "&:last-child td, &:last-child th": {
-          border: 0
+    },
+    MuiTableCell: {
+      styleOverrides: {
+        root: {
+          borderBottom: `1px solid ${colors2.gray[200]}`,
+          padding: "16px 24px",
+          fontSize: 14,
+          lineHeight: "20px",
+          color: colors2.gray[600]
         },
-        "&:hover": {
-          backgroundColor: colors.gray[50]
+        head: {
+          backgroundColor: colors2.gray[50],
+          color: colors2.gray[600],
+          fontWeight: 500,
+          fontSize: 12,
+          lineHeight: "18px"
         },
-        "&.Mui-selected": {
-          backgroundColor: colors.brand[50],
+        body: {
+          color: colors2.gray[600]
+        }
+      }
+    },
+    MuiTableHead: {
+      styleOverrides: {
+        root: {
+          backgroundColor: colors2.gray[50],
+          borderBottom: `1px solid ${colors2.gray[200]}`
+        }
+      }
+    },
+    MuiTableRow: {
+      styleOverrides: {
+        root: {
+          "&:last-child td, &:last-child th": {
+            border: 0
+          },
           "&:hover": {
-            backgroundColor: colors.brand[50]
+            backgroundColor: colors2.gray[50]
+          },
+          "&.Mui-selected": {
+            backgroundColor: colors2.brand[50],
+            "&:hover": {
+              backgroundColor: colors2.brand[50]
+            }
           }
         }
       }
-    }
-  },
-  MuiTableContainer: {
-    styleOverrides: {
-      root: {
-        borderRadius: radius.xl,
-        border: `1px solid ${colors.gray[200]}`,
-        boxShadow: "none"
+    },
+    MuiTableContainer: {
+      styleOverrides: {
+        root: {
+          borderRadius: radius2.xl,
+          border: `1px solid ${colors2.gray[200]}`,
+          boxShadow: "none"
+        }
       }
-    }
-  },
-  // ─── Badge ──────────────────────────────────────────────────────
-  MuiBadge: {
-    styleOverrides: {
-      standard: {
-        fontWeight: 500,
-        fontSize: 12,
-        lineHeight: "18px",
-        minWidth: 20,
-        height: 20,
-        borderRadius: radius.full
-      },
-      colorPrimary: {
-        backgroundColor: colors.brand[600]
-      },
-      colorError: {
-        backgroundColor: colors.error[600]
-      },
-      colorSuccess: {
-        backgroundColor: colors.success[600]
-      },
-      colorWarning: {
-        backgroundColor: colors.warning[600]
-      },
-      dot: {
-        minWidth: 8,
-        height: 8,
-        borderRadius: radius.full
+    },
+    // ─── Badge ──────────────────────────────────────────────────────
+    MuiBadge: {
+      styleOverrides: {
+        standard: {
+          fontWeight: 500,
+          fontSize: 12,
+          lineHeight: "18px",
+          minWidth: 20,
+          height: 20,
+          borderRadius: radius2.full
+        },
+        colorPrimary: {
+          backgroundColor: colors2.brand[600]
+        },
+        colorError: {
+          backgroundColor: colors2.error[600]
+        },
+        colorSuccess: {
+          backgroundColor: colors2.success[600]
+        },
+        colorWarning: {
+          backgroundColor: colors2.warning[600]
+        },
+        dot: {
+          minWidth: 8,
+          height: 8,
+          borderRadius: radius2.full
+        }
       }
-    }
-  },
-  // ─── Divider ────────────────────────────────────────────────────
-  MuiDivider: {
-    styleOverrides: {
-      root: {
-        borderColor: colors.gray[200]
+    },
+    // ─── Divider ────────────────────────────────────────────────────
+    MuiDivider: {
+      styleOverrides: {
+        root: {
+          borderColor: colors2.gray[200]
+        }
       }
-    }
-  },
-  // ─── List ───────────────────────────────────────────────────────
-  MuiList: {
-    styleOverrides: {
-      root: {
-        padding: 4
+    },
+    // ─── List ───────────────────────────────────────────────────────
+    MuiList: {
+      styleOverrides: {
+        root: {
+          padding: 4
+        }
       }
-    }
-  },
-  MuiListItemButton: {
-    styleOverrides: {
-      root: {
-        borderRadius: radius.sm,
-        padding: "8px 12px",
-        "&:hover": {
-          backgroundColor: colors.gray[50]
-        },
-        "&.Mui-selected": {
-          backgroundColor: colors.brand[50],
-          color: colors.brand[700],
+    },
+    MuiListItemButton: {
+      styleOverrides: {
+        root: {
+          borderRadius: radius2.sm,
+          padding: "8px 12px",
           "&:hover": {
-            backgroundColor: colors.brand[100]
+            backgroundColor: colors2.gray[50]
+          },
+          "&.Mui-selected": {
+            backgroundColor: colors2.brand[50],
+            color: colors2.brand[700],
+            "&:hover": {
+              backgroundColor: colors2.brand[100]
+            }
           }
         }
       }
-    }
-  },
-  MuiListItemIcon: {
-    styleOverrides: {
-      root: {
-        minWidth: 36,
-        color: colors.gray[500]
-      }
-    }
-  },
-  MuiListItemText: {
-    styleOverrides: {
-      primary: {
-        fontSize: 14,
-        lineHeight: "20px",
-        fontWeight: 500,
-        color: colors.gray[700]
-      },
-      secondary: {
-        fontSize: 14,
-        lineHeight: "20px",
-        color: colors.gray[500]
+    },
+    MuiListItemIcon: {
+      styleOverrides: {
+        root: {
+          minWidth: 36,
+          color: colors2.gray[500]
+        }
       }
-    }
-  },
-  // ─── Tooltip ────────────────────────────────────────────────────
-  MuiTooltip: {
-    styleOverrides: {
-      tooltip: {
-        backgroundColor: colors.gray[900],
-        color: colors.base.white,
-        fontSize: 12,
-        lineHeight: "18px",
-        fontWeight: 600,
-        padding: "8px 12px",
-        borderRadius: radius.md,
-        boxShadow: shadows.lg
-      },
-      arrow: {
-        color: colors.gray[900]
+    },
+    MuiListItemText: {
+      styleOverrides: {
+        primary: {
+          fontSize: 14,
+          lineHeight: "20px",
+          fontWeight: 500,
+          color: colors2.gray[700]
+        },
+        secondary: {
+          fontSize: 14,
+          lineHeight: "20px",
+          color: colors2.gray[500]
+        }
       }
-    }
-  },
-  // ─── Alert ──────────────────────────────────────────────────────
-  MuiAlert: {
-    defaultProps: {
-      variant: "standard"
-    },
-    styleOverrides: {
-      root: {
-        borderRadius: radius.xl,
-        fontSize: 14,
-        lineHeight: "20px",
-        padding: "12px 16px"
-      },
-      standardError: {
-        backgroundColor: colors.error[50],
-        color: colors.error[700],
-        border: `1px solid ${colors.error[300]}`,
-        "& .MuiAlert-icon": {
-          color: colors.error[600]
+    },
+    // ─── Tooltip ────────────────────────────────────────────────────
+    MuiTooltip: {
+      styleOverrides: {
+        tooltip: {
+          backgroundColor: colors2.gray[900],
+          color: colors2.base.white,
+          fontSize: 12,
+          lineHeight: "18px",
+          fontWeight: 600,
+          padding: "8px 12px",
+          borderRadius: radius2.md,
+          boxShadow: tokenShadows.lg
+        },
+        arrow: {
+          color: colors2.gray[900]
         }
+      }
+    },
+    // ─── Alert ──────────────────────────────────────────────────────
+    MuiAlert: {
+      defaultProps: {
+        variant: "standard"
       },
-      standardWarning: {
-        backgroundColor: colors.warning[50],
-        color: colors.warning[700],
-        border: `1px solid ${colors.warning[300]}`,
-        "& .MuiAlert-icon": {
-          color: colors.warning[600]
+      styleOverrides: {
+        root: {
+          borderRadius: radius2.xl,
+          fontSize: 14,
+          lineHeight: "20px",
+          padding: "12px 16px"
+        },
+        standardError: {
+          backgroundColor: colors2.error[50],
+          color: colors2.error[700],
+          border: `1px solid ${colors2.error[300]}`,
+          "& .MuiAlert-icon": {
+            color: colors2.error[600]
+          }
+        },
+        standardWarning: {
+          backgroundColor: colors2.warning[50],
+          color: colors2.warning[700],
+          border: `1px solid ${colors2.warning[300]}`,
+          "& .MuiAlert-icon": {
+            color: colors2.warning[600]
+          }
+        },
+        standardSuccess: {
+          backgroundColor: colors2.success[50],
+          color: colors2.success[700],
+          border: `1px solid ${colors2.success[300]}`,
+          "& .MuiAlert-icon": {
+            color: colors2.success[600]
+          }
+        },
+        standardInfo: {
+          backgroundColor: colors2.blue[50],
+          color: colors2.blue[700],
+          border: `1px solid ${colors2.blue[300]}`,
+          "& .MuiAlert-icon": {
+            color: colors2.blue[600]
+          }
+        },
+        icon: {
+          padding: "2px 0"
         }
-      },
-      standardSuccess: {
-        backgroundColor: colors.success[50],
-        color: colors.success[700],
-        border: `1px solid ${colors.success[300]}`,
-        "& .MuiAlert-icon": {
-          color: colors.success[600]
+      }
+    },
+    MuiAlertTitle: {
+      styleOverrides: {
+        root: {
+          fontWeight: 600,
+          fontSize: 14,
+          lineHeight: "20px",
+          marginBottom: 4
         }
-      },
-      standardInfo: {
-        backgroundColor: colors.blue[50],
-        color: colors.blue[700],
-        border: `1px solid ${colors.blue[300]}`,
-        "& .MuiAlert-icon": {
-          color: colors.blue[600]
+      }
+    },
+    // ─── Backdrop ───────────────────────────────────────────────────
+    MuiBackdrop: {
+      styleOverrides: {
+        root: {
+          backgroundColor: "rgba(16, 24, 40, 0.7)"
         }
-      },
-      icon: {
-        padding: "2px 0"
       }
-    }
-  },
-  MuiAlertTitle: {
-    styleOverrides: {
-      root: {
-        fontWeight: 600,
-        fontSize: 14,
-        lineHeight: "20px",
-        marginBottom: 4
+    },
+    // ─── Dialog ─────────────────────────────────────────────────────
+    MuiDialog: {
+      styleOverrides: {
+        paper: {
+          borderRadius: radius2.xl,
+          boxShadow: tokenShadows.xl,
+          padding: 0
+        }
       }
-    }
-  },
-  // ─── Backdrop ───────────────────────────────────────────────────
-  MuiBackdrop: {
-    styleOverrides: {
-      root: {
-        backgroundColor: "rgba(16, 24, 40, 0.7)"
+    },
+    MuiDialogTitle: {
+      styleOverrides: {
+        root: {
+          fontSize: 18,
+          lineHeight: "28px",
+          fontWeight: 600,
+          color: colors2.gray[900],
+          padding: "24px 24px 0"
+        }
       }
-    }
-  },
-  // ─── Dialog ─────────────────────────────────────────────────────
-  MuiDialog: {
-    styleOverrides: {
-      paper: {
-        borderRadius: radius.xl,
-        boxShadow: shadows.xl,
-        padding: 0
+    },
+    MuiDialogContent: {
+      styleOverrides: {
+        root: {
+          padding: "20px 24px",
+          fontSize: 14,
+          lineHeight: "20px",
+          color: colors2.gray[600]
+        }
       }
-    }
-  },
-  MuiDialogTitle: {
-    styleOverrides: {
-      root: {
-        fontSize: 18,
-        lineHeight: "28px",
-        fontWeight: 600,
-        color: colors.gray[900],
-        padding: "24px 24px 0"
+    },
+    MuiDialogActions: {
+      styleOverrides: {
+        root: {
+          padding: "0 24px 24px",
+          gap: 12
+        }
       }
-    }
-  },
-  MuiDialogContent: {
-    styleOverrides: {
-      root: {
-        padding: "20px 24px",
-        fontSize: 14,
-        lineHeight: "20px",
-        color: colors.gray[600]
+    },
+    // ─── Progress ───────────────────────────────────────────────────
+    MuiLinearProgress: {
+      styleOverrides: {
+        root: {
+          borderRadius: radius2.full,
+          height: 8,
+          backgroundColor: colors2.gray[200]
+        },
+        barColorPrimary: {
+          backgroundColor: colors2.brand[600],
+          borderRadius: radius2.full
+        },
+        barColorSecondary: {
+          backgroundColor: colors2.gray[600],
+          borderRadius: radius2.full
+        }
       }
-    }
-  },
-  MuiDialogActions: {
-    styleOverrides: {
-      root: {
-        padding: "0 24px 24px",
-        gap: 12
+    },
+    MuiCircularProgress: {
+      styleOverrides: {
+        colorPrimary: {
+          color: colors2.brand[600]
+        },
+        colorSecondary: {
+          color: colors2.gray[600]
+        }
       }
-    }
-  },
-  // ─── Progress ───────────────────────────────────────────────────
-  MuiLinearProgress: {
-    styleOverrides: {
-      root: {
-        borderRadius: radius.full,
-        height: 8,
-        backgroundColor: colors.gray[200]
-      },
-      barColorPrimary: {
-        backgroundColor: colors.brand[600],
-        borderRadius: radius.full
+    },
+    // ─── Skeleton ───────────────────────────────────────────────────
+    MuiSkeleton: {
+      defaultProps: {
+        animation: "wave"
       },
-      barColorSecondary: {
-        backgroundColor: colors.gray[600],
-        borderRadius: radius.full
+      styleOverrides: {
+        root: {
+          backgroundColor: colors2.gray[100]
+        },
+        rounded: {
+          borderRadius: radius2.md
+        },
+        circular: {
+          borderRadius: radius2.full
+        }
       }
-    }
-  },
-  MuiCircularProgress: {
-    styleOverrides: {
-      colorPrimary: {
-        color: colors.brand[600]
-      },
-      colorSecondary: {
-        color: colors.gray[600]
+    },
+    // ─── Snackbar ───────────────────────────────────────────────────
+    MuiSnackbarContent: {
+      styleOverrides: {
+        root: {
+          backgroundColor: colors2.gray[900],
+          color: colors2.base.white,
+          borderRadius: radius2.xl,
+          boxShadow: tokenShadows.lg,
+          fontSize: 14,
+          lineHeight: "20px",
+          fontWeight: 500,
+          padding: "6px 16px"
+        }
       }
-    }
-  },
-  // ─── Skeleton ───────────────────────────────────────────────────
-  MuiSkeleton: {
-    defaultProps: {
-      animation: "wave"
-    },
-    styleOverrides: {
-      root: {
-        backgroundColor: colors.gray[100]
-      },
-      rounded: {
-        borderRadius: radius.md
-      },
-      circular: {
-        borderRadius: radius.full
+    },
+    // ─── Typography ─────────────────────────────────────────────────
+    MuiTypography: {
+      defaultProps: {
+        variantMapping: {
+          h1: "h1",
+          h2: "h2",
+          h3: "h3",
+          h4: "h4",
+          h5: "h5",
+          h6: "h6",
+          subtitle1: "p",
+          subtitle2: "p",
+          body1: "p",
+          body2: "p",
+          caption: "span",
+          overline: "span"
+        }
       }
     }
-  },
-  // ─── Snackbar ───────────────────────────────────────────────────
-  MuiSnackbarContent: {
-    styleOverrides: {
-      root: {
-        backgroundColor: colors.gray[900],
-        color: colors.base.white,
-        borderRadius: radius.xl,
-        boxShadow: shadows.lg,
-        fontSize: 14,
-        lineHeight: "20px",
-        fontWeight: 500,
-        padding: "6px 16px"
-      }
+  };
+}
+var components = buildComponents({
+  colors,
+  radius,
+  focusRings,
+  shadows
+});
+
+// src/theme/shadows.ts
+function buildShadows(tokens) {
+  const tokenShadows = tokens.shadows;
+  return [
+    "none",
+    // 0
+    tokenShadows.xs,
+    // 1
+    tokenShadows.sm,
+    // 2
+    tokenShadows.sm,
+    // 3
+    tokenShadows.md,
+    // 4
+    tokenShadows.md,
+    // 5
+    tokenShadows.md,
+    // 6
+    tokenShadows.lg,
+    // 7
+    tokenShadows.lg,
+    // 8
+    tokenShadows.lg,
+    // 9
+    tokenShadows.xl,
+    // 10
+    tokenShadows.xl,
+    // 11
+    tokenShadows.xl,
+    // 12
+    tokenShadows["2xl"],
+    // 13
+    tokenShadows["2xl"],
+    // 14
+    tokenShadows["2xl"],
+    // 15
+    tokenShadows["3xl"],
+    // 16
+    tokenShadows["3xl"],
+    // 17
+    tokenShadows["3xl"],
+    // 18
+    tokenShadows["3xl"],
+    // 19
+    tokenShadows["3xl"],
+    // 20
+    tokenShadows["3xl"],
+    // 21
+    tokenShadows["3xl"],
+    // 22
+    tokenShadows["3xl"],
+    // 23
+    tokenShadows["3xl"]
+    // 24
+  ];
+}
+var shadows2 = buildShadows({
+  shadows
+});
+function buildThemeOptions(tokens) {
+  return {
+    palette: buildPalette(tokens),
+    typography: buildTypography(tokens),
+    components: buildComponents(tokens),
+    shadows: buildShadows(tokens),
+    shape: {
+      borderRadius: tokens.radius.md
     }
-  },
-  // ─── Typography ─────────────────────────────────────────────────
-  MuiTypography: {
-    defaultProps: {
-      variantMapping: {
-        h1: "h1",
-        h2: "h2",
-        h3: "h3",
-        h4: "h4",
-        h5: "h5",
-        h6: "h6",
-        subtitle1: "p",
-        subtitle2: "p",
-        body1: "p",
-        body2: "p",
-        caption: "span",
-        overline: "span"
+  };
+}
+function buildTheme(tokens) {
+  return styles.createTheme(buildThemeOptions(tokens));
+}
+
+// src/theme/presets/forest.ts
+var forestPreset = {
+  name: "forest",
+  defaultVariant: "light",
+  variants: {
+    light: {
+      tokens: {
+        colors,
+        spacing,
+        radius,
+        shadows,
+        focusRings,
+        fontFamily,
+        fontSize,
+        lineHeight,
+        fontWeight,
+        display,
+        container,
+        widths
       }
     }
   }
 };
 
-// src/theme/shadows.ts
-var shadows2 = [
-  "none",
-  // 0
-  shadows.xs,
-  // 1
-  shadows.sm,
-  // 2
-  shadows.sm,
-  // 3
-  shadows.md,
-  // 4
-  shadows.md,
-  // 5
-  shadows.md,
-  // 6
-  shadows.lg,
-  // 7
-  shadows.lg,
-  // 8
-  shadows.lg,
-  // 9
-  shadows.xl,
-  // 10
-  shadows.xl,
-  // 11
-  shadows.xl,
-  // 12
-  shadows["2xl"],
-  // 13
-  shadows["2xl"],
-  // 14
-  shadows["2xl"],
-  // 15
-  shadows["3xl"],
-  // 16
-  shadows["3xl"],
-  // 17
-  shadows["3xl"],
-  // 18
-  shadows["3xl"],
-  // 19
-  shadows["3xl"],
-  // 20
-  shadows["3xl"],
-  // 21
-  shadows["3xl"],
-  // 22
-  shadows["3xl"],
-  // 23
-  shadows["3xl"]
-  // 24
-];
+// src/theme/presets/index.ts
+var presetRegistry = /* @__PURE__ */ new Map();
+presetRegistry.set(forestPreset.name, forestPreset);
+function getPreset(name) {
+  return presetRegistry.get(name);
+}
+function registerPreset(preset) {
+  presetRegistry.set(preset.name, preset);
+}
+function getAvailablePresets() {
+  return Array.from(presetRegistry.keys());
+}
 
 // src/theme/index.ts
 var forestThemeOptions = {
@@ -1299,6 +1381,8 @@ var forestThemeOptions = {
 };
 var forestTheme = styles.createTheme(forestThemeOptions);
 
+exports.buildTheme = buildTheme;
+exports.buildThemeOptions = buildThemeOptions;
 exports.colors = colors;
 exports.components = components;
 exports.container = container;
@@ -1307,11 +1391,15 @@ exports.focusRings = focusRings;
 exports.fontFamily = fontFamily;
 exports.fontSize = fontSize;
 exports.fontWeight = fontWeight;
+exports.forestPreset = forestPreset;
 exports.forestTheme = forestTheme;
 exports.forestThemeOptions = forestThemeOptions;
+exports.getAvailablePresets = getAvailablePresets;
+exports.getPreset = getPreset;
 exports.lineHeight = lineHeight;
 exports.palette = palette;
 exports.radius = radius;
+exports.registerPreset = registerPreset;
 exports.shadows = shadows2;
 exports.spacing = spacing;
 exports.typography = typography;