@reopt-ai/opt-ui 1.9.0 → 1.11.0

package/dist/{key-pad-menu-BFd79JoS.js → key-pad-menu-wXkWn1I1.js}

@@ -1,15 +1,15 @@
 "use client";
-import { $t as Spinner, An as OPT_INPUT, Bn as OPT_TEXT_PRIMARY, Dn as OPT_FOCUS, Ft as SelectRoot$1, Gn as _objectWithoutProperties, Hn as OPT_TEXT_TERTIARY, It as SelectTrigger$1, Mt as SelectItem$1, Nn as OPT_SURFACE, On as OPT_FOCUS_VISIBLE, Pt as SelectPopover$1, Rn as OPT_TEXTAREA_SIZE, Vn as OPT_TEXT_SECONDARY, Wn as _objectSpread2, Zt as useInputId, cn as FieldMessages, dt as MenuSeparator$1, fn as OPT_ANIMATE_DRAWER, ft as MenuTrigger$1, ln as RequiredMark, lt as MenuPopover$1, nn as Button, ot as MenuItem$1, pn as OPT_ANIMATE_ENTER_EXIT, qn as cn, rn as koBreadcrumbLabels, sn as useControlledState, un as getDescribedBy, ut as MenuRoot$1, yn as OPT_BORDER } from "./highlight-C2sfnJN8.js";
+import { $n as OPT_TEXT_PRIMARY, Bn as OPT_FOCUS_VISIBLE, Bt as SelectPopover$1, Gn as OPT_SURFACE, Hn as OPT_INPUT, Ht as SelectTrigger$1, Rt as SelectItem$1, Sn as getDescribedBy, Tn as OPT_ANIMATE_ENTER_EXIT, Vt as SelectRoot$1, Zn as OPT_TEXTAREA_SIZE, _t as MenuSeparator$1, bn as FieldMessages, d as formatOptNumber, er as OPT_TEXT_SECONDARY, ft as MenuItem$1, gt as MenuRoot$1, ht as MenuPopover$1, in as useInputId, ir as _objectWithoutProperties, jn as OPT_BORDER, ln as Button, on as Spinner, or as cn, rr as _objectSpread2, sn as Badge, tr as OPT_TEXT_TERTIARY, un as koBreadcrumbLabels, vt as MenuTrigger$1, wn as OPT_ANIMATE_DRAWER, xn as RequiredMark, yn as useControlledState, zn as OPT_FOCUS } from "./text-truncate-C17HHCR-.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { createContext, createElement, forwardRef, useCallback, useContext, useEffect, useId, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState } from "react";
-import { AccordionContent, AccordionItem, AccordionRoot, AccordionTrigger, DialogDismiss, DialogPanel, DialogRoot, Meter, RadioGroupRoot, Separator, Toggle, ToggleGroup, useDialogClose, useRadioGroupContext } from "@reopt-ai/opt-ui-primitives";
-import { Check, ChevronDown, GripVertical, Pencil, X } from "lucide-react";
+import { AccordionContent, AccordionItem, AccordionRoot, AccordionTrigger, DialogDismiss, DialogPanel, DialogRoot, RadioGroupRoot, Separator, Toggle, ToggleGroup, useDialogClose, useRadioGroupContext } from "@reopt-ai/opt-ui-primitives";
+import { Check, ChevronDown, Copy, GripVertical, Pencil, X } from "lucide-react";
 import { Group, Panel, Separator as Separator$1 } from "react-resizable-panels";
 import { Mesh, Program, Renderer, Triangle } from "ogl";
 import { hexToSrgb } from "@reopt-ai/opt-palette";
 //#region src/core/text.tsx
-const _excluded$17 = [
+const _excluded$15 = [
 	"as",
 	"variant",
 	"tone",
@@ -25,7 +25,7 @@ const toneStyles$1 = {
 };
 /** Semantic body text whose visual role is controlled by foundation tokens. */
 function Text(_ref) {
-	let { as, variant = "body", tone = "primary", truncate = false, className, children } = _ref, props = _objectWithoutProperties(_ref, _excluded$17);
+	let { as, variant = "body", tone = "primary", truncate = false, className, children } = _ref, props = _objectWithoutProperties(_ref, _excluded$15);
 	const Component = as !== null && as !== void 0 ? as : "span";
 	const elementProps = _objectSpread2(_objectSpread2({}, props), {}, {
 		className: cn(`opt-type-${variant}`, toneStyles$1[tone], truncate && "truncate", className),
@@ -40,7 +40,7 @@ function Text(_ref) {
 }
 //#endregion
 //#region src/core/heading.tsx
-const _excluded$16 = [
+const _excluded$14 = [
 	"level",
 	"variant",
 	"className",
@@ -48,7 +48,7 @@ const _excluded$16 = [
 ];
 /** Semantic heading with independently selectable visual hierarchy. */
 function Heading(_ref) {
-	let { level = 2, variant = `heading-${level}`, className, children } = _ref, props = _objectWithoutProperties(_ref, _excluded$16);
+	let { level = 2, variant = `heading-${level}`, className, children } = _ref, props = _objectWithoutProperties(_ref, _excluded$14);
 	const Component = {
 		1: "h1",
 		2: "h2",
@@ -267,25 +267,25 @@ function OtpField({ length = 6, value: controlledValue, defaultValue = "", onCha
 OtpField.displayName = "OtpField";
 //#endregion
 //#region src/core/toggle.tsx
-const _excluded$15 = [
+const _excluded$13 = [
 	"size",
 	"className",
 	"children"
 ];
-const _excluded2$8 = [
+const _excluded2$7 = [
 	"className",
 	"children",
 	"orientation"
 ];
-const sizeStyles$8 = {
+const sizeStyles$7 = {
 	sm: "h-8 min-w-8 px-2 text-xs gap-1.5",
 	md: "h-10 min-w-10 px-3 text-sm gap-2"
 };
 const toggleBase = cn("inline-flex cursor-pointer items-center justify-center rounded-md border border-border bg-surface font-medium text-text-secondary", "hover:bg-bg-subtle hover:text-text-primary", "data-[pressed]:border-accent data-[pressed]:bg-accent-subtle data-[pressed]:text-accent", "disabled:pointer-events-none disabled:opacity-40", OPT_FOCUS_VISIBLE);
 /** A two-state (pressed) button. Use standalone or inside `ToggleGroup`. */
 function Toggle$1(_ref) {
-	let { size = "md", className, children } = _ref, props = _objectWithoutProperties(_ref, _excluded$15);
-	return /* @__PURE__ */ jsx(Toggle, _objectSpread2(_objectSpread2({ className: cn(toggleBase, sizeStyles$8[size], className) }, props), {}, {
+	let { size = "md", className, children } = _ref, props = _objectWithoutProperties(_ref, _excluded$13);
+	return /* @__PURE__ */ jsx(Toggle, _objectSpread2(_objectSpread2({ className: cn(toggleBase, sizeStyles$7[size], className) }, props), {}, {
 		"data-opt-id": "GFCMY",
 		"data-opt-slug": "toggle.Toggle",
 		children
@@ -294,7 +294,7 @@ function Toggle$1(_ref) {
 Toggle$1.displayName = "Toggle";
 /** A set of related toggles with shared selection and keyboard navigation. */
 function ToggleGroup$1(_ref2) {
-	let { className, children, orientation = "horizontal" } = _ref2, props = _objectWithoutProperties(_ref2, _excluded2$8);
+	let { className, children, orientation = "horizontal" } = _ref2, props = _objectWithoutProperties(_ref2, _excluded2$7);
 	return /* @__PURE__ */ jsx(ToggleGroup, _objectSpread2(_objectSpread2({
 		orientation,
 		"aria-orientation": orientation,
@@ -308,15 +308,15 @@ function ToggleGroup$1(_ref2) {
 ToggleGroup$1.displayName = "ToggleGroup";
 //#endregion
 //#region src/core/accordion.tsx
-const _excluded$14 = ["className"];
-const _excluded2$7 = ["className"];
-const _excluded3$4 = ["className", "children"];
-const _excluded4$3 = ["className", "children"];
+const _excluded$12 = ["className"];
+const _excluded2$6 = ["className"];
+const _excluded3$3 = ["className", "children"];
+const _excluded4$2 = ["className", "children"];
 const triggerClass = `group/acc-trigger flex w-full cursor-pointer items-center justify-between gap-2 py-4 text-left text-sm font-medium text-text-primary transition-colors hover:text-text-secondary ${OPT_FOCUS} disabled:cursor-not-allowed disabled:opacity-50`;
 const contentClass = `overflow-hidden text-sm text-text-secondary ${OPT_ANIMATE_ENTER_EXIT}`;
 /** A vertically stacked set of expandable panels (single or multiple open). */
 function AccordionRoot$1(_ref) {
-	let { className } = _ref, props = _objectWithoutProperties(_ref, _excluded$14);
+	let { className } = _ref, props = _objectWithoutProperties(_ref, _excluded$12);
 	return /* @__PURE__ */ jsx("div", {
 		className: cn("border-border border-y", className),
 		"data-opt-id": "CSBA9",
@@ -327,7 +327,7 @@ function AccordionRoot$1(_ref) {
 AccordionRoot$1.displayName = "AccordionRoot";
 /** A single accordion entry, identified by its `value`. */
 function AccordionItem$1(_ref2) {
-	let { className } = _ref2, props = _objectWithoutProperties(_ref2, _excluded2$7);
+	let { className } = _ref2, props = _objectWithoutProperties(_ref2, _excluded2$6);
 	return /* @__PURE__ */ jsx(AccordionItem, _objectSpread2(_objectSpread2({ className: cn("border-border border-b last:border-b-0", className) }, props), {}, {
 		"data-opt-id": "JTY9M",
 		"data-opt-slug": "accordion.AccordionItem"
@@ -336,7 +336,7 @@ function AccordionItem$1(_ref2) {
 AccordionItem$1.displayName = "AccordionItem";
 /** The clickable header that expands/collapses its panel. */
 function AccordionTrigger$1(_ref3) {
-	let { className, children } = _ref3, props = _objectWithoutProperties(_ref3, _excluded3$4);
+	let { className, children } = _ref3, props = _objectWithoutProperties(_ref3, _excluded3$3);
 	return /* @__PURE__ */ jsxs(AccordionTrigger, _objectSpread2(_objectSpread2({ className: cn(triggerClass, className) }, props), {}, {
 		"data-opt-id": "CWJZZ",
 		"data-opt-slug": "accordion.AccordionTrigger",
@@ -352,7 +352,7 @@ function AccordionTrigger$1(_ref3) {
 AccordionTrigger$1.displayName = "AccordionTrigger";
 /** The collapsible panel body associated with a trigger. */
 function AccordionContent$1(_ref4) {
-	let { className, children } = _ref4, props = _objectWithoutProperties(_ref4, _excluded4$3);
+	let { className, children } = _ref4, props = _objectWithoutProperties(_ref4, _excluded4$2);
 	return /* @__PURE__ */ jsx(AccordionContent, _objectSpread2(_objectSpread2({ className: cn(contentClass, className) }, props), {}, {
 		"data-opt-id": "J98AG",
 		"data-opt-slug": "accordion.AccordionContent",
@@ -410,427 +410,111 @@ function Breadcrumb({ items, separator = "/", className, onNavigate, "aria-label
 	});
 }
 //#endregion
-//#region src/core/card.tsx
-const _excluded$13 = [
-	"variant",
-	"padding",
-	"shadow",
-	"selectable",
-	"selected",
-	"onSelectedChange",
-	"className",
-	"children",
-	"onClick",
-	"onKeyDown",
-	"role",
-	"tabIndex"
-];
-const _excluded2$6 = [
-	"gap",
-	"className",
-	"children"
-];
-const _excluded3$3 = [
-	"as",
-	"className",
-	"children"
-];
-const _excluded4$2 = ["className", "children"];
-const _excluded5 = [
-	"spacing",
-	"className",
-	"children"
-];
-const _excluded6 = [
-	"divider",
-	"className",
-	"children"
-];
-/** Renders the card component. */
-function Card(_ref) {
-	let { variant = "default", padding = "md", shadow = true, selectable = false, selected = false, onSelectedChange, className, children, onClick, onKeyDown, role, tabIndex } = _ref, props = _objectWithoutProperties(_ref, _excluded$13);
-	const isInteractive = selectable || !!onClick;
-	const handleClick = selectable ? (e) => {
-		onSelectedChange === null || onSelectedChange === void 0 || onSelectedChange(!selected);
-		onClick === null || onClick === void 0 || onClick(e);
-	} : onClick;
-	const handleKeyDown = selectable ? (e) => {
-		if (e.key === "Enter" || e.key === " ") {
-			e.preventDefault();
-			onSelectedChange === null || onSelectedChange === void 0 || onSelectedChange(!selected);
-		}
-		onKeyDown === null || onKeyDown === void 0 || onKeyDown(e);
-	} : isInteractive ? (e) => {
-		if (e.key === "Enter" || e.key === " ") {
-			e.preventDefault();
-			e.currentTarget.click();
-		}
-		onKeyDown === null || onKeyDown === void 0 || onKeyDown(e);
-	} : onKeyDown;
-	return /* @__PURE__ */ jsx("div", _objectSpread2(_objectSpread2(_objectSpread2({}, props), {}, { className: cn("rounded-xl", variant === "default" && cn(`border border-border bg-surface`, shadow && "shadow-sm"), variant === "outline" && "border-border border-2 bg-transparent", variant === "ghost" && "bg-bg-subtle", padding === "none" && "p-0", padding === "sm" && "p-3", padding === "md" && "p-5", padding === "lg" && "p-8", selectable && "cursor-pointer transition-colors", selectable && selected && "ring-accent border-accent ring-2 ring-offset-1", selectable && !selected && "hover:border-accent/50", className) }, isInteractive ? {
-		role: selectable ? "option" : "button",
-		tabIndex: 0,
-		"aria-selected": selectable ? selected : void 0,
-		onClick: handleClick,
-		onKeyDown: handleKeyDown
-	} : {
-		role,
-		tabIndex,
-		"aria-selected": selectable ? selected : void 0,
-		onKeyDown
-	}), {}, {
-		"data-opt-id": "0A18R",
-		"data-opt-slug": "card.Card",
-		children
-	}));
-}
-const headerGapClasses = {
-	sm: "gap-1",
-	md: "gap-1.5",
-	lg: "gap-2"
+//#region src/core/description-list.tsx
+const defaultLabels$3 = {
+	copy: (term) => `Copy ${term}`,
+	copied: "Copied",
+	empty: "—"
 };
-/** Renders the card header component. */
-function CardHeader(_ref2) {
-	let { gap = "sm", className, children } = _ref2, props = _objectWithoutProperties(_ref2, _excluded2$6);
-	return /* @__PURE__ */ jsx("div", _objectSpread2(_objectSpread2({ className: cn("flex flex-col", headerGapClasses[gap], className) }, props), {}, {
-		"data-opt-id": "JST3J",
-		"data-opt-slug": "card.CardHeader",
-		children
-	}));
-}
-/** Renders the card title component. */
-function CardTitle(_ref3) {
-	let { as: Tag = "h3", className, children } = _ref3, props = _objectWithoutProperties(_ref3, _excluded3$3);
-	return /* @__PURE__ */ jsx(Tag, _objectSpread2(_objectSpread2({ className: cn(`text-lg font-semibold ${OPT_TEXT_PRIMARY}`, className) }, props), {}, {
-		"data-opt-id": "V15TX",
-		"data-opt-slug": "card.CardTitle",
-		children
-	}));
-}
-/** Renders the card description component. */
-function CardDescription(_ref4) {
-	let { className, children } = _ref4, props = _objectWithoutProperties(_ref4, _excluded4$2);
-	return /* @__PURE__ */ jsx("p", _objectSpread2(_objectSpread2({ className: cn(`text-sm ${OPT_TEXT_SECONDARY}`, className) }, props), {}, {
-		"data-opt-id": "YB1RN",
-		"data-opt-slug": "card.CardDescription",
-		children
-	}));
-}
-const contentSpacingClasses = {
-	none: "",
-	sm: "mt-2",
-	md: "mt-4",
-	lg: "mt-6"
+const columnsClass = {
+	1: "grid-cols-1",
+	2: "grid-cols-1 sm:grid-cols-2",
+	3: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3",
+	4: "grid-cols-2 sm:grid-cols-3 lg:grid-cols-4"
 };
-/** Renders the card content component. */
-function CardContent(_ref5) {
-	let { spacing = "md", className, children } = _ref5, props = _objectWithoutProperties(_ref5, _excluded5);
-	return /* @__PURE__ */ jsx("div", _objectSpread2(_objectSpread2({ className: cn(contentSpacingClasses[spacing], className) }, props), {}, {
-		"data-opt-id": "9Y68R",
-		"data-opt-slug": "card.CardContent",
-		children
-	}));
-}
-/** Renders the card footer component. */
-function CardFooter(_ref6) {
-	let { divider = true, className, children } = _ref6, props = _objectWithoutProperties(_ref6, _excluded6);
-	return /* @__PURE__ */ jsx("div", _objectSpread2(_objectSpread2({ className: cn("mt-4 flex items-center justify-end gap-2 pt-4", divider && `border-t border border-border`, className) }, props), {}, {
-		"data-opt-id": "GRNTR",
-		"data-opt-slug": "card.CardFooter",
-		children
-	}));
+function CopyButton({ value, label, copiedLabel }) {
+	const [copied, setCopied] = useState(false);
+	const handleCopy = useCallback(() => {
+		var _navigator$clipboard;
+		(_navigator$clipboard = navigator.clipboard) === null || _navigator$clipboard === void 0 || _navigator$clipboard.writeText(value).then(() => {
+			setCopied(true);
+			window.setTimeout(() => setCopied(false), 1500);
+		});
+	}, [value]);
+	return /* @__PURE__ */ jsx("button", {
+		type: "button",
+		onClick: handleCopy,
+		"aria-label": copied ? copiedLabel : label,
+		className: cn(OPT_FOCUS_VISIBLE, OPT_TEXT_TERTIARY, "hover:text-text-primary shrink-0 rounded p-0.5 transition-colors"),
+		children: copied ? /* @__PURE__ */ jsx(Check, {
+			className: "size-3.5",
+			"aria-hidden": "true"
+		}) : /* @__PURE__ */ jsx(Copy, {
+			className: "size-3.5",
+			"aria-hidden": "true"
+		})
+	});
 }
-//#endregion
-//#region src/core/switch.tsx
-const _excluded$12 = [
-	"label",
-	"required",
-	"error",
-	"hint",
-	"description",
-	"checked",
-	"defaultChecked",
-	"onChange",
-	"size",
-	"disabled",
-	"className",
-	"id",
-	"onClick",
-	"aria-label",
-	"aria-labelledby"
-];
-const sizeStyles$7 = {
-	sm: {
-		track: "h-5 w-9",
-		thumb: "h-4 w-4",
-		translate: "translate-x-4"
-	},
-	md: {
-		track: "h-6 w-11",
-		thumb: "h-5 w-5",
-		translate: "translate-x-5"
-	},
-	lg: {
-		track: "h-7 w-14",
-		thumb: "h-6 w-6",
-		translate: "translate-x-7"
-	}
-};
-const Switch = forwardRef((_ref, ref) => {
-	var _useInputId;
-	let { label, required, error, hint, description, checked: controlledChecked, defaultChecked = false, onChange, size = "md", disabled, className, id, onClick, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy } = _ref, props = _objectWithoutProperties(_ref, _excluded$12);
-	const fallbackId = useId();
-	const switchId = (_useInputId = useInputId(id, label, "switch")) !== null && _useInputId !== void 0 ? _useInputId : `switch-${fallbackId}`;
-	const hintText = hint !== null && hint !== void 0 ? hint : description;
-	const hasError = Boolean(error);
-	const styles = sizeStyles$7[size];
-	const labelId = label ? `${switchId}-label` : void 0;
-	const switchLabelledBy = ariaLabelledBy !== null && ariaLabelledBy !== void 0 ? ariaLabelledBy : ariaLabel ? void 0 : labelId;
-	const switchAriaLabel = ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : switchLabelledBy ? void 0 : "Switch";
-	const isControlled = controlledChecked !== void 0;
-	const [internalChecked, setInternalChecked] = useState(defaultChecked);
-	const checked = isControlled ? controlledChecked : internalChecked;
-	const handleClick = useCallback((e) => {
-		const next = !checked;
-		if (!isControlled) setInternalChecked(next);
-		onChange === null || onChange === void 0 || onChange(next);
-		onClick === null || onClick === void 0 || onClick(e);
-	}, [
-		checked,
-		isControlled,
-		onChange,
-		onClick
-	]);
-	return /* @__PURE__ */ jsxs("div", {
-		className: cn("flex flex-col gap-1.5", className),
-		"data-opt-id": "51Z9R",
-		"data-opt-slug": "switch.Switch",
-		children: [/* @__PURE__ */ jsxs("div", {
-			className: "flex items-start gap-3",
-			children: [/* @__PURE__ */ jsx("button", _objectSpread2(_objectSpread2({
-				ref,
-				type: "button",
-				role: "switch",
-				id: switchId,
-				"aria-checked": checked,
-				"aria-label": switchAriaLabel,
-				"aria-labelledby": switchLabelledBy,
-				disabled,
-				className: cn("group relative inline-flex shrink-0 cursor-pointer rounded-full p-0.5 transition-colors", styles.track, "bg-bg-muted", "aria-[checked=true]:bg-accent", "disabled:cursor-not-allowed disabled:opacity-50", OPT_FOCUS_VISIBLE),
-				"aria-invalid": hasError,
-				"aria-required": required,
-				"aria-describedby": getDescribedBy(switchId, error, hintText),
-				onClick: handleClick
-			}, props), {}, { children: /* @__PURE__ */ jsx("span", { className: cn("pointer-events-none inline-block transform rounded-full bg-white shadow-sm ring-0 transition-transform", styles.thumb, "translate-x-0", size === "sm" && "group-aria-[checked=true]:translate-x-4", size === "md" && "group-aria-[checked=true]:translate-x-5", size === "lg" && "group-aria-[checked=true]:translate-x-7") }) })), (label || hintText) && /* @__PURE__ */ jsxs("div", {
-				className: "flex flex-col",
-				children: [label && /* @__PURE__ */ jsxs("span", {
-					id: labelId,
-					className: cn("text-text-primary text-sm font-medium", disabled && "opacity-50"),
-					children: [label, required && /* @__PURE__ */ jsx(RequiredMark, {})]
-				}), hintText && /* @__PURE__ */ jsx("p", {
-					id: `${switchId}-hint`,
-					className: cn("text-text-tertiary text-sm", disabled && "opacity-50"),
-					children: hintText
-				})]
+/**
+* DescriptionList — the labelled facts about one thing.
+*
+* Detail views collect a dozen short fields that each mean nothing without
+* their label, and hand-rolling them as a `<div>` grid loses the term/value
+* association that assistive tech needs. This keeps the pairs in a real `<dl>`
+* while still laying them out as boxed cells.
+*
+* @example
+* ```tsx
+* <DescriptionList
+*   layout="grid"
+*   columns={2}
+*   items={[
+*     { id: "id", term: "Session ID", description: session.id, copyValue: session.id },
+*     { id: "entry", term: "Entry path", description: session.entryPath },
+*   ]}
+* />
+* ```
+*/
+function DescriptionList({ items, layout = "grid", columns = 2, compressed = false, labels: customLabels, className }) {
+	const labels = _objectSpread2(_objectSpread2({}, defaultLabels$3), customLabels);
+	if (layout === "inline") return /* @__PURE__ */ jsx("dl", {
+		className: cn("flex flex-wrap items-baseline gap-x-6 gap-y-2", className),
+		"data-opt-id": "1NPD2",
+		"data-opt-slug": "description-list.DescriptionList",
+		children: items.map((item) => /* @__PURE__ */ jsxs("div", {
+			className: "flex items-baseline gap-2",
+			children: [/* @__PURE__ */ jsx("dt", {
+				className: cn(OPT_TEXT_TERTIARY, "text-xs"),
+				title: item.hint,
+				children: item.term
+			}), /* @__PURE__ */ jsx("dd", {
+				className: cn(OPT_TEXT_PRIMARY, "text-sm font-medium"),
+				children: item.description || labels.empty
 			})]
-		}), /* @__PURE__ */ jsx(FieldMessages, {
-			id: switchId,
-			error
-		})]
+		}, item.id))
 	});
-});
-Switch.displayName = "Switch";
-//#endregion
-//#region src/core/skeleton.tsx
-const _excluded$11 = [
-	"variant",
-	"width",
-	"height",
-	"lines",
-	"animated",
-	"className",
-	"style"
-];
-const _excluded2$5 = ["lines", "className"];
-const _excluded3$2 = ["size", "className"];
-const _excluded4$1 = ["className"];
-const variantStyles$2 = {
-	text: "rounded h-4",
-	circular: "rounded-full",
-	rectangular: "rounded-lg"
-};
-/** Renders the skeleton component. */
-function Skeleton(_ref) {
-	let { variant = "text", width, height, lines = 1, animated = true, className, style } = _ref, props = _objectWithoutProperties(_ref, _excluded$11);
-	const baseClass = cn("bg-bg-subtle", animated && "animate-pulse", variantStyles$2[variant], className);
-	const computedStyle = _objectSpread2({
-		width: typeof width === "number" ? `${width}px` : width,
-		height: typeof height === "number" ? `${height}px` : height
-	}, style);
-	if (variant === "text" && lines > 1) return /* @__PURE__ */ jsxs("div", {
-		className: "gap-element flex flex-col",
-		role: "status",
-		"aria-label": "Loading",
-		"data-opt-id": "EJT87",
-		"data-opt-slug": "skeleton.Skeleton",
-		children: [Array.from({ length: lines }).map((_, i) => /* @__PURE__ */ jsx("div", _objectSpread2({
-			className: cn(baseClass, i === lines - 1 && "w-4/5"),
-			style: i === lines - 1 ? void 0 : computedStyle
-		}, props), i)), /* @__PURE__ */ jsx("span", {
-			className: "sr-only",
-			children: "Loading..."
-		})]
-	});
-	return /* @__PURE__ */ jsx("div", _objectSpread2(_objectSpread2({
-		className: baseClass,
-		style: computedStyle,
-		role: "status",
-		"aria-label": "Loading"
-	}, props), {}, {
-		"data-opt-id": "EJT87",
-		"data-opt-slug": "skeleton.Skeleton",
-		children: /* @__PURE__ */ jsx("span", {
-			className: "sr-only",
-			children: "Loading..."
-		})
-	}));
-}
-/** Renders the skeleton text component. */
-function SkeletonText(_ref2) {
-	let { lines = 3, className } = _ref2, props = _objectWithoutProperties(_ref2, _excluded2$5);
-	return /* @__PURE__ */ jsx(Skeleton, _objectSpread2(_objectSpread2({
-		variant: "text",
-		lines,
-		className
-	}, props), {}, {
-		"data-opt-id": "MX3D5",
-		"data-opt-slug": "skeleton.SkeletonText"
-	}));
-}
-/** Renders the skeleton avatar component. */
-function SkeletonAvatar(_ref3) {
-	let { size = 40, className } = _ref3, props = _objectWithoutProperties(_ref3, _excluded3$2);
-	return /* @__PURE__ */ jsx(Skeleton, _objectSpread2(_objectSpread2({
-		variant: "circular",
-		width: size,
-		height: size,
-		className
-	}, props), {}, {
-		"data-opt-id": "MP0HZ",
-		"data-opt-slug": "skeleton.SkeletonAvatar"
-	}));
-}
-/** Renders the skeleton card component. */
-function SkeletonCard(_ref4) {
-	let { className } = _ref4, props = _objectWithoutProperties(_ref4, _excluded4$1);
-	return /* @__PURE__ */ jsxs("div", _objectSpread2(_objectSpread2({ className: cn("gap-group flex flex-col", className) }, props), {}, {
-		"data-opt-id": "34V5D",
-		"data-opt-slug": "skeleton.SkeletonCard",
-		children: [
-			/* @__PURE__ */ jsx(Skeleton, {
-				variant: "rectangular",
-				height: 120
-			}),
-			/* @__PURE__ */ jsx(Skeleton, {
-				variant: "text",
-				width: "60%"
-			}),
-			/* @__PURE__ */ jsx(Skeleton, {
-				variant: "text",
-				lines: 2
-			})
-		]
-	}));
-}
-/** Renders the skeleton table component. */
-function SkeletonTable({ rows = 5, columns = 4, className }) {
-	return /* @__PURE__ */ jsxs("div", {
-		className: cn("gap-element flex flex-col", className),
-		role: "status",
-		"aria-label": "Loading table",
-		"data-opt-id": "3KEDN",
-		"data-opt-slug": "skeleton.SkeletonTable",
-		children: [
-			/* @__PURE__ */ jsx("div", {
-				className: "border-border-subtle gap-group flex border-b pb-2",
-				children: Array.from({ length: columns }).map((_, i) => /* @__PURE__ */ jsx(Skeleton, {
-					variant: "text",
-					className: "flex-1",
-					height: 16
-				}, i))
-			}),
-			Array.from({ length: rows }).map((_, rowIndex) => /* @__PURE__ */ jsx("div", {
-				className: "gap-group flex py-2",
-				children: Array.from({ length: columns }).map((_, colIndex) => /* @__PURE__ */ jsx(Skeleton, {
-					variant: "text",
-					className: "flex-1",
-					height: 14
-				}, colIndex))
-			}, rowIndex)),
-			/* @__PURE__ */ jsx("span", {
-				className: "sr-only",
-				children: "Loading..."
-			})
-		]
+	return /* @__PURE__ */ jsx("dl", {
+		className: cn("grid", compressed ? "gap-element" : "gap-group", columnsClass[columns], className),
+		"data-opt-id": "1NPD2",
+		"data-opt-slug": "description-list.DescriptionList",
+		children: items.map((item) => /* @__PURE__ */ jsxs("div", {
+			className: cn("flex min-w-0 flex-col gap-1", layout === "grid" && [
+				"border border-border",
+				"bg-bg-subtle rounded-lg",
+				compressed ? "px-2.5 py-1.5" : "px-3 py-2"
+			]),
+			children: [/* @__PURE__ */ jsx("dt", {
+				className: cn(OPT_TEXT_TERTIARY, "text-xs"),
+				title: item.hint,
+				children: item.term
+			}), /* @__PURE__ */ jsxs("dd", {
+				className: cn(OPT_TEXT_PRIMARY, "flex min-w-0 items-center gap-1.5 text-sm"),
+				children: [/* @__PURE__ */ jsx("span", {
+					className: cn("min-w-0", item.wrap ? "break-all" : "truncate", !item.description && "text-text-secondary"),
+					children: item.description || labels.empty
+				}), item.copyValue && /* @__PURE__ */ jsx(CopyButton, {
+					value: item.copyValue,
+					label: labels.copy(typeof item.term === "string" ? item.term : item.id),
+					copiedLabel: labels.copied
+				})]
+			})]
+		}, item.id))
 	});
 }
-//#endregion
-//#region src/core/textarea.tsx
-const _excluded$10 = [
-	"label",
-	"error",
-	"hint",
-	"fullWidth",
-	"required",
-	"resize",
-	"size",
-	"className",
-	"id",
-	"rows"
-];
-const textareaSizeStyles = OPT_TEXTAREA_SIZE;
-const resizeStyles = {
-	none: "resize-none",
-	vertical: "resize-y",
-	horizontal: "resize-x",
-	both: "resize"
-};
-const Textarea = forwardRef((_ref, ref) => {
-	var _useInputId;
-	let { label, error, hint, fullWidth = false, required, resize = "vertical", size = "md", className, id, rows = 4 } = _ref, props = _objectWithoutProperties(_ref, _excluded$10);
-	const fallbackId = useId().replace(/:/g, "");
-	const textareaId = (_useInputId = useInputId(id, label, "textarea")) !== null && _useInputId !== void 0 ? _useInputId : `textarea-${fallbackId}`;
-	const hasError = Boolean(error);
-	return /* @__PURE__ */ jsxs("div", {
-		className: cn("flex flex-col gap-1.5", fullWidth && "w-full"),
-		"data-opt-id": "6T58H",
-		"data-opt-slug": "textarea.Textarea",
-		children: [
-			label && /* @__PURE__ */ jsxs("label", {
-				htmlFor: textareaId,
-				className: "text-text-primary text-sm font-medium",
-				children: [label, required && /* @__PURE__ */ jsx(RequiredMark, {})]
-			}),
-			/* @__PURE__ */ jsx("textarea", _objectSpread2({
-				ref,
-				id: textareaId,
-				rows,
-				className: cn("border-border bg-surface text-text-primary placeholder:text-text-tertiary w-full rounded-lg border px-4 py-3 text-sm outline-transparent", OPT_FOCUS_VISIBLE, textareaSizeStyles[size], resizeStyles[resize], hasError && "border-danger focus-visible:outline-danger", !fullWidth && "w-auto", className),
-				"aria-invalid": hasError,
-				"aria-describedby": getDescribedBy(textareaId, error, hint)
-			}, props)),
-			/* @__PURE__ */ jsx(FieldMessages, {
-				id: textareaId,
-				error,
-				hint
-			})
-		]
-	});
-});
-Textarea.displayName = "Textarea";
+DescriptionList.displayName = "DescriptionList";
 //#endregion
 //#region src/core/avatar.tsx
-const _excluded$9 = [
+const _excluded$11 = [
 	"src",
 	"srcSet",
 	"sizes",
@@ -844,7 +528,7 @@ const _excluded$9 = [
 	"className",
 	"onLoadingStatusChange"
 ];
-const _excluded2$4 = [
+const _excluded2$5 = [
 	"max",
 	"size",
 	"children",
@@ -932,7 +616,7 @@ function getColorFromName(name) {
 /** Renders the avatar component. */
 function Avatar(_ref) {
 	var _ref2, _ref3;
-	let { src, srcSet, sizes, crossOrigin, referrerPolicy, alt, name, size = "md", fallback, status, className, onLoadingStatusChange } = _ref, props = _objectWithoutProperties(_ref, _excluded$9);
+	let { src, srcSet, sizes, crossOrigin, referrerPolicy, alt, name, size = "md", fallback, status, className, onLoadingStatusChange } = _ref, props = _objectWithoutProperties(_ref, _excluded$11);
 	const loadingStatus = useImageLoadingStatus(src, {
 		srcSet,
 		sizes,
@@ -983,27 +667,380 @@ function Avatar(_ref) {
 		})]
 	}));
 }
-/** Renders the avatar group component. */
-function AvatarGroup(_ref5) {
-	let { max = 4, size = "md", children, className } = _ref5, props = _objectWithoutProperties(_ref5, _excluded2$4);
-	const avatars = Array.isArray(children) ? children : [children];
-	const visibleAvatars = avatars.slice(0, max);
-	const remainingCount = avatars.length - max;
-	return /* @__PURE__ */ jsxs("div", _objectSpread2(_objectSpread2({ className: cn("flex", className) }, props), {}, {
-		"data-opt-id": "MVB53",
-		"data-opt-slug": "avatar.AvatarGroup",
-		children: [visibleAvatars.map((child, index) => /* @__PURE__ */ jsx("span", {
-			className: "ring-surface relative -ml-2 inline-block rounded-full ring-2 first:ml-0",
-			children: child
-		}, index)), remainingCount > 0 && /* @__PURE__ */ jsxs("span", {
-			className: cn("bg-bg-subtle text-text-secondary ring-surface relative inline-flex items-center justify-center rounded-full font-medium ring-2", sizeStyles$6[size]),
-			children: ["+", remainingCount]
+/** Renders the avatar group component. */
+function AvatarGroup(_ref5) {
+	let { max = 4, size = "md", children, className } = _ref5, props = _objectWithoutProperties(_ref5, _excluded2$5);
+	const avatars = Array.isArray(children) ? children : [children];
+	const visibleAvatars = avatars.slice(0, max);
+	const remainingCount = avatars.length - max;
+	return /* @__PURE__ */ jsxs("div", _objectSpread2(_objectSpread2({ className: cn("flex", className) }, props), {}, {
+		"data-opt-id": "MVB53",
+		"data-opt-slug": "avatar.AvatarGroup",
+		children: [visibleAvatars.map((child, index) => /* @__PURE__ */ jsx("span", {
+			className: "ring-surface relative -ml-2 inline-block rounded-full ring-2 first:ml-0",
+			children: child
+		}, index)), remainingCount > 0 && /* @__PURE__ */ jsxs("span", {
+			className: cn("bg-bg-subtle text-text-secondary ring-surface relative inline-flex items-center justify-center rounded-full font-medium ring-2", sizeStyles$6[size]),
+			children: ["+", remainingCount]
+		})]
+	}));
+}
+//#endregion
+//#region src/core/identity.tsx
+const defaultLabels$2 = {
+	identified: "Identified",
+	anonymous: "Anonymous"
+};
+/** Picks the display name, degrading through the identifiers we do have. */
+function resolveDisplay(name, secondary, id) {
+	const trimmedName = name === null || name === void 0 ? void 0 : name.trim();
+	const trimmedSecondary = secondary === null || secondary === void 0 ? void 0 : secondary.trim();
+	if (trimmedName) return {
+		primary: trimmedName,
+		sub: trimmedSecondary || null
+	};
+	if (trimmedSecondary) return {
+		primary: trimmedSecondary,
+		sub: null
+	};
+	return {
+		primary: id !== null && id !== void 0 ? id : "—",
+		sub: null
+	};
+}
+/**
+* Identity — one person (or one anonymous device) as a table cell.
+*
+* Every analytics surface renders the same fallback chain — name, then email,
+* then an opaque id — and every hand-rolled copy of it drifts. Centralising it
+* also centralises the anonymity marker, which is the part readers most often
+* lose track of when a table mixes profiles and devices.
+*/
+function Identity({ name, secondary, id, avatarSrc, state, badge, size = "md", hideAvatar = false, labels: customLabels, className }) {
+	const labels = _objectSpread2(_objectSpread2({}, defaultLabels$2), customLabels);
+	const { primary, sub } = resolveDisplay(name, secondary, id);
+	const anonymous = state === "anonymous";
+	const badgeContent = badge !== null && badge !== void 0 ? badge : state ? anonymous ? labels.anonymous : labels.identified : null;
+	return /* @__PURE__ */ jsxs("span", {
+		className: cn("flex min-w-0 items-center gap-2", className),
+		title: id,
+		"data-opt-id": "BRGG2",
+		"data-opt-slug": "identity.Identity",
+		children: [!hideAvatar && /* @__PURE__ */ jsx(Avatar, {
+			src: avatarSrc !== null && avatarSrc !== void 0 ? avatarSrc : void 0,
+			name: anonymous ? void 0 : primary,
+			size: size === "sm" ? "xs" : "sm",
+			alt: "",
+			className: "shrink-0"
+		}), /* @__PURE__ */ jsxs("span", {
+			className: "flex min-w-0 flex-col",
+			children: [/* @__PURE__ */ jsxs("span", {
+				className: "flex min-w-0 items-center gap-1.5",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: cn("truncate text-sm font-medium", anonymous && !name ? OPT_TEXT_SECONDARY : OPT_TEXT_PRIMARY),
+					children: primary
+				}), badgeContent && /* @__PURE__ */ jsx(Badge, {
+					size: "sm",
+					variant: anonymous ? "default" : "info",
+					className: "shrink-0",
+					children: badgeContent
+				})]
+			}), sub && /* @__PURE__ */ jsx("span", {
+				className: cn("text-text-tertiary", "truncate text-xs"),
+				children: sub
+			})]
+		})]
+	});
+}
+Identity.displayName = "Identity";
+//#endregion
+//#region src/core/card.tsx
+const _excluded$10 = [
+	"variant",
+	"padding",
+	"shadow",
+	"selectable",
+	"selected",
+	"onSelectedChange",
+	"className",
+	"children",
+	"onClick",
+	"onKeyDown",
+	"role",
+	"tabIndex"
+];
+const _excluded2$4 = [
+	"gap",
+	"className",
+	"children"
+];
+const _excluded3$2 = [
+	"as",
+	"className",
+	"children"
+];
+const _excluded4$1 = ["className", "children"];
+const _excluded5 = [
+	"spacing",
+	"className",
+	"children"
+];
+const _excluded6 = [
+	"divider",
+	"className",
+	"children"
+];
+/** Renders the card component. */
+function Card(_ref) {
+	let { variant = "default", padding = "md", shadow = true, selectable = false, selected = false, onSelectedChange, className, children, onClick, onKeyDown, role, tabIndex } = _ref, props = _objectWithoutProperties(_ref, _excluded$10);
+	const isInteractive = selectable || !!onClick;
+	const handleClick = selectable ? (e) => {
+		onSelectedChange === null || onSelectedChange === void 0 || onSelectedChange(!selected);
+		onClick === null || onClick === void 0 || onClick(e);
+	} : onClick;
+	const handleKeyDown = selectable ? (e) => {
+		if (e.key === "Enter" || e.key === " ") {
+			e.preventDefault();
+			onSelectedChange === null || onSelectedChange === void 0 || onSelectedChange(!selected);
+		}
+		onKeyDown === null || onKeyDown === void 0 || onKeyDown(e);
+	} : isInteractive ? (e) => {
+		if (e.key === "Enter" || e.key === " ") {
+			e.preventDefault();
+			e.currentTarget.click();
+		}
+		onKeyDown === null || onKeyDown === void 0 || onKeyDown(e);
+	} : onKeyDown;
+	return /* @__PURE__ */ jsx("div", _objectSpread2(_objectSpread2(_objectSpread2({}, props), {}, { className: cn("rounded-xl", variant === "default" && cn(`border border-border bg-surface`, shadow && "shadow-sm"), variant === "outline" && "border-border border-2 bg-transparent", variant === "ghost" && "bg-bg-subtle", padding === "none" && "p-0", padding === "sm" && "p-3", padding === "md" && "p-5", padding === "lg" && "p-8", selectable && "cursor-pointer transition-colors", selectable && selected && "ring-accent border-accent ring-2 ring-offset-1", selectable && !selected && "hover:border-accent/50", className) }, isInteractive ? {
+		role: selectable ? "option" : "button",
+		tabIndex: 0,
+		"aria-selected": selectable ? selected : void 0,
+		onClick: handleClick,
+		onKeyDown: handleKeyDown
+	} : {
+		role,
+		tabIndex,
+		"aria-selected": selectable ? selected : void 0,
+		onKeyDown
+	}), {}, {
+		"data-opt-id": "0A18R",
+		"data-opt-slug": "card.Card",
+		children
+	}));
+}
+const headerGapClasses = {
+	sm: "gap-1",
+	md: "gap-1.5",
+	lg: "gap-2"
+};
+/** Renders the card header component. */
+function CardHeader(_ref2) {
+	let { gap = "sm", className, children } = _ref2, props = _objectWithoutProperties(_ref2, _excluded2$4);
+	return /* @__PURE__ */ jsx("div", _objectSpread2(_objectSpread2({ className: cn("flex flex-col", headerGapClasses[gap], className) }, props), {}, {
+		"data-opt-id": "JST3J",
+		"data-opt-slug": "card.CardHeader",
+		children
+	}));
+}
+/** Renders the card title component. */
+function CardTitle(_ref3) {
+	let { as: Tag = "h3", className, children } = _ref3, props = _objectWithoutProperties(_ref3, _excluded3$2);
+	return /* @__PURE__ */ jsx(Tag, _objectSpread2(_objectSpread2({ className: cn(`text-lg font-semibold ${OPT_TEXT_PRIMARY}`, className) }, props), {}, {
+		"data-opt-id": "V15TX",
+		"data-opt-slug": "card.CardTitle",
+		children
+	}));
+}
+/** Renders the card description component. */
+function CardDescription(_ref4) {
+	let { className, children } = _ref4, props = _objectWithoutProperties(_ref4, _excluded4$1);
+	return /* @__PURE__ */ jsx("p", _objectSpread2(_objectSpread2({ className: cn(`text-sm ${OPT_TEXT_SECONDARY}`, className) }, props), {}, {
+		"data-opt-id": "YB1RN",
+		"data-opt-slug": "card.CardDescription",
+		children
+	}));
+}
+const contentSpacingClasses = {
+	none: "",
+	sm: "mt-2",
+	md: "mt-4",
+	lg: "mt-6"
+};
+/** Renders the card content component. */
+function CardContent(_ref5) {
+	let { spacing = "md", className, children } = _ref5, props = _objectWithoutProperties(_ref5, _excluded5);
+	return /* @__PURE__ */ jsx("div", _objectSpread2(_objectSpread2({ className: cn(contentSpacingClasses[spacing], className) }, props), {}, {
+		"data-opt-id": "9Y68R",
+		"data-opt-slug": "card.CardContent",
+		children
+	}));
+}
+/** Renders the card footer component. */
+function CardFooter(_ref6) {
+	let { divider = true, className, children } = _ref6, props = _objectWithoutProperties(_ref6, _excluded6);
+	return /* @__PURE__ */ jsx("div", _objectSpread2(_objectSpread2({ className: cn("mt-4 flex items-center justify-end gap-2 pt-4", divider && `border-t border border-border`, className) }, props), {}, {
+		"data-opt-id": "GRNTR",
+		"data-opt-slug": "card.CardFooter",
+		children
+	}));
+}
+//#endregion
+//#region src/core/switch.tsx
+const _excluded$9 = [
+	"label",
+	"required",
+	"error",
+	"hint",
+	"description",
+	"checked",
+	"defaultChecked",
+	"onChange",
+	"size",
+	"disabled",
+	"className",
+	"id",
+	"onClick",
+	"aria-label",
+	"aria-labelledby"
+];
+const sizeStyles$5 = {
+	sm: {
+		track: "h-5 w-9",
+		thumb: "h-4 w-4",
+		translate: "translate-x-4"
+	},
+	md: {
+		track: "h-6 w-11",
+		thumb: "h-5 w-5",
+		translate: "translate-x-5"
+	},
+	lg: {
+		track: "h-7 w-14",
+		thumb: "h-6 w-6",
+		translate: "translate-x-7"
+	}
+};
+const Switch = forwardRef((_ref, ref) => {
+	var _useInputId;
+	let { label, required, error, hint, description, checked: controlledChecked, defaultChecked = false, onChange, size = "md", disabled, className, id, onClick, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy } = _ref, props = _objectWithoutProperties(_ref, _excluded$9);
+	const fallbackId = useId();
+	const switchId = (_useInputId = useInputId(id, label, "switch")) !== null && _useInputId !== void 0 ? _useInputId : `switch-${fallbackId}`;
+	const hintText = hint !== null && hint !== void 0 ? hint : description;
+	const hasError = Boolean(error);
+	const styles = sizeStyles$5[size];
+	const labelId = label ? `${switchId}-label` : void 0;
+	const switchLabelledBy = ariaLabelledBy !== null && ariaLabelledBy !== void 0 ? ariaLabelledBy : ariaLabel ? void 0 : labelId;
+	const switchAriaLabel = ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : switchLabelledBy ? void 0 : "Switch";
+	const isControlled = controlledChecked !== void 0;
+	const [internalChecked, setInternalChecked] = useState(defaultChecked);
+	const checked = isControlled ? controlledChecked : internalChecked;
+	const handleClick = useCallback((e) => {
+		const next = !checked;
+		if (!isControlled) setInternalChecked(next);
+		onChange === null || onChange === void 0 || onChange(next);
+		onClick === null || onClick === void 0 || onClick(e);
+	}, [
+		checked,
+		isControlled,
+		onChange,
+		onClick
+	]);
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("flex flex-col gap-1.5", className),
+		"data-opt-id": "51Z9R",
+		"data-opt-slug": "switch.Switch",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex items-start gap-3",
+			children: [/* @__PURE__ */ jsx("button", _objectSpread2(_objectSpread2({
+				ref,
+				type: "button",
+				role: "switch",
+				id: switchId,
+				"aria-checked": checked,
+				"aria-label": switchAriaLabel,
+				"aria-labelledby": switchLabelledBy,
+				disabled,
+				className: cn("group relative inline-flex shrink-0 cursor-pointer rounded-full p-0.5 transition-colors", styles.track, "bg-bg-muted", "aria-[checked=true]:bg-accent", "disabled:cursor-not-allowed disabled:opacity-50", OPT_FOCUS_VISIBLE),
+				"aria-invalid": hasError,
+				"aria-required": required,
+				"aria-describedby": getDescribedBy(switchId, error, hintText),
+				onClick: handleClick
+			}, props), {}, { children: /* @__PURE__ */ jsx("span", { className: cn("pointer-events-none inline-block transform rounded-full bg-white shadow-sm ring-0 transition-transform", styles.thumb, "translate-x-0", size === "sm" && "group-aria-[checked=true]:translate-x-4", size === "md" && "group-aria-[checked=true]:translate-x-5", size === "lg" && "group-aria-[checked=true]:translate-x-7") }) })), (label || hintText) && /* @__PURE__ */ jsxs("div", {
+				className: "flex flex-col",
+				children: [label && /* @__PURE__ */ jsxs("span", {
+					id: labelId,
+					className: cn("text-text-primary text-sm font-medium", disabled && "opacity-50"),
+					children: [label, required && /* @__PURE__ */ jsx(RequiredMark, {})]
+				}), hintText && /* @__PURE__ */ jsx("p", {
+					id: `${switchId}-hint`,
+					className: cn("text-text-tertiary text-sm", disabled && "opacity-50"),
+					children: hintText
+				})]
+			})]
+		}), /* @__PURE__ */ jsx(FieldMessages, {
+			id: switchId,
+			error
 		})]
-	}));
-}
+	});
+});
+Switch.displayName = "Switch";
 //#endregion
-//#region src/core/progress.tsx
+//#region src/core/textarea.tsx
 const _excluded$8 = [
+	"label",
+	"error",
+	"hint",
+	"fullWidth",
+	"required",
+	"resize",
+	"size",
+	"className",
+	"id",
+	"rows"
+];
+const textareaSizeStyles = OPT_TEXTAREA_SIZE;
+const resizeStyles = {
+	none: "resize-none",
+	vertical: "resize-y",
+	horizontal: "resize-x",
+	both: "resize"
+};
+const Textarea = forwardRef((_ref, ref) => {
+	var _useInputId;
+	let { label, error, hint, fullWidth = false, required, resize = "vertical", size = "md", className, id, rows = 4 } = _ref, props = _objectWithoutProperties(_ref, _excluded$8);
+	const fallbackId = useId().replace(/:/g, "");
+	const textareaId = (_useInputId = useInputId(id, label, "textarea")) !== null && _useInputId !== void 0 ? _useInputId : `textarea-${fallbackId}`;
+	const hasError = Boolean(error);
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("flex flex-col gap-1.5", fullWidth && "w-full"),
+		"data-opt-id": "6T58H",
+		"data-opt-slug": "textarea.Textarea",
+		children: [
+			label && /* @__PURE__ */ jsxs("label", {
+				htmlFor: textareaId,
+				className: "text-text-primary text-sm font-medium",
+				children: [label, required && /* @__PURE__ */ jsx(RequiredMark, {})]
+			}),
+			/* @__PURE__ */ jsx("textarea", _objectSpread2({
+				ref,
+				id: textareaId,
+				rows,
+				className: cn("border-border bg-surface text-text-primary placeholder:text-text-tertiary w-full rounded-lg border px-4 py-3 text-sm outline-transparent", OPT_FOCUS_VISIBLE, textareaSizeStyles[size], resizeStyles[resize], hasError && "border-danger focus-visible:outline-danger", !fullWidth && "w-auto", className),
+				"aria-invalid": hasError,
+				"aria-describedby": getDescribedBy(textareaId, error, hint)
+			}, props)),
+			/* @__PURE__ */ jsx(FieldMessages, {
+				id: textareaId,
+				error,
+				hint
+			})
+		]
+	});
+});
+Textarea.displayName = "Textarea";
+//#endregion
+//#region src/core/progress.tsx
+const _excluded$7 = [
 	"value",
 	"max",
 	"size",
@@ -1025,12 +1062,12 @@ const _excluded2$3 = [
 	"indeterminate",
 	"className"
 ];
-const sizeStyles$5 = {
+const sizeStyles$4 = {
 	sm: "h-1",
 	md: "h-2",
 	lg: "h-3"
 };
-const variantStyles$1 = {
+const variantStyles = {
 	default: "bg-accent",
 	success: "bg-success",
 	warning: "bg-warning",
@@ -1049,7 +1086,7 @@ function getProgressValue(value, max) {
 }
 /** Renders the progress component. */
 function Progress(_ref) {
-	let { value, max = 100, size = "md", variant = "default", showLabel = false, label, animated = true, indeterminate = false, className } = _ref, props = _objectWithoutProperties(_ref, _excluded$8);
+	let { value, max = 100, size = "md", variant = "default", showLabel = false, label, animated = true, indeterminate = false, className } = _ref, props = _objectWithoutProperties(_ref, _excluded$7);
 	const progress = indeterminate || value === void 0 ? null : getProgressValue(value, max);
 	const shouldRenderHeader = Boolean(label) || showLabel && progress;
 	return /* @__PURE__ */ jsxs("div", _objectSpread2(_objectSpread2({ className: cn("w-full", className) }, props), {}, {
@@ -1065,7 +1102,7 @@ function Progress(_ref) {
 				children: progress.valueText
 			})]
 		}), /* @__PURE__ */ jsx("div", {
-			className: cn("bg-bg-subtle w-full overflow-hidden rounded-full", sizeStyles$5[size]),
+			className: cn("bg-bg-subtle w-full overflow-hidden rounded-full", sizeStyles$4[size]),
 			role: "progressbar",
 			"aria-valuenow": progress === null || progress === void 0 ? void 0 : progress.clampedValue,
 			"aria-valuemin": progress ? 0 : void 0,
@@ -1073,7 +1110,7 @@ function Progress(_ref) {
 			"aria-valuetext": progress === null || progress === void 0 ? void 0 : progress.valueText,
 			"aria-label": label !== null && label !== void 0 ? label : progress ? `${progress.valueText} complete` : "Loading",
 			children: /* @__PURE__ */ jsx("div", {
-				className: cn("h-full rounded-full", variantStyles$1[variant], !progress && "w-1/3 animate-pulse", animated && (progress ? "transition-all duration-300 ease-out" : "transition-opacity duration-700 ease-in-out")),
+				className: cn("h-full rounded-full", variantStyles[variant], !progress && "w-1/3 animate-pulse", animated && (progress ? "transition-all duration-300 ease-out" : "transition-opacity duration-700 ease-in-out")),
 				style: progress ? { width: `${progress.percentage}%` } : void 0
 			})
 		})]
@@ -1146,65 +1183,6 @@ function CircularProgress(_ref2) {
 	});
 }
 //#endregion
-//#region src/core/meter.tsx
-const _excluded$7 = [
-	"value",
-	"min",
-	"max",
-	"size",
-	"variant",
-	"showValue",
-	"label",
-	"getValueLabel",
-	"className"
-];
-const sizeStyles$4 = {
-	sm: "h-1",
-	md: "h-2",
-	lg: "h-3"
-};
-const variantStyles = {
-	default: "bg-accent",
-	success: "bg-success",
-	warning: "bg-warning",
-	error: "bg-danger"
-};
-/**
-* A scalar measurement within a known range (disk usage, score, capacity) —
-* `role="meter"`, distinct from Progress (task completion). Built on the
-* opt-ui-primitives Meter primitive, which owns the role/aria/valuetext.
-*/
-function Meter$1(_ref) {
-	let { value, min = 0, max = 100, size = "md", variant = "default", showValue = false, label, getValueLabel, className } = _ref, props = _objectWithoutProperties(_ref, _excluded$7);
-	const clamped = Math.min(Math.max(value, min), max);
-	const percentage = max === min ? 0 : (clamped - min) / (max - min) * 100;
-	return /* @__PURE__ */ jsxs("div", _objectSpread2(_objectSpread2({ className: cn("w-full", className) }, props), {}, {
-		"data-opt-id": "G01TE",
-		"data-opt-slug": "meter.Meter",
-		children: [(showValue || label) && /* @__PURE__ */ jsxs("div", {
-			className: "mb-1.5 flex items-center justify-between text-sm",
-			children: [label && /* @__PURE__ */ jsx("span", {
-				className: "text-text-primary font-medium",
-				children: label
-			}), showValue && /* @__PURE__ */ jsxs("span", {
-				className: "text-text-tertiary",
-				children: [Math.round(percentage), "%"]
-			})]
-		}), /* @__PURE__ */ jsx(Meter, {
-			value: clamped,
-			min,
-			max,
-			getValueLabel,
-			"aria-label": label !== null && label !== void 0 ? label : `${Math.round(percentage)}%`,
-			className: cn("bg-bg-subtle w-full overflow-hidden rounded-full", sizeStyles$4[size]),
-			children: /* @__PURE__ */ jsx("div", {
-				className: cn("h-full rounded-full transition-all duration-300 ease-out", variantStyles[variant]),
-				style: { width: `${percentage}%` }
-			})
-		})]
-	}));
-}
-//#endregion
 //#region src/core/step-builder.tsx
 /** Renders the step builder component. */
 function StepBuilder({ steps, onChange, label, addLabel = "Add step", maxSteps, className, "aria-label": ariaLabel }) {
@@ -1363,55 +1341,6 @@ function StepBuilder({ steps, onChange, label, addLabel = "Add step", maxSteps,
 }
 StepBuilder.displayName = "StepBuilder";
 //#endregion
-//#region src/lib/formatters.ts
-const OPT_UI_DEFAULT_LOCALE = "ko-KR";
-const KST_OFFSET_MS = 324e5;
-function getKstDateParts(input) {
-	const date = input instanceof Date ? input : new Date(input);
-	if (Number.isNaN(date.getTime())) return null;
-	const kstDate = new Date(date.getTime() + KST_OFFSET_MS);
-	return {
-		year: kstDate.getUTCFullYear(),
-		month: kstDate.getUTCMonth() + 1,
-		day: kstDate.getUTCDate(),
-		hour: kstDate.getUTCHours(),
-		minute: kstDate.getUTCMinutes(),
-		second: kstDate.getUTCSeconds()
-	};
-}
-function pad2(value) {
-	return String(value).padStart(2, "0");
-}
-function meridiem(hour) {
-	return hour < 12 ? "오전" : "오후";
-}
-function hour12(hour) {
-	const normalized = hour % 12;
-	return normalized === 0 ? 12 : normalized;
-}
-/** Formats a date as Korean short date text in the opt-ui default timezone. */
-function formatOptShortDate(input) {
-	const parts = getKstDateParts(input);
-	if (!parts) return "-";
-	return `${parts.month}월 ${parts.day}일`;
-}
-/** Formats a date as Korean clock time in the opt-ui default timezone. */
-function formatOptTime(input) {
-	const parts = getKstDateParts(input);
-	if (!parts) return "-";
-	return `${meridiem(parts.hour)} ${pad2(hour12(parts.hour))}:${pad2(parts.minute)}`;
-}
-/** Formats a date as Korean date-time text in the opt-ui default timezone. */
-function formatOptDateTime(input) {
-	const parts = getKstDateParts(input);
-	if (!parts) return "-";
-	return `${parts.year}. ${parts.month}. ${parts.day}. ${meridiem(parts.hour)} ${hour12(parts.hour)}:${pad2(parts.minute)}:${pad2(parts.second)}`;
-}
-/** Formats numbers without depending on the runtime default locale. */
-function formatOptNumber(value) {
-	return new Intl.NumberFormat(OPT_UI_DEFAULT_LOCALE).format(value);
-}
-//#endregion
 //#region src/core/condition-builder.tsx
 const OPERATOR_LABELS = {
 	equals: "equals",
@@ -3915,134 +3844,6 @@ function ExpressionGroup({ children, display = "sentence", className, "aria-labe
 	});
 }
 //#endregion
-//#region src/core/text-truncate.tsx
-const useIsomorphicLayoutEffect = typeof window === "undefined" ? useEffect : useLayoutEffect;
-/** Measures text in the element's own resolved font, not an assumed one. */
-function createMeasurer(element) {
-	const context = document.createElement("canvas").getContext("2d");
-	if (!context) return null;
-	const computed = window.getComputedStyle(element);
-	context.font = [
-		computed.fontStyle,
-		computed.fontVariant,
-		computed.fontWeight,
-		`${computed.fontSize}/${computed.lineHeight}`,
-		computed.fontFamily
-	].join(" ");
-	const spacing = Number.parseFloat(computed.letterSpacing) || 0;
-	return (value) => context.measureText(value).width + spacing * value.length;
-}
-/** Largest `n` in `[0, max]` for which `fits(n)` holds. */
-function largestFitting(max, fits) {
-	let low = 0;
-	let high = max;
-	while (low < high) {
-		const mid = Math.ceil((low + high) / 2);
-		if (fits(mid)) low = mid;
-		else high = mid - 1;
-	}
-	return low;
-}
-function truncateToWidth(text, side, ellipsis, available, measure) {
-	if (measure(text) <= available) return text;
-	const chars = Array.from(text);
-	if (side === "end") {
-		const keep = largestFitting(chars.length, (n) => measure(chars.slice(0, n).join("") + ellipsis) <= available);
-		return chars.slice(0, keep).join("") + ellipsis;
-	}
-	if (side === "start") {
-		const keep = largestFitting(chars.length, (n) => measure(ellipsis + chars.slice(chars.length - n).join("")) <= available);
-		return ellipsis + chars.slice(chars.length - keep).join("");
-	}
-	if (side === "startEnd") {
-		const keep = largestFitting(Math.floor(chars.length / 2), (n) => {
-			const head = chars.slice(0, n).join("");
-			const tail = chars.slice(chars.length - n).join("");
-			return measure(head + ellipsis + tail) <= available;
-		});
-		if (keep === 0) return ellipsis;
-		return chars.slice(0, keep).join("") + ellipsis + chars.slice(chars.length - keep).join("");
-	}
-	const span = largestFitting(chars.length, (n) => {
-		const start = Math.floor((chars.length - n) / 2);
-		return measure(ellipsis + chars.slice(start, start + n).join("") + ellipsis) <= available;
-	});
-	if (span === 0) return ellipsis;
-	const start = Math.floor((chars.length - span) / 2);
-	return ellipsis + chars.slice(start, start + span).join("") + ellipsis;
-}
-/**
-* TextTruncate — drops characters from the part of a string that identifies it
-* least.
-*
-* CSS can only cut the end. That is the wrong end for the strings analytics
-* shows most: two URLs that differ in their query string, two ids that share a
-* prefix, a stack frame whose filename is at the tail. This measures the real
-* text in the real font against the real available width and cuts where the
-* caller says.
-*
-* The full string stays in the accessibility tree and in `title`, so
-* truncation never costs the reader information — only space.
-*
-* @example
-* ```tsx
-* <TextTruncate text={event.url} truncation="startEnd" />
-* ```
-*/
-function TextTruncate({ text, truncation = "startEnd", ellipsis = "…", width, children, className }) {
-	const ref = useRef(null);
-	const [available, setAvailable] = useState(width !== null && width !== void 0 ? width : null);
-	useIsomorphicLayoutEffect(() => {
-		if (width !== void 0) {
-			setAvailable(width);
-			return;
-		}
-		const element = ref.current;
-		if (!element || typeof ResizeObserver === "undefined") return;
-		const observer = new ResizeObserver((entries) => {
-			const entry = entries[0];
-			if (entry) setAvailable(entry.contentRect.width);
-		});
-		observer.observe(element);
-		setAvailable(element.getBoundingClientRect().width);
-		return () => observer.disconnect();
-	}, [width]);
-	const [rendered, setRendered] = useState(text);
-	useIsomorphicLayoutEffect(() => {
-		const element = ref.current;
-		if (!element || available === null || available <= 0) {
-			setRendered(text);
-			return;
-		}
-		const measure = createMeasurer(element);
-		if (!measure) {
-			setRendered(text);
-			return;
-		}
-		setRendered(truncateToWidth(text, truncation, ellipsis, available, measure));
-	}, [
-		text,
-		truncation,
-		ellipsis,
-		available
-	]);
-	const truncated = rendered !== text;
-	return /* @__PURE__ */ jsxs("span", {
-		ref,
-		className: cn("block w-full overflow-hidden whitespace-nowrap", className),
-		title: truncated ? text : void 0,
-		"data-opt-id": "Y6BGX",
-		"data-opt-slug": "text-truncate.TextTruncate",
-		children: [/* @__PURE__ */ jsx("span", {
-			"aria-hidden": truncated ? "true" : void 0,
-			children: children ? children(rendered) : rendered
-		}), truncated && /* @__PURE__ */ jsx("span", {
-			className: "sr-only",
-			children: text
-		})]
-	});
-}
-//#endregion
 //#region src/core/live-region.tsx
 /**
 * LiveRegion — says out loud what a live view changed.
@@ -4329,7 +4130,7 @@ function InlineEdit({ value, onSave, as: Tag = "span", size = "md", placeholder,
 		}
 	};
 	if (editing) return /* @__PURE__ */ jsxs("span", {
-		className: cn("inline-flex items-center gap-element", className),
+		className: cn("inline-flex min-w-0 items-center gap-element", className),
 		"data-opt-id": "RQ0H2",
 		"data-opt-slug": "inline-edit.InlineEdit",
 		children: [
@@ -4381,7 +4182,7 @@ function InlineEdit({ value, onSave, as: Tag = "span", size = "md", placeholder,
 		]
 	});
 	return /* @__PURE__ */ jsxs("span", {
-		className: cn("inline-flex items-center gap-element", className),
+		className: cn("inline-flex min-w-0 items-center gap-element", className),
 		"data-opt-id": "RQ0H2",
 		"data-opt-slug": "inline-edit.InlineEdit",
 		children: [/* @__PURE__ */ jsxs("button", {
@@ -4389,7 +4190,7 @@ function InlineEdit({ value, onSave, as: Tag = "span", size = "md", placeholder,
 			disabled,
 			onClick: () => setEditing(true),
 			"aria-label": text.edit(value || emptyText),
-			className: cn("group -mx-1.5 -my-0.5 inline-flex max-w-full items-center gap-element rounded-md px-1.5 py-0.5 text-left", !disabled && "hover:bg-bg-subtle cursor-pointer", disabled && "cursor-default", OPT_FOCUS_VISIBLE),
+			className: cn("group -mx-1.5 -my-0.5 inline-flex min-w-0 items-center gap-element rounded-md px-1.5 py-0.5 text-left", !disabled && "hover:bg-bg-subtle cursor-pointer", disabled && "cursor-default", OPT_FOCUS_VISIBLE),
 			children: [/* @__PURE__ */ jsx(Tag, {
 				className: cn("truncate", sizeStyles$1[size], value ? "text-text-primary" : "text-text-tertiary italic"),
 				children: value || emptyText
@@ -4485,6 +4286,6 @@ function KeyPadMenu({ items, label, selection = "single", value, onValueChange,
 	});
 }
 //#endregion
-export { Textarea as $, ScrollArea as A, DropdownSeparator as B, DrawerRoot as C, ResizablePanelGroup as D, ResizablePanel as E, Radio as F, formatOptShortDate as G, ConditionBuilder as H, RadioGroup as I, Meter$1 as J, formatOptTime as K, DropdownContent as L, createBlock as M, BlockLayout as N, Section as O, LoadingOverlay as P, AvatarGroup as Q, DropdownItem as R, DrawerPanel as S, Text as St, ResizableHandle as T, formatOptDateTime as U, DropdownTrigger as V, formatOptNumber as W, Progress as X, CircularProgress as Y, Avatar as Z, SHADER_PRESET_IDS as _, Toggle$1 as _t, THEME_PALETTES as a, Switch as at, VirtualList as b, Separator$2 as bt, Expression as c, CardDescription as ct, FacetGroup as d, CardTitle as dt, Skeleton as et, ShaderSurface as f, Breadcrumb as ft, SHADER_PRESETS as g, AccordionTrigger$1 as gt, SHADER_PARAM_KEYS as h, AccordionRoot$1 as ht, ColorPalettePicker as i, SkeletonText as it, PageHeader as j, Container as k, ExpressionGroup as l, CardFooter as lt, SHADER_PARAM_FALLBACK as m, AccordionItem$1 as mt, InlineEdit as n, SkeletonCard as nt, LiveRegion as o, Card as ot, SHADER_OVERLAY_PARAM_KEYS as p, AccordionContent$1 as pt, StepBuilder as q, ColorPaletteDisplay as r, SkeletonTable as rt, TextTruncate as s, CardContent as st, KeyPadMenu as t, SkeletonAvatar as tt, Facet as u, CardHeader as ut, getShaderFragment as v, ToggleGroup$1 as vt, Logo as w, DrawerClose as x, Heading as xt, getShaderPreset as y, OtpField as yt, DropdownMenu as z };
+export { Identity as $, PageHeader as A, DropdownTrigger as B, Logo as C, Section as D, ResizablePanelGroup as E, RadioGroup as F, Textarea as G, StepBuilder as H, DropdownContent as I, CardContent as J, Switch as K, DropdownItem as L, BlockLayout as M, LoadingOverlay as N, Container as O, Radio as P, CardTitle as Q, DropdownMenu as R, DrawerRoot as S, ResizablePanel as T, CircularProgress as U, ConditionBuilder as V, Progress as W, CardFooter as X, CardDescription as Y, CardHeader as Z, getShaderFragment as _, THEME_PALETTES as a, AccordionItem$1 as at, DrawerClose as b, ExpressionGroup as c, Toggle$1 as ct, ShaderSurface as d, Separator$2 as dt, Avatar as et, SHADER_OVERLAY_PARAM_KEYS as f, Heading as ft, SHADER_PRESET_IDS as g, SHADER_PRESETS as h, ColorPalettePicker as i, AccordionContent$1 as it, createBlock as j, ScrollArea as k, Facet as l, ToggleGroup$1 as lt, SHADER_PARAM_KEYS as m, InlineEdit as n, DescriptionList as nt, LiveRegion as o, AccordionRoot$1 as ot, SHADER_PARAM_FALLBACK as p, Text as pt, Card as q, ColorPaletteDisplay as r, Breadcrumb as rt, Expression as s, AccordionTrigger$1 as st, KeyPadMenu as t, AvatarGroup as tt, FacetGroup as u, OtpField as ut, getShaderPreset as v, ResizableHandle as w, DrawerPanel as x, VirtualList as y, DropdownSeparator as z };
 
-//# sourceMappingURL=key-pad-menu-BFd79JoS.js.map
+//# sourceMappingURL=key-pad-menu-wXkWn1I1.js.map