@teja-app/ui 0.0.5 → 0.0.7

package/dist/index.cjs

@@ -168,6 +168,7 @@ const Spinner = React.forwardRef(
     color = "current",
     label = "Loading",
     className,
+    testId,
     ...props
   }, ref) => {
     return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -185,6 +186,7 @@ const Spinner = React.forwardRef(
         xmlns: "http://www.w3.org/2000/svg",
         role: "status",
         "aria-label": label,
+        "data-testid": testId,
         ...props,
         children: [
           /* @__PURE__ */ jsxRuntime.jsx(
@@ -225,18 +227,20 @@ const Input = React.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__ */ jsxRuntime.jsxs("div", { className: utils_index.cn(fullWidth ? "w-full" : "w-auto"), children: [
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: utils_index.cn(fullWidth ? "w-full" : "w-auto"), "data-testid": testId, children: [
       label && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("span", { className: "ml-1 text-error", children: "*" })
@@ -244,7 +248,14 @@ const Input = React.forwardRef(
         }
       ),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
-        leftIcon && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
           "input",
           {
@@ -255,6 +266,7 @@ const Input = React.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: utils_index.cn(
               // Base styles - Light mode
               "block w-full rounded-md border bg-white px-4 py-2.5 text-sm text-primary-900",
@@ -277,13 +289,21 @@ const Input = React.forwardRef(
             ...props
           }
         ),
-        showRightIcon && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(Spinner, { size: "sm", color: "primary" }) : rightIcon })
+        showRightIcon && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(Spinner, { size: "sm", color: "primary" }) : rightIcon
+          }
+        )
       ] }),
       (error2 || helperText) && /* @__PURE__ */ jsxRuntime.jsx(
         "p",
         {
           id: errorId,
           role: hasError ? "alert" : void 0,
+          "data-testid": testId ? hasError ? `${testId}-error` : `${testId}-helper-text` : void 0,
           className: utils_index.cn(
             "mt-1.5 text-sm",
             hasError ? "text-error" : "text-primary-500 dark:text-primary-400"
@@ -363,7 +383,7 @@ function getPasswordStrength(password) {
   }
 }
 const PasswordInput = React.forwardRef(
-  ({ showStrengthIndicator = false, value, className, ...props }, ref) => {
+  ({ showStrengthIndicator = false, value, className, testId, ...props }, ref) => {
     const [showPassword, setShowPassword] = React.useState(false);
     const togglePasswordVisibility = () => {
       setShowPassword((prev) => !prev);
@@ -382,10 +402,11 @@ const PasswordInput = React.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__ */ jsxRuntime.jsx(EyeSlashIcon, {}) : /* @__PURE__ */ jsxRuntime.jsx(EyeIcon, {})
       }
     );
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: utils_index.cn("w-full", className), children: [
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: utils_index.cn("w-full", className), "data-testid": testId, children: [
       /* @__PURE__ */ jsxRuntime.jsx(
         Input,
         {
@@ -393,7 +414,8 @@ const PasswordInput = React.forwardRef(
           ref,
           type: showPassword ? "text" : "password",
           value,
-          rightIcon: toggleButton
+          rightIcon: toggleButton,
+          testId: testId ? `${testId}-input` : void 0
         }
       ),
       showStrengthIndicator && passwordValue && strength && strength.label && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-2", children: [
@@ -442,6 +464,7 @@ const Textarea = React.forwardRef(
     defaultValue,
     onChange,
     isLoading = false,
+    testId,
     ...props
   }, ref) => {
     const textareaId = id || label?.toLowerCase().replace(/\s+/g, "-");
@@ -482,12 +505,13 @@ const Textarea = React.forwardRef(
         adjustHeight();
       }
     }, [autoResize, adjustHeight, value, defaultValue]);
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: utils_index.cn(fullWidth ? "w-full" : "w-auto"), children: [
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: utils_index.cn(fullWidth ? "w-full" : "w-auto"), "data-testid": testId, children: [
       label && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("span", { className: "ml-1 text-error", children: "*" })
@@ -510,6 +534,7 @@ const Textarea = React.forwardRef(
             "aria-invalid": hasError ? "true" : void 0,
             "aria-describedby": errorId,
             onChange: handleChange,
+            "data-testid": testId ? `${testId}-textarea` : void 0,
             className: utils_index.cn(
               // Base styles - Light mode
               "block w-full rounded-md border bg-white px-4 py-2.5 text-sm text-primary-900",
@@ -540,6 +565,7 @@ const Textarea = React.forwardRef(
           {
             id: errorId,
             role: hasError ? "alert" : void 0,
+            "data-testid": testId ? hasError ? `${testId}-error` : `${testId}-helper-text` : void 0,
             className: utils_index.cn(
               "text-sm",
               hasError ? "text-error" : "text-primary-500 dark:text-primary-400"
@@ -7241,18 +7267,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 = React.useId();
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: utils_index.cn(fullWidth ? "w-full" : "w-auto", className), children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: utils_index.cn(fullWidth ? "w-full" : "w-auto", className), "data-testid": testId, children: [
     label && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("span", { className: "ml-1 text-error", children: "*" })
@@ -7265,6 +7293,7 @@ function Select({
         {
           "aria-label": !label ? placeholder : void 0,
           "aria-labelledby": label ? labelId : void 0,
+          "data-testid": testId ? `${testId}-button` : void 0,
           className: utils_index.cn(
             // Base styles - Light mode
             "relative w-full rounded-md border bg-white px-4 py-2.5 text-left text-sm",
@@ -7318,15 +7347,18 @@ function Select({
           children: /* @__PURE__ */ jsxRuntime.jsx(
             Bt,
             {
+              portal: true,
               className: utils_index.cn(
                 "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__ */ jsxRuntime.jsx(
+              "data-testid": testId ? `${testId}-options` : void 0,
+              children: options.map((option, index2) => /* @__PURE__ */ jsxRuntime.jsx(
                 It,
                 {
                   disabled: option.disabled,
                   value: option.value,
+                  "data-testid": testId ? `${testId}-option-${index2}` : void 0,
                   className: ({ active, selected }) => utils_index.cn(
                     "relative cursor-pointer select-none py-2.5 pl-10 pr-4",
                     // Light mode
@@ -7368,6 +7400,7 @@ function Select({
       "p",
       {
         role: hasError ? "alert" : void 0,
+        "data-testid": testId ? hasError ? `${testId}-error` : `${testId}-helper-text` : void 0,
         className: utils_index.cn(
           "mt-1.5 text-sm",
           hasError ? "text-error" : "text-primary-500 dark:text-primary-400"
@@ -7413,7 +7446,8 @@ function Modal({
   footer,
   closeOnOverlay = true,
   className,
-  isLoading = false
+  isLoading = false,
+  testId
 }) {
   const handleClose = closeOnOverlay ? onClose : () => {
   };
@@ -7428,7 +7462,7 @@ function Modal({
         leave: "ease-in duration-100",
         leaveFrom: "opacity-100",
         leaveTo: "opacity-0",
-        children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "fixed inset-0 bg-black/40 backdrop-blur-sm" })
+        children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "fixed inset-0 bg-black/40 backdrop-blur-sm", "data-testid": testId ? `${testId}-overlay` : void 0 })
       }
     ),
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "fixed inset-0 flex items-center justify-center p-4", children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -7453,6 +7487,7 @@ function Modal({
               sizeStyles$b[size2],
               className
             ),
+            "data-testid": testId,
             children: [
               (title || showCloseButton) && /* @__PURE__ */ jsxRuntime.jsxs(
                 "div",
@@ -7461,6 +7496,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__ */ jsxRuntime.jsxs("div", { className: "flex-1", children: [
                       title && /* @__PURE__ */ jsxRuntime.jsx(Qe, { className: "text-lg font-semibold text-primary-900 dark:text-white", children: title }),
@@ -7479,13 +7515,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__ */ jsxRuntime.jsx(CloseIcon$2, {})
                       }
                     )
                   ]
                 }
               ),
-              children && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative px-6 py-4 text-primary-700 dark:text-primary-300", children: [
+              children && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 flex items-center justify-center bg-white/60 dark:bg-primary-800/60", children: /* @__PURE__ */ jsxRuntime.jsx(Spinner, { size: "md", color: "primary" }) })
               ] }),
@@ -7498,6 +7535,7 @@ function Modal({
                     "bg-primary-50 dark:bg-primary-900/50",
                     "rounded-b-lg"
                   ),
+                  "data-testid": testId ? `${testId}-footer` : void 0,
                   children: footer
                 }
               )
@@ -7542,7 +7580,8 @@ function Drawer({
   showCloseButton = true,
   footer,
   className,
-  isLoading = false
+  isLoading = false,
+  testId
 }) {
   return /* @__PURE__ */ jsxRuntime.jsx(Ke$2, { show: isOpen, as: React.Fragment, children: /* @__PURE__ */ jsxRuntime.jsxs(ht$1, { className: "relative z-50", onClose, children: [
     /* @__PURE__ */ jsxRuntime.jsx(
@@ -7555,7 +7594,7 @@ function Drawer({
         leave: "ease-in duration-200",
         leaveFrom: "opacity-100",
         leaveTo: "opacity-0",
-        children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "fixed inset-0 bg-black/40 backdrop-blur-sm" })
+        children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "fixed inset-0 bg-black/40 backdrop-blur-sm", "data-testid": testId ? `${testId}-overlay` : void 0 })
       }
     ),
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "fixed inset-0 flex justify-end", children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -7580,6 +7619,7 @@ function Drawer({
               sizeStyles$a[size2],
               className
             ),
+            "data-testid": testId,
             children: [
               (title || showCloseButton) && /* @__PURE__ */ jsxRuntime.jsxs(
                 "div",
@@ -7603,13 +7643,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__ */ jsxRuntime.jsx(CloseIcon$1, {})
                       }
                     )
                   ]
                 }
               ),
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex-1 overflow-y-auto px-6 py-4 text-primary-700 dark:text-primary-300", children: [
+              /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 flex items-center justify-center bg-white/60 dark:bg-primary-800/60", children: /* @__PURE__ */ jsxRuntime.jsx(Spinner, { size: "md", color: "primary" }) })
               ] }),
@@ -7647,7 +7688,8 @@ function ConfirmDialog({
   variant = "neutral",
   cancelText = "Cancel",
   confirmText = "Confirm",
-  loading = false
+  loading = false,
+  testId
 }) {
   const buttonVariant = variantToButton[variant];
   const handleConfirm = () => {
@@ -7663,6 +7705,7 @@ function ConfirmDialog({
       size: "sm",
       showCloseButton: false,
       closeOnOverlay: !loading,
+      testId,
       footer: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-end gap-3", children: [
         /* @__PURE__ */ jsxRuntime.jsx(
           Button,
@@ -7670,6 +7713,7 @@ function ConfirmDialog({
             variant: "secondary",
             onClick: onClose,
             disabled: loading,
+            "data-testid": testId ? `${testId}-cancel-button` : void 0,
             children: cancelText
           }
         ),
@@ -7679,6 +7723,7 @@ function ConfirmDialog({
             variant: buttonVariant,
             onClick: handleConfirm,
             disabled: loading,
+            "data-testid": testId ? `${testId}-confirm-button` : void 0,
             children: loading ? "Loading..." : confirmText
           }
         )
@@ -7718,6 +7763,7 @@ const Card = React.forwardRef(
     hoverable = false,
     children,
     className,
+    testId,
     ...props
   }, ref) => {
     return /* @__PURE__ */ jsxRuntime.jsx(
@@ -7743,6 +7789,7 @@ const Card = React.forwardRef(
           ],
           className
         ),
+        "data-testid": testId,
         ...props,
         children
       }
@@ -7772,6 +7819,7 @@ const Checkbox = React.forwardRef(
     indeterminate = false,
     className,
     id,
+    testId,
     ...props
   }, forwardedRef) => {
     const checkboxId = id || label?.toLowerCase().replace(/\s+/g, "-");
@@ -7798,7 +7846,7 @@ const Checkbox = React.forwardRef(
     const handleChange = (e2) => {
       onChange?.(e2.target.checked);
     };
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className, children: [
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className, "data-testid": testId, children: [
       /* @__PURE__ */ jsxRuntime.jsxs(
         "label",
         {
@@ -7807,6 +7855,7 @@ const Checkbox = React.forwardRef(
             "inline-flex items-center gap-2",
             disabled ? "cursor-not-allowed opacity-50" : "cursor-pointer"
           ),
+          "data-testid": testId ? `${testId}-label` : void 0,
           children: [
             /* @__PURE__ */ jsxRuntime.jsx(
               "input",
@@ -7819,6 +7868,7 @@ const Checkbox = React.forwardRef(
                 "aria-invalid": hasError ? "true" : void 0,
                 "aria-describedby": errorId,
                 onChange: handleChange,
+                "data-testid": testId ? `${testId}-checkbox` : void 0,
                 className: utils_index.cn(
                   sizeStyles$9[size2],
                   "rounded border transition-colors",
@@ -7863,6 +7913,7 @@ const Checkbox = React.forwardRef(
         {
           id: errorId,
           role: hasError ? "alert" : void 0,
+          "data-testid": testId ? hasError ? `${testId}-error` : `${testId}-helper-text` : void 0,
           className: utils_index.cn(
             "mt-1 text-sm",
             hasError ? "text-error" : "text-primary-500 dark:text-primary-400"
@@ -7892,6 +7943,7 @@ const Radio = React.forwardRef(
     error: error2 = false,
     className,
     id,
+    testId,
     ...props
   }, ref) => {
     const radioId = id || (label ? `${props.name}-${label.toLowerCase().replace(/\s+/g, "-")}` : void 0);
@@ -7904,6 +7956,7 @@ const Radio = React.forwardRef(
           disabled ? "cursor-not-allowed opacity-50" : "cursor-pointer",
           className
         ),
+        "data-testid": testId,
         children: [
           /* @__PURE__ */ jsxRuntime.jsx(
             "input",
@@ -7912,6 +7965,7 @@ const Radio = React.forwardRef(
               type: "radio",
               id: radioId,
               disabled,
+              "data-testid": testId ? `${testId}-radio` : void 0,
               className: utils_index.cn(
                 sizeStyles$8[size2],
                 "border transition-colors",
@@ -7943,6 +7997,7 @@ const Radio = React.forwardRef(
                 "text-primary-700 dark:text-primary-200",
                 error2 && "text-error"
               ),
+              "data-testid": testId ? `${testId}-label` : void 0,
               children: label
             }
           )
@@ -7964,7 +8019,8 @@ function RadioGroup({
   disabled = false,
   orientation = "vertical",
   className,
-  isLoading = false
+  isLoading = false,
+  testId
 }) {
   const hasError = !!error2;
   const groupId = `${name}-group`;
@@ -7972,7 +8028,7 @@ function RadioGroup({
   const handleChange = (e2) => {
     onChange?.(e2.target.value);
   };
-  return /* @__PURE__ */ jsxRuntime.jsxs("fieldset", { className, role: "radiogroup", "aria-labelledby": label ? groupId : void 0, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("fieldset", { className, role: "radiogroup", "aria-labelledby": label ? groupId : void 0, "data-testid": testId, children: [
     label && /* @__PURE__ */ jsxRuntime.jsxs(
       "legend",
       {
@@ -7990,7 +8046,7 @@ function RadioGroup({
         className: utils_index.cn(
           orientation === "vertical" ? "space-y-2" : "flex flex-wrap gap-4"
         ),
-        children: options.map((option) => /* @__PURE__ */ jsxRuntime.jsx(
+        children: options.map((option, index2) => /* @__PURE__ */ jsxRuntime.jsx(
           Radio,
           {
             name,
@@ -8000,7 +8056,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
         ))
@@ -8010,6 +8067,7 @@ function RadioGroup({
       "p",
       {
         role: hasError ? "alert" : void 0,
+        "data-testid": testId ? hasError ? `${testId}-error` : `${testId}-helper-text` : void 0,
         className: utils_index.cn(
           "mt-2 text-sm",
           hasError ? "text-error" : "text-primary-500 dark:text-primary-400"
@@ -8045,11 +8103,12 @@ function Toggle({
   disabled = false,
   size: size2 = "md",
   className,
-  isLoading = false
+  isLoading = false,
+  testId
 }) {
   const currentSize = sizeStyles$7[size2];
   const isDisabled = disabled || isLoading;
-  return /* @__PURE__ */ jsxRuntime.jsx(W, { className, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
+  return /* @__PURE__ */ jsxRuntime.jsx(W, { className, "data-testid": testId, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
     (label || description) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 mr-4", children: [
       label && /* @__PURE__ */ jsxRuntime.jsx(
         Z,
@@ -8071,6 +8130,7 @@ function Toggle({
         disabled: isDisabled,
         onChange,
         "aria-label": !label ? "Toggle" : void 0,
+        "data-testid": testId ? `${testId}-toggle` : void 0,
         className: utils_index.cn(
           currentSize.switch,
           "relative inline-flex shrink-0 cursor-pointer rounded-full",
@@ -8156,7 +8216,8 @@ function Combobox({
   isLoading = false,
   loadingText = "Loading...",
   emptyText = "No results found",
-  onSearch
+  onSearch,
+  testId
 }) {
   const [query, setQuery] = React.useState("");
   const hasError = !!error2;
@@ -8176,12 +8237,13 @@ function Combobox({
     onChange?.(newValue);
     setQuery("");
   };
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: utils_index.cn(fullWidth ? "w-full" : "w-auto", className), children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: utils_index.cn(fullWidth ? "w-full" : "w-auto", className), "data-testid": testId, children: [
     label && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("span", { className: "ml-1 text-error", children: "*" })
@@ -8208,6 +8270,7 @@ function Combobox({
                   onSearch?.(newQuery);
                 },
                 placeholder,
+                "data-testid": testId ? `${testId}-input` : void 0,
                 className: utils_index.cn(
                   // Base styles - Light mode
                   "w-full rounded-md border bg-white px-4 py-2.5 pr-10 text-sm text-primary-900",
@@ -8241,30 +8304,39 @@ function Combobox({
               leaveFrom: "opacity-100",
               leaveTo: "opacity-0",
               afterLeave: () => setQuery(""),
-              children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-center gap-2 px-4 py-2.5 text-primary-500 dark:text-primary-400", children: [
-                /* @__PURE__ */ jsxRuntime.jsx(Spinner, { size: "sm", color: "primary" }),
-                /* @__PURE__ */ jsxRuntime.jsx("span", { children: loadingText })
-              ] }) : filteredOptions.length === 0 && query !== "" ? /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
-                Ho,
+              children: /* @__PURE__ */ jsxRuntime.jsx(
+                Uo,
                 {
-                  value: option.value,
-                  disabled: option.disabled,
-                  className: ({ active, selected }) => utils_index.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__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "block truncate", children: option.label }),
-                    selected && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute inset-y-0 left-0 flex items-center pl-3 text-gold-600 dark:text-gold-400", children: /* @__PURE__ */ jsxRuntime.jsx(CheckIcon, {}) })
-                  ] })
-                },
-                option.value
-              )) })
+                  portal: 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__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-center gap-2 px-4 py-2.5 text-primary-500 dark:text-primary-400", children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(Spinner, { size: "sm", color: "primary" }),
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { children: loadingText })
+                  ] }) : filteredOptions.length === 0 && query !== "" ? /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+                    Ho,
+                    {
+                      value: option.value,
+                      disabled: option.disabled,
+                      "data-testid": testId ? `${testId}-option-${index2}` : void 0,
+                      className: ({ active, selected }) => utils_index.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__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "block truncate", children: option.label }),
+                        selected && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute inset-y-0 left-0 flex items-center pl-3 text-gold-600 dark:text-gold-400", children: /* @__PURE__ */ jsxRuntime.jsx(CheckIcon, {}) })
+                      ] })
+                    },
+                    option.value
+                  ))
+                }
+              )
             }
           )
         ] })
@@ -8274,6 +8346,7 @@ function Combobox({
       "p",
       {
         role: hasError ? "alert" : void 0,
+        "data-testid": testId ? hasError ? `${testId}-error` : `${testId}-helper-text` : void 0,
         className: utils_index.cn(
           "mt-1.5 text-sm",
           hasError ? "text-error" : "text-primary-500 dark:text-primary-400"
@@ -8316,7 +8389,7 @@ const sizeStyles$6 = {
   lg: "px-3 py-1.5 text-base"
 };
 const Badge = React.forwardRef(
-  ({ variant = "default", size: size2 = "md", children, className, ...props }, ref) => {
+  ({ variant = "default", size: size2 = "md", children, className, testId, ...props }, ref) => {
     return /* @__PURE__ */ jsxRuntime.jsx(
       "span",
       {
@@ -8327,6 +8400,7 @@ const Badge = React.forwardRef(
           sizeStyles$6[size2],
           className
         ),
+        "data-testid": testId,
         ...props,
         children
       }
@@ -8496,6 +8570,7 @@ function Tabs({
   size: size2 = "md",
   className,
   "aria-label": ariaLabel = "Navigation tabs",
+  testId,
   ...props
 }) {
   const selectedIndex = React.useMemo(
@@ -8523,11 +8598,13 @@ function Tabs({
             fullWidth && "w-full",
             className
           ),
+          "data-testid": testId,
           ...props,
-          children: tabs.map((tab) => /* @__PURE__ */ jsxRuntime.jsx(
+          children: tabs.map((tab, index2) => /* @__PURE__ */ jsxRuntime.jsx(
             dt,
             {
               disabled: tab.disabled,
+              "data-testid": testId ? `${testId}-tab-${index2}` : void 0,
               className: ({ selected }) => utils_index.cn(
                 "relative outline-none transition-colors duration-normal",
                 "focus-visible:ring-2 focus-visible:ring-gold-500/50",
@@ -8574,6 +8651,7 @@ function TabContentPanels({
   children,
   className,
   isLoading = false,
+  testId,
   ...props
 }) {
   const activeContent = activeTab && children[activeTab];
@@ -8582,6 +8660,7 @@ function TabContentPanels({
     {
       role: "tabpanel",
       className: utils_index.cn("relative mt-4", className),
+      "data-testid": testId,
       ...props,
       children: [
         activeContent,
@@ -8646,6 +8725,7 @@ const Breadcrumbs = React.forwardRef(
     maxItems = 0,
     renderLink,
     className,
+    testId,
     ...props
   }, ref) => {
     const [isExpanded, setIsExpanded] = React.useState(false);
@@ -8697,12 +8777,20 @@ const Breadcrumbs = React.forwardRef(
         ref,
         "aria-label": "Breadcrumb",
         className: utils_index.cn("text-sm", className),
+        "data-testid": testId,
         ...props,
         children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(React.Fragment, { children: [
-            /* @__PURE__ */ jsxRuntime.jsx("li", { className: "inline-flex items-center", children: renderItem(item, index2, isLast) }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "li",
+              {
+                className: "inline-flex items-center",
+                "data-testid": testId ? `${testId}-item-${index2}` : void 0,
+                children: renderItem(item, index2, isLast)
+              }
+            ),
             showEllipsis && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
               /* @__PURE__ */ jsxRuntime.jsx("li", { className: "inline-flex items-center", "aria-hidden": "true", children: separatorElement }),
               /* @__PURE__ */ jsxRuntime.jsx("li", { className: "inline-flex items-center", children: /* @__PURE__ */ jsxRuntime.jsx(EllipsisButton, { onClick: () => setIsExpanded(true) }) })
@@ -8730,6 +8818,7 @@ const Skeleton = React.forwardRef(
     label = "Loading...",
     className,
     style,
+    testId,
     ...props
   }, ref) => {
     const widthValue = typeof width === "number" ? `${width}px` : width;
@@ -8744,6 +8833,7 @@ const Skeleton = React.forwardRef(
           role: "status",
           "aria-label": label,
           "aria-busy": "true",
+          "data-testid": testId,
           ...props,
           children: [
             Array.from({ length: lines }).map((_2, index2) => /* @__PURE__ */ jsxRuntime.jsx(
@@ -8785,6 +8875,7 @@ const Skeleton = React.forwardRef(
         role: "status",
         "aria-label": label,
         "aria-busy": "true",
+        "data-testid": testId,
         ...props,
         children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: label })
       }
@@ -8885,6 +8976,7 @@ const EmptyState = React.forwardRef(
     action,
     size: size2 = "md",
     className,
+    testId,
     ...props
   }, ref) => {
     const styles = sizeStyles$4[size2];
@@ -8897,9 +8989,17 @@ const EmptyState = React.forwardRef(
           styles.container,
           className
         ),
+        "data-testid": testId,
         ...props,
         children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: utils_index.cn(styles.icon, typeColors[type], "mb-4"), children: icon || defaultIcons$1[type] }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: utils_index.cn(styles.icon, typeColors[type], "mb-4"),
+              "data-testid": testId ? `${testId}-icon` : void 0,
+              children: icon || defaultIcons$1[type]
+            }
+          ),
           /* @__PURE__ */ jsxRuntime.jsx(
             "h3",
             {
@@ -8908,6 +9008,7 @@ const EmptyState = React.forwardRef(
                 "text-primary-900 dark:text-primary-100",
                 "mb-1"
               ),
+              "data-testid": testId ? `${testId}-title` : void 0,
               children: title
             }
           ),
@@ -8919,10 +9020,11 @@ const EmptyState = React.forwardRef(
                 "text-primary-500 dark:text-primary-400",
                 "max-w-sm mb-4"
               ),
+              "data-testid": testId ? `${testId}-description` : void 0,
               children: description
             }
           ),
-          action && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-2", children: action })
+          action && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-2", "data-testid": testId ? `${testId}-action` : void 0, children: action })
         ]
       }
     );
@@ -8978,7 +9080,8 @@ function Pagination({
   totalItems,
   disabled = false,
   size: size2 = "md",
-  className
+  className,
+  testId
 }) {
   const pageSizeId = React.useId();
   const currentSize = sizeStyles$3[size2];
@@ -9011,13 +9114,14 @@ function Pagination({
   };
   if (variant === "load-more") {
     if (!canGoNext) return null;
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: utils_index.cn("flex justify-center", className), children: /* @__PURE__ */ jsxRuntime.jsx(
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: utils_index.cn("flex justify-center", className), "data-testid": testId, children: /* @__PURE__ */ jsxRuntime.jsx(
       Button,
       {
         variant: "secondary",
         size: size2 === "sm" ? "sm" : "md",
         onClick: handleNext,
         disabled,
+        "data-testid": testId ? `${testId}-load-more` : void 0,
         children: "Load more"
       }
     ) });
@@ -9028,6 +9132,7 @@ function Pagination({
       {
         "aria-label": "Pagination",
         className: utils_index.cn("flex items-center justify-between gap-4", className),
+        "data-testid": testId,
         children: [
           /* @__PURE__ */ jsxRuntime.jsxs(
             Button,
@@ -9037,6 +9142,7 @@ function Pagination({
               onClick: handlePrevious,
               disabled: disabled || !canGoPrevious,
               "aria-label": "Previous page",
+              "data-testid": testId ? `${testId}-prev` : void 0,
               children: [
                 /* @__PURE__ */ jsxRuntime.jsx(ChevronLeftIcon, {}),
                 /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-1", children: "Previous" })
@@ -9057,6 +9163,7 @@ function Pagination({
               onClick: handleNext,
               disabled: disabled || !canGoNext,
               "aria-label": "Next page",
+              "data-testid": testId ? `${testId}-next` : void 0,
               children: [
                 /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mr-1", children: "Next" }),
                 /* @__PURE__ */ jsxRuntime.jsx(ChevronRightIcon, {})
@@ -9072,6 +9179,7 @@ function Pagination({
     {
       "aria-label": "Pagination",
       className: utils_index.cn("flex items-center justify-between gap-4", className),
+      "data-testid": testId,
       children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-4", children: [
           itemsRange && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: utils_index.cn("text-primary-600 dark:text-primary-400", currentSize.text), children: [
@@ -9118,6 +9226,7 @@ function Pagination({
               onClick: handlePrevious,
               disabled: disabled || !canGoPrevious,
               "aria-label": "Previous page",
+              "data-testid": testId ? `${testId}-prev` : void 0,
               className: utils_index.cn(
                 "inline-flex items-center justify-center rounded-md",
                 "border border-primary-300 dark:border-primary-600",
@@ -9152,6 +9261,7 @@ function Pagination({
                 disabled,
                 "aria-label": `Page ${page}`,
                 "aria-current": page === currentPage ? "page" : void 0,
+                "data-testid": testId ? `${testId}-page-${page}` : void 0,
                 className: utils_index.cn(
                   "inline-flex items-center justify-center rounded-md",
                   "border transition-colors",
@@ -9180,6 +9290,7 @@ function Pagination({
               onClick: handleNext,
               disabled: disabled || !canGoNext,
               "aria-label": "Next page",
+              "data-testid": testId ? `${testId}-next` : void 0,
               className: utils_index.cn(
                 "inline-flex items-center justify-center rounded-md",
                 "border border-primary-300 dark:border-primary-600",
@@ -9247,7 +9358,8 @@ function MultiSelect({
   required = false,
   disabled = false,
   fullWidth = false,
-  className
+  className,
+  testId
 }) {
   const [query, setQuery] = React.useState("");
   const searchInputRef = React.useRef(null);
@@ -9303,12 +9415,13 @@ function MultiSelect({
   };
   const displayedChips = selectedOptions.slice(0, maxDisplayedItems);
   const hiddenCount = selectedOptions.length - maxDisplayedItems;
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: utils_index.cn(fullWidth ? "w-full" : "w-auto", className), children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: utils_index.cn(fullWidth ? "w-full" : "w-auto", className), "data-testid": testId, children: [
     label && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("span", { className: "ml-1 text-error", children: "*" })
@@ -9336,7 +9449,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__ */ jsxRuntime.jsxs(
+                displayedChips.map((option, index2) => /* @__PURE__ */ jsxRuntime.jsxs(
                   "span",
                   {
                     className: utils_index.cn(
@@ -9344,6 +9457,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__ */ jsxRuntime.jsx(
@@ -9402,8 +9516,10 @@ function MultiSelect({
               children: /* @__PURE__ */ jsxRuntime.jsx(
                 Bt,
                 {
+                  portal: true,
                   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__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-center gap-2 px-4 py-2.5 text-primary-500 dark:text-primary-400", children: [
                     /* @__PURE__ */ jsxRuntime.jsx(Spinner, { size: "sm", color: "primary" }),
                     /* @__PURE__ */ jsxRuntime.jsx("span", { children: loadingText })
@@ -9419,6 +9535,7 @@ function MultiSelect({
                           value: query,
                           onChange: handleSearchChange,
                           placeholder: "Search...",
+                          "data-testid": testId ? `${testId}-input` : void 0,
                           className: utils_index.cn(
                             "w-full rounded border border-primary-300 px-2 py-1 text-sm",
                             "bg-white dark:bg-primary-900",
@@ -9460,11 +9577,12 @@ function MultiSelect({
                         ]
                       }
                     ),
-                    filteredOptions.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-4 py-2.5 text-primary-500 dark:text-primary-400", children: emptyText }) : filteredOptions.map((option) => /* @__PURE__ */ jsxRuntime.jsxs(
+                    filteredOptions.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-4 py-2.5 text-primary-500 dark:text-primary-400", children: emptyText }) : filteredOptions.map((option, index2) => /* @__PURE__ */ jsxRuntime.jsxs(
                       It,
                       {
                         value: option.value,
                         disabled: option.disabled,
+                        "data-testid": testId ? `${testId}-option-${index2}` : void 0,
                         className: ({ active }) => utils_index.cn(
                           "flex cursor-pointer items-center gap-2 px-4 py-2.5",
                           active && "bg-primary-50 dark:bg-primary-700",
@@ -9498,6 +9616,7 @@ function MultiSelect({
       "p",
       {
         role: hasError ? "alert" : void 0,
+        "data-testid": testId ? hasError ? `${testId}-error` : `${testId}-helper-text` : void 0,
         className: utils_index.cn(
           "mt-1.5 text-sm",
           hasError ? "text-error" : "text-primary-500 dark:text-primary-400"
@@ -9566,6 +9685,7 @@ function SidebarItem({
   onNavigate,
   LinkComponent,
   className,
+  testId,
   ...props
 }) {
   if (!shouldShowItem(item)) {
@@ -9612,6 +9732,7 @@ function SidebarItem({
         disabled: item.disabled,
         "aria-label": item["aria-label"] || item.label,
         title: collapsed ? item.label : void 0,
+        "data-testid": testId,
         className: utils_index.cn(
           // Base styles
           "flex w-full items-center rounded-lg font-medium",
@@ -9644,6 +9765,7 @@ function SidebarItem({
     {
       to: item.href,
       onClick: handleClick,
+      "data-testid": testId,
       className: utils_index.cn(
         // Base styles
         "flex items-center rounded-lg font-medium",
@@ -9781,6 +9903,7 @@ const Sidebar = React.forwardRef(
     collapsedWidth = "4rem",
     className,
     "aria-label": ariaLabel = "Main navigation",
+    testId,
     ...props
   }, ref) => {
     React.useEffect(() => {
@@ -9888,6 +10011,7 @@ const Sidebar = React.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__ */ jsxRuntime.jsx(
             "svg",
             {
@@ -9919,7 +10043,8 @@ const Sidebar = React.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__ */ jsxRuntime.jsx(
@@ -9940,6 +10065,7 @@ const Sidebar = React.forwardRef(
           ),
           style: { width: sidebarWidth },
           "aria-label": ariaLabel,
+          "data-testid": testId,
           ...props,
           children: sidebarContent
         }
@@ -9994,7 +10120,7 @@ const variantStyles = {
   }
 };
 const Alert = React.forwardRef(
-  ({ variant = "info", title, message, icon, onClose, className, ...props }, ref) => {
+  ({ variant = "info", title, message, icon, onClose, className, testId, ...props }, ref) => {
     const styles = variantStyles[variant];
     const displayIcon = icon === null ? null : icon ?? defaultIcons[variant];
     return /* @__PURE__ */ jsxRuntime.jsx(
@@ -10007,9 +10133,18 @@ const Alert = React.forwardRef(
           styles.container,
           className
         ),
+        "data-testid": testId,
         ...props,
         children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start", children: [
-          displayIcon !== null && /* @__PURE__ */ jsxRuntime.jsx("div", { className: utils_index.cn("flex-shrink-0", styles.icon), "aria-hidden": "true", children: displayIcon }),
+          displayIcon !== null && /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: utils_index.cn("flex-shrink-0", styles.icon),
+              "aria-hidden": "true",
+              "data-testid": testId ? `${testId}-icon` : void 0,
+              children: displayIcon
+            }
+          ),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: utils_index.cn("flex-1", displayIcon !== null && "ml-3"), children: [
             title && /* @__PURE__ */ jsxRuntime.jsx("h3", { className: utils_index.cn("text-sm font-medium", styles.title), children: title }),
             /* @__PURE__ */ jsxRuntime.jsx("div", { className: utils_index.cn("text-sm", title && "mt-1"), children: message })
@@ -10025,6 +10160,7 @@ const Alert = React.forwardRef(
                 "focus:ring-current/20",
                 "dark:focus:ring-offset-primary-900"
               ),
+              "data-testid": testId ? `${testId}-close-button` : void 0,
               children: [
                 /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Dismiss" }),
                 /* @__PURE__ */ jsxRuntime.jsx(XMarkIcon, {})
@@ -10051,7 +10187,7 @@ const statusStyles = {
   busy: "bg-error"
 };
 const Avatar = React.forwardRef(
-  ({ name, src, size: size2 = "md", alt, status, className, ...props }, ref) => {
+  ({ name, src, size: size2 = "md", alt, status, className, testId, ...props }, ref) => {
     const getInitials = (fullName) => {
       const names = fullName.trim().split(" ");
       if (names.length === 1) {
@@ -10077,6 +10213,7 @@ const Avatar = React.forwardRef(
           styles.container,
           className
         ),
+        "data-testid": testId,
         ...props,
         children: [
           src ? /* @__PURE__ */ jsxRuntime.jsx(
@@ -10084,7 +10221,8 @@ const Avatar = React.forwardRef(
             {
               src,
               alt: alt || `${name}'s avatar`,
-              className: "w-full h-full rounded-full object-cover"
+              className: "w-full h-full rounded-full object-cover",
+              "data-testid": testId ? `${testId}-image` : void 0
             }
           ) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles.text, children: initials }),
           status && /* @__PURE__ */ jsxRuntime.jsx(
@@ -10097,7 +10235,8 @@ const Avatar = React.forwardRef(
                 styles.status,
                 statusStyles[status]
               ),
-              "aria-label": `Status: ${status}`
+              "aria-label": `Status: ${status}`,
+              "data-testid": testId ? `${testId}-status` : void 0
             }
           )
         ]