@tinybigui/react 0.1.0-rc.1

package/dist/index.js

@@ -0,0 +1,3329 @@
+import $7jXr9$clsx, { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { argbFromHex, themeFromSourceColor } from '@material/material-color-utilities';
+export { argbFromHex, hexFromArgb } from '@material/material-color-utilities';
+import $3whtM$react, { forwardRef, useRef, createContext, useEffect, useContext, useState, useCallback, useMemo, useReducer } from 'react';
+import { useButton, useTextField, useFocusRing, useCheckbox, VisuallyHidden, mergeProps, useSwitch, useRadioGroup, useRadio } from 'react-aria';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { cva } from 'class-variance-authority';
+
+// src/utils/cn.ts
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+function getColorValue(variable, element = document.documentElement) {
+  const varName = variable.startsWith("--") ? variable : `--${variable}`;
+  return getComputedStyle(element).getPropertyValue(varName).trim();
+}
+function getMD3Color(role) {
+  return getColorValue(`--md-sys-color-${role}`);
+}
+function withOpacity(color, opacity) {
+  const hex = color.replace("#", "");
+  const alpha = Math.round(Math.max(0, Math.min(1, opacity)) * 255).toString(16).padStart(2, "0");
+  return `#${hex}${alpha}`;
+}
+function hexToRgb(hex) {
+  const h = hex.replace("#", "");
+  const r = parseInt(h.substring(0, 2), 16);
+  const g = parseInt(h.substring(2, 4), 16);
+  const b = parseInt(h.substring(4, 6), 16);
+  return { r, g, b };
+}
+function rgbToHex(r, g, b) {
+  const toHex = (n) => {
+    const hex = Math.max(0, Math.min(255, Math.round(n))).toString(16);
+    return hex.padStart(2, "0");
+  };
+  return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
+}
+function generateMD3Theme(seedColor) {
+  const argb = argbFromHex(seedColor);
+  return themeFromSourceColor(argb);
+}
+var STATE_LAYER_OPACITY = {
+  hover: 0.08,
+  focus: 0.12,
+  press: 0.12,
+  drag: 0.16
+};
+function applyStateLayer(color, state) {
+  return withOpacity(color, STATE_LAYER_OPACITY[state]);
+}
+
+// src/utils/typography.ts
+function getTypographyToken(style, property) {
+  return getColorValue(`--md-sys-typescale-${style}-${property}`);
+}
+function getTypographyStyle(style, includeFontFamily = false) {
+  const styleObject = {
+    fontSize: getTypographyToken(style, "size"),
+    lineHeight: getTypographyToken(style, "line-height"),
+    fontWeight: getTypographyToken(style, "weight"),
+    letterSpacing: getTypographyToken(style, "tracking")
+  };
+  if (includeFontFamily) {
+    styleObject.fontFamily = getColorValue("--md-sys-typescale-font-family-plain");
+  }
+  return styleObject;
+}
+function getFontFamily(variant = "plain") {
+  return getColorValue(`--md-sys-typescale-font-family-${variant}`);
+}
+var TYPOGRAPHY_ELEMENT_MAP = {
+  h1: "display-large",
+  h2: "display-medium",
+  h3: "headline-large",
+  h4: "headline-medium",
+  h5: "headline-small",
+  h6: "title-large",
+  p: "body-large",
+  span: "body-medium",
+  small: "body-small",
+  button: "label-large",
+  label: "label-medium",
+  caption: "label-small"
+};
+function getTypographyForElement(element) {
+  return TYPOGRAPHY_ELEMENT_MAP[element];
+}
+var TYPOGRAPHY_USAGE = {
+  display: "Large, expressive text for hero sections and marketing",
+  headline: "High-emphasis text for titles and important headings",
+  title: "Medium-emphasis text for section headers and card titles",
+  body: "Plain text for paragraphs, lists, and general content",
+  label: "UI labels, buttons, tabs, and form elements"
+};
+function getTypographyClassName(style) {
+  return `text-${style}`;
+}
+function getResponsiveTypography(mobile, tablet, desktop) {
+  return {
+    mobile: getTypographyStyle(mobile),
+    ...tablet && { tablet: getTypographyStyle(tablet) },
+    ...desktop && { desktop: getTypographyStyle(desktop) }
+  };
+}
+function remToPx(rem) {
+  const remValue = parseFloat(rem.replace("rem", ""));
+  return remValue * 16;
+}
+function pxToRem(px) {
+  const pxValue = typeof px === "string" ? parseFloat(px.replace("px", "")) : px;
+  return `${pxValue / 16}rem`;
+}
+function truncateText(lines = 1) {
+  if (lines === 1) {
+    return {
+      overflow: "hidden",
+      textOverflow: "ellipsis",
+      whiteSpace: "nowrap"
+    };
+  }
+  return {
+    display: "-webkit-box",
+    WebkitLineClamp: lines,
+    WebkitBoxOrient: "vertical",
+    overflow: "hidden",
+    textOverflow: "ellipsis"
+  };
+}
+var $bdb11010cef70236$export$d41a04c74483c6ef = /* @__PURE__ */ new Map();
+if (typeof FinalizationRegistry !== "undefined") new FinalizationRegistry((heldValue) => {
+  $bdb11010cef70236$export$d41a04c74483c6ef.delete(heldValue);
+});
+function $bdb11010cef70236$export$cd8c9cb68f842629(idA, idB) {
+  if (idA === idB) return idA;
+  let setIdsA = $bdb11010cef70236$export$d41a04c74483c6ef.get(idA);
+  if (setIdsA) {
+    setIdsA.forEach((ref) => ref.current = idB);
+    return idB;
+  }
+  let setIdsB = $bdb11010cef70236$export$d41a04c74483c6ef.get(idB);
+  if (setIdsB) {
+    setIdsB.forEach((ref) => ref.current = idA);
+    return idA;
+  }
+  return idB;
+}
+
+// ../../node_modules/.pnpm/@react-aria+utils@3.32.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@react-aria/utils/dist/chain.mjs
+function $ff5963eb1fccf552$export$e08e3b67e392101e(...callbacks) {
+  return (...args) => {
+    for (let callback of callbacks) if (typeof callback === "function") callback(...args);
+  };
+}
+function $3ef42575df84b30b$export$9d1611c77c2fe928(...args) {
+  let result = {
+    ...args[0]
+  };
+  for (let i = 1; i < args.length; i++) {
+    let props = args[i];
+    for (let key in props) {
+      let a = result[key];
+      let b = props[key];
+      if (typeof a === "function" && typeof b === "function" && // This is a lot faster than a regex.
+      key[0] === "o" && key[1] === "n" && key.charCodeAt(2) >= /* 'A' */
+      65 && key.charCodeAt(2) <= /* 'Z' */
+      90) result[key] = ($ff5963eb1fccf552$export$e08e3b67e392101e)(a, b);
+      else if ((key === "className" || key === "UNSAFE_className") && typeof a === "string" && typeof b === "string") result[key] = ($7jXr9$clsx)(a, b);
+      else if (key === "id" && a && b) result.id = ($bdb11010cef70236$export$cd8c9cb68f842629)(a, b);
+      else result[key] = b !== void 0 ? b : a;
+    }
+  }
+  return result;
+}
+
+// ../../node_modules/.pnpm/@react-aria+utils@3.32.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@react-aria/utils/dist/filterDOMProps.mjs
+var $65484d02dcb7eb3e$var$DOMPropNames = /* @__PURE__ */ new Set([
+  "id"
+]);
+var $65484d02dcb7eb3e$var$labelablePropNames = /* @__PURE__ */ new Set([
+  "aria-label",
+  "aria-labelledby",
+  "aria-describedby",
+  "aria-details"
+]);
+var $65484d02dcb7eb3e$var$linkPropNames = /* @__PURE__ */ new Set([
+  "href",
+  "hrefLang",
+  "target",
+  "rel",
+  "download",
+  "ping",
+  "referrerPolicy"
+]);
+var $65484d02dcb7eb3e$var$globalAttrs = /* @__PURE__ */ new Set([
+  "dir",
+  "lang",
+  "hidden",
+  "inert",
+  "translate"
+]);
+var $65484d02dcb7eb3e$var$globalEvents = /* @__PURE__ */ new Set([
+  "onClick",
+  "onAuxClick",
+  "onContextMenu",
+  "onDoubleClick",
+  "onMouseDown",
+  "onMouseEnter",
+  "onMouseLeave",
+  "onMouseMove",
+  "onMouseOut",
+  "onMouseOver",
+  "onMouseUp",
+  "onTouchCancel",
+  "onTouchEnd",
+  "onTouchMove",
+  "onTouchStart",
+  "onPointerDown",
+  "onPointerMove",
+  "onPointerUp",
+  "onPointerCancel",
+  "onPointerEnter",
+  "onPointerLeave",
+  "onPointerOver",
+  "onPointerOut",
+  "onGotPointerCapture",
+  "onLostPointerCapture",
+  "onScroll",
+  "onWheel",
+  "onAnimationStart",
+  "onAnimationEnd",
+  "onAnimationIteration",
+  "onTransitionCancel",
+  "onTransitionEnd",
+  "onTransitionRun",
+  "onTransitionStart"
+]);
+var $65484d02dcb7eb3e$var$propRe = /^(data-.*)$/;
+function $65484d02dcb7eb3e$export$457c3d6518dd4c6f(props, opts = {}) {
+  let { labelable, isLink, global, events = global, propNames } = opts;
+  let filteredProps = {};
+  for (const prop in props) if (Object.prototype.hasOwnProperty.call(props, prop) && ($65484d02dcb7eb3e$var$DOMPropNames.has(prop) || labelable && $65484d02dcb7eb3e$var$labelablePropNames.has(prop) || isLink && $65484d02dcb7eb3e$var$linkPropNames.has(prop) || global && $65484d02dcb7eb3e$var$globalAttrs.has(prop) || events && ($65484d02dcb7eb3e$var$globalEvents.has(prop) || prop.endsWith("Capture") && $65484d02dcb7eb3e$var$globalEvents.has(prop.slice(0, -7))) || (propNames === null || propNames === void 0 ? void 0 : propNames.has(prop)) || $65484d02dcb7eb3e$var$propRe.test(prop))) filteredProps[prop] = props[prop];
+  return filteredProps;
+}
+var $458b0a5536c1a7cf$var$_React_useInsertionEffect;
+var $458b0a5536c1a7cf$var$useEarlyEffect = typeof document !== "undefined" ? ($458b0a5536c1a7cf$var$_React_useInsertionEffect = ($3whtM$react)["useInsertionEffect"]) !== null && $458b0a5536c1a7cf$var$_React_useInsertionEffect !== void 0 ? $458b0a5536c1a7cf$var$_React_useInsertionEffect : ($3whtM$react).useLayoutEffect : () => {
+};
+function $458b0a5536c1a7cf$export$40bfa8c7b0832715(value, defaultValue, onChange) {
+  let [stateValue, setStateValue] = (useState)(value || defaultValue);
+  let valueRef = (useRef)(stateValue);
+  let isControlledRef = (useRef)(value !== void 0);
+  let isControlled = value !== void 0;
+  (useEffect)(() => {
+    let wasControlled = isControlledRef.current;
+    if (wasControlled !== isControlled && process.env.NODE_ENV !== "production") console.warn(`WARN: A component changed from ${wasControlled ? "controlled" : "uncontrolled"} to ${isControlled ? "controlled" : "uncontrolled"}.`);
+    isControlledRef.current = isControlled;
+  }, [
+    isControlled
+  ]);
+  let currentValue = isControlled ? value : stateValue;
+  $458b0a5536c1a7cf$var$useEarlyEffect(() => {
+    valueRef.current = currentValue;
+  });
+  let [, forceUpdate] = (useReducer)(() => ({}), {});
+  let setValue = (useCallback)((value2, ...args) => {
+    let newValue = typeof value2 === "function" ? value2(valueRef.current) : value2;
+    if (!Object.is(valueRef.current, newValue)) {
+      valueRef.current = newValue;
+      setStateValue(newValue);
+      forceUpdate();
+      onChange === null || onChange === void 0 ? void 0 : onChange(newValue, ...args);
+    }
+  }, [
+    onChange
+  ]);
+  return [
+    currentValue,
+    setValue
+  ];
+}
+var ButtonHeadless = forwardRef(
+  ({ className, children, tabIndex = 0, onMouseDown, type, ...restProps }, forwardedRef) => {
+    const internalRef = useRef(null);
+    const ref = forwardedRef ?? internalRef;
+    const { buttonProps } = useButton(
+      {
+        ...restProps,
+        // Ensure element type is 'button' for proper semantics
+        elementType: "button"
+      },
+      ref
+    );
+    const {
+      isDisabled: _isDisabled,
+      onPress: _onPress,
+      onPressStart: _onPressStart,
+      onPressEnd: _onPressEnd,
+      onPressChange: _onPressChange,
+      onPressUp: _onPressUp,
+      ...htmlAttrs
+    } = restProps;
+    const mergedProps = $3ef42575df84b30b$export$9d1611c77c2fe928(
+      buttonProps,
+      {
+        tabIndex,
+        className,
+        onMouseDown
+      },
+      htmlAttrs
+      // Pass through only HTML attributes (title, data-*, etc.)
+    );
+    return (
+      // eslint-disable-next-line react/button-has-type -- type is dynamically passed from props
+      /* @__PURE__ */ jsx("button", { ...mergedProps, ref, type: type ?? "button", children })
+    );
+  }
+);
+ButtonHeadless.displayName = "ButtonHeadless";
+var buttonVariants = cva(
+  [
+    // Base classes (always applied)
+    "relative inline-flex items-center justify-center cursor-pointer",
+    "overflow-hidden rounded-full font-medium",
+    "transition-all duration-200",
+    "tracking-[0.1px]",
+    // MD3 spec: +0.1px letter-spacing for label-large
+    "focus-visible:outline-primary focus-visible:outline-2 focus-visible:outline-offset-2",
+    // State layers (hover, focus, active) - MD3 spec: 8%/12%/12% opacity
+    "before:absolute before:inset-0 before:rounded-[inherit] before:transition-opacity before:duration-200",
+    "before:bg-current before:opacity-0",
+    "hover:before:opacity-8",
+    "focus-visible:before:opacity-12",
+    "active:before:opacity-12"
+  ],
+  {
+    variants: {
+      /**
+       * Button variant (MD3 specification)
+       */
+      variant: {
+        filled: "shadow-none hover:shadow-elevation-1",
+        // MD3: gains elevation on hover
+        outlined: "bg-transparent border border-outline",
+        tonal: "",
+        elevated: "shadow-elevation-1 hover:shadow-elevation-2",
+        // MD3: level 1 → level 2 on hover
+        text: "bg-transparent"
+      },
+      /**
+       * Color scheme (MD3 color roles)
+       */
+      color: {
+        primary: "",
+        secondary: "",
+        tertiary: "",
+        error: ""
+      },
+      /**
+       * Button size
+       */
+      size: {
+        small: "h-8 px-4 text-sm gap-2",
+        medium: "h-10 px-6 text-sm gap-2",
+        large: "h-12 px-8 text-base gap-3"
+      },
+      /**
+       * Full width variant
+       */
+      fullWidth: {
+        true: "w-full",
+        false: ""
+      },
+      /**
+       * Disabled state (MD3 spec: container 12% opacity, content 38% opacity)
+       */
+      disabled: {
+        true: [
+          "pointer-events-none cursor-not-allowed",
+          "bg-on-surface/12",
+          // MD3: disabled container uses on-surface at 12%
+          "text-on-surface/38",
+          // MD3: disabled text/icons use on-surface at 38%
+          "border-on-surface/12",
+          // For outlined variant
+          "shadow-none"
+          // Remove elevation when disabled
+        ],
+        false: ""
+      },
+      /**
+       * Loading state
+       */
+      loading: {
+        true: "cursor-wait",
+        false: ""
+      }
+    },
+    /**
+     * Compound variants - combinations of variant + color
+     */
+    compoundVariants: [
+      // ====================
+      // FILLED VARIANTS
+      // ====================
+      {
+        variant: "filled",
+        color: "primary",
+        className: "bg-primary text-on-primary"
+      },
+      {
+        variant: "filled",
+        color: "secondary",
+        className: "bg-secondary text-on-secondary"
+      },
+      {
+        variant: "filled",
+        color: "tertiary",
+        className: "bg-tertiary text-on-tertiary"
+      },
+      {
+        variant: "filled",
+        color: "error",
+        className: "bg-error text-on-error"
+      },
+      // ====================
+      // OUTLINED VARIANTS
+      // ====================
+      {
+        variant: "outlined",
+        color: "primary",
+        className: "text-primary"
+      },
+      {
+        variant: "outlined",
+        color: "secondary",
+        className: "text-secondary"
+      },
+      {
+        variant: "outlined",
+        color: "tertiary",
+        className: "text-tertiary"
+      },
+      {
+        variant: "outlined",
+        color: "error",
+        className: "text-error"
+      },
+      // ====================
+      // TONAL VARIANTS
+      // ====================
+      {
+        variant: "tonal",
+        color: "primary",
+        className: "bg-secondary-container text-on-secondary-container"
+      },
+      {
+        variant: "tonal",
+        color: "secondary",
+        className: "bg-secondary-container text-on-secondary-container"
+      },
+      {
+        variant: "tonal",
+        color: "tertiary",
+        className: "bg-tertiary-container text-on-tertiary-container"
+      },
+      {
+        variant: "tonal",
+        color: "error",
+        className: "bg-error-container text-on-error-container"
+      },
+      // ====================
+      // ELEVATED VARIANTS
+      // ====================
+      {
+        variant: "elevated",
+        color: "primary",
+        className: "bg-surface-container-low text-primary"
+      },
+      {
+        variant: "elevated",
+        color: "secondary",
+        className: "bg-surface-container-low text-secondary"
+      },
+      {
+        variant: "elevated",
+        color: "tertiary",
+        className: "bg-surface-container-low text-tertiary"
+      },
+      {
+        variant: "elevated",
+        color: "error",
+        className: "bg-surface-container-low text-error"
+      },
+      // ====================
+      // TEXT VARIANTS
+      // ====================
+      {
+        variant: "text",
+        color: "primary",
+        className: "text-primary"
+      },
+      {
+        variant: "text",
+        color: "secondary",
+        className: "text-secondary"
+      },
+      {
+        variant: "text",
+        color: "tertiary",
+        className: "text-tertiary"
+      },
+      {
+        variant: "text",
+        color: "error",
+        className: "text-error"
+      }
+    ],
+    /**
+     * Default variants
+     */
+    defaultVariants: {
+      variant: "filled",
+      color: "primary",
+      size: "medium",
+      fullWidth: false,
+      disabled: false,
+      loading: false
+    }
+  }
+);
+function useRipple(options = {}) {
+  const { disabled = false, color = "currentColor", duration = 450 } = options;
+  const [ripples, setRipples] = useState([]);
+  const rippleKeyCounter = useRef(0);
+  const onMouseDown = useCallback(
+    (event) => {
+      if (disabled) return;
+      const element = event.currentTarget;
+      const rect = element.getBoundingClientRect();
+      const x = event.clientX - rect.left;
+      const y = event.clientY - rect.top;
+      const sizeX = Math.max(x, rect.width - x);
+      const sizeY = Math.max(y, rect.height - y);
+      const size = Math.sqrt(sizeX ** 2 + sizeY ** 2) * 2;
+      const key = rippleKeyCounter.current++;
+      setRipples((prev) => [...prev, { key, x, y, size }]);
+      setTimeout(() => {
+        setRipples((prev) => prev.filter((r) => r.key !== key));
+      }, duration);
+    },
+    [disabled, duration]
+  );
+  const rippleElements = disabled ? null : /* @__PURE__ */ jsx(
+    "span",
+    {
+      "data-ripple-container": true,
+      className: "pointer-events-none absolute inset-0 overflow-hidden rounded-[inherit]",
+      children: ripples.map((ripple) => /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: "animate-ripple absolute rounded-full opacity-12",
+          style: {
+            left: ripple.x,
+            top: ripple.y,
+            width: ripple.size,
+            height: ripple.size,
+            transform: "translate(-50%, -50%) scale(0)",
+            backgroundColor: color,
+            animationDuration: `${duration}ms`
+          }
+        },
+        ripple.key
+      ))
+    }
+  );
+  return {
+    onMouseDown,
+    ripples: rippleElements
+  };
+}
+var Spinner = () => /* @__PURE__ */ jsxs(
+  "svg",
+  {
+    role: "progressbar",
+    "aria-label": "Loading",
+    className: "h-4 w-4 animate-spin",
+    xmlns: "http://www.w3.org/2000/svg",
+    fill: "none",
+    viewBox: "0 0 24 24",
+    children: [
+      /* @__PURE__ */ jsx("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }),
+      /* @__PURE__ */ jsx(
+        "path",
+        {
+          className: "opacity-75",
+          fill: "currentColor",
+          d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+        }
+      )
+    ]
+  }
+);
+var Button = forwardRef(
+  ({
+    // Variant props (CVA)
+    variant = "filled",
+    color = "primary",
+    size = "medium",
+    fullWidth = false,
+    // Content props
+    icon,
+    trailingIcon,
+    children,
+    // State props
+    loading = false,
+    disableRipple = false,
+    isDisabled = false,
+    // Styling
+    className,
+    // Other props
+    tabIndex = 0,
+    type = "button",
+    onPress,
+    ...props
+  }, ref) => {
+    if (process.env.NODE_ENV === "development") {
+      if (!children) {
+        console.warn(
+          "[Button] Button should have text content. Use IconButton for icon-only buttons."
+        );
+      }
+      if (icon && trailingIcon) {
+        console.warn("[Button] Button should have either icon or trailingIcon, not both.");
+      }
+    }
+    const isButtonDisabled = isDisabled || loading;
+    const { onMouseDown: handleRipple, ripples } = useRipple({
+      disabled: isButtonDisabled || disableRipple
+    });
+    return /* @__PURE__ */ jsxs(
+      ButtonHeadless,
+      {
+        ...props,
+        ref,
+        type,
+        isDisabled: isButtonDisabled,
+        ...onPress && { onPress },
+        tabIndex,
+        onMouseDown: handleRipple,
+        className: cn(
+          // Apply CVA variants
+          buttonVariants({
+            variant,
+            color,
+            size,
+            fullWidth,
+            disabled: isButtonDisabled,
+            loading
+          }),
+          // User custom classes
+          className
+        ),
+        children: [
+          ripples,
+          icon && /* @__PURE__ */ jsx("span", { className: cn("relative z-10 inline-flex shrink-0", loading && "invisible"), children: icon }),
+          loading && /* @__PURE__ */ jsx("span", { className: "relative z-10", children: /* @__PURE__ */ jsx(Spinner, {}) }),
+          /* @__PURE__ */ jsx("span", { className: "relative z-10 inline-flex items-center", children }),
+          trailingIcon && /* @__PURE__ */ jsx("span", { className: cn("relative z-10 inline-flex shrink-0", loading && "invisible"), children: trailingIcon })
+        ]
+      }
+    );
+  }
+);
+Button.displayName = "Button";
+var IconButtonHeadless = forwardRef(
+  ({
+    className,
+    children,
+    tabIndex = 0,
+    onMouseDown,
+    type,
+    selected,
+    "aria-label": ariaLabel,
+    title,
+    ...props
+  }, forwardedRef) => {
+    const internalRef = useRef(null);
+    const ref = forwardedRef ?? internalRef;
+    const { buttonProps } = useButton(
+      {
+        ...props,
+        // Ensure element type is 'button' for proper semantics
+        elementType: "button",
+        // Pass aria-label
+        "aria-label": ariaLabel
+      },
+      ref
+    );
+    const domProps = $65484d02dcb7eb3e$export$457c3d6518dd4c6f(props);
+    const mergedProps = $3ef42575df84b30b$export$9d1611c77c2fe928(
+      buttonProps,
+      domProps,
+      {
+        tabIndex,
+        className,
+        onMouseDown,
+        type: type ?? "button",
+        // Add aria-pressed for toggle buttons (only if selected is defined)
+        ...selected !== void 0 && { "aria-pressed": selected },
+        // Add title if provided
+        ...title && { title }
+      }
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    );
+    return (
+      // eslint-disable-next-line react/button-has-type
+      /* @__PURE__ */ jsx("button", { ...mergedProps, ref, type: type ?? "button", children })
+    );
+  }
+);
+IconButtonHeadless.displayName = "IconButtonHeadless";
+var iconButtonVariants = cva(
+  [
+    // Base classes (always applied)
+    "relative inline-flex items-center justify-center",
+    "overflow-hidden rounded-full",
+    // Circular shape
+    "transition-all duration-200",
+    "focus-visible:outline-primary focus-visible:outline-2 focus-visible:outline-offset-2",
+    // State layers (hover, focus, active)
+    "before:absolute before:inset-0 before:rounded-[inherit] before:transition-opacity before:duration-200",
+    "before:bg-current before:opacity-0",
+    "hover:before:opacity-8",
+    "focus-visible:before:opacity-12",
+    "active:before:opacity-12"
+  ],
+  {
+    variants: {
+      /**
+       * Button variant (MD3 specification)
+       */
+      variant: {
+        standard: "bg-transparent",
+        // No background
+        filled: "shadow-none",
+        // Solid background
+        tonal: "",
+        // Container background
+        outlined: "bg-transparent border border-outline"
+      },
+      /**
+       * Color scheme (MD3 color roles)
+       */
+      color: {
+        primary: "",
+        secondary: "",
+        tertiary: "",
+        error: ""
+      },
+      /**
+       * Button size (square dimensions)
+       */
+      size: {
+        small: "h-8 w-8",
+        // 32×32px
+        medium: "h-10 w-10",
+        // 40×40px (default)
+        large: "h-12 w-12"
+        // 48×48px
+      },
+      /**
+       * Selected state (for toggle buttons)
+       */
+      selected: {
+        true: "",
+        false: ""
+      },
+      /**
+       * Disabled state
+       */
+      isDisabled: {
+        true: "pointer-events-none cursor-not-allowed opacity-38",
+        false: ""
+      }
+    },
+    /**
+     * Compound variants - combinations of variant + color + selected
+     */
+    compoundVariants: [
+      // ====================
+      // STANDARD VARIANTS
+      // ====================
+      {
+        variant: "standard",
+        selected: false,
+        className: "text-on-surface-variant"
+      },
+      {
+        variant: "standard",
+        selected: true,
+        className: "text-primary"
+      },
+      // ====================
+      // FILLED VARIANTS (UNSELECTED)
+      // ====================
+      {
+        variant: "filled",
+        color: "primary",
+        selected: false,
+        className: "bg-primary text-on-primary"
+      },
+      {
+        variant: "filled",
+        color: "secondary",
+        selected: false,
+        className: "bg-secondary text-on-secondary"
+      },
+      {
+        variant: "filled",
+        color: "tertiary",
+        selected: false,
+        className: "bg-tertiary text-on-tertiary"
+      },
+      {
+        variant: "filled",
+        color: "error",
+        selected: false,
+        className: "bg-error text-on-error"
+      },
+      // ====================
+      // FILLED VARIANTS (SELECTED - uses container colors)
+      // ====================
+      {
+        variant: "filled",
+        color: "primary",
+        selected: true,
+        className: "bg-primary-container text-on-primary-container"
+      },
+      {
+        variant: "filled",
+        color: "secondary",
+        selected: true,
+        className: "bg-secondary-container text-on-secondary-container"
+      },
+      {
+        variant: "filled",
+        color: "tertiary",
+        selected: true,
+        className: "bg-tertiary-container text-on-tertiary-container"
+      },
+      {
+        variant: "filled",
+        color: "error",
+        selected: true,
+        className: "bg-error-container text-on-error-container"
+      },
+      // ====================
+      // TONAL VARIANTS (UNSELECTED)
+      // ====================
+      {
+        variant: "tonal",
+        color: "primary",
+        selected: false,
+        className: "bg-secondary-container text-on-secondary-container"
+      },
+      {
+        variant: "tonal",
+        color: "secondary",
+        selected: false,
+        className: "bg-secondary-container text-on-secondary-container"
+      },
+      {
+        variant: "tonal",
+        color: "tertiary",
+        selected: false,
+        className: "bg-tertiary-container text-on-tertiary-container"
+      },
+      {
+        variant: "tonal",
+        color: "error",
+        selected: false,
+        className: "bg-error-container text-on-error-container"
+      },
+      // ====================
+      // TONAL VARIANTS (SELECTED - uses tertiary container)
+      // ====================
+      {
+        variant: "tonal",
+        selected: true,
+        className: "bg-tertiary-container text-on-tertiary-container"
+      },
+      // ====================
+      // OUTLINED VARIANTS (UNSELECTED)
+      // ====================
+      {
+        variant: "outlined",
+        selected: false,
+        className: "text-on-surface-variant"
+      },
+      // ====================
+      // OUTLINED VARIANTS (SELECTED - uses inverse colors)
+      // ====================
+      {
+        variant: "outlined",
+        selected: true,
+        className: "bg-inverse-surface text-inverse-on-surface border-transparent"
+      }
+    ],
+    /**
+     * Default variants
+     */
+    defaultVariants: {
+      variant: "standard",
+      color: "primary",
+      size: "medium",
+      selected: false,
+      isDisabled: false
+    }
+  }
+);
+var IconButton = forwardRef(
+  ({
+    // Variant props (CVA)
+    variant = "standard",
+    color = "primary",
+    size = "medium",
+    // IconButton specific props
+    children,
+    selected,
+    disableRipple = false,
+    className,
+    // React Aria props
+    isDisabled: propIsDisabled = false,
+    onPress,
+    onMouseDown,
+    "aria-label": ariaLabel,
+    title,
+    ...props
+  }, ref) => {
+    if (process.env.NODE_ENV === "development") {
+      if (!ariaLabel) {
+        console.error(
+          "[IconButton] aria-label is required for IconButton. Icon-only buttons need accessible labels for screen readers."
+        );
+      }
+      if (!children) {
+        console.warn("[IconButton] IconButton should have an icon as children.");
+      }
+    }
+    const isDisabled = propIsDisabled;
+    const { onMouseDown: handleRipple, ripples } = useRipple({
+      disabled: isDisabled || disableRipple
+    });
+    const mergedOnMouseDown = (e) => {
+      onMouseDown?.(e);
+      handleRipple(e);
+    };
+    const mergedPropsValue = $3ef42575df84b30b$export$9d1611c77c2fe928(props, {
+      ...onPress && { onPress },
+      onMouseDown: mergedOnMouseDown,
+      isDisabled
+    });
+    return /* @__PURE__ */ jsxs(
+      IconButtonHeadless,
+      {
+        ref,
+        className: cn(
+          // Base classes
+          "relative inline-flex items-center justify-center",
+          "overflow-hidden rounded-full",
+          // Circular shape
+          "transition-all duration-200",
+          "focus-visible:outline-primary focus-visible:outline-2 focus-visible:outline-offset-2",
+          // State layers (hover, focus, active)
+          "before:absolute before:inset-0 before:rounded-[inherit] before:transition-opacity before:duration-200",
+          "before:bg-current before:opacity-0",
+          "hover:before:opacity-8",
+          "focus-visible:before:opacity-12",
+          "active:before:opacity-12",
+          // CVA variants
+          iconButtonVariants({ variant, color, size, selected: selected ?? false, isDisabled }),
+          // User custom classes
+          className
+        ),
+        "aria-label": ariaLabel,
+        ...selected !== void 0 && { selected },
+        ...title && { title },
+        ...mergedPropsValue,
+        children: [
+          ripples,
+          /* @__PURE__ */ jsx("span", { className: "relative z-10 inline-flex shrink-0", children })
+        ]
+      }
+    );
+  }
+);
+IconButton.displayName = "IconButton";
+var FABHeadless = forwardRef(
+  ({
+    className,
+    children,
+    tabIndex = 0,
+    onMouseDown,
+    type,
+    "aria-label": ariaLabel,
+    title,
+    ...props
+  }, forwardedRef) => {
+    const internalRef = useRef(null);
+    const ref = forwardedRef ?? internalRef;
+    const { buttonProps } = useButton(
+      {
+        ...props,
+        elementType: "button"
+      },
+      ref
+    );
+    const domProps = $65484d02dcb7eb3e$export$457c3d6518dd4c6f(props);
+    const mergedProps = $3ef42575df84b30b$export$9d1611c77c2fe928(buttonProps, domProps, {
+      tabIndex,
+      className,
+      onMouseDown,
+      type: type ?? "button",
+      "aria-label": ariaLabel,
+      // Add aria-label
+      // Add title if provided
+      ...title && { title }
+    });
+    return (
+      // eslint-disable-next-line react/button-has-type
+      /* @__PURE__ */ jsx("button", { ...mergedProps, ref, children })
+    );
+  }
+);
+FABHeadless.displayName = "FABHeadless";
+var fabVariants = cva(
+  [
+    // Base classes (always applied)
+    "relative inline-flex items-center justify-center",
+    "overflow-hidden",
+    "transition-all duration-200",
+    "focus-visible:outline-primary focus-visible:outline-2 focus-visible:outline-offset-2",
+    "shrink-0",
+    // Prevent shrinking in flex containers
+    // State layers (hover, focus, active)
+    "before:absolute before:inset-0 before:rounded-[inherit] before:transition-opacity before:duration-200",
+    "before:bg-current before:opacity-0",
+    "hover:before:opacity-8",
+    "focus-visible:before:opacity-12",
+    "active:before:opacity-12",
+    // Elevation (floating appearance)
+    "shadow-elevation-3",
+    // Default elevation
+    "hover:shadow-elevation-4"
+    // Hover elevation
+  ],
+  {
+    variants: {
+      /**
+       * FAB size (controls dimensions and icon size)
+       */
+      size: {
+        small: [
+          "h-10 w-10",
+          // 40×40px
+          "p-2",
+          // 8px padding for 24px icon
+          "rounded-xl",
+          // 12px corner radius (not fully rounded!)
+          "m-1"
+          // 4px margin for 48×48px touch target
+        ],
+        medium: [
+          "h-14 w-14",
+          // 56×56px
+          "p-4",
+          // 16px padding for 24px icon
+          "rounded-2xl"
+          // 16px corner radius
+        ],
+        large: [
+          "h-24 w-24",
+          // 96×96px
+          "p-[30px]",
+          // 30px padding for 36px icon
+          "rounded-[28px]"
+          // 28px corner radius (custom value)
+        ],
+        extended: [
+          "h-14",
+          // 56px height (same as medium)
+          "rounded-2xl",
+          // 16px corner radius
+          "pl-4 pr-5",
+          // Asymmetric padding: 16px leading, 20px trailing
+          "gap-2"
+          // 8px gap between icon and text
+        ]
+      },
+      /**
+       * Color scheme (MD3 color roles)
+       */
+      color: {
+        primary: "",
+        secondary: "",
+        tertiary: "",
+        surface: ""
+      },
+      /**
+       * Disabled state
+       */
+      isDisabled: {
+        true: "pointer-events-none cursor-not-allowed !bg-on-surface/12 !text-on-surface/38 !shadow-none",
+        false: ""
+      }
+    },
+    /**
+     * Compound variants - combinations of size + color
+     */
+    compoundVariants: [
+      // ====================
+      // PRIMARY COLOR
+      // ====================
+      {
+        color: "primary",
+        size: "small",
+        className: "bg-primary-container text-on-primary-container"
+      },
+      {
+        color: "primary",
+        size: "medium",
+        className: "bg-primary-container text-on-primary-container"
+      },
+      {
+        color: "primary",
+        size: "large",
+        className: "bg-primary-container text-on-primary-container"
+      },
+      {
+        color: "primary",
+        size: "extended",
+        className: "bg-primary-container text-on-primary-container"
+      },
+      // ====================
+      // SECONDARY COLOR
+      // ====================
+      {
+        color: "secondary",
+        size: "small",
+        className: "bg-secondary-container text-on-secondary-container"
+      },
+      {
+        color: "secondary",
+        size: "medium",
+        className: "bg-secondary-container text-on-secondary-container"
+      },
+      {
+        color: "secondary",
+        size: "large",
+        className: "bg-secondary-container text-on-secondary-container"
+      },
+      {
+        color: "secondary",
+        size: "extended",
+        className: "bg-secondary-container text-on-secondary-container"
+      },
+      // ====================
+      // TERTIARY COLOR
+      // ====================
+      {
+        color: "tertiary",
+        size: "small",
+        className: "bg-tertiary-container text-on-tertiary-container"
+      },
+      {
+        color: "tertiary",
+        size: "medium",
+        className: "bg-tertiary-container text-on-tertiary-container"
+      },
+      {
+        color: "tertiary",
+        size: "large",
+        className: "bg-tertiary-container text-on-tertiary-container"
+      },
+      {
+        color: "tertiary",
+        size: "extended",
+        className: "bg-tertiary-container text-on-tertiary-container"
+      },
+      // ====================
+      // SURFACE COLOR
+      // ====================
+      {
+        color: "surface",
+        size: "small",
+        className: "bg-surface text-primary"
+      },
+      {
+        color: "surface",
+        size: "medium",
+        className: "bg-surface text-primary"
+      },
+      {
+        color: "surface",
+        size: "large",
+        className: "bg-surface text-primary"
+      },
+      {
+        color: "surface",
+        size: "extended",
+        className: "bg-surface text-primary"
+      }
+    ],
+    /**
+     * Default variants
+     */
+    defaultVariants: {
+      size: "medium",
+      color: "primary",
+      isDisabled: false
+    }
+  }
+);
+var Spinner2 = () => /* @__PURE__ */ jsxs(
+  "svg",
+  {
+    role: "progressbar",
+    "aria-label": "Loading",
+    className: "h-6 w-6 animate-spin",
+    xmlns: "http://www.w3.org/2000/svg",
+    fill: "none",
+    viewBox: "0 0 24 24",
+    children: [
+      /* @__PURE__ */ jsx("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }),
+      /* @__PURE__ */ jsx(
+        "path",
+        {
+          className: "opacity-75",
+          fill: "currentColor",
+          d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+        }
+      )
+    ]
+  }
+);
+var FAB = forwardRef(
+  ({
+    // Variant props (CVA)
+    size = "medium",
+    color = "primary",
+    // FAB specific props
+    icon,
+    children,
+    "aria-label": ariaLabel,
+    loading = false,
+    disableRipple = false,
+    className,
+    // React Aria props
+    isDisabled: propIsDisabled = false,
+    onPress,
+    onMouseDown,
+    title,
+    ...props
+  }, ref) => {
+    if (process.env.NODE_ENV === "development") {
+      if (!icon) {
+        console.warn("[FAB] FAB must have an icon. Please provide the icon prop.");
+      }
+      if (size === "extended" && !children) {
+        console.warn("[FAB] Extended FAB requires text label as children.");
+      }
+      if (size !== "extended" && children) {
+        console.warn(
+          "[FAB] Children (text) is only used for extended FAB. For icon-only FAB, use icon prop only."
+        );
+      }
+    }
+    const isDisabled = propIsDisabled || loading;
+    const { onMouseDown: handleRipple, ripples } = useRipple({
+      disabled: isDisabled || disableRipple
+    });
+    const mergedOnMouseDown = (e) => {
+      onMouseDown?.(e);
+      handleRipple(e);
+    };
+    const mergedPropsValue = $3ef42575df84b30b$export$9d1611c77c2fe928(props, {
+      ...onPress && { onPress },
+      onMouseDown: mergedOnMouseDown,
+      isDisabled
+    });
+    return /* @__PURE__ */ jsxs(
+      FABHeadless,
+      {
+        ref,
+        className: cn(
+          // Base classes
+          "relative inline-flex items-center justify-center",
+          "overflow-hidden transition-all duration-200",
+          "focus-visible:outline-primary focus-visible:outline-2 focus-visible:outline-offset-2",
+          "shrink-0",
+          // State layers (hover, focus, active)
+          "before:absolute before:inset-0 before:rounded-[inherit] before:transition-opacity before:duration-200",
+          "before:bg-current before:opacity-0",
+          "hover:before:opacity-8",
+          "focus-visible:before:opacity-12",
+          "active:before:opacity-12",
+          // Elevation
+          "shadow-elevation-3 hover:shadow-elevation-4",
+          // CVA variants
+          fabVariants({ size, color, isDisabled }),
+          // User custom classes
+          className
+        ),
+        "aria-label": ariaLabel,
+        ...title && { title },
+        ...mergedPropsValue,
+        children: [
+          ripples,
+          icon && /* @__PURE__ */ jsx("span", { className: cn("relative z-10 inline-flex shrink-0", loading && "invisible"), children: icon }),
+          loading && /* @__PURE__ */ jsx("span", { className: "relative z-10", children: /* @__PURE__ */ jsx(Spinner2, {}) }),
+          size === "extended" && children && /* @__PURE__ */ jsx("span", { className: "relative z-10 inline-flex items-center text-sm font-medium tracking-[0.1px]", children })
+        ]
+      }
+    );
+  }
+);
+FAB.displayName = "FAB";
+var textFieldContainerVariants = cva(
+  [
+    // Base container styles
+    "relative inline-flex flex-col"
+  ],
+  {
+    variants: {
+      fullWidth: {
+        true: "w-full",
+        false: "w-auto"
+      }
+    },
+    defaultVariants: {
+      fullWidth: false
+    }
+  }
+);
+var textFieldWrapperVariants = cva(
+  [
+    // Base wrapper styles
+    "relative inline-flex items-center w-full",
+    "transition-all duration-200",
+    "rounded-t"
+  ],
+  {
+    variants: {
+      variant: {
+        filled: ["bg-surface-container-highest", "border-b-2 border-on-surface-variant"],
+        outlined: ["bg-transparent", "border border-outline", "rounded-b"]
+      },
+      size: {
+        small: "min-h-10",
+        medium: "min-h-12",
+        large: "min-h-14"
+      },
+      disabled: {
+        true: ["cursor-not-allowed", "opacity-38"],
+        false: ""
+      },
+      error: {
+        true: "",
+        false: ""
+      },
+      focused: {
+        true: "",
+        false: ""
+      }
+    },
+    compoundVariants: [
+      // FILLED VARIANT - Focused state
+      {
+        variant: "filled",
+        focused: true,
+        error: false,
+        className: "border-primary"
+      },
+      // FILLED VARIANT - Error state
+      {
+        variant: "filled",
+        error: true,
+        className: "border-error"
+      },
+      // FILLED VARIANT - Hover state (handled via group-hover in parent)
+      {
+        variant: "filled",
+        disabled: false,
+        className: "hover:bg-on-surface/[0.08]"
+      },
+      // OUTLINED VARIANT - Focused state
+      {
+        variant: "outlined",
+        focused: true,
+        error: false,
+        className: "border-2 border-primary"
+      },
+      // OUTLINED VARIANT - Error state
+      {
+        variant: "outlined",
+        error: true,
+        className: "border-2 border-error"
+      },
+      // OUTLINED VARIANT - Hover state
+      {
+        variant: "outlined",
+        disabled: false,
+        className: "hover:border-on-surface"
+      }
+    ],
+    defaultVariants: {
+      variant: "filled",
+      size: "medium",
+      disabled: false,
+      error: false,
+      focused: false
+    }
+  }
+);
+var textFieldInputVariants = cva(
+  [
+    // Base input styles
+    "w-full bg-transparent outline-none",
+    "text-on-surface text-base",
+    "placeholder:text-on-surface-variant placeholder:opacity-60",
+    "transition-colors duration-200"
+  ],
+  {
+    variants: {
+      variant: {
+        filled: "px-4",
+        outlined: "px-4"
+      },
+      size: {
+        small: "h-10 py-2 text-sm",
+        medium: "h-12 py-3 text-base",
+        large: "h-14 py-4 text-lg"
+      },
+      disabled: {
+        true: "cursor-not-allowed",
+        false: ""
+      },
+      hasLeadingIcon: {
+        true: "pl-12",
+        false: ""
+      },
+      hasTrailingIcon: {
+        true: "pr-12",
+        false: ""
+      },
+      multiline: {
+        true: "resize-y",
+        false: ""
+      }
+    },
+    defaultVariants: {
+      variant: "filled",
+      size: "medium",
+      disabled: false,
+      hasLeadingIcon: false,
+      hasTrailingIcon: false,
+      multiline: false
+    }
+  }
+);
+var textFieldLabelVariants = cva(
+  [
+    // Base label styles
+    "absolute left-4 transition-all duration-200 pointer-events-none",
+    "text-on-surface-variant origin-top-left"
+  ],
+  {
+    variants: {
+      variant: {
+        filled: "top-4",
+        outlined: "top-3 bg-surface px-1"
+      },
+      size: {
+        small: "text-sm",
+        medium: "text-base",
+        large: "text-lg"
+      },
+      floating: {
+        true: "-translate-y-6 scale-75",
+        false: "scale-100"
+      },
+      focused: {
+        true: "text-primary",
+        false: ""
+      },
+      error: {
+        true: "text-error",
+        false: ""
+      },
+      disabled: {
+        true: "text-on-surface/38",
+        false: ""
+      },
+      hasLeadingIcon: {
+        true: "left-12",
+        false: ""
+      }
+    },
+    compoundVariants: [
+      // Outlined variant floating label positioning
+      {
+        variant: "outlined",
+        floating: true,
+        className: "-top-2"
+      }
+    ],
+    defaultVariants: {
+      variant: "filled",
+      size: "medium",
+      floating: false,
+      focused: false,
+      error: false,
+      disabled: false,
+      hasLeadingIcon: false
+    }
+  }
+);
+var textFieldIconVariants = cva(
+  [
+    // Base icon styles
+    "absolute flex items-center justify-center",
+    "text-on-surface-variant transition-colors duration-200",
+    "pointer-events-none"
+  ],
+  {
+    variants: {
+      position: {
+        leading: "left-3",
+        trailing: "right-3"
+      },
+      size: {
+        small: "w-5 h-5",
+        medium: "w-6 h-6",
+        large: "w-7 h-7"
+      },
+      disabled: {
+        true: "opacity-38",
+        false: ""
+      }
+    },
+    defaultVariants: {
+      position: "leading",
+      size: "medium",
+      disabled: false
+    }
+  }
+);
+var textFieldHelperTextVariants = cva(
+  [
+    // Base helper text styles
+    "text-xs mt-1 px-4 transition-colors duration-200"
+  ],
+  {
+    variants: {
+      type: {
+        description: "text-on-surface-variant",
+        error: "text-error"
+      },
+      disabled: {
+        true: "opacity-38",
+        false: ""
+      }
+    },
+    defaultVariants: {
+      type: "description",
+      disabled: false
+    }
+  }
+);
+var textFieldCharacterCountVariants = cva(
+  [
+    // Base character counter styles
+    "text-xs mt-1 px-4 text-right text-on-surface-variant transition-colors duration-200"
+  ],
+  {
+    variants: {
+      exceeded: {
+        true: "text-error",
+        false: ""
+      },
+      disabled: {
+        true: "opacity-38",
+        false: ""
+      }
+    },
+    defaultVariants: {
+      exceeded: false,
+      disabled: false
+    }
+  }
+);
+var TextFieldHeadless = forwardRef(
+  ({
+    label,
+    description,
+    errorMessage,
+    fullWidth = false,
+    multiline = false,
+    rows = 3,
+    className,
+    inputClassName,
+    labelClassName,
+    descriptionClassName,
+    errorClassName,
+    isInvalid,
+    children,
+    ...restProps
+  }, forwardedRef) => {
+    const internalRef = useRef(null);
+    const ref = forwardedRef ?? internalRef;
+    const inputElementType = multiline ? "textarea" : "input";
+    const {
+      labelProps,
+      inputProps,
+      descriptionProps,
+      errorMessageProps,
+      isInvalid: ariaIsInvalid,
+      validationErrors
+    } = useTextField(
+      {
+        label,
+        description,
+        errorMessage,
+        isInvalid: isInvalid ?? false,
+        inputElementType,
+        ...restProps
+      },
+      ref
+    );
+    const { isFocused, isFocusVisible, focusProps } = useFocusRing({ within: false });
+    const invalid = isInvalid ?? ariaIsInvalid;
+    const showErrorMessage = invalid && (errorMessage ?? validationErrors.length > 0);
+    const displayErrorMessage = errorMessage ?? validationErrors.join(" ");
+    const currentValue = typeof inputProps.value === "string" ? inputProps.value : typeof inputProps.defaultValue === "string" ? inputProps.defaultValue : "";
+    if (typeof children === "function") {
+      const mergedInputProps2 = $3ef42575df84b30b$export$9d1611c77c2fe928(
+        inputProps,
+        focusProps
+      );
+      return children({
+        labelProps,
+        inputProps: mergedInputProps2,
+        descriptionProps,
+        errorMessageProps,
+        isInvalid: invalid,
+        isFocused,
+        isFocusVisible,
+        currentValue,
+        inputRef: ref
+      });
+    }
+    const {
+      isDisabled: _isDisabled,
+      isRequired: _isRequired,
+      isReadOnly: _isReadOnly,
+      validationBehavior: _validationBehavior,
+      validate: _validate,
+      autoFocus: _autoFocus,
+      value: _value,
+      defaultValue: _defaultValue,
+      onChange: _onChange,
+      onFocus: _onFocus,
+      onBlur: _onBlur,
+      onKeyDown: _onKeyDown,
+      onKeyUp: _onKeyUp,
+      onCopy: _onCopy,
+      onCut: _onCut,
+      onPaste: _onPaste,
+      onCompositionStart: _onCompositionStart,
+      onCompositionEnd: _onCompositionEnd,
+      onCompositionUpdate: _onCompositionUpdate,
+      onSelect: _onSelect,
+      onBeforeInput: _onBeforeInput,
+      onInput: _onInput,
+      onFocusChange: _onFocusChange,
+      ...htmlAttrs
+    } = restProps;
+    const mergedInputProps = $3ef42575df84b30b$export$9d1611c77c2fe928(inputProps, focusProps, htmlAttrs, {
+      className: inputClassName
+    });
+    return /* @__PURE__ */ jsxs("div", { className, style: fullWidth ? { width: "100%" } : void 0, children: [
+      label && /* @__PURE__ */ jsx("label", { ...labelProps, className: labelClassName, children: label }),
+      multiline ? /* @__PURE__ */ jsx(
+        "textarea",
+        {
+          ...mergedInputProps,
+          ref,
+          rows
+        }
+      ) : /* @__PURE__ */ jsx("input", { ...mergedInputProps, ref }),
+      description && !showErrorMessage && /* @__PURE__ */ jsx("div", { ...descriptionProps, className: descriptionClassName, children: description }),
+      showErrorMessage && /* @__PURE__ */ jsx("div", { ...errorMessageProps, className: errorClassName, children: displayErrorMessage })
+    ] });
+  }
+);
+TextFieldHeadless.displayName = "TextFieldHeadless";
+var TextField = forwardRef(
+  ({
+    variant = "filled",
+    size = "medium",
+    label,
+    description,
+    errorMessage,
+    leadingIcon,
+    trailingIcon,
+    characterCount = false,
+    maxLength,
+    fullWidth = false,
+    multiline = false,
+    rows = 3,
+    className,
+    isDisabled = false,
+    isInvalid = false,
+    isRequired = false,
+    isReadOnly = false,
+    value,
+    defaultValue,
+    onChange,
+    onFocus,
+    onBlur,
+    spellCheck,
+    ...props
+  }, ref) => {
+    const spellCheckProp = spellCheck === void 0 ? void 0 : typeof spellCheck === "string" ? spellCheck === "true" : spellCheck;
+    const headlessProps = {
+      ...label !== void 0 ? { label } : {},
+      ...description !== void 0 ? { description } : {},
+      ...errorMessage !== void 0 ? { errorMessage } : {},
+      ...value !== void 0 ? { value } : {},
+      ...defaultValue !== void 0 ? { defaultValue } : {},
+      ...onChange !== void 0 ? { onChange } : {},
+      ...onFocus !== void 0 ? { onFocus } : {},
+      ...onBlur !== void 0 ? { onBlur } : {},
+      ...maxLength !== void 0 ? { maxLength } : {},
+      fullWidth,
+      multiline,
+      rows,
+      isDisabled,
+      isInvalid,
+      isRequired,
+      isReadOnly,
+      ...props
+    };
+    return /* @__PURE__ */ jsx(TextFieldHeadless, { ref, ...headlessProps, children: ({
+      labelProps,
+      inputProps,
+      descriptionProps,
+      errorMessageProps,
+      isInvalid: fieldIsInvalid,
+      isFocused,
+      currentValue,
+      inputRef
+    }) => {
+      const hasValue = currentValue.length > 0;
+      const shouldFloatLabel = isFocused || hasValue;
+      const characterLength = currentValue.length;
+      const isCharacterLimitExceeded = maxLength ? characterLength > maxLength : false;
+      return /* @__PURE__ */ jsxs("div", { className: cn(textFieldContainerVariants({ fullWidth }), className), children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              textFieldWrapperVariants({
+                variant,
+                size,
+                disabled: isDisabled,
+                error: fieldIsInvalid,
+                focused: isFocused
+              })
+            ),
+            children: [
+              leadingIcon && /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: textFieldIconVariants({
+                    position: "leading",
+                    size,
+                    disabled: isDisabled
+                  }),
+                  children: leadingIcon
+                }
+              ),
+              label && /* @__PURE__ */ jsxs(
+                "label",
+                {
+                  ...labelProps,
+                  className: cn(
+                    textFieldLabelVariants({
+                      variant,
+                      size,
+                      floating: shouldFloatLabel,
+                      focused: isFocused,
+                      error: fieldIsInvalid,
+                      disabled: isDisabled,
+                      hasLeadingIcon: !!leadingIcon
+                    })
+                  ),
+                  children: [
+                    label,
+                    isRequired && " *"
+                  ]
+                }
+              ),
+              multiline ? /* @__PURE__ */ jsx(
+                "textarea",
+                {
+                  ...inputProps,
+                  ref: inputRef,
+                  className: cn(
+                    textFieldInputVariants({
+                      variant,
+                      size,
+                      disabled: isDisabled,
+                      hasLeadingIcon: !!leadingIcon,
+                      hasTrailingIcon: !!trailingIcon,
+                      multiline: true
+                    })
+                  ),
+                  rows,
+                  spellCheck: spellCheckProp
+                }
+              ) : /* @__PURE__ */ jsx(
+                "input",
+                {
+                  ...inputProps,
+                  ref: inputRef,
+                  className: cn(
+                    textFieldInputVariants({
+                      variant,
+                      size,
+                      disabled: isDisabled,
+                      hasLeadingIcon: !!leadingIcon,
+                      hasTrailingIcon: !!trailingIcon,
+                      multiline: false
+                    })
+                  ),
+                  spellCheck: spellCheckProp
+                }
+              ),
+              trailingIcon && /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: textFieldIconVariants({
+                    position: "trailing",
+                    size,
+                    disabled: isDisabled
+                  }),
+                  children: trailingIcon
+                }
+              )
+            ]
+          }
+        ),
+        description && !fieldIsInvalid && /* @__PURE__ */ jsx(
+          "div",
+          {
+            ...descriptionProps,
+            className: textFieldHelperTextVariants({
+              type: "description",
+              disabled: isDisabled
+            }),
+            children: description
+          }
+        ),
+        fieldIsInvalid && errorMessage && /* @__PURE__ */ jsx(
+          "div",
+          {
+            ...errorMessageProps,
+            className: textFieldHelperTextVariants({
+              type: "error",
+              disabled: isDisabled
+            }),
+            children: errorMessage
+          }
+        ),
+        characterCount && maxLength && /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: textFieldCharacterCountVariants({
+              exceeded: isCharacterLimitExceeded,
+              disabled: isDisabled
+            }),
+            children: [
+              characterLength,
+              " / ",
+              maxLength
+            ]
+          }
+        )
+      ] });
+    } });
+  }
+);
+TextField.displayName = "TextField";
+var $e5be200c675c3b3a$export$aca958c65c314e6c = {
+  badInput: false,
+  customError: false,
+  patternMismatch: false,
+  rangeOverflow: false,
+  rangeUnderflow: false,
+  stepMismatch: false,
+  tooLong: false,
+  tooShort: false,
+  typeMismatch: false,
+  valueMissing: false,
+  valid: true
+};
+var $e5be200c675c3b3a$var$CUSTOM_VALIDITY_STATE = {
+  ...$e5be200c675c3b3a$export$aca958c65c314e6c,
+  customError: true,
+  valid: false
+};
+var $e5be200c675c3b3a$export$dad6ae84456c676a = {
+  isInvalid: false,
+  validationDetails: $e5be200c675c3b3a$export$aca958c65c314e6c,
+  validationErrors: []
+};
+var $e5be200c675c3b3a$export$571b5131b7e65c11 = (createContext)({});
+var $e5be200c675c3b3a$export$a763b9476acd3eb = "__formValidationState" + Date.now();
+function $e5be200c675c3b3a$export$fc1a364ae1f3ff10(props) {
+  if (props[$e5be200c675c3b3a$export$a763b9476acd3eb]) {
+    let { realtimeValidation, displayValidation, updateValidation, resetValidation, commitValidation } = props[$e5be200c675c3b3a$export$a763b9476acd3eb];
+    return {
+      realtimeValidation,
+      displayValidation,
+      updateValidation,
+      resetValidation,
+      commitValidation
+    };
+  }
+  return $e5be200c675c3b3a$var$useFormValidationStateImpl(props);
+}
+function $e5be200c675c3b3a$var$useFormValidationStateImpl(props) {
+  let { isInvalid, validationState, name, value, builtinValidation, validate, validationBehavior = "aria" } = props;
+  if (validationState) isInvalid || (isInvalid = validationState === "invalid");
+  let controlledError = isInvalid !== void 0 ? {
+    isInvalid,
+    validationErrors: [],
+    validationDetails: $e5be200c675c3b3a$var$CUSTOM_VALIDITY_STATE
+  } : null;
+  let clientError = (useMemo)(() => {
+    if (!validate || value == null) return null;
+    let validateErrors = $e5be200c675c3b3a$var$runValidate(validate, value);
+    return $e5be200c675c3b3a$var$getValidationResult(validateErrors);
+  }, [
+    validate,
+    value
+  ]);
+  if (builtinValidation === null || builtinValidation === void 0 ? void 0 : builtinValidation.validationDetails.valid) builtinValidation = void 0;
+  let serverErrors = (useContext)($e5be200c675c3b3a$export$571b5131b7e65c11);
+  let serverErrorMessages = (useMemo)(() => {
+    if (name) return Array.isArray(name) ? name.flatMap((name2) => $e5be200c675c3b3a$var$asArray(serverErrors[name2])) : $e5be200c675c3b3a$var$asArray(serverErrors[name]);
+    return [];
+  }, [
+    serverErrors,
+    name
+  ]);
+  let [lastServerErrors, setLastServerErrors] = (useState)(serverErrors);
+  let [isServerErrorCleared, setServerErrorCleared] = (useState)(false);
+  if (serverErrors !== lastServerErrors) {
+    setLastServerErrors(serverErrors);
+    setServerErrorCleared(false);
+  }
+  let serverError = (useMemo)(() => $e5be200c675c3b3a$var$getValidationResult(isServerErrorCleared ? [] : serverErrorMessages), [
+    isServerErrorCleared,
+    serverErrorMessages
+  ]);
+  let nextValidation = (useRef)($e5be200c675c3b3a$export$dad6ae84456c676a);
+  let [currentValidity, setCurrentValidity] = (useState)($e5be200c675c3b3a$export$dad6ae84456c676a);
+  let lastError = (useRef)($e5be200c675c3b3a$export$dad6ae84456c676a);
+  let commitValidation = () => {
+    if (!commitQueued) return;
+    setCommitQueued(false);
+    let error = clientError || builtinValidation || nextValidation.current;
+    if (!$e5be200c675c3b3a$var$isEqualValidation(error, lastError.current)) {
+      lastError.current = error;
+      setCurrentValidity(error);
+    }
+  };
+  let [commitQueued, setCommitQueued] = (useState)(false);
+  (useEffect)(commitValidation);
+  let realtimeValidation = controlledError || serverError || clientError || builtinValidation || $e5be200c675c3b3a$export$dad6ae84456c676a;
+  let displayValidation = validationBehavior === "native" ? controlledError || serverError || currentValidity : controlledError || serverError || clientError || builtinValidation || currentValidity;
+  return {
+    realtimeValidation,
+    displayValidation,
+    updateValidation(value2) {
+      if (validationBehavior === "aria" && !$e5be200c675c3b3a$var$isEqualValidation(currentValidity, value2)) setCurrentValidity(value2);
+      else nextValidation.current = value2;
+    },
+    resetValidation() {
+      let error = $e5be200c675c3b3a$export$dad6ae84456c676a;
+      if (!$e5be200c675c3b3a$var$isEqualValidation(error, lastError.current)) {
+        lastError.current = error;
+        setCurrentValidity(error);
+      }
+      if (validationBehavior === "native") setCommitQueued(false);
+      setServerErrorCleared(true);
+    },
+    commitValidation() {
+      if (validationBehavior === "native") setCommitQueued(true);
+      setServerErrorCleared(true);
+    }
+  };
+}
+function $e5be200c675c3b3a$var$asArray(v) {
+  if (!v) return [];
+  return Array.isArray(v) ? v : [
+    v
+  ];
+}
+function $e5be200c675c3b3a$var$runValidate(validate, value) {
+  if (typeof validate === "function") {
+    let e = validate(value);
+    if (e && typeof e !== "boolean") return $e5be200c675c3b3a$var$asArray(e);
+  }
+  return [];
+}
+function $e5be200c675c3b3a$var$getValidationResult(errors) {
+  return errors.length ? {
+    isInvalid: true,
+    validationErrors: errors,
+    validationDetails: $e5be200c675c3b3a$var$CUSTOM_VALIDITY_STATE
+  } : null;
+}
+function $e5be200c675c3b3a$var$isEqualValidation(a, b) {
+  if (a === b) return true;
+  return !!a && !!b && a.isInvalid === b.isInvalid && a.validationErrors.length === b.validationErrors.length && a.validationErrors.every((a2, i) => a2 === b.validationErrors[i]) && Object.entries(a.validationDetails).every(([k, v]) => b.validationDetails[k] === v);
+}
+var $a54cdc5c1942b639$var$instance = Math.round(Math.random() * 1e10);
+var $a54cdc5c1942b639$var$i = 0;
+function $a54cdc5c1942b639$export$bca9d026f8e704eb(props) {
+  let name = (useMemo)(() => props.name || `radio-group-${$a54cdc5c1942b639$var$instance}-${++$a54cdc5c1942b639$var$i}`, [
+    props.name
+  ]);
+  var _props_defaultValue;
+  let [selectedValue, setSelected] = ($458b0a5536c1a7cf$export$40bfa8c7b0832715)(props.value, (_props_defaultValue = props.defaultValue) !== null && _props_defaultValue !== void 0 ? _props_defaultValue : null, props.onChange);
+  let [initialValue] = (useState)(selectedValue);
+  let [lastFocusedValue, setLastFocusedValue] = (useState)(null);
+  let validation = ($e5be200c675c3b3a$export$fc1a364ae1f3ff10)({
+    ...props,
+    value: selectedValue
+  });
+  let setSelectedValue = (value) => {
+    if (!props.isReadOnly && !props.isDisabled) {
+      setSelected(value);
+      validation.commitValidation();
+    }
+  };
+  let isInvalid = validation.displayValidation.isInvalid;
+  var _props_defaultValue1;
+  return {
+    ...validation,
+    name,
+    selectedValue,
+    defaultSelectedValue: props.value !== void 0 ? initialValue : (_props_defaultValue1 = props.defaultValue) !== null && _props_defaultValue1 !== void 0 ? _props_defaultValue1 : null,
+    setSelectedValue,
+    lastFocusedValue,
+    setLastFocusedValue,
+    isDisabled: props.isDisabled || false,
+    isReadOnly: props.isReadOnly || false,
+    isRequired: props.isRequired || false,
+    validationState: props.validationState || (isInvalid ? "invalid" : null),
+    isInvalid
+  };
+}
+function $3017fa7ffdddec74$export$8042c6c013fd5226(props = {}) {
+  let { isReadOnly } = props;
+  let [isSelected, setSelected] = ($458b0a5536c1a7cf$export$40bfa8c7b0832715)(props.isSelected, props.defaultSelected || false, props.onChange);
+  let [initialValue] = (useState)(isSelected);
+  function updateSelected(value) {
+    if (!isReadOnly) setSelected(value);
+  }
+  function toggleState() {
+    if (!isReadOnly) setSelected(!isSelected);
+  }
+  var _props_defaultSelected;
+  return {
+    isSelected,
+    defaultSelected: (_props_defaultSelected = props.defaultSelected) !== null && _props_defaultSelected !== void 0 ? _props_defaultSelected : initialValue,
+    setSelected: updateSelected,
+    toggle: toggleState
+  };
+}
+var checkboxVariants = cva(
+  [
+    // Base classes (always applied to label wrapper)
+    "relative inline-flex items-center cursor-pointer select-none",
+    "transition-opacity duration-200"
+  ],
+  {
+    variants: {
+      /**
+       * Disabled state
+       */
+      disabled: {
+        true: "opacity-38 cursor-not-allowed pointer-events-none",
+        false: ""
+      }
+    },
+    defaultVariants: {
+      disabled: false
+    }
+  }
+);
+var checkboxContainerVariants = cva(
+  [
+    // Base classes for checkbox visual container
+    "relative inline-flex items-center justify-center",
+    "w-10 h-10",
+    // 40x40dp touch target (MD3 spec)
+    "flex-shrink-0",
+    "transition-all duration-200",
+    // State layer (hover, focus, active) - MD3 spec: 8%/12%/12% opacity
+    "before:absolute before:inset-0 before:rounded-full before:transition-opacity before:duration-200",
+    "before:bg-current before:opacity-0",
+    "hover:before:opacity-8",
+    "active:before:opacity-12"
+  ],
+  {
+    variants: {
+      /**
+       * Checkbox state (determines visual appearance)
+       */
+      state: {
+        unchecked: "text-on-surface-variant",
+        checked: "text-primary",
+        indeterminate: "text-primary"
+      },
+      /**
+       * Error/invalid state
+       */
+      isInvalid: {
+        true: "text-error",
+        false: ""
+      },
+      /**
+       * Disabled state
+       */
+      disabled: {
+        true: "text-on-surface pointer-events-none",
+        false: ""
+      }
+    },
+    compoundVariants: [
+      // Error state overrides normal colors for all states
+      {
+        state: "unchecked",
+        isInvalid: true,
+        disabled: false,
+        className: "text-error"
+      },
+      {
+        state: "checked",
+        isInvalid: true,
+        disabled: false,
+        className: "text-error"
+      },
+      {
+        state: "indeterminate",
+        isInvalid: true,
+        disabled: false,
+        className: "text-error"
+      }
+    ],
+    defaultVariants: {
+      state: "unchecked",
+      isInvalid: false,
+      disabled: false
+    }
+  }
+);
+var checkboxIconBoxVariants = cva(
+  [
+    // Base classes for the checkbox box
+    // Note: Border radius is applied via SVG rx/ry attributes (2dp) in the component
+    "transition-all duration-200"
+  ],
+  {
+    variants: {
+      /**
+       * Checkbox state
+       */
+      state: {
+        unchecked: [
+          "fill-transparent",
+          "stroke-outline",
+          // MD3: outline color for unchecked
+          "stroke-2"
+          // MD3: 2dp outline width
+        ],
+        checked: [
+          "fill-current",
+          // Uses parent text color (primary or error)
+          "stroke-none"
+        ],
+        indeterminate: [
+          "fill-current",
+          // Uses parent text color (primary or error)
+          "stroke-none"
+        ]
+      },
+      /**
+       * Disabled state
+       */
+      disabled: {
+        true: ["fill-transparent", "stroke-current", "stroke-2"],
+        false: ""
+      }
+    },
+    compoundVariants: [
+      // Disabled state overrides fill for checked/indeterminate
+      {
+        state: "checked",
+        disabled: true,
+        className: "fill-current stroke-none"
+      },
+      {
+        state: "indeterminate",
+        disabled: true,
+        className: "fill-current stroke-none"
+      }
+    ],
+    defaultVariants: {
+      state: "unchecked",
+      disabled: false
+    }
+  }
+);
+var checkboxIconVariants = cva(
+  [
+    "fill-current",
+    // Inherits color from parent
+    "transition-all duration-200"
+  ],
+  {
+    variants: {
+      /**
+       * Icon type
+       */
+      type: {
+        check: "",
+        // Checkmark icon
+        dash: ""
+        // Dash/minus icon
+      }
+    },
+    defaultVariants: {
+      type: "check"
+    }
+  }
+);
+var checkboxLabelVariants = cva(
+  [
+    "text-sm",
+    // MD3: Body Medium (14px)
+    "text-on-surface",
+    "select-none",
+    "ml-4"
+    // 16px spacing between checkbox and label (MD3 standard)
+  ],
+  {
+    variants: {
+      disabled: {
+        true: "",
+        false: ""
+      }
+    },
+    defaultVariants: {
+      disabled: false
+    }
+  }
+);
+var Checkbox = forwardRef(
+  ({
+    // Content props
+    children,
+    // State props
+    isIndeterminate = false,
+    isInvalid = false,
+    disableRipple = false,
+    isDisabled = false,
+    // Styling
+    className,
+    // Other props
+    ...props
+  }, forwardedRef) => {
+    const internalRef = useRef(null);
+    const ref = forwardedRef ?? internalRef;
+    const htmlAttrs = props;
+    const dataTestId = htmlAttrs["data-testid"];
+    const htmlId = htmlAttrs.id;
+    const htmlTitle = htmlAttrs.title;
+    const {
+      "data-testid": _dataTestId,
+      id: _htmlId,
+      title: _htmlTitle,
+      ...restPropsWithoutHtmlAttrs
+    } = props;
+    const state = $3017fa7ffdddec74$export$8042c6c013fd5226(restPropsWithoutHtmlAttrs);
+    const { inputProps, labelProps } = useCheckbox(
+      restPropsWithoutHtmlAttrs,
+      state,
+      ref
+    );
+    const { isFocusVisible, focusProps } = useFocusRing();
+    const isSelected = state.isSelected;
+    const visualState = isIndeterminate ? "indeterminate" : isSelected ? "checked" : "unchecked";
+    const { onMouseDown: handleRipple, ripples } = useRipple({
+      disabled: isDisabled || disableRipple
+    });
+    useEffect(() => {
+      if (ref.current) {
+        ref.current.indeterminate = isIndeterminate;
+      }
+    }, [isIndeterminate, ref]);
+    if (process.env.NODE_ENV === "development") {
+      const ariaProps = restPropsWithoutHtmlAttrs;
+      if (!children && !ariaProps["aria-label"] && !ariaProps["aria-labelledby"]) {
+        console.warn(
+          "[Checkbox] Checkbox should have a label (children) or aria-label for accessibility."
+        );
+      }
+    }
+    return /* @__PURE__ */ jsxs(
+      "label",
+      {
+        ...labelProps,
+        className: cn(
+          checkboxVariants({
+            disabled: isDisabled
+          }),
+          className
+        ),
+        "data-testid": dataTestId,
+        title: htmlTitle,
+        children: [
+          /* @__PURE__ */ jsx(VisuallyHidden, { children: /* @__PURE__ */ jsx("input", { ...mergeProps(inputProps, focusProps), ref, id: htmlId }) }),
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              role: "presentation",
+              className: cn(
+                checkboxContainerVariants({
+                  state: visualState,
+                  isInvalid,
+                  disabled: isDisabled
+                })
+              ),
+              onMouseDown: handleRipple,
+              children: [
+                ripples,
+                /* @__PURE__ */ jsxs(
+                  "svg",
+                  {
+                    width: "18",
+                    height: "18",
+                    viewBox: "0 0 18 18",
+                    "aria-hidden": "true",
+                    className: "relative z-10",
+                    children: [
+                      /* @__PURE__ */ jsx(
+                        "rect",
+                        {
+                          x: "0",
+                          y: "0",
+                          width: "18",
+                          height: "18",
+                          rx: "2",
+                          ry: "2",
+                          className: cn(
+                            checkboxIconBoxVariants({
+                              state: visualState,
+                              disabled: isDisabled
+                            })
+                          )
+                        }
+                      ),
+                      isSelected && !isIndeterminate && /* @__PURE__ */ jsx(
+                        "path",
+                        {
+                          d: "M14.1 4.5L6.3 12.3l-3.4-3.4L1.5 10.3l4.8 4.8 9.2-9.2z",
+                          className: cn(checkboxIconVariants({ type: "check" }), "fill-on-primary")
+                        }
+                      ),
+                      isIndeterminate && /* @__PURE__ */ jsx(
+                        "rect",
+                        {
+                          x: "4",
+                          y: "8",
+                          width: "10",
+                          height: "2",
+                          className: cn(checkboxIconVariants({ type: "dash" }), "fill-on-primary")
+                        }
+                      ),
+                      isFocusVisible && /* @__PURE__ */ jsx(
+                        "rect",
+                        {
+                          x: "-3",
+                          y: "-3",
+                          width: "24",
+                          height: "24",
+                          rx: "12",
+                          fill: "none",
+                          stroke: "currentColor",
+                          strokeWidth: "2",
+                          className: "animate-pulse"
+                        }
+                      )
+                    ]
+                  }
+                )
+              ]
+            }
+          ),
+          children && /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: cn(
+                checkboxLabelVariants({
+                  disabled: isDisabled
+                })
+              ),
+              children
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+Checkbox.displayName = "Checkbox";
+var switchVariants = cva(
+  [
+    // Base classes (always applied to label wrapper)
+    "relative inline-flex items-center cursor-pointer select-none",
+    "transition-opacity duration-200"
+  ],
+  {
+    variants: {
+      /**
+       * Disabled state
+       */
+      disabled: {
+        true: "opacity-38 cursor-not-allowed pointer-events-none",
+        false: ""
+      }
+    },
+    defaultVariants: {
+      disabled: false
+    }
+  }
+);
+var switchTrackVariants = cva(
+  [
+    // Base classes for track
+    "relative flex items-center",
+    "w-[52px] h-[32px]",
+    // MD3 spec: 52x32dp
+    "rounded-full",
+    // MD3 spec: border-radius 16dp (full)
+    "transition-all duration-200"
+  ],
+  {
+    variants: {
+      /**
+       * Switch state (determines track color)
+       */
+      selected: {
+        true: "bg-primary",
+        // MD3: selected track
+        false: "bg-surface-container-highest"
+        // MD3: unselected track
+      },
+      /**
+       * Disabled state
+       */
+      disabled: {
+        true: "bg-on-surface/12",
+        // MD3: 12% opacity for disabled
+        false: ""
+      }
+    },
+    compoundVariants: [
+      // Disabled state overrides normal colors
+      {
+        selected: true,
+        disabled: true,
+        className: "bg-on-surface/12"
+      },
+      {
+        selected: false,
+        disabled: true,
+        className: "bg-on-surface/12"
+      }
+    ],
+    defaultVariants: {
+      selected: false,
+      disabled: false
+    }
+  }
+);
+var switchHandleContainerVariants = cva(
+  [
+    // Base classes for handle container (includes state layer)
+    "absolute flex items-center justify-center",
+    "rounded-full",
+    "transition-all duration-200",
+    // State layer (hover, focus, active) - MD3 spec: 8%/12%/12% opacity
+    "before:absolute before:inset-0 before:rounded-full before:transition-opacity before:duration-200",
+    "before:bg-current before:opacity-0",
+    "hover:before:opacity-8",
+    "active:before:opacity-12"
+  ],
+  {
+    variants: {
+      /**
+       * Switch state (determines handle position and size)
+       */
+      selected: {
+        true: [
+          "left-[28px]",
+          // Position when ON (52px - 24px = 28px)
+          "text-primary"
+          // State layer color
+        ],
+        false: [
+          "left-[8px]",
+          // Position when OFF (centered in left half)
+          "text-on-surface-variant"
+          // State layer color
+        ]
+      },
+      /**
+       * Pressed state (increases handle size)
+       */
+      pressed: {
+        true: "w-[28px] h-[28px]",
+        // MD3: 28dp when pressed
+        false: ""
+      },
+      /**
+       * Disabled state
+       */
+      disabled: {
+        true: "pointer-events-none",
+        false: ""
+      }
+    },
+    compoundVariants: [
+      // Size depends on selected + pressed state
+      {
+        selected: true,
+        pressed: false,
+        className: "w-[24px] h-[24px]"
+        // MD3: 24dp when selected
+      },
+      {
+        selected: false,
+        pressed: false,
+        className: "w-[16px] h-[16px]"
+        // MD3: 16dp when unselected
+      }
+    ],
+    defaultVariants: {
+      selected: false,
+      pressed: false,
+      disabled: false
+    }
+  }
+);
+var switchHandleVariants = cva(
+  [
+    // Base classes for the handle
+    "relative z-10 rounded-full",
+    "transition-all duration-200",
+    "flex items-center justify-center"
+  ],
+  {
+    variants: {
+      /**
+       * Switch state (determines handle color and size)
+       */
+      selected: {
+        true: "bg-on-primary",
+        // MD3: on-primary when selected
+        false: "bg-outline"
+        // MD3: outline when unselected
+      },
+      /**
+       * Pressed state
+       */
+      pressed: {
+        true: "w-[28px] h-[28px]",
+        // MD3: 28dp when pressed
+        false: ""
+      },
+      /**
+       * Disabled state
+       */
+      disabled: {
+        true: "bg-on-surface/38",
+        // MD3: 38% opacity for disabled
+        false: ""
+      }
+    },
+    compoundVariants: [
+      // Size depends on selected + pressed state
+      {
+        selected: true,
+        pressed: false,
+        className: "w-[24px] h-[24px]"
+        // MD3: 24dp when selected
+      },
+      {
+        selected: false,
+        pressed: false,
+        className: "w-[16px] h-[16px]"
+        // MD3: 16dp when unselected
+      },
+      // Disabled state overrides normal colors
+      {
+        selected: true,
+        disabled: true,
+        className: "bg-on-surface/38"
+      },
+      {
+        selected: false,
+        disabled: true,
+        className: "bg-on-surface/38"
+      }
+    ],
+    defaultVariants: {
+      selected: false,
+      pressed: false,
+      disabled: false
+    }
+  }
+);
+var switchIconVariants = cva(
+  [
+    // Base classes for icons
+    "w-4 h-4",
+    // MD3: 16x16dp icon size
+    "transition-all duration-200"
+  ],
+  {
+    variants: {
+      /**
+       * Icon visibility based on state
+       */
+      visible: {
+        true: "opacity-100",
+        false: "opacity-0"
+      },
+      /**
+       * Disabled state
+       */
+      disabled: {
+        true: "opacity-38",
+        false: ""
+      }
+    },
+    defaultVariants: {
+      visible: true,
+      disabled: false
+    }
+  }
+);
+var switchLabelVariants = cva(
+  [
+    "text-sm",
+    // MD3: Body Medium (14px)
+    "text-on-surface",
+    "select-none",
+    "ml-4"
+    // 16px spacing between switch and label (MD3 standard)
+  ],
+  {
+    variants: {
+      disabled: {
+        true: "",
+        false: ""
+      }
+    },
+    defaultVariants: {
+      disabled: false
+    }
+  }
+);
+var Switch = forwardRef(
+  ({
+    // Content props
+    children,
+    icon,
+    selectedIcon,
+    // State props
+    disableRipple = false,
+    isDisabled = false,
+    // Styling
+    className,
+    // Other props
+    ...props
+  }, forwardedRef) => {
+    const internalRef = useRef(null);
+    const ref = forwardedRef ?? internalRef;
+    const htmlAttrs = props;
+    const dataTestId = htmlAttrs["data-testid"];
+    const htmlId = htmlAttrs.id;
+    const htmlTitle = htmlAttrs.title;
+    const {
+      "data-testid": _dataTestId,
+      id: _htmlId,
+      title: _htmlTitle,
+      ...restPropsWithoutHtmlAttrs
+    } = props;
+    const state = $3017fa7ffdddec74$export$8042c6c013fd5226(restPropsWithoutHtmlAttrs);
+    const { inputProps, labelProps, isPressed } = useSwitch(
+      restPropsWithoutHtmlAttrs,
+      state,
+      ref
+    );
+    const { isFocusVisible, focusProps } = useFocusRing();
+    const isSelected = state.isSelected;
+    const { onMouseDown: handleRipple, ripples } = useRipple({
+      disabled: isDisabled || disableRipple
+    });
+    if (process.env.NODE_ENV === "development") {
+      const ariaProps = restPropsWithoutHtmlAttrs;
+      if (!children && !ariaProps["aria-label"] && !ariaProps["aria-labelledby"]) {
+        console.warn(
+          "[Switch] Switch should have a label (children) or aria-label for accessibility."
+        );
+      }
+    }
+    return /* @__PURE__ */ jsxs(
+      "label",
+      {
+        ...labelProps,
+        className: cn(
+          switchVariants({
+            disabled: isDisabled
+          }),
+          className
+        ),
+        "data-testid": dataTestId,
+        title: htmlTitle,
+        children: [
+          /* @__PURE__ */ jsx(VisuallyHidden, { children: /* @__PURE__ */ jsx("input", { ...mergeProps(inputProps, focusProps), ref, id: htmlId }) }),
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              role: "presentation",
+              className: cn(
+                switchTrackVariants({
+                  selected: isSelected,
+                  disabled: isDisabled
+                })
+              ),
+              children: [
+                isFocusVisible && /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: "border-primary absolute inset-[-4px] animate-pulse rounded-full border-2",
+                    "aria-hidden": "true"
+                  }
+                ),
+                /* @__PURE__ */ jsxs(
+                  "div",
+                  {
+                    className: cn(
+                      switchHandleContainerVariants({
+                        selected: isSelected,
+                        pressed: isPressed,
+                        disabled: isDisabled
+                      })
+                    ),
+                    onMouseDown: handleRipple,
+                    role: "presentation",
+                    children: [
+                      ripples,
+                      /* @__PURE__ */ jsxs(
+                        "div",
+                        {
+                          className: cn(
+                            switchHandleVariants({
+                              selected: isSelected,
+                              pressed: isPressed,
+                              disabled: isDisabled
+                            })
+                          ),
+                          children: [
+                            !isSelected && icon && /* @__PURE__ */ jsx(
+                              "div",
+                              {
+                                className: cn(
+                                  switchIconVariants({
+                                    visible: !isSelected,
+                                    disabled: isDisabled
+                                  })
+                                ),
+                                children: icon
+                              }
+                            ),
+                            isSelected && selectedIcon && /* @__PURE__ */ jsx(
+                              "div",
+                              {
+                                className: cn(
+                                  switchIconVariants({
+                                    visible: isSelected,
+                                    disabled: isDisabled
+                                  })
+                                ),
+                                children: selectedIcon
+                              }
+                            )
+                          ]
+                        }
+                      )
+                    ]
+                  }
+                )
+              ]
+            }
+          ),
+          children && /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: cn(
+                switchLabelVariants({
+                  disabled: isDisabled
+                })
+              ),
+              children
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+Switch.displayName = "Switch";
+var RadioGroupContext = createContext(null);
+var RadioGroupHeadless = forwardRef(
+  ({ className, children, renderLabel, ...props }, forwardedRef) => {
+    const internalRef = useRef(null);
+    const ref = forwardedRef ?? internalRef;
+    const state = $a54cdc5c1942b639$export$bca9d026f8e704eb(props);
+    const { radioGroupProps, labelProps } = useRadioGroup(props, state);
+    const dataTestId = props["data-testid"];
+    return /* @__PURE__ */ jsxs("div", { ...radioGroupProps, ref, className, "data-testid": dataTestId, children: [
+      props.label && (renderLabel ? renderLabel(labelProps) : /* @__PURE__ */ jsx("span", { ...labelProps, children: props.label })),
+      /* @__PURE__ */ jsx(RadioGroupContext.Provider, { value: state, children })
+    ] });
+  }
+);
+RadioGroupHeadless.displayName = "RadioGroupHeadless";
+var radioGroupVariants = cva(
+  [
+    // Base classes (always applied to group wrapper)
+    "flex",
+    "gap-4"
+    // 16px spacing between radios (MD3 standard)
+  ],
+  {
+    variants: {
+      /**
+       * Layout orientation
+       */
+      orientation: {
+        vertical: "flex-col",
+        horizontal: "flex-row flex-wrap"
+      },
+      /**
+       * Disabled state
+       */
+      disabled: {
+        true: "",
+        false: ""
+      }
+    },
+    defaultVariants: {
+      orientation: "vertical",
+      disabled: false
+    }
+  }
+);
+var radioGroupLabelVariants = cva(
+  [
+    "text-sm font-medium",
+    // MD3: Body Medium
+    "text-on-surface",
+    "mb-3"
+    // Spacing below label (12px)
+  ],
+  {
+    variants: {
+      disabled: {
+        true: "opacity-38",
+        false: ""
+      }
+    },
+    defaultVariants: {
+      disabled: false
+    }
+  }
+);
+var radioVariants = cva(
+  [
+    // Base classes (always applied to label wrapper)
+    "relative inline-flex items-center cursor-pointer select-none",
+    "transition-opacity duration-200"
+  ],
+  {
+    variants: {
+      /**
+       * Disabled state
+       */
+      disabled: {
+        true: "opacity-38 cursor-not-allowed pointer-events-none",
+        false: ""
+      }
+    },
+    defaultVariants: {
+      disabled: false
+    }
+  }
+);
+var radioContainerVariants = cva(
+  [
+    // Base classes for radio visual container
+    "relative inline-flex items-center justify-center",
+    "w-10 h-10",
+    // 40x40dp touch target (MD3 spec)
+    "flex-shrink-0",
+    "transition-all duration-200",
+    // State layer (hover, focus, active) - MD3 spec: 8%/12%/12% opacity
+    "before:absolute before:inset-0 before:rounded-full before:transition-opacity before:duration-200",
+    "before:bg-current before:opacity-0",
+    "hover:before:opacity-8",
+    "active:before:opacity-12"
+  ],
+  {
+    variants: {
+      /**
+       * Radio state (determines visual appearance)
+       */
+      state: {
+        unselected: "text-on-surface-variant",
+        selected: "text-primary"
+      },
+      /**
+       * Error/invalid state
+       */
+      isInvalid: {
+        true: "text-error",
+        false: ""
+      },
+      /**
+       * Disabled state
+       */
+      disabled: {
+        true: "text-on-surface pointer-events-none",
+        false: ""
+      }
+    },
+    compoundVariants: [
+      // Error state overrides normal colors for all states
+      {
+        state: "unselected",
+        isInvalid: true,
+        disabled: false,
+        className: "text-error"
+      },
+      {
+        state: "selected",
+        isInvalid: true,
+        disabled: false,
+        className: "text-error"
+      }
+    ],
+    defaultVariants: {
+      state: "unselected",
+      isInvalid: false,
+      disabled: false
+    }
+  }
+);
+var radioIconOuterVariants = cva(
+  [
+    // Base classes for the radio outer circle
+    "transition-all duration-200"
+  ],
+  {
+    variants: {
+      /**
+       * Radio state
+       */
+      state: {
+        unselected: [
+          "fill-transparent",
+          "stroke-current",
+          // Uses parent text color (on-surface-variant or error)
+          "stroke-2"
+          // MD3: 2dp outline width
+        ],
+        selected: [
+          "fill-current",
+          // Uses parent text color (primary or error)
+          "stroke-none"
+        ]
+      },
+      /**
+       * Disabled state
+       */
+      disabled: {
+        true: ["fill-transparent", "stroke-current", "stroke-2"],
+        false: ""
+      }
+    },
+    compoundVariants: [
+      // Disabled + selected state overrides fill
+      {
+        state: "selected",
+        disabled: true,
+        className: "fill-current stroke-none"
+      }
+    ],
+    defaultVariants: {
+      state: "unselected",
+      disabled: false
+    }
+  }
+);
+var radioIconInnerVariants = cva(
+  [
+    "fill-current",
+    // Inherits color from parent (on-primary)
+    "transition-all duration-200"
+  ],
+  {
+    variants: {
+      /**
+       * Visibility based on state
+       */
+      visible: {
+        true: "opacity-100 scale-100",
+        false: "opacity-0 scale-0"
+      }
+    },
+    defaultVariants: {
+      visible: false
+    }
+  }
+);
+var radioLabelVariants = cva(
+  [
+    "text-sm",
+    // MD3: Body Medium (14px)
+    "text-on-surface",
+    "select-none",
+    "ml-4"
+    // 16px spacing between radio and label (MD3 standard)
+  ],
+  {
+    variants: {
+      disabled: {
+        true: "",
+        false: ""
+      }
+    },
+    defaultVariants: {
+      disabled: false
+    }
+  }
+);
+var Radio = forwardRef(
+  ({
+    // Content props
+    children,
+    // State props
+    disableRipple = false,
+    isDisabled = false,
+    // Styling
+    className,
+    // Other props
+    ...props
+  }, forwardedRef) => {
+    const state = useContext(RadioGroupContext);
+    if (!state) {
+      throw new Error("Radio must be used within a RadioGroup");
+    }
+    const internalRef = useRef(null);
+    const ref = forwardedRef ?? internalRef;
+    const htmlAttrs = props;
+    const dataTestId = htmlAttrs["data-testid"];
+    const htmlId = htmlAttrs.id;
+    const htmlTitle = htmlAttrs.title;
+    const {
+      "data-testid": _dataTestId,
+      id: _htmlId,
+      title: _htmlTitle,
+      ...restPropsWithoutHtmlAttrs
+    } = props;
+    const {
+      inputProps,
+      isSelected,
+      isDisabled: radioIsDisabled
+    } = useRadio(
+      {
+        ...restPropsWithoutHtmlAttrs,
+        value: props.value
+      },
+      state,
+      ref
+    );
+    const { isFocusVisible, focusProps } = useFocusRing();
+    const finalIsDisabled = isDisabled || radioIsDisabled;
+    const visualState = isSelected ? "selected" : "unselected";
+    const { onMouseDown: handleRipple, ripples } = useRipple({
+      disabled: finalIsDisabled || disableRipple
+    });
+    if (process.env.NODE_ENV === "development") {
+      const ariaProps = restPropsWithoutHtmlAttrs;
+      if (!children && !ariaProps["aria-label"] && !ariaProps["aria-labelledby"]) {
+        console.warn(
+          "[Radio] Radio should have a label (children) or aria-label for accessibility."
+        );
+      }
+    }
+    const isInvalid = state.validationState === "invalid";
+    return /* @__PURE__ */ jsxs(
+      "label",
+      {
+        className: cn(
+          radioVariants({
+            disabled: finalIsDisabled
+          }),
+          className
+        ),
+        "data-testid": dataTestId,
+        title: htmlTitle,
+        children: [
+          /* @__PURE__ */ jsx(VisuallyHidden, { children: /* @__PURE__ */ jsx("input", { ...mergeProps(inputProps, focusProps), ref, id: htmlId }) }),
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              role: "presentation",
+              className: cn(
+                radioContainerVariants({
+                  state: visualState,
+                  isInvalid,
+                  disabled: finalIsDisabled
+                })
+              ),
+              onMouseDown: handleRipple,
+              children: [
+                ripples,
+                /* @__PURE__ */ jsxs(
+                  "svg",
+                  {
+                    width: "20",
+                    height: "20",
+                    viewBox: "0 0 20 20",
+                    "aria-hidden": "true",
+                    className: "relative z-10",
+                    children: [
+                      /* @__PURE__ */ jsx(
+                        "circle",
+                        {
+                          cx: "10",
+                          cy: "10",
+                          r: "9",
+                          className: cn(
+                            radioIconOuterVariants({
+                              state: visualState,
+                              disabled: finalIsDisabled
+                            })
+                          )
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(
+                        "circle",
+                        {
+                          cx: "10",
+                          cy: "10",
+                          r: "5",
+                          className: cn(
+                            radioIconInnerVariants({
+                              visible: isSelected
+                            })
+                          ),
+                          style: { fill: "var(--color-on-primary)" }
+                        }
+                      ),
+                      isFocusVisible && /* @__PURE__ */ jsx(
+                        "circle",
+                        {
+                          cx: "10",
+                          cy: "10",
+                          r: "13",
+                          fill: "none",
+                          stroke: "currentColor",
+                          strokeWidth: "2",
+                          className: "animate-pulse"
+                        }
+                      )
+                    ]
+                  }
+                )
+              ]
+            }
+          ),
+          children && /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: cn(
+                radioLabelVariants({
+                  disabled: finalIsDisabled
+                })
+              ),
+              children
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+Radio.displayName = "Radio";
+var RadioGroup = forwardRef(
+  ({
+    // Content props
+    children,
+    // State props
+    orientation = "vertical",
+    isInvalid = false,
+    isDisabled = false,
+    // Styling
+    className,
+    // Other props
+    ...props
+  }, ref) => {
+    const htmlAttrs = props;
+    const dataTestId = htmlAttrs["data-testid"];
+    const { "data-testid": _dataTestId, ...restPropsWithoutHtmlAttrs } = props;
+    if (process.env.NODE_ENV === "development") {
+      const ariaProps = restPropsWithoutHtmlAttrs;
+      if (!ariaProps.label && !ariaProps["aria-label"] && !ariaProps["aria-labelledby"]) {
+        console.warn(
+          "[RadioGroup] RadioGroup should have a label or aria-label for accessibility."
+        );
+      }
+    }
+    return /* @__PURE__ */ jsx(
+      RadioGroupHeadless,
+      {
+        ...restPropsWithoutHtmlAttrs,
+        isDisabled,
+        ref,
+        className: cn("flex flex-col", className),
+        "data-testid": dataTestId,
+        renderLabel: (labelProps) => /* @__PURE__ */ jsx(
+          "div",
+          {
+            ...labelProps,
+            className: cn(
+              radioGroupLabelVariants({
+                disabled: isDisabled
+              })
+            ),
+            children: props.label
+          }
+        ),
+        children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              radioGroupVariants({
+                orientation,
+                disabled: isDisabled
+              })
+            ),
+            children
+          }
+        )
+      }
+    );
+  }
+);
+RadioGroup.displayName = "RadioGroup";
+var RadioHeadless = forwardRef(
+  ({ className, children, renderRadio, ...props }, forwardedRef) => {
+    const state = useContext(RadioGroupContext);
+    if (!state) {
+      throw new Error("RadioHeadless must be used within a RadioGroupHeadless");
+    }
+    const internalRef = useRef(null);
+    const ref = forwardedRef ?? internalRef;
+    const { inputProps, isSelected, isDisabled, isPressed } = useRadio(props, state, ref);
+    const { isFocusVisible, focusProps } = useFocusRing();
+    return /* @__PURE__ */ jsxs("label", { className, children: [
+      /* @__PURE__ */ jsx("input", { ...inputProps, ...focusProps, ref }),
+      renderRadio?.({
+        isSelected,
+        isDisabled,
+        isFocusVisible,
+        isPressed
+      }),
+      children
+    ] });
+  }
+);
+RadioHeadless.displayName = "RadioHeadless";
+
+export { Button, Checkbox, FAB, FABHeadless, IconButton, IconButtonHeadless, Radio, RadioGroup, RadioGroupHeadless, RadioHeadless, STATE_LAYER_OPACITY, Switch, TYPOGRAPHY_ELEMENT_MAP, TYPOGRAPHY_USAGE, TextField, applyStateLayer, cn, generateMD3Theme, getColorValue, getFontFamily, getMD3Color, getResponsiveTypography, getTypographyClassName, getTypographyForElement, getTypographyStyle, getTypographyToken, hexToRgb, pxToRem, remToPx, rgbToHex, truncateText, withOpacity };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map