myoperator-mcp 0.2.124 → 0.2.126

package/dist/index.js

@@ -139,7 +139,7 @@ export interface AccordionProps
   onValueChange?: (value: string[]) => void;
 }
 
-const Accordion = React.forwardRef(
+const Accordion = React.forwardRef<HTMLDivElement, AccordionProps>(
   (
     {
       className,
@@ -150,8 +150,8 @@ const Accordion = React.forwardRef(
       onValueChange,
       children,
       ...props
-    }: AccordionProps,
-    ref: React.Ref<HTMLDivElement>
+    },
+    ref
   ) => {
     const [internalValue, setInternalValue] =
       React.useState<string[]>(defaultValue);
@@ -207,8 +207,8 @@ export interface AccordionItemProps
   disabled?: boolean;
 }
 
-const AccordionItem = React.forwardRef(
-  ({ className, value, disabled, children, ...props }: AccordionItemProps, ref: React.Ref<HTMLDivElement>) => {
+const AccordionItem = React.forwardRef<HTMLDivElement, AccordionItemProps>(
+  ({ className, value, disabled, children, ...props }, ref) => {
     const { value: openValues, variant } = useAccordionContext();
     const isOpen = openValues.includes(value);
 
@@ -248,7 +248,10 @@ export interface AccordionTriggerProps
   showChevron?: boolean;
 }
 
-const AccordionTrigger = React.forwardRef(({ className, showChevron = true, children, ...props }: AccordionTriggerProps, ref: React.Ref<HTMLButtonElement>) => {
+const AccordionTrigger = React.forwardRef<
+  HTMLButtonElement,
+  AccordionTriggerProps
+>(({ className, showChevron = true, children, ...props }, ref) => {
   const {
     type,
     value: openValues,
@@ -307,7 +310,10 @@ export interface AccordionContentProps
     React.HTMLAttributes<HTMLDivElement>,
     VariantProps<typeof accordionContentVariants> {}
 
-const AccordionContent = React.forwardRef(({ className, children, ...props }: AccordionContentProps, ref: React.Ref<HTMLDivElement>) => {
+const AccordionContent = React.forwardRef<
+  HTMLDivElement,
+  AccordionContentProps
+>(({ className, children, ...props }, ref) => {
   const { variant } = useAccordionContext();
   const { isOpen } = useAccordionItemContext();
   const contentRef = React.useRef<HTMLDivElement>(null);
@@ -442,7 +448,7 @@ export interface AlertProps
   defaultOpen?: boolean;
 }
 
-const Alert = React.forwardRef(
+const Alert = React.forwardRef<HTMLDivElement, AlertProps>(
   (
     {
       className,
@@ -457,8 +463,8 @@ const Alert = React.forwardRef(
       defaultOpen = true,
       children,
       ...props
-    }: AlertProps,
-    ref: React.Ref<HTMLDivElement>
+    },
+    ref
   ) => {
     const [internalOpen, setInternalOpen] = React.useState(defaultOpen);
     const isControlled = controlledOpen !== undefined;
@@ -530,19 +536,27 @@ Alert.displayName = "Alert";
 /**
  * Alert title component for the heading text.
  */
-const AlertTitle = React.forwardRef(({ className, ...props }: React.HTMLAttributes<HTMLHeadingElement>, ref: React.Ref<HTMLHeadingElement>) => (
+const AlertTitle = React.forwardRef<
+  HTMLHeadingElement,
+  React.HTMLAttributes<HTMLHeadingElement>
+>(({ className, children, ...props }, ref) => (
   <h5
     ref={ref}
     className={cn("font-semibold leading-tight tracking-tight", className)}
     {...props}
-  />
+  >
+    {children}
+  </h5>
 ));
 AlertTitle.displayName = "AlertTitle";
 
 /**
  * Alert description component for the body text.
  */
-const AlertDescription = React.forwardRef(({ className, ...props }: React.HTMLAttributes<HTMLParagraphElement>, ref: React.Ref<HTMLParagraphElement>) => (
+const AlertDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (
   <p ref={ref} className={cn("m-0 mt-1 text-sm", className)} {...props} />
 ));
 AlertDescription.displayName = "AlertDescription";
@@ -634,7 +648,7 @@ export interface AvatarProps
  * <Avatar initials="AS" size="xs" />
  * \`\`\`
  */
-const Avatar = React.forwardRef(
+const Avatar = React.forwardRef<HTMLDivElement, AvatarProps>(
   (
     {
       className,
@@ -647,8 +661,8 @@ const Avatar = React.forwardRef(
       status,
       children,
       ...props
-    }: AvatarProps,
-    ref: React.Ref<HTMLDivElement>
+    },
+    ref
   ) => {
     const resolvedSize = size ?? "md";
     const displayInitials = initials ?? (name ? getInitials(name) : undefined);
@@ -760,7 +774,7 @@ export interface BadgeProps
   asChild?: boolean;
 }
 
-const Badge = React.forwardRef(
+const Badge = React.forwardRef<HTMLDivElement, BadgeProps>(
   (
     {
       className,
@@ -771,8 +785,8 @@ const Badge = React.forwardRef(
       asChild = false,
       children,
       ...props
-    }: BadgeProps,
-    ref: React.Ref<HTMLDivElement>
+    },
+    ref
   ) => {
     const Comp = asChild ? Slot : "div";
 
@@ -828,12 +842,12 @@ const buttonVariants = cva(
         success:
           "bg-semantic-success-primary text-semantic-text-inverted hover:bg-semantic-success-hover",
         outline:
-          "border border-[var(--color-neutral-300,#D5D7DA)] bg-semantic-bg-primary text-semantic-text-secondary hover:bg-semantic-primary-surface",
+          "border border-semantic-border-layout bg-semantic-bg-primary text-semantic-text-secondary hover:bg-semantic-primary-surface",
         secondary:
           "bg-semantic-primary-surface text-semantic-text-secondary hover:bg-semantic-bg-hover",
         ghost:
           "text-semantic-text-muted hover:bg-semantic-bg-ui hover:text-semantic-text-primary",
-        link: "text-semantic-text-link underline-offset-4 hover:underline",
+        link: "text-semantic-text-secondary underline-offset-4 hover:underline",
         dashed:
           "border border-dashed border-semantic-bg-hover bg-transparent text-semantic-text-muted hover:border-semantic-border-primary hover:text-semantic-text-secondary hover:bg-[var(--color-neutral-50)]",
       },
@@ -879,7 +893,7 @@ export interface ButtonProps
   loadingText?: string;
 }
 
-const Button = React.forwardRef(
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
   (
     {
       className,
@@ -893,8 +907,8 @@ const Button = React.forwardRef(
       children,
       disabled,
       ...props
-    }: ButtonProps,
-    ref: React.Ref<HTMLButtonElement>
+    },
+    ref
   ) => {
     const Comp = asChild ? Slot : "button";
 
@@ -1016,7 +1030,10 @@ export interface CheckboxProps
   separateLabel?: boolean;
 }
 
-const Checkbox = React.forwardRef(
+const Checkbox = React.forwardRef<
+  React.ElementRef<typeof CheckboxPrimitive.Root>,
+  CheckboxProps
+>(
   (
     {
       className,
@@ -1029,8 +1046,8 @@ const Checkbox = React.forwardRef(
       id,
       disabled,
       ...props
-    }: CheckboxProps,
-    ref: React.Ref<React.ElementRef<typeof CheckboxPrimitive.Root>>
+    },
+    ref
   ) => {
     const checkbox = (
       <CheckboxPrimitive.Root
@@ -1204,7 +1221,10 @@ export interface ConfirmationModalProps {
  * />
  * \`\`\`
  */
-const ConfirmationModal = React.forwardRef(
+const ConfirmationModal = React.forwardRef<
+  HTMLDivElement,
+  ConfirmationModalProps
+>(
   (
     {
       open,
@@ -1219,8 +1239,8 @@ const ConfirmationModal = React.forwardRef(
       cancelButtonText = "Cancel",
       trigger,
       className,
-    }: ConfirmationModalProps,
-    ref: React.Ref<HTMLDivElement>
+    },
+    ref
   ) => {
     const handleConfirm = () => {
       onConfirm?.();
@@ -1299,7 +1319,7 @@ export interface ContactListItemProps
  * />
  * \`\`\`
  */
-const ContactListItem = React.forwardRef(
+const ContactListItem = React.forwardRef<HTMLDivElement, ContactListItemProps>(
   (
     {
       name,
@@ -1310,8 +1330,8 @@ const ContactListItem = React.forwardRef(
       onClick,
       className,
       ...props
-    }: ContactListItemProps,
-    ref: React.Ref<HTMLDivElement>
+    },
+    ref
   ) => {
     return (
       <div
@@ -1418,7 +1438,10 @@ export interface CreatableMultiSelectProps
   maxLengthPerItem?: number
 }
 
-const CreatableMultiSelect = React.forwardRef(
+const CreatableMultiSelect = React.forwardRef<
+  HTMLDivElement,
+  CreatableMultiSelectProps
+>(
   (
     {
       className,
@@ -1433,13 +1456,14 @@ const CreatableMultiSelect = React.forwardRef(
       maxItems,
       maxLengthPerItem,
       ...props
-    }: CreatableMultiSelectProps,
-    ref: React.Ref<HTMLDivElement>
+    },
+    ref
   ) => {
     const [isOpen, setIsOpen] = React.useState(false)
     const [inputValue, setInputValue] = React.useState("")
     const containerRef = React.useRef<HTMLDivElement>(null)
     const inputRef = React.useRef<HTMLInputElement>(null)
+    const listboxId = React.useId()
 
     React.useImperativeHandle(ref, () => containerRef.current!)
 
@@ -1577,6 +1601,7 @@ const CreatableMultiSelect = React.forwardRef(
             className="flex-1 min-w-[100px] text-base bg-transparent outline-none text-semantic-text-primary placeholder:text-semantic-text-muted"
             role="combobox"
             aria-expanded={isOpen}
+            aria-controls={listboxId}
             aria-haspopup="listbox"
           />
 
@@ -1590,7 +1615,7 @@ const CreatableMultiSelect = React.forwardRef(
 
         {/* Dropdown panel */}
         {isOpen && (
-          <div className="absolute z-[9999] top-full mt-1 w-full bg-semantic-bg-primary border border-semantic-border-layout rounded shadow-md animate-in fade-in-0 zoom-in-95 slide-in-from-top-2 duration-200">
+          <div id={listboxId} role="listbox" className="absolute z-[9999] top-full mt-1 w-full bg-semantic-bg-primary border border-semantic-border-layout rounded shadow-md animate-in fade-in-0 zoom-in-95 slide-in-from-top-2 duration-200">
             {/* Creatable hint \u2014 Enter key */}
             <div className="flex items-center justify-between px-4 py-2 border-b border-semantic-border-layout">
               <span className="text-sm text-semantic-text-muted">
@@ -1708,7 +1733,7 @@ export interface CreatableSelectProps
   maxLength?: number
 }
 
-const CreatableSelect = React.forwardRef(
+const CreatableSelect = React.forwardRef<HTMLDivElement, CreatableSelectProps>(
   (
     {
       className,
@@ -1721,8 +1746,8 @@ const CreatableSelect = React.forwardRef(
       disabled = false,
       maxLength,
       ...props
-    }: CreatableSelectProps,
-    ref: React.Ref<HTMLDivElement>
+    },
+    ref
   ) => {
     const [open, setOpen] = React.useState(false)
     const [search, setSearch] = React.useState("")
@@ -1730,6 +1755,7 @@ const CreatableSelect = React.forwardRef(
     const containerRef = React.useRef<HTMLDivElement>(null)
     const inputRef = React.useRef<HTMLInputElement>(null)
     const listRef = React.useRef<HTMLDivElement>(null)
+    const listboxId = React.useId()
 
     // Merge forwarded ref with internal ref
     React.useImperativeHandle(ref, () => containerRef.current!)
@@ -1872,6 +1898,7 @@ const CreatableSelect = React.forwardRef(
               placeholder={selectedLabel || placeholder}
               aria-expanded="true"
               aria-haspopup="listbox"
+              aria-controls={listboxId}
               role="combobox"
               aria-autocomplete="list"
             />
@@ -1888,6 +1915,7 @@ const CreatableSelect = React.forwardRef(
             )}
             aria-haspopup="listbox"
             aria-expanded="false"
+            aria-controls={listboxId}
           >
             <span
               className={cn(
@@ -1917,6 +1945,7 @@ const CreatableSelect = React.forwardRef(
             {/* Options list */}
             <div
               ref={listRef}
+              id={listboxId}
               role="listbox"
               className="max-h-60 overflow-y-auto p-1"
             >
@@ -1999,8 +2028,8 @@ export interface DateDividerProps
   children: React.ReactNode;
 }
 
-const DateDivider = React.forwardRef(
-  ({ className, children, ...props }: DateDividerProps, ref: React.Ref<HTMLDivElement>) => (
+const DateDivider = React.forwardRef<HTMLDivElement, DateDividerProps>(
+  ({ className, children, ...props }, ref) => (
     <div
       ref={ref}
       className={cn("flex items-center gap-4 my-4", className)}
@@ -2086,7 +2115,10 @@ export interface DeleteConfirmationModalProps {
  * />
  * \`\`\`
  */
-const DeleteConfirmationModal = React.forwardRef(
+const DeleteConfirmationModal = React.forwardRef<
+  HTMLDivElement,
+  DeleteConfirmationModalProps
+>(
   (
     {
       open,
@@ -2102,8 +2134,8 @@ const DeleteConfirmationModal = React.forwardRef(
       cancelButtonText = "Cancel",
       trigger,
       className,
-    }: DeleteConfirmationModalProps,
-    ref: React.Ref<HTMLDivElement>
+    },
+    ref
   ) => {
     const [inputValue, setInputValue] = React.useState("");
     const isConfirmEnabled = inputValue === confirmText;
@@ -2199,7 +2231,10 @@ const DialogPortal = DialogPrimitive.Portal;
 
 const DialogClose = DialogPrimitive.Close;
 
-const DialogOverlay = React.forwardRef(({ className, ...props }: React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>, ref: React.Ref<React.ElementRef<typeof DialogPrimitive.Overlay>>) => (
+const DialogOverlay = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
   <DialogPrimitive.Overlay
     ref={ref}
     className={cn(
@@ -2257,7 +2292,10 @@ const hasDialogDescription = (children: React.ReactNode): boolean => {
   return found;
 };
 
-const DialogContent = React.forwardRef(({ className, children, size, hideCloseButton = false, ...props }: DialogContentProps, ref: React.Ref<React.ElementRef<typeof DialogPrimitive.Content>>) => {
+const DialogContent = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Content>,
+  DialogContentProps
+>(({ className, children, size, hideCloseButton = false, ...props }, ref) => {
   const hasDescription = hasDialogDescription(children);
 
   return (
@@ -2315,7 +2353,10 @@ const DialogFooter = ({
 );
 DialogFooter.displayName = "DialogFooter";
 
-const DialogTitle = React.forwardRef(({ className, ...props }: React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>, ref: React.Ref<React.ElementRef<typeof DialogPrimitive.Title>>) => (
+const DialogTitle = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
   <DialogPrimitive.Title
     ref={ref}
     className={cn(
@@ -2327,7 +2368,10 @@ const DialogTitle = React.forwardRef(({ className, ...props }: React.ComponentPr
 ));
 DialogTitle.displayName = DialogPrimitive.Title.displayName;
 
-const DialogDescription = React.forwardRef(({ className, ...props }: React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>, ref: React.Ref<React.ElementRef<typeof DialogPrimitive.Description>>) => (
+const DialogDescription = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
   <DialogPrimitive.Description
     ref={ref}
     className={cn("text-sm text-muted-foreground", className)}
@@ -2358,7 +2402,10 @@ import { cn } from "@/lib/utils";
 
 const DropdownMenu = DropdownMenuPrimitive.Root;
 
-const DropdownMenuTrigger = React.forwardRef(({ className, ...props }: React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Trigger>, ref: React.Ref<React.ElementRef<typeof DropdownMenuPrimitive.Trigger>>) => (
+const DropdownMenuTrigger = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Trigger>
+>(({ className, ...props }, ref) => (
   <DropdownMenuPrimitive.Trigger
     ref={ref}
     className={cn("focus-visible:outline-none focus-visible:ring-0", className)}
@@ -2375,9 +2422,12 @@ const DropdownMenuSub = DropdownMenuPrimitive.Sub;
 
 const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
 
-const DropdownMenuSubTrigger = React.forwardRef(({ className, inset, children, ...props }: React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
+const DropdownMenuSubTrigger = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
     inset?: boolean;
-  }, ref: React.Ref<React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>>) => (
+  }
+>(({ className, inset, children, ...props }, ref) => (
   <DropdownMenuPrimitive.SubTrigger
     ref={ref}
     className={cn(
@@ -2394,7 +2444,10 @@ const DropdownMenuSubTrigger = React.forwardRef(({ className, inset, children, .
 DropdownMenuSubTrigger.displayName =
   DropdownMenuPrimitive.SubTrigger.displayName;
 
-const DropdownMenuSubContent = React.forwardRef(({ className, ...props }: React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>, ref: React.Ref<React.ElementRef<typeof DropdownMenuPrimitive.SubContent>>) => (
+const DropdownMenuSubContent = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
+>(({ className, ...props }, ref) => (
   <DropdownMenuPrimitive.SubContent
     ref={ref}
     className={cn(
@@ -2407,7 +2460,10 @@ const DropdownMenuSubContent = React.forwardRef(({ className, ...props }: React.
 DropdownMenuSubContent.displayName =
   DropdownMenuPrimitive.SubContent.displayName;
 
-const DropdownMenuContent = React.forwardRef(({ className, sideOffset = 4, ...props }: React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>, ref: React.Ref<React.ElementRef<typeof DropdownMenuPrimitive.Content>>) => (
+const DropdownMenuContent = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
   <DropdownMenuPrimitive.Portal>
     <DropdownMenuPrimitive.Content
       ref={ref}
@@ -2423,13 +2479,16 @@ const DropdownMenuContent = React.forwardRef(({ className, sideOffset = 4, ...pr
 ));
 DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
 
-const DropdownMenuItem = React.forwardRef(({ className, inset, children, description, suffix, ...props }: React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
+const DropdownMenuItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
     inset?: boolean;
     /** Secondary text displayed below children */
     description?: string;
     /** Content displayed at the right edge of the item */
     suffix?: React.ReactNode;
-  }, ref: React.Ref<React.ElementRef<typeof DropdownMenuPrimitive.Item>>) => (
+  }
+>(({ className, inset, children, description, suffix, ...props }, ref) => (
   <DropdownMenuPrimitive.Item
     ref={ref}
     className={cn(
@@ -2454,12 +2513,15 @@ const DropdownMenuItem = React.forwardRef(({ className, inset, children, descrip
 ));
 DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
 
-const DropdownMenuCheckboxItem = React.forwardRef(({ className, children, checked, description, suffix, ...props }: React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem> & {
+const DropdownMenuCheckboxItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem> & {
     /** Secondary text displayed below children */
     description?: string;
     /** Content displayed at the right edge of the item */
     suffix?: React.ReactNode;
-  }, ref: React.Ref<React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>>) => (
+  }
+>(({ className, children, checked, description, suffix, ...props }, ref) => (
   <DropdownMenuPrimitive.CheckboxItem
     ref={ref}
     className={cn(
@@ -2490,12 +2552,15 @@ const DropdownMenuCheckboxItem = React.forwardRef(({ className, children, checke
 DropdownMenuCheckboxItem.displayName =
   DropdownMenuPrimitive.CheckboxItem.displayName;
 
-const DropdownMenuRadioItem = React.forwardRef(({ className, children, description, suffix, ...props }: React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem> & {
+const DropdownMenuRadioItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem> & {
     /** Secondary text displayed below children */
     description?: string;
     /** Content displayed at the right edge of the item */
     suffix?: React.ReactNode;
-  }, ref: React.Ref<React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>>) => (
+  }
+>(({ className, children, description, suffix, ...props }, ref) => (
   <DropdownMenuPrimitive.RadioItem
     ref={ref}
     className={cn(
@@ -2524,9 +2589,12 @@ const DropdownMenuRadioItem = React.forwardRef(({ className, children, descripti
 ));
 DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
 
-const DropdownMenuLabel = React.forwardRef(({ className, inset, ...props }: React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
+const DropdownMenuLabel = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
     inset?: boolean;
-  }, ref: React.Ref<React.ElementRef<typeof DropdownMenuPrimitive.Label>>) => (
+  }
+>(({ className, inset, ...props }, ref) => (
   <DropdownMenuPrimitive.Label
     ref={ref}
     className={cn(
@@ -2539,7 +2607,10 @@ const DropdownMenuLabel = React.forwardRef(({ className, inset, ...props }: Reac
 ));
 DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
 
-const DropdownMenuSeparator = React.forwardRef(({ className, ...props }: React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>, ref: React.Ref<React.ElementRef<typeof DropdownMenuPrimitive.Separator>>) => (
+const DropdownMenuSeparator = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
+>(({ className, ...props }, ref) => (
   <DropdownMenuPrimitive.Separator
     ref={ref}
     className={cn("-mx-1 my-1 h-px bg-semantic-border-layout", className)}
@@ -2706,7 +2777,7 @@ export interface FormModalProps {
  * </FormModal>
  * \`\`\`
  */
-const FormModal = React.forwardRef(
+const FormModal = React.forwardRef<HTMLDivElement, FormModalProps>(
   (
     {
       open,
@@ -2722,8 +2793,8 @@ const FormModal = React.forwardRef(
       disableSave = false,
       className,
       size = "sm",
-    }: FormModalProps,
-    ref: React.Ref<HTMLDivElement>
+    },
+    ref
   ) => {
     const handleSave = () => {
       onSave?.();
@@ -2797,8 +2868,8 @@ export interface ImageMediaProps extends React.HTMLAttributes<HTMLDivElement> {
   maxHeight?: number | string;
 }
 
-const ImageMedia = React.forwardRef(
-  ({ className, src, alt = "Image", maxHeight = 280, ...props }: ImageMediaProps, ref: React.Ref<HTMLDivElement>) => {
+const ImageMedia = React.forwardRef<HTMLDivElement, ImageMediaProps>(
+  ({ className, src, alt = "Image", maxHeight = 280, ...props }, ref) => {
     const maxHeightStyle =
       typeof maxHeight === "number" ? \`\${maxHeight}px\` : maxHeight;
 
@@ -2833,9 +2904,9 @@ const inputVariants = cva(
     variants: {
       state: {
         default:
-          "border border-semantic-border-input focus:outline-none focus:border-semantic-border-input-focus focus:shadow-[0_0_0_1px_rgba(43,188,202,0.15)]",
+          "border border-semantic-border-input hover:border-semantic-border-input-focus focus:outline-none focus:border-semantic-border-input-focus focus:shadow-[0_0_0_1px_rgba(43,188,202,0.15)]",
         error:
-          "border border-semantic-error-primary/40 focus:outline-none focus:border-semantic-error-primary focus:shadow-[0_0_0_1px_rgba(240,68,56,0.1)]",
+          "border border-semantic-error-primary/40 hover:border-semantic-error-primary focus:outline-none focus:border-semantic-error-primary focus:shadow-[0_0_0_1px_rgba(240,68,56,0.1)]",
       },
     },
     defaultVariants: {
@@ -2862,8 +2933,8 @@ export interface InputProps
   showCheckIcon?: boolean;
 }
 
-const Input = React.forwardRef(
-  ({ className, state, type, showCheckIcon, onFocus, onBlur, onWheel, ...props }: InputProps, ref: React.Ref<HTMLInputElement>) => {
+const Input = React.forwardRef<HTMLInputElement, InputProps>(
+  ({ className, state, type, showCheckIcon, onFocus, onBlur, onWheel, ...props }, ref) => {
     const [isFocused, setIsFocused] = React.useState(false);
 
     const inputEl = (
@@ -3007,7 +3078,7 @@ export interface MultiSelectProps extends VariantProps<
  * />
  * \`\`\`
  */
-const MultiSelect = React.forwardRef(
+const MultiSelect = React.forwardRef<HTMLButtonElement, MultiSelectProps>(
   (
     {
       label,
@@ -3030,8 +3101,8 @@ const MultiSelect = React.forwardRef(
       state,
       id,
       name,
-    }: MultiSelectProps,
-    ref: React.Ref<HTMLButtonElement>
+    },
+    ref
   ) => {
     // Internal state for selected values (uncontrolled mode)
     const [internalValue, setInternalValue] =
@@ -3054,6 +3125,7 @@ const MultiSelect = React.forwardRef(
     // Generate unique IDs for accessibility
     const generatedId = React.useId();
     const selectId = id || generatedId;
+    const listboxId = \`\${selectId}-listbox\`;
     const helperId = \`\${selectId}-helper\`;
     const errorId = \`\${selectId}-error\`;
 
@@ -3167,6 +3239,7 @@ const MultiSelect = React.forwardRef(
           role="combobox"
           aria-expanded={isOpen}
           aria-haspopup="listbox"
+          aria-controls={listboxId}
           aria-invalid={!!error}
           aria-describedby={ariaDescribedBy}
           disabled={disabled || loading}
@@ -3246,6 +3319,7 @@ const MultiSelect = React.forwardRef(
         {/* Dropdown */}
         {isOpen && (
           <div
+            id={listboxId}
             className={cn(
               "absolute z-50 mt-1 w-full rounded bg-semantic-bg-primary border border-semantic-border-layout shadow-md",
               "top-full"
@@ -3426,7 +3500,7 @@ export interface PageHeaderProps
   mobileOverflowLimit?: number;
 }
 
-const PageHeader = React.forwardRef(
+const PageHeader = React.forwardRef<HTMLDivElement, PageHeaderProps>(
   (
     {
       className,
@@ -3442,8 +3516,8 @@ const PageHeader = React.forwardRef(
       layout = "responsive",
       mobileOverflowLimit = 2,
       ...props
-    }: PageHeaderProps,
-    ref: React.Ref<HTMLDivElement>
+    },
+    ref
   ) => {
     // State for overflow expansion (moved to top level)
     const [isOverflowExpanded, setIsOverflowExpanded] = React.useState(false);
@@ -4009,7 +4083,7 @@ export interface PanelProps
  * </Panel>
  * \`\`\`
  */
-const Panel = React.forwardRef(
+const Panel = React.forwardRef<HTMLElement, PanelProps>(
   (
     {
       open = true,
@@ -4023,8 +4097,8 @@ const Panel = React.forwardRef(
       "aria-label": ariaLabel,
       onKeyDown,
       ...props
-    }: PanelProps,
-    ref: React.Ref<HTMLElement>
+    },
+    ref
   ) => {
     const resolvedSize = size ?? "default";
     const widthClass = panelWidths[resolvedSize];
@@ -4133,7 +4207,7 @@ export interface PhoneInputProps
   wrapperClassName?: string;
 }
 
-const PhoneInput = React.forwardRef(
+const PhoneInput = React.forwardRef<HTMLInputElement, PhoneInputProps>(
   (
     {
       className,
@@ -4144,8 +4218,8 @@ const PhoneInput = React.forwardRef(
       wrapperClassName,
       disabled,
       ...props
-    }: PhoneInputProps,
-    ref: React.Ref<HTMLInputElement>
+    },
+    ref
   ) => {
     return (
       <div
@@ -4244,7 +4318,7 @@ export interface ReadableFieldProps
  * />
  * \`\`\`
  */
-export const ReadableField = React.forwardRef(
+export const ReadableField = React.forwardRef<HTMLDivElement, ReadableFieldProps>(
   (
     {
       label,
@@ -4256,8 +4330,8 @@ export const ReadableField = React.forwardRef(
       className,
       inputClassName,
       ...props
-    }: ReadableFieldProps,
-    ref: React.Ref<HTMLDivElement>
+    },
+    ref
   ) => {
     const [copied, setCopied] = React.useState(false);
     const [isVisible, setIsVisible] = React.useState(!secret);
@@ -4429,8 +4503,8 @@ export interface ReplyQuoteProps extends React.HTMLAttributes<HTMLDivElement> {
   message: string;
 }
 
-const ReplyQuote = React.forwardRef(
-  ({ className, sender, message, onClick, onKeyDown, role, tabIndex, "aria-label": ariaLabel, ...props }: ReplyQuoteProps, ref: React.Ref<HTMLDivElement>) => {
+const ReplyQuote = React.forwardRef<HTMLDivElement, ReplyQuoteProps>(
+  ({ className, sender, message, onClick, onKeyDown, role, tabIndex, "aria-label": ariaLabel, ...props }, ref) => {
     const isInteractive = !!onClick;
 
     const handleKeyDown = React.useCallback(
@@ -4566,7 +4640,7 @@ export interface SelectFieldProps {
  * />
  * \`\`\`
  */
-const SelectField = React.forwardRef(
+const SelectField = React.forwardRef<HTMLButtonElement, SelectFieldProps>(
   (
     {
       label,
@@ -4589,8 +4663,8 @@ const SelectField = React.forwardRef(
       labelClassName,
       id,
       name,
-    }: SelectFieldProps,
-    ref: React.Ref<HTMLButtonElement>
+    },
+    ref
   ) => {
     // Internal state for search
     const [searchQuery, setSearchQuery] = React.useState("");
@@ -4838,7 +4912,10 @@ const Select = SelectPrimitive.Root;
 
 const SelectGroup = SelectPrimitive.Group;
 
-const SelectValue = React.forwardRef(({ className, ...props }: React.ComponentPropsWithoutRef<typeof SelectPrimitive.Value>, ref: React.Ref<React.ElementRef<typeof SelectPrimitive.Value>>) => (
+const SelectValue = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Value>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Value>
+>(({ className, ...props }, ref) => (
   <SelectPrimitive.Value
     ref={ref}
     className={cn("[&[data-placeholder]]:text-semantic-text-muted", className)}
@@ -4852,7 +4929,10 @@ export interface SelectTriggerProps
     React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>,
     VariantProps<typeof selectTriggerVariants> {}
 
-const SelectTrigger = React.forwardRef(({ className, state, children, ...props }: SelectTriggerProps, ref: React.Ref<React.ElementRef<typeof SelectPrimitive.Trigger>>) => (
+const SelectTrigger = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Trigger>,
+  SelectTriggerProps
+>(({ className, state, children, ...props }, ref) => (
   <SelectPrimitive.Trigger
     ref={ref}
     className={cn(selectTriggerVariants({ state, className }))}
@@ -4866,7 +4946,10 @@ const SelectTrigger = React.forwardRef(({ className, state, children, ...props }
 ));
 SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
 
-const SelectScrollUpButton = React.forwardRef(({ className, ...props }: React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>, ref: React.Ref<React.ElementRef<typeof SelectPrimitive.ScrollUpButton>>) => (
+const SelectScrollUpButton = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
+>(({ className, ...props }, ref) => (
   <SelectPrimitive.ScrollUpButton
     ref={ref}
     className={cn(
@@ -4880,7 +4963,10 @@ const SelectScrollUpButton = React.forwardRef(({ className, ...props }: React.Co
 ));
 SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
 
-const SelectScrollDownButton = React.forwardRef(({ className, ...props }: React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>, ref: React.Ref<React.ElementRef<typeof SelectPrimitive.ScrollDownButton>>) => (
+const SelectScrollDownButton = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
+>(({ className, ...props }, ref) => (
   <SelectPrimitive.ScrollDownButton
     ref={ref}
     className={cn(
@@ -4934,7 +5020,10 @@ function useUnlockBodyScroll() {
   }, []);
 }
 
-const SelectContent = React.forwardRef(({ className, children, position = "popper", ...props }: React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>, ref: React.Ref<React.ElementRef<typeof SelectPrimitive.Content>>) => {
+const SelectContent = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
+>(({ className, children, position = "popper", ...props }, ref) => {
   useUnlockBodyScroll();
 
   return (
@@ -4972,7 +5061,10 @@ const SelectContent = React.forwardRef(({ className, children, position = "poppe
 });
 SelectContent.displayName = SelectPrimitive.Content.displayName;
 
-const SelectLabel = React.forwardRef(({ className, ...props }: React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>, ref: React.Ref<React.ElementRef<typeof SelectPrimitive.Label>>) => (
+const SelectLabel = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
+>(({ className, ...props }, ref) => (
   <SelectPrimitive.Label
     ref={ref}
     className={cn(
@@ -4984,7 +5076,10 @@ const SelectLabel = React.forwardRef(({ className, ...props }: React.ComponentPr
 ));
 SelectLabel.displayName = SelectPrimitive.Label.displayName;
 
-const SelectItem = React.forwardRef(({ className, children, ...props }: React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>, ref: React.Ref<React.ElementRef<typeof SelectPrimitive.Item>>) => (
+const SelectItem = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
+>(({ className, children, ...props }, ref) => (
   <SelectPrimitive.Item
     ref={ref}
     className={cn(
@@ -5005,7 +5100,10 @@ const SelectItem = React.forwardRef(({ className, children, ...props }: React.Co
 ));
 SelectItem.displayName = SelectPrimitive.Item.displayName;
 
-const SelectSeparator = React.forwardRef(({ className, ...props }: React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>, ref: React.Ref<React.ElementRef<typeof SelectPrimitive.Separator>>) => (
+const SelectSeparator = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
+>(({ className, ...props }, ref) => (
   <SelectPrimitive.Separator
     ref={ref}
     className={cn("-mx-1 my-1 h-px bg-semantic-border-layout", className)}
@@ -5083,8 +5181,8 @@ export interface SkeletonProps
   height?: number | string;
 }
 
-const Skeleton = React.forwardRef(
-  ({ className, variant, shape, width, height, style, ...props }: SkeletonProps, ref: React.Ref<HTMLDivElement>) => {
+const Skeleton = React.forwardRef<HTMLDivElement, SkeletonProps>(
+  ({ className, variant, shape, width, height, style, ...props }, ref) => {
     const dimensionStyle: React.CSSProperties = {
       ...style,
       ...(width !== undefined
@@ -5170,7 +5268,7 @@ export interface SpinnerProps
   "aria-label"?: string;
 }
 
-const Spinner = React.forwardRef(
+const Spinner = React.forwardRef<HTMLDivElement, SpinnerProps>(
   (
     {
       className,
@@ -5178,8 +5276,8 @@ const Spinner = React.forwardRef(
       variant,
       "aria-label": ariaLabel = "Loading",
       ...props
-    }: SpinnerProps,
-    ref: React.Ref<HTMLDivElement>
+    },
+    ref
   ) => {
     const strokeWidth = strokeWidths[size || "default"] ?? 3;
     const radius = 10;
@@ -5312,10 +5410,13 @@ export interface SwitchProps
   labelPosition?: "left" | "right";
 }
 
-const Switch = React.forwardRef(
+const Switch = React.forwardRef<
+  React.ElementRef<typeof SwitchPrimitives.Root>,
+  SwitchProps
+>(
   (
-    { className, size, label, labelPosition = "right", disabled, ...props }: SwitchProps,
-    ref: React.Ref<React.ElementRef<typeof SwitchPrimitives.Root>>
+    { className, size, label, labelPosition = "right", disabled, ...props },
+    ref
   ) => {
     const switchElement = (
       <SwitchPrimitives.Root
@@ -5391,8 +5492,8 @@ export interface SystemMessageProps
   children: string;
 }
 
-const SystemMessage = React.forwardRef(
-  ({ className, children, ...props }: SystemMessageProps, ref: React.Ref<HTMLDivElement>) => (
+const SystemMessage = React.forwardRef<HTMLDivElement, SystemMessageProps>(
+  ({ className, children, ...props }, ref) => (
     <div
       ref={ref}
       className={cn("flex justify-center my-1", className)}
@@ -5470,8 +5571,8 @@ export interface TableProps
   wrapContent?: boolean;
 }
 
-const Table = React.forwardRef(
-  ({ className, size, withoutBorder, wrapContent, ...props }: TableProps, ref: React.Ref<HTMLTableElement>) => (
+const Table = React.forwardRef<HTMLTableElement, TableProps>(
+  ({ className, size, withoutBorder, wrapContent, ...props }, ref) => (
     <div
       className={cn(
         "relative w-full overflow-auto",
@@ -5492,7 +5593,10 @@ const Table = React.forwardRef(
 );
 Table.displayName = "Table";
 
-const TableHeader = React.forwardRef(({ className, ...props }: React.HTMLAttributes<HTMLTableSectionElement>, ref: React.Ref<HTMLTableSectionElement>) => (
+const TableHeader = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
   <thead
     ref={ref}
     className={cn("bg-[var(--color-neutral-100)] [&_tr]:border-b", className)}
@@ -5511,8 +5615,8 @@ export interface TableBodyProps
   loadingColumns?: number;
 }
 
-const TableBody = React.forwardRef(
-  ({ className, isLoading, loadingRows = 5, loadingColumns = 5, children, ...props }: TableBodyProps, ref: React.Ref<HTMLTableSectionElement>) => (
+const TableBody = React.forwardRef<HTMLTableSectionElement, TableBodyProps>(
+  ({ className, isLoading, loadingRows = 5, loadingColumns = 5, children, ...props }, ref) => (
     <tbody
       ref={ref}
       className={cn("[&_tr:last-child]:border-0", className)}
@@ -5528,7 +5632,10 @@ const TableBody = React.forwardRef(
 );
 TableBody.displayName = "TableBody";
 
-const TableFooter = React.forwardRef(({ className, ...props }: React.HTMLAttributes<HTMLTableSectionElement>, ref: React.Ref<HTMLTableSectionElement>) => (
+const TableFooter = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
   <tfoot
     ref={ref}
     className={cn(
@@ -5545,8 +5652,8 @@ export interface TableRowProps extends React.HTMLAttributes<HTMLTableRowElement>
   highlighted?: boolean;
 }
 
-const TableRow = React.forwardRef(
-  ({ className, highlighted, ...props }: TableRowProps, ref: React.Ref<HTMLTableRowElement>) => (
+const TableRow = React.forwardRef<HTMLTableRowElement, TableRowProps>(
+  ({ className, highlighted, ...props }, ref) => (
     <tr
       ref={ref}
       className={cn(
@@ -5571,10 +5678,10 @@ export interface TableHeadProps extends React.ThHTMLAttributes<HTMLTableCellElem
   infoTooltip?: string;
 }
 
-const TableHead = React.forwardRef(
+const TableHead = React.forwardRef<HTMLTableCellElement, TableHeadProps>(
   (
-    { className, sticky, sortDirection, infoTooltip, children, ...props }: TableHeadProps,
-    ref: React.Ref<HTMLTableCellElement>
+    { className, sticky, sortDirection, infoTooltip, children, ...props },
+    ref
   ) => (
     <th
       ref={ref}
@@ -5612,8 +5719,8 @@ export interface TableCellProps extends React.TdHTMLAttributes<HTMLTableCellElem
   sticky?: boolean;
 }
 
-const TableCell = React.forwardRef(
-  ({ className, sticky, ...props }: TableCellProps, ref: React.Ref<HTMLTableCellElement>) => (
+const TableCell = React.forwardRef<HTMLTableCellElement, TableCellProps>(
+  ({ className, sticky, ...props }, ref) => (
     <td
       ref={ref}
       className={cn(
@@ -5627,7 +5734,10 @@ const TableCell = React.forwardRef(
 );
 TableCell.displayName = "TableCell";
 
-const TableCaption = React.forwardRef(({ className, ...props }: React.HTMLAttributes<HTMLTableCaptionElement>, ref: React.Ref<HTMLTableCaptionElement>) => (
+const TableCaption = React.forwardRef<
+  HTMLTableCaptionElement,
+  React.HTMLAttributes<HTMLTableCaptionElement>
+>(({ className, ...props }, ref) => (
   <caption
     ref={ref}
     className={cn("mt-4 text-sm text-semantic-text-muted", className)}
@@ -5716,8 +5826,8 @@ export interface TableToggleProps extends Omit<SwitchProps, "size"> {
   size?: "sm" | "default";
 }
 
-const TableToggle = React.forwardRef(
-  ({ size = "sm", ...props }: TableToggleProps, ref: React.Ref<HTMLButtonElement>) => (
+const TableToggle = React.forwardRef<HTMLButtonElement, TableToggleProps>(
+  ({ size = "sm", ...props }, ref) => (
     <Switch ref={ref} size={size} {...props} />
   )
 );
@@ -5767,7 +5877,10 @@ export interface TabsListProps
   fullWidth?: boolean
 }
 
-const TabsList = React.forwardRef(({ className, fullWidth, ...props }: TabsListProps, ref: React.Ref<React.ComponentRef<typeof TabsPrimitive.List>>) => (
+const TabsList = React.forwardRef<
+  React.ComponentRef<typeof TabsPrimitive.List>,
+  TabsListProps
+>(({ className, fullWidth, ...props }, ref) => (
   <TabsPrimitive.List
     ref={ref}
     className={cn(
@@ -5780,7 +5893,10 @@ const TabsList = React.forwardRef(({ className, fullWidth, ...props }: TabsListP
 ))
 TabsList.displayName = TabsPrimitive.List.displayName
 
-const TabsTrigger = React.forwardRef(({ className, ...props }: React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>, ref: React.Ref<React.ComponentRef<typeof TabsPrimitive.Trigger>>) => (
+const TabsTrigger = React.forwardRef<
+  React.ComponentRef<typeof TabsPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
+>(({ className, ...props }, ref) => (
   <TabsPrimitive.Trigger
     ref={ref}
     className={cn(
@@ -5795,7 +5911,10 @@ const TabsTrigger = React.forwardRef(({ className, ...props }: React.ComponentPr
 ))
 TabsTrigger.displayName = TabsPrimitive.Trigger.displayName
 
-const TabsContent = React.forwardRef(({ className, ...props }: React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>, ref: React.Ref<React.ComponentRef<typeof TabsPrimitive.Content>>) => (
+const TabsContent = React.forwardRef<
+  React.ComponentRef<typeof TabsPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
+>(({ className, ...props }, ref) => (
   <TabsPrimitive.Content
     ref={ref}
     className={cn(
@@ -5859,8 +5978,8 @@ export interface TagProps
   label?: string;
 }
 
-const Tag = React.forwardRef(
-  ({ className, variant, size, label, children, ...props }: TagProps, ref: React.Ref<HTMLSpanElement>) => {
+const Tag = React.forwardRef<HTMLSpanElement, TagProps>(
+  ({ className, variant, size, label, children, ...props }, ref) => {
     return (
       <span
         className={cn(tagVariants({ variant, size, className }))}
@@ -5945,7 +6064,16 @@ TagGroup.displayName = "TagGroup";
 
 export { Tag, TagGroup, tagVariants };
 `,
-  "text-field": `import * as React from "react";
+  "text-field": `import {
+  forwardRef,
+  useRef,
+  useCallback,
+  useState,
+  useId,
+  type ChangeEvent,
+  type ReactNode,
+  type ComponentProps,
+} from "react";
 import { cva, type VariantProps } from "class-variance-authority";
 import { Loader2, X } from "lucide-react";
 
@@ -5960,9 +6088,9 @@ const textFieldContainerVariants = cva(
     variants: {
       state: {
         default:
-          "border border-semantic-border-input focus-within:border-semantic-border-input-focus focus-within:shadow-[0_0_0_1px_rgba(43,188,202,0.15)]",
+          "border border-semantic-border-input focus-within:border-semantic-border-input-focus/50 focus-within:shadow-[0_0_0_1px_rgba(43,188,202,0.15)]",
         error:
-          "border border-semantic-error-primary/40 focus-within:border-semantic-error-primary focus-within:shadow-[0_0_0_1px_rgba(240,68,56,0.1)]",
+          "border border-semantic-error-primary/40 focus-within:border-semantic-error-primary/60 focus-within:shadow-[0_0_0_1px_rgba(240,68,56,0.1)]",
       },
       disabled: {
         true: "cursor-not-allowed opacity-50 bg-[var(--color-neutral-50)]",
@@ -5985,9 +6113,9 @@ const textFieldInputVariants = cva(
     variants: {
       state: {
         default:
-          "border border-semantic-border-input focus:outline-none focus:border-semantic-border-input-focus focus:shadow-[0_0_0_1px_rgba(43,188,202,0.15)]",
+          "border border-semantic-border-input focus:outline-none focus:border-semantic-border-input-focus/50 focus:shadow-[0_0_0_1px_rgba(43,188,202,0.15)]",
         error:
-          "border border-semantic-error-primary/40 focus:outline-none focus:border-semantic-error-primary focus:shadow-[0_0_0_1px_rgba(240,68,56,0.1)]",
+          "border border-semantic-error-primary/40 focus:outline-none focus:border-semantic-error-primary/60 focus:shadow-[0_0_0_1px_rgba(240,68,56,0.1)]",
       },
       size: {
         default: "h-[42px] px-4 py-2 text-base file:text-base",
@@ -6013,7 +6141,7 @@ const textFieldInputVariants = cva(
  */
 export interface TextFieldProps
   extends
-    Omit<React.ComponentProps<"input">, "size">,
+    Omit<ComponentProps<"input">, "size">,
     VariantProps<typeof textFieldInputVariants> {
   /** Size of the text field \u2014 \`default\` (42px) or \`sm\` (36px, compact) */
   size?: "default" | "sm";
@@ -6026,9 +6154,9 @@ export interface TextFieldProps
   /** Error message - shows error state with red styling */
   error?: string;
   /** Icon displayed on the left inside the input */
-  leftIcon?: React.ReactNode;
+  leftIcon?: ReactNode;
   /** Icon displayed on the right inside the input */
-  rightIcon?: React.ReactNode;
+  rightIcon?: ReactNode;
   /** Text prefix inside input (e.g., "https://") */
   prefix?: string;
   /** Text suffix inside input (e.g., ".com") */
@@ -6049,7 +6177,7 @@ export interface TextFieldProps
   inputContainerClassName?: string;
 }
 
-const TextField = React.forwardRef(
+const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
   (
     {
       className,
@@ -6079,22 +6207,22 @@ const TextField = React.forwardRef(
       id,
       type,
       ...props
-    }: TextFieldProps,
-    ref: React.ForwardedRef<HTMLInputElement>
+    },
+    ref
   ) => {
     // Internal ref for programmatic control (e.g., clearable)
-    const internalRef = React.useRef<HTMLInputElement | null>(null);
-    const mergedRef = React.useCallback(
+    const internalRef = useRef<HTMLInputElement>(null);
+    const mergedRef = useCallback(
       (node: HTMLInputElement | null) => {
         internalRef.current = node;
         if (typeof ref === "function") ref(node);
-        else if (ref && typeof ref === "object") ref.current = node;
+        else if (ref) ref.current = node;
       },
       [ref]
     );
 
     // Internal state for character count in uncontrolled mode
-    const [internalValue, setInternalValue] = React.useState(
+    const [internalValue, setInternalValue] = useState(
       defaultValue ?? ""
     );
 
@@ -6106,7 +6234,7 @@ const TextField = React.forwardRef(
     const derivedState = error ? "error" : (state ?? "default");
 
     // Handle change for both controlled and uncontrolled
-    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
       if (!isControlled) {
         setInternalValue(e.target.value);
       }
@@ -6133,7 +6261,7 @@ const TextField = React.forwardRef(
     const charCount = String(currentValue).length;
 
     // Generate unique IDs for accessibility
-    const generatedId = React.useId();
+    const generatedId = useId();
     const inputId = id || generatedId;
     const helperId = \`\${inputId}-helper\`;
     const errorId = \`\${inputId}-error\`;
@@ -6252,12 +6380,12 @@ const TextField = React.forwardRef(
             {error ? (
               <span
                 id={errorId}
-                className="text-sm text-semantic-error-primary"
+                className="text-xs text-semantic-error-primary"
               >
                 {error}
               </span>
             ) : helperText ? (
-              <span id={helperId} className="text-sm text-semantic-text-muted">
+              <span id={helperId} className="text-xs text-semantic-text-muted">
                 {helperText}
               </span>
             ) : (
@@ -6266,7 +6394,7 @@ const TextField = React.forwardRef(
             {showCount && maxLength && (
               <span
                 className={cn(
-                  "text-sm",
+                  "text-xs",
                   charCount > maxLength
                     ? "text-semantic-error-primary"
                     : "text-semantic-text-muted"
@@ -6284,210 +6412,6 @@ const TextField = React.forwardRef(
 TextField.displayName = "TextField";
 
 export { TextField, textFieldContainerVariants, textFieldInputVariants };
-`,
-  "textarea": `import * as React from "react";
-import { cva, type VariantProps } from "class-variance-authority";
-
-import { cn } from "@/lib/utils";
-
-/**
- * Textarea variants for different visual states
- */
-const textareaVariants = cva(
-  "w-full rounded bg-semantic-bg-primary text-semantic-text-primary outline-none transition-all placeholder:text-semantic-text-placeholder disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-[var(--color-neutral-50)]",
-  {
-    variants: {
-      state: {
-        default:
-          "border border-semantic-border-input focus:outline-none focus:border-semantic-border-input-focus focus:shadow-[0_0_0_1px_rgba(43,188,202,0.15)]",
-        error:
-          "border border-semantic-error-primary/40 focus:outline-none focus:border-semantic-error-primary focus:shadow-[0_0_0_1px_rgba(240,68,56,0.1)]",
-      },
-      size: {
-        default: "px-4 py-2.5 text-base",
-        sm: "px-3 py-2 text-sm",
-      },
-    },
-    defaultVariants: {
-      state: "default",
-      size: "default",
-    },
-  }
-);
-
-/**
- * A multi-line text input with label, error state, helper text, character counter, and resize control.
- *
- * @example
- * \`\`\`tsx
- * <Textarea label="Description" placeholder="Enter description" />
- * <Textarea label="Notes" error="Too short" showCount maxLength={500} />
- * <Textarea label="JSON" rows={8} resize="vertical" />
- * \`\`\`
- */
-export interface TextareaProps
-  extends Omit<React.ComponentProps<"textarea">, "size">,
-    VariantProps<typeof textareaVariants> {
-  /** Size of the textarea \u2014 \`default\` or \`sm\` (compact) */
-  size?: "default" | "sm";
-  /** Label text displayed above the textarea */
-  label?: string;
-  /** Shows red asterisk next to label when true */
-  required?: boolean;
-  /** Helper text displayed below the textarea */
-  helperText?: string;
-  /** Error message \u2014 shows error state with red styling */
-  error?: string;
-  /** Shows character count when maxLength is set */
-  showCount?: boolean;
-  /** Controls CSS resize behavior. Defaults to "none" */
-  resize?: "none" | "vertical" | "horizontal" | "both";
-  /** Additional class for the wrapper container */
-  wrapperClassName?: string;
-  /** Additional class for the label */
-  labelClassName?: string;
-}
-
-const Textarea = React.forwardRef(
-  (
-    {
-      className,
-      wrapperClassName,
-      labelClassName,
-      state,
-      size,
-      label,
-      required,
-      helperText,
-      error,
-      showCount,
-      resize = "none",
-      maxLength,
-      rows = 4,
-      value,
-      defaultValue,
-      onChange,
-      disabled,
-      id,
-      ...props
-    }: TextareaProps,
-    ref: React.ForwardedRef<HTMLTextAreaElement>
-  ) => {
-    // Internal state for character count in uncontrolled mode
-    const [internalValue, setInternalValue] = React.useState(
-      defaultValue ?? ""
-    );
-
-    // Determine if controlled
-    const isControlled = value !== undefined;
-    const currentValue = isControlled ? value : internalValue;
-
-    // Derive state from props
-    const derivedState = error ? "error" : (state ?? "default");
-
-    // Handle change for both controlled and uncontrolled
-    const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
-      if (!isControlled) {
-        setInternalValue(e.target.value);
-      }
-      onChange?.(e);
-    };
-
-    // Character count
-    const charCount = String(currentValue).length;
-
-    // Generate unique IDs for accessibility
-    const generatedId = React.useId();
-    const textareaId = id || generatedId;
-    const helperId = \`\${textareaId}-helper\`;
-    const errorId = \`\${textareaId}-error\`;
-
-    // Determine aria-describedby
-    const ariaDescribedBy = error ? errorId : helperText ? helperId : undefined;
-
-    // Resize class map
-    const resizeClasses: Record<string, string> = {
-      none: "resize-none",
-      vertical: "resize-y",
-      horizontal: "resize-x",
-      both: "resize",
-    };
-
-    return (
-      <div className={cn("flex flex-col gap-1", wrapperClassName)}>
-        {/* Label */}
-        {label && (
-          <label
-            htmlFor={textareaId}
-            className={cn(
-              "text-sm font-medium text-semantic-text-muted",
-              labelClassName
-            )}
-          >
-            {label}
-            {required && (
-              <span className="text-semantic-error-primary ml-0.5">*</span>
-            )}
-          </label>
-        )}
-
-        {/* Textarea */}
-        <textarea
-          ref={ref}
-          id={textareaId}
-          rows={rows}
-          className={cn(
-            textareaVariants({ state: derivedState, size, className }),
-            resizeClasses[resize]
-          )}
-          disabled={disabled}
-          maxLength={maxLength}
-          value={isControlled ? value : undefined}
-          defaultValue={!isControlled ? defaultValue : undefined}
-          onChange={handleChange}
-          aria-invalid={!!error}
-          aria-describedby={ariaDescribedBy}
-          {...props}
-        />
-
-        {/* Helper text / Error message / Character count */}
-        {(error || helperText || (showCount && maxLength)) && (
-          <div className="flex justify-between items-start gap-2">
-            {error ? (
-              <span
-                id={errorId}
-                className="text-sm text-semantic-error-primary"
-              >
-                {error}
-              </span>
-            ) : helperText ? (
-              <span id={helperId} className="text-sm text-semantic-text-muted">
-                {helperText}
-              </span>
-            ) : (
-              <span />
-            )}
-            {showCount && maxLength && (
-              <span
-                className={cn(
-                  "text-sm",
-                  charCount > maxLength
-                    ? "text-semantic-error-primary"
-                    : "text-semantic-text-muted"
-                )}
-              >
-                {charCount}/{maxLength}
-              </span>
-            )}
-          </div>
-        )}
-      </div>
-    );
-  }
-);
-Textarea.displayName = "Textarea";
-
-export { Textarea, textareaVariants };
 `,
   "toast": `import * as React from "react";
 import * as ToastPrimitives from "@radix-ui/react-toast";
@@ -6498,7 +6422,10 @@ import { cn } from "@/lib/utils";
 
 const ToastProvider = ToastPrimitives.Provider;
 
-const ToastViewport = React.forwardRef(({ className, ...props }: React.ComponentPropsWithoutRef<typeof ToastPrimitives.Viewport>, ref: React.Ref<React.ElementRef<typeof ToastPrimitives.Viewport>>) => (
+const ToastViewport = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Viewport>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Viewport>
+>(({ className, ...props }, ref) => (
   <ToastPrimitives.Viewport
     ref={ref}
     className={cn(
@@ -6532,8 +6459,11 @@ const toastVariants = cva(
   }
 );
 
-const Toast = React.forwardRef(({ className, variant, ...props }: React.ComponentPropsWithoutRef<typeof ToastPrimitives.Root> &
-    VariantProps<typeof toastVariants>, ref: React.Ref<React.ElementRef<typeof ToastPrimitives.Root>>) => {
+const Toast = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Root>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Root> &
+    VariantProps<typeof toastVariants>
+>(({ className, variant, ...props }, ref) => {
   return (
     <ToastPrimitives.Root
       ref={ref}
@@ -6544,7 +6474,10 @@ const Toast = React.forwardRef(({ className, variant, ...props }: React.Componen
 });
 Toast.displayName = ToastPrimitives.Root.displayName;
 
-const ToastAction = React.forwardRef(({ className, ...props }: React.ComponentPropsWithoutRef<typeof ToastPrimitives.Action>, ref: React.Ref<React.ElementRef<typeof ToastPrimitives.Action>>) => (
+const ToastAction = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Action>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Action>
+>(({ className, ...props }, ref) => (
   <ToastPrimitives.Action
     ref={ref}
     className={cn(
@@ -6560,7 +6493,10 @@ const ToastAction = React.forwardRef(({ className, ...props }: React.ComponentPr
 ));
 ToastAction.displayName = ToastPrimitives.Action.displayName;
 
-const ToastClose = React.forwardRef(({ className, ...props }: React.ComponentPropsWithoutRef<typeof ToastPrimitives.Close>, ref: React.Ref<React.ElementRef<typeof ToastPrimitives.Close>>) => (
+const ToastClose = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Close>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Close>
+>(({ className, ...props }, ref) => (
   <ToastPrimitives.Close
     ref={ref}
     className={cn(
@@ -6575,7 +6511,10 @@ const ToastClose = React.forwardRef(({ className, ...props }: React.ComponentPro
 ));
 ToastClose.displayName = ToastPrimitives.Close.displayName;
 
-const ToastTitle = React.forwardRef(({ className, ...props }: React.ComponentPropsWithoutRef<typeof ToastPrimitives.Title>, ref: React.Ref<React.ElementRef<typeof ToastPrimitives.Title>>) => (
+const ToastTitle = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Title>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Title>
+>(({ className, ...props }, ref) => (
   <ToastPrimitives.Title
     ref={ref}
     className={cn("text-sm font-semibold tracking-[0.014px]", className)}
@@ -6584,7 +6523,10 @@ const ToastTitle = React.forwardRef(({ className, ...props }: React.ComponentPro
 ));
 ToastTitle.displayName = ToastPrimitives.Title.displayName;
 
-const ToastDescription = React.forwardRef(({ className, ...props }: React.ComponentPropsWithoutRef<typeof ToastPrimitives.Description>, ref: React.Ref<React.ElementRef<typeof ToastPrimitives.Description>>) => (
+const ToastDescription = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Description>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Description>
+>(({ className, ...props }, ref) => (
   <ToastPrimitives.Description
     ref={ref}
     className={cn("text-xs tracking-[0.048px]", className)}
@@ -6969,7 +6911,10 @@ const Tooltip = TooltipPrimitive.Root;
 
 const TooltipTrigger = TooltipPrimitive.Trigger;
 
-const TooltipContent = React.forwardRef(({ className, sideOffset = 4, ...props }: React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>, ref: React.Ref<React.ElementRef<typeof TooltipPrimitive.Content>>) => (
+const TooltipContent = React.forwardRef<
+  React.ElementRef<typeof TooltipPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
   <TooltipPrimitive.Portal>
     <TooltipPrimitive.Content
       ref={ref}
@@ -6984,7 +6929,10 @@ const TooltipContent = React.forwardRef(({ className, sideOffset = 4, ...props }
 ));
 TooltipContent.displayName = TooltipPrimitive.Content.displayName;
 
-const TooltipArrow = React.forwardRef(({ className, ...props }: React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Arrow>, ref: React.Ref<React.ElementRef<typeof TooltipPrimitive.Arrow>>) => (
+const TooltipArrow = React.forwardRef<
+  React.ElementRef<typeof TooltipPrimitive.Arrow>,
+  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Arrow>
+>(({ className, ...props }, ref) => (
   <TooltipPrimitive.Arrow
     ref={ref}
     className={cn("fill-semantic-primary", className)}
@@ -7136,7 +7084,7 @@ export interface TypographyProps extends React.HTMLAttributes<HTMLElement> {
  * <Typography truncate>Very long text that will be truncated...</Typography>
  * \`\`\`
  */
-const Typography = React.forwardRef(
+const Typography = React.forwardRef<HTMLElement, TypographyProps>(
   (
     {
       children,
@@ -7149,8 +7097,8 @@ const Typography = React.forwardRef(
       tag,
       htmlFor,
       ...props
-    }: TypographyProps,
-    ref: React.Ref<HTMLElement>
+    },
+    ref
   ) => {
     const key: Key = \`\${kind}-\${variant}\`;
     const Tag = (tag || mapTagName[key]) as React.ElementType;
@@ -7211,8 +7159,8 @@ export interface UnreadSeparatorProps
   label?: string;
 }
 
-const UnreadSeparator = React.forwardRef(
-  ({ className, count, label, ...props }: UnreadSeparatorProps, ref: React.Ref<HTMLDivElement>) => (
+const UnreadSeparator = React.forwardRef<HTMLDivElement, UnreadSeparatorProps>(
+  ({ className, count, label, ...props }, ref) => (
     <div
       ref={ref}
       className={cn("flex items-center gap-4 my-2", className)}
@@ -8514,24 +8462,6 @@ var componentMetadata = {
       }
     ]
   },
-  "textarea": {
-    "name": "Textarea",
-    "description": "A textarea component.",
-    "dependencies": [
-      "class-variance-authority",
-      "clsx",
-      "tailwind-merge"
-    ],
-    "props": [],
-    "variants": [],
-    "examples": [
-      {
-        "title": "Basic Textarea",
-        "code": "<Textarea>Content</Textarea>",
-        "description": "Simple textarea usage"
-      }
-    ]
-  },
   "toast": {
     "name": "Toast",
     "description": "A toast component.",