@chellaa/react 0.2.0 → 0.2.1

package/dist/index.mjs

@@ -1,27 +1,536 @@
 import "./styles.css";
 import * as React from 'react';
+import { keyframes, ThemeProvider as ThemeProvider$1, useTheme as useTheme$1 } from '@emotion/react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import emotionStyled from '@emotion/styled';
 
-// src/theme/ThemeProvider.tsx
+// src/theme/palette.ts
+var lightPalette = {
+  mode: "light",
+  primary: {
+    light: "#818cf8",
+    // indigo-400
+    main: "#6366f1",
+    // indigo-500
+    dark: "#4f46e5",
+    // indigo-600
+    contrastText: "#ffffff"
+  },
+  secondary: {
+    light: "#a78bfa",
+    // violet-400
+    main: "#8b5cf6",
+    // violet-500
+    dark: "#7c3aed",
+    // violet-600
+    contrastText: "#ffffff"
+  },
+  error: {
+    light: "#f87171",
+    // red-400
+    main: "#ef4444",
+    // red-500
+    dark: "#dc2626",
+    // red-600
+    contrastText: "#ffffff"
+  },
+  warning: {
+    light: "#fbbf24",
+    // amber-400
+    main: "#f59e0b",
+    // amber-500
+    dark: "#d97706",
+    // amber-600
+    contrastText: "#18181b"
+  },
+  info: {
+    light: "#38bdf8",
+    // sky-400
+    main: "#0ea5e9",
+    // sky-500
+    dark: "#0284c7",
+    // sky-600
+    contrastText: "#ffffff"
+  },
+  success: {
+    light: "#34d399",
+    // emerald-400
+    main: "#10b981",
+    // emerald-500
+    dark: "#059669",
+    // emerald-600
+    contrastText: "#ffffff"
+  },
+  text: {
+    primary: "rgba(0, 0, 0, 0.87)",
+    secondary: "rgba(0, 0, 0, 0.6)",
+    disabled: "rgba(0, 0, 0, 0.38)"
+  },
+  background: {
+    default: "#f8fafc",
+    paper: "#ffffff",
+    surface: "#ffffff"
+  },
+  divider: "rgba(0, 0, 0, 0.12)",
+  action: {
+    active: "rgba(0, 0, 0, 0.54)",
+    hover: "rgba(0, 0, 0, 0.04)",
+    hoverOpacity: 0.04,
+    selected: "rgba(0, 0, 0, 0.08)",
+    selectedOpacity: 0.08,
+    disabled: "rgba(0, 0, 0, 0.26)",
+    disabledBackground: "rgba(0, 0, 0, 0.12)",
+    focus: "rgba(0, 0, 0, 0.12)",
+    focusOpacity: 0.12
+  }
+};
+var darkPalette = {
+  mode: "dark",
+  primary: {
+    light: "#a5b4fc",
+    // indigo-300
+    main: "#818cf8",
+    // indigo-400
+    dark: "#6366f1",
+    // indigo-500
+    contrastText: "#09090b"
+  },
+  secondary: {
+    light: "#c4b5fd",
+    // violet-300
+    main: "#a78bfa",
+    // violet-400
+    dark: "#8b5cf6",
+    // violet-500
+    contrastText: "#09090b"
+  },
+  error: {
+    light: "#fca5a5",
+    // red-300
+    main: "#f87171",
+    // red-400
+    dark: "#ef4444",
+    // red-500
+    contrastText: "#09090b"
+  },
+  warning: {
+    light: "#fde68a",
+    // amber-200
+    main: "#fbbf24",
+    // amber-400
+    dark: "#f59e0b",
+    // amber-500
+    contrastText: "#09090b"
+  },
+  info: {
+    light: "#7dd3fc",
+    // sky-300
+    main: "#38bdf8",
+    // sky-400
+    dark: "#0ea5e9",
+    // sky-500
+    contrastText: "#09090b"
+  },
+  success: {
+    light: "#6ee7b7",
+    // emerald-300
+    main: "#34d399",
+    // emerald-400
+    dark: "#10b981",
+    // emerald-500
+    contrastText: "#09090b"
+  },
+  text: {
+    primary: "rgba(255, 255, 255, 0.95)",
+    secondary: "rgba(255, 255, 255, 0.7)",
+    disabled: "rgba(255, 255, 255, 0.38)"
+  },
+  background: {
+    default: "#09090b",
+    paper: "#18181b",
+    surface: "#18181b"
+  },
+  divider: "rgba(255, 255, 255, 0.12)",
+  action: {
+    active: "rgba(255, 255, 255, 0.7)",
+    hover: "rgba(255, 255, 255, 0.08)",
+    hoverOpacity: 0.08,
+    selected: "rgba(255, 255, 255, 0.16)",
+    selectedOpacity: 0.16,
+    disabled: "rgba(255, 255, 255, 0.3)",
+    disabledBackground: "rgba(255, 255, 255, 0.12)",
+    focus: "rgba(255, 255, 255, 0.12)",
+    focusOpacity: 0.12
+  }
+};
+function createPalette(mode = "light") {
+  return mode === "dark" ? darkPalette : lightPalette;
+}
+
+// src/theme/typography.ts
+var defaultFontFamily = '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"';
+var defaultTypography = {
+  fontFamily: defaultFontFamily,
+  fontSize: 14,
+  fontWeightLight: 300,
+  fontWeightRegular: 400,
+  fontWeightMedium: 500,
+  fontWeightBold: 700,
+  h1: {
+    fontFamily: defaultFontFamily,
+    fontWeight: 300,
+    fontSize: "6rem",
+    lineHeight: 1.167,
+    letterSpacing: "-0.01562em"
+  },
+  h2: {
+    fontFamily: defaultFontFamily,
+    fontWeight: 300,
+    fontSize: "3.75rem",
+    lineHeight: 1.2,
+    letterSpacing: "-0.00833em"
+  },
+  h3: {
+    fontFamily: defaultFontFamily,
+    fontWeight: 400,
+    fontSize: "3rem",
+    lineHeight: 1.167,
+    letterSpacing: "0em"
+  },
+  h4: {
+    fontFamily: defaultFontFamily,
+    fontWeight: 400,
+    fontSize: "2.125rem",
+    lineHeight: 1.235,
+    letterSpacing: "0.00735em"
+  },
+  h5: {
+    fontFamily: defaultFontFamily,
+    fontWeight: 500,
+    fontSize: "1.5rem",
+    lineHeight: 1.334,
+    letterSpacing: "0em"
+  },
+  h6: {
+    fontFamily: defaultFontFamily,
+    fontWeight: 500,
+    fontSize: "1.25rem",
+    lineHeight: 1.6,
+    letterSpacing: "0.0075em"
+  },
+  subtitle1: {
+    fontFamily: defaultFontFamily,
+    fontWeight: 400,
+    fontSize: "1rem",
+    lineHeight: 1.75,
+    letterSpacing: "0.00938em"
+  },
+  subtitle2: {
+    fontFamily: defaultFontFamily,
+    fontWeight: 500,
+    fontSize: "0.875rem",
+    lineHeight: 1.57,
+    letterSpacing: "0.00714em"
+  },
+  body1: {
+    fontFamily: defaultFontFamily,
+    fontWeight: 400,
+    fontSize: "1rem",
+    lineHeight: 1.5,
+    letterSpacing: "0.00938em"
+  },
+  body2: {
+    fontFamily: defaultFontFamily,
+    fontWeight: 400,
+    fontSize: "0.875rem",
+    lineHeight: 1.43,
+    letterSpacing: "0.01071em"
+  },
+  button: {
+    fontFamily: defaultFontFamily,
+    fontWeight: 500,
+    fontSize: "0.875rem",
+    lineHeight: 1.75,
+    letterSpacing: "0.02857em",
+    textTransform: "uppercase"
+  },
+  caption: {
+    fontFamily: defaultFontFamily,
+    fontWeight: 400,
+    fontSize: "0.75rem",
+    lineHeight: 1.66,
+    letterSpacing: "0.03333em"
+  },
+  overline: {
+    fontFamily: defaultFontFamily,
+    fontWeight: 400,
+    fontSize: "0.75rem",
+    lineHeight: 2.66,
+    letterSpacing: "0.08333em",
+    textTransform: "uppercase"
+  }
+};
+
+// src/theme/spacing.ts
+function createSpacing(base = 8) {
+  return (...factors) => {
+    if (factors.length === 0) return `${base}px`;
+    return factors.map((factor) => {
+      if (typeof factor === "string") return factor;
+      return `${factor * base}px`;
+    }).join(" ");
+  };
+}
+var defaultSpacing = createSpacing(8);
+
+// src/theme/breakpoints.ts
+var defaultBreakpointValues = {
+  xs: 0,
+  sm: 600,
+  md: 900,
+  lg: 1200,
+  xl: 1536
+};
+var breakpointKeys = ["xs", "sm", "md", "lg", "xl"];
+function createBreakpoints(customValues) {
+  const values = {
+    ...defaultBreakpointValues,
+    ...customValues
+  };
+  const step = 5 / 100;
+  const up = (key) => {
+    const value = typeof key === "number" ? key : values[key];
+    return `@media (min-width:${value}px)`;
+  };
+  const down = (key) => {
+    const value = typeof key === "number" ? key : values[key];
+    return `@media (max-width:${value - step}px)`;
+  };
+  const between = (start, end) => {
+    const min = typeof start === "number" ? start : values[start];
+    const max = typeof end === "number" ? end : values[end];
+    return `@media (min-width:${min}px) and (max-width:${max - step}px)`;
+  };
+  const only = (key) => {
+    const index = breakpointKeys.indexOf(key);
+    if (index === breakpointKeys.length - 1) {
+      return up(key);
+    }
+    const nextKey = breakpointKeys[index + 1];
+    return nextKey ? between(key, nextKey) : up(key);
+  };
+  return {
+    values,
+    up,
+    down,
+    between,
+    only
+  };
+}
+var defaultBreakpoints = createBreakpoints();
+
+// src/theme/shadows.ts
+var umbra = [
+  "0px 0px 0px 0px",
+  "0px 2px 1px -1px",
+  "0px 3px 1px -2px",
+  "0px 3px 3px -2px",
+  "0px 2px 4px -1px",
+  "0px 3px 5px -1px",
+  "0px 3px 5px -1px",
+  "0px 4px 5px -2px",
+  "0px 5px 5px -3px",
+  "0px 5px 6px -3px",
+  "0px 6px 6px -3px",
+  "0px 6px 7px -4px",
+  "0px 7px 8px -4px",
+  "0px 7px 8px -4px",
+  "0px 7px 9px -4px",
+  "0px 8px 9px -5px",
+  "0px 8px 10px -5px",
+  "0px 8px 11px -5px",
+  "0px 9px 11px -5px",
+  "0px 9px 12px -6px",
+  "0px 10px 13px -6px",
+  "0px 10px 13px -6px",
+  "0px 10px 14px -6px",
+  "0px 11px 14px -7px",
+  "0px 11px 15px -7px"
+];
+var penumbra = [
+  "0px 0px 0px 0px",
+  "0px 1px 1px 0px",
+  "0px 2px 2px 0px",
+  "0px 3px 4px 0px",
+  "0px 4px 5px 0px",
+  "0px 5px 8px 0px",
+  "0px 6px 10px 0px",
+  "0px 7px 10px 1px",
+  "0px 8px 10px 1px",
+  "0px 9px 12px 1px",
+  "0px 10px 14px 1px",
+  "0px 11px 15px 1px",
+  "0px 12px 17px 2px",
+  "0px 13px 19px 2px",
+  "0px 14px 21px 2px",
+  "0px 15px 22px 2px",
+  "0px 16px 24px 2px",
+  "0px 17px 26px 2px",
+  "0px 18px 28px 2px",
+  "0px 19px 29px 2px",
+  "0px 20px 31px 3px",
+  "0px 21px 33px 3px",
+  "0px 22px 35px 3px",
+  "0px 23px 36px 3px",
+  "0px 24px 38px 3px"
+];
+var ambient = [
+  "0px 0px 0px 0px",
+  "0px 1px 3px 0px",
+  "0px 1px 5px 0px",
+  "0px 1px 8px 0px",
+  "0px 1px 10px 0px",
+  "0px 1px 14px 0px",
+  "0px 1px 18px 0px",
+  "0px 2px 16px 1px",
+  "0px 3px 14px 2px",
+  "0px 3px 16px 2px",
+  "0px 4px 18px 3px",
+  "0px 4px 20px 3px",
+  "0px 5px 22px 4px",
+  "0px 5px 24px 4px",
+  "0px 5px 26px 4px",
+  "0px 6px 28px 5px",
+  "0px 6px 30px 5px",
+  "0px 6px 32px 5px",
+  "0px 7px 34px 6px",
+  "0px 7px 36px 6px",
+  "0px 8px 38px 7px",
+  "0px 8px 40px 7px",
+  "0px 8px 42px 7px",
+  "0px 9px 44px 8px",
+  "0px 9px 46px 8px"
+];
+function createShadows() {
+  return umbra.map((u, i) => {
+    if (i === 0) return "none";
+    return `${u} rgba(0,0,0,0.2), ${penumbra[i]} rgba(0,0,0,0.14), ${ambient[i]} rgba(0,0,0,0.12)`;
+  });
+}
+var defaultShadows = createShadows();
+
+// src/theme/transitions.ts
+var defaultTransitions = {
+  easing: {
+    easeInOut: "cubic-bezier(0.4, 0, 0.2, 1)",
+    easeOut: "cubic-bezier(0.0, 0, 0.2, 1)",
+    easeIn: "cubic-bezier(0.4, 0, 1, 1)",
+    sharp: "cubic-bezier(0.4, 0, 0.6, 1)"
+  },
+  duration: {
+    shortest: 150,
+    shorter: 200,
+    short: 250,
+    standard: 300,
+    complex: 375,
+    enteringScreen: 225,
+    leavingScreen: 195
+  },
+  create(props = ["all"], options = {}) {
+    const {
+      duration = defaultTransitions.duration.standard,
+      easing = defaultTransitions.easing.easeInOut,
+      delay = 0
+    } = options;
+    const formatDuration = (d) => typeof d === "string" ? d : `${d}ms`;
+    const formatDelay = (d) => typeof d === "string" ? d : `${d}ms`;
+    const properties = Array.isArray(props) ? props : [props];
+    return properties.map(
+      (prop) => `${prop} ${formatDuration(duration)} ${easing} ${formatDelay(delay)}`
+    ).join(", ");
+  }
+};
+
+// src/theme/zIndex.ts
+var defaultZIndex = {
+  mobileStepper: 1e3,
+  fab: 1050,
+  speedDial: 1050,
+  appBar: 1100,
+  drawer: 1200,
+  modal: 1300,
+  snackbar: 1400,
+  tooltip: 1500
+};
+
+// src/theme/createTheme.ts
+function isObject(item) {
+  return item && typeof item === "object" && !Array.isArray(item);
+}
+function deepMerge(target, source) {
+  const output = { ...target };
+  if (isObject(target) && isObject(source)) {
+    Object.keys(source).forEach((key) => {
+      if (isObject(source[key])) {
+        if (!(key in target)) {
+          Object.assign(output, { [key]: source[key] });
+        } else {
+          output[key] = deepMerge(target[key], source[key]);
+        }
+      } else {
+        Object.assign(output, { [key]: source[key] });
+      }
+    });
+  }
+  return output;
+}
+function createTheme(options = {}) {
+  const mode = options.palette?.mode ?? "light";
+  const basePalette = createPalette(mode);
+  const mergedPalette = options.palette ? deepMerge(basePalette, options.palette) : basePalette;
+  const mergedTypography = options.typography ? deepMerge(defaultTypography, options.typography) : defaultTypography;
+  const mergedBreakpoints = options.breakpoints?.values ? createBreakpoints(options.breakpoints.values) : defaultBreakpoints;
+  const spacing = typeof options.spacing === "function" ? options.spacing : defaultSpacing;
+  const shape = {
+    borderRadius: options.shape?.borderRadius ?? 4
+  };
+  const shadows = options.shadows ?? defaultShadows;
+  const transitions = options.transitions ? deepMerge(defaultTransitions, options.transitions) : defaultTransitions;
+  const zIndex = options.zIndex ? deepMerge(defaultZIndex, options.zIndex) : defaultZIndex;
+  return {
+    palette: mergedPalette,
+    typography: mergedTypography,
+    spacing,
+    shape,
+    breakpoints: mergedBreakpoints,
+    shadows,
+    transitions,
+    zIndex,
+    components: options.components ?? {}
+  };
+}
+var defaultTheme = createTheme({ palette: { mode: "light" } });
+var defaultDarkTheme = createTheme({ palette: { mode: "dark" } });
 var ThemeContext = React.createContext(
   void 0
 );
 var COLOR_SCHEME_QUERY = "(prefers-color-scheme: dark)";
 function ThemeProvider({
   children,
-  defaultTheme = "system",
+  theme: customThemeProp,
+  defaultTheme: defaultThemeMode = "system",
   storageKey = "chellaa-theme",
   enableSystem = true,
   tokens,
   attribute = "data-theme"
 }) {
   const parentContext = React.useContext(ThemeContext);
-  const [theme, setThemeState] = React.useState(() => {
-    if (typeof window === "undefined") return defaultTheme;
+  const [themeMode, setThemeModeState] = React.useState(() => {
+    if (typeof window === "undefined") return defaultThemeMode;
     try {
-      return localStorage.getItem(storageKey) || defaultTheme;
+      return localStorage.getItem(storageKey) || defaultThemeMode;
     } catch {
-      return defaultTheme;
+      return defaultThemeMode;
     }
   });
   const [systemTheme, setSystemTheme] = React.useState(() => {
@@ -31,11 +540,11 @@ function ThemeProvider({
     return window.matchMedia(COLOR_SCHEME_QUERY).matches ? "dark" : "light";
   });
   const resolvedTheme = React.useMemo(() => {
-    if (theme === "system") {
+    if (themeMode === "system") {
       return systemTheme ?? "light";
     }
-    return theme === "dark" ? "dark" : "light";
-  }, [theme, systemTheme]);
+    return themeMode === "dark" ? "dark" : "light";
+  }, [themeMode, systemTheme]);
   React.useEffect(() => {
     if (!enableSystem || typeof window === "undefined" || typeof window.matchMedia !== "function") {
       return;
@@ -52,21 +561,33 @@ function ThemeProvider({
       return () => mediaQuery.removeListener(handleChange);
     }
   }, [enableSystem]);
+  const activeTheme = React.useMemo(() => {
+    if (customThemeProp) {
+      return createTheme({
+        ...customThemeProp,
+        palette: {
+          mode: resolvedTheme,
+          ...customThemeProp.palette || {}
+        }
+      });
+    }
+    return resolvedTheme === "dark" ? defaultDarkTheme : defaultTheme;
+  }, [customThemeProp, resolvedTheme]);
   React.useEffect(() => {
     if (typeof document === "undefined") return;
     if (!parentContext) {
       const root = document.documentElement;
       root.setAttribute(attribute, resolvedTheme);
       if (tokens) {
-        for (const [key, value2] of Object.entries(tokens)) {
-          root.style.setProperty(key, value2);
+        for (const [key, value] of Object.entries(tokens)) {
+          root.style.setProperty(key, value);
         }
       }
     }
   }, [resolvedTheme, parentContext, attribute, tokens]);
   const setTheme = React.useCallback(
     (newTheme) => {
-      setThemeState(newTheme);
+      setThemeModeState(newTheme);
       try {
         localStorage.setItem(storageKey, newTheme);
       } catch {
@@ -74,18 +595,27 @@ function ThemeProvider({
     },
     [storageKey]
   );
-  const value = React.useMemo(
+  const setColorMode = React.useCallback(
+    (mode) => {
+      setTheme(mode);
+    },
+    [setTheme]
+  );
+  const contextValue = React.useMemo(
     () => ({
-      theme,
+      theme: themeMode,
       setTheme,
       resolvedTheme,
-      systemTheme
+      systemTheme,
+      activeTheme,
+      colorMode: resolvedTheme,
+      setColorMode
     }),
-    [theme, setTheme, resolvedTheme, systemTheme]
+    [themeMode, setTheme, resolvedTheme, systemTheme, activeTheme, setColorMode]
   );
   if (parentContext) {
     const styleObj = tokens ? tokens : void 0;
-    return /* @__PURE__ */ jsx(ThemeContext.Provider, { value, children: /* @__PURE__ */ jsx(
+    return /* @__PURE__ */ jsx(ThemeContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(ThemeProvider$1, { theme: activeTheme, children: /* @__PURE__ */ jsx(
       "div",
       {
         ...{ [attribute]: resolvedTheme },
@@ -93,43 +623,56 @@ function ThemeProvider({
         className: "cl-theme-scope",
         children
       }
-    ) });
+    ) }) });
   }
-  return /* @__PURE__ */ jsx(ThemeContext.Provider, { value, children });
+  return /* @__PURE__ */ jsx(ThemeContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(ThemeProvider$1, { theme: activeTheme, children }) });
 }
 function useTheme() {
   const context = React.useContext(ThemeContext);
-  if (!context) {
-    throw new Error(
-      "useTheme must be used within a <ThemeProvider>. Wrap your application root in <ThemeProvider>."
-    );
+  const emotionTheme = useTheme$1();
+  if (context) {
+    return {
+      ...context,
+      themeObject: context.activeTheme
+    };
+  }
+  if (emotionTheme && emotionTheme.palette) {
+    return {
+      theme: emotionTheme.palette.mode,
+      setTheme: () => {
+      },
+      resolvedTheme: emotionTheme.palette.mode,
+      systemTheme: void 0,
+      activeTheme: emotionTheme,
+      colorMode: emotionTheme.palette.mode,
+      setColorMode: () => {
+      },
+      themeObject: emotionTheme
+    };
   }
-  return context;
-}
-
-// src/theme/createTheme.ts
-function createTheme(config) {
-  const { name, tokens } = config;
-  const declarations = Object.entries(tokens).map(([property, value]) => `  ${property}: ${value};`).join("\n");
-  const cssText = `[data-theme="${name}"] {
-${declarations}
-}`;
   return {
-    name,
-    tokens,
-    cssText
+    theme: "light",
+    setTheme: () => {
+    },
+    resolvedTheme: "light",
+    systemTheme: void 0,
+    activeTheme: defaultTheme,
+    colorMode: "light",
+    setColorMode: () => {
+    },
+    themeObject: defaultTheme
   };
 }
 function ThemeScript({
   storageKey = "chellaa-theme",
-  defaultTheme = "system",
+  defaultTheme: defaultTheme2 = "system",
   attribute = "data-theme",
   nonce
 }) {
   const scriptContent = `(function() {
   try {
     var key = '${storageKey}';
-    var def = '${defaultTheme}';
+    var def = '${defaultTheme2}';
     var attr = '${attribute}';
     var stored = localStorage.getItem(key);
     var theme = stored || def;
@@ -150,6 +693,303 @@ function ThemeScript({
   );
 }
 
+// src/system/shouldForwardProp.ts
+var defaultBlockedProps = /* @__PURE__ */ new Set([
+  "sx",
+  "theme",
+  "as",
+  "ownerState",
+  "slotProps"
+]);
+function createShouldForwardProp(customBlocked) {
+  const blockedSet = new Set(defaultBlockedProps);
+  if (customBlocked) {
+    customBlocked.forEach((prop) => blockedSet.add(prop));
+  }
+  return (prop) => {
+    if (typeof prop === "string" && prop.startsWith("$")) {
+      return false;
+    }
+    return !blockedSet.has(prop);
+  };
+}
+var rootShouldForwardProp = createShouldForwardProp();
+
+// src/system/sx.ts
+var spacingProperties = {
+  m: ["margin"],
+  margin: ["margin"],
+  mt: ["marginTop"],
+  marginTop: ["marginTop"],
+  mr: ["marginRight"],
+  marginRight: ["marginRight"],
+  mb: ["marginBottom"],
+  marginBottom: ["marginBottom"],
+  ml: ["marginLeft"],
+  marginLeft: ["marginLeft"],
+  mx: ["marginInline"],
+  marginInline: ["marginInline"],
+  my: ["marginBlock"],
+  marginBlock: ["marginBlock"],
+  p: ["padding"],
+  padding: ["padding"],
+  pt: ["paddingTop"],
+  paddingTop: ["paddingTop"],
+  pr: ["paddingRight"],
+  paddingRight: ["paddingRight"],
+  pb: ["paddingBottom"],
+  paddingBottom: ["paddingBottom"],
+  pl: ["paddingLeft"],
+  paddingLeft: ["paddingLeft"],
+  px: ["paddingInline"],
+  paddingInline: ["paddingInline"],
+  py: ["paddingBlock"],
+  paddingBlock: ["paddingBlock"],
+  gap: ["gap"],
+  rowGap: ["rowGap"],
+  columnGap: ["columnGap"]
+};
+function resolvePalettePath(palette, path) {
+  if (!path || typeof path !== "string") return void 0;
+  const parts = path.split(".");
+  let current = palette;
+  for (const part of parts) {
+    if (current && typeof current === "object" && part in current) {
+      current = current[part];
+    } else {
+      return void 0;
+    }
+  }
+  return typeof current === "string" ? current : void 0;
+}
+function resolveColor(theme, value) {
+  if (typeof value !== "string") return value;
+  const resolved = resolvePalettePath(theme.palette, value);
+  return resolved ?? value;
+}
+function resolveZIndex(theme, value) {
+  if (typeof value === "string" && value in theme.zIndex) {
+    return theme.zIndex[value];
+  }
+  return value;
+}
+function resolveSingleProperty(theme, prop, value) {
+  if (value === void 0 || value === null) return {};
+  if (prop in spacingProperties) {
+    const cssProps = spacingProperties[prop];
+    const formatted = typeof value === "number" ? theme.spacing(value) : value;
+    const result = {};
+    for (const cssProp of cssProps) {
+      result[cssProp] = formatted;
+    }
+    return result;
+  }
+  if (prop === "bgcolor") {
+    return { backgroundColor: resolveColor(theme, value) };
+  }
+  if (prop === "color" || prop === "backgroundColor" || prop === "borderColor" || prop === "outlineColor") {
+    return { [prop]: resolveColor(theme, value) };
+  }
+  if (prop === "elevation") {
+    if (typeof value === "number" && theme.shadows[value]) {
+      return { boxShadow: theme.shadows[value] };
+    }
+    return {};
+  }
+  if (prop === "boxShadow") {
+    if (typeof value === "number" && theme.shadows[value]) {
+      return { boxShadow: theme.shadows[value] };
+    }
+    return { boxShadow: value };
+  }
+  if (prop === "borderRadius") {
+    if (typeof value === "number") {
+      const radius = theme.shape?.borderRadius ?? 4;
+      return { borderRadius: `${value * radius}px` };
+    }
+    return { borderRadius: value };
+  }
+  if (prop === "zIndex") {
+    return { zIndex: resolveZIndex(theme, value) };
+  }
+  return { [prop]: value };
+}
+function isObject2(val) {
+  return val !== null && typeof val === "object" && !Array.isArray(val);
+}
+function isResponsiveValue(val) {
+  if (Array.isArray(val)) return true;
+  if (isObject2(val)) {
+    return Object.keys(val).some((k) => breakpointKeys.includes(k));
+  }
+  return false;
+}
+function parseSxObject(theme, sxObject) {
+  const result = {};
+  for (const [key, value] of Object.entries(sxObject)) {
+    if (value === void 0 || value === null) continue;
+    if (key.startsWith("&") || key.startsWith("@") || key.startsWith(".")) {
+      if (typeof value === "function") {
+        result[key] = parseSxObject(theme, value(theme));
+      } else if (isObject2(value)) {
+        result[key] = parseSxObject(theme, value);
+      }
+      continue;
+    }
+    if (Array.isArray(value)) {
+      value.forEach((bpVal, index) => {
+        if (bpVal === void 0 || bpVal === null) return;
+        const bpKey = breakpointKeys[index];
+        if (!bpKey) return;
+        const resolved2 = resolveSingleProperty(theme, key, bpVal);
+        if (bpKey === "xs") {
+          Object.assign(result, resolved2);
+        } else {
+          const media = theme.breakpoints.up(bpKey);
+          result[media] = {
+            ...result[media] || {},
+            ...resolved2
+          };
+        }
+      });
+      continue;
+    }
+    if (isResponsiveValue(value)) {
+      const respObj = value;
+      for (const [bpKey, bpVal] of Object.entries(respObj)) {
+        if (bpVal === void 0 || bpVal === null) continue;
+        const resolved2 = resolveSingleProperty(theme, key, bpVal);
+        if (bpKey === "xs") {
+          Object.assign(result, resolved2);
+        } else if (breakpointKeys.includes(bpKey)) {
+          const media = theme.breakpoints.up(bpKey);
+          result[media] = {
+            ...result[media] || {},
+            ...resolved2
+          };
+        }
+      }
+      continue;
+    }
+    if (isObject2(value)) {
+      result[key] = parseSxObject(theme, value);
+      continue;
+    }
+    const resolved = resolveSingleProperty(theme, key, value);
+    Object.assign(result, resolved);
+  }
+  return result;
+}
+function parseSx(themeInput, sx) {
+  if (!sx) return {};
+  const theme = themeInput && typeof themeInput.spacing === "function" ? themeInput : defaultTheme;
+  if (typeof sx === "function") {
+    return parseSxObject(theme, sx(theme));
+  }
+  if (Array.isArray(sx)) {
+    return sx.reduce((acc, item) => {
+      if (!item) return acc;
+      const parsed = parseSx(theme, item);
+      return deepMergeStyles(acc, parsed);
+    }, {});
+  }
+  if (isObject2(sx)) {
+    return parseSxObject(theme, sx);
+  }
+  return {};
+}
+function deepMergeStyles(target, source) {
+  const result = { ...target };
+  for (const [key, value] of Object.entries(source)) {
+    if (isObject2(value) && isObject2(result[key]) && !Array.isArray(value) && !Array.isArray(result[key])) {
+      result[key] = deepMergeStyles(result[key], value);
+    } else {
+      result[key] = value;
+    }
+  }
+  return result;
+}
+
+// src/system/componentOverrides.ts
+function resolveComponentOverrides(theme, options, props) {
+  const { name, slot = "root", overridesResolver } = options;
+  if (!name || !theme.components?.[name]) {
+    return void 0;
+  }
+  const componentConfig = theme.components[name];
+  const styleOverrides = componentConfig.styleOverrides;
+  if (!styleOverrides) {
+    return void 0;
+  }
+  if (overridesResolver) {
+    const resolved = overridesResolver(props, styleOverrides);
+    if (resolved) return resolved;
+  }
+  const slotLower = slot.toLowerCase();
+  const matchedKey = Object.keys(styleOverrides).find(
+    (k) => k.toLowerCase() === slotLower
+  );
+  if (matchedKey) {
+    const override = styleOverrides[matchedKey];
+    if (typeof override === "function") {
+      return override({ theme, ownerState: props.ownerState ?? props });
+    }
+    return override;
+  }
+  return void 0;
+}
+function styled(component, options = {}) {
+  const {
+    name,
+    slot = "Root",
+    label,
+    target,
+    shouldForwardProp: customShouldForwardProp,
+    skipSx = false
+  } = options;
+  const resolvedShouldForwardProp = customShouldForwardProp ? (prop) => rootShouldForwardProp(prop) && customShouldForwardProp(prop) : rootShouldForwardProp;
+  const resolvedLabel = label ?? (name ? `${name}-${slot}` : void 0);
+  const emotionOptions = {
+    shouldForwardProp: resolvedShouldForwardProp
+  };
+  if (resolvedLabel !== void 0) {
+    emotionOptions.label = resolvedLabel;
+  }
+  if (target !== void 0) {
+    emotionOptions.target = target;
+  }
+  const emotionCreator = emotionStyled(component, emotionOptions);
+  return (...interpolations) => {
+    const wrappedInterpolations = interpolations.map((interpolation) => {
+      if (typeof interpolation === "function") {
+        return (rawProps) => {
+          const activeTheme = rawProps.theme && typeof rawProps.theme.spacing === "function" ? rawProps.theme : defaultTheme;
+          return interpolation({
+            ...rawProps,
+            theme: activeTheme
+          });
+        };
+      }
+      return interpolation;
+    });
+    return emotionCreator(
+      ...wrappedInterpolations,
+      // 2. Global theme overrides from theme.components[name].styleOverrides[slot]
+      (props) => {
+        if (!name) return null;
+        const activeTheme = props.theme && typeof props.theme.spacing === "function" ? props.theme : defaultTheme;
+        return resolveComponentOverrides(activeTheme, options, props);
+      },
+      // 3. Local sx prop styles (highest precedence)
+      (props) => {
+        if (skipSx || !props.sx) return null;
+        const activeTheme = props.theme && typeof props.theme.spacing === "function" ? props.theme : defaultTheme;
+        return parseSx(activeTheme, props.sx);
+      }
+    );
+  };
+}
+
 // src/utils/classNames.ts
 function classNames(...inputs) {
   const classes = [];
@@ -190,6 +1030,13 @@ function setRef(ref, value) {
     ref.current = value;
   }
 }
+function useMergeRefs(...refs) {
+  return React.useCallback((current) => {
+    for (const ref of refs) {
+      setRef(ref, current);
+    }
+  }, refs);
+}
 
 // src/primitives/Slot.tsx
 var Slot = React.forwardRef(
@@ -259,6 +1106,252 @@ var ButtonGroupContext = React.createContext(void 0);
 function useButtonGroupContext() {
   return React.useContext(ButtonGroupContext);
 }
+var enterKeyframe = keyframes`
+  0% {
+    transform: scale(0);
+    opacity: 0.1;
+  }
+  100% {
+    transform: scale(1);
+    opacity: 0.3;
+  }
+`;
+var exitKeyframe = keyframes`
+  0% {
+    opacity: 0.3;
+  }
+  100% {
+    opacity: 0;
+  }
+`;
+var pulsateKeyframe = keyframes`
+  0% {
+    transform: scale(1);
+  }
+  50% {
+    transform: scale(0.92);
+  }
+  100% {
+    transform: scale(1);
+  }
+`;
+var TouchRippleRoot = styled("span", {
+  name: "ChellaaTouchRipple",
+  slot: "Root"
+})({
+  overflow: "hidden",
+  pointerEvents: "none",
+  position: "absolute",
+  zIndex: 0,
+  top: 0,
+  right: 0,
+  bottom: 0,
+  left: 0,
+  borderRadius: "inherit"
+});
+var StyledRippleSpan = styled("span", {
+  shouldForwardProp: (prop) => prop !== "pulsating" && prop !== "leaving"
+})(({ pulsating, leaving }) => ({
+  position: "absolute",
+  borderRadius: "50%",
+  backgroundColor: "currentColor",
+  opacity: 0.3,
+  animation: `${enterKeyframe} 550ms cubic-bezier(0.4, 0, 0.2, 1)`,
+  ...pulsating && {
+    animation: `${pulsateKeyframe} 2500ms ease-in-out infinite 200ms`
+  },
+  ...leaving && {
+    opacity: 0,
+    animation: `${exitKeyframe} 550ms cubic-bezier(0.4, 0, 0.2, 1) forwards`
+  }
+}));
+var TouchRipple = React.forwardRef(
+  function TouchRipple2(props, ref) {
+    const { center: centerProp = false, className, ...rest } = props;
+    const [ripples, setRipples] = React.useState([]);
+    const nextKey = React.useRef(0);
+    const containerRef = React.useRef(null);
+    const start = React.useCallback(
+      (event, options = {}) => {
+        const { pulsate: pulsate2 = false, center = centerProp || pulsate2 } = options;
+        const container = containerRef.current;
+        if (!container) return;
+        const rect = container.getBoundingClientRect();
+        let rippleX;
+        let rippleY;
+        let rippleSize;
+        if (center || !event || event.nativeEvent.clientX === void 0) {
+          rippleX = Math.round(rect.width / 2);
+          rippleY = Math.round(rect.height / 2);
+          rippleSize = Math.max(rect.width, rect.height);
+        } else {
+          const clientX = event.nativeEvent.clientX ?? event.nativeEvent.touches?.[0]?.clientX;
+          const clientY = event.nativeEvent.clientY ?? event.nativeEvent.touches?.[0]?.clientY;
+          rippleX = Math.round(clientX - rect.left);
+          rippleY = Math.round(clientY - rect.top);
+          const sizeX = Math.max(Math.abs(container.clientWidth - rippleX), rippleX) * 2 + 2;
+          const sizeY = Math.max(Math.abs(container.clientHeight - rippleY), rippleY) * 2 + 2;
+          rippleSize = Math.sqrt(sizeX ** 2 + sizeY ** 2);
+        }
+        const currentKey = nextKey.current;
+        nextKey.current += 1;
+        setRipples((prev) => [
+          ...prev,
+          {
+            key: currentKey,
+            rippleX,
+            rippleY,
+            rippleSize,
+            pulsating: pulsate2,
+            leaving: false
+          }
+        ]);
+      },
+      [centerProp]
+    );
+    const stop = React.useCallback(() => {
+      setRipples((prev) => {
+        if (prev.length === 0) return prev;
+        return prev.map((ripple) => ({ ...ripple, leaving: true }));
+      });
+      setTimeout(() => {
+        setRipples((prev) => prev.filter((r) => !r.leaving));
+      }, 550);
+    }, []);
+    const pulsate = React.useCallback(() => {
+      start(void 0, { pulsate: true });
+    }, [start]);
+    React.useImperativeHandle(
+      ref,
+      () => ({
+        start,
+        stop,
+        pulsate
+      }),
+      [start, stop, pulsate]
+    );
+    return /* @__PURE__ */ jsx(
+      TouchRippleRoot,
+      {
+        ref: containerRef,
+        className,
+        "aria-hidden": "true",
+        ...rest,
+        children: ripples.map((item) => {
+          const style = {
+            width: `${item.rippleSize}px`,
+            height: `${item.rippleSize}px`,
+            top: `${-(item.rippleSize / 2) + item.rippleY}px`,
+            left: `${-(item.rippleSize / 2) + item.rippleX}px`
+          };
+          return /* @__PURE__ */ jsx(
+            StyledRippleSpan,
+            {
+              pulsating: item.pulsating,
+              leaving: item.leaving,
+              style
+            },
+            item.key
+          );
+        })
+      }
+    );
+  }
+);
+TouchRipple.displayName = "TouchRipple";
+function useRipple(options = {}) {
+  const { disabled = false, disableRipple = false, center = false } = options;
+  const rippleRef = React.useRef(null);
+  const onMouseDown = React.useCallback(
+    (event) => {
+      if (disabled || disableRipple) return;
+      rippleRef.current?.start(event);
+    },
+    [disabled, disableRipple]
+  );
+  const onMouseUp = React.useCallback(
+    (event) => {
+      if (disabled || disableRipple) return;
+      rippleRef.current?.stop(event);
+    },
+    [disabled, disableRipple]
+  );
+  const onMouseLeave = React.useCallback(
+    (event) => {
+      if (disabled || disableRipple) return;
+      rippleRef.current?.stop(event);
+    },
+    [disabled, disableRipple]
+  );
+  const onTouchStart = React.useCallback(
+    (event) => {
+      if (disabled || disableRipple) return;
+      rippleRef.current?.start(event);
+    },
+    [disabled, disableRipple]
+  );
+  const onTouchEnd = React.useCallback(
+    (event) => {
+      if (disabled || disableRipple) return;
+      rippleRef.current?.stop(event);
+    },
+    [disabled, disableRipple]
+  );
+  const onKeyDown = React.useCallback(
+    (event) => {
+      if (disabled || disableRipple) return;
+      if (event.key === " " || event.key === "Enter") {
+        rippleRef.current?.start(void 0, { pulsate: true });
+      }
+    },
+    [disabled, disableRipple]
+  );
+  const onKeyUp = React.useCallback(
+    (event) => {
+      if (disabled || disableRipple) return;
+      if (event.key === " " || event.key === "Enter") {
+        rippleRef.current?.stop();
+      }
+    },
+    [disabled, disableRipple]
+  );
+  const onBlur = React.useCallback(() => {
+    rippleRef.current?.stop();
+  }, []);
+  const getRippleHandlers = React.useCallback(
+    (props = {}) => {
+      return {
+        ...props,
+        onMouseDown: composeEventHandlers(props.onMouseDown, onMouseDown),
+        onMouseUp: composeEventHandlers(props.onMouseUp, onMouseUp),
+        onMouseLeave: composeEventHandlers(props.onMouseLeave, onMouseLeave),
+        onTouchStart: composeEventHandlers(props.onTouchStart, onTouchStart),
+        onTouchEnd: composeEventHandlers(props.onTouchEnd, onTouchEnd),
+        onKeyDown: composeEventHandlers(props.onKeyDown, onKeyDown),
+        onKeyUp: composeEventHandlers(props.onKeyUp, onKeyUp),
+        onBlur: composeEventHandlers(props.onBlur, onBlur)
+      };
+    },
+    [
+      onMouseDown,
+      onMouseUp,
+      onMouseLeave,
+      onTouchStart,
+      onTouchEnd,
+      onKeyDown,
+      onKeyUp,
+      onBlur
+    ]
+  );
+  return {
+    rippleRef,
+    rippleProps: {
+      ref: rippleRef,
+      center
+    },
+    getRippleHandlers
+  };
+}
 function ButtonSpinner() {
   return /* @__PURE__ */ jsxs(
     "svg",
@@ -293,6 +1386,11 @@ function ButtonSpinner() {
     }
   );
 }
+var StyledButtonRoot = styled("button", {
+  name: "ChellaaButton",
+  slot: "Root",
+  shouldForwardProp: (prop) => prop !== "variant" && prop !== "colorScheme" && prop !== "isFullWidth" && prop !== "isLoading" && prop !== "isDisabled" && prop !== "loadingText" && prop !== "loadingPosition" && prop !== "startIcon" && prop !== "endIcon" && prop !== "disableRipple" && prop !== "asChild"
+})({});
 var Button = React.forwardRef(
   function Button2(props, forwardedRef) {
     const {
@@ -313,6 +1411,8 @@ var Button = React.forwardRef(
       type = "button",
       onClick,
       onKeyDown,
+      disableRipple = false,
+      sx,
       ...restProps
     } = props;
     const buttonGroup = useButtonGroupContext();
@@ -321,6 +1421,10 @@ var Button = React.forwardRef(
     const colorScheme = colorSchemeProp ?? buttonGroup?.colorScheme ?? "primary";
     const isDisabled = isDisabledProp ?? disabledProp ?? buttonGroup?.isDisabled ?? false;
     const isEffectivelyDisabled = isDisabled || isLoading;
+    const { rippleProps, getRippleHandlers } = useRipple({
+      disabled: isEffectivelyDisabled,
+      disableRipple
+    });
     const handleClick = (event) => {
       if (isEffectivelyDisabled) {
         event.preventDefault();
@@ -352,12 +1456,14 @@ var Button = React.forwardRef(
     const spinner = /* @__PURE__ */ jsx(ButtonSpinner, {});
     if (asChild) {
       return /* @__PURE__ */ jsx(
-        Slot,
+        StyledButtonRoot,
         {
+          as: Slot,
           ref: forwardedRef,
           className: buttonClassName,
           "aria-disabled": isEffectivelyDisabled ? true : void 0,
           "aria-busy": isLoading ? true : void 0,
+          sx,
           onClick: handleClick,
           onKeyDown: handleKeyDown,
           ...restProps,
@@ -366,8 +1472,13 @@ var Button = React.forwardRef(
       );
     }
     const isCenterLoading = isLoading && loadingPosition === "center";
-    return /* @__PURE__ */ jsx(
-      "button",
+    const buttonHandlers = getRippleHandlers({
+      onClick: handleClick,
+      onKeyDown: handleKeyDown,
+      ...restProps
+    });
+    return /* @__PURE__ */ jsxs(
+      StyledButtonRoot,
       {
         ref: forwardedRef,
         type,
@@ -375,13 +1486,33 @@ var Button = React.forwardRef(
         "aria-disabled": isEffectivelyDisabled ? true : void 0,
         "aria-busy": isLoading ? true : void 0,
         className: buttonClassName,
-        onClick: handleClick,
-        onKeyDown: handleKeyDown,
-        ...restProps,
-        children: isCenterLoading ? /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx("span", { className: "cl-button__spinner-wrapper--center", children: spinner }),
-          /* @__PURE__ */ jsxs("span", { className: "cl-button__content--hidden", children: [
-            startIcon && /* @__PURE__ */ jsx(
+        sx,
+        ...buttonHandlers,
+        children: [
+          isCenterLoading ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx("span", { className: "cl-button__spinner-wrapper--center", children: spinner }),
+            /* @__PURE__ */ jsxs("span", { className: "cl-button__content--hidden", children: [
+              startIcon && /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: "cl-button__icon cl-button__icon--start",
+                  "aria-hidden": "true",
+                  children: startIcon
+                }
+              ),
+              children !== void 0 && /* @__PURE__ */ jsx("span", { className: "cl-button__label", children }),
+              endIcon && /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: "cl-button__icon cl-button__icon--end",
+                  "aria-hidden": "true",
+                  children: endIcon
+                }
+              )
+            ] })
+          ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+            isLoading && loadingPosition === "start" && spinner,
+            !isLoading && startIcon && /* @__PURE__ */ jsx(
               "span",
               {
                 className: "cl-button__icon cl-button__icon--start",
@@ -389,8 +1520,9 @@ var Button = React.forwardRef(
                 children: startIcon
               }
             ),
-            children !== void 0 && /* @__PURE__ */ jsx("span", { className: "cl-button__label", children }),
-            endIcon && /* @__PURE__ */ jsx(
+            isLoading && loadingText ? /* @__PURE__ */ jsx("span", { className: "cl-button__label", children: loadingText }) : children !== void 0 ? /* @__PURE__ */ jsx("span", { className: "cl-button__label", children }) : null,
+            isLoading && loadingPosition === "end" && spinner,
+            !isLoading && endIcon && /* @__PURE__ */ jsx(
               "span",
               {
                 className: "cl-button__icon cl-button__icon--end",
@@ -398,28 +1530,9 @@ var Button = React.forwardRef(
                 children: endIcon
               }
             )
-          ] })
-        ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-          isLoading && loadingPosition === "start" && spinner,
-          !isLoading && startIcon && /* @__PURE__ */ jsx(
-            "span",
-            {
-              className: "cl-button__icon cl-button__icon--start",
-              "aria-hidden": "true",
-              children: startIcon
-            }
-          ),
-          isLoading && loadingText ? /* @__PURE__ */ jsx("span", { className: "cl-button__label", children: loadingText }) : children !== void 0 ? /* @__PURE__ */ jsx("span", { className: "cl-button__label", children }) : null,
-          isLoading && loadingPosition === "end" && spinner,
-          !isLoading && endIcon && /* @__PURE__ */ jsx(
-            "span",
-            {
-              className: "cl-button__icon cl-button__icon--end",
-              "aria-hidden": "true",
-              children: endIcon
-            }
-          )
-        ] })
+          ] }),
+          !disableRipple && !isEffectivelyDisabled && /* @__PURE__ */ jsx(TouchRipple, { ...rippleProps })
+        ]
       }
     );
   }
@@ -489,7 +1602,2862 @@ var ButtonGroup = React.forwardRef(
   }
 );
 ButtonGroup.displayName = "ButtonGroup";
+var StyledBoxRoot = styled("div", {
+  name: "ChellaaBox",
+  slot: "Root",
+  shouldForwardProp: (prop) => prop !== "asChild" && prop !== "component"
+})({});
+var Box = React.forwardRef(
+  function Box2(props, ref) {
+    const { asChild = false, component, as, className, style, sx, children, ...rest } = props;
+    const targetTag = component || as;
+    const boxClassName = classNames("cl-box", className);
+    if (asChild) {
+      return /* @__PURE__ */ jsx(
+        StyledBoxRoot,
+        {
+          as: Slot,
+          ref,
+          className: boxClassName,
+          style,
+          sx,
+          ...rest,
+          children
+        }
+      );
+    }
+    if (targetTag) {
+      return /* @__PURE__ */ jsx(
+        StyledBoxRoot,
+        {
+          as: targetTag,
+          ref,
+          className: boxClassName,
+          style,
+          sx,
+          ...rest,
+          children
+        }
+      );
+    }
+    return /* @__PURE__ */ jsx(
+      StyledBoxRoot,
+      {
+        ref,
+        className: boxClassName,
+        style,
+        sx,
+        ...rest,
+        children
+      }
+    );
+  }
+);
+Box.displayName = "Box";
+var StyledStackRoot = styled("div", {
+  name: "ChellaaStack",
+  slot: "Root",
+  shouldForwardProp: (prop) => prop !== "direction" && prop !== "spacing" && prop !== "alignItems" && prop !== "justifyContent" && prop !== "flexWrap" && prop !== "useFlexGap" && prop !== "asChild" && prop !== "component"
+})(({ theme, ownerState }) => {
+  const styles = {};
+  if (typeof ownerState.direction === "object") {
+    Object.assign(
+      styles,
+      parseSx(theme, { flexDirection: ownerState.direction })
+    );
+  }
+  if (ownerState.spacing !== void 0 && ownerState.spacing !== 0) {
+    Object.assign(
+      styles,
+      parseSx(theme, { gap: ownerState.spacing })
+    );
+  }
+  if (ownerState.alignItems !== void 0) {
+    Object.assign(
+      styles,
+      parseSx(theme, { alignItems: ownerState.alignItems })
+    );
+  }
+  if (ownerState.justifyContent !== void 0) {
+    Object.assign(
+      styles,
+      parseSx(theme, { justifyContent: ownerState.justifyContent })
+    );
+  }
+  if (ownerState.flexWrap !== void 0) {
+    Object.assign(
+      styles,
+      parseSx(theme, { flexWrap: ownerState.flexWrap })
+    );
+  }
+  return styles;
+});
+var Stack = React.forwardRef(
+  function Stack2(props, ref) {
+    const {
+      asChild = false,
+      component,
+      as,
+      direction = "column",
+      spacing = 0,
+      alignItems,
+      justifyContent,
+      flexWrap,
+      useFlexGap = true,
+      divider,
+      className,
+      style,
+      sx,
+      children,
+      ...rest
+    } = props;
+    const ownerState = {
+      direction,
+      spacing,
+      alignItems,
+      justifyContent,
+      flexWrap,
+      useFlexGap
+    };
+    const isSimpleDirection = typeof direction === "string";
+    const stackClassName = classNames(
+      "cl-stack",
+      isSimpleDirection && `cl-stack--${direction}`,
+      className
+    );
+    const targetTag = component || as;
+    let renderedChildren = children;
+    if (divider && !asChild) {
+      const validChildren = React.Children.toArray(children).filter(
+        React.isValidElement
+      );
+      renderedChildren = validChildren.reduce(
+        (acc, child, index) => {
+          acc.push(child);
+          if (index < validChildren.length - 1) {
+            acc.push(
+              React.isValidElement(divider) ? React.cloneElement(divider, {
+                key: `stack-divider-${index}`
+              }) : /* @__PURE__ */ jsx("span", { children: divider }, `stack-divider-${index}`)
+            );
+          }
+          return acc;
+        },
+        []
+      );
+    }
+    if (asChild) {
+      return /* @__PURE__ */ jsx(
+        StyledStackRoot,
+        {
+          as: Slot,
+          ref,
+          className: stackClassName,
+          style,
+          ownerState,
+          sx,
+          ...rest,
+          children: renderedChildren
+        }
+      );
+    }
+    if (targetTag) {
+      return /* @__PURE__ */ jsx(
+        StyledStackRoot,
+        {
+          as: targetTag,
+          ref,
+          className: stackClassName,
+          style,
+          ownerState,
+          sx,
+          ...rest,
+          children: renderedChildren
+        }
+      );
+    }
+    return /* @__PURE__ */ jsx(
+      StyledStackRoot,
+      {
+        ref,
+        className: stackClassName,
+        style,
+        ownerState,
+        sx,
+        ...rest,
+        children: renderedChildren
+      }
+    );
+  }
+);
+Stack.displayName = "Stack";
+var StyledFlexRoot = styled("div", {
+  name: "ChellaaFlex",
+  slot: "Root",
+  shouldForwardProp: (prop) => prop !== "direction" && prop !== "spacing" && prop !== "gap" && prop !== "alignItems" && prop !== "align" && prop !== "justifyContent" && prop !== "justify" && prop !== "flexWrap" && prop !== "wrap" && prop !== "inline" && prop !== "center" && prop !== "asChild" && prop !== "component"
+})(({ theme, ownerState }) => {
+  const isCenter = ownerState.center ?? false;
+  const styles = {};
+  if (typeof ownerState.direction === "object") {
+    Object.assign(
+      styles,
+      parseSx(theme, { flexDirection: ownerState.direction })
+    );
+  }
+  const gapValue = ownerState.gap ?? ownerState.spacing;
+  if (gapValue !== void 0) {
+    Object.assign(styles, parseSx(theme, { gap: gapValue }));
+  }
+  if (!isCenter) {
+    const alignVal = ownerState.align ?? ownerState.alignItems;
+    if (alignVal !== void 0) {
+      Object.assign(styles, parseSx(theme, { alignItems: alignVal }));
+    }
+    const justifyVal = ownerState.justify ?? ownerState.justifyContent;
+    if (justifyVal !== void 0) {
+      Object.assign(styles, parseSx(theme, { justifyContent: justifyVal }));
+    }
+  }
+  const wrapVal = ownerState.wrap ?? ownerState.flexWrap;
+  if (wrapVal !== void 0) {
+    Object.assign(styles, parseSx(theme, { flexWrap: wrapVal }));
+  }
+  return styles;
+});
+var Flex = React.forwardRef(
+  function Flex2(props, ref) {
+    const {
+      asChild = false,
+      component,
+      as,
+      direction = "row",
+      spacing,
+      gap,
+      alignItems,
+      align,
+      justifyContent,
+      justify,
+      flexWrap,
+      wrap,
+      inline = false,
+      center = false,
+      divider,
+      className,
+      style,
+      sx,
+      children,
+      ...rest
+    } = props;
+    const ownerState = {
+      direction,
+      spacing,
+      gap,
+      alignItems,
+      align,
+      justifyContent,
+      justify,
+      flexWrap,
+      wrap,
+      inline,
+      center
+    };
+    const isSimpleDirection = typeof direction === "string";
+    const flexClassName = classNames(
+      "cl-flex",
+      inline && "cl-flex--inline",
+      center && "cl-flex--center",
+      isSimpleDirection && `cl-flex--${direction}`,
+      className
+    );
+    const targetTag = component || as;
+    let renderedChildren = children;
+    if (divider && !asChild) {
+      const validChildren = React.Children.toArray(children).filter(
+        React.isValidElement
+      );
+      renderedChildren = validChildren.reduce(
+        (acc, child, index) => {
+          acc.push(child);
+          if (index < validChildren.length - 1) {
+            acc.push(
+              React.isValidElement(divider) ? React.cloneElement(divider, {
+                key: `flex-divider-${index}`
+              }) : /* @__PURE__ */ jsx("span", { children: divider }, `flex-divider-${index}`)
+            );
+          }
+          return acc;
+        },
+        []
+      );
+    }
+    if (asChild) {
+      return /* @__PURE__ */ jsx(
+        StyledFlexRoot,
+        {
+          as: Slot,
+          ref,
+          className: flexClassName,
+          style,
+          ownerState,
+          sx,
+          ...rest,
+          children: renderedChildren
+        }
+      );
+    }
+    if (targetTag) {
+      return /* @__PURE__ */ jsx(
+        StyledFlexRoot,
+        {
+          as: targetTag,
+          ref,
+          className: flexClassName,
+          style,
+          ownerState,
+          sx,
+          ...rest,
+          children: renderedChildren
+        }
+      );
+    }
+    return /* @__PURE__ */ jsx(
+      StyledFlexRoot,
+      {
+        ref,
+        className: flexClassName,
+        style,
+        ownerState,
+        sx,
+        ...rest,
+        children: renderedChildren
+      }
+    );
+  }
+);
+Flex.displayName = "Flex";
+var StyledContainerRoot = styled("div", {
+  name: "ChellaaContainer",
+  slot: "Root",
+  shouldForwardProp: (prop) => prop !== "maxWidth" && prop !== "fixed" && prop !== "disableGutters" && prop !== "asChild" && prop !== "component"
+})({});
+var Container = React.forwardRef(
+  function Container2(props, ref) {
+    const {
+      asChild = false,
+      component,
+      as,
+      maxWidth = "lg",
+      fixed = false,
+      disableGutters = false,
+      className,
+      style,
+      sx,
+      children,
+      ...rest
+    } = props;
+    const containerClassName = classNames(
+      "cl-container",
+      disableGutters && "cl-container--disable-gutters",
+      fixed && "cl-container--fixed",
+      maxWidth !== false && `cl-container--${maxWidth}`,
+      className
+    );
+    const targetTag = component || as;
+    if (asChild) {
+      return /* @__PURE__ */ jsx(
+        StyledContainerRoot,
+        {
+          as: Slot,
+          ref,
+          className: containerClassName,
+          style,
+          sx,
+          ...rest,
+          children
+        }
+      );
+    }
+    if (targetTag) {
+      return /* @__PURE__ */ jsx(
+        StyledContainerRoot,
+        {
+          as: targetTag,
+          ref,
+          className: containerClassName,
+          style,
+          sx,
+          ...rest,
+          children
+        }
+      );
+    }
+    return /* @__PURE__ */ jsx(
+      StyledContainerRoot,
+      {
+        ref,
+        className: containerClassName,
+        style,
+        sx,
+        ...rest,
+        children
+      }
+    );
+  }
+);
+Container.displayName = "Container";
+function generateGridSizeStyles(size, columns = 12) {
+  if (size === true) {
+    return {
+      flexBasis: 0,
+      flexGrow: 1,
+      maxWidth: "100%"
+    };
+  }
+  if (size === "auto") {
+    return {
+      flexBasis: "auto",
+      flexGrow: 0,
+      maxWidth: "none"
+    };
+  }
+  if (typeof size === "number") {
+    const widthPercentage = `${Math.round(size / columns * 1e8) / 1e6}%`;
+    return {
+      flexBasis: widthPercentage,
+      flexGrow: 0,
+      maxWidth: widthPercentage
+    };
+  }
+  return {};
+}
+var StyledGridRoot = styled("div", {
+  name: "ChellaaGrid",
+  slot: "Root",
+  shouldForwardProp: (prop) => prop !== "container" && prop !== "item" && prop !== "columns" && prop !== "spacing" && prop !== "rowSpacing" && prop !== "columnSpacing" && prop !== "direction" && prop !== "wrap" && prop !== "alignItems" && prop !== "justifyContent" && prop !== "xs" && prop !== "sm" && prop !== "md" && prop !== "lg" && prop !== "xl" && prop !== "asChild" && prop !== "component"
+})(({ theme, ownerState }) => {
+  const styles = {};
+  const columns = ownerState.columns ?? 12;
+  if (ownerState.container) {
+    if (typeof ownerState.direction === "object") {
+      Object.assign(
+        styles,
+        parseSx(theme, { flexDirection: ownerState.direction })
+      );
+    }
+    if (ownerState.spacing !== void 0) {
+      Object.assign(styles, parseSx(theme, { gap: ownerState.spacing }));
+    }
+    if (ownerState.rowSpacing !== void 0) {
+      Object.assign(styles, parseSx(theme, { rowGap: ownerState.rowSpacing }));
+    }
+    if (ownerState.columnSpacing !== void 0) {
+      Object.assign(
+        styles,
+        parseSx(theme, { columnGap: ownerState.columnSpacing })
+      );
+    }
+    if (ownerState.alignItems !== void 0) {
+      Object.assign(
+        styles,
+        parseSx(theme, { alignItems: ownerState.alignItems })
+      );
+    }
+    if (ownerState.justifyContent !== void 0) {
+      Object.assign(
+        styles,
+        parseSx(theme, { justifyContent: ownerState.justifyContent })
+      );
+    }
+  }
+  const bpSizes = {
+    xs: ownerState.xs,
+    sm: ownerState.sm,
+    md: ownerState.md,
+    lg: ownerState.lg,
+    xl: ownerState.xl
+  };
+  for (const bp of breakpointKeys) {
+    const size = bpSizes[bp];
+    if (size !== void 0) {
+      const sizeStyles = generateGridSizeStyles(size, columns);
+      if (bp === "xs") {
+        Object.assign(styles, sizeStyles);
+      } else {
+        const media = theme.breakpoints.up(bp);
+        styles[media] = {
+          ...styles[media] || {},
+          ...sizeStyles
+        };
+      }
+    }
+  }
+  return styles;
+});
+var Grid = React.forwardRef(
+  function Grid2(props, ref) {
+    const {
+      asChild = false,
+      component,
+      as,
+      container = false,
+      item = false,
+      columns = 12,
+      spacing,
+      rowSpacing,
+      columnSpacing,
+      direction = "row",
+      wrap = "wrap",
+      alignItems,
+      justifyContent,
+      xs,
+      sm,
+      md,
+      lg,
+      xl,
+      className,
+      style,
+      sx,
+      children,
+      ...rest
+    } = props;
+    const ownerState = {
+      container,
+      item,
+      columns,
+      spacing,
+      rowSpacing,
+      columnSpacing,
+      direction,
+      wrap,
+      alignItems,
+      justifyContent,
+      xs,
+      sm,
+      md,
+      lg,
+      xl
+    };
+    const isSimpleDirection = typeof direction === "string";
+    const gridClassName = classNames(
+      "cl-grid",
+      container && "cl-grid--container",
+      item && "cl-grid--item",
+      wrap && `cl-grid--${wrap}`,
+      isSimpleDirection && `cl-grid--direction-${direction}`,
+      className
+    );
+    const targetTag = component || as;
+    if (asChild) {
+      return /* @__PURE__ */ jsx(
+        StyledGridRoot,
+        {
+          as: Slot,
+          ref,
+          className: gridClassName,
+          style,
+          ownerState,
+          sx,
+          ...rest,
+          children
+        }
+      );
+    }
+    if (targetTag) {
+      return /* @__PURE__ */ jsx(
+        StyledGridRoot,
+        {
+          as: targetTag,
+          ref,
+          className: gridClassName,
+          style,
+          ownerState,
+          sx,
+          ...rest,
+          children
+        }
+      );
+    }
+    return /* @__PURE__ */ jsx(
+      StyledGridRoot,
+      {
+        ref,
+        className: gridClassName,
+        style,
+        ownerState,
+        sx,
+        ...rest,
+        children
+      }
+    );
+  }
+);
+Grid.displayName = "Grid";
+var StyledDividerRoot = styled("hr", {
+  name: "ChellaaDivider",
+  slot: "Root",
+  shouldForwardProp: (prop) => prop !== "orientation" && prop !== "variant" && prop !== "lineStyle" && prop !== "flexItem" && prop !== "light" && prop !== "textAlign" && prop !== "hasChildren" && prop !== "asChild" && prop !== "component"
+})({});
+var Divider = React.forwardRef(
+  function Divider2(props, ref) {
+    const {
+      asChild = false,
+      component,
+      as,
+      orientation = "horizontal",
+      variant = "fullWidth",
+      lineStyle = "solid",
+      flexItem = false,
+      light = false,
+      textAlign = "center",
+      className,
+      style,
+      sx,
+      children,
+      role: roleProp,
+      ...rest
+    } = props;
+    const hasChildren = Boolean(children);
+    const dividerClassName = classNames(
+      "cl-divider",
+      `cl-divider--${orientation}`,
+      variant !== "fullWidth" && `cl-divider--${variant}`,
+      lineStyle !== "solid" && `cl-divider--${lineStyle}`,
+      flexItem && "cl-divider--flex-item",
+      light && "cl-divider--light",
+      hasChildren && "cl-divider--with-children",
+      hasChildren && `cl-divider--align-${textAlign}`,
+      className
+    );
+    let defaultTag = "hr";
+    if (orientation === "vertical" || hasChildren) {
+      defaultTag = "div";
+    }
+    const targetTag = component || as || defaultTag;
+    const isNativeHr = targetTag === "hr";
+    const role = roleProp || (isNativeHr ? void 0 : "separator");
+    const ariaOrientation = isNativeHr ? void 0 : orientation === "vertical" ? "vertical" : void 0;
+    if (asChild) {
+      return /* @__PURE__ */ jsx(
+        StyledDividerRoot,
+        {
+          as: Slot,
+          ref,
+          className: dividerClassName,
+          style,
+          sx,
+          role,
+          "aria-orientation": ariaOrientation,
+          ...rest,
+          children: hasChildren ? /* @__PURE__ */ jsx("span", { className: "cl-divider__wrapper ChellaaDivider-wrapper", children }) : children
+        }
+      );
+    }
+    return /* @__PURE__ */ jsx(
+      StyledDividerRoot,
+      {
+        as: targetTag,
+        ref,
+        className: dividerClassName,
+        style,
+        sx,
+        role,
+        "aria-orientation": ariaOrientation,
+        ...rest,
+        children: hasChildren ? /* @__PURE__ */ jsx("span", { className: "cl-divider__wrapper ChellaaDivider-wrapper", children }) : null
+      }
+    );
+  }
+);
+Divider.displayName = "Divider";
+var defaultVariantMapping = {
+  h1: "h1",
+  h2: "h2",
+  h3: "h3",
+  h4: "h4",
+  h5: "h5",
+  h6: "h6",
+  subtitle1: "h6",
+  subtitle2: "h6",
+  body1: "p",
+  body2: "p",
+  button: "span",
+  caption: "span",
+  overline: "span"
+};
+function resolveTypographyColor(theme, color) {
+  if (!color || color === "inherit" || color === "currentColor") {
+    return color;
+  }
+  const paletteAny = theme.palette;
+  if (paletteAny[color] && typeof paletteAny[color].main === "string") {
+    return paletteAny[color].main;
+  }
+  if (color.includes(".")) {
+    const parts = color.split(".");
+    let current = theme.palette;
+    for (const part of parts) {
+      if (current && typeof current === "object" && part in current) {
+        current = current[part];
+      } else {
+        current = void 0;
+        break;
+      }
+    }
+    if (typeof current === "string") {
+      return current;
+    }
+  }
+  return color;
+}
+var StyledTypographyRoot = styled("span", {
+  name: "ChellaaTypography",
+  slot: "Root",
+  shouldForwardProp: (prop) => prop !== "variant" && prop !== "align" && prop !== "color" && prop !== "gutterBottom" && prop !== "noWrap" && prop !== "lineClamp" && prop !== "asChild" && prop !== "component"
+})(({ theme, color }) => {
+  if (color) {
+    return {
+      color: resolveTypographyColor(theme, color)
+    };
+  }
+  return {};
+});
+var Typography = React.forwardRef(
+  function Typography2(props, ref) {
+    const {
+      asChild = false,
+      component,
+      as,
+      variant = "body1",
+      align = "inherit",
+      color,
+      gutterBottom = false,
+      noWrap = false,
+      lineClamp,
+      className,
+      style,
+      sx,
+      children,
+      ...rest
+    } = props;
+    const typographyClassName = classNames(
+      "cl-typography",
+      `cl-typography--${variant}`,
+      align && align !== "inherit" && `cl-typography--align-${align}`,
+      gutterBottom && "cl-typography--gutter-bottom",
+      noWrap && "cl-typography--no-wrap",
+      lineClamp !== void 0 && lineClamp > 0 && "cl-typography--line-clamp",
+      className
+    );
+    const inlineStyle = {
+      ...lineClamp !== void 0 && lineClamp > 0 ? { WebkitLineClamp: lineClamp } : {},
+      ...style
+    };
+    const targetTag = component || as || defaultVariantMapping[variant] || "span";
+    if (asChild) {
+      return /* @__PURE__ */ jsx(
+        StyledTypographyRoot,
+        {
+          as: Slot,
+          ref,
+          className: typographyClassName,
+          style: inlineStyle,
+          color,
+          sx,
+          ...rest,
+          children
+        }
+      );
+    }
+    return /* @__PURE__ */ jsx(
+      StyledTypographyRoot,
+      {
+        as: targetTag,
+        ref,
+        className: typographyClassName,
+        style: inlineStyle,
+        color,
+        sx,
+        ...rest,
+        children
+      }
+    );
+  }
+);
+Typography.displayName = "Typography";
+var Heading = React.forwardRef(
+  function Heading2(props, ref) {
+    const { level = 2, variant, component, ...rest } = props;
+    const levelTag = `h${level}`;
+    const resolvedVariant = variant || levelTag;
+    const resolvedComponent = component || levelTag;
+    return /* @__PURE__ */ jsx(
+      Typography,
+      {
+        ref,
+        component: resolvedComponent,
+        variant: resolvedVariant,
+        ...rest
+      }
+    );
+  }
+);
+Heading.displayName = "Heading";
+var sizeToVariant = {
+  xs: "caption",
+  sm: "body2",
+  md: "body1",
+  lg: "subtitle1",
+  xl: "h6"
+};
+var Text = React.forwardRef(
+  function Text2(props, ref) {
+    const { size, variant, block = false, component, ...rest } = props;
+    const resolvedVariant = variant || (size ? sizeToVariant[size] : "body1");
+    const defaultTag = block ? "p" : "span";
+    const resolvedComponent = component || defaultTag;
+    return /* @__PURE__ */ jsx(
+      Typography,
+      {
+        ref,
+        component: resolvedComponent,
+        variant: resolvedVariant,
+        ...rest
+      }
+    );
+  }
+);
+Text.displayName = "Text";
+var Paragraph = React.forwardRef(
+  function Paragraph2(props, ref) {
+    const { component = "p", variant = "body1", gutterBottom = true, ...rest } = props;
+    return /* @__PURE__ */ jsx(
+      Typography,
+      {
+        ref,
+        component,
+        variant,
+        gutterBottom,
+        ...rest
+      }
+    );
+  }
+);
+Paragraph.displayName = "Paragraph";
+var StyledCodeRoot = styled("code", {
+  name: "ChellaaCode",
+  slot: "Root",
+  shouldForwardProp: (prop) => prop !== "colorScheme" && prop !== "asChild" && prop !== "component"
+})({});
+var Code = React.forwardRef(
+  function Code2(props, ref) {
+    const {
+      asChild = false,
+      component = "code",
+      as,
+      colorScheme = "default",
+      className,
+      style,
+      sx,
+      children,
+      ...rest
+    } = props;
+    const codeClassName = classNames(
+      "cl-code",
+      colorScheme !== "default" && `cl-code--${colorScheme}`,
+      className
+    );
+    const targetTag = component || as || "code";
+    if (asChild) {
+      return /* @__PURE__ */ jsx(
+        StyledCodeRoot,
+        {
+          as: Slot,
+          ref,
+          className: codeClassName,
+          style,
+          sx,
+          ...rest,
+          children
+        }
+      );
+    }
+    return /* @__PURE__ */ jsx(
+      StyledCodeRoot,
+      {
+        as: targetTag,
+        ref,
+        className: codeClassName,
+        style,
+        sx,
+        ...rest,
+        children
+      }
+    );
+  }
+);
+Code.displayName = "Code";
+var MODIFIER_SYMBOLS = {
+  command: "\u2318",
+  cmd: "\u2318",
+  shift: "\u21E7",
+  option: "\u2325",
+  alt: "\u2325",
+  control: "\u2303",
+  ctrl: "\u2303",
+  enter: "\u21B5",
+  escape: "Esc",
+  esc: "Esc",
+  tab: "\u21E5",
+  backspace: "\u232B",
+  delete: "\u2326",
+  del: "\u2326",
+  up: "\u2191",
+  down: "\u2193",
+  left: "\u2190",
+  right: "\u2192"
+};
+var StyledKbdRoot = styled("kbd", {
+  name: "ChellaaKbd",
+  slot: "Root",
+  shouldForwardProp: (prop) => prop !== "size" && prop !== "variant" && prop !== "modifier" && prop !== "asChild" && prop !== "component"
+})({});
+var Kbd = React.forwardRef(
+  function Kbd2(props, ref) {
+    const {
+      asChild = false,
+      component = "kbd",
+      as,
+      size = "md",
+      variant = "outline",
+      modifier,
+      className,
+      style,
+      sx,
+      children,
+      ...rest
+    } = props;
+    const kbdClassName = classNames(
+      "cl-kbd",
+      `cl-kbd--${size}`,
+      `cl-kbd--${variant}`,
+      className
+    );
+    const targetTag = component || as || "kbd";
+    const content = children ?? (modifier ? MODIFIER_SYMBOLS[modifier] ?? modifier : null);
+    if (asChild) {
+      return /* @__PURE__ */ jsx(
+        StyledKbdRoot,
+        {
+          as: Slot,
+          ref,
+          className: kbdClassName,
+          style,
+          sx,
+          ...rest,
+          children: content
+        }
+      );
+    }
+    return /* @__PURE__ */ jsx(
+      StyledKbdRoot,
+      {
+        as: targetTag,
+        ref,
+        className: kbdClassName,
+        style,
+        sx,
+        ...rest,
+        children: content
+      }
+    );
+  }
+);
+Kbd.displayName = "Kbd";
+var FormFieldContext = React.createContext(void 0);
+function useFormField() {
+  return React.useContext(FormFieldContext);
+}
+var InputBase = React.forwardRef(function InputBase2({ className, ownerState: _ownerState, ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    "input",
+    {
+      ref,
+      className: classNames("cl-input__input", className),
+      ...props
+    }
+  );
+});
+InputBase.displayName = "InputBase";
+var StyledInputRoot = styled("div", {
+  name: "ChellaaInput",
+  slot: "Root",
+  shouldForwardProp: (prop) => prop !== "variant" && prop !== "size" && prop !== "fullWidth" && prop !== "error" && prop !== "disabled" && prop !== "readOnly" && prop !== "hasStartAdornment" && prop !== "hasEndAdornment" && prop !== "focused" && prop !== "asChild" && prop !== "component" && prop !== "ownerState"
+})({});
+var Input = React.forwardRef(
+  function Input2(props, ref) {
+    const formField = useFormField();
+    const {
+      asChild = false,
+      component,
+      as,
+      variant = "outlined",
+      size = "md",
+      fullWidth = false,
+      error: errorProp,
+      disabled: disabledProp,
+      readOnly: readOnlyProp,
+      required: requiredProp,
+      startAdornment,
+      endAdornment,
+      clearable = false,
+      onClear,
+      inputRef: inputRefProp,
+      value: valueProp,
+      defaultValue,
+      onChange,
+      type = "text",
+      id: idProp,
+      className,
+      style,
+      sx,
+      inputProps,
+      "aria-describedby": ariaDescribedByProp,
+      ...restInputProps
+    } = props;
+    const id = idProp ?? formField?.id;
+    const error = errorProp ?? formField?.error ?? false;
+    const disabled = disabledProp ?? formField?.disabled ?? false;
+    const readOnly = readOnlyProp ?? formField?.readOnly ?? false;
+    const required = requiredProp ?? formField?.required ?? false;
+    const ariaDescribedBy = [
+      ariaDescribedByProp,
+      formField?.error && formField?.hasErrorMessage ? formField.errorMessageId : null,
+      formField?.hasHelperText ? formField.helperTextId : null
+    ].filter(Boolean).join(" ") || void 0;
+    const [internalValue, setInternalValue] = React.useState(() => {
+      if (valueProp !== void 0) return String(valueProp);
+      if (defaultValue !== void 0) return String(defaultValue);
+      return "";
+    });
+    const isControlled = valueProp !== void 0;
+    const currentValue = isControlled ? String(valueProp ?? "") : internalValue;
+    const innerInputRef = React.useRef(null);
+    const handleInputRef = React.useCallback(
+      (node) => {
+        innerInputRef.current = node;
+        if (typeof inputRefProp === "function") {
+          inputRefProp(node);
+        } else if (inputRefProp && "current" in inputRefProp) {
+          inputRefProp.current = node;
+        }
+      },
+      [inputRefProp]
+    );
+    const handleChange = (event) => {
+      if (!isControlled) {
+        setInternalValue(event.target.value);
+      }
+      onChange?.(event);
+    };
+    const handleClear = (e) => {
+      e.stopPropagation();
+      if (!isControlled) {
+        setInternalValue("");
+      }
+      if (innerInputRef.current) {
+        innerInputRef.current.value = "";
+        const event = new Event("input", { bubbles: true });
+        innerInputRef.current.dispatchEvent(event);
+        innerInputRef.current.focus();
+      }
+      onClear?.();
+    };
+    const handleWrapperClick = () => {
+      if (innerInputRef.current && document.activeElement !== innerInputRef.current) {
+        innerInputRef.current.focus();
+      }
+    };
+    const showClear = clearable && !disabled && !readOnly && currentValue.length > 0;
+    const clearButton = showClear ? /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        className: "cl-input__clear",
+        "aria-label": "Clear input",
+        onClick: handleClear,
+        children: /* @__PURE__ */ jsxs(
+          "svg",
+          {
+            width: "14",
+            height: "14",
+            viewBox: "0 0 24 24",
+            fill: "none",
+            stroke: "currentColor",
+            strokeWidth: "2.5",
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            children: [
+              /* @__PURE__ */ jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+              /* @__PURE__ */ jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+            ]
+          }
+        )
+      }
+    ) : null;
+    const inputWrapperClassName = classNames(
+      "cl-input",
+      `cl-input--${variant}`,
+      `cl-input--${size}`,
+      fullWidth && "cl-input--full-width",
+      error && "cl-input--error",
+      disabled && "cl-input--disabled",
+      className
+    );
+    const targetTag = component || as;
+    if (asChild) {
+      return /* @__PURE__ */ jsxs(
+        StyledInputRoot,
+        {
+          as: Slot,
+          ref,
+          className: inputWrapperClassName,
+          style,
+          sx,
+          onClick: handleWrapperClick,
+          children: [
+            startAdornment,
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                ref: handleInputRef,
+                id,
+                type,
+                disabled,
+                readOnly,
+                required,
+                "aria-describedby": ariaDescribedBy,
+                value: valueProp,
+                defaultValue,
+                onChange: handleChange,
+                "aria-invalid": error ? true : void 0,
+                className: "cl-input__input",
+                ...inputProps,
+                ...restInputProps
+              }
+            ),
+            clearButton,
+            endAdornment
+          ]
+        }
+      );
+    }
+    return /* @__PURE__ */ jsxs(
+      StyledInputRoot,
+      {
+        as: targetTag,
+        ref,
+        className: inputWrapperClassName,
+        style,
+        sx,
+        onClick: handleWrapperClick,
+        children: [
+          startAdornment,
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              ref: handleInputRef,
+              id,
+              type,
+              disabled,
+              readOnly,
+              required,
+              "aria-describedby": ariaDescribedBy,
+              value: valueProp,
+              defaultValue,
+              onChange: handleChange,
+              "aria-invalid": error ? true : void 0,
+              className: "cl-input__input",
+              ...inputProps,
+              ...restInputProps
+            }
+          ),
+          clearButton,
+          endAdornment
+        ]
+      }
+    );
+  }
+);
+Input.displayName = "Input";
+var StyledTextFieldRoot = styled("div", {
+  name: "ChellaaTextField",
+  slot: "Root",
+  shouldForwardProp: (prop) => prop !== "fullWidth"
+})(({ fullWidth }) => ({
+  display: "inline-flex",
+  flexDirection: "column",
+  position: "relative",
+  width: fullWidth ? "100%" : "auto",
+  verticalAlign: "top"
+}));
+var StyledLabel = styled("label")(
+  ({ theme, error }) => ({
+    display: "block",
+    fontSize: "0.875rem",
+    fontWeight: 500,
+    lineHeight: 1.4,
+    marginBottom: theme.spacing(0.75),
+    color: error ? theme.palette.error.main : theme.palette.text.primary,
+    userSelect: "none",
+    "& .ChellaaTextField-requiredAsterisk": {
+      color: theme.palette.error.main,
+      marginLeft: 4
+    }
+  })
+);
+var StyledHelperText = styled("p")(
+  ({ theme, error }) => ({
+    fontSize: "0.75rem",
+    lineHeight: 1.4,
+    margin: 0,
+    marginTop: theme.spacing(0.5),
+    color: error ? theme.palette.error.main : theme.palette.text.secondary
+  })
+);
+var TextField = React.forwardRef(
+  function TextField2(props, ref) {
+    const {
+      id: idProp,
+      label,
+      helperText,
+      errorMessage,
+      error = false,
+      required = false,
+      fullWidth = false,
+      className,
+      style,
+      sx,
+      ...inputProps
+    } = props;
+    const generatedId = React.useId();
+    const inputId = idProp || generatedId;
+    const helperId = `${inputId}-helper`;
+    const activeHelperContent = error && errorMessage ? errorMessage : helperText;
+    return /* @__PURE__ */ jsxs(
+      StyledTextFieldRoot,
+      {
+        ref,
+        fullWidth,
+        className,
+        style,
+        sx,
+        children: [
+          label && /* @__PURE__ */ jsxs(StyledLabel, { htmlFor: inputId, error, required, children: [
+            label,
+            required && /* @__PURE__ */ jsx("span", { className: "ChellaaTextField-requiredAsterisk", children: "*" })
+          ] }),
+          /* @__PURE__ */ jsx(
+            Input,
+            {
+              id: inputId,
+              error,
+              required,
+              fullWidth,
+              "aria-describedby": activeHelperContent ? helperId : void 0,
+              ...inputProps
+            }
+          ),
+          activeHelperContent && /* @__PURE__ */ jsx(StyledHelperText, { id: helperId, error, children: activeHelperContent })
+        ]
+      }
+    );
+  }
+);
+TextField.displayName = "TextField";
+var StyledAdornmentRoot = styled("div", {
+  name: "ChellaaInputAdornment",
+  slot: "Root",
+  shouldForwardProp: (prop) => prop !== "position" && prop !== "disablePointerEvents"
+})(
+  ({ theme, position, disablePointerEvents }) => ({
+    display: "flex",
+    height: "100%",
+    maxHeight: "2em",
+    alignItems: "center",
+    justifyContent: "center",
+    whiteSpace: "nowrap",
+    color: theme.palette.text.secondary,
+    marginLeft: position === "end" ? theme.spacing(1) : 0,
+    marginRight: position === "start" ? theme.spacing(1) : 0,
+    pointerEvents: disablePointerEvents ? "none" : "auto",
+    userSelect: "none"
+  })
+);
+var InputAdornment = React.forwardRef(function InputAdornment2(props, ref) {
+  const { position, disablePointerEvents = false, children, ...rest } = props;
+  return /* @__PURE__ */ jsx(
+    StyledAdornmentRoot,
+    {
+      ref,
+      position,
+      disablePointerEvents,
+      ...rest,
+      children
+    }
+  );
+});
+InputAdornment.displayName = "InputAdornment";
+var StyledTextareaContainer = styled("div", {
+  name: "ChellaaTextarea",
+  slot: "Root",
+  shouldForwardProp: (prop) => prop !== "variant" && prop !== "size" && prop !== "fullWidth" && prop !== "error" && prop !== "disabled" && prop !== "readOnly" && prop !== "autoResize" && prop !== "resize" && prop !== "hasCount" && prop !== "asChild" && prop !== "component" && prop !== "ownerState"
+})({});
+var Textarea = React.forwardRef(
+  function Textarea2(props, ref) {
+    const formField = useFormField();
+    const {
+      asChild = false,
+      component,
+      as,
+      variant = "outlined",
+      size = "md",
+      fullWidth = false,
+      error: errorProp,
+      disabled: disabledProp,
+      readOnly: readOnlyProp,
+      required: requiredProp,
+      minRows = 3,
+      maxRows,
+      autoResize = false,
+      resize = "vertical",
+      showCount = false,
+      maxLength,
+      textareaRef: textareaRefProp,
+      textareaProps = {},
+      value: valueProp,
+      defaultValue,
+      onChange,
+      id: idProp,
+      className,
+      style,
+      sx,
+      placeholder,
+      name,
+      rows,
+      cols,
+      autoFocus,
+      onFocus,
+      onBlur,
+      onKeyDown,
+      onKeyUp,
+      "aria-describedby": ariaDescribedByProp,
+      ...restContainerProps
+    } = props;
+    const id = idProp ?? formField?.id;
+    const error = errorProp ?? formField?.error ?? false;
+    const disabled = disabledProp ?? formField?.disabled ?? false;
+    const readOnly = readOnlyProp ?? formField?.readOnly ?? false;
+    const required = requiredProp ?? formField?.required ?? false;
+    const ariaDescribedBy = [
+      ariaDescribedByProp,
+      formField?.error && formField?.hasErrorMessage ? formField.errorMessageId : null,
+      formField?.hasHelperText ? formField.helperTextId : null
+    ].filter(Boolean).join(" ") || void 0;
+    const [internalValue, setInternalValue] = React.useState(() => {
+      if (valueProp !== void 0) return String(valueProp);
+      if (defaultValue !== void 0) return String(defaultValue);
+      return "";
+    });
+    const isControlled = valueProp !== void 0;
+    const currentValue = isControlled ? String(valueProp ?? "") : internalValue;
+    const innerTextareaRef = React.useRef(null);
+    const handleTextareaRef = React.useCallback(
+      (node) => {
+        innerTextareaRef.current = node;
+        if (typeof textareaRefProp === "function") {
+          textareaRefProp(node);
+        } else if (textareaRefProp && "current" in textareaRefProp) {
+          textareaRefProp.current = node;
+        }
+      },
+      [textareaRefProp]
+    );
+    React.useLayoutEffect(() => {
+      if (!autoResize || !innerTextareaRef.current) return;
+      const textarea = innerTextareaRef.current;
+      textarea.style.height = "auto";
+      const lineHeight = parseFloat(getComputedStyle(textarea).lineHeight) || 20;
+      const minHeight = minRows * lineHeight;
+      const maxHeight = maxRows ? maxRows * lineHeight : Infinity;
+      const calculatedHeight = Math.min(
+        Math.max(textarea.scrollHeight, minHeight),
+        maxHeight
+      );
+      textarea.style.height = `${calculatedHeight}px`;
+      textarea.style.overflowY = maxRows && textarea.scrollHeight > maxHeight ? "auto" : "hidden";
+    }, [currentValue, autoResize, minRows, maxRows]);
+    const handleChange = (event) => {
+      if (!isControlled) {
+        setInternalValue(event.target.value);
+      }
+      onChange?.(event);
+    };
+    const handleWrapperClick = () => {
+      if (innerTextareaRef.current && document.activeElement !== innerTextareaRef.current) {
+        innerTextareaRef.current.focus();
+      }
+    };
+    const containerClassName = classNames(
+      "cl-textarea",
+      `cl-textarea--${variant}`,
+      `cl-textarea--${size}`,
+      fullWidth && "cl-textarea--full-width",
+      error && "cl-textarea--error",
+      disabled && "cl-textarea--disabled",
+      className
+    );
+    const targetTag = component || as;
+    const textareaStyle = {
+      resize: autoResize ? "none" : resize
+    };
+    const countDisplay = showCount ? /* @__PURE__ */ jsxs("div", { className: "cl-textarea__counter", "aria-live": "polite", children: [
+      currentValue.length,
+      maxLength ? ` / ${maxLength}` : ""
+    ] }) : null;
+    if (asChild) {
+      return /* @__PURE__ */ jsxs(
+        StyledTextareaContainer,
+        {
+          as: Slot,
+          ref,
+          className: containerClassName,
+          style,
+          sx,
+          onClick: handleWrapperClick,
+          ...restContainerProps,
+          children: [
+            /* @__PURE__ */ jsx(
+              "textarea",
+              {
+                ref: handleTextareaRef,
+                id,
+                name,
+                placeholder,
+                disabled,
+                readOnly,
+                required,
+                "aria-describedby": ariaDescribedBy,
+                "aria-invalid": error ? true : void 0,
+                value: valueProp,
+                defaultValue,
+                onChange: handleChange,
+                maxLength,
+                rows: rows ?? minRows,
+                cols,
+                autoFocus,
+                onFocus,
+                onBlur,
+                onKeyDown,
+                onKeyUp,
+                style: textareaStyle,
+                className: "cl-textarea__input",
+                ...textareaProps
+              }
+            ),
+            countDisplay
+          ]
+        }
+      );
+    }
+    return /* @__PURE__ */ jsxs(
+      StyledTextareaContainer,
+      {
+        as: targetTag,
+        ref,
+        className: containerClassName,
+        style,
+        sx,
+        onClick: handleWrapperClick,
+        ...restContainerProps,
+        children: [
+          /* @__PURE__ */ jsx(
+            "textarea",
+            {
+              ref: handleTextareaRef,
+              id,
+              name,
+              placeholder,
+              disabled,
+              readOnly,
+              required,
+              "aria-describedby": ariaDescribedBy,
+              "aria-invalid": error ? true : void 0,
+              value: valueProp,
+              defaultValue,
+              onChange: handleChange,
+              maxLength,
+              rows: rows ?? minRows,
+              cols,
+              autoFocus,
+              onFocus,
+              onBlur,
+              onKeyDown,
+              onKeyUp,
+              style: textareaStyle,
+              className: "cl-textarea__input",
+              ...textareaProps
+            }
+          ),
+          countDisplay
+        ]
+      }
+    );
+  }
+);
+Textarea.displayName = "Textarea";
+var StyledFormFieldRoot = styled("div", {
+  name: "ChellaaFormField",
+  slot: "Root",
+  shouldForwardProp: (prop) => prop !== "fullWidth" && prop !== "asChild" && prop !== "component" && prop !== "error" && prop !== "disabled" && prop !== "readOnly"
+})({});
+var FormField = React.forwardRef(
+  function FormField2(props, ref) {
+    const {
+      id: idProp,
+      name,
+      required = false,
+      disabled = false,
+      readOnly = false,
+      error = false,
+      fullWidth = false,
+      asChild = false,
+      component,
+      as,
+      children,
+      className,
+      style,
+      sx,
+      ...rest
+    } = props;
+    const generatedId = React.useId();
+    const id = idProp || generatedId;
+    const labelId = `${id}-label`;
+    const helperTextId = `${id}-helper`;
+    const errorMessageId = `${id}-error`;
+    const [hasHelperText, setHasHelperText] = React.useState(false);
+    const [hasErrorMessage, setHasErrorMessage] = React.useState(false);
+    const contextValue = React.useMemo(
+      () => ({
+        id,
+        name,
+        required,
+        disabled,
+        readOnly,
+        error,
+        labelId,
+        helperTextId,
+        errorMessageId,
+        hasHelperText,
+        hasErrorMessage,
+        setHasHelperText,
+        setHasErrorMessage
+      }),
+      [
+        id,
+        name,
+        required,
+        disabled,
+        readOnly,
+        error,
+        labelId,
+        helperTextId,
+        errorMessageId,
+        hasHelperText,
+        hasErrorMessage
+      ]
+    );
+    const fieldClassName = classNames(
+      "cl-form-field",
+      fullWidth && "cl-form-field--full-width",
+      error && "cl-form-field--error",
+      disabled && "cl-form-field--disabled",
+      className
+    );
+    const targetTag = component || as;
+    if (asChild) {
+      return /* @__PURE__ */ jsx(FormFieldContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
+        StyledFormFieldRoot,
+        {
+          as: Slot,
+          ref,
+          className: fieldClassName,
+          style,
+          sx,
+          ...rest,
+          children
+        }
+      ) });
+    }
+    return /* @__PURE__ */ jsx(FormFieldContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
+      StyledFormFieldRoot,
+      {
+        as: targetTag,
+        ref,
+        className: fieldClassName,
+        style,
+        sx,
+        ...rest,
+        children
+      }
+    ) });
+  }
+);
+FormField.displayName = "FormField";
+var StyledLabelRoot = styled("label", {
+  name: "ChellaaFormLabel",
+  slot: "Root",
+  shouldForwardProp: (prop) => prop !== "required" && prop !== "error" && prop !== "disabled" && prop !== "asChild" && prop !== "component"
+})({});
+var FormLabel = React.forwardRef(
+  function FormLabel2(props, ref) {
+    const {
+      htmlFor: htmlForProp,
+      id: idProp,
+      required: requiredProp,
+      error: errorProp,
+      disabled: disabledProp,
+      asChild = false,
+      component,
+      as,
+      children,
+      className,
+      style,
+      sx,
+      ...rest
+    } = props;
+    const formField = useFormField();
+    const htmlFor = htmlForProp ?? formField?.id;
+    const id = idProp ?? formField?.labelId;
+    const required = requiredProp ?? formField?.required ?? false;
+    const error = errorProp ?? formField?.error ?? false;
+    const disabled = disabledProp ?? formField?.disabled ?? false;
+    const labelClassName = classNames(
+      "cl-form-label",
+      error && "cl-form-label--error",
+      disabled && "cl-form-label--disabled",
+      className
+    );
+    const targetTag = component || as;
+    if (asChild) {
+      return /* @__PURE__ */ jsx(
+        StyledLabelRoot,
+        {
+          as: Slot,
+          ref,
+          htmlFor,
+          id,
+          className: labelClassName,
+          style,
+          sx,
+          ...rest,
+          children
+        }
+      );
+    }
+    return /* @__PURE__ */ jsxs(
+      StyledLabelRoot,
+      {
+        as: targetTag,
+        ref,
+        htmlFor,
+        id,
+        className: labelClassName,
+        style,
+        sx,
+        ...rest,
+        children: [
+          children,
+          required && /* @__PURE__ */ jsx("span", { className: "cl-form-label__asterisk", "aria-hidden": "true", children: "*" })
+        ]
+      }
+    );
+  }
+);
+FormLabel.displayName = "FormLabel";
+var StyledHelperTextRoot = styled("p", {
+  name: "ChellaaFormHelperText",
+  slot: "Root",
+  shouldForwardProp: (prop) => prop !== "disabled" && prop !== "asChild" && prop !== "component"
+})({});
+var FormHelperText = React.forwardRef(function FormHelperText2(props, ref) {
+  const {
+    id: idProp,
+    disabled: disabledProp,
+    asChild = false,
+    component = "p",
+    as,
+    children,
+    className,
+    style,
+    sx,
+    ...rest
+  } = props;
+  const formField = useFormField();
+  const setHasHelperText = formField?.setHasHelperText;
+  React.useEffect(() => {
+    setHasHelperText?.(true);
+    return () => setHasHelperText?.(false);
+  }, [setHasHelperText]);
+  const id = idProp ?? formField?.helperTextId;
+  const disabled = disabledProp ?? formField?.disabled ?? false;
+  const targetTag = component || as;
+  const helperClassName = classNames(
+    "cl-form-helper-text",
+    disabled && "cl-form-helper-text--disabled",
+    className
+  );
+  if (asChild) {
+    return /* @__PURE__ */ jsx(
+      StyledHelperTextRoot,
+      {
+        as: Slot,
+        ref,
+        id,
+        className: helperClassName,
+        style,
+        sx,
+        ...rest,
+        children
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    StyledHelperTextRoot,
+    {
+      as: targetTag,
+      ref,
+      id,
+      className: helperClassName,
+      style,
+      sx,
+      ...rest,
+      children
+    }
+  );
+});
+FormHelperText.displayName = "FormHelperText";
+var StyledErrorMessageRoot = styled("p", {
+  name: "ChellaaFormErrorMessage",
+  slot: "Root",
+  shouldForwardProp: (prop) => prop !== "forceMount" && prop !== "asChild" && prop !== "component"
+})({});
+var FormErrorMessage = React.forwardRef(function FormErrorMessage2(props, ref) {
+  const {
+    id: idProp,
+    forceMount = false,
+    asChild = false,
+    component = "p",
+    as,
+    children,
+    className,
+    style,
+    sx,
+    ...rest
+  } = props;
+  const formField = useFormField();
+  const isError = formField?.error ?? false;
+  const setHasErrorMessage = formField?.setHasErrorMessage;
+  React.useEffect(() => {
+    if (isError || forceMount) {
+      setHasErrorMessage?.(true);
+      return () => setHasErrorMessage?.(false);
+    }
+  }, [setHasErrorMessage, isError, forceMount]);
+  if (!isError && !forceMount) {
+    return null;
+  }
+  const id = idProp ?? formField?.errorMessageId;
+  const targetTag = component || as;
+  const errorClassName = classNames("cl-form-error-message", className);
+  if (asChild) {
+    return /* @__PURE__ */ jsx(
+      StyledErrorMessageRoot,
+      {
+        as: Slot,
+        ref,
+        id,
+        role: "alert",
+        "aria-live": "polite",
+        className: errorClassName,
+        style,
+        sx,
+        ...rest,
+        children
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    StyledErrorMessageRoot,
+    {
+      as: targetTag,
+      ref,
+      id,
+      role: "alert",
+      "aria-live": "polite",
+      className: errorClassName,
+      style,
+      sx,
+      ...rest,
+      children
+    }
+  );
+});
+FormErrorMessage.displayName = "FormErrorMessage";
+var CheckboxContext = React.createContext(void 0);
+function useCheckboxGroup() {
+  return React.useContext(CheckboxContext);
+}
+var StyledCheckboxRoot = styled("label", {
+  name: "ChellaaCheckbox",
+  slot: "Root",
+  shouldForwardProp: (prop) => prop !== "size" && prop !== "colorScheme" && prop !== "disabled" && prop !== "readOnly" && prop !== "error" && prop !== "checked" && prop !== "indeterminate" && prop !== "asChild" && prop !== "component"
+})({});
+var Checkbox = React.forwardRef(
+  function Checkbox2(props, ref) {
+    const group = useCheckboxGroup();
+    const formField = useFormField();
+    const {
+      checked: checkedProp,
+      defaultChecked = false,
+      indeterminate = false,
+      onChange: onChangeProp,
+      value: valueProp,
+      name: nameProp,
+      size: sizeProp,
+      colorScheme: colorSchemeProp,
+      disabled: disabledProp,
+      readOnly: readOnlyProp,
+      required: requiredProp,
+      error: errorProp,
+      inputRef: inputRefProp,
+      inputProps = {},
+      asChild = false,
+      component,
+      as,
+      children,
+      className,
+      style,
+      sx,
+      id: idProp,
+      ...rest
+    } = props;
+    const isGroupControlled = group !== void 0 && valueProp !== void 0;
+    const isCheckedInGroup = isGroupControlled ? group.value.includes(valueProp) : void 0;
+    const checked = checkedProp !== void 0 ? checkedProp : isCheckedInGroup;
+    const size = sizeProp ?? group?.size ?? "md";
+    const colorScheme = colorSchemeProp ?? group?.colorScheme ?? "primary";
+    const disabled = disabledProp ?? group?.disabled ?? formField?.disabled ?? false;
+    const readOnly = readOnlyProp ?? group?.readOnly ?? formField?.readOnly ?? false;
+    const error = errorProp ?? group?.error ?? formField?.error ?? false;
+    const required = requiredProp ?? formField?.required ?? false;
+    const name = nameProp ?? group?.name ?? formField?.name;
+    const id = idProp ?? (formField ? `${formField.id}-checkbox` : void 0);
+    const [uncontrolledChecked, setUncontrolledChecked] = React.useState(
+      defaultChecked
+    );
+    const isControlled = checked !== void 0;
+    const effectiveChecked = isControlled ? checked : uncontrolledChecked;
+    const nativeInputRef = React.useRef(null);
+    const mergedInputRef = useMergeRefs(nativeInputRef, inputRefProp);
+    React.useEffect(() => {
+      if (nativeInputRef.current) {
+        nativeInputRef.current.indeterminate = Boolean(indeterminate);
+      }
+    }, [indeterminate]);
+    const handleChange = (event) => {
+      if (disabled || readOnly) {
+        event.preventDefault();
+        return;
+      }
+      if (isGroupControlled) {
+        group.toggleValue(valueProp);
+      } else if (!isControlled) {
+        setUncontrolledChecked(event.target.checked);
+      }
+      onChangeProp?.(event);
+    };
+    const checkboxClassName = classNames(
+      "cl-checkbox",
+      `cl-checkbox--${size}`,
+      `cl-checkbox--${colorScheme}`,
+      effectiveChecked && "cl-checkbox--checked",
+      indeterminate && "cl-checkbox--indeterminate",
+      disabled && "cl-checkbox--disabled",
+      error && "cl-checkbox--error",
+      className
+    );
+    const targetTag = component || as;
+    const controlBox = /* @__PURE__ */ jsx("span", { className: "cl-checkbox__control ChellaaCheckbox-Control", "aria-hidden": "true", children: indeterminate ? /* @__PURE__ */ jsx(
+      "svg",
+      {
+        className: "cl-checkbox__icon ChellaaCheckbox-Icon ChellaaCheckbox-Icon--indeterminate",
+        viewBox: "0 0 24 24",
+        fill: "none",
+        stroke: "currentColor",
+        strokeWidth: "3.5",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        "aria-hidden": "true",
+        width: size === "lg" ? 18 : size === "sm" ? 12 : 14,
+        height: size === "lg" ? 18 : size === "sm" ? 12 : 14,
+        children: /* @__PURE__ */ jsx("line", { x1: "5", y1: "12", x2: "19", y2: "12" })
+      }
+    ) : effectiveChecked ? /* @__PURE__ */ jsx(
+      "svg",
+      {
+        className: "cl-checkbox__icon ChellaaCheckbox-Icon ChellaaCheckbox-Icon--checked",
+        viewBox: "0 0 24 24",
+        fill: "none",
+        stroke: "currentColor",
+        strokeWidth: "3.5",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        "aria-hidden": "true",
+        width: size === "lg" ? 18 : size === "sm" ? 12 : 14,
+        height: size === "lg" ? 18 : size === "sm" ? 12 : 14,
+        children: /* @__PURE__ */ jsx("polyline", { points: "20 6 9 17 4 12" })
+      }
+    ) : null });
+    const ariaDescribedBy = [
+      inputProps["aria-describedby"],
+      formField?.error && formField?.hasErrorMessage ? formField.errorMessageId : null,
+      formField?.hasHelperText ? formField.helperTextId : null
+    ].filter(Boolean).join(" ") || void 0;
+    if (asChild) {
+      return /* @__PURE__ */ jsx(
+        StyledCheckboxRoot,
+        {
+          as: Slot,
+          ref,
+          className: checkboxClassName,
+          style,
+          sx,
+          ...rest,
+          children
+        }
+      );
+    }
+    return /* @__PURE__ */ jsxs(
+      StyledCheckboxRoot,
+      {
+        as: targetTag,
+        ref,
+        className: checkboxClassName,
+        style,
+        sx,
+        ...rest,
+        children: [
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              type: "checkbox",
+              id,
+              name,
+              value: valueProp,
+              disabled,
+              readOnly,
+              required,
+              checked: isControlled ? effectiveChecked : void 0,
+              defaultChecked: !isControlled ? defaultChecked : void 0,
+              onChange: handleChange,
+              ref: mergedInputRef,
+              "aria-checked": indeterminate ? "mixed" : effectiveChecked,
+              "aria-invalid": error ? true : void 0,
+              "aria-describedby": ariaDescribedBy,
+              className: "cl-checkbox__input",
+              ...inputProps
+            }
+          ),
+          controlBox,
+          children && /* @__PURE__ */ jsx("span", { className: "cl-checkbox__label ChellaaCheckbox-Label", children })
+        ]
+      }
+    );
+  }
+);
+Checkbox.displayName = "Checkbox";
+function useControllableState({
+  value: valueProp,
+  defaultValue,
+  onChange
+}) {
+  const isControlled = valueProp !== void 0;
+  const [uncontrolledValue, setUncontrolledValue] = React.useState(() => {
+    if (defaultValue !== void 0) {
+      return typeof defaultValue === "function" ? defaultValue() : defaultValue;
+    }
+    return void 0;
+  });
+  const value = isControlled ? valueProp : uncontrolledValue;
+  const onChangeRef = React.useRef(onChange);
+  React.useEffect(() => {
+    onChangeRef.current = onChange;
+  });
+  const setValue = React.useCallback(
+    (next) => {
+      const resolvedNext = typeof next === "function" ? next(value) : next;
+      if (!Object.is(value, resolvedNext)) {
+        if (!isControlled) {
+          setUncontrolledValue(resolvedNext);
+        }
+        onChangeRef.current?.(resolvedNext);
+      }
+    },
+    [isControlled, value]
+  );
+  return [value, setValue];
+}
+var StyledCheckboxGroupRoot = styled("div", {
+  name: "ChellaaCheckboxGroup",
+  slot: "Root",
+  shouldForwardProp: (prop) => prop !== "orientation" && prop !== "spacing" && prop !== "colorScheme" && prop !== "error" && prop !== "disabled" && prop !== "readOnly" && prop !== "asChild" && prop !== "component"
+})(({ theme, spacing = 2 }) => {
+  const gapValue = typeof spacing === "number" ? theme.spacing(spacing) : spacing;
+  return {
+    gap: gapValue
+  };
+});
+var CheckboxGroup = React.forwardRef(function CheckboxGroup2(props, ref) {
+  const formField = useFormField();
+  const {
+    value: valueProp,
+    defaultValue = [],
+    onChange: onChangeProp,
+    name: nameProp,
+    size = "md",
+    colorScheme = "primary",
+    orientation = "vertical",
+    spacing = 2,
+    disabled: disabledProp,
+    readOnly: readOnlyProp,
+    error: errorProp,
+    asChild = false,
+    component,
+    as,
+    children,
+    className,
+    style,
+    sx,
+    ...rest
+  } = props;
+  const name = nameProp ?? formField?.name;
+  const disabled = disabledProp ?? formField?.disabled ?? false;
+  const readOnly = readOnlyProp ?? formField?.readOnly ?? false;
+  const error = errorProp ?? formField?.error ?? false;
+  const [value, setValue] = useControllableState({
+    value: valueProp,
+    defaultValue,
+    onChange: onChangeProp
+  });
+  const toggleValue = React.useCallback(
+    (itemValue) => {
+      if (readOnly || disabled) return;
+      const current = value || [];
+      const next = current.includes(itemValue) ? current.filter((v) => v !== itemValue) : [...current, itemValue];
+      setValue(next);
+    },
+    [value, setValue, readOnly, disabled]
+  );
+  const contextValue = React.useMemo(
+    () => ({
+      value: value || [],
+      name,
+      size,
+      colorScheme,
+      disabled,
+      readOnly,
+      error,
+      toggleValue
+    }),
+    [value, name, size, colorScheme, disabled, readOnly, error, toggleValue]
+  );
+  const groupClassName = classNames(
+    "cl-checkbox-group",
+    `cl-checkbox-group--${orientation}`,
+    className
+  );
+  const targetTag = component || as;
+  if (asChild) {
+    return /* @__PURE__ */ jsx(CheckboxContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
+      StyledCheckboxGroupRoot,
+      {
+        as: Slot,
+        ref,
+        role: "group",
+        orientation,
+        spacing,
+        className: groupClassName,
+        style,
+        sx,
+        ...rest,
+        children
+      }
+    ) });
+  }
+  return /* @__PURE__ */ jsx(CheckboxContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
+    StyledCheckboxGroupRoot,
+    {
+      as: targetTag,
+      ref,
+      role: "group",
+      orientation,
+      spacing,
+      className: groupClassName,
+      style,
+      sx,
+      ...rest,
+      children
+    }
+  ) });
+});
+CheckboxGroup.displayName = "CheckboxGroup";
+var RadioContext = React.createContext(void 0);
+function useRadioGroup() {
+  return React.useContext(RadioContext);
+}
+var StyledRadioRoot = styled("label", {
+  name: "ChellaaRadio",
+  slot: "Root",
+  shouldForwardProp: (prop) => prop !== "size" && prop !== "colorScheme" && prop !== "disabled" && prop !== "readOnly" && prop !== "error" && prop !== "checked" && prop !== "asChild" && prop !== "component"
+})({});
+var Radio = React.forwardRef(
+  function Radio2(props, ref) {
+    const group = useRadioGroup();
+    const formField = useFormField();
+    const {
+      checked: checkedProp,
+      defaultChecked = false,
+      onChange: onChangeProp,
+      value: valueProp,
+      name: nameProp,
+      size: sizeProp,
+      colorScheme: colorSchemeProp,
+      disabled: disabledProp,
+      readOnly: readOnlyProp,
+      required: requiredProp,
+      error: errorProp,
+      inputRef: inputRefProp,
+      inputProps = {},
+      asChild = false,
+      component,
+      as,
+      children,
+      className,
+      style,
+      sx,
+      id: idProp,
+      ...rest
+    } = props;
+    const isGroupControlled = group !== void 0 && valueProp !== void 0;
+    const isCheckedInGroup = isGroupControlled ? group.value !== void 0 && String(group.value) === String(valueProp) : void 0;
+    const checked = checkedProp !== void 0 ? checkedProp : isCheckedInGroup;
+    const size = sizeProp ?? group?.size ?? "md";
+    const colorScheme = colorSchemeProp ?? group?.colorScheme ?? "primary";
+    const disabled = disabledProp ?? group?.disabled ?? formField?.disabled ?? false;
+    const readOnly = readOnlyProp ?? group?.readOnly ?? formField?.readOnly ?? false;
+    const error = errorProp ?? group?.error ?? formField?.error ?? false;
+    const required = requiredProp ?? formField?.required ?? false;
+    const name = nameProp ?? group?.name ?? formField?.name;
+    const id = idProp ?? (formField ? `${formField.id}-radio-${valueProp ?? ""}` : void 0);
+    const [uncontrolledChecked, setUncontrolledChecked] = React.useState(
+      defaultChecked
+    );
+    const isControlled = checked !== void 0;
+    const effectiveChecked = isControlled ? checked : uncontrolledChecked;
+    const nativeInputRef = React.useRef(null);
+    const mergedInputRef = useMergeRefs(nativeInputRef, inputRefProp);
+    const handleChange = (event) => {
+      if (disabled || readOnly) {
+        event.preventDefault();
+        return;
+      }
+      if (isGroupControlled && valueProp !== void 0) {
+        group.onChange(valueProp);
+      } else if (!isControlled) {
+        setUncontrolledChecked(event.target.checked);
+      }
+      onChangeProp?.(event);
+    };
+    const radioClassName = classNames(
+      "cl-radio",
+      `cl-radio--${size}`,
+      `cl-radio--${colorScheme}`,
+      effectiveChecked && "cl-radio--checked",
+      disabled && "cl-radio--disabled",
+      error && "cl-radio--error",
+      className
+    );
+    const targetTag = component || as;
+    const controlBox = /* @__PURE__ */ jsx("span", { className: "cl-radio__control ChellaaRadio-Control", "aria-hidden": "true", children: /* @__PURE__ */ jsx("span", { className: "cl-radio__dot ChellaaRadio-Dot" }) });
+    const ariaDescribedBy = [
+      inputProps["aria-describedby"],
+      formField?.error && formField?.hasErrorMessage ? formField.errorMessageId : null,
+      formField?.hasHelperText ? formField.helperTextId : null
+    ].filter(Boolean).join(" ") || void 0;
+    if (asChild) {
+      return /* @__PURE__ */ jsx(
+        StyledRadioRoot,
+        {
+          as: Slot,
+          ref,
+          className: radioClassName,
+          style,
+          sx,
+          ...rest,
+          children
+        }
+      );
+    }
+    return /* @__PURE__ */ jsxs(
+      StyledRadioRoot,
+      {
+        as: targetTag,
+        ref,
+        className: radioClassName,
+        style,
+        sx,
+        ...rest,
+        children: [
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              type: "radio",
+              id,
+              name,
+              value: valueProp,
+              disabled,
+              readOnly,
+              required,
+              checked: isControlled ? effectiveChecked : void 0,
+              defaultChecked: !isControlled ? defaultChecked : void 0,
+              onChange: handleChange,
+              ref: mergedInputRef,
+              "aria-invalid": error ? true : void 0,
+              "aria-describedby": ariaDescribedBy,
+              className: "cl-radio__input",
+              ...inputProps
+            }
+          ),
+          controlBox,
+          children && /* @__PURE__ */ jsx("span", { className: "cl-radio__label ChellaaRadio-Label", children })
+        ]
+      }
+    );
+  }
+);
+Radio.displayName = "Radio";
+var StyledRadioGroupRoot = styled("div", {
+  name: "ChellaaRadioGroup",
+  slot: "Root",
+  shouldForwardProp: (prop) => prop !== "orientation" && prop !== "spacing" && prop !== "colorScheme" && prop !== "error" && prop !== "disabled" && prop !== "readOnly" && prop !== "asChild" && prop !== "component"
+})({});
+var RadioGroup = React.forwardRef(
+  function RadioGroup2(props, ref) {
+    const formField = useFormField();
+    const {
+      value: valueProp,
+      defaultValue,
+      onChange: onChangeProp,
+      name: nameProp,
+      size = "md",
+      colorScheme = "primary",
+      orientation = "vertical",
+      spacing = 2,
+      disabled: disabledProp,
+      readOnly: readOnlyProp,
+      error: errorProp,
+      asChild = false,
+      component,
+      as,
+      children,
+      className,
+      style,
+      sx,
+      ...rest
+    } = props;
+    const generatedName = React.useId();
+    const name = nameProp || formField?.name || generatedName;
+    const disabled = disabledProp ?? formField?.disabled ?? false;
+    const readOnly = readOnlyProp ?? formField?.readOnly ?? false;
+    const error = errorProp ?? formField?.error ?? false;
+    const [value, setValue] = useControllableState({
+      value: valueProp,
+      defaultValue,
+      onChange: (val) => {
+        if (val !== void 0) {
+          onChangeProp?.(val);
+        }
+      }
+    });
+    const handleChange = React.useCallback(
+      (nextValue) => {
+        if (readOnly || disabled) return;
+        setValue(nextValue);
+      },
+      [readOnly, disabled, setValue]
+    );
+    const contextValue = React.useMemo(
+      () => ({
+        value,
+        name,
+        size,
+        colorScheme,
+        disabled,
+        readOnly,
+        error,
+        onChange: handleChange
+      }),
+      [value, name, size, colorScheme, disabled, readOnly, error, handleChange]
+    );
+    const targetTag = component || as;
+    const groupClassName = classNames(
+      "cl-radio-group",
+      orientation === "horizontal" ? "cl-radio-group--horizontal" : "cl-radio-group--vertical",
+      className
+    );
+    const gapStyle = spacing !== void 0 ? {
+      gap: typeof spacing === "number" ? `${spacing * 4}px` : spacing,
+      ...style
+    } : style;
+    if (asChild) {
+      return /* @__PURE__ */ jsx(RadioContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
+        StyledRadioGroupRoot,
+        {
+          as: Slot,
+          ref,
+          role: "radiogroup",
+          className: groupClassName,
+          style: gapStyle,
+          sx,
+          ...rest,
+          children
+        }
+      ) });
+    }
+    return /* @__PURE__ */ jsx(RadioContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
+      StyledRadioGroupRoot,
+      {
+        as: targetTag,
+        ref,
+        role: "radiogroup",
+        className: groupClassName,
+        style: gapStyle,
+        sx,
+        ...rest,
+        children
+      }
+    ) });
+  }
+);
+RadioGroup.displayName = "RadioGroup";
+var StyledSwitchRoot = styled("label", {
+  name: "ChellaaSwitch",
+  slot: "Root",
+  shouldForwardProp: (prop) => prop !== "size" && prop !== "labelPlacement" && prop !== "disabled" && prop !== "readOnly" && prop !== "error" && prop !== "loading" && prop !== "checked" && prop !== "colorScheme" && prop !== "asChild" && prop !== "component"
+})({});
+var Switch = React.forwardRef(
+  function Switch2(props, ref) {
+    const formField = useFormField();
+    const {
+      checked: checkedProp,
+      defaultChecked = false,
+      onChange: onChangeProp,
+      value,
+      name: nameProp,
+      size = "md",
+      colorScheme = "primary",
+      disabled: disabledProp,
+      readOnly: readOnlyProp,
+      required: requiredProp,
+      error: errorProp,
+      loading = false,
+      checkedIcon,
+      uncheckedIcon,
+      labelPlacement = "end",
+      inputRef: inputRefProp,
+      inputProps = {},
+      asChild = false,
+      component,
+      as,
+      children,
+      className,
+      style,
+      sx,
+      id: idProp,
+      ...rest
+    } = props;
+    const disabled = disabledProp ?? formField?.disabled ?? loading ? true : false;
+    const readOnly = readOnlyProp ?? formField?.readOnly ?? false;
+    const error = errorProp ?? formField?.error ?? false;
+    const required = requiredProp ?? formField?.required ?? false;
+    const name = nameProp ?? formField?.name;
+    const id = idProp ?? (formField ? `${formField.id}-switch` : void 0);
+    const [uncontrolledChecked, setUncontrolledChecked] = React.useState(
+      defaultChecked
+    );
+    const isControlled = checkedProp !== void 0;
+    const effectiveChecked = isControlled ? checkedProp : uncontrolledChecked;
+    const nativeInputRef = React.useRef(null);
+    const mergedInputRef = useMergeRefs(nativeInputRef, inputRefProp);
+    const handleChange = (event) => {
+      if (disabled || readOnly || loading) {
+        event.preventDefault();
+        return;
+      }
+      if (!isControlled) {
+        setUncontrolledChecked(event.target.checked);
+      }
+      onChangeProp?.(event);
+    };
+    const handleKeyDown = (event) => {
+      if (event.key === "Enter") {
+        event.preventDefault();
+        nativeInputRef.current?.click();
+      }
+      inputProps.onKeyDown?.(event);
+    };
+    const switchClassName = classNames(
+      "cl-switch",
+      `cl-switch--${size}`,
+      `cl-switch--${colorScheme}`,
+      `cl-switch--placement-${labelPlacement}`,
+      effectiveChecked && "cl-switch--checked",
+      disabled && "cl-switch--disabled",
+      error && "cl-switch--error",
+      className
+    );
+    const targetTag = component || as;
+    const thumbIcon = loading ? /* @__PURE__ */ jsx(
+      "svg",
+      {
+        className: "cl-switch__spinner",
+        viewBox: "0 0 24 24",
+        fill: "none",
+        "aria-hidden": "true",
+        children: /* @__PURE__ */ jsx(
+          "circle",
+          {
+            cx: "12",
+            cy: "12",
+            r: "9",
+            stroke: "currentColor",
+            strokeWidth: "3",
+            strokeDasharray: "40 20",
+            strokeLinecap: "round"
+          }
+        )
+      }
+    ) : effectiveChecked ? checkedIcon : uncheckedIcon;
+    const trackControl = /* @__PURE__ */ jsx("span", { className: "cl-switch__track ChellaaSwitch-Track", "aria-hidden": "true", children: /* @__PURE__ */ jsx("span", { className: "cl-switch__thumb ChellaaSwitch-Thumb", children: thumbIcon }) });
+    const ariaDescribedBy = [
+      inputProps["aria-describedby"],
+      formField?.error && formField?.hasErrorMessage ? formField.errorMessageId : null,
+      formField?.hasHelperText ? formField.helperTextId : null
+    ].filter(Boolean).join(" ") || void 0;
+    if (asChild) {
+      return /* @__PURE__ */ jsx(
+        StyledSwitchRoot,
+        {
+          as: Slot,
+          ref,
+          className: switchClassName,
+          style,
+          sx,
+          ...rest,
+          children
+        }
+      );
+    }
+    return /* @__PURE__ */ jsxs(
+      StyledSwitchRoot,
+      {
+        as: targetTag,
+        ref,
+        className: switchClassName,
+        style,
+        sx,
+        ...rest,
+        children: [
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              type: "checkbox",
+              role: "switch",
+              id,
+              name,
+              value,
+              disabled,
+              readOnly,
+              required,
+              checked: isControlled ? effectiveChecked : void 0,
+              defaultChecked: !isControlled ? defaultChecked : void 0,
+              onChange: handleChange,
+              onKeyDown: handleKeyDown,
+              ref: mergedInputRef,
+              "aria-checked": effectiveChecked,
+              "aria-invalid": error ? true : void 0,
+              "aria-describedby": ariaDescribedBy,
+              className: "cl-switch__input",
+              ...inputProps
+            }
+          ),
+          trackControl,
+          children && /* @__PURE__ */ jsx("span", { className: "cl-switch__label ChellaaSwitch-Label", children })
+        ]
+      }
+    );
+  }
+);
+Switch.displayName = "Switch";
+var StyledPaperRoot = styled("div", {
+  name: "ChellaaPaper",
+  slot: "Root",
+  shouldForwardProp: (prop) => prop !== "elevation" && prop !== "variant" && prop !== "square" && prop !== "asChild" && prop !== "component"
+})({});
+var Paper = React.forwardRef(
+  function Paper2(props, ref) {
+    const {
+      asChild = false,
+      component,
+      as,
+      elevation = 1,
+      variant = "elevation",
+      square = false,
+      className,
+      style,
+      sx,
+      children,
+      ...rest
+    } = props;
+    const clampedElevation = Math.max(0, Math.min(24, elevation));
+    const paperClassName = classNames(
+      "cl-paper",
+      square && "cl-paper--square",
+      variant === "outlined" ? "cl-paper--outlined" : `cl-paper--elevation-${clampedElevation}`,
+      className
+    );
+    const targetTag = component || as;
+    if (asChild) {
+      return /* @__PURE__ */ jsx(
+        StyledPaperRoot,
+        {
+          as: Slot,
+          ref,
+          className: paperClassName,
+          style,
+          sx,
+          ...rest,
+          children
+        }
+      );
+    }
+    if (targetTag) {
+      return /* @__PURE__ */ jsx(
+        StyledPaperRoot,
+        {
+          as: targetTag,
+          ref,
+          className: paperClassName,
+          style,
+          sx,
+          ...rest,
+          children
+        }
+      );
+    }
+    return /* @__PURE__ */ jsx(
+      StyledPaperRoot,
+      {
+        ref,
+        className: paperClassName,
+        style,
+        sx,
+        ...rest,
+        children
+      }
+    );
+  }
+);
+Paper.displayName = "Paper";
+var CardContext = React.createContext({
+  size: "md"
+});
+var StyledCardRoot = styled("div", {
+  name: "ChellaaCard",
+  slot: "Root",
+  shouldForwardProp: (prop) => prop !== "variant" && prop !== "elevation" && prop !== "hoverable" && prop !== "square" && prop !== "size" && prop !== "asChild" && prop !== "component"
+})({});
+var Card = React.forwardRef(
+  function Card2(props, ref) {
+    const {
+      variant = "elevated",
+      elevation = 1,
+      size = "md",
+      hoverable = false,
+      square = false,
+      asChild = false,
+      component,
+      as,
+      className,
+      style,
+      sx,
+      children,
+      ...rest
+    } = props;
+    const cardClassName = classNames(
+      "cl-card",
+      `cl-card--${size}`,
+      `cl-card--${variant}`,
+      square && "cl-card--square",
+      hoverable && "cl-card--hoverable",
+      className
+    );
+    const targetTag = component || as;
+    return /* @__PURE__ */ jsx(CardContext.Provider, { value: { size }, children: asChild ? /* @__PURE__ */ jsx(
+      StyledCardRoot,
+      {
+        as: Slot,
+        ref,
+        className: cardClassName,
+        style,
+        sx,
+        ...rest,
+        children
+      }
+    ) : /* @__PURE__ */ jsx(
+      StyledCardRoot,
+      {
+        as: targetTag,
+        ref,
+        className: cardClassName,
+        style,
+        sx,
+        ...rest,
+        children
+      }
+    ) });
+  }
+);
+Card.displayName = "Card";
+var StyledCardHeaderRoot = styled("div", {
+  name: "ChellaaCard",
+  slot: "Header",
+  shouldForwardProp: (prop) => prop !== "cardSize" && prop !== "asChild"
+})({});
+var CardHeader = React.forwardRef(
+  function CardHeader2(props, ref) {
+    const {
+      avatar,
+      action,
+      title,
+      subheader,
+      titleTypographyProps,
+      subheaderTypographyProps,
+      asChild = false,
+      className,
+      style,
+      sx,
+      children,
+      ...rest
+    } = props;
+    const headerClassName = classNames(
+      "cl-card__header",
+      "ChellaaCard-header",
+      className
+    );
+    if (asChild) {
+      return /* @__PURE__ */ jsx(
+        StyledCardHeaderRoot,
+        {
+          as: Slot,
+          ref,
+          className: headerClassName,
+          style,
+          sx,
+          ...rest,
+          children
+        }
+      );
+    }
+    return /* @__PURE__ */ jsxs(
+      StyledCardHeaderRoot,
+      {
+        ref,
+        className: headerClassName,
+        style,
+        sx,
+        ...rest,
+        children: [
+          avatar && /* @__PURE__ */ jsx("div", { className: "cl-card__header-avatar ChellaaCard-headerAvatar", children: avatar }),
+          /* @__PURE__ */ jsxs("div", { className: "cl-card__header-content ChellaaCard-headerContent", children: [
+            title != null && /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: classNames(
+                  "cl-card__header-title",
+                  "ChellaaCard-headerTitle",
+                  titleTypographyProps?.className
+                ),
+                ...titleTypographyProps,
+                children: title
+              }
+            ),
+            subheader != null && /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: classNames(
+                  "cl-card__header-subheader",
+                  "ChellaaCard-headerSubheader",
+                  subheaderTypographyProps?.className
+                ),
+                ...subheaderTypographyProps,
+                children: subheader
+              }
+            ),
+            children
+          ] }),
+          action && /* @__PURE__ */ jsx("div", { className: "cl-card__header-action ChellaaCard-headerAction", children: action })
+        ]
+      }
+    );
+  }
+);
+CardHeader.displayName = "CardHeader";
+var StyledCardMediaRoot = styled("div", {
+  name: "ChellaaCard",
+  slot: "Media",
+  shouldForwardProp: (prop) => prop !== "image" && prop !== "aspectRatio"
+})({});
+var CardMedia = React.forwardRef(
+  function CardMedia2(props, ref) {
+    const {
+      image,
+      alt,
+      aspectRatio = "16/9",
+      component,
+      className,
+      style,
+      sx,
+      children,
+      ...rest
+    } = props;
+    const mediaStyle = {
+      ...aspectRatio ? { aspectRatio } : {},
+      ...image ? { backgroundImage: `url(${image})` } : {},
+      ...style
+    };
+    const mediaClassName = classNames(
+      "cl-card__media",
+      "ChellaaCard-media",
+      className
+    );
+    return /* @__PURE__ */ jsx(
+      StyledCardMediaRoot,
+      {
+        as: component,
+        ref,
+        className: mediaClassName,
+        style: mediaStyle,
+        sx,
+        role: image && !children ? "img" : void 0,
+        "aria-label": image && !children ? alt : void 0,
+        ...rest,
+        children
+      }
+    );
+  }
+);
+CardMedia.displayName = "CardMedia";
+var StyledCardBodyRoot = styled("div", {
+  name: "ChellaaCard",
+  slot: "Body",
+  shouldForwardProp: (prop) => prop !== "cardSize"
+})({});
+var CardBody = React.forwardRef(
+  function CardBody2(props, ref) {
+    const { children, className, style, sx, ...rest } = props;
+    const bodyClassName = classNames("cl-card__body", "ChellaaCard-body", className);
+    return /* @__PURE__ */ jsx(
+      StyledCardBodyRoot,
+      {
+        ref,
+        className: bodyClassName,
+        style,
+        sx,
+        ...rest,
+        children
+      }
+    );
+  }
+);
+CardBody.displayName = "CardBody";
+var StyledCardFooterRoot = styled("div", {
+  name: "ChellaaCard",
+  slot: "Footer",
+  shouldForwardProp: (prop) => prop !== "divider" && prop !== "cardSize"
+})({});
+var CardFooter = React.forwardRef(
+  function CardFooter2(props, ref) {
+    const { divider = false, children, className, style, sx, ...rest } = props;
+    const footerClassName = classNames(
+      "cl-card__footer",
+      "ChellaaCard-footer",
+      divider && "cl-card__footer--divider",
+      className
+    );
+    return /* @__PURE__ */ jsx(
+      StyledCardFooterRoot,
+      {
+        ref,
+        className: footerClassName,
+        style,
+        sx,
+        ...rest,
+        children
+      }
+    );
+  }
+);
+CardFooter.displayName = "CardFooter";
+var StyledCardActionsRoot = styled("div", {
+  name: "ChellaaCard",
+  slot: "Actions",
+  shouldForwardProp: (prop) => prop !== "disableSpacing" && prop !== "cardSize"
+})({});
+var CardActions = React.forwardRef(
+  function CardActions2(props, ref) {
+    const { disableSpacing = false, children, className, style, sx, ...rest } = props;
+    const actionsClassName = classNames(
+      "cl-card__actions",
+      "ChellaaCard-actions",
+      disableSpacing && "cl-card__actions--disable-spacing",
+      className
+    );
+    return /* @__PURE__ */ jsx(
+      StyledCardActionsRoot,
+      {
+        ref,
+        className: actionsClassName,
+        style,
+        sx,
+        ...rest,
+        children
+      }
+    );
+  }
+);
+CardActions.displayName = "CardActions";
 
-export { Button, ButtonGroup, ButtonGroupContext, ThemeProvider, ThemeScript, createTheme, useButtonGroupContext, useTheme };
+export { Box, Button, ButtonGroup, ButtonGroupContext, Card, CardActions, CardBody, CardFooter, CardHeader, CardMedia, Checkbox, CheckboxContext, CheckboxGroup, Code, Container, Divider, Flex, FormErrorMessage, FormField, FormFieldContext, FormHelperText, FormLabel, Grid, Heading, Input, InputAdornment, InputBase, Kbd, MODIFIER_SYMBOLS, Paper, Paragraph, Radio, RadioContext, RadioGroup, Stack, Switch, Text, TextField, Textarea, ThemeProvider, ThemeScript, TouchRipple, Typography, 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 };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map