@bug-on/m3-expressive 1.0.0

package/dist/forms.mjs

@@ -0,0 +1,4228 @@
+"use client";
+import { m, AnimatePresence, useReducedMotion, LazyMotion, domMax } from 'motion/react';
+import * as React4 from 'react';
+import { useMemo } from 'react';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { cva } from 'class-variance-authority';
+import * as RadixScrollArea from '@radix-ui/react-scroll-area';
+
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+var RippleItem = React4.memo(function RippleItem2({
+  ripple,
+  onDone
+}) {
+  return /* @__PURE__ */ jsx(
+    m.span,
+    {
+      "aria-hidden": "true",
+      style: {
+        position: "absolute",
+        left: ripple.x - ripple.size / 2,
+        top: ripple.y - ripple.size / 2,
+        width: ripple.size,
+        height: ripple.size,
+        borderRadius: "50%",
+        backgroundColor: "currentColor",
+        pointerEvents: "none",
+        transformOrigin: "center"
+      },
+      initial: { scale: 0, opacity: 0.12 },
+      animate: { scale: 1, opacity: 0 },
+      exit: { opacity: 0 },
+      transition: {
+        scale: { duration: 0.5, ease: [0.2, 0, 0, 1] },
+        opacity: { duration: 0.4, ease: "easeOut", delay: 0.1 }
+      },
+      onAnimationComplete: () => onDone(ripple.id)
+    },
+    ripple.id
+  );
+});
+function Ripple({
+  ripples,
+  onRippleDone,
+  disabled = false,
+  respectSystemMotion = true
+}) {
+  const prefersReduced = useReducedMotion();
+  if (disabled) return null;
+  if (respectSystemMotion && prefersReduced) return null;
+  return /* @__PURE__ */ jsx(AnimatePresence, { children: ripples.map((r) => /* @__PURE__ */ jsx(RippleItem, { ripple: r, onDone: onRippleDone }, r.id)) });
+}
+function useRippleState(options = {}) {
+  const { disabled = false } = options;
+  const [ripples, setRipples] = React4.useState([]);
+  const onPointerDown = React4.useCallback(
+    (e) => {
+      if (disabled) return;
+      const rect = e.currentTarget.getBoundingClientRect();
+      const x = e.clientX - rect.left;
+      const y = e.clientY - rect.top;
+      const rippleSize = Math.hypot(rect.width, rect.height) * 2;
+      setRipples((prev) => [
+        ...prev,
+        { id: Date.now(), x, y, size: rippleSize }
+      ]);
+    },
+    [disabled]
+  );
+  const removeRipple = React4.useCallback((id) => {
+    setRipples((prev) => prev.filter((r) => r.id !== id));
+  }, []);
+  return { ripples, onPointerDown, removeRipple };
+}
+var MD3_STANDARD = [0.2, 0, 0, 1];
+var MD3_FAST_EFFECTS = [0.3, 0, 1, 1];
+var CHECKMARK_PATH = "M 4.5 9.5 L 7.5 12.5 L 13.5 5.5";
+var DASH_PATH = "M 4.5 9 L 9 9 L 13.5 9";
+function resolveState(checked, indeterminate, state) {
+  if (state !== void 0) return state;
+  return checked ? "checked" : "unchecked";
+}
+var NEXT_STATE = {
+  unchecked: "checked",
+  checked: "indeterminate",
+  indeterminate: "unchecked"
+};
+var CheckboxVisual = React4.memo(function CheckboxVisual2({
+  isSelected,
+  isIndeterminate,
+  containerBg,
+  containerBorderColor,
+  containerBorderWidth,
+  iconColor,
+  svgPath,
+  pathLength,
+  fillDuration,
+  drawDuration,
+  morphDuration,
+  prefersReduced
+}) {
+  return /* @__PURE__ */ jsx(
+    m.div,
+    {
+      "aria-hidden": "true",
+      className: "relative flex items-center justify-center w-4.5 h-4.5 rounded-sm overflow-hidden",
+      animate: {
+        backgroundColor: containerBg,
+        borderColor: containerBorderColor,
+        borderWidth: containerBorderWidth
+      },
+      transition: {
+        backgroundColor: {
+          duration: fillDuration,
+          ease: isSelected ? MD3_FAST_EFFECTS : "easeOut"
+        },
+        borderColor: { duration: fillDuration, ease: "easeOut" },
+        borderWidth: { duration: fillDuration, ease: "easeOut" }
+      },
+      style: { borderStyle: "solid" },
+      children: /* @__PURE__ */ jsx(AnimatePresence, { children: isSelected && /* @__PURE__ */ jsx(
+        m.svg,
+        {
+          viewBox: "0 0 18 18",
+          fill: "none",
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          width: 18,
+          height: 18,
+          initial: { opacity: 0 },
+          animate: { opacity: 1 },
+          exit: { opacity: 0 },
+          transition: { duration: prefersReduced ? 0 : 0.1 },
+          "aria-hidden": "true",
+          children: /* @__PURE__ */ jsx(
+            m.path,
+            {
+              d: svgPath,
+              stroke: iconColor,
+              strokeWidth: 2,
+              animate: {
+                d: svgPath,
+                pathLength: isIndeterminate ? 1 : pathLength
+              },
+              initial: { pathLength: 0 },
+              transition: {
+                d: { duration: morphDuration, ease: MD3_STANDARD },
+                pathLength: { duration: drawDuration, ease: MD3_STANDARD }
+              }
+            }
+          )
+        },
+        "icon"
+      ) })
+    }
+  );
+});
+function useMergedRef(externalRef, internalRef) {
+  return React4.useCallback(
+    (node) => {
+      internalRef.current = node;
+      if (!externalRef) return;
+      if (typeof externalRef === "function") {
+        externalRef(node);
+      } else {
+        externalRef.current = node;
+      }
+    },
+    [externalRef, internalRef]
+  );
+}
+var CheckboxComponent = React4.forwardRef(
+  ({
+    checked,
+    defaultChecked = false,
+    indeterminate = false,
+    onCheckedChange,
+    state: stateProp,
+    onStateChange,
+    disabled = false,
+    error = false,
+    label,
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledby,
+    "aria-describedby": ariaDescribedby,
+    "aria-required": ariaRequired,
+    name,
+    value,
+    id: idProp,
+    className
+  }, ref) => {
+    var _a;
+    const prefersReduced = (_a = useReducedMotion()) != null ? _a : false;
+    const generatedId = React4.useId();
+    const inputId = idProp != null ? idProp : label ? `checkbox-${generatedId}` : void 0;
+    const [internalState, setInternalState] = React4.useState(
+      () => defaultChecked ? "checked" : "unchecked"
+    );
+    const isControlled = stateProp !== void 0 || checked !== void 0;
+    const baseState = isControlled ? resolveState(checked, false, stateProp) : internalState;
+    const effectiveState = indeterminate ? "indeterminate" : baseState;
+    const [ripples, setRipples] = React4.useState([]);
+    const removeRipple = React4.useCallback(
+      (id) => setRipples((prev) => prev.filter((r) => r.id !== id)),
+      []
+    );
+    const onPointerDown = React4.useCallback(
+      (e) => {
+        if (disabled) return;
+        const rect = e.currentTarget.getBoundingClientRect();
+        const x = e.clientX - rect.left - 4;
+        const y = e.clientY - rect.top - 4;
+        const rippleSize = Math.hypot(40, 40) * 2;
+        setRipples((prev) => [
+          ...prev,
+          { id: Date.now(), x, y, size: rippleSize }
+        ]);
+      },
+      [disabled]
+    );
+    const handleChange = React4.useCallback(
+      (e) => {
+        if (disabled) return;
+        if (stateProp !== void 0) {
+          onStateChange == null ? void 0 : onStateChange(NEXT_STATE[effectiveState]);
+        } else if (checked !== void 0) {
+          onCheckedChange == null ? void 0 : onCheckedChange(e.target.checked);
+        } else {
+          const next = NEXT_STATE[effectiveState];
+          setInternalState(next);
+          if (next === "indeterminate") {
+            onStateChange == null ? void 0 : onStateChange(next);
+          } else {
+            onCheckedChange == null ? void 0 : onCheckedChange(next === "checked");
+          }
+        }
+      },
+      [
+        disabled,
+        stateProp,
+        checked,
+        effectiveState,
+        onStateChange,
+        onCheckedChange
+      ]
+    );
+    const inputRef = React4.useRef(null);
+    const mergedRef = useMergedRef(ref, inputRef);
+    React4.useEffect(() => {
+      if (inputRef.current) {
+        inputRef.current.indeterminate = effectiveState === "indeterminate";
+      }
+    }, [effectiveState]);
+    const isChecked = effectiveState === "checked";
+    const isIndeterminate = effectiveState === "indeterminate";
+    const isSelected = isChecked || isIndeterminate;
+    const ariaChecked = isIndeterminate ? "mixed" : isChecked;
+    const accentColor = error ? "var(--color-m3-error)" : "var(--color-m3-primary)";
+    const onAccentColor = error ? "var(--color-m3-on-error)" : "var(--color-m3-on-primary)";
+    const outlineColor = error ? "var(--color-m3-error)" : "rgba(0, 0, 0, 0.38)";
+    const containerBg = isSelected ? accentColor : "rgba(0, 0, 0, 0)";
+    const containerBorderColor = isSelected ? "rgba(0, 0, 0, 0)" : outlineColor;
+    const containerBorderWidth = isSelected ? 0 : 2;
+    const iconColor = isSelected ? onAccentColor : "rgba(0, 0, 0, 0)";
+    const svgPath = isIndeterminate ? DASH_PATH : CHECKMARK_PATH;
+    const pathLength = isSelected ? 1 : 0;
+    const fillDuration = prefersReduced ? 0 : isSelected ? 0.15 : 0.1;
+    const drawDuration = prefersReduced ? 0 : isSelected ? 0.2 : 0.1;
+    const morphDuration = prefersReduced ? 0 : 0.2;
+    const stateLayerBg = isSelected ? error ? "before:bg-m3-error" : "before:bg-m3-primary" : error ? "before:bg-m3-error" : "before:bg-m3-on-surface";
+    const stateLayerClass = cn(
+      "before:absolute before:inset-0 before:rounded-full before:pointer-events-none",
+      "before:transition-opacity before:duration-150 before:opacity-0",
+      "group-hover/cbx:before:opacity-[0.08]",
+      "group-focus-within/cbx:before:opacity-[0.10]",
+      "group-active/cbx:before:opacity-[0.10]",
+      stateLayerBg
+    );
+    const visualProps = {
+      isSelected,
+      isIndeterminate,
+      containerBg,
+      containerBorderColor,
+      containerBorderWidth,
+      iconColor,
+      svgPath,
+      pathLength,
+      fillDuration,
+      drawDuration,
+      morphDuration,
+      prefersReduced
+    };
+    const touchTargetClass = cn(
+      "relative inline-flex items-center justify-center outline-none shrink-0",
+      "w-12 h-12 group/cbx",
+      disabled && "pointer-events-none"
+    );
+    const stateLayerAndRipple = /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(
+          "absolute flex items-center justify-center w-10 h-10 m-auto inset-0 rounded-full overflow-hidden pointer-events-none",
+          stateLayerClass
+        ),
+        "aria-hidden": "true",
+        children: /* @__PURE__ */ jsx(
+          Ripple,
+          {
+            ripples,
+            onRippleDone: removeRipple,
+            disabled
+          }
+        )
+      }
+    );
+    const hiddenInput = /* @__PURE__ */ jsx(
+      "input",
+      {
+        ref: mergedRef,
+        type: "checkbox",
+        id: inputId,
+        name,
+        value,
+        checked: isChecked,
+        disabled,
+        "aria-checked": ariaChecked,
+        "aria-disabled": disabled || void 0,
+        "aria-invalid": error || void 0,
+        "aria-label": ariaLabel,
+        "aria-labelledby": ariaLabelledby,
+        "aria-describedby": ariaDescribedby,
+        "aria-required": ariaRequired,
+        onChange: handleChange,
+        className: "sr-only"
+      }
+    );
+    if (label) {
+      return /* @__PURE__ */ jsx(LazyMotion, { features: domMax, strict: true, children: /* @__PURE__ */ jsxs(
+        "label",
+        {
+          htmlFor: inputId,
+          className: cn(
+            "inline-flex items-center gap-2 cursor-pointer select-none",
+            disabled && "cursor-not-allowed opacity-[0.38] pointer-events-none",
+            className
+          ),
+          children: [
+            /* @__PURE__ */ jsxs("div", { className: touchTargetClass, onPointerDown, children: [
+              stateLayerAndRipple,
+              hiddenInput,
+              /* @__PURE__ */ jsx(CheckboxVisual, __spreadValues({}, visualProps))
+            ] }),
+            /* @__PURE__ */ jsx("span", { className: "text-sm leading-none text-m3-on-surface", children: label })
+          ]
+        }
+      ) });
+    }
+    return /* @__PURE__ */ jsx(LazyMotion, { features: domMax, strict: true, children: /* @__PURE__ */ jsxs(
+      "label",
+      {
+        htmlFor: inputId,
+        className: cn(touchTargetClass, "cursor-pointer", className),
+        onPointerDown,
+        children: [
+          stateLayerAndRipple,
+          hiddenInput,
+          /* @__PURE__ */ jsx(CheckboxVisual, __spreadValues({}, visualProps))
+        ]
+      }
+    ) });
+  }
+);
+CheckboxComponent.displayName = "Checkbox";
+var Checkbox = React4.memo(CheckboxComponent);
+var TriStateCheckboxComponent = React4.forwardRef((_a, ref) => {
+  var _b = _a, { state, onStateChange } = _b, rest = __objRest(_b, ["state", "onStateChange"]);
+  return /* @__PURE__ */ jsx(Checkbox, __spreadValues({ ref, state, onStateChange }, rest));
+});
+TriStateCheckboxComponent.displayName = "TriStateCheckbox";
+var TriStateCheckbox = React4.memo(TriStateCheckboxComponent);
+function CheckIcon({ className }) {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 24 24",
+      width: 18,
+      height: 18,
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: 2.5,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      className,
+      children: /* @__PURE__ */ jsx("polyline", { points: "20 6 9 17 4 12" })
+    }
+  );
+}
+function CloseIcon({ className }) {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 24 24",
+      width: 18,
+      height: 18,
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: 2.5,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      className,
+      children: [
+        /* @__PURE__ */ jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+        /* @__PURE__ */ jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+      ]
+    }
+  );
+}
+var chipVariants = cva(
+  [
+    // Base layout
+    "inline-flex items-center h-8 rounded-lg",
+    // Typography: LabelLarge
+    "text-sm font-medium leading-none",
+    // Interaction
+    "relative overflow-hidden cursor-pointer select-none",
+    "transition-all duration-200 ease-in-out",
+    // Remove browser default focus; use MD3 focus ring
+    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-1",
+    "focus-visible:ring-m3-secondary",
+    // Expressive scale feedback (MD3 "bouncy" press)
+    "active:scale-[0.98]",
+    // MD3 State Layer (pseudo-element overlay)
+    // Use inset-[-1px] to ensure the state layer covers the 1px border perfectly
+    "before:absolute before:inset-[-1px] before:pointer-events-none before:rounded-lg",
+    "before:transition-opacity before:duration-200 before:opacity-0",
+    "hover:before:opacity-[0.08] focus-visible:before:opacity-[0.10] active:before:opacity-[0.10]"
+  ].join(" "),
+  {
+    variants: {
+      /**
+       * Chip variant controlling default colors and border behavior.
+       * Selected/elevated state overrides are applied via `cn()` at runtime.
+       */
+      variant: {
+        /**
+         * Assist chip – FlatOutlineColor: outline-variant, LabelTextColor: on-surface
+         * Leading icon color: primary (AssistChipTokens.IconColor)
+         */
+        assist: "border border-m3-outline-variant text-m3-on-surface before:bg-m3-on-surface",
+        /**
+         * Filter chip (unselected) – FlatUnselectedOutlineColor: outline-variant
+         * UnselectedLabelTextColor: on-surface-variant
+         */
+        filter: "border border-m3-outline-variant text-m3-on-surface-variant before:bg-m3-on-surface-variant",
+        /**
+         * Input chip (unselected) – UnselectedOutlineColor: outline-variant
+         * UnselectedLabelTextColor: on-surface-variant
+         */
+        input: "border border-m3-outline-variant text-m3-on-surface-variant before:bg-m3-on-surface-variant",
+        /**
+         * Suggestion chip – FlatOutlineColor: outline-variant
+         * LabelTextColor: on-surface-variant (SuggestionChipTokens)
+         */
+        suggestion: "border border-m3-outline-variant text-m3-on-surface-variant before:bg-m3-on-surface-variant"
+      }
+    },
+    defaultVariants: { variant: "assist" }
+  }
+);
+var ChipImpl = React4.forwardRef(
+  (_a, ref) => {
+    var _b = _a, {
+      variant = "assist",
+      elevated = false,
+      selected = false,
+      disabled = false,
+      label,
+      leadingIcon,
+      trailingIcon,
+      avatar,
+      onRemove,
+      className,
+      onClick
+    } = _b, props = __objRest(_b, [
+      "variant",
+      "elevated",
+      "selected",
+      "disabled",
+      "label",
+      "leadingIcon",
+      "trailingIcon",
+      "avatar",
+      "onRemove",
+      "className",
+      "onClick"
+    ]);
+    const { ripples, onPointerDown, removeRipple } = useRippleState({
+      disabled
+    });
+    const isFilter = variant === "filter";
+    const isInput = variant === "input";
+    const resolvedLeadingIcon = isInput && avatar ? avatar : leadingIcon;
+    const showCheckmark = isFilter && selected;
+    const hasTrailingContent = !!trailingIcon || !!onRemove;
+    const hasLeadingContent = isFilter || !!resolvedLeadingIcon;
+    const paddingClass = React4.useMemo(
+      () => cn(
+        !isInput && !hasLeadingContent && !hasTrailingContent && "px-4",
+        !isInput && hasLeadingContent && !hasTrailingContent && "pl-2 pr-4",
+        !isInput && !hasLeadingContent && hasTrailingContent && "pl-4 pr-2",
+        !isInput && hasLeadingContent && hasTrailingContent && "px-2",
+        isInput && !hasLeadingContent && !hasTrailingContent && "px-3",
+        isInput && hasLeadingContent && !hasTrailingContent && "pl-1 pr-3",
+        isInput && !hasLeadingContent && hasTrailingContent && "pl-3 pr-2",
+        isInput && hasLeadingContent && hasTrailingContent && "pl-1 pr-2"
+      ),
+      [isInput, hasLeadingContent, hasTrailingContent]
+    );
+    const stateClass = React4.useMemo(
+      () => cn(
+        (isFilter || isInput) && selected && "bg-m3-secondary-container text-m3-on-secondary-container border-none before:bg-m3-on-secondary-container",
+        elevated && !selected && "bg-m3-surface-container-low border-none elevation-1",
+        elevated && isFilter && selected && "elevation-1",
+        disabled && "opacity-[0.38] pointer-events-none cursor-not-allowed",
+        disabled && !selected && "border-m3-outline-variant/[.12]",
+        disabled && selected && "bg-m3-on-surface/[.12] text-m3-on-surface border-none"
+      ),
+      [isFilter, isInput, selected, elevated, disabled]
+    );
+    const leadingIconColorClass = React4.useMemo(
+      () => cn(
+        (variant === "assist" || variant === "suggestion") && "text-m3-primary",
+        isFilter && !selected && "text-m3-primary",
+        isFilter && selected && "text-m3-on-secondary-container",
+        isInput && !selected && "text-m3-on-surface-variant",
+        isInput && selected && "text-m3-primary"
+      ),
+      [variant, isFilter, isInput, selected]
+    );
+    const isCompound = !!onRemove;
+    const Root2 = isCompound ? "div" : "button";
+    const containerClass = cn(
+      chipVariants({ variant }),
+      !isCompound && paddingClass,
+      !isCompound && "gap-2",
+      stateClass,
+      // When compound, the root div handles the overall shape but not the main interaction
+      // We disable the root's state layer (hover/focus) to avoid the 1px gap issue
+      isCompound && "items-stretch cursor-default active:scale-100 before:opacity-0 gap-0",
+      className
+    );
+    const mainContent = /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(AnimatePresence, { initial: false, mode: "wait", children: isFilter ? showCheckmark ? /* @__PURE__ */ jsx(
+        m.span,
+        {
+          initial: { width: 0, opacity: 0 },
+          animate: { width: 18, opacity: 1 },
+          exit: { width: 0, opacity: 0 },
+          transition: {
+            width: { duration: 0.2, ease: [0.2, 0, 0, 1] },
+            opacity: { duration: 0.15, ease: "easeOut" }
+          },
+          className: "flex items-center justify-center shrink-0 overflow-hidden",
+          "aria-hidden": "true",
+          children: /* @__PURE__ */ jsx(CheckIcon, {})
+        },
+        "checkmark"
+      ) : resolvedLeadingIcon ? /* @__PURE__ */ jsx(
+        m.span,
+        {
+          initial: { width: 0, opacity: 0 },
+          animate: { width: 18, opacity: 1 },
+          exit: { width: 0, opacity: 0 },
+          transition: {
+            width: { duration: 0.2, ease: [0.2, 0, 0, 1] },
+            opacity: { duration: 0.15, ease: "easeOut" }
+          },
+          className: cn(
+            "flex items-center justify-center shrink-0 overflow-hidden [&_.md-icon]:text-[length:inherit]!",
+            leadingIconColorClass
+          ),
+          style: { fontSize: 18 },
+          "aria-hidden": "true",
+          children: resolvedLeadingIcon
+        },
+        "leading-icon"
+      ) : null : resolvedLeadingIcon ? isInput && avatar ? /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: "flex items-center justify-center shrink-0 w-6 h-6 rounded-full overflow-hidden",
+          "aria-hidden": "true",
+          children: resolvedLeadingIcon
+        },
+        "avatar"
+      ) : /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: cn(
+            "flex items-center justify-center shrink-0 w-4.5 h-4.5 [&_.md-icon]:text-[length:inherit]!",
+            leadingIconColorClass
+          ),
+          style: { fontSize: 18 },
+          "aria-hidden": "true",
+          children: resolvedLeadingIcon
+        },
+        "leading-icon"
+      ) : null }),
+      /* @__PURE__ */ jsx("span", { className: "whitespace-nowrap", children: label })
+    ] });
+    return /* @__PURE__ */ jsx(LazyMotion, { features: domMax, strict: true, children: /* @__PURE__ */ jsxs(
+      Root2,
+      __spreadProps(__spreadValues(__spreadProps(__spreadValues({
+        ref: !isCompound ? ref : void 0,
+        type: !isCompound ? "button" : void 0
+      }, isFilter ? {
+        role: "checkbox",
+        "aria-checked": selected
+      } : isInput && !isCompound && selected ? { role: "button", "aria-pressed": true } : isCompound ? { role: "group" } : { role: "button" }), {
+        "aria-disabled": disabled || void 0,
+        tabIndex: isCompound ? -1 : disabled ? -1 : 0,
+        disabled: !isCompound ? disabled : void 0,
+        onClick: !isCompound ? onClick : void 0,
+        onPointerDown: !isCompound ? onPointerDown : void 0,
+        className: containerClass
+      }), isCompound ? {} : props), {
+        children: [
+          !isCompound && /* @__PURE__ */ jsx(Ripple, { ripples, onRippleDone: removeRipple }),
+          isCompound ? /* @__PURE__ */ jsxs(
+            "button",
+            {
+              ref,
+              type: "button",
+              tabIndex: disabled ? -1 : 0,
+              disabled,
+              onClick,
+              onPointerDown,
+              className: cn(
+                "flex items-center h-full grow focus:outline-none appearance-none bg-transparent border-none",
+                "text-inherit font-inherit cursor-pointer",
+                // Move padding here; keep horizontal padding but remove trailing to fit next to X
+                paddingClass,
+                "gap-2",
+                "pr-0",
+                // Re-apply focus ring to internal button instead of root div
+                "focus-visible:ring-2 focus-visible:ring-m3-secondary focus-visible:ring-inset",
+                "rounded-l-[7px] rounded-r-none",
+                // State layer for main area
+                "relative overflow-hidden",
+                "before:absolute before:-inset-px before:pointer-events-none before:bg-current",
+                "before:transition-opacity before:duration-200 before:opacity-0 before:rounded-l-[7px]",
+                "hover:before:opacity-[0.08] focus-visible:before:opacity-[0.10] active:before:opacity-[0.10]"
+              ),
+              children: [
+                /* @__PURE__ */ jsx(Ripple, { ripples, onRippleDone: removeRipple }),
+                mainContent
+              ]
+            }
+          ) : mainContent,
+          hasTrailingContent && /* @__PURE__ */ jsx("span", { className: "flex items-center justify-center shrink-0", children: onRemove ? /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              tabIndex: disabled ? -1 : 0,
+              "aria-label": typeof label === "string" ? `Remove ${label}` : "Remove",
+              onClick: (e) => {
+                e.stopPropagation();
+                onRemove(e);
+              },
+              onPointerDown: (e) => e.stopPropagation(),
+              className: cn(
+                "flex items-center justify-center w-8.5 h-full",
+                // 18px icon + 8px left + 8px right padding
+                "cursor-pointer focus-visible:outline-none",
+                "transition-all duration-150",
+                "relative overflow-hidden rounded-r-[7px] rounded-l-none",
+                "before:absolute before:-inset-px before:pointer-events-none before:bg-current",
+                "before:transition-opacity before:duration-200 before:opacity-0 before:rounded-r-[7px]",
+                "hover:before:opacity-[0.08] active:before:opacity-[0.12]",
+                // TrailingIcon color tokens
+                selected ? "text-m3-on-secondary-container" : "text-m3-on-surface-variant"
+              ),
+              children: /* @__PURE__ */ jsx(CloseIcon, {})
+            }
+          ) : trailingIcon ? /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: cn(
+                "flex items-center justify-center w-4.5 h-4.5 [&_.md-icon]:text-[length:inherit]!",
+                selected ? "text-m3-on-secondary-container" : "text-m3-on-surface-variant"
+              ),
+              style: { fontSize: 18 },
+              "aria-hidden": "true",
+              children: trailingIcon
+            }
+          ) : null })
+        ]
+      })
+    ) });
+  }
+);
+ChipImpl.displayName = "Chip";
+var Chip = React4.memo(ChipImpl);
+var MD3_FAST_EFFECTS2 = [0.3, 0, 1, 1];
+var RadioGroupContext = React4.createContext(
+  null
+);
+function useMergedRef2(externalRef, internalRef) {
+  return React4.useCallback(
+    (node) => {
+      internalRef.current = node;
+      if (!externalRef) return;
+      if (typeof externalRef === "function") {
+        externalRef(node);
+      } else {
+        externalRef.current = node;
+      }
+    },
+    [externalRef, internalRef]
+  );
+}
+var RadioVisual = React4.memo(function RadioVisual2({
+  isSelected,
+  disabled,
+  error,
+  isHovered,
+  prefersReduced
+}) {
+  const accentColor = error ? "var(--color-m3-error)" : "var(--color-m3-primary)";
+  const disabledColor = "rgba(0, 0, 0, 0.38)";
+  const outerStroke = disabled ? disabledColor : isSelected ? accentColor : isHovered ? "var(--color-m3-on-surface)" : "var(--color-m3-on-surface-variant)";
+  const dotFill = disabled ? disabledColor : isSelected ? accentColor : "rgba(0, 0, 0, 0)";
+  const ringDuration = prefersReduced ? 0 : 0.15;
+  const dotDuration = prefersReduced ? 0 : isSelected ? 0.2 : 0.1;
+  const dotEase = isSelected ? MD3_FAST_EFFECTS2 : "easeOut";
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      viewBox: "0 0 20 20",
+      width: 20,
+      height: 20,
+      fill: "none",
+      "aria-hidden": "true",
+      children: [
+        /* @__PURE__ */ jsx(
+          m.circle,
+          {
+            cx: 10,
+            cy: 10,
+            r: 9,
+            strokeWidth: 2,
+            fill: "none",
+            animate: { stroke: outerStroke },
+            transition: { duration: ringDuration, ease: "easeOut" }
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          m.circle,
+          {
+            cx: 10,
+            cy: 10,
+            initial: { r: 0 },
+            animate: { r: isSelected ? 5 : 0, fill: dotFill },
+            transition: {
+              r: { duration: dotDuration, ease: dotEase },
+              fill: { duration: ringDuration, ease: "easeOut" }
+            },
+            stroke: "none"
+          }
+        )
+      ]
+    }
+  );
+});
+var RadioButtonComponent = React4.forwardRef(
+  ({
+    selected,
+    defaultSelected = false,
+    onClick,
+    disabled: disabledProp = false,
+    color,
+    error: errorProp = false,
+    label,
+    value,
+    name: nameProp,
+    id: idProp,
+    className,
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledby,
+    "aria-describedby": ariaDescribedby,
+    required: requiredProp
+  }, ref) => {
+    var _a, _b;
+    const group = React4.useContext(RadioGroupContext);
+    const prefersReduced = (_a = useReducedMotion()) != null ? _a : false;
+    const generatedId = React4.useId();
+    const inputId = idProp != null ? idProp : label ? `radio-${generatedId}` : void 0;
+    const name = (_b = group == null ? void 0 : group.name) != null ? _b : nameProp;
+    const disabled = (group == null ? void 0 : group.disabled) || disabledProp;
+    const error = (group == null ? void 0 : group.error) || errorProp || color === "error";
+    const required = (group == null ? void 0 : group.required) || requiredProp;
+    const [internalSelected, setInternalSelected] = React4.useState(defaultSelected);
+    const isControlled = selected !== void 0;
+    const isSelected = group ? group.selectedValue === value : isControlled ? selected != null ? selected : false : internalSelected;
+    const [ripples, setRipples] = React4.useState([]);
+    const removeRipple = React4.useCallback(
+      (id) => setRipples((prev) => prev.filter((r) => r.id !== id)),
+      []
+    );
+    const onPointerDown = React4.useCallback(
+      (e) => {
+        if (disabled) return;
+        const rect = e.currentTarget.getBoundingClientRect();
+        const x = e.clientX - rect.left - 4;
+        const y = e.clientY - rect.top - 4;
+        const rippleSize = Math.hypot(40, 40) * 2;
+        setRipples((prev) => [
+          ...prev,
+          { id: Date.now(), x, y, size: rippleSize }
+        ]);
+      },
+      [disabled]
+    );
+    const [isHovered, setIsHovered] = React4.useState(false);
+    const onPointerEnter = React4.useCallback(() => {
+      if (!disabled) setIsHovered(true);
+    }, [disabled]);
+    const onPointerLeave = React4.useCallback(() => setIsHovered(false), []);
+    const handleChange = React4.useCallback(
+      (_e) => {
+        if (disabled || onClick === null) return;
+        if (group) {
+          if (value !== void 0) group.onValueChange(value);
+        } else if (!isControlled) {
+          setInternalSelected(true);
+          onClick == null ? void 0 : onClick();
+        } else {
+          onClick == null ? void 0 : onClick();
+        }
+      },
+      [disabled, onClick, group, value, isControlled]
+    );
+    const inputRef = React4.useRef(null);
+    const mergedRef = useMergedRef2(ref, inputRef);
+    const stateLayerBg = error ? "before:bg-m3-error" : "before:bg-m3-primary";
+    const stateLayerClass = cn(
+      "before:absolute before:inset-0 before:rounded-full before:pointer-events-none",
+      "before:transition-opacity before:duration-150 before:opacity-0",
+      "group-hover/radio:before:opacity-[0.08]",
+      "group-focus-within/radio:before:opacity-[0.10]",
+      "group-active/radio:before:opacity-[0.10]",
+      stateLayerBg
+    );
+    const touchTargetClass = cn(
+      "relative inline-flex items-center justify-center outline-none shrink-0",
+      "w-12 h-12 group/radio cursor-pointer",
+      disabled && "pointer-events-none"
+    );
+    const stateLayerAndRipple = /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(
+          "absolute flex items-center justify-center w-10 h-10 m-auto inset-0 rounded-full overflow-hidden pointer-events-none",
+          stateLayerClass
+        ),
+        "aria-hidden": "true",
+        children: /* @__PURE__ */ jsx(
+          Ripple,
+          {
+            ripples,
+            onRippleDone: removeRipple,
+            disabled
+          }
+        )
+      }
+    );
+    const hiddenInput = /* @__PURE__ */ jsx(
+      "input",
+      {
+        ref: mergedRef,
+        type: "radio",
+        id: inputId,
+        name,
+        value,
+        checked: isSelected,
+        disabled,
+        "aria-disabled": disabled || void 0,
+        "aria-label": ariaLabel,
+        "aria-labelledby": ariaLabelledby,
+        "aria-describedby": ariaDescribedby,
+        required,
+        onChange: handleChange,
+        className: "sr-only"
+      }
+    );
+    const visual = /* @__PURE__ */ jsx(
+      RadioVisual,
+      {
+        isSelected,
+        disabled,
+        error,
+        isHovered,
+        prefersReduced
+      }
+    );
+    if (label) {
+      return /* @__PURE__ */ jsx(LazyMotion, { features: domMax, strict: true, children: /* @__PURE__ */ jsxs(
+        "label",
+        {
+          htmlFor: inputId,
+          className: cn(
+            "inline-flex items-center gap-2 cursor-pointer select-none",
+            disabled && "cursor-not-allowed opacity-[0.38] pointer-events-none",
+            className
+          ),
+          children: [
+            /* @__PURE__ */ jsxs(
+              "div",
+              {
+                className: touchTargetClass,
+                onPointerDown,
+                onPointerEnter,
+                onPointerLeave,
+                children: [
+                  stateLayerAndRipple,
+                  hiddenInput,
+                  visual
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx("span", { className: "text-sm leading-none text-m3-on-surface", children: label })
+          ]
+        }
+      ) });
+    }
+    return /* @__PURE__ */ jsx(LazyMotion, { features: domMax, strict: true, children: /* @__PURE__ */ jsxs(
+      "label",
+      {
+        htmlFor: inputId,
+        className: cn(touchTargetClass, className),
+        onPointerDown,
+        onPointerEnter,
+        onPointerLeave,
+        children: [
+          stateLayerAndRipple,
+          hiddenInput,
+          visual
+        ]
+      }
+    ) });
+  }
+);
+RadioButtonComponent.displayName = "RadioButton";
+var RadioButton = React4.memo(RadioButtonComponent);
+var RadioGroupComponent = React4.forwardRef(
+  ({
+    name,
+    value: valueProp,
+    defaultValue,
+    onValueChange,
+    disabled = false,
+    error = false,
+    label,
+    "aria-labelledby": ariaLabelledby,
+    required = false,
+    orientation = "vertical",
+    children,
+    className
+  }, ref) => {
+    const [internalValue, setInternalValue] = React4.useState(defaultValue);
+    const isControlled = valueProp !== void 0;
+    const selectedValue = isControlled ? valueProp : internalValue;
+    const handleValueChange = React4.useCallback(
+      (val) => {
+        if (!isControlled) setInternalValue(val);
+        onValueChange == null ? void 0 : onValueChange(val);
+      },
+      [isControlled, onValueChange]
+    );
+    const groupRef = React4.useRef(null);
+    const mergedRef = useMergedRef2(ref, groupRef);
+    const onKeyDown = React4.useCallback(
+      (e) => {
+        var _a, _b;
+        if (disabled) return;
+        const isNext = e.key === "ArrowDown" || e.key === "ArrowRight";
+        const isPrev = e.key === "ArrowUp" || e.key === "ArrowLeft";
+        if (!isNext && !isPrev) return;
+        e.preventDefault();
+        const inputs = Array.from(
+          (_b = (_a = groupRef.current) == null ? void 0 : _a.querySelectorAll(
+            'input[type="radio"]:not(:disabled)'
+          )) != null ? _b : []
+        );
+        if (inputs.length === 0) return;
+        const currentIdx = inputs.indexOf(
+          document.activeElement
+        );
+        const nextIdx = isNext ? currentIdx < inputs.length - 1 ? currentIdx + 1 : 0 : currentIdx > 0 ? currentIdx - 1 : inputs.length - 1;
+        const target = inputs[nextIdx];
+        target.focus();
+        handleValueChange(target.value);
+      },
+      [disabled, handleValueChange]
+    );
+    const contextValue = React4.useMemo(
+      () => ({
+        name,
+        selectedValue,
+        onValueChange: handleValueChange,
+        disabled,
+        error,
+        required
+      }),
+      [name, selectedValue, handleValueChange, disabled, error, required]
+    );
+    return /* @__PURE__ */ jsx(RadioGroupContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref: mergedRef,
+        role: "radiogroup",
+        "aria-label": label && !ariaLabelledby ? label : void 0,
+        "aria-labelledby": ariaLabelledby,
+        "aria-disabled": disabled || void 0,
+        "aria-required": required || void 0,
+        className: cn(
+          "flex",
+          orientation === "horizontal" ? "flex-row gap-4" : "flex-col gap-1",
+          className
+        ),
+        onKeyDown,
+        children: [
+          label && !ariaLabelledby && /* @__PURE__ */ jsx("span", { className: "sr-only", children: label }),
+          children
+        ]
+      }
+    ) });
+  }
+);
+RadioGroupComponent.displayName = "RadioGroup";
+var RadioGroup = React4.memo(RadioGroupComponent);
+function coerceValue(value, min, max) {
+  return Math.max(min, Math.min(max, value));
+}
+function snapToStep(value, min, step) {
+  if (step <= 0) return value;
+  const steps = Math.round((value - min) / step);
+  return Number((min + steps * step).toPrecision(10));
+}
+function valueToPercent(value, min, max) {
+  if (max === min) return 0;
+  return (value - min) / (max - min);
+}
+function percentToValue(percent, min, max, step) {
+  const raw = min + percent * (max - min);
+  const snapped = snapToStep(raw, min, step);
+  return coerceValue(snapped, min, max);
+}
+function getKeyboardDelta(key, step, min, max) {
+  const range = max - min;
+  const discreteStep = step > 0 ? step : range / 100;
+  switch (key) {
+    case "ArrowRight":
+    case "ArrowUp":
+      return discreteStep;
+    case "ArrowLeft":
+    case "ArrowDown":
+      return -discreteStep;
+    case "PageUp":
+      return step > 0 ? snapToStep(range * 0.1, 0, step) : range * 0.1;
+    case "PageDown":
+      return step > 0 ? -snapToStep(range * 0.1, 0, step) : -(range * 0.1);
+    default:
+      return null;
+  }
+}
+function generateTicks(min, max, step) {
+  if (step <= 0) return [];
+  const ticks = [];
+  let current = min;
+  while (current <= max) {
+    ticks.push(Number(current.toPrecision(10)));
+    current += step;
+  }
+  if (ticks[ticks.length - 1] !== max) {
+    ticks.push(max);
+  }
+  return ticks;
+}
+function useSliderMath({
+  min,
+  max,
+  step
+}) {
+  return useMemo(
+    () => ({
+      coerce: (v) => coerceValue(v, min, max),
+      snap: (v) => snapToStep(v, min, step),
+      toPercent: (v) => valueToPercent(v, min, max),
+      fromPercent: (pct) => percentToValue(pct, min, max, step),
+      getKeyDelta: (key) => getKeyboardDelta(key, step, min, max),
+      ticks: generateTicks(min, max, step)
+    }),
+    [min, max, step]
+  );
+}
+
+// src/ui/slider/slider.tokens.ts
+var SliderTokens = {
+  // ── Track sizes (height for horizontal, width for vertical) ────────────────
+  trackSizes: {
+    xs: 16,
+    s: 24,
+    m: 40,
+    l: 56,
+    xl: 96
+  },
+  // ── Track shapes (border radius) ──────────────────────────────────────────
+  trackShapes: {
+    xs: 8,
+    s: 8,
+    m: 12,
+    l: 16,
+    xl: 28
+  },
+  // ── Thumb (handle) ────────────────────────────────────────────────────────
+  /** Thumb height grows with track size */
+  thumbHeights: {
+    xs: 44,
+    s: 44,
+    m: 52,
+    l: 68,
+    xl: 108
+  },
+  /**
+   * Thumb width at rest and on hover.
+   * MD3 Expressive handle pill: 4dp wide.
+   */
+  thumbWidthDefault: 4,
+  /**
+   * Thumb width while pressed/dragging.
+   * "Squeeze" animation: 4dp → 2dp (M3 Expressive behavior).
+   */
+  thumbWidthPressed: 2,
+  // ── Track–thumb gap ───────────────────────────────────────────────────────
+  /**
+   * Transparent gap between the active/inactive track segments and the thumb.
+   * Maps to ActiveHandleLeadingSpace / ActiveHandleTrailingSpace = 6dp.
+   *
+   * This gap is rendered by mathematically subtracting it from the track
+   * segment width — NOT using margin/padding.
+   */
+  thumbGap: 6,
+  // ── Track corner radii ────────────────────────────────────────────────────
+  /**
+   * Corner radius on the INNER ends of each track segment (facing the thumb).
+   * Fixed to 2px according to MD3 Expressive Slider specs (TrackInsideCornerSize).
+   * Outer ends use `trackSize / 2` (pill cap) — computed inline per component.
+   */
+  trackInnerRadius: 2,
+  // ── Stop indicator / Tick ─────────────────────────────────────────────────
+  /** Tick dot size (width and height). = 4dp. */
+  tickSize: 4,
+  // ── Touch target ─────────────────────────────────────────────────────────
+  /**
+   * Minimum touch target for the thumb wrapper.
+   * MD3 requires 48dp minimum touch target for interactive elements.
+   */
+  thumbTouchTarget: 48,
+  // ── Value indicator ───────────────────────────────────────────────────────
+  /** Offset above the thumb center for the value indicator tooltip. */
+  valueIndicatorOffset: 52,
+  // ── Inset icon ────────────────────────────────────────────────────────────
+  /** Standard icon size map for inset icons inside the track. */
+  insetIconSizes: {
+    xs: 0,
+    s: 0,
+    m: 24,
+    l: 24,
+    xl: 32
+  },
+  /**
+   * Padding between icon and track edge (horizontal).
+   * Keeps the icon visually centered within the pill track.
+   */
+  insetIconPadding: 4
+};
+var SliderColors = {
+  // ── Track ─────────────────────────────────────────────────────────────────
+  /** Active track color. Maps to ActiveTrackColor token. */
+  activeTrack: "var(--md-sys-color-primary)",
+  /** Inactive track color. Maps to InactiveTrackColor token. */
+  inactiveTrack: "var(--md-sys-color-secondary-container)",
+  /**
+   * Disabled track color.
+   * Uses opacity + on-surface per MD3 disabled state spec.
+   */
+  disabledActiveTrack: "var(--md-sys-color-on-surface)",
+  disabledInactiveTrack: "var(--md-sys-color-on-surface)",
+  // ── Thumb ─────────────────────────────────────────────────────────────────
+  /** Thumb (handle) color. Maps to HandleColor token. */
+  thumb: "var(--md-sys-color-primary)",
+  /** Disabled thumb color. */
+  disabledThumb: "var(--md-sys-color-on-surface)",
+  // ── Value indicator ───────────────────────────────────────────────────────
+  /** Value indicator (tooltip) background. Maps to InverseSurface. */
+  valueIndicatorBg: "var(--md-sys-color-inverse-surface)",
+  /** Value indicator (tooltip) text. Maps to InverseOnSurface. */
+  valueIndicatorText: "var(--md-sys-color-inverse-on-surface)",
+  // ── Ticks ────────────────────────────────────────────────────────────────
+  /**
+   * Tick on the INACTIVE portion of the track.
+   * Maps to TickMarkActiveContainerColor (in spec: primary color stands out).
+   */
+  tickOnInactive: "var(--md-sys-color-primary)",
+  /**
+   * Tick on the ACTIVE portion of the track.
+   * Maps to TickMarkInactiveContainerColor (secondary-container blends in).
+   */
+  tickOnActive: "var(--md-sys-color-secondary-container)",
+  disabledTick: "var(--md-sys-color-on-surface)"
+};
+var SLIDER_THUMB_SPRING = {
+  type: "spring",
+  stiffness: 500,
+  damping: 40
+};
+var SLIDER_INDICATOR_TRANSITION = {
+  type: "spring",
+  stiffness: 450,
+  damping: 32
+};
+var ValueIndicator = React4.memo(function ValueIndicator2({
+  value,
+  visible,
+  orientation,
+  formatValue,
+  prefersReduced,
+  trackSize
+}) {
+  const label = formatValue ? formatValue(value) : String(Math.round(value));
+  const isHorizontal = orientation === "horizontal";
+  const thumbHeight = SliderTokens.thumbHeights[trackSize];
+  const offsetFromCenter = thumbHeight / 2 + 8;
+  return /* @__PURE__ */ jsx(AnimatePresence, { children: visible && /* @__PURE__ */ jsx(
+    m.div,
+    {
+      role: "tooltip",
+      "aria-hidden": "true",
+      initial: prefersReduced ? false : {
+        scale: 0,
+        opacity: 0,
+        y: isHorizontal ? 6 : 0,
+        x: !isHorizontal ? -6 : 0
+      },
+      animate: { scale: 1, opacity: 1, y: 0, x: 0 },
+      exit: prefersReduced ? {} : {
+        scale: 0,
+        opacity: 0,
+        y: isHorizontal ? 6 : 0,
+        x: !isHorizontal ? -6 : 0
+      },
+      transition: prefersReduced ? { duration: 0 } : SLIDER_INDICATOR_TRANSITION,
+      className: cn(
+        "absolute pointer-events-none select-none",
+        "rounded-full px-2.5 py-1 text-xs font-medium leading-none whitespace-nowrap",
+        // Position: above for horizontal, right for vertical
+        isHorizontal ? "-translate-x-1/2 left-1/2" : "translate-y-1/2 bottom-1/2"
+      ),
+      style: __spreadValues({
+        backgroundColor: SliderColors.valueIndicatorBg,
+        color: SliderColors.valueIndicatorText,
+        transformOrigin: isHorizontal ? "bottom center" : "center left"
+      }, isHorizontal ? { bottom: `calc(50% + ${offsetFromCenter}px)` } : { left: `calc(50% + ${offsetFromCenter}px)` }),
+      children: label
+    },
+    "value-indicator"
+  ) });
+});
+var SliderThumb = React4.memo(function SliderThumb2({
+  value,
+  percent,
+  min,
+  max,
+  step,
+  disabled,
+  orientation,
+  showValueIndicator,
+  trackRef,
+  onValueChange,
+  onValueChangeEnd,
+  formatValue,
+  thumbId,
+  trackSize,
+  variant,
+  zIndex = 1,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledBy
+}) {
+  var _a;
+  const isHorizontal = orientation === "horizontal";
+  const insetLimit = SliderTokens.thumbGap + SliderTokens.thumbWidthDefault / 2;
+  const trackInset = Math.min(
+    SliderTokens.trackSizes[trackSize] / 2,
+    insetLimit
+  );
+  const posTarget = isHorizontal ? "left" : "bottom";
+  const motionStyle = {
+    [posTarget]: `calc(${trackInset}px + ${percent} * (100% - ${trackInset * 2}px))`
+  };
+  const prefersReduced = (_a = useReducedMotion()) != null ? _a : false;
+  const [isDragging, setIsDragging] = React4.useState(false);
+  const [isHovered, setIsHovered] = React4.useState(false);
+  const [isFocused, setIsFocused] = React4.useState(false);
+  const pointerIdRef = React4.useRef(null);
+  const thumbRef = React4.useRef(null);
+  const showIndicator = showValueIndicator && (isDragging || isHovered || isFocused);
+  const positionStyle = isHorizontal ? __spreadProps(__spreadValues({
+    position: "absolute"
+  }, motionStyle), {
+    top: "50%",
+    transform: "translate(-50%, -50%)",
+    zIndex
+  }) : __spreadProps(__spreadValues({
+    position: "absolute"
+  }, motionStyle), {
+    left: "50%",
+    transform: "translate(-50%, 50%)",
+    zIndex
+  });
+  const getDeltaFromPointer = React4.useCallback(
+    (e) => {
+      const trackEl = trackRef.current;
+      if (!trackEl) return percent;
+      const rect = trackEl.getBoundingClientRect();
+      const space = isHorizontal ? rect.width : rect.height;
+      const insetLimit2 = SliderTokens.thumbGap + SliderTokens.thumbWidthDefault / 2;
+      const trackInset2 = Math.min(
+        SliderTokens.trackSizes[trackSize] / 2,
+        insetLimit2
+      );
+      const safeSpace = space - trackInset2 * 2;
+      if (safeSpace <= 0) return percent;
+      let rawPercent;
+      if (isHorizontal) {
+        rawPercent = (e.clientX - rect.left - trackInset2) / safeSpace;
+      } else {
+        rawPercent = (rect.bottom - e.clientY - trackInset2) / safeSpace;
+      }
+      const clamped = Math.max(0, Math.min(1, rawPercent));
+      const range = max - min;
+      const rawValue = min + clamped * range;
+      const snapped = step > 0 ? Math.round((rawValue - min) / step) * step + min : rawValue;
+      return Math.max(min, Math.min(max, snapped));
+    },
+    [isHorizontal, max, min, percent, step, trackRef, trackSize]
+  );
+  const handlePointerDown = React4.useCallback(
+    (e) => {
+      if (disabled) return;
+      e.preventDefault();
+      e.stopPropagation();
+      e.currentTarget.setPointerCapture(e.pointerId);
+      pointerIdRef.current = e.pointerId;
+      setIsDragging(true);
+    },
+    [disabled]
+  );
+  const handlePointerMove = React4.useCallback(
+    (e) => {
+      if (!isDragging || e.pointerId !== pointerIdRef.current) return;
+      const newValue = getDeltaFromPointer(e.nativeEvent);
+      onValueChange(newValue);
+    },
+    [isDragging, getDeltaFromPointer, onValueChange]
+  );
+  const handlePointerUp = React4.useCallback(
+    (e) => {
+      if (e.pointerId !== pointerIdRef.current) return;
+      e.currentTarget.releasePointerCapture(e.pointerId);
+      pointerIdRef.current = null;
+      setIsDragging(false);
+      onValueChangeEnd == null ? void 0 : onValueChangeEnd(value);
+    },
+    [onValueChangeEnd, value]
+  );
+  const handleKeyDown = React4.useCallback(
+    (e) => {
+      if (disabled) return;
+      if (e.key === "Home") {
+        e.preventDefault();
+        onValueChange(min);
+        onValueChangeEnd == null ? void 0 : onValueChangeEnd(min);
+        return;
+      }
+      if (e.key === "End") {
+        e.preventDefault();
+        onValueChange(max);
+        onValueChangeEnd == null ? void 0 : onValueChangeEnd(max);
+        return;
+      }
+      const delta = getKeyboardDelta(e.key, step, min, max);
+      if (delta === null) return;
+      e.preventDefault();
+      const newValue = Math.max(min, Math.min(max, value + delta));
+      onValueChange(newValue);
+      onValueChangeEnd == null ? void 0 : onValueChangeEnd(newValue);
+    },
+    [disabled, max, min, onValueChange, onValueChangeEnd, step, value]
+  );
+  const thumbColor = disabled ? SliderColors.disabledThumb : `var(--md-sys-color-${variant})`;
+  const squeezeSize = isDragging ? SliderTokens.thumbWidthPressed : SliderTokens.thumbWidthDefault;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: __spreadProps(__spreadValues({}, positionStyle), {
+        width: SliderTokens.thumbTouchTarget,
+        height: SliderTokens.thumbTouchTarget,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        touchAction: "none"
+      }),
+      className: cn(
+        "cursor-grab",
+        isDragging && "cursor-grabbing",
+        disabled && "cursor-not-allowed"
+      ),
+      onPointerDown: handlePointerDown,
+      onPointerMove: handlePointerMove,
+      onPointerUp: handlePointerUp,
+      onPointerCancel: handlePointerUp,
+      children: [
+        /* @__PURE__ */ jsx(
+          ValueIndicator,
+          {
+            value,
+            visible: showIndicator,
+            orientation,
+            formatValue,
+            prefersReduced,
+            trackSize
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          m.div,
+          {
+            ref: thumbRef,
+            id: thumbId,
+            role: "slider",
+            "aria-valuemin": min,
+            "aria-valuemax": max,
+            "aria-valuenow": value,
+            "aria-orientation": orientation,
+            "aria-disabled": disabled || void 0,
+            "aria-label": ariaLabel,
+            "aria-labelledby": ariaLabelledBy,
+            tabIndex: disabled ? -1 : 0,
+            onKeyDown: handleKeyDown,
+            onFocus: () => setIsFocused(true),
+            onBlur: () => setIsFocused(false),
+            onMouseEnter: () => !disabled && setIsHovered(true),
+            onMouseLeave: () => setIsHovered(false),
+            animate: __spreadProps(__spreadValues({}, isHorizontal ? { width: squeezeSize } : { height: squeezeSize }), {
+              backgroundColor: thumbColor,
+              opacity: disabled ? 0.38 : 1
+            }),
+            transition: prefersReduced ? { duration: 0 } : SLIDER_THUMB_SPRING,
+            className: cn(
+              "relative shrink-0 rounded-full select-none outline-none",
+              "focus-visible:outline-2 focus-visible:outline-offset-2",
+              "focus-visible:outline-(--md-sys-color-secondary)"
+            ),
+            style: __spreadProps(__spreadValues({}, isHorizontal ? {
+              height: SliderTokens.thumbHeights[trackSize],
+              width: SliderTokens.thumbWidthDefault,
+              willChange: "width"
+            } : {
+              width: SliderTokens.thumbHeights[trackSize],
+              height: SliderTokens.thumbWidthDefault,
+              willChange: "height"
+            }), {
+              backgroundColor: thumbColor
+            })
+          }
+        )
+      ]
+    }
+  );
+});
+var RangeTrack = React4.memo(function RangeTrack2({
+  startPercent,
+  endPercent,
+  trackSize,
+  orientation,
+  variant,
+  disabled,
+  ticks,
+  min,
+  max,
+  trackShape = "md3",
+  trackRef,
+  onTrackPointerDown
+}) {
+  const isHorizontal = orientation === "horizontal";
+  const size = SliderTokens.trackSizes[trackSize];
+  const thumbHeight = SliderTokens.thumbHeights[trackSize];
+  const { thumbGap, thumbWidthDefault, tickSize } = SliderTokens;
+  const thumbHalfWidth = thumbWidthDefault / 2;
+  const activeTrack = disabled ? SliderColors.disabledActiveTrack : `var(--md-sys-color-${variant})`;
+  const inactiveTrack = disabled ? SliderColors.disabledInactiveTrack : `var(--md-sys-color-${variant}-container)`;
+  const innerR = SliderTokens.trackInnerRadius;
+  let outerR = size / 2;
+  if (trackShape === "md3") {
+    outerR = Math.min(SliderTokens.trackShapes[trackSize], size / 2);
+  } else if (typeof trackShape === "number") {
+    outerR = Math.min(trackShape, size / 2);
+  }
+  if (isHorizontal) {
+    const insetLimit2 = thumbGap + thumbWidthDefault / 2;
+    const trackInset2 = Math.min(size / 2, insetLimit2);
+    const cxStart = `calc(${trackInset2}px + ${startPercent} * (100% - ${trackInset2 * 2}px))`;
+    const cxEnd = `calc(${trackInset2}px + ${endPercent} * (100% - ${trackInset2 * 2}px))`;
+    const gapWithThumbStr2 = `${thumbGap + thumbHalfWidth}px`;
+    const leadingWidth = `max(0px, calc(${cxStart} - ${gapWithThumbStr2}))`;
+    const activeLeft = `calc(${cxStart} + ${gapWithThumbStr2})`;
+    const activeWidth = `max(0px, calc(${cxEnd} - ${cxStart} - ${gapWithThumbStr2} * 2))`;
+    const trailingLeft = `calc(${cxEnd} + ${gapWithThumbStr2})`;
+    const trailingWidth = `max(0px, calc(100% - (${cxEnd} + ${gapWithThumbStr2})))`;
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref: trackRef,
+        className: cn(
+          "relative w-full",
+          disabled ? "cursor-not-allowed" : "cursor-pointer"
+        ),
+        style: { height: thumbHeight },
+        onPointerDown: onTrackPointerDown,
+        "aria-hidden": "true",
+        children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              "aria-hidden": "true",
+              style: {
+                position: "absolute",
+                left: 0,
+                top: "50%",
+                transform: "translateY(-50%)",
+                width: leadingWidth,
+                height: size,
+                backgroundColor: inactiveTrack,
+                opacity: disabled ? 0.38 : 1,
+                borderTopLeftRadius: outerR,
+                borderBottomLeftRadius: outerR,
+                borderTopRightRadius: innerR,
+                borderBottomRightRadius: innerR
+              }
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              "aria-hidden": "true",
+              style: {
+                position: "absolute",
+                left: activeLeft,
+                top: "50%",
+                transform: "translateY(-50%)",
+                width: activeWidth,
+                height: size,
+                backgroundColor: activeTrack,
+                opacity: disabled ? 0.38 : 1,
+                borderTopLeftRadius: startPercent <= 0 ? outerR : innerR,
+                borderBottomLeftRadius: startPercent <= 0 ? outerR : innerR,
+                borderTopRightRadius: endPercent >= 1 ? outerR : innerR,
+                borderBottomRightRadius: endPercent >= 1 ? outerR : innerR
+              }
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              "aria-hidden": "true",
+              style: {
+                position: "absolute",
+                left: trailingLeft,
+                top: "50%",
+                transform: "translateY(-50%)",
+                width: trailingWidth,
+                height: size,
+                backgroundColor: inactiveTrack,
+                opacity: disabled ? 0.38 : 1,
+                borderTopLeftRadius: innerR,
+                borderBottomLeftRadius: innerR,
+                borderTopRightRadius: outerR,
+                borderBottomRightRadius: outerR
+              }
+            }
+          ),
+          ticks.map((tick) => {
+            const tickPct = (tick - min) / (max - min);
+            const isActive = tickPct > startPercent && tickPct < endPercent;
+            return /* @__PURE__ */ jsx(
+              "div",
+              {
+                "aria-hidden": "true",
+                style: {
+                  position: "absolute",
+                  width: tickSize,
+                  height: tickSize,
+                  borderRadius: "50%",
+                  backgroundColor: disabled ? SliderColors.disabledTick : isActive ? `var(--md-sys-color-${variant}-container)` : `var(--md-sys-color-${variant})`,
+                  opacity: disabled ? 0.38 : 1,
+                  left: `calc(${trackInset2}px + ${tickPct} * (100% - ${trackInset2 * 2}px) - ${tickSize / 2}px)`,
+                  top: "50%",
+                  transform: "translateY(-50%)"
+                }
+              },
+              tick
+            );
+          })
+        ]
+      }
+    );
+  }
+  const insetLimit = thumbGap + thumbWidthDefault / 2;
+  const trackInset = Math.min(size / 2, insetLimit);
+  const cyStart = `calc(${trackInset}px + ${startPercent} * (100% - ${trackInset * 2}px))`;
+  const cyEnd = `calc(${trackInset}px + ${endPercent} * (100% - ${trackInset * 2}px))`;
+  const gapWithThumbStr = `${thumbGap + thumbHalfWidth}px`;
+  const leadingHeight = `max(0px, calc(${cyStart} - ${gapWithThumbStr}))`;
+  const activeBottom = `calc(${cyStart} + ${gapWithThumbStr})`;
+  const activeHeight = `max(0px, calc(${cyEnd} - ${cyStart} - ${gapWithThumbStr} * 2))`;
+  const trailingBottom = `calc(${cyEnd} + ${gapWithThumbStr})`;
+  const trailingHeight = `max(0px, calc(100% - (${cyEnd} + ${gapWithThumbStr})))`;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: trackRef,
+      className: cn(
+        "relative h-full",
+        disabled ? "cursor-not-allowed" : "cursor-pointer"
+      ),
+      style: { width: thumbHeight },
+      onPointerDown: onTrackPointerDown,
+      "aria-hidden": "true",
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            "aria-hidden": "true",
+            style: {
+              position: "absolute",
+              bottom: 0,
+              left: "50%",
+              transform: "translateX(-50%)",
+              height: leadingHeight,
+              width: size,
+              backgroundColor: inactiveTrack,
+              opacity: disabled ? 0.38 : 1,
+              borderBottomLeftRadius: outerR,
+              borderBottomRightRadius: outerR,
+              borderTopLeftRadius: innerR,
+              borderTopRightRadius: innerR
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            "aria-hidden": "true",
+            style: {
+              position: "absolute",
+              bottom: activeBottom,
+              left: "50%",
+              transform: "translateX(-50%)",
+              height: activeHeight,
+              width: size,
+              backgroundColor: activeTrack,
+              opacity: disabled ? 0.38 : 1,
+              borderBottomLeftRadius: startPercent <= 0 ? outerR : innerR,
+              borderBottomRightRadius: startPercent <= 0 ? outerR : innerR,
+              borderTopLeftRadius: endPercent >= 1 ? outerR : innerR,
+              borderTopRightRadius: endPercent >= 1 ? outerR : innerR
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            "aria-hidden": "true",
+            style: {
+              position: "absolute",
+              bottom: trailingBottom,
+              left: "50%",
+              transform: "translateX(-50%)",
+              height: trailingHeight,
+              width: size,
+              backgroundColor: inactiveTrack,
+              opacity: disabled ? 0.38 : 1,
+              borderTopLeftRadius: outerR,
+              borderTopRightRadius: outerR,
+              borderBottomLeftRadius: innerR,
+              borderBottomRightRadius: innerR
+            }
+          }
+        ),
+        ticks.map((tick) => {
+          const tickPct = (tick - min) / (max - min);
+          const isActive = tickPct > startPercent && tickPct < endPercent;
+          return /* @__PURE__ */ jsx(
+            "div",
+            {
+              "aria-hidden": "true",
+              style: {
+                position: "absolute",
+                width: tickSize,
+                height: tickSize,
+                borderRadius: "50%",
+                backgroundColor: disabled ? SliderColors.disabledTick : isActive ? `var(--md-sys-color-${variant}-container)` : `var(--md-sys-color-${variant})`,
+                opacity: disabled ? 0.38 : 1,
+                bottom: `calc(${trackInset}px + ${tickPct} * (100% - ${trackInset * 2}px) - ${tickSize / 2}px)`,
+                left: "50%",
+                transform: "translateX(-50%)"
+              }
+            },
+            tick
+          );
+        })
+      ]
+    }
+  );
+});
+var RangeSliderComponent = React4.forwardRef(
+  ({
+    value: controlledValue,
+    defaultValue,
+    onValueChange,
+    onValueChangeEnd,
+    min = 0,
+    max = 100,
+    step = 0,
+    orientation = "horizontal",
+    trackSize = "m",
+    trackShape = "md3",
+    variant = "primary",
+    disabled = false,
+    showValueIndicator = false,
+    showTicks = false,
+    formatValue,
+    className,
+    "aria-label": ariaLabel
+  }, ref) => {
+    var _a, _b;
+    const isHorizontal = orientation === "horizontal";
+    const defaultStart = (_a = defaultValue == null ? void 0 : defaultValue[0]) != null ? _a : min;
+    const defaultEnd = (_b = defaultValue == null ? void 0 : defaultValue[1]) != null ? _b : max;
+    const [internalValue, setInternalValue] = React4.useState([
+      defaultStart,
+      defaultEnd
+    ]);
+    const resolvedValue = controlledValue !== void 0 ? controlledValue : internalValue;
+    const { coerce, snap, toPercent, ticks } = useSliderMath({
+      min,
+      max,
+      step
+    });
+    const startValue = snap(coerce(resolvedValue[0]));
+    const endValue = snap(coerce(resolvedValue[1]));
+    const startPercent = toPercent(startValue);
+    const endPercent = toPercent(endValue);
+    const [topThumb, setTopThumb] = React4.useState("end");
+    const trackRef = React4.useRef(null);
+    const minGap = step > 0 ? step : (max - min) / 1e3;
+    const handleStartChange = React4.useCallback(
+      (newStart) => {
+        setTopThumb("start");
+        const clamped = Math.min(newStart, endValue - minGap);
+        const final = snap(coerce(clamped));
+        if (controlledValue === void 0) {
+          setInternalValue([final, endValue]);
+        }
+        onValueChange == null ? void 0 : onValueChange([final, endValue]);
+      },
+      [controlledValue, coerce, endValue, minGap, onValueChange, snap]
+    );
+    const handleEndChange = React4.useCallback(
+      (newEnd) => {
+        setTopThumb("end");
+        const clamped = Math.max(newEnd, startValue + minGap);
+        const final = snap(coerce(clamped));
+        if (controlledValue === void 0) {
+          setInternalValue([startValue, final]);
+        }
+        onValueChange == null ? void 0 : onValueChange([startValue, final]);
+      },
+      [controlledValue, coerce, minGap, onValueChange, snap, startValue]
+    );
+    const handleStartChangeEnd = React4.useCallback(
+      (v) => onValueChangeEnd == null ? void 0 : onValueChangeEnd([v, endValue]),
+      [endValue, onValueChangeEnd]
+    );
+    const handleEndChangeEnd = React4.useCallback(
+      (v) => onValueChangeEnd == null ? void 0 : onValueChangeEnd([startValue, v]),
+      [onValueChangeEnd, startValue]
+    );
+    const handleTrackPointerDown = React4.useCallback(
+      (e) => {
+        if (disabled) return;
+        const trackEl = trackRef.current;
+        if (!trackEl) return;
+        const rect = trackEl.getBoundingClientRect();
+        let clickPercent;
+        const insetLimit = SliderTokens.thumbGap + SliderTokens.thumbWidthDefault / 2;
+        const trackInset = Math.min(
+          SliderTokens.trackSizes[trackSize] / 2,
+          insetLimit
+        );
+        if (isHorizontal) {
+          const x = e.clientX - rect.left;
+          clickPercent = (x - trackInset) / (rect.width - trackInset * 2);
+        } else {
+          const y = rect.bottom - e.clientY;
+          clickPercent = (y - trackInset) / (rect.height - trackInset * 2);
+        }
+        const clamped = Math.max(0, Math.min(1, clickPercent));
+        const rawValue = min + clamped * (max - min);
+        const clickValue = snap(coerce(rawValue));
+        const distStart = Math.abs(clickValue - startValue);
+        const distEnd = Math.abs(clickValue - endValue);
+        if (distStart <= distEnd) {
+          handleStartChange(clickValue);
+        } else {
+          handleEndChange(clickValue);
+        }
+      },
+      [
+        coerce,
+        disabled,
+        endValue,
+        handleEndChange,
+        handleStartChange,
+        isHorizontal,
+        max,
+        min,
+        snap,
+        startValue,
+        trackSize
+      ]
+    );
+    const id = React4.useId();
+    return /* @__PURE__ */ jsx(LazyMotion, { features: domMax, strict: true, children: /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        className: cn(
+          "relative flex items-center",
+          isHorizontal ? "w-full flex-row" : "h-full flex-col",
+          disabled && "pointer-events-none",
+          className
+        ),
+        style: isHorizontal ? { minWidth: 0 } : { minHeight: 0 },
+        children: [
+          /* @__PURE__ */ jsx(
+            RangeTrack,
+            {
+              startPercent,
+              endPercent,
+              trackSize,
+              trackShape,
+              orientation,
+              variant,
+              disabled,
+              ticks: showTicks ? ticks : [],
+              min,
+              max,
+              trackRef,
+              onTrackPointerDown: handleTrackPointerDown
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            SliderThumb,
+            {
+              value: startValue,
+              percent: startPercent,
+              min,
+              max,
+              step,
+              disabled,
+              orientation,
+              trackSize,
+              variant,
+              showValueIndicator,
+              trackRef,
+              onValueChange: handleStartChange,
+              onValueChangeEnd: handleStartChangeEnd,
+              formatValue,
+              thumbId: `${id}-start`,
+              zIndex: topThumb === "start" ? 2 : 1,
+              "aria-label": ariaLabel ? `${ariaLabel} start` : "Range start"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            SliderThumb,
+            {
+              value: endValue,
+              percent: endPercent,
+              min,
+              max,
+              step,
+              disabled,
+              orientation,
+              trackSize,
+              variant,
+              showValueIndicator,
+              trackRef,
+              onValueChange: handleEndChange,
+              onValueChangeEnd: handleEndChangeEnd,
+              formatValue,
+              thumbId: `${id}-end`,
+              zIndex: topThumb === "end" ? 2 : 1,
+              "aria-label": ariaLabel ? `${ariaLabel} end` : "Range end"
+            }
+          )
+        ]
+      }
+    ) });
+  }
+);
+RangeSliderComponent.displayName = "RangeSlider";
+var RangeSlider = React4.memo(RangeSliderComponent);
+function getHorizontalRadius(isLeading, innerR, outerR) {
+  if (isLeading) {
+    return {
+      borderTopLeftRadius: outerR,
+      borderBottomLeftRadius: outerR,
+      borderTopRightRadius: innerR,
+      borderBottomRightRadius: innerR
+    };
+  }
+  return {
+    borderTopLeftRadius: innerR,
+    borderBottomLeftRadius: innerR,
+    borderTopRightRadius: outerR,
+    borderBottomRightRadius: outerR
+  };
+}
+function getVerticalRadius(isLeading, innerR, outerR) {
+  if (isLeading) {
+    return {
+      borderBottomLeftRadius: outerR,
+      borderBottomRightRadius: outerR,
+      borderTopLeftRadius: innerR,
+      borderTopRightRadius: innerR
+    };
+  }
+  return {
+    borderTopLeftRadius: outerR,
+    borderTopRightRadius: outerR,
+    borderBottomLeftRadius: innerR,
+    borderBottomRightRadius: innerR
+  };
+}
+var allInnerRadius = (innerR) => ({
+  borderTopLeftRadius: innerR,
+  borderBottomLeftRadius: innerR,
+  borderTopRightRadius: innerR,
+  borderBottomRightRadius: innerR
+});
+var InsetIcon = React4.memo(function InsetIcon2({
+  icon,
+  isOnActiveSegment,
+  position,
+  orientation,
+  trackSize,
+  trackSizeToken,
+  disabled,
+  variant,
+  prefersReduced
+}) {
+  const iconSize = Math.min(
+    SliderTokens.insetIconSizes[trackSizeToken],
+    Math.max(4, trackSize - SliderTokens.insetIconPadding * 2)
+  );
+  const activeColor = `var(--md-sys-color-on-${variant})`;
+  const inactiveColor = `var(--md-sys-color-${variant})`;
+  const isHorizontal = orientation === "horizontal";
+  const fastFade = prefersReduced ? { duration: 0 } : { duration: 0.12 };
+  return /* @__PURE__ */ jsx(
+    m.div,
+    {
+      "aria-hidden": "true",
+      className: "[&_svg]:w-full [&_svg]:h-full",
+      initial: __spreadValues({
+        opacity: 0
+      }, isHorizontal ? { left: position } : { bottom: position }),
+      animate: {
+        [isHorizontal ? "left" : "bottom"]: position,
+        opacity: disabled ? 0.38 : 1,
+        color: isOnActiveSegment ? activeColor : inactiveColor
+      },
+      exit: { opacity: 0, transition: fastFade },
+      transition: prefersReduced ? { duration: 0 } : {
+        left: { type: "spring", stiffness: 500, damping: 40 },
+        bottom: { type: "spring", stiffness: 500, damping: 40 },
+        opacity: fastFade,
+        color: fastFade
+      },
+      style: __spreadValues({
+        position: "absolute",
+        width: iconSize,
+        height: iconSize,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        pointerEvents: "none",
+        zIndex: 1,
+        willChange: isHorizontal ? "left" : "bottom"
+      }, isHorizontal ? { top: "50%", transform: "translateY(-50%)" } : { left: "50%", transform: "translateX(-50%)" }),
+      children: icon
+    }
+  );
+});
+function Ticks({
+  ticks,
+  min,
+  max,
+  percent,
+  orientation,
+  variant,
+  isCentered,
+  disabled,
+  trackInset
+}) {
+  if (ticks.length === 0) return null;
+  const { thumbGap, thumbWidthDefault, tickSize } = SliderTokens;
+  return /* @__PURE__ */ jsx(Fragment, { children: ticks.map((tick) => {
+    const tickPercent = (tick - min) / (max - min);
+    const isOnActive = isCentered ? percent >= 0.5 ? tickPercent >= 0.5 && tickPercent <= percent : tickPercent <= 0.5 && tickPercent >= percent : tickPercent <= percent;
+    const thumbStart = percent - (thumbGap + thumbWidthDefault / 2) / 100;
+    const thumbEnd = percent + (thumbGap + thumbWidthDefault / 2) / 100;
+    if (tickPercent > thumbStart && tickPercent < thumbEnd) return null;
+    const color = disabled ? SliderColors.disabledTick : isOnActive ? `var(--md-sys-color-${variant}-container)` : `var(--md-sys-color-${variant})`;
+    const style = __spreadValues({
+      position: "absolute",
+      width: tickSize,
+      height: tickSize,
+      borderRadius: "50%",
+      backgroundColor: color,
+      opacity: disabled ? 0.38 : 1
+    }, orientation === "horizontal" ? {
+      left: `calc(${trackInset}px + ${tickPercent} * (100% - ${trackInset * 2}px) - ${tickSize / 2}px)`,
+      top: "50%",
+      transform: "translateY(-50%)"
+    } : {
+      // Vertical: bottom=0%, top=100% (inverted Y-axis)
+      bottom: `calc(${trackInset}px + ${tickPercent} * (100% - ${trackInset * 2}px) - ${tickSize / 2}px)`,
+      left: "50%",
+      transform: "translateX(-50%)"
+    });
+    return /* @__PURE__ */ jsx("div", { style, "aria-hidden": "true" }, tick);
+  }) });
+}
+var SliderTrack = React4.memo(function SliderTrack2({
+  percent,
+  trackSize,
+  orientation,
+  variant,
+  isCentered,
+  min,
+  max,
+  disabled,
+  trackRef,
+  onTrackPointerDown,
+  ticks = [],
+  insetIcon,
+  insetIconAtMin,
+  insetIconTrailing,
+  insetIconAtMax,
+  value,
+  trackShape = "md3"
+}) {
+  var _a;
+  const isHorizontal = orientation === "horizontal";
+  const size = SliderTokens.trackSizes[trackSize];
+  const thumbHeight = SliderTokens.thumbHeights[trackSize];
+  const { thumbGap, thumbWidthDefault, trackInnerRadius } = SliderTokens;
+  const innerR = trackInnerRadius;
+  let outerR = size / 2;
+  if (trackShape === "md3") {
+    outerR = Math.min(SliderTokens.trackShapes[trackSize], size / 2);
+  } else if (typeof trackShape === "number") {
+    outerR = Math.min(trackShape, size / 2);
+  }
+  const thumbHalfWidth = thumbWidthDefault / 2;
+  const gapWithThumbStr = `${thumbGap + thumbHalfWidth}px`;
+  const hasAnyInsetIcon = Boolean(insetIcon || insetIconTrailing);
+  const prefersReduced = (_a = useReducedMotion()) != null ? _a : false;
+  const [trackWidth, setTrackWidth] = React4.useState(0);
+  React4.useLayoutEffect(() => {
+    const el = trackRef.current;
+    if (!el || !hasAnyInsetIcon) return;
+    setTrackWidth(isHorizontal ? el.clientWidth : el.clientHeight);
+    const ro = new ResizeObserver(() => {
+      setTrackWidth(isHorizontal ? el.clientWidth : el.clientHeight);
+    });
+    ro.observe(el);
+    return () => ro.disconnect();
+  }, [hasAnyInsetIcon, isHorizontal, trackRef]);
+  const activeIconSize = Math.min(
+    SliderTokens.insetIconSizes[trackSize],
+    Math.max(4, size - SliderTokens.insetIconPadding * 2)
+  );
+  const iconTotalWidth = activeIconSize + SliderTokens.insetIconPadding * 2 + thumbGap + thumbHalfWidth;
+  const iconThreshold = trackWidth > 0 ? iconTotalWidth / trackWidth : 0.15;
+  const HYSTERESIS_GAP = 0.04;
+  const trailingActiveRef = React4.useRef(1 - percent <= iconThreshold);
+  const leadingActiveRef = React4.useRef(percent > iconThreshold);
+  const trailingPercent = 1 - percent;
+  if (trailingActiveRef.current) {
+    if (trailingPercent > iconThreshold + HYSTERESIS_GAP) {
+      trailingActiveRef.current = false;
+    }
+  } else {
+    if (trailingPercent <= iconThreshold) {
+      trailingActiveRef.current = true;
+    }
+  }
+  const trailingOnActive = trailingActiveRef.current;
+  if (leadingActiveRef.current) {
+    if (percent <= iconThreshold - HYSTERESIS_GAP) {
+      leadingActiveRef.current = false;
+    }
+  } else {
+    if (percent > iconThreshold) {
+      leadingActiveRef.current = true;
+    }
+  }
+  const leadingOnActive = leadingActiveRef.current;
+  const isAtMin = value !== void 0 && value <= min;
+  const resolvedLeadingIcon = isAtMin && insetIconAtMin ? insetIconAtMin : insetIcon;
+  const isAtMax = value !== void 0 && value >= max;
+  const resolvedTrailingIcon = isAtMax && insetIconAtMax ? insetIconAtMax : insetIconTrailing;
+  const activeColor = disabled ? SliderColors.disabledActiveTrack : `var(--md-sys-color-${variant})`;
+  const inactiveColor = disabled ? SliderColors.disabledInactiveTrack : `var(--md-sys-color-${variant}-container)`;
+  const insetLimit = SliderTokens.thumbGap + SliderTokens.thumbWidthDefault / 2;
+  const trackInset = Math.min(size / 2, insetLimit);
+  const gapTotal = thumbGap + thumbHalfWidth;
+  const thumbCenter = `calc(${trackInset}px + ${percent} * (100% - ${trackInset * 2}px))`;
+  const leadingActiveLeft = `${trackInset + SliderTokens.insetIconPadding}px`;
+  const leadingInactiveLeft = `calc(${thumbCenter} + ${gapTotal}px + ${SliderTokens.insetIconPadding}px)`;
+  const trailingInactiveLeft = `calc(100% - ${trackInset}px - ${activeIconSize}px - ${SliderTokens.insetIconPadding}px)`;
+  const trailingActiveLeft = `calc(${thumbCenter} - ${gapTotal}px - ${activeIconSize}px - ${SliderTokens.insetIconPadding}px)`;
+  if (isHorizontal) {
+    const cxStr = `calc(${trackInset}px + ${percent} * (100% - ${trackInset * 2}px))`;
+    const segments2 = [];
+    if (!isCentered) {
+      const leftSegmentWidth = `max(0px, calc(${cxStr} - ${gapWithThumbStr}))`;
+      const rightSegmentLeft = `calc(${cxStr} + ${gapWithThumbStr})`;
+      const rightSegmentWidth = `max(0px, calc(100% - (${cxStr} + ${gapWithThumbStr})))`;
+      segments2.push(
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            "aria-hidden": "true",
+            style: __spreadValues({
+              position: "absolute",
+              left: 0,
+              top: "50%",
+              transform: "translateY(-50%)",
+              width: leftSegmentWidth,
+              height: size,
+              backgroundColor: activeColor,
+              opacity: disabled ? 0.38 : 1
+            }, getHorizontalRadius(true, innerR, outerR))
+          },
+          "left"
+        )
+      );
+      segments2.push(
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            "aria-hidden": "true",
+            style: __spreadValues({
+              position: "absolute",
+              left: rightSegmentLeft,
+              top: "50%",
+              transform: "translateY(-50%)",
+              width: rightSegmentWidth,
+              height: size,
+              backgroundColor: inactiveColor,
+              opacity: disabled ? 0.38 : 1
+            }, getHorizontalRadius(false, innerR, outerR))
+          },
+          "right"
+        )
+      );
+    } else {
+      const halfCenterGap = SliderTokens.thumbGap / 2;
+      if (percent >= 0.5) {
+        const leftBaseWidth = `max(0px, min(calc(50% - ${halfCenterGap}px), calc(${cxStr} - ${gapWithThumbStr})))`;
+        segments2.push(
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              "aria-hidden": "true",
+              style: __spreadValues({
+                position: "absolute",
+                left: 0,
+                top: "50%",
+                transform: "translateY(-50%)",
+                width: leftBaseWidth,
+                height: size,
+                backgroundColor: inactiveColor,
+                opacity: disabled ? 0.38 : 1
+              }, getHorizontalRadius(true, innerR, outerR))
+            },
+            "left-base"
+          )
+        );
+        const centerActiveLeft = `calc(50% + ${halfCenterGap}px)`;
+        const centerActiveWidth = `max(0px, calc(${cxStr} - ${gapWithThumbStr} - (50% + ${halfCenterGap}px)))`;
+        segments2.push(
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              "aria-hidden": "true",
+              style: __spreadValues({
+                position: "absolute",
+                left: centerActiveLeft,
+                top: "50%",
+                transform: "translateY(-50%)",
+                width: centerActiveWidth,
+                height: size,
+                backgroundColor: activeColor,
+                opacity: disabled ? 0.38 : 1
+              }, allInnerRadius(innerR))
+            },
+            "center-active"
+          )
+        );
+        const rightBaseLeft = `calc(${cxStr} + ${gapWithThumbStr})`;
+        const rightBaseWidth = `max(0px, calc(100% - (${cxStr} + ${gapWithThumbStr})))`;
+        segments2.push(
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              "aria-hidden": "true",
+              style: __spreadValues({
+                position: "absolute",
+                left: rightBaseLeft,
+                top: "50%",
+                transform: "translateY(-50%)",
+                width: rightBaseWidth,
+                height: size,
+                backgroundColor: inactiveColor,
+                opacity: disabled ? 0.38 : 1
+              }, getHorizontalRadius(false, innerR, outerR))
+            },
+            "right-base"
+          )
+        );
+      } else {
+        const leftBaseWidth = `max(0px, calc(${cxStr} - ${gapWithThumbStr}))`;
+        segments2.push(
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              "aria-hidden": "true",
+              style: __spreadValues({
+                position: "absolute",
+                left: 0,
+                top: "50%",
+                transform: "translateY(-50%)",
+                width: leftBaseWidth,
+                height: size,
+                backgroundColor: inactiveColor,
+                opacity: disabled ? 0.38 : 1
+              }, getHorizontalRadius(true, innerR, outerR))
+            },
+            "left-base"
+          )
+        );
+        const centerActiveLeft = `calc(${cxStr} + ${gapWithThumbStr})`;
+        const centerActiveWidth = `max(0px, calc(50% - ${halfCenterGap}px - (${cxStr} + ${gapWithThumbStr})))`;
+        segments2.push(
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              "aria-hidden": "true",
+              style: __spreadValues({
+                position: "absolute",
+                left: centerActiveLeft,
+                top: "50%",
+                transform: "translateY(-50%)",
+                width: centerActiveWidth,
+                height: size,
+                backgroundColor: activeColor,
+                opacity: disabled ? 0.38 : 1
+              }, allInnerRadius(innerR))
+            },
+            "center-active"
+          )
+        );
+        const rightBaseLeft = `max(calc(50% + ${halfCenterGap}px), calc(${cxStr} + ${gapWithThumbStr}))`;
+        const rightBaseWidth = `max(0px, calc(100% - max(calc(50% + ${halfCenterGap}px), calc(${cxStr} + ${gapWithThumbStr}))))`;
+        segments2.push(
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              "aria-hidden": "true",
+              style: __spreadValues({
+                position: "absolute",
+                left: rightBaseLeft,
+                top: "50%",
+                transform: "translateY(-50%)",
+                width: rightBaseWidth,
+                height: size,
+                backgroundColor: inactiveColor,
+                opacity: disabled ? 0.38 : 1
+              }, getHorizontalRadius(false, innerR, outerR))
+            },
+            "right-base"
+          )
+        );
+      }
+    }
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref: trackRef,
+        className: cn(
+          "relative w-full",
+          disabled ? "cursor-not-allowed" : "cursor-pointer"
+        ),
+        style: { height: thumbHeight },
+        onPointerDown: onTrackPointerDown,
+        "aria-hidden": "true",
+        children: [
+          segments2,
+          ticks.length > 0 && /* @__PURE__ */ jsx(
+            Ticks,
+            {
+              ticks,
+              min,
+              max,
+              percent,
+              orientation,
+              disabled,
+              variant,
+              isCentered,
+              trackInset
+            }
+          ),
+          /* @__PURE__ */ jsx(AnimatePresence, { mode: "wait", children: resolvedLeadingIcon && /* @__PURE__ */ jsx(
+            InsetIcon,
+            {
+              icon: resolvedLeadingIcon,
+              isOnActiveSegment: leadingOnActive,
+              position: leadingOnActive ? leadingActiveLeft : leadingInactiveLeft,
+              orientation,
+              trackSize: size,
+              trackSizeToken: trackSize,
+              disabled,
+              variant,
+              prefersReduced
+            },
+            isAtMin ? "lead-min" : leadingOnActive ? "lead-active" : "lead-inactive"
+          ) }),
+          /* @__PURE__ */ jsx(AnimatePresence, { mode: "wait", children: resolvedTrailingIcon && /* @__PURE__ */ jsx(
+            InsetIcon,
+            {
+              icon: resolvedTrailingIcon,
+              isOnActiveSegment: trailingOnActive,
+              position: trailingOnActive ? trailingActiveLeft : trailingInactiveLeft,
+              orientation,
+              trackSize: size,
+              trackSizeToken: trackSize,
+              disabled,
+              variant,
+              prefersReduced
+            },
+            isAtMax ? "trail-max" : trailingOnActive ? "trail-active" : "trail-inactive"
+          ) })
+        ]
+      }
+    );
+  }
+  const cyStr = `calc(${trackInset}px + ${percent} * (100% - ${trackInset * 2}px))`;
+  const segments = [];
+  if (!isCentered) {
+    const bottomSegmentHeight = `max(0px, calc(${cyStr} - ${gapWithThumbStr}))`;
+    const topSegmentBottom = `calc(${cyStr} + ${gapWithThumbStr})`;
+    const topSegmentHeight = `max(0px, calc(100% - (${cyStr} + ${gapWithThumbStr})))`;
+    segments.push(
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          "aria-hidden": "true",
+          style: __spreadValues({
+            position: "absolute",
+            bottom: 0,
+            left: "50%",
+            transform: "translateX(-50%)",
+            height: bottomSegmentHeight,
+            width: size,
+            backgroundColor: activeColor,
+            opacity: disabled ? 0.38 : 1
+          }, getVerticalRadius(true, innerR, outerR))
+        },
+        "bottom"
+      )
+    );
+    segments.push(
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          "aria-hidden": "true",
+          style: __spreadValues({
+            position: "absolute",
+            bottom: topSegmentBottom,
+            left: "50%",
+            transform: "translateX(-50%)",
+            height: topSegmentHeight,
+            width: size,
+            backgroundColor: inactiveColor,
+            opacity: disabled ? 0.38 : 1
+          }, getVerticalRadius(false, innerR, outerR))
+        },
+        "top"
+      )
+    );
+  } else {
+    const halfCenterGap = SliderTokens.thumbGap / 2;
+    if (percent >= 0.5) {
+      const bottomBaseHeight = `max(0px, min(calc(50% - ${halfCenterGap}px), calc(${cyStr} - ${gapWithThumbStr})))`;
+      segments.push(
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            "aria-hidden": "true",
+            style: __spreadValues({
+              position: "absolute",
+              bottom: 0,
+              left: "50%",
+              transform: "translateX(-50%)",
+              height: bottomBaseHeight,
+              width: size,
+              backgroundColor: inactiveColor,
+              opacity: disabled ? 0.38 : 1
+            }, getVerticalRadius(true, innerR, outerR))
+          },
+          "bottom-base"
+        )
+      );
+      const centerActiveBottom = `calc(50% + ${halfCenterGap}px)`;
+      const centerActiveHeight = `max(0px, calc(${cyStr} - ${gapWithThumbStr} - (50% + ${halfCenterGap}px)))`;
+      segments.push(
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            "aria-hidden": "true",
+            style: __spreadValues({
+              position: "absolute",
+              bottom: centerActiveBottom,
+              left: "50%",
+              transform: "translateX(-50%)",
+              height: centerActiveHeight,
+              width: size,
+              backgroundColor: activeColor,
+              opacity: disabled ? 0.38 : 1
+            }, allInnerRadius(innerR))
+          },
+          "center-active"
+        )
+      );
+      const topBaseBottom = `calc(${cyStr} + ${gapWithThumbStr})`;
+      const topBaseHeight = `max(0px, calc(100% - (${cyStr} + ${gapWithThumbStr})))`;
+      segments.push(
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            "aria-hidden": "true",
+            style: __spreadValues({
+              position: "absolute",
+              bottom: topBaseBottom,
+              left: "50%",
+              transform: "translateX(-50%)",
+              height: topBaseHeight,
+              width: size,
+              backgroundColor: inactiveColor,
+              opacity: disabled ? 0.38 : 1
+            }, getVerticalRadius(false, innerR, outerR))
+          },
+          "top-base"
+        )
+      );
+    } else {
+      const bottomBaseHeight = `max(0px, calc(${cyStr} - ${gapWithThumbStr}))`;
+      segments.push(
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            "aria-hidden": "true",
+            style: __spreadValues({
+              position: "absolute",
+              bottom: 0,
+              left: "50%",
+              transform: "translateX(-50%)",
+              height: bottomBaseHeight,
+              width: size,
+              backgroundColor: inactiveColor,
+              opacity: disabled ? 0.38 : 1
+            }, getVerticalRadius(true, innerR, outerR))
+          },
+          "bottom-base"
+        )
+      );
+      const centerActiveBottom = `calc(${cyStr} + ${gapWithThumbStr})`;
+      const centerActiveHeight = `max(0px, calc(50% - ${halfCenterGap}px - (${cyStr} + ${gapWithThumbStr})))`;
+      segments.push(
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            "aria-hidden": "true",
+            style: __spreadValues({
+              position: "absolute",
+              bottom: centerActiveBottom,
+              left: "50%",
+              transform: "translateX(-50%)",
+              height: centerActiveHeight,
+              width: size,
+              backgroundColor: activeColor,
+              opacity: disabled ? 0.38 : 1
+            }, allInnerRadius(innerR))
+          },
+          "center-active"
+        )
+      );
+      const topBaseBottom = `max(calc(50% + ${halfCenterGap}px), calc(${cyStr} + ${gapWithThumbStr}))`;
+      const topBaseHeight = `max(0px, calc(100% - max(calc(50% + ${halfCenterGap}px), calc(${cyStr} + ${gapWithThumbStr}))))`;
+      segments.push(
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            "aria-hidden": "true",
+            style: __spreadValues({
+              position: "absolute",
+              bottom: topBaseBottom,
+              left: "50%",
+              transform: "translateX(-50%)",
+              height: topBaseHeight,
+              width: size,
+              backgroundColor: inactiveColor,
+              opacity: disabled ? 0.38 : 1
+            }, getVerticalRadius(false, innerR, outerR))
+          },
+          "top-base"
+        )
+      );
+    }
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: trackRef,
+      className: cn(
+        "relative h-full",
+        disabled ? "cursor-not-allowed" : "cursor-pointer"
+      ),
+      style: { width: thumbHeight },
+      onPointerDown: onTrackPointerDown,
+      "aria-hidden": "true",
+      children: [
+        segments,
+        ticks.length > 0 && /* @__PURE__ */ jsx(
+          Ticks,
+          {
+            ticks,
+            min,
+            max,
+            percent,
+            orientation,
+            disabled,
+            variant,
+            isCentered,
+            trackInset
+          }
+        ),
+        /* @__PURE__ */ jsx(AnimatePresence, { mode: "wait", children: resolvedLeadingIcon && /* @__PURE__ */ jsx(
+          InsetIcon,
+          {
+            icon: resolvedLeadingIcon,
+            isOnActiveSegment: leadingOnActive,
+            position: leadingOnActive ? leadingActiveLeft : leadingInactiveLeft,
+            orientation,
+            trackSize: size,
+            trackSizeToken: trackSize,
+            disabled,
+            variant,
+            prefersReduced
+          },
+          isAtMin ? "lead-min" : leadingOnActive ? "lead-active" : "lead-inactive"
+        ) }),
+        /* @__PURE__ */ jsx(AnimatePresence, { mode: "wait", children: resolvedTrailingIcon && /* @__PURE__ */ jsx(
+          InsetIcon,
+          {
+            icon: resolvedTrailingIcon,
+            isOnActiveSegment: trailingOnActive,
+            position: trailingOnActive ? trailingActiveLeft : trailingInactiveLeft,
+            orientation,
+            trackSize: size,
+            trackSizeToken: trackSize,
+            disabled,
+            variant,
+            prefersReduced
+          },
+          isAtMax ? "trail-max" : trailingOnActive ? "trail-active" : "trail-inactive"
+        ) })
+      ]
+    }
+  );
+});
+var SliderComponent = React4.forwardRef(
+  ({
+    value: controlledValue,
+    defaultValue,
+    onValueChange,
+    onValueChangeEnd,
+    min = 0,
+    max = 100,
+    step = 0,
+    orientation = "horizontal",
+    trackSize = "m",
+    trackShape = "md3",
+    variant = "primary",
+    isCentered = false,
+    disabled = false,
+    showValueIndicator = false,
+    showTicks = false,
+    insetIcon,
+    insetIconAtMin,
+    insetIconTrailing,
+    insetIconAtMax,
+    formatValue,
+    className,
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledBy
+  }, ref) => {
+    const isHorizontal = orientation === "horizontal";
+    const midpoint = min + (max - min) / 2;
+    const initialValue = defaultValue != null ? defaultValue : midpoint;
+    const [internalValue, setInternalValue] = React4.useState(initialValue);
+    const resolvedValue = controlledValue !== void 0 ? controlledValue : internalValue;
+    const { coerce, snap, toPercent, ticks } = useSliderMath({
+      min,
+      max,
+      step
+    });
+    const safeValue = snap(coerce(resolvedValue));
+    const percent = toPercent(safeValue);
+    const trackRef = React4.useRef(null);
+    const handleValueChange = React4.useCallback(
+      (newValue) => {
+        const clamped = snap(coerce(newValue));
+        if (controlledValue === void 0) {
+          setInternalValue(clamped);
+        }
+        onValueChange == null ? void 0 : onValueChange(clamped);
+      },
+      [coerce, controlledValue, onValueChange, snap]
+    );
+    const handleValueChangeEnd = React4.useCallback(
+      (newValue) => {
+        onValueChangeEnd == null ? void 0 : onValueChangeEnd(snap(coerce(newValue)));
+      },
+      [coerce, onValueChangeEnd, snap]
+    );
+    const handleTrackPointerDown = React4.useCallback(
+      (e) => {
+        if (disabled) return;
+        const trackEl = trackRef.current;
+        if (!trackEl) return;
+        const rect = trackEl.getBoundingClientRect();
+        let clickPercent;
+        const insetLimit = SliderTokens.thumbGap + SliderTokens.thumbWidthDefault / 2;
+        const trackInset = Math.min(
+          SliderTokens.trackSizes[trackSize] / 2,
+          insetLimit
+        );
+        if (isHorizontal) {
+          const x = e.clientX - rect.left;
+          clickPercent = (x - trackInset) / (rect.width - trackInset * 2);
+        } else {
+          const y = rect.bottom - e.clientY;
+          clickPercent = (y - trackInset) / (rect.height - trackInset * 2);
+        }
+        const clamped = Math.max(0, Math.min(1, clickPercent));
+        const rawValue = min + clamped * (max - min);
+        const newValue = snap(coerce(rawValue));
+        handleValueChange(newValue);
+      },
+      [
+        coerce,
+        disabled,
+        handleValueChange,
+        isHorizontal,
+        max,
+        min,
+        snap,
+        trackSize
+      ]
+    );
+    const id = React4.useId();
+    const thumbId = `slider-thumb-${id}`;
+    const supportsInsetIcon = !isCentered && SliderTokens.trackSizes[trackSize] >= 40;
+    const hasAnyInsetIcon = !!(insetIcon || insetIconTrailing);
+    if (hasAnyInsetIcon && !supportsInsetIcon) {
+      console.warn(
+        "[Slider] insetIcon is only supported on track sizes >= 40dp (e.g. xl track sizes). See MD3 spec: https://m3.material.io/components/sliders/specs"
+      );
+    }
+    return /* @__PURE__ */ jsx(LazyMotion, { features: domMax, strict: true, children: /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        className: cn(
+          "relative flex items-center",
+          isHorizontal ? "w-full flex-row" : "h-full flex-col",
+          disabled && "pointer-events-none",
+          className
+        ),
+        style: isHorizontal ? { minWidth: 0 } : { minHeight: 0 },
+        children: [
+          /* @__PURE__ */ jsx(
+            SliderTrack,
+            {
+              percent,
+              trackSize,
+              trackShape,
+              orientation,
+              isCentered,
+              min,
+              max,
+              disabled,
+              variant,
+              trackRef,
+              onTrackPointerDown: handleTrackPointerDown,
+              ticks: showTicks ? ticks : [],
+              insetIcon: supportsInsetIcon ? insetIcon : void 0,
+              insetIconAtMin: supportsInsetIcon ? insetIconAtMin : void 0,
+              insetIconTrailing: supportsInsetIcon ? insetIconTrailing : void 0,
+              insetIconAtMax: supportsInsetIcon ? insetIconAtMax : void 0,
+              value: safeValue
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            SliderThumb,
+            {
+              value: safeValue,
+              percent,
+              min,
+              max,
+              step,
+              disabled,
+              orientation,
+              trackSize,
+              variant,
+              showValueIndicator,
+              trackRef,
+              onValueChange: handleValueChange,
+              onValueChangeEnd: handleValueChangeEnd,
+              formatValue,
+              thumbId,
+              zIndex: 1,
+              "aria-label": ariaLabel,
+              "aria-labelledby": ariaLabelledBy
+            }
+          )
+        ]
+      }
+    ) });
+  }
+);
+SliderComponent.displayName = "Slider";
+var Slider = React4.memo(SliderComponent);
+
+// src/ui/shared/motion-tokens.ts
+var FAST_SPATIAL_SPRING = {
+  type: "spring",
+  stiffness: 800,
+  damping: 33.94
+};
+var FAST_EFFECTS_SPRING = {
+  type: "spring",
+  stiffness: 3800,
+  damping: 123.29
+};
+
+// src/ui/switch/switch.tokens.ts
+var SwitchTokens = {
+  // ── Track ─────────────────────────────────────────────────────────────────
+  /** SwitchTokens.TrackWidth = 52dp */
+  trackWidth: 52,
+  /** SwitchTokens.TrackHeight = 32dp */
+  trackHeight: 32,
+  /** SwitchTokens.TrackOutlineWidth = 2dp */
+  trackOutlineWidth: 2,
+  // ── Handle (Thumb) ────────────────────────────────────────────────────────
+  /** SwitchTokens.SelectedHandleWidth/Height = 24dp */
+  selectedHandleSize: 24,
+  /** SwitchTokens.UnselectedHandleWidth/Height = 16dp */
+  unselectedHandleSize: 16,
+  /** SwitchTokens.IconHandleWidth/Height = 24dp (when thumb has icon content) */
+  iconHandleSize: 24,
+  /** SwitchTokens.PressedHandleWidth/Height = 28dp */
+  pressedHandleSize: 28,
+  // ── State Layer ───────────────────────────────────────────────────────────
+  /** SwitchTokens.StateLayerSize = 40dp */
+  stateLayerSize: 40,
+  // ── Icon ──────────────────────────────────────────────────────────────────
+  /** SwitchTokens.SelectedIconSize / UnselectedIconSize = 16dp */
+  iconSize: 16,
+  // ── Opacity (disabled states) ─────────────────────────────────────────────
+  /** SwitchTokens.DisabledTrackOpacity = 0.12 */
+  disabledTrackOpacity: 0.12,
+  /** SwitchTokens.DisabledSelectedHandleOpacity = 1.0 */
+  disabledSelectedHandleOpacity: 1,
+  /** SwitchTokens.DisabledUnselectedHandleOpacity = 0.38 */
+  disabledUnselectedHandleOpacity: 0.38,
+  /** SwitchTokens.DisabledSelectedIconOpacity = 0.38 */
+  disabledSelectedIconOpacity: 0.38,
+  /** SwitchTokens.DisabledUnselectedIconOpacity = 0.38 */
+  disabledUnselectedIconOpacity: 0.38
+};
+var SwitchColors = {
+  // Track
+  checkedTrack: "var(--md-sys-color-primary)",
+  uncheckedTrack: "var(--md-sys-color-surface-container-highest)",
+  uncheckedTrackOutline: "var(--md-sys-color-outline)",
+  // Thumb
+  checkedThumb: "var(--md-sys-color-on-primary)",
+  uncheckedThumb: "var(--md-sys-color-outline)",
+  hoverCheckedThumb: "var(--md-sys-color-primary-container)",
+  hoverUncheckedThumb: "var(--md-sys-color-on-surface-variant)",
+  disabledCheckedThumb: "var(--md-sys-color-surface)",
+  // Icon
+  checkedIcon: "var(--md-sys-color-on-primary-container)",
+  uncheckedIcon: "var(--md-sys-color-surface-container-highest)",
+  // State layer
+  checkedStateLayer: "var(--md-sys-color-primary)",
+  uncheckedStateLayer: "var(--md-sys-color-on-surface)",
+  // Focus indicator
+  focusIndicator: "var(--md-sys-color-secondary)"
+};
+var SNAP_TRANSITION = { duration: 0 };
+var COLOR_TRANSITION = {
+  duration: 0.15,
+  ease: [0.31, 0.94, 0.34, 1]
+};
+function resolveThumbSize(isPressed, checked, hasIcon) {
+  if (isPressed) return SwitchTokens.pressedHandleSize;
+  if (checked || hasIcon) return SwitchTokens.selectedHandleSize;
+  return SwitchTokens.unselectedHandleSize;
+}
+function resolveThumbX(checked, isPressed, thumbSize) {
+  const { trackHeight, trackWidth, trackOutlineWidth, selectedHandleSize } = SwitchTokens;
+  const thumbPaddingStart = (trackHeight - thumbSize) / 2;
+  const thumbPadding = (trackHeight - selectedHandleSize) / 2;
+  const maxBound = trackWidth - selectedHandleSize - thumbPadding;
+  if (isPressed && checked) return maxBound - trackOutlineWidth;
+  if (isPressed) return thumbPaddingStart + trackOutlineWidth;
+  if (checked) return maxBound;
+  return thumbPaddingStart;
+}
+function resolveThumbColor(checked, disabled, isInteracting, checkedThumbColor, uncheckedThumbColor) {
+  if (disabled) {
+    return checked ? SwitchColors.disabledCheckedThumb : "rgba(28, 27, 31, 0.38)";
+  }
+  if (checked) {
+    return isInteracting ? checkedThumbColor != null ? checkedThumbColor : SwitchColors.hoverCheckedThumb : checkedThumbColor != null ? checkedThumbColor : SwitchColors.checkedThumb;
+  }
+  return isInteracting ? uncheckedThumbColor != null ? uncheckedThumbColor : SwitchColors.hoverUncheckedThumb : uncheckedThumbColor != null ? uncheckedThumbColor : SwitchColors.uncheckedThumb;
+}
+function isIconVisible(thumbContent, icons, showOnlySelectedIcon, checked) {
+  if (thumbContent == null) return false;
+  if (icons) return true;
+  return showOnlySelectedIcon && checked;
+}
+var SwitchVisual = React4.memo(function SwitchVisual2({
+  checked,
+  disabled,
+  isPressed,
+  isHovered,
+  isFocused,
+  thumbContent,
+  icons,
+  showOnlySelectedIcon,
+  prefersReduced,
+  checkedTrackColor,
+  uncheckedTrackColor,
+  checkedThumbColor,
+  uncheckedThumbColor
+}) {
+  const hasIcon = icons && thumbContent != null;
+  const thumbSize = resolveThumbSize(isPressed, checked, hasIcon);
+  const thumbX = resolveThumbX(checked, isPressed, thumbSize);
+  const trackBg = checked ? checkedTrackColor != null ? checkedTrackColor : SwitchColors.checkedTrack : uncheckedTrackColor != null ? uncheckedTrackColor : SwitchColors.uncheckedTrack;
+  const trackBorderColor = checked ? "rgba(0, 0, 0, 0)" : SwitchColors.uncheckedTrackOutline;
+  const trackBorderWidth = checked ? 0 : SwitchTokens.trackOutlineWidth;
+  const trackOpacity = disabled ? SwitchTokens.disabledTrackOpacity : 1;
+  const isInteracting = isHovered || isFocused || isPressed;
+  const thumbBg = resolveThumbColor(
+    checked,
+    disabled,
+    isInteracting,
+    checkedThumbColor,
+    uncheckedThumbColor
+  );
+  const iconColor = disabled ? checked ? "rgba(28, 27, 31, 0.38)" : "rgba(230, 225, 229, 0.38)" : checked ? SwitchColors.checkedIcon : SwitchColors.uncheckedIcon;
+  const stateLayerColor = checked ? SwitchColors.checkedStateLayer : SwitchColors.uncheckedStateLayer;
+  const stateLayerOpacity = isPressed || isFocused ? 0.12 : isHovered ? 0.08 : 0;
+  const stateLayerX = thumbX + thumbSize / 2 - SwitchTokens.stateLayerSize / 2;
+  const showIcon = isIconVisible(
+    thumbContent,
+    icons,
+    showOnlySelectedIcon,
+    checked
+  );
+  const colorTransition = prefersReduced ? { duration: 0 } : COLOR_TRANSITION;
+  const stateLayerTransition = prefersReduced ? { duration: 0 } : FAST_EFFECTS_SPRING;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "relative",
+      style: {
+        width: SwitchTokens.trackWidth,
+        height: SwitchTokens.trackHeight
+      },
+      "aria-hidden": "true",
+      children: [
+        /* @__PURE__ */ jsx(
+          m.div,
+          {
+            className: "absolute inset-0 rounded-full",
+            style: { borderStyle: "solid", opacity: trackOpacity },
+            animate: {
+              backgroundColor: trackBg,
+              borderColor: trackBorderColor,
+              borderWidth: trackBorderWidth
+            },
+            transition: colorTransition
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          m.div,
+          {
+            className: "absolute rounded-full pointer-events-none",
+            style: {
+              width: SwitchTokens.stateLayerSize,
+              height: SwitchTokens.stateLayerSize,
+              top: (SwitchTokens.trackHeight - SwitchTokens.stateLayerSize) / 2,
+              backgroundColor: stateLayerColor
+            },
+            animate: { x: stateLayerX, opacity: stateLayerOpacity },
+            transition: stateLayerTransition
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          m.div,
+          {
+            className: "absolute rounded-full flex items-center justify-center overflow-hidden",
+            style: { top: "50%", left: 0, y: "-50%" },
+            animate: {
+              x: thumbX,
+              width: thumbSize,
+              height: thumbSize,
+              backgroundColor: thumbBg
+            },
+            transition: prefersReduced ? { duration: 0 } : isPressed ? SNAP_TRANSITION : {
+              x: FAST_SPATIAL_SPRING,
+              width: FAST_SPATIAL_SPRING,
+              height: FAST_SPATIAL_SPRING,
+              backgroundColor: colorTransition
+            },
+            children: /* @__PURE__ */ jsx(AnimatePresence, { mode: "wait", children: showIcon && /* @__PURE__ */ jsx(
+              m.span,
+              {
+                className: "flex items-center justify-center",
+                style: {
+                  width: SwitchTokens.iconSize,
+                  height: SwitchTokens.iconSize,
+                  color: iconColor,
+                  fontSize: SwitchTokens.iconSize
+                },
+                initial: prefersReduced ? false : { opacity: 0, scale: 0.5 },
+                animate: { opacity: 1, scale: 1 },
+                exit: prefersReduced ? {} : { opacity: 0, scale: 0.5 },
+                transition: prefersReduced ? { duration: 0 } : { duration: 0.15 },
+                children: thumbContent
+              },
+              checked ? "icon-on" : "icon-off"
+            ) })
+          }
+        )
+      ]
+    }
+  );
+});
+var SwitchComponent = React4.forwardRef(
+  ({
+    checked,
+    onCheckedChange,
+    disabled = false,
+    thumbContent,
+    icons = false,
+    showOnlySelectedIcon = false,
+    label,
+    ariaLabel,
+    className,
+    checkedTrackColor,
+    uncheckedTrackColor,
+    checkedThumbColor,
+    uncheckedThumbColor
+  }, ref) => {
+    var _a;
+    const prefersReduced = (_a = useReducedMotion()) != null ? _a : false;
+    const [isPressed, setIsPressed] = React4.useState(false);
+    const [isHovered, setIsHovered] = React4.useState(false);
+    const [isFocused, setIsFocused] = React4.useState(false);
+    const [ripples, setRipples] = React4.useState([]);
+    const generatedId = React4.useId();
+    const switchId = label ? `switch-${generatedId}` : void 0;
+    const handleClick = React4.useCallback(() => {
+      if (!disabled) onCheckedChange(!checked);
+    }, [disabled, checked, onCheckedChange]);
+    const handleKeyDown = React4.useCallback(
+      (e) => {
+        if (disabled) return;
+        if (e.key === " " || e.key === "Enter") {
+          e.preventDefault();
+          onCheckedChange(!checked);
+        }
+      },
+      [disabled, checked, onCheckedChange]
+    );
+    const handlePointerDown = React4.useCallback(
+      (e) => {
+        if (disabled) return;
+        setIsPressed(true);
+        const rect = e.currentTarget.getBoundingClientRect();
+        const x = e.clientX - rect.left;
+        const y = e.clientY - rect.top;
+        const rippleSize = Math.hypot(rect.width, rect.height) * 2;
+        setRipples((prev) => [
+          ...prev,
+          { id: Date.now(), x, y, size: rippleSize }
+        ]);
+      },
+      [disabled]
+    );
+    const handlePointerUp = React4.useCallback(() => {
+      setIsPressed(false);
+    }, []);
+    const handlePointerEnter = React4.useCallback(() => {
+      if (!disabled) setIsHovered(true);
+    }, [disabled]);
+    const handlePointerLeave = React4.useCallback(() => {
+      setIsHovered(false);
+      setIsPressed(false);
+    }, []);
+    const handleFocus = React4.useCallback(() => setIsFocused(true), []);
+    const handleBlur = React4.useCallback(() => setIsFocused(false), []);
+    const removeRipple = React4.useCallback(
+      (id) => setRipples((prev) => prev.filter((r) => r.id !== id)),
+      []
+    );
+    const buttonAriaLabel = label ? void 0 : ariaLabel;
+    const switchButton = /* @__PURE__ */ jsx(
+      "button",
+      {
+        ref,
+        id: switchId,
+        type: "button",
+        role: "switch",
+        "aria-checked": checked,
+        "aria-disabled": disabled || void 0,
+        "aria-label": buttonAriaLabel,
+        tabIndex: disabled ? -1 : 0,
+        disabled,
+        onClick: handleClick,
+        onKeyDown: handleKeyDown,
+        onPointerDown: handlePointerDown,
+        onPointerUp: handlePointerUp,
+        onPointerLeave: handlePointerLeave,
+        onPointerEnter: handlePointerEnter,
+        onFocus: handleFocus,
+        onBlur: handleBlur,
+        className: cn(
+          "relative inline-flex items-center justify-center cursor-pointer select-none",
+          // Touch target: 48×48 minimum (pad around 32px track)
+          "min-w-12 min-h-12",
+          // Focus ring — MD3 FocusIndicatorColor = secondary
+          "focus-visible:outline-2 focus-visible:outline-offset-2 rounded-full",
+          "focus-visible:outline-(--md-sys-color-secondary)",
+          // Disabled
+          disabled && "pointer-events-none cursor-not-allowed",
+          !label && className
+        ),
+        children: /* @__PURE__ */ jsxs("div", { className: "relative overflow-hidden rounded-full", children: [
+          /* @__PURE__ */ jsx(
+            SwitchVisual,
+            {
+              checked,
+              disabled,
+              isPressed,
+              isHovered,
+              isFocused,
+              thumbContent,
+              icons,
+              showOnlySelectedIcon,
+              prefersReduced,
+              checkedTrackColor,
+              uncheckedTrackColor,
+              checkedThumbColor,
+              uncheckedThumbColor
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Ripple,
+            {
+              ripples,
+              onRippleDone: removeRipple,
+              disabled
+            }
+          )
+        ] })
+      }
+    );
+    const content = label ? /* @__PURE__ */ jsxs(
+      "label",
+      {
+        htmlFor: switchId,
+        className: cn(
+          "inline-flex items-center gap-3 cursor-pointer select-none",
+          disabled && "cursor-not-allowed pointer-events-none opacity-[0.38]",
+          className
+        ),
+        children: [
+          switchButton,
+          /* @__PURE__ */ jsx("span", { className: "text-sm leading-none text-(--md-sys-color-on-surface)", children: label })
+        ]
+      }
+    ) : switchButton;
+    return /* @__PURE__ */ jsx(LazyMotion, { features: domMax, strict: true, children: content });
+  }
+);
+SwitchComponent.displayName = "Switch";
+var Switch = React4.memo(SwitchComponent);
+var ScrollArea = React4.forwardRef(
+  (_a, ref) => {
+    var _b = _a, {
+      className,
+      viewportClassName,
+      children,
+      type = "hover",
+      orientation = "vertical",
+      scrollHideDelay = 600,
+      viewportRef,
+      viewportProps
+    } = _b, props = __objRest(_b, [
+      "className",
+      "viewportClassName",
+      "children",
+      "type",
+      "orientation",
+      "scrollHideDelay",
+      "viewportRef",
+      "viewportProps"
+    ]);
+    const [isTouchDevice, setIsTouchDevice] = React4.useState(false);
+    React4.useEffect(() => {
+      if (typeof window !== "undefined") {
+        setIsTouchDevice(
+          "ontouchstart" in window || navigator.maxTouchPoints > 0
+        );
+      }
+    }, []);
+    const resolvedType = React4.useMemo(() => {
+      if (type === "hover" && isTouchDevice) {
+        return "scroll";
+      }
+      return type;
+    }, [type, isTouchDevice]);
+    const radixType = resolvedType === "none" ? "always" : resolvedType;
+    return /* @__PURE__ */ jsxs(
+      RadixScrollArea.Root,
+      __spreadProps(__spreadValues({
+        ref,
+        type: radixType,
+        scrollHideDelay,
+        className: cn("relative overflow-hidden flex flex-col", className)
+      }, props), {
+        children: [
+          /* @__PURE__ */ jsx(
+            RadixScrollArea.Viewport,
+            __spreadProps(__spreadValues({
+              ref: viewportRef
+            }, viewportProps), {
+              className: cn(
+                "h-full w-full flex-1 min-h-0 min-w-0 rounded-[inherit]",
+                "outline-none focus-visible:ring-2 focus-visible:ring-m3-primary focus-visible:ring-offset-1",
+                viewportClassName,
+                viewportProps == null ? void 0 : viewportProps.className
+              ),
+              children
+            })
+          ),
+          (orientation === "vertical" || orientation === "both") && /* @__PURE__ */ jsx(
+            ScrollAreaScrollbar,
+            {
+              orientation: "vertical",
+              className: resolvedType === "none" ? "hidden" : void 0
+            }
+          ),
+          (orientation === "horizontal" || orientation === "both") && /* @__PURE__ */ jsx(
+            ScrollAreaScrollbar,
+            {
+              orientation: "horizontal",
+              className: resolvedType === "none" ? "hidden" : void 0
+            }
+          ),
+          /* @__PURE__ */ jsx(RadixScrollArea.Corner, { className: "bg-m3-surface-container" })
+        ]
+      })
+    );
+  }
+);
+ScrollArea.displayName = "ScrollArea";
+var ScrollAreaScrollbar = React4.forwardRef((_a, ref) => {
+  var _b = _a, { className, orientation = "vertical" } = _b, props = __objRest(_b, ["className", "orientation"]);
+  return /* @__PURE__ */ jsx(
+    RadixScrollArea.Scrollbar,
+    __spreadProps(__spreadValues({
+      ref,
+      orientation,
+      className: cn(
+        "flex touch-none select-none transition-all duration-300 ease-in-out",
+        "absolute z-50",
+        orientation === "vertical" && "right-0 top-0 bottom-0 w-2.5 border-l border-l-transparent p-px",
+        orientation === "horizontal" && "bottom-0 left-0 right-0 h-2.5 flex-col border-t border-t-transparent p-px",
+        "data-[state=hidden]:opacity-0 data-[state=visible]:opacity-100",
+        className
+      )
+    }, props), {
+      children: /* @__PURE__ */ jsx(
+        RadixScrollArea.Thumb,
+        {
+          className: cn(
+            "relative flex-1 rounded-full bg-m3-on-surface/25 transition-colors duration-200",
+            "hover:bg-m3-on-surface/40 active:bg-m3-on-surface/55",
+            "before:absolute before:left-1/2 before:top-1/2 before:min-h-11 before:min-w-11 before:-translate-x-1/2 before:-translate-y-1/2"
+          )
+        }
+      )
+    })
+  );
+});
+ScrollAreaScrollbar.displayName = RadixScrollArea.Scrollbar.displayName;
+var ScrollAreaCorner = React4.forwardRef((_a, ref) => {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ jsx(
+    RadixScrollArea.Corner,
+    __spreadValues({
+      ref,
+      className: cn("bg-m3-surface-container", className)
+    }, props)
+  );
+});
+ScrollAreaCorner.displayName = "ScrollAreaCorner";
+var ToolbarContext = React4.createContext(
+  null
+);
+function useToolbarContext() {
+  return React4.useContext(ToolbarContext);
+}
+
+// src/ui/shared/constants.ts
+var MD3_STANDARD_EASING = [
+  0.2,
+  0,
+  0,
+  1
+];
+var MD3_LABEL_FLOAT_DURATION = 0.15;
+var MD3_INDICATOR_DURATION = 0.2;
+var MD3_SUPPORTING_DURATION = 0.12;
+var MD3_ICON_SWAP_DURATION = 0.1;
+
+// src/ui/text-field/text-field.tokens.ts
+var TF_COLORS = {
+  /** Input text color */
+  inputText: "var(--md-sys-color-on-surface)",
+  /** Label (unfloated) + icons + prefix/suffix + supporting text */
+  onSurfaceVariant: "var(--md-sys-color-on-surface-variant)",
+  /** Focused active indicator / outline, floated label */
+  primary: "var(--md-sys-color-primary)",
+  /** Error indicator / outline / label / icon / supporting text */
+  error: "var(--md-sys-color-error)",
+  /** Outlined border (enabled) */
+  outline: "var(--md-sys-color-outline)"};
+var TF_SIZE = {
+  /** Container height — normal */
+  height: 56,
+  /** Container height — dense variant */
+  denseHeight: 48,
+  /** Active indicator height — enabled */
+  indicatorThin: 1,
+  /** Active indicator height — focused */
+  indicatorThick: 2,
+  /** Outline stroke width — enabled */
+  outlineThin: 1,
+  /** Outline stroke width — focused */
+  outlineThick: 2,
+  /** Padding inline start (no leading icon) */
+  paddingStart: 16,
+  /** Notch extra padding per side on outlined label gap */
+  notchPadding: 4
+};
+var TF_TYPOGRAPHY = {
+  /** Scale ratio when label floats: 12/16 = 0.75 */
+  labelScaleRatio: 12 / 16
+};
+var TF_CLASSES = {
+  // Prefix / Suffix
+  prefixSuffix: "text-base text-[var(--md-sys-color-on-surface-variant)] select-none shrink-0"};
+var ActiveIndicator = React4.memo(function ActiveIndicator2({
+  isFocused,
+  isError,
+  isDisabled,
+  isHovered,
+  prefersReduced
+}) {
+  const duration = prefersReduced ? 0 : MD3_INDICATOR_DURATION;
+  const ease = MD3_STANDARD_EASING;
+  const height = isFocused || isError ? TF_SIZE.indicatorThick : TF_SIZE.indicatorThin;
+  let backgroundColor;
+  if (isError) {
+    backgroundColor = TF_COLORS.error;
+  } else if (isFocused) {
+    backgroundColor = TF_COLORS.primary;
+  } else if (isHovered && !isDisabled) {
+    backgroundColor = TF_COLORS.inputText;
+  } else {
+    backgroundColor = TF_COLORS.onSurfaceVariant;
+  }
+  return /* @__PURE__ */ jsx(
+    m.div,
+    {
+      "aria-hidden": "true",
+      className: "absolute bottom-0 left-0 right-0 origin-center",
+      animate: { height, backgroundColor },
+      transition: { duration, ease }
+    }
+  );
+});
+ActiveIndicator.displayName = "ActiveIndicator";
+function getFloatedY(variant, containerHeight) {
+  const labelSmallHeight = 16;
+  const paddingTop = 8;
+  if (variant === "filled") {
+    const floatedCenter = paddingTop + labelSmallHeight / 2;
+    const unfloatedCenter = containerHeight / 2;
+    return -(unfloatedCenter - floatedCenter);
+  }
+  return -(containerHeight / 2);
+}
+function getLabelColor(isFloated, isFocused, isError, isDisabled) {
+  if (isDisabled) return TF_COLORS.onSurfaceVariant;
+  if (isError) return TF_COLORS.error;
+  if (isFloated && isFocused) return TF_COLORS.primary;
+  return TF_COLORS.onSurfaceVariant;
+}
+var FloatingLabel = React4.memo(function FloatingLabel2({
+  text,
+  isFloated,
+  isFocused,
+  isError,
+  isDisabled,
+  variant,
+  containerHeight,
+  prefersReduced,
+  showAsterisk,
+  htmlFor,
+  labelRef,
+  hasLeading = false
+}) {
+  const duration = prefersReduced ? 0 : MD3_LABEL_FLOAT_DURATION;
+  const ease = MD3_STANDARD_EASING;
+  const y = isFloated ? getFloatedY(variant, containerHeight) : 0;
+  const x = variant === "outlined" && isFloated && hasLeading ? -36 : 0;
+  const scale = isFloated ? TF_TYPOGRAPHY.labelScaleRatio : 1;
+  const color = getLabelColor(isFloated, isFocused, isError, isDisabled);
+  return /* @__PURE__ */ jsx(
+    m.label,
+    {
+      htmlFor,
+      className: cn(
+        "absolute pointer-events-none select-none origin-[left_center] leading-6 text-base whitespace-nowrap",
+        "px-1 -mx-1",
+        // Clear the notch gap and keep text aligned
+        variant === "outlined" && isFloated && "bg-m3-surface",
+        "left-4",
+        isDisabled && "opacity-[0.38]"
+      ),
+      animate: { y, x, scale, color },
+      transition: { duration, ease },
+      style: {
+        top: (containerHeight - 24) / 2,
+        // 24px is the resting line-height
+        transformOrigin: "left center",
+        zIndex: 1
+      },
+      children: /* @__PURE__ */ jsxs("span", { ref: labelRef, className: "inline-block relative", children: [
+        text,
+        /* @__PURE__ */ jsx(AnimatePresence, { children: showAsterisk && /* @__PURE__ */ jsx(
+          m.span,
+          {
+            "aria-hidden": "true",
+            initial: { opacity: 0 },
+            animate: { opacity: 1 },
+            exit: { opacity: 0 },
+            transition: { duration: prefersReduced ? 0 : 0.1 },
+            className: "ml-0.5 text-m3-error",
+            children: "*"
+          },
+          "asterisk"
+        ) })
+      ] })
+    }
+  );
+});
+FloatingLabel.displayName = "FloatingLabel";
+var LeadingIcon = React4.memo(function LeadingIcon2({
+  children,
+  isError,
+  isDisabled
+}) {
+  const color = isError && !isDisabled ? TF_COLORS.error : TF_COLORS.onSurfaceVariant;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "aria-hidden": "true",
+      className: "flex items-center justify-center shrink-0 w-6 h-6 ml-3",
+      style: { color },
+      children
+    }
+  );
+});
+LeadingIcon.displayName = "LeadingIcon";
+function getOutlineColor(isFocused, isError, isHovered, isDisabled) {
+  if (isDisabled) return TF_COLORS.onSurfaceVariant;
+  if (isError) return TF_COLORS.error;
+  if (isFocused) return TF_COLORS.primary;
+  if (isHovered) return TF_COLORS.inputText;
+  return TF_COLORS.outline;
+}
+var OutlineContainer = React4.memo(function OutlineContainer2({
+  isFloated,
+  isFocused,
+  isError,
+  isDisabled,
+  isHovered,
+  labelWidth,
+  prefersReduced
+}) {
+  const colorDuration = prefersReduced ? 0 : MD3_INDICATOR_DURATION;
+  const notchDuration = prefersReduced ? 0 : MD3_LABEL_FLOAT_DURATION;
+  const ease = MD3_STANDARD_EASING;
+  const borderColor = getOutlineColor(
+    isFocused,
+    isError,
+    isHovered,
+    isDisabled
+  );
+  const borderWidth = isFocused || isError ? TF_SIZE.outlineThick : TF_SIZE.outlineThin;
+  const leftSegmentWidth = TF_SIZE.paddingStart;
+  const notchWidth = isFloated ? labelWidth * TF_TYPOGRAPHY.labelScaleRatio + TF_SIZE.notchPadding * 2 : 0;
+  const borderTransition = { duration: colorDuration, ease };
+  const notchTransition = { duration: notchDuration, ease };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "aria-hidden": "true",
+      className: "absolute inset-0 pointer-events-none flex rounded-[inherit]",
+      children: [
+        /* @__PURE__ */ jsx(
+          m.div,
+          {
+            className: "rounded-tl-[inherit] rounded-bl-[inherit]",
+            style: { width: leftSegmentWidth - TF_SIZE.notchPadding },
+            animate: {
+              borderColor,
+              borderWidth,
+              borderStyle: "solid",
+              borderRightWidth: 0
+            },
+            transition: borderTransition
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          m.div,
+          {
+            className: "flex flex-col shrink-0",
+            style: { minWidth: 0 },
+            animate: { width: notchWidth },
+            transition: notchTransition,
+            children: [
+              /* @__PURE__ */ jsx(
+                m.div,
+                {
+                  className: "shrink-0",
+                  style: { height: borderWidth },
+                  animate: {
+                    borderTopColor: borderColor,
+                    opacity: isFloated ? 0 : 1,
+                    borderTopWidth: borderWidth,
+                    borderTopStyle: "solid"
+                  },
+                  transition: borderTransition
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                m.div,
+                {
+                  className: "flex-1",
+                  animate: {
+                    borderBottomColor: borderColor,
+                    borderBottomWidth: borderWidth,
+                    borderBottomStyle: "solid"
+                  },
+                  transition: borderTransition
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          m.div,
+          {
+            className: "flex-1 rounded-tr-[inherit] rounded-br-[inherit]",
+            animate: {
+              borderColor,
+              borderWidth,
+              borderStyle: "solid",
+              borderLeftWidth: 0
+            },
+            transition: borderTransition
+          }
+        )
+      ]
+    }
+  );
+});
+OutlineContainer.displayName = "OutlineContainer";
+var PrefixSuffix = React4.memo(function PrefixSuffix2({
+  text,
+  type,
+  visible,
+  prefersReduced
+}) {
+  const duration = prefersReduced ? 0 : MD3_LABEL_FLOAT_DURATION;
+  return /* @__PURE__ */ jsx(AnimatePresence, { children: visible && /* @__PURE__ */ jsx(
+    m.span,
+    {
+      "aria-hidden": "true",
+      className: `${TF_CLASSES.prefixSuffix} ${type === "suffix" ? "ml-0.5" : "mr-0.5"}`,
+      initial: { opacity: 0 },
+      animate: { opacity: 1 },
+      exit: { opacity: 0 },
+      transition: { duration, ease: MD3_STANDARD_EASING },
+      children: text
+    }
+  ) });
+});
+PrefixSuffix.displayName = "PrefixSuffix";
+function AnimatedText({
+  text,
+  motionKey,
+  className,
+  ariaLive,
+  duration
+}) {
+  return /* @__PURE__ */ jsx(
+    m.span,
+    {
+      className,
+      initial: { opacity: 0, y: -4 },
+      animate: { opacity: 1, y: 0 },
+      exit: { opacity: 0, y: -4 },
+      transition: { duration, ease: MD3_STANDARD_EASING },
+      "aria-live": ariaLive,
+      children: text
+    },
+    motionKey
+  );
+}
+var SupportingText = React4.memo(function SupportingText2({
+  supportingText,
+  errorText,
+  isError,
+  charCount,
+  maxLength,
+  id,
+  prefersReduced
+}) {
+  const duration = prefersReduced ? 0 : MD3_SUPPORTING_DURATION;
+  const activeText = isError && errorText ? errorText : supportingText;
+  const isOverLimit = maxLength !== void 0 && (charCount != null ? charCount : 0) > maxLength;
+  const counterColor = isOverLimit ? TF_COLORS.error : TF_COLORS.onSurfaceVariant;
+  if (!activeText && maxLength === void 0) return null;
+  return /* @__PURE__ */ jsxs(
+    m.div,
+    {
+      className: "flex items-start justify-between gap-2 mt-1 px-4",
+      initial: { opacity: 0, height: 0 },
+      animate: { opacity: 1, height: "auto" },
+      exit: { opacity: 0, height: 0 },
+      transition: { duration, ease: MD3_STANDARD_EASING },
+      children: [
+        /* @__PURE__ */ jsx("div", { id, className: "flex-1 min-w-0", children: /* @__PURE__ */ jsx(AnimatePresence, { mode: "wait", children: activeText && /* @__PURE__ */ jsx(
+          AnimatedText,
+          {
+            motionKey: isError && errorText ? `error-${errorText}` : `helper-${supportingText}`,
+            text: activeText,
+            className: `text-xs leading-4 block ${isError ? "text-m3-error" : "text-m3-on-surface-variant"}`,
+            ariaLive: "polite",
+            duration
+          },
+          isError && errorText ? "error" : "helper"
+        ) }) }),
+        maxLength !== void 0 && typeof charCount === "number" && /* @__PURE__ */ jsxs(
+          m.span,
+          {
+            className: "text-xs leading-4 tabular-nums shrink-0",
+            animate: { color: counterColor },
+            transition: { duration, ease: MD3_STANDARD_EASING },
+            "aria-live": "polite",
+            "aria-atomic": "true",
+            children: [
+              charCount,
+              " / ",
+              maxLength
+            ]
+          }
+        )
+      ]
+    }
+  );
+});
+SupportingText.displayName = "SupportingText";
+function AnimatedIconSlot({
+  children,
+  motionKey,
+  duration
+}) {
+  return /* @__PURE__ */ jsx(
+    m.span,
+    {
+      className: "flex items-center justify-center",
+      initial: { opacity: 0, scale: 0 },
+      animate: { opacity: 1, scale: 1 },
+      exit: { opacity: 0, scale: 0 },
+      transition: { duration, ease: MD3_STANDARD_EASING },
+      children
+    },
+    motionKey
+  );
+}
+function EyeOpenIcon() {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      width: "24",
+      height: "24",
+      viewBox: "0 0 24 24",
+      fill: "currentColor",
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ jsx("path", { d: "M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z" })
+    }
+  );
+}
+function EyeOffIcon() {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      width: "24",
+      height: "24",
+      viewBox: "0 0 24 24",
+      fill: "currentColor",
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ jsx("path", { d: "M12 7c2.76 0 5 2.24 5 5 0 .65-.13 1.26-.36 1.83l2.92 2.92c1.51-1.26 2.7-2.89 3.43-4.75-1.73-4.39-6-7.5-11-7.5-1.4 0-2.74.25-3.98.7l2.16 2.16C10.74 7.13 11.35 7 12 7zM2 4.27l2.28 2.28.46.46C3.08 8.3 1.78 10.02 1 12c1.73 4.39 6 7.5 11 7.5 1.55 0 3.03-.3 4.38-.84l.42.42L19.73 22 21 20.73 3.27 3 2 4.27zM7.53 9.8l1.55 1.55c-.05.21-.08.43-.08.65 0 1.66 1.34 3 3 3 .22 0 .44-.03.65-.08l1.55 1.55c-.67.33-1.41.53-2.2.53-2.76 0-5-2.24-5-5 0-.79.2-1.53.53-2.2zm4.31-.78l3.15 3.15.02-.16c0-1.66-1.34-3-3-3l-.17.01z" })
+    }
+  );
+}
+function ClearIcon() {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      width: "20",
+      height: "20",
+      viewBox: "0 0 24 24",
+      fill: "currentColor",
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ jsx("path", { d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" })
+    }
+  );
+}
+var TrailingIcon = React4.memo(function TrailingIcon2({
+  mode,
+  children,
+  value,
+  showPassword = false,
+  onClear,
+  onPasswordToggle,
+  isError,
+  isDisabled,
+  prefersReduced
+}) {
+  const duration = prefersReduced ? 0 : MD3_ICON_SWAP_DURATION;
+  const iconColor = isError && !isDisabled ? TF_COLORS.error : TF_COLORS.onSurfaceVariant;
+  const btnClass = "relative flex items-center justify-center w-12 h-12 -mr-1 rounded-full cursor-pointer outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-m3-primary)] transition-colors hover:bg-[var(--color-m3-on-surface)]/8 active:bg-[var(--color-m3-on-surface)]/12 disabled:pointer-events-none";
+  if (mode === "clear") {
+    const hasValue = value.length > 0;
+    return /* @__PURE__ */ jsx(AnimatePresence, { children: hasValue && /* @__PURE__ */ jsx(AnimatedIconSlot, { motionKey: "clear", duration, children: /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        "aria-label": "Clear input",
+        onClick: onClear,
+        disabled: isDisabled,
+        tabIndex: isDisabled ? -1 : 0,
+        className: btnClass,
+        style: { color: iconColor },
+        children: /* @__PURE__ */ jsx(ClearIcon, {})
+      }
+    ) }) });
+  }
+  if (mode === "password-toggle") {
+    return /* @__PURE__ */ jsx(AnimatePresence, { mode: "wait", children: /* @__PURE__ */ jsx(
+      AnimatedIconSlot,
+      {
+        motionKey: showPassword ? "eye-off" : "eye-on",
+        duration,
+        children: /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            "aria-label": showPassword ? "Hide password" : "Show password",
+            onClick: onPasswordToggle,
+            disabled: isDisabled,
+            tabIndex: isDisabled ? -1 : 0,
+            className: btnClass,
+            style: { color: iconColor },
+            children: showPassword ? /* @__PURE__ */ jsx(EyeOffIcon, {}) : /* @__PURE__ */ jsx(EyeOpenIcon, {})
+          }
+        )
+      }
+    ) });
+  }
+  if (mode === "custom" && children) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "flex items-center justify-center w-6 h-6 mr-3",
+        style: { color: iconColor },
+        children
+      }
+    );
+  }
+  return null;
+});
+TrailingIcon.displayName = "TrailingIcon";
+var LINE_HEIGHT_PX = 24;
+var TextFieldComponent = React4.forwardRef(
+  ({
+    // Core
+    variant = "filled",
+    label,
+    value: valueProp,
+    defaultValue = "",
+    onChange,
+    // Input config
+    type = "text",
+    placeholder,
+    name,
+    id: idProp,
+    autoComplete,
+    inputMode,
+    autoResize = false,
+    maxRows,
+    rows = autoResize ? 1 : 2,
+    cols,
+    textDirection,
+    // Validation
+    required = false,
+    noAsterisk = false,
+    error: errorProp = false,
+    errorText,
+    minLength,
+    maxLength,
+    min,
+    max,
+    step,
+    pattern,
+    multiple,
+    // Supporting text
+    supportingText,
+    // Decorators
+    prefixText,
+    suffixText,
+    leadingIcon,
+    trailingIcon,
+    trailingIconMode = "none",
+    // States
+    disabled = false,
+    readOnly = false,
+    noSpinner = false,
+    // Form
+    form,
+    // Accessibility
+    "aria-label": ariaLabel,
+    "aria-describedby": ariaDescribedby,
+    "aria-labelledby": ariaLabelledby,
+    // Layout
+    className,
+    fullWidth = true,
+    dense = false,
+    // ScrollArea
+    scrollAreaType = "hover",
+    // Callbacks
+    onFocus,
+    onBlur,
+    onKeyDown,
+    onKeyUp
+  }, ref) => {
+    var _a;
+    const prefersReduced = (_a = useReducedMotion()) != null ? _a : false;
+    const toolbarContext = useToolbarContext();
+    const isInToolbar = !!toolbarContext;
+    const resolvedDense = isInToolbar ? true : dense;
+    const resolvedLabel = isInToolbar ? void 0 : label;
+    const generatedId = React4.useId();
+    const inputId = idProp != null ? idProp : `tf-${generatedId}`;
+    const supportingId = `${inputId}-supporting`;
+    const isControlled = valueProp !== void 0;
+    const [internalValue, setInternalValue] = React4.useState(defaultValue);
+    const currentValue = isControlled ? valueProp : internalValue;
+    const [isFocused, setIsFocused] = React4.useState(false);
+    const [showPassword, setShowPassword] = React4.useState(false);
+    const resolvedInputType = type === "password" && showPassword ? "text" : type;
+    const [nativeError, setNativeError] = React4.useState("");
+    const [labelWidth, setLabelWidth] = React4.useState(0);
+    const hasValue = currentValue.length > 0;
+    const isFloated = isFocused || hasValue;
+    const isError = errorProp || !!nativeError || maxLength !== void 0 && currentValue.length > maxLength;
+    const containerHeight = resolvedDense ? TF_SIZE.denseHeight : TF_SIZE.height;
+    const showAsterisk = required && !noAsterisk;
+    const inputRef = React4.useRef(null);
+    const labelSpanRef = React4.useRef(null);
+    React4.useLayoutEffect(() => {
+      if (labelSpanRef.current) {
+        setLabelWidth(labelSpanRef.current.offsetWidth);
+      }
+    }, []);
+    React4.useLayoutEffect(() => {
+      if (type !== "textarea" || !inputRef.current) return;
+      const textarea = inputRef.current;
+      if (autoResize) {
+        textarea.style.height = "auto";
+        textarea.style.height = `${textarea.scrollHeight}px`;
+        if (maxRows) {
+          textarea.style.maxHeight = `${maxRows * LINE_HEIGHT_PX}px`;
+        }
+      }
+      textarea.style.overflowY = "hidden";
+    }, [type, autoResize, maxRows, currentValue]);
+    const handleValueChange = React4.useCallback(
+      (newValue) => {
+        var _a2, _b;
+        if (!isControlled) setInternalValue(newValue);
+        setNativeError("");
+        (_b = (_a2 = inputRef.current) == null ? void 0 : _a2.setCustomValidity) == null ? void 0 : _b.call(_a2, "");
+      },
+      [isControlled]
+    );
+    const handleChange = React4.useCallback(
+      (e) => {
+        const newVal = e.target.value;
+        handleValueChange(newVal);
+        onChange == null ? void 0 : onChange(newVal, e);
+      },
+      [handleValueChange, onChange]
+    );
+    const handleFocus = React4.useCallback(
+      (e) => {
+        setIsFocused(true);
+        onFocus == null ? void 0 : onFocus(e);
+      },
+      [onFocus]
+    );
+    const handleBlur = React4.useCallback(
+      (e) => {
+        setIsFocused(false);
+        const el = inputRef.current;
+        if (el && !el.validity.valid) {
+          setNativeError(el.validationMessage);
+        } else {
+          setNativeError("");
+        }
+        onBlur == null ? void 0 : onBlur(e);
+      },
+      [onBlur]
+    );
+    const handleClear = React4.useCallback(() => {
+      var _a2;
+      handleValueChange("");
+      onChange == null ? void 0 : onChange("", {
+        target: { value: "" }
+      });
+      (_a2 = inputRef.current) == null ? void 0 : _a2.focus();
+    }, [handleValueChange, onChange]);
+    const handlePasswordToggle = React4.useCallback(() => {
+      var _a2;
+      setShowPassword((prev) => !prev);
+      (_a2 = inputRef.current) == null ? void 0 : _a2.focus();
+    }, []);
+    React4.useImperativeHandle(
+      ref,
+      () => ({
+        focus: () => {
+          var _a2;
+          return (_a2 = inputRef.current) == null ? void 0 : _a2.focus();
+        },
+        blur: () => {
+          var _a2;
+          return (_a2 = inputRef.current) == null ? void 0 : _a2.blur();
+        },
+        select: () => {
+          var _a2, _b;
+          return (_b = (_a2 = inputRef.current) == null ? void 0 : _a2.select) == null ? void 0 : _b.call(_a2);
+        },
+        clear: () => handleValueChange(""),
+        setCustomValidity: (msg) => {
+          var _a2, _b;
+          return (_b = (_a2 = inputRef.current) == null ? void 0 : _a2.setCustomValidity) == null ? void 0 : _b.call(_a2, msg);
+        },
+        checkValidity: () => {
+          var _a2, _b, _c;
+          return (_c = (_b = (_a2 = inputRef.current) == null ? void 0 : _a2.checkValidity) == null ? void 0 : _b.call(_a2)) != null ? _c : true;
+        },
+        reportValidity: () => {
+          var _a2, _b, _c;
+          const el = inputRef.current;
+          const valid = (_b = (_a2 = el == null ? void 0 : el.reportValidity) == null ? void 0 : _a2.call(el)) != null ? _b : true;
+          if (!valid) setNativeError((_c = el == null ? void 0 : el.validationMessage) != null ? _c : "");
+          return valid;
+        },
+        getValue: () => currentValue,
+        getInputElement: () => inputRef.current
+      }),
+      [currentValue, handleValueChange]
+    );
+    const hasSupporting = !!(supportingText || errorText || maxLength !== void 0);
+    const computedDescribedby = [hasSupporting ? supportingId : "", ariaDescribedby != null ? ariaDescribedby : ""].filter(Boolean).join(" ") || void 0;
+    const inputClass = cn(
+      "bg-transparent outline-none w-full",
+      isInToolbar ? "self-center" : "self-end",
+      "text-base leading-6 text-m3-on-surface",
+      "caret-[var(--color-m3-primary)]",
+      "placeholder:text-m3-on-surface-variant/60",
+      noSpinner && type === "number" && "[appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none",
+      disabled && "cursor-not-allowed"
+    );
+    const inputProps = {
+      id: inputId,
+      name,
+      value: currentValue,
+      placeholder: isFloated ? placeholder != null ? placeholder : "" : "",
+      disabled,
+      readOnly,
+      required,
+      minLength,
+      maxLength,
+      autoComplete,
+      inputMode,
+      form,
+      "aria-label": ariaLabel,
+      "aria-labelledby": ariaLabelledby,
+      "aria-describedby": computedDescribedby,
+      "aria-invalid": isError || void 0,
+      "aria-required": required || void 0,
+      onChange: handleChange,
+      onFocus: handleFocus,
+      onBlur: handleBlur,
+      onKeyDown,
+      onKeyUp
+    };
+    const hasLeading = !!leadingIcon;
+    const paddingStart = "pl-4";
+    const paddingEnd = "pr-4";
+    const containerClass = cn(
+      "relative flex items-center",
+      variant === "filled" ? isInToolbar ? "bg-transparent" : "bg-[var(--color-m3-surface-container-highest)] rounded-tl-sm rounded-tr-sm" : "bg-transparent rounded-sm",
+      fullWidth ? "w-full" : "w-fit"
+    );
+    const innerClass = cn(
+      "relative flex flex-col flex-1 min-w-0 h-full",
+      paddingStart,
+      paddingEnd,
+      isInToolbar ? "justify-center" : variant === "filled" ? resolvedDense ? "pt-5 pb-2" : "pt-6 pb-2" : resolvedDense ? "py-3" : "py-4"
+    );
+    const wrapperClass = cn(
+      "group/tf inline-flex flex-col",
+      fullWidth ? "w-full" : "w-fit",
+      disabled && "opacity-[0.38] pointer-events-none",
+      className
+    );
+    const containerHeightClass = resolvedDense ? "h-12" : "h-14";
+    return /* @__PURE__ */ jsx(LazyMotion, { features: domMax, strict: true, children: /* @__PURE__ */ jsxs("div", { className: wrapperClass, children: [
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: cn(
+            containerClass,
+            type !== "textarea" && containerHeightClass
+          ),
+          children: [
+            variant === "outlined" && !isInToolbar && /* @__PURE__ */ jsx(
+              OutlineContainer,
+              {
+                isFloated,
+                isFocused,
+                isError,
+                isDisabled: disabled,
+                isHovered: false,
+                labelWidth,
+                prefersReduced
+              }
+            ),
+            variant === "filled" && !isInToolbar && /* @__PURE__ */ jsx(
+              "div",
+              {
+                "aria-hidden": "true",
+                className: cn(
+                  "absolute inset-0 pointer-events-none rounded-[inherit] bg-m3-on-surface",
+                  "opacity-0 transition-opacity duration-150",
+                  "group-hover/tf:opacity-[0.08]"
+                )
+              }
+            ),
+            leadingIcon && /* @__PURE__ */ jsx(LeadingIcon, { isError, isDisabled: disabled, children: leadingIcon }),
+            /* @__PURE__ */ jsxs("div", { className: innerClass, children: [
+              resolvedLabel && /* @__PURE__ */ jsx(
+                FloatingLabel,
+                {
+                  text: resolvedLabel,
+                  isFloated,
+                  isFocused,
+                  isError,
+                  isDisabled: disabled,
+                  variant,
+                  containerHeight,
+                  prefersReduced,
+                  showAsterisk,
+                  htmlFor: inputId,
+                  labelRef: labelSpanRef,
+                  hasLeading
+                }
+              ),
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center w-full", children: [
+                prefixText && /* @__PURE__ */ jsx(
+                  PrefixSuffix,
+                  {
+                    text: prefixText,
+                    type: "prefix",
+                    visible: isFloated,
+                    prefersReduced
+                  }
+                ),
+                type === "textarea" ? /* @__PURE__ */ jsx(
+                  ScrollArea,
+                  {
+                    type: scrollAreaType,
+                    className: "w-full flex-1",
+                    style: {
+                      height: !autoResize ? rows * LINE_HEIGHT_PX : void 0,
+                      maxHeight: autoResize && maxRows ? maxRows * LINE_HEIGHT_PX : void 0
+                    },
+                    viewportClassName: "max-h-[inherit]",
+                    children: /* @__PURE__ */ jsx(
+                      "textarea",
+                      __spreadValues({
+                        ref: inputRef,
+                        rows,
+                        cols,
+                        className: cn(
+                          inputClass,
+                          "resize-none mt-2",
+                          autoResize ? "h-auto" : "h-full"
+                        ),
+                        style: { direction: textDirection || void 0 }
+                      }, inputProps)
+                    )
+                  }
+                ) : /* @__PURE__ */ jsx(
+                  "input",
+                  __spreadValues({
+                    ref: inputRef,
+                    type: type === "password" ? resolvedInputType : type,
+                    min,
+                    max,
+                    step,
+                    pattern,
+                    multiple,
+                    className: inputClass,
+                    style: { direction: textDirection || void 0 }
+                  }, inputProps)
+                ),
+                suffixText && /* @__PURE__ */ jsx(
+                  PrefixSuffix,
+                  {
+                    text: suffixText,
+                    type: "suffix",
+                    visible: isFloated,
+                    prefersReduced
+                  }
+                )
+              ] })
+            ] }),
+            (trailingIconMode !== "none" || trailingIcon) && /* @__PURE__ */ jsx(
+              TrailingIcon,
+              {
+                mode: trailingIcon ? "custom" : trailingIconMode,
+                value: currentValue,
+                showPassword,
+                onClear: handleClear,
+                onPasswordToggle: handlePasswordToggle,
+                isError,
+                isDisabled: disabled,
+                prefersReduced,
+                children: trailingIcon
+              }
+            ),
+            variant === "filled" && !isInToolbar && /* @__PURE__ */ jsx(
+              ActiveIndicator,
+              {
+                isFocused,
+                isError,
+                isDisabled: disabled,
+                isHovered: false,
+                prefersReduced
+              }
+            )
+          ]
+        }
+      ),
+      hasSupporting && /* @__PURE__ */ jsx(
+        SupportingText,
+        {
+          supportingText,
+          errorText: errorText != null ? errorText : nativeError || void 0,
+          isError,
+          charCount: maxLength !== void 0 ? currentValue.length : void 0,
+          maxLength,
+          id: supportingId,
+          prefersReduced
+        }
+      )
+    ] }) });
+  }
+);
+TextFieldComponent.displayName = "TextField";
+var TextField = React4.memo(TextFieldComponent);
+
+export { Checkbox, Chip, RadioButton, RadioGroup, RangeSlider, Slider, SliderColors, SliderThumb, SliderTokens, Switch, SwitchColors, SwitchTokens, TextField, TriStateCheckbox };
+//# sourceMappingURL=forms.mjs.map
+//# sourceMappingURL=forms.mjs.map