@pk-design/react-tailwind 1.6.0 → 1.7.1

package/dist/react-tailwind.es.js

@@ -1,16 +1,16 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import * as React from 'react';
-import React__default, { useId, useMemo, useState, forwardRef, Children, isValidElement, cloneElement, useRef, useImperativeHandle, useEffect, useCallback, Fragment as Fragment$1, useLayoutEffect, createContext, useContext } from 'react';
+import React__default, { useId, useMemo, useState, forwardRef, Children, isValidElement, cloneElement, useRef, useImperativeHandle, useEffect, useCallback, Fragment as Fragment$1, createContext, useContext, useLayoutEffect } from 'react';
 import { twMerge } from 'tailwind-merge';
 import { Dialog, DialogBackdrop, DialogPanel, DialogTitle, Menu, MenuButton, MenuItems, MenuItem, Combobox, ComboboxInput, ComboboxButton, ComboboxOptions, ComboboxOption, TabGroup, TabList, Tab, TabPanels, TabPanel, Transition } from '@headlessui/react';
 import { FixedSizeList } from 'react-window';
 
 const buildClassName = (...classes) => twMerge(classes.filter(Boolean));
 
-var _path$i;
-function _extends$i() { return _extends$i = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$i.apply(null, arguments); }
+var _path$j;
+function _extends$j() { return _extends$j = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$j.apply(null, arguments); }
 var SvgChevronDown = function SvgChevronDown(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$i({
+  return /*#__PURE__*/React.createElement("svg", _extends$j({
     xmlns: "http://www.w3.org/2000/svg",
     width: 24,
     height: 24,
@@ -21,19 +21,19 @@ var SvgChevronDown = function SvgChevronDown(props) {
     strokeWidth: 2,
     className: "lucide lucide-chevron-down-icon lucide-chevron-down",
     viewBox: "0 0 24 24"
-  }, props), _path$i || (_path$i = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$j || (_path$j = /*#__PURE__*/React.createElement("path", {
     d: "m6 9 6 6 6-6"
   })));
 };
 
 const CONTAINER_CLASS = {
-    bordered: 'rounded-lg border border-gray-200 dark:border-white/10 divide-y divide-gray-200 dark:divide-white/10 bg-white dark:bg-gray-800 overflow-hidden',
+    bordered: 'rounded-lg border border-[var(--ui-border)] divide-y divide-[var(--ui-border)] bg-white dark:bg-gray-800 overflow-hidden',
     separated: 'space-y-2',
-    plain: 'divide-y divide-gray-200 dark:divide-white/10',
+    plain: 'divide-y divide-[var(--ui-border)]',
 };
 const ITEM_CLASS = {
     bordered: '',
-    separated: 'rounded-lg border border-gray-200 dark:border-white/10 bg-white dark:bg-gray-800 overflow-hidden',
+    separated: 'rounded-lg border border-[var(--ui-border)] bg-white dark:bg-gray-800 overflow-hidden',
     plain: '',
 };
 const HEADER_CLASS = 'flex w-full items-center justify-between gap-2 py-3 px-4 text-left text-sm font-medium ' +
@@ -78,115 +78,6 @@ const Accordion = ({ items, type = 'single', variant = 'bordered', collapsible =
 };
 Accordion.displayName = 'Accordion';
 
-var _path$h, _path2;
-function _extends$h() { return _extends$h = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$h.apply(null, arguments); }
-var SvgBadgeCheck = function SvgBadgeCheck(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$h({
-    xmlns: "http://www.w3.org/2000/svg",
-    width: 24,
-    height: 24,
-    fill: "none",
-    stroke: "currentColor",
-    strokeLinecap: "round",
-    strokeLinejoin: "round",
-    strokeWidth: 2,
-    className: "lucide lucide-badge-check-icon lucide-badge-check",
-    viewBox: "0 0 24 24"
-  }, props), _path$h || (_path$h = /*#__PURE__*/React.createElement("path", {
-    d: "M3.85 8.62a4 4 0 0 1 4.78-4.77 4 4 0 0 1 6.74 0 4 4 0 0 1 4.78 4.78 4 4 0 0 1 0 6.74 4 4 0 0 1-4.77 4.78 4 4 0 0 1-6.75 0 4 4 0 0 1-4.78-4.77 4 4 0 0 1 0-6.76"
-  })), _path2 || (_path2 = /*#__PURE__*/React.createElement("path", {
-    d: "m9 12 2 2 4-4"
-  })));
-};
-
-var _circle$4, _path$g;
-function _extends$g() { return _extends$g = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$g.apply(null, arguments); }
-var SvgCircleX = function SvgCircleX(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$g({
-    xmlns: "http://www.w3.org/2000/svg",
-    width: 24,
-    height: 24,
-    fill: "none",
-    stroke: "currentColor",
-    strokeLinecap: "round",
-    strokeLinejoin: "round",
-    strokeWidth: 2,
-    className: "lucide lucide-circle-x-icon lucide-circle-x",
-    viewBox: "0 0 24 24"
-  }, props), _circle$4 || (_circle$4 = /*#__PURE__*/React.createElement("circle", {
-    cx: 12,
-    cy: 12,
-    r: 10
-  })), _path$g || (_path$g = /*#__PURE__*/React.createElement("path", {
-    d: "m15 9-6 6M9 9l6 6"
-  })));
-};
-
-var _circle$3, _path$f;
-function _extends$f() { return _extends$f = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$f.apply(null, arguments); }
-var SvgCircleAlert = function SvgCircleAlert(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$f({
-    xmlns: "http://www.w3.org/2000/svg",
-    width: 24,
-    height: 24,
-    fill: "none",
-    stroke: "currentColor",
-    strokeLinecap: "round",
-    strokeLinejoin: "round",
-    strokeWidth: 2,
-    className: "lucide lucide-circle-alert-icon lucide-circle-alert",
-    viewBox: "0 0 24 24"
-  }, props), _circle$3 || (_circle$3 = /*#__PURE__*/React.createElement("circle", {
-    cx: 12,
-    cy: 12,
-    r: 10
-  })), _path$f || (_path$f = /*#__PURE__*/React.createElement("path", {
-    d: "M12 8v4M12 16h.01"
-  })));
-};
-
-var _circle$2, _path$e;
-function _extends$e() { return _extends$e = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$e.apply(null, arguments); }
-var SvgInfo = function SvgInfo(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$e({
-    xmlns: "http://www.w3.org/2000/svg",
-    width: 24,
-    height: 24,
-    fill: "none",
-    stroke: "currentColor",
-    strokeLinecap: "round",
-    strokeLinejoin: "round",
-    strokeWidth: 2,
-    className: "lucide lucide-info-icon lucide-info",
-    viewBox: "0 0 24 24"
-  }, props), _circle$2 || (_circle$2 = /*#__PURE__*/React.createElement("circle", {
-    cx: 12,
-    cy: 12,
-    r: 10
-  })), _path$e || (_path$e = /*#__PURE__*/React.createElement("path", {
-    d: "M12 16v-4M12 8h.01"
-  })));
-};
-
-var _path$d;
-function _extends$d() { return _extends$d = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$d.apply(null, arguments); }
-var SvgX = function SvgX(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$d({
-    xmlns: "http://www.w3.org/2000/svg",
-    width: 24,
-    height: 24,
-    fill: "none",
-    stroke: "currentColor",
-    strokeLinecap: "round",
-    strokeLinejoin: "round",
-    strokeWidth: 2,
-    className: "lucide lucide-x-icon lucide-x",
-    viewBox: "0 0 24 24"
-  }, props), _path$d || (_path$d = /*#__PURE__*/React.createElement("path", {
-    d: "M18 6 6 18M6 6l12 12"
-  })));
-};
-
 const loaderSizeMap = {
     xs: 'size-4',
     sm: 'size-6',
@@ -253,8 +144,8 @@ const THEMED_BTN_CLASS = {
         plain: 'text-[var(--ui-danger-text)] hover:bg-black/5 dark:hover:bg-gray-700 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-[var(--ui-danger-ring)] disabled:text-[var(--ui-danger-disabled)]',
     },
     secondary: {
-        default: 'text-gray-700 bg-white border border-gray-300 hover:bg-gray-100 dark:bg-gray-800 dark:text-white dark:border-gray-600 dark:hover:bg-gray-700 dark:hover:border-gray-600 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-[var(--ui-focus-ring)] disabled:bg-gray-200 dark:disabled:bg-gray-700',
-        outlined: 'text-gray-700 hover:text-white border border-gray-500 hover:bg-gray-700 dark:border-gray-500 dark:text-gray-200 dark:hover:text-white dark:hover:bg-gray-600 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-[var(--ui-focus-ring)] disabled:text-gray-400 disabled:border-gray-400',
+        default: 'text-gray-700 bg-white border border-[var(--ui-border)] hover:bg-gray-100 dark:bg-gray-800 dark:text-white dark:hover:bg-gray-700 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-[var(--ui-focus-ring)] disabled:bg-gray-200 dark:disabled:bg-gray-700',
+        outlined: 'text-gray-700 hover:text-white border border-[var(--ui-border)] hover:bg-gray-700 dark:text-gray-200 dark:hover:text-white dark:hover:bg-gray-600 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-[var(--ui-focus-ring)] disabled:text-gray-400 disabled:border-[var(--ui-border-muted)]',
         plain: 'text-gray-700 hover:bg-black/5 dark:text-gray-200 dark:hover:bg-gray-700 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-[var(--ui-focus-ring)] disabled:text-gray-400',
     },
     success: {
@@ -346,52 +237,132 @@ const Button = forwardRef(({ as, type, ...props }, ref) => {
 });
 Button.displayName = 'Button';
 
-const AlertTypeIconMap = {
-    success: SvgBadgeCheck,
-    danger: SvgCircleX,
-    warning: SvgCircleAlert,
-    info: SvgInfo,
+var _path$i;
+function _extends$i() { return _extends$i = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$i.apply(null, arguments); }
+var SvgChevronLeft = function SvgChevronLeft(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends$i({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 24,
+    height: 24,
+    fill: "none",
+    stroke: "currentColor",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: 2,
+    className: "lucide lucide-chevron-left-icon lucide-chevron-left",
+    viewBox: "0 0 24 24"
+  }, props), _path$i || (_path$i = /*#__PURE__*/React.createElement("path", {
+    d: "m15 18-6-6 6-6"
+  })));
 };
-const TypeClassMap$1 = {
-    success: 'bg-[var(--ui-success-light)] ring-[var(--ui-success-ring-subtle)] text-[var(--ui-success-text)]',
-    danger: 'bg-[var(--ui-danger-light)] ring-[var(--ui-danger-ring-subtle)] text-[var(--ui-danger-text)]',
-    warning: 'bg-[var(--ui-warning-light)] ring-[var(--ui-warning-ring-subtle)] text-[var(--ui-warning-text)]',
-    info: 'bg-[var(--ui-info-light)] ring-[var(--ui-info-ring-subtle)] text-[var(--ui-info-text)]',
+
+var _path$h;
+function _extends$h() { return _extends$h = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$h.apply(null, arguments); }
+var SvgX = function SvgX(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends$h({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 24,
+    height: 24,
+    fill: "none",
+    stroke: "currentColor",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: 2,
+    className: "lucide lucide-x-icon lucide-x",
+    viewBox: "0 0 24 24"
+  }, props), _path$h || (_path$h = /*#__PURE__*/React.createElement("path", {
+    d: "M18 6 6 18M6 6l12 12"
+  })));
 };
-const Alert = forwardRef((props, ref) => {
-    const { type = 'info', className, message, children, removable = false, onRemove, icon, title, ...restProps } = props;
-    const DefaultIcon = AlertTypeIconMap[type] || SvgInfo;
-    const iconNode = icon !== undefined ? (icon) : (jsx(DefaultIcon, { className: "size-5 shrink-0", "data-testid": `alert-${type}-icon` }));
-    return (jsxs("div", { ref: ref, className: buildClassName('flex items-center justify-between rounded-md p-3 text-sm ring-1 ring-inset gap-2', TypeClassMap$1[type], className), ...restProps, children: [jsxs("span", { className: "inline-flex items-start gap-2 min-w-0", children: [iconNode && jsx("span", { className: "shrink-0 inline-flex mt-0.5", children: iconNode }), jsxs("span", { className: "inline-flex flex-col gap-0.5 min-w-0", children: [title && jsx("span", { className: "font-semibold", children: title }), jsx("span", { className: "inline-flex items-center", children: message !== null && message !== void 0 ? message : children })] })] }), removable && (jsx(Button, { iconOnly: true, "aria-label": "Dismiss alert", size: "xs", variant: "plain", theme: "secondary", className: "hover:bg-black/10 dark:hover:bg-white/10 shrink-0", onClick: () => onRemove === null || onRemove === void 0 ? void 0 : onRemove(), "data-testid": "alert-remove-btn", children: jsx(SvgX, { className: "size-4.5", "data-testid": "alert-remove-icon" }) }))] }));
-});
-Alert.displayName = 'Alert';
 
-const ThemeClassMap = {
-    success: 'bg-[var(--ui-success-light)] text-[var(--ui-success-text)] ring-[var(--ui-success-ring-subtle)]',
-    danger: 'bg-[var(--ui-danger-light)] text-[var(--ui-danger-text)] ring-[var(--ui-danger-ring-subtle)]',
-    warning: 'bg-[var(--ui-warning-light)] text-[var(--ui-warning-text)] ring-[var(--ui-warning-ring-subtle)]',
-    info: 'bg-[var(--ui-info-light)] text-[var(--ui-info-text)] ring-[var(--ui-info-ring-subtle)]',
-    secondary: 'bg-gray-50 dark:bg-gray-700 text-gray-700 dark:text-gray-200 ring-[var(--ui-secondary-ring-subtle)]',
+const alignmentMap = {
+    center: 'items-center justify-center h-full',
+    start: 'justify-start h-full',
+    end: 'justify-end h-full',
+    top: 'items-start justify-center w-full',
+    bottom: 'items-end justify-center h-full',
 };
-const SIZE_CLASS$1 = {
-    sm: 'text-xs py-0.5 px-2',
-    md: 'text-xs py-1 px-3',
+const panelAlignmentMap = {
+    center: 'data-[closed]:scale-95 rounded-2xl',
+    start: 'data-[closed]:-translate-x-1/2 rounded-r-2xl',
+    end: 'data-[closed]:translate-x-1/2 rounded-l-2xl',
+    top: 'data-[closed]:-translate-y-1/2 rounded-b-2xl',
+    bottom: 'data-[closed]:translate-y-full rounded-t-2xl md:rounded-t-3xl max-h-[88vh] max-h-[88dvh]',
 };
-const Badge = forwardRef((props, ref) => {
-    const { theme = 'info', className, children, removable = false, rounded = false, onRemove, size = 'md', icon, ...restProps } = props;
-    return (jsxs(TextContent, { ref: ref, className: buildClassName('inline-flex items-center gap-1 font-medium ring-1 ring-inset', SIZE_CLASS$1[size], ThemeClassMap[theme], rounded ? 'rounded-full' : 'rounded-md', icon ? 'pl-2' : '', removable ? 'pr-1' : '', className), "data-testid": `badge-${theme}`, ...restProps, children: [icon && jsx("span", { className: "shrink-0 inline-flex", children: icon }), children, removable && (jsx(SvgX, { className: "size-4 shrink-0 hover:bg-black/10 dark:hover:bg-white/10 rounded-sm cursor-pointer", role: "button", tabIndex: 0, "aria-label": "Remove", onClick: () => onRemove === null || onRemove === void 0 ? void 0 : onRemove(), onKeyDown: (e) => {
-                    if (e.key === 'Enter' || e.key === ' ') {
-                        e.preventDefault();
-                        onRemove === null || onRemove === void 0 ? void 0 : onRemove();
-                    }
-                } }))] }));
-});
-Badge.displayName = 'Badge';
+const panelSizeMap = {
+    xs: 'max-w-xs',
+    sm: 'max-w-sm',
+    md: 'max-w-md',
+    lg: 'max-w-lg',
+    xl: 'max-w-xl',
+    '2xl': 'max-w-2xl',
+    full: 'w-full',
+};
+const Drawer = ({ isOpen, onClose = () => { }, closeOnOutsideClick = true, align = 'end', size = 'md', backdrop = true, title, description, children, footer, footerSticky = false, panelClass = '', contentClass = '', titleClass = '', descriptionClass = '', titleSticky = false, showBackButton = false, showCloseButton = true, dragHandle, }) => {
+    const showTitleSection = Boolean(title || description || showBackButton || showCloseButton);
+    const shouldShowDragHandle = dragHandle !== null && dragHandle !== void 0 ? dragHandle : align === 'bottom';
+    const [viewportHeight, setViewportHeight] = React__default.useState(null);
+    React__default.useEffect(() => {
+        if (!isOpen) {
+            setViewportHeight(null);
+            return;
+        }
+        const updateHeight = () => {
+            if (typeof window !== 'undefined' && window.visualViewport) {
+                setViewportHeight(window.visualViewport.height);
+            }
+        };
+        updateHeight();
+        const vv = typeof window !== 'undefined' ? window.visualViewport : null;
+        vv === null || vv === void 0 ? void 0 : vv.addEventListener('resize', updateHeight);
+        vv === null || vv === void 0 ? void 0 : vv.addEventListener('scroll', updateHeight);
+        return () => {
+            vv === null || vv === void 0 ? void 0 : vv.removeEventListener('resize', updateHeight);
+            vv === null || vv === void 0 ? void 0 : vv.removeEventListener('scroll', updateHeight);
+        };
+    }, [isOpen]);
+    const handleDialogClose = () => {
+        if (closeOnOutsideClick) {
+            onClose === null || onClose === void 0 ? void 0 : onClose();
+        }
+    };
+    return (jsxs(Dialog, { open: isOpen, as: "div", className: "relative z-50 focus:outline-none", onClose: handleDialogClose, transition: true, children: [backdrop && (jsx(DialogBackdrop, { className: "fixed inset-0 bg-black/40 backdrop-blur-xs transition-opacity duration-200" })), jsx("div", { className: "fixed left-0 top-0 w-full", style: { height: viewportHeight ? `${viewportHeight}px` : '100dvh' }, children: jsx("div", { className: buildClassName('flex', alignmentMap[align]), children: jsxs(DialogPanel, { transition: true, className: buildClassName('w-full max-w-full bg-white dark:bg-gray-800 shadow-xl flex flex-col min-w-0', 'overflow-y-auto overflow-x-hidden overscroll-contain touch-pan-y [-webkit-overflow-scrolling:touch] duration-200 ease-out data-[closed]:opacity-0', panelAlignmentMap[align], panelSizeMap[size], panelClass), children: [shouldShowDragHandle && (jsx("div", { className: "w-12 h-1.5 rounded-full bg-gray-300 dark:bg-gray-600 mx-auto my-2.5 shrink-0 cursor-grab", "data-testid": "drawer-drag-handle" })), showTitleSection && (jsxs("div", { className: buildClassName('space-y-1 py-3 px-4 md:px-6 flex flex-col border-b border-[var(--ui-border)] shrink-0', titleSticky && 'sticky top-0 bg-white dark:bg-gray-800 z-10'), children: [jsxs("div", { className: "flex items-center justify-between gap-3 min-w-0", children: [jsxs("div", { className: "flex items-center gap-2 min-w-0 flex-1", children: [showBackButton && (jsx(Button, { iconOnly: true, "aria-label": "Back", variant: "plain", theme: "secondary", size: "xs", onClick: onClose, children: jsx(SvgChevronLeft, { className: "size-4" }) })), title && (jsx(DialogTitle, { as: "h3", className: buildClassName('text-lg font-semibold text-gray-900 dark:text-white truncate tracking-tight min-w-0', titleClass), children: title }))] }), showCloseButton && (jsx(Button, { iconOnly: true, "aria-label": "Close drawer", variant: "plain", theme: "secondary", size: "xs", onClick: onClose, className: "rounded-full text-gray-400 hover:text-gray-600 dark:hover:text-gray-200 shrink-0", children: jsx(SvgX, { className: "size-4" }) }))] }), description && (jsx("p", { className: buildClassName('text-sm text-gray-500 dark:text-gray-400 font-normal truncate', descriptionClass), children: description }))] })), jsx("div", { className: buildClassName('flex-1 p-4 md:p-6 space-y-4 min-w-0', contentClass), children: children }), footer && (jsx("div", { className: buildClassName('p-4 border-t border-[var(--ui-border-muted)] bg-white dark:bg-gray-800 shrink-0 min-w-0', footerSticky && 'sticky bottom-0 z-10'), children: footer }))] }) }) })] }));
+};
+Drawer.displayName = 'Drawer';
 
-var _path$c;
-function _extends$c() { return _extends$c = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$c.apply(null, arguments); }
-var SvgTriangleAlert = function SvgTriangleAlert(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$c({
+function ActionSheet({ isOpen, onClose, title, description, actions, showCancelButton = true, cancelLabel = 'Cancel', onCancel, closeOnBackdropClick = true, dragHandle = true, panelClass = '', containerClass = '', }) {
+    const handleItemClick = (action) => {
+        var _a;
+        if (action.disabled)
+            return;
+        (_a = action.onClick) === null || _a === void 0 ? void 0 : _a.call(action);
+        onClose();
+    };
+    const handleCancelClick = () => {
+        onCancel === null || onCancel === void 0 ? void 0 : onCancel();
+        onClose();
+    };
+    return (jsx(Drawer, { isOpen: isOpen, onClose: onClose, align: "bottom", closeOnOutsideClick: closeOnBackdropClick, showCloseButton: false, dragHandle: dragHandle, panelClass: buildClassName('rounded-t-2xl max-h-[85vh] overflow-hidden', panelClass), "data-testid": "action-sheet-drawer", children: jsxs("div", { className: buildClassName('space-y-4 py-1', containerClass), "data-testid": "action-sheet", children: [(title || description) && (jsxs("div", { className: "text-center px-4 pb-2 border-b border-[var(--ui-border-muted)]", children: [title && (jsx("h3", { className: "text-sm font-bold text-gray-900 dark:text-white truncate", children: title })), description && (jsx("p", { className: "text-xs text-gray-500 dark:text-gray-400 mt-0.5 truncate", children: description }))] })), jsx("div", { className: "space-y-1 bg-gray-50 dark:bg-gray-800/60 p-1.5 rounded-2xl border border-[var(--ui-border-muted)]", children: actions.map((action) => {
+                        const isDanger = action.theme === 'danger';
+                        const isPrimary = action.theme === 'primary';
+                        return (jsxs("button", { type: "button", disabled: action.disabled, onClick: () => handleItemClick(action), className: buildClassName('w-full flex items-center gap-3.5 p-3 rounded-xl text-left transition-all duration-150 group cursor-pointer', action.disabled && 'opacity-50 cursor-not-allowed pointer-events-none', !action.disabled &&
+                                (isDanger
+                                    ? 'hover:bg-red-50 dark:hover:bg-red-950/40 text-red-600 dark:text-red-400 font-semibold'
+                                    : isPrimary
+                                        ? 'hover:bg-blue-50 dark:hover:bg-blue-950/40 text-blue-600 dark:text-blue-400 font-semibold'
+                                        : 'hover:bg-white dark:hover:bg-gray-800 text-gray-800 dark:text-gray-200 font-medium')), "data-testid": `action-sheet-item-${action.id}`, children: [action.icon && (jsx("span", { className: buildClassName('shrink-0 text-base transition-colors', isDanger
+                                        ? 'text-red-500 dark:text-red-400'
+                                        : isPrimary
+                                            ? 'text-blue-500 dark:text-blue-400'
+                                            : 'text-gray-500 dark:text-gray-400 group-hover:text-gray-700 dark:group-hover:text-gray-200'), children: action.icon })), jsxs("div", { className: "min-w-0 flex-1", children: [jsx("div", { className: "text-sm truncate", children: action.label }), action.description && (jsx("div", { className: "text-xs text-gray-400 dark:text-gray-500 truncate font-normal mt-0.5", children: action.description }))] })] }, action.id));
+                    }) }), showCancelButton && (jsx("div", { className: "pt-1", children: jsx(Button, { theme: "secondary", size: "lg", fullWidth: true, onClick: handleCancelClick, className: "font-semibold text-sm rounded-xl py-3", "data-testid": "action-sheet-cancel-btn", children: cancelLabel }) }))] }) }));
+}
+ActionSheet.displayName = 'ActionSheet';
+
+var _path$g, _path2;
+function _extends$g() { return _extends$g = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$g.apply(null, arguments); }
+var SvgBadgeCheck = function SvgBadgeCheck(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends$g({
     xmlns: "http://www.w3.org/2000/svg",
     width: 24,
     height: 24,
@@ -400,17 +371,19 @@ var SvgTriangleAlert = function SvgTriangleAlert(props) {
     strokeLinecap: "round",
     strokeLinejoin: "round",
     strokeWidth: 2,
-    className: "lucide lucide-triangle-alert-icon lucide-triangle-alert",
+    className: "lucide lucide-badge-check-icon lucide-badge-check",
     viewBox: "0 0 24 24"
-  }, props), _path$c || (_path$c = /*#__PURE__*/React.createElement("path", {
-    d: "m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3M12 9v4M12 17h.01"
+  }, props), _path$g || (_path$g = /*#__PURE__*/React.createElement("path", {
+    d: "M3.85 8.62a4 4 0 0 1 4.78-4.77 4 4 0 0 1 6.74 0 4 4 0 0 1 4.78 4.78 4 4 0 0 1 0 6.74 4 4 0 0 1-4.77 4.78 4 4 0 0 1-6.75 0 4 4 0 0 1-4.78-4.77 4 4 0 0 1 0-6.76"
+  })), _path2 || (_path2 = /*#__PURE__*/React.createElement("path", {
+    d: "m9 12 2 2 4-4"
   })));
 };
 
-var _circle$1, _path$b;
-function _extends$b() { return _extends$b = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$b.apply(null, arguments); }
-var SvgCircleCheck = function SvgCircleCheck(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$b({
+var _circle$5, _path$f;
+function _extends$f() { return _extends$f = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$f.apply(null, arguments); }
+var SvgCircleX = function SvgCircleX(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends$f({
     xmlns: "http://www.w3.org/2000/svg",
     width: 24,
     height: 24,
@@ -419,29 +392,160 @@ var SvgCircleCheck = function SvgCircleCheck(props) {
     strokeLinecap: "round",
     strokeLinejoin: "round",
     strokeWidth: 2,
-    className: "lucide lucide-circle-check-icon lucide-circle-check",
+    className: "lucide lucide-circle-x-icon lucide-circle-x",
     viewBox: "0 0 24 24"
-  }, props), _circle$1 || (_circle$1 = /*#__PURE__*/React.createElement("circle", {
+  }, props), _circle$5 || (_circle$5 = /*#__PURE__*/React.createElement("circle", {
     cx: 12,
     cy: 12,
     r: 10
-  })), _path$b || (_path$b = /*#__PURE__*/React.createElement("path", {
-    d: "m9 12 2 2 4-4"
+  })), _path$f || (_path$f = /*#__PURE__*/React.createElement("path", {
+    d: "m15 9-6 6M9 9l6 6"
   })));
 };
 
-const sizeMap = {
-    xs: 'size-4',
-    sm: 'size-5',
-    md: 'size-6',
-    lg: 'size-8',
-    xl: 'size-10',
-};
-const IconMap = {
-    info: SvgInfo,
-    error: SvgCircleX,
-    success: SvgCircleCheck,
-    warning: SvgTriangleAlert,
+var _circle$4, _path$e;
+function _extends$e() { return _extends$e = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$e.apply(null, arguments); }
+var SvgCircleAlert = function SvgCircleAlert(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends$e({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 24,
+    height: 24,
+    fill: "none",
+    stroke: "currentColor",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: 2,
+    className: "lucide lucide-circle-alert-icon lucide-circle-alert",
+    viewBox: "0 0 24 24"
+  }, props), _circle$4 || (_circle$4 = /*#__PURE__*/React.createElement("circle", {
+    cx: 12,
+    cy: 12,
+    r: 10
+  })), _path$e || (_path$e = /*#__PURE__*/React.createElement("path", {
+    d: "M12 8v4M12 16h.01"
+  })));
+};
+
+var _circle$3, _path$d;
+function _extends$d() { return _extends$d = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$d.apply(null, arguments); }
+var SvgInfo = function SvgInfo(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends$d({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 24,
+    height: 24,
+    fill: "none",
+    stroke: "currentColor",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: 2,
+    className: "lucide lucide-info-icon lucide-info",
+    viewBox: "0 0 24 24"
+  }, props), _circle$3 || (_circle$3 = /*#__PURE__*/React.createElement("circle", {
+    cx: 12,
+    cy: 12,
+    r: 10
+  })), _path$d || (_path$d = /*#__PURE__*/React.createElement("path", {
+    d: "M12 16v-4M12 8h.01"
+  })));
+};
+
+const AlertTypeIconMap = {
+    success: SvgBadgeCheck,
+    danger: SvgCircleX,
+    warning: SvgCircleAlert,
+    info: SvgInfo,
+};
+const TypeClassMap$1 = {
+    success: 'bg-[var(--ui-success-light)] ring-[var(--ui-success-ring-subtle)] text-[var(--ui-success-text)]',
+    danger: 'bg-[var(--ui-danger-light)] ring-[var(--ui-danger-ring-subtle)] text-[var(--ui-danger-text)]',
+    warning: 'bg-[var(--ui-warning-light)] ring-[var(--ui-warning-ring-subtle)] text-[var(--ui-warning-text)]',
+    info: 'bg-[var(--ui-info-light)] ring-[var(--ui-info-ring-subtle)] text-[var(--ui-info-text)]',
+};
+const Alert = forwardRef((props, ref) => {
+    const { type = 'info', className, message, children, removable = false, onRemove, icon, title, ...restProps } = props;
+    const DefaultIcon = AlertTypeIconMap[type] || SvgInfo;
+    const iconNode = icon !== undefined ? (icon) : (jsx(DefaultIcon, { className: "size-5 shrink-0", "data-testid": `alert-${type}-icon` }));
+    return (jsxs("div", { ref: ref, className: buildClassName('flex items-center justify-between rounded-md p-3 text-sm ring-1 ring-inset gap-2', TypeClassMap$1[type], className), ...restProps, children: [jsxs("span", { className: "inline-flex items-start gap-2 min-w-0", children: [iconNode && jsx("span", { className: "shrink-0 inline-flex mt-0.5", children: iconNode }), jsxs("span", { className: "inline-flex flex-col gap-0.5 min-w-0", children: [title && jsx("span", { className: "font-semibold", children: title }), jsx("span", { className: "inline-flex items-center", children: message !== null && message !== void 0 ? message : children })] })] }), removable && (jsx(Button, { iconOnly: true, "aria-label": "Dismiss alert", size: "xs", variant: "plain", theme: "secondary", className: "hover:bg-black/10 dark:hover:bg-white/10 shrink-0", onClick: () => onRemove === null || onRemove === void 0 ? void 0 : onRemove(), "data-testid": "alert-remove-btn", children: jsx(SvgX, { className: "size-4.5", "data-testid": "alert-remove-icon" }) }))] }));
+});
+Alert.displayName = 'Alert';
+
+const ThemeClassMap = {
+    success: 'bg-[var(--ui-success-light)] text-[var(--ui-success-text)] ring-[var(--ui-success-ring-subtle)]',
+    danger: 'bg-[var(--ui-danger-light)] text-[var(--ui-danger-text)] ring-[var(--ui-danger-ring-subtle)]',
+    warning: 'bg-[var(--ui-warning-light)] text-[var(--ui-warning-text)] ring-[var(--ui-warning-ring-subtle)]',
+    info: 'bg-[var(--ui-info-light)] text-[var(--ui-info-text)] ring-[var(--ui-info-ring-subtle)]',
+    primary: 'bg-[var(--ui-info-light)] text-[var(--ui-info-text)] ring-[var(--ui-info-ring-subtle)]',
+    secondary: 'bg-gray-50 dark:bg-gray-700 text-gray-700 dark:text-gray-200 ring-[var(--ui-secondary-ring-subtle)]',
+};
+const SIZE_CLASS$1 = {
+    sm: 'text-xs py-0.5 px-2',
+    md: 'text-xs py-1 px-3',
+};
+const Badge = forwardRef((props, ref) => {
+    const { theme = 'info', className, children, removable = false, rounded = false, onRemove, size = 'md', icon, ...restProps } = props;
+    return (jsxs(TextContent, { ref: ref, className: buildClassName('inline-flex items-center gap-1 font-medium ring-1 ring-inset', SIZE_CLASS$1[size], ThemeClassMap[theme] || ThemeClassMap.info, rounded ? 'rounded-full' : 'rounded-md', icon ? 'pl-2' : '', removable ? 'pr-1' : '', className), "data-testid": `badge-${theme}`, ...restProps, children: [icon && jsx("span", { className: "shrink-0 inline-flex", children: icon }), children, removable && (jsx(SvgX, { className: "size-4 shrink-0 hover:bg-black/10 dark:hover:bg-white/10 rounded-sm cursor-pointer", role: "button", tabIndex: 0, "aria-label": "Remove", onClick: () => onRemove === null || onRemove === void 0 ? void 0 : onRemove(), onKeyDown: (e) => {
+                    if (e.key === 'Enter' || e.key === ' ') {
+                        e.preventDefault();
+                        onRemove === null || onRemove === void 0 ? void 0 : onRemove();
+                    }
+                } }))] }));
+});
+Badge.displayName = 'Badge';
+
+var _path$c;
+function _extends$c() { return _extends$c = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$c.apply(null, arguments); }
+var SvgTriangleAlert = function SvgTriangleAlert(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends$c({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 24,
+    height: 24,
+    fill: "none",
+    stroke: "currentColor",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: 2,
+    className: "lucide lucide-triangle-alert-icon lucide-triangle-alert",
+    viewBox: "0 0 24 24"
+  }, props), _path$c || (_path$c = /*#__PURE__*/React.createElement("path", {
+    d: "m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3M12 9v4M12 17h.01"
+  })));
+};
+
+var _circle$2, _path$b;
+function _extends$b() { return _extends$b = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$b.apply(null, arguments); }
+var SvgCircleCheck = function SvgCircleCheck(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends$b({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 24,
+    height: 24,
+    fill: "none",
+    stroke: "currentColor",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: 2,
+    className: "lucide lucide-circle-check-icon lucide-circle-check",
+    viewBox: "0 0 24 24"
+  }, props), _circle$2 || (_circle$2 = /*#__PURE__*/React.createElement("circle", {
+    cx: 12,
+    cy: 12,
+    r: 10
+  })), _path$b || (_path$b = /*#__PURE__*/React.createElement("path", {
+    d: "m9 12 2 2 4-4"
+  })));
+};
+
+const sizeMap = {
+    xs: 'size-4',
+    sm: 'size-5',
+    md: 'size-6',
+    lg: 'size-8',
+    xl: 'size-10',
+};
+const IconMap = {
+    info: SvgInfo,
+    error: SvgCircleX,
+    success: SvgCircleCheck,
+    warning: SvgTriangleAlert,
 };
 const TypeClassMap = {
     info: 'bg-[var(--ui-info-light)] ring-[var(--ui-info-ring-subtle)] text-[var(--ui-info-text)]',
@@ -509,6 +613,51 @@ const BodyText = forwardRef((props, ref) => {
 });
 BodyText.displayName = 'BodyText';
 
+function BottomNavigation({ items, activeId, onChange, fixed = true, showLabels = 'always', theme = 'light', activeIndicatorStyle = 'line', containerClass = '', itemClass = '', }) {
+    const handleTabClick = (item) => {
+        var _a;
+        if (item.disabled)
+            return;
+        (_a = item.onClick) === null || _a === void 0 ? void 0 : _a.call(item);
+        onChange(item.id);
+    };
+    const themeStyles = {
+        light: 'bg-white dark:bg-gray-900 border-t border-[var(--ui-border)] text-gray-600 dark:text-gray-400',
+        dark: 'bg-gray-900 text-gray-400 border-t border-gray-800',
+        primary: 'bg-blue-600 text-blue-100 border-t border-blue-700',
+    }[theme];
+    return (jsx("nav", { "aria-label": "Bottom Navigation", className: buildClassName('w-full flex items-center justify-around select-none shadow-lg transition-colors relative', fixed && 'fixed bottom-0 left-0 right-0 z-40', 'pb-[env(safe-area-inset-bottom,6px)] px-2', themeStyles, containerClass), "data-testid": "bottom-navigation", children: items.map((item) => {
+            const isActive = item.id === activeId;
+            const showLabelText = showLabels === 'always' || (showLabels === 'active' && isActive);
+            const activeItemColor = {
+                light: 'text-blue-600 dark:text-blue-400 font-bold',
+                dark: 'text-white font-bold',
+                primary: 'text-white font-bold',
+            }[theme];
+            const inactiveItemColor = {
+                light: 'text-gray-500 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200 font-medium',
+                dark: 'text-gray-400 hover:text-gray-200 font-medium',
+                primary: 'text-blue-200 hover:text-white font-medium',
+            }[theme];
+            const pillActiveStyles = {
+                light: 'bg-blue-100 dark:bg-blue-950/80 text-blue-600 dark:text-blue-400 shadow-xs scale-105',
+                dark: 'bg-gray-800 text-white ring-1 ring-gray-700 shadow-xs scale-105',
+                primary: 'bg-white/25 text-white shadow-xs scale-105',
+            }[theme];
+            const badgeColor = {
+                danger: 'bg-red-500 text-white',
+                info: 'bg-blue-500 text-white',
+                success: 'bg-emerald-500 text-white',
+            }[item.badgeVariant || 'danger'];
+            return (jsxs("button", { type: "button", disabled: item.disabled, onClick: () => handleTabClick(item), className: buildClassName('flex-1 flex flex-col items-center justify-center pt-2 pb-1.5 px-1 transition-all duration-200 relative cursor-pointer group', item.disabled && 'opacity-40 cursor-not-allowed pointer-events-none', isActive ? activeItemColor : inactiveItemColor, itemClass), "data-testid": `bottom-nav-item-${item.id}`, "aria-selected": isActive, children: [activeIndicatorStyle === 'line' && isActive && (jsx("span", { className: buildClassName('absolute -top-[1px] h-0.75 w-9 rounded-full transition-all duration-200 z-10', theme === 'primary' ? 'bg-white' : 'bg-blue-600 dark:bg-blue-400') })), jsxs("div", { className: buildClassName('relative inline-flex items-center justify-center transition-all duration-200', activeIndicatorStyle === 'pill'
+                            ? buildClassName('px-4 py-1 rounded-full', isActive
+                                ? pillActiveStyles
+                                : 'group-hover:bg-gray-100/50 dark:group-hover:bg-gray-800/40')
+                            : 'px-1 py-0.5'), children: [jsx("span", { className: "text-xl transition-transform duration-150 group-active:scale-95", children: isActive && item.activeIcon ? item.activeIcon : item.icon }), item.badge !== undefined && item.badge !== null && (jsx("span", { className: buildClassName('absolute -top-1 -right-1 min-w-[16px] h-4 px-1 rounded-full text-[10px] font-bold flex items-center justify-center shadow-xs z-10', badgeColor), "data-testid": `bottom-nav-badge-${item.id}`, children: item.badge }))] }), showLabelText && (jsx("span", { className: buildClassName('text-[11px] leading-tight mt-1 truncate max-w-full transition-colors duration-150', isActive ? 'font-bold' : 'font-medium opacity-90'), children: item.label })), activeIndicatorStyle === 'dot' && isActive && (jsx("span", { className: buildClassName('size-1.5 rounded-full mt-1 transition-all duration-200', theme === 'primary' ? 'bg-white' : 'bg-blue-600 dark:bg-blue-400') }))] }, item.id));
+        }) }));
+}
+BottomNavigation.displayName = 'BottomNavigation';
+
 var _path$a;
 function _extends$a() { return _extends$a = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$a.apply(null, arguments); }
 var SvgSlash = function SvgSlash(props) {
@@ -664,10 +813,10 @@ const ButtonGroup = ({ children, orientation = 'horizontal', theme = 'secondary'
                         (isVertical
                             ? resolvedTheme === 'primary' || resolvedTheme === 'danger'
                                 ? 'border-t border-white/25 dark:border-white/20'
-                                : 'border-t border-gray-300/70 dark:border-gray-700/70'
+                                : 'border-t border-[var(--ui-border)]'
                             : resolvedTheme === 'primary' || resolvedTheme === 'danger'
                                 ? 'border-l border-white/25 dark:border-white/20'
-                                : 'border-l border-gray-300/70 dark:border-gray-700/70'),
+                                : 'border-l border-[var(--ui-border)]'),
                 ], fullWidth && 'flex-1'),
             });
         }) }));
@@ -688,27 +837,33 @@ const ASPECT_RATIO_CLASS = {
     video: 'aspect-video',
     wide: 'aspect-[21/9]',
 };
+function ChevronRightIcon$1({ className = 'size-4' }) {
+    return (jsx("svg", { className: className, fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 5l7 7-7 7" }) }));
+}
 const Card = forwardRef(({ as, ...props }, ref) => {
-    const { variant = 'outlined', radius = 'xl', hoverable = false, clickable = false, selected = false, bordered = true, compact = false, zeroPadding = false, ...rest } = props;
+    const { variant = 'outlined', radius = 'xl', hoverable = false, clickable = false, selected = false, bordered = true, compact = false, zeroPadding = false, title, subtitle, leading, trailing, badge, showChevron = false, children, onClick, ...rest } = props;
     const Component = as || 'div';
     const { className, ...cleanRest } = rest;
+    const isClickable = clickable || Boolean(onClick);
     const isOutlined = variant === 'outlined' && bordered;
     const isElevated = variant === 'elevated';
     const isFilled = variant === 'filled';
     const isGhost = variant === 'ghost';
-    const classes = buildClassName('block transition-all duration-200', RADIUS_CLASS[radius] || RADIUS_CLASS.xl, zeroPadding ? '' : compact ? 'p-3 sm:p-4' : 'p-5 sm:p-6', 
+    const classes = buildClassName('block transition-all duration-150 select-none', RADIUS_CLASS[radius] || RADIUS_CLASS.xl, zeroPadding ? '' : compact ? 'p-3 sm:p-4' : 'p-5 sm:p-6', 
     // Surface variants
     isOutlined && 'bg-white dark:bg-gray-900 border border-[var(--ui-border)]', isElevated &&
-        'bg-white dark:bg-gray-900 border border-gray-100 dark:border-gray-800 shadow-md shadow-gray-200/50 dark:shadow-none', isFilled && 'bg-gray-50/80 dark:bg-gray-800/60 border border-transparent', isGhost && 'bg-transparent border border-transparent', 
-    // Hoverable & Clickable states
-    hoverable && 'hover:bg-gray-100/80 dark:hover:bg-gray-800/80', clickable && 'cursor-pointer hover:-translate-y-0.5 hover:shadow-lg', selected && 'ring-2 ring-[var(--ui-primary)] border-[var(--ui-primary)]', className);
-    return jsx(Component, { ref: ref, className: classes, ...cleanRest });
+        'bg-white dark:bg-gray-900 border border-[var(--ui-border)] shadow-md shadow-gray-200/50 dark:shadow-none', isFilled && 'bg-gray-50/80 dark:bg-gray-800/60 border border-transparent', isGhost && 'bg-transparent border border-transparent', 
+    // Hoverable & Clickable mobile/web touch states
+    hoverable && 'hover:bg-gray-100/80 dark:hover:bg-gray-800/80', isClickable &&
+        'cursor-pointer hover:-translate-y-0.5 hover:shadow-lg active:scale-[0.99] active:bg-gray-100 dark:active:bg-gray-800/90', selected && 'ring-2 ring-[var(--ui-primary)] border-[var(--ui-primary)]', className);
+    const hasHeaderRow = title || subtitle || leading || trailing || badge || showChevron;
+    return (jsxs(Component, { ref: ref, className: classes, onClick: onClick, ...cleanRest, children: [hasHeaderRow && (jsxs("div", { className: buildClassName('flex items-center gap-3 w-full min-w-0', children && 'mb-3'), children: [leading && jsx("div", { className: "shrink-0 flex items-center justify-center", children: leading }), jsxs("div", { className: "flex-1 min-w-0 text-left", children: [jsxs("div", { className: "flex items-center gap-2 flex-wrap", children: [title && (jsx("span", { className: "text-sm font-semibold text-gray-900 dark:text-white truncate", children: title })), badge] }), subtitle && (jsx("div", { className: "text-xs text-gray-500 dark:text-gray-400 mt-0.5 truncate", children: subtitle }))] }), (trailing || showChevron) && (jsxs("div", { className: "shrink-0 flex items-center gap-2 text-xs text-gray-500 dark:text-gray-400", children: [trailing, showChevron && jsx(ChevronRightIcon$1, { className: "size-4 text-gray-400" })] }))] })), children] }));
 });
-const CardHeader = ({ className, bordered = false, children, ...props }) => (jsx("div", { className: buildClassName('flex items-center justify-between gap-4 mb-4', bordered && 'pb-4 border-b border-gray-200 dark:border-gray-800', className), ...props, children: children }));
+const CardHeader = ({ className, bordered = false, children, ...props }) => (jsx("div", { className: buildClassName('flex items-center justify-between gap-4 mb-4', bordered && 'pb-4 border-b border-[var(--ui-border)]', className), ...props, children: children }));
 const CardTitle = ({ className, as: Component = 'h3', children, ...props }) => (jsx(Component, { className: buildClassName('text-lg font-semibold text-gray-900 dark:text-white tracking-tight', className), ...props, children: children }));
 const CardDescription = ({ className, children, ...props }) => (jsx("p", { className: buildClassName('text-sm text-gray-500 dark:text-gray-400 font-normal mt-1', className), ...props, children: children }));
 const CardContent = ({ className, children, ...props }) => (jsx("div", { className: buildClassName('space-y-3', className), ...props, children: children }));
-const CardFooter = ({ className, bordered = false, children, ...props }) => (jsx("div", { className: buildClassName('flex items-center justify-end gap-3 mt-4', bordered && 'pt-4 border-t border-gray-200 dark:border-gray-800', className), ...props, children: children }));
+const CardFooter = ({ className, bordered = false, children, ...props }) => (jsx("div", { className: buildClassName('flex items-center justify-end gap-3 mt-4', bordered && 'pt-4 border-t border-[var(--ui-border)]', className), ...props, children: children }));
 const CardMedia = ({ className, aspectRatio = 'video', alt = '', ...props }) => (jsx("div", { className: buildClassName('overflow-hidden -mx-5 -mt-5 mb-4 sm:-mx-6 sm:-mt-6', className), children: jsx("img", { alt: alt, className: buildClassName('w-full object-cover', ASPECT_RATIO_CLASS[aspectRatio] || ASPECT_RATIO_CLASS.video), ...props }) }));
 Card.Header = CardHeader;
 Card.Title = CardTitle;
@@ -728,19 +883,19 @@ Label.displayName = 'Label';
 const sizeStyles = {
     sm: {
         box: 'size-3.5',
-        svg: 'h-2.5 w-2.5',
+        svg: 'size-2.75',
         text: 'text-xs',
         subtext: 'text-[11px]',
     },
     md: {
         box: 'size-4.5',
-        svg: 'h-3.25 w-3.25',
+        svg: 'size-3.5',
         text: 'text-sm',
         subtext: 'text-xs',
     },
     lg: {
         box: 'size-5.5',
-        svg: 'h-4 w-4',
+        svg: 'size-4.25',
         text: 'text-base',
         subtext: 'text-sm',
     },
@@ -761,19 +916,19 @@ const Checkbox = forwardRef((props, ref) => {
     const isCard = variant === 'card';
     return (jsxs("div", { className: buildClassName(wrapperClass), children: [jsx("div", { className: buildClassName(isCard
                     ? 'rounded-xl border p-3.5 transition-all duration-150 relative'
-                    : 'flex items-start', isCard &&
+                    : 'flex items-center', isCard &&
                     (disabled
-                        ? 'border-gray-200 dark:border-gray-800 bg-gray-50/50 dark:bg-gray-900/40 opacity-70'
+                        ? 'border-[var(--ui-border-muted)] bg-gray-50/50 dark:bg-gray-900/40 opacity-70'
                         : checked || indeterminate
                             ? 'border-blue-500/80 bg-blue-50/30 dark:bg-blue-950/20 dark:border-blue-500/60 shadow-xs'
-                            : 'border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900 hover:border-gray-300 dark:hover:border-gray-700 shadow-2xs'), containerClass), children: jsxs("label", { htmlFor: checkboxId, className: buildClassName('inline-flex items-start relative select-none w-full', disabled ? 'cursor-not-allowed opacity-70' : 'cursor-pointer'), children: [jsxs("div", { className: "relative inline-flex items-center shrink-0 pt-0.5", children: [jsx("input", { ref: innerRef, ...rest, id: checkboxId, name: name, type: "checkbox", disabled: disabled, checked: checked, onChange: onChange, "aria-checked": indeterminate ? 'mixed' : checked, className: buildClassName('peer cursor-pointer transition-all appearance-none rounded', currentSize.box, 'border focus:ring-2 focus:ring-offset-2', 'checked:bg-blue-600 checked:border-blue-600 dark:checked:bg-blue-600 dark:checked:border-blue-600', 'focus:ring-[var(--ui-focus-ring)] dark:focus:ring-offset-gray-900', disabled
-                                        ? 'border-gray-200 dark:border-gray-700 bg-gray-100 dark:bg-gray-800 pointer-events-none'
-                                        : 'bg-white dark:bg-gray-700 border-gray-300 dark:border-gray-600 hover:border-gray-400 dark:hover:border-gray-500 hover:shadow-xs', indeterminate &&
-                                        '!bg-blue-600 !border-blue-600 dark:!bg-blue-600 dark:!border-blue-600', className) }), !indeterminate && (jsx("span", { className: buildClassName('absolute text-white pointer-events-none transition-opacity top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2', checked !== undefined
+                            : 'border-[var(--ui-border)] bg-white dark:bg-gray-900 hover:border-gray-300 dark:hover:border-gray-700 shadow-2xs'), containerClass), children: jsxs("label", { htmlFor: checkboxId, className: buildClassName('inline-flex relative select-none w-full', description ? 'items-start' : 'items-center', disabled ? 'cursor-not-allowed opacity-70' : 'cursor-pointer'), children: [jsxs("div", { className: "relative inline-flex items-center justify-center shrink-0", children: [jsx("input", { ref: innerRef, ...rest, id: checkboxId, name: name, type: "checkbox", disabled: disabled, checked: checked, onChange: onChange, "aria-checked": indeterminate ? 'mixed' : checked, className: buildClassName('peer cursor-pointer transition-all appearance-none rounded', currentSize.box, 'border focus:ring-2 focus:ring-offset-2', 'checked:bg-blue-600 checked:border-blue-600 dark:checked:bg-blue-600 dark:checked:border-blue-600', 'focus:ring-[var(--ui-focus-ring)] dark:focus:ring-offset-gray-900', disabled
+                                        ? 'border-[var(--ui-border-muted)] bg-gray-100 dark:bg-gray-800 pointer-events-none'
+                                        : 'bg-white dark:bg-gray-700 border-[var(--ui-border)] hover:border-gray-400 dark:hover:border-gray-500', indeterminate &&
+                                        '!bg-blue-600 !border-blue-600 dark:!bg-blue-600 dark:!border-blue-600', className) }), !indeterminate && (jsx("span", { className: buildClassName('absolute inset-0 flex items-center justify-center text-white pointer-events-none transition-opacity', checked !== undefined
                                         ? checked
                                             ? 'opacity-100'
                                             : 'opacity-0'
-                                        : 'opacity-0 peer-checked:opacity-100'), children: jsx("svg", { xmlns: "http://www.w3.org/2000/svg", className: currentSize.svg, viewBox: "0 0 20 20", fill: "currentColor", stroke: "currentColor", strokeWidth: "1", children: jsx("path", { fillRule: "evenodd", d: "M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z", clipRule: "evenodd" }) }) })), indeterminate && (jsx("span", { className: "absolute text-white pointer-events-none top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 opacity-100 z-10", children: jsx("svg", { xmlns: "http://www.w3.org/2000/svg", className: currentSize.svg, viewBox: "0 0 20 20", fill: "currentColor", stroke: "currentColor", strokeWidth: "2", children: jsx("path", { fillRule: "evenodd", d: "M4 10a1 1 0 011-1h10a1 1 0 110 2H5a1 1 0 01-1-1z", clipRule: "evenodd" }) }) }))] }), (label || description) && (jsxs("div", { className: "ml-2.5 flex flex-col justify-center min-w-0 flex-1", children: [label && (jsx(Label, { htmlFor: checkboxId, className: buildClassName(disabled
+                                        : 'opacity-0 peer-checked:opacity-100'), children: jsx("svg", { className: currentSize.svg, viewBox: "0 0 20 20", fill: "currentColor", children: jsx("path", { fillRule: "evenodd", d: "M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z", clipRule: "evenodd" }) }) })), indeterminate && (jsx("span", { className: "absolute inset-0 flex items-center justify-center text-white pointer-events-none opacity-100 z-10", children: jsx("svg", { className: currentSize.svg, viewBox: "0 0 20 20", fill: "currentColor", children: jsx("path", { fillRule: "evenodd", d: "M4 10a1 1 0 011-1h10a1 1 0 110 2H5a1 1 0 01-1-1z", clipRule: "evenodd" }) }) }))] }), (label || description) && (jsxs("div", { className: "ml-2.5 flex flex-col justify-center min-w-0 flex-1", children: [label && (jsx(Label, { htmlFor: checkboxId, className: buildClassName(disabled
                                         ? 'cursor-not-allowed text-gray-400 dark:text-gray-500'
                                         : 'cursor-pointer text-gray-800 dark:text-gray-200 font-medium', currentSize.text, labelClass), children: label })), description && (jsx("span", { className: buildClassName('mt-0.5 text-gray-500 dark:text-gray-400 font-normal leading-normal', currentSize.subtext), children: description }))] }))] }) }), (error || helperText) && (jsx("div", { className: "mt-1.5 ml-0.5", children: error ? (jsx(TextContent, { error: true, small: true, children: error })) : (jsx(TextContent, { muted: true, small: true, children: helperText })) }))] }));
 });
@@ -842,7 +997,7 @@ const CheckboxGroup = (props) => {
         : inline
             ? 'flex flex-wrap gap-3'
             : 'flex flex-col gap-3';
-    return (jsxs("div", { className: buildClassName('mb-3 space-y-3', containerClass), children: [label && (jsxs("div", { className: buildClassName('flex items-center justify-between', labelWrapperClass), children: [jsx(Label, { className: labelClass, children: label }), labelHint && (jsx(BodyText, { muted: true, small: true, children: labelHint }))] })), showSelectAll && items.length > 0 && (jsx("div", { className: "pb-1 border-b border-gray-200 dark:border-gray-800", children: jsx(Checkbox, { id: `${groupId}-select-all`, label: selectAllLabel, size: size, variant: variant, checked: allSelected, indeterminate: isIndeterminate, disabled: disabled || enabledItems.length === 0, onChange: handleSelectAllChange }) })), jsx("div", { className: layoutClass, children: items.map((item, index) => {
+    return (jsxs("div", { className: buildClassName('mb-3 space-y-3', containerClass), children: [label && (jsxs("div", { className: buildClassName('flex items-center justify-between', labelWrapperClass), children: [jsx(Label, { className: labelClass, children: label }), labelHint && (jsx(BodyText, { muted: true, small: true, children: labelHint }))] })), showSelectAll && items.length > 0 && (jsx("div", { className: "pb-1 border-b border-[var(--ui-border)]", children: jsx(Checkbox, { id: `${groupId}-select-all`, label: selectAllLabel, size: size, variant: variant, checked: allSelected, indeterminate: isIndeterminate, disabled: disabled || enabledItems.length === 0, onChange: handleSelectAllChange }) })), jsx("div", { className: layoutClass, children: items.map((item, index) => {
                     const key = typeof item.value === 'string' || typeof item.value === 'number' ? item.value : index;
                     return (jsx(Checkbox, { name: name, id: `${groupId}-${String(item.value)}`, label: item.label, description: item.description, value: String(item.value), size: size, variant: variant, disabled: disabled || item.disabled, checked: currentValue.includes(item.value), onChange: handleGroupChange }, key));
                 }) }), (error || helperText) && (jsx("div", { className: "mt-1.5 ml-0.5", children: error ? (jsx(TextContent, { error: true, small: true, children: error })) : (jsx(TextContent, { muted: true, small: true, children: helperText })) }))] }));
@@ -922,27 +1077,8 @@ const usePagination = ({ totalPages, currentPage, siblingCount = 1, // number of
 
 var _path$9;
 function _extends$9() { return _extends$9 = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$9.apply(null, arguments); }
-var SvgChevronLeft = function SvgChevronLeft(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$9({
-    xmlns: "http://www.w3.org/2000/svg",
-    width: 24,
-    height: 24,
-    fill: "none",
-    stroke: "currentColor",
-    strokeLinecap: "round",
-    strokeLinejoin: "round",
-    strokeWidth: 2,
-    className: "lucide lucide-chevron-left-icon lucide-chevron-left",
-    viewBox: "0 0 24 24"
-  }, props), _path$9 || (_path$9 = /*#__PURE__*/React.createElement("path", {
-    d: "m15 18-6-6 6-6"
-  })));
-};
-
-var _path$8;
-function _extends$8() { return _extends$8 = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$8.apply(null, arguments); }
 var SvgChevronRight = function SvgChevronRight(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$8({
+  return /*#__PURE__*/React.createElement("svg", _extends$9({
     xmlns: "http://www.w3.org/2000/svg",
     width: 24,
     height: 24,
@@ -953,7 +1089,7 @@ var SvgChevronRight = function SvgChevronRight(props) {
     strokeWidth: 2,
     className: "lucide lucide-chevron-right-icon lucide-chevron-right",
     viewBox: "0 0 24 24"
-  }, props), _path$8 || (_path$8 = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$9 || (_path$9 = /*#__PURE__*/React.createElement("path", {
     d: "m9 18 6-6-6-6"
   })));
 };
@@ -1075,10 +1211,10 @@ const useRowSelection = ({ items, getKey, selectedRowKeys, defaultSelectedRowKey
     };
 };
 
-var _path$7;
-function _extends$7() { return _extends$7 = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$7.apply(null, arguments); }
+var _path$8;
+function _extends$8() { return _extends$8 = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$8.apply(null, arguments); }
 var SvgArrowDownWideNarrow = function SvgArrowDownWideNarrow(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$7({
+  return /*#__PURE__*/React.createElement("svg", _extends$8({
     xmlns: "http://www.w3.org/2000/svg",
     width: 24,
     height: 24,
@@ -1089,15 +1225,15 @@ var SvgArrowDownWideNarrow = function SvgArrowDownWideNarrow(props) {
     strokeWidth: 2,
     className: "lucide lucide-arrow-down-wide-narrow-icon lucide-arrow-down-wide-narrow",
     viewBox: "0 0 24 24"
-  }, props), _path$7 || (_path$7 = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$8 || (_path$8 = /*#__PURE__*/React.createElement("path", {
     d: "m3 16 4 4 4-4M7 20V4M11 4h10M11 8h7M11 12h4"
   })));
 };
 
-var _path$6;
-function _extends$6() { return _extends$6 = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$6.apply(null, arguments); }
+var _path$7;
+function _extends$7() { return _extends$7 = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$7.apply(null, arguments); }
 var SvgArrowDownNarrowWide = function SvgArrowDownNarrowWide(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$6({
+  return /*#__PURE__*/React.createElement("svg", _extends$7({
     xmlns: "http://www.w3.org/2000/svg",
     width: 24,
     height: 24,
@@ -1108,15 +1244,15 @@ var SvgArrowDownNarrowWide = function SvgArrowDownNarrowWide(props) {
     strokeWidth: 2,
     className: "lucide lucide-arrow-down-narrow-wide-icon lucide-arrow-down-narrow-wide",
     viewBox: "0 0 24 24"
-  }, props), _path$6 || (_path$6 = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$7 || (_path$7 = /*#__PURE__*/React.createElement("path", {
     d: "m3 16 4 4 4-4M7 20V4M11 4h4M11 8h7M11 12h10"
   })));
 };
 
-var _path$5;
-function _extends$5() { return _extends$5 = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$5.apply(null, arguments); }
+var _path$6;
+function _extends$6() { return _extends$6 = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$6.apply(null, arguments); }
 var SvgArrowDownAz = function SvgArrowDownAz(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$5({
+  return /*#__PURE__*/React.createElement("svg", _extends$6({
     xmlns: "http://www.w3.org/2000/svg",
     width: 24,
     height: 24,
@@ -1127,15 +1263,15 @@ var SvgArrowDownAz = function SvgArrowDownAz(props) {
     strokeWidth: 2,
     className: "lucide lucide-arrow-down-az-icon lucide-arrow-down-a-z",
     viewBox: "0 0 24 24"
-  }, props), _path$5 || (_path$5 = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$6 || (_path$6 = /*#__PURE__*/React.createElement("path", {
     d: "m3 16 4 4 4-4M7 20V4M20 8h-5M15 10V6.5a2.5 2.5 0 0 1 5 0V10M15 14h5l-5 6h5"
   })));
 };
 
-var _path$4;
-function _extends$4() { return _extends$4 = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$4.apply(null, arguments); }
+var _path$5;
+function _extends$5() { return _extends$5 = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$5.apply(null, arguments); }
 var SvgArrowDownZa = function SvgArrowDownZa(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$4({
+  return /*#__PURE__*/React.createElement("svg", _extends$5({
     xmlns: "http://www.w3.org/2000/svg",
     width: 24,
     height: 24,
@@ -1146,15 +1282,15 @@ var SvgArrowDownZa = function SvgArrowDownZa(props) {
     strokeWidth: 2,
     className: "lucide lucide-arrow-down-za-icon lucide-arrow-down-z-a",
     viewBox: "0 0 24 24"
-  }, props), _path$4 || (_path$4 = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$5 || (_path$5 = /*#__PURE__*/React.createElement("path", {
     d: "m3 16 4 4 4-4M7 4v16M15 4h5l-5 6h5M15 20v-3.5a2.5 2.5 0 0 1 5 0V20M20 18h-5"
   })));
 };
 
-var _path$3;
-function _extends$3() { return _extends$3 = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$3.apply(null, arguments); }
+var _path$4;
+function _extends$4() { return _extends$4 = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$4.apply(null, arguments); }
 var SvgArrowUpDown = function SvgArrowUpDown(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$3({
+  return /*#__PURE__*/React.createElement("svg", _extends$4({
     xmlns: "http://www.w3.org/2000/svg",
     width: 24,
     height: 24,
@@ -1165,7 +1301,7 @@ var SvgArrowUpDown = function SvgArrowUpDown(props) {
     strokeWidth: 2,
     className: "lucide lucide-arrow-up-down-icon lucide-arrow-up-down",
     viewBox: "0 0 24 24"
-  }, props), _path$3 || (_path$3 = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$4 || (_path$4 = /*#__PURE__*/React.createElement("path", {
     d: "m21 16-4 4-4-4M17 20V4M3 8l4-4 4 4M7 4v16"
   })));
 };
@@ -1207,7 +1343,7 @@ const autoSortItems = (items, column, sort) => {
         return 0;
     });
 };
-function DataTable({ items, columns, sorting = {}, onSort, loading, pagination, setPagination = () => { }, emptyMessage = 'No data found', containerClass = '', wrapperClass = '', tableClass = '', headClass = '', footerRow, rowKey = 'id', onRowClick, rowClass, density = 'default', striped = false, layout = 'auto', selectable = false, selectedRowKeys, defaultSelectedRowKeys, onSelectionChange, isRowSelectable, paginationContainerClass, }) {
+function DataTable({ items, columns, sorting = {}, onSort, loading, pagination, setPagination = () => { }, emptyMessage = 'No data found', containerClass = '', wrapperClass = '', tableClass = '', headClass = '', footerRow, rowKey = 'id', onRowClick, rowClass, density = 'default', striped = false, layout = 'auto', selectable = false, selectedRowKeys, defaultSelectedRowKeys, onSelectionChange, isRowSelectable, stickyHeader = true, stickyPagination = true, paginationContainerClass, }) {
     const internalSorting = useRef({});
     const [sortedItems, setSortedItems] = useState(items);
     useEffect(() => {
@@ -1252,12 +1388,13 @@ function DataTable({ items, columns, sorting = {}, onSort, loading, pagination,
     });
     const densityCellClass = DENSITY_CELL_CLASS$2[density];
     const colSize = columns.length + (selectable ? 1 : 0);
-    return (jsxs("div", { className: buildClassName('w-full rounded-lg relative', containerClass), children: [jsx("div", { className: buildClassName('overflow-x-auto overflow-y-hidden rounded-lg border border-[var(--ui-border)]', wrapperClass, pagination && 'rounded-b-none border-b-0'), children: jsxs(Table, { className: buildClassName('relative w-full max-w-full h-fit', tableClass), layout: layout, children: [jsxs(TableHead, { className: headClass, children: [selectable && (jsx(TableHeaderCell, { className: buildClassName('bg-gray-50 dark:bg-gray-800 w-px', densityCellClass), children: jsx(Checkbox, { "aria-label": "Select all rows", checked: allSelected, ref: (el) => {
+    const wrapperHasOverflow = /\boverflow-(x-|y-)?(auto|hidden|scroll|visible|clip)\b/.test(wrapperClass);
+    return (jsxs("div", { className: buildClassName('w-full rounded-lg relative', containerClass), children: [jsx("div", { className: buildClassName(!wrapperHasOverflow && 'overflow-x-auto', 'rounded-lg border border-[var(--ui-border)]', wrapperClass, pagination && 'rounded-b-none border-b-0'), children: jsxs(Table, { className: buildClassName('relative w-full max-w-full h-fit', tableClass), layout: layout, children: [jsxs(TableHead, { className: headClass, children: [selectable && (jsx(TableHeaderCell, { className: buildClassName('bg-gray-50 dark:bg-gray-800 w-px', densityCellClass, stickyHeader && 'sticky top-0 z-20 shadow-[0_1px_2px_rgba(0,0,0,0.06)]'), children: jsx(Checkbox, { "aria-label": "Select all rows", checked: allSelected, ref: (el) => {
                                             if (el)
                                                 el.indeterminate = someSelected;
-                                        }, onChange: toggleAll }) })), columns.map((column) => (jsx(TableHeaderCell, { align: column.headerAlign, style: { width: column.width || 'auto' }, className: buildClassName('bg-gray-50 dark:bg-gray-800', densityCellClass, column.sticky === 'left' &&
-                                        'sticky left-0 z-10 shadow-[2px_0_6px_rgba(0,0,0,0.06)]', column.sticky === 'right' &&
-                                        'sticky right-0 z-10 shadow-[-2px_0_6px_rgba(0,0,0,0.06)]', column.headerClass), children: jsxs(TextContent, { role: column.sortable ? 'button' : undefined, className: buildClassName('group', column.sortable && 'inline-flex items-center gap-2 cursor-pointer select-none'), onClick: () => handleSort(column), children: [jsx(TextContent, { className: "shrink-0", children: column.label }), column.sortable ? getSortIcon(sorting[column.name]) : null] }) }, column.name)))] }), jsx(TableBody, { loading: loading, colSize: colSize, rowSize: (pagination === null || pagination === void 0 ? void 0 : pagination.limit) || 5, children: !loading && sortedItems.length === 0 ? (jsx(EmptyTableRow, { colSpan: colSize, children: emptyMessage })) : (sortedItems.map((item, idx) => {
+                                        }, onChange: toggleAll }) })), columns.map((column) => (jsx(TableHeaderCell, { align: column.headerAlign, style: { width: column.width || 'auto' }, className: buildClassName('bg-gray-50 dark:bg-gray-800', densityCellClass, stickyHeader && 'sticky top-0 z-20 shadow-[0_1px_2px_rgba(0,0,0,0.06)]', column.sticky === 'left' &&
+                                        'sticky left-0 z-30 shadow-[2px_0_6px_rgba(0,0,0,0.06)]', column.sticky === 'right' &&
+                                        'sticky right-0 z-30 shadow-[-2px_0_6px_rgba(0,0,0,0.06)]', column.headerClass), children: jsxs(TextContent, { role: column.sortable ? 'button' : undefined, className: buildClassName('group', column.sortable && 'inline-flex items-center gap-2 cursor-pointer select-none'), onClick: () => handleSort(column), children: [jsx(TextContent, { className: "shrink-0", children: column.label }), column.sortable ? getSortIcon(sorting[column.name]) : null] }) }, column.name)))] }), jsx(TableBody, { loading: loading, colSize: colSize, rowSize: (pagination === null || pagination === void 0 ? void 0 : pagination.limit) || 5, children: !loading && sortedItems.length === 0 ? (jsx(EmptyTableRow, { colSpan: colSize, children: emptyMessage })) : (sortedItems.map((item, idx) => {
                                 const key = getKey(item, idx);
                                 const rowSelectable = !isRowSelectable || isRowSelectable(item);
                                 return (jsxs(TableRow, { className: buildClassName('group', onRowClick && 'cursor-pointer', striped && idx % 2 === 1 && 'bg-gray-50 dark:bg-gray-800/40', getRowClass(item, idx)), onClick: onRowClick ? () => onRowClick(item, idx) : undefined, children: [selectable && (jsx(TableCell, { className: buildClassName(densityCellClass, striped && idx % 2 === 1 && 'bg-gray-50 dark:bg-gray-800/40'), children: jsx("span", { onClick: (e) => e.stopPropagation(), children: jsx(Checkbox, { "aria-label": "Select row", checked: isSelected(key), disabled: !rowSelectable, onChange: () => toggleRow(key) }) }) })), columns.map((column) => {
@@ -1268,7 +1405,7 @@ function DataTable({ items, columns, sorting = {}, onSort, loading, pagination,
                                                     ? column.render(item)
                                                     : ((_a = get(item, column.name)) !== null && _a !== void 0 ? _a : 'Not set') }, column.name));
                                         })] }, key));
-                            })) }), footerRow && jsx(TableFoot, { children: footerRow })] }) }), pagination && (jsx(Pagination, { ...pagination, className: buildClassName('rounded-b-lg border-t border-[var(--ui-border)]', paginationContainerClass), onChange: setPagination }))] }));
+                            })) }), footerRow && jsx(TableFoot, { children: footerRow })] }) }), pagination && (jsx(Pagination, { ...pagination, className: buildClassName('rounded-b-lg border border-[var(--ui-border)]', stickyPagination && 'sticky bottom-0 z-20 bg-white dark:bg-gray-800', paginationContainerClass), onChange: setPagination }))] }));
 }
 DataTable.displayName = 'DataTable';
 
@@ -1383,8 +1520,8 @@ const DetailedInformation = forwardRef((props, ref) => {
     const isMultiColumn = columns > 1;
     return (jsxs("div", { ref: ref, className: buildClassName(isCard
             ? compact
-                ? 'p-3 sm:p-4 bg-gray-50/60 dark:bg-gray-800/40 rounded-2xl border border-gray-200 dark:border-gray-700'
-                : 'p-4 sm:p-6 bg-gray-50/60 dark:bg-gray-800/40 rounded-2xl border border-gray-200 dark:border-gray-700'
+                ? 'p-3 sm:p-4 bg-gray-50/60 dark:bg-gray-800/40 rounded-2xl border border-[var(--ui-border)]'
+                : 'p-4 sm:p-6 bg-gray-50/60 dark:bg-gray-800/40 rounded-2xl border border-[var(--ui-border)]'
             : isBordered
                 ? compact
                     ? 'p-3 sm:p-4 border border-[var(--ui-border)] rounded-2xl'
@@ -1402,8 +1539,8 @@ const DetailedInformation = forwardRef((props, ref) => {
                         const isVertical = layout === 'vertical' || isMultiColumn;
                         return (jsxs("div", { className: buildClassName(isMultiColumn && isCard
                                 ? compact
-                                    ? 'p-3 bg-white dark:bg-gray-900 rounded-xl border border-gray-200/80 dark:border-gray-700/80 shadow-2xs flex flex-col gap-1'
-                                    : 'p-4 bg-white dark:bg-gray-900 rounded-xl border border-gray-200/80 dark:border-gray-700/80 shadow-2xs flex flex-col gap-1'
+                                    ? 'p-3 bg-white dark:bg-gray-900 rounded-xl border border-[var(--ui-border)] shadow-2xs flex flex-col gap-1'
+                                    : 'p-4 bg-white dark:bg-gray-900 rounded-xl border border-[var(--ui-border)] shadow-2xs flex flex-col gap-1'
                                 : isVertical
                                     ? 'flex flex-col gap-1 py-2 px-1'
                                     : 'grid grid-cols-3 gap-4 items-center py-2.5 px-1', compact && !isMultiColumn ? 'py-1.5' : ''), children: [jsxs("dt", { className: buildClassName('text-sm/6 font-medium text-gray-900 dark:text-gray-100 flex items-center gap-1.5', labelClass, detail.labelClass), children: [detail.icon && jsx("span", { className: "shrink-0 text-gray-400", children: detail.icon }), jsx("span", { children: detail.label }), detail.helpText && (jsx("span", { className: "text-xs text-gray-400 font-normal cursor-help", title: detail.helpText, children: "(?)" }))] }), jsx("dd", { className: buildClassName('text-sm/6 text-gray-700 dark:text-gray-300', !isVertical && 'sm:col-span-2 sm:mt-0', detail.contentClass), children: detail.copyable && copyText ? (jsx(CopyableValue, { text: copyText, children: displayValue })) : (displayValue) })] }, detail.label || index));
@@ -1416,41 +1553,6 @@ const Dot = ({ as = 'span', className, ...props }) => React__default.createEleme
     ...props,
 });
 
-const alignmentMap = {
-    center: 'items-center justify-center h-full',
-    start: 'justify-start h-full',
-    end: 'justify-end h-full',
-    top: 'items-start justify-center w-full',
-    bottom: 'items-end justify-center h-full',
-};
-const panelAlignmentMap = {
-    center: 'data-[closed]:scale-95 rounded-2xl',
-    start: 'data-[closed]:-translate-x-1/2 rounded-r-2xl',
-    end: 'data-[closed]:translate-x-1/2 rounded-l-2xl',
-    top: 'data-[closed]:-translate-y-1/2 rounded-b-2xl',
-    bottom: 'data-[closed]:translate-y-1/2 rounded-t-2xl md:rounded-t-3xl max-h-[92svh]',
-};
-const panelSizeMap = {
-    xs: 'max-w-xs',
-    sm: 'max-w-sm',
-    md: 'max-w-md',
-    lg: 'max-w-lg',
-    xl: 'max-w-xl',
-    '2xl': 'max-w-2xl',
-    full: 'w-full',
-};
-const Drawer = ({ isOpen, onClose = () => { }, closeOnOutsideClick = true, align = 'end', size = 'md', backdrop = true, title, description, children, footer, footerSticky = false, panelClass = '', contentClass = '', titleClass = '', descriptionClass = '', titleSticky = false, showBackButton = false, showCloseButton = true, dragHandle, }) => {
-    const showTitleSection = Boolean(title || description || showBackButton || showCloseButton);
-    const shouldShowDragHandle = dragHandle !== null && dragHandle !== void 0 ? dragHandle : align === 'bottom';
-    const handleDialogClose = () => {
-        if (closeOnOutsideClick) {
-            onClose === null || onClose === void 0 ? void 0 : onClose();
-        }
-    };
-    return (jsxs(Dialog, { open: isOpen, as: "div", className: "relative z-50 focus:outline-none", onClose: handleDialogClose, transition: true, children: [backdrop && (jsx(DialogBackdrop, { className: "fixed inset-0 bg-black/40 backdrop-blur-xs transition-opacity duration-200" })), jsx("div", { className: "fixed inset-0 w-screen h-[100svh]", children: jsx("div", { className: buildClassName('flex', alignmentMap[align]), children: jsxs(DialogPanel, { transition: true, className: buildClassName('w-full max-w-full bg-white dark:bg-gray-800 shadow-xl flex flex-col min-w-0', 'overflow-y-auto overflow-x-hidden duration-200 ease-out data-[closed]:opacity-0', panelAlignmentMap[align], panelSizeMap[size], panelClass), children: [shouldShowDragHandle && (jsx("div", { className: "w-12 h-1.5 rounded-full bg-gray-300 dark:bg-gray-600 mx-auto my-2.5 shrink-0 cursor-grab", "data-testid": "drawer-drag-handle" })), showTitleSection && (jsxs("div", { className: buildClassName('space-y-1 py-3 px-4 md:px-6 flex flex-col border-b border-gray-100 dark:border-gray-700/60 shrink-0', titleSticky && 'sticky top-0 bg-white dark:bg-gray-800 z-10'), children: [jsxs("div", { className: "flex items-center justify-between gap-3 min-w-0", children: [jsxs("div", { className: "flex items-center gap-2 min-w-0 flex-1", children: [showBackButton && (jsx(Button, { iconOnly: true, "aria-label": "Back", variant: "plain", theme: "secondary", size: "xs", onClick: onClose, children: jsx(SvgChevronLeft, { className: "size-4" }) })), title && (jsx(DialogTitle, { as: "h3", className: buildClassName('text-lg font-semibold text-gray-900 dark:text-white truncate tracking-tight min-w-0', titleClass), children: title }))] }), showCloseButton && (jsx(Button, { iconOnly: true, "aria-label": "Close drawer", variant: "plain", theme: "secondary", size: "xs", onClick: onClose, className: "rounded-full text-gray-400 hover:text-gray-600 dark:hover:text-gray-200 shrink-0", children: jsx(SvgX, { className: "size-4" }) }))] }), description && (jsx("p", { className: buildClassName('text-sm text-gray-500 dark:text-gray-400 font-normal truncate', descriptionClass), children: description }))] })), jsx("div", { className: buildClassName('flex-1 p-4 md:p-6 space-y-4 min-w-0', contentClass), children: children }), footer && (jsx("div", { className: buildClassName('p-4 border-t border-gray-100 dark:border-gray-700/60 bg-gray-50/50 dark:bg-gray-800/80 shrink-0 min-w-0', footerSticky && 'sticky bottom-0 z-10'), children: footer }))] }) }) })] }));
-};
-Drawer.displayName = 'Drawer';
-
 const WIDTH_CLASS = {
     auto: 'w-auto min-w-[120px]',
     sm: 'w-44',
@@ -1476,7 +1578,7 @@ const Dropdown = ({ triggerButton, renderTriggerButton, className, items, render
                     variant: (_b = triggerButton.props.variant) !== null && _b !== void 0 ? _b : variant,
                     size: (_c = triggerButton.props.size) !== null && _c !== void 0 ? _c : size,
                     disabled: (_d = triggerButton.props.disabled) !== null && _d !== void 0 ? _d : disabled,
-                }) })) : (jsx(MenuButton, { as: Fragment$1, children: triggerButton })), jsx(MenuItems, { transition: transition, anchor: anchor, className: buildClassName('origin-top-right rounded-xl shadow-lg p-1.5 text-sm transition duration-100 ease-out z-50', 'border border-gray-200/80 dark:border-gray-700/80 bg-white dark:bg-gray-800 text-gray-800 dark:text-gray-200', 'focus:outline-none data-[closed]:scale-95 data-[closed]:opacity-0', '[--anchor-gap:--spacing(1)]', widthClass, itemsContainerClass), "data-testid": "dropdown-items", as: "ul", children: items.map((item, idx) => (jsxs(Fragment$1, { children: [item.groupTitle && (jsx("li", { className: "px-2.5 pt-2 pb-1 text-[11px] font-semibold text-gray-400 dark:text-gray-500 uppercase tracking-wider select-none", "data-testid": `dropdown-group-${item.id}`, children: item.groupTitle }, `group-${item.id}`)), jsx(MenuItem, { as: "li", disabled: item.disabled, children: ({ disabled, active }) => (jsx("div", { onClick: () => {
+                }) })) : (jsx(MenuButton, { as: Fragment$1, children: triggerButton })), jsx(MenuItems, { transition: transition, anchor: anchor, className: buildClassName('origin-top-right rounded-xl shadow-lg p-1.5 text-sm transition duration-100 ease-out z-50', 'border border-[var(--ui-border)] bg-white dark:bg-gray-800 text-gray-800 dark:text-gray-200', 'focus:outline-none data-[closed]:scale-95 data-[closed]:opacity-0', '[--anchor-gap:--spacing(1)]', widthClass, itemsContainerClass), "data-testid": "dropdown-items", as: "ul", children: items.map((item, idx) => (jsxs(Fragment$1, { children: [item.groupTitle && (jsx("li", { className: "px-2.5 pt-2 pb-1 text-[11px] font-semibold text-gray-400 dark:text-gray-500 uppercase tracking-wider select-none", "data-testid": `dropdown-group-${item.id}`, children: item.groupTitle }, `group-${item.id}`)), !item.divider && (jsx(MenuItem, { as: "li", disabled: item.disabled, children: ({ disabled, active }) => (jsx("div", { onClick: () => {
                                     var _a;
                                     if (!disabled) {
                                         (_a = item.onClick) === null || _a === void 0 ? void 0 : _a.call(item, item);
@@ -1488,14 +1590,14 @@ const Dropdown = ({ triggerButton, renderTriggerButton, className, items, render
                                         : 'hover:bg-rose-50 dark:hover:bg-rose-950/40')
                                     : buildClassName('text-gray-700 dark:text-gray-200', active
                                         ? 'bg-gray-100 dark:bg-gray-700/80'
-                                        : 'hover:bg-gray-100/80 dark:hover:bg-gray-700/80'), disabled && 'opacity-40 cursor-not-allowed pointer-events-none', menuItemClass), "data-testid": `dropdown-item-${item.id}`, children: renderItem ? (renderItem(item)) : (jsxs(Fragment, { children: [jsxs("div", { className: "flex items-center gap-2.5 min-w-0 flex-1", children: [item.icon && (jsx("span", { className: buildClassName('shrink-0', item.danger ? 'text-rose-500' : 'text-gray-400 dark:text-gray-500'), children: item.icon })), jsxs("div", { className: "flex flex-col min-w-0", children: [item.label && jsx("span", { className: "font-medium truncate", children: item.label }), item.description && (jsx("span", { className: "text-xs text-gray-400 dark:text-gray-500 font-normal truncate", children: item.description }))] })] }), item.shortcut && (jsx("kbd", { className: "shrink-0 text-[10px] font-medium font-mono px-1.5 py-0.5 rounded bg-gray-100 dark:bg-gray-700/80 border border-gray-200/60 dark:border-gray-600/60 text-gray-400 dark:text-gray-400", children: item.shortcut }))] })) })) }), item.divider && idx < items.length - 1 && (jsx("li", { className: "my-1 h-px bg-gray-200/80 dark:bg-gray-700/80", "data-testid": "dropdown-divider" }, `divider-${item.id}`))] }, item.id))) })] }));
+                                        : 'hover:bg-gray-100/80 dark:hover:bg-gray-700/80'), disabled && 'opacity-40 cursor-not-allowed pointer-events-none', menuItemClass), "data-testid": `dropdown-item-${item.id}`, children: renderItem ? (renderItem(item)) : (jsxs(Fragment, { children: [jsxs("div", { className: "flex items-center gap-2.5 min-w-0 flex-1", children: [item.icon && (jsx("span", { className: buildClassName('shrink-0', item.danger ? 'text-rose-500' : 'text-gray-400 dark:text-gray-500'), children: item.icon })), jsxs("div", { className: "flex flex-col min-w-0", children: [item.label && (jsx("span", { className: "font-medium truncate", children: item.label })), item.description && (jsx("span", { className: "text-xs text-gray-400 dark:text-gray-500 font-normal truncate", children: item.description }))] })] }), item.shortcut && (jsx("kbd", { className: "shrink-0 text-[10px] font-medium font-mono px-1.5 py-0.5 rounded bg-gray-100 dark:bg-gray-700/80 border border-[var(--ui-border-muted)] text-gray-400 dark:text-gray-400", children: item.shortcut }))] })) })) })), item.divider && idx < items.length - 1 && (jsx("li", { className: "my-1 h-px bg-gray-200/80 dark:bg-gray-700/80", "data-testid": "dropdown-divider" }, `divider-${item.id}`))] }, item.id))) })] }));
 };
 Dropdown.displayName = 'Dropdown';
 
-var _path$2;
-function _extends$2() { return _extends$2 = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$2.apply(null, arguments); }
+var _path$3;
+function _extends$3() { return _extends$3 = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$3.apply(null, arguments); }
 var SvgFolderPlus = function SvgFolderPlus(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$2({
+  return /*#__PURE__*/React.createElement("svg", _extends$3({
     xmlns: "http://www.w3.org/2000/svg",
     width: 24,
     height: 24,
@@ -1506,7 +1608,7 @@ var SvgFolderPlus = function SvgFolderPlus(props) {
     strokeWidth: 2,
     className: "lucide lucide-folder-plus-icon lucide-folder-plus",
     viewBox: "0 0 24 24"
-  }, props), _path$2 || (_path$2 = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$3 || (_path$3 = /*#__PURE__*/React.createElement("path", {
     d: "M12 10v6M9 13h6M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z"
   })));
 };
@@ -1515,15 +1617,401 @@ const EmptyState = ({ title, description, className, action = null, }) => {
     return (jsx("div", { className: buildClassName('w-full flex justify-center px-4 pt-16', className), children: jsxs("div", { className: "max-w-md flex flex-col items-center gap-4", children: [jsx(SvgFolderPlus, { className: "size-8 text-[var(--ui-text)]" }), jsx(HeadingText.SubTitle, { children: title }), description && (jsx(BodyText, { as: "p", className: "text-center", muted: true, small: true, children: description })), action] }) }));
 };
 
-const sizeClasses$4 = {
-    sm: {
-        input: 'px-2.5 py-1 text-xs leading-5',
-        group: 'w-8 text-xs',
-        icon: 'size-3.5',
-        text: 'text-xs',
-    },
-    md: {
-        input: 'px-3.5 py-2 text-sm leading-6',
+function FloatingActionButton({ icon, activeIcon, label, variant = 'primary', size = 'md', position = 'bottom-right', speedDialActions, isOpen: externalIsOpen, onToggle, disabled = false, onClick, 'aria-label': ariaLabel, containerClass = '', className = '', }) {
+    const [internalIsOpen, setInternalIsOpen] = useState(false);
+    const isSpeedDial = Array.isArray(speedDialActions) && speedDialActions.length > 0;
+    const isOpen = externalIsOpen !== undefined ? externalIsOpen : internalIsOpen;
+    const toggleOpen = () => {
+        const nextState = !isOpen;
+        setInternalIsOpen(nextState);
+        onToggle === null || onToggle === void 0 ? void 0 : onToggle(nextState);
+    };
+    const handleMainClick = () => {
+        if (disabled)
+            return;
+        if (isSpeedDial) {
+            toggleOpen();
+        }
+        else {
+            onClick === null || onClick === void 0 ? void 0 : onClick();
+        }
+    };
+    const handleSubActionClick = (action) => {
+        var _a;
+        if (action.disabled)
+            return;
+        (_a = action.onClick) === null || _a === void 0 ? void 0 : _a.call(action);
+        setInternalIsOpen(false);
+        onToggle === null || onToggle === void 0 ? void 0 : onToggle(false);
+    };
+    const positionClasses = {
+        'bottom-right': 'fixed bottom-6 right-6 z-40',
+        'bottom-left': 'fixed bottom-6 left-6 z-40',
+        'bottom-center': 'fixed bottom-6 left-1/2 -translate-x-1/2 z-40',
+        inline: 'relative inline-flex z-10',
+    }[position];
+    const variantClasses = {
+        primary: 'bg-blue-600 hover:bg-blue-700 active:bg-blue-800 text-white shadow-lg shadow-blue-600/30',
+        secondary: 'bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700 text-gray-800 dark:text-gray-100 border border-[var(--ui-border)] shadow-lg',
+        danger: 'bg-red-600 hover:bg-red-700 active:bg-red-800 text-white shadow-lg shadow-red-600/30',
+        dark: 'bg-gray-900 hover:bg-black active:bg-black text-white shadow-lg shadow-gray-900/40',
+    }[variant];
+    const sizeClasses = {
+        sm: label ? 'px-3.5 py-2 text-xs gap-2 rounded-full' : 'p-2.5 rounded-full',
+        md: label ? 'px-5 py-3 text-sm gap-2.5 rounded-full' : 'p-3.5 rounded-full',
+        lg: label ? 'px-6 py-4 text-base gap-3 rounded-full' : 'p-4 rounded-full',
+    }[size];
+    return (jsxs("div", { className: buildClassName(positionClasses, containerClass), "data-testid": "fab-container", children: [isSpeedDial && isOpen && (jsx("div", { className: "fixed inset-0 bg-black/25 backdrop-blur-xs z-30 transition-opacity duration-200", onClick: () => toggleOpen(), "data-testid": "fab-backdrop" })), isSpeedDial && (jsx("div", { className: buildClassName('absolute bottom-full mb-3 flex flex-col gap-2.5 z-40 transition-all duration-200 origin-bottom', position === 'bottom-left'
+                    ? 'items-start left-0'
+                    : position === 'bottom-center'
+                        ? 'items-center left-1/2 -translate-x-1/2'
+                        : 'items-end right-0', isOpen
+                    ? 'scale-100 opacity-100 pointer-events-auto'
+                    : 'scale-90 opacity-0 pointer-events-none'), "data-testid": "fab-speed-dial-menu", children: speedDialActions.map((action) => {
+                    const isDanger = action.theme === 'danger';
+                    const isPrimary = action.theme === 'primary';
+                    return (jsxs("button", { type: "button", disabled: action.disabled, onClick: () => handleSubActionClick(action), className: buildClassName('flex items-center gap-2.5 py-2 px-3.5 rounded-full text-xs font-semibold shadow-md transition-all duration-150 cursor-pointer group', action.disabled && 'opacity-50 cursor-not-allowed pointer-events-none', !action.disabled &&
+                            (isDanger
+                                ? 'bg-red-600 text-white hover:bg-red-700'
+                                : isPrimary
+                                    ? 'bg-blue-600 text-white hover:bg-blue-700'
+                                    : 'bg-white dark:bg-gray-800 text-gray-800 dark:text-gray-100 hover:bg-gray-100 dark:hover:bg-gray-700 border border-[var(--ui-border)]')), "data-testid": `fab-action-${action.id}`, children: [jsx("span", { className: "text-sm", children: action.icon }), jsx("span", { className: "whitespace-nowrap", children: action.label })] }, action.id));
+                }) })), jsxs("button", { type: "button", disabled: disabled, onClick: handleMainClick, "aria-label": ariaLabel || (typeof label === 'string' ? label : 'Floating action'), "aria-expanded": isSpeedDial ? isOpen : undefined, className: buildClassName('inline-flex items-center justify-center font-semibold transition-all duration-200 cursor-pointer select-none z-40 active:scale-95', disabled && 'opacity-50 cursor-not-allowed pointer-events-none shadow-none', variantClasses, sizeClasses, className), "data-testid": "fab-button", children: [jsx("span", { className: buildClassName('transition-transform duration-200', isOpen && 'rotate-45'), children: isOpen && activeIcon ? activeIcon : icon }), label && jsx("span", { className: "whitespace-nowrap", children: label })] })] }));
+}
+FloatingActionButton.displayName = 'FloatingActionButton';
+
+const GAP_MAP = {
+    none: 'gap-0',
+    xs: 'gap-1',
+    sm: 'gap-2',
+    md: 'gap-4',
+    lg: 'gap-6',
+    xl: 'gap-8',
+    '2xl': 'gap-12',
+};
+const GAP_X_MAP = {
+    none: 'gap-x-0',
+    xs: 'gap-x-1',
+    sm: 'gap-x-2',
+    md: 'gap-x-4',
+    lg: 'gap-x-6',
+    xl: 'gap-x-8',
+    '2xl': 'gap-x-12',
+};
+const GAP_Y_MAP = {
+    none: 'gap-y-0',
+    xs: 'gap-y-1',
+    sm: 'gap-y-2',
+    md: 'gap-y-4',
+    lg: 'gap-y-6',
+    xl: 'gap-y-8',
+    '2xl': 'gap-y-12',
+};
+const ALIGN_MAP = {
+    start: 'items-start',
+    center: 'items-center',
+    end: 'items-end',
+    baseline: 'items-baseline',
+    stretch: 'items-stretch',
+};
+const JUSTIFY_MAP = {
+    start: 'justify-start',
+    center: 'justify-center',
+    end: 'justify-end',
+    between: 'justify-between',
+    around: 'justify-around',
+    evenly: 'justify-evenly',
+};
+const DIRECTION_MAP = {
+    row: 'flex-row',
+    'row-reverse': 'flex-row-reverse',
+    col: 'flex-col',
+    'col-reverse': 'flex-col-reverse',
+};
+const WRAP_MAP = {
+    wrap: 'flex-wrap',
+    nowrap: 'flex-nowrap',
+    'wrap-reverse': 'flex-wrap-reverse',
+};
+/**
+ * Resolves the `order` prop to inline styles when it's a raw number.
+ *
+ * `'first'` / `'last'` map to the static `order-first`/`order-last` Tailwind
+ * utilities (safe, since those exact class names are literal elsewhere).
+ * Arbitrary numeric orders can't be expressed as a safe literal class (the
+ * value is unbounded), so they're applied as an inline `order` style instead
+ * — that works regardless of what the consuming app's Tailwind build scans.
+ */
+const resolveOrderStyle = (order) => typeof order === 'number' ? { order } : undefined;
+const resolveOrderClassName = (order) => {
+    if (order === 'first')
+        return '-order-1';
+    if (order === 'last')
+        return 'order-last';
+    return undefined;
+};
+/** Width-fraction span classes used by `Flex.Item` (unprefixed / base breakpoint). */
+const FLEX_SPAN_MAP = {
+    1: 'w-1/12 flex-none',
+    2: 'w-2/12 flex-none',
+    3: 'w-3/12 flex-none',
+    4: 'w-4/12 flex-none',
+    5: 'w-5/12 flex-none',
+    6: 'w-6/12 flex-none',
+    7: 'w-7/12 flex-none',
+    8: 'w-8/12 flex-none',
+    9: 'w-9/12 flex-none',
+    10: 'w-10/12 flex-none',
+    11: 'w-11/12 flex-none',
+    12: 'w-full flex-none',
+    auto: 'w-auto flex-none',
+    full: 'w-full flex-none',
+};
+const FLEX_SM_SPAN_MAP = {
+    1: 'sm:w-1/12',
+    2: 'sm:w-2/12',
+    3: 'sm:w-3/12',
+    4: 'sm:w-4/12',
+    5: 'sm:w-5/12',
+    6: 'sm:w-6/12',
+    7: 'sm:w-7/12',
+    8: 'sm:w-8/12',
+    9: 'sm:w-9/12',
+    10: 'sm:w-10/12',
+    11: 'sm:w-11/12',
+    12: 'sm:w-full',
+    auto: 'sm:w-auto',
+    full: 'sm:w-full',
+};
+const FLEX_MD_SPAN_MAP = {
+    1: 'md:w-1/12',
+    2: 'md:w-2/12',
+    3: 'md:w-3/12',
+    4: 'md:w-4/12',
+    5: 'md:w-5/12',
+    6: 'md:w-6/12',
+    7: 'md:w-7/12',
+    8: 'md:w-8/12',
+    9: 'md:w-9/12',
+    10: 'md:w-10/12',
+    11: 'md:w-11/12',
+    12: 'md:w-full',
+    auto: 'md:w-auto',
+    full: 'md:w-full',
+};
+const FLEX_LG_SPAN_MAP = {
+    1: 'lg:w-1/12',
+    2: 'lg:w-2/12',
+    3: 'lg:w-3/12',
+    4: 'lg:w-4/12',
+    5: 'lg:w-5/12',
+    6: 'lg:w-6/12',
+    7: 'lg:w-7/12',
+    8: 'lg:w-8/12',
+    9: 'lg:w-9/12',
+    10: 'lg:w-10/12',
+    11: 'lg:w-11/12',
+    12: 'lg:w-full',
+    auto: 'lg:w-auto',
+    full: 'lg:w-full',
+};
+const FLEX_XL_SPAN_MAP = {
+    1: 'xl:w-1/12',
+    2: 'xl:w-2/12',
+    3: 'xl:w-3/12',
+    4: 'xl:w-4/12',
+    5: 'xl:w-5/12',
+    6: 'xl:w-6/12',
+    7: 'xl:w-7/12',
+    8: 'xl:w-8/12',
+    9: 'xl:w-9/12',
+    10: 'xl:w-10/12',
+    11: 'xl:w-11/12',
+    12: 'xl:w-full',
+    auto: 'xl:w-auto',
+    full: 'xl:w-full',
+};
+const FLEX_XXL_SPAN_MAP = {
+    1: '2xl:w-1/12',
+    2: '2xl:w-2/12',
+    3: '2xl:w-3/12',
+    4: '2xl:w-4/12',
+    5: '2xl:w-5/12',
+    6: '2xl:w-6/12',
+    7: '2xl:w-7/12',
+    8: '2xl:w-8/12',
+    9: '2xl:w-9/12',
+    10: '2xl:w-10/12',
+    11: '2xl:w-11/12',
+    12: '2xl:w-full',
+    auto: '2xl:w-auto',
+    full: '2xl:w-full',
+};
+/** `col-span-*` classes used by `Grid.Col` (unprefixed / base breakpoint). */
+const GRID_SPAN_MAP = {
+    1: 'col-span-1',
+    2: 'col-span-2',
+    3: 'col-span-3',
+    4: 'col-span-4',
+    5: 'col-span-5',
+    6: 'col-span-6',
+    7: 'col-span-7',
+    8: 'col-span-8',
+    9: 'col-span-9',
+    10: 'col-span-10',
+    11: 'col-span-11',
+    12: 'col-span-12',
+    auto: 'col-auto',
+    full: 'col-span-full',
+};
+const GRID_SM_SPAN_MAP = {
+    1: 'sm:col-span-1',
+    2: 'sm:col-span-2',
+    3: 'sm:col-span-3',
+    4: 'sm:col-span-4',
+    5: 'sm:col-span-5',
+    6: 'sm:col-span-6',
+    7: 'sm:col-span-7',
+    8: 'sm:col-span-8',
+    9: 'sm:col-span-9',
+    10: 'sm:col-span-10',
+    11: 'sm:col-span-11',
+    12: 'sm:col-span-12',
+    auto: 'sm:col-auto',
+    full: 'sm:col-span-full',
+};
+const GRID_MD_SPAN_MAP = {
+    1: 'md:col-span-1',
+    2: 'md:col-span-2',
+    3: 'md:col-span-3',
+    4: 'md:col-span-4',
+    5: 'md:col-span-5',
+    6: 'md:col-span-6',
+    7: 'md:col-span-7',
+    8: 'md:col-span-8',
+    9: 'md:col-span-9',
+    10: 'md:col-span-10',
+    11: 'md:col-span-11',
+    12: 'md:col-span-12',
+    auto: 'md:col-auto',
+    full: 'md:col-span-full',
+};
+const GRID_LG_SPAN_MAP = {
+    1: 'lg:col-span-1',
+    2: 'lg:col-span-2',
+    3: 'lg:col-span-3',
+    4: 'lg:col-span-4',
+    5: 'lg:col-span-5',
+    6: 'lg:col-span-6',
+    7: 'lg:col-span-7',
+    8: 'lg:col-span-8',
+    9: 'lg:col-span-9',
+    10: 'lg:col-span-10',
+    11: 'lg:col-span-11',
+    12: 'lg:col-span-12',
+    auto: 'lg:col-auto',
+    full: 'lg:col-span-full',
+};
+const GRID_XL_SPAN_MAP = {
+    1: 'xl:col-span-1',
+    2: 'xl:col-span-2',
+    3: 'xl:col-span-3',
+    4: 'xl:col-span-4',
+    5: 'xl:col-span-5',
+    6: 'xl:col-span-6',
+    7: 'xl:col-span-7',
+    8: 'xl:col-span-8',
+    9: 'xl:col-span-9',
+    10: 'xl:col-span-10',
+    11: 'xl:col-span-11',
+    12: 'xl:col-span-12',
+    auto: 'xl:col-auto',
+    full: 'xl:col-span-full',
+};
+const GRID_XXL_SPAN_MAP = {
+    1: '2xl:col-span-1',
+    2: '2xl:col-span-2',
+    3: '2xl:col-span-3',
+    4: '2xl:col-span-4',
+    5: '2xl:col-span-5',
+    6: '2xl:col-span-6',
+    7: '2xl:col-span-7',
+    8: '2xl:col-span-8',
+    9: '2xl:col-span-9',
+    10: '2xl:col-span-10',
+    11: '2xl:col-span-11',
+    12: '2xl:col-span-12',
+    auto: '2xl:col-auto',
+    full: '2xl:col-span-full',
+};
+/**
+ * Preset track-count classes for `Grid`'s `cols` prop. Each preset
+ * progressively reveals more columns at wider breakpoints so a grid is
+ * responsive out of the box without the caller specifying per-item spans.
+ */
+const GRID_COLS_MAP = {
+    1: 'grid-cols-1',
+    2: 'grid-cols-1 sm:grid-cols-2',
+    3: 'grid-cols-1 sm:grid-cols-2 md:grid-cols-3',
+    4: 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-4',
+    5: 'grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-5',
+    6: 'grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-6',
+    7: 'grid-cols-1 sm:grid-cols-2 md:grid-cols-4 lg:grid-cols-7',
+    8: 'grid-cols-1 sm:grid-cols-2 md:grid-cols-4 lg:grid-cols-8',
+    9: 'grid-cols-1 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-9',
+    10: 'grid-cols-1 sm:grid-cols-2 md:grid-cols-5 lg:grid-cols-10',
+    11: 'grid-cols-1 sm:grid-cols-3 md:grid-cols-6 lg:grid-cols-11',
+    12: 'grid-cols-12',
+    auto: 'grid-cols-none auto-cols-auto',
+};
+
+const FlexItem = forwardRef((props, ref) => {
+    const { as: Component = 'div', span, sm, md, lg, xl, xxl, grow, shrink, order, className, style, children, ...restProps } = props;
+    const classes = buildClassName('min-w-0 box-border', span && FLEX_SPAN_MAP[String(span)], sm && FLEX_SM_SPAN_MAP[String(sm)], md && FLEX_MD_SPAN_MAP[String(md)], lg && FLEX_LG_SPAN_MAP[String(lg)], xl && FLEX_XL_SPAN_MAP[String(xl)], xxl && FLEX_XXL_SPAN_MAP[String(xxl)], resolveOrderClassName(order), grow === true && 'grow', grow === false && 'grow-0', shrink === true && 'shrink', shrink === false && 'shrink-0', className);
+    return (jsx(Component, { ref: ref, className: classes, style: { ...resolveOrderStyle(order), ...style }, ...restProps, children: children }));
+});
+FlexItem.displayName = 'Flex.Item';
+const Flex = forwardRef((props, ref) => {
+    const { as: Component = 'div', gap, gapX, gapY, align = 'stretch', justify = 'start', direction = 'row', wrap = 'wrap', inline = false, className, children, ...restProps } = props;
+    const classes = buildClassName(inline ? 'inline-flex' : 'flex', DIRECTION_MAP[direction] || 'flex-row', WRAP_MAP[wrap] || 'flex-wrap', 'w-full', !gapX && !gapY && gap && GAP_MAP[gap], gapX && GAP_X_MAP[gapX], gapY && GAP_Y_MAP[gapY], ALIGN_MAP[align] || 'items-stretch', JUSTIFY_MAP[justify] || 'justify-start', className);
+    return (jsx(Component, { ref: ref, className: classes, ...restProps, children: children }));
+});
+Flex.Item = FlexItem;
+Flex.Col = FlexItem;
+Flex.displayName = 'Flex';
+
+const GridContext = createContext({ isAutoFit: false });
+const GridCol = forwardRef((props, ref) => {
+    const { as: Component = 'div', span, sm, md, lg, xl, xxl, grow, shrink, order, className, style, children, ...restProps } = props;
+    const { isAutoFit } = useContext(GridContext);
+    const classes = buildClassName('min-w-0 box-border', span ? GRID_SPAN_MAP[String(span)] : isAutoFit ? undefined : 'col-span-12 sm:col-span-4', sm && GRID_SM_SPAN_MAP[String(sm)], md && GRID_MD_SPAN_MAP[String(md)], lg && GRID_LG_SPAN_MAP[String(lg)], xl && GRID_XL_SPAN_MAP[String(xl)], xxl && GRID_XXL_SPAN_MAP[String(xxl)], resolveOrderClassName(order), grow === true && 'grow', grow === false && 'grow-0', shrink === true && 'shrink', shrink === false && 'shrink-0', className);
+    return (jsx(Component, { ref: ref, className: classes, style: { ...resolveOrderStyle(order), ...style }, ...restProps, children: children }));
+});
+GridCol.displayName = 'Grid.Col';
+const Grid = forwardRef((props, ref) => {
+    const { as: Component = 'div', cols, minColWidth, autoFit = true, gap = 'md', gapX, gapY, align = 'stretch', justify, direction = 'row', wrap = 'wrap', flex = false, inline = false, className, style, children, ...restProps } = props;
+    const isAutoFit = Boolean(!flex && minColWidth);
+    const classes = buildClassName(flex ? (inline ? 'inline-flex' : 'flex') : inline ? 'inline-grid' : 'grid', flex && (DIRECTION_MAP[direction] || 'flex-row'), flex && (WRAP_MAP[wrap] || 'flex-wrap'), !flex &&
+        !minColWidth &&
+        (cols ? GRID_COLS_MAP[String(cols)] || 'grid-cols-12' : 'grid-cols-12'), !flex && 'justify-items-stretch', 'w-full', !gapX && !gapY && GAP_MAP[gap], gapX && GAP_X_MAP[gapX], gapY && GAP_Y_MAP[gapY], ALIGN_MAP[align] || 'items-stretch', justify && (JUSTIFY_MAP[justify] || 'justify-start'), className);
+    const gridTemplateColumns = !flex && minColWidth
+        ? `repeat(${autoFit ? 'auto-fit' : 'auto-fill'}, minmax(${minColWidth}, 1fr))`
+        : undefined;
+    return (jsx(GridContext.Provider, { value: { isAutoFit }, children: jsx(Component, { ref: ref, className: classes, style: gridTemplateColumns ? { gridTemplateColumns, ...style } : style, ...restProps, children: children }) }));
+});
+Grid.Col = GridCol;
+Grid.Item = GridCol;
+Grid.displayName = 'Grid';
+
+const sizeClasses$4 = {
+    sm: {
+        input: 'px-2.5 py-1.5 text-xs leading-5',
+        group: 'w-8 text-xs',
+        icon: 'size-3.5',
+        text: 'text-xs',
+    },
+    md: {
+        input: 'px-3.5 py-2 text-sm leading-6',
         group: 'w-10 text-sm',
         icon: 'size-4',
         text: 'text-sm',
@@ -1539,9 +2027,9 @@ function buildInputClass(className, { isFocusWithin = false, disabled = false, h
     const currentSize = sizeClasses$4[size] || sizeClasses$4.md;
     return buildClassName('transition-all duration-150', 'block w-full rounded-lg bg-white', currentSize.input, 'text-gray-900 outline outline-1 -outline-offset-1', hasError
         ? '!outline-red-500 !ring-1 !ring-red-500/50 dark:!outline-red-500'
-        : 'outline-gray-300 dark:outline-gray-600', disabled
-        ? 'pointer-events-none bg-gray-100 dark:bg-gray-800 dark:text-gray-600 dark:placeholder-gray-600 placeholder-gray-400 outline-gray-200 dark:outline-gray-700'
-        : 'bg-white dark:bg-gray-700 dark:text-white outline-gray-300 dark:outline-gray-600 dark:placeholder-gray-400 placeholder-gray-400', isFocusWithin
+        : 'outline-[var(--ui-border)]', disabled
+        ? 'pointer-events-none bg-gray-100 dark:bg-gray-800 dark:text-gray-600 dark:placeholder-gray-600 placeholder-gray-400 outline-[var(--ui-border-muted)]'
+        : 'bg-white dark:bg-gray-700 dark:text-white outline-[var(--ui-border)] dark:placeholder-gray-400 placeholder-gray-400', isFocusWithin
         ? 'focus-within:outline-[var(--ui-focus-ring)] focus-within:outline-2 focus-within:-outline-offset-2'
         : 'focus:outline-[var(--ui-focus-ring)] focus:outline-2 focus:-outline-offset-2', className);
 }
@@ -1579,11 +2067,11 @@ const Input = forwardRef((props, ref) => {
     const actualRightGroup = rightGroup !== null && rightGroup !== void 0 ? rightGroup : (showClearButton ? (jsx("button", { type: "button", onClick: handleClear, className: "p-1 rounded-full text-gray-400 hover:text-gray-600 dark:hover:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors cursor-pointer", title: "Clear text", tabIndex: -1, children: jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20", fill: "currentColor", className: currentSize.icon, children: jsx("path", { d: "M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z" }) }) })) : null);
     const hasRightGroup = actualRightGroup !== null && actualRightGroup !== undefined;
     const hasLeftGroup = leftGroup != null && leftGroup !== undefined;
-    return (jsxs("div", { className: buildClassName('group', hasError && 'has-error', containerClass), children: [label && (jsxs("div", { className: buildClassName('flex items-center justify-between mb-1.5', labelWrapperClass), children: [jsx(Label, { className: labelClass, htmlFor: id, children: label }), labelHint && jsx(TextContent, { xsmall: true, children: labelHint })] })), jsxs("div", { className: "flex rounded-lg shadow-2xs", children: [prefix && (jsx("span", { className: "inline-flex items-center px-3 rounded-l-lg border border-r-0 border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-800 text-gray-500 dark:text-gray-400 text-xs font-medium shrink-0", children: prefix })), jsxs("div", { className: "relative flex-1 min-w-0", children: [hasLeftGroup && (jsx("span", { className: buildClassName('absolute top-0 h-full flex items-center justify-center text-gray-400 dark:text-gray-500', currentSize.group), children: leftGroup })), jsx("input", { ref: innerRef, autoComplete: "off", ...inputProps, value: value, defaultValue: defaultValue, onChange: handleInputChange, maxLength: maxLength, name: name, id: id, type: type, className: buildClassName(buildInputClass(className, {
+    return (jsxs("div", { className: buildClassName('group', hasError && 'has-error', containerClass), children: [label && (jsxs("div", { className: buildClassName('flex items-center justify-between mb-1.5', labelWrapperClass), children: [jsx(Label, { className: labelClass, htmlFor: id, children: label }), labelHint && jsx(TextContent, { xsmall: true, children: labelHint })] })), jsxs("div", { className: "flex rounded-lg shadow-2xs", children: [prefix && (jsx("span", { className: "inline-flex items-center px-3 rounded-l-lg border border-r-0 border-[var(--ui-border)] bg-gray-50 dark:bg-gray-800 text-gray-500 dark:text-gray-400 text-xs font-medium shrink-0", children: prefix })), jsxs("div", { className: "relative flex-1 min-w-0", children: [hasLeftGroup && (jsx("span", { className: buildClassName('absolute top-0 h-full flex items-center justify-center text-gray-400 dark:text-gray-500', currentSize.group), children: leftGroup })), jsx("input", { ref: innerRef, autoComplete: "off", ...inputProps, value: value, defaultValue: defaultValue, onChange: handleInputChange, maxLength: maxLength, name: name, id: id, type: type, className: buildClassName(buildInputClass(className, {
                                     disabled: inputProps.disabled,
                                     hasError,
                                     size,
-                                }), prefix ? '!rounded-l-none' : '', suffix ? '!rounded-r-none' : '', hasRightGroup ? (size === 'lg' ? 'pe-12' : size === 'sm' ? 'pe-8' : 'pe-10') : '', hasLeftGroup ? (size === 'lg' ? 'ps-12' : size === 'sm' ? 'ps-8' : 'ps-10') : '') }), hasRightGroup && (jsx("span", { className: buildClassName('absolute end-0 top-0 h-full flex items-center justify-center text-gray-400 dark:text-gray-500', currentSize.group), children: actualRightGroup }))] }), suffix && (jsx("span", { className: "inline-flex items-center px-3 rounded-r-lg border border-l-0 border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-800 text-gray-500 dark:text-gray-400 text-xs font-medium shrink-0", children: suffix }))] }), (showErrorMessage && error) || helperText || showCount ? (jsxs("div", { className: "mt-1.5 flex items-center justify-between gap-2 text-xs", children: [jsx("div", { className: "min-w-0 flex-1", children: showErrorMessage && error ? (jsx(TextContent, { error: true, small: true, children: error })) : helperText ? (jsx(TextContent, { muted: true, small: true, children: helperText })) : null }), showCount && (jsxs("span", { className: buildClassName('text-[11px] font-medium shrink-0 ml-auto', maxLength && charLength >= maxLength
+                                }), prefix ? '!rounded-l-none' : '', suffix ? '!rounded-r-none' : '', hasRightGroup ? (size === 'lg' ? 'pe-12' : size === 'sm' ? 'pe-8' : 'pe-10') : '', hasLeftGroup ? (size === 'lg' ? 'ps-12' : size === 'sm' ? 'ps-8' : 'ps-10') : '') }), hasRightGroup && (jsx("span", { className: buildClassName('absolute end-0 top-0 h-full flex items-center justify-center text-gray-400 dark:text-gray-500', currentSize.group), children: actualRightGroup }))] }), suffix && (jsx("span", { className: "inline-flex items-center px-3 rounded-r-lg border border-l-0 border-[var(--ui-border)] bg-gray-50 dark:bg-gray-800 text-gray-500 dark:text-gray-400 text-xs font-medium shrink-0", children: suffix }))] }), (showErrorMessage && error) || helperText || showCount ? (jsxs("div", { className: "mt-1.5 flex items-center justify-between gap-2 text-xs", children: [jsx("div", { className: "min-w-0 flex-1", children: showErrorMessage && error ? (jsx(TextContent, { error: true, small: true, children: error })) : helperText ? (jsx(TextContent, { muted: true, small: true, children: helperText })) : null }), showCount && (jsxs("span", { className: buildClassName('text-[11px] font-medium shrink-0 ml-auto', maxLength && charLength >= maxLength
                             ? 'text-red-500 font-semibold'
                             : 'text-gray-400 dark:text-gray-500'), children: [charLength, maxLength ? ` / ${maxLength}` : ''] }))] })) : null] }));
 });
@@ -1633,6 +2121,170 @@ const PasswordInput = forwardRef((props, ref) => {
 });
 PasswordInput.displayName = 'PasswordInput';
 
+function PinInput({ length = 4, value: externalValue, onChange, onComplete, mask = false, size = 'md', type = 'numeric', error, disabled = false, autoFocus = false, containerClass = '', inputClass = '', }) {
+    const [internalValue, setInternalValue] = useState('');
+    const inputRefs = useRef([]);
+    const pinValue = externalValue !== undefined ? externalValue : internalValue;
+    const digits = Array.from({ length }, (_, i) => pinValue[i] || '');
+    useEffect(() => {
+        if (autoFocus && inputRefs.current[0] && !disabled) {
+            inputRefs.current[0].focus();
+        }
+    }, [autoFocus, disabled]);
+    const updatePin = (newDigits) => {
+        const newPin = newDigits.join('').slice(0, length);
+        setInternalValue(newPin);
+        onChange === null || onChange === void 0 ? void 0 : onChange(newPin);
+        if (newPin.length === length) {
+            onComplete === null || onComplete === void 0 ? void 0 : onComplete(newPin);
+        }
+    };
+    const handleInputChange = (e, index) => {
+        var _a;
+        const char = e.target.value.slice(-1);
+        if (!char)
+            return;
+        const isValid = type === 'numeric' ? /^[0-9]$/.test(char) : /^[a-zA-Z0-9]$/.test(char);
+        if (!isValid)
+            return;
+        const nextDigits = [...digits];
+        nextDigits[index] = char;
+        updatePin(nextDigits);
+        if (index < length - 1 && inputRefs.current[index + 1]) {
+            (_a = inputRefs.current[index + 1]) === null || _a === void 0 ? void 0 : _a.focus();
+        }
+    };
+    const handleKeyDown = (e, index) => {
+        var _a, _b, _c;
+        if (e.key === 'Backspace') {
+            if (!digits[index] && index > 0 && inputRefs.current[index - 1]) {
+                const nextDigits = [...digits];
+                nextDigits[index - 1] = '';
+                updatePin(nextDigits);
+                (_a = inputRefs.current[index - 1]) === null || _a === void 0 ? void 0 : _a.focus();
+            }
+            else if (digits[index]) {
+                const nextDigits = [...digits];
+                nextDigits[index] = '';
+                updatePin(nextDigits);
+            }
+        }
+        else if (e.key === 'ArrowLeft' && index > 0) {
+            (_b = inputRefs.current[index - 1]) === null || _b === void 0 ? void 0 : _b.focus();
+        }
+        else if (e.key === 'ArrowRight' && index < length - 1) {
+            (_c = inputRefs.current[index + 1]) === null || _c === void 0 ? void 0 : _c.focus();
+        }
+    };
+    const handlePaste = (e) => {
+        e.preventDefault();
+        if (disabled)
+            return;
+        const pastedData = e.clipboardData.getData('text').trim();
+        const regex = type === 'numeric' ? /[0-9]/g : /[a-zA-Z0-9]/g;
+        const matchedChars = pastedData.match(regex) || [];
+        if (matchedChars.length === 0)
+            return;
+        const nextDigits = Array.from({ length }, (_, i) => matchedChars[i] || '');
+        updatePin(nextDigits);
+        const focusIndex = Math.min(matchedChars.length, length) - 1;
+        const targetRef = inputRefs.current[focusIndex >= 0 ? focusIndex : 0];
+        targetRef === null || targetRef === void 0 ? void 0 : targetRef.focus();
+    };
+    const sizeClasses = {
+        sm: 'size-9 text-sm rounded-lg',
+        md: 'size-11 text-base rounded-xl',
+        lg: 'size-14 text-lg rounded-2xl',
+    }[size];
+    return (jsxs("div", { className: buildClassName('space-y-1.5', containerClass), "data-testid": "pin-input-container", children: [jsx("div", { className: "flex items-center gap-2.5 sm:gap-3", children: digits.map((digit, index) => {
+                    const isFilled = Boolean(digit);
+                    return (jsx("input", { ref: (el) => {
+                            inputRefs.current[index] = el;
+                        }, type: mask ? 'password' : 'text', inputMode: type === 'numeric' ? 'numeric' : 'text', pattern: type === 'numeric' ? '[0-9]*' : undefined, maxLength: 1, value: digit, disabled: disabled, onChange: (e) => handleInputChange(e, index), onKeyDown: (e) => handleKeyDown(e, index), onPaste: handlePaste, className: buildClassName('text-center font-bold transition-all duration-150 outline outline-1 -outline-offset-1 select-none', sizeClasses, disabled
+                            ? 'pointer-events-none bg-gray-100 dark:bg-gray-800 text-gray-400 dark:text-gray-600 outline-[var(--ui-border-muted)]'
+                            : error
+                                ? 'bg-red-50/50 dark:bg-red-950/20 text-red-600 dark:text-red-400 outline-red-500 focus:outline-red-500 focus:outline-2 focus:-outline-offset-2'
+                                : isFilled
+                                    ? 'bg-blue-50/30 dark:bg-blue-950/30 text-gray-900 dark:text-white outline-blue-500 dark:outline-blue-400 focus:outline-[var(--ui-focus-ring)] focus:outline-2 focus:-outline-offset-2'
+                                    : 'bg-white dark:bg-gray-800 text-gray-900 dark:text-white outline-[var(--ui-border)] focus:outline-[var(--ui-focus-ring)] focus:outline-2 focus:-outline-offset-2', inputClass), "data-testid": `pin-input-box-${index}` }, index));
+                }) }), typeof error === 'string' && (jsx("div", { className: "text-xs text-red-500 dark:text-red-400 font-medium pt-0.5", "data-testid": "pin-input-error", children: error }))] }));
+}
+PinInput.displayName = 'PinInput';
+
+function PullArrowIcon({ progress }) {
+    const rotation = Math.min(180, progress * 180);
+    return (jsx("svg", { className: "size-4 text-blue-600 dark:text-blue-400 transition-transform duration-150", style: { transform: `rotate(${rotation}deg)` }, fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2.5, d: "M19 14l-7 7m0 0l-7-7m7 7V3" }) }));
+}
+function PullToRefresh({ onRefresh, pullThreshold = 70, maxPullDistance = 120, disabled = false, refreshing: externalRefreshing, pullingContent, refreshingContent, children, className = '', contentClass = '', }) {
+    const containerRef = useRef(null);
+    const startYRef = useRef(0);
+    const isPullingRef = useRef(false);
+    const [pullDistance, setPullDistance] = useState(0);
+    const [internalRefreshing, setInternalRefreshing] = useState(false);
+    const isRefreshing = externalRefreshing !== undefined ? externalRefreshing : internalRefreshing;
+    const handleTouchStart = useCallback((e) => {
+        if (disabled || isRefreshing)
+            return;
+        const container = containerRef.current;
+        if (container && container.scrollTop === 0) {
+            startYRef.current = e.touches[0].clientY;
+            isPullingRef.current = true;
+        }
+    }, [disabled, isRefreshing]);
+    const handleTouchMove = useCallback((e) => {
+        if (!isPullingRef.current || disabled || isRefreshing)
+            return;
+        const container = containerRef.current;
+        if (!container || container.scrollTop > 0)
+            return;
+        const currentY = e.touches[0].clientY;
+        const rawDistance = currentY - startYRef.current;
+        if (rawDistance > 0) {
+            // Rubber-band resistance formula
+            const dampened = Math.min(maxPullDistance, rawDistance * 0.45);
+            setPullDistance(dampened);
+            if (e.cancelable) {
+                e.preventDefault();
+            }
+        }
+        else {
+            setPullDistance(0);
+        }
+    }, [disabled, isRefreshing, maxPullDistance]);
+    const handleTouchEnd = useCallback(async () => {
+        if (!isPullingRef.current || disabled || isRefreshing)
+            return;
+        isPullingRef.current = false;
+        if (pullDistance >= pullThreshold) {
+            setPullDistance(pullThreshold);
+            setInternalRefreshing(true);
+            try {
+                await onRefresh();
+            }
+            finally {
+                setInternalRefreshing(false);
+                setPullDistance(0);
+            }
+        }
+        else {
+            setPullDistance(0);
+        }
+    }, [disabled, isRefreshing, onRefresh, pullDistance, pullThreshold]);
+    const progress = Math.min(1, pullDistance / pullThreshold);
+    const isReady = pullDistance >= pullThreshold;
+    return (jsxs("div", { ref: containerRef, onTouchStart: handleTouchStart, onTouchMove: handleTouchMove, onTouchEnd: handleTouchEnd, className: buildClassName('relative overflow-y-auto overscroll-none', className), "data-testid": "pull-to-refresh-container", children: [jsx("div", { className: "left-0 right-0 top-0 flex items-center justify-center pointer-events-none transition-all duration-150 z-20", style: {
+                    height: isRefreshing ? `${pullThreshold}px` : `${pullDistance}px`,
+                    opacity: pullDistance > 0 || isRefreshing ? 1 : 0,
+                }, "data-testid": "pull-to-refresh-indicator", children: jsx("div", { className: "flex items-center gap-2 px-3.5 py-1.5 rounded-full bg-white dark:bg-gray-800 border border-[var(--ui-border)] shadow-md text-xs font-semibold text-gray-700 dark:text-gray-200", children: isRefreshing ? (refreshingContent || (jsxs(Fragment, { children: [jsx(Loader, { size: "sm" }), jsx("span", { children: "Refreshing..." })] }))) : pullingContent ? (pullingContent) : (jsxs(Fragment, { children: [jsx(PullArrowIcon, { progress: progress }), jsx("span", { children: isReady ? 'Release to refresh' : 'Pull down to refresh' })] })) }) }), jsx("div", { className: buildClassName('transition-transform duration-150', contentClass), style: {
+                    transform: isRefreshing
+                        ? `translateY(${pullThreshold}px)`
+                        : pullDistance > 0
+                            ? `translateY(${pullDistance}px)`
+                            : 'translateY(0px)',
+                }, "data-testid": "pull-to-refresh-content", children: children })] }));
+}
+PullToRefresh.displayName = 'PullToRefresh';
+
 const SIZE_MAP = {
     sm: 'size-4',
     md: 'size-4.5',
@@ -1648,8 +2300,8 @@ const Radio = forwardRef((props, ref) => {
     const generatedId = useId();
     const radioId = id !== null && id !== void 0 ? id : (name && rest.value ? `${name}-${rest.value}` : generatedId);
     return (jsxs("div", { className: buildClassName(wrapperClass), children: [jsxs("div", { className: buildClassName('flex items-start gap-2.5', containerClass), children: [jsx("div", { className: "grid place-items-center shrink-0 pt-0.5", children: jsx("input", { ref: ref, ...rest, id: radioId, name: name, type: "radio", disabled: disabled, "aria-checked": rest.checked, className: buildClassName('peer transition-all col-start-1 row-start-1 appearance-none shrink-0 rounded-full', 'border focus:ring-2 focus:ring-offset-2', 'checked:border-5 checked:bg-white', 'dark:focus:ring-offset-gray-800', SIZE_MAP[size], THEME_MAP[theme], disabled
-                                ? 'border-gray-200 dark:border-gray-700 bg-gray-100 dark:bg-gray-800 pointer-events-none'
-                                : 'bg-white dark:bg-gray-700 border-gray-300 dark:border-gray-600 hover:border-gray-400 dark:hover:border-gray-500 cursor-pointer', className) }) }), (label || description) && (jsxs("div", { className: "flex flex-col gap-0.5 min-w-0", children: [label && (jsx(Label, { htmlFor: radioId, className: buildClassName(disabled
+                                ? 'border-[var(--ui-border-muted)] bg-gray-100 dark:bg-gray-800 pointer-events-none'
+                                : 'bg-white dark:bg-gray-700 border-[var(--ui-border)] hover:border-gray-400 dark:hover:border-gray-500 cursor-pointer', className) }) }), (label || description) && (jsxs("div", { className: "flex flex-col gap-0.5 min-w-0", children: [label && (jsx(Label, { htmlFor: radioId, className: buildClassName(disabled
                                     ? 'cursor-not-allowed text-gray-400 dark:text-gray-500'
                                     : 'cursor-pointer text-gray-700 dark:text-gray-200 font-medium', labelClass), children: label })), description && (jsx("p", { className: buildClassName('text-xs leading-normal', disabled
                                     ? 'text-gray-300 dark:text-gray-600'
@@ -1688,7 +2340,7 @@ const RadioGroup = (props) => {
                     if (isCards) {
                         return (jsxs("label", { htmlFor: `${name}-${item.value}`, className: buildClassName('relative flex items-start gap-3 p-4 rounded-xl border transition-all cursor-pointer select-none min-w-[200px] flex-1', isSelected
                                 ? 'border-[var(--ui-primary)] bg-blue-50/40 dark:bg-blue-950/30 ring-2 ring-[var(--ui-primary-ring)]/30'
-                                : 'border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 hover:border-gray-300 dark:hover:border-gray-600', isItemDisabled &&
+                                : 'border-[var(--ui-border)] bg-white dark:bg-gray-800 hover:border-gray-300 dark:hover:border-gray-600', isItemDisabled &&
                                 'opacity-50 cursor-not-allowed pointer-events-none bg-gray-50 dark:bg-gray-800/50'), children: [jsx(Radio, { name: name, id: `${name}-${item.value}`, value: item.value, "aria-label": item.label, size: size, theme: theme, checked: isSelected, disabled: isItemDisabled, onChange: onChange, containerClass: "pt-0.5" }), jsxs("div", { className: "flex-1 min-w-0", children: [jsxs("div", { className: "flex items-center gap-2", children: [item.icon && (jsx("span", { className: "shrink-0 text-gray-500 dark:text-gray-400", children: item.icon })), jsx("span", { className: "text-sm font-semibold text-gray-900 dark:text-white truncate", children: item.label })] }), item.description && (jsx("p", { className: "mt-1 text-xs text-gray-500 dark:text-gray-400 font-normal leading-relaxed", children: item.description }))] })] }, item.value));
                     }
                     return (jsx(Radio, { name: name, id: `${name}-${item.value}`, label: item.label, description: item.description, value: item.value, size: size, theme: theme, checked: isSelected, disabled: isItemDisabled, onChange: onChange }, item.value));
@@ -1783,7 +2435,7 @@ const RadioSwitch = ({ label, items, selected, size = 'md', theme = 'primary', d
             onChange(getValue(nextItem));
         }
     };
-    return (jsxs("div", { ref: containerRef, role: "radiogroup", tabIndex: 0, "aria-label": label, onKeyDown: handleGroupKeyDown, className: buildClassName('relative inline-grid grid-flow-col auto-cols-fr items-stretch bg-gray-100 dark:bg-gray-800/80 border border-gray-200/80 dark:border-gray-700/80 focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-primary-ring)]', SIZE_CONTAINER_CLASS$1[size], disabled && 'opacity-60 pointer-events-none', wrapperClass), children: [jsx("div", { className: buildClassName('absolute transition-all duration-200 ease-[cubic-bezier(.25,.8,.25,1)] pointer-events-none', THEME_SWITCH_CLASS[theme], size === 'sm' ? 'rounded-md' : 'rounded-lg', style.ready ? 'opacity-100' : 'opacity-0', switchClass), style: {
+    return (jsxs("div", { ref: containerRef, role: "radiogroup", tabIndex: 0, "aria-label": label, onKeyDown: handleGroupKeyDown, className: buildClassName('relative inline-grid grid-flow-col auto-cols-fr items-stretch bg-gray-100 dark:bg-gray-800/80 border border-[var(--ui-border)] focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-primary-ring)]', SIZE_CONTAINER_CLASS$1[size], disabled && 'opacity-60 pointer-events-none', wrapperClass), children: [jsx("div", { className: buildClassName('absolute transition-all duration-200 ease-[cubic-bezier(.25,.8,.25,1)] pointer-events-none', THEME_SWITCH_CLASS[theme], size === 'sm' ? 'rounded-md' : 'rounded-lg', style.ready ? 'opacity-100' : 'opacity-0', switchClass), style: {
                     transform: `translate(${style.left}px, ${style.top}px)`,
                     width: style.width,
                     height: style.height,
@@ -1963,155 +2615,1112 @@ const RangeSlider = ({ label, labelHint, labelClass = '', containerClass = '', c
         window.addEventListener('pointermove', stablePointerMoveRef.current);
         window.addEventListener('pointerup', stablePointerUpRef.current);
     };
-    const handleTrackClick = (e) => {
-        if (!trackRef.current)
+    const handleTrackClick = (e) => {
+        if (!trackRef.current)
+            return;
+        const rect = trackRef.current.getBoundingClientRect();
+        const x = Math.min(Math.max(e.clientX - rect.left, 0), rect.width);
+        const rawVal = min + (x / rect.width) * (max - min);
+        const snappedVal = snapToStep(rawVal);
+        const pxMin = (percent(valueMin) / 100) * rect.width;
+        const pxMax = (percent(valueMax) / 100) * rect.width;
+        if (x <= pxMin) {
+            onChange(Math.min(snappedVal, valueMax - step), valueMax);
+            return;
+        }
+        if (x >= pxMax) {
+            onChange(valueMin, Math.max(snappedVal, valueMin + step));
+            return;
+        }
+        const distMin = Math.abs(snappedVal - valueMin);
+        const distMax = Math.abs(snappedVal - valueMax);
+        if (distMin < distMax) {
+            onChange(Math.min(snappedVal, valueMax - step), valueMax);
+        }
+        else {
+            onChange(valueMin, Math.max(snappedVal, valueMin + step));
+        }
+    };
+    // Keyboard accessibility handler for thumbs
+    const handleKeyDown = (thumb) => (e) => {
+        let delta = 0;
+        if (e.key === 'ArrowLeft' || e.key === 'ArrowDown')
+            delta = -step;
+        else if (e.key === 'ArrowRight' || e.key === 'ArrowUp')
+            delta = step;
+        else if (e.key === 'Home') {
+            if (thumb === 'min')
+                onChange(min, valueMax);
+            else
+                onChange(valueMin, valueMin + step);
+            return;
+        }
+        else if (e.key === 'End') {
+            if (thumb === 'min')
+                onChange(valueMax - step, valueMax);
+            else
+                onChange(valueMin, max);
+            return;
+        }
+        if (delta !== 0) {
+            e.preventDefault();
+            if (thumb === 'min') {
+                const next = snapToStep(valueMin + delta);
+                onChange(Math.min(next, valueMax - step), valueMax);
+            }
+            else {
+                const next = snapToStep(valueMax + delta);
+                onChange(valueMin, Math.max(next, valueMin + step));
+            }
+        }
+    };
+    const markEntries = marks
+        ? Object.entries(marks).map(([k, v]) => ({ value: Number(k), label: v }))
+        : null;
+    return (jsxs("div", { className: buildClassName('group space-y-2', hasError && 'has-error', containerClass), children: [label && (jsxs("div", { className: "flex items-center justify-between mb-1", children: [jsx(Label, { className: labelClass, children: label }), labelHint] })), jsxs("div", { ref: trackRef, onMouseDown: handleTrackClick, className: "relative h-8 select-none w-full flex items-center cursor-pointer", "data-testid": "range-track", children: [jsx("div", { className: buildClassName('absolute top-1/2 left-0 right-0 rounded-full bg-gray-200 dark:bg-gray-700 -translate-y-1/2', currentSize.track) }), jsx("div", { className: buildClassName('absolute top-1/2 -translate-y-1/2 rounded-full transition-all duration-150 ease-out', hasError ? 'bg-red-500' : 'bg-blue-600 dark:bg-blue-500', currentSize.track), style: {
+                            left: `${percent(valueMin)}%`,
+                            width: `${percent(valueMax) - percent(valueMin)}%`,
+                        } }), jsx("div", { role: "slider", tabIndex: 0, "aria-label": "Minimum value", "aria-valuenow": valueMin, "aria-valuemin": min, "aria-valuemax": valueMax - step, onPointerDown: startDrag('min'), onMouseEnter: () => setHoveringThumb('min'), onMouseLeave: () => setHoveringThumb(null), onKeyDown: handleKeyDown('min'), className: buildClassName('absolute top-1/2 -translate-y-1/2 rounded-full focus:outline-none', 'bg-white border-2 shadow-md cursor-pointer touch-none', hasError ? 'border-red-600' : 'border-blue-600', 'transition-all duration-150 ease-out', currentSize.thumb, (activeThumbState === 'min' || hoveringThumb === 'min') &&
+                            (hasError ? 'ring-4 ring-red-200' : 'ring-4 ring-blue-200'), className), style: {
+                            left: `calc(${percent(valueMin)}% - ${currentSize.thumbPx / 2}px)`,
+                            zIndex: activeThumbState === 'min' ? 50 : 30,
+                        }, "data-testid": "thumb-min", children: showTooltips && (activeThumbState === 'min' || hoveringThumb === 'min') && (jsxs("div", { className: "absolute -top-7 left-1/2 -translate-x-1/2 px-2 py-0.5 rounded bg-gray-900 dark:bg-gray-100 text-white dark:text-gray-900 text-[11px] font-semibold shadow-md pointer-events-none z-50 whitespace-nowrap", children: [Math.round(valueMin), valueSuffix, jsx("div", { className: "absolute top-full left-1/2 -translate-x-1/2 border-4 border-transparent border-t-gray-900 dark:border-t-gray-100" })] })) }), jsx("div", { role: "slider", tabIndex: 0, "aria-label": "Maximum value", "aria-valuenow": valueMax, "aria-valuemin": valueMin + step, "aria-valuemax": max, onPointerDown: startDrag('max'), onMouseEnter: () => setHoveringThumb('max'), onMouseLeave: () => setHoveringThumb(null), onKeyDown: handleKeyDown('max'), className: buildClassName('absolute top-1/2 -translate-y-1/2 rounded-full focus:outline-none', 'bg-white border-2 shadow-md cursor-pointer touch-none', hasError ? 'border-red-600' : 'border-blue-600', 'transition-all duration-150 ease-out', currentSize.thumb, (activeThumbState === 'max' || hoveringThumb === 'max') &&
+                            (hasError ? 'ring-4 ring-red-200' : 'ring-4 ring-blue-200'), className), style: {
+                            left: `calc(${percent(valueMax)}% - ${currentSize.thumbPx / 2}px)`,
+                            zIndex: activeThumbState === 'max' ? 50 : 40,
+                        }, "data-testid": "thumb-max", children: showTooltips && (activeThumbState === 'max' || hoveringThumb === 'max') && (jsxs("div", { className: "absolute -top-7 left-1/2 -translate-x-1/2 px-2 py-0.5 rounded bg-gray-900 dark:bg-gray-100 text-white dark:text-gray-900 text-[11px] font-semibold shadow-md pointer-events-none z-50 whitespace-nowrap", children: [Math.round(valueMax), valueSuffix, jsx("div", { className: "absolute top-full left-1/2 -translate-x-1/2 border-4 border-transparent border-t-gray-900 dark:border-t-gray-100" })] })) })] }), markEntries && (jsx("div", { className: "relative w-full h-4 mt-1", children: markEntries.map((m) => {
+                    const markPercent = percent(m.value);
+                    return (jsxs("div", { className: "absolute top-0 transform -translate-x-1/2 flex flex-col items-center", style: { left: `${markPercent}%` }, children: [jsx("span", { className: "w-1 h-1.5 bg-gray-300 dark:bg-gray-600 rounded-full" }), jsx("span", { className: "text-[10px] font-medium text-gray-400 dark:text-gray-500 mt-0.5", children: m.label })] }, m.value));
+                }) })), jsxs("div", { className: buildClassName('flex justify-between font-medium text-gray-700 dark:text-gray-300', currentSize.text), children: [jsxs("span", { children: [Math.round(valueMin), valueSuffix] }), jsxs("span", { children: [Math.round(valueMax), valueSuffix] })] }), (showErrorMessage && hasError) || helperText ? (jsx("div", { className: "mt-1", children: showErrorMessage && hasError ? (jsx(TextContent, { error: true, small: true, children: error })) : helperText ? (jsx(TextContent, { muted: true, small: true, children: helperText })) : null })) : null] }));
+};
+RangeSlider.displayName = 'RangeSlider';
+
+const useDebounce = (value, delay) => {
+    const [debouncedValue, setDebouncedValue] = useState(value);
+    useEffect(() => {
+        const handler = setTimeout(() => {
+            setDebouncedValue(value);
+        }, delay);
+        // Cancel the timeout if value or delay changes
+        return () => {
+            clearTimeout(handler);
+        };
+    }, [value, delay]);
+    return debouncedValue;
+};
+const useDebounceFn = (fn, ms) => {
+    const timeout = useRef(null);
+    useEffect(() => {
+        return () => clearTimeout(timeout.current);
+    }, []);
+    return useCallback((...args) => {
+        clearTimeout(timeout.current);
+        timeout.current = setTimeout(() => fn(...args), ms);
+    }, [fn, ms]);
+};
+
+var _path$2;
+function _extends$2() { return _extends$2 = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$2.apply(null, arguments); }
+var SvgCheck = function SvgCheck(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends$2({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 24,
+    height: 24,
+    fill: "none",
+    stroke: "currentColor",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: 2,
+    className: "lucide lucide-check-icon lucide-check",
+    viewBox: "0 0 24 24"
+  }, props), _path$2 || (_path$2 = /*#__PURE__*/React.createElement("path", {
+    d: "M20 6 9 17l-5-5"
+  })));
+};
+
+var _circle$1, _path$1;
+function _extends$1() { return _extends$1 = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$1.apply(null, arguments); }
+var SvgCirclePlus = function SvgCirclePlus(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends$1({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 24,
+    height: 24,
+    fill: "none",
+    stroke: "currentColor",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: 2,
+    className: "lucide lucide-circle-plus-icon lucide-circle-plus",
+    viewBox: "0 0 24 24"
+  }, props), _circle$1 || (_circle$1 = /*#__PURE__*/React.createElement("circle", {
+    cx: 12,
+    cy: 12,
+    r: 10
+  })), _path$1 || (_path$1 = /*#__PURE__*/React.createElement("path", {
+    d: "M8 12h8M12 8v8"
+  })));
+};
+
+var _circle, _path;
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+var SvgSearch = function SvgSearch(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 24,
+    height: 24,
+    fill: "none",
+    stroke: "currentColor",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: 2,
+    className: "lucide lucide-search-icon lucide-search",
+    viewBox: "0 0 24 24"
+  }, props), _circle || (_circle = /*#__PURE__*/React.createElement("circle", {
+    cx: 11,
+    cy: 11,
+    r: 8
+  })), _path || (_path = /*#__PURE__*/React.createElement("path", {
+    d: "m21 21-4.3-4.3"
+  })));
+};
+
+const sizeConfigMap = {
+    sm: {
+        input: 'h-8 text-xs px-2.5',
+        icon: 'size-3.5',
+        badgeSize: 'sm',
+        group: 'w-8',
+    },
+    md: {
+        input: 'h-10 text-sm px-3',
+        icon: 'size-4',
+        badgeSize: 'md',
+        group: 'w-10',
+    },
+    lg: {
+        input: 'h-12 text-base px-3.5',
+        icon: 'size-5',
+        badgeSize: 'md',
+        group: 'w-12',
+    },
+};
+function MobilePicker(props) {
+    const { options = [], groups, selected = null, onChange = () => { }, size = 'md', labelKey = 'label', valueKey = 'value', id, name, label, labelWrapperClass, labelClass, labelHint, title, description, placeholder = 'Choose an option...', disabled = false, multiple = false, maxSelection, showSelectAll = false, confirmText = 'Apply Selection', searchable = true, searchPlaceholder = 'Search options...', async = false, onSearch, loading = false, typeToSearchText = 'Type to search options...', filterOption, quickOptions, quickOptionsTitle = 'Quick Picks', allowClear = false, allowFreeText = false, allowAdd = false, addNewText = 'Create', onAdd = () => { }, leftGroup, error, showErrorMessage = true, helperText, noOptionsText = 'No options available', renderOption, containerClass, sheetClass, } = props;
+    const [isOpen, setIsOpen] = useState(false);
+    const [query, setQuery] = useState('');
+    const debouncedQuery = useDebounce(query, 400);
+    const [optionsLoading, setOptionsLoading] = useState(false);
+    const [draftSelected, setDraftSelected] = useState(selected);
+    const [viewportHeight, setViewportHeight] = useState(null);
+    useEffect(() => {
+        if (!isOpen) {
+            setViewportHeight(null);
+            return;
+        }
+        const updateHeight = () => {
+            if (typeof window !== 'undefined' && window.visualViewport) {
+                setViewportHeight(window.visualViewport.height);
+            }
+        };
+        updateHeight();
+        const vv = typeof window !== 'undefined' ? window.visualViewport : null;
+        vv === null || vv === void 0 ? void 0 : vv.addEventListener('resize', updateHeight);
+        vv === null || vv === void 0 ? void 0 : vv.addEventListener('scroll', updateHeight);
+        return () => {
+            vv === null || vv === void 0 ? void 0 : vv.removeEventListener('resize', updateHeight);
+            vv === null || vv === void 0 ? void 0 : vv.removeEventListener('scroll', updateHeight);
+        };
+    }, [isOpen]);
+    const currentSize = sizeConfigMap[size] || sizeConfigMap.md;
+    const hasError = Boolean(error);
+    const isAsyncLoading = loading || optionsLoading;
+    const baseInputClass = useMemo(() => buildInputClass('', { disabled, hasError, size }), [disabled, hasError, size]);
+    const onSearchRef = useRef(onSearch);
+    useEffect(() => {
+        onSearchRef.current = onSearch;
+    }, [onSearch]);
+    const handleAsyncSearch = useCallback(async (searchString) => {
+        var _a;
+        try {
+            setOptionsLoading(true);
+            await ((_a = onSearchRef.current) === null || _a === void 0 ? void 0 : _a.call(onSearchRef, searchString));
+        }
+        catch (err) {
+            console.error('Error loading options:', err);
+        }
+        finally {
+            setOptionsLoading(false);
+        }
+    }, []);
+    useEffect(() => {
+        if (isOpen && async) {
+            handleAsyncSearch(debouncedQuery);
+        }
+    }, [isOpen, async, debouncedQuery, handleAsyncSearch]);
+    const getDisplayValue = useCallback((opt) => {
+        var _a, _b;
+        if (typeof opt === 'string')
+            return opt;
+        return (_b = (_a = opt === null || opt === void 0 ? void 0 : opt[labelKey]) !== null && _a !== void 0 ? _a : opt === null || opt === void 0 ? void 0 : opt[valueKey]) !== null && _b !== void 0 ? _b : String(opt);
+    }, [labelKey, valueKey]);
+    const getValue = useCallback((opt) => {
+        var _a, _b;
+        if (typeof opt === 'string')
+            return opt;
+        return (_b = (_a = opt === null || opt === void 0 ? void 0 : opt[valueKey]) !== null && _a !== void 0 ? _a : opt === null || opt === void 0 ? void 0 : opt[labelKey]) !== null && _b !== void 0 ? _b : String(opt);
+    }, [valueKey, labelKey]);
+    const normalizedSelected = useMemo(() => {
+        if (multiple) {
+            if (Array.isArray(selected))
+                return selected;
+            if (selected !== null && selected !== undefined)
+                return [selected];
+            return [];
+        }
+        else {
+            if (Array.isArray(selected))
+                return selected.length > 0 ? selected[0] : null;
+            return selected !== null && selected !== void 0 ? selected : null;
+        }
+    }, [multiple, selected]);
+    const normalizedDraft = useMemo(() => {
+        if (multiple) {
+            if (Array.isArray(draftSelected))
+                return draftSelected;
+            if (draftSelected !== null && draftSelected !== undefined)
+                return [draftSelected];
+            return [];
+        }
+        else {
+            if (Array.isArray(draftSelected))
+                return draftSelected.length > 0 ? draftSelected[0] : null;
+            return draftSelected !== null && draftSelected !== void 0 ? draftSelected : null;
+        }
+    }, [multiple, draftSelected]);
+    const rawAllOptions = useMemo(() => {
+        if (groups === null || groups === void 0 ? void 0 : groups.length) {
+            return groups.flatMap((g) => g.options);
+        }
+        return options !== null && options !== void 0 ? options : [];
+    }, [groups, options]);
+    const allOptions = useMemo(() => {
+        const list = [...rawAllOptions];
+        const selectedList = Array.isArray(normalizedDraft)
+            ? normalizedDraft
+            : normalizedDraft
+                ? [normalizedDraft]
+                : [];
+        for (const sel of selectedList) {
+            if (sel !== null && sel !== undefined) {
+                const selVal = getValue(sel);
+                const exists = list.some((item) => getValue(item) === selVal);
+                if (!exists) {
+                    list.unshift(sel);
+                }
+            }
+        }
+        return list;
+    }, [rawAllOptions, normalizedDraft, getValue]);
+    useEffect(() => {
+        if (isOpen) {
+            setDraftSelected(normalizedSelected);
+            setQuery('');
+        }
+    }, [isOpen, normalizedSelected]);
+    const defaultFilter = useCallback((opt, q) => {
+        var _a;
+        if (!q.trim())
+            return true;
+        const searchTarget = ((_a = getDisplayValue(opt)) === null || _a === void 0 ? void 0 : _a.toLowerCase()) || '';
+        return searchTarget.includes(q.trim().toLowerCase());
+    }, [getDisplayValue]);
+    const activeFilter = filterOption || defaultFilter;
+    const filteredOptions = useMemo(() => {
+        if (async)
+            return allOptions;
+        if (!query.trim())
+            return allOptions;
+        return allOptions.filter((opt) => activeFilter(opt, query));
+    }, [allOptions, query, async, activeFilter]);
+    const filteredGroups = useMemo(() => {
+        if (!(groups === null || groups === void 0 ? void 0 : groups.length))
+            return null;
+        if (async)
+            return groups;
+        if (!query.trim())
+            return groups;
+        return groups
+            .map((g) => ({
+            ...g,
+            options: g.options.filter((opt) => activeFilter(opt, query)),
+        }))
+            .filter((g) => g.options.length > 0);
+    }, [groups, query, async, activeFilter]);
+    const createFreeTextOption = useCallback((text) => {
+        const sample = allOptions[0] || (Array.isArray(selected) ? selected[0] : selected);
+        if (typeof sample === 'string' ||
+            (!sample && typeof labelKey === 'string' && labelKey === 'label')) {
+            return text;
+        }
+        return {
+            [labelKey]: text,
+            [valueKey]: text,
+        };
+    }, [allOptions, selected, labelKey, valueKey]);
+    const handleToggleOption = (option) => {
+        const optVal = getValue(option);
+        if (multiple) {
+            const current = Array.isArray(normalizedDraft) ? [...normalizedDraft] : [];
+            const index = current.findIndex((item) => getValue(item) === optVal);
+            if (index > -1) {
+                current.splice(index, 1);
+                setDraftSelected(current);
+            }
+            else {
+                if (maxSelection && current.length >= maxSelection)
+                    return;
+                current.push(option);
+                setDraftSelected(current);
+            }
+        }
+        else {
+            setDraftSelected(option);
+            onChange(option);
+            setIsOpen(false);
+        }
+    };
+    const handleCommitFreeText = (text) => {
+        const trimmed = text.trim();
+        if (!trimmed)
+            return;
+        const existing = allOptions.find((opt) => getDisplayValue(opt).toLowerCase() === trimmed.toLowerCase());
+        const optionToCommit = existing || createFreeTextOption(trimmed);
+        if (multiple) {
+            const current = Array.isArray(normalizedDraft) ? [...normalizedDraft] : [];
+            const already = current.some((item) => getDisplayValue(item).toLowerCase() === trimmed.toLowerCase());
+            if (!already) {
+                if (maxSelection && current.length >= maxSelection)
+                    return;
+                current.push(optionToCommit);
+                setDraftSelected(current);
+            }
+            setQuery('');
+        }
+        else {
+            setDraftSelected(optionToCommit);
+            onChange(optionToCommit);
+            setIsOpen(false);
+        }
+    };
+    const handleAddAndSelect = async (valueToAdd) => {
+        try {
+            const result = await onAdd(valueToAdd);
+            const optionToCommit = (result || valueToAdd);
+            if (multiple) {
+                const current = Array.isArray(normalizedDraft) ? [...normalizedDraft] : [];
+                current.push(optionToCommit);
+                setDraftSelected(current);
+                setQuery('');
+            }
+            else {
+                setDraftSelected(optionToCommit);
+                onChange(optionToCommit);
+                setIsOpen(false);
+            }
+        }
+        catch (err) {
+            console.error('MobilePicker onAdd error:', err);
+        }
+    };
+    const isAllSelected = useMemo(() => {
+        if (!multiple || !Array.isArray(normalizedDraft) || !allOptions.length)
+            return false;
+        return allOptions.length === normalizedDraft.length;
+    }, [multiple, normalizedDraft, allOptions]);
+    const handleToggleSelectAll = () => {
+        if (isAllSelected) {
+            setDraftSelected([]);
+        }
+        else {
+            setDraftSelected(allOptions);
+        }
+    };
+    const handleConfirmMultiSelect = () => {
+        onChange(normalizedDraft);
+        setIsOpen(false);
+    };
+    const handleClearSingleSelect = (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        setDraftSelected(multiple ? [] : null);
+        onChange(multiple ? [] : null);
+    };
+    const handleTriggerClick = (e) => {
+        if (disabled)
+            return;
+        const isClearClick = e.target.closest('[data-testid="mobile-picker-clear-button"]');
+        if (isClearClick)
+            return;
+        setIsOpen(true);
+    };
+    const isOptionSelected = (option) => {
+        const optVal = getValue(option);
+        if (multiple) {
+            return (Array.isArray(normalizedDraft) && normalizedDraft.some((item) => getValue(item) === optVal));
+        }
+        else {
+            return Boolean(normalizedDraft && getValue(normalizedDraft) === optVal);
+        }
+    };
+    const shouldShowTypeToSearch = async && !query && !isAsyncLoading && allOptions.length === 0;
+    const hasLeftGroup = leftGroup != null && leftGroup !== undefined;
+    return (jsxs("div", { className: buildClassName('group space-y-2 w-full', containerClass), children: [label && (jsxs("div", { className: buildClassName('flex items-center justify-between', labelWrapperClass), children: [jsx(Label, { className: labelClass, htmlFor: id, children: label }), labelHint && jsx(TextContent, { xsmall: true, children: labelHint })] })), jsxs("button", { type: "button", id: id, name: name, disabled: disabled, onClick: handleTriggerClick, className: buildClassName(baseInputClass, 'w-full flex items-center justify-between gap-2 cursor-pointer relative text-left', hasLeftGroup ? (size === 'lg' ? 'ps-12' : size === 'sm' ? 'ps-8' : 'ps-10') : ''), "data-testid": "mobile-picker-trigger", children: [hasLeftGroup && (jsx("span", { className: buildClassName('absolute left-0 top-0 h-full flex items-center justify-center text-gray-400 dark:text-gray-500', currentSize.group), children: leftGroup })), jsx("div", { className: "flex-1 flex flex-wrap items-center gap-1.5 min-w-0 overflow-hidden", children: multiple ? (Array.isArray(normalizedSelected) && normalizedSelected.length > 0 ? (normalizedSelected.map((item, idx) => (jsx(Badge, { theme: "secondary", size: currentSize.badgeSize, children: getDisplayValue(item) }, `${getValue(item)}-${idx}`)))) : (jsx("span", { className: "text-gray-400 dark:text-gray-500", children: placeholder }))) : normalizedSelected ? (jsx("span", { className: "text-gray-900 dark:text-white font-normal truncate", children: getDisplayValue(normalizedSelected) })) : (jsx("span", { className: "text-gray-400 dark:text-gray-500", children: placeholder })) }), jsxs("div", { className: "flex items-center gap-1 shrink-0", children: [allowClear && !multiple && normalizedSelected && (jsx("span", { role: "button", "aria-label": "Clear selection", tabIndex: 0, onClick: handleClearSingleSelect, className: "p-1 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-full cursor-pointer z-10", "data-testid": "mobile-picker-clear-button", children: jsx(SvgX, { className: "size-3.5 stroke-gray-500 dark:stroke-gray-400" }) })), jsx(SvgChevronDown, { className: buildClassName(currentSize.icon, 'stroke-gray-500 shrink-0') })] })] }), showErrorMessage && error && (jsx("div", { className: "mt-1", children: jsx(TextContent, { error: true, small: true, children: error }) })), !error && helperText && (jsx("div", { className: "mt-1", children: jsx(TextContent, { muted: true, small: true, children: helperText }) })), jsxs(Dialog, { open: isOpen, as: "div", className: "relative z-50 focus:outline-none", onClose: () => setIsOpen(false), transition: true, children: [jsx(DialogBackdrop, { className: "fixed inset-0 bg-black/50 backdrop-blur-xs transition-opacity duration-200" }), jsx("div", { className: "fixed left-0 top-0 w-full flex items-end justify-center pointer-events-none z-50", style: {
+                            height: viewportHeight ? `${viewportHeight}px` : '100dvh',
+                        }, children: jsxs(DialogPanel, { transition: true, className: buildClassName('w-full max-w-full md:max-w-lg bg-white dark:bg-gray-900 shadow-2xl rounded-t-3xl max-h-[85vh] max-h-[85dvh] flex flex-col pointer-events-auto overscroll-contain touch-pan-y', 'duration-200 ease-out data-[closed]:translate-y-full data-[closed]:opacity-0', sheetClass), style: {
+                                maxHeight: viewportHeight ? `${Math.floor(viewportHeight * 0.9)}px` : undefined,
+                            }, "data-testid": "mobile-picker-sheet", children: [jsx("div", { className: "w-12 h-1.5 rounded-full bg-gray-300 dark:bg-gray-700 mx-auto my-2.5 shrink-0" }), jsxs("div", { className: "px-4 pb-3 border-b border-[var(--ui-border-muted)] flex items-center justify-between gap-3 shrink-0", children: [jsxs("div", { className: "min-w-0 flex-1", children: [jsx(DialogTitle, { as: "h3", className: "text-base md:text-lg font-bold text-gray-900 dark:text-white truncate", children: title || label || 'Select Option' }), description && (jsx("p", { className: "text-xs text-gray-500 dark:text-gray-400 truncate mt-0.5", children: description }))] }), jsx(Button, { iconOnly: true, "aria-label": "Close picker", variant: "plain", theme: "secondary", size: "xs", onClick: () => setIsOpen(false), className: "rounded-full text-gray-400 hover:text-gray-600 dark:hover:text-gray-200 shrink-0", children: jsx(SvgX, { className: "size-4" }) })] }), searchable && (jsx("div", { className: "p-3 border-b border-[var(--ui-border-muted)] bg-gray-50 dark:bg-gray-800/50 shrink-0", children: jsxs("div", { className: "relative", children: [jsx(SvgSearch, { className: "absolute left-3 top-1/2 -translate-y-1/2 size-4 text-gray-400" }), jsx("input", { type: "text", value: query, onChange: (e) => setQuery(e.target.value), onKeyDown: (e) => {
+                                                    if (allowFreeText && e.key === 'Enter' && query.trim()) {
+                                                        e.preventDefault();
+                                                        handleCommitFreeText(query);
+                                                    }
+                                                }, placeholder: searchPlaceholder, className: "w-full pl-9 pr-10 py-2 text-sm bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-700 rounded-xl text-gray-900 dark:text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500", "data-testid": "mobile-picker-search-input" }), jsx("div", { className: "absolute right-3 top-1/2 -translate-y-1/2 flex items-center gap-1.5", children: isAsyncLoading ? (jsx(Loader, { size: "xs" })) : (query && (jsx("button", { type: "button", onClick: () => setQuery(''), className: "p-0.5 text-gray-400 hover:text-gray-600 dark:hover:text-gray-200", children: jsx(SvgX, { className: "size-3.5" }) }))) })] }) })), quickOptions && quickOptions.length > 0 && (jsxs("div", { className: "px-3 py-2 bg-gray-50/60 dark:bg-gray-800/40 border-b border-[var(--ui-border-muted)] shrink-0", children: [jsx("div", { className: "text-[11px] font-semibold text-gray-400 uppercase tracking-wider mb-1.5 px-1", children: quickOptionsTitle }), jsx("div", { className: "flex items-center gap-2 overflow-x-auto no-scrollbar pb-1", children: quickOptions.map((chip, cIdx) => {
+                                                const isSelected = isOptionSelected(chip);
+                                                return (jsx("button", { type: "button", onClick: () => handleToggleOption(chip), className: buildClassName('px-3 py-1 rounded-full text-xs font-medium shrink-0 transition-colors cursor-pointer border', isSelected
+                                                        ? 'bg-blue-600 text-white border-blue-600'
+                                                        : 'bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 border-gray-300 dark:border-gray-700 hover:bg-gray-100 dark:hover:bg-gray-700'), children: getDisplayValue(chip) }, cIdx));
+                                            }) })] })), multiple && showSelectAll && allOptions.length > 0 && (jsxs("div", { className: "px-4 py-2 bg-gray-50/80 dark:bg-gray-800/80 border-b border-[var(--ui-border-muted)] flex items-center justify-between text-xs shrink-0", children: [jsx("button", { type: "button", onClick: handleToggleSelectAll, className: "font-semibold text-blue-600 dark:text-blue-400 hover:underline cursor-pointer", children: isAllSelected ? 'Deselect All' : 'Select All' }), jsxs("span", { className: "text-gray-500 dark:text-gray-400 font-medium", children: [Array.isArray(normalizedDraft) ? normalizedDraft.length : 0, " of", ' ', allOptions.length] })] })), jsxs("div", { onScroll: (e) => {
+                                        const el = e.currentTarget;
+                                        if (el.scrollTop === 0) {
+                                            el.scrollTop = 1;
+                                        }
+                                        else if (el.scrollTop + el.clientHeight >= el.scrollHeight) {
+                                            el.scrollTop = el.scrollHeight - el.clientHeight - 1;
+                                        }
+                                    }, className: "flex-1 overflow-y-auto overscroll-contain touch-pan-y [-webkit-overflow-scrolling:touch] p-2 space-y-1 divide-y divide-gray-100 dark:divide-gray-800/60", children: [allowFreeText &&
+                                            query.trim() &&
+                                            !allOptions.some((opt) => getDisplayValue(opt).toLowerCase() === query.trim().toLowerCase()) && (jsxs("button", { type: "button", onClick: () => handleCommitFreeText(query), className: "w-full text-left flex items-center justify-between p-3.5 rounded-2xl bg-blue-50/80 dark:bg-blue-950/30 text-blue-600 dark:text-blue-400 font-medium hover:bg-blue-100/80 cursor-pointer", "data-testid": "mobile-picker-freetext-item", children: [jsxs("span", { className: "text-sm font-medium", children: ["Use \"", query.trim(), "\""] }), jsx(SvgChevronDown, { className: "size-4 rotate-[-90deg]" })] })), isAsyncLoading && allOptions.length === 0 ? (jsxs("div", { className: "py-12 flex flex-col items-center justify-center gap-2 text-sm text-gray-500 dark:text-gray-400 select-none", children: [jsx(Loader, { size: "md" }), jsx("span", { children: "Loading options..." })] })) : shouldShowTypeToSearch ? (jsx("div", { className: "py-12 text-center text-sm text-gray-500 dark:text-gray-400 select-none", children: typeToSearchText })) : filteredGroups ? (filteredGroups.map((grp, gIdx) => (jsxs("div", { className: "pt-2", children: [jsx("div", { className: "text-[11px] font-bold uppercase tracking-wider text-gray-400 dark:text-gray-500 px-3 py-1.5 select-none", children: grp.group }), jsx("div", { className: "space-y-1", children: grp.options.map((option) => {
+                                                        const optVal = getValue(option);
+                                                        const isSelected = isOptionSelected(option);
+                                                        const optDisabled = option.disabled;
+                                                        const optDesc = typeof option === 'object'
+                                                            ? (option === null || option === void 0 ? void 0 : option.description) || (option === null || option === void 0 ? void 0 : option.subtitle)
+                                                            : null;
+                                                        return (jsxs("div", { onClick: () => !optDisabled && handleToggleOption(option), className: buildClassName('w-full flex items-center justify-between p-3.5 rounded-2xl transition-colors cursor-pointer select-none', isSelected
+                                                                ? 'bg-blue-50 dark:bg-blue-950/40 text-blue-600 dark:text-blue-400 font-semibold'
+                                                                : 'text-gray-800 dark:text-gray-100 hover:bg-gray-100 dark:hover:bg-gray-800/70', optDisabled && 'opacity-50 pointer-events-none'), children: [jsxs("div", { className: "flex-1 min-w-0 pr-3", children: [jsx("div", { className: "text-sm/6 truncate", children: renderOption
+                                                                                ? renderOption(option, isSelected)
+                                                                                : getDisplayValue(option) }), optDesc && (jsx("div", { className: "text-xs text-gray-400 font-normal truncate mt-0.5", children: optDesc }))] }), isSelected && (jsx(SvgCheck, { className: "size-5 stroke-blue-600 dark:stroke-blue-400 shrink-0" }))] }, optVal));
+                                                    }) })] }, gIdx)))) : filteredOptions.length > 0 ? (filteredOptions.map((option) => {
+                                            const optVal = getValue(option);
+                                            const isSelected = isOptionSelected(option);
+                                            const optDisabled = option.disabled;
+                                            const optDesc = typeof option === 'object' ? (option === null || option === void 0 ? void 0 : option.description) || (option === null || option === void 0 ? void 0 : option.subtitle) : null;
+                                            return (jsxs("div", { onClick: () => !optDisabled && handleToggleOption(option), className: buildClassName('w-full flex items-center justify-between p-3.5 rounded-2xl transition-colors cursor-pointer select-none', isSelected
+                                                    ? 'bg-blue-50 dark:bg-blue-950/40 text-blue-600 dark:text-blue-400 font-semibold'
+                                                    : 'text-gray-800 dark:text-gray-100 hover:bg-gray-100 dark:hover:bg-gray-800/70', optDisabled && 'opacity-50 pointer-events-none'), children: [jsxs("div", { className: "flex-1 min-w-0 pr-3", children: [jsx("div", { className: "text-sm/6 truncate", children: renderOption
+                                                                    ? renderOption(option, isSelected)
+                                                                    : getDisplayValue(option) }), optDesc && (jsx("div", { className: "text-xs text-gray-400 font-normal truncate mt-0.5", children: optDesc }))] }), isSelected && (jsx(SvgCheck, { className: "size-5 stroke-blue-600 dark:stroke-blue-400 shrink-0" }))] }, optVal));
+                                        })) : (!allowFreeText &&
+                                            !(allowAdd && query.trim()) && (jsx("div", { className: "py-8 text-center text-sm text-gray-500 dark:text-gray-400 select-none", children: query
+                                                ? noOptionsText !== 'No options available'
+                                                    ? noOptionsText
+                                                    : `No results found for "${query}"`
+                                                : noOptionsText }))), !allowFreeText && allowAdd && Boolean(query.trim()) && (jsxs("button", { type: "button", onClick: () => handleAddAndSelect(query.trim()), className: "w-full flex items-center gap-2.5 p-3.5 rounded-2xl text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-800 cursor-pointer", children: [jsx(SvgCirclePlus, { className: "size-5 text-blue-600 dark:text-blue-400" }), jsxs("span", { className: "text-sm font-medium", children: [addNewText, " \"", query.trim(), "\""] })] }))] }), multiple && (jsx("div", { className: "p-4 border-t border-[var(--ui-border-muted)] bg-white dark:bg-gray-900 shrink-0", children: jsxs(Button, { fullWidth: true, theme: "primary", size: "md", onClick: handleConfirmMultiSelect, "data-testid": "mobile-picker-confirm-button", children: [confirmText, ' ', Array.isArray(normalizedDraft) && normalizedDraft.length > 0
+                                                ? `(${normalizedDraft.length})`
+                                                : ''] }) }))] }) })] })] }));
+}
+MobilePicker.displayName = 'MobilePicker';
+
+function SingleWheelColumn({ column, itemHeight, height, disabled, onValueChange, }) {
+    var _a;
+    const containerRef = useRef(null);
+    const [selectedValue, setSelectedValue] = useState(column.value !== undefined
+        ? column.value
+        : column.defaultValue !== undefined
+            ? column.defaultValue
+            : (_a = column.options[0]) === null || _a === void 0 ? void 0 : _a.value);
+    const isControlled = column.value !== undefined;
+    const currentValue = isControlled ? column.value : selectedValue;
+    const selectedIndex = Math.max(0, column.options.findIndex((opt) => opt.value === currentValue));
+    const paddingY = (height - itemHeight) / 2;
+    // Sync scroll position when active value changes externally
+    useEffect(() => {
+        if (containerRef.current) {
+            const targetScrollTop = selectedIndex * itemHeight;
+            if (Math.abs(containerRef.current.scrollTop - targetScrollTop) > 2) {
+                containerRef.current.scrollTop = targetScrollTop;
+            }
+        }
+    }, [selectedIndex, itemHeight]);
+    const handleScroll = () => {
+        var _a;
+        if (!containerRef.current || disabled)
+            return;
+        const scrollTop = containerRef.current.scrollTop;
+        const index = Math.round(scrollTop / itemHeight);
+        const targetOption = column.options[index];
+        if (targetOption && targetOption.value !== currentValue && !targetOption.disabled) {
+            if (!isControlled) {
+                setSelectedValue(targetOption.value);
+            }
+            (_a = column.onChange) === null || _a === void 0 ? void 0 : _a.call(column, targetOption.value);
+            onValueChange(targetOption.value);
+        }
+    };
+    return (jsx("div", { ref: containerRef, onScroll: handleScroll, className: buildClassName('flex-1 h-full overflow-y-auto no-scrollbar snap-y snap-mandatory relative z-10 select-none text-center', disabled && 'pointer-events-none opacity-40'), style: {
+            paddingTop: `${paddingY}px`,
+            paddingBottom: `${paddingY}px`,
+            scrollSnapType: 'y mandatory',
+        }, "data-testid": `wheel-column-${column.id}`, children: column.options.map((opt, index) => {
+            const isSelected = opt.value === currentValue;
+            return (jsx("div", { onClick: () => {
+                    if (disabled || opt.disabled || !containerRef.current)
+                        return;
+                    const targetTop = index * itemHeight;
+                    if (typeof containerRef.current.scrollTo === 'function') {
+                        containerRef.current.scrollTo({
+                            top: targetTop,
+                            behavior: 'smooth',
+                        });
+                    }
+                    else {
+                        containerRef.current.scrollTop = targetTop;
+                    }
+                }, className: buildClassName('flex items-center justify-center font-semibold snap-center transition-all duration-150 cursor-pointer', opt.disabled && 'opacity-30 cursor-not-allowed', isSelected
+                    ? 'text-blue-600 dark:text-blue-400 text-sm font-bold scale-105'
+                    : 'text-gray-500 dark:text-gray-400 text-xs hover:text-gray-800 dark:hover:text-gray-200'), style: { height: `${itemHeight}px` }, "data-testid": `wheel-item-${column.id}-${opt.value}`, children: opt.label }, `${opt.value}-${index}`));
+        }) }));
+}
+function WheelPicker({ columns, height = 200, itemHeight = 40, onChange, disabled = false, containerClass = '', }) {
+    const valuesRef = useRef({});
+    const handleColumnChange = (columnId, value) => {
+        valuesRef.current[columnId] = value;
+        onChange === null || onChange === void 0 ? void 0 : onChange({ ...valuesRef.current });
+    };
+    const highlightTop = (height - itemHeight) / 2;
+    return (jsxs("div", { className: buildClassName('w-full bg-white dark:bg-gray-900 border border-[var(--ui-border)] rounded-2xl relative overflow-hidden flex items-center shadow-xs select-none', containerClass), style: { height: `${height}px` }, "data-testid": "wheel-picker", children: [jsx("div", { className: "absolute inset-x-2 rounded-xl bg-gray-100/90 dark:bg-gray-800/90 border border-blue-500/20 dark:border-blue-400/20 z-0 pointer-events-none", style: {
+                    height: `${itemHeight}px`,
+                    top: `${highlightTop}px`,
+                }, "data-testid": "wheel-highlight-window" }), jsx("div", { className: "absolute top-0 inset-x-0 bg-gradient-to-b from-white via-white/80 dark:from-gray-900 dark:via-gray-900/80 to-transparent pointer-events-none z-20", style: { height: `${highlightTop}px` } }), jsx("div", { className: "absolute bottom-0 inset-x-0 bg-gradient-to-t from-white via-white/80 dark:from-gray-900 dark:via-gray-900/80 to-transparent pointer-events-none z-20", style: { height: `${highlightTop}px` } }), jsx("div", { className: "w-full h-full flex items-center justify-around relative z-10 px-2", children: columns.map((col) => (jsx(SingleWheelColumn, { column: col, itemHeight: itemHeight, height: height, disabled: disabled, onValueChange: (val) => handleColumnChange(col.id, val) }, col.id))) })] }));
+}
+WheelPicker.displayName = 'WheelPicker';
+
+function ChevronLeftIcon$1() {
+    return (jsx("svg", { className: "size-5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2.5, d: "M15 19l-7-7 7-7" }) }));
+}
+function SearchIcon$1() {
+    return (jsx("svg", { className: "size-4 text-gray-400", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" }) }));
+}
+function ClearIcon() {
+    return (jsx("svg", { className: "size-4", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) }));
+}
+function MobileHeader({ title, subtitle, titleAlign = 'center', onBack, backLabel = 'Back', leading, actions, searchable = false, searchValue: externalSearchValue, onSearchChange, searchPlaceholder = 'Search...', sticky = true, transparent = false, bottomSlot, className = '', }) {
+    const [isSearchActive, setIsSearchActive] = useState(false);
+    const [internalSearchValue, setInternalSearchValue] = useState('');
+    const searchValue = externalSearchValue !== undefined ? externalSearchValue : internalSearchValue;
+    const handleSearchInput = (e) => {
+        const val = e.target.value;
+        setInternalSearchValue(val);
+        onSearchChange === null || onSearchChange === void 0 ? void 0 : onSearchChange(val);
+    };
+    const handleClearSearch = () => {
+        setInternalSearchValue('');
+        onSearchChange === null || onSearchChange === void 0 ? void 0 : onSearchChange('');
+    };
+    return (jsxs("header", { className: buildClassName('w-full transition-colors select-none z-30', sticky && 'sticky top-0', transparent
+            ? 'bg-white/80 dark:bg-gray-900/80 backdrop-blur-md border-b border-[var(--ui-border-muted)]'
+            : 'bg-white dark:bg-gray-900 border-b border-[var(--ui-border)] shadow-xs', 'pt-[env(safe-area-inset-top,0px)]', className), "data-testid": "mobile-header", children: [jsx("div", { className: "h-14 px-3.5 flex items-center justify-between gap-3 relative", children: searchable && isSearchActive ? (jsxs("div", { className: "flex-1 flex items-center gap-2", "data-testid": "mobile-header-search-container", children: [jsxs("div", { className: "relative flex-1 flex items-center", children: [jsx("span", { className: "absolute left-3 pointer-events-none", children: jsx(SearchIcon$1, {}) }), jsx("input", { type: "text", value: searchValue, onChange: handleSearchInput, placeholder: searchPlaceholder, autoFocus: true, className: "w-full pl-9 pr-8 py-1.5 text-xs bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-white rounded-full border border-transparent focus:border-blue-500 focus:outline-hidden transition-all", "data-testid": "mobile-header-search-input" }), searchValue && (jsx("button", { type: "button", onClick: handleClearSearch, "aria-label": "Clear search", className: "absolute right-2.5 p-0.5 text-gray-400 hover:text-gray-600 dark:hover:text-gray-200 cursor-pointer", children: jsx(ClearIcon, {}) }))] }), jsx("button", { type: "button", onClick: () => setIsSearchActive(false), className: "text-xs font-semibold text-blue-600 dark:text-blue-400 px-2 py-1.5 rounded-lg hover:bg-blue-50 dark:hover:bg-blue-950/40 cursor-pointer", children: "Cancel" })] })) : (jsxs(Fragment, { children: [jsx("div", { className: "flex items-center gap-1 min-w-[40px] shrink-0 z-10", children: onBack ? (jsxs("button", { type: "button", onClick: onBack, "aria-label": backLabel, className: "flex items-center gap-0.5 text-blue-600 dark:text-blue-400 hover:text-blue-700 p-1 -ml-1 rounded-xl transition-colors cursor-pointer", "data-testid": "mobile-header-back-btn", children: [jsx(ChevronLeftIcon$1, {}), jsx("span", { className: "text-xs font-semibold hidden sm:inline", children: backLabel })] })) : (leading) }), jsxs("div", { className: buildClassName('flex-1 min-w-0 px-2', titleAlign === 'center'
+                                ? 'absolute inset-x-12 text-center pointer-events-none flex flex-col items-center justify-center'
+                                : 'text-left'), children: [title && (jsx("div", { className: "text-sm font-bold text-gray-900 dark:text-white truncate pointer-events-auto", "data-testid": "mobile-header-title", children: title })), subtitle && (jsx("div", { className: "text-[11px] text-gray-500 dark:text-gray-400 truncate pointer-events-auto", "data-testid": "mobile-header-subtitle", children: subtitle }))] }), jsxs("div", { className: "flex items-center gap-1 min-w-[40px] shrink-0 justify-end z-10", children: [searchable && (jsx("button", { type: "button", onClick: () => setIsSearchActive(true), "aria-label": "Search", className: "p-2 text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-xl transition-colors cursor-pointer", "data-testid": "mobile-header-search-toggle", children: jsx(SearchIcon$1, {}) })), actions === null || actions === void 0 ? void 0 : actions.map((action) => {
+                                    const badgeColor = {
+                                        danger: 'bg-red-500 text-white',
+                                        info: 'bg-blue-500 text-white',
+                                        success: 'bg-emerald-500 text-white',
+                                    }[action.badgeVariant || 'danger'];
+                                    return (jsxs("button", { type: "button", disabled: action.disabled, onClick: action.onClick, "aria-label": action.label, className: buildClassName('p-2 text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-xl transition-colors relative cursor-pointer', action.disabled && 'opacity-40 cursor-not-allowed pointer-events-none'), "data-testid": `mobile-header-action-${action.id}`, children: [jsx("span", { className: "text-base", children: action.icon }), action.badge !== undefined && action.badge !== null && (jsx("span", { className: buildClassName('absolute top-1 right-1 min-w-[14px] h-3.5 px-0.5 rounded-full text-[9px] font-bold flex items-center justify-center shadow-xs', badgeColor), "data-testid": `mobile-header-badge-${action.id}`, children: action.badge }))] }, action.id));
+                                })] })] })) }), bottomSlot && (jsx("div", { className: "px-3 py-2 border-t border-[var(--ui-border-muted)]", "data-testid": "mobile-header-bottom-slot", children: bottomSlot }))] }));
+}
+MobileHeader.displayName = 'MobileHeader';
+
+function ChevronLeftIcon() {
+    return (jsx("svg", { className: "size-4", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2.5, d: "M15 19l-7-7 7-7" }) }));
+}
+function ChevronRightIcon() {
+    return (jsx("svg", { className: "size-4", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2.5, d: "M9 5l7 7-7 7" }) }));
+}
+function MobileStepper({ steps, activeStep, variant = 'dots', onBack, onNext, backLabel = 'Back', nextLabel = 'Next', stepTitle, nextDisabled = false, backDisabled = false, nextLoading = false, className = '', }) {
+    const isFirstStep = activeStep <= 0;
+    const isLastStep = activeStep >= steps - 1;
+    const progressPercent = Math.min(Math.max(((activeStep + 1) / steps) * 100, 0), 100);
+    return (jsxs("div", { className: buildClassName('w-full flex flex-col gap-2 p-3 bg-white dark:bg-gray-900 border border-[var(--ui-border)] rounded-2xl shadow-xs select-none', className), "data-testid": "mobile-stepper", children: [stepTitle && (jsxs("div", { className: "flex items-center justify-between px-1", children: [jsx("span", { className: "text-xs font-bold text-gray-900 dark:text-white truncate", "data-testid": "mobile-stepper-title", children: stepTitle }), jsxs("span", { className: "text-[11px] font-medium text-gray-500 dark:text-gray-400 shrink-0 ml-2", children: [activeStep + 1, " / ", steps] })] })), jsxs("div", { className: "flex items-center justify-between gap-3", children: [jsx(Button, { size: "xs", variant: "plain", theme: "secondary", disabled: disabledBack(isFirstStep, backDisabled), onClick: onBack, "aria-label": "Previous step", leftIcon: jsx(ChevronLeftIcon, {}), "data-testid": "mobile-stepper-back-btn", children: backLabel }), jsxs("div", { className: "flex items-center justify-center flex-1", "data-testid": "mobile-stepper-indicator", children: [variant === 'dots' && (jsx("div", { className: "flex items-center gap-1.5", "data-testid": "mobile-stepper-dots", children: Array.from({ length: steps }).map((_, index) => {
+                                    const isActive = index === activeStep;
+                                    const isCompleted = index < activeStep;
+                                    return (jsx("span", { className: buildClassName('h-2 transition-all duration-300 rounded-full', isActive
+                                            ? 'w-5 bg-blue-600 dark:bg-blue-400'
+                                            : isCompleted
+                                                ? 'w-2 bg-blue-300 dark:bg-blue-800'
+                                                : 'w-2 bg-gray-200 dark:bg-gray-700'), "data-testid": `mobile-stepper-dot-${index}` }, index));
+                                }) })), variant === 'progress' && (jsx("div", { className: "w-full max-w-[140px] bg-gray-200 dark:bg-gray-700 h-2 rounded-full overflow-hidden", "data-testid": "mobile-stepper-progress", children: jsx("div", { className: "bg-blue-600 dark:bg-blue-400 h-full transition-all duration-300 rounded-full", style: { width: `${progressPercent}%` } }) })), variant === 'text' && (jsxs("div", { className: "text-xs font-semibold text-gray-600 dark:text-gray-300", "data-testid": "mobile-stepper-text", children: ["Step ", activeStep + 1, " of ", steps] }))] }), jsx(Button, { size: "xs", variant: "default", theme: "primary", disabled: nextDisabled, loading: nextLoading, onClick: onNext, "aria-label": "Next step", rightIcon: !isLastStep ? jsx(ChevronRightIcon, {}) : undefined, "data-testid": "mobile-stepper-next-btn", children: nextLabel })] })] }));
+}
+function disabledBack(isFirstStep, backDisabled) {
+    return isFirstStep || backDisabled;
+}
+MobileStepper.displayName = 'MobileStepper';
+
+const themeClasses = {
+    danger: 'bg-red-600 text-white hover:bg-red-700 active:bg-red-800',
+    primary: 'bg-blue-600 text-white hover:bg-blue-700 active:bg-blue-800',
+    success: 'bg-emerald-600 text-white hover:bg-emerald-700 active:bg-emerald-800',
+    warning: 'bg-amber-500 text-white hover:bg-amber-600 active:bg-amber-700',
+    info: 'bg-cyan-600 text-white hover:bg-cyan-700 active:bg-cyan-800',
+    secondary: 'bg-gray-600 text-white hover:bg-gray-700 active:bg-gray-800',
+    gray: 'bg-gray-500 text-white hover:bg-gray-600 active:bg-gray-700',
+};
+const SwipeableRow = ({ children, leftActions = [], rightActions = [], actionWidth = 76, threshold = 40, fullSwipeToExecute = false, fullSwipeThreshold = 180, disabled = false, className = '', contentClassName = '', onOpen, onClose, }) => {
+    const [offset, setOffset] = useState(0);
+    const [isDragging, setIsDragging] = useState(false);
+    const containerRef = useRef(null);
+    const startXRef = useRef(0);
+    const startYRef = useRef(0);
+    const initialOffsetRef = useRef(0);
+    const isHorizontalSwipeRef = useRef(null);
+    const maxLeftWidth = useMemo(() => leftActions.length * actionWidth, [leftActions, actionWidth]);
+    const maxRightWidth = useMemo(() => rightActions.length * actionWidth, [rightActions, actionWidth]);
+    const handleClose = useCallback(() => {
+        setOffset(0);
+        onClose === null || onClose === void 0 ? void 0 : onClose();
+    }, [onClose]);
+    const handleOpenLeft = useCallback(() => {
+        if (maxLeftWidth > 0) {
+            setOffset(maxLeftWidth);
+            onOpen === null || onOpen === void 0 ? void 0 : onOpen('left');
+        }
+        else {
+            handleClose();
+        }
+    }, [maxLeftWidth, onOpen, handleClose]);
+    const handleOpenRight = useCallback(() => {
+        if (maxRightWidth > 0) {
+            setOffset(-maxRightWidth);
+            onOpen === null || onOpen === void 0 ? void 0 : onOpen('right');
+        }
+        else {
+            handleClose();
+        }
+    }, [maxRightWidth, onOpen, handleClose]);
+    const handleDragStart = (clientX, clientY) => {
+        if (disabled)
             return;
-        const rect = trackRef.current.getBoundingClientRect();
-        const x = Math.min(Math.max(e.clientX - rect.left, 0), rect.width);
-        const rawVal = min + (x / rect.width) * (max - min);
-        const snappedVal = snapToStep(rawVal);
-        const pxMin = (percent(valueMin) / 100) * rect.width;
-        const pxMax = (percent(valueMax) / 100) * rect.width;
-        if (x <= pxMin) {
-            onChange(Math.min(snappedVal, valueMax - step), valueMax);
+        setIsDragging(true);
+        startXRef.current = clientX;
+        startYRef.current = clientY;
+        initialOffsetRef.current = offset;
+        isHorizontalSwipeRef.current = null;
+    };
+    const handleDragMove = (clientX, clientY) => {
+        if (!isDragging || disabled)
             return;
+        const deltaX = clientX - startXRef.current;
+        const deltaY = clientY - startYRef.current;
+        // Lock direction once initial movement surpasses 5px
+        if (isHorizontalSwipeRef.current === null) {
+            if (Math.abs(deltaX) > 5 || Math.abs(deltaY) > 5) {
+                isHorizontalSwipeRef.current = Math.abs(deltaX) > Math.abs(deltaY);
+            }
         }
-        if (x >= pxMax) {
-            onChange(valueMin, Math.max(snappedVal, valueMin + step));
+        if (isHorizontalSwipeRef.current === false) {
             return;
         }
-        const distMin = Math.abs(snappedVal - valueMin);
-        const distMax = Math.abs(snappedVal - valueMax);
-        if (distMin < distMax) {
-            onChange(Math.min(snappedVal, valueMax - step), valueMax);
+        let nextOffset = initialOffsetRef.current + deltaX;
+        // Limit drag range with resistance overscroll
+        if (nextOffset > 0) {
+            if (!leftActions.length) {
+                nextOffset = 0;
+            }
+            else if (nextOffset > maxLeftWidth && !fullSwipeToExecute) {
+                const overflow = nextOffset - maxLeftWidth;
+                nextOffset = maxLeftWidth + overflow * 0.2;
+            }
         }
-        else {
-            onChange(valueMin, Math.max(snappedVal, valueMin + step));
+        else if (nextOffset < 0) {
+            if (!rightActions.length) {
+                nextOffset = 0;
+            }
+            else if (Math.abs(nextOffset) > maxRightWidth && !fullSwipeToExecute) {
+                const overflow = Math.abs(nextOffset) - maxRightWidth;
+                nextOffset = -(maxRightWidth + overflow * 0.2);
+            }
         }
+        setOffset(nextOffset);
     };
-    // Keyboard accessibility handler for thumbs
-    const handleKeyDown = (thumb) => (e) => {
-        let delta = 0;
-        if (e.key === 'ArrowLeft' || e.key === 'ArrowDown')
-            delta = -step;
-        else if (e.key === 'ArrowRight' || e.key === 'ArrowUp')
-            delta = step;
-        else if (e.key === 'Home') {
-            if (thumb === 'min')
-                onChange(min, valueMax);
-            else
-                onChange(valueMin, valueMin + step);
+    const handleDragEnd = () => {
+        if (!isDragging)
             return;
-        }
-        else if (e.key === 'End') {
-            if (thumb === 'min')
-                onChange(valueMax - step, valueMax);
-            else
-                onChange(valueMin, max);
+        setIsDragging(false);
+        if (isHorizontalSwipeRef.current === false) {
             return;
         }
-        if (delta !== 0) {
-            e.preventDefault();
-            if (thumb === 'min') {
-                const next = snapToStep(valueMin + delta);
-                onChange(Math.min(next, valueMax - step), valueMax);
+        // Check full swipe auto-execution
+        if (fullSwipeToExecute) {
+            if (offset > fullSwipeThreshold && leftActions.length > 0) {
+                leftActions[0].onClick();
+                handleClose();
+                return;
+            }
+            if (offset < -fullSwipeThreshold && rightActions.length > 0) {
+                rightActions[0].onClick();
+                handleClose();
+                return;
+            }
+        }
+        // Snap logic
+        if (offset > 0) {
+            if (offset > threshold) {
+                handleOpenLeft();
             }
             else {
-                const next = snapToStep(valueMax + delta);
-                onChange(valueMin, Math.max(next, valueMin + step));
+                handleClose();
+            }
+        }
+        else if (offset < 0) {
+            if (Math.abs(offset) > threshold) {
+                handleOpenRight();
+            }
+            else {
+                handleClose();
             }
         }
     };
-    const markEntries = marks
-        ? Object.entries(marks).map(([k, v]) => ({ value: Number(k), label: v }))
-        : null;
-    return (jsxs("div", { className: buildClassName('group space-y-2', hasError && 'has-error', containerClass), children: [label && (jsxs("div", { className: "flex items-center justify-between mb-1", children: [jsx(Label, { className: labelClass, children: label }), labelHint] })), jsxs("div", { ref: trackRef, onMouseDown: handleTrackClick, className: "relative h-8 select-none w-full flex items-center cursor-pointer", "data-testid": "range-track", children: [jsx("div", { className: buildClassName('absolute top-1/2 left-0 right-0 rounded-full bg-gray-200 dark:bg-gray-700 -translate-y-1/2', currentSize.track) }), jsx("div", { className: buildClassName('absolute top-1/2 -translate-y-1/2 rounded-full transition-all duration-150 ease-out', hasError ? 'bg-red-500' : 'bg-blue-600 dark:bg-blue-500', currentSize.track), style: {
-                            left: `${percent(valueMin)}%`,
-                            width: `${percent(valueMax) - percent(valueMin)}%`,
-                        } }), jsx("div", { role: "slider", tabIndex: 0, "aria-label": "Minimum value", "aria-valuenow": valueMin, "aria-valuemin": min, "aria-valuemax": valueMax - step, onPointerDown: startDrag('min'), onMouseEnter: () => setHoveringThumb('min'), onMouseLeave: () => setHoveringThumb(null), onKeyDown: handleKeyDown('min'), className: buildClassName('absolute top-1/2 -translate-y-1/2 rounded-full focus:outline-none', 'bg-white border-2 shadow-md cursor-pointer touch-none', hasError ? 'border-red-600' : 'border-blue-600', 'transition-all duration-150 ease-out', currentSize.thumb, (activeThumbState === 'min' || hoveringThumb === 'min') &&
-                            (hasError ? 'ring-4 ring-red-200' : 'ring-4 ring-blue-200'), className), style: {
-                            left: `calc(${percent(valueMin)}% - ${currentSize.thumbPx / 2}px)`,
-                            zIndex: activeThumbState === 'min' ? 50 : 30,
-                        }, "data-testid": "thumb-min", children: showTooltips && (activeThumbState === 'min' || hoveringThumb === 'min') && (jsxs("div", { className: "absolute -top-7 left-1/2 -translate-x-1/2 px-2 py-0.5 rounded bg-gray-900 dark:bg-gray-100 text-white dark:text-gray-900 text-[11px] font-semibold shadow-md pointer-events-none z-50 whitespace-nowrap", children: [Math.round(valueMin), valueSuffix, jsx("div", { className: "absolute top-full left-1/2 -translate-x-1/2 border-4 border-transparent border-t-gray-900 dark:border-t-gray-100" })] })) }), jsx("div", { role: "slider", tabIndex: 0, "aria-label": "Maximum value", "aria-valuenow": valueMax, "aria-valuemin": valueMin + step, "aria-valuemax": max, onPointerDown: startDrag('max'), onMouseEnter: () => setHoveringThumb('max'), onMouseLeave: () => setHoveringThumb(null), onKeyDown: handleKeyDown('max'), className: buildClassName('absolute top-1/2 -translate-y-1/2 rounded-full focus:outline-none', 'bg-white border-2 shadow-md cursor-pointer touch-none', hasError ? 'border-red-600' : 'border-blue-600', 'transition-all duration-150 ease-out', currentSize.thumb, (activeThumbState === 'max' || hoveringThumb === 'max') &&
-                            (hasError ? 'ring-4 ring-red-200' : 'ring-4 ring-blue-200'), className), style: {
-                            left: `calc(${percent(valueMax)}% - ${currentSize.thumbPx / 2}px)`,
-                            zIndex: activeThumbState === 'max' ? 50 : 40,
-                        }, "data-testid": "thumb-max", children: showTooltips && (activeThumbState === 'max' || hoveringThumb === 'max') && (jsxs("div", { className: "absolute -top-7 left-1/2 -translate-x-1/2 px-2 py-0.5 rounded bg-gray-900 dark:bg-gray-100 text-white dark:text-gray-900 text-[11px] font-semibold shadow-md pointer-events-none z-50 whitespace-nowrap", children: [Math.round(valueMax), valueSuffix, jsx("div", { className: "absolute top-full left-1/2 -translate-x-1/2 border-4 border-transparent border-t-gray-900 dark:border-t-gray-100" })] })) })] }), markEntries && (jsx("div", { className: "relative w-full h-4 mt-1", children: markEntries.map((m) => {
-                    const markPercent = percent(m.value);
-                    return (jsxs("div", { className: "absolute top-0 transform -translate-x-1/2 flex flex-col items-center", style: { left: `${markPercent}%` }, children: [jsx("span", { className: "w-1 h-1.5 bg-gray-300 dark:bg-gray-600 rounded-full" }), jsx("span", { className: "text-[10px] font-medium text-gray-400 dark:text-gray-500 mt-0.5", children: m.label })] }, m.value));
-                }) })), jsxs("div", { className: buildClassName('flex justify-between font-medium text-gray-700 dark:text-gray-300', currentSize.text), children: [jsxs("span", { children: [Math.round(valueMin), valueSuffix] }), jsxs("span", { children: [Math.round(valueMax), valueSuffix] })] }), (showErrorMessage && hasError) || helperText ? (jsx("div", { className: "mt-1", children: showErrorMessage && hasError ? (jsx(TextContent, { error: true, small: true, children: error })) : helperText ? (jsx(TextContent, { muted: true, small: true, children: helperText })) : null })) : null] }));
-};
-RangeSlider.displayName = 'RangeSlider';
-
-const useDebounce = (value, delay) => {
-    const [debouncedValue, setDebouncedValue] = useState(value);
+    // Touch Handlers
+    const handleTouchStart = (e) => {
+        const touch = e.touches[0];
+        handleDragStart(touch.clientX, touch.clientY);
+    };
+    const handleTouchMove = (e) => {
+        const touch = e.touches[0];
+        handleDragMove(touch.clientX, touch.clientY);
+    };
+    const handleTouchEnd = () => {
+        handleDragEnd();
+    };
+    // Pointer/Mouse Handlers
+    const handlePointerDown = (e) => {
+        if (e.pointerType === 'mouse' && e.button !== 0)
+            return;
+        handleDragStart(e.clientX, e.clientY);
+    };
+    const handlePointerMove = (e) => {
+        if (!isDragging)
+            return;
+        handleDragMove(e.clientX, e.clientY);
+    };
+    const handlePointerUp = () => {
+        handleDragEnd();
+    };
+    // Close row on click outside if swiped open
     useEffect(() => {
-        const handler = setTimeout(() => {
-            setDebouncedValue(value);
-        }, delay);
-        // Cancel the timeout if value or delay changes
+        if (offset === 0)
+            return;
+        const handleClickOutside = (e) => {
+            if (containerRef.current && !containerRef.current.contains(e.target)) {
+                handleClose();
+            }
+        };
+        document.addEventListener('click', handleClickOutside);
         return () => {
-            clearTimeout(handler);
+            document.removeEventListener('click', handleClickOutside);
         };
-    }, [value, delay]);
-    return debouncedValue;
-};
-const useDebounceFn = (fn, ms) => {
-    const timeout = useRef(null);
-    useEffect(() => {
-        return () => clearTimeout(timeout.current);
-    }, []);
-    return useCallback((...args) => {
-        clearTimeout(timeout.current);
-        timeout.current = setTimeout(() => fn(...args), ms);
-    }, [fn, ms]);
-};
-
-var _path$1;
-function _extends$1() { return _extends$1 = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$1.apply(null, arguments); }
-var SvgCheck = function SvgCheck(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$1({
-    xmlns: "http://www.w3.org/2000/svg",
-    width: 24,
-    height: 24,
-    fill: "none",
-    stroke: "currentColor",
-    strokeLinecap: "round",
-    strokeLinejoin: "round",
-    strokeWidth: 2,
-    className: "lucide lucide-check-icon lucide-check",
-    viewBox: "0 0 24 24"
-  }, props), _path$1 || (_path$1 = /*#__PURE__*/React.createElement("path", {
-    d: "M20 6 9 17l-5-5"
-  })));
+    }, [offset, handleClose]);
+    const renderActionButton = (action) => {
+        const themeStyle = themeClasses[action.theme || 'primary'];
+        return (jsxs("button", { type: "button", style: { width: `${actionWidth}px` }, onClick: (e) => {
+                e.stopPropagation();
+                action.onClick();
+                handleClose();
+            }, className: buildClassName('h-full flex flex-col items-center justify-center gap-1 text-xs font-semibold shrink-0 cursor-pointer transition-colors px-2 select-none', themeStyle, action.className), "data-testid": `swipe-action-${action.id}`, children: [action.icon && jsx("span", { className: "shrink-0", children: action.icon }), action.label && jsx("span", { className: "truncate max-w-full", children: action.label })] }, action.id));
+    };
+    return (jsxs("div", { ref: containerRef, className: buildClassName('relative overflow-hidden rounded-xl border border-[var(--ui-border-muted)] bg-white dark:bg-gray-800 select-none touch-pan-y', className), "data-testid": "swipeable-row", children: [leftActions.length > 0 && (jsx("div", { className: "absolute left-0 top-0 bottom-0 flex items-center h-full z-0", style: { width: `${maxLeftWidth}px` }, "data-testid": "swipe-left-actions", children: leftActions.map(renderActionButton) })), rightActions.length > 0 && (jsx("div", { className: "absolute right-0 top-0 bottom-0 flex items-center justify-end h-full z-0", style: { width: `${maxRightWidth}px` }, "data-testid": "swipe-right-actions", children: rightActions.map(renderActionButton) })), jsx("div", { onTouchStart: handleTouchStart, onTouchMove: handleTouchMove, onTouchEnd: handleTouchEnd, onPointerDown: handlePointerDown, onPointerMove: handlePointerMove, onPointerUp: handlePointerUp, onPointerCancel: handlePointerUp, style: {
+                    transform: `translateX(${offset}px)`,
+                    transition: isDragging ? 'none' : 'transform 200ms cubic-bezier(0.2, 0.8, 0.2, 1)',
+                }, className: buildClassName('relative z-10 w-full bg-white dark:bg-gray-800 shadow-xs cursor-grab active:cursor-grabbing', contentClassName), "data-testid": "swipeable-row-content", children: children })] }));
 };
+SwipeableRow.displayName = 'SwipeableRow';
 
-var _circle, _path;
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-var SvgCirclePlus = function SvgCirclePlus(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends({
-    xmlns: "http://www.w3.org/2000/svg",
-    width: 24,
-    height: 24,
-    fill: "none",
-    stroke: "currentColor",
-    strokeLinecap: "round",
-    strokeLinejoin: "round",
-    strokeWidth: 2,
-    className: "lucide lucide-circle-plus-icon lucide-circle-plus",
-    viewBox: "0 0 24 24"
-  }, props), _circle || (_circle = /*#__PURE__*/React.createElement("circle", {
-    cx: 12,
-    cy: 12,
-    r: 10
-  })), _path || (_path = /*#__PURE__*/React.createElement("path", {
-    d: "M8 12h8M12 8v8"
-  })));
+function SearchIcon() {
+    return (jsx("svg", { className: "size-4 text-gray-400", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" }) }));
+}
+function FilterIcon() {
+    return (jsx("svg", { className: "size-3.5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z" }) }));
+}
+function SortIcon() {
+    return (jsx("svg", { className: "size-3.5 text-gray-400", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M7 16V4m0 0L3 8m4-4l4 4m6 0v12m0 0l4-4m-4 4l-4-4" }) }));
+}
+function CheckIcon() {
+    return (jsx("svg", { className: "size-4 text-blue-600 dark:text-blue-400 shrink-0", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2.5, d: "M5 13l4 4L19 7" }) }));
+}
+const parseNumericValue = (val) => {
+    if (typeof val === 'number')
+        return val;
+    if (val === null || val === undefined)
+        return NaN;
+    const cleaned = String(val).replace(/[^0-9.-]/g, '');
+    return cleaned !== '' ? Number(cleaned) : NaN;
 };
+function DataList({ items, columns, renderItem, searchable = false, searchQuery: externalSearchQuery, onSearchChange, searchFields, filterFields, selectedFilters: externalFilters, onFilterChange, sorting: externalSorting, onSortChange, swipeableActions, rowKey = 'id', selectable = false, selectedKeys = [], onSelectionChange, onItemClick, loading = false, emptyMessage = 'No items found', pagination, setPagination, containerClass = '', itemClass = '', }) {
+    // Internal Search State
+    const [internalSearchQuery, setInternalSearchQuery] = useState('');
+    const searchQuery = externalSearchQuery !== undefined ? externalSearchQuery : internalSearchQuery;
+    const handleSearchInput = (query) => {
+        onSearchChange ? onSearchChange(query) : setInternalSearchQuery(query);
+    };
+    // Internal Filter State
+    const [internalFilters, setInternalFilters] = useState({});
+    const selectedFilters = externalFilters !== undefined ? externalFilters : internalFilters;
+    // Mobile Bottom Sheet Filter Drawer State
+    const [isFilterSheetOpen, setIsFilterSheetOpen] = useState(false);
+    const [draftFilters, setDraftFilters] = useState({});
+    // Mobile Bottom Sheet Sort Drawer State
+    const [isSortSheetOpen, setIsSortSheetOpen] = useState(false);
+    // Active Filter Count Calculation
+    const activeFilterCount = useMemo(() => {
+        let count = 0;
+        Object.values(selectedFilters).forEach((val) => {
+            if (Array.isArray(val)) {
+                count += val.length;
+            }
+            else if (val !== '' && val !== null && val !== undefined && val !== 'all') {
+                count += 1;
+            }
+        });
+        return count;
+    }, [selectedFilters]);
+    // Internal Sort State
+    const [internalSort, setInternalSort] = useState(() => {
+        if (externalSorting && Object.keys(externalSorting).length > 0) {
+            const field = Object.keys(externalSorting)[0];
+            return { field, dir: externalSorting[field] };
+        }
+        return null;
+    });
+    React__default.useEffect(() => {
+        if (externalSorting !== undefined) {
+            if (Object.keys(externalSorting).length > 0) {
+                const field = Object.keys(externalSorting)[0];
+                setInternalSort({ field, dir: externalSorting[field] });
+            }
+            else {
+                setInternalSort(null);
+            }
+        }
+    }, [externalSorting]);
+    const activeSort = internalSort;
+    const sortableColumns = useMemo(() => (columns === null || columns === void 0 ? void 0 : columns.filter((c) => c.sortable)) || [], [columns]);
+    const sortOptions = useMemo(() => {
+        const opts = [{ label: 'Default Order', value: '' }];
+        sortableColumns.forEach((col) => {
+            const isNum = col.type === 'number';
+            const isDate = col.type === 'date';
+            const lowHigh = isNum
+                ? `${col.label} (Low to High)`
+                : isDate
+                    ? `${col.label} (Oldest First)`
+                    : `${col.label} (A to Z)`;
+            const highLow = isNum
+                ? `${col.label} (High to Low)`
+                : isDate
+                    ? `${col.label} (Newest First)`
+                    : `${col.label} (Z to A)`;
+            opts.push({ label: lowHigh, value: `${col.name}:asc` });
+            opts.push({ label: highLow, value: `${col.name}:desc` });
+        });
+        return opts;
+    }, [sortableColumns]);
+    const handleSortSelect = (val) => {
+        if (!val) {
+            setInternalSort(null);
+            onSortChange === null || onSortChange === void 0 ? void 0 : onSortChange({});
+            return;
+        }
+        const [field, dir] = val.split(':');
+        const sortObj = { [field]: dir };
+        setInternalSort({ field, dir: dir });
+        onSortChange === null || onSortChange === void 0 ? void 0 : onSortChange(sortObj);
+    };
+    const activeSortLabel = useMemo(() => {
+        if (!activeSort)
+            return 'Sort';
+        const currVal = `${activeSort.field}:${activeSort.dir}`;
+        const match = sortOptions.find((o) => o.value === currVal);
+        if (!match || !match.value)
+            return 'Sort';
+        return `Sort: ${match.label}`;
+    }, [activeSort, sortOptions]);
+    // Processed Items (Filter + Search + Sort)
+    const processedItems = useMemo(() => {
+        let result = [...items];
+        // 1. Apply Search
+        if (searchQuery.trim()) {
+            const q = searchQuery.toLowerCase().trim();
+            const fieldsToSearch = searchFields || (columns === null || columns === void 0 ? void 0 : columns.map((c) => c.name)) || ['id', 'name', 'title'];
+            result = result.filter((item) => fieldsToSearch.some((field) => {
+                const val = get(item, field);
+                return val !== null && val !== undefined && String(val).toLowerCase().includes(q);
+            }));
+        }
+        // 2. Apply Filters (supporting array checkboxes or single values)
+        const filterKeys = Object.keys(selectedFilters);
+        if (filterKeys.length > 0) {
+            result = result.filter((item) => filterKeys.every((key) => {
+                const filterVal = selectedFilters[key];
+                if (filterVal === undefined || filterVal === null || filterVal === '')
+                    return true;
+                const actual = String(get(item, key));
+                if (Array.isArray(filterVal)) {
+                    if (filterVal.length === 0)
+                        return true;
+                    return filterVal.map(String).includes(actual);
+                }
+                return actual === String(filterVal);
+            }));
+        }
+        // 3. Apply Auto Sorting
+        if (activeSort) {
+            const { field, dir } = activeSort;
+            const colDef = columns === null || columns === void 0 ? void 0 : columns.find((c) => c.name === field);
+            const isAsc = dir === 'asc' || dir === '1';
+            result.sort((a, b) => {
+                const valA = get(a, field);
+                const valB = get(b, field);
+                const numA = parseNumericValue(valA);
+                const numB = parseNumericValue(valB);
+                if ((colDef === null || colDef === void 0 ? void 0 : colDef.type) === 'number' || (!isNaN(numA) && !isNaN(numB))) {
+                    return isAsc ? numA - numB : numB - numA;
+                }
+                if ((colDef === null || colDef === void 0 ? void 0 : colDef.type) === 'date') {
+                    const dA = new Date(valA).getTime();
+                    const dB = new Date(valB).getTime();
+                    if (!isNaN(dA) && !isNaN(dB)) {
+                        return isAsc ? dA - dB : dB - dA;
+                    }
+                }
+                const strA = String(valA !== null && valA !== void 0 ? valA : '');
+                const strB = String(valB !== null && valB !== void 0 ? valB : '');
+                return isAsc
+                    ? strA.localeCompare(strB, undefined, { numeric: true })
+                    : strB.localeCompare(strA, undefined, { numeric: true });
+            });
+        }
+        return result;
+    }, [items, searchQuery, searchFields, columns, selectedFilters, activeSort]);
+    // Draft Filters Matching Count
+    const draftMatchingCount = useMemo(() => {
+        let result = [...items];
+        const filterKeys = Object.keys(draftFilters);
+        if (filterKeys.length > 0) {
+            result = result.filter((item) => filterKeys.every((key) => {
+                const filterVal = draftFilters[key];
+                if (filterVal === undefined || filterVal === null || filterVal === '')
+                    return true;
+                const actual = String(get(item, key));
+                if (Array.isArray(filterVal)) {
+                    if (filterVal.length === 0)
+                        return true;
+                    return filterVal.map(String).includes(actual);
+                }
+                return actual === String(filterVal);
+            }));
+        }
+        return result.length;
+    }, [items, draftFilters]);
+    const getKey = (item, idx) => {
+        var _a;
+        if (typeof rowKey === 'function')
+            return rowKey(item);
+        return (_a = item[rowKey]) !== null && _a !== void 0 ? _a : idx;
+    };
+    const isSelected = (key) => selectedKeys.includes(key);
+    const toggleSelectAll = () => {
+        if (selectedKeys.length === processedItems.length) {
+            onSelectionChange === null || onSelectionChange === void 0 ? void 0 : onSelectionChange([], []);
+        }
+        else {
+            const allKeys = processedItems.map(getKey);
+            onSelectionChange === null || onSelectionChange === void 0 ? void 0 : onSelectionChange(allKeys, processedItems);
+        }
+    };
+    const toggleItemSelect = (key, item) => {
+        const nextKeys = isSelected(key)
+            ? selectedKeys.filter((k) => k !== key)
+            : [...selectedKeys, key];
+        const nextItems = processedItems.filter((it, idx) => nextKeys.includes(getKey(it, idx)));
+        onSelectionChange === null || onSelectionChange === void 0 ? void 0 : onSelectionChange(nextKeys, nextItems);
+    };
+    const getItemClassStr = (item, idx) => {
+        if (typeof itemClass === 'function')
+            return itemClass(item, idx);
+        return itemClass;
+    };
+    return (jsxs("div", { className: buildClassName('w-full space-y-3', containerClass), "data-testid": "data-list", children: [(searchable || (filterFields && filterFields.length > 0) || sortableColumns.length > 0) && (jsxs("div", { className: "p-3 bg-gray-50 dark:bg-gray-800/80 rounded-xl border border-[var(--ui-border)] space-y-3", children: [searchable && (jsx(Input, { value: searchQuery, onChange: (e) => handleSearchInput(e.target.value), placeholder: "Search items...", leftGroup: jsx(SearchIcon, {}), clearable: true, onClear: () => handleSearchInput(''), className: "w-full text-xs", size: "sm" })), ((filterFields && filterFields.length > 0) || sortableColumns.length > 0) && (jsxs("div", { className: "flex items-center gap-2", children: [filterFields && filterFields.length > 0 && (jsxs(Button, { theme: "secondary", size: "sm", onClick: () => {
+                                    setDraftFilters(selectedFilters);
+                                    setIsFilterSheetOpen(true);
+                                }, className: "flex items-center gap-1.5 text-xs font-semibold flex-1 justify-center", "data-testid": "data-list-filter-btn", children: [jsx(FilterIcon, {}), jsx("span", { children: "Filters" }), activeFilterCount > 0 && (jsx("span", { className: "ml-1 size-4 rounded-full bg-blue-600 text-white text-[10px] font-bold flex items-center justify-center", children: activeFilterCount }))] })), sortableColumns.length > 0 && (jsxs(Button, { theme: "secondary", size: "sm", onClick: () => setIsSortSheetOpen(true), className: "flex items-center gap-1.5 text-xs font-semibold flex-1 justify-center", "data-testid": "data-list-sort-btn", children: [jsx(SortIcon, {}), jsx("span", { children: activeSortLabel })] }))] }))] })), filterFields && filterFields.length > 0 && (jsx(Drawer, { isOpen: isFilterSheetOpen, onClose: () => setIsFilterSheetOpen(false), align: "bottom", title: "Filter Items", dragHandle: true, panelClass: "max-h-[85vh] rounded-t-2xl", footer: jsxs("div", { className: "flex items-center gap-3 w-full", children: [jsx(Button, { theme: "secondary", size: "md", onClick: () => setDraftFilters({}), className: "flex-1 text-xs", children: "Clear All" }), jsxs(Button, { theme: "primary", size: "md", onClick: () => {
+                                onFilterChange ? onFilterChange(draftFilters) : setInternalFilters(draftFilters);
+                                setIsFilterSheetOpen(false);
+                            }, className: "flex-1 text-xs font-semibold", "data-testid": "data-list-apply-filters-btn", children: ["Apply Filters (", draftMatchingCount, ")"] })] }), footerSticky: true, children: jsx("div", { className: "space-y-6 py-2", children: filterFields.map((field) => {
+                        const selectedArray = Array.isArray(draftFilters[field.name])
+                            ? draftFilters[field.name]
+                            : draftFilters[field.name] !== undefined && draftFilters[field.name] !== ''
+                                ? [draftFilters[field.name]]
+                                : [];
+                        return (jsxs("div", { className: "space-y-2.5", children: [jsx("h4", { className: "text-xs font-bold uppercase tracking-wider text-gray-500 dark:text-gray-400 px-1", children: field.label }), jsx("div", { className: "space-y-1.5 bg-gray-50 dark:bg-gray-800/60 p-2.5 rounded-xl border border-[var(--ui-border-muted)]", children: field.options.map((opt) => {
+                                        const checked = selectedArray.includes(opt.value);
+                                        return (jsxs("label", { className: "flex items-center justify-between p-2 rounded-lg hover:bg-white dark:hover:bg-gray-800 cursor-pointer transition-colors", children: [jsx("span", { className: "text-sm font-medium text-gray-800 dark:text-gray-200", children: opt.label }), jsx(Checkbox, { checked: checked, onChange: () => {
+                                                        const next = checked
+                                                            ? selectedArray.filter((v) => v !== opt.value)
+                                                            : [...selectedArray, opt.value];
+                                                        setDraftFilters((prev) => ({
+                                                            ...prev,
+                                                            [field.name]: next,
+                                                        }));
+                                                    } })] }, String(opt.value)));
+                                    }) })] }, field.name));
+                    }) }) })), sortableColumns.length > 0 && (jsx(Drawer, { isOpen: isSortSheetOpen, onClose: () => setIsSortSheetOpen(false), align: "bottom", title: "Sort Items By", dragHandle: true, panelClass: "max-h-[70vh] rounded-t-2xl", children: jsx("div", { className: "space-y-1 py-2", children: sortOptions.map((opt) => {
+                        const isSelected = (activeSort ? `${activeSort.field}:${activeSort.dir}` : '') === opt.value;
+                        return (jsxs("button", { type: "button", onClick: () => {
+                                handleSortSelect(opt.value);
+                                setIsSortSheetOpen(false);
+                            }, className: buildClassName('w-full flex items-center justify-between p-3.5 rounded-xl text-left transition-colors cursor-pointer', isSelected
+                                ? 'bg-blue-50 dark:bg-blue-950/40 text-blue-600 dark:text-blue-400 font-semibold'
+                                : 'hover:bg-gray-100 dark:hover:bg-gray-800 text-gray-700 dark:text-gray-200 font-medium'), "data-testid": `data-list-sort-opt-${opt.value || 'default'}`, children: [jsx("span", { className: "text-sm", children: opt.label }), isSelected && jsx(CheckIcon, {})] }, opt.value));
+                    }) }) })), selectable && processedItems.length > 0 && (jsxs("div", { className: "p-3 bg-gray-50 dark:bg-gray-800/80 rounded-xl border border-[var(--ui-border)] flex items-center justify-between text-xs", children: [jsxs("label", { className: "flex items-center gap-2 font-medium text-gray-700 dark:text-gray-300 cursor-pointer", children: [jsx(Checkbox, { checked: processedItems.length > 0 && selectedKeys.length === processedItems.length, onChange: toggleSelectAll }), jsx("span", { children: "Select All Items" })] }), jsxs("span", { className: "text-gray-400 font-semibold", children: [selectedKeys.length, " of ", processedItems.length] })] })), jsx("div", { className: "space-y-3", children: loading ? (jsx("div", { className: "p-8 text-center text-sm text-gray-500 bg-white dark:bg-gray-800 rounded-xl border border-[var(--ui-border)]", children: "Loading items..." })) : processedItems.length === 0 ? (jsx("div", { className: "p-8 text-center text-sm text-gray-500 bg-white dark:bg-gray-800 rounded-xl border border-[var(--ui-border)]", children: emptyMessage })) : (processedItems.map((item, idx) => {
+                    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+                    const key = getKey(item, idx);
+                    const selected = isSelected(key);
+                    const actions = swipeableActions === null || swipeableActions === void 0 ? void 0 : swipeableActions(item);
+                    const customClass = getItemClassStr(item, idx);
+                    const contentNode = renderItem ? (renderItem(item, idx)) : (jsxs("div", { onClick: () => onItemClick === null || onItemClick === void 0 ? void 0 : onItemClick(item, idx), className: buildClassName('p-4 bg-white dark:bg-gray-800 rounded-xl border border-[var(--ui-border)] shadow-xs space-y-3 transition-colors', onItemClick && 'cursor-pointer hover:border-blue-500/50', selected && 'ring-2 ring-blue-500/50 bg-blue-50/20 dark:bg-blue-950/20', customClass), "data-testid": `data-list-item-${key}`, children: [jsxs("div", { className: "flex items-center justify-between gap-3 border-b border-[var(--ui-border-muted)] pb-2.5", children: [jsx("div", { className: "flex items-center gap-2.5 min-w-0 flex-1", children: selectable ? (jsx(Checkbox, { checked: selected, onChange: () => toggleItemSelect(key), "aria-label": `Select item ${key}`, label: jsx("span", { className: "font-bold text-sm text-gray-900 dark:text-white truncate block", children: columns && ((_a = columns[0]) === null || _a === void 0 ? void 0 : _a.render)
+                                                    ? columns[0].render(item)
+                                                    : String((_d = get(item, (_c = (_b = columns === null || columns === void 0 ? void 0 : columns[0]) === null || _b === void 0 ? void 0 : _b.name) !== null && _c !== void 0 ? _c : 'title')) !== null && _d !== void 0 ? _d : '') }) })) : (jsx("div", { className: "font-bold text-sm text-gray-900 dark:text-white truncate", children: columns && ((_e = columns[0]) === null || _e === void 0 ? void 0 : _e.render)
+                                                ? columns[0].render(item)
+                                                : String((_h = get(item, (_g = (_f = columns === null || columns === void 0 ? void 0 : columns[0]) === null || _f === void 0 ? void 0 : _f.name) !== null && _g !== void 0 ? _g : 'title')) !== null && _h !== void 0 ? _h : '') })) }), columns && columns[1] && (jsx("div", { className: "shrink-0 text-xs", children: columns[1].render
+                                            ? columns[1].render(item)
+                                            : String((_j = get(item, columns[1].name)) !== null && _j !== void 0 ? _j : '') }))] }), columns && columns.length > 2 && (jsx("div", { className: "grid grid-cols-2 gap-2 text-xs pt-1", children: columns.slice(2).map((col) => {
+                                    const val = col.render ? col.render(item) : get(item, col.name);
+                                    if (val === null || val === undefined || val === '')
+                                        return null;
+                                    return (jsxs("div", { className: "min-w-0", children: [jsx("span", { className: "text-gray-400 dark:text-gray-500 font-medium block truncate", children: col.label }), jsx("span", { className: "text-gray-800 dark:text-gray-200 font-semibold block truncate mt-0.5", children: val })] }, String(col.name)));
+                                }) }))] }));
+                    if (actions && (((_k = actions.leftActions) === null || _k === void 0 ? void 0 : _k.length) || ((_l = actions.rightActions) === null || _l === void 0 ? void 0 : _l.length))) {
+                        return (jsx(SwipeableRow, { leftActions: actions.leftActions, rightActions: actions.rightActions, children: contentNode }, key));
+                    }
+                    return jsx("div", { children: contentNode }, key);
+                })) }), pagination && pagination.total > 0 && (jsx("div", { className: "pt-2 flex justify-center", children: jsx(Pagination, { ...pagination, onChange: (newPag) => setPagination === null || setPagination === void 0 ? void 0 : setPagination(newPag) }) }))] }));
+}
+DataList.displayName = 'DataList';
 
 const sizeClasses$1 = {
     sm: {
-        input: 'px-2.5 py-1 text-xs leading-5 min-h-[30px]',
+        input: 'px-2.5 py-1.5 text-xs leading-5 min-h-[32px]',
         group: 'w-8 text-xs',
         icon: 'size-3.5',
         badgeSize: 'sm',
@@ -2130,7 +3739,10 @@ const sizeClasses$1 = {
     },
 };
 const SelectBox = forwardRef((props, forwardedRef) => {
-    const { labelKey = 'label', valueKey = 'value', name, id = name, options = [], groups, selected, size = 'md', label = null, labelWrapperClass = '', labelClass = '', labelHint = null, disabled = false, containerClass = '', onChange = () => { }, placeholder, dropdownContainerClass = 'z-20', multiple = false, maxSelection, showSelectAll = false, immediate = true, showErrorMessage = true, error = null, helperText, leftGroup, renderOption, async = false, searchable = true, required = false, allowAdd = false, addNewText = 'Create', onAdd = () => { }, allowClear = false, modalDropdown = false, noOptionsText = 'No options available', } = props;
+    const { labelKey = 'label', valueKey = 'value', name, id = name, options = [], groups, selected, size = 'md', label = null, labelWrapperClass = '', labelClass = '', labelHint = null, disabled = false, containerClass = '', onChange = () => { }, placeholder, dropdownContainerClass = 'z-20', multiple = false, maxSelection, showSelectAll = false, immediate = true, showErrorMessage = true, error = null, helperText, leftGroup, renderOption, async = false, searchable = true, required = false, allowAdd = false, addNewText = 'Create', onAdd = () => { }, allowClear = false, allowFreeText = false, modalDropdown = false, noOptionsText = 'No options available', } = props;
+    if (props.asBottomSheet || props.mobileMode === 'sheet') {
+        return jsx(MobilePicker, { ...props });
+    }
     const hasError = Boolean(error);
     const [query, setQuery] = useState('');
     const debouncedQuery = useDebounce(query, 500);
@@ -2178,6 +3790,49 @@ const SelectBox = forwardRef((props, forwardedRef) => {
     const getValue = useCallback((opt) => {
         return typeof opt === 'string' ? opt : opt[valueKey];
     }, [valueKey]);
+    const createFreeTextOption = useCallback((text) => {
+        const sample = allOptions[0] || (Array.isArray(selected) ? selected[0] : selected);
+        if (typeof sample === 'string' ||
+            (!sample && typeof labelKey === 'string' && labelKey === 'label')) {
+            return text;
+        }
+        return {
+            [labelKey]: text,
+            [valueKey]: text,
+        };
+    }, [allOptions, selected, labelKey, valueKey]);
+    const handleFreeTextCommit = useCallback((queryText) => {
+        const trimmed = queryText.trim();
+        if (!trimmed)
+            return;
+        const existing = allOptions.find((opt) => {
+            const display = getDisplayValue(opt);
+            return (display === null || display === void 0 ? void 0 : display.toLowerCase()) === trimmed.toLowerCase();
+        });
+        const valueToCommit = existing || createFreeTextOption(trimmed);
+        if (multiple) {
+            const current = isArray(selected) ? selected : [];
+            const alreadySelected = current.some((item) => { var _a; return ((_a = getDisplayValue(item)) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === trimmed.toLowerCase(); });
+            if (!alreadySelected) {
+                if (maxSelection && current.length >= maxSelection)
+                    return;
+                onChange([...current, valueToCommit]);
+            }
+            setQuery('');
+        }
+        else {
+            onChange(valueToCommit);
+            setQuery('');
+        }
+    }, [
+        allOptions,
+        getDisplayValue,
+        createFreeTextOption,
+        multiple,
+        selected,
+        maxSelection,
+        onChange,
+    ]);
     const removeSelection = (idx) => {
         var _a;
         if (!isArray(selected))
@@ -2250,11 +3905,25 @@ const SelectBox = forwardRef((props, forwardedRef) => {
         if (async && debouncedQuery)
             handleSearch(debouncedQuery);
     }, [debouncedQuery, async, handleSearch]);
+    const normalizedSelected = useMemo(() => {
+        if (multiple) {
+            if (Array.isArray(selected))
+                return selected;
+            if (selected !== null && selected !== undefined)
+                return [selected];
+            return [];
+        }
+        else {
+            if (Array.isArray(selected))
+                return selected.length > 0 ? selected[0] : null;
+            return selected !== null && selected !== void 0 ? selected : null;
+        }
+    }, [multiple, selected]);
     const isAllSelected = useMemo(() => {
-        if (!multiple || !Array.isArray(selected) || !allOptions.length)
+        if (!multiple || !Array.isArray(normalizedSelected) || !allOptions.length)
             return false;
-        return allOptions.length === selected.length;
-    }, [multiple, selected, allOptions]);
+        return allOptions.length === normalizedSelected.length;
+    }, [multiple, normalizedSelected, allOptions]);
     const handleToggleSelectAll = () => {
         if (isAllSelected) {
             onChange([]);
@@ -2264,30 +3933,69 @@ const SelectBox = forwardRef((props, forwardedRef) => {
         }
     };
     const hasLeftGroup = leftGroup != null && leftGroup !== undefined;
-    return (jsxs("div", { className: buildClassName('group space-y-2', hasError && 'has-error', containerClass), ref: containerRef, children: [label && (jsxs("div", { className: buildClassName('flex items-center justify-between', labelWrapperClass), children: [jsx(Label, { className: labelClass, htmlFor: id, "aria-required": required, children: label }), labelHint && jsx(TextContent, { xsmall: true, children: labelHint })] })), jsxs(Combobox, { multiple: multiple, immediate: immediate, name: name, value: selected, onChange: comboboxOnChangeWrapper, onClose: () => setQuery(''), disabled: disabled, children: [multiple ? (jsxs("div", { className: buildClassName(baseInputClass, 'flex flex-wrap gap-2 peer relative', hasLeftGroup ? (size === 'lg' ? 'ps-12' : size === 'sm' ? 'ps-8' : 'ps-10') : ''), ref: forwardedRef, children: [hasLeftGroup && (jsx("span", { className: buildClassName('absolute left-0 top-0 h-full flex items-center justify-center text-gray-400 dark:text-gray-500', currentSize.group), children: leftGroup })), isArray(selected) &&
-                                (selected === null || selected === void 0 ? void 0 : selected.length) > 0 &&
-                                selected.map((option, idx) => (jsx(Badge, { theme: "secondary", size: currentSize.badgeSize, removable: !disabled, onRemove: () => removeSelection(idx), children: getDisplayValue(option) }, `${getValue(option)}-${idx}`))), jsx(ComboboxInput, { className: "outline-none flex-1 dark:placeholder-gray-400 placeholder-gray-400 bg-transparent", "aria-label": name, value: query, autoComplete: "off", placeholder: (selected === null || selected === void 0 ? void 0 : selected.length) ? '' : placeholder, onChange: (e) => setQuery(e.target.value), id: id, ref: inputRef, onKeyDown: (e) => {
-                                    if (multiple && e.key === 'Backspace' && !query) {
-                                        if (Array.isArray(selected) && selected.length > 0) {
-                                            removeSelection(selected.length - 1);
+    return (jsxs("div", { className: buildClassName('group space-y-2', hasError && 'has-error', containerClass), ref: containerRef, children: [label && (jsxs("div", { className: buildClassName('flex items-center justify-between', labelWrapperClass), children: [jsx(Label, { className: labelClass, htmlFor: id, "aria-required": required, children: label }), labelHint && jsx(TextContent, { xsmall: true, children: labelHint })] })), jsxs(Combobox, { multiple: multiple, immediate: immediate, name: name, value: normalizedSelected, onChange: comboboxOnChangeWrapper, onClose: () => setQuery(''), disabled: disabled, by: (a, b) => (a && b ? getValue(a) === getValue(b) : a === b), children: [multiple ? (jsxs("div", { className: buildClassName(baseInputClass, 'flex flex-wrap gap-2 peer relative', hasLeftGroup ? (size === 'lg' ? 'ps-12' : size === 'sm' ? 'ps-8' : 'ps-10') : ''), ref: forwardedRef, children: [hasLeftGroup && (jsx("span", { className: buildClassName('absolute left-0 top-0 h-full flex items-center justify-center text-gray-400 dark:text-gray-500', currentSize.group), children: leftGroup })), isArray(normalizedSelected) &&
+                                (normalizedSelected === null || normalizedSelected === void 0 ? void 0 : normalizedSelected.length) > 0 &&
+                                normalizedSelected.map((option, idx) => (jsx(Badge, { theme: "secondary", size: currentSize.badgeSize, removable: !disabled, onRemove: () => removeSelection(idx), children: getDisplayValue(option) }, `${getValue(option)}-${idx}`))), jsx(ComboboxInput, { className: "outline-none flex-1 dark:placeholder-gray-400 placeholder-gray-400 bg-transparent", "aria-label": name, value: query, autoComplete: "off", placeholder: (normalizedSelected === null || normalizedSelected === void 0 ? void 0 : normalizedSelected.length) ? '' : placeholder, onChange: (e) => {
+                                    const val = e.target.value;
+                                    if (allowFreeText && multiple && val.includes(',')) {
+                                        const parts = val.split(',');
+                                        parts.forEach((p) => {
+                                            if (p.trim())
+                                                handleFreeTextCommit(p.trim());
+                                        });
+                                        setQuery('');
+                                    }
+                                    else {
+                                        setQuery(val);
+                                    }
+                                }, id: id, ref: inputRef, onKeyDown: (e) => {
+                                    if (allowFreeText && (e.key === 'Enter' || e.key === ',') && query.trim()) {
+                                        e.preventDefault();
+                                        handleFreeTextCommit(query.replace(/,/g, ''));
+                                    }
+                                    else if (multiple && e.key === 'Backspace' && !query) {
+                                        if (Array.isArray(normalizedSelected) && normalizedSelected.length > 0) {
+                                            removeSelection(normalizedSelected.length - 1);
                                         }
                                     }
-                                }, "data-testid": "combobox-input" }), jsx(ComboboxButton, { className: "group absolute inset-y-0 right-0 px-2.5 flex items-center justify-center", "data-testid": "combobox-button", children: jsx(SvgChevronDown, { className: chevronIconClass }) })] })) : (jsxs("div", { className: "relative", ref: forwardedRef, children: [hasLeftGroup && (jsx("span", { className: buildClassName('absolute left-0 top-0 h-full flex items-center justify-center text-gray-400 dark:text-gray-500 z-10', currentSize.group), children: leftGroup })), jsx(ComboboxInput, { "aria-label": name, displayValue: (option) => (option ? getDisplayValue(option) : null), autoComplete: "off", placeholder: placeholder, onChange: (event) => setQuery(event.target.value), className: buildClassName(baseInputClass, hasLeftGroup ? (size === 'lg' ? 'ps-12' : size === 'sm' ? 'ps-8' : 'ps-10') : ''), disabled: disabled, id: id, readOnly: !searchable, ref: inputRef, "data-testid": "combobox-input" }), allowClear && !isEmpty(selected) && (jsx(Button, { size: "xs", iconOnly: true, "aria-label": "Clear selection", theme: "secondary", variant: "plain", className: "group absolute inset-y-0 right-8 h-6 top-2", onClick: () => handleOnChangeInternal(multiple ? [] : null), disabled: disabled, "data-testid": "combobox-clear-button", noOutlineOnFocus: true, children: jsx(SvgX, { className: "size-4 stroke-gray-500 dark:stroke-gray-300" }) })), jsx(ComboboxButton, { className: "group absolute inset-y-0 right-0 px-2.5 flex items-center justify-center", "data-testid": "combobox-button", children: jsx(SvgChevronDown, { className: chevronIconClass }) })] })), jsxs(ComboboxOptions, { anchor: { to: 'bottom', gap: 5 }, as: "div", modal: modalDropdown, className: buildClassName('w-[var(--input-width)] rounded-lg border border-gray-200 dark:border-white/5 bg-white dark:bg-gray-800 p-1 [--anchor-gap:var(--spacing-1)]', '[--anchor-max-height:20rem]', 'origin-top border transition duration-200 ease-[cubic-bezier(0.4, 0.0, 0.2, 1)] data-[closed]:translate-y-[-15%] data-[closed]:opacity-0', dropdownContainerClass), transition: true, "data-testid": "combobox-options", children: [multiple && showSelectAll && allOptions.length > 0 && (jsxs("div", { className: "pb-1 mb-1 border-b border-gray-200 dark:border-gray-700/80 px-3 pt-1 flex items-center justify-between", children: [jsx("button", { type: "button", onClick: handleToggleSelectAll, className: "text-xs font-semibold text-blue-600 dark:text-blue-400 hover:underline cursor-pointer", children: isAllSelected ? 'Deselect All' : 'Select All' }), jsxs("span", { className: "text-[11px] font-medium text-gray-400", children: [Array.isArray(selected) ? selected.length : 0, " of ", allOptions.length] })] })), optionsLoading ? (jsx(BodyText, { "data-testid": "options-loading", className: "flex items-center justify-center py-2 px-3 select-none", children: jsx(Loader, { size: "sm" }) })) : shouldShowTypeToSearch ? (jsx(BodyText, { className: "flex items-center justify-between py-2 px-3 select-none", children: "Type to search..." })) : (jsxs("div", { children: [filteredGroups
+                                }, onBlur: () => {
+                                    if (allowFreeText && query.trim()) {
+                                        handleFreeTextCommit(query.replace(/,/g, ''));
+                                    }
+                                }, "data-testid": "combobox-input" }), jsx(ComboboxButton, { className: "group absolute inset-y-0 right-0 px-2.5 flex items-center justify-center", "data-testid": "combobox-button", children: jsx(SvgChevronDown, { className: chevronIconClass }) })] })) : (jsxs("div", { className: "relative", ref: forwardedRef, children: [hasLeftGroup && (jsx("span", { className: buildClassName('absolute left-0 top-0 h-full flex items-center justify-center text-gray-400 dark:text-gray-500 z-10', currentSize.group), children: leftGroup })), jsx(ComboboxInput, { "aria-label": name, displayValue: (option) => (option ? getDisplayValue(option) : null), autoComplete: "off", placeholder: placeholder, onChange: (event) => setQuery(event.target.value), onKeyDown: (e) => {
+                                    if (allowFreeText && e.key === 'Enter' && query.trim()) {
+                                        e.preventDefault();
+                                        handleFreeTextCommit(query);
+                                    }
+                                }, onBlur: () => {
+                                    if (allowFreeText && query.trim()) {
+                                        handleFreeTextCommit(query);
+                                    }
+                                }, onFocus: () => {
+                                    setQuery('');
+                                }, className: buildClassName(baseInputClass, hasLeftGroup ? (size === 'lg' ? 'ps-12' : size === 'sm' ? 'ps-8' : 'ps-10') : ''), disabled: disabled, id: id, readOnly: !searchable, ref: inputRef, "data-testid": "combobox-input" }), allowClear && !isEmpty(normalizedSelected) && (jsx(Button, { size: "xs", iconOnly: true, "aria-label": "Clear selection", theme: "secondary", variant: "plain", className: "group absolute inset-y-0 right-8 h-6 top-2", onClick: () => handleOnChangeInternal(multiple ? [] : null), disabled: disabled, "data-testid": "combobox-clear-button", noOutlineOnFocus: true, children: jsx(SvgX, { className: "size-4 stroke-gray-500 dark:stroke-gray-300" }) })), jsx(ComboboxButton, { className: "group absolute inset-y-0 right-0 px-2.5 flex items-center justify-center", "data-testid": "combobox-button", children: jsx(SvgChevronDown, { className: chevronIconClass }) })] })), jsxs(ComboboxOptions, { anchor: { to: 'bottom', gap: 5 }, as: "div", modal: modalDropdown, className: buildClassName('w-[var(--input-width)] rounded-lg border border-[var(--ui-border)] bg-white dark:bg-gray-800 p-1 shadow-lg max-h-80 overflow-y-auto z-50 [--anchor-gap:var(--spacing-1)]', '[--anchor-max-height:20rem]', 'origin-top border transition duration-200 ease-[cubic-bezier(0.4, 0.0, 0.2, 1)] data-[closed]:translate-y-[-15%] data-[closed]:opacity-0', dropdownContainerClass), transition: true, "data-testid": "combobox-options", children: [multiple && showSelectAll && allOptions.length > 0 && (jsxs("div", { className: "pb-1 mb-1 border-b border-[var(--ui-border-muted)] px-3 pt-1 flex items-center justify-between", children: [jsx("button", { type: "button", onClick: handleToggleSelectAll, className: "text-xs font-semibold text-blue-600 dark:text-blue-400 hover:underline cursor-pointer", children: isAllSelected ? 'Deselect All' : 'Select All' }), jsxs("span", { className: "text-[11px] font-medium text-gray-400", children: [Array.isArray(normalizedSelected) ? normalizedSelected.length : 0, " of", ' ', allOptions.length] })] })), optionsLoading ? (jsx(BodyText, { "data-testid": "options-loading", className: "flex items-center justify-center py-2 px-3 select-none", children: jsx(Loader, { size: "sm" }) })) : shouldShowTypeToSearch ? (jsx(BodyText, { className: "flex items-center justify-between py-2 px-3 select-none", children: "Type to search..." })) : (jsxs("div", { children: [allowFreeText &&
+                                        query.trim() &&
+                                        !allOptions.some((opt) => { var _a; return ((_a = getDisplayValue(opt)) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === query.trim().toLowerCase(); }) && (jsx(ComboboxOption, { value: createFreeTextOption(query.trim()), className: "group flex items-center gap-2 rounded-lg py-1.5 px-3 select-none text-sm data-[focus]:bg-blue-50 dark:data-[focus]:bg-blue-950/40 text-blue-600 dark:text-blue-400 font-medium cursor-pointer w-full", "data-testid": "freetext-option", children: jsxs("span", { children: ["Use \"", query.trim(), "\""] }) }, `freetext-${query.trim()}`)), filteredGroups
                                         ? filteredGroups.map((grp, gIdx) => (jsxs("div", { children: [jsx("div", { className: "text-[11px] font-bold uppercase tracking-wider text-gray-400 dark:text-gray-500 px-3 py-1 select-none", children: grp.group }), grp.options.map((option) => {
                                                     const optVal = getValue(option);
                                                     const isOptSelected = multiple
-                                                        ? isArray(selected) && selected.some((s) => getValue(s) === optVal)
-                                                        : selected && getValue(selected) === optVal;
-                                                    return (jsx(ComboboxOption, { disabled: option.disabled, value: option, className: "group rounded-lg py-1.5 px-3 select-none data-[focus]:bg-black/3 dark:data-[focus]:bg-white/10 data-disabled:opacity-50 cursor-pointer data-disabled:pointer-events-none", children: renderOption ? (renderOption(option, Boolean(isOptSelected))) : (jsxs("div", { className: "flex items-center justify-between gap-2 dark:text-white group-data-[selected]:text-blue-600", children: [jsx("span", { className: "text-sm/6", children: getDisplayValue(option) }), jsx(SvgCheck, { className: "invisible size-5 dark:stroke-gray-300 group-data-[selected]:visible" })] })) }, optVal));
+                                                        ? isArray(normalizedSelected) &&
+                                                            normalizedSelected.some((s) => getValue(s) === optVal)
+                                                        : normalizedSelected && getValue(normalizedSelected) === optVal;
+                                                    return (jsx(ComboboxOption, { disabled: option.disabled, value: option, className: "group rounded-lg py-1.5 px-3 select-none data-[focus]:bg-gray-100 dark:data-[focus]:bg-white/10 data-disabled:opacity-50 cursor-pointer data-disabled:pointer-events-none", children: renderOption ? (renderOption(option, Boolean(isOptSelected))) : (jsxs("div", { className: "flex items-center justify-between gap-2 text-gray-900 dark:text-white group-data-[selected]:text-blue-600", children: [jsx("span", { className: "text-sm/6", children: getDisplayValue(option) }), jsx(SvgCheck, { className: "invisible size-5 dark:stroke-gray-300 group-data-[selected]:visible" })] })) }, optVal));
                                                 })] }, gIdx)))
                                         : /* Render Standard Flat Options */
                                             filteredOptions.map((option) => {
                                                 const optVal = getValue(option);
                                                 const isOptSelected = multiple
-                                                    ? isArray(selected) && selected.some((s) => getValue(s) === optVal)
-                                                    : selected && getValue(selected) === optVal;
-                                                return (jsx(ComboboxOption, { disabled: option.disabled, value: option, className: "group rounded-lg py-1.5 px-3 select-none data-[focus]:bg-black/3 dark:data-[focus]:bg-white/10 data-disabled:opacity-50 cursor-pointer data-disabled:pointer-events-none", children: renderOption ? (renderOption(option, Boolean(isOptSelected))) : (jsxs("div", { className: "flex items-center justify-between gap-2 dark:text-white group-data-[selected]:text-blue-600", children: [jsx("span", { className: "text-sm/6", children: getDisplayValue(option) }), jsx(SvgCheck, { className: "invisible size-5 dark:stroke-gray-300 group-data-[selected]:visible" })] })) }, optVal));
-                                            }), filteredOptions.length === 0 && !(filteredGroups === null || filteredGroups === void 0 ? void 0 : filteredGroups.length) && (jsx("div", { "data-testid": "no-result-found", className: "flex items-center gap-2 py-1.5 px-3 select-none text-gray-500 dark:text-gray-400", children: query ? (jsxs(Fragment, { children: ["No results found for ", jsx("span", { className: "font-semibold", children: query })] })) : (noOptionsText) })), allowAdd && (jsx(ComboboxOption, { value: query, className: "group rounded-lg py-1.5 px-3 cursor-pointer text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700", onClick: () => void handleAddAndSelect(query), children: jsxs("div", { className: "flex items-center gap-2", children: [jsx(SvgCirclePlus, { className: "size-4.5" }), jsxs(TextContent, { children: [addNewText, " \"", query, "\""] })] }) }))] }))] })] }), showErrorMessage && error && (jsx("div", { className: "mt-1", children: jsx(TextContent, { error: true, small: true, children: error }) })), !error && helperText && (jsx("div", { className: "mt-1", children: jsx(TextContent, { muted: true, small: true, children: helperText }) }))] }));
+                                                    ? isArray(normalizedSelected) &&
+                                                        normalizedSelected.some((s) => getValue(s) === optVal)
+                                                    : normalizedSelected && getValue(normalizedSelected) === optVal;
+                                                return (jsx(ComboboxOption, { disabled: option.disabled, value: option, className: "group rounded-lg py-1.5 px-3 select-none data-[focus]:bg-gray-100 dark:data-[focus]:bg-white/10 data-disabled:opacity-50 cursor-pointer data-disabled:pointer-events-none", children: renderOption ? (renderOption(option, Boolean(isOptSelected))) : (jsxs("div", { className: "flex items-center justify-between gap-2 text-gray-900 dark:text-white group-data-[selected]:text-blue-600", children: [jsx("span", { className: "text-sm/6", children: getDisplayValue(option) }), jsx(SvgCheck, { className: "invisible size-5 dark:stroke-gray-300 group-data-[selected]:visible" })] })) }, optVal));
+                                            }), filteredOptions.length === 0 &&
+                                        !(filteredGroups === null || filteredGroups === void 0 ? void 0 : filteredGroups.length) &&
+                                        !allowFreeText &&
+                                        !(allowAdd && query.trim()) && (jsxs("div", { "data-testid": "no-result-found", className: "flex items-center gap-2 py-1.5 px-3 select-none", children: [jsx(TextContent, { muted: true, small: true, children: noOptionsText }), jsx(TextContent, { strong: true, small: true, children: query })] })), !allowFreeText && allowAdd && Boolean(query.trim()) && (jsx(ComboboxOption, { value: query, className: "group rounded-lg py-1.5 px-3 cursor-pointer text-gray-700 dark:text-gray-300 data-[focus]:bg-gray-100 dark:data-[focus]:bg-gray-700", onClick: () => void handleAddAndSelect(query), children: jsxs("div", { className: "flex items-center gap-2", children: [jsx(SvgCirclePlus, { className: "size-4.5" }), jsxs(TextContent, { children: [addNewText, " \"", query, "\""] })] }) }, `add-${query.trim()}`))] }))] })] }), showErrorMessage && error && (jsx("div", { className: "mt-1", children: jsx(TextContent, { error: true, small: true, children: error }) })), !error && helperText && (jsx("div", { className: "mt-1", children: jsx(TextContent, { muted: true, small: true, children: helperText }) }))] }));
 });
 SelectBox.displayName = 'SelectBox';
 
@@ -2321,10 +4029,15 @@ Skeleton.displayName = 'Skeleton';
 
 const MinusIcon = ({ className }) => (jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", className: className, "aria-hidden": "true", children: jsx("line", { x1: "5", y1: "12", x2: "19", y2: "12" }) }));
 const PlusIcon = ({ className }) => (jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", className: className, "aria-hidden": "true", children: [jsx("line", { x1: "12", y1: "5", x2: "12", y2: "19" }), jsx("line", { x1: "5", y1: "12", x2: "19", y2: "12" })] }));
+const CONTAINER_SIZE_CLASS = {
+    sm: 'h-8 text-xs',
+    md: 'h-10 text-sm',
+    lg: 'h-12 text-base',
+};
 const BUTTON_SIZE_CLASS = {
-    sm: 'size-7',
-    md: 'size-9',
-    lg: 'size-10',
+    sm: 'w-7.5 h-full',
+    md: 'w-9.5 h-full',
+    lg: 'w-11 h-full',
 };
 const ICON_SIZE_CLASS = {
     sm: 'size-3.5',
@@ -2332,12 +4045,15 @@ const ICON_SIZE_CLASS = {
     lg: 'size-4.5',
 };
 const INPUT_TEXT_CLASS = {
-    sm: 'w-12 text-xs py-1',
-    md: 'w-16 text-sm py-1.5',
-    lg: 'w-20 text-base py-2',
+    sm: 'w-12 text-xs',
+    md: 'w-16 text-sm',
+    lg: 'w-20 text-base',
 };
 const QuantityStepper = forwardRef((props, ref) => {
-    const { value, onChange, min = 0, max = 99999, step = 1, label, size = 'md', prefix, suffix, disabled = false, className, onFocus, ...restProps } = props;
+    const { value, onChange, min = 0, max = 99999, step = 1, label, labelHint, helperText, error, showErrorMessage = true, size = 'md', prefix, suffix, disabled = false, className, onFocus, id: customId, ...restProps } = props;
+    const autoId = useId();
+    const stepperId = customId || `stepper-${autoId}`;
+    const hasError = Boolean(error);
     const handleDecrement = () => {
         if (disabled)
             return;
@@ -2363,10 +4079,18 @@ const QuantityStepper = forwardRef((props, ref) => {
     };
     const isAtMin = disabled || value <= min;
     const isAtMax = disabled || value >= max;
-    return (jsxs("div", { className: buildClassName('flex flex-col gap-1 inline-flex', className), children: [label && (jsx("label", { className: "block text-xs font-medium text-gray-700 dark:text-gray-300", children: label })), jsxs("div", { className: buildClassName('inline-flex items-center rounded-lg border border-gray-300 bg-white dark:border-gray-600 dark:bg-gray-800 shadow-xs focus-within:ring-2 focus-within:ring-[var(--ui-primary-ring)] focus-within:border-[var(--ui-primary)] transition-all', disabled ? 'opacity-50 cursor-not-allowed bg-gray-50 dark:bg-gray-900' : ''), "data-testid": "quantity-stepper", children: [jsx("button", { type: "button", disabled: isAtMin, onClick: handleDecrement, tabIndex: -1, "aria-label": "Decrease quantity", className: buildClassName('flex items-center justify-center rounded-l-md text-gray-500 hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-200 transition-colors', BUTTON_SIZE_CLASS[size], isAtMin ? 'opacity-30 hover:bg-transparent cursor-not-allowed' : 'cursor-pointer'), "data-testid": "stepper-decrement", children: jsx(MinusIcon, { className: ICON_SIZE_CLASS[size] }) }), prefix && jsx("span", { className: "pl-1 text-gray-400 dark:text-gray-500", children: prefix }), jsx("input", { ref: ref, type: "number", min: min, max: max, step: step, value: value === 0 ? '' : value, placeholder: "0", disabled: disabled, onFocus: (e) => {
+    return (jsxs("div", { className: buildClassName('flex flex-col gap-1 inline-flex', className), children: [label && (jsxs("div", { className: "flex items-center justify-between gap-2", children: [jsx(Label, { htmlFor: stepperId, className: disabled ? 'opacity-70 cursor-not-allowed' : '', children: label }), labelHint && jsx(TextContent, { xsmall: true, children: labelHint })] })), jsxs("div", { className: buildClassName('inline-flex items-center rounded-lg shadow-2xs transition-all duration-150', 'outline outline-1 -outline-offset-1', CONTAINER_SIZE_CLASS[size], hasError
+                    ? '!outline-red-500 !ring-1 !ring-red-500/50 dark:!outline-red-500'
+                    : 'outline-[var(--ui-border)]', disabled
+                    ? 'pointer-events-none bg-gray-100 dark:bg-gray-800 outline-[var(--ui-border-muted)]'
+                    : 'bg-white dark:bg-gray-700', 'focus-within:outline-[var(--ui-focus-ring)] focus-within:outline-2 focus-within:-outline-offset-2'), "data-testid": "quantity-stepper", children: [jsx("button", { type: "button", disabled: isAtMin, onClick: handleDecrement, tabIndex: -1, "aria-label": "Decrease quantity", className: buildClassName('flex items-center justify-center rounded-l-lg text-gray-500 hover:text-gray-800 dark:text-gray-400 dark:hover:text-white transition-colors shrink-0', BUTTON_SIZE_CLASS[size], isAtMin
+                            ? 'opacity-30 hover:bg-transparent cursor-not-allowed'
+                            : 'cursor-pointer hover:bg-gray-100/80 dark:hover:bg-gray-600/60'), "data-testid": "stepper-decrement", children: jsx(MinusIcon, { className: ICON_SIZE_CLASS[size] }) }), prefix && (jsx("span", { className: "pl-1 text-gray-400 dark:text-gray-400 select-none text-xs shrink-0", children: prefix })), jsx("input", { ref: ref, id: stepperId, type: "number", min: min, max: max, step: step, value: value === 0 ? '' : value, placeholder: "0", disabled: disabled, onFocus: (e) => {
                             e.target.select();
                             onFocus === null || onFocus === void 0 ? void 0 : onFocus(e);
-                        }, onChange: handleInputChange, className: buildClassName('text-center font-semibold text-gray-900 dark:text-white bg-transparent focus:outline-none [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none', INPUT_TEXT_CLASS[size]), "data-testid": "stepper-input", ...restProps }), suffix && jsx("span", { className: "pr-1 text-xs text-gray-500 dark:text-gray-400", children: suffix }), jsx("button", { type: "button", disabled: isAtMax, onClick: handleIncrement, tabIndex: -1, "aria-label": "Increase quantity", className: buildClassName('flex items-center justify-center rounded-r-md text-gray-500 hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-200 transition-colors', BUTTON_SIZE_CLASS[size], isAtMax ? 'opacity-30 hover:bg-transparent cursor-not-allowed' : 'cursor-pointer'), "data-testid": "stepper-increment", children: jsx(PlusIcon, { className: ICON_SIZE_CLASS[size] }) })] })] }));
+                        }, onChange: handleInputChange, className: buildClassName('text-center font-semibold text-gray-900 dark:text-white bg-transparent focus:outline-none [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none', INPUT_TEXT_CLASS[size]), "data-testid": "stepper-input", ...restProps }), suffix && (jsx("span", { className: "pr-1 text-gray-500 dark:text-gray-400 select-none text-xs shrink-0", children: suffix })), jsx("button", { type: "button", disabled: isAtMax, onClick: handleIncrement, tabIndex: -1, "aria-label": "Increase quantity", className: buildClassName('flex items-center justify-center rounded-r-lg text-gray-500 hover:text-gray-800 dark:text-gray-400 dark:hover:text-white transition-colors shrink-0', BUTTON_SIZE_CLASS[size], isAtMax
+                            ? 'opacity-30 hover:bg-transparent cursor-not-allowed'
+                            : 'cursor-pointer hover:bg-gray-100/80 dark:hover:bg-gray-600/60'), "data-testid": "stepper-increment", children: jsx(PlusIcon, { className: ICON_SIZE_CLASS[size] }) })] }), (showErrorMessage && error) || helperText ? (jsx("div", { className: "flex items-center justify-between gap-2 mt-0.5", children: showErrorMessage && error ? (jsx(TextContent, { xsmall: true, className: "text-red-500 dark:text-red-400 font-medium", children: error })) : helperText ? (jsx(TextContent, { xsmall: true, muted: true, children: helperText })) : null })) : null] }));
 });
 QuantityStepper.displayName = 'QuantityStepper';
 
@@ -2412,7 +4136,7 @@ const SegmentedControl = forwardRef((props, ref) => {
             onChange(enabledOptions[enabledOptions.length - 1].value);
         }
     };
-    return (jsx("div", { ref: ref, role: "tablist", "aria-orientation": "horizontal", className: buildClassName('inline-flex items-center border border-gray-200 bg-gray-100/80 dark:border-gray-700 dark:bg-gray-800/80', SIZE_CONTAINER_CLASS[size], fullWidth ? 'w-full flex' : '', disabled ? 'opacity-60 cursor-not-allowed' : '', className), "data-testid": "segmented-control", ...restProps, children: options.map((option, index) => {
+    return (jsx("div", { ref: ref, role: "tablist", "aria-orientation": "horizontal", className: buildClassName('inline-flex items-center border border-[var(--ui-border)] bg-gray-100/80 dark:bg-gray-800/80', SIZE_CONTAINER_CLASS[size], fullWidth ? 'w-full flex' : '', disabled ? 'opacity-60 cursor-not-allowed' : '', className), "data-testid": "segmented-control", ...restProps, children: options.map((option, index) => {
             const isSelected = value === option.value;
             const isOptionDisabled = disabled || option.disabled;
             return (jsxs("button", { type: "button", role: "tab", "aria-selected": isSelected, "aria-disabled": isOptionDisabled, tabIndex: isSelected && !isOptionDisabled ? 0 : -1, disabled: isOptionDisabled, title: option.title, onClick: () => {
@@ -2473,7 +4197,7 @@ const StickyActionBar = forwardRef((props, ref) => {
         : position === 'sticky'
             ? 'sticky bottom-0 z-30'
             : 'relative z-10';
-    return (jsxs(Fragment, { children: [jsx("div", { ref: ref, className: buildClassName(positionClass, 'border-t border-gray-200/80 bg-white/90 p-3.5 backdrop-blur-md shadow-lg dark:border-gray-800 dark:bg-gray-900/90 transition-all', className), "data-testid": "sticky-action-bar", ...restProps, children: jsxs("div", { className: buildClassName('mx-auto flex items-center justify-between gap-3', containerMaxWidth), children: [summaryContent && (jsx("div", { className: "flex items-center gap-2", children: drawerContent ? (jsxs("button", { type: "button", onClick: () => setIsDrawerOpen(true), className: "flex items-center gap-2 text-left transition-opacity hover:opacity-80 cursor-pointer focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-primary-ring)] rounded-lg p-1 -m-1", "aria-label": "Expand summary details", "data-testid": "summary-trigger", children: [jsx("div", { children: summaryContent }), jsx(ChevronUpIcon, { className: "size-4 text-[var(--ui-primary)] dark:text-blue-400 shrink-0" })] })) : (jsx("div", { children: summaryContent })) })), actionsContent && (jsx("div", { className: "flex items-center gap-2 shrink-0 ml-auto", "data-testid": "actions-stack", children: actionsContent }))] }) }), drawerContent && (jsx(Drawer, { isOpen: isDrawerOpen, onClose: () => setIsDrawerOpen(false), align: "bottom", size: "full", title: drawerTitle, showBackButton: true, contentClass: "px-4 pb-6 max-h-[calc(100svh-6rem)] overflow-y-auto", children: drawerContent }))] }));
+    return (jsxs(Fragment, { children: [jsx("div", { ref: ref, className: buildClassName(positionClass, 'border-t border-[var(--ui-border)] bg-white/90 p-3.5 backdrop-blur-md shadow-lg dark:bg-gray-900/90 transition-all', className), "data-testid": "sticky-action-bar", ...restProps, children: jsxs("div", { className: buildClassName('mx-auto flex items-center justify-between gap-3', containerMaxWidth), children: [summaryContent && (jsx("div", { className: "flex items-center gap-2", children: drawerContent ? (jsxs("button", { type: "button", onClick: () => setIsDrawerOpen(true), className: "flex items-center gap-2 text-left transition-opacity hover:opacity-80 cursor-pointer focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-primary-ring)] rounded-lg p-1 -m-1", "aria-label": "Expand summary details", "data-testid": "summary-trigger", children: [jsx("div", { children: summaryContent }), jsx(ChevronUpIcon, { className: "size-4 text-[var(--ui-primary)] dark:text-blue-400 shrink-0" })] })) : (jsx("div", { children: summaryContent })) })), actionsContent && (jsx("div", { className: "flex items-center gap-2 shrink-0 ml-auto", "data-testid": "actions-stack", children: actionsContent }))] }) }), drawerContent && (jsx(Drawer, { isOpen: isDrawerOpen, onClose: () => setIsDrawerOpen(false), align: "bottom", size: "full", title: drawerTitle, showBackButton: true, contentClass: "px-4 pb-6 max-h-[calc(100svh-6rem)] overflow-y-auto", children: drawerContent }))] }));
 });
 StickyActionBar.displayName = 'StickyActionBar';
 
@@ -2503,7 +4227,7 @@ function buildTabClass({ selected, variant, stretch, isVertical, tabClass, }) {
             variantClass = isVertical
                 ? buildClassName('px-3 py-2 w-full text-left border-l-2', selected
                     ? 'border-[var(--ui-primary)] text-gray-900 dark:text-white'
-                    : 'border-transparent text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white hover:border-gray-300 dark:hover:border-gray-600')
+                    : 'border-transparent text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white hover:border-[var(--ui-border)]')
                 : buildClassName('px-3 py-1.5 relative text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white', selected &&
                     'text-gray-900 dark:text-white after:absolute after:z-10 after:left-0 after:right-0 after:-bottom-1 after:h-0.5 after:bg-[var(--ui-primary)]');
             break;
@@ -2521,6 +4245,89 @@ function buildTabClass({ selected, variant, stretch, isVertical, tabClass, }) {
     return buildClassName(base, variantClass, tabClass);
 }
 
+function SwipeableTabs({ items, activeId: externalActiveId, defaultActiveId, onChange, swipeable = true, threshold = 50, headerVariant = 'default', containerClass = '', headerClass = '', contentClass = '', }) {
+    var _a;
+    const [internalActiveId, setInternalActiveId] = useState(defaultActiveId || ((_a = items[0]) === null || _a === void 0 ? void 0 : _a.id) || '');
+    const activeId = externalActiveId !== undefined ? externalActiveId : internalActiveId;
+    const activeIndex = Math.max(0, items.findIndex((item) => item.id === activeId));
+    const touchStartX = useRef(0);
+    const touchStartY = useRef(0);
+    const touchDeltaX = useRef(0);
+    const isSwipingHorizontal = useRef(null);
+    const handleTabChange = (item) => {
+        if (item.disabled)
+            return;
+        setInternalActiveId(item.id);
+        onChange === null || onChange === void 0 ? void 0 : onChange(item.id);
+    };
+    const handleTouchStart = (e) => {
+        if (!swipeable)
+            return;
+        touchStartX.current = e.touches[0].clientX;
+        touchStartY.current = e.touches[0].clientY;
+        touchDeltaX.current = 0;
+        isSwipingHorizontal.current = null;
+    };
+    const handleTouchMove = (e) => {
+        if (!swipeable)
+            return;
+        const currentX = e.touches[0].clientX;
+        const currentY = e.touches[0].clientY;
+        const deltaX = currentX - touchStartX.current;
+        const deltaY = currentY - touchStartY.current;
+        if (isSwipingHorizontal.current === null) {
+            if (Math.abs(deltaX) > 8 || Math.abs(deltaY) > 8) {
+                isSwipingHorizontal.current = Math.abs(deltaX) > Math.abs(deltaY);
+            }
+        }
+        if (isSwipingHorizontal.current) {
+            touchDeltaX.current = deltaX;
+        }
+    };
+    const handleTouchEnd = () => {
+        if (!swipeable || !isSwipingHorizontal.current)
+            return;
+        const deltaX = touchDeltaX.current;
+        if (Math.abs(deltaX) >= threshold) {
+            if (deltaX < 0 && activeIndex < items.length - 1) {
+                // Swiped Left -> Go to Next Tab
+                const nextItem = items[activeIndex + 1];
+                if (nextItem && !nextItem.disabled) {
+                    handleTabChange(nextItem);
+                }
+            }
+            else if (deltaX > 0 && activeIndex > 0) {
+                // Swiped Right -> Go to Previous Tab
+                const prevItem = items[activeIndex - 1];
+                if (prevItem && !prevItem.disabled) {
+                    handleTabChange(prevItem);
+                }
+            }
+        }
+        touchDeltaX.current = 0;
+        isSwipingHorizontal.current = null;
+    };
+    return (jsxs("div", { className: buildClassName('w-full flex flex-col', containerClass), "data-testid": "swipeable-tabs", children: [jsx("div", { className: buildClassName('w-full flex items-center gap-1 border-b border-[var(--ui-border)] overflow-x-auto no-scrollbar select-none', headerVariant === 'segmented' &&
+                    'p-1 bg-gray-100 dark:bg-gray-800/80 rounded-2xl border-none gap-0', headerClass), "data-testid": "swipeable-tabs-header", children: items.map((item) => {
+                    const isActive = item.id === activeId;
+                    if (headerVariant === 'segmented') {
+                        return (jsxs("button", { type: "button", disabled: item.disabled, onClick: () => handleTabChange(item), className: buildClassName('flex-1 flex items-center justify-center gap-1.5 py-1.5 px-3 rounded-xl text-xs font-semibold transition-all duration-150 cursor-pointer', item.disabled && 'opacity-40 cursor-not-allowed pointer-events-none', isActive
+                                ? 'bg-white dark:bg-gray-900 text-gray-900 dark:text-white shadow-xs'
+                                : 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white'), "data-testid": `swipeable-tab-btn-${item.id}`, children: [item.icon && jsx("span", { className: "text-sm", children: item.icon }), jsx("span", { children: item.label }), item.badge !== undefined && (jsx("span", { className: "px-1.5 py-0.5 text-[10px] rounded-full bg-blue-100 dark:bg-blue-950 text-blue-600 dark:text-blue-400 font-bold", children: item.badge }))] }, item.id));
+                    }
+                    if (headerVariant === 'pills') {
+                        return (jsxs("button", { type: "button", disabled: item.disabled, onClick: () => handleTabChange(item), className: buildClassName('flex items-center justify-center gap-1.5 py-1.5 px-3.5 rounded-full text-xs font-semibold transition-all duration-150 cursor-pointer whitespace-nowrap', item.disabled && 'opacity-40 cursor-not-allowed pointer-events-none', isActive
+                                ? 'bg-blue-600 text-white shadow-xs'
+                                : 'bg-gray-100 dark:bg-gray-800 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700'), "data-testid": `swipeable-tab-btn-${item.id}`, children: [item.icon && jsx("span", { className: "text-sm", children: item.icon }), jsx("span", { children: item.label }), item.badge !== undefined && (jsx("span", { className: "px-1.5 py-0.5 text-[10px] rounded-full bg-white/20 text-current font-bold", children: item.badge }))] }, item.id));
+                    }
+                    // Default Underline Tab Header
+                    return (jsxs("button", { type: "button", disabled: item.disabled, onClick: () => handleTabChange(item), className: buildClassName('flex items-center justify-center gap-1.5 py-2.5 px-4 text-xs font-semibold transition-all duration-150 cursor-pointer relative whitespace-nowrap border-b-2 -mb-px', item.disabled && 'opacity-40 cursor-not-allowed pointer-events-none', isActive
+                            ? 'border-blue-600 dark:border-blue-400 text-blue-600 dark:text-blue-400'
+                            : 'border-transparent text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white'), "data-testid": `swipeable-tab-btn-${item.id}`, children: [item.icon && jsx("span", { className: "text-sm", children: item.icon }), jsx("span", { children: item.label }), item.badge !== undefined && (jsx("span", { className: "px-1.5 py-0.5 text-[10px] rounded-full bg-blue-100 dark:bg-blue-950 text-blue-600 dark:text-blue-400 font-bold", children: item.badge }))] }, item.id));
+                }) }), jsx("div", { className: buildClassName('w-full overflow-hidden relative touch-pan-y', contentClass), onTouchStart: handleTouchStart, onTouchMove: handleTouchMove, onTouchEnd: handleTouchEnd, "data-testid": "swipeable-tabs-viewport", children: jsx("div", { className: "flex w-full transition-transform duration-300 ease-out", style: { transform: `translateX(-${activeIndex * 100}%)` }, "data-testid": "swipeable-tabs-track", children: items.map((item) => (jsx("div", { className: "w-full shrink-0 min-w-full", "data-testid": `swipeable-tab-panel-${item.id}`, children: item.content }, item.id))) }) })] }));
+}
+SwipeableTabs.displayName = 'SwipeableTabs';
+
 const sizeClasses = {
     sm: {
         textarea: 'px-2.5 py-1.5 text-xs leading-5 min-h-[60px]',
@@ -2568,7 +4375,7 @@ const Textarea = forwardRef((props, ref) => {
     const currentSize = sizeClasses[size] || sizeClasses.md;
     return (jsxs("div", { className: buildClassName('group', hasError && 'has-error', containerClass), children: [label && (jsxs("div", { className: buildClassName('flex items-center justify-between mb-1.5', labelWrapperClass), children: [jsx(Label, { className: labelClass, htmlFor: id, children: label }), labelHint && jsx(TextContent, { xsmall: true, children: labelHint })] })), jsxs("div", { className: "relative", children: [hasLeftGroup && (jsx("span", { className: "absolute top-2.5 left-3 flex items-center justify-center text-gray-400 dark:text-gray-500", children: leftGroup })), jsx("textarea", { ref: innerRef, autoComplete: "off", ...inputProps, value: value, defaultValue: defaultValue, onChange: handleTextareaChange, maxLength: maxLength, name: name, id: id, className: buildClassName('transition-all duration-150', 'block w-full rounded-lg bg-white', currentSize.textarea, autoSize ? 'resize-none overflow-hidden' : resizeClasses[resize], 'text-gray-900 outline outline-1 -outline-offset-1', hasError
                             ? '!outline-red-500 !ring-1 !ring-red-500/50 dark:!outline-red-500'
-                            : 'outline-gray-300 dark:outline-gray-600', 'focus:outline-[var(--ui-focus-ring)] focus:outline-2 focus:-outline-offset-2', 'dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 placeholder:text-gray-400 dark:text-white', 'disabled:pointer-events-none disabled:bg-gray-100 disabled:outline-gray-200', 'dark:disabled:bg-gray-800 dark:disabled:text-gray-600 dark:disabled:placeholder-gray-600 dark:disabled:outline-gray-700', hasRightGroup ? 'pe-10' : '', hasLeftGroup ? 'ps-10' : '', className) }), hasRightGroup && (jsx("span", { className: "absolute end-3 top-2.5 flex items-center justify-center text-gray-400 dark:text-gray-500", children: rightGroup }))] }), (showErrorMessage && error) || helperText || showCount ? (jsxs("div", { className: "mt-1.5 flex items-center justify-between gap-2 text-xs", children: [jsx("div", { className: "min-w-0 flex-1", children: showErrorMessage && error ? (jsx(TextContent, { error: true, small: true, children: error })) : helperText ? (jsx(TextContent, { muted: true, small: true, children: helperText })) : null }), showCount && (jsxs("span", { className: buildClassName('text-[11px] font-medium shrink-0 ml-auto', maxLength && charLength >= maxLength
+                            : 'outline-[var(--ui-border)]', 'focus:outline-[var(--ui-focus-ring)] focus:outline-2 focus:-outline-offset-2', 'dark:bg-gray-700 dark:placeholder-gray-400 placeholder:text-gray-400 dark:text-white', 'disabled:pointer-events-none disabled:bg-gray-100 disabled:outline-[var(--ui-border-muted)]', 'dark:disabled:bg-gray-800 dark:disabled:text-gray-600 dark:disabled:placeholder-gray-600 dark:disabled:outline-[var(--ui-border-muted)]', hasRightGroup ? 'pe-10' : '', hasLeftGroup ? 'ps-10' : '', className) }), hasRightGroup && (jsx("span", { className: "absolute end-3 top-2.5 flex items-center justify-center text-gray-400 dark:text-gray-500", children: rightGroup }))] }), (showErrorMessage && error) || helperText || showCount ? (jsxs("div", { className: "mt-1.5 flex items-center justify-between gap-2 text-xs", children: [jsx("div", { className: "min-w-0 flex-1", children: showErrorMessage && error ? (jsx(TextContent, { error: true, small: true, children: error })) : helperText ? (jsx(TextContent, { muted: true, small: true, children: helperText })) : null }), showCount && (jsxs("span", { className: buildClassName('text-[11px] font-medium shrink-0 ml-auto', maxLength && charLength >= maxLength
                             ? 'text-red-500 font-semibold'
                             : 'text-gray-400 dark:text-gray-500'), children: [charLength, maxLength ? ` / ${maxLength}` : ''] }))] })) : null] }));
 });
@@ -2603,10 +4410,10 @@ const progressBarColorMap = {
 };
 const variantStyleMap = {
     accent: {
-        success: 'bg-white dark:bg-gray-900 border-l-4 border-[var(--ui-success)] text-gray-900 dark:text-gray-100 shadow-lg border-y border-r border-gray-200/80 dark:border-gray-800/80',
-        error: 'bg-white dark:bg-gray-900 border-l-4 border-[var(--ui-danger)] text-gray-900 dark:text-gray-100 shadow-lg border-y border-r border-gray-200/80 dark:border-gray-800/80',
-        info: 'bg-white dark:bg-gray-900 border-l-4 border-[var(--ui-info)] text-gray-900 dark:text-gray-100 shadow-lg border-y border-r border-gray-200/80 dark:border-gray-800/80',
-        warning: 'bg-white dark:bg-gray-900 border-l-4 border-[var(--ui-warning)] text-gray-900 dark:text-gray-100 shadow-lg border-y border-r border-gray-200/80 dark:border-gray-800/80',
+        success: 'bg-white dark:bg-gray-900 border-l-4 border-[var(--ui-success)] text-gray-900 dark:text-gray-100 shadow-lg border-y border-r border-[var(--ui-border)]',
+        error: 'bg-white dark:bg-gray-900 border-l-4 border-[var(--ui-danger)] text-gray-900 dark:text-gray-100 shadow-lg border-y border-r border-[var(--ui-border)]',
+        info: 'bg-white dark:bg-gray-900 border-l-4 border-[var(--ui-info)] text-gray-900 dark:text-gray-100 shadow-lg border-y border-r border-[var(--ui-border)]',
+        warning: 'bg-white dark:bg-gray-900 border-l-4 border-[var(--ui-warning)] text-gray-900 dark:text-gray-100 shadow-lg border-y border-r border-[var(--ui-border)]',
     },
     filled: {
         success: 'bg-[var(--ui-success)] text-white shadow-lg',
@@ -2946,7 +4753,10 @@ const useIsMobile = () => {
     useEffect(() => {
         const detect = () => {
             const width = window.innerWidth;
-            const isTouch = navigator.maxTouchPoints > 1 || window.matchMedia('(pointer: coarse)').matches;
+            const isTouch = (typeof navigator !== 'undefined' && navigator.maxTouchPoints > 1) ||
+                (typeof window !== 'undefined' &&
+                    typeof window.matchMedia === 'function' &&
+                    window.matchMedia('(pointer: coarse)').matches);
             setIsMobile(width < 600 && isTouch);
         };
         detect();
@@ -2977,5 +4787,5 @@ const useIsTabletOrMobile = () => {
     return isMobile || isTablet;
 };
 
-export { Accordion, Alert, Badge, Banner, BodyText, Breadcrumb, Button, ButtonGroup, Card, CardContent, CardDescription, CardFooter, CardHeader, CardMedia, CardTitle, Checkbox, CheckboxGroup, DOTS, DataTable, DetailedInformation, Dot, Drawer, Dropdown, EmptyState, EmptyTableRow, HeadingText, Input, Label, Loader, PASSWORD_PLACEHOLDER, PASSWORD_TYPE, Pagination, PasswordInput, QuantityStepper, Radio, RadioGroup, RadioSwitch, RangeInput, RangeSlider, SegmentedControl, SelectBox, Skeleton, SortIconMap, StatusPill, StickyActionBar, Table, TableBody, TableCell, TableFoot, TableHead, TableHeaderCell, TableRow, Tabs, TextContent, Textarea, Toast, ToastProvider, VirtualizedDataTable, buildClassName, buildInputClass, evaluatePasswordStrength, get, getSortIcon, isArray, isEmpty, nextSortDirection, updateSortQuery, useDebounce, useDebounceFn, useIsMobile, useIsTablet, useIsTabletOrMobile, usePagination, useRowSelection, useToast };
+export { Accordion, ActionSheet, Alert, Badge, Banner, BodyText, BottomNavigation, Breadcrumb, Button, ButtonGroup, Card, CardContent, CardDescription, CardFooter, CardHeader, CardMedia, CardTitle, Checkbox, CheckboxGroup, DOTS, DataList, DataTable, DetailedInformation, Dot, Drawer, Dropdown, EmptyState, EmptyTableRow, Flex, FlexItem, FloatingActionButton, Grid, GridCol, HeadingText, Input, Label, Loader, MobileHeader, MobilePicker, MobileStepper, PASSWORD_PLACEHOLDER, PASSWORD_TYPE, Pagination, PasswordInput, PinInput, PullToRefresh, QuantityStepper, Radio, RadioGroup, RadioSwitch, RangeInput, RangeSlider, SegmentedControl, SelectBox, Skeleton, SortIconMap, StatusPill, StickyActionBar, SwipeableRow, SwipeableTabs, Table, TableBody, TableCell, TableFoot, TableHead, TableHeaderCell, TableRow, Tabs, TextContent, Textarea, Toast, ToastProvider, VirtualizedDataTable, WheelPicker, buildClassName, buildInputClass, evaluatePasswordStrength, get, getSortIcon, isArray, isEmpty, nextSortDirection, updateSortQuery, useDebounce, useDebounceFn, useIsMobile, useIsTablet, useIsTabletOrMobile, usePagination, useRowSelection, useToast };
 //# sourceMappingURL=react-tailwind.es.js.map