@reopt-ai/opt-ui 1.10.0 → 1.11.0

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

@@ -1,15 +1,15 @@
 "use client";
-import { Ft as SelectPopover$1, Gn as _objectSpread2, Hn as OPT_TEXT_SECONDARY, It as SelectRoot$1, Jn as cn, Kn as _objectWithoutProperties, Lt as SelectTrigger$1, Nt as SelectItem$1, On as OPT_FOCUS, Pn as OPT_SURFACE, Qt as useInputId, Un as OPT_TEXT_TERTIARY, Vn as OPT_TEXT_PRIMARY, bn as OPT_BORDER, cn as useControlledState, dn as getDescribedBy, dt as MenuRoot$1, en as Spinner, ft as MenuSeparator$1, in as koBreadcrumbLabels, jn as OPT_INPUT, kn as OPT_FOCUS_VISIBLE, ln as FieldMessages, mn as OPT_ANIMATE_ENTER_EXIT, pn as OPT_ANIMATE_DRAWER, pt as MenuTrigger$1, rn as Button, st as MenuItem$1, un as RequiredMark, ut as MenuPopover$1, zn as OPT_TEXTAREA_SIZE } from "./text-truncate-j6X3z7Pv.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,8 +410,352 @@ function Breadcrumb({ items, separator = "/", className, onNavigate, "aria-label
 	});
 }
 //#endregion
+//#region src/core/description-list.tsx
+const defaultLabels$3 = {
+	copy: (term) => `Copy ${term}`,
+	copied: "Copied",
+	empty: "—"
+};
+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"
+};
+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"
+		})
+	});
+}
+/**
+* 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
+			})]
+		}, item.id))
+	});
+	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))
+	});
+}
+DescriptionList.displayName = "DescriptionList";
+//#endregion
+//#region src/core/avatar.tsx
+const _excluded$11 = [
+	"src",
+	"srcSet",
+	"sizes",
+	"crossOrigin",
+	"referrerPolicy",
+	"alt",
+	"name",
+	"size",
+	"fallback",
+	"status",
+	"className",
+	"onLoadingStatusChange"
+];
+const _excluded2$5 = [
+	"max",
+	"size",
+	"children",
+	"className"
+];
+const useIsoLayoutEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect;
+/**
+* Tracks an image's loading status by preloading it off-DOM, so the avatar can
+* show its fallback until the image is actually decoded (no broken-image flash)
+* and recover from late `error`/`load` events. Supports responsive `srcSet`/`sizes`.
+*/
+function useImageLoadingStatus(src, { srcSet, sizes, crossOrigin, referrerPolicy }) {
+	const [status, setStatus] = useState("idle");
+	useIsoLayoutEffect(() => {
+		if (!src && !srcSet) {
+			setStatus("error");
+			return;
+		}
+		let isMounted = true;
+		const image = new window.Image();
+		const update = (next) => () => {
+			if (isMounted) setStatus(next);
+		};
+		setStatus("loading");
+		image.onload = update("loaded");
+		image.onerror = update("error");
+		if (referrerPolicy) image.referrerPolicy = referrerPolicy;
+		image.crossOrigin = crossOrigin !== null && crossOrigin !== void 0 ? crossOrigin : null;
+		if (sizes) image.sizes = sizes;
+		if (srcSet) image.srcset = srcSet;
+		if (src) image.src = src;
+		if (image.complete) setStatus(image.naturalWidth > 0 ? "loaded" : "error");
+		return () => {
+			isMounted = false;
+		};
+	}, [
+		src,
+		srcSet,
+		sizes,
+		crossOrigin,
+		referrerPolicy
+	]);
+	return status;
+}
+const sizeStyles$6 = {
+	xs: "h-6 w-6 text-[10px]",
+	sm: "h-8 w-8 text-xs",
+	md: "h-10 w-10 text-sm",
+	lg: "h-12 w-12 text-base",
+	xl: "h-16 w-16 text-lg"
+};
+const statusStyles = {
+	online: "bg-success",
+	offline: "bg-bg-muted",
+	busy: "bg-danger",
+	away: "bg-warning"
+};
+const statusSizeStyles = {
+	xs: "h-1.5 w-1.5 border",
+	sm: "h-2 w-2 border",
+	md: "h-2.5 w-2.5 border-2",
+	lg: "h-3 w-3 border-2",
+	xl: "h-4 w-4 border-2"
+};
+function getInitials(name) {
+	const parts = name.trim().split(/\s+/);
+	if (parts.length === 1) return parts[0].charAt(0).toUpperCase();
+	return (parts[0].charAt(0) + parts[parts.length - 1].charAt(0)).toUpperCase();
+}
+const bgColors = [
+	"bg-blue-500",
+	"bg-emerald-500",
+	"bg-amber-500",
+	"bg-rose-500",
+	"bg-purple-500",
+	"bg-cyan-500",
+	"bg-orange-500",
+	"bg-indigo-500"
+];
+function getColorFromName(name) {
+	let hash = 0;
+	for (let i = 0; i < name.length; i++) hash = name.charCodeAt(i) + ((hash << 5) - hash);
+	return bgColors[Math.abs(hash) % bgColors.length];
+}
+/** 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$11);
+	const loadingStatus = useImageLoadingStatus(src, {
+		srcSet,
+		sizes,
+		crossOrigin,
+		referrerPolicy
+	});
+	useEffect(() => {
+		onLoadingStatusChange === null || onLoadingStatusChange === void 0 || onLoadingStatusChange(loadingStatus);
+	}, [loadingStatus, onLoadingStatusChange]);
+	const showImage = (Boolean(src) || Boolean(srcSet)) && loadingStatus === "loaded";
+	const initials = name ? getInitials(name) : null;
+	const bgColor = name ? getColorFromName(name) : "bg-bg-subtle";
+	const avatarLabel = status ? `${(_ref2 = name !== null && name !== void 0 ? name : alt) !== null && _ref2 !== void 0 ? _ref2 : "Avatar"} (${status})` : (_ref3 = name !== null && name !== void 0 ? name : alt) !== null && _ref3 !== void 0 ? _ref3 : "Avatar";
+	let avatarContent;
+	if (showImage) {
+		var _ref4;
+		avatarContent = /* @__PURE__ */ jsx("img", {
+			src,
+			srcSet,
+			sizes,
+			crossOrigin,
+			referrerPolicy,
+			alt: (_ref4 = alt !== null && alt !== void 0 ? alt : name) !== null && _ref4 !== void 0 ? _ref4 : "Avatar",
+			className: "h-full w-full object-cover"
+		});
+	} else if (fallback) avatarContent = fallback;
+	else if (initials) avatarContent = /* @__PURE__ */ jsx("span", {
+		className: "font-medium text-white",
+		children: initials
+	});
+	else avatarContent = /* @__PURE__ */ jsx("svg", {
+		className: "text-text-tertiary h-3/5 w-3/5",
+		fill: "currentColor",
+		viewBox: "0 0 24 24",
+		"aria-hidden": "true",
+		children: /* @__PURE__ */ jsx("path", { d: "M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z" })
+	});
+	return /* @__PURE__ */ jsxs("span", _objectSpread2(_objectSpread2({
+		role: "img",
+		"aria-label": avatarLabel,
+		className: cn("relative inline-flex shrink-0 items-center justify-center overflow-hidden rounded-full", sizeStyles$6[size], !showImage && bgColor, className)
+	}, props), {}, {
+		"data-opt-id": "SCMM0",
+		"data-opt-slug": "avatar.Avatar",
+		children: [avatarContent, status && /* @__PURE__ */ jsx("span", {
+			className: cn("border-surface absolute right-0 bottom-0 rounded-full", statusStyles[status], statusSizeStyles[size]),
+			"aria-hidden": "true"
+		})]
+	}));
+}
+/** 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$13 = [
+const _excluded$10 = [
 	"variant",
 	"padding",
 	"shadow",
@@ -425,17 +769,17 @@ const _excluded$13 = [
 	"role",
 	"tabIndex"
 ];
-const _excluded2$6 = [
+const _excluded2$4 = [
 	"gap",
 	"className",
 	"children"
 ];
-const _excluded3$3 = [
+const _excluded3$2 = [
 	"as",
 	"className",
 	"children"
 ];
-const _excluded4$2 = ["className", "children"];
+const _excluded4$1 = ["className", "children"];
 const _excluded5 = [
 	"spacing",
 	"className",
@@ -448,7 +792,7 @@ const _excluded6 = [
 ];
 /** 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);
+	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);
@@ -491,7 +835,7 @@ const headerGapClasses = {
 };
 /** Renders the card header component. */
 function CardHeader(_ref2) {
-	let { gap = "sm", className, children } = _ref2, props = _objectWithoutProperties(_ref2, _excluded2$6);
+	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",
@@ -500,7 +844,7 @@ function CardHeader(_ref2) {
 }
 /** Renders the card title component. */
 function CardTitle(_ref3) {
-	let { as: Tag = "h3", className, children } = _ref3, props = _objectWithoutProperties(_ref3, _excluded3$3);
+	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",
@@ -509,7 +853,7 @@ function CardTitle(_ref3) {
 }
 /** Renders the card description component. */
 function CardDescription(_ref4) {
-	let { className, children } = _ref4, props = _objectWithoutProperties(_ref4, _excluded4$2);
+	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",
@@ -542,7 +886,7 @@ function CardFooter(_ref6) {
 }
 //#endregion
 //#region src/core/switch.tsx
-const _excluded$12 = [
+const _excluded$9 = [
 	"label",
 	"required",
 	"error",
@@ -559,7 +903,7 @@ const _excluded$12 = [
 	"aria-label",
 	"aria-labelledby"
 ];
-const sizeStyles$7 = {
+const sizeStyles$5 = {
 	sm: {
 		track: "h-5 w-9",
 		thumb: "h-4 w-4",
@@ -578,12 +922,12 @@ const sizeStyles$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);
+	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$7[size];
+	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";
@@ -641,142 +985,8 @@ const Switch = forwardRef((_ref, ref) => {
 });
 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..."
-			})
-		]
-	});
-}
-//#endregion
 //#region src/core/textarea.tsx
-const _excluded$10 = [
+const _excluded$8 = [
 	"label",
 	"error",
 	"hint",
@@ -797,7 +1007,7 @@ const resizeStyles = {
 };
 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);
+	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);
@@ -829,181 +1039,8 @@ const Textarea = forwardRef((_ref, ref) => {
 });
 Textarea.displayName = "Textarea";
 //#endregion
-//#region src/core/avatar.tsx
-const _excluded$9 = [
-	"src",
-	"srcSet",
-	"sizes",
-	"crossOrigin",
-	"referrerPolicy",
-	"alt",
-	"name",
-	"size",
-	"fallback",
-	"status",
-	"className",
-	"onLoadingStatusChange"
-];
-const _excluded2$4 = [
-	"max",
-	"size",
-	"children",
-	"className"
-];
-const useIsoLayoutEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect;
-/**
-* Tracks an image's loading status by preloading it off-DOM, so the avatar can
-* show its fallback until the image is actually decoded (no broken-image flash)
-* and recover from late `error`/`load` events. Supports responsive `srcSet`/`sizes`.
-*/
-function useImageLoadingStatus(src, { srcSet, sizes, crossOrigin, referrerPolicy }) {
-	const [status, setStatus] = useState("idle");
-	useIsoLayoutEffect(() => {
-		if (!src && !srcSet) {
-			setStatus("error");
-			return;
-		}
-		let isMounted = true;
-		const image = new window.Image();
-		const update = (next) => () => {
-			if (isMounted) setStatus(next);
-		};
-		setStatus("loading");
-		image.onload = update("loaded");
-		image.onerror = update("error");
-		if (referrerPolicy) image.referrerPolicy = referrerPolicy;
-		image.crossOrigin = crossOrigin !== null && crossOrigin !== void 0 ? crossOrigin : null;
-		if (sizes) image.sizes = sizes;
-		if (srcSet) image.srcset = srcSet;
-		if (src) image.src = src;
-		if (image.complete) setStatus(image.naturalWidth > 0 ? "loaded" : "error");
-		return () => {
-			isMounted = false;
-		};
-	}, [
-		src,
-		srcSet,
-		sizes,
-		crossOrigin,
-		referrerPolicy
-	]);
-	return status;
-}
-const sizeStyles$6 = {
-	xs: "h-6 w-6 text-[10px]",
-	sm: "h-8 w-8 text-xs",
-	md: "h-10 w-10 text-sm",
-	lg: "h-12 w-12 text-base",
-	xl: "h-16 w-16 text-lg"
-};
-const statusStyles = {
-	online: "bg-success",
-	offline: "bg-bg-muted",
-	busy: "bg-danger",
-	away: "bg-warning"
-};
-const statusSizeStyles = {
-	xs: "h-1.5 w-1.5 border",
-	sm: "h-2 w-2 border",
-	md: "h-2.5 w-2.5 border-2",
-	lg: "h-3 w-3 border-2",
-	xl: "h-4 w-4 border-2"
-};
-function getInitials(name) {
-	const parts = name.trim().split(/\s+/);
-	if (parts.length === 1) return parts[0].charAt(0).toUpperCase();
-	return (parts[0].charAt(0) + parts[parts.length - 1].charAt(0)).toUpperCase();
-}
-const bgColors = [
-	"bg-blue-500",
-	"bg-emerald-500",
-	"bg-amber-500",
-	"bg-rose-500",
-	"bg-purple-500",
-	"bg-cyan-500",
-	"bg-orange-500",
-	"bg-indigo-500"
-];
-function getColorFromName(name) {
-	let hash = 0;
-	for (let i = 0; i < name.length; i++) hash = name.charCodeAt(i) + ((hash << 5) - hash);
-	return bgColors[Math.abs(hash) % bgColors.length];
-}
-/** 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);
-	const loadingStatus = useImageLoadingStatus(src, {
-		srcSet,
-		sizes,
-		crossOrigin,
-		referrerPolicy
-	});
-	useEffect(() => {
-		onLoadingStatusChange === null || onLoadingStatusChange === void 0 || onLoadingStatusChange(loadingStatus);
-	}, [loadingStatus, onLoadingStatusChange]);
-	const showImage = (Boolean(src) || Boolean(srcSet)) && loadingStatus === "loaded";
-	const initials = name ? getInitials(name) : null;
-	const bgColor = name ? getColorFromName(name) : "bg-bg-subtle";
-	const avatarLabel = status ? `${(_ref2 = name !== null && name !== void 0 ? name : alt) !== null && _ref2 !== void 0 ? _ref2 : "Avatar"} (${status})` : (_ref3 = name !== null && name !== void 0 ? name : alt) !== null && _ref3 !== void 0 ? _ref3 : "Avatar";
-	let avatarContent;
-	if (showImage) {
-		var _ref4;
-		avatarContent = /* @__PURE__ */ jsx("img", {
-			src,
-			srcSet,
-			sizes,
-			crossOrigin,
-			referrerPolicy,
-			alt: (_ref4 = alt !== null && alt !== void 0 ? alt : name) !== null && _ref4 !== void 0 ? _ref4 : "Avatar",
-			className: "h-full w-full object-cover"
-		});
-	} else if (fallback) avatarContent = fallback;
-	else if (initials) avatarContent = /* @__PURE__ */ jsx("span", {
-		className: "font-medium text-white",
-		children: initials
-	});
-	else avatarContent = /* @__PURE__ */ jsx("svg", {
-		className: "text-text-tertiary h-3/5 w-3/5",
-		fill: "currentColor",
-		viewBox: "0 0 24 24",
-		"aria-hidden": "true",
-		children: /* @__PURE__ */ jsx("path", { d: "M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z" })
-	});
-	return /* @__PURE__ */ jsxs("span", _objectSpread2(_objectSpread2({
-		role: "img",
-		"aria-label": avatarLabel,
-		className: cn("relative inline-flex shrink-0 items-center justify-center overflow-hidden rounded-full", sizeStyles$6[size], !showImage && bgColor, className)
-	}, props), {}, {
-		"data-opt-id": "SCMM0",
-		"data-opt-slug": "avatar.Avatar",
-		children: [avatarContent, status && /* @__PURE__ */ jsx("span", {
-			className: cn("border-surface absolute right-0 bottom-0 rounded-full", statusStyles[status], statusSizeStyles[size]),
-			"aria-hidden": "true"
-		})]
-	}));
-}
-/** 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]
-		})]
-	}));
-}
-//#endregion
 //#region src/core/progress.tsx
-const _excluded$8 = [
+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",
@@ -4357,6 +4286,6 @@ function KeyPadMenu({ items, label, selection = "single", value, onValueChange,
 	});
 }
 //#endregion
-export { Skeleton as $, PageHeader as A, DropdownTrigger as B, Logo as C, Section as D, ResizablePanelGroup as E, RadioGroup as F, formatOptTime as G, formatOptDateTime as H, DropdownContent as I, CircularProgress as J, StepBuilder as K, DropdownItem as L, BlockLayout as M, LoadingOverlay as N, Container as O, Radio as P, Textarea as Q, DropdownMenu as R, DrawerRoot as S, ResizablePanel as T, formatOptNumber as U, ConditionBuilder as V, formatOptShortDate as W, Avatar as X, Progress as Y, AvatarGroup as Z, getShaderFragment as _, ToggleGroup$1 as _t, THEME_PALETTES as a, Card as at, DrawerClose as b, Heading as bt, ExpressionGroup as c, CardFooter as ct, ShaderSurface as d, Breadcrumb as dt, SkeletonAvatar as et, SHADER_OVERLAY_PARAM_KEYS as f, AccordionContent$1 as ft, SHADER_PRESET_IDS as g, Toggle$1 as gt, SHADER_PRESETS as h, AccordionTrigger$1 as ht, ColorPalettePicker as i, Switch as it, createBlock as j, ScrollArea as k, Facet as l, CardHeader as lt, SHADER_PARAM_KEYS as m, AccordionRoot$1 as mt, InlineEdit as n, SkeletonTable as nt, LiveRegion as o, CardContent as ot, SHADER_PARAM_FALLBACK as p, AccordionItem$1 as pt, Meter$1 as q, ColorPaletteDisplay as r, SkeletonText as rt, Expression as s, CardDescription as st, KeyPadMenu as t, SkeletonCard as tt, FacetGroup as u, CardTitle as ut, getShaderPreset as v, OtpField as vt, ResizableHandle as w, DrawerPanel as x, Text as xt, VirtualList as y, Separator$2 as yt, DropdownSeparator 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-BQunU20e.js.map
+//# sourceMappingURL=key-pad-menu-wXkWn1I1.js.map