@chellaa/react 0.2.0 → 0.2.1

package/dist/index.d.ts

@@ -1,50 +1,234 @@
 import * as React from 'react';
+import React__default, { CSSProperties } from 'react';
+import * as _emotion_styled from '@emotion/styled';
 
+type ColorMode = "light" | "dark";
+interface PaletteColor {
+    light: string;
+    main: string;
+    dark: string;
+    contrastText: string;
+}
+interface TypeText {
+    primary: string;
+    secondary: string;
+    disabled: string;
+}
+interface TypeBackground {
+    default: string;
+    paper: string;
+    surface: string;
+}
+interface TypeAction {
+    active: string;
+    hover: string;
+    hoverOpacity: number;
+    selected: string;
+    selectedOpacity: number;
+    disabled: string;
+    disabledBackground: string;
+    focus: string;
+    focusOpacity: number;
+}
+interface Palette {
+    mode: ColorMode;
+    primary: PaletteColor;
+    secondary: PaletteColor;
+    error: PaletteColor;
+    warning: PaletteColor;
+    info: PaletteColor;
+    success: PaletteColor;
+    text: TypeText;
+    background: TypeBackground;
+    divider: string;
+    action: TypeAction;
+}
+type BreakpointKey = "xs" | "sm" | "md" | "lg" | "xl";
+interface Breakpoints {
+    values: Record<BreakpointKey, number>;
+    up: (key: BreakpointKey | number) => string;
+    down: (key: BreakpointKey | number) => string;
+    between: (start: BreakpointKey | number, end: BreakpointKey | number) => string;
+    only: (key: BreakpointKey) => string;
+}
+type TypographyVariant = "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "subtitle1" | "subtitle2" | "body1" | "body2" | "button" | "caption" | "overline";
+interface TypographyStyle {
+    fontFamily?: string;
+    fontWeight?: number | string;
+    fontSize?: string;
+    lineHeight?: number | string;
+    letterSpacing?: string;
+    textTransform?: React.CSSProperties["textTransform"];
+}
+interface TypographyTheme {
+    fontFamily: string;
+    fontSize: number;
+    fontWeightLight: number;
+    fontWeightRegular: number;
+    fontWeightMedium: number;
+    fontWeightBold: number;
+    h1: TypographyStyle;
+    h2: TypographyStyle;
+    h3: TypographyStyle;
+    h4: TypographyStyle;
+    h5: TypographyStyle;
+    h6: TypographyStyle;
+    subtitle1: TypographyStyle;
+    subtitle2: TypographyStyle;
+    body1: TypographyStyle;
+    body2: TypographyStyle;
+    button: TypographyStyle;
+    caption: TypographyStyle;
+    overline: TypographyStyle;
+}
+interface Transitions {
+    easing: {
+        easeInOut: string;
+        easeOut: string;
+        easeIn: string;
+        sharp: string;
+    };
+    duration: {
+        shortest: number;
+        shorter: number;
+        short: number;
+        standard: number;
+        complex: number;
+        enteringScreen: number;
+        leavingScreen: number;
+    };
+    create: (props: string | string[], options?: {
+        duration?: number | string;
+        easing?: string;
+        delay?: number | string;
+    }) => string;
+}
+interface ZIndex {
+    mobileStepper: number;
+    fab: number;
+    speedDial: number;
+    appBar: number;
+    drawer: number;
+    modal: number;
+    snackbar: number;
+    tooltip: number;
+}
+interface ComponentOverride<P = any> {
+    defaultProps?: Partial<P>;
+    styleOverrides?: {
+        [slot: string]: React.CSSProperties | ((params: {
+            theme: ChellaaTheme;
+            ownerState: P;
+        }) => React.CSSProperties);
+    };
+}
+interface ChellaaTheme {
+    palette: Palette;
+    typography: TypographyTheme;
+    spacing: (...factors: (number | string)[]) => string;
+    shape: {
+        borderRadius: number;
+    };
+    breakpoints: Breakpoints;
+    shadows: string[];
+    transitions: Transitions;
+    zIndex: ZIndex;
+    components?: Record<string, ComponentOverride>;
+}
+type DeepPartial<T> = {
+    [P in keyof T]?: T[P] extends Function ? T[P] : T[P] extends Array<infer U> ? Array<DeepPartial<U>> : T[P] extends object ? DeepPartial<T[P]> : T[P];
+};
+type ThemeOptions = DeepPartial<ChellaaTheme>;
+
+declare module "@emotion/react" {
+    interface Theme extends ChellaaTheme {
+    }
+}
 type ThemeMode = "light" | "dark" | "system" | string;
 interface ThemeContextValue {
     theme: ThemeMode;
     setTheme: (theme: ThemeMode) => void;
     resolvedTheme: "light" | "dark";
     systemTheme: "light" | "dark" | undefined;
+    activeTheme: ChellaaTheme;
+    colorMode: ColorMode;
+    setColorMode: (mode: ColorMode) => void;
 }
 interface ThemeProviderProps {
     children?: React.ReactNode;
+    theme?: ChellaaTheme | ThemeOptions;
     defaultTheme?: ThemeMode;
     storageKey?: string;
     enableSystem?: boolean;
     tokens?: Record<string, string>;
     attribute?: string;
 }
-declare function ThemeProvider({ children, defaultTheme, storageKey, enableSystem, tokens, attribute, }: ThemeProviderProps): React.JSX.Element;
+declare function ThemeProvider({ children, theme: customThemeProp, defaultTheme: defaultThemeMode, storageKey, enableSystem, tokens, attribute, }: ThemeProviderProps): React.JSX.Element;
 
+interface ExtendedThemeContextValue extends ThemeContextValue {
+    /** The active ChellaaTheme object (colors, typography, spacing, shadows) */
+    themeObject: ChellaaTheme;
+}
 /**
  * Accesses the active theme context, allowing components to read and update
- * the current theme mode (`light`, `dark`, `system`), resolved theme, and system preference.
+ * the current theme mode (`light`, `dark`, `system`), resolved theme, and active ChellaaTheme.
  */
-declare function useTheme(): ThemeContextValue;
+declare function useTheme(): ExtendedThemeContextValue;
 
-interface CustomThemeConfig {
-    name: string;
-    tokens: Record<string, string>;
-}
-interface CustomThemeResult {
-    name: string;
-    tokens: Record<string, string>;
-    cssText: string;
-}
 /**
- * Creates a structured custom theme definition and compiles it to valid CSS custom property text.
+ * Creates a Chellaa Material Theme with 24-level elevation shadows,
+ * 8px spacing, and complete Google Material 3 design tokens.
  *
  * @example
- * const emeraldTheme = createTheme({
- *   name: 'emerald',
- *   tokens: {
- *     '--cl-color-primary-base': '#059669',
- *     '--cl-color-primary-hover': '#047857',
- *   }
+ * const theme = createTheme({
+ *   palette: {
+ *     mode: 'dark',
+ *     primary: { main: '#6366f1' }
+ *   },
+ *   shape: { borderRadius: 8 }
  * });
  */
-declare function createTheme(config: CustomThemeConfig): CustomThemeResult;
+declare function createTheme(options?: ThemeOptions): ChellaaTheme;
+declare const defaultTheme: ChellaaTheme;
+declare const defaultDarkTheme: ChellaaTheme;
+
+/**
+ * Google Material Design 24-Level Elevation Shadow Matrix
+ *
+ * Each shadow is composed of 3 distinct light-source formulas:
+ * 1. Umbra: Key direct light source shadow
+ * 2. Penumbra: Secondary ambient light shadow
+ * 3. Ambient: Atmospheric fill shadow
+ */
+declare function createShadows(): string[];
+declare const defaultShadows: string[];
+
+/**
+ * Google Material Design 8px Spacing Grid Function
+ *
+ * Supports single and multi-argument invocations:
+ * - spacing(1)      => '8px'
+ * - spacing(2)      => '16px'
+ * - spacing(1, 2)   => '8px 16px'
+ * - spacing(1, 2, 3, 4) => '8px 16px 24px 32px'
+ * - spacing('auto') => 'auto'
+ */
+declare function createSpacing(base?: number): (...factors: (number | string)[]) => string;
+declare const defaultSpacing: (...factors: (number | string)[]) => string;
+
+declare const breakpointKeys: BreakpointKey[];
+declare function createBreakpoints(customValues?: Partial<Record<BreakpointKey, number>>): Breakpoints;
+declare const defaultBreakpoints: Breakpoints;
+
+declare const lightPalette: Palette;
+declare const darkPalette: Palette;
+declare function createPalette(mode?: ColorMode): Palette;
+
+declare const defaultTypography: TypographyTheme;
+
+declare const defaultTransitions: Transitions;
+
+declare const defaultZIndex: ZIndex;
 
 interface ThemeScriptProps {
     storageKey?: string;
@@ -58,6 +242,182 @@ interface ThemeScriptProps {
  */
 declare function ThemeScript({ storageKey, defaultTheme, attribute, nonce, }: ThemeScriptProps): React.JSX.Element;
 
+/**
+ * Responsive value supports:
+ * 1. Single value: 2 | "100%"
+ * 2. Array syntax: [1, 2, 4] (mapped to xs, sm, md...)
+ * 3. Object syntax: { xs: 1, sm: 2, md: 4 }
+ */
+type ResponsiveValue<T> = T | (T | null | undefined)[] | Partial<Record<BreakpointKey, T>>;
+/**
+ * Shorthand and theme-aware system properties
+ */
+interface SystemStyleProperties {
+    m?: ResponsiveValue<number | string>;
+    margin?: ResponsiveValue<number | string>;
+    mt?: ResponsiveValue<number | string>;
+    marginTop?: ResponsiveValue<number | string>;
+    mr?: ResponsiveValue<number | string>;
+    marginRight?: ResponsiveValue<number | string>;
+    mb?: ResponsiveValue<number | string>;
+    marginBottom?: ResponsiveValue<number | string>;
+    ml?: ResponsiveValue<number | string>;
+    marginLeft?: ResponsiveValue<number | string>;
+    mx?: ResponsiveValue<number | string>;
+    marginInline?: ResponsiveValue<number | string>;
+    my?: ResponsiveValue<number | string>;
+    marginBlock?: ResponsiveValue<number | string>;
+    p?: ResponsiveValue<number | string>;
+    padding?: ResponsiveValue<number | string>;
+    pt?: ResponsiveValue<number | string>;
+    paddingTop?: ResponsiveValue<number | string>;
+    pr?: ResponsiveValue<number | string>;
+    paddingRight?: ResponsiveValue<number | string>;
+    pb?: ResponsiveValue<number | string>;
+    paddingBottom?: ResponsiveValue<number | string>;
+    pl?: ResponsiveValue<number | string>;
+    paddingLeft?: ResponsiveValue<number | string>;
+    px?: ResponsiveValue<number | string>;
+    paddingInline?: ResponsiveValue<number | string>;
+    py?: ResponsiveValue<number | string>;
+    paddingBlock?: ResponsiveValue<number | string>;
+    gap?: ResponsiveValue<number | string>;
+    rowGap?: ResponsiveValue<number | string>;
+    columnGap?: ResponsiveValue<number | string>;
+    color?: ResponsiveValue<string>;
+    bgcolor?: ResponsiveValue<string>;
+    backgroundColor?: ResponsiveValue<string>;
+    borderColor?: ResponsiveValue<string>;
+    elevation?: ResponsiveValue<number>;
+    boxShadow?: ResponsiveValue<number | string>;
+    borderRadius?: ResponsiveValue<number | string>;
+    zIndex?: ResponsiveValue<number | string>;
+    display?: ResponsiveValue<CSSProperties["display"]>;
+    flexDirection?: ResponsiveValue<CSSProperties["flexDirection"]>;
+    flexWrap?: ResponsiveValue<CSSProperties["flexWrap"]>;
+    justifyContent?: ResponsiveValue<CSSProperties["justifyContent"]>;
+    alignItems?: ResponsiveValue<CSSProperties["alignItems"]>;
+    alignContent?: ResponsiveValue<CSSProperties["alignContent"]>;
+    flexGrow?: ResponsiveValue<CSSProperties["flexGrow"]>;
+    flexShrink?: ResponsiveValue<CSSProperties["flexShrink"]>;
+    flexBasis?: ResponsiveValue<CSSProperties["flexBasis"]>;
+    flex?: ResponsiveValue<CSSProperties["flex"]>;
+    width?: ResponsiveValue<number | string>;
+    minWidth?: ResponsiveValue<number | string>;
+    maxWidth?: ResponsiveValue<number | string>;
+    height?: ResponsiveValue<number | string>;
+    minHeight?: ResponsiveValue<number | string>;
+    maxHeight?: ResponsiveValue<number | string>;
+    position?: ResponsiveValue<CSSProperties["position"]>;
+    top?: ResponsiveValue<number | string>;
+    right?: ResponsiveValue<number | string>;
+    bottom?: ResponsiveValue<number | string>;
+    left?: ResponsiveValue<number | string>;
+    overflow?: ResponsiveValue<CSSProperties["overflow"]>;
+    opacity?: ResponsiveValue<CSSProperties["opacity"]>;
+}
+type StandardCSSProperties = {
+    [K in keyof CSSProperties]?: ResponsiveValue<CSSProperties[K]>;
+};
+type SystemCssProperties = SystemStyleProperties & StandardCSSProperties;
+interface SxObject extends SystemCssProperties {
+    [key: string]: ResponsiveValue<any> | SxObject | ((theme: ChellaaTheme) => SxObject) | undefined;
+}
+type SxPropValue = SxObject | ((theme: ChellaaTheme) => SxObject) | boolean | undefined | null;
+type SxProps = SxPropValue | SxPropValue[];
+interface StyledOptions<Props extends object = {}> {
+    /**
+     * Component name for theme overrides and debugging (e.g. 'ChellaaButton')
+     */
+    name?: string;
+    /**
+     * Component slot name (e.g. 'root', 'startIcon', 'thumb')
+     */
+    slot?: string;
+    /**
+     * Filter predicate determining which props should be forwarded to DOM element
+     */
+    shouldForwardProp?: (prop: PropertyKey) => boolean;
+    /**
+     * Descriptive label for generated emotion classes
+     */
+    label?: string;
+    /**
+     * CSS target class
+     */
+    target?: string;
+    /**
+     * If true, bypasses automatic sx prop resolution
+     */
+    skipSx?: boolean;
+    /**
+     * Optional custom resolver for theme style overrides
+     */
+    overridesResolver?: (props: Props, styles: Record<string, any>) => Record<string, any> | undefined;
+}
+
+/**
+ * Creates a shouldForwardProp predicate function for Emotion styled components.
+ * Automatically filters out transient props starting with '$' and default system props.
+ *
+ * @param customBlocked Array or Set of additional prop names to prevent forwarding to DOM
+ */
+declare function createShouldForwardProp(customBlocked?: (string | PropertyKey)[] | Set<string | PropertyKey>): (prop: PropertyKey) => boolean;
+/**
+ * Default root shouldForwardProp filter.
+ * Blocks 'sx', 'theme', 'as', 'ownerState', 'slotProps', and '$*'.
+ */
+declare const rootShouldForwardProp: (prop: PropertyKey) => boolean;
+
+/**
+ * Core responsive `sx` parser function.
+ * Evaluates `sx` prop against current theme, expanding:
+ * - Theme spacing shortcuts (m, p, mx, my, px, py, etc.)
+ * - Theme palette tokens (color, bgcolor: 'primary.main', 'text.secondary')
+ * - Elevation shadows (elevation: 0..24, boxShadow: 0..24)
+ * - Breakpoint responsive arrays ([1, 2, 4]) and objects ({ xs: 1, md: 4 })
+ * - Pseudo-classes (&:hover, &:focus) and nested selectors
+ * - Theme function callbacks: `(theme) => ({ ... })`
+ * - Array of sx items: `[sx1, condition && sx2, (theme) => sx3]`
+ */
+declare function parseSx(themeInput?: ChellaaTheme, sx?: SxProps): Record<string, any>;
+
+interface ComponentOverrideOptions {
+    name?: string;
+    slot?: string;
+    overridesResolver?: (props: any, styles: Record<string, any>) => Record<string, any> | undefined;
+}
+/**
+ * Resolves component-level style overrides defined in theme.components[name].styleOverrides
+ * Supports both static style objects and dynamic functions: `({ theme, ownerState }) => ({ ... })`
+ */
+declare function resolveComponentOverrides(theme: ChellaaTheme, options: ComponentOverrideOptions, props: Record<string, any>): Record<string, any> | undefined;
+
+type StyleInterpolation<Props extends object = {}> = Record<string, any> | ((props: Props & {
+    theme: ChellaaTheme;
+}) => Record<string, any> | undefined | null | false);
+/**
+ * Creates an Emotion-powered styled component with:
+ * 1. Automatic `sx` prop parsing with responsive breakpoints & 8px theme spacing.
+ * 2. Automatic resolution of `theme.components[name].styleOverrides[slot]`.
+ * 3. Safe DOM prop filtering via `shouldForwardProp` preventing `sx` and private props from leaking.
+ * 4. First-class polymorphism via `as` prop.
+ *
+ * @example
+ * const MyBox = styled('div', {
+ *   name: 'ChellaaBox',
+ *   slot: 'Root'
+ * })({
+ *   boxSizing: 'border-box'
+ * });
+ */
+declare function styled<Component extends React__default.ElementType, ExtraProps extends object = {}>(component: Component, options?: StyledOptions<ExtraProps>): <Props extends object = ExtraProps>(...interpolations: StyleInterpolation<Props & {
+    sx?: SxProps;
+    as?: React__default.ElementType;
+}>[]) => _emotion_styled.StyledComponent<any, {}, {
+    ref?: React__default.Ref<any>;
+}>;
+
 type ButtonVariant = "solid" | "outline" | "ghost" | "subtle" | "link";
 type ButtonSize = "xs" | "sm" | "md" | "lg" | "xl";
 type ButtonColorScheme = "primary" | "secondary" | "success" | "warning" | "danger" | "info" | "neutral";
@@ -119,6 +479,15 @@ interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
      * @default false
      */
     asChild?: boolean;
+    /**
+     * If true, disables the tactile touch ripple effect.
+     * @default false
+     */
+    disableRipple?: boolean | undefined;
+    /**
+     * System-aware sx styling prop
+     */
+    sx?: SxProps;
     /**
      * Button content or label.
      */
@@ -129,7 +498,8 @@ interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  * Chellaa React Button component.
  *
  * Fundamental action primitive supporting 5 variants, 5 sizes, 7 color schemes,
- * loading states, icons, keyboard interaction, and polymorphic slot delegation via `asChild`.
+ * tactile touch ripple feedback, loading states, icons, keyboard interaction,
+ * theme overrides, and polymorphic slot delegation via `asChild`.
  */
 declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
 
@@ -200,4 +570,1513 @@ declare const ButtonGroupContext: React.Context<ButtonGroupContextValue | undefi
  */
 declare function useButtonGroupContext(): ButtonGroupContextValue | undefined;
 
-export { Button, type ButtonColorScheme, ButtonGroup, ButtonGroupContext, type ButtonGroupContextValue, type ButtonGroupOrientation, type ButtonGroupProps, type ButtonLoadingPosition, type ButtonProps, type ButtonSize, type ButtonVariant, type CustomThemeConfig, type CustomThemeResult, type ThemeContextValue, type ThemeMode, ThemeProvider, type ThemeProviderProps, ThemeScript, type ThemeScriptProps, createTheme, useButtonGroupContext, useTheme };
+interface BoxProps extends React.HTMLAttributes<HTMLElement> {
+    /**
+     * If true, delegating rendering to immediate child element using Slot
+     */
+    asChild?: boolean;
+    /**
+     * The underlying HTML element or component to render (alias of `as`)
+     */
+    component?: React.ElementType;
+    /**
+     * The underlying HTML element or component to render
+     */
+    as?: React.ElementType;
+    /**
+     * The system-aware sx prop
+     */
+    sx?: SxProps;
+    children?: React.ReactNode;
+}
+/**
+ * Universal polymorphic layout container with theme-aware `sx` styling and `asChild` composition.
+ *
+ * @example
+ * <Box sx={{ p: 2, bgcolor: 'background.paper', borderRadius: 2 }}>
+ *   Content
+ * </Box>
+ */
+declare const Box: React.ForwardRefExoticComponent<BoxProps & React.RefAttributes<HTMLElement>>;
+
+type StackDirection = "row" | "row-reverse" | "column" | "column-reverse";
+interface StackOwnerState {
+    direction?: ResponsiveValue<StackDirection> | undefined;
+    spacing?: ResponsiveValue<number | string> | undefined;
+    alignItems?: ResponsiveValue<CSSProperties["alignItems"]> | undefined;
+    justifyContent?: ResponsiveValue<CSSProperties["justifyContent"]> | undefined;
+    flexWrap?: ResponsiveValue<CSSProperties["flexWrap"]> | undefined;
+    useFlexGap?: boolean | undefined;
+}
+interface StackProps extends React.HTMLAttributes<HTMLElement>, StackOwnerState {
+    /**
+     * If true, delegate rendering to immediate child element using Slot
+     */
+    asChild?: boolean;
+    /**
+     * Underlying HTML element or component
+     */
+    component?: React.ElementType;
+    /**
+     * Underlying HTML element or component
+     */
+    as?: React.ElementType;
+    /**
+     * Element placed between each child
+     */
+    divider?: React.ReactNode;
+    /**
+     * System-aware sx styling prop
+     */
+    sx?: SxProps;
+    children?: React.ReactNode;
+}
+/**
+ * 1D Flexbox layout container managing direction, spacing, alignment, and dividers.
+ *
+ * @example
+ * <Stack direction="row" spacing={2} alignItems="center">
+ *   <Item>1</Item>
+ *   <Item>2</Item>
+ * </Stack>
+ */
+declare const Stack: React.ForwardRefExoticComponent<StackProps & React.RefAttributes<HTMLElement>>;
+
+interface FlexOwnerState {
+    direction?: ResponsiveValue<StackDirection> | undefined;
+    spacing?: ResponsiveValue<number | string> | undefined;
+    gap?: ResponsiveValue<number | string> | undefined;
+    alignItems?: ResponsiveValue<CSSProperties["alignItems"]> | undefined;
+    align?: ResponsiveValue<CSSProperties["alignItems"]> | undefined;
+    justifyContent?: ResponsiveValue<CSSProperties["justifyContent"]> | undefined;
+    justify?: ResponsiveValue<CSSProperties["justifyContent"]> | undefined;
+    flexWrap?: ResponsiveValue<CSSProperties["flexWrap"]> | undefined;
+    wrap?: ResponsiveValue<CSSProperties["flexWrap"]> | undefined;
+    inline?: boolean | undefined;
+    center?: boolean | undefined;
+}
+interface FlexProps extends React.HTMLAttributes<HTMLElement>, FlexOwnerState {
+    /**
+     * If true, delegate rendering to immediate child element using Slot
+     */
+    asChild?: boolean | undefined;
+    /**
+     * Underlying HTML element or component
+     */
+    component?: React.ElementType | undefined;
+    /**
+     * Underlying HTML element or component
+     */
+    as?: React.ElementType | undefined;
+    /**
+     * Element placed between each child
+     */
+    divider?: React.ReactNode | undefined;
+    /**
+     * System-aware sx styling prop
+     */
+    sx?: SxProps;
+    children?: React.ReactNode;
+}
+/**
+ * 1D Flexbox layout container defaulting to horizontal row flow with convenient
+ * shorthands: `center`, `inline`, `align`, `justify`, `wrap`, and `gap`.
+ *
+ * @example
+ * <Flex center gap={2}>
+ *   <Avatar />
+ *   <Text>User Name</Text>
+ * </Flex>
+ */
+declare const Flex: React.ForwardRefExoticComponent<FlexProps & React.RefAttributes<HTMLElement>>;
+
+interface ContainerOwnerState {
+    maxWidth?: BreakpointKey | false | undefined;
+    fixed?: boolean | undefined;
+    disableGutters?: boolean | undefined;
+}
+interface ContainerProps extends React.HTMLAttributes<HTMLElement>, ContainerOwnerState {
+    /**
+     * If true, delegate rendering to immediate child element using Slot
+     */
+    asChild?: boolean;
+    /**
+     * The underlying HTML element or component
+     */
+    component?: React.ElementType;
+    /**
+     * The underlying HTML element or component
+     */
+    as?: React.ElementType;
+    /**
+     * The system-aware sx prop
+     */
+    sx?: SxProps;
+    children?: React.ReactNode;
+}
+/**
+ * Centered responsive max-width container with fluid gutters.
+ *
+ * @example
+ * <Container maxWidth="md">
+ *   <Typography variant="h1">Header</Typography>
+ * </Container>
+ */
+declare const Container: React.ForwardRefExoticComponent<ContainerProps & React.RefAttributes<HTMLElement>>;
+
+type GridSize = boolean | "auto" | number;
+type GridWrap = "nowrap" | "wrap" | "wrap-reverse";
+type GridDirection = "row" | "row-reverse" | "column" | "column-reverse";
+interface GridOwnerState {
+    container?: boolean | undefined;
+    item?: boolean | undefined;
+    columns?: number | undefined;
+    spacing?: ResponsiveValue<number | string> | undefined;
+    rowSpacing?: ResponsiveValue<number | string> | undefined;
+    columnSpacing?: ResponsiveValue<number | string> | undefined;
+    direction?: ResponsiveValue<GridDirection> | undefined;
+    wrap?: GridWrap | undefined;
+    alignItems?: ResponsiveValue<CSSProperties["alignItems"]> | undefined;
+    justifyContent?: ResponsiveValue<CSSProperties["justifyContent"]> | undefined;
+    xs?: GridSize | undefined;
+    sm?: GridSize | undefined;
+    md?: GridSize | undefined;
+    lg?: GridSize | undefined;
+    xl?: GridSize | undefined;
+}
+interface GridProps extends React.HTMLAttributes<HTMLElement>, GridOwnerState {
+    /**
+     * If true, delegate rendering to immediate child element using Slot
+     */
+    asChild?: boolean;
+    /**
+     * The underlying HTML element or component
+     */
+    component?: React.ElementType;
+    /**
+     * The underlying HTML element or component
+     */
+    as?: React.ElementType;
+    /**
+     * The system-aware sx prop
+     */
+    sx?: SxProps;
+    children?: React.ReactNode;
+}
+/**
+ * Material 12-column responsive layout grid.
+ *
+ * @example
+ * <Grid container spacing={2}>
+ *   <Grid item xs={12} md={6}>Item 1</Grid>
+ *   <Grid item xs={12} md={6}>Item 2</Grid>
+ * </Grid>
+ */
+declare const Grid: React.ForwardRefExoticComponent<GridProps & React.RefAttributes<HTMLElement>>;
+
+type DividerOrientation = "horizontal" | "vertical";
+type DividerVariant = "fullWidth" | "inset" | "middle";
+type DividerTextAlign = "center" | "left" | "right";
+type DividerLineStyle = "solid" | "dashed" | "dotted";
+interface DividerOwnerState {
+    orientation?: DividerOrientation | undefined;
+    variant?: DividerVariant | undefined;
+    lineStyle?: DividerLineStyle | undefined;
+    flexItem?: boolean | undefined;
+    light?: boolean | undefined;
+    textAlign?: DividerTextAlign | undefined;
+    hasChildren?: boolean | undefined;
+}
+interface DividerProps extends React.HTMLAttributes<HTMLElement>, DividerOwnerState {
+    /**
+     * If true, delegate rendering to immediate child element using Slot
+     */
+    asChild?: boolean;
+    /**
+     * The underlying HTML element or component
+     */
+    component?: React.ElementType;
+    /**
+     * The underlying HTML element or component
+     */
+    as?: React.ElementType;
+    /**
+     * The system-aware sx prop
+     */
+    sx?: SxProps;
+    children?: React.ReactNode;
+}
+/**
+ * Divider visual separator for grouping, lists, toolbars, and labeled sections.
+ *
+ * @example
+ * <Divider />
+ * <Divider>OR</Divider>
+ * <Divider orientation="vertical" flexItem />
+ */
+declare const Divider: React.ForwardRefExoticComponent<DividerProps & React.RefAttributes<HTMLElement>>;
+
+type TypographyAlign = "inherit" | "left" | "center" | "right" | "justify";
+interface TypographyOwnerState {
+    variant?: TypographyVariant | undefined;
+    align?: TypographyAlign | undefined;
+    color?: string | undefined;
+    gutterBottom?: boolean | undefined;
+    noWrap?: boolean | undefined;
+    lineClamp?: number | undefined;
+}
+interface TypographyProps extends React.HTMLAttributes<HTMLElement>, TypographyOwnerState {
+    /**
+     * If true, delegate rendering to immediate child element using Slot
+     */
+    asChild?: boolean;
+    /**
+     * The underlying HTML element or component
+     */
+    component?: React.ElementType;
+    /**
+     * Alias for component
+     */
+    as?: React.ElementType;
+    /**
+     * The system-aware sx prop
+     */
+    sx?: SxProps;
+    children?: React.ReactNode;
+}
+declare function resolveTypographyColor(theme: ChellaaTheme, color?: string): string | undefined;
+/**
+ * Foundational Typography component supporting all Material Design 3 scale variants,
+ * truncation, line clamping, and semantic element delegation.
+ *
+ * @example
+ * <Typography variant="h1">Display Header</Typography>
+ * <Typography variant="body1" color="text.secondary">Body text</Typography>
+ * <Typography noWrap>Single line truncated text</Typography>
+ */
+declare const Typography: React.ForwardRefExoticComponent<TypographyProps & React.RefAttributes<HTMLElement>>;
+
+type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
+interface HeadingProps extends Omit<TypographyProps, "variant"> {
+    /**
+     * Semantic heading level (1 to 6).
+     * Determines both default HTML tag (h1..h6) and typography scale variant unless overridden.
+     * @default 2
+     */
+    level?: HeadingLevel | undefined;
+    /**
+     * Optional visual scale variant to decouple styling from heading level.
+     */
+    variant?: TypographyVariant | undefined;
+}
+/**
+ * Ergonomic semantic heading primitive.
+ *
+ * @example
+ * <Heading level={1}>Page Title</Heading>
+ * <Heading level={2} variant="h4">Visually smaller Section Title</Heading>
+ */
+declare const Heading: React.ForwardRefExoticComponent<HeadingProps & React.RefAttributes<HTMLElement>>;
+
+type TextSize = "xs" | "sm" | "md" | "lg" | "xl";
+interface TextProps extends TypographyProps {
+    /**
+     * Shorthand text size mapping to theme typographic scale:
+     * - "xs": caption (12px)
+     * - "sm": body2 (14px)
+     * - "md": body1 (16px)
+     * - "lg": subtitle1 (16px/medium)
+     * - "xl": h6 (20px)
+     */
+    size?: TextSize | undefined;
+    /**
+     * If true, renders as block element ('div' or 'p'). Otherwise renders as inline 'span'.
+     * @default false
+     */
+    block?: boolean | undefined;
+}
+/**
+ * Ergonomic inline or block textual primitive.
+ *
+ * @example
+ * <Text size="sm" color="text.secondary">Secondary caption</Text>
+ * <Text block noWrap>Single line block item</Text>
+ */
+declare const Text: React.ForwardRefExoticComponent<TextProps & React.RefAttributes<HTMLElement>>;
+
+interface ParagraphProps extends TypographyProps {
+    /**
+     * Shorthand spacing multiplier for bottom margin (defaults to standard gutterBottom).
+     */
+    spacing?: number | string | undefined;
+}
+/**
+ * Ergonomic paragraph block primitive with standard reading margins.
+ *
+ * @example
+ * <Paragraph>
+ *   This is standard paragraph text with built-in reading spacing.
+ * </Paragraph>
+ */
+declare const Paragraph: React.ForwardRefExoticComponent<ParagraphProps & React.RefAttributes<HTMLElement>>;
+
+type CodeColorScheme = "default" | "primary" | "secondary";
+interface CodeOwnerState {
+    colorScheme?: CodeColorScheme | undefined;
+}
+interface CodeProps extends React.HTMLAttributes<HTMLElement>, CodeOwnerState {
+    asChild?: boolean | undefined;
+    component?: React.ElementType | undefined;
+    as?: React.ElementType | undefined;
+    sx?: SxProps;
+    children?: React.ReactNode;
+}
+/**
+ * Inline monospace code chip primitive for identifiers, filenames, and CLI snippets.
+ *
+ * @example
+ * <Text>Run <Code>npm install</Code> to install dependencies.</Text>
+ * <Code colorScheme="primary">package.json</Code>
+ */
+declare const Code: React.ForwardRefExoticComponent<CodeProps & React.RefAttributes<HTMLElement>>;
+
+type KbdSize = "sm" | "md" | "lg";
+type KbdVariant = "outline" | "subtle" | "solid";
+type KbdModifier = "command" | "cmd" | "shift" | "option" | "alt" | "control" | "ctrl" | "enter" | "escape" | "esc" | "tab" | "backspace" | "delete" | "del" | "up" | "down" | "left" | "right";
+declare const MODIFIER_SYMBOLS: Record<KbdModifier, string>;
+interface KbdOwnerState {
+    size?: KbdSize | undefined;
+    variant?: KbdVariant | undefined;
+    modifier?: KbdModifier | undefined;
+}
+interface KbdProps extends React.HTMLAttributes<HTMLElement>, KbdOwnerState {
+    /**
+     * If true, delegate rendering to immediate child element using Slot
+     */
+    asChild?: boolean;
+    /**
+     * The underlying HTML element or component
+     */
+    component?: React.ElementType;
+    /**
+     * Alias for component
+     */
+    as?: React.ElementType;
+    /**
+     * The system-aware sx prop
+     */
+    sx?: SxProps;
+    children?: React.ReactNode;
+}
+/**
+ * Tactile keyboard shortcut keycap primitive representing user input keystrokes.
+ *
+ * @example
+ * <Kbd>Ctrl</Kbd> + <Kbd>K</Kbd>
+ * <Kbd modifier="command" />
+ * <Kbd size="sm" variant="subtle">Esc</Kbd>
+ */
+declare const Kbd: React.ForwardRefExoticComponent<KbdProps & React.RefAttributes<HTMLElement>>;
+
+type InputVariant = "outlined" | "filled" | "standard" | "unstyled";
+type InputSize = "sm" | "md" | "lg";
+interface InputOwnerState {
+    variant?: InputVariant | undefined;
+    size?: InputSize | undefined;
+    fullWidth?: boolean | undefined;
+    error?: boolean | undefined;
+    disabled?: boolean | undefined;
+    readOnly?: boolean | undefined;
+    hasStartAdornment?: boolean | undefined;
+    hasEndAdornment?: boolean | undefined;
+    focused?: boolean | undefined;
+}
+interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "size" | "color">, InputOwnerState {
+    /**
+     * If true, delegate rendering to immediate child element using Slot
+     */
+    asChild?: boolean | undefined;
+    /**
+     * The underlying HTML element or component for root wrapper
+     */
+    component?: React.ElementType | undefined;
+    /**
+     * Alias for component
+     */
+    as?: React.ElementType | undefined;
+    /**
+     * The system-aware sx prop for dynamic runtime overrides
+     */
+    sx?: SxProps;
+    /**
+     * Additional props forwarded to native input element
+     */
+    inputProps?: React.InputHTMLAttributes<HTMLInputElement> | undefined;
+    /**
+     * Content rendered at the start of the input track
+     */
+    startAdornment?: React.ReactNode | undefined;
+    /**
+     * Content rendered at the end of the input track
+     */
+    endAdornment?: React.ReactNode | undefined;
+    /**
+     * If true, displays an interactive clear button when text is present
+     * @default false
+     */
+    clearable?: boolean | undefined;
+    /**
+     * Callback fired when the clear button is clicked
+     */
+    onClear?: () => void;
+    /**
+     * Ref forwarded directly to the native <input> element
+     */
+    inputRef?: React.Ref<HTMLInputElement>;
+}
+
+/**
+ * Headless raw input primitive for backward compatibility.
+ */
+declare const InputBase: React.ForwardRefExoticComponent<React.InputHTMLAttributes<HTMLInputElement> & {
+    ownerState?: InputOwnerState;
+} & React.RefAttributes<HTMLInputElement>>;
+/**
+ * Chellaa React Input component.
+ *
+ * Fundamental single-line text entry primitive with Material Design 3 surface variants,
+ * precompiled CSS cascade layers (@layer cl-components), zero-runtime static styling,
+ * dynamic sx override bridge, and accessible form integration.
+ */
+declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLDivElement>>;
+
+interface TextFieldProps extends InputProps {
+    /**
+     * The label text displayed above the input.
+     */
+    label?: React.ReactNode | undefined;
+    /**
+     * Explanatory helper text displayed below the input.
+     */
+    helperText?: React.ReactNode | undefined;
+    /**
+     * Error message displayed below the input when error is true.
+     */
+    errorMessage?: React.ReactNode | undefined;
+    /**
+     * If true, displays a required asterisk next to the label and marks input required.
+     * @default false
+     */
+    required?: boolean | undefined;
+}
+/**
+ * Enterprise composite form control combining label, input, helper text, and validation messaging.
+ *
+ * @example
+ * <TextField
+ *   label="Email Address"
+ *   type="email"
+ *   placeholder="user@example.com"
+ *   helperText="We will never share your email."
+ *   required
+ * />
+ */
+declare const TextField: React.ForwardRefExoticComponent<TextFieldProps & React.RefAttributes<HTMLDivElement>>;
+
+interface InputAdornmentProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Position of the adornment within the input track.
+     */
+    position: "start" | "end";
+    /**
+     * If true, prevents pointer events on the adornment (e.g. for purely decorative icons).
+     * @default false
+     */
+    disablePointerEvents?: boolean | undefined;
+    /**
+     * The system-aware sx prop
+     */
+    sx?: SxProps;
+    children?: React.ReactNode;
+}
+declare const InputAdornment: React.ForwardRefExoticComponent<InputAdornmentProps & React.RefAttributes<HTMLDivElement>>;
+
+type TextareaVariant = "outlined" | "filled" | "standard" | "unstyled";
+type TextareaSize = "sm" | "md" | "lg";
+type TextareaResize = "none" | "vertical" | "horizontal" | "both";
+interface TextareaOwnerState {
+    variant?: TextareaVariant | undefined;
+    size?: TextareaSize | undefined;
+    fullWidth?: boolean | undefined;
+    error?: boolean | undefined;
+    disabled?: boolean | undefined;
+    readOnly?: boolean | undefined;
+    autoResize?: boolean | undefined;
+    resize?: TextareaResize | undefined;
+    hasCount?: boolean | undefined;
+}
+interface TextareaProps extends Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, "size" | "color">, TextareaOwnerState {
+    /**
+     * If true, delegate rendering to immediate child element using Slot
+     */
+    asChild?: boolean | undefined;
+    /**
+     * The underlying HTML element or component for root wrapper
+     */
+    component?: React.ElementType | undefined;
+    /**
+     * Alias for component
+     */
+    as?: React.ElementType | undefined;
+    /**
+     * The system-aware sx prop
+     */
+    sx?: SxProps;
+    /**
+     * Minimum visible text lines when autoResize is enabled
+     * @default 3
+     */
+    minRows?: number | undefined;
+    /**
+     * Maximum visible text lines before scrollbars appear when autoResize is enabled
+     */
+    maxRows?: number | undefined;
+    /**
+     * If true, displays live character counter below the input
+     * @default false
+     */
+    showCount?: boolean | undefined;
+    /**
+     * Ref forwarded directly to native <textarea> element
+     */
+    textareaRef?: React.Ref<HTMLTextAreaElement>;
+    /**
+     * Additional HTML attributes forwarded to the native HTMLTextAreaElement.
+     */
+    textareaProps?: React.TextareaHTMLAttributes<HTMLTextAreaElement> | undefined;
+}
+
+/**
+ * Multi-line plain text editing control with Material Design surface variants,
+ * auto-expansion support, and character counter capabilities.
+ */
+declare const Textarea: React.ForwardRefExoticComponent<TextareaProps & React.RefAttributes<HTMLDivElement>>;
+
+interface FormFieldProps extends React.HTMLAttributes<HTMLDivElement> {
+    id?: string | undefined;
+    name?: string | undefined;
+    required?: boolean | undefined;
+    disabled?: boolean | undefined;
+    readOnly?: boolean | undefined;
+    error?: boolean | undefined;
+    fullWidth?: boolean | undefined;
+    asChild?: boolean | undefined;
+    component?: React.ElementType | undefined;
+    as?: React.ElementType | undefined;
+    sx?: SxProps;
+    children?: React.ReactNode | undefined;
+}
+/**
+ * Root form control container and accessibility context provider.
+ * Automatically generates IDs and cascades validation states to child controls.
+ *
+ * @example
+ * <FormField required error={hasError}>
+ *   <FormLabel>Email Address</FormLabel>
+ *   <Input type="email" placeholder="alex@company.com" />
+ *   <FormHelperText>We will never share your email.</FormHelperText>
+ *   <FormErrorMessage>Invalid email address.</FormErrorMessage>
+ * </FormField>
+ */
+declare const FormField: React.ForwardRefExoticComponent<FormFieldProps & React.RefAttributes<HTMLDivElement>>;
+
+interface FormLabelProps extends React.LabelHTMLAttributes<HTMLLabelElement> {
+    /**
+     * If true, displays a required asterisk. Inherits from FormField context if omitted.
+     */
+    required?: boolean | undefined;
+    /**
+     * If true, highlights label in error palette color. Inherits from FormField context if omitted.
+     */
+    error?: boolean | undefined;
+    /**
+     * If true, styles label in disabled state. Inherits from FormField context if omitted.
+     */
+    disabled?: boolean | undefined;
+    /**
+     * If true, delegates rendering to immediate child using Slot.
+     */
+    asChild?: boolean | undefined;
+    /**
+     * The underlying HTML element or component
+     */
+    component?: React.ElementType | undefined;
+    /**
+     * Alias for component
+     */
+    as?: React.ElementType | undefined;
+    /**
+     * The system-aware sx prop
+     */
+    sx?: SxProps;
+    children?: React.ReactNode | undefined;
+}
+/**
+ * Accessible form label automatically linked to its associated input control.
+ *
+ * @example
+ * <FormLabel>Email Address</FormLabel>
+ */
+declare const FormLabel: React.ForwardRefExoticComponent<FormLabelProps & React.RefAttributes<HTMLLabelElement>>;
+
+interface FormHelperTextProps extends React.HTMLAttributes<HTMLParagraphElement> {
+    /**
+     * If true, styles helper text in disabled state.
+     */
+    disabled?: boolean | undefined;
+    /**
+     * If true, delegates rendering to immediate child using Slot.
+     */
+    asChild?: boolean | undefined;
+    /**
+     * The underlying HTML element or component
+     */
+    component?: React.ElementType | undefined;
+    /**
+     * Alias for component
+     */
+    as?: React.ElementType | undefined;
+    /**
+     * The system-aware sx prop
+     */
+    sx?: SxProps;
+    children?: React.ReactNode | undefined;
+}
+/**
+ * Contextual explanation text rendered beneath an input control,
+ * automatically linked via aria-describedby.
+ *
+ * @example
+ * <FormHelperText>We will never share your personal email.</FormHelperText>
+ */
+declare const FormHelperText: React.ForwardRefExoticComponent<FormHelperTextProps & React.RefAttributes<HTMLParagraphElement>>;
+
+interface FormErrorMessageProps extends React.HTMLAttributes<HTMLParagraphElement> {
+    /**
+     * If true, forces the error message to mount even if error is false.
+     * @default false
+     */
+    forceMount?: boolean | undefined;
+    /**
+     * If true, delegates rendering to immediate child using Slot.
+     */
+    asChild?: boolean | undefined;
+    /**
+     * The underlying HTML element or component
+     */
+    component?: React.ElementType | undefined;
+    /**
+     * Alias for component
+     */
+    as?: React.ElementType | undefined;
+    /**
+     * The system-aware sx prop
+     */
+    sx?: SxProps;
+    children?: React.ReactNode | undefined;
+}
+/**
+ * Accessible error message primitive rendered conditionally when error is true,
+ * possessing role="alert" for immediate screen reader announcement.
+ *
+ * @example
+ * <FormErrorMessage>Please enter a valid email address.</FormErrorMessage>
+ */
+declare const FormErrorMessage: React.ForwardRefExoticComponent<FormErrorMessageProps & React.RefAttributes<HTMLParagraphElement>>;
+
+interface FormFieldContextValue {
+    id: string;
+    name?: string | undefined;
+    required?: boolean | undefined;
+    disabled?: boolean | undefined;
+    readOnly?: boolean | undefined;
+    error?: boolean | undefined;
+    labelId: string;
+    helperTextId: string;
+    errorMessageId: string;
+    hasHelperText: boolean;
+    hasErrorMessage: boolean;
+    setHasHelperText: (has: boolean) => void;
+    setHasErrorMessage: (has: boolean) => void;
+}
+declare const FormFieldContext: React.Context<FormFieldContextValue | undefined>;
+/**
+ * Hook to consume form field state, IDs, and validation flags.
+ * Returns undefined if used outside a <FormField>.
+ */
+declare function useFormField(): FormFieldContextValue | undefined;
+
+type CheckboxSize = "sm" | "md" | "lg";
+type CheckboxColorScheme = "primary" | "secondary" | "success" | "error" | "warning" | "info" | "default";
+interface CheckboxOwnerState {
+    size: CheckboxSize;
+    colorScheme: CheckboxColorScheme;
+    checked: boolean;
+    indeterminate: boolean;
+    disabled: boolean;
+    readOnly: boolean;
+    error: boolean;
+    hasLabel: boolean;
+}
+interface CheckboxProps extends Omit<React.LabelHTMLAttributes<HTMLLabelElement>, "onChange"> {
+    /**
+     * If true, the checkbox is checked (controlled).
+     */
+    checked?: boolean | undefined;
+    /**
+     * The default checked state when uncontrolled.
+     * @default false
+     */
+    defaultChecked?: boolean | undefined;
+    /**
+     * If true, displays a dash icon and sets aria-checked="mixed".
+     * Takes visual precedence over checked state.
+     * @default false
+     */
+    indeterminate?: boolean | undefined;
+    /**
+     * Callback fired when the checked state changes.
+     */
+    onChange?: ((event: React.ChangeEvent<HTMLInputElement>) => void) | undefined;
+    /**
+     * The value of the checkbox when used inside a CheckboxGroup.
+     */
+    value?: string | undefined;
+    /**
+     * The name attribute of the hidden input element.
+     */
+    name?: string | undefined;
+    /**
+     * Size of the checkbox control box and label.
+     * @default 'md'
+     */
+    size?: CheckboxSize | undefined;
+    /**
+     * Color palette theme scheme.
+     * @default 'primary'
+     */
+    colorScheme?: CheckboxColorScheme | undefined;
+    /**
+     * If true, disables interaction and dims visual elements.
+     * @default false
+     */
+    disabled?: boolean | undefined;
+    /**
+     * If true, prevents toggling while remaining focusable.
+     * @default false
+     */
+    readOnly?: boolean | undefined;
+    /**
+     * If true, the input will be marked as required.
+     * @default false
+     */
+    required?: boolean | undefined;
+    /**
+     * If true, displays an error state outline.
+     * @default false
+     */
+    error?: boolean | undefined;
+    /**
+     * Ref forwarded directly to the hidden native HTMLInputElement.
+     */
+    inputRef?: React.Ref<HTMLInputElement> | undefined;
+    /**
+     * Additional HTML attributes forwarded to the hidden native HTMLInputElement.
+     */
+    inputProps?: React.InputHTMLAttributes<HTMLInputElement> | undefined;
+    /**
+     * If true, delegates rendering to immediate child element using Slot.
+     * @default false
+     */
+    asChild?: boolean | undefined;
+    /**
+     * The underlying HTML element or component.
+     */
+    component?: React.ElementType | undefined;
+    /**
+     * Alias for component.
+     */
+    as?: React.ElementType | undefined;
+    /**
+     * System-aware sx prop.
+     */
+    sx?: SxProps;
+    children?: React.ReactNode | undefined;
+}
+interface CheckboxGroupProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange" | "defaultValue"> {
+    /**
+     * The controlled array of selected checkbox values.
+     */
+    value?: string[] | undefined;
+    /**
+     * The uncontrolled initial array of selected checkbox values.
+     * @default []
+     */
+    defaultValue?: string[] | undefined;
+    /**
+     * Callback fired when selection changes.
+     */
+    onChange?: ((value: string[]) => void) | undefined;
+    /**
+     * The name attribute cascaded to all child checkboxes.
+     */
+    name?: string | undefined;
+    /**
+     * The size cascaded to all child checkboxes.
+     * @default 'md'
+     */
+    size?: CheckboxSize | undefined;
+    /**
+     * The color scheme cascaded to all child checkboxes.
+     * @default 'primary'
+     */
+    colorScheme?: CheckboxColorScheme | undefined;
+    /**
+     * The layout orientation of the group.
+     * @default 'vertical'
+     */
+    orientation?: "vertical" | "horizontal" | undefined;
+    /**
+     * Spacing between individual checkboxes in the group.
+     * Can be a theme spacing unit multiplier or custom CSS dimension.
+     * @default 2
+     */
+    spacing?: number | string | undefined;
+    /**
+     * If true, disables all child checkboxes.
+     * @default false
+     */
+    disabled?: boolean | undefined;
+    /**
+     * If true, marks all child checkboxes as read-only.
+     * @default false
+     */
+    readOnly?: boolean | undefined;
+    /**
+     * If true, marks all child checkboxes with error state.
+     * @default false
+     */
+    error?: boolean | undefined;
+    /**
+     * If true, delegates rendering to immediate child element using Slot.
+     * @default false
+     */
+    asChild?: boolean | undefined;
+    /**
+     * The underlying HTML element or component.
+     */
+    component?: React.ElementType | undefined;
+    /**
+     * Alias for component.
+     */
+    as?: React.ElementType | undefined;
+    /**
+     * System-aware sx prop.
+     */
+    sx?: SxProps;
+    children?: React.ReactNode | undefined;
+}
+interface CheckboxContextValue {
+    value: string[];
+    name?: string | undefined;
+    size?: CheckboxSize | undefined;
+    colorScheme?: CheckboxColorScheme | undefined;
+    disabled?: boolean | undefined;
+    readOnly?: boolean | undefined;
+    error?: boolean | undefined;
+    toggleValue: (itemValue: string) => void;
+}
+
+/**
+ * Checkbox primitive with tri-state selection, custom color palettes,
+ * keyboard accessibility, and automatic CheckboxGroup / FormField binding.
+ *
+ * @example
+ * <Checkbox defaultChecked>Subscribe to updates</Checkbox>
+ * <Checkbox indeterminate>Select all items</Checkbox>
+ */
+declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLLabelElement>>;
+
+/**
+ * CheckboxGroup manages selection state for a set of related checkboxes,
+ * cascading shared properties and orchestrating multi-selection arrays.
+ *
+ * @example
+ * <CheckboxGroup defaultValue={['react']} onChange={(val) => console.log(val)}>
+ *   <Checkbox value="react">React</Checkbox>
+ *   <Checkbox value="vue">Vue</Checkbox>
+ *   <Checkbox value="svelte">Svelte</Checkbox>
+ * </CheckboxGroup>
+ */
+declare const CheckboxGroup: React.ForwardRefExoticComponent<CheckboxGroupProps & React.RefAttributes<HTMLDivElement>>;
+
+declare const CheckboxContext: React.Context<CheckboxContextValue | undefined>;
+/**
+ * Hook to consume parent CheckboxGroup context.
+ * Returns undefined if the checkbox is rendered standalone.
+ */
+declare function useCheckboxGroup(): CheckboxContextValue | undefined;
+
+type RadioSize = "sm" | "md" | "lg";
+type RadioColorScheme = "primary" | "secondary" | "success" | "error" | "warning" | "info" | "default";
+interface RadioOwnerState {
+    size: RadioSize;
+    colorScheme: RadioColorScheme;
+    checked: boolean;
+    disabled: boolean;
+    readOnly: boolean;
+    error: boolean;
+    hasLabel: boolean;
+}
+interface RadioProps extends Omit<React.LabelHTMLAttributes<HTMLLabelElement>, "onChange"> {
+    /**
+     * If true, the radio button is selected (controlled).
+     */
+    checked?: boolean | undefined;
+    /**
+     * The default checked state when uncontrolled.
+     * @default false
+     */
+    defaultChecked?: boolean | undefined;
+    /**
+     * Callback fired when the radio state changes.
+     */
+    onChange?: ((event: React.ChangeEvent<HTMLInputElement>) => void) | undefined;
+    /**
+     * Distinct value of this radio option.
+     */
+    value?: string | number | undefined;
+    /**
+     * Name attribute of the native input element. Inherited from RadioGroup if omitted.
+     */
+    name?: string | undefined;
+    /**
+     * Size of the radio control circle and label.
+     * @default 'md'
+     */
+    size?: RadioSize | undefined;
+    /**
+     * Color palette theme scheme.
+     * @default 'primary'
+     */
+    colorScheme?: RadioColorScheme | undefined;
+    /**
+     * If true, disables interaction and dims visual elements.
+     * @default false
+     */
+    disabled?: boolean | undefined;
+    /**
+     * If true, prevents toggling while remaining focusable.
+     * @default false
+     */
+    readOnly?: boolean | undefined;
+    /**
+     * If true, the input will be marked as required.
+     * @default false
+     */
+    required?: boolean | undefined;
+    /**
+     * If true, displays an error state outline.
+     * @default false
+     */
+    error?: boolean | undefined;
+    /**
+     * Ref forwarded directly to the hidden native HTMLInputElement.
+     */
+    inputRef?: React.Ref<HTMLInputElement> | undefined;
+    /**
+     * Additional HTML attributes forwarded to the hidden native HTMLInputElement.
+     */
+    inputProps?: React.InputHTMLAttributes<HTMLInputElement> | undefined;
+    /**
+     * If true, delegates rendering to immediate child element using Slot.
+     * @default false
+     */
+    asChild?: boolean | undefined;
+    /**
+     * The underlying HTML element or component.
+     */
+    component?: React.ElementType | undefined;
+    /**
+     * Alias for component.
+     */
+    as?: React.ElementType | undefined;
+    /**
+     * System-aware sx prop.
+     */
+    sx?: SxProps;
+    children?: React.ReactNode | undefined;
+}
+interface RadioGroupProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange" | "defaultValue"> {
+    /**
+     * The controlled value of the selected radio button.
+     */
+    value?: string | number | undefined;
+    /**
+     * The uncontrolled initial value of the selected radio button.
+     */
+    defaultValue?: string | number | undefined;
+    /**
+     * Callback fired when selection changes.
+     */
+    onChange?: ((value: string | number) => void) | undefined;
+    /**
+     * The name attribute cascaded to all child radio buttons.
+     * If omitted, a unique name is auto-generated.
+     */
+    name?: string | undefined;
+    /**
+     * The size cascaded to all child radio buttons.
+     * @default 'md'
+     */
+    size?: RadioSize | undefined;
+    /**
+     * The color scheme cascaded to all child radio buttons.
+     * @default 'primary'
+     */
+    colorScheme?: RadioColorScheme | undefined;
+    /**
+     * The layout orientation of the group.
+     * @default 'vertical'
+     */
+    orientation?: "vertical" | "horizontal" | undefined;
+    /**
+     * Spacing between individual radio buttons in the group.
+     * @default 2
+     */
+    spacing?: number | string | undefined;
+    /**
+     * If true, disables all child radio buttons.
+     * @default false
+     */
+    disabled?: boolean | undefined;
+    /**
+     * If true, marks all child radio buttons as read-only.
+     * @default false
+     */
+    readOnly?: boolean | undefined;
+    /**
+     * If true, marks all child radio buttons with error state.
+     * @default false
+     */
+    error?: boolean | undefined;
+    /**
+     * If true, delegates rendering to immediate child element using Slot.
+     * @default false
+     */
+    asChild?: boolean | undefined;
+    /**
+     * The underlying HTML element or component.
+     */
+    component?: React.ElementType | undefined;
+    /**
+     * Alias for component.
+     */
+    as?: React.ElementType | undefined;
+    /**
+     * System-aware sx prop.
+     */
+    sx?: SxProps;
+    children?: React.ReactNode | undefined;
+}
+interface RadioContextValue {
+    value?: string | number | undefined;
+    name?: string | undefined;
+    size?: RadioSize | undefined;
+    colorScheme?: RadioColorScheme | undefined;
+    disabled?: boolean | undefined;
+    readOnly?: boolean | undefined;
+    error?: boolean | undefined;
+    onChange: (value: string | number) => void;
+}
+
+/**
+ * Radio primitive for single-choice selection with animated circular dot indicator,
+ * accessible keyboard arrow navigation, and automatic RadioGroup / FormField binding.
+ *
+ * @example
+ * <Radio value="express">Express Delivery</Radio>
+ */
+declare const Radio: React.ForwardRefExoticComponent<RadioProps & React.RefAttributes<HTMLLabelElement>>;
+
+/**
+ * RadioGroup manages single-selection state across a group of mutually exclusive Radios,
+ * providing native roving keyboard navigation and shared property cascade.
+ *
+ * @example
+ * <RadioGroup defaultValue="standard" onChange={(val) => console.log(val)}>
+ *   <Radio value="standard">Standard Shipping (3-5 days)</Radio>
+ *   <Radio value="express">Express Shipping (1-2 days)</Radio>
+ *   <Radio value="overnight">Overnight Delivery</Radio>
+ * </RadioGroup>
+ */
+declare const RadioGroup: React.ForwardRefExoticComponent<RadioGroupProps & React.RefAttributes<HTMLDivElement>>;
+
+declare const RadioContext: React.Context<RadioContextValue | undefined>;
+/**
+ * Hook to consume parent RadioGroup context.
+ * Returns undefined if the radio is rendered standalone.
+ */
+declare function useRadioGroup(): RadioContextValue | undefined;
+
+type SwitchSize = "sm" | "md" | "lg";
+type SwitchColorScheme = "primary" | "secondary" | "success" | "error" | "warning" | "info" | "default";
+type SwitchLabelPlacement = "end" | "start" | "top" | "bottom";
+interface SwitchOwnerState {
+    size: SwitchSize;
+    colorScheme: SwitchColorScheme;
+    checked: boolean;
+    disabled: boolean;
+    readOnly: boolean;
+    loading: boolean;
+    error: boolean;
+    labelPlacement: SwitchLabelPlacement;
+    hasLabel: boolean;
+}
+interface SwitchProps extends Omit<React.LabelHTMLAttributes<HTMLLabelElement>, "onChange"> {
+    /**
+     * If true, the switch is toggled on (controlled).
+     */
+    checked?: boolean | undefined;
+    /**
+     * The default checked state when uncontrolled.
+     * @default false
+     */
+    defaultChecked?: boolean | undefined;
+    /**
+     * Callback fired when the switch state changes.
+     */
+    onChange?: ((event: React.ChangeEvent<HTMLInputElement>) => void) | undefined;
+    /**
+     * The value of the switch for native form submission.
+     */
+    value?: string | undefined;
+    /**
+     * The name attribute of the hidden input element.
+     */
+    name?: string | undefined;
+    /**
+     * Size of the switch track and thumb.
+     * @default 'md'
+     */
+    size?: SwitchSize | undefined;
+    /**
+     * Color palette theme scheme when active.
+     * @default 'primary'
+     */
+    colorScheme?: SwitchColorScheme | undefined;
+    /**
+     * If true, disables interaction and dims visual elements.
+     * @default false
+     */
+    disabled?: boolean | undefined;
+    /**
+     * If true, prevents toggling while remaining focusable.
+     * @default false
+     */
+    readOnly?: boolean | undefined;
+    /**
+     * If true, the input will be marked as required.
+     * @default false
+     */
+    required?: boolean | undefined;
+    /**
+     * If true, displays an error state outline.
+     * @default false
+     */
+    error?: boolean | undefined;
+    /**
+     * If true, disables switch and renders a micro-loading spinner inside thumb.
+     * @default false
+     */
+    loading?: boolean | undefined;
+    /**
+     * Custom icon rendered inside the thumb when checked.
+     */
+    checkedIcon?: React.ReactNode | undefined;
+    /**
+     * Custom icon rendered inside the thumb when unchecked.
+     */
+    uncheckedIcon?: React.ReactNode | undefined;
+    /**
+     * Position of the label relative to the switch track.
+     * @default 'end'
+     */
+    labelPlacement?: SwitchLabelPlacement | undefined;
+    /**
+     * Ref forwarded directly to the hidden native HTMLInputElement.
+     */
+    inputRef?: React.Ref<HTMLInputElement> | undefined;
+    /**
+     * Additional HTML attributes forwarded to the hidden native HTMLInputElement.
+     */
+    inputProps?: React.InputHTMLAttributes<HTMLInputElement> | undefined;
+    /**
+     * If true, delegates rendering to immediate child element using Slot.
+     * @default false
+     */
+    asChild?: boolean | undefined;
+    /**
+     * The underlying HTML element or component.
+     */
+    component?: React.ElementType | undefined;
+    /**
+     * Alias for component.
+     */
+    as?: React.ElementType | undefined;
+    /**
+     * System-aware sx prop.
+     */
+    sx?: SxProps;
+    children?: React.ReactNode | undefined;
+}
+
+/**
+ * Switch primitive representing an immediate binary toggle setting.
+ * Conforms to the W3C WAI-ARIA 1.2 Switch Pattern (`role="switch"`).
+ *
+ * @example
+ * <Switch defaultChecked>Enable Notifications</Switch>
+ */
+declare const Switch: React.ForwardRefExoticComponent<SwitchProps & React.RefAttributes<HTMLLabelElement>>;
+
+type PaperVariant = "elevation" | "outlined";
+interface PaperOwnerState {
+    elevation?: number | undefined;
+    variant?: PaperVariant | undefined;
+    square?: boolean | undefined;
+}
+interface PaperProps extends React.HTMLAttributes<HTMLElement>, PaperOwnerState {
+    /**
+     * If true, delegate rendering to immediate child element using Slot
+     */
+    asChild?: boolean | undefined;
+    /**
+     * The underlying HTML element or component
+     */
+    component?: React.ElementType | undefined;
+    /**
+     * The underlying HTML element or component
+     */
+    as?: React.ElementType | undefined;
+    /**
+     * The system-aware sx prop
+     */
+    sx?: SxProps;
+    children?: React.ReactNode;
+}
+/**
+ * Material Paper elevation surface container with 24-level elevation shadows,
+ * dark-mode surface elevation overlays, and outlined variants.
+ *
+ * @example
+ * <Paper elevation={3} sx={{ p: 2 }}>
+ *   Elevated Content
+ * </Paper>
+ */
+declare const Paper: React.ForwardRefExoticComponent<PaperProps & React.RefAttributes<HTMLElement>>;
+
+type CardVariant = "elevated" | "outlined" | "filled";
+type CardSize = "sm" | "md" | "lg";
+interface CardOwnerState {
+    variant: CardVariant;
+    elevation: number;
+    size: CardSize;
+    hoverable: boolean;
+    square: boolean;
+}
+interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Visual surface treatment of the card.
+     * @default "elevated"
+     */
+    variant?: CardVariant;
+    /**
+     * Numeric M3 elevation level (0–24). Only applies to the "elevated" variant.
+     * @default 1
+     */
+    elevation?: number;
+    /**
+     * Spatial padding scale applied to all inner sub-components.
+     * @default "md"
+     */
+    size?: CardSize;
+    /**
+     * When true, raises elevation by 2 stops and lifts the card 2px on hover.
+     * @default false
+     */
+    hoverable?: boolean;
+    /**
+     * If true, removes the card's border-radius.
+     * @default false
+     */
+    square?: boolean;
+    /**
+     * If true, delegates rendering to the immediate child element via Slot.
+     * @default false
+     */
+    asChild?: boolean;
+    /** Override the root HTML element. */
+    component?: React.ElementType;
+    /** Alias for component. */
+    as?: React.ElementType;
+    /** System-aware sx styling prop. */
+    sx?: SxProps;
+    children?: React.ReactNode;
+}
+interface CardHeaderProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title"> {
+    /** Leading avatar or icon node. */
+    avatar?: React.ReactNode;
+    /** Trailing action node (icon button, menu trigger). */
+    action?: React.ReactNode;
+    /** Primary title text or node. */
+    title?: React.ReactNode;
+    /** Secondary subtitle text or node. */
+    subheader?: React.ReactNode;
+    /** Props forwarded to the inner title `<span>`. */
+    titleTypographyProps?: React.HTMLAttributes<HTMLSpanElement>;
+    /** Props forwarded to the inner subheader `<span>`. */
+    subheaderTypographyProps?: React.HTMLAttributes<HTMLSpanElement>;
+    /** Delegates rendering to immediate child via Slot. */
+    asChild?: boolean;
+    sx?: SxProps;
+}
+interface CardMediaProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * URL for the background-image shorthand. For semantic HTML prefer `<img>` children.
+     */
+    image?: string;
+    /**
+     * Alt text applied as `aria-label` when using the `image` prop.
+     */
+    alt?: string;
+    /**
+     * CSS aspect-ratio value e.g. "16/9", "4/3", "1".
+     * @default "16/9"
+     */
+    aspectRatio?: string;
+    /** Override the rendered HTML element. @default "div" */
+    component?: React.ElementType;
+    sx?: SxProps;
+}
+interface CardBodyProps extends React.HTMLAttributes<HTMLDivElement> {
+    sx?: SxProps;
+}
+interface CardFooterProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * When true, renders a 1px top divider between the body and footer.
+     * @default false
+     */
+    divider?: boolean;
+    sx?: SxProps;
+}
+interface CardActionsProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * When true, removes the default negative horizontal margins that
+     * align icon-buttons flush to the card's padding box.
+     * @default false
+     */
+    disableSpacing?: boolean;
+    sx?: SxProps;
+}
+
+/**
+ * Material Design 3-aligned surface container with compound sub-components.
+ * Supports 3 visual variants, numeric M3 elevation, dark-mode overlay tinting,
+ * and an optional hoverable lift mode.
+ *
+ * @example
+ * <Card hoverable>
+ *   <CardMedia image="/hero.jpg" alt="Hero" />
+ *   <CardHeader title="Title" subheader="Subtitle" />
+ *   <CardBody>Content here</CardBody>
+ *   <CardActions>
+ *     <Button>Action</Button>
+ *   </CardActions>
+ * </Card>
+ */
+declare const Card: React.ForwardRefExoticComponent<CardProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * Header zone of a Card. Supports avatar, title, subheader, and trailing action slots.
+ * Automatically inherits `size` from the parent Card via CardContext.
+ */
+declare const CardHeader: React.ForwardRefExoticComponent<CardHeaderProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * Aspect-ratio-locked media zone that bleeds edge-to-edge within the card.
+ * Use the `image` prop for a CSS background shorthand, or place an `<img>`
+ * child for semantic HTML (preferred for accessibility).
+ */
+declare const CardMedia: React.ForwardRefExoticComponent<CardMediaProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * Main flexible content zone of a Card.
+ * Inherits `size` from parent Card for consistent padding.
+ */
+declare const CardBody: React.ForwardRefExoticComponent<CardBodyProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * Semantic footer zone of a Card. Use for metadata, tags, timestamps.
+ * Set `divider` to render a 1px separator between the body and footer.
+ */
+declare const CardFooter: React.ForwardRefExoticComponent<CardFooterProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * Flex action strip for Button / Link controls inside a Card.
+ * By default applies a slight negative margin to align icon-buttons
+ * flush to the card's padding box. Use `disableSpacing` to remove this.
+ */
+declare const CardActions: React.ForwardRefExoticComponent<CardActionsProps & React.RefAttributes<HTMLDivElement>>;
+
+interface RippleItem {
+    key: number;
+    rippleX: number;
+    rippleY: number;
+    rippleSize: number;
+    pulsating?: boolean;
+    leaving?: boolean;
+}
+interface TouchRippleRef {
+    start: (event?: React.SyntheticEvent, options?: {
+        pulsate?: boolean;
+        center?: boolean;
+    }) => void;
+    stop: (event?: React.SyntheticEvent) => void;
+    pulsate: () => void;
+}
+interface TouchRippleProps extends React.HTMLAttributes<HTMLSpanElement> {
+    /**
+     * If true, the ripple will center on the element rather than pointer coordinates
+     */
+    center?: boolean;
+    className?: string;
+}
+/**
+ * TouchRipple component delivers tactile Material Design touch/click ripple animations.
+ */
+declare const TouchRipple: React.ForwardRefExoticComponent<TouchRippleProps & React.RefAttributes<TouchRippleRef>>;
+
+interface UseRippleOptions {
+    disabled?: boolean;
+    disableRipple?: boolean;
+    center?: boolean;
+}
+interface UseRippleReturn {
+    rippleRef: React.RefObject<TouchRippleRef>;
+    rippleProps: TouchRippleProps & {
+        ref: React.RefObject<TouchRippleRef>;
+    };
+    getRippleHandlers: <T extends Record<string, any>>(props?: T) => T;
+}
+/**
+ * Hook connecting user interactions (pointer/touch/keyboard) to TouchRipple.
+ */
+declare function useRipple(options?: UseRippleOptions): UseRippleReturn;
+
+export { Box, type BoxProps, type BreakpointKey, type Breakpoints, Button, type ButtonColorScheme, ButtonGroup, ButtonGroupContext, type ButtonGroupContextValue, type ButtonGroupOrientation, type ButtonGroupProps, type ButtonLoadingPosition, type ButtonProps, type ButtonSize, type ButtonVariant, Card, CardActions, type CardActionsProps, CardBody, type CardBodyProps, CardFooter, type CardFooterProps, CardHeader, type CardHeaderProps, CardMedia, type CardMediaProps, type CardOwnerState, type CardProps, type CardSize, type CardVariant, Checkbox, type CheckboxColorScheme, CheckboxContext, type CheckboxContextValue, CheckboxGroup, type CheckboxGroupProps, type CheckboxOwnerState, type CheckboxProps, type CheckboxSize, type ChellaaTheme, Code, type CodeColorScheme, type CodeOwnerState, type CodeProps, type ColorMode, type ComponentOverride, type ComponentOverrideOptions, Container, type ContainerOwnerState, type ContainerProps, type DeepPartial, Divider, type DividerLineStyle, type DividerOrientation, type DividerOwnerState, type DividerProps, type DividerTextAlign, type DividerVariant, type ExtendedThemeContextValue, Flex, type FlexOwnerState, type FlexProps, FormErrorMessage, type FormErrorMessageProps, FormField, FormFieldContext, type FormFieldContextValue, type FormFieldProps, FormHelperText, type FormHelperTextProps, FormLabel, type FormLabelProps, Grid, type GridDirection, type GridOwnerState, type GridProps, type GridSize, type GridWrap, Heading, type HeadingLevel, type HeadingProps, Input, InputAdornment, type InputAdornmentProps, InputBase, type InputOwnerState, type InputProps, type InputSize, type InputVariant, Kbd, type KbdModifier, type KbdOwnerState, type KbdProps, type KbdSize, type KbdVariant, MODIFIER_SYMBOLS, type Palette, type PaletteColor, Paper, type PaperOwnerState, type PaperProps, type PaperVariant, Paragraph, type ParagraphProps, Radio, type RadioColorScheme, RadioContext, type RadioContextValue, RadioGroup, type RadioGroupProps, type RadioOwnerState, type RadioProps, type RadioSize, type ResponsiveValue, type RippleItem, Stack, type StackDirection, type StackOwnerState, type StackProps, type StandardCSSProperties, type StyleInterpolation, type StyledOptions, Switch, type SwitchColorScheme, type SwitchLabelPlacement, type SwitchOwnerState, type SwitchProps, type SwitchSize, type SxObject, type SxPropValue, type SxProps, type SystemCssProperties, type SystemStyleProperties, Text, TextField, type TextFieldProps, type TextProps, type TextSize, Textarea, type TextareaOwnerState, type TextareaProps, type TextareaResize, type TextareaSize, type TextareaVariant, type ThemeContextValue, type ThemeMode, type ThemeOptions, ThemeProvider, type ThemeProviderProps, ThemeScript, type ThemeScriptProps, TouchRipple, type TouchRippleProps, type TouchRippleRef, type Transitions, type TypeAction, type TypeBackground, type TypeText, Typography, type TypographyAlign, type TypographyOwnerState, type TypographyProps, type TypographyStyle, type TypographyTheme, type TypographyVariant, type UseRippleOptions, type UseRippleReturn, type ZIndex, breakpointKeys, createBreakpoints, createPalette, createShadows, createShouldForwardProp, createSpacing, createTheme, darkPalette, defaultBreakpoints, defaultDarkTheme, defaultShadows, defaultSpacing, defaultTheme, defaultTransitions, defaultTypography, defaultZIndex, lightPalette, parseSx, resolveComponentOverrides, resolveTypographyColor, rootShouldForwardProp, styled, useButtonGroupContext, useCheckboxGroup, useFormField, useRadioGroup, useRipple, useTheme };