@reopt-ai/opt-ui 1.12.5 → 1.14.0

package/dist/{key-pad-menu-CYYtS_Tl.js → key-pad-menu-CqFI6la9.js}

@@ -1,15 +1,14 @@
 "use client";
-import { Bn as OPT_FOCUS, Cn as getDescribedBy, En as OPT_ANIMATE_ENTER_EXIT, Ft as SelectRoot$1, It as SelectTrigger$1, Kn as OPT_SURFACE, Mn as OPT_BORDER, Mt as SelectItem$1, Pt as SelectPopover$1, Qn as OPT_TEXTAREA_SIZE, Qt as useInputId, Sn as RequiredMark, Tn as OPT_ANIMATE_DRAWER, Un as OPT_INPUT, Vn as OPT_FOCUS_VISIBLE, ar as _objectWithoutProperties, bn as useControlledState, cn as Badge, dn as koBreadcrumbLabels, dt as MenuSeparator$1, er as OPT_TEXT_PRIMARY, f as formatOptNumber, ft as MenuTrigger$1, ir as _objectSpread2, lt as MenuPopover$1, nr as OPT_TEXT_TERTIARY, ot as MenuItem$1, sn as Spinner, sr as cn, tr as OPT_TEXT_SECONDARY, un as Button, ut as MenuRoot$1, xn as FieldMessages } from "./text-truncate-Dlm7JwDf.js";
+import { Bt as SelectItem$1, Ht as SelectPopover$1, In as OPT_ANIMATE_DRAWER, Ln as OPT_ANIMATE_ENTER_EXIT, Mn as FieldMessages, Nn as RequiredMark, Pn as getDescribedBy, Qn as OPT_FOCUS_VISIBLE, Sn as koBreadcrumbLabels, Un as OPT_BORDER, Ut as SelectRoot$1, Wt as SelectTrigger$1, Zn as OPT_FOCUS, _n as Spinner, _r as cn, b as formatOptNumber, dr as OPT_TEXT_SECONDARY, er as OPT_INPUT, fr as OPT_TEXT_TERTIARY, hr as _objectWithoutProperties, jn as useControlledState, mr as _objectSpread2, rr as OPT_SURFACE, ur as OPT_TEXT_PRIMARY, vn as Badge, xn as Button } from "./text-truncate-Bd-0WkSP.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, 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 { Check, ChevronDown, Pencil, X } from "lucide-react";
 import { Mesh, Program, Renderer, Triangle } from "ogl";
 import { hexToSrgb } from "@reopt-ai/opt-palette";
 //#region src/core/text.tsx
-const _excluded$15 = [
+const _excluded$11 = [
 	"as",
 	"variant",
 	"tone",
@@ -25,7 +24,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$15);
+	let { as, variant = "body", tone = "primary", truncate = false, className, children } = _ref, props = _objectWithoutProperties(_ref, _excluded$11);
 	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 +39,7 @@ function Text(_ref) {
 }
 //#endregion
 //#region src/core/heading.tsx
-const _excluded$14 = [
+const _excluded$10 = [
 	"level",
 	"variant",
 	"className",
@@ -48,7 +47,7 @@ const _excluded$14 = [
 ];
 /** Semantic heading with independently selectable visual hierarchy. */
 function Heading(_ref) {
-	let { level = 2, variant = `heading-${level}`, className, children } = _ref, props = _objectWithoutProperties(_ref, _excluded$14);
+	let { level = 2, variant = `heading-${level}`, className, children } = _ref, props = _objectWithoutProperties(_ref, _excluded$10);
 	const Component = {
 		1: "h1",
 		2: "h2",
@@ -72,7 +71,7 @@ function Heading(_ref) {
 * Visual divider between content. Wraps the headless primitive with design
 * tokens. With `children`, renders a centered label flanked by rules.
 */
-function Separator$2({ orientation = "horizontal", decorative = false, children, className }) {
+function Separator$1({ orientation = "horizontal", decorative = false, children, className }) {
 	if (orientation === "horizontal" && children != null) return /* @__PURE__ */ jsxs("div", {
 		className: cn("gap-element flex items-center", className),
 		"data-opt-id": "7PWJS",
@@ -102,7 +101,7 @@ function Separator$2({ orientation = "horizontal", decorative = false, children,
 		"data-opt-slug": "separator.Separator"
 	});
 }
-Separator$2.displayName = "Separator";
+Separator$1.displayName = "Separator";
 //#endregion
 //#region src/core/otp-field.tsx
 const PATTERNS = {
@@ -267,25 +266,25 @@ function OtpField({ length = 6, value: controlledValue, defaultValue = "", onCha
 OtpField.displayName = "OtpField";
 //#endregion
 //#region src/core/toggle.tsx
-const _excluded$13 = [
+const _excluded$9 = [
 	"size",
 	"className",
 	"children"
 ];
-const _excluded2$7 = [
+const _excluded2$5 = [
 	"className",
 	"children",
 	"orientation"
 ];
-const sizeStyles$7 = {
+const sizeStyles$6 = {
 	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$13);
-	return /* @__PURE__ */ jsx(Toggle, _objectSpread2(_objectSpread2({ className: cn(toggleBase, sizeStyles$7[size], className) }, props), {}, {
+	let { size = "md", className, children } = _ref, props = _objectWithoutProperties(_ref, _excluded$9);
+	return /* @__PURE__ */ jsx(Toggle, _objectSpread2(_objectSpread2({ className: cn(toggleBase, sizeStyles$6[size], className) }, props), {}, {
 		"data-opt-id": "GFCMY",
 		"data-opt-slug": "toggle.Toggle",
 		children
@@ -294,7 +293,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$7);
+	let { className, children, orientation = "horizontal" } = _ref2, props = _objectWithoutProperties(_ref2, _excluded2$5);
 	return /* @__PURE__ */ jsx(ToggleGroup, _objectSpread2(_objectSpread2({
 		orientation,
 		"aria-orientation": orientation,
@@ -308,15 +307,15 @@ function ToggleGroup$1(_ref2) {
 ToggleGroup$1.displayName = "ToggleGroup";
 //#endregion
 //#region src/core/accordion.tsx
-const _excluded$12 = ["className"];
-const _excluded2$6 = ["className"];
-const _excluded3$3 = ["className", "children"];
-const _excluded4$2 = ["className", "children"];
+const _excluded$8 = ["className"];
+const _excluded2$4 = ["className"];
+const _excluded3$1 = ["className", "children"];
+const _excluded4$1 = ["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$12);
+	let { className } = _ref, props = _objectWithoutProperties(_ref, _excluded$8);
 	return /* @__PURE__ */ jsx("div", {
 		className: cn("border-border border-y", className),
 		"data-opt-id": "CSBA9",
@@ -327,7 +326,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$6);
+	let { className } = _ref2, props = _objectWithoutProperties(_ref2, _excluded2$4);
 	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 +335,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$3);
+	let { className, children } = _ref3, props = _objectWithoutProperties(_ref3, _excluded3$1);
 	return /* @__PURE__ */ jsxs(AccordionTrigger, _objectSpread2(_objectSpread2({ className: cn(triggerClass, className) }, props), {}, {
 		"data-opt-id": "CWJZZ",
 		"data-opt-slug": "accordion.AccordionTrigger",
@@ -352,7 +351,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$2);
+	let { className, children } = _ref4, props = _objectWithoutProperties(_ref4, _excluded4$1);
 	return /* @__PURE__ */ jsx(AccordionContent, _objectSpread2(_objectSpread2({ className: cn(contentClass, className) }, props), {}, {
 		"data-opt-id": "J98AG",
 		"data-opt-slug": "accordion.AccordionContent",
@@ -410,111 +409,8 @@ 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 = [
+const _excluded$7 = [
 	"src",
 	"srcSet",
 	"sizes",
@@ -528,7 +424,7 @@ const _excluded$11 = [
 	"className",
 	"onLoadingStatusChange"
 ];
-const _excluded2$5 = [
+const _excluded2$3 = [
 	"max",
 	"size",
 	"children",
@@ -573,7 +469,7 @@ function useImageLoadingStatus(src, { srcSet, sizes, crossOrigin, referrerPolicy
 	]);
 	return status;
 }
-const sizeStyles$6 = {
+const sizeStyles$5 = {
 	xs: "h-6 w-6 text-[10px]",
 	sm: "h-8 w-8 text-xs",
 	md: "h-10 w-10 text-sm",
@@ -616,7 +512,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$11);
+	let { src, srcSet, sizes, crossOrigin, referrerPolicy, alt, name, size = "md", fallback, status, className, onLoadingStatusChange } = _ref, props = _objectWithoutProperties(_ref, _excluded$7);
 	const loadingStatus = useImageLoadingStatus(src, {
 		srcSet,
 		sizes,
@@ -657,7 +553,7 @@ function Avatar(_ref) {
 	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)
+		className: cn("relative inline-flex shrink-0 items-center justify-center overflow-hidden rounded-full", sizeStyles$5[size], !showImage && bgColor, className)
 	}, props), {}, {
 		"data-opt-id": "SCMM0",
 		"data-opt-slug": "avatar.Avatar",
@@ -669,7 +565,7 @@ function Avatar(_ref) {
 }
 /** Renders the avatar group component. */
 function AvatarGroup(_ref5) {
-	let { max = 4, size = "md", children, className } = _ref5, props = _objectWithoutProperties(_ref5, _excluded2$5);
+	let { max = 4, size = "md", children, className } = _ref5, props = _objectWithoutProperties(_ref5, _excluded2$3);
 	const avatars = Array.isArray(children) ? children : [children];
 	const visibleAvatars = avatars.slice(0, max);
 	const remainingCount = avatars.length - max;
@@ -680,14 +576,14 @@ function AvatarGroup(_ref5) {
 			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]),
+			className: cn("bg-bg-subtle text-text-secondary ring-surface relative inline-flex items-center justify-center rounded-full font-medium ring-2", sizeStyles$5[size]),
 			children: ["+", remainingCount]
 		})]
 	}));
 }
 //#endregion
 //#region src/core/identity.tsx
-const defaultLabels$2 = {
+const defaultLabels$3 = {
 	identified: "Identified",
 	anonymous: "Anonymous"
 };
@@ -717,7 +613,7 @@ function resolveDisplay(name, secondary, id) {
 * 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 labels = _objectSpread2(_objectSpread2({}, defaultLabels$3), 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;
@@ -755,7 +651,7 @@ function Identity({ name, secondary, id, avatarSrc, state, badge, size = "md", h
 Identity.displayName = "Identity";
 //#endregion
 //#region src/core/card.tsx
-const _excluded$10 = [
+const _excluded$6 = [
 	"variant",
 	"padding",
 	"shadow",
@@ -769,17 +665,17 @@ const _excluded$10 = [
 	"role",
 	"tabIndex"
 ];
-const _excluded2$4 = [
+const _excluded2$2 = [
 	"gap",
 	"className",
 	"children"
 ];
-const _excluded3$2 = [
+const _excluded3 = [
 	"as",
 	"className",
 	"children"
 ];
-const _excluded4$1 = ["className", "children"];
+const _excluded4 = ["className", "children"];
 const _excluded5 = [
 	"spacing",
 	"className",
@@ -792,7 +688,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$10);
+	let { variant = "default", padding = "md", shadow = true, selectable = false, selected = false, onSelectedChange, className, children, onClick, onKeyDown, role, tabIndex } = _ref, props = _objectWithoutProperties(_ref, _excluded$6);
 	const isInteractive = selectable || !!onClick;
 	const handleClick = selectable ? (e) => {
 		onSelectedChange === null || onSelectedChange === void 0 || onSelectedChange(!selected);
@@ -835,7 +731,7 @@ const headerGapClasses = {
 };
 /** Renders the card header component. */
 function CardHeader(_ref2) {
-	let { gap = "sm", className, children } = _ref2, props = _objectWithoutProperties(_ref2, _excluded2$4);
+	let { gap = "sm", className, children } = _ref2, props = _objectWithoutProperties(_ref2, _excluded2$2);
 	return /* @__PURE__ */ jsx("div", _objectSpread2(_objectSpread2({ className: cn("flex flex-col", headerGapClasses[gap], className) }, props), {}, {
 		"data-opt-id": "JST3J",
 		"data-opt-slug": "card.CardHeader",
@@ -844,7 +740,7 @@ function CardHeader(_ref2) {
 }
 /** Renders the card title component. */
 function CardTitle(_ref3) {
-	let { as: Tag = "h3", className, children } = _ref3, props = _objectWithoutProperties(_ref3, _excluded3$2);
+	let { as: Tag = "h3", className, children } = _ref3, props = _objectWithoutProperties(_ref3, _excluded3);
 	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",
@@ -853,7 +749,7 @@ function CardTitle(_ref3) {
 }
 /** Renders the card description component. */
 function CardDescription(_ref4) {
-	let { className, children } = _ref4, props = _objectWithoutProperties(_ref4, _excluded4$1);
+	let { className, children } = _ref4, props = _objectWithoutProperties(_ref4, _excluded4);
 	return /* @__PURE__ */ jsx("p", _objectSpread2(_objectSpread2({ className: cn(`text-sm ${OPT_TEXT_SECONDARY}`, className) }, props), {}, {
 		"data-opt-id": "YB1RN",
 		"data-opt-slug": "card.CardDescription",
@@ -885,162 +781,8 @@ function CardFooter(_ref6) {
 	}));
 }
 //#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/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 = [
+const _excluded$5 = [
 	"value",
 	"max",
 	"size",
@@ -1051,7 +793,7 @@ const _excluded$7 = [
 	"indeterminate",
 	"className"
 ];
-const _excluded2$3 = [
+const _excluded2$1 = [
 	"value",
 	"max",
 	"size",
@@ -1086,7 +828,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$7);
+	let { value, max = 100, size = "md", variant = "default", showLabel = false, label, animated = true, indeterminate = false, className } = _ref, props = _objectWithoutProperties(_ref, _excluded$5);
 	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), {}, {
@@ -1125,7 +867,7 @@ const circularVariantStyles = {
 /** Renders the circular progress component. */
 function CircularProgress(_ref2) {
 	var _progress$percentage;
-	let { value, max = 100, size = 48, strokeWidth = 4, variant = "default", showLabel = false, label, indeterminate = false, className } = _ref2, props = _objectWithoutProperties(_ref2, _excluded2$3);
+	let { value, max = 100, size = 48, strokeWidth = 4, variant = "default", showLabel = false, label, indeterminate = false, className } = _ref2, props = _objectWithoutProperties(_ref2, _excluded2$1);
 	const labelId = useId();
 	const isIndeterminate = indeterminate || value === void 0;
 	const progress = isIndeterminate ? null : getProgressValue(value, max);
@@ -1342,6 +1084,7 @@ function StepBuilder({ steps, onChange, label, addLabel = "Add step", maxSteps,
 StepBuilder.displayName = "StepBuilder";
 //#endregion
 //#region src/core/condition-builder.tsx
+const defaultLabels$2 = { previewSuffix: "matches" };
 const OPERATOR_LABELS = {
 	equals: "equals",
 	not_equals: "does not equal",
@@ -1400,8 +1143,9 @@ function collectConditionBuilderIds(groups) {
 	};
 }
 /** Renders the condition builder component. */
-function ConditionBuilder({ groups, onChange, properties = DEFAULT_PROPERTIES, label, addConditionLabel = "Add condition", addGroupLabel = "Add group", addNestedGroupLabel = "Add nested group", nested = false, maxDepth = 3, conditionTypes, onPreview, previewCount, className, "aria-label": ariaLabel }) {
+function ConditionBuilder({ groups, onChange, properties = DEFAULT_PROPERTIES, label, addConditionLabel = "Add condition", addGroupLabel = "Add group", addNestedGroupLabel = "Add nested group", nested = false, maxDepth = 3, conditionTypes, onPreview, previewCount, labels: customLabels, className, "aria-label": ariaLabel }) {
 	var _ref;
+	const labels = _objectSpread2(_objectSpread2({}, defaultLabels$2), customLabels);
 	const inheritedIdScope = React.useContext(ConditionBuilderIdScopeContext);
 	const nextGroupIdRef = React.useRef(1);
 	const nextConditionIdRef = React.useRef(1);
@@ -1618,7 +1362,8 @@ function ConditionBuilder({ groups, onChange, properties = DEFAULT_PROPERTIES, l
 								addNestedGroupLabel,
 								nested,
 								maxDepth: maxDepth - 1,
-								conditionTypes
+								conditionTypes,
+								labels: customLabels
 							})
 						}),
 						/* @__PURE__ */ jsxs("div", {
@@ -1661,9 +1406,9 @@ function ConditionBuilder({ groups, onChange, properties = DEFAULT_PROPERTIES, l
 						onClick: addGroup,
 						className: "self-start",
 						children: ["+ ", addGroupLabel]
-					}), previewCount != null && /* @__PURE__ */ jsxs("span", {
+					}), previewCount != null && /* @__PURE__ */ jsx("span", {
 						className: cn("text-text-secondary", "text-sm"),
-						children: [formatOptNumber(previewCount), " matches"]
+						children: labels.formatPreview ? labels.formatPreview(previewCount) : `${formatOptNumber(previewCount)} ${labels.previewSuffix}`
 					})]
 				})
 			]
@@ -1672,47 +1417,8 @@ function ConditionBuilder({ groups, onChange, properties = DEFAULT_PROPERTIES, l
 }
 ConditionBuilder.displayName = "ConditionBuilder";
 //#endregion
-//#region src/core/dropdown-menu.tsx
-const _excluded$6 = ["className"];
-const _excluded2$2 = ["className"];
-const _excluded3$1 = ["className", "variant"];
-const _excluded4 = ["className"];
-const DropdownMenu = MenuRoot$1;
-/** Renders the dropdown trigger component. */
-function DropdownTrigger(_ref) {
-	let { className } = _ref, props = _objectWithoutProperties(_ref, _excluded$6);
-	return /* @__PURE__ */ jsx(MenuTrigger$1, _objectSpread2(_objectSpread2({ className: cn("cursor-pointer gap-2", className) }, props), {}, {
-		"data-opt-id": "C4BSS",
-		"data-opt-slug": "dropdown-menu.DropdownTrigger"
-	}));
-}
-/** Renders the dropdown content component. */
-function DropdownContent(_ref2) {
-	let { className } = _ref2, props = _objectWithoutProperties(_ref2, _excluded2$2);
-	return /* @__PURE__ */ jsx(MenuPopover$1, _objectSpread2(_objectSpread2({ className: cn(className) }, props), {}, {
-		"data-opt-id": "J6NF7",
-		"data-opt-slug": "dropdown-menu.DropdownContent"
-	}));
-}
-/** Renders the dropdown item component. */
-function DropdownItem(_ref3) {
-	let { className, variant = "default" } = _ref3, props = _objectWithoutProperties(_ref3, _excluded3$1);
-	return /* @__PURE__ */ jsx(MenuItem$1, _objectSpread2(_objectSpread2({ className: cn("cursor-pointer data-[disabled]:cursor-not-allowed", variant === "destructive" && "text-danger-fg data-[active-item]:bg-danger-subtle data-[active-item]:text-danger-fg", className) }, props), {}, {
-		"data-opt-id": "5M6GA",
-		"data-opt-slug": "dropdown-menu.DropdownItem"
-	}));
-}
-/** Renders the dropdown separator component. */
-function DropdownSeparator(_ref4) {
-	let { className } = _ref4, props = _objectWithoutProperties(_ref4, _excluded4);
-	return /* @__PURE__ */ jsx(MenuSeparator$1, _objectSpread2(_objectSpread2({ className: cn(className) }, props), {}, {
-		"data-opt-id": "K9Y54",
-		"data-opt-slug": "dropdown-menu.DropdownSeparator"
-	}));
-}
-//#endregion
 //#region src/core/radio-group.tsx
-const _excluded$5 = [
+const _excluded$4 = [
 	"label",
 	"hint",
 	"description",
@@ -1759,7 +1465,7 @@ function RadioGroup({ children, value, defaultValue = "", onChange, disabled, si
 			children: [/* @__PURE__ */ jsxs(RadioGroupRoot, {
 				value,
 				defaultValue,
-				onChange,
+				onValueChange: onChange,
 				disabled,
 				orientation,
 				name,
@@ -1784,7 +1490,7 @@ function RadioGroup({ children, value, defaultValue = "", onChange, disabled, si
 }
 const Radio$1 = forwardRef((_ref, ref) => {
 	var _ref2;
-	let { label, hint, description, value, name: _name, size: sizeProp, disabled: disabledProp, className } = _ref, props = _objectWithoutProperties(_ref, _excluded$5);
+	let { label, hint, description, value, name: _name, size: sizeProp, disabled: disabledProp, className } = _ref, props = _objectWithoutProperties(_ref, _excluded$4);
 	const groupContext = useContext(RadioGroupContext);
 	const primContext = useRadioGroupContext();
 	const size = sizeProp !== null && sizeProp !== void 0 ? sizeProp : groupContext.size;
@@ -1846,7 +1552,7 @@ const Radio$1 = forwardRef((_ref, ref) => {
 Radio$1.displayName = "Radio";
 //#endregion
 //#region src/core/loading-overlay.tsx
-const _excluded$4 = [
+const _excluded$3 = [
 	"loading",
 	"children",
 	"label",
@@ -1854,7 +1560,7 @@ const _excluded$4 = [
 ];
 /** Renders the loading overlay component. */
 function LoadingOverlay(_ref) {
-	let { loading, children, label = "Loading…", className } = _ref, props = _objectWithoutProperties(_ref, _excluded$4);
+	let { loading, children, label = "Loading…", className } = _ref, props = _objectWithoutProperties(_ref, _excluded$3);
 	return /* @__PURE__ */ jsxs("div", _objectSpread2(_objectSpread2({
 		"data-opt-id": "380ZR",
 		"data-opt-slug": "loading-overlay.LoadingOverlay"
@@ -1881,7 +1587,7 @@ function LoadingOverlay(_ref) {
 LoadingOverlay.displayName = "LoadingOverlay";
 //#endregion
 //#region src/core/block-layout.tsx
-const _excluded$3 = [
+const _excluded$2 = [
 	"children",
 	"className",
 	"spacing",
@@ -1903,7 +1609,7 @@ const insetClass = {
 };
 /** Renders the block layout component. */
 function BlockLayout(_ref) {
-	let { children, className, spacing = "section", inset, loading, loadingLabel } = _ref, props = _objectWithoutProperties(_ref, _excluded$3);
+	let { children, className, spacing = "section", inset, loading, loadingLabel } = _ref, props = _objectWithoutProperties(_ref, _excluded$2);
 	const layoutClassName = cn("flex flex-col", spacingClass[spacing], inset ? insetClass[inset] : void 0, className);
 	if (loading) return /* @__PURE__ */ jsx(LoadingOverlay, _objectSpread2(_objectSpread2({
 		"data-opt-id": "9D8QR",
@@ -1925,7 +1631,7 @@ function BlockLayout(_ref) {
 BlockLayout.displayName = "BlockLayout";
 //#endregion
 //#region src/core/create-block.tsx
-const _excluded$2 = ["loading", "className"];
+const _excluded$1 = ["loading", "className"];
 /**
 * Block 팩토리. BlockLayout 래핑을 구조적으로 강제합니다.
 *
@@ -1935,7 +1641,7 @@ const _excluded$2 = ["loading", "className"];
 */
 function createBlock(name, render, options) {
 	const Component = (props) => {
-		const { loading, className } = props, rest = _objectWithoutProperties(props, _excluded$2);
+		const { loading, className } = props, rest = _objectWithoutProperties(props, _excluded$1);
 		const layoutCn = (options === null || options === void 0 ? void 0 : options.layoutClassName) ? `${options.layoutClassName}${className ? ` ${className}` : ""}` : className;
 		return /* @__PURE__ */ jsx(BlockLayout, {
 			loading,
@@ -2032,73 +1738,6 @@ function Section({ children, title, description, className }) {
 }
 Section.displayName = "Section";
 //#endregion
-//#region src/core/resizable.tsx
-const _excluded$1 = [
-	"direction",
-	"children",
-	"className",
-	"id",
-	"autoSaveId"
-];
-const _excluded2$1 = [
-	"collapsedSize",
-	"defaultSize",
-	"minSize",
-	"maxSize",
-	"children",
-	"className"
-];
-const _excluded3 = ["className", "withHandle"];
-function toPanelSize(size) {
-	return typeof size === "number" ? `${size}%` : size;
-}
-/** Renders the resizable panel group component. */
-function ResizablePanelGroup(_ref) {
-	let { direction, children, className, id, autoSaveId } = _ref, props = _objectWithoutProperties(_ref, _excluded$1);
-	return /* @__PURE__ */ jsx(Group, _objectSpread2(_objectSpread2({
-		orientation: direction,
-		id: id !== null && id !== void 0 ? id : autoSaveId,
-		className: cn("flex h-full w-full", className)
-	}, props), {}, {
-		"data-opt-id": "BM5RR",
-		"data-opt-slug": "resizable.ResizablePanelGroup",
-		children
-	}));
-}
-ResizablePanelGroup.displayName = "ResizablePanelGroup";
-/** Renders the resizable panel component. */
-function ResizablePanel(_ref2) {
-	let { collapsedSize, defaultSize, minSize, maxSize, children, className } = _ref2, props = _objectWithoutProperties(_ref2, _excluded2$1);
-	return /* @__PURE__ */ jsx(Panel, _objectSpread2(_objectSpread2({
-		collapsedSize: toPanelSize(collapsedSize),
-		defaultSize: toPanelSize(defaultSize),
-		minSize: toPanelSize(minSize),
-		maxSize: toPanelSize(maxSize),
-		className: cn("overflow-auto", className)
-	}, props), {}, {
-		"data-opt-id": "88X4V",
-		"data-opt-slug": "resizable.ResizablePanel",
-		children
-	}));
-}
-ResizablePanel.displayName = "ResizablePanel";
-/** Renders the resizable handle component. */
-function ResizableHandle(_ref3) {
-	let { className, withHandle = false } = _ref3, props = _objectWithoutProperties(_ref3, _excluded3);
-	return /* @__PURE__ */ jsx(Separator$1, _objectSpread2(_objectSpread2({ className: cn("bg-border relative flex items-center justify-center", "after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2", "data-[resize-handle-active]:bg-accent", "[&[data-orientation=vertical]]:h-px [&[data-orientation=vertical]]:w-full", "[&[data-orientation=horizontal]]:h-full [&[data-orientation=horizontal]]:w-px", className) }, props), {}, {
-		"data-opt-id": "6Z22W",
-		"data-opt-slug": "resizable.ResizableHandle",
-		children: withHandle && /* @__PURE__ */ jsx("div", {
-			className: "border-border bg-surface z-10 flex h-4 w-3 items-center justify-center rounded-sm border",
-			children: /* @__PURE__ */ jsx(GripVertical, {
-				"aria-hidden": "true",
-				className: "text-text-tertiary h-3 w-3"
-			})
-		})
-	}));
-}
-ResizableHandle.displayName = "ResizableHandle";
-//#endregion
 //#region src/core/logo.tsx
 const markSizeStyles = {
 	sm: "h-6 w-6",
@@ -4010,7 +3649,7 @@ function ColorPalettePicker({ palettes, value, onValueChange, label = "Colour pa
 			children: label
 		}), /* @__PURE__ */ jsxs(SelectRoot$1, {
 			value: (_ref = value !== null && value !== void 0 ? value : selected === null || selected === void 0 ? void 0 : selected.id) !== null && _ref !== void 0 ? _ref : "",
-			setValue: (next) => {
+			onValueChange: (next) => {
 				if (typeof next === "string") onValueChange === null || onValueChange === void 0 || onValueChange(next);
 			},
 			children: [/* @__PURE__ */ jsx(SelectTrigger$1, {
@@ -4286,4 +3925,4 @@ function KeyPadMenu({ items, label, selection = "single", value, onValueChange,
 	});
 }
 //#endregion
-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$1 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 };
+export { OtpField as $, LoadingOverlay as A, CardFooter as B, Logo as C, PageHeader as D, ScrollArea as E, CircularProgress as F, AvatarGroup as G, CardTitle as H, Progress as I, AccordionItem$1 as J, Breadcrumb as K, Card as L, RadioGroup as M, ConditionBuilder as N, createBlock as O, StepBuilder as P, ToggleGroup$1 as Q, CardContent as R, DrawerRoot as S, Container as T, Identity as U, CardHeader as V, Avatar as W, AccordionTrigger$1 as X, AccordionRoot$1 as Y, Toggle$1 as Z, getShaderFragment as _, THEME_PALETTES as a, DrawerClose as b, ExpressionGroup as c, ShaderSurface as d, Separator$1 as et, SHADER_OVERLAY_PARAM_KEYS as f, SHADER_PRESET_IDS as g, SHADER_PRESETS as h, ColorPalettePicker as i, Radio$1 as j, BlockLayout as k, Facet as l, SHADER_PARAM_KEYS as m, InlineEdit as n, Text as nt, LiveRegion as o, SHADER_PARAM_FALLBACK as p, AccordionContent$1 as q, ColorPaletteDisplay as r, Expression as s, KeyPadMenu as t, Heading as tt, FacetGroup as u, getShaderPreset as v, Section as w, DrawerPanel as x, VirtualList as y, CardDescription as z };