@reopt-ai/opt-ui 1.12.5 → 1.13.0

package/dist/{text-truncate-Dlm7JwDf.js → text-truncate-Bd-0WkSP.js}

@@ -4,8 +4,9 @@ import { twMerge } from "tailwind-merge";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { createContext, forwardRef, useCallback, useContext, useEffect, useId, useLayoutEffect, useMemo, useRef, useState } from "react";
-import { AlertDialogPanel, ComboboxGroup, ComboboxGroupLabel, ComboboxInput, ComboboxItem, ComboboxPopover, ComboboxRoot, Composite, CompositeItem, CompositeProvider, CompositeRow, DialogDescription, DialogDisclosure, DialogDismiss, DialogHeading, DialogPanel, DialogRoot, DisclosureContent, DisclosureRoot, DisclosureTrigger, FormCheckbox, FormControl, FormDescription, FormError, FormField, FormGroup, FormGroupLabel, FormInput, FormLabel, FormProvider, FormPush, FormRadio, FormRadioGroup, FormRemove, FormReset, FormRoot, FormSubmit, FormSwitch, MenuButtonArrow, MenuItem, MenuItemCheckbox, MenuItemRadio, MenuPopover, MenuRoot, MenuSeparator, MenuTrigger, MenubarContainer, MenubarRoot, Meter, PopoverClose, PopoverContent, PopoverRoot, PopoverTrigger, SelectItem, SelectLabel, SelectPopover, SelectRoot, SelectTrigger, Tab, TabList, TabPanel, TabsRoot, ToolbarButton, ToolbarContainer, ToolbarRoot, ToolbarSeparator, Tooltip, TooltipAnchor, TooltipProvider, useFieldValue, useFormContext, useFormStore } from "@reopt-ai/opt-ui-primitives";
-import { AtSign, Bell, Binary, Braces, Brackets, Calendar, CalendarClock, CalendarDays, ChartColumn, Check, ChevronLeft, ChevronRight, CircleAlert, CircleCheck, CircleDollarSign, CircleHelp, CreditCard, Download, Eye, FileText, Fingerprint, Flag, Folder, Globe, Hash, Heart, Info, Layers, Link2, List, LogIn, Mail, MapPin, MessageCircle, MousePointerClick, Network, Percent, Search, Settings, Share2, ShoppingCart, Sigma, Star, Timer, ToggleLeft, TrendingUp, TriangleAlert, Type, Upload, User, UserPlus, XCircle, Zap } from "lucide-react";
+import { AlertDialogPanel, ComboboxGroup, ComboboxGroupLabel, ComboboxInput, ComboboxItem, ComboboxPopover, ComboboxRoot, Composite, CompositeItem, CompositeProvider, CompositeRow, DialogDescription, DialogDisclosure, DialogDismiss, DialogHeading, DialogPanel, DialogRoot, DisclosureContent, DisclosureRoot, DisclosureTrigger, FormCheckbox, FormControl, FormDescription, FormError, FormField, FormGroup, FormGroupLabel, FormInput, FormLabel, FormProvider, FormPush, FormRadio, FormRadioGroup, FormRemove, FormReset, FormRoot, FormSubmit, FormSwitch, MenuButtonArrow, MenuItem, MenuItemCheckbox, MenuItemRadio, MenuPopover, MenuRoot, MenuSeparator, MenuTrigger, MenubarContainer, MenubarRoot, Meter, PopoverClose, PopoverContent, PopoverRoot, PopoverTrigger, SelectItem, SelectLabel, SelectPopover, SelectRoot, SelectTrigger, Tab, TabList, TabPanel, TabsRoot, ToolbarButton, ToolbarContainer, ToolbarRoot, ToolbarSeparator, Tooltip, TooltipAnchor, TooltipRoot, useFieldValue, useFormContext, useFormStore } from "@reopt-ai/opt-ui-primitives";
+import { AtSign, Bell, Binary, Braces, Brackets, Calendar, CalendarClock, CalendarDays, ChartColumn, Check, ChevronLeft, ChevronRight, CircleAlert, CircleCheck, CircleDollarSign, CircleHelp, Copy, CreditCard, Download, Eye, FileText, Fingerprint, Flag, Folder, Globe, GripVertical, Hash, Heart, Info, Layers, Link2, List, LogIn, Mail, MapPin, MessageCircle, MousePointerClick, Network, Percent, Search, Settings, Share2, ShoppingCart, Sigma, Star, Timer, ToggleLeft, TrendingUp, TriangleAlert, Type, Upload, User, UserPlus, XCircle, Zap } from "lucide-react";
+import { Group, Panel, Separator as Separator$1 } from "react-resizable-panels";
 //#region src/lib/cn.ts
 /** Handles cn. */
 function cn(...inputs) {
@@ -220,7 +221,7 @@ function useControlledState(defaultValue, controlledValue, onChange) {
 }
 //#endregion
 //#region src/core/skeleton.tsx
-const _excluded$17 = [
+const _excluded$21 = [
 	"variant",
 	"width",
 	"height",
@@ -229,9 +230,9 @@ const _excluded$17 = [
 	"className",
 	"style"
 ];
-const _excluded2$9 = ["lines", "className"];
-const _excluded3$8 = ["size", "className"];
-const _excluded4$6 = ["className"];
+const _excluded2$11 = ["lines", "className"];
+const _excluded3$10 = ["size", "className"];
+const _excluded4$7 = ["className"];
 const variantStyles$4 = {
 	text: "rounded h-4",
 	circular: "rounded-full",
@@ -239,7 +240,7 @@ const variantStyles$4 = {
 };
 /** Renders the skeleton component. */
 function Skeleton(_ref) {
-	let { variant = "text", width, height, lines = 1, animated = true, className, style } = _ref, props = _objectWithoutProperties(_ref, _excluded$17);
+	let { variant = "text", width, height, lines = 1, animated = true, className, style } = _ref, props = _objectWithoutProperties(_ref, _excluded$21);
 	const baseClass = cn("bg-bg-subtle", animated && "animate-pulse", variantStyles$4[variant], className);
 	const computedStyle = _objectSpread2({
 		width: typeof width === "number" ? `${width}px` : width,
@@ -275,7 +276,7 @@ function Skeleton(_ref) {
 }
 /** Renders the skeleton text component. */
 function SkeletonText(_ref2) {
-	let { lines = 3, className } = _ref2, props = _objectWithoutProperties(_ref2, _excluded2$9);
+	let { lines = 3, className } = _ref2, props = _objectWithoutProperties(_ref2, _excluded2$11);
 	return /* @__PURE__ */ jsx(Skeleton, _objectSpread2(_objectSpread2({
 		variant: "text",
 		lines,
@@ -287,7 +288,7 @@ function SkeletonText(_ref2) {
 }
 /** Renders the skeleton avatar component. */
 function SkeletonAvatar(_ref3) {
-	let { size = 40, className } = _ref3, props = _objectWithoutProperties(_ref3, _excluded3$8);
+	let { size = 40, className } = _ref3, props = _objectWithoutProperties(_ref3, _excluded3$10);
 	return /* @__PURE__ */ jsx(Skeleton, _objectSpread2(_objectSpread2({
 		variant: "circular",
 		width: size,
@@ -300,7 +301,7 @@ function SkeletonAvatar(_ref3) {
 }
 /** Renders the skeleton card component. */
 function SkeletonCard(_ref4) {
-	let { className } = _ref4, props = _objectWithoutProperties(_ref4, _excluded4$6);
+	let { className } = _ref4, props = _objectWithoutProperties(_ref4, _excluded4$7);
 	return /* @__PURE__ */ jsxs("div", _objectSpread2(_objectSpread2({ className: cn("gap-group flex flex-col", className) }, props), {}, {
 		"data-opt-id": "34V5D",
 		"data-opt-slug": "skeleton.SkeletonCard",
@@ -494,7 +495,7 @@ const koBreadcrumbLabels = {
 navAriaLabel: "{label}(으)로 이동" };
 //#endregion
 //#region src/core/button.tsx
-const _excluded$16 = [
+const _excluded$20 = [
 	"variant",
 	"size",
 	"loading",
@@ -511,18 +512,18 @@ const variantStyles$3 = {
 	ghost: "text-text-secondary hover:bg-bg-subtle active:bg-bg-muted focus-visible:ring-offset-1",
 	danger: "bg-danger text-danger-fg hover:bg-danger active:bg-danger focus-visible:ring-offset-2"
 };
-const sizeStyles$5 = {
+const sizeStyles$6 = {
 	sm: "h-[var(--opt-control-sm)] px-[var(--opt-control-padding-sm)] text-xs gap-[var(--opt-space-1-5)]",
 	md: "h-[var(--opt-control-md)] px-[var(--opt-control-padding-md)] text-sm gap-[var(--opt-space-2)]",
 	lg: "h-[var(--opt-control-lg)] px-[var(--opt-control-padding-lg)] text-base gap-[var(--opt-space-2)]"
 };
 /** Renders the button component. */
 function Button(_ref) {
-	let { variant = "primary", size = "md", loading = false, leftIcon, rightIcon, className, disabled, children, "aria-busy": ariaBusy } = _ref, props = _objectWithoutProperties(_ref, _excluded$16);
+	let { variant = "primary", size = "md", loading = false, leftIcon, rightIcon, className, disabled, children, "aria-busy": ariaBusy } = _ref, props = _objectWithoutProperties(_ref, _excluded$20);
 	const isDisabled = disabled || loading;
 	return /* @__PURE__ */ jsxs("button", _objectSpread2(_objectSpread2({
 		type: "button",
-		className: cn("inline-flex cursor-pointer items-center justify-center rounded-lg font-medium transition-colors", OPT_FOCUS_VISIBLE, variantStyles$3[variant], sizeStyles$5[size], isDisabled && "pointer-events-none cursor-not-allowed opacity-50", className),
+		className: cn("inline-flex cursor-pointer items-center justify-center rounded-lg font-medium transition-colors", OPT_FOCUS_VISIBLE, variantStyles$3[variant], sizeStyles$6[size], isDisabled && "pointer-events-none cursor-not-allowed opacity-50", className),
 		disabled: isDisabled
 	}, props), {}, {
 		"aria-busy": loading ? true : ariaBusy,
@@ -624,8 +625,111 @@ function EmptyState({ icon, title, description, body, footer, actions, className
 	});
 }
 //#endregion
+//#region src/core/description-list.tsx
+const defaultLabels = {
+	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), 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/badge.tsx
-const _excluded$15 = [
+const _excluded$19 = [
 	"variant",
 	"size",
 	"dot",
@@ -655,19 +759,19 @@ const progressStroke = {
 	error: "stroke-danger",
 	info: "stroke-info"
 };
-const sizeStyles$4 = {
+const sizeStyles$5 = {
 	sm: "px-1.5 py-0.5 text-[10px]",
 	md: "px-2 py-0.5 text-[11px]"
 };
 /** Renders the badge component. */
 function Badge(_ref) {
-	let { variant = "default", size = "md", dot = false, progress, progressSize = 16, className, children } = _ref, props = _objectWithoutProperties(_ref, _excluded$15);
+	let { variant = "default", size = "md", dot = false, progress, progressSize = 16, className, children } = _ref, props = _objectWithoutProperties(_ref, _excluded$19);
 	const hasProgress = progress != null;
 	const clampedProgress = hasProgress ? Math.min(100, Math.max(0, progress)) : 0;
 	const radius = (progressSize - 3) / 2;
 	const circumference = 2 * Math.PI * radius;
 	const offset = circumference - clampedProgress / 100 * circumference;
-	return /* @__PURE__ */ jsxs("span", _objectSpread2(_objectSpread2({ className: cn(OPT_BADGE, variantStyles$2[variant], sizeStyles$4[size], className) }, props), {}, {
+	return /* @__PURE__ */ jsxs("span", _objectSpread2(_objectSpread2({ className: cn(OPT_BADGE, variantStyles$2[variant], sizeStyles$5[size], className) }, props), {}, {
 		"data-opt-id": "9GBGZ",
 		"data-opt-slug": "badge.Badge",
 		children: [
@@ -707,24 +811,24 @@ function Badge(_ref) {
 }
 //#endregion
 //#region src/core/spinner.tsx
-const _excluded$14 = [
+const _excluded$18 = [
 	"size",
 	"className",
 	"role",
 	"aria-hidden",
 	"aria-label"
 ];
-const sizeStyles$3 = {
+const sizeStyles$4 = {
 	sm: "h-4 w-4",
 	md: "h-6 w-6",
 	lg: "h-8 w-8"
 };
 /** Renders the spinner component. */
 function Spinner(_ref) {
-	let { size = "md", className, role, "aria-hidden": ariaHidden, "aria-label": ariaLabel } = _ref, props = _objectWithoutProperties(_ref, _excluded$14);
+	let { size = "md", className, role, "aria-hidden": ariaHidden, "aria-label": ariaLabel } = _ref, props = _objectWithoutProperties(_ref, _excluded$18);
 	const isDecorative = ariaHidden === true || ariaHidden === "true";
 	return /* @__PURE__ */ jsxs("svg", _objectSpread2(_objectSpread2({
-		className: cn("animate-spin text-current", sizeStyles$3[size], className),
+		className: cn("animate-spin text-current", sizeStyles$4[size], className),
 		viewBox: "0 0 24 24",
 		fill: "none",
 		role: isDecorative ? void 0 : role !== null && role !== void 0 ? role : "status",
@@ -749,7 +853,7 @@ function Spinner(_ref) {
 }
 //#endregion
 //#region src/core/alert.tsx
-const _excluded$13 = [
+const _excluded$17 = [
 	"variant",
 	"title",
 	"icon",
@@ -818,7 +922,7 @@ const defaultIcons = {
 };
 /** Renders the alert component. */
 function Alert(_ref) {
-	let { variant = "info", title, icon, dismissible = false, onDismiss, className, children } = _ref, props = _objectWithoutProperties(_ref, _excluded$13);
+	let { variant = "info", title, icon, dismissible = false, onDismiss, className, children } = _ref, props = _objectWithoutProperties(_ref, _excluded$17);
 	const displayIcon = icon !== null && icon !== void 0 ? icon : defaultIcons[variant];
 	return /* @__PURE__ */ jsx("div", _objectSpread2(_objectSpread2({
 		role: "alert",
@@ -865,10 +969,10 @@ function Alert(_ref) {
 }
 //#endregion
 //#region src/core/toolbar.tsx
-const _excluded$12 = ["className"];
-const _excluded2$8 = ["className"];
-const _excluded3$7 = ["className"];
-const _excluded4$5 = ["className"];
+const _excluded$16 = ["className"];
+const _excluded2$10 = ["className"];
+const _excluded3$9 = ["className"];
+const _excluded4$6 = ["className"];
 const _excluded5$3 = ["className"];
 const toolbarClass = `${OPT_SURFACE} ${OPT_BORDER} inline-flex w-fit items-center gap-0.5 px-1.5 py-1`;
 const buttonClass = `cursor-pointer rounded-md px-2.5 py-1.5 text-text-primary transition-colors data-[disabled]:cursor-not-allowed ${OPT_ACTIVE_ITEM} ${OPT_FOCUS}`;
@@ -883,7 +987,7 @@ function ToolbarRoot$1(props) {
 }
 /** Renders the toolbar container component. */
 function ToolbarContainer$1(_ref) {
-	let { className } = _ref, props = _objectWithoutProperties(_ref, _excluded$12);
+	let { className } = _ref, props = _objectWithoutProperties(_ref, _excluded$16);
 	return /* @__PURE__ */ jsx(ToolbarContainer, _objectSpread2(_objectSpread2({ className: cn(toolbarClass, className) }, props), {}, {
 		"data-opt-id": "2AVXB",
 		"data-opt-slug": "toolbar.ToolbarContainer"
@@ -891,7 +995,7 @@ function ToolbarContainer$1(_ref) {
 }
 /** Renders the toolbar button component. */
 function ToolbarButton$1(_ref2) {
-	let { className } = _ref2, props = _objectWithoutProperties(_ref2, _excluded2$8);
+	let { className } = _ref2, props = _objectWithoutProperties(_ref2, _excluded2$10);
 	return /* @__PURE__ */ jsx(ToolbarButton, _objectSpread2(_objectSpread2({ className: cn(buttonClass, className) }, props), {}, {
 		"data-opt-id": "C212C",
 		"data-opt-slug": "toolbar.ToolbarButton"
@@ -899,22 +1003,22 @@ function ToolbarButton$1(_ref2) {
 }
 /** Renders the toolbar separator component. */
 function ToolbarSeparator$1(_ref3) {
-	let { className } = _ref3, props = _objectWithoutProperties(_ref3, _excluded3$7);
+	let { className } = _ref3, props = _objectWithoutProperties(_ref3, _excluded3$9);
 	return /* @__PURE__ */ jsx(ToolbarSeparator, _objectSpread2(_objectSpread2({ className: cn(separatorClass, className) }, props), {}, {
 		"data-opt-id": "9J72S",
 		"data-opt-slug": "toolbar.ToolbarSeparator"
 	}));
 }
 /** Renders the tooltip provider component. */
-function TooltipProvider$1(props) {
-	return /* @__PURE__ */ jsx(TooltipProvider, _objectSpread2(_objectSpread2({}, props), {}, {
+function TooltipProvider(props) {
+	return /* @__PURE__ */ jsx(TooltipRoot, _objectSpread2(_objectSpread2({}, props), {}, {
 		"data-opt-id": "6NKHT",
 		"data-opt-slug": "toolbar.TooltipProvider"
 	}));
 }
 /** Renders the tooltip anchor component. */
 function TooltipAnchor$1(_ref4) {
-	let { className } = _ref4, props = _objectWithoutProperties(_ref4, _excluded4$5);
+	let { className } = _ref4, props = _objectWithoutProperties(_ref4, _excluded4$6);
 	return /* @__PURE__ */ jsx(TooltipAnchor, _objectSpread2(_objectSpread2({ className }, props), {}, {
 		"data-opt-id": "SAW1B",
 		"data-opt-slug": "toolbar.TooltipAnchor"
@@ -939,7 +1043,7 @@ function useInputId(id, label, prefix) {
 }
 //#endregion
 //#region src/core/input.tsx
-const _excluded$11 = [
+const _excluded$15 = [
 	"label",
 	"error",
 	"hint",
@@ -954,7 +1058,7 @@ const _excluded$11 = [
 const inputSizeStyles = OPT_INPUT_SIZE;
 const Input = forwardRef((_ref, ref) => {
 	var _useInputId;
-	let { label, error, hint, leftIcon, rightIcon, fullWidth = false, size = "md", required, className, id } = _ref, props = _objectWithoutProperties(_ref, _excluded$11);
+	let { label, error, hint, leftIcon, rightIcon, fullWidth = false, size = "md", required, className, id } = _ref, props = _objectWithoutProperties(_ref, _excluded$15);
 	const fallbackId = useId().replace(/:/g, "");
 	const inputId = (_useInputId = useInputId(id, label, "input")) !== null && _useInputId !== void 0 ? _useInputId : `input-${fallbackId}`;
 	const hasError = Boolean(error);
@@ -1000,6 +1104,106 @@ const Input = forwardRef((_ref, ref) => {
 });
 Input.displayName = "Input";
 //#endregion
+//#region src/core/switch.tsx
+const _excluded$14 = [
+	"label",
+	"required",
+	"error",
+	"hint",
+	"description",
+	"checked",
+	"defaultChecked",
+	"onChange",
+	"size",
+	"disabled",
+	"className",
+	"id",
+	"onClick",
+	"aria-label",
+	"aria-labelledby"
+];
+const sizeStyles$3 = {
+	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$14);
+	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$3[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/star-rating.tsx
 function interpolate(template, values) {
 	return template.replace(/\{(\w+)\}/g, (_, key) => key in values ? String(values[key]) : `{${key}}`);
@@ -1104,8 +1308,62 @@ function StarRating({ value = 0, onChange, max = 5, readOnly = false, size = "md
 	});
 }
 //#endregion
+//#region src/core/textarea.tsx
+const _excluded$13 = [
+	"label",
+	"error",
+	"hint",
+	"fullWidth",
+	"required",
+	"resize",
+	"size",
+	"className",
+	"id",
+	"rows"
+];
+const textareaSizeStyles = OPT_TEXTAREA_SIZE;
+const resizeStyles$1 = {
+	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$13);
+	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$1[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/meter.tsx
-const _excluded$10 = [
+const _excluded$12 = [
 	"value",
 	"min",
 	"max",
@@ -1133,7 +1391,7 @@ const variantStyles = {
 * 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$10);
+	let { value, min = 0, max = 100, size = "md", variant = "default", showValue = false, label, getValueLabel, className } = _ref, props = _objectWithoutProperties(_ref, _excluded$12);
 	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), {}, {
@@ -1181,8 +1439,8 @@ function CompositeZone({ children, label, focusLoop = true, focusWrap = true, cl
 }
 //#endregion
 //#region src/core/disclosure.tsx
-const _excluded$9 = ["className"];
-const _excluded2$7 = ["className"];
+const _excluded$11 = ["className"];
+const _excluded2$9 = ["className"];
 const triggerClass$1 = `flex w-full cursor-pointer items-center justify-between px-4 py-4 text-left text-sm font-medium text-text-primary transition-colors hover:bg-bg-subtle ${OPT_FOCUS} data-[active-item]:bg-bg-subtle data-[disabled]:cursor-not-allowed`;
 const contentClass = `overflow-hidden ${OPT_ANIMATE_ENTER_EXIT}`;
 /** Renders the disclosure root component. */
@@ -1194,7 +1452,7 @@ function DisclosureRoot$1(props) {
 }
 /** Renders the disclosure trigger component. */
 function DisclosureTrigger$1(_ref) {
-	let { className } = _ref, props = _objectWithoutProperties(_ref, _excluded$9);
+	let { className } = _ref, props = _objectWithoutProperties(_ref, _excluded$11);
 	return /* @__PURE__ */ jsx(DisclosureTrigger, _objectSpread2(_objectSpread2({ className: cn(triggerClass$1, className) }, props), {}, {
 		"data-opt-id": "14EZW",
 		"data-opt-slug": "disclosure.DisclosureTrigger"
@@ -1202,7 +1460,7 @@ function DisclosureTrigger$1(_ref) {
 }
 /** Renders the disclosure content component. */
 function DisclosureContent$1(_ref2) {
-	let { className } = _ref2, props = _objectWithoutProperties(_ref2, _excluded2$7);
+	let { className } = _ref2, props = _objectWithoutProperties(_ref2, _excluded2$9);
 	return /* @__PURE__ */ jsx(DisclosureContent, _objectSpread2(_objectSpread2({ className: cn(contentClass, className) }, props), {}, {
 		"data-opt-id": "78HYF",
 		"data-opt-slug": "disclosure.DisclosureContent"
@@ -1210,16 +1468,16 @@ function DisclosureContent$1(_ref2) {
 }
 //#endregion
 //#region src/core/tabs.tsx
-const _excluded$8 = ["variant"];
-const _excluded2$6 = ["className", "actions"];
-const _excluded3$6 = [
+const _excluded$10 = ["variant"];
+const _excluded2$8 = ["className", "actions"];
+const _excluded3$8 = [
 	"className",
 	"icon",
 	"status",
 	"statusLabel",
 	"children"
 ];
-const _excluded4$4 = ["className"];
+const _excluded4$5 = ["className"];
 const TabsVariantContext = React.createContext("underline");
 const tabClass = `cursor-pointer border-b-2 border-transparent px-4 py-2.5 text-sm text-text-tertiary transition-colors hover:text-text-primary data-[active-item]:text-text-primary data-[active-item]:border-text-primary data-[disabled]:cursor-not-allowed ${OPT_FOCUS}`;
 const tabListClass = "flex border-b border-border-subtle";
@@ -1232,7 +1490,7 @@ const actionsClass = "flex flex-none items-center gap-element";
 const tabPanelClass = `pt-4 ${OPT_FOCUS} data-[focus-visible]:rounded-lg`;
 /** Renders the tabs root component. */
 function TabsRoot$1(_ref) {
-	let { variant = "underline" } = _ref, props = _objectWithoutProperties(_ref, _excluded$8);
+	let { variant = "underline" } = _ref, props = _objectWithoutProperties(_ref, _excluded$10);
 	return /* @__PURE__ */ jsx(TabsVariantContext.Provider, {
 		value: variant,
 		children: /* @__PURE__ */ jsx(TabsRoot, _objectSpread2(_objectSpread2({}, props), {}, {
@@ -1243,7 +1501,7 @@ function TabsRoot$1(_ref) {
 }
 /** Renders the tab list component. */
 function TabList$1(_ref2) {
-	let { className, actions } = _ref2, props = _objectWithoutProperties(_ref2, _excluded2$6);
+	let { className, actions } = _ref2, props = _objectWithoutProperties(_ref2, _excluded2$8);
 	const variant = React.useContext(TabsVariantContext);
 	const list = /* @__PURE__ */ jsx(TabList, _objectSpread2(_objectSpread2({ className: cn(variant === "workspace" ? workspaceTabListClass : tabListClass, className) }, props), {}, {
 		"data-opt-id": "68K7E",
@@ -1260,7 +1518,7 @@ function TabList$1(_ref2) {
 }
 /** Renders the tab component. */
 function Tab$1(_ref3) {
-	let { className, icon, status, statusLabel, children } = _ref3, props = _objectWithoutProperties(_ref3, _excluded3$6);
+	let { className, icon, status, statusLabel, children } = _ref3, props = _objectWithoutProperties(_ref3, _excluded3$8);
 	const variant = React.useContext(TabsVariantContext);
 	const decorated = icon != null || status != null;
 	return /* @__PURE__ */ jsx(Tab, _objectSpread2(_objectSpread2({ className: cn(variant === "workspace" ? workspaceTabClass : tabClass, className) }, props), {}, {
@@ -1286,7 +1544,7 @@ function Tab$1(_ref3) {
 }
 /** Renders the tab panel component. */
 function TabPanel$1(_ref4) {
-	let { className } = _ref4, props = _objectWithoutProperties(_ref4, _excluded4$4);
+	let { className } = _ref4, props = _objectWithoutProperties(_ref4, _excluded4$5);
 	return /* @__PURE__ */ jsx(TabPanel, _objectSpread2(_objectSpread2({ className: cn(tabPanelClass, className) }, props), {}, {
 		"data-opt-id": "C0MBP",
 		"data-opt-slug": "tabs.TabPanel"
@@ -1294,13 +1552,13 @@ function TabPanel$1(_ref4) {
 }
 //#endregion
 //#region src/core/select.tsx
-const _excluded$7 = [
+const _excluded$9 = [
 	"className",
 	"minWidth",
 	"style"
 ];
-const _excluded2$5 = ["className"];
-const _excluded3$5 = ["className"];
+const _excluded2$7 = ["className"];
+const _excluded3$7 = ["className"];
 const triggerClass = `${OPT_INPUT} cursor-pointer items-center justify-between data-[disabled]:cursor-not-allowed ${OPT_FOCUS}`;
 const popoverClass$1 = `${OPT_SURFACE_POPOVER} ${OPT_ANIMATE_ENTER_EXIT} z-[120]`;
 const itemClass$1 = `flex cursor-pointer items-center gap-2 data-[disabled]:cursor-not-allowed ${OPT_ITEM_BASE} ${OPT_ACTIVE_ITEM}`;
@@ -1320,7 +1578,7 @@ function SelectLabel$1(props) {
 }
 /** Renders the select trigger component. */
 function SelectTrigger$1(_ref) {
-	let { className, minWidth = 140, style } = _ref, props = _objectWithoutProperties(_ref, _excluded$7);
+	let { className, minWidth = 140, style } = _ref, props = _objectWithoutProperties(_ref, _excluded$9);
 	return /* @__PURE__ */ jsx(SelectTrigger, _objectSpread2(_objectSpread2({
 		className: cn(triggerClass, className),
 		style: _objectSpread2({ minWidth: typeof minWidth === "number" ? `${minWidth}px` : minWidth }, style)
@@ -1331,7 +1589,7 @@ function SelectTrigger$1(_ref) {
 }
 /** Renders the select popover component. */
 function SelectPopover$1(_ref2) {
-	let { className } = _ref2, props = _objectWithoutProperties(_ref2, _excluded2$5);
+	let { className } = _ref2, props = _objectWithoutProperties(_ref2, _excluded2$7);
 	return /* @__PURE__ */ jsx(SelectPopover, _objectSpread2(_objectSpread2({ className: cn(popoverClass$1, className) }, props), {}, {
 		"data-opt-id": "P152F",
 		"data-opt-slug": "select.SelectPopover"
@@ -1339,7 +1597,7 @@ function SelectPopover$1(_ref2) {
 }
 /** Renders the select item component. */
 function SelectItem$1(_ref3) {
-	let { className } = _ref3, props = _objectWithoutProperties(_ref3, _excluded3$5);
+	let { className } = _ref3, props = _objectWithoutProperties(_ref3, _excluded3$7);
 	return /* @__PURE__ */ jsx(SelectItem, _objectSpread2(_objectSpread2({ className: cn(itemClass$1, className) }, props), {}, {
 		"data-opt-id": "KKBAF",
 		"data-opt-slug": "select.SelectItem"
@@ -1347,10 +1605,10 @@ function SelectItem$1(_ref3) {
 }
 //#endregion
 //#region src/core/dialog.tsx
-const _excluded$6 = ["className"];
-const _excluded2$4 = ["className", "size"];
-const _excluded3$4 = ["className", "size"];
-const _excluded4$3 = ["className"];
+const _excluded$8 = ["className"];
+const _excluded2$6 = ["className", "size"];
+const _excluded3$6 = ["className", "size"];
+const _excluded4$4 = ["className"];
 const _excluded5$2 = ["className"];
 const _excluded6$2 = ["className"];
 const sizeClasses = {
@@ -1371,7 +1629,7 @@ function DialogRoot$1(props) {
 }
 /** Renders the dialog disclosure component. */
 function DialogDisclosure$1(_ref) {
-	let { className } = _ref, props = _objectWithoutProperties(_ref, _excluded$6);
+	let { className } = _ref, props = _objectWithoutProperties(_ref, _excluded$8);
 	return /* @__PURE__ */ jsx(DialogDisclosure, _objectSpread2(_objectSpread2({ className: cn("inline-flex cursor-pointer items-center justify-center rounded-lg font-medium transition-colors", OPT_BUTTON_PRIMARY, OPT_FOCUS_VISIBLE, className) }, props), {}, {
 		"data-opt-id": "32QJK",
 		"data-opt-slug": "dialog.DialogDisclosure"
@@ -1379,7 +1637,7 @@ function DialogDisclosure$1(_ref) {
 }
 /** Renders the dialog panel component. */
 function DialogPanel$1(_ref2) {
-	let { className, size = "md" } = _ref2, props = _objectWithoutProperties(_ref2, _excluded2$4);
+	let { className, size = "md" } = _ref2, props = _objectWithoutProperties(_ref2, _excluded2$6);
 	return /* @__PURE__ */ jsx(DialogPanel, _objectSpread2(_objectSpread2({ className: cn(panelBase, sizeClasses[size], className) }, props), {}, {
 		"data-opt-id": "BTMTG",
 		"data-opt-slug": "dialog.DialogPanel"
@@ -1391,7 +1649,7 @@ function DialogPanel$1(_ref2) {
 * the other Dialog parts (DialogRoot/Heading/Description/Dismiss/…).
 */
 function AlertDialogPanel$1(_ref3) {
-	let { className, size = "sm" } = _ref3, props = _objectWithoutProperties(_ref3, _excluded3$4);
+	let { className, size = "sm" } = _ref3, props = _objectWithoutProperties(_ref3, _excluded3$6);
 	return /* @__PURE__ */ jsx(AlertDialogPanel, _objectSpread2(_objectSpread2({ className: cn(panelBase, sizeClasses[size], className) }, props), {}, {
 		"data-opt-id": "80HGS",
 		"data-opt-slug": "dialog.AlertDialogPanel"
@@ -1399,7 +1657,7 @@ function AlertDialogPanel$1(_ref3) {
 }
 /** Renders the dialog heading component. */
 function DialogHeading$1(_ref4) {
-	let { className } = _ref4, props = _objectWithoutProperties(_ref4, _excluded4$3);
+	let { className } = _ref4, props = _objectWithoutProperties(_ref4, _excluded4$4);
 	return /* @__PURE__ */ jsx(DialogHeading, _objectSpread2(_objectSpread2({ className: cn(`text-lg font-semibold ${OPT_TEXT_PRIMARY}`, className) }, props), {}, {
 		"data-opt-id": "4NW4H",
 		"data-opt-slug": "dialog.DialogHeading"
@@ -1453,10 +1711,10 @@ function DialogFooter({ children, className }) {
 }
 //#endregion
 //#region src/core/combobox.tsx
-const _excluded$5 = ["className"];
-const _excluded2$3 = ["className"];
-const _excluded3$3 = ["className"];
-const _excluded4$2 = ["className"];
+const _excluded$7 = ["className"];
+const _excluded2$5 = ["className"];
+const _excluded3$5 = ["className"];
+const _excluded4$3 = ["className"];
 const inputClass$1 = `${OPT_INPUT} ${OPT_FOCUS}`;
 const popoverClass = `${OPT_SURFACE_POPOVER} max-h-60 overflow-y-auto ${OPT_ANIMATE_ENTER_EXIT}`;
 const itemClass = `${OPT_ITEM_BASE} ${OPT_ACTIVE_ITEM}`;
@@ -1471,7 +1729,7 @@ function ComboboxRoot$1(props) {
 }
 /** Renders the combobox input component. */
 function ComboboxInput$1(_ref) {
-	let { className } = _ref, props = _objectWithoutProperties(_ref, _excluded$5);
+	let { className } = _ref, props = _objectWithoutProperties(_ref, _excluded$7);
 	return /* @__PURE__ */ jsx(ComboboxInput, _objectSpread2(_objectSpread2({ className: cn(inputClass$1, className) }, props), {}, {
 		"data-opt-id": "92FZS",
 		"data-opt-slug": "combobox.ComboboxInput"
@@ -1479,7 +1737,7 @@ function ComboboxInput$1(_ref) {
 }
 /** Renders the combobox popover component. */
 function ComboboxPopover$1(_ref2) {
-	let { className } = _ref2, props = _objectWithoutProperties(_ref2, _excluded2$3);
+	let { className } = _ref2, props = _objectWithoutProperties(_ref2, _excluded2$5);
 	return /* @__PURE__ */ jsx(ComboboxPopover, _objectSpread2(_objectSpread2({ className: cn(popoverClass, className) }, props), {}, {
 		"data-opt-id": "WS4PD",
 		"data-opt-slug": "combobox.ComboboxPopover"
@@ -1487,7 +1745,7 @@ function ComboboxPopover$1(_ref2) {
 }
 /** Renders the combobox item component. */
 function ComboboxItem$1(_ref3) {
-	let { className } = _ref3, props = _objectWithoutProperties(_ref3, _excluded3$3);
+	let { className } = _ref3, props = _objectWithoutProperties(_ref3, _excluded3$5);
 	return /* @__PURE__ */ jsx(ComboboxItem, _objectSpread2(_objectSpread2({ className: cn(itemClass, className) }, props), {}, {
 		"data-opt-id": "MAZJN",
 		"data-opt-slug": "combobox.ComboboxItem"
@@ -1502,7 +1760,7 @@ function ComboboxGroup$1(props) {
 }
 /** Renders the combobox group label component. */
 function ComboboxGroupLabel$1(_ref4) {
-	let { className } = _ref4, props = _objectWithoutProperties(_ref4, _excluded4$2);
+	let { className } = _ref4, props = _objectWithoutProperties(_ref4, _excluded4$3);
 	return /* @__PURE__ */ jsx(ComboboxGroupLabel, _objectSpread2(_objectSpread2({ className: cn(groupLabelClass, className) }, props), {}, {
 		"data-opt-id": "512YF",
 		"data-opt-slug": "combobox.ComboboxGroupLabel"
@@ -1519,10 +1777,10 @@ function ComboboxEmpty({ className, children = koComboboxLabels.empty }) {
 }
 //#endregion
 //#region src/core/menu.tsx
-const _excluded$4 = ["className"];
-const _excluded2$2 = ["className"];
-const _excluded3$2 = ["className"];
-const _excluded4$1 = ["className"];
+const _excluded$6 = ["className"];
+const _excluded2$4 = ["className"];
+const _excluded3$4 = ["className"];
+const _excluded4$2 = ["className"];
 const _excluded5$1 = ["className"];
 const _excluded6$1 = ["className"];
 const _excluded7$1 = ["className"];
@@ -1540,7 +1798,7 @@ function MenubarRoot$1(props) {
 }
 /** Renders the menubar container component. */
 function MenubarContainer$1(_ref) {
-	let { className } = _ref, props = _objectWithoutProperties(_ref, _excluded$4);
+	let { className } = _ref, props = _objectWithoutProperties(_ref, _excluded$6);
 	return /* @__PURE__ */ jsx(MenubarContainer, _objectSpread2(_objectSpread2({ className: cn(menubarClass, className) }, props), {}, {
 		"data-opt-id": "4MVQT",
 		"data-opt-slug": "menu.MenubarContainer"
@@ -1555,7 +1813,7 @@ function MenuRoot$1(props) {
 }
 /** Renders the menu trigger component. */
 function MenuTrigger$1(_ref2) {
-	let { className } = _ref2, props = _objectWithoutProperties(_ref2, _excluded2$2);
+	let { className } = _ref2, props = _objectWithoutProperties(_ref2, _excluded2$4);
 	return /* @__PURE__ */ jsx(MenuTrigger, _objectSpread2(_objectSpread2({ className: cn(menuButtonClass, className) }, props), {}, {
 		"data-opt-id": "46BJG",
 		"data-opt-slug": "menu.MenuTrigger"
@@ -1570,7 +1828,7 @@ function MenuButtonArrow$1(props) {
 }
 /** Renders the menu popover component. */
 function MenuPopover$1(_ref3) {
-	let { className } = _ref3, props = _objectWithoutProperties(_ref3, _excluded3$2);
+	let { className } = _ref3, props = _objectWithoutProperties(_ref3, _excluded3$4);
 	return /* @__PURE__ */ jsx(MenuPopover, _objectSpread2(_objectSpread2({ className: cn(menuPopoverClass, className) }, props), {}, {
 		"data-opt-id": "Q1MFY",
 		"data-opt-slug": "menu.MenuPopover"
@@ -1578,7 +1836,7 @@ function MenuPopover$1(_ref3) {
 }
 /** Renders the menu item component. */
 function MenuItem$1(_ref4) {
-	let { className } = _ref4, props = _objectWithoutProperties(_ref4, _excluded4$1);
+	let { className } = _ref4, props = _objectWithoutProperties(_ref4, _excluded4$2);
 	return /* @__PURE__ */ jsx(MenuItem, _objectSpread2(_objectSpread2({ className: cn(menuItemClass, className) }, props), {}, {
 		"data-opt-id": "71JVB",
 		"data-opt-slug": "menu.MenuItem"
@@ -2041,9 +2299,9 @@ function Slider({ value: controlledValue, defaultValue = 0, onChange, min = 0, m
 Slider.displayName = "Slider";
 //#endregion
 //#region src/core/popover.tsx
-const _excluded$3 = ["className"];
-const _excluded2$1 = ["className"];
-const _excluded3$1 = ["className"];
+const _excluded$5 = ["className"];
+const _excluded2$3 = ["className"];
+const _excluded3$3 = ["className"];
 /** Renders the popover root component. */
 function PopoverRoot$1(props) {
 	return /* @__PURE__ */ jsx(PopoverRoot, _objectSpread2(_objectSpread2({}, props), {}, {
@@ -2052,7 +2310,7 @@ function PopoverRoot$1(props) {
 	}));
 }
 const PopoverTrigger$1 = forwardRef((_ref, ref) => {
-	let { className } = _ref, props = _objectWithoutProperties(_ref, _excluded$3);
+	let { className } = _ref, props = _objectWithoutProperties(_ref, _excluded$5);
 	return /* @__PURE__ */ jsx(PopoverTrigger, _objectSpread2(_objectSpread2({
 		ref,
 		className: cn("inline-flex items-center gap-1.5 rounded-lg px-3 py-2 text-sm", "cursor-pointer data-[disabled]:cursor-not-allowed", OPT_FOCUS_VISIBLE, className)
@@ -2064,7 +2322,7 @@ const PopoverTrigger$1 = forwardRef((_ref, ref) => {
 PopoverTrigger$1.displayName = "PopoverTrigger";
 /** Renders the popover content component. */
 function PopoverContent$1(_ref2) {
-	let { className } = _ref2, props = _objectWithoutProperties(_ref2, _excluded2$1);
+	let { className } = _ref2, props = _objectWithoutProperties(_ref2, _excluded2$3);
 	return /* @__PURE__ */ jsx(PopoverContent, _objectSpread2(_objectSpread2({ className: cn("bg-surface-overlay z-50 rounded-lg p-4 shadow-lg", OPT_BORDER, OPT_ANIMATE_ENTER_EXIT, className) }, props), {}, {
 		"data-opt-id": "E03EY",
 		"data-opt-slug": "popover.PopoverContent"
@@ -2072,7 +2330,7 @@ function PopoverContent$1(_ref2) {
 }
 /** Renders the popover close component. */
 function PopoverClose$1(_ref3) {
-	let { className } = _ref3, props = _objectWithoutProperties(_ref3, _excluded3$1);
+	let { className } = _ref3, props = _objectWithoutProperties(_ref3, _excluded3$3);
 	return /* @__PURE__ */ jsx(PopoverClose, _objectSpread2(_objectSpread2({ className: cn("text-text-tertiary hover:bg-bg-subtle inline-flex items-center justify-center rounded-md p-1 text-sm", "cursor-pointer data-[disabled]:cursor-not-allowed", OPT_FOCUS_VISIBLE, className) }, props), {}, {
 		"data-opt-id": "FP4KF",
 		"data-opt-slug": "popover.PopoverClose"
@@ -3366,15 +3624,15 @@ function DateRangePicker({ value, onChange, presets = DEFAULT_PRESETS, placehold
 DateRangePicker.displayName = "DateRangePicker";
 //#endregion
 //#region src/core/form.tsx
-const _excluded$2 = ["className", "store"];
-const _excluded2 = ["className"];
-const _excluded3 = [
+const _excluded$4 = ["className", "store"];
+const _excluded2$2 = ["className"];
+const _excluded3$2 = [
 	"className",
 	"resize",
 	"rows",
 	"name"
 ];
-const _excluded4 = ["className"];
+const _excluded4$1 = ["className"];
 const _excluded5 = ["className"];
 const _excluded6 = [
 	"className",
@@ -3420,7 +3678,7 @@ function useRequiredFormContext(componentName) {
 }
 /** Renders the form root component. */
 function FormRoot$1(_ref) {
-	let { className, store } = _ref, props = _objectWithoutProperties(_ref, _excluded$2);
+	let { className, store } = _ref, props = _objectWithoutProperties(_ref, _excluded$4);
 	const form = /* @__PURE__ */ jsx(FormRoot, _objectSpread2({ className: cn("gap-section flex flex-col", className) }, props));
 	if (store) return /* @__PURE__ */ jsx(FormProvider, {
 		store,
@@ -3432,7 +3690,7 @@ function FormRoot$1(_ref) {
 }
 /** Renders the form input component. */
 function FormInput$1(_ref2) {
-	let { className } = _ref2, props = _objectWithoutProperties(_ref2, _excluded2);
+	let { className } = _ref2, props = _objectWithoutProperties(_ref2, _excluded2$2);
 	return /* @__PURE__ */ jsx(FormInput, _objectSpread2(_objectSpread2({ className: cn(inputClass, className) }, props), {}, {
 		"data-opt-id": "D7Z8F",
 		"data-opt-slug": "form.FormInput"
@@ -3447,7 +3705,7 @@ const resizeStyles = {
 /** Renders the form textarea component. */
 function FormTextarea(_ref3) {
 	var _ref4;
-	let { className, resize = "vertical", rows = 4, name } = _ref3, props = _objectWithoutProperties(_ref3, _excluded3);
+	let { className, resize = "vertical", rows = 4, name } = _ref3, props = _objectWithoutProperties(_ref3, _excluded3$2);
 	const form = useRequiredFormContext("FormTextarea");
 	const value = (_ref4 = useFieldValue(form, name)) !== null && _ref4 !== void 0 ? _ref4 : "";
 	const error = form === null || form === void 0 ? void 0 : form.getError(name);
@@ -3493,7 +3751,7 @@ function FormSelect({ name, children, className, placeholder, minWidth = 140, "a
 }
 /** Renders the form select popover component. */
 function FormSelectPopover(_ref6) {
-	let { className } = _ref6, props = _objectWithoutProperties(_ref6, _excluded4);
+	let { className } = _ref6, props = _objectWithoutProperties(_ref6, _excluded4$1);
 	return /* @__PURE__ */ jsx(SelectPopover$1, _objectSpread2(_objectSpread2({ className: cn(OPT_SURFACE_POPOVER, OPT_ANIMATE_ENTER_EXIT, "z-[120]", className) }, props), {}, {
 		"data-opt-id": "CQSPJ",
 		"data-opt-slug": "form.FormSelectPopover"
@@ -3829,8 +4087,47 @@ function formatOptNumber(value) {
 	return new Intl.NumberFormat(OPT_UI_DEFAULT_LOCALE).format(value);
 }
 //#endregion
+//#region src/core/dropdown-menu.tsx
+const _excluded$3 = ["className"];
+const _excluded2$1 = ["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$3);
+	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$1);
+	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/checkbox.tsx
-const _excluded$1 = [
+const _excluded$2 = [
 	"label",
 	"required",
 	"error",
@@ -3895,7 +4192,7 @@ function IndeterminateIcon({ className }) {
 }
 const Checkbox = forwardRef((_ref, ref) => {
 	var _groupContext$size, _groupContext$disable, _useInputId;
-	let { label, required, error, hint, description, checked: checkedProp, defaultChecked, onChange, size: sizeProp = "md", disabled: disabledProp, className, id, value, indeterminate } = _ref, props = _objectWithoutProperties(_ref, _excluded$1);
+	let { label, required, error, hint, description, checked: checkedProp, defaultChecked, onChange, size: sizeProp = "md", disabled: disabledProp, className, id, value, indeterminate } = _ref, props = _objectWithoutProperties(_ref, _excluded$2);
 	const groupContext = useContext(CheckboxGroupContext);
 	const size = (_groupContext$size = groupContext === null || groupContext === void 0 ? void 0 : groupContext.size) !== null && _groupContext$size !== void 0 ? _groupContext$size : sizeProp;
 	const disabled = (_groupContext$disable = groupContext === null || groupContext === void 0 ? void 0 : groupContext.disabled) !== null && _groupContext$disable !== void 0 ? _groupContext$disable : disabledProp;
@@ -4007,6 +4304,73 @@ function CheckboxGroup({ children, value: valueProp, defaultValue = EMPTY_STRING
 	});
 }
 //#endregion
+//#region src/core/resizable.tsx
+const _excluded$1 = [
+	"direction",
+	"children",
+	"className",
+	"id",
+	"autoSaveId"
+];
+const _excluded2 = [
+	"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);
+	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/pagination.tsx
 const _excluded = [
 	"totalItems",
@@ -4579,4 +4943,4 @@ function TextTruncate({ text, truncation = "startEnd", ellipsis = "…", width,
 	});
 }
 //#endregion
-export { PopoverClose$1 as $, OPT_TEXT_LABEL as $n, ToolbarButton$1 as $t, FormRadio$1 as A, OPT_BADGE_RED as An, DialogPanel$1 as At, FormSubmit$1 as B, OPT_FOCUS as Bn, TabsRoot$1 as Bt, FormGroupLabel$1 as C, getDescribedBy as Cn, DialogBody as Ct, FormNumberInput as D, OPT_BADGE_BLUE as Dn, DialogFooter as Dt, FormLabel$1 as E, OPT_ANIMATE_ENTER_EXIT as En, DialogDismiss$1 as Et, FormSelect as F, OPT_DIVIDER as Fn, SelectRoot$1 as Ft, useFormContext as G, OPT_ITEM_BASE as Gn, CompositeItem as Gt, FormTagInput as H, OPT_HOVER_ITEM as Hn, DisclosureRoot$1 as Ht, FormSelectItem as I, OPT_DOT_GRAY as In, SelectTrigger$1 as It, DateRangePicker as J, OPT_SURFACE_RAISED as Jn, CompositeZone as Jt, useFormStore as K, OPT_SURFACE as Kn, CompositeProvider as Kt, FormSelectPopover as L, OPT_DOT_GREEN as Ln, Tab$1 as Lt, FormRemove$1 as M, OPT_BORDER as Mn, SelectItem$1 as Mt, FormReset$1 as N, OPT_DISCLOSURE_CONTENT as Nn, SelectLabel$1 as Nt, FormProvider$1 as O, OPT_BADGE_GREEN as On, DialogHeader as Ot, FormRoot$1 as P, OPT_DISCLOSURE_TRIGGER as Pn, SelectPopover$1 as Pt, ColorPicker as Q, OPT_TEXTAREA_SIZE as Qn, useInputId as Qt, FormSlider as R, OPT_DOT_RED as Rn, TabList$1 as Rt, FormGroup$1 as S, RequiredMark as Sn, AlertDialogPanel$1 as St, FormInput$1 as T, OPT_ANIMATE_DRAWER as Tn, DialogDisclosure$1 as Tt, FormTextarea as U, OPT_INPUT as Un, DisclosureTrigger$1 as Ut, FormSwitch$1 as V, OPT_FOCUS_VISIBLE as Vn, DisclosureContent$1 as Vt, useFieldValue as W, OPT_INPUT_ERROR as Wn, Composite as Wt, IconPicker as X, OPT_TD as Xn, StarRating as Xt, TagInput as Y, OPT_TABLE_ROW_ACTIVE as Yn, Meter$1 as Yt, getIconRegistryEntry as Z, OPT_TD_MUTED as Zn, Input as Zt, FormControl$1 as _, SkeletonCard as _n, ComboboxGroupLabel$1 as _t, FieldTokenLegend as a, TooltipProvider$1 as an, _objectWithoutProperties as ar, MenuButtonArrow$1 as at, FormError$1 as b, useControlledState as bn, ComboboxPopover$1 as bt, Checkbox as c, Badge as cn, MenuItemRadio$1 as ct, formatOptDateTime as d, koBreadcrumbLabels as dn, MenuSeparator$1 as dt, ToolbarContainer$1 as en, OPT_TEXT_PRIMARY as er, PopoverContent$1 as et, formatOptNumber as f, koComboboxLabels as fn, MenuTrigger$1 as ft, FormColorPicker as g, SkeletonAvatar as gn, ComboboxGroup$1 as gt, FormCheckbox$1 as h, Skeleton as hn, ComboboxEmpty as ht, FieldToken as i, TooltipAnchor$1 as in, _objectSpread2 as ir, NumberInput as it, FormRadioGroup$1 as j, OPT_BADGE_YELLOW as jn, DialogRoot$1 as jt, FormPush$1 as k, OPT_BADGE_NEUTRAL as kn, DialogHeading$1 as kt, CheckboxGroup as l, EmptyState as ln, MenuPopover$1 as lt, formatOptTime as m, StatCard as mn, MenubarRoot$1 as mt, Highlight as n, ToolbarSeparator$1 as nn, OPT_TEXT_TERTIARY as nr, PopoverTrigger$1 as nt, resolveFieldType as o, Alert as on, Kbd as or, MenuItem$1 as ot, formatOptShortDate as p, koStarRatingLabels as pn, MenubarContainer$1 as pt, DEFAULT_PRESETS as q, OPT_SURFACE_POPOVER as qn, CompositeRow as qt, FIELD_TYPE_TOKENS as r, Tooltip$1 as rn, OPT_TH as rr, Slider as rt, Pagination as s, Spinner as sn, cn as sr, MenuItemCheckbox$1 as st, TextTruncate as t, ToolbarRoot$1 as tn, OPT_TEXT_SECONDARY as tr, PopoverRoot$1 as tt, OPT_UI_DEFAULT_LOCALE as u, Button as un, MenuRoot$1 as ut, FormDateRangePicker as v, SkeletonTable as vn, ComboboxInput$1 as vt, FormIconPicker as w, OPT_ACTIVE_ITEM as wn, DialogDescription$1 as wt, FormField$1 as x, FieldMessages as xn, ComboboxRoot$1 as xt, FormDescription$1 as y, SkeletonText as yn, ComboboxItem$1 as yt, FormStarRating as z, OPT_DOT_YELLOW as zn, TabPanel$1 as zt };
+export { useFormContext as $, OPT_HOVER_ITEM as $n, CompositeItem as $t, FormGroup$1 as A, SkeletonText as An, AlertDialogPanel$1 as At, FormRemove$1 as B, OPT_BADGE_NEUTRAL as Bn, SelectItem$1 as Bt, FormCheckbox$1 as C, koComboboxLabels as Cn, ComboboxEmpty as Ct, FormDescription$1 as D, SkeletonAvatar as Dn, ComboboxItem$1 as Dt, FormDateRangePicker as E, Skeleton as En, ComboboxInput$1 as Et, FormNumberInput as F, OPT_ACTIVE_ITEM as Fn, DialogFooter as Ft, FormSelectPopover as G, OPT_DISCLOSURE_TRIGGER as Gn, Tab$1 as Gt, FormRoot$1 as H, OPT_BADGE_YELLOW as Hn, SelectPopover$1 as Ht, FormProvider$1 as I, OPT_ANIMATE_DRAWER as In, DialogHeader as It, FormSubmit$1 as J, OPT_DOT_GREEN as Jn, TabsRoot$1 as Jt, FormSlider as K, OPT_DIVIDER as Kn, TabList$1 as Kt, FormPush$1 as L, OPT_ANIMATE_ENTER_EXIT as Ln, DialogHeading$1 as Lt, FormIconPicker as M, FieldMessages as Mn, DialogDescription$1 as Mt, FormInput$1 as N, RequiredMark as Nn, DialogDisclosure$1 as Nt, FormError$1 as O, SkeletonCard as On, ComboboxPopover$1 as Ot, FormLabel$1 as P, getDescribedBy as Pn, DialogDismiss$1 as Pt, useFieldValue as Q, OPT_FOCUS_VISIBLE as Qn, Composite as Qt, FormRadio$1 as R, OPT_BADGE_BLUE as Rn, DialogPanel$1 as Rt, formatOptTime as S, koBreadcrumbLabels as Sn, MenubarRoot$1 as St, FormControl$1 as T, StatCard as Tn, ComboboxGroupLabel$1 as Tt, FormSelect as U, OPT_BORDER as Un, SelectRoot$1 as Ut, FormReset$1 as V, OPT_BADGE_RED as Vn, SelectLabel$1 as Vt, FormSelectItem as W, OPT_DISCLOSURE_CONTENT as Wn, SelectTrigger$1 as Wt, FormTagInput as X, OPT_DOT_YELLOW as Xn, DisclosureRoot$1 as Xt, FormSwitch$1 as Y, OPT_DOT_RED as Yn, DisclosureContent$1 as Yt, FormTextarea as Z, OPT_FOCUS as Zn, DisclosureTrigger$1 as Zt, DropdownTrigger as _, Spinner as _n, cn as _r, MenuPopover$1 as _t, FieldTokenLegend as a, StarRating as an, OPT_SURFACE_RAISED as ar, getIconRegistryEntry as at, formatOptNumber as b, EmptyState as bn, MenuTrigger$1 as bt, ResizableHandle as c, useInputId as cn, OPT_TD_MUTED as cr, PopoverContent$1 as ct, Checkbox as d, ToolbarRoot$1 as dn, OPT_TEXT_SECONDARY as dr, Slider as dt, CompositeProvider as en, OPT_INPUT as er, useFormStore as et, CheckboxGroup as f, ToolbarSeparator$1 as fn, OPT_TEXT_TERTIARY as fr, NumberInput as ft, DropdownSeparator as g, Alert as gn, Kbd as gr, MenuItemRadio$1 as gt, DropdownMenu as h, TooltipProvider as hn, _objectWithoutProperties as hr, MenuItemCheckbox$1 as ht, FieldToken as i, Textarea as in, OPT_SURFACE_POPOVER as ir, IconPicker as it, FormGroupLabel$1 as j, useControlledState as jn, DialogBody as jt, FormField$1 as k, SkeletonTable as kn, ComboboxRoot$1 as kt, ResizablePanel as l, ToolbarButton$1 as ln, OPT_TEXT_LABEL as lr, PopoverRoot$1 as lt, DropdownItem as m, TooltipAnchor$1 as mn, _objectSpread2 as mr, MenuItem$1 as mt, Highlight as n, CompositeZone as nn, OPT_ITEM_BASE as nr, DateRangePicker as nt, resolveFieldType as o, Switch as on, OPT_TABLE_ROW_ACTIVE as or, ColorPicker as ot, DropdownContent as p, Tooltip$1 as pn, OPT_TH as pr, MenuButtonArrow$1 as pt, FormStarRating as q, OPT_DOT_GRAY as qn, TabPanel$1 as qt, FIELD_TYPE_TOKENS as r, Meter$1 as rn, OPT_SURFACE as rr, TagInput as rt, Pagination as s, Input as sn, OPT_TD as sr, PopoverClose$1 as st, TextTruncate as t, CompositeRow as tn, OPT_INPUT_ERROR as tr, DEFAULT_PRESETS as tt, ResizablePanelGroup as u, ToolbarContainer$1 as un, OPT_TEXT_PRIMARY as ur, PopoverTrigger$1 as ut, OPT_UI_DEFAULT_LOCALE as v, Badge as vn, MenuRoot$1 as vt, FormColorPicker as w, koStarRatingLabels as wn, ComboboxGroup$1 as wt, formatOptShortDate as x, Button as xn, MenubarContainer$1 as xt, formatOptDateTime as y, DescriptionList as yn, MenuSeparator$1 as yt, FormRadioGroup$1 as z, OPT_BADGE_GREEN as zn, DialogRoot$1 as zt };