@teja-app/ui 0.0.4 → 0.0.6

package/dist/index.js

@@ -5,7 +5,7 @@ import * as React from "react";
 import React__default, { forwardRef, useState, useRef, useCallback, useEffect, useMemo, useLayoutEffect, useContext, createContext, Fragment as Fragment$1, isValidElement, cloneElement, createElement, useId as useId$1, useSyncExternalStore, useReducer, createRef } from "react";
 import * as ReactDOM from "react-dom";
 import { flushSync, createPortal } from "react-dom";
-const variantStyles$4 = {
+const variantStyles$5 = {
   primary: [
     // Light mode
     "bg-primary-800 text-white border border-gold-500/40",
@@ -45,7 +45,7 @@ const variantStyles$4 = {
     "dark:focus:ring-error/30"
   ].join(" ")
 };
-const sizeStyles$b = {
+const sizeStyles$d = {
   sm: "px-3 py-1.5 text-sm h-8",
   md: "px-4 py-2 text-base h-10",
   lg: "px-6 py-3 text-lg h-12"
@@ -75,9 +75,9 @@ const Button = forwardRef(
           "dark:focus:ring-offset-primary-900",
           "disabled:opacity-50 disabled:cursor-not-allowed",
           // Variant styles
-          variantStyles$4[variant],
+          variantStyles$5[variant],
           // Size styles
-          sizeStyles$b[size2],
+          sizeStyles$d[size2],
           // Width styles
           fullWidth && "w-full",
           // Custom className (allows override)
@@ -128,7 +128,7 @@ const Button = forwardRef(
   }
 );
 Button.displayName = "Button";
-const sizeStyles$a = {
+const sizeStyles$c = {
   xs: "h-3 w-3",
   // 12px
   sm: "h-4 w-4",
@@ -150,6 +150,7 @@ const Spinner = forwardRef(
     color = "current",
     label = "Loading",
     className,
+    testId,
     ...props
   }, ref) => {
     return /* @__PURE__ */ jsxs(
@@ -158,7 +159,7 @@ const Spinner = forwardRef(
         ref,
         className: cn(
           "animate-spin",
-          sizeStyles$a[size2],
+          sizeStyles$c[size2],
           colorStyles[color],
           className
         ),
@@ -167,6 +168,7 @@ const Spinner = forwardRef(
         xmlns: "http://www.w3.org/2000/svg",
         role: "status",
         "aria-label": label,
+        "data-testid": testId,
         ...props,
         children: [
           /* @__PURE__ */ jsx(
@@ -207,18 +209,20 @@ const Input = forwardRef(
     required,
     disabled,
     isLoading = false,
+    testId,
     ...props
   }, ref) => {
     const inputId = id || label?.toLowerCase().replace(/\s+/g, "-");
     const hasError = !!error2;
     const errorId = hasError ? `${inputId}-error` : void 0;
     const showRightIcon = rightIcon || isLoading;
-    return /* @__PURE__ */ jsxs("div", { className: cn(fullWidth ? "w-full" : "w-auto"), children: [
+    return /* @__PURE__ */ jsxs("div", { className: cn(fullWidth ? "w-full" : "w-auto"), "data-testid": testId, children: [
       label && /* @__PURE__ */ jsxs(
         "label",
         {
           htmlFor: inputId,
           className: "mb-2 block text-sm font-medium text-primary-700 dark:text-white",
+          "data-testid": testId ? `${testId}-label` : void 0,
           children: [
             label,
             required && /* @__PURE__ */ jsx("span", { className: "ml-1 text-error", children: "*" })
@@ -226,7 +230,14 @@ const Input = forwardRef(
         }
       ),
       /* @__PURE__ */ jsxs("div", { className: "relative", children: [
-        leftIcon && /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3 text-primary-400 dark:text-primary-500", children: leftIcon }),
+        leftIcon && /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3 text-primary-400 dark:text-primary-500",
+            "data-testid": testId ? `${testId}-left-icon` : void 0,
+            children: leftIcon
+          }
+        ),
         /* @__PURE__ */ jsx(
           "input",
           {
@@ -237,6 +248,7 @@ const Input = forwardRef(
             "aria-label": !label ? props.placeholder || "Input" : void 0,
             "aria-invalid": hasError ? "true" : void 0,
             "aria-describedby": errorId,
+            "data-testid": testId ? `${testId}-input` : void 0,
             className: cn(
               // Base styles - Light mode
               "block w-full rounded-md border bg-white px-4 py-2.5 text-sm text-primary-900",
@@ -259,13 +271,21 @@ const Input = forwardRef(
             ...props
           }
         ),
-        showRightIcon && /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3 text-primary-400 dark:text-primary-500", children: isLoading ? /* @__PURE__ */ jsx(Spinner, { size: "sm", color: "primary" }) : rightIcon })
+        showRightIcon && /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3 text-primary-400 dark:text-primary-500",
+            "data-testid": testId ? `${testId}-right-icon` : void 0,
+            children: isLoading ? /* @__PURE__ */ jsx(Spinner, { size: "sm", color: "primary" }) : rightIcon
+          }
+        )
       ] }),
       (error2 || helperText) && /* @__PURE__ */ jsx(
         "p",
         {
           id: errorId,
           role: hasError ? "alert" : void 0,
+          "data-testid": testId ? hasError ? `${testId}-error` : `${testId}-helper-text` : void 0,
           className: cn(
             "mt-1.5 text-sm",
             hasError ? "text-error" : "text-primary-500 dark:text-primary-400"
@@ -345,7 +365,7 @@ function getPasswordStrength(password) {
   }
 }
 const PasswordInput = forwardRef(
-  ({ showStrengthIndicator = false, value, className, ...props }, ref) => {
+  ({ showStrengthIndicator = false, value, className, testId, ...props }, ref) => {
     const [showPassword, setShowPassword] = useState(false);
     const togglePasswordVisibility = () => {
       setShowPassword((prev) => !prev);
@@ -364,10 +384,11 @@ const PasswordInput = forwardRef(
           "dark:text-primary-500 dark:hover:text-primary-300"
         ),
         "aria-label": showPassword ? "Hide password" : "Show password",
+        "data-testid": testId ? `${testId}-toggle-button` : void 0,
         children: showPassword ? /* @__PURE__ */ jsx(EyeSlashIcon, {}) : /* @__PURE__ */ jsx(EyeIcon, {})
       }
     );
-    return /* @__PURE__ */ jsxs("div", { className: cn("w-full", className), children: [
+    return /* @__PURE__ */ jsxs("div", { className: cn("w-full", className), "data-testid": testId, children: [
       /* @__PURE__ */ jsx(
         Input,
         {
@@ -375,7 +396,8 @@ const PasswordInput = forwardRef(
           ref,
           type: showPassword ? "text" : "password",
           value,
-          rightIcon: toggleButton
+          rightIcon: toggleButton,
+          testId: testId ? `${testId}-input` : void 0
         }
       ),
       showStrengthIndicator && passwordValue && strength && strength.label && /* @__PURE__ */ jsxs("div", { className: "mt-2", children: [
@@ -424,6 +446,7 @@ const Textarea = forwardRef(
     defaultValue,
     onChange,
     isLoading = false,
+    testId,
     ...props
   }, ref) => {
     const textareaId = id || label?.toLowerCase().replace(/\s+/g, "-");
@@ -464,12 +487,13 @@ const Textarea = forwardRef(
         adjustHeight();
       }
     }, [autoResize, adjustHeight, value, defaultValue]);
-    return /* @__PURE__ */ jsxs("div", { className: cn(fullWidth ? "w-full" : "w-auto"), children: [
+    return /* @__PURE__ */ jsxs("div", { className: cn(fullWidth ? "w-full" : "w-auto"), "data-testid": testId, children: [
       label && /* @__PURE__ */ jsxs(
         "label",
         {
           htmlFor: textareaId,
           className: "mb-2 block text-sm font-medium text-primary-700 dark:text-white",
+          "data-testid": testId ? `${testId}-label` : void 0,
           children: [
             label,
             required && /* @__PURE__ */ jsx("span", { className: "ml-1 text-error", children: "*" })
@@ -492,6 +516,7 @@ const Textarea = forwardRef(
             "aria-invalid": hasError ? "true" : void 0,
             "aria-describedby": errorId,
             onChange: handleChange,
+            "data-testid": testId ? `${testId}-textarea` : void 0,
             className: cn(
               // Base styles - Light mode
               "block w-full rounded-md border bg-white px-4 py-2.5 text-sm text-primary-900",
@@ -522,6 +547,7 @@ const Textarea = forwardRef(
           {
             id: errorId,
             role: hasError ? "alert" : void 0,
+            "data-testid": testId ? hasError ? `${testId}-error` : `${testId}-helper-text` : void 0,
             className: cn(
               "text-sm",
               hasError ? "text-error" : "text-primary-500 dark:text-primary-400"
@@ -7223,18 +7249,20 @@ function Select({
   className,
   isLoading = false,
   loadingText = "Loading...",
-  placement = "bottom"
+  placement = "bottom",
+  testId
 }) {
   const selectedOption = options.find((opt) => opt.value === value);
   const hasError = !!error2;
   const isDisabled = disabled || isLoading;
   const labelId = useId$1();
-  return /* @__PURE__ */ jsxs("div", { className: cn(fullWidth ? "w-full" : "w-auto", className), children: [
+  return /* @__PURE__ */ jsxs("div", { className: cn(fullWidth ? "w-full" : "w-auto", className), "data-testid": testId, children: [
     label && /* @__PURE__ */ jsxs(
       "label",
       {
         id: labelId,
         className: "mb-2 block text-sm font-medium text-primary-700 dark:text-white",
+        "data-testid": testId ? `${testId}-label` : void 0,
         children: [
           label,
           required && /* @__PURE__ */ jsx("span", { className: "ml-1 text-error", children: "*" })
@@ -7247,6 +7275,7 @@ function Select({
         {
           "aria-label": !label ? placeholder : void 0,
           "aria-labelledby": label ? labelId : void 0,
+          "data-testid": testId ? `${testId}-button` : void 0,
           className: cn(
             // Base styles - Light mode
             "relative w-full rounded-md border bg-white px-4 py-2.5 text-left text-sm",
@@ -7304,11 +7333,13 @@ function Select({
                 "absolute z-dropdown max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-sm shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none dark:bg-primary-800 dark:ring-primary-700",
                 placement === "top" ? "bottom-full mb-1" : "top-full mt-1"
               ),
-              children: options.map((option) => /* @__PURE__ */ jsx(
+              "data-testid": testId ? `${testId}-options` : void 0,
+              children: options.map((option, index2) => /* @__PURE__ */ jsx(
                 It,
                 {
                   disabled: option.disabled,
                   value: option.value,
+                  "data-testid": testId ? `${testId}-option-${index2}` : void 0,
                   className: ({ active, selected }) => cn(
                     "relative cursor-pointer select-none py-2.5 pl-10 pr-4",
                     // Light mode
@@ -7350,6 +7381,7 @@ function Select({
       "p",
       {
         role: hasError ? "alert" : void 0,
+        "data-testid": testId ? hasError ? `${testId}-error` : `${testId}-helper-text` : void 0,
         className: cn(
           "mt-1.5 text-sm",
           hasError ? "text-error" : "text-primary-500 dark:text-primary-400"
@@ -7379,7 +7411,7 @@ const CloseIcon$2 = () => /* @__PURE__ */ jsx(
     )
   }
 );
-const sizeStyles$9 = {
+const sizeStyles$b = {
   sm: "max-w-[400px]",
   md: "max-w-[560px]",
   lg: "max-w-[720px]"
@@ -7395,7 +7427,8 @@ function Modal({
   footer,
   closeOnOverlay = true,
   className,
-  isLoading = false
+  isLoading = false,
+  testId
 }) {
   const handleClose = closeOnOverlay ? onClose : () => {
   };
@@ -7410,7 +7443,7 @@ function Modal({
         leave: "ease-in duration-100",
         leaveFrom: "opacity-100",
         leaveTo: "opacity-0",
-        children: /* @__PURE__ */ jsx("div", { className: "fixed inset-0 bg-black/40 backdrop-blur-sm" })
+        children: /* @__PURE__ */ jsx("div", { className: "fixed inset-0 bg-black/40 backdrop-blur-sm", "data-testid": testId ? `${testId}-overlay` : void 0 })
       }
     ),
     /* @__PURE__ */ jsx("div", { className: "fixed inset-0 flex items-center justify-center p-4", children: /* @__PURE__ */ jsx(
@@ -7432,9 +7465,10 @@ function Modal({
               "bg-white border border-primary-200",
               // Dark mode
               "dark:bg-primary-800 dark:border-primary-700",
-              sizeStyles$9[size2],
+              sizeStyles$b[size2],
               className
             ),
+            "data-testid": testId,
             children: [
               (title || showCloseButton) && /* @__PURE__ */ jsxs(
                 "div",
@@ -7443,6 +7477,7 @@ function Modal({
                     "flex items-start justify-between px-6 py-4",
                     (children || footer) && "border-b border-primary-200 dark:border-primary-700"
                   ),
+                  "data-testid": testId ? `${testId}-header` : void 0,
                   children: [
                     /* @__PURE__ */ jsxs("div", { className: "flex-1", children: [
                       title && /* @__PURE__ */ jsx(Qe, { className: "text-lg font-semibold text-primary-900 dark:text-white", children: title }),
@@ -7461,13 +7496,14 @@ function Modal({
                           "focus:outline-none focus:ring-2 focus:ring-gold-500/20",
                           "transition-colors"
                         ),
+                        "data-testid": testId ? `${testId}-close-button` : void 0,
                         children: /* @__PURE__ */ jsx(CloseIcon$2, {})
                       }
                     )
                   ]
                 }
               ),
-              children && /* @__PURE__ */ jsxs("div", { className: "relative px-6 py-4 text-primary-700 dark:text-primary-300", children: [
+              children && /* @__PURE__ */ jsxs("div", { className: "relative px-6 py-4 text-primary-700 dark:text-primary-300", "data-testid": testId ? `${testId}-body` : void 0, children: [
                 children,
                 isLoading && /* @__PURE__ */ jsx("div", { className: "absolute inset-0 flex items-center justify-center bg-white/60 dark:bg-primary-800/60", children: /* @__PURE__ */ jsx(Spinner, { size: "md", color: "primary" }) })
               ] }),
@@ -7480,6 +7516,7 @@ function Modal({
                     "bg-primary-50 dark:bg-primary-900/50",
                     "rounded-b-lg"
                   ),
+                  "data-testid": testId ? `${testId}-footer` : void 0,
                   children: footer
                 }
               )
@@ -7510,7 +7547,7 @@ const CloseIcon$1 = () => /* @__PURE__ */ jsx(
     )
   }
 );
-const sizeStyles$8 = {
+const sizeStyles$a = {
   sm: "max-w-[400px]",
   md: "max-w-[560px]",
   lg: "max-w-[720px]"
@@ -7524,7 +7561,8 @@ function Drawer({
   showCloseButton = true,
   footer,
   className,
-  isLoading = false
+  isLoading = false,
+  testId
 }) {
   return /* @__PURE__ */ jsx(Ke$2, { show: isOpen, as: Fragment$1, children: /* @__PURE__ */ jsxs(ht$1, { className: "relative z-50", onClose, children: [
     /* @__PURE__ */ jsx(
@@ -7537,7 +7575,7 @@ function Drawer({
         leave: "ease-in duration-200",
         leaveFrom: "opacity-100",
         leaveTo: "opacity-0",
-        children: /* @__PURE__ */ jsx("div", { className: "fixed inset-0 bg-black/40 backdrop-blur-sm" })
+        children: /* @__PURE__ */ jsx("div", { className: "fixed inset-0 bg-black/40 backdrop-blur-sm", "data-testid": testId ? `${testId}-overlay` : void 0 })
       }
     ),
     /* @__PURE__ */ jsx("div", { className: "fixed inset-0 flex justify-end", children: /* @__PURE__ */ jsx(
@@ -7559,9 +7597,10 @@ function Drawer({
               "bg-white border-l border-primary-200",
               // Dark mode
               "dark:bg-primary-800 dark:border-primary-700",
-              sizeStyles$8[size2],
+              sizeStyles$a[size2],
               className
             ),
+            "data-testid": testId,
             children: [
               (title || showCloseButton) && /* @__PURE__ */ jsxs(
                 "div",
@@ -7585,13 +7624,14 @@ function Drawer({
                           "focus:outline-none focus:ring-2 focus:ring-gold-500/20",
                           "transition-colors"
                         ),
+                        "data-testid": testId ? `${testId}-close-button` : void 0,
                         children: /* @__PURE__ */ jsx(CloseIcon$1, {})
                       }
                     )
                   ]
                 }
               ),
-              /* @__PURE__ */ jsxs("div", { className: "relative flex-1 overflow-y-auto px-6 py-4 text-primary-700 dark:text-primary-300", children: [
+              /* @__PURE__ */ jsxs("div", { className: "relative flex-1 overflow-y-auto px-6 py-4 text-primary-700 dark:text-primary-300", "data-testid": testId ? `${testId}-content` : void 0, children: [
                 children,
                 isLoading && /* @__PURE__ */ jsx("div", { className: "absolute inset-0 flex items-center justify-center bg-white/60 dark:bg-primary-800/60", children: /* @__PURE__ */ jsx(Spinner, { size: "md", color: "primary" }) })
               ] }),
@@ -7629,7 +7669,8 @@ function ConfirmDialog({
   variant = "neutral",
   cancelText = "Cancel",
   confirmText = "Confirm",
-  loading = false
+  loading = false,
+  testId
 }) {
   const buttonVariant = variantToButton[variant];
   const handleConfirm = () => {
@@ -7645,6 +7686,7 @@ function ConfirmDialog({
       size: "sm",
       showCloseButton: false,
       closeOnOverlay: !loading,
+      testId,
       footer: /* @__PURE__ */ jsxs("div", { className: "flex justify-end gap-3", children: [
         /* @__PURE__ */ jsx(
           Button,
@@ -7652,6 +7694,7 @@ function ConfirmDialog({
             variant: "secondary",
             onClick: onClose,
             disabled: loading,
+            "data-testid": testId ? `${testId}-cancel-button` : void 0,
             children: cancelText
           }
         ),
@@ -7661,6 +7704,7 @@ function ConfirmDialog({
             variant: buttonVariant,
             onClick: handleConfirm,
             disabled: loading,
+            "data-testid": testId ? `${testId}-confirm-button` : void 0,
             children: loading ? "Loading..." : confirmText
           }
         )
@@ -7675,7 +7719,7 @@ const paddingStyles = {
   md: "p-6",
   lg: "p-8"
 };
-const variantStyles$3 = {
+const variantStyles$4 = {
   default: [
     "shadow-sm border border-primary-200",
     "dark:border-primary-700"
@@ -7700,6 +7744,7 @@ const Card = forwardRef(
     hoverable = false,
     children,
     className,
+    testId,
     ...props
   }, ref) => {
     return /* @__PURE__ */ jsx(
@@ -7716,7 +7761,7 @@ const Card = forwardRef(
           // Padding
           paddingStyles[padding],
           // Variant
-          variantStyles$3[variant],
+          variantStyles$4[variant],
           // Hover effect
           hoverable && [
             "cursor-pointer",
@@ -7725,6 +7770,7 @@ const Card = forwardRef(
           ],
           className
         ),
+        "data-testid": testId,
         ...props,
         children
       }
@@ -7732,7 +7778,7 @@ const Card = forwardRef(
   }
 );
 Card.displayName = "Card";
-const sizeStyles$7 = {
+const sizeStyles$9 = {
   sm: "h-4 w-4",
   md: "h-5 w-5",
   lg: "h-6 w-6"
@@ -7754,6 +7800,7 @@ const Checkbox = forwardRef(
     indeterminate = false,
     className,
     id,
+    testId,
     ...props
   }, forwardedRef) => {
     const checkboxId = id || label?.toLowerCase().replace(/\s+/g, "-");
@@ -7780,7 +7827,7 @@ const Checkbox = forwardRef(
     const handleChange = (e3) => {
       onChange?.(e3.target.checked);
     };
-    return /* @__PURE__ */ jsxs("div", { className, children: [
+    return /* @__PURE__ */ jsxs("div", { className, "data-testid": testId, children: [
       /* @__PURE__ */ jsxs(
         "label",
         {
@@ -7789,6 +7836,7 @@ const Checkbox = forwardRef(
             "inline-flex items-center gap-2",
             disabled ? "cursor-not-allowed opacity-50" : "cursor-pointer"
           ),
+          "data-testid": testId ? `${testId}-label` : void 0,
           children: [
             /* @__PURE__ */ jsx(
               "input",
@@ -7801,8 +7849,9 @@ const Checkbox = forwardRef(
                 "aria-invalid": hasError ? "true" : void 0,
                 "aria-describedby": errorId,
                 onChange: handleChange,
+                "data-testid": testId ? `${testId}-checkbox` : void 0,
                 className: cn(
-                  sizeStyles$7[size2],
+                  sizeStyles$9[size2],
                   "rounded border transition-colors",
                   "focus:ring-2 focus:ring-offset-0",
                   "disabled:cursor-not-allowed",
@@ -7845,6 +7894,7 @@ const Checkbox = forwardRef(
         {
           id: errorId,
           role: hasError ? "alert" : void 0,
+          "data-testid": testId ? hasError ? `${testId}-error` : `${testId}-helper-text` : void 0,
           className: cn(
             "mt-1 text-sm",
             hasError ? "text-error" : "text-primary-500 dark:text-primary-400"
@@ -7856,7 +7906,7 @@ const Checkbox = forwardRef(
   }
 );
 Checkbox.displayName = "Checkbox";
-const sizeStyles$6 = {
+const sizeStyles$8 = {
   sm: "h-4 w-4",
   md: "h-5 w-5",
   lg: "h-6 w-6"
@@ -7874,6 +7924,7 @@ const Radio = forwardRef(
     error: error2 = false,
     className,
     id,
+    testId,
     ...props
   }, ref) => {
     const radioId = id || (label ? `${props.name}-${label.toLowerCase().replace(/\s+/g, "-")}` : void 0);
@@ -7886,6 +7937,7 @@ const Radio = forwardRef(
           disabled ? "cursor-not-allowed opacity-50" : "cursor-pointer",
           className
         ),
+        "data-testid": testId,
         children: [
           /* @__PURE__ */ jsx(
             "input",
@@ -7894,8 +7946,9 @@ const Radio = forwardRef(
               type: "radio",
               id: radioId,
               disabled,
+              "data-testid": testId ? `${testId}-radio` : void 0,
               className: cn(
-                sizeStyles$6[size2],
+                sizeStyles$8[size2],
                 "border transition-colors",
                 "focus:ring-2 focus:ring-offset-0",
                 "disabled:cursor-not-allowed",
@@ -7925,6 +7978,7 @@ const Radio = forwardRef(
                 "text-primary-700 dark:text-primary-200",
                 error2 && "text-error"
               ),
+              "data-testid": testId ? `${testId}-label` : void 0,
               children: label
             }
           )
@@ -7946,7 +8000,8 @@ function RadioGroup({
   disabled = false,
   orientation = "vertical",
   className,
-  isLoading = false
+  isLoading = false,
+  testId
 }) {
   const hasError = !!error2;
   const groupId = `${name}-group`;
@@ -7954,7 +8009,7 @@ function RadioGroup({
   const handleChange = (e3) => {
     onChange?.(e3.target.value);
   };
-  return /* @__PURE__ */ jsxs("fieldset", { className, role: "radiogroup", "aria-labelledby": label ? groupId : void 0, children: [
+  return /* @__PURE__ */ jsxs("fieldset", { className, role: "radiogroup", "aria-labelledby": label ? groupId : void 0, "data-testid": testId, children: [
     label && /* @__PURE__ */ jsxs(
       "legend",
       {
@@ -7972,7 +8027,7 @@ function RadioGroup({
         className: cn(
           orientation === "vertical" ? "space-y-2" : "flex flex-wrap gap-4"
         ),
-        children: options.map((option) => /* @__PURE__ */ jsx(
+        children: options.map((option, index2) => /* @__PURE__ */ jsx(
           Radio,
           {
             name,
@@ -7982,7 +8037,8 @@ function RadioGroup({
             disabled: isDisabled || option.disabled,
             error: hasError,
             checked: value === option.value,
-            onChange: handleChange
+            onChange: handleChange,
+            testId: testId ? `${testId}-option-${index2}` : void 0
           },
           option.value
         ))
@@ -7992,6 +8048,7 @@ function RadioGroup({
       "p",
       {
         role: hasError ? "alert" : void 0,
+        "data-testid": testId ? hasError ? `${testId}-error` : `${testId}-helper-text` : void 0,
         className: cn(
           "mt-2 text-sm",
           hasError ? "text-error" : "text-primary-500 dark:text-primary-400"
@@ -8002,7 +8059,7 @@ function RadioGroup({
   ] });
 }
 RadioGroup.displayName = "RadioGroup";
-const sizeStyles$5 = {
+const sizeStyles$7 = {
   sm: {
     switch: "h-5 w-9",
     dot: "h-3 w-3",
@@ -8027,11 +8084,12 @@ function Toggle({
   disabled = false,
   size: size2 = "md",
   className,
-  isLoading = false
+  isLoading = false,
+  testId
 }) {
-  const currentSize = sizeStyles$5[size2];
+  const currentSize = sizeStyles$7[size2];
   const isDisabled = disabled || isLoading;
-  return /* @__PURE__ */ jsx(W, { className, children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+  return /* @__PURE__ */ jsx(W, { className, "data-testid": testId, children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
     (label || description) && /* @__PURE__ */ jsxs("div", { className: "flex-1 mr-4", children: [
       label && /* @__PURE__ */ jsx(
         Z,
@@ -8053,6 +8111,7 @@ function Toggle({
         disabled: isDisabled,
         onChange,
         "aria-label": !label ? "Toggle" : void 0,
+        "data-testid": testId ? `${testId}-toggle` : void 0,
         className: cn(
           currentSize.switch,
           "relative inline-flex shrink-0 cursor-pointer rounded-full",
@@ -8138,7 +8197,8 @@ function Combobox({
   isLoading = false,
   loadingText = "Loading...",
   emptyText = "No results found",
-  onSearch
+  onSearch,
+  testId
 }) {
   const [query, setQuery] = useState("");
   const hasError = !!error2;
@@ -8158,12 +8218,13 @@ function Combobox({
     onChange?.(newValue);
     setQuery("");
   };
-  return /* @__PURE__ */ jsxs("div", { className: cn(fullWidth ? "w-full" : "w-auto", className), children: [
+  return /* @__PURE__ */ jsxs("div", { className: cn(fullWidth ? "w-full" : "w-auto", className), "data-testid": testId, children: [
     label && /* @__PURE__ */ jsxs(
       "label",
       {
         id: labelId,
         className: "mb-2 block text-sm font-medium text-primary-700 dark:text-white",
+        "data-testid": testId ? `${testId}-label` : void 0,
         children: [
           label,
           required && /* @__PURE__ */ jsx("span", { className: "ml-1 text-error", children: "*" })
@@ -8190,6 +8251,7 @@ function Combobox({
                   onSearch?.(newQuery);
                 },
                 placeholder,
+                "data-testid": testId ? `${testId}-input` : void 0,
                 className: cn(
                   // Base styles - Light mode
                   "w-full rounded-md border bg-white px-4 py-2.5 pr-10 text-sm text-primary-900",
@@ -8223,30 +8285,38 @@ function Combobox({
               leaveFrom: "opacity-100",
               leaveTo: "opacity-0",
               afterLeave: () => setQuery(""),
-              children: /* @__PURE__ */ jsx(Uo, { className: "absolute z-dropdown mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-sm shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none dark:bg-primary-800 dark:ring-primary-700", children: isLoading ? /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center gap-2 px-4 py-2.5 text-primary-500 dark:text-primary-400", children: [
-                /* @__PURE__ */ jsx(Spinner, { size: "sm", color: "primary" }),
-                /* @__PURE__ */ jsx("span", { children: loadingText })
-              ] }) : filteredOptions.length === 0 && query !== "" ? /* @__PURE__ */ jsx("div", { className: "relative cursor-default select-none px-4 py-2.5 text-primary-500 dark:text-primary-400", children: emptyText }) : filteredOptions.map((option) => /* @__PURE__ */ jsx(
-                Ho,
+              children: /* @__PURE__ */ jsx(
+                Uo,
                 {
-                  value: option.value,
-                  disabled: option.disabled,
-                  className: ({ active, selected }) => cn(
-                    "relative cursor-pointer select-none py-2.5 pl-10 pr-4",
-                    // Light mode
-                    active ? "bg-gold-50 text-primary-900" : "text-primary-900",
-                    // Dark mode
-                    active ? "dark:bg-primary-700 dark:text-primary-100" : "dark:text-primary-200",
-                    option.disabled && "cursor-not-allowed opacity-50",
-                    selected && "font-medium"
-                  ),
-                  children: ({ selected }) => /* @__PURE__ */ jsxs(Fragment, { children: [
-                    /* @__PURE__ */ jsx("span", { className: "block truncate", children: option.label }),
-                    selected && /* @__PURE__ */ jsx("span", { className: "absolute inset-y-0 left-0 flex items-center pl-3 text-gold-600 dark:text-gold-400", children: /* @__PURE__ */ jsx(CheckIcon, {}) })
-                  ] })
-                },
-                option.value
-              )) })
+                  className: "absolute z-dropdown mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-sm shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none dark:bg-primary-800 dark:ring-primary-700",
+                  "data-testid": testId ? `${testId}-options` : void 0,
+                  children: isLoading ? /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center gap-2 px-4 py-2.5 text-primary-500 dark:text-primary-400", children: [
+                    /* @__PURE__ */ jsx(Spinner, { size: "sm", color: "primary" }),
+                    /* @__PURE__ */ jsx("span", { children: loadingText })
+                  ] }) : filteredOptions.length === 0 && query !== "" ? /* @__PURE__ */ jsx("div", { className: "relative cursor-default select-none px-4 py-2.5 text-primary-500 dark:text-primary-400", children: emptyText }) : filteredOptions.map((option, index2) => /* @__PURE__ */ jsx(
+                    Ho,
+                    {
+                      value: option.value,
+                      disabled: option.disabled,
+                      "data-testid": testId ? `${testId}-option-${index2}` : void 0,
+                      className: ({ active, selected }) => cn(
+                        "relative cursor-pointer select-none py-2.5 pl-10 pr-4",
+                        // Light mode
+                        active ? "bg-gold-50 text-primary-900" : "text-primary-900",
+                        // Dark mode
+                        active ? "dark:bg-primary-700 dark:text-primary-100" : "dark:text-primary-200",
+                        option.disabled && "cursor-not-allowed opacity-50",
+                        selected && "font-medium"
+                      ),
+                      children: ({ selected }) => /* @__PURE__ */ jsxs(Fragment, { children: [
+                        /* @__PURE__ */ jsx("span", { className: "block truncate", children: option.label }),
+                        selected && /* @__PURE__ */ jsx("span", { className: "absolute inset-y-0 left-0 flex items-center pl-3 text-gold-600 dark:text-gold-400", children: /* @__PURE__ */ jsx(CheckIcon, {}) })
+                      ] })
+                    },
+                    option.value
+                  ))
+                }
+              )
             }
           )
         ] })
@@ -8256,6 +8326,7 @@ function Combobox({
       "p",
       {
         role: hasError ? "alert" : void 0,
+        "data-testid": testId ? hasError ? `${testId}-error` : `${testId}-helper-text` : void 0,
         className: cn(
           "mt-1.5 text-sm",
           hasError ? "text-error" : "text-primary-500 dark:text-primary-400"
@@ -8266,7 +8337,7 @@ function Combobox({
   ] });
 }
 Combobox.displayName = "Combobox";
-const variantStyles$2 = {
+const variantStyles$3 = {
   default: cn(
     "bg-primary-100 text-primary-700 border-primary-200",
     "dark:bg-primary-800 dark:text-primary-200 dark:border-primary-700"
@@ -8292,23 +8363,24 @@ const variantStyles$2 = {
     "dark:bg-gold-900/50 dark:text-gold-300 dark:border-gold-700"
   )
 };
-const sizeStyles$4 = {
+const sizeStyles$6 = {
   sm: "px-2 py-0.5 text-xs",
   md: "px-2.5 py-1 text-sm",
   lg: "px-3 py-1.5 text-base"
 };
 const Badge = forwardRef(
-  ({ variant = "default", size: size2 = "md", children, className, ...props }, ref) => {
+  ({ variant = "default", size: size2 = "md", children, className, testId, ...props }, ref) => {
     return /* @__PURE__ */ jsx(
       "span",
       {
         ref,
         className: cn(
           "inline-flex items-center justify-center font-medium rounded-full border",
-          variantStyles$2[variant],
-          sizeStyles$4[size2],
+          variantStyles$3[variant],
+          sizeStyles$6[size2],
           className
         ),
+        "data-testid": testId,
         ...props,
         children
       }
@@ -8464,7 +8536,7 @@ const TableCell = forwardRef(
   }
 );
 TableCell.displayName = "TableCell";
-const sizeStyles$3 = {
+const sizeStyles$5 = {
   sm: "px-3 py-1.5 text-sm",
   md: "px-4 py-2 text-sm",
   lg: "px-5 py-2.5 text-base"
@@ -8478,6 +8550,7 @@ function Tabs({
   size: size2 = "md",
   className,
   "aria-label": ariaLabel = "Navigation tabs",
+  testId,
   ...props
 }) {
   const selectedIndex = useMemo(
@@ -8505,15 +8578,17 @@ function Tabs({
             fullWidth && "w-full",
             className
           ),
+          "data-testid": testId,
           ...props,
-          children: tabs.map((tab) => /* @__PURE__ */ jsx(
+          children: tabs.map((tab, index2) => /* @__PURE__ */ jsx(
             dt,
             {
               disabled: tab.disabled,
+              "data-testid": testId ? `${testId}-tab-${index2}` : void 0,
               className: ({ selected }) => cn(
                 "relative outline-none transition-colors duration-normal",
                 "focus-visible:ring-2 focus-visible:ring-gold-500/50",
-                sizeStyles$3[size2],
+                sizeStyles$5[size2],
                 fullWidth && "flex-1",
                 // Default variant styles
                 variant === "default" && [
@@ -8556,6 +8631,7 @@ function TabContentPanels({
   children,
   className,
   isLoading = false,
+  testId,
   ...props
 }) {
   const activeContent = activeTab && children[activeTab];
@@ -8564,6 +8640,7 @@ function TabContentPanels({
     {
       role: "tabpanel",
       className: cn("relative mt-4", className),
+      "data-testid": testId,
       ...props,
       children: [
         activeContent,
@@ -8628,6 +8705,7 @@ const Breadcrumbs = forwardRef(
     maxItems = 0,
     renderLink,
     className,
+    testId,
     ...props
   }, ref) => {
     const [isExpanded, setIsExpanded] = useState(false);
@@ -8679,12 +8757,20 @@ const Breadcrumbs = forwardRef(
         ref,
         "aria-label": "Breadcrumb",
         className: cn("text-sm", className),
+        "data-testid": testId,
         ...props,
         children: /* @__PURE__ */ jsx("ol", { className: "flex items-center flex-wrap gap-1", children: displayItems.map((item, index2) => {
           const isLast = index2 === displayItems.length - 1;
           const showEllipsis = shouldCollapse && index2 === 0;
           return /* @__PURE__ */ jsxs(Fragment$1, { children: [
-            /* @__PURE__ */ jsx("li", { className: "inline-flex items-center", children: renderItem(item, index2, isLast) }),
+            /* @__PURE__ */ jsx(
+              "li",
+              {
+                className: "inline-flex items-center",
+                "data-testid": testId ? `${testId}-item-${index2}` : void 0,
+                children: renderItem(item, index2, isLast)
+              }
+            ),
             showEllipsis && /* @__PURE__ */ jsxs(Fragment, { children: [
               /* @__PURE__ */ jsx("li", { className: "inline-flex items-center", "aria-hidden": "true", children: separatorElement }),
               /* @__PURE__ */ jsx("li", { className: "inline-flex items-center", children: /* @__PURE__ */ jsx(EllipsisButton, { onClick: () => setIsExpanded(true) }) })
@@ -8697,7 +8783,7 @@ const Breadcrumbs = forwardRef(
   }
 );
 Breadcrumbs.displayName = "Breadcrumbs";
-const variantStyles$1 = {
+const variantStyles$2 = {
   text: "rounded",
   circular: "rounded-full",
   rectangular: "rounded-md"
@@ -8712,6 +8798,7 @@ const Skeleton = forwardRef(
     label = "Loading...",
     className,
     style,
+    testId,
     ...props
   }, ref) => {
     const widthValue = typeof width === "number" ? `${width}px` : width;
@@ -8726,6 +8813,7 @@ const Skeleton = forwardRef(
           role: "status",
           "aria-label": label,
           "aria-busy": "true",
+          "data-testid": testId,
           ...props,
           children: [
             Array.from({ length: lines }).map((_2, index2) => /* @__PURE__ */ jsx(
@@ -8733,7 +8821,7 @@ const Skeleton = forwardRef(
               {
                 className: cn(
                   "bg-primary-200 dark:bg-primary-700",
-                  variantStyles$1[variant],
+                  variantStyles$2[variant],
                   animate && "animate-pulse"
                 ),
                 style: {
@@ -8755,7 +8843,7 @@ const Skeleton = forwardRef(
         ref,
         className: cn(
           "bg-primary-200 dark:bg-primary-700",
-          variantStyles$1[variant],
+          variantStyles$2[variant],
           animate && "animate-pulse",
           className
         ),
@@ -8767,6 +8855,7 @@ const Skeleton = forwardRef(
         role: "status",
         "aria-label": label,
         "aria-busy": "true",
+        "data-testid": testId,
         ...props,
         children: /* @__PURE__ */ jsx("span", { className: "sr-only", children: label })
       }
@@ -8774,7 +8863,7 @@ const Skeleton = forwardRef(
   }
 );
 Skeleton.displayName = "Skeleton";
-const defaultIcons = {
+const defaultIcons$1 = {
   "no-data": /* @__PURE__ */ jsx(
     "svg",
     {
@@ -8833,7 +8922,7 @@ const defaultIcons = {
     }
   )
 };
-const sizeStyles$2 = {
+const sizeStyles$4 = {
   sm: {
     container: "py-6 px-4",
     icon: "w-10 h-10",
@@ -8867,9 +8956,10 @@ const EmptyState = forwardRef(
     action,
     size: size2 = "md",
     className,
+    testId,
     ...props
   }, ref) => {
-    const styles = sizeStyles$2[size2];
+    const styles = sizeStyles$4[size2];
     return /* @__PURE__ */ jsxs(
       "div",
       {
@@ -8879,9 +8969,17 @@ const EmptyState = forwardRef(
           styles.container,
           className
         ),
+        "data-testid": testId,
         ...props,
         children: [
-          /* @__PURE__ */ jsx("div", { className: cn(styles.icon, typeColors[type], "mb-4"), children: icon || defaultIcons[type] }),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: cn(styles.icon, typeColors[type], "mb-4"),
+              "data-testid": testId ? `${testId}-icon` : void 0,
+              children: icon || defaultIcons$1[type]
+            }
+          ),
           /* @__PURE__ */ jsx(
             "h3",
             {
@@ -8890,6 +8988,7 @@ const EmptyState = forwardRef(
                 "text-primary-900 dark:text-primary-100",
                 "mb-1"
               ),
+              "data-testid": testId ? `${testId}-title` : void 0,
               children: title
             }
           ),
@@ -8901,10 +9000,11 @@ const EmptyState = forwardRef(
                 "text-primary-500 dark:text-primary-400",
                 "max-w-sm mb-4"
               ),
+              "data-testid": testId ? `${testId}-description` : void 0,
               children: description
             }
           ),
-          action && /* @__PURE__ */ jsx("div", { className: "mt-2", children: action })
+          action && /* @__PURE__ */ jsx("div", { className: "mt-2", "data-testid": testId ? `${testId}-action` : void 0, children: action })
         ]
       }
     );
@@ -8913,7 +9013,7 @@ const EmptyState = forwardRef(
 EmptyState.displayName = "EmptyState";
 const ChevronLeftIcon = () => /* @__PURE__ */ jsx("svg", { className: "h-4 w-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M15 19l-7-7 7-7" }) });
 const ChevronRightIcon = () => /* @__PURE__ */ jsx("svg", { className: "h-4 w-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 5l7 7-7 7" }) });
-const sizeStyles$1 = {
+const sizeStyles$3 = {
   sm: { button: "h-8 min-w-8 px-2 text-sm", text: "text-sm" },
   md: { button: "h-10 min-w-10 px-3 text-sm", text: "text-sm" }
 };
@@ -8960,10 +9060,11 @@ function Pagination({
   totalItems,
   disabled = false,
   size: size2 = "md",
-  className
+  className,
+  testId
 }) {
   const pageSizeId = useId$1();
-  const currentSize = sizeStyles$1[size2];
+  const currentSize = sizeStyles$3[size2];
   const canGoPrevious = currentPage > 1;
   const canGoNext = currentPage < totalPages;
   const pageNumbers = useMemo(
@@ -8993,13 +9094,14 @@ function Pagination({
   };
   if (variant === "load-more") {
     if (!canGoNext) return null;
-    return /* @__PURE__ */ jsx("div", { className: cn("flex justify-center", className), children: /* @__PURE__ */ jsx(
+    return /* @__PURE__ */ jsx("div", { className: cn("flex justify-center", className), "data-testid": testId, children: /* @__PURE__ */ jsx(
       Button,
       {
         variant: "secondary",
         size: size2 === "sm" ? "sm" : "md",
         onClick: handleNext,
         disabled,
+        "data-testid": testId ? `${testId}-load-more` : void 0,
         children: "Load more"
       }
     ) });
@@ -9010,6 +9112,7 @@ function Pagination({
       {
         "aria-label": "Pagination",
         className: cn("flex items-center justify-between gap-4", className),
+        "data-testid": testId,
         children: [
           /* @__PURE__ */ jsxs(
             Button,
@@ -9019,6 +9122,7 @@ function Pagination({
               onClick: handlePrevious,
               disabled: disabled || !canGoPrevious,
               "aria-label": "Previous page",
+              "data-testid": testId ? `${testId}-prev` : void 0,
               children: [
                 /* @__PURE__ */ jsx(ChevronLeftIcon, {}),
                 /* @__PURE__ */ jsx("span", { className: "ml-1", children: "Previous" })
@@ -9039,6 +9143,7 @@ function Pagination({
               onClick: handleNext,
               disabled: disabled || !canGoNext,
               "aria-label": "Next page",
+              "data-testid": testId ? `${testId}-next` : void 0,
               children: [
                 /* @__PURE__ */ jsx("span", { className: "mr-1", children: "Next" }),
                 /* @__PURE__ */ jsx(ChevronRightIcon, {})
@@ -9054,6 +9159,7 @@ function Pagination({
     {
       "aria-label": "Pagination",
       className: cn("flex items-center justify-between gap-4", className),
+      "data-testid": testId,
       children: [
         /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4", children: [
           itemsRange && /* @__PURE__ */ jsxs("span", { className: cn("text-primary-600 dark:text-primary-400", currentSize.text), children: [
@@ -9100,6 +9206,7 @@ function Pagination({
               onClick: handlePrevious,
               disabled: disabled || !canGoPrevious,
               "aria-label": "Previous page",
+              "data-testid": testId ? `${testId}-prev` : void 0,
               className: cn(
                 "inline-flex items-center justify-center rounded-md",
                 "border border-primary-300 dark:border-primary-600",
@@ -9134,6 +9241,7 @@ function Pagination({
                 disabled,
                 "aria-label": `Page ${page}`,
                 "aria-current": page === currentPage ? "page" : void 0,
+                "data-testid": testId ? `${testId}-page-${page}` : void 0,
                 className: cn(
                   "inline-flex items-center justify-center rounded-md",
                   "border transition-colors",
@@ -9162,6 +9270,7 @@ function Pagination({
               onClick: handleNext,
               disabled: disabled || !canGoNext,
               "aria-label": "Next page",
+              "data-testid": testId ? `${testId}-next` : void 0,
               className: cn(
                 "inline-flex items-center justify-center rounded-md",
                 "border border-primary-300 dark:border-primary-600",
@@ -9229,7 +9338,8 @@ function MultiSelect({
   required = false,
   disabled = false,
   fullWidth = false,
-  className
+  className,
+  testId
 }) {
   const [query, setQuery] = useState("");
   const searchInputRef = useRef(null);
@@ -9285,12 +9395,13 @@ function MultiSelect({
   };
   const displayedChips = selectedOptions.slice(0, maxDisplayedItems);
   const hiddenCount = selectedOptions.length - maxDisplayedItems;
-  return /* @__PURE__ */ jsxs("div", { className: cn(fullWidth ? "w-full" : "w-auto", className), children: [
+  return /* @__PURE__ */ jsxs("div", { className: cn(fullWidth ? "w-full" : "w-auto", className), "data-testid": testId, children: [
     label && /* @__PURE__ */ jsxs(
       "label",
       {
         id: labelId,
         className: "mb-2 block text-sm font-medium text-primary-700 dark:text-white",
+        "data-testid": testId ? `${testId}-label` : void 0,
         children: [
           label,
           required && /* @__PURE__ */ jsx("span", { className: "ml-1 text-error", children: "*" })
@@ -9318,7 +9429,7 @@ function MultiSelect({
                 hasError ? "border-error focus-within:border-error focus-within:ring-2 focus-within:ring-error/20" : "border-primary-300 dark:border-primary-600 focus-within:border-gold-500 focus-within:ring-2 focus-within:ring-gold-500/20"
               ),
               children: [
-                displayedChips.map((option) => /* @__PURE__ */ jsxs(
+                displayedChips.map((option, index2) => /* @__PURE__ */ jsxs(
                   "span",
                   {
                     className: cn(
@@ -9326,6 +9437,7 @@ function MultiSelect({
                       "bg-primary-100 dark:bg-primary-700",
                       "text-sm text-primary-700 dark:text-primary-200"
                     ),
+                    "data-testid": testId ? `${testId}-chip-${index2}` : void 0,
                     children: [
                       option.label,
                       /* @__PURE__ */ jsx(
@@ -9386,6 +9498,7 @@ function MultiSelect({
                 {
                   static: true,
                   className: "absolute z-dropdown mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-sm shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none dark:bg-primary-800 dark:ring-primary-700",
+                  "data-testid": testId ? `${testId}-options` : void 0,
                   children: isLoading ? /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center gap-2 px-4 py-2.5 text-primary-500 dark:text-primary-400", children: [
                     /* @__PURE__ */ jsx(Spinner, { size: "sm", color: "primary" }),
                     /* @__PURE__ */ jsx("span", { children: loadingText })
@@ -9401,6 +9514,7 @@ function MultiSelect({
                           value: query,
                           onChange: handleSearchChange,
                           placeholder: "Search...",
+                          "data-testid": testId ? `${testId}-input` : void 0,
                           className: cn(
                             "w-full rounded border border-primary-300 px-2 py-1 text-sm",
                             "bg-white dark:bg-primary-900",
@@ -9442,11 +9556,12 @@ function MultiSelect({
                         ]
                       }
                     ),
-                    filteredOptions.length === 0 ? /* @__PURE__ */ jsx("div", { className: "px-4 py-2.5 text-primary-500 dark:text-primary-400", children: emptyText }) : filteredOptions.map((option) => /* @__PURE__ */ jsxs(
+                    filteredOptions.length === 0 ? /* @__PURE__ */ jsx("div", { className: "px-4 py-2.5 text-primary-500 dark:text-primary-400", children: emptyText }) : filteredOptions.map((option, index2) => /* @__PURE__ */ jsxs(
                       It,
                       {
                         value: option.value,
                         disabled: option.disabled,
+                        "data-testid": testId ? `${testId}-option-${index2}` : void 0,
                         className: ({ active }) => cn(
                           "flex cursor-pointer items-center gap-2 px-4 py-2.5",
                           active && "bg-primary-50 dark:bg-primary-700",
@@ -9480,6 +9595,7 @@ function MultiSelect({
       "p",
       {
         role: hasError ? "alert" : void 0,
+        "data-testid": testId ? hasError ? `${testId}-error` : `${testId}-helper-text` : void 0,
         className: cn(
           "mt-1.5 text-sm",
           hasError ? "text-error" : "text-primary-500 dark:text-primary-400"
@@ -9510,7 +9626,7 @@ function isItemActive(currentPath, href, matcher = "exact") {
       return false;
   }
 }
-const sizeStyles = {
+const sizeStyles$2 = {
   sm: "px-2 py-1.5 text-xs gap-2",
   md: "px-3 py-2.5 text-sm gap-3",
   lg: "px-4 py-3 text-base gap-3"
@@ -9548,6 +9664,7 @@ function SidebarItem({
   onNavigate,
   LinkComponent,
   className,
+  testId,
   ...props
 }) {
   if (!shouldShowItem(item)) {
@@ -9594,6 +9711,7 @@ function SidebarItem({
         disabled: item.disabled,
         "aria-label": item["aria-label"] || item.label,
         title: collapsed ? item.label : void 0,
+        "data-testid": testId,
         className: cn(
           // Base styles
           "flex w-full items-center rounded-lg font-medium",
@@ -9601,7 +9719,7 @@ function SidebarItem({
           "focus:outline-none focus:ring-2 focus:ring-primary-500/20 focus:ring-offset-2",
           "dark:focus:ring-offset-primary-900",
           // Size styles
-          sizeStyles[size2],
+          sizeStyles$2[size2],
           // State styles
           item.disabled && "opacity-50 cursor-not-allowed",
           !item.disabled && !isActive && [
@@ -9626,6 +9744,7 @@ function SidebarItem({
     {
       to: item.href,
       onClick: handleClick,
+      "data-testid": testId,
       className: cn(
         // Base styles
         "flex items-center rounded-lg font-medium",
@@ -9633,7 +9752,7 @@ function SidebarItem({
         "focus:outline-none focus:ring-2 focus:ring-primary-500/20 focus:ring-offset-2",
         "dark:focus:ring-offset-primary-900",
         // Size styles
-        sizeStyles[size2],
+        sizeStyles$2[size2],
         // State styles
         item.disabled && "opacity-50 cursor-not-allowed pointer-events-none",
         !item.disabled && !isActive && [
@@ -9734,7 +9853,7 @@ const SidebarDivider = forwardRef(
   }
 );
 SidebarDivider.displayName = "SidebarDivider";
-const variantStyles = {
+const variantStyles$1 = {
   default: [
     "bg-white border-r border-gold-500/40",
     "dark:bg-primary-900 dark:border-gold-500/20"
@@ -9763,6 +9882,7 @@ const Sidebar = forwardRef(
     collapsedWidth = "4rem",
     className,
     "aria-label": ariaLabel = "Main navigation",
+    testId,
     ...props
   }, ref) => {
     useEffect(() => {
@@ -9870,6 +9990,7 @@ const Sidebar = forwardRef(
             "focus:outline-none focus:ring-2 focus:ring-primary-500/20"
           ),
           "aria-label": collapsed ? "Expand sidebar" : "Collapse sidebar",
+          "data-testid": testId ? `${testId}-toggle` : void 0,
           children: /* @__PURE__ */ jsx(
             "svg",
             {
@@ -9901,7 +10022,8 @@ const Sidebar = forwardRef(
         {
           className: "fixed inset-0 z-40 bg-black/20 lg:hidden",
           onClick: handleOverlayClick,
-          "aria-hidden": "true"
+          "aria-hidden": "true",
+          "data-testid": testId ? `${testId}-overlay` : void 0
         }
       ),
       /* @__PURE__ */ jsx(
@@ -9917,11 +10039,12 @@ const Sidebar = forwardRef(
             // Mobile styles
             isOpen ? "translate-x-0" : "-translate-x-full",
             // Variant styles
-            variantStyles[variant],
+            variantStyles$1[variant],
             className
           ),
           style: { width: sidebarWidth },
           "aria-label": ariaLabel,
+          "data-testid": testId,
           ...props,
           children: sidebarContent
         }
@@ -9930,7 +10053,521 @@ const Sidebar = forwardRef(
   }
 );
 Sidebar.displayName = "Sidebar";
+const CheckCircleIcon = () => /* @__PURE__ */ jsx("svg", { className: "h-5 w-5", fill: "none", viewBox: "0 0 24 24", strokeWidth: 1.5, stroke: "currentColor", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" }) });
+const XCircleIcon = () => /* @__PURE__ */ jsx("svg", { className: "h-5 w-5", fill: "none", viewBox: "0 0 24 24", strokeWidth: 1.5, stroke: "currentColor", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M9.75 9.75l4.5 4.5m0-4.5l-4.5 4.5M21 12a9 9 0 11-18 0 9 9 0 0118 0z" }) });
+const ExclamationCircleIcon = () => /* @__PURE__ */ jsx("svg", { className: "h-5 w-5", fill: "none", viewBox: "0 0 24 24", strokeWidth: 1.5, stroke: "currentColor", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z" }) });
+const InformationCircleIcon = () => /* @__PURE__ */ jsx("svg", { className: "h-5 w-5", fill: "none", viewBox: "0 0 24 24", strokeWidth: 1.5, stroke: "currentColor", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M11.25 11.25l.041-.02a.75.75 0 011.063.852l-.708 2.836a.75.75 0 001.063.853l.041-.021M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9-3.75h.008v.008H12V8.25z" }) });
+const XMarkIcon = () => /* @__PURE__ */ jsx("svg", { className: "h-5 w-5", fill: "none", viewBox: "0 0 24 24", strokeWidth: 1.5, stroke: "currentColor", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M6 18L18 6M6 6l12 12" }) });
+const defaultIcons = {
+  success: /* @__PURE__ */ jsx(CheckCircleIcon, {}),
+  error: /* @__PURE__ */ jsx(XCircleIcon, {}),
+  warning: /* @__PURE__ */ jsx(ExclamationCircleIcon, {}),
+  info: /* @__PURE__ */ jsx(InformationCircleIcon, {})
+};
+const variantStyles = {
+  success: {
+    container: cn(
+      "bg-success-light border-success/20 text-[#166534]",
+      "dark:bg-success/10 dark:border-success/30 dark:text-[#86efac]"
+    ),
+    icon: "text-success dark:text-[#4ade80]",
+    title: "text-[#14532d] dark:text-[#bbf7d0]"
+  },
+  error: {
+    container: cn(
+      "bg-error-light border-error/20 text-[#991b1b]",
+      "dark:bg-error/10 dark:border-error/30 dark:text-[#fca5a5]"
+    ),
+    icon: "text-error dark:text-[#f87171]",
+    title: "text-[#7f1d1d] dark:text-[#fecaca]"
+  },
+  warning: {
+    container: cn(
+      "bg-warning-light border-warning/20 text-[#854d0e]",
+      "dark:bg-warning/10 dark:border-warning/30 dark:text-[#fde047]"
+    ),
+    icon: "text-warning dark:text-[#facc15]",
+    title: "text-[#713f12] dark:text-[#fef08a]"
+  },
+  info: {
+    container: cn(
+      "bg-info-light border-info/20 text-[#1e40af]",
+      "dark:bg-info/10 dark:border-info/30 dark:text-[#93c5fd]"
+    ),
+    icon: "text-info dark:text-[#60a5fa]",
+    title: "text-[#1e3a8a] dark:text-[#bfdbfe]"
+  }
+};
+const Alert = forwardRef(
+  ({ variant = "info", title, message, icon, onClose, className, testId, ...props }, ref) => {
+    const styles = variantStyles[variant];
+    const displayIcon = icon === null ? null : icon ?? defaultIcons[variant];
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        role: "alert",
+        className: cn(
+          "rounded-lg border p-4",
+          styles.container,
+          className
+        ),
+        "data-testid": testId,
+        ...props,
+        children: /* @__PURE__ */ jsxs("div", { className: "flex items-start", children: [
+          displayIcon !== null && /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: cn("flex-shrink-0", styles.icon),
+              "aria-hidden": "true",
+              "data-testid": testId ? `${testId}-icon` : void 0,
+              children: displayIcon
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { className: cn("flex-1", displayIcon !== null && "ml-3"), children: [
+            title && /* @__PURE__ */ jsx("h3", { className: cn("text-sm font-medium", styles.title), children: title }),
+            /* @__PURE__ */ jsx("div", { className: cn("text-sm", title && "mt-1"), children: message })
+          ] }),
+          onClose && /* @__PURE__ */ jsx("div", { className: "ml-3 flex-shrink-0", children: /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              onClick: onClose,
+              className: cn(
+                "inline-flex rounded-md p-1.5",
+                "hover:opacity-75 focus:outline-none focus:ring-2 focus:ring-offset-2",
+                "focus:ring-current/20",
+                "dark:focus:ring-offset-primary-900"
+              ),
+              "data-testid": testId ? `${testId}-close-button` : void 0,
+              children: [
+                /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Dismiss" }),
+                /* @__PURE__ */ jsx(XMarkIcon, {})
+              ]
+            }
+          ) })
+        ] })
+      }
+    );
+  }
+);
+Alert.displayName = "Alert";
+const sizeStyles$1 = {
+  xs: { container: "w-6 h-6", text: "text-xs", status: "w-2 h-2 border" },
+  sm: { container: "w-8 h-8", text: "text-sm", status: "w-2.5 h-2.5 border" },
+  md: { container: "w-10 h-10", text: "text-base", status: "w-3 h-3 border-2" },
+  lg: { container: "w-12 h-12", text: "text-lg", status: "w-3.5 h-3.5 border-2" },
+  xl: { container: "w-16 h-16", text: "text-2xl", status: "w-4 h-4 border-2" }
+};
+const statusStyles = {
+  online: "bg-success",
+  offline: "bg-primary-400 dark:bg-primary-500",
+  away: "bg-warning",
+  busy: "bg-error"
+};
+const Avatar = forwardRef(
+  ({ name, src, size: size2 = "md", alt, status, className, testId, ...props }, ref) => {
+    const getInitials = (fullName) => {
+      const names = fullName.trim().split(" ");
+      if (names.length === 1) {
+        return names[0]?.charAt(0).toUpperCase() || "";
+      }
+      const firstName = names[0];
+      const lastName = names[names.length - 1];
+      return ((firstName?.charAt(0) || "") + (lastName?.charAt(0) || "")).toUpperCase();
+    };
+    const initials = getInitials(name);
+    const styles = sizeStyles$1[size2];
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        className: cn(
+          "relative inline-flex items-center justify-center",
+          "rounded-full font-medium",
+          // Light mode
+          "bg-gold-500 text-white",
+          // Dark mode
+          "dark:bg-gold-600 dark:text-white",
+          styles.container,
+          className
+        ),
+        "data-testid": testId,
+        ...props,
+        children: [
+          src ? /* @__PURE__ */ jsx(
+            "img",
+            {
+              src,
+              alt: alt || `${name}'s avatar`,
+              className: "w-full h-full rounded-full object-cover",
+              "data-testid": testId ? `${testId}-image` : void 0
+            }
+          ) : /* @__PURE__ */ jsx("span", { className: styles.text, children: initials }),
+          status && /* @__PURE__ */ jsx(
+            "span",
+            {
+              role: "status",
+              className: cn(
+                "absolute bottom-0 right-0 rounded-full",
+                "border-white dark:border-primary-900",
+                styles.status,
+                statusStyles[status]
+              ),
+              "aria-label": `Status: ${status}`,
+              "data-testid": testId ? `${testId}-status` : void 0
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+Avatar.displayName = "Avatar";
+const OTPInput = ({
+  length = 6,
+  value,
+  onChange,
+  error: error2,
+  disabled = false,
+  autoFocus = false,
+  label = "One-time password",
+  className
+}) => {
+  const inputRefs = useRef([]);
+  const digits = value.split("").slice(0, length);
+  while (digits.length < length) {
+    digits.push("");
+  }
+  const focusInput = useCallback((index2) => {
+    const input = inputRefs.current[index2];
+    if (input) {
+      input.focus();
+      input.select();
+    }
+  }, []);
+  const handleChange = useCallback(
+    (index2, event_) => {
+      const newValue = event_.target.value;
+      if (!/^\d*$/.test(newValue)) return;
+      const digit = newValue.slice(-1);
+      const newDigits = [...digits];
+      newDigits[index2] = digit;
+      const newOtp = newDigits.join("");
+      onChange(newOtp);
+      if (digit && index2 < length - 1) {
+        focusInput(index2 + 1);
+      }
+    },
+    [digits, length, onChange, focusInput]
+  );
+  const handleKeyDown = useCallback(
+    (index2, event_) => {
+      switch (event_.key) {
+        case "Backspace":
+          if (!digits[index2] && index2 > 0) {
+            event_.preventDefault();
+            const newDigits = [...digits];
+            newDigits[index2 - 1] = "";
+            onChange(newDigits.join(""));
+            focusInput(index2 - 1);
+          } else if (digits[index2]) {
+            const newDigits = [...digits];
+            newDigits[index2] = "";
+            onChange(newDigits.join(""));
+          }
+          break;
+        case "ArrowLeft":
+          event_.preventDefault();
+          if (index2 > 0) {
+            focusInput(index2 - 1);
+          }
+          break;
+        case "ArrowRight":
+          event_.preventDefault();
+          if (index2 < length - 1) {
+            focusInput(index2 + 1);
+          }
+          break;
+        case "Delete": {
+          event_.preventDefault();
+          const newDigits = [...digits];
+          newDigits[index2] = "";
+          onChange(newDigits.join(""));
+          break;
+        }
+      }
+    },
+    [digits, length, onChange, focusInput]
+  );
+  const handlePaste = useCallback(
+    (event_) => {
+      event_.preventDefault();
+      const pastedData = event_.clipboardData.getData("text");
+      const pastedDigits = pastedData.replace(/\D/g, "").slice(0, length);
+      if (pastedDigits) {
+        onChange(pastedDigits);
+        const focusIndex = Math.min(pastedDigits.length, length - 1);
+        focusInput(focusIndex);
+      }
+    },
+    [length, onChange, focusInput]
+  );
+  const errorId = error2 ? "otp-input-error" : void 0;
+  return /* @__PURE__ */ jsxs("div", { className: cn("w-full", className), "data-testid": "otp-input", children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        role: "group",
+        "aria-label": label,
+        "aria-describedby": errorId,
+        className: "flex justify-center gap-2 sm:gap-3",
+        children: digits.map((digit, index2) => /* @__PURE__ */ jsx(
+          "input",
+          {
+            ref: (element) => {
+              inputRefs.current[index2] = element;
+            },
+            type: "text",
+            inputMode: "numeric",
+            pattern: "\\d*",
+            maxLength: 1,
+            value: digit,
+            disabled,
+            autoFocus: autoFocus && index2 === 0,
+            "aria-label": `Digit ${index2 + 1} of ${length}`,
+            "aria-invalid": !!error2,
+            "data-testid": `otp-input-digit-${index2}`,
+            className: cn(
+              "w-10 h-12 sm:w-12 sm:h-14",
+              "text-center text-xl sm:text-2xl font-semibold",
+              "border-2 rounded-lg",
+              "focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-primary-500",
+              "transition-colors duration-200",
+              // Light mode
+              error2 ? "border-error bg-error-light" : "border-primary-300 bg-white",
+              // Dark mode
+              error2 ? "dark:border-error dark:bg-error/10" : "dark:border-primary-600 dark:bg-primary-900 dark:text-white",
+              "dark:focus:ring-primary-400 dark:focus:border-primary-400",
+              disabled && "bg-primary-100 cursor-not-allowed opacity-50 dark:bg-primary-800"
+            ),
+            onChange: (event_) => handleChange(index2, event_),
+            onKeyDown: (event_) => handleKeyDown(index2, event_),
+            onPaste: handlePaste,
+            onFocus: (event_) => event_.target.select()
+          },
+          index2
+        ))
+      }
+    ),
+    error2 && /* @__PURE__ */ jsx(
+      "p",
+      {
+        id: errorId,
+        role: "alert",
+        "aria-live": "assertive",
+        "data-testid": "otp-input-error",
+        className: cn(
+          "mt-2 text-sm text-center",
+          "text-error dark:text-[#fca5a5]"
+        ),
+        children: error2
+      }
+    )
+  ] });
+};
+const DateInput = forwardRef(
+  ({
+    value,
+    onChange,
+    label,
+    error: error2,
+    helperText,
+    fullWidth = false,
+    disabled = false,
+    className,
+    id,
+    required,
+    min: min2,
+    max: max2,
+    ...props
+  }, ref) => {
+    const inputId = id || label?.toLowerCase().replace(/\s+/g, "-");
+    const hasError = !!error2;
+    const errorId = hasError ? `${inputId}-error` : void 0;
+    return /* @__PURE__ */ jsxs("div", { className: cn(fullWidth ? "w-full" : "w-auto"), children: [
+      label && /* @__PURE__ */ jsxs(
+        "label",
+        {
+          htmlFor: inputId,
+          className: "mb-2 block text-sm font-medium text-primary-700 dark:text-white",
+          children: [
+            label,
+            required && /* @__PURE__ */ jsx("span", { className: "ml-1 text-error", children: "*" })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          ref,
+          type: "date",
+          id: inputId,
+          "data-testid": "date-input",
+          value: value || "",
+          onChange: (event_) => onChange(event_.target.value || null),
+          disabled,
+          required,
+          min: min2,
+          max: max2,
+          "aria-label": label ? void 0 : "Select date",
+          "aria-invalid": hasError ? "true" : void 0,
+          "aria-describedby": errorId,
+          className: cn(
+            // Base styles - Light mode
+            "block w-full rounded-md border bg-white px-4 py-2.5 text-sm text-primary-900",
+            "transition-colors duration-normal",
+            "focus:outline-none focus:ring-2",
+            "disabled:cursor-not-allowed disabled:bg-primary-50 disabled:text-primary-500",
+            // Base styles - Dark mode
+            "dark:bg-primary-800 dark:text-primary-100",
+            "dark:disabled:bg-primary-900 dark:disabled:text-primary-600",
+            // Border and focus styles
+            hasError ? "border-error focus:border-error focus:ring-error/20 dark:border-error/70 dark:focus:ring-error/30" : "border-primary-300 focus:border-gold-500 focus:ring-gold-500/20 dark:border-primary-600 dark:focus:border-gold-400 dark:focus:ring-gold-400/30",
+            // Custom className
+            className
+          ),
+          ...props
+        }
+      ),
+      (error2 || helperText) && /* @__PURE__ */ jsx(
+        "p",
+        {
+          id: errorId,
+          role: hasError ? "alert" : void 0,
+          className: cn(
+            "mt-1.5 text-sm",
+            hasError ? "text-error" : "text-primary-500 dark:text-primary-400"
+          ),
+          children: error2 || helperText
+        }
+      )
+    ] });
+  }
+);
+DateInput.displayName = "DateInput";
+const sizeStyles = {
+  sm: "px-2.5 py-1 text-xs gap-1",
+  md: "px-3 py-1.5 text-sm gap-1.5",
+  lg: "px-4 py-2 text-base gap-2"
+};
+const checkmarkSize = {
+  sm: "w-3 h-3",
+  md: "w-4 h-4",
+  lg: "w-5 h-5"
+};
+const PillSelector = forwardRef(
+  ({
+    options,
+    selected,
+    onChange,
+    multiple = true,
+    size: size2 = "md",
+    label,
+    fullWidth = false,
+    disabled = false,
+    className,
+    ...props
+  }, ref) => {
+    const handleClick = (value) => {
+      if (disabled) return;
+      if (multiple) {
+        if (selected.includes(value)) {
+          onChange(selected.filter((v2) => v2 !== value));
+        } else {
+          onChange([...selected, value]);
+        }
+      } else {
+        onChange([value]);
+      }
+    };
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        className: cn(fullWidth ? "w-full" : "w-auto", className),
+        ...props,
+        children: [
+          label && /* @__PURE__ */ jsx("label", { className: "mb-2 block text-sm font-medium text-primary-700 dark:text-white", children: label }),
+          /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-2", role: "group", "aria-label": label, children: options.map((option) => {
+            const isSelected = selected.includes(option.value);
+            return /* @__PURE__ */ jsxs(
+              "button",
+              {
+                type: "button",
+                disabled,
+                "aria-pressed": isSelected,
+                onClick: () => handleClick(option.value),
+                className: cn(
+                  "inline-flex items-center justify-center rounded-full border font-medium",
+                  "transition-colors duration-normal",
+                  "focus:outline-none focus:ring-2 focus:ring-offset-1",
+                  "disabled:cursor-not-allowed disabled:opacity-50",
+                  sizeStyles[size2],
+                  isSelected ? cn(
+                    // Light mode - selected
+                    "border-primary-700 bg-primary-700 text-white",
+                    "hover:bg-primary-800 hover:border-primary-800",
+                    "focus:ring-primary-500/30",
+                    // Dark mode - selected
+                    "dark:border-gold-500 dark:bg-gold-500 dark:text-primary-900",
+                    "dark:hover:bg-gold-400 dark:hover:border-gold-400",
+                    "dark:focus:ring-gold-400/30"
+                  ) : cn(
+                    // Light mode - unselected
+                    "border-primary-300 bg-white text-primary-700",
+                    "hover:border-primary-400 hover:bg-primary-50",
+                    "focus:ring-primary-500/20",
+                    // Dark mode - unselected
+                    "dark:border-primary-600 dark:bg-primary-800 dark:text-primary-200",
+                    "dark:hover:border-primary-500 dark:hover:bg-primary-700",
+                    "dark:focus:ring-primary-400/20"
+                  )
+                ),
+                children: [
+                  isSelected && /* @__PURE__ */ jsx(
+                    "svg",
+                    {
+                      className: checkmarkSize[size2],
+                      fill: "currentColor",
+                      viewBox: "0 0 20 20",
+                      "aria-hidden": "true",
+                      children: /* @__PURE__ */ jsx(
+                        "path",
+                        {
+                          fillRule: "evenodd",
+                          clipRule: "evenodd",
+                          d: "M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z"
+                        }
+                      )
+                    }
+                  ),
+                  option.icon,
+                  /* @__PURE__ */ jsx("span", { children: option.label })
+                ]
+              },
+              option.value
+            );
+          }) })
+        ]
+      }
+    );
+  }
+);
+PillSelector.displayName = "PillSelector";
 export {
+  Alert,
+  Avatar,
   Badge,
   Breadcrumbs,
   Button,
@@ -9938,13 +10575,16 @@ export {
   Checkbox,
   Combobox,
   ConfirmDialog,
+  DateInput,
   Drawer,
   EmptyState,
   Input,
   Modal,
   MultiSelect,
+  OTPInput,
   Pagination,
   PasswordInput,
+  PillSelector,
   Radio,
   RadioGroup,
   Select,