@diwauhris/ui 1.7.4 → 1.7.7

package/lib/index.cjs

@@ -1,47 +1,47 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 //#region \0rolldown/runtime.js
 var __create = Object.create;
-var __defProp = Object.defineProperty;
+var __defProp$2 = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __exportAll = (all, no_symbols) => {
 	let target = {};
-	for (var name in all) __defProp(target, name, {
+	for (var name in all) __defProp$2(target, name, {
 		get: all[name],
 		enumerable: true
 	});
-	if (!no_symbols) __defProp(target, Symbol.toStringTag, { value: "Module" });
+	if (!no_symbols) __defProp$2(target, Symbol.toStringTag, { value: "Module" });
 	return target;
 };
 var __copyProps = (to, from, except, desc) => {
 	if (from && typeof from === "object" || typeof from === "function") for (var keys = __getOwnPropNames(from), i = 0, n = keys.length, key; i < n; i++) {
 		key = keys[i];
-		if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+		if (!__hasOwnProp.call(to, key) && key !== except) __defProp$2(to, key, {
 			get: ((k) => from[k]).bind(null, key),
 			enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
 		});
 	}
 	return to;
 };
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule || !__hasOwnProp.call(mod, "default") ? __defProp(target, "default", {
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule || !__hasOwnProp.call(mod, "default") ? __defProp$2(target, "default", {
 	value: mod,
 	enumerable: true
 }) : target, mod));
 //#endregion
-let react_jsx_runtime = require("react/jsx-runtime");
-let react = require("react");
-react = __toESM(react, 1);
 let clsx = require("clsx");
 let tailwind_merge = require("tailwind-merge");
+let react = require("react");
+react = __toESM(react, 1);
+let react_jsx_runtime = require("react/jsx-runtime");
+let react_dom = require("react-dom");
 let lucide_react = require("lucide-react");
 let react_calendar = require("react-calendar");
 react_calendar = __toESM(react_calendar, 1);
 let date_fns = require("date-fns");
 let _radix_ui_react_dialog = require("@radix-ui/react-dialog");
 _radix_ui_react_dialog = __toESM(_radix_ui_react_dialog, 1);
-let react_dom = require("react-dom");
 let _radix_ui_react_popover = require("@radix-ui/react-popover");
 _radix_ui_react_popover = __toESM(_radix_ui_react_popover, 1);
 let _radix_ui_react_tooltip = require("@radix-ui/react-tooltip");
@@ -50,6 +50,158 @@ let react_router_dom = require("react-router-dom");
 let d3 = require("d3");
 d3 = __toESM(d3, 1);
 let sonner = require("sonner");
+//#region src/lib/utils.ts
+function cn(...inputs) {
+	return (0, tailwind_merge.twMerge)((0, clsx.clsx)(inputs));
+}
+//#endregion
+//#region node_modules/@radix-ui/react-compose-refs/dist/index.mjs
+var __defProp$1 = Object.defineProperty;
+var __name$1 = (target, value) => __defProp$1(target, "name", {
+	value,
+	configurable: true
+});
+function setRef(ref, value) {
+	if (typeof ref === "function") return ref(value);
+	else if (ref !== null && ref !== void 0) ref.current = value;
+}
+__name$1(setRef, "setRef");
+function composeRefs$1(...refs) {
+	return (node) => {
+		let hasCleanup = false;
+		const cleanups = refs.map((ref) => {
+			const cleanup = setRef(ref, node);
+			if (!hasCleanup && typeof cleanup == "function") hasCleanup = true;
+			return cleanup;
+		});
+		if (hasCleanup) return () => {
+			for (let i = 0; i < cleanups.length; i++) {
+				const cleanup = cleanups[i];
+				if (typeof cleanup == "function") cleanup();
+				else setRef(refs[i], null);
+			}
+		};
+	};
+}
+__name$1(composeRefs$1, "composeRefs");
+function useComposedRefs(...refs) {
+	return react.useCallback(composeRefs$1(...refs), refs);
+}
+__name$1(useComposedRefs, "useComposedRefs");
+//#endregion
+//#region node_modules/@radix-ui/react-slot/dist/index.mjs
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", {
+	value,
+	configurable: true
+});
+// @__NO_SIDE_EFFECTS__
+function createSlot(ownerName) {
+	const Slot2 = react.forwardRef((props, forwardedRef) => {
+		let { children, ...slotProps } = props;
+		let slottableElement = null;
+		let hasSlottable = false;
+		const newChildren = [];
+		if (isLazyComponent(children) && typeof use$1 === "function") children = use$1(children._payload);
+		react.Children.forEach(children, (maybeSlottable) => {
+			if (isSlottable(maybeSlottable)) {
+				hasSlottable = true;
+				const slottable = maybeSlottable;
+				let child = "child" in slottable.props ? slottable.props.child : slottable.props.children;
+				if (isLazyComponent(child) && typeof use$1 === "function") child = use$1(child._payload);
+				slottableElement = getSlottableElementFromSlottable(slottable, child);
+				newChildren.push(slottableElement?.props?.children);
+			} else newChildren.push(maybeSlottable);
+		});
+		if (slottableElement) slottableElement = react.cloneElement(slottableElement, void 0, newChildren);
+		else if (!hasSlottable && react.Children.count(children) === 1 && react.isValidElement(children)) slottableElement = children;
+		const slottableElementRef = slottableElement ? getElementRef(slottableElement) : void 0;
+		const composedRef = useComposedRefs(forwardedRef, slottableElementRef);
+		if (!slottableElement) {
+			if (children || children === 0) throw new Error(hasSlottable ? createSlottableError(ownerName) : createSlotError(ownerName));
+			return children;
+		}
+		const mergedProps = mergeProps(slotProps, slottableElement.props ?? {});
+		if (slottableElement.type !== react.Fragment) mergedProps.ref = forwardedRef ? composedRef : slottableElementRef;
+		return react.cloneElement(slottableElement, mergedProps);
+	});
+	Slot2.displayName = `${ownerName}.Slot`;
+	return Slot2;
+}
+__name(createSlot, "createSlot");
+var Slot = /* @__PURE__ */ createSlot("Slot");
+var SLOTTABLE_IDENTIFIER = Symbol.for("radix.slottable");
+// @__NO_SIDE_EFFECTS__
+function createSlottable(ownerName) {
+	const Slottable2 = /* @__PURE__ */ __name((props) => "child" in props ? props.children(props.child) : props.children, "Slottable");
+	Slottable2.displayName = `${ownerName}.Slottable`;
+	Slottable2.__radixId = SLOTTABLE_IDENTIFIER;
+	return Slottable2;
+}
+__name(createSlottable, "createSlottable");
+var getSlottableElementFromSlottable = /* @__PURE__ */ __name((slottable, child) => {
+	if ("child" in slottable.props) {
+		const child2 = slottable.props.child;
+		if (!react.isValidElement(child2)) return null;
+		return react.cloneElement(child2, void 0, slottable.props.children(child2.props.children));
+	}
+	return react.isValidElement(child) ? child : null;
+}, "getSlottableElementFromSlottable");
+function mergeProps(slotProps, childProps) {
+	const overrideProps = { ...childProps };
+	for (const propName in childProps) {
+		const slotPropValue = slotProps[propName];
+		const childPropValue = childProps[propName];
+		if (/^on[A-Z]/.test(propName)) {
+			if (slotPropValue && childPropValue) overrideProps[propName] = (...args) => {
+				const result = childPropValue(...args);
+				slotPropValue(...args);
+				return result;
+			};
+			else if (slotPropValue) overrideProps[propName] = slotPropValue;
+		} else if (propName === "style") overrideProps[propName] = {
+			...slotPropValue,
+			...childPropValue
+		};
+		else if (propName === "className") overrideProps[propName] = [slotPropValue, childPropValue].filter(Boolean).join(" ");
+	}
+	return {
+		...slotProps,
+		...overrideProps
+	};
+}
+__name(mergeProps, "mergeProps");
+function getElementRef(element) {
+	let getter = Object.getOwnPropertyDescriptor(element.props, "ref")?.get;
+	let mayWarn = getter && "isReactWarning" in getter && getter.isReactWarning;
+	if (mayWarn) return element.ref;
+	getter = Object.getOwnPropertyDescriptor(element, "ref")?.get;
+	mayWarn = getter && "isReactWarning" in getter && getter.isReactWarning;
+	if (mayWarn) return element.props.ref;
+	return element.props.ref || element.ref;
+}
+__name(getElementRef, "getElementRef");
+function isSlottable(child) {
+	return react.isValidElement(child) && typeof child.type === "function" && "__radixId" in child.type && child.type.__radixId === SLOTTABLE_IDENTIFIER;
+}
+__name(isSlottable, "isSlottable");
+var REACT_LAZY_TYPE = Symbol.for("react.lazy");
+function isLazyComponent(element) {
+	return element != null && typeof element === "object" && "$$typeof" in element && element.$$typeof === REACT_LAZY_TYPE && "_payload" in element && isPromiseLike(element._payload);
+}
+__name(isLazyComponent, "isLazyComponent");
+function isPromiseLike(value) {
+	return typeof value === "object" && value !== null && "then" in value;
+}
+__name(isPromiseLike, "isPromiseLike");
+var createSlotError = /* @__PURE__ */ __name((ownerName) => {
+	return `${ownerName} failed to slot onto its children. Expected a single React element child or \`Slottable\`.`;
+}, "createSlotError");
+var createSlottableError = /* @__PURE__ */ __name((ownerName) => {
+	return `${ownerName} failed to slot onto its \`Slottable\`. Expected \`Slottable\` to receive a single React element child.`;
+}, "createSlottableError");
+var use$1 = react[" use ".trim().toString()];
+//#endregion
 //#region src/ui-library/gallery/button/Button.tsx
 var VARIANT_STYLES$1 = {
 	primary: "font-bold bg-brand-blue text-white shadow-lg shadow-brand-blue/25 hover:bg-brand-navy hover:shadow-xl hover:shadow-brand-blue/30 active:bg-brand-navy focus-visible:ring-brand-blue/30 disabled:bg-slate-200 disabled:text-slate-400 disabled:shadow-none",
@@ -64,23 +216,17 @@ var SIZE_STYLES$1 = {
 	lg: "h-11 gap-2.5 rounded-md px-6 text-base"
 };
 var BASE$1 = "inline-flex items-center justify-center transition-all duration-150 ease-out active:scale-[.98] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 disabled:cursor-not-allowed disabled:active:scale-100 select-none";
-function Button({ variant = "primary", size = "md", loading = false, leftIcon, rightIcon, fullWidth = false, children, className = "", disabled, ...props }) {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
-		type: "button",
-		disabled: disabled || loading,
-		className: [
-			BASE$1,
-			VARIANT_STYLES$1[variant],
-			SIZE_STYLES$1[size],
-			fullWidth ? "w-full" : "",
-			className
-		].filter(Boolean).join(" "),
+function Button({ variant = "primary", size = "md", loading = false, leftIcon, rightIcon, fullWidth = false, children, className = "", disabled, asChild = false, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(asChild ? Slot : "button", {
+		type: asChild ? void 0 : "button",
+		disabled: asChild ? void 0 : disabled || loading,
+		className: cn(BASE$1, VARIANT_STYLES$1[variant], SIZE_STYLES$1[size], fullWidth && "w-full", className),
 		...props,
-		children: [
+		children: asChild ? children : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
 			leftIcon && !loading && leftIcon,
 			children,
 			rightIcon && !loading && rightIcon
-		]
+		] })
 	});
 }
 //#endregion
@@ -91,14 +237,10 @@ var VARIANT_STYLES = {
 	edit: "hover:bg-blue-50    hover:text-brand-blue focus-visible:ring-brand-blue/20",
 	danger: "hover:bg-rose-50    hover:text-rose-600   focus-visible:ring-rose-100"
 };
-function IconButton({ icon, variant = "default", className = "", ...props }) {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-		type: "button",
-		className: [
-			BASE,
-			VARIANT_STYLES[variant],
-			className
-		].filter(Boolean).join(" "),
+function IconButton({ icon, variant = "default", className = "", asChild = false, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(asChild ? Slot : "button", {
+		type: asChild ? void 0 : "button",
+		className: cn(BASE, VARIANT_STYLES[variant], className),
 		...props,
 		children: icon
 	});
@@ -128,18 +270,28 @@ var SIZE_STYLES = {
 };
 function Badge({ tone = "neutral", size = "md", icon, children, className = "" }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-		className: [
-			"inline-flex items-center border font-semibold uppercase tracking-wide",
-			STATUS_TONES.has(tone) ? "rounded" : "rounded-full",
-			TONE_STYLES$1[tone],
-			SIZE_STYLES[size],
-			className
-		].filter(Boolean).join(" "),
+		className: cn("inline-flex items-center border font-semibold uppercase tracking-wide", STATUS_TONES.has(tone) ? "rounded" : "rounded-full", TONE_STYLES$1[tone], SIZE_STYLES[size], className),
 		children: [icon, children]
 	});
 }
 //#endregion
 //#region src/ui-library/gallery/spinner/Spinner.tsx
+/**
+* Spinner — Design System Component
+*
+* An indeterminate loading indicator. Purely presentational.
+*
+* Sizes: sm | md | lg
+*
+* Usage:
+*   - Inline: inside a button or alongside text
+*   - Standalone: centered in a container while content loads
+*
+* Accessibility:
+*   - Renders a <span role="status"> that announces label to screen readers
+*   - label is required and should describe what is loading
+*   - Respects prefers-reduced-motion: animation is suppressed, label stays
+*/
 var SIZE_TRACK = {
 	sm: "h-4 w-4 border-2",
 	md: "h-6 w-6 border-2",
@@ -153,7 +305,7 @@ var SIZE_TEXT = {
 function Spinner({ size = "md", label = "Loading…", labelHidden = false, className = "" }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
 		role: "status",
-		className: `inline-flex items-center gap-2 ${className}`,
+		className: cn("inline-flex items-center gap-2", className),
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 			"aria-hidden": "true",
 			className: ["inline-block animate-spin rounded-full border-slate-200 border-t-brand-blue motion-reduce:animate-none", SIZE_TRACK[size]].join(" ")
@@ -165,6 +317,25 @@ function Spinner({ size = "md", label = "Loading…", labelHidden = false, class
 }
 //#endregion
 //#region src/ui-library/gallery/divider/Divider.tsx
+/**
+* Divider — Design System Component
+*
+* A thin visual separator between content areas.
+*
+* Decorative usage (default, aria-hidden="true"):
+*   Used purely for visual grouping. Screen readers skip it.
+*   This is the appropriate choice for most cases.
+*
+* Semantic usage (role="separator"):
+*   Use when the separation is meaningful to AT users, e.g. between
+*   logically distinct regions where the boundary matters.
+*   Provide aria-label when context is needed.
+*
+* Orientation:
+*   - horizontal (default): full-width horizontal line, displayed as block.
+*   - vertical: full-height vertical line, displayed inline. The parent
+*     container must give it an explicit height or use flex/grid context.
+*/
 function Divider({ orientation = "horizontal", decorative = true, "aria-label": ariaLabel, className = "" }) {
 	const isHorizontal = orientation === "horizontal";
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
@@ -173,7 +344,7 @@ function Divider({ orientation = "horizontal", decorative = true, "aria-label":
 			"aria-label": ariaLabel,
 			"aria-orientation": orientation
 		},
-		className: [isHorizontal ? "w-full border-t border-slate-200" : "self-stretch border-l border-slate-200", className].filter(Boolean).join(" ")
+		className: cn(isHorizontal ? "w-full border-t border-slate-200" : "self-stretch border-l border-slate-200", className)
 	});
 }
 //#endregion
@@ -237,12 +408,7 @@ function Avatar({ name, src, size = "md", color, className = "" }) {
 	const bg = color ?? deriveColor(name);
 	const initials = getInitials(name);
 	const label = name || "Unknown";
-	const baseClass = [
-		"inline-flex items-center justify-center rounded-full shrink-0",
-		"font-bold text-white select-none overflow-hidden",
-		SIZE_CLASSES[size],
-		className
-	].filter(Boolean).join(" ");
+	const baseClass = cn("inline-flex items-center justify-center rounded-full shrink-0", "font-bold text-white select-none overflow-hidden", SIZE_CLASSES[size], className);
 	if (showImage) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
 		src,
 		alt: label,
@@ -263,7 +429,7 @@ function Section({ title, description, actions, level = 2, children, className =
 	const Tag = `h${level}`;
 	const headingClass = level === 1 ? "text-2xl font-bold text-slate-900" : level === 2 ? "text-lg font-bold text-slate-900" : "text-base font-bold text-slate-800";
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
-		className: `space-y-4 ${className}`,
+		className: cn("space-y-4", className),
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 			className: "flex items-start justify-between gap-4",
 			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
@@ -286,7 +452,7 @@ function Section({ title, description, actions, level = 2, children, className =
 //#region src/ui-library/gallery/page-header/PageHeader.tsx
 function PageHeader({ title, subtitle, icon, actions, className = "" }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		className,
+		className: cn(className),
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 			className: "flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between",
 			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
@@ -315,11 +481,7 @@ function PageHeader({ title, subtitle, icon, actions, className = "" }) {
 //#region src/ui-library/gallery/toolbar/Toolbar.tsx
 function Toolbar({ left, right, className = "" }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: [
-			"w-full flex flex-wrap items-center justify-between gap-4",
-			"bg-white p-2 border border-slate-100 rounded-2xl shadow-sm",
-			className
-		].filter(Boolean).join(" "),
+		className: cn("w-full flex flex-wrap items-center justify-between gap-4", "bg-white p-2 border border-slate-100 rounded-2xl shadow-sm", className),
 		children: [left, right]
 	});
 }
@@ -347,7 +509,7 @@ function useFieldContext() {
 * FieldInput inside this wrapper automatically receive the correct id,
 * aria-required, aria-invalid, and aria-describedby — with no prop threading.
 */
-function Field({ label, required = false, error, children, inputId }) {
+function Field({ label, required = false, error, children, inputId, className = "" }) {
 	const generatedId = (0, react.useId)();
 	const fieldId = inputId ?? generatedId;
 	const errorId = `${fieldId}-error`;
@@ -359,7 +521,7 @@ function Field({ label, required = false, error, children, inputId }) {
 			invalid: !!error
 		},
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-			className: `flex flex-col gap-1.5${error ? " shake" : ""}`,
+			className: cn("flex flex-col gap-1.5", error && "shake", className),
 			children: [
 				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
 					htmlFor: fieldId,
@@ -386,11 +548,6 @@ function Field({ label, required = false, error, children, inputId }) {
 	});
 }
 //#endregion
-//#region src/lib/utils.ts
-function cn(...inputs) {
-	return (0, tailwind_merge.twMerge)((0, clsx.clsx)(inputs));
-}
-//#endregion
 //#region src/ui-library/gallery/field-input/FieldInput.tsx
 /**
 * FieldInput — Gallery-native context-aware <input> wrapper.
@@ -398,13 +555,14 @@ function cn(...inputs) {
 * Updated to import FieldContext from gallery-local field directory
 * and to carry full DIWA visual styling.
 */
-function FieldInput({ id, "aria-required": ariaRequired, "aria-invalid": ariaInvalid, "aria-describedby": ariaDescribedBy, className = "", disabled, ...rest }) {
+function FieldInput({ id, "aria-required": ariaRequired, "aria-invalid": ariaInvalid, "aria-describedby": ariaDescribedBy, className = "", disabled, ref, ...rest }) {
 	const ctx = useFieldContext();
 	const resolvedId = id ?? ctx?.inputId;
 	const resolvedRequired = ariaRequired ?? (ctx?.required ? "true" : void 0);
 	const resolvedInvalid = ariaInvalid ?? (ctx?.invalid ? "true" : void 0);
 	const resolvedDescribedBy = ariaDescribedBy ?? (ctx?.invalid && ctx?.errorId ? ctx.errorId : void 0);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+		ref,
 		id: resolvedId,
 		"aria-required": resolvedRequired,
 		"aria-invalid": resolvedInvalid,
@@ -439,22 +597,18 @@ var FIELD_HELPER_COLOR = {
 };
 //#endregion
 //#region src/ui-library/gallery/input/Input.tsx
-function Input({ status = "default", helper, prefix, suffix, disabled, className = "", ...props }) {
+function Input({ status = "default", helper, prefix, suffix, disabled, className = "", ref, ...props }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		className: "w-full",
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-			className: [
-				"flex w-full items-center rounded-md border bg-white transition",
-				FIELD_STATUS_RING_WITHIN[status],
-				disabled ? "cursor-not-allowed bg-slate-50 opacity-60" : "",
-				className
-			].filter(Boolean).join(" "),
+			className: cn("flex w-full items-center rounded-md border bg-white transition", FIELD_STATUS_RING_WITHIN[status], disabled && "cursor-not-allowed bg-slate-50 opacity-60", className),
 			children: [
 				prefix && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 					className: "flex shrink-0 items-center pl-3.5 text-slate-400",
 					children: prefix
 				}),
 				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+					ref,
 					disabled,
 					className: [
 						"w-full bg-transparent py-2.5 text-sm font-medium text-slate-900 outline-none placeholder:text-slate-400",
@@ -488,7 +642,7 @@ var RESIZE_CLASS = {
 	vertical: "resize-y",
 	both: "resize"
 };
-function Textarea({ status = "default", helper, maxLength, resize = "vertical", disabled, value, defaultValue, onChange, className = "", ...props }) {
+function Textarea({ status = "default", helper, maxLength, resize = "vertical", disabled, value, defaultValue, onChange, className = "", ref, ...props }) {
 	const isControlled = value !== void 0;
 	const [uncontrolledLength, setUncontrolledLength] = (0, react.useState)(typeof defaultValue === "string" ? defaultValue.length : 0);
 	const currentLength = isControlled ? typeof value === "string" ? value.length : 0 : uncontrolledLength;
@@ -499,18 +653,13 @@ function Textarea({ status = "default", helper, maxLength, resize = "vertical",
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		className: "w-full",
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("textarea", {
+			ref,
 			maxLength,
 			disabled,
 			value,
 			defaultValue,
 			onChange: handleChange,
-			className: [
-				"w-full rounded-xl border bg-white px-4 py-3 text-sm font-medium text-slate-900 outline-none transition placeholder:text-slate-400",
-				FIELD_STATUS_RING_DIRECT[status],
-				RESIZE_CLASS[resize],
-				disabled ? "cursor-not-allowed bg-slate-50 opacity-60" : "",
-				className
-			].filter(Boolean).join(" "),
+			className: cn("w-full rounded-xl border bg-white px-4 py-3 text-sm font-medium text-slate-900 outline-none transition placeholder:text-slate-400", FIELD_STATUS_RING_DIRECT[status], RESIZE_CLASS[resize], disabled && "cursor-not-allowed bg-slate-50 opacity-60", className),
 			...props
 		}), (helper || maxLength !== void 0) && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 			className: "mt-1.5 flex items-start justify-between gap-2",
@@ -544,23 +693,227 @@ function Textarea({ status = "default", helper, maxLength, resize = "vertical",
 *   - For searchable/multi-select use cases, use Combobox (Phase 3).
 *
 * The label is NOT included. The consuming feature pairs a <label>.
+*
+* When renderOption is provided, a custom dropdown is rendered instead
+* of the native <select>. Only use this when native option rendering
+* is insufficient (e.g., icons, avatars, multi-line content).
 */
 function isGroup(item) {
 	return "group" in item;
 }
-function Select({ items, placeholder, status = "default", helper, disabled, className = "", ...props }) {
+function CustomDropdown({ items, value, placeholder, status, disabled, renderOption, onChange, id, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, className = "" }) {
+	const [open, setOpen] = (0, react.useState)(false);
+	const [highlightIndex, setHighlightIndex] = (0, react.useState)(-1);
+	const containerRef = (0, react.useRef)(null);
+	const triggerRef = (0, react.useRef)(null);
+	const listboxId = (0, react.useId)();
+	const triggerId = (0, react.useId)();
+	const optionId = (index) => `${listboxId}-opt-${index}`;
+	const [panelStyle, setPanelStyle] = (0, react.useState)({});
+	const flatItems = [];
+	for (const item of items) if (isGroup(item)) {
+		flatItems.push({
+			type: "group",
+			label: item.group
+		});
+		for (const opt of item.options) flatItems.push({
+			type: "option",
+			opt
+		});
+	} else flatItems.push({
+		type: "option",
+		opt: item
+	});
+	const flatOptions = flatItems.filter((fi) => fi.type === "option").map((fi) => fi.opt);
+	const selectedOption = flatOptions.find((o) => String(o.value) === String(value ?? ""));
+	const displayLabel = selectedOption?.label ?? placeholder ?? "";
+	const hasValue = Boolean(selectedOption);
+	(0, react.useEffect)(() => {
+		if (!open) setHighlightIndex(-1);
+	}, [open]);
+	const listRef = (0, react.useRef)(null);
+	(0, react.useEffect)(() => {
+		if (highlightIndex >= 0 && listRef.current) listRef.current.querySelector(`[id="${optionId(highlightIndex)}"]`)?.scrollIntoView({ block: "nearest" });
+	}, [highlightIndex]);
+	(0, react.useEffect)(() => {
+		if (!open) return;
+		const handlePointerDown = (e) => {
+			if (containerRef.current && !containerRef.current.contains(e.target)) setOpen(false);
+		};
+		document.addEventListener("mousedown", handlePointerDown);
+		return () => document.removeEventListener("mousedown", handlePointerDown);
+	}, [open]);
+	(0, react.useEffect)(() => {
+		if (!open || !triggerRef.current) return;
+		const rect = triggerRef.current.getBoundingClientRect();
+		setPanelStyle({
+			position: "fixed",
+			top: rect.bottom + 4,
+			left: rect.left,
+			zIndex: 9999,
+			width: rect.width
+		});
+	}, [open]);
+	const handleSelect = (0, react.useCallback)((opt) => {
+		if (opt.disabled) return;
+		const syntheticEvent = {
+			target: { value: opt.value },
+			currentTarget: { value: opt.value }
+		};
+		onChange?.(syntheticEvent);
+		setOpen(false);
+		triggerRef.current?.focus();
+	}, [onChange]);
+	const handleKeyDown = (e) => {
+		const nextEnabled = (from, dir) => {
+			let idx = from;
+			while (idx >= 0 && idx < flatOptions.length) {
+				if (!flatOptions[idx]?.disabled) return idx;
+				idx += dir;
+			}
+			return -1;
+		};
+		switch (e.key) {
+			case "ArrowDown":
+				e.preventDefault();
+				if (!open) {
+					setOpen(true);
+					const first = nextEnabled(0, 1);
+					setHighlightIndex(first);
+				} else setHighlightIndex((prev) => {
+					const next = nextEnabled(prev + 1, 1);
+					return next === -1 ? prev : next;
+				});
+				break;
+			case "ArrowUp":
+				e.preventDefault();
+				if (open) setHighlightIndex((prev) => {
+					const next = nextEnabled(prev - 1, -1);
+					return next === -1 ? prev : next;
+				});
+				break;
+			case "Home":
+				e.preventDefault();
+				if (open) {
+					const first = nextEnabled(0, 1);
+					setHighlightIndex(first);
+				}
+				break;
+			case "End":
+				e.preventDefault();
+				if (open) {
+					const last = nextEnabled(flatOptions.length - 1, -1);
+					setHighlightIndex(last);
+				}
+				break;
+			case "Enter":
+			case " ":
+				e.preventDefault();
+				if (!open) setOpen(true);
+				else if (highlightIndex >= 0 && flatOptions[highlightIndex] && !flatOptions[highlightIndex].disabled) handleSelect(flatOptions[highlightIndex]);
+				else setOpen(false);
+				break;
+			case "Escape":
+				e.preventDefault();
+				setOpen(false);
+		}
+	};
+	const effectiveTriggerId = id ?? triggerId;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "relative",
+		ref: containerRef,
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+				ref: triggerRef,
+				id: effectiveTriggerId,
+				type: "button",
+				role: "combobox",
+				"aria-haspopup": "listbox",
+				"aria-expanded": open,
+				"aria-controls": listboxId,
+				"aria-activedescendant": open && highlightIndex >= 0 ? optionId(highlightIndex) : void 0,
+				"aria-label": ariaLabel,
+				"aria-labelledby": ariaLabelledBy,
+				disabled,
+				onClick: () => setOpen((v) => !v),
+				onKeyDown: handleKeyDown,
+				className: cn("w-full appearance-none rounded-md border bg-white py-2.5 pl-4 pr-10 text-left text-sm font-medium outline-none transition", FIELD_STATUS_RING_DIRECT[status], hasValue ? "text-slate-900" : "text-slate-400", disabled ? "cursor-not-allowed bg-slate-50 opacity-60" : "cursor-pointer", className),
+				children: displayLabel
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: "pointer-events-none absolute right-3.5 top-1/2 -translate-y-1/2 text-slate-400",
+				"aria-hidden": "true",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ChevronDown, {
+					size: 14,
+					className: open ? "rotate-180 transition-transform" : "transition-transform"
+				})
+			}),
+			open && !disabled && (0, react_dom.createPortal)(/* @__PURE__ */ (0, react_jsx_runtime.jsx)("ul", {
+				ref: listRef,
+				id: listboxId,
+				role: "listbox",
+				"aria-labelledby": effectiveTriggerId,
+				style: panelStyle,
+				className: "overflow-y-auto max-h-60 rounded-xl border border-slate-200 bg-white py-1 shadow-xl",
+				children: flatItems.map((fi, i) => {
+					if (fi.type === "group") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("li", {
+						role: "presentation",
+						className: "px-3 py-1.5 text-[10px] font-bold uppercase tracking-widest text-slate-400",
+						children: fi.label
+					}, `group-${fi.label}-${i}`);
+					const opt = fi.opt;
+					const optIndex = flatOptions.indexOf(opt);
+					const isSelected = String(opt.value) === String(value ?? "");
+					const isHighlighted = optIndex === highlightIndex;
+					return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("li", {
+						id: optionId(optIndex),
+						role: "option",
+						"aria-selected": isSelected,
+						"aria-disabled": opt.disabled,
+						onClick: () => handleSelect(opt),
+						className: [
+							"cursor-pointer px-3 py-2 text-sm transition-colors",
+							opt.disabled ? "cursor-not-allowed opacity-50" : "",
+							isHighlighted && !opt.disabled ? "bg-blue-50 font-semibold text-brand-blue" : "",
+							isSelected && !isHighlighted ? "bg-blue-50 font-semibold text-brand-blue" : "",
+							!isHighlighted && !isSelected && !opt.disabled ? "hover:bg-slate-50 text-slate-700" : "",
+							opt.disabled ? "text-slate-400" : ""
+						].filter(Boolean).join(" "),
+						children: renderOption(opt)
+					}, opt.value);
+				})
+			}), document.body)
+		]
+	});
+}
+function Select({ items, placeholder, status = "default", helper, disabled, className = "", renderOption, ref, ...props }) {
+	if (renderOption) return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "w-full",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(CustomDropdown, {
+			items,
+			value: props.value,
+			placeholder,
+			status,
+			disabled,
+			renderOption,
+			onChange: props.onChange,
+			id: props.id,
+			"aria-label": props["aria-label"],
+			"aria-labelledby": props["aria-labelledby"],
+			className
+		}), helper && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+			className: `mt-1.5 text-xs font-medium ${FIELD_HELPER_COLOR[status]}`,
+			children: helper
+		})]
+	});
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		className: "w-full",
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 			className: "relative",
 			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("select", {
+				ref,
 				disabled,
-				className: [
-					"w-full appearance-none rounded-md border bg-white py-2.5 pl-4 pr-10 text-sm font-medium text-slate-900 outline-none transition",
-					FIELD_STATUS_RING_DIRECT[status],
-					disabled ? "cursor-not-allowed bg-slate-50 opacity-60" : "cursor-pointer",
-					className
-				].filter(Boolean).join(" "),
+				className: cn("w-full appearance-none rounded-md border bg-white py-2.5 pl-4 pr-10 text-sm font-medium text-slate-900 outline-none transition", FIELD_STATUS_RING_DIRECT[status], disabled ? "cursor-not-allowed bg-slate-50 opacity-60" : "cursor-pointer", className),
 				...props,
 				children: [placeholder && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
 					value: "",
@@ -590,6 +943,24 @@ function Select({ items, placeholder, status = "default", helper, disabled, clas
 	});
 }
 //#endregion
+//#region src/lib/composeRefs.ts
+/**
+* Composes multiple React refs into one callback ref.
+* Used when a component needs both an internal ref and a forwarded external ref.
+*
+* Example:
+*   <input ref={composeRefs(internalRef, forwardedRef)} />
+*/
+function composeRefs(...refs) {
+	return (node) => {
+		refs.forEach((ref) => {
+			if (!ref) return;
+			if (typeof ref === "function") ref(node);
+			else ref.current = node;
+		});
+	};
+}
+//#endregion
 //#region src/ui-library/gallery/checkbox/Checkbox.tsx
 /**
 * Checkbox — Design System Component
@@ -600,14 +971,14 @@ function Select({ items, placeholder, status = "default", helper, disabled, clas
 *
 * States: unchecked | checked | indeterminate | disabled | error
 */
-function Checkbox({ label, description, indeterminate = false, error = false, helper, disabled, checked, id: externalId, className = "", ...props }) {
+function Checkbox({ label, description, indeterminate = false, error = false, helper, disabled, checked, id: externalId, className = "", ref, ...props }) {
 	const generatedId = (0, react.useId)();
 	const id = externalId ?? generatedId;
 	const attachIndeterminate = (el) => {
 		if (el) el.indeterminate = indeterminate;
 	};
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: `flex flex-col gap-1 ${className}`,
+		className: cn("flex flex-col gap-1", className),
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
 			htmlFor: id,
 			className: `group inline-flex cursor-pointer items-start gap-2.5 ${disabled ? "cursor-not-allowed opacity-60" : ""}`,
@@ -615,7 +986,7 @@ function Checkbox({ label, description, indeterminate = false, error = false, he
 				className: "relative mt-0.5 shrink-0",
 				children: [
 					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
-						ref: attachIndeterminate,
+						ref: composeRefs(attachIndeterminate, ref),
 						id,
 						type: "checkbox",
 						checked,
@@ -710,26 +1081,23 @@ function RadioGroup({ name: externalName, defaultValue = "", value: controlledVa
 			"aria-labelledby": ariaLabelledby,
 			"aria-required": required || void 0,
 			"aria-disabled": disabled || void 0,
-			className: [orientation === "horizontal" ? "flex flex-wrap gap-4" : "flex flex-col gap-3", className].filter(Boolean).join(" "),
+			className: cn(orientation === "horizontal" ? "flex flex-wrap gap-4" : "flex flex-col gap-3", className),
 			children
 		})
 	});
 }
-function RadioItem({ value, label, description, disabled: itemDisabled = false, className = "" }) {
+function RadioItem({ value, label, description, disabled: itemDisabled = false, className = "", ref }) {
 	const { name, activeValue, select, disabled: groupDisabled, required } = useRadioGroupContext();
 	const id = (0, react.useId)();
 	const isDisabled = groupDisabled || itemDisabled;
 	const isChecked = activeValue === value;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
 		htmlFor: id,
-		className: [
-			"group flex cursor-pointer items-start gap-3",
-			isDisabled ? "cursor-not-allowed opacity-50" : "",
-			className
-		].filter(Boolean).join(" "),
+		className: cn("group flex cursor-pointer items-start gap-3", isDisabled && "cursor-not-allowed opacity-50", className),
 		children: [
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
 				type: "radio",
+				ref,
 				id,
 				name,
 				value,
@@ -765,14 +1133,24 @@ function RadioItem({ value, label, description, disabled: itemDisabled = false,
 }
 //#endregion
 //#region src/ui-library/gallery/switch/Switch.tsx
-function Switch({ checked, onChange, label, description, disabled = false, loading = false, id: externalId }) {
+function Switch({ checked: controlledChecked, defaultChecked = false, onChange, label, description, disabled = false, loading = false, id: externalId, className = "", ref }) {
+	const [uncontrolled, setUncontrolled] = (0, react.useState)(defaultChecked);
+	const isControlled = controlledChecked !== void 0;
+	const checked = isControlled ? controlledChecked : uncontrolled;
 	const generatedId = (0, react.useId)();
 	const id = externalId ?? generatedId;
 	const labelId = label ? `${id}-label` : void 0;
 	const isInteractive = !disabled && !loading;
+	const handleClick = () => {
+		if (!isInteractive) return;
+		const next = !checked;
+		if (!isControlled) setUncontrolled(next);
+		onChange?.(next);
+	};
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: "flex items-start gap-3",
+		className: cn("flex items-start gap-3", className),
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+			ref,
 			id,
 			type: "button",
 			role: "switch",
@@ -781,7 +1159,7 @@ function Switch({ checked, onChange, label, description, disabled = false, loadi
 			"aria-label": !label ? "Toggle" : void 0,
 			"aria-disabled": !isInteractive || void 0,
 			disabled: !isInteractive,
-			onClick: () => isInteractive && onChange(!checked),
+			onClick: handleClick,
 			className: [
 				"relative inline-flex h-6 w-11 shrink-0 items-center rounded-full border-2 border-transparent transition-colors duration-200",
 				"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-blue/30 focus-visible:ring-offset-1",
@@ -818,13 +1196,17 @@ function Switch({ checked, onChange, label, description, disabled = false, loadi
 */
 var fieldInputClass = "w-full rounded-xl border border-slate-200 bg-slate-50 px-4 py-2.5 text-sm font-medium text-slate-900 outline-none transition placeholder:text-slate-400 focus:border-brand-blue/40 focus:ring-2 focus:ring-brand-blue/15 disabled:cursor-not-allowed disabled:opacity-60";
 var fieldInputErrorClass = "border-rose-300 focus:border-rose-400 focus:ring-rose-100";
-function Combobox({ value, onChange, options, placeholder, className, disabled, loading, error, "aria-label": ariaLabel }) {
+function Combobox({ value: controlledValue, defaultValue = "", onChange, options, placeholder, className, disabled, loading, error, "aria-label": ariaLabel, onBlur, ref }) {
+	const isControlled = controlledValue !== void 0;
+	const [internalValue, setInternalValue] = (0, react.useState)(defaultValue);
+	const value = isControlled ? controlledValue : internalValue;
 	const [isOpen, setIsOpen] = (0, react.useState)(false);
 	const [search, setSearch] = (0, react.useState)(value);
 	const [highlightIndex, setHighlightIndex] = (0, react.useState)(-1);
 	const inputRef = (0, react.useRef)(null);
 	const listRef = (0, react.useRef)(null);
 	const wrapperRef = (0, react.useRef)(null);
+	const [panelStyle, setPanelStyle] = (0, react.useState)({});
 	const uid = (0, react.useId)();
 	const listboxId = `${uid}-listbox`;
 	const optionId = (index) => `${uid}-option-${index}`;
@@ -841,11 +1223,23 @@ function Combobox({ value, onChange, options, placeholder, className, disabled,
 	}, [value]);
 	(0, react.useEffect)(() => {
 		function handleClickOutside(e) {
-			if (wrapperRef.current && !wrapperRef.current.contains(e.target)) setIsOpen(false);
+			const target = e.target;
+			if (wrapperRef.current && !wrapperRef.current.contains(target) && !(listRef.current && listRef.current.contains(target))) setIsOpen(false);
 		}
 		document.addEventListener("mousedown", handleClickOutside);
 		return () => document.removeEventListener("mousedown", handleClickOutside);
 	}, []);
+	(0, react.useEffect)(() => {
+		if (!isOpen || !wrapperRef.current) return;
+		const rect = wrapperRef.current.getBoundingClientRect();
+		setPanelStyle({
+			position: "fixed",
+			top: rect.bottom + 4,
+			left: rect.left,
+			zIndex: 9999,
+			width: rect.width
+		});
+	}, [isOpen]);
 	(0, react.useEffect)(() => {
 		if (!isOpen) setHighlightIndex(-1);
 	}, [isOpen]);
@@ -853,7 +1247,9 @@ function Combobox({ value, onChange, options, placeholder, className, disabled,
 		if (highlightIndex >= 0 && listRef.current) listRef.current.children[highlightIndex]?.scrollIntoView({ block: "nearest" });
 	}, [highlightIndex]);
 	const selectOption = (opt) => {
-		onChange(opt.value);
+		if (opt.disabled) return;
+		if (!isControlled) setInternalValue(opt.value);
+		onChange?.(opt.value);
 		setSearch(opt.label);
 		setIsOpen(false);
 		inputRef.current?.focus();
@@ -861,37 +1257,60 @@ function Combobox({ value, onChange, options, placeholder, className, disabled,
 	const handleInputChange = (e) => {
 		const val = e.target.value;
 		setSearch(val);
-		onChange(val);
+		if (!isControlled) setInternalValue(val);
 		setIsOpen(true);
 		setHighlightIndex(-1);
 	};
 	const handleKeyDown = (e) => {
+		const nextEnabled = (from, dir) => {
+			let idx = from;
+			while (idx >= 0 && idx < displayed.length) {
+				if (!displayed[idx]?.disabled) return idx;
+				idx += dir;
+			}
+			return -1;
+		};
 		if (e.key === "ArrowDown") {
 			e.preventDefault();
 			if (!isOpen) {
 				setIsOpen(true);
 				return;
 			}
-			setHighlightIndex((prev) => Math.min(prev + 1, displayed.length - 1));
+			setHighlightIndex((prev) => {
+				const next = nextEnabled(prev + 1, 1);
+				return next === -1 ? prev : next;
+			});
 		} else if (e.key === "ArrowUp") {
 			e.preventDefault();
-			setHighlightIndex((prev) => Math.max(prev - 1, -1));
+			setHighlightIndex((prev) => {
+				const next = nextEnabled(prev - 1, -1);
+				return next === -1 ? prev : next;
+			});
 		} else if (e.key === "Enter") {
 			e.preventDefault();
-			if (highlightIndex >= 0 && displayed[highlightIndex]) selectOption(displayed[highlightIndex]);
+			if (highlightIndex >= 0 && displayed[highlightIndex] && !displayed[highlightIndex].disabled) selectOption(displayed[highlightIndex]);
 			else if (isOpen) setIsOpen(false);
 		} else if (e.key === "Escape") {
 			e.preventDefault();
 			setIsOpen(false);
 		}
 	};
+	const handleBlur = () => {
+		requestAnimationFrame(() => {
+			const active = document.activeElement;
+			if (!wrapperRef.current?.contains(active) && !listRef.current?.contains(active)) {
+				setIsOpen(false);
+				onBlur?.();
+			}
+		});
+	};
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		ref: wrapperRef,
 		className: "relative",
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 			className: "relative",
 			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
-				ref: inputRef,
+				ref: composeRefs(inputRef, ref),
 				type: "text",
 				role: "combobox",
 				"aria-expanded": isOpen,
@@ -903,20 +1322,22 @@ function Combobox({ value, onChange, options, placeholder, className, disabled,
 				value: search,
 				onChange: handleInputChange,
 				onFocus: () => setIsOpen(true),
+				onBlur: handleBlur,
 				onKeyDown: handleKeyDown,
 				placeholder,
 				disabled,
-				className: `${fieldInputClass} pr-8${error ? ` ${fieldInputErrorClass}` : ""}${className ? ` ${className}` : ""}`
+				className: cn(fieldInputClass, "pr-8", error && fieldInputErrorClass, className)
 			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ChevronDown, {
 				size: 16,
 				"aria-hidden": "true",
 				className: `absolute right-3 top-1/2 -translate-y-1/2 text-slate-300 pointer-events-none transition-transform ${isOpen ? "rotate-180" : ""}`
 			})]
-		}), isOpen && !disabled && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		}), isOpen && !disabled && (0, react_dom.createPortal)(/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 			ref: listRef,
 			id: listboxId,
 			role: "listbox",
-			className: "absolute z-50 mt-1 w-full bg-white border border-slate-200 rounded-xl shadow-lg max-h-60 overflow-y-auto",
+			style: panelStyle,
+			className: "bg-white border border-slate-200 rounded-xl shadow-lg max-h-60 overflow-y-auto",
 			children: error ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 				className: "px-3 py-2 text-sm text-rose-500 font-semibold",
 				children: error
@@ -930,11 +1351,12 @@ function Combobox({ value, onChange, options, placeholder, className, disabled,
 				id: optionId(i),
 				role: "option",
 				"aria-selected": opt.value === value,
+				"aria-disabled": opt.disabled,
 				onMouseDown: (e) => {
 					e.preventDefault();
-					selectOption(opt);
+					if (!opt.disabled) selectOption(opt);
 				},
-				className: `px-3 py-2 text-sm cursor-pointer transition-colors ${i === highlightIndex ? "bg-blue-50 text-brand-blue font-semibold" : "text-slate-700 hover:bg-slate-50"} ${opt.value === value ? "font-medium" : ""}`,
+				className: `px-3 py-2 text-sm transition-colors ${opt.disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer"} ${i === highlightIndex && !opt.disabled ? "bg-blue-50 text-brand-blue font-semibold" : opt.disabled ? "text-slate-400" : "text-slate-700 hover:bg-slate-50"} ${opt.value === value ? "font-medium" : ""}`,
 				children: opt.label
 			}, opt.value)), filtered.length > DISPLAY_LIMIT && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 				className: "px-3 py-2 text-xs text-slate-400 font-semibold text-center border-t border-slate-100",
@@ -944,7 +1366,7 @@ function Combobox({ value, onChange, options, placeholder, className, disabled,
 					" more results — refine your search"
 				]
 			})] })
-		})]
+		}), document.body)]
 	});
 }
 //#endregion
@@ -956,10 +1378,9 @@ function Combobox({ value, onChange, options, placeholder, className, disabled,
 * Uses react-calendar and date-fns.
 * Note: CSS for .pis-datepicker-popover and .pis-rc-calendar is in index.css.
 */
-var MAX_DATE = new Date(2026, 11, 31);
 var POPOVER_WIDTH = 352;
 var CALENDAR_HEIGHT = 360;
-function DatePicker({ value, onChange, placeholder, className, disabled, error, minDate, id, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, required }) {
+function DatePicker({ value, onChange, placeholder, className, disabled, error, minDate, maxDate, id, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, required }) {
 	const [isOpen, setIsOpen] = (0, react.useState)(false);
 	const [popupStyle, setPopupStyle] = (0, react.useState)({});
 	const wrapperRef = (0, react.useRef)(null);
@@ -1040,12 +1461,7 @@ function DatePicker({ value, onChange, placeholder, className, disabled, error,
 			else openPopup();
 		}
 	}
-	const inputClasses = [
-		"w-full rounded-xl border bg-slate-50 px-4 py-2.5 text-sm font-medium text-slate-900 outline-none transition placeholder:text-slate-400 pr-8 cursor-pointer select-none",
-		error ? "border-rose-300 focus:border-rose-400 focus:ring-2 focus:ring-rose-100" : "border-slate-200 focus:border-brand-blue/40 focus:ring-2 focus:ring-brand-blue/15",
-		disabled ? "cursor-not-allowed opacity-60" : "",
-		className ?? ""
-	].filter(Boolean).join(" ");
+	const inputClasses = cn("w-full rounded-xl border bg-slate-50 px-4 py-2.5 text-sm font-medium text-slate-900 outline-none transition placeholder:text-slate-400 pr-8 cursor-pointer select-none", error ? "border-rose-300 focus:border-rose-400 focus:ring-2 focus:ring-rose-100" : "border-slate-200 focus:border-brand-blue/40 focus:ring-2 focus:ring-brand-blue/15", disabled && "cursor-not-allowed opacity-60", className);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		ref: wrapperRef,
 		className: "relative",
@@ -1094,7 +1510,7 @@ function DatePicker({ value, onChange, placeholder, className, disabled, error,
 				},
 				defaultActiveStartDate: selectedDate ?? minDate,
 				minDate,
-				maxDate: MAX_DATE,
+				maxDate,
 				defaultView: "month",
 				showNeighboringDecade: true,
 				showNeighboringCentury: true,
@@ -1183,7 +1599,7 @@ function OtpInput({ length = 6, value, onChange, disabled = false, error = false
 	].join(" ");
 	const cellClass = error ? `${cellBase} border-rose-400 bg-rose-50/40 text-rose-800 focus:ring-rose-100` : `${cellBase} border-slate-200 bg-white text-slate-900`;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: `space-y-2 ${className}`,
+		className: cn("space-y-2", className),
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 			role: "group",
 			"aria-label": ariaLabel,
@@ -1231,14 +1647,20 @@ function OtpInput({ length = 6, value, onChange, disabled = false, error = false
 *   - Keyboard: Tab to focus the input; Enter/Space to open the picker.
 *   - Disabled: input has disabled attr; zone has aria-disabled="true".
 */
-function FileUpload({ onFiles, accept, multiple = false, disabled = false, "aria-label": ariaLabel = "Upload file", className = "" }) {
+function FileUpload({ onFiles, accept, multiple = false, disabled = false, "aria-label": ariaLabel = "Upload file", className = "", value, onChange, ref }) {
 	const inputRef = (0, react.useRef)(null);
 	const [dragging, setDragging] = (0, react.useState)(false);
-	const [selected, setSelected] = (0, react.useState)([]);
+	const [internalFiles, setInternalFiles] = (0, react.useState)([]);
+	const isControlled = value !== void 0;
+	const selected = isControlled ? value : internalFiles;
+	const setFiles = (next) => {
+		if (!isControlled) setInternalFiles(next);
+		onChange?.(next);
+	};
 	const handleFiles = (files) => {
 		if (!files || files.length === 0) return;
 		const arr = Array.from(files);
-		setSelected(multiple ? arr : [arr[0]]);
+		setFiles(multiple ? arr : [arr[0]]);
 		onFiles?.(multiple ? arr : [arr[0]]);
 	};
 	const handleChange = (e) => {
@@ -1257,15 +1679,9 @@ function FileUpload({ onFiles, accept, multiple = false, disabled = false, "aria
 	};
 	const handleDragLeave = () => setDragging(false);
 	const removeFile = (i) => {
-		setSelected((prev) => prev.filter((_, idx) => idx !== i));
+		setFiles(selected.filter((_, idx) => idx !== i));
 	};
-	const zoneClass = [
-		"flex flex-col items-center justify-center gap-3",
-		"rounded-2xl border-2 border-dashed p-8 text-center cursor-pointer",
-		"transition-colors focus-within:outline-none focus-within:ring-2 focus-within:ring-brand-blue/20",
-		dragging ? "border-brand-blue/60 bg-blue-50" : disabled ? "border-slate-100 bg-slate-50/40 cursor-not-allowed" : "border-slate-200 bg-white hover:border-brand-sky/50 hover:bg-[#eef2f8]",
-		className
-	].filter(Boolean).join(" ");
+	const zoneClass = cn("flex flex-col items-center justify-center gap-3", "rounded-2xl border-2 border-dashed p-8 text-center cursor-pointer", "transition-colors focus-within:outline-none focus-within:ring-2 focus-within:ring-brand-blue/20", dragging ? "border-brand-blue/60 bg-blue-50" : disabled ? "border-slate-100 bg-slate-50/40 cursor-not-allowed" : "border-slate-200 bg-white hover:border-brand-sky/50 hover:bg-[#eef2f8]", className);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		className: "space-y-3",
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
@@ -1276,7 +1692,7 @@ function FileUpload({ onFiles, accept, multiple = false, disabled = false, "aria
 			"aria-disabled": disabled,
 			children: [
 				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
-					ref: inputRef,
+					ref: composeRefs(inputRef, ref),
 					type: "file",
 					accept,
 					multiple,
@@ -1350,13 +1766,7 @@ function FileUpload({ onFiles, accept, multiple = false, disabled = false, "aria
 */
 function FilterChip({ label, onRemove, disabled = false, removeLabel = "Remove filter", className = "" }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-		className: [
-			"inline-flex max-w-[20rem] items-center gap-1.5 rounded-full border",
-			"py-1 pl-3 text-xs font-semibold",
-			onRemove ? "pr-1.5" : "pr-3",
-			disabled ? "border-slate-200 bg-slate-50 text-slate-400" : "border-brand-blue/30 bg-blue-50 text-brand-blue",
-			className
-		].filter(Boolean).join(" "),
+		className: cn("inline-flex max-w-[20rem] items-center gap-1.5 rounded-full border", "py-1 pl-3 text-xs font-semibold", onRemove ? "pr-1.5" : "pr-3", disabled ? "border-slate-200 bg-slate-50 text-slate-400" : "border-brand-blue/30 bg-blue-50 text-brand-blue", className),
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 			className: "truncate",
 			children: label
@@ -1365,11 +1775,7 @@ function FilterChip({ label, onRemove, disabled = false, removeLabel = "Remove f
 			onClick: !disabled ? onRemove : void 0,
 			disabled,
 			"aria-label": removeLabel,
-			className: [
-				"flex h-4 w-4 shrink-0 items-center justify-center rounded-full transition",
-				"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-blue/30",
-				disabled ? "cursor-not-allowed text-slate-300" : "text-brand-blue hover:bg-blue-100 hover:text-brand-navy"
-			].filter(Boolean).join(" "),
+			className: cn("flex h-4 w-4 shrink-0 items-center justify-center rounded-full transition", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-blue/30", disabled ? "cursor-not-allowed text-slate-300" : "text-brand-blue hover:bg-blue-100 hover:text-brand-navy"),
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.X, {
 				size: 10,
 				"aria-hidden": "true",
@@ -1379,6 +1785,52 @@ function FilterChip({ label, onRemove, disabled = false, removeLabel = "Remove f
 	});
 }
 //#endregion
+//#region src/ui-library/gallery/search/Search.tsx
+/**
+* Search — Design System Component
+*
+* A search input with a built-in search icon prefix and optional clear button.
+* Built for filtering and discovery use cases — not for form submission fields
+* (use Input for those).
+*
+* Features:
+*   - Search icon in prefix by default
+*   - Optional × clear button when value is non-empty (pass onClear)
+*   - Controlled via value + onChange (standard input event)
+*   - Forwards ref to the underlying <input>
+*   - All native <input> attributes are forwarded
+*/
+function Search({ value, onChange, onClear, placeholder = "Search…", disabled = false, className = "", ref, ...props }) {
+	const hasValue = value !== void 0 && value !== "";
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: cn("flex w-full items-center rounded-xl border bg-slate-50 transition-all", "border-slate-200 focus-within:border-brand-blue/50 focus-within:bg-white focus-within:ring-2 focus-within:ring-brand-blue/15", disabled && "cursor-not-allowed opacity-60", className),
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: "flex shrink-0 items-center pl-3.5 text-slate-400",
+				"aria-hidden": "true",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Search, { size: 15 })
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+				ref,
+				type: "search",
+				value,
+				onChange,
+				placeholder,
+				disabled,
+				className: "w-full bg-transparent py-2.5 pl-2.5 pr-3 text-sm font-medium text-slate-900 outline-none placeholder:text-slate-400 disabled:cursor-not-allowed [&::-webkit-search-cancel-button]:hidden [&::-webkit-search-decoration]:hidden",
+				...props
+			}),
+			onClear && hasValue && !disabled && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+				type: "button",
+				onClick: onClear,
+				"aria-label": "Clear search",
+				className: "flex shrink-0 items-center pr-3 text-slate-400 transition-colors hover:text-slate-600",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.X, { size: 14 })
+			})
+		]
+	});
+}
+//#endregion
 //#region src/ui-library/gallery/segmented-control/SegmentedControl.tsx
 /**
 * SegmentedControl — Design System Component
@@ -1446,11 +1898,7 @@ function SegmentedControl({ options, defaultValue, value: controlledValue, onVal
 		"aria-labelledby": ariaLabelledby,
 		"aria-disabled": disabled || void 0,
 		onKeyDown: handleKeyDown,
-		className: [
-			"inline-flex rounded-xl bg-slate-100 p-1",
-			disabled ? "opacity-50 pointer-events-none" : "",
-			className
-		].filter(Boolean).join(" "),
+		className: cn("inline-flex rounded-xl bg-slate-100 p-1", disabled && "opacity-50 pointer-events-none", className),
 		children: options.map((opt) => {
 			const isSelected = opt.value === activeValue;
 			const isDisabled = disabled || opt.disabled;
@@ -1475,6 +1923,33 @@ function SegmentedControl({ options, defaultValue, value: controlledValue, onVal
 }
 //#endregion
 //#region src/ui-library/gallery/validation-summary/ValidationSummary.tsx
+/**
+* ValidationSummary — Design System Component
+*
+* Renders a list of validation errors or warnings before a form is submitted.
+* Matches the production implementation in shared/components/ValidationSummary.tsx.
+*
+* Accessibility:
+*   - role="alert" causes immediate announcement when injected into the DOM.
+*   - <ul> with <li> items provides proper list semantics.
+*   - The heading is a <div role="heading" aria-level="3"> to avoid disrupting
+*     page outline; callers may override via headingLevel.
+*   - Each issue is identified by field name + message.
+*
+* Usage:
+*   const [issues, setIssues] = useState<ValidationIssue[]>([]);
+*   // ... after validation:
+*   setIssues([{ field: 'Employee ID', message: 'is required' }]);
+*   // Render:
+*   <ValidationSummary issues={issues} />
+*
+*   // With scroll-to-field (wizard steps):
+*   <ValidationSummary
+*     issues={issues}
+*     fieldIds={{ 'Employee ID': 'employee-id-input', 'Position': 'position-select' }}
+*     fieldLabels={{ 'Employee ID': 'Employee ID', 'Position': 'Position Title' }}
+*   />
+*/
 function scrollToField(domId) {
 	const el = document.getElementById(domId);
 	if (!el) return;
@@ -1489,7 +1964,7 @@ function ValidationSummary({ issues, heading = "Review these fields before savin
 	if (issues.length === 0) return null;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		role: "alert",
-		className: ["rounded-xl border border-amber-200 bg-amber-50 px-4 py-3 text-sm text-amber-900", className].filter(Boolean).join(" "),
+		className: cn("rounded-xl border border-amber-200 bg-amber-50 px-4 py-3 text-sm text-amber-900", className),
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 			className: "font-bold",
 			children: heading
@@ -1553,7 +2028,7 @@ function Alert({ tone, title, children, icon = true, onDismiss, subtle = false,
 	const colorClass = subtle ? TONE_SUBTLE[tone] : TONE_FULL[tone];
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		role: "alert",
-		className: `flex gap-3 rounded-md pl-4 pr-4 py-3.5 ${colorClass} ${className}`,
+		className: cn("flex gap-3 rounded-md pl-4 pr-4 py-3.5", colorClass, className),
 		children: [
 			icon && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, {
 				size: 20,
@@ -1594,12 +2069,33 @@ function ErrorBanner({ message, tone = "error", className = "" }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		role: tone === "error" ? "alert" : void 0,
 		"aria-live": tone !== "error" ? "polite" : void 0,
-		className: `rounded-2xl border px-5 py-4 text-sm font-bold ${STYLES[tone]} ${className}`,
+		className: cn("rounded-2xl border px-5 py-4 text-sm font-bold", STYLES[tone], className),
 		children: message
 	});
 }
 //#endregion
 //#region src/ui-library/gallery/progress/Progress.tsx
+/**
+* Progress — Design System Component
+*
+* Determinate and indeterminate linear progress bar.
+*
+* Accessibility:
+*   - role="progressbar"
+*   - aria-valuenow, aria-valuemin, aria-valuemax (determinate)
+*   - aria-label for screen-reader context
+*   - When indeterminate: aria-valuenow is omitted
+*
+* Usage:
+*   // Determinate (0–100)
+*   <Progress value={65} aria-label="Upload progress" />
+*
+*   // Indeterminate
+*   <Progress aria-label="Loading" />
+*
+*   // Custom max
+*   <Progress value={3} max={5} aria-label="Step 3 of 5" />
+*/
 function Progress({ value, max = 100, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, className = "" }) {
 	const isIndeterminate = value === void 0;
 	const clamped = isIndeterminate ? 0 : Math.min(Math.max(value, 0), max);
@@ -1611,7 +2107,7 @@ function Progress({ value, max = 100, "aria-label": ariaLabel, "aria-labelledby"
 		"aria-valuemax": max,
 		"aria-label": ariaLabel,
 		"aria-labelledby": ariaLabelledby,
-		className: `h-2 w-full overflow-hidden rounded-full bg-slate-200 ${className}`,
+		className: cn("h-2 w-full overflow-hidden rounded-full bg-slate-200", className),
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 			className: ["h-full rounded-full bg-brand-blue transition-[width] duration-300", isIndeterminate ? "w-1/3 motion-safe:animate-pulse opacity-75" : ""].filter(Boolean).join(" "),
 			style: isIndeterminate ? void 0 : { width: `${percent}%` },
@@ -1621,17 +2117,20 @@ function Progress({ value, max = 100, "aria-label": ariaLabel, "aria-labelledby"
 }
 //#endregion
 //#region src/ui-library/gallery/skeleton/Skeleton.tsx
-function Skeleton({ className = "" }) {
+function Skeleton({ className = "", variant = "pulse" }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		"aria-hidden": "true",
-		className: `animate-pulse rounded-lg bg-slate-200 ${className}`
+		className: cn("rounded-lg", variant === "shimmer" ? "skeleton-shimmer" : "animate-pulse bg-slate-200", className)
 	});
 }
-function SkeletonText({ lines = 3, className = "" }) {
+function SkeletonText({ lines = 3, className = "", variant = "pulse" }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		className: `space-y-2 ${className}`,
+		className: cn("space-y-2", className),
 		"aria-hidden": "true",
-		children: Array.from({ length: lines }, (_, i) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Skeleton, { className: `h-3.5 ${i === lines - 1 && lines > 1 ? "w-2/3" : "w-full"}` }, i))
+		children: Array.from({ length: lines }, (_, i) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Skeleton, {
+			variant,
+			className: `h-3.5 ${i === lines - 1 && lines > 1 ? "w-2/3" : "w-full"}`
+		}, i))
 	});
 }
 var AVATAR_SIZE = {
@@ -1639,17 +2138,23 @@ var AVATAR_SIZE = {
 	md: "h-10 w-10",
 	lg: "h-14 w-14"
 };
-function SkeletonAvatar({ size = "md", className = "" }) {
+function SkeletonAvatar({ size = "md", className = "", variant = "pulse" }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		"aria-hidden": "true",
-		className: `animate-pulse rounded-full bg-slate-200 shrink-0 ${AVATAR_SIZE[size]} ${className}`
+		className: cn("rounded-full shrink-0", variant === "shimmer" ? "skeleton-shimmer" : "animate-pulse bg-slate-200", AVATAR_SIZE[size], className)
 	});
 }
-function SkeletonCard({ className = "", children }) {
+function SkeletonCard({ className = "", children, variant = "pulse" }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		className: `rounded-2xl border border-slate-100 bg-white p-5 space-y-3 ${className}`,
+		className: cn("rounded-2xl border border-slate-100 bg-white p-5 space-y-3", className),
 		"aria-hidden": "true",
-		children: children ?? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Skeleton, { className: "h-4 w-1/3" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SkeletonText, { lines: 2 })] })
+		children: children ?? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Skeleton, {
+			variant,
+			className: "h-4 w-1/3"
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SkeletonText, {
+			variant,
+			lines: 2
+		})] })
 	});
 }
 function SkeletonTableRow({ rows = 5, columns = [
@@ -1657,12 +2162,15 @@ function SkeletonTableRow({ rows = 5, columns = [
 	"w-24",
 	"w-20",
 	"w-28"
-] }) {
+], variant = "pulse" }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: Array.from({ length: rows }, (_, r) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("tr", {
 		"aria-hidden": "true",
 		children: columns.map((width, c) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", {
 			className: "px-5 py-3.5",
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Skeleton, { className: `h-3.5 ${width}` })
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Skeleton, {
+				variant,
+				className: `h-3.5 ${width}`
+			})
 		}, c))
 	}, r)) });
 }
@@ -1678,12 +2186,7 @@ var TONE_STYLES = {
 };
 function StatusBadge({ tone = "neutral", children, className = "" }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-		className: [
-			"inline-flex items-center rounded-lg border px-2.5 py-1",
-			"text-[10px] font-bold uppercase tracking-wider",
-			TONE_STYLES[tone],
-			className
-		].filter(Boolean).join(" "),
+		className: cn("inline-flex items-center rounded-lg border px-2.5 py-1", "text-[10px] font-bold uppercase tracking-wider", TONE_STYLES[tone], className),
 		children
 	});
 }
@@ -1760,7 +2263,7 @@ var typography = {
 *   - Close button styling
 *   - Danger tone (rose badge, rose title, rose submit button)
 */
-function Modal({ isOpen, onClose, title, children, icon, subtitle, headerMeta, footer, onSubmit, submitLabel = "Submit", submittingLabel = "Saving...", submitting = false, danger = false, error, maxWidth = "max-w-xl", closeLabel = "Close" }) {
+function Modal({ isOpen, onClose, title, children, icon, subtitle, headerMeta, footer, onSubmit, submitLabel = "Submit", submittingLabel = "Saving...", submitting = false, danger = false, error, maxWidth = "max-w-xl", closeLabel = "Close", preventClose = false, onOpenAutoFocus, onCloseAutoFocus, onEscapeKeyDown, onInteractOutside }) {
 	const open = isOpen !== false;
 	const defaultFooter = onSubmit ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		className: "flex items-center justify-end gap-3",
@@ -1793,13 +2296,17 @@ function Modal({ isOpen, onClose, title, children, icon, subtitle, headerMeta, f
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_dialog.Root, {
 		open,
 		onOpenChange: (isOpen) => {
-			if (!isOpen) onClose();
+			if (!isOpen && !preventClose) onClose();
 		},
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_radix_ui_react_dialog.Portal, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_dialog.Overlay, { className: "fixed inset-0 z-50 bg-brand-navy/50 backdrop-blur-sm" }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_radix_ui_react_dialog.Content, {
-			className: cn("fixed left-1/2 top-1/2 z-50 -translate-x-1/2 -translate-y-1/2", "flex w-full flex-col", "rounded-lg border border-slate-200 bg-white shadow-xl", "max-h-[85vh] outline-none", "p-4", maxWidth),
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_radix_ui_react_dialog.Portal, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_dialog.Overlay, { className: "fixed inset-0 z-50 bg-brand-navy/50 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=open]:fade-in-0 data-[state=closed]:fade-out-0 duration-200" }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_radix_ui_react_dialog.Content, {
+			className: cn("fixed left-1/2 top-1/2 z-50 -translate-x-1/2 -translate-y-1/2", "flex w-full flex-col", "rounded-lg border border-slate-200 bg-white shadow-xl", "max-h-[85vh] outline-none", maxWidth, "data-[state=open]:animate-in data-[state=closed]:animate-out", "data-[state=open]:fade-in-0 data-[state=closed]:fade-out-0", "data-[state=open]:zoom-in-95 data-[state=closed]:zoom-out-95", "duration-200"),
 			style: { padding: 0 },
+			onOpenAutoFocus,
+			onCloseAutoFocus,
+			onEscapeKeyDown: preventClose ? (e) => e.preventDefault() : onEscapeKeyDown,
+			onInteractOutside: preventClose ? (e) => e.preventDefault() : onInteractOutside,
 			children: [
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_dialog.Close, {
+				!preventClose && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_dialog.Close, {
 					asChild: true,
 					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 						type: "button",
@@ -1890,17 +2397,17 @@ var SIZE_CLASS = {
 };
 function DialogBody({ children, className = "" }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		className: `min-h-0 overflow-y-auto overscroll-contain px-6 py-4 ${className}`,
+		className: cn("min-h-0 overflow-y-auto overscroll-contain px-6 py-4", className),
 		children
 	});
 }
 function DialogFooter({ children, className = "" }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		className: `flex items-center justify-end gap-3 border-t border-slate-100 px-6 py-4 ${className}`,
+		className: cn("flex items-center justify-end gap-3 border-t border-slate-100 px-6 py-4", className),
 		children
 	});
 }
-function Dialog({ open, onClose, title, description, preventClose = false, size = "md", children }) {
+function Dialog({ open, onClose, title, description, preventClose = false, size = "md", children, onOpenAutoFocus, onCloseAutoFocus, onEscapeKeyDown, onInteractOutside }) {
 	const hasTitle = Boolean(title);
 	const hasDesc = Boolean(description);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_dialog.Root, {
@@ -1908,10 +2415,12 @@ function Dialog({ open, onClose, title, description, preventClose = false, size
 		onOpenChange: (isOpen) => {
 			if (!isOpen && !preventClose) onClose();
 		},
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_radix_ui_react_dialog.Portal, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_dialog.Overlay, { className: "fixed inset-0 z-50 bg-brand-navy/50 backdrop-blur-sm" }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_radix_ui_react_dialog.Content, {
-			className: cn("fixed left-1/2 top-1/2 z-50 -translate-x-1/2 -translate-y-1/2", "flex w-full flex-col overflow-hidden", "rounded-lg bg-white shadow-xl", "max-h-[90vh] outline-none", "p-4", SIZE_CLASS[size]),
-			onEscapeKeyDown: preventClose ? (e) => e.preventDefault() : void 0,
-			onInteractOutside: preventClose ? (e) => e.preventDefault() : void 0,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_radix_ui_react_dialog.Portal, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_dialog.Overlay, { className: "fixed inset-0 z-50 bg-brand-navy/50 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=open]:fade-in-0 data-[state=closed]:fade-out-0 duration-200" }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_radix_ui_react_dialog.Content, {
+			className: cn("fixed left-1/2 top-1/2 z-50 -translate-x-1/2 -translate-y-1/2", "flex w-full flex-col overflow-hidden", "rounded-lg bg-white shadow-xl", "max-h-[90vh] outline-none", SIZE_CLASS[size], "data-[state=open]:animate-in data-[state=closed]:animate-out", "data-[state=open]:fade-in-0 data-[state=closed]:fade-out-0", "data-[state=open]:zoom-in-95 data-[state=closed]:zoom-out-95", "duration-200"),
+			onEscapeKeyDown: preventClose ? (e) => e.preventDefault() : onEscapeKeyDown,
+			onInteractOutside: preventClose ? (e) => e.preventDefault() : onInteractOutside,
+			onOpenAutoFocus,
+			onCloseAutoFocus,
 			style: { padding: 0 },
 			children: [
 				hasTitle ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
@@ -1961,7 +2470,7 @@ var PLACEMENT_PANEL_CLASS = {
 	right: "fixed top-0 right-0 bottom-0 flex flex-col",
 	bottom: "fixed bottom-0 left-0 right-0 flex flex-col rounded-t-xl"
 };
-function Drawer({ open, onClose, title, description, placement = "right", width = "w-80", maxHeight = "max-h-[85vh]", closeLabel = "Close drawer", children }) {
+function Drawer({ open, onClose, title, description, placement = "right", width = "w-80", maxHeight = "max-h-[85vh]", closeLabel = "Close drawer", children, className = "" }) {
 	const panelRef = (0, react.useRef)(null);
 	const titleId = (0, react.useId)();
 	const [rendered, setRendered] = (0, react.useState)(open);
@@ -2022,14 +2531,7 @@ function Drawer({ open, onClose, title, description, placement = "right", width
 		return () => document.removeEventListener("keydown", handleKeyDown);
 	}, [open, onClose]);
 	if (!rendered) return null;
-	const panelClass = [
-		PLACEMENT_PANEL_CLASS[placement],
-		placement === "right" ? width : maxHeight,
-		"bg-white shadow-xl focus:outline-none",
-		placement === "bottom" ? "overflow-y-auto" : "overflow-hidden",
-		"transition-transform duration-300 ease-out",
-		placement === "right" ? visible ? "translate-x-0" : "translate-x-full" : visible ? "translate-y-0" : "translate-y-full"
-	].filter(Boolean).join(" ");
+	const panelClass = cn(PLACEMENT_PANEL_CLASS[placement], placement === "right" ? width : maxHeight, "bg-white shadow-xl focus:outline-none", placement === "bottom" ? "overflow-y-auto" : "overflow-hidden", "transition-transform duration-300 ease-out", placement === "right" ? visible ? "translate-x-0" : "translate-x-full" : visible ? "translate-y-0" : "translate-y-full", className);
 	return (0, react_dom.createPortal)(/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		className: "fixed inset-0 z-50",
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
@@ -2140,6 +2642,30 @@ function toRadixPlacement(placement) {
 			side: "top",
 			align: "end"
 		};
+		case "left-start": return {
+			side: "left",
+			align: "start"
+		};
+		case "left": return {
+			side: "left",
+			align: "center"
+		};
+		case "left-end": return {
+			side: "left",
+			align: "end"
+		};
+		case "right-start": return {
+			side: "right",
+			align: "start"
+		};
+		case "right": return {
+			side: "right",
+			align: "center"
+		};
+		case "right-end": return {
+			side: "right",
+			align: "end"
+		};
 	}
 }
 function Popover({ open, onOpenChange, defaultOpen = false, placement = "bottom-start", children }) {
@@ -2164,12 +2690,12 @@ var PopoverPlacementContext = (0, react.createContext)({
 function usePlacement() {
 	return (0, react.useContext)(PopoverPlacementContext);
 }
-function PopoverTrigger({ children }) {
+function PopoverTrigger({ children, className = "" }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_popover.Trigger, {
 		asChild: true,
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 			type: "button",
-			className: "inline-flex items-center gap-2 rounded-xl border border-slate-200 bg-white px-4 py-2 text-sm font-semibold text-slate-700 shadow-sm transition hover:border-slate-300 hover:bg-slate-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-blue/30",
+			className: cn("inline-flex items-center gap-2 rounded-xl border border-slate-200 bg-white px-4 py-2 text-sm font-semibold text-slate-700 shadow-sm transition hover:border-slate-300 hover:bg-slate-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-blue/30", className),
 			children
 		})
 	});
@@ -2180,7 +2706,7 @@ function PopoverContent({ title, children, maxWidth = "max-w-xs", className = ""
 		side,
 		align,
 		sideOffset: 8,
-		className: cn("z-50 w-max rounded-xl border border-slate-200 bg-white shadow-lg", "outline-none", maxWidth, className),
+		className: cn("z-50 w-max rounded-xl border border-slate-200 bg-white shadow-lg", "outline-none", "data-[state=open]:animate-in data-[state=closed]:animate-out", "data-[state=open]:fade-in-0 data-[state=closed]:fade-out-0", "data-[state=open]:zoom-in-95 data-[state=closed]:zoom-out-95", "duration-200", maxWidth, className),
 		children: [title && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 			className: "border-b border-slate-100 px-4 py-3",
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", {
@@ -2198,8 +2724,8 @@ function PopoverContent({ title, children, maxWidth = "max-w-xs", className = ""
 /**
 * Tooltip — Design System Component
 *
-* A short, text-only label that appears on hover or focus to describe
-* an element.
+* A short label or non-interactive formatted content that appears on hover
+* or focus to describe an element.
 *
 * Behavior is provided by @radix-ui/react-tooltip, which handles:
 *   - Trigger scoping (fires only on the direct trigger, not descendants)
@@ -2216,14 +2742,16 @@ function PopoverContent({ title, children, maxWidth = "max-w-xs", className = ""
 *   - Typography and spacing
 *
 * Rules:
-*   - Tooltip content must be TEXT only. No interactive elements inside.
+*   - Tooltip content must be non-interactive. Interactive elements (links,
+*     buttons) inside `content` will be unclickable due to `pointer-events-none`
+*     on the tooltip panel.
 *   - Do not put ESSENTIAL information only in a tooltip.
 *   - Use for supplementary descriptions: icon button labels, abbrev. meanings.
 *
 * Placement: 'top' | 'bottom' | 'left' | 'right'
 *
 * Difference from Popover:
-*   - Tooltip is text-only, triggered by hover/focus, no interaction inside.
+*   - Tooltip is for non-interactive content, triggered by hover/focus.
 *   - Popover contains interactive content, triggered by explicit click.
 */
 function Tooltip({ content, placement = "top", delayMs = 400, children, className = "" }) {
@@ -2239,7 +2767,7 @@ function Tooltip({ content, placement = "top", delayMs = 400, children, classNam
 		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_tooltip.Portal, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_tooltip.Content, {
 			side: placement,
 			sideOffset: 8,
-			className: cn("pointer-events-none z-50 whitespace-nowrap", "rounded-lg bg-slate-900 px-2.5 py-1.5 text-xs font-semibold text-white shadow-lg", "border-b-2 border-brand-sky/60"),
+			className: cn("pointer-events-none z-50 whitespace-nowrap", "rounded-lg bg-slate-900 px-2.5 py-1.5 text-xs font-semibold text-white shadow-lg", "border-b-2 border-brand-sky/60", "data-[state=open]:animate-in data-[state=open]:fade-in-0", "duration-150"),
 			children: content
 		}) })] })
 	});
@@ -2299,7 +2827,7 @@ var BTN_CANCEL = [
 	"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-blue/15",
 	"disabled:cursor-not-allowed disabled:opacity-60"
 ].join(" ");
-function ConfirmDialog({ open, onClose, onConfirm, title, description, confirmLabel = "Confirm", cancelLabel = "Cancel", tone = "danger" }) {
+function ConfirmDialog({ open, onClose, onConfirm, title, description, confirmLabel = "Confirm", cancelLabel = "Cancel", tone = "danger", className = "" }) {
 	const [loading, setLoading] = (0, react.useState)(false);
 	const handleConfirm = async () => {
 		setLoading(true);
@@ -2317,17 +2845,20 @@ function ConfirmDialog({ open, onClose, onConfirm, title, description, confirmLa
 		title,
 		description: typeof description === "string" ? description : void 0,
 		size: "sm",
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(DialogBody, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-			className: "flex items-start gap-3",
-			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-				className: `mt-0.5 flex h-9 w-9 shrink-0 items-center justify-center rounded-md ${ICON_WRAPPER[tone]}`,
-				"aria-hidden": "true",
-				children: tone === "danger" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.AlertTriangle, { size: 20 }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Info, { size: 20 })
-			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: "text-sm font-medium leading-relaxed text-slate-600",
-				children: description
-			})]
-		}) }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(DialogFooter, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(DialogBody, {
+			className,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "flex items-start gap-3",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: `mt-0.5 flex h-9 w-9 shrink-0 items-center justify-center rounded-md ${ICON_WRAPPER[tone]}`,
+					"aria-hidden": "true",
+					children: tone === "danger" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.AlertTriangle, { size: 20 }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Info, { size: 20 })
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "text-sm font-medium leading-relaxed text-slate-600",
+					children: description
+				})]
+			})
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(DialogFooter, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 			type: "button",
 			className: BTN_CANCEL,
 			onClick: onClose,
@@ -2421,7 +2952,7 @@ var radius = {
 *   - Use gallery Button component (Phase 11 — replaces legacy inlined btn* strings)
 *   - Use a simple inline ErrorBanner instead of importing from ui.tsx
 */
-function ConfirmAction({ title, message, label, description, confirmLabel = "Confirm", tone = "danger", disabled = false, onConfirm, children }) {
+function ConfirmAction({ title, message, label, description, confirmLabel = "Confirm", tone = "danger", disabled = false, onConfirm, children, className = "" }) {
 	const [open, setOpen] = (0, react.useState)(false);
 	const [pending, setPending] = (0, react.useState)(false);
 	const [error, setError] = (0, react.useState)("");
@@ -2445,7 +2976,7 @@ function ConfirmAction({ title, message, label, description, confirmLabel = "Con
 		},
 		disabled
 	}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-		className: "inline-flex",
+		className: cn("inline-flex", className),
 		onClick: () => {
 			if (!disabled) setOpen(true);
 		},
@@ -2505,7 +3036,7 @@ function ConfirmAction({ title, message, label, description, confirmLabel = "Con
 * This component is presentation-only: callers provide commands and
 * handle the query / selection logic.
 */
-function CommandPalette({ open, onClose, items, query, onQueryChange, placeholder = "Search commands…", "aria-label": ariaLabel = "Command palette" }) {
+function CommandPalette({ open, onClose, items, query, onQueryChange, placeholder = "Search commands…", "aria-label": ariaLabel = "Command palette", panelClassName = "" }) {
 	const inputRef = (0, react.useRef)(null);
 	const panelRef = (0, react.useRef)(null);
 	const listboxId = (0, react.useId)();
@@ -2539,6 +3070,23 @@ function CommandPalette({ open, onClose, items, query, onQueryChange, placeholde
 				e.preventDefault();
 				items[activeIndex]?.onSelect();
 				onClose();
+			} else if (e.key === "Tab") {
+				const panel = panelRef.current;
+				if (!panel) return;
+				const focusable = Array.from(panel.querySelectorAll("a[href],button:not([disabled]),textarea:not([disabled]),input:not([disabled]),select:not([disabled]),[tabindex]:not([tabindex=\"-1\"])"));
+				if (!focusable.length) {
+					e.preventDefault();
+					return;
+				}
+				const first = focusable[0];
+				const last = focusable[focusable.length - 1];
+				if (e.shiftKey && document.activeElement === first) {
+					e.preventDefault();
+					last.focus();
+				} else if (!e.shiftKey && document.activeElement === last) {
+					e.preventDefault();
+					first.focus();
+				}
 			}
 		};
 		document.addEventListener("keydown", handle);
@@ -2568,7 +3116,7 @@ function CommandPalette({ open, onClose, items, query, onQueryChange, placeholde
 			role: "dialog",
 			"aria-modal": "true",
 			"aria-label": ariaLabel,
-			className: "relative z-10 w-full max-w-lg rounded-2xl border border-slate-200 bg-white shadow-2xl overflow-hidden",
+			className: cn("relative z-10 w-full max-w-lg rounded-2xl border border-slate-200 bg-white shadow-2xl overflow-hidden", panelClassName),
 			children: [
 				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 					className: "flex items-center gap-3 px-4 py-3 border-b border-slate-100",
@@ -2679,10 +3227,11 @@ function CommandPalette({ open, onClose, items, query, onQueryChange, placeholde
 *     ]}
 *   />
 */
-function Breadcrumb({ items, showHome = true, ariaLabel = "Breadcrumb" }) {
+function Breadcrumb({ items, showHome = true, ariaLabel = "Breadcrumb", className = "" }) {
 	if (items.length === 0) return null;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("nav", {
 		"aria-label": ariaLabel,
+		className: cn(className),
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("ol", {
 			className: "flex flex-wrap items-center gap-1 text-sm font-semibold text-slate-400",
 			children: [showHome && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("li", {
@@ -2823,7 +3372,7 @@ function TabList({ "aria-label": ariaLabel, children, className = "" }) {
 		role: "tablist",
 		"aria-label": ariaLabel,
 		onKeyDown: handleKeyDown,
-		className: `flex border-b-2 border-slate-200 ${className}`,
+		className: cn("flex border-b-2 border-slate-200", className),
 		children
 	});
 }
@@ -2843,12 +3392,7 @@ function Tab({ value, disabled = false, children, className = "" }) {
 		disabled,
 		tabIndex: isActive ? 0 : -1,
 		onClick: () => activate(value),
-		className: [
-			"relative px-5 py-3 text-sm font-semibold font-heading border-b-4 transition-colors",
-			"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-brand-blue/30",
-			isActive ? "border-brand-blue text-brand-blue" : disabled ? "border-transparent text-slate-300 cursor-not-allowed" : "border-transparent text-slate-500 hover:text-slate-700 hover:border-slate-300",
-			className
-		].filter(Boolean).join(" "),
+		className: cn("relative px-5 py-3 text-sm font-semibold font-heading border-b-4 transition-colors", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-brand-blue/30", isActive ? "border-brand-blue text-brand-blue" : disabled ? "border-transparent text-slate-300 cursor-not-allowed" : "border-transparent text-slate-500 hover:text-slate-700 hover:border-slate-300", className),
 		children
 	});
 }
@@ -2866,7 +3410,7 @@ function TabPanel({ value, children, className = "" }) {
 		role: "tabpanel",
 		"aria-labelledby": tabId(baseId, value),
 		tabIndex: 0,
-		className: ["focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-brand-blue/30 rounded-sm", className].filter(Boolean).join(" "),
+		className: cn("focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-brand-blue/30 rounded-sm", className),
 		children
 	});
 }
@@ -2899,14 +3443,14 @@ function getPageNumbers(current, total) {
 	pages.push(total);
 	return pages;
 }
-function Pagination({ page, totalPages, onPageChange, ariaLabel = "Pagination", totalItems, pageSize, itemLabel = "items" }) {
+function Pagination({ page, totalPages, onPageChange, ariaLabel = "Pagination", totalItems, pageSize, itemLabel = "items", className = "" }) {
 	if (totalPages <= 1 && !totalItems) return null;
 	const showRecordCount = typeof totalItems === "number" && typeof pageSize === "number";
 	const rangeStart = showRecordCount ? (page - 1) * pageSize + 1 : null;
 	const rangeEnd = showRecordCount ? Math.min(page * pageSize, totalItems) : null;
 	const pageNumbers = getPageNumbers(page, totalPages);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: "flex items-center justify-between gap-4",
+		className: cn("flex items-center justify-between gap-4", className),
 		children: [showRecordCount ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("p", {
 			className: "text-[11px] font-bold tabular-nums text-slate-400",
 			"aria-live": "polite",
@@ -2975,14 +3519,19 @@ function resolveState(id, currentStep, completedSteps, disabledSteps) {
 	if (id === currentStep) return "current";
 	return "upcoming";
 }
-function StepCircle({ state, number, icon }) {
+function StepCircle({ state, number, icon, dark = false }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		className: `flex h-9 w-9 shrink-0 items-center justify-center rounded-full border-2 text-sm font-bold transition-all ${{
+		className: `flex h-9 w-9 shrink-0 items-center justify-center rounded-full border-2 text-sm font-bold transition-all ${(dark ? {
+			completed: "border-[#2D8ACA] bg-[#2D8ACA] text-white",
+			current: "border-white bg-white text-[#00377B] shadow-md shadow-black/20",
+			upcoming: "border-white/30 bg-white/10 text-white/60",
+			disabled: "border-white/10 bg-white/5 text-white/20"
+		} : {
 			completed: "border-brand-blue bg-brand-blue text-white",
 			current: "border-brand-blue bg-white text-brand-blue shadow-md shadow-brand-blue/15",
 			upcoming: "border-slate-300 bg-white text-slate-400",
 			disabled: "border-slate-200 bg-slate-50 text-slate-300"
-		}[state]}`,
+		})[state]}`,
 		"aria-hidden": "true",
 		children: state === "completed" ? icon ?? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Check, {
 			size: 16,
@@ -2990,17 +3539,31 @@ function StepCircle({ state, number, icon }) {
 		}) : icon ?? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: number })
 	});
 }
-function Stepper({ steps, currentStep, completedSteps = [], disabledSteps = [], orientation = "horizontal", className = "" }) {
-	if (!(orientation === "horizontal")) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+function Stepper({ steps, currentStep, completedSteps = [], disabledSteps = [], orientation = "horizontal", theme = "light", className = "" }) {
+	const isHorizontal = orientation === "horizontal";
+	const dark = theme === "dark";
+	if (!isHorizontal) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		role: "group",
 		"aria-label": "Progress",
-		className: ["flex flex-col", className].filter(Boolean).join(" "),
+		className: cn("flex flex-col", className),
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("ol", {
 			className: "flex flex-col",
 			children: steps.map((step, idx) => {
 				const state = resolveState(step.id, currentStep, completedSteps, disabledSteps);
 				const isCurrent = state === "current";
 				const isLast = idx === steps.length - 1;
+				const labelColor = dark ? {
+					completed: "text-[#2D8ACA]",
+					current: "text-white font-bold",
+					upcoming: "text-white/60",
+					disabled: "text-white/20"
+				} : {
+					completed: "text-brand-blue",
+					current: "text-brand-navy font-bold",
+					upcoming: "text-slate-500",
+					disabled: "text-slate-300"
+				};
+				const connectorColor = dark ? state === "completed" ? "bg-[#2D8ACA]/50" : "bg-white/15" : state === "completed" ? "bg-brand-blue/50" : "bg-slate-200";
 				return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("li", {
 					"aria-current": isCurrent ? "step" : void 0,
 					className: "flex items-start gap-4 pb-8 last:pb-0",
@@ -3009,23 +3572,19 @@ function Stepper({ steps, currentStep, completedSteps = [], disabledSteps = [],
 						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(StepCircle, {
 							state,
 							number: idx + 1,
-							icon: step.icon
+							icon: step.icon,
+							dark
 						}), !isLast && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-							className: `mt-1 w-0.5 flex-1 min-h-[32px] ${state === "completed" ? "bg-brand-blue/50" : "bg-slate-200"}`,
+							className: `mt-1 w-0.5 flex-1 min-h-[32px] ${connectorColor}`,
 							"aria-hidden": "true"
 						})]
 					}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 						className: "min-w-0 flex-1 pt-1",
 						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-							className: `text-sm leading-tight ${{
-								completed: "text-brand-blue",
-								current: "text-brand-navy font-bold",
-								upcoming: "text-slate-500",
-								disabled: "text-slate-300"
-							}[state]}`,
+							className: `text-sm leading-tight ${labelColor[state]}`,
 							children: step.label
 						}), step.description && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-							className: "mt-0.5 text-xs text-slate-400 leading-tight",
+							className: `mt-0.5 text-xs leading-tight ${dark ? "text-white/40" : "text-slate-400"}`,
 							children: step.description
 						})]
 					})]
@@ -3034,7 +3593,12 @@ function Stepper({ steps, currentStep, completedSteps = [], disabledSteps = [],
 		})
 	});
 	const resolvedStates = steps.map((step) => resolveState(step.id, currentStep, completedSteps, disabledSteps));
-	const labelColor = {
+	const labelColor = dark ? {
+		completed: "text-[#2D8ACA]",
+		current: "text-white font-bold",
+		upcoming: "text-white/60",
+		disabled: "text-white/20"
+	} : {
 		completed: "text-brand-blue",
 		current: "text-brand-navy font-bold",
 		upcoming: "text-slate-500",
@@ -3043,7 +3607,7 @@ function Stepper({ steps, currentStep, completedSteps = [], disabledSteps = [],
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		role: "group",
 		"aria-label": "Progress",
-		className: ["w-full", className].filter(Boolean).join(" "),
+		className: cn("w-full", className),
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("ol", {
 			className: "grid w-full",
 			style: { gridTemplateColumns: `repeat(${steps.length}, 1fr)` },
@@ -3052,6 +3616,9 @@ function Stepper({ steps, currentStep, completedSteps = [], disabledSteps = [],
 				const isCurrent = state === "current";
 				const isLast = idx === steps.length - 1;
 				const prevState = idx > 0 ? resolvedStates[idx - 1] : null;
+				const connectorDone = prevState === "completed" || prevState === "current";
+				const connectorLeft = dark ? connectorDone ? "bg-[#2D8ACA]/50" : "bg-white/15" : connectorDone ? "bg-brand-blue/50" : "bg-slate-200";
+				const connectorRight = dark ? state === "completed" ? "bg-[#2D8ACA]/50" : "bg-white/15" : state === "completed" ? "bg-brand-blue/50" : "bg-slate-200";
 				return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("li", {
 					"aria-current": isCurrent ? "step" : void 0,
 					className: "flex flex-col items-center",
@@ -3059,7 +3626,7 @@ function Stepper({ steps, currentStep, completedSteps = [], disabledSteps = [],
 						className: "flex w-full items-center",
 						children: [
 							idx > 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-								className: `h-0.5 flex-1 ${prevState === "completed" || prevState === "current" ? "bg-brand-blue/50" : "bg-slate-200"}`,
+								className: `h-0.5 flex-1 ${connectorLeft}`,
 								"aria-hidden": "true"
 							}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 								className: "flex-1",
@@ -3070,11 +3637,12 @@ function Stepper({ steps, currentStep, completedSteps = [], disabledSteps = [],
 								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StepCircle, {
 									state,
 									number: idx + 1,
-									icon: step.icon
+									icon: step.icon,
+									dark
 								})
 							}),
 							!isLast ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-								className: `h-0.5 flex-1 ${state === "completed" ? "bg-brand-blue/50" : "bg-slate-200"}`,
+								className: `h-0.5 flex-1 ${connectorRight}`,
 								"aria-hidden": "true"
 							}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 								className: "flex-1",
@@ -3087,7 +3655,7 @@ function Stepper({ steps, currentStep, completedSteps = [], disabledSteps = [],
 							className: `text-sm leading-tight ${labelColor[state]}`,
 							children: step.label
 						}), step.description && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-							className: "mt-0.5 text-xs text-slate-400 leading-tight",
+							className: `mt-0.5 text-xs leading-tight ${dark ? "text-white/40" : "text-slate-400"}`,
 							children: step.description
 						})]
 					})]
@@ -3241,10 +3809,23 @@ function Dropdown({ trigger, isOpen, onToggle, onClose, children, triggerClassNa
 	const ref = (0, react.useRef)(null);
 	const triggerRef = (0, react.useRef)(null);
 	const panelId = `${(0, react.useId)().replace(/:/g, "")}-panel`;
+	const [panelStyle, setPanelStyle] = (0, react.useState)({});
+	(0, react.useEffect)(() => {
+		if (!isOpen || !triggerRef.current) return;
+		const rect = triggerRef.current.getBoundingClientRect();
+		setPanelStyle({
+			position: "fixed",
+			top: rect.bottom + 4,
+			left: rect.left,
+			zIndex: 9999,
+			minWidth: Math.max(rect.width, 180)
+		});
+	}, [isOpen]);
 	(0, react.useEffect)(() => {
 		if (!isOpen) return;
 		const handlePointerDown = (e) => {
-			if (ref.current && !ref.current.contains(e.target)) {
+			const target = e.target;
+			if (ref.current && !ref.current.contains(target)) {
 				onClose();
 				triggerRef.current?.focus();
 			}
@@ -3274,21 +3855,14 @@ function Dropdown({ trigger, isOpen, onToggle, onClose, children, triggerClassNa
 			"aria-expanded": isOpen,
 			"aria-haspopup": "true",
 			"aria-controls": isOpen ? panelId : void 0,
-			className: [
-				"inline-flex items-center gap-2 rounded-lg px-4 py-2 text-sm font-bold text-slate-600 transition-all",
-				"hover:bg-slate-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-blue/30",
-				triggerClassName
-			].filter(Boolean).join(" "),
+			className: cn("inline-flex items-center gap-2 rounded-lg px-4 py-2 text-sm font-bold text-slate-600 transition-all", "hover:bg-slate-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-blue/30", triggerClassName),
 			children: trigger
-		}), isOpen && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		}), isOpen && (0, react_dom.createPortal)(/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 			id: panelId,
-			className: [
-				"absolute top-full left-0 z-20 mt-1 min-w-[180px] max-h-[280px] overflow-y-auto",
-				"rounded-xl border border-slate-200 bg-white shadow-lg",
-				panelClassName
-			].filter(Boolean).join(" "),
+			style: panelStyle,
+			className: cn("max-h-[280px] overflow-y-auto", "rounded-xl border border-slate-200 bg-white shadow-lg", panelClassName),
 			children
-		})]
+		}), document.body)]
 	});
 }
 //#endregion
@@ -3315,15 +3889,36 @@ function Dropdown({ trigger, isOpen, onToggle, onClose, children, triggerClassNa
 *     ]}
 *   />
 */
-function Menu({ trigger, items, ariaLabel = "Menu", align = "right" }) {
-	const [open, setOpen] = (0, react.useState)(false);
+function Menu({ trigger, items, ariaLabel = "Menu", align = "right", open: controlledOpen, onOpenChange, panelClassName = "" }) {
+	const [internalOpen, setInternalOpen] = (0, react.useState)(false);
+	const isControlled = controlledOpen !== void 0;
+	const open = isControlled ? controlledOpen : internalOpen;
+	const setOpen = (next) => {
+		if (!isControlled) setInternalOpen(next);
+		onOpenChange?.(next);
+	};
 	const containerRef = (0, react.useRef)(null);
 	const triggerRef = (0, react.useRef)(null);
+	const panelRef = (0, react.useRef)(null);
 	const itemRefs = (0, react.useRef)([]);
+	const [panelStyle, setPanelStyle] = (0, react.useState)({});
+	(0, react.useEffect)(() => {
+		if (!open || !triggerRef.current) return;
+		const rect = triggerRef.current.getBoundingClientRect();
+		const PANEL_MIN_WIDTH = 176;
+		setPanelStyle({
+			position: "fixed",
+			top: rect.bottom + 4,
+			left: align === "left" ? rect.left : Math.max(0, rect.right - PANEL_MIN_WIDTH),
+			zIndex: 9999,
+			minWidth: Math.max(rect.width, PANEL_MIN_WIDTH)
+		});
+	}, [open, align]);
 	(0, react.useEffect)(() => {
 		if (!open) return;
 		const handlePointerDown = (e) => {
-			if (containerRef.current && !containerRef.current.contains(e.target)) {
+			const target = e.target;
+			if (containerRef.current && !containerRef.current.contains(target) && !(panelRef.current && panelRef.current.contains(target))) {
 				setOpen(false);
 				(triggerRef.current?.querySelector("button,a,[tabindex]"))?.focus();
 			}
@@ -3364,22 +3959,23 @@ function Menu({ trigger, items, ariaLabel = "Menu", align = "right" }) {
 			focusItem(items.length - 1);
 		}
 	};
-	const panelAlign = align === "left" ? "left-0" : "right-0";
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		className: "relative inline-block",
 		ref: containerRef,
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 			ref: triggerRef,
-			onClick: () => setOpen((v) => !v),
+			onClick: () => setOpen(!open),
 			className: "cursor-pointer",
 			children: (0, react.isValidElement)(trigger) ? (0, react.cloneElement)(trigger, {
 				"aria-expanded": open,
 				"aria-haspopup": "menu"
 			}) : trigger
-		}), open && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		}), open && (0, react_dom.createPortal)(/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			ref: panelRef,
 			role: "menu",
 			"aria-label": ariaLabel,
-			className: `absolute top-full ${panelAlign} z-30 mt-1 min-w-[11rem] overflow-hidden rounded-xl border border-slate-200 bg-white py-1 shadow-xl`,
+			style: panelStyle,
+			className: cn("overflow-hidden rounded-xl border border-slate-200 bg-white py-1 shadow-xl", panelClassName),
 			children: items.map((item, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
 				ref: (node) => {
 					itemRefs.current[index] = node;
@@ -3405,7 +4001,7 @@ function Menu({ trigger, items, ariaLabel = "Menu", align = "right" }) {
 					children: item.icon
 				}), item.label]
 			}, item.label))
-		})]
+		}), document.body)]
 	});
 }
 //#endregion
@@ -3420,13 +4016,13 @@ function Card({ variant = "default", children, className = "", onClick }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(onClick ? "button" : "div", {
 		type: onClick ? "button" : void 0,
 		onClick,
-		className: `overflow-hidden rounded-lg ${VARIANT_CLASS[variant]} ${className}`,
+		className: cn("overflow-hidden rounded-lg", VARIANT_CLASS[variant], className),
 		children
 	});
 }
-function CardHeader({ title, description, actions }) {
+function CardHeader({ title, description, actions, className = "" }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: "flex items-start justify-between gap-3 px-5 py-4 border-b-2 border-slate-100",
+		className: cn("flex items-start justify-between gap-3 px-5 py-4 border-b-2 border-slate-100", className),
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 			className: "min-w-0",
 			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", {
@@ -3444,13 +4040,13 @@ function CardHeader({ title, description, actions }) {
 }
 function CardContent({ children, className = "" }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		className: `px-5 py-4 ${className}`,
+		className: cn("px-5 py-4", className),
 		children
 	});
 }
 function CardFooter({ children, className = "" }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		className: `flex items-center justify-end gap-2 border-t border-slate-100 px-5 py-3 ${className}`,
+		className: cn("flex items-center justify-end gap-2 border-t border-slate-100 px-5 py-3", className),
 		children
 	});
 }
@@ -3516,7 +4112,7 @@ function Accordion({ type = "single", defaultValue, value: controlledValue, onVa
 			toggle
 		},
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-			className: `divide-y divide-slate-200 rounded-xl border border-slate-200 ${className}`,
+			className: cn("divide-y divide-slate-200 rounded-xl border border-slate-200", className),
 			children
 		})
 	});
@@ -3533,7 +4129,7 @@ function AccordionItem({ value, disabled = false, children, className = "" }) {
 			triggerId
 		},
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-			className: `${className}`,
+			className: cn(className),
 			children
 		})
 	});
@@ -3550,12 +4146,7 @@ function AccordionTrigger({ children, className = "" }) {
 		"aria-disabled": disabled || void 0,
 		disabled,
 		onClick: () => toggle(value),
-		className: [
-			"flex w-full items-center justify-between px-5 py-4 text-left text-sm font-semibold",
-			"transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-brand-blue/30",
-			disabled ? "cursor-not-allowed text-slate-300" : "text-slate-800 hover:bg-slate-50",
-			className
-		].filter(Boolean).join(" "),
+		className: cn("flex w-full items-center justify-between px-5 py-4 text-left text-sm font-semibold", "transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-brand-blue/30", disabled ? "cursor-not-allowed text-slate-300" : "text-slate-800 hover:bg-slate-50", className),
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ChevronDown, {
 			size: 16,
 			"aria-hidden": "true",
@@ -3566,13 +4157,21 @@ function AccordionTrigger({ children, className = "" }) {
 function AccordionContent({ children, className = "" }) {
 	const { openValues } = useAccordionContext();
 	const { value, panelId, triggerId } = useItemContext();
-	if (!openValues.has(value)) return null;
+	const isOpen = openValues.has(value);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		id: panelId,
 		role: "region",
 		"aria-labelledby": triggerId,
-		className: `border-t border-slate-100 px-5 py-4 text-sm font-medium text-slate-600 ${className}`,
-		children
+		"aria-hidden": !isOpen || void 0,
+		"data-state": isOpen ? "open" : "closed",
+		className: cn("grid overflow-hidden transition-[grid-template-rows] duration-200 ease-out", isOpen ? "grid-rows-[1fr]" : "grid-rows-[0fr]"),
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "min-h-0",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: cn("border-t border-slate-100 px-5 py-4 text-sm font-medium text-slate-600", className),
+				children
+			})
+		})
 	});
 }
 //#endregion
@@ -3584,25 +4183,17 @@ var LAYOUT_CLASS = {
 };
 function DescriptionList({ layout = "vertical", children, className = "" }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("dl", {
-		className: `${LAYOUT_CLASS[layout]} ${className}`,
+		className: cn(LAYOUT_CLASS[layout], className),
 		children
 	});
 }
 function DescriptionItem({ label, value, fullWidth = false, className = "" }) {
 	const isEmpty = value === void 0 || value === null || value === "";
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("dt", {
-		className: [
-			"text-xs font-bold uppercase tracking-[0.12em] text-slate-500",
-			fullWidth ? "sm:col-span-2" : "",
-			className
-		].filter(Boolean).join(" "),
+		className: cn("text-xs font-bold uppercase tracking-[0.12em] text-slate-500", fullWidth && "sm:col-span-2", className),
 		children: label
 	}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("dd", {
-		className: [
-			"text-sm font-medium text-slate-800",
-			fullWidth ? "sm:col-span-2" : "",
-			isEmpty ? "text-slate-300" : ""
-		].filter(Boolean).join(" "),
+		className: cn("text-sm font-medium text-slate-800", fullWidth && "sm:col-span-2", isEmpty && "text-slate-300"),
 		children: isEmpty ? "—" : value
 	})] });
 }
@@ -3612,7 +4203,7 @@ function ActivityFeed({ events, "aria-label": ariaLabel = "Activity feed", class
 	if (events.length === 0) return null;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("ol", {
 		"aria-label": ariaLabel,
-		className: `space-y-0 ${className}`,
+		className: cn("space-y-0", className),
 		children: events.map((event, i) => {
 			const isLast = i === events.length - 1;
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("li", {
@@ -3693,7 +4284,7 @@ var STATUS_LABEL = {
 function ApprovalTimeline({ steps, "aria-label": ariaLabel = "Approval workflow", className = "" }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("ol", {
 		"aria-label": ariaLabel,
-		className: `space-y-0 ${className}`,
+		className: cn("space-y-0", className),
 		children: steps.map((step, i) => {
 			const isLast = i === steps.length - 1;
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("li", {
@@ -3745,13 +4336,13 @@ function ApprovalTimeline({ steps, "aria-label": ariaLabel = "Approval workflow"
 //#region src/ui-library/gallery/timeline/Timeline.tsx
 function Timeline({ children, className = "" }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		className: `w-full space-y-0 ${className}`,
+		className: cn("w-full space-y-0", className),
 		children
 	});
 }
-function TimelineItem({ isFirst, isLast, children }) {
+function TimelineItem({ isFirst, isLast, children, className = "" }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: "flex gap-3",
+		className: cn("flex gap-3", className),
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 			className: "flex flex-col items-center shrink-0 pt-4",
 			"aria-hidden": "true",
@@ -3831,9 +4422,9 @@ function TimelineFooter({ reason, source }) {
 		}), source] })]
 	});
 }
-function TimelineEmptyState({ icon, title, description }) {
+function TimelineEmptyState({ icon, title, description, className = "" }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: "py-16 text-center",
+		className: cn("py-16 text-center", className),
 		children: [
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 				className: "mx-auto mb-3 flex h-12 w-12 items-center justify-center rounded-xl bg-slate-50",
@@ -3858,12 +4449,7 @@ function TimelineEmptyState({ icon, title, description }) {
 //#region src/ui-library/gallery/empty-state/EmptyState.tsx
 function EmptyState({ title, hint, icon, action, className = "" }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: [
-			"flex flex-col items-center justify-center gap-2",
-			"rounded-lg border border-brand-sky/20 bg-brand-sky/[0.04]",
-			"px-6 py-12 text-center",
-			className
-		].filter(Boolean).join(" "),
+		className: cn("flex flex-col items-center justify-center gap-2", "rounded-lg border border-brand-sky/20 bg-brand-sky/[0.04]", "px-6 py-12 text-center", className),
 		children: [
 			icon && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 				className: "mb-1 text-brand-sky/50",
@@ -3936,7 +4522,7 @@ function ActionButton({ action, variant }) {
 function StatusPage({ eyebrow, title, description, code, icon, primaryAction, secondaryAction, className = "" }) {
 	const hasActions = primaryAction || secondaryAction;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: `relative flex min-h-screen items-center justify-center bg-surface-page px-6 py-16 overflow-hidden ${className}`,
+		className: cn("relative flex min-h-screen items-center justify-center bg-surface-page px-6 py-16 overflow-hidden", className),
 		children: [code ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 			"aria-hidden": "true",
 			className: "pointer-events-none absolute select-none font-heading font-bold text-brand-navy opacity-[0.07] text-[80px] sm:text-[120px] leading-none",
@@ -3982,7 +4568,7 @@ function StatusPage({ eyebrow, title, description, code, icon, primaryAction, se
 //#region src/ui-library/gallery/employee-card/EmployeeCard.tsx
 function EmployeeCard({ name, role, avatarSrc, status, meta, actions, className = "" }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("article", {
-		className: `rounded-2xl border border-slate-200 bg-white shadow-sm overflow-hidden ${className}`,
+		className: cn("rounded-2xl border border-slate-200 bg-white shadow-sm overflow-hidden", className),
 		"aria-label": `${name}${role ? ", " + role : ""}`,
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 			className: "h-1.5 bg-gradient-to-r from-brand-navy to-brand-blue",
@@ -4229,7 +4815,7 @@ function TreeView({ items, selectedId, onSelect, "aria-label": ariaLabel, classN
 		role: "tree",
 		"aria-label": ariaLabel,
 		onKeyDown: handleKeyDown,
-		className: `flex flex-col gap-0.5 outline-none ${className}`,
+		className: cn("flex flex-col gap-0.5 outline-none", className),
 		tabIndex: 0,
 		children: items.map((item) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TreeNode, {
 			item,
@@ -7432,23 +8018,26 @@ var TREND_CONFIG = {
 		label: "No change"
 	}
 };
-function Statistic({ label, value, helper, icon: Icon, trend, trendLabel, variant = "default" }) {
-	if (variant === "minimal") return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [
-		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-			className: "text-[11px] font-bold uppercase tracking-[0.18em] text-brand-sky",
-			children: label
-		}),
-		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-			className: "mt-1 font-heading text-4xl font-bold tabular-nums text-brand-navy",
-			children: value
-		}),
-		helper && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-			className: "mt-1 text-xs font-medium text-slate-400",
-			children: helper
-		})
-	] });
+function Statistic({ label, value, helper, icon: Icon, trend, trendLabel, variant = "default", className = "" }) {
+	if (variant === "minimal") return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: cn(className),
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+				className: "text-[11px] font-bold uppercase tracking-[0.18em] text-brand-sky",
+				children: label
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+				className: "mt-1 font-heading text-4xl font-bold tabular-nums text-brand-navy",
+				children: value
+			}),
+			helper && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+				className: "mt-1 text-xs font-medium text-slate-400",
+				children: helper
+			})
+		]
+	});
 	if (variant === "compact") return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: "flex items-center gap-4 rounded-2xl border border-slate-200 bg-white px-5 py-4 shadow-sm",
+		className: cn("flex items-center gap-4 rounded-2xl border border-slate-200 bg-white px-5 py-4 shadow-sm", className),
 		children: [Icon && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 			className: "flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-brand-navy/[0.06] text-brand-navy",
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, {
@@ -7473,10 +8062,11 @@ function Statistic({ label, value, helper, icon: Icon, trend, trendLabel, varian
 			]
 		})]
 	});
+	const stripColor = variant === "accent" ? "bg-brand-blue" : "bg-brand-navy";
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: "relative overflow-hidden rounded-2xl border border-slate-200 bg-white shadow-sm",
+		className: cn("relative overflow-hidden rounded-2xl border border-slate-200 bg-white shadow-sm", className),
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-			className: `absolute inset-y-0 left-0 w-1 ${variant === "accent" ? "bg-brand-blue" : "bg-brand-navy"}`,
+			className: `absolute inset-y-0 left-0 w-1 ${stripColor}`,
 			"aria-hidden": "true"
 		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 			className: "px-6 py-5",
@@ -7522,6 +8112,18 @@ function Statistic({ label, value, helper, icon: Icon, trend, trendLabel, varian
 }
 //#endregion
 //#region src/ui-library/gallery/status-dot/StatusDot.tsx
+/**
+* StatusDot — Design System Component
+*
+* A coloured glowing dot paired with a label. Used in tables to indicate
+* account or entity status at a glance.
+*
+* Self-contained: uses inline styles so it works without any external CSS.
+*
+* Usage:
+*   <StatusDot status="active" label="Active" />
+*   <StatusDot status="locked" label="Locked" />
+*/
 var DOT_STYLES = {
 	active: {
 		bg: "#10b981",
@@ -7543,15 +8145,7 @@ var DOT_STYLES = {
 function StatusDot({ status, label, className = "" }) {
 	const dot = DOT_STYLES[status];
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		style: {
-			display: "inline-flex",
-			alignItems: "center",
-			gap: 8,
-			fontWeight: 600,
-			fontSize: "0.8125rem",
-			color: "#334155"
-		},
-		className,
+		className: cn("inline-flex items-center gap-2 text-[0.8125rem] font-semibold text-slate-700", className),
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 			"aria-hidden": "true",
 			style: {
@@ -7622,7 +8216,7 @@ function applyColumnOrder(columns, order) {
 	for (const col of columns) if (!seen.has(col.key)) result.push(col);
 	return result;
 }
-function ColumnManager({ columns, hiddenColumnKeys, columnOrder, onHiddenColumnKeysChange, onColumnOrderChange, onReset, triggerLabel = "Columns" }) {
+function ColumnManager({ columns, hiddenColumnKeys, columnOrder, onHiddenColumnKeysChange, onColumnOrderChange, onReset, triggerLabel = "Columns", className = "" }) {
 	const [open, setOpen] = (0, react.useState)(false);
 	const triggerRef = (0, react.useRef)(null);
 	const panelRef = (0, react.useRef)(null);
@@ -7666,7 +8260,7 @@ function ColumnManager({ columns, hiddenColumnKeys, columnOrder, onHiddenColumnK
 		onColumnOrderChange(next.map((c) => c.key));
 	}
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: "relative inline-block",
+		className: cn("relative inline-block", className),
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
 			ref: triggerRef,
 			type: "button",
@@ -8023,6 +8617,7 @@ exports.RadioGroup = RadioGroup;
 exports.RadioItem = RadioItem;
 exports.ReportTemplate = ReportTemplate;
 exports.STATUS_PAGE_PRESETS = STATUS_PAGE_PRESETS;
+exports.Search = Search;
 exports.Section = Section;
 exports.SegmentedControl = SegmentedControl;
 exports.Select = Select;