myoperator-ui 0.0.218 → 0.0.219

package/dist/index.js

@@ -118,7 +118,6 @@ function transformSemanticClassesInContent(content) {
   const cnRegex = /\bcn\s*\(/g;
   let cnMatch;
   while ((cnMatch = cnRegex.exec(content)) !== null) {
-    if (cnMatch.index < lastIndex) continue;
     result += content.slice(lastIndex, cnMatch.index);
     let depth = 1;
     let i = cnMatch.index + cnMatch[0].length;
@@ -267,10 +266,8 @@ function looksLikeTailwindClasses(str) {
     return false;
   });
 }
-var BORDER_WIDTH_RE = /^border(-[trblxy])?(-[0248]|-\[.+\])?$/;
-var BORDER_STYLE_RE = /^border-(solid|dashed|dotted|double|hidden|none)$/;
 function prefixClassString(classString, prefix) {
-  const prefixed = classString.split(" ").map((cls) => {
+  return classString.split(" ").map((cls) => {
     if (!cls) return cls;
     if ((cls.startsWith("aria-") || cls.startsWith("data-")) && !cls.includes("[") && !cls.includes(":")) return cls;
     if (cls.startsWith("[&") || cls.startsWith("[&_")) {
@@ -320,14 +317,7 @@ function prefixClassString(classString, prefix) {
       return `-${prefix}${cls.slice(1)}`;
     }
     return `${prefix}${cls}`;
-  });
-  const origClasses = classString.split(" ");
-  const hasBorderWidth = origClasses.some((c) => BORDER_WIDTH_RE.test(c));
-  const hasBorderStyle = origClasses.some((c) => BORDER_STYLE_RE.test(c));
-  if (hasBorderWidth && !hasBorderStyle) {
-    prefixed.push(`${prefix}border-solid`);
-  }
-  return prefixed.join(" ");
+  }).join(" ");
 }
 function prefixTailwindClasses(content, prefix) {
   content = transformSemanticClassesInContent(content);
@@ -345,7 +335,6 @@ function prefixTailwindClasses(content, prefix) {
   const cnRegex = /\bcn\s*\(/g;
   let cnMatch;
   while ((cnMatch = cnRegex.exec(content)) !== null) {
-    if (cnMatch.index < lastIndex) continue;
     result += content.slice(lastIndex, cnMatch.index);
     let depth = 1;
     let i = cnMatch.index + cnMatch[0].length;
@@ -384,120 +373,7 @@ function prefixTailwindClasses(content, prefix) {
       return `className="${prefixed}"`;
     }
   );
-  const nonClassKeys = [
-    // HTML attributes
-    "name",
-    "displayName",
-    "type",
-    "role",
-    "id",
-    "htmlFor",
-    "for",
-    "placeholder",
-    "alt",
-    "src",
-    "href",
-    "target",
-    "rel",
-    "method",
-    "action",
-    "enctype",
-    "accept",
-    "pattern",
-    "autocomplete",
-    "value",
-    "defaultValue",
-    "label",
-    "text",
-    "message",
-    "helperText",
-    "ariaLabel",
-    "ariaDescribedBy",
-    "description",
-    "title",
-    "content",
-    "header",
-    "footer",
-    "caption",
-    "summary",
-    "tooltip",
-    "errorMessage",
-    "successMessage",
-    "warningMessage",
-    "infoMessage",
-    "hint",
-    // CSS style properties (camelCase — safe because they can't be CVA variant keys)
-    "width",
-    "height",
-    "minWidth",
-    "maxWidth",
-    "minHeight",
-    "maxHeight",
-    "padding",
-    "paddingTop",
-    "paddingRight",
-    "paddingBottom",
-    "paddingLeft",
-    "margin",
-    "marginTop",
-    "marginRight",
-    "marginBottom",
-    "marginLeft",
-    "fontSize",
-    "fontWeight",
-    "fontFamily",
-    "fontStyle",
-    "lineHeight",
-    "letterSpacing",
-    "backgroundColor",
-    "borderColor",
-    "borderWidth",
-    "borderStyle",
-    "borderRadius",
-    "zIndex",
-    "overflow",
-    "overflowX",
-    "overflowY",
-    "userSelect",
-    "transitionDuration",
-    "transitionProperty",
-    "boxShadow",
-    "textShadow",
-    "outlineOffset",
-    "rowGap",
-    "columnGap",
-    "gridTemplateColumns",
-    "gridTemplateRows",
-    "flexBasis",
-    "flexGrow",
-    "flexShrink",
-    "flexDirection",
-    "flexWrap",
-    "alignItems",
-    "alignSelf",
-    "justifyContent",
-    "justifyItems",
-    "textAlign",
-    "textDecoration",
-    "textTransform",
-    "whiteSpace",
-    "wordBreak",
-    "wordSpacing",
-    "aspectRatio",
-    "scrollbarWidth",
-    "scrollBehavior",
-    "backgroundImage",
-    "backgroundSize",
-    "backgroundPosition",
-    "backgroundRepeat",
-    "borderTop",
-    "borderRight",
-    "borderBottom",
-    "borderLeft",
-    "strokeWidth",
-    "strokeDasharray",
-    "strokeDashoffset"
-  ];
+  const nonClassKeys = ["name", "displayName", "type", "role", "id", "htmlFor", "for", "placeholder", "alt", "src", "href", "target", "rel", "method", "action", "enctype", "accept", "pattern", "autocomplete", "value", "defaultValue", "label", "text", "message", "helperText", "ariaLabel", "ariaDescribedBy", "description", "title", "content", "header", "footer", "caption", "summary", "tooltip", "errorMessage", "successMessage", "warningMessage", "infoMessage", "hint"];
   function hasObviousTailwindPatterns(value) {
     return /(?:^|\s)(hover|focus|active|disabled|group|peer|data-|aria-|sm:|md:|lg:|xl:|2xl:|dark:)/.test(value) || // Group/peer with selectors
     /group-\[|peer-\[/.test(value) || // Arbitrary selectors
@@ -557,264 +433,8 @@ function prefixTailwindClasses(content, prefix) {
       return `${funcName}('${prefixed}'`;
     }
   );
-  {
-    let jsxResult = "";
-    let jsxLastIndex = 0;
-    const jsxRegex = /className\s*=\s*\{/g;
-    let jsxMatch;
-    while ((jsxMatch = jsxRegex.exec(content)) !== null) {
-      if (jsxMatch.index < jsxLastIndex) continue;
-      jsxResult += content.slice(jsxLastIndex, jsxMatch.index);
-      const bracePos = jsxMatch.index + jsxMatch[0].length - 1;
-      let depth = 1;
-      let pos = bracePos + 1;
-      while (pos < content.length && depth > 0) {
-        const ch = content[pos];
-        if (ch === "{") {
-          depth++;
-          pos++;
-          continue;
-        }
-        if (ch === "}") {
-          depth--;
-          if (depth === 0) {
-            pos++;
-            break;
-          }
-          pos++;
-          continue;
-        }
-        if (ch === '"') {
-          pos++;
-          while (pos < content.length && content[pos] !== '"') {
-            if (content[pos] === "\\") pos++;
-            pos++;
-          }
-          pos++;
-          continue;
-        }
-        if (ch === "'") {
-          pos++;
-          while (pos < content.length && content[pos] !== "'") {
-            if (content[pos] === "\\") pos++;
-            pos++;
-          }
-          pos++;
-          continue;
-        }
-        if (ch === "`") {
-          pos++;
-          let tDepth = 0;
-          while (pos < content.length) {
-            if (content[pos] === "\\") {
-              pos += 2;
-              continue;
-            }
-            if (content[pos] === "`" && tDepth === 0) {
-              pos++;
-              break;
-            }
-            if (content[pos] === "$" && content[pos + 1] === "{") {
-              tDepth++;
-              pos += 2;
-              continue;
-            }
-            if (content[pos] === "}" && tDepth > 0) {
-              tDepth--;
-              pos++;
-              continue;
-            }
-            pos++;
-          }
-          continue;
-        }
-        pos++;
-      }
-      const expr = content.slice(bracePos + 1, pos - 1);
-      const exprTrimmed = expr.trimStart();
-      if (/^(cn|cva)\s*\(/.test(exprTrimmed)) {
-        jsxResult += content.slice(jsxMatch.index, pos);
-        jsxLastIndex = pos;
-        continue;
-      }
-      const prefixedExpr = prefixClassNameExpression(expr, prefix);
-      jsxResult += jsxMatch[0] + prefixedExpr + "}";
-      jsxLastIndex = pos;
-    }
-    jsxResult += content.slice(jsxLastIndex);
-    content = jsxResult;
-  }
   return content;
 }
-function isAlreadyPrefixed(classString, prefix) {
-  if (!classString.trim()) return false;
-  return classString.trim().split(/\s+/).every((c) => {
-    const lastColon = c.lastIndexOf(":");
-    const utility = lastColon >= 0 ? c.slice(lastColon + 1) : c;
-    return utility.startsWith(prefix) || utility.startsWith(`-${prefix}`) || utility.startsWith(`!${prefix}`) || utility.startsWith(`!-${prefix}`);
-  });
-}
-function prefixStaticTemplatePart(text, prefix) {
-  const trimmed = text.trim();
-  if (!trimmed || !looksLikeTailwindClasses(trimmed)) return text;
-  const leading = text.match(/^(\s*)/)?.[1] || "";
-  const trailing = text.match(/(\s*)$/)?.[1] || "";
-  return leading + prefixClassString(trimmed, prefix) + trailing;
-}
-function prefixStringLiteralsInExpr(code, prefix) {
-  let result = code.replace(/"([^"]*)"/g, (m, classes) => {
-    if (!classes.trim() || !looksLikeTailwindClasses(classes) || isAlreadyPrefixed(classes, prefix)) return m;
-    return `"${prefixClassString(classes, prefix)}"`;
-  });
-  result = result.replace(/'([^']*)'/g, (m, classes) => {
-    if (!classes.trim() || !looksLikeTailwindClasses(classes) || isAlreadyPrefixed(classes, prefix)) return m;
-    return `'${prefixClassString(classes, prefix)}'`;
-  });
-  return result;
-}
-function prefixClassNameExpression(expr, prefix) {
-  let result = "";
-  let i = 0;
-  while (i < expr.length) {
-    if (expr[i] === "`") {
-      result += "`";
-      i++;
-      let staticText = "";
-      while (i < expr.length && expr[i] !== "`") {
-        if (expr[i] === "\\") {
-          staticText += expr[i] + (expr[i + 1] || "");
-          i += 2;
-          continue;
-        }
-        if (expr[i] === "$" && i + 1 < expr.length && expr[i + 1] === "{") {
-          if (staticText) {
-            result += prefixStaticTemplatePart(staticText, prefix);
-            staticText = "";
-          }
-          result += "${";
-          i += 2;
-          let exprDepth = 1;
-          let exprContent = "";
-          while (i < expr.length && exprDepth > 0) {
-            if (expr[i] === '"') {
-              exprContent += expr[i];
-              i++;
-              while (i < expr.length && expr[i] !== '"') {
-                if (expr[i] === "\\") {
-                  exprContent += expr[i];
-                  i++;
-                }
-                exprContent += expr[i];
-                i++;
-              }
-              if (i < expr.length) {
-                exprContent += expr[i];
-                i++;
-              }
-              continue;
-            }
-            if (expr[i] === "'") {
-              exprContent += expr[i];
-              i++;
-              while (i < expr.length && expr[i] !== "'") {
-                if (expr[i] === "\\") {
-                  exprContent += expr[i];
-                  i++;
-                }
-                exprContent += expr[i];
-                i++;
-              }
-              if (i < expr.length) {
-                exprContent += expr[i];
-                i++;
-              }
-              continue;
-            }
-            if (expr[i] === "`") {
-              exprContent += expr[i];
-              i++;
-              let nestedDepth = 0;
-              while (i < expr.length) {
-                if (expr[i] === "\\") {
-                  exprContent += expr[i];
-                  i++;
-                  if (i < expr.length) {
-                    exprContent += expr[i];
-                    i++;
-                  }
-                  ;
-                  continue;
-                }
-                if (expr[i] === "`" && nestedDepth === 0) {
-                  exprContent += expr[i];
-                  i++;
-                  break;
-                }
-                if (expr[i] === "$" && i + 1 < expr.length && expr[i + 1] === "{") {
-                  nestedDepth++;
-                  exprContent += "${";
-                  i += 2;
-                  continue;
-                }
-                if (expr[i] === "}" && nestedDepth > 0) {
-                  nestedDepth--;
-                }
-                exprContent += expr[i];
-                i++;
-              }
-              continue;
-            }
-            if (expr[i] === "{") exprDepth++;
-            else if (expr[i] === "}") {
-              exprDepth--;
-              if (exprDepth === 0) {
-                i++;
-                break;
-              }
-            }
-            exprContent += expr[i];
-            i++;
-          }
-          result += prefixStringLiteralsInExpr(exprContent, prefix) + "}";
-          continue;
-        }
-        staticText += expr[i];
-        i++;
-      }
-      if (staticText) {
-        result += prefixStaticTemplatePart(staticText, prefix);
-      }
-      if (i < expr.length && expr[i] === "`") {
-        result += "`";
-        i++;
-      }
-    } else if (expr[i] === '"' || expr[i] === "'") {
-      const quote = expr[i];
-      const strStart = i;
-      i++;
-      let str = "";
-      while (i < expr.length && expr[i] !== quote) {
-        if (expr[i] === "\\") {
-          str += expr[i] + (expr[i + 1] || "");
-          i += 2;
-          continue;
-        }
-        str += expr[i];
-        i++;
-      }
-      if (i < expr.length) i++;
-      if (str.trim() && looksLikeTailwindClasses(str) && !isAlreadyPrefixed(str, prefix)) {
-        result += quote + prefixClassString(str, prefix) + quote;
-      } else {
-        result += expr.slice(strStart, i);
-      }
-    } else {
-      result += expr[i];
-      i++;
-    }
-  }
-  return result;
-}
 async function getRegistry(prefix = "") {
   return {
     "avatar": {
@@ -914,7 +534,7 @@ export interface AvatarProps
  * <Avatar initials="AS" size="xs" />
  * \`\`\`
  */
-const Avatar = React.forwardRef(
+const Avatar = React.forwardRef<HTMLDivElement, AvatarProps>(
   (
     {
       className,
@@ -927,8 +547,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);
@@ -1005,8 +625,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)}
@@ -1062,8 +682,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;
 
@@ -1127,7 +747,7 @@ export interface PhoneInputProps
   wrapperClassName?: string;
 }
 
-const PhoneInput = React.forwardRef(
+const PhoneInput = React.forwardRef<HTMLInputElement, PhoneInputProps>(
   (
     {
       className,
@@ -1138,8 +758,8 @@ const PhoneInput = React.forwardRef(
       wrapperClassName,
       disabled,
       ...props
-    }: PhoneInputProps,
-    ref: React.Ref<HTMLInputElement>
+    },
+    ref
   ) => {
     return (
       <div
@@ -1223,8 +843,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(
@@ -1304,8 +924,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)}
@@ -1366,8 +986,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)}
@@ -1423,12 +1043,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)]",
       },
@@ -1474,7 +1094,7 @@ export interface ButtonProps
   loadingText?: string;
 }
 
-const Button = React.forwardRef(
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
   (
     {
       className,
@@ -1488,8 +1108,8 @@ const Button = React.forwardRef(
       children,
       disabled,
       ...props
-    }: ButtonProps,
-    ref: React.Ref<HTMLButtonElement>
+    },
+    ref
   ) => {
     const Comp = asChild ? Slot : "button";
 
@@ -1605,7 +1225,7 @@ export interface BadgeProps
   asChild?: boolean;
 }
 
-const Badge = React.forwardRef(
+const Badge = React.forwardRef<HTMLDivElement, BadgeProps>(
   (
     {
       className,
@@ -1616,8 +1236,8 @@ const Badge = React.forwardRef(
       asChild = false,
       children,
       ...props
-    }: BadgeProps,
-    ref: React.Ref<HTMLDivElement>
+    },
+    ref
   ) => {
     const Comp = asChild ? Slot : "div";
 
@@ -1706,7 +1326,7 @@ export interface ContactListItemProps
  * />
  * \`\`\`
  */
-const ContactListItem = React.forwardRef(
+const ContactListItem = React.forwardRef<HTMLDivElement, ContactListItemProps>(
   (
     {
       name,
@@ -1717,8 +1337,8 @@ const ContactListItem = React.forwardRef(
       onClick,
       className,
       ...props
-    }: ContactListItemProps,
-    ref: React.Ref<HTMLDivElement>
+    },
+    ref
   ) => {
     return (
       <div
@@ -1917,7 +1537,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,
@@ -1930,8 +1550,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;
@@ -1999,9 +1619,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: {
@@ -2028,8 +1648,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 = (
@@ -2127,7 +1747,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)}
@@ -2141,7 +1764,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 }))}
@@ -2155,7 +1781,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(
@@ -2169,7 +1798,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(
@@ -2223,7 +1855,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 (
@@ -2261,7 +1896,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(
@@ -2273,7 +1911,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(
@@ -2294,7 +1935,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)}
@@ -2425,7 +2069,10 @@ export interface CheckboxProps
   separateLabel?: boolean;
 }
 
-const Checkbox = React.forwardRef(
+const Checkbox = React.forwardRef<
+  React.ElementRef<typeof CheckboxPrimitive.Root>,
+  CheckboxProps
+>(
   (
     {
       className,
@@ -2438,8 +2085,8 @@ const Checkbox = React.forwardRef(
       id,
       disabled,
       ...props
-    }: CheckboxProps,
-    ref: React.Ref<React.ElementRef<typeof CheckboxPrimitive.Root>>
+    },
+    ref
   ) => {
     const checkbox = (
       <CheckboxPrimitive.Root
@@ -2643,10 +2290,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
@@ -2717,7 +2367,16 @@ export { Switch, switchVariants };
       files: [
         {
           name: "text-field.tsx",
-          content: prefixTailwindClasses(`import * as React from "react";
+          content: prefixTailwindClasses(`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";
 
@@ -2732,9 +2391,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)]",
@@ -2757,9 +2416,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",
@@ -2785,7 +2444,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";
@@ -2798,9 +2457,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") */
@@ -2821,7 +2480,7 @@ export interface TextFieldProps
   inputContainerClassName?: string;
 }
 
-const TextField = React.forwardRef(
+const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
   (
     {
       className,
@@ -2851,22 +2510,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 ?? ""
     );
 
@@ -2878,7 +2537,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);
       }
@@ -2905,7 +2564,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\`;
@@ -3024,12 +2683,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>
             ) : (
@@ -3038,7 +2697,7 @@ const TextField = React.forwardRef(
             {showCount && maxLength && (
               <span
                 className={cn(
-                  "text-sm",
+                  "text-xs",
                   charCount > maxLength
                     ? "text-semantic-error-primary"
                     : "text-semantic-text-muted"
@@ -3056,225 +2715,6 @@ const TextField = React.forwardRef(
 TextField.displayName = "TextField";
 
 export { TextField, textFieldContainerVariants, textFieldInputVariants };
-`, prefix)
-        }
-      ]
-    },
-    "textarea": {
-      name: "textarea",
-      description: "A multi-line text input with label, error state, helper text, character counter, and resize control",
-      category: "form",
-      dependencies: [
-        "class-variance-authority",
-        "clsx",
-        "tailwind-merge"
-      ],
-      files: [
-        {
-          name: "textarea.tsx",
-          content: prefixTailwindClasses(`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 };
 `, prefix)
         }
       ]
@@ -3345,7 +2785,7 @@ export interface ReadableFieldProps
  * />
  * \`\`\`
  */
-export const ReadableField = React.forwardRef(
+export const ReadableField = React.forwardRef<HTMLDivElement, ReadableFieldProps>(
   (
     {
       label,
@@ -3357,8 +2797,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);
@@ -3612,7 +3052,7 @@ export interface SelectFieldProps {
  * />
  * \`\`\`
  */
-const SelectField = React.forwardRef(
+const SelectField = React.forwardRef<HTMLButtonElement, SelectFieldProps>(
   (
     {
       label,
@@ -3635,8 +3075,8 @@ const SelectField = React.forwardRef(
       labelClassName,
       id,
       name,
-    }: SelectFieldProps,
-    ref: React.Ref<HTMLButtonElement>
+    },
+    ref
   ) => {
     // Internal state for search
     const [searchQuery, setSearchQuery] = React.useState("");
@@ -3964,7 +3404,7 @@ export interface MultiSelectProps extends VariantProps<
  * />
  * \`\`\`
  */
-const MultiSelect = React.forwardRef(
+const MultiSelect = React.forwardRef<HTMLButtonElement, MultiSelectProps>(
   (
     {
       label,
@@ -3987,8 +3427,8 @@ const MultiSelect = React.forwardRef(
       state,
       id,
       name,
-    }: MultiSelectProps,
-    ref: React.Ref<HTMLButtonElement>
+    },
+    ref
   ) => {
     // Internal state for selected values (uncontrolled mode)
     const [internalValue, setInternalValue] =
@@ -4011,6 +3451,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\`;
 
@@ -4124,6 +3565,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}
@@ -4203,6 +3645,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"
@@ -4372,7 +3815,7 @@ export interface CreatableSelectProps
   maxLength?: number
 }
 
-const CreatableSelect = React.forwardRef(
+const CreatableSelect = React.forwardRef<HTMLDivElement, CreatableSelectProps>(
   (
     {
       className,
@@ -4385,8 +3828,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("")
@@ -4394,6 +3837,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!)
@@ -4536,6 +3980,7 @@ const CreatableSelect = React.forwardRef(
               placeholder={selectedLabel || placeholder}
               aria-expanded="true"
               aria-haspopup="listbox"
+              aria-controls={listboxId}
               role="combobox"
               aria-autocomplete="list"
             />
@@ -4552,6 +3997,7 @@ const CreatableSelect = React.forwardRef(
             )}
             aria-haspopup="listbox"
             aria-expanded="false"
+            aria-controls={listboxId}
           >
             <span
               className={cn(
@@ -4581,6 +4027,7 @@ const CreatableSelect = React.forwardRef(
             {/* Options list */}
             <div
               ref={listRef}
+              id={listboxId}
               role="listbox"
               className="max-h-60 overflow-y-auto p-1"
             >
@@ -4717,7 +4164,10 @@ export interface CreatableMultiSelectProps
   maxLengthPerItem?: number
 }
 
-const CreatableMultiSelect = React.forwardRef(
+const CreatableMultiSelect = React.forwardRef<
+  HTMLDivElement,
+  CreatableMultiSelectProps
+>(
   (
     {
       className,
@@ -4732,13 +4182,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!)
 
@@ -4876,6 +4327,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"
           />
 
@@ -4889,7 +4341,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">
@@ -5028,8 +4480,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",
@@ -5050,7 +4502,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)}
@@ -5069,8 +4524,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)}
@@ -5086,7 +4541,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(
@@ -5103,8 +4561,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(
@@ -5129,10 +4587,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}
@@ -5170,8 +4628,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(
@@ -5185,7 +4643,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)}
@@ -5274,8 +4735,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} />
   )
 );
@@ -5340,7 +4801,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(
@@ -5353,7 +4817,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(
@@ -5368,7 +4835,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(
@@ -5415,7 +4885,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(
@@ -5473,7 +4946,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 (
@@ -5531,7 +5007,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(
@@ -5543,7 +5022,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)}
@@ -5591,7 +5073,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)}
@@ -5608,9 +5093,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(
@@ -5627,7 +5115,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(
@@ -5640,7 +5131,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}
@@ -5656,17 +5150,20 @@ 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(
-      "relative flex cursor-pointer select-none items-center gap-2 rounded-sm px-2 py-2 text-sm text-semantic-text-secondary outline-none transition-colors focus:bg-semantic-bg-ui focus:text-semantic-text-primary data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "relative flex cursor-pointer select-none items-center rounded-sm px-2 py-2 text-sm text-semantic-text-secondary outline-none transition-colors focus:bg-semantic-bg-ui focus:text-semantic-text-primary data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       inset && "pl-8",
       className
     )}
@@ -5687,12 +5184,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(
@@ -5723,12 +5223,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(
@@ -5757,9 +5260,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(
@@ -5772,7 +5278,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)}
@@ -5839,7 +5348,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}
@@ -5854,7 +5366,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)}
@@ -5958,7 +5473,10 @@ export interface DeleteConfirmationModalProps {
  * />
  * \`\`\`
  */
-const DeleteConfirmationModal = React.forwardRef(
+const DeleteConfirmationModal = React.forwardRef<
+  HTMLDivElement,
+  DeleteConfirmationModalProps
+>(
   (
     {
       open,
@@ -5974,8 +5492,8 @@ const DeleteConfirmationModal = React.forwardRef(
       cancelButtonText = "Cancel",
       trigger,
       className,
-    }: DeleteConfirmationModalProps,
-    ref: React.Ref<HTMLDivElement>
+    },
+    ref
   ) => {
     const [inputValue, setInputValue] = React.useState("");
     const isConfirmEnabled = inputValue === confirmText;
@@ -6143,7 +5661,10 @@ export interface ConfirmationModalProps {
  * />
  * \`\`\`
  */
-const ConfirmationModal = React.forwardRef(
+const ConfirmationModal = React.forwardRef<
+  HTMLDivElement,
+  ConfirmationModalProps
+>(
   (
     {
       open,
@@ -6158,8 +5679,8 @@ const ConfirmationModal = React.forwardRef(
       cancelButtonText = "Cancel",
       trigger,
       className,
-    }: ConfirmationModalProps,
-    ref: React.Ref<HTMLDivElement>
+    },
+    ref
   ) => {
     const handleConfirm = () => {
       onConfirm?.();
@@ -6291,7 +5812,7 @@ export interface FormModalProps {
  * </FormModal>
  * \`\`\`
  */
-const FormModal = React.forwardRef(
+const FormModal = React.forwardRef<HTMLDivElement, FormModalProps>(
   (
     {
       open,
@@ -6307,8 +5828,8 @@ const FormModal = React.forwardRef(
       disableSave = false,
       className,
       size = "sm",
-    }: FormModalProps,
-    ref: React.Ref<HTMLDivElement>
+    },
+    ref
   ) => {
     const handleSave = () => {
       onSave?.();
@@ -6423,8 +5944,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 }))}
@@ -6432,7 +5953,7 @@ const Tag = React.forwardRef(
         {...props}
       >
         {label && <span className="font-semibold mr-1">{label}</span>}
-        <span className="font-normal inline-flex items-center gap-1">{children}</span>
+        <span className="font-normal">{children}</span>
       </span>
     );
   }
@@ -6620,7 +6141,7 @@ export interface AlertProps
   defaultOpen?: boolean;
 }
 
-const Alert = React.forwardRef(
+const Alert = React.forwardRef<HTMLDivElement, AlertProps>(
   (
     {
       className,
@@ -6635,8 +6156,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;
@@ -6708,19 +6229,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";
@@ -6754,7 +6283,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(
@@ -6788,8 +6320,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}
@@ -6800,7 +6335,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(
@@ -6816,7 +6354,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(
@@ -6831,7 +6372,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)}
@@ -6840,7 +6384,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)}
@@ -7289,7 +6836,7 @@ export interface SpinnerProps
   "aria-label"?: string;
 }
 
-const Spinner = React.forwardRef(
+const Spinner = React.forwardRef<HTMLDivElement, SpinnerProps>(
   (
     {
       className,
@@ -7297,8 +6844,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;
@@ -7418,8 +6965,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
@@ -7662,7 +7209,7 @@ export interface AccordionProps
   onValueChange?: (value: string[]) => void;
 }
 
-const Accordion = React.forwardRef(
+const Accordion = React.forwardRef<HTMLDivElement, AccordionProps>(
   (
     {
       className,
@@ -7673,8 +7220,8 @@ const Accordion = React.forwardRef(
       onValueChange,
       children,
       ...props
-    }: AccordionProps,
-    ref: React.Ref<HTMLDivElement>
+    },
+    ref
   ) => {
     const [internalValue, setInternalValue] =
       React.useState<string[]>(defaultValue);
@@ -7730,8 +7277,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);
 
@@ -7771,7 +7318,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,
@@ -7830,7 +7380,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);
@@ -7962,7 +7515,7 @@ export interface PageHeaderProps
   mobileOverflowLimit?: number;
 }
 
-const PageHeader = React.forwardRef(
+const PageHeader = React.forwardRef<HTMLDivElement, PageHeaderProps>(
   (
     {
       className,
@@ -7978,8 +7531,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);
@@ -8267,7 +7820,7 @@ export interface PanelProps
  * </Panel>
  * \`\`\`
  */
-const Panel = React.forwardRef(
+const Panel = React.forwardRef<HTMLElement, PanelProps>(
   (
     {
       open = true,
@@ -8281,8 +7834,8 @@ const Panel = React.forwardRef(
       "aria-label": ariaLabel,
       onKeyDown,
       ...props
-    }: PanelProps,
-    ref: React.Ref<HTMLElement>
+    },
+    ref
   ) => {
     const resolvedSize = size ?? "default";
     const widthClass = panelWidths[resolvedSize];
@@ -8726,7 +8279,10 @@ import type { EventSelectorProps, EventCategory, EventGroup } from "./types";
  * />
  * \`\`\`
  */
-export const EventSelector = React.forwardRef(
+export const EventSelector = React.forwardRef<
+  HTMLDivElement,
+  EventSelectorProps
+>(
   (
     {
       events,
@@ -8741,8 +8297,8 @@ export const EventSelector = React.forwardRef(
       renderEmptyGroup,
       className,
       ...props
-    }: EventSelectorProps,
-    ref: React.Ref<HTMLDivElement>
+    },
+    ref
   ) => {
     // Controlled vs uncontrolled state
     const [internalSelected, setInternalSelected] = React.useState<string[]>(
@@ -8903,7 +8459,10 @@ import type { EventGroupComponentProps } from "./types";
 /**
  * Event group with accordion section and group-level checkbox
  */
-export const EventGroupComponent = React.forwardRef(
+export const EventGroupComponent = React.forwardRef<
+  HTMLDivElement,
+  EventGroupComponentProps & React.HTMLAttributes<HTMLDivElement>
+>(
   (
     {
       group,
@@ -8915,8 +8474,8 @@ export const EventGroupComponent = React.forwardRef(
       defaultExpanded = false,
       className,
       ...props
-    }: EventGroupComponentProps & React.HTMLAttributes<HTMLDivElement>,
-    ref: React.Ref<HTMLDivElement>
+    },
+    ref
   ) => {
     // Calculate selection state for this group
     const groupEventIds = events.map((e) => e.id);
@@ -9079,7 +8638,10 @@ import type { EventItemComponentProps } from "./types";
 /**
  * Individual event item with checkbox
  */
-export const EventItemComponent = React.forwardRef(({ event, isSelected, onSelectionChange, className, ...props }: EventItemComponentProps & React.HTMLAttributes<HTMLDivElement>, ref: React.Ref<HTMLDivElement>) => {
+export const EventItemComponent = React.forwardRef<
+  HTMLDivElement,
+  EventItemComponentProps & React.HTMLAttributes<HTMLDivElement>
+>(({ event, isSelected, onSelectionChange, className, ...props }, ref) => {
   return (
     <div
       ref={ref}
@@ -9290,7 +8852,10 @@ const generateId = () =>
  * />
  * \`\`\`
  */
-export const KeyValueInput = React.forwardRef(
+export const KeyValueInput = React.forwardRef<
+  HTMLDivElement,
+  KeyValueInputProps
+>(
   (
     {
       title,
@@ -9308,8 +8873,8 @@ export const KeyValueInput = React.forwardRef(
       defaultValue = [],
       className,
       ...props
-    }: KeyValueInputProps,
-    ref: React.Ref<HTMLDivElement>
+    },
+    ref
   ) => {
     // Controlled vs uncontrolled state
     const [internalPairs, setInternalPairs] =
@@ -9506,7 +9071,10 @@ import type { KeyValueRowProps } from "./types";
 /**
  * Individual key-value pair row with inputs and delete button
  */
-export const KeyValueRow = React.forwardRef(
+export const KeyValueRow = React.forwardRef<
+  HTMLDivElement,
+  KeyValueRowProps & React.HTMLAttributes<HTMLDivElement>
+>(
   (
     {
       pair,
@@ -9522,8 +9090,8 @@ export const KeyValueRow = React.forwardRef(
       onDelete,
       className,
       ...props
-    }: KeyValueRowProps & React.HTMLAttributes<HTMLDivElement>,
-    ref: React.Ref<HTMLDivElement>
+    },
+    ref
   ) => {
     // Determine if inputs should show error state
     const keyHasError = isDuplicateKey || (keyRequired && isKeyEmpty);
@@ -9738,7 +9306,10 @@ export interface ApiFeatureCardProps
  * />
  * \`\`\`
  */
-export const ApiFeatureCard = React.forwardRef(
+export const ApiFeatureCard = React.forwardRef<
+  HTMLDivElement,
+  ApiFeatureCardProps
+>(
   (
     {
       icon,
@@ -9751,8 +9322,8 @@ export const ApiFeatureCard = React.forwardRef(
       capabilitiesLabel = "Key Capabilities",
       className,
       ...props
-    }: ApiFeatureCardProps,
-    ref: React.Ref<HTMLDivElement>
+    },
+    ref
   ) => {
     return (
       <div
@@ -9924,7 +9495,10 @@ export interface EndpointDetailsProps
  * />
  * \`\`\`
  */
-export const EndpointDetails = React.forwardRef(
+export const EndpointDetails = React.forwardRef<
+  HTMLDivElement,
+  EndpointDetailsProps
+>(
   (
     {
       title = "Endpoint Details",
@@ -9945,8 +9519,8 @@ export const EndpointDetails = React.forwardRef(
       revokeDescription = "Revoking access will immediately disable all integrations using these keys.",
       className,
       ...props
-    }: EndpointDetailsProps,
-    ref: React.Ref<HTMLDivElement>
+    },
+    ref
   ) => {
     const isCalling = variant === "calling";
 
@@ -10136,7 +9710,10 @@ export interface AlertConfigurationProps {
  * AlertConfiguration component displays current alert values for minimum balance and top-up.
  * Used in payment auto-pay setup to show notification thresholds.
  */
-export const AlertConfiguration = React.forwardRef(
+export const AlertConfiguration = React.forwardRef<
+  HTMLDivElement,
+  AlertConfigurationProps
+>(
   (
     {
       minimumBalance,
@@ -10144,8 +9721,8 @@ export const AlertConfiguration = React.forwardRef(
       currencySymbol = "\u20B9",
       onEdit,
       className,
-    }: AlertConfigurationProps,
-    ref: React.Ref<HTMLDivElement>
+    },
+    ref
   ) => {
     const formatCurrency = (amount: number) => {
       const formatted = amount.toLocaleString("en-IN", {
@@ -10280,7 +9857,10 @@ export interface AlertValuesModalProps {
  * AlertValuesModal component for editing alert configuration values.
  * Displays a form with inputs for minimum balance and minimum top-up.
  */
-export const AlertValuesModal = React.forwardRef(
+export const AlertValuesModal = React.forwardRef<
+  HTMLDivElement,
+  AlertValuesModalProps
+>(
   (
     {
       open,
@@ -10292,8 +9872,8 @@ export const AlertValuesModal = React.forwardRef(
       topupOptions,
       onSave,
       loading = false,
-    }: AlertValuesModalProps,
-    ref: React.Ref<HTMLDivElement>
+    },
+    ref
   ) => {
     const [minimumBalance, setMinimumBalance] = React.useState(
       initialMinimumBalance.toString()
@@ -10442,7 +10022,7 @@ import type { AutoPaySetupProps } from "./types";
  * />
  * \`\`\`
  */
-export const AutoPaySetup = React.forwardRef(
+export const AutoPaySetup = React.forwardRef<HTMLDivElement, AutoPaySetupProps>(
   (
     {
       title = "Auto-pay setup",
@@ -10461,8 +10041,8 @@ export const AutoPaySetup = React.forwardRef(
       open,
       onOpenChange,
       className,
-    }: AutoPaySetupProps,
-    ref: React.Ref<HTMLDivElement>
+    },
+    ref
   ) => {
     const isControlled = open !== undefined;
 
@@ -10653,7 +10233,7 @@ import type { BankDetailsProps, BankDetailItem } from "./types";
  * />
  * \`\`\`
  */
-export const BankDetails = React.forwardRef(
+export const BankDetails = React.forwardRef<HTMLDivElement, BankDetailsProps>(
   (
     {
       title = "Bank details",
@@ -10665,8 +10245,8 @@ export const BankDetails = React.forwardRef(
       onOpenChange,
       onCopy,
       className,
-    }: BankDetailsProps,
-    ref: React.Ref<HTMLDivElement>
+    },
+    ref
   ) => {
     const isControlled = open !== undefined;
 
@@ -11482,8 +11062,8 @@ const BreakdownCardRow = ({ item }: { item: BreakdownCardItem }) => (
  * />
  * \`\`\`
  */
-export const PaymentSummary = React.forwardRef(
-  ({ items = [], summaryItems, className, title, headerInfo, subtotal, breakdownCard, creditLimit }: PaymentSummaryProps, ref: React.Ref<HTMLDivElement>) => {
+export const PaymentSummary = React.forwardRef<HTMLDivElement, PaymentSummaryProps>(
+  ({ items = [], summaryItems, className, title, headerInfo, subtotal, breakdownCard, creditLimit }, ref) => {
     const hasItemsBorder =
       items.length > 0 &&
       (!!subtotal || !!breakdownCard || (summaryItems && summaryItems.length > 0));
@@ -11680,7 +11260,10 @@ import type { PaymentOptionCardProps } from "./types";
  * />
  * \`\`\`
  */
-export const PaymentOptionCard = React.forwardRef(
+export const PaymentOptionCard = React.forwardRef<
+  HTMLDivElement,
+  PaymentOptionCardProps
+>(
   (
     {
       title = "Select payment method",
@@ -11695,8 +11278,8 @@ export const PaymentOptionCard = React.forwardRef(
       loading = false,
       disabled = false,
       className,
-    }: PaymentOptionCardProps,
-    ref: React.Ref<HTMLDivElement>
+    },
+    ref
   ) => {
     const [internalSelected, setInternalSelected] = React.useState<
       string | undefined
@@ -11829,7 +11412,10 @@ export interface PaymentOptionCardModalProps
  * />
  * \`\`\`
  */
-export const PaymentOptionCardModal = React.forwardRef(
+export const PaymentOptionCardModal = React.forwardRef<
+  HTMLDivElement,
+  PaymentOptionCardModalProps
+>(
   (
     {
       open,
@@ -11845,8 +11431,8 @@ export const PaymentOptionCardModal = React.forwardRef(
       loading,
       disabled,
       className,
-    }: PaymentOptionCardModalProps,
-    ref: React.Ref<HTMLDivElement>
+    },
+    ref
   ) => {
     const handleClose = () => {
       onOpenChange(false);
@@ -11984,7 +11570,7 @@ const DEFAULT_FEATURES: PlanFeature[] = [
   { name: "Channel(s)", free: "1 Pair(s)", rate: "\u20B9 300.00" },
 ];
 
-const PlanDetailModal = React.forwardRef(
+const PlanDetailModal = React.forwardRef<HTMLDivElement, PlanDetailModalProps>(
   (
     {
       open,
@@ -11995,8 +11581,8 @@ const PlanDetailModal = React.forwardRef(
       onClose,
       className,
       ...props
-    }: PlanDetailModalProps,
-    ref: React.Ref<HTMLDivElement>
+    },
+    ref
   ) => {
     const handleClose = () => {
       onClose?.();
@@ -12205,7 +11791,7 @@ const renderOptionIcon = (icon: BillingCycleOption["icon"]) => {
   return icon;
 };
 
-const PlanUpgradeModal = React.forwardRef(
+const PlanUpgradeModal = React.forwardRef<HTMLDivElement, PlanUpgradeModalProps>(
   (
     {
       open,
@@ -12222,8 +11808,8 @@ const PlanUpgradeModal = React.forwardRef(
       onClose,
       className,
       ...props
-    }: PlanUpgradeModalProps,
-    ref: React.Ref<HTMLDivElement>
+    },
+    ref
   ) => {
     const initialOptionId = defaultSelectedOptionId ?? options[0]?.id;
     const [internalSelectedOptionId, setInternalSelectedOptionId] = React.useState<
@@ -12501,7 +12087,10 @@ const getStatusIcon = (tone: PlanUpgradeSummaryTone) => {
   return <AlertCircle className="size-6 text-semantic-warning-text" aria-hidden="true" />;
 };
 
-const PlanUpgradeSummaryModal = React.forwardRef(
+const PlanUpgradeSummaryModal = React.forwardRef<
+  HTMLDivElement,
+  PlanUpgradeSummaryModalProps
+>(
   (
     {
       open,
@@ -12523,8 +12112,8 @@ const PlanUpgradeSummaryModal = React.forwardRef(
       closeAriaLabel = "Close plan summary modal",
       className,
       ...props
-    }: PlanUpgradeSummaryModalProps,
-    ref: React.Ref<HTMLDivElement>
+    },
+    ref
   ) => {
     const resolvedStatus = status ?? defaultStatusByMode[mode];
     const resolvedTone = resolvedStatus.tone ?? defaultStatusByMode[mode].tone ?? "warning";
@@ -12761,7 +12350,7 @@ import type { LetUsDriveCardProps } from "./types";
  * />
  * \`\`\`
  */
-const LetUsDriveCard = React.forwardRef(
+const LetUsDriveCard = React.forwardRef<HTMLDivElement, LetUsDriveCardProps>(
   (
     {
       title,
@@ -12781,8 +12370,8 @@ const LetUsDriveCard = React.forwardRef(
       onCtaClick,
       className,
       ...props
-    }: LetUsDriveCardProps,
-    ref: React.Ref<HTMLDivElement>
+    },
+    ref
   ) => {
     const [internalExpanded, setInternalExpanded] = React.useState(false);
     const isControlled = controlledExpanded !== undefined;
@@ -12806,7 +12395,7 @@ const LetUsDriveCard = React.forwardRef(
       <div
         ref={ref}
         className={cn(
-          "flex min-h-0 flex-col gap-6 rounded-[14px] border border-semantic-border-layout bg-card p-5 shadow-sm",
+          "flex h-full min-h-0 flex-col gap-6 rounded-[14px] border border-semantic-border-layout bg-card p-5 shadow-sm",
           className
         )}
         {...props}
@@ -13045,7 +12634,7 @@ import type { PowerUpCardProps } from "./types";
  * />
  * \`\`\`
  */
-const PowerUpCard = React.forwardRef(
+const PowerUpCard = React.forwardRef<HTMLDivElement, PowerUpCardProps>(
   (
     {
       icon,
@@ -13056,8 +12645,8 @@ const PowerUpCard = React.forwardRef(
       onCtaClick,
       className,
       ...props
-    }: PowerUpCardProps,
-    ref: React.Ref<HTMLDivElement>
+    },
+    ref
   ) => {
     return (
       <div
@@ -13184,7 +12773,7 @@ import type { PricingCardProps } from "./types";
  * />
  * \`\`\`
  */
-const PricingCard = React.forwardRef(
+const PricingCard = React.forwardRef<HTMLDivElement, PricingCardProps>(
   (
     {
       planName,
@@ -13208,8 +12797,8 @@ const PricingCard = React.forwardRef(
       infoText,
       className,
       ...props
-    }: PricingCardProps,
-    ref: React.Ref<HTMLDivElement>
+    },
+    ref
   ) => {
     const buttonText =
       ctaText || (isCurrentPlan ? "Current plan" : "Select plan");
@@ -13231,6 +12820,9 @@ const PricingCard = React.forwardRef(
         {/* Header */}
         <div
           className="flex flex-col gap-4 rounded-t-xl rounded-b-lg p-4"
+          style={
+            headerBgColor ? { backgroundColor: headerBgColor } : undefined
+          }
         >
           {/* Plan name + badge */}
           <div className="flex items-center gap-4">
@@ -13288,11 +12880,11 @@ const PricingCard = React.forwardRef(
               </div>
             )}
             <Button
-              variant={isCurrentPlan ? "secondary" : "default"}
+              variant={isCurrentPlan ? "outline" : "default"}
               className="w-full"
               onClick={onCtaClick}
               loading={ctaLoading}
-              disabled={ctaDisabled || isCurrentPlan}
+              disabled={ctaDisabled}
             >
               {buttonText}
             </Button>
@@ -13339,34 +12931,29 @@ const PricingCard = React.forwardRef(
           </div>
         )}
 
-        {/* Bottom sections pushed to card bottom for grid alignment */}
-        {(addon || (usageDetails && usageDetails.length > 0)) && (
-          <div className="mt-auto flex flex-col gap-6">
-            {/* Addon */}
-            {addon && (
-              <div className="flex items-center gap-2.5 rounded-md bg-[var(--color-info-25)] border border-[#f3f5f6] pl-4 py-2.5">
-                {addon.icon && (
-                  <div className="size-5 shrink-0">{addon.icon}</div>
-                )}
-                <span className="text-sm text-semantic-text-primary tracking-[0.035px]">
-                  {addon.text}
-                </span>
-              </div>
+        {/* Addon */}
+        {addon && (
+          <div className="flex items-center gap-2.5 rounded-md bg-[var(--color-info-25)] border border-[#f3f5f6] pl-4 py-2.5">
+            {addon.icon && (
+              <div className="size-5 shrink-0">{addon.icon}</div>
             )}
+            <span className="text-sm text-semantic-text-primary tracking-[0.035px]">
+              {addon.text}
+            </span>
+          </div>
+        )}
 
-            {/* Usage Details */}
-            {usageDetails && usageDetails.length > 0 && (
-              <div className="flex flex-col gap-2.5 rounded-md bg-[var(--color-info-25)] border border-[#f3f5f6] px-4 py-2.5">
-                {usageDetails.map((detail, index) => (
-                  <div key={index} className="flex items-start gap-2">
-                    <span className="size-1.5 rounded-full bg-semantic-primary shrink-0 mt-[7px]" />
-                    <span className="text-sm text-semantic-text-primary tracking-[0.035px]">
-                      <strong>{detail.label}:</strong> {detail.value}
-                    </span>
-                  </div>
-                ))}
+        {/* Usage Details */}
+        {usageDetails && usageDetails.length > 0 && (
+          <div className="flex flex-col gap-2.5 rounded-md bg-[var(--color-info-25)] border border-[#f3f5f6] px-4 py-2.5">
+            {usageDetails.map((detail, index) => (
+              <div key={index} className="flex items-start gap-2">
+                <span className="size-1.5 rounded-full bg-semantic-primary shrink-0 mt-[7px]" />
+                <span className="text-sm text-semantic-text-primary tracking-[0.035px]">
+                  <strong>{detail.label}:</strong> {detail.value}
+                </span>
               </div>
-            )}
+            ))}
           </div>
         )}
       </div>
@@ -13387,8 +12974,8 @@ interface PlanIconProps extends React.SVGAttributes<SVGElement> {
   className?: string;
 }
 
-const CompactCarIcon = React.forwardRef(
-  ({ className, ...props }: PlanIconProps, ref: React.Ref<SVGSVGElement>) => (
+const CompactCarIcon = React.forwardRef<SVGSVGElement, PlanIconProps>(
+  ({ className, ...props }, ref) => (
     <svg
       ref={ref}
       className={className}
@@ -13427,8 +13014,8 @@ const CompactCarIcon = React.forwardRef(
 );
 CompactCarIcon.displayName = "CompactCarIcon";
 
-const SedanCarIcon = React.forwardRef(
-  ({ className, ...props }: PlanIconProps, ref: React.Ref<SVGSVGElement>) => (
+const SedanCarIcon = React.forwardRef<SVGSVGElement, PlanIconProps>(
+  ({ className, ...props }, ref) => (
     <svg
       ref={ref}
       className={className}
@@ -13479,8 +13066,8 @@ const SedanCarIcon = React.forwardRef(
 );
 SedanCarIcon.displayName = "SedanCarIcon";
 
-const SuvCarIcon = React.forwardRef(
-  ({ className, ...props }: PlanIconProps, ref: React.Ref<SVGSVGElement>) => (
+const SuvCarIcon = React.forwardRef<SVGSVGElement, PlanIconProps>(
+  ({ className, ...props }, ref) => (
     <svg
       ref={ref}
       className={className}
@@ -13693,7 +13280,7 @@ import type { PricingPageProps } from "./types";
  * />
  * \`\`\`
  */
-const PricingPage = React.forwardRef(
+const PricingPage = React.forwardRef<HTMLDivElement, PricingPageProps>(
   (
     {
       title = "Select business plan",
@@ -13713,10 +13300,11 @@ const PricingPage = React.forwardRef(
       onFeatureComparisonClick,
       letUsDriveCards = [],
       letUsDriveTitle = "Let us drive \u2014 Full-service management",
+      letUsDriveExpandMode,
       className,
       ...props
-    }: PricingPageProps,
-    ref: React.Ref<HTMLDivElement>
+    },
+    ref
   ) => {
     // Internal state for uncontrolled mode
     const [internalTab, setInternalTab] = React.useState(
@@ -13725,6 +13313,9 @@ const PricingPage = React.forwardRef(
     const [internalBilling, setInternalBilling] = React.useState<
       "monthly" | "yearly"
     >("monthly");
+    const [expandedLetUsDriveIndices, setExpandedLetUsDriveIndices] =
+      React.useState<number[]>([]);
+
     const currentTab = controlledTab ?? internalTab;
     const currentBilling = controlledBilling ?? internalBilling;
 
@@ -13738,6 +13329,30 @@ const PricingPage = React.forwardRef(
       onBillingPeriodChange?.(period);
     };
 
+    const cardCount = letUsDriveCards.length;
+
+    const handleLetUsDriveExpandedChange = (index: number, expanded: boolean) => {
+      if (letUsDriveExpandMode === "all") {
+        if (expanded) {
+          setExpandedLetUsDriveIndices(
+            Array.from({ length: cardCount }, (_, i) => i)
+          );
+        } else {
+          setExpandedLetUsDriveIndices((prev) =>
+            prev.filter((i) => i !== index)
+          );
+        }
+      } else {
+        if (expanded) {
+          setExpandedLetUsDriveIndices([index]);
+        } else {
+          setExpandedLetUsDriveIndices((prev) =>
+            prev.filter((i) => i !== index)
+          );
+        }
+      }
+    };
+
     const hasPowerUps = powerUpCards.length > 0;
     const hasLetUsDrive = letUsDriveCards.length > 0;
 
@@ -13833,11 +13448,22 @@ const PricingPage = React.forwardRef(
                 {letUsDriveTitle}
               </h2>
 
-              {/* Service cards \u2014 items-start so expanding one card doesn't stretch others */}
-              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 items-start">
-                {letUsDriveCards.map((cardProps, index) => (
-                  <LetUsDriveCard key={index} {...cardProps} />
-                ))}
+              {/* Service cards \u2014 items-stretch + card h-full + mt-auto on actions align Talk to us buttons */}
+              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 items-stretch">
+                {letUsDriveCards.map((cardProps, index) => {
+                  const hasDetailsContent =
+                    cardProps.detailsContent &&
+                    cardProps.detailsContent.items.length > 0;
+                  const useControlledExpand =
+                    letUsDriveExpandMode && hasDetailsContent;
+                  const merged = { ...cardProps };
+                  if (useControlledExpand) {
+                    merged.expanded = expandedLetUsDriveIndices.includes(index);
+                    merged.onExpandedChange = (expanded: boolean) =>
+                      handleLetUsDriveExpandedChange(index, expanded);
+                  }
+                  return <LetUsDriveCard key={index} {...merged} />;
+                })}
               </div>
             </div>
           </div>
@@ -13926,6 +13552,13 @@ export interface PricingPageProps
   letUsDriveCards?: LetUsDriveCardProps[];
   /** Let-us-drive section heading (default: "Let us drive \u2014 Full-service management") */
   letUsDriveTitle?: string;
+  /**
+   * When set, controls how "Show details" expands across cards.
+   * - "single": only the clicked card expands (accordion).
+   * - "all": clicking "Show details" on any card expands all cards that have detailsContent.
+   * Ignored when cards are used without detailsContent or without controlled expanded state.
+   */
+  letUsDriveExpandMode?: "single" | "all";
 }
 `, prefix)
         },
@@ -13982,7 +13615,7 @@ import type { PricingToggleProps } from "./types";
  * />
  * \`\`\`
  */
-const PricingToggle = React.forwardRef(
+const PricingToggle = React.forwardRef<HTMLDivElement, PricingToggleProps>(
   (
     {
       tabs,
@@ -13995,8 +13628,8 @@ const PricingToggle = React.forwardRef(
       yearlyLabel = "Yearly (Save 20%)",
       className,
       ...props
-    }: PricingToggleProps,
-    ref: React.Ref<HTMLDivElement>
+    },
+    ref
   ) => {
     const isYearly = billingPeriod === "yearly";
 
@@ -14241,8 +13874,8 @@ interface BrandIconProps extends React.SVGAttributes<SVGElement> {
  * Used in TalkToUsModal and available for any component that needs
  * the MyOperator contact/chat branding.
  */
-const MyOperatorChatIcon = React.forwardRef(
-  ({ className, ...props }: BrandIconProps, ref: React.Ref<SVGSVGElement>) => (
+const MyOperatorChatIcon = React.forwardRef<SVGSVGElement, BrandIconProps>(
+  ({ className, ...props }, ref) => (
     <svg
       ref={ref}
       className={className}
@@ -14375,8 +14008,8 @@ function getTypeLabel(
  * All displayed data (icon, badge, name, count, last published) comes from the \`bot\` prop.
  * Set bot.type to "chatbot" or "voicebot"; no separate card components needed.
  */
-export const BotCard = React.forwardRef(
-  ({ bot, typeLabels, onEdit, onDelete, className, ...props }: BotCardProps, ref: React.Ref<HTMLDivElement>) => {
+export const BotCard = React.forwardRef<HTMLDivElement, BotCardProps>(
+  ({ bot, typeLabels, onEdit, onDelete, className, ...props }, ref) => {
     const typeLabel = getTypeLabel(bot, typeLabels);
     const isChatbot = bot.type === "chatbot";
 
@@ -14406,6 +14039,7 @@ export const BotCard = React.forwardRef(
         className={cn(
           "relative bg-semantic-bg-primary border border-semantic-border-layout rounded-[5px] min-w-0 max-w-full overflow-hidden flex flex-col",
           "shadow-[0px_4px_15.1px_0px_rgba(0,0,0,0.06)] p-3 sm:p-4 md:p-5",
+          "min-h-[180px] sm:min-h-[207px] h-full shrink-0",
           onEdit && "cursor-pointer",
           className
         )}
@@ -14463,7 +14097,7 @@ export const BotCard = React.forwardRef(
         </div>
 
         {/* Bot name */}
-        <h3 className="m-0 text-sm sm:text-base font-normal text-semantic-text-primary line-clamp-1 mb-1 min-w-0">
+        <h3 className="m-0 text-sm sm:text-base font-normal text-semantic-text-primary truncate mb-1 min-w-0">
           {bot.name}
         </h3>
 
@@ -14491,7 +14125,7 @@ export const BotCard = React.forwardRef(
             </span>
           )}
           {(bot.lastPublishedBy || bot.lastPublishedDate) ? (
-            <p className="m-0 text-xs sm:text-sm text-semantic-text-muted line-clamp-1">
+            <p className="m-0 text-xs sm:text-sm text-semantic-text-muted truncate">
               {bot.lastPublishedBy
                 ? \`\${bot.lastPublishedBy} | \${bot.lastPublishedDate ?? "\u2014"}\`
                 : bot.lastPublishedDate}
@@ -14541,7 +14175,10 @@ const BOT_TYPE_OPTIONS: BotTypeOption[] = [
   },
 ];
 
-export const CreateBotModal = React.forwardRef(({ open, onOpenChange, onSubmit, isLoading, className }: CreateBotModalProps, ref: React.Ref<HTMLDivElement>) => {
+export const CreateBotModal = React.forwardRef<
+  HTMLDivElement,
+  CreateBotModalProps
+>(({ open, onOpenChange, onSubmit, isLoading, className }, ref) => {
   const [name, setName] = React.useState("");
   const [selectedType, setSelectedType] = React.useState<BotType>("chatbot");
 
@@ -14689,15 +14326,15 @@ import type { CreateBotFlowProps } from "./types";
  * Create bot flow: "Create new bot" card + Create Bot modal. No header (title/subtitle/search).
  * Use when you want the create-bot experience without the list header.
  */
-export const CreateBotFlow = React.forwardRef(
+export const CreateBotFlow = React.forwardRef<HTMLDivElement, CreateBotFlowProps>(
   (
     {
       createCardLabel = "Create new bot",
       onSubmit,
       className,
       ...props
-    }: CreateBotFlowProps,
-    ref: React.Ref<HTMLDivElement>
+    },
+    ref
   ) => {
     const [modalOpen, setModalOpen] = React.useState(false);
 
@@ -14813,7 +14450,7 @@ import { BotListGrid } from "./bot-list-grid";
 import { CreateBotModal } from "./create-bot-modal";
 import type { BotListProps } from "./types";
 
-export const BotList = React.forwardRef(
+export const BotList = React.forwardRef<HTMLDivElement, BotListProps>(
   (
     {
       bots = [],
@@ -14829,8 +14466,8 @@ export const BotList = React.forwardRef(
       createCardLabel = "Create new bot",
       className,
       ...props
-    }: BotListProps,
-    ref: React.Ref<HTMLDivElement>
+    },
+    ref
   ) => {
     const [searchQuery, setSearchQuery] = React.useState("");
     const [createModalOpen, setCreateModalOpen] = React.useState(false);
@@ -14940,10 +14577,10 @@ const botListHeaderVariants = cva("min-w-0", {
   },
 });
 
-export const BotListHeader = React.forwardRef(
+export const BotListHeader = React.forwardRef<HTMLDivElement, BotListHeaderProps>(
   (
-    { title, subtitle, variant = "default", rightContent, className, ...props }: BotListHeaderProps,
-    ref: React.Ref<HTMLDivElement>
+    { title, subtitle, variant = "default", rightContent, className, ...props },
+    ref
   ) => {
     const rootClassName = cn(botListHeaderVariants({ variant }), className);
     const titleBlock = (
@@ -14990,7 +14627,7 @@ import { Search } from "lucide-react";
 import { cn } from "../../../lib/utils";
 import type { BotListSearchProps } from "./types";
 
-export const BotListSearch = React.forwardRef(
+export const BotListSearch = React.forwardRef<HTMLDivElement, BotListSearchProps>(
   (
     {
       value,
@@ -14999,8 +14636,8 @@ export const BotListSearch = React.forwardRef(
       defaultValue,
       className,
       ...props
-    }: BotListSearchProps,
-    ref: React.Ref<HTMLDivElement>
+    },
+    ref
   ) => {
     const [internalValue, setInternalValue] = React.useState(defaultValue ?? "");
     const isControlled = value !== undefined;
@@ -15047,15 +14684,18 @@ import { Plus } from "lucide-react";
 import { cn } from "../../../lib/utils";
 import type { BotListCreateCardProps } from "./types";
 
-export const BotListCreateCard = React.forwardRef(
+export const BotListCreateCard = React.forwardRef<
+  HTMLButtonElement,
+  BotListCreateCardProps
+>(
   (
     {
       label = "Create new bot",
       onClick,
       className,
       ...props
-    }: BotListCreateCardProps,
-    ref: React.Ref<HTMLButtonElement>
+    },
+    ref
   ) => (
     <button
       ref={ref}
@@ -15104,13 +14744,14 @@ BotListCreateCard.displayName = "BotListCreateCard";
 import { cn } from "../../../lib/utils";
 import type { BotListGridProps } from "./types";
 
-export const BotListGrid = React.forwardRef(
-  ({ children, className, ...props }: BotListGridProps, ref: React.Ref<HTMLDivElement>) => (
+export const BotListGrid = React.forwardRef<HTMLDivElement, BotListGridProps>(
+  ({ children, className, ...props }, ref) => (
     <div
       ref={ref}
       className={cn(
-        "grid w-full min-w-0 max-w-full overflow-hidden gap-3 sm:gap-5 md:gap-6",
+        "grid w-full min-w-0 max-w-full content-start gap-3 sm:gap-5 md:gap-6",
         "grid-cols-[repeat(auto-fill,minmax(min(100%,280px),1fr))]",
+        "auto-rows-auto items-stretch",
         className
       )}
       {...props}
@@ -15406,7 +15047,7 @@ function getTimeRemaining(progress: number) {
     : \`\${secs} seconds remaining\`;
 }
 
-const FileUploadModal = React.forwardRef(
+const FileUploadModal = React.forwardRef<HTMLDivElement, FileUploadModalProps>(
   (
     {
       open,
@@ -15429,8 +15070,8 @@ const FileUploadModal = React.forwardRef(
       loading = false,
       className,
       ...props
-    }: FileUploadModalProps,
-    ref: React.Ref<HTMLDivElement>
+    },
+    ref
   ) => {
     const [items, setItems] = React.useState<UploadItem[]>([]);
     const fileInputRef = React.useRef<HTMLInputElement>(null);
@@ -15800,8 +15441,8 @@ import { X, Play, File } from "lucide-react";
 import { cn } from "../../../lib/utils";
 import type { AttachmentPreviewProps } from "./types";
 
-const AttachmentPreview = React.forwardRef(
-  ({ className, file, onRemove, ...props }: AttachmentPreviewProps, ref: React.Ref<HTMLDivElement>) => {
+const AttachmentPreview = React.forwardRef<HTMLDivElement, AttachmentPreviewProps>(
+  ({ className, file, onRemove, ...props }, ref) => {
     const url = React.useMemo(() => URL.createObjectURL(file), [file]);
 
     const isImage = file.type.startsWith("image/");
@@ -15959,7 +15600,7 @@ const BAR_WIDTH = 2;
 const BAR_GAP = 1.5;
 const SVG_HEIGHT = 32;
 
-const AudioMedia = React.forwardRef(
+const AudioMedia = React.forwardRef<HTMLDivElement, AudioMediaProps>(
   (
     {
       className,
@@ -15973,8 +15614,8 @@ const AudioMedia = React.forwardRef(
       onPlayChange,
       onSpeedChange,
       ...props
-    }: AudioMediaProps,
-    ref: React.Ref<HTMLDivElement>
+    },
+    ref
   ) => {
     const [playing, setPlaying] = React.useState(false);
     const [speed, setSpeed] = React.useState(1);
@@ -16174,8 +15815,8 @@ import { Reply, ExternalLink, ChevronLeft, ChevronRight } from "lucide-react";
 import { cn } from "../../../lib/utils";
 import type { CarouselMediaProps } from "./types";
 
-const CarouselMedia = React.forwardRef(
-  ({ className, cards, cardWidth = 260, imageHeight = 200, ...props }: CarouselMediaProps, ref: React.Ref<HTMLDivElement>) => {
+const CarouselMedia = React.forwardRef<HTMLDivElement, CarouselMediaProps>(
+  ({ className, cards, cardWidth = 260, imageHeight = 200, ...props }, ref) => {
     const scrollRef = useRef<HTMLDivElement>(null);
     const [canScrollLeft, setCanScrollLeft] = useState(false);
     const [canScrollRight, setCanScrollRight] = useState(
@@ -16429,7 +16070,7 @@ function DeliveryFooter({
  * </ChatBubble>
  * \`\`\`
  */
-const ChatBubble = React.forwardRef(
+const ChatBubble = React.forwardRef<HTMLDivElement, ChatBubbleProps>(
   (
     {
       variant,
@@ -16444,8 +16085,8 @@ const ChatBubble = React.forwardRef(
       children,
       className,
       ...props
-    }: ChatBubbleProps,
-    ref: React.Ref<HTMLDivElement>
+    },
+    ref
   ) => {
     const hasMedia = !!media;
 
@@ -16563,126 +16204,6 @@ export interface ChatBubbleProps extends React.HTMLAttributes<HTMLDivElement> {
           name: "index.ts",
           content: prefixTailwindClasses(`export { ChatBubble } from "./chat-bubble";
 export type { ChatBubbleProps, ChatBubbleReply, DeliveryStatus } from "./types";
-`, prefix)
-        }
-      ]
-    },
-    "chat-timeline-divider": {
-      name: "chat-timeline-divider",
-      description: "A timeline divider for chat message lists \u2014 renders centered content between horizontal lines with date, unread, and system event variants",
-      category: "custom",
-      dependencies: [
-        "clsx",
-        "tailwind-merge"
-      ],
-      internalDependencies: [],
-      isMultiFile: true,
-      directory: "chat-timeline-divider",
-      mainFile: "chat-timeline-divider.tsx",
-      files: [
-        {
-          name: "chat-timeline-divider.tsx",
-          content: prefixTailwindClasses(`import * as React from "react";
-import { cn } from "../../../lib/utils";
-
-/* \u2500\u2500 Types \u2500\u2500 */
-
-export type ChatTimelineDividerVariant = "default" | "unread" | "system";
-
-export interface ChatTimelineDividerProps
-  extends Omit<React.HTMLAttributes<HTMLDivElement>, "children"> {
-  /**
-   * Visual style of the divider.
-   * - \`default\`: plain centered text between lines (e.g. "Today", "Yesterday")
-   * - \`unread\`: bold text in a white pill with border (e.g. "3 unread messages")
-   * - \`system\`: muted text in a white pill with border (e.g. "Assigned to Alex Smith")
-   */
-  variant?: ChatTimelineDividerVariant;
-  /** Content to display \u2014 text or ReactNode for rich content (e.g. linked names) */
-  children: React.ReactNode;
-}
-
-/* \u2500\u2500 Variant styles \u2500\u2500 */
-
-const containerStyles: Record<ChatTimelineDividerVariant, string> = {
-  default: "",
-  unread:
-    "bg-white px-2.5 py-0.5 rounded-full border border-semantic-border-layout shadow-sm",
-  system:
-    "bg-white px-2.5 py-1 rounded-full border border-semantic-border-layout shadow-[0px_1px_2px_0px_rgba(10,13,18,0.05)]",
-};
-
-const textStyles: Record<ChatTimelineDividerVariant, string> = {
-  default: "text-[13px] text-semantic-text-muted",
-  unread: "text-[12px] font-semibold text-semantic-text-primary",
-  system: "text-[13px] text-semantic-text-muted",
-};
-
-/* \u2500\u2500 Component \u2500\u2500 */
-
-/**
- * ChatTimelineDivider renders a centered label between two horizontal lines
- * in a chat message timeline.
- *
- * Use it to separate messages by date, mark unread boundaries,
- * or display system/action events (assignments, resolutions, etc.).
- *
- * @example
- * \`\`\`tsx
- * // Date separator
- * <ChatTimelineDivider>Today</ChatTimelineDivider>
- *
- * // Unread count
- * <ChatTimelineDivider variant="unread">3 unread messages</ChatTimelineDivider>
- *
- * // System event with linked names
- * <ChatTimelineDivider variant="system">
- *   Assigned to <span className="text-semantic-text-link font-medium">Alex Smith</span>
- * </ChatTimelineDivider>
- * \`\`\`
- */
-const ChatTimelineDivider = React.forwardRef<
-  HTMLDivElement,
-  ChatTimelineDividerProps
->(
-  (
-    { variant = "default", children, className, ...props },
-    ref
-  ) => {
-    const showLines = true;
-
-    return (
-      <div
-        ref={ref}
-        role="separator"
-        className={cn("flex items-center gap-4 my-2", className)}
-        {...props}
-      >
-        {showLines && (
-          <div className="flex-1 h-px bg-semantic-border-layout" />
-        )}
-        <div className={cn(containerStyles[variant])}>
-          <span className={cn(textStyles[variant])}>{children}</span>
-        </div>
-        {showLines && (
-          <div className="flex-1 h-px bg-semantic-border-layout" />
-        )}
-      </div>
-    );
-  }
-);
-ChatTimelineDivider.displayName = "ChatTimelineDivider";
-
-export { ChatTimelineDivider };
-`, prefix)
-        },
-        {
-          name: "index.ts",
-          content: prefixTailwindClasses(`export {
-  ChatTimelineDivider,
-  type ChatTimelineDividerProps,
-  type ChatTimelineDividerVariant,
-} from "./chat-timeline-divider";
 `, prefix)
         }
       ]
@@ -16738,7 +16259,7 @@ import type { ChatComposerProps } from "./types";
  * />
  * \`\`\`
  */
-const ChatComposer = React.forwardRef(
+const ChatComposer = React.forwardRef<HTMLDivElement, ChatComposerProps>(
   (
     {
       className,
@@ -16762,8 +16283,8 @@ const ChatComposer = React.forwardRef(
       expiredMessage = "This chat has expired. Send a template to continue.",
       onTemplateClick,
       ...props
-    }: ChatComposerProps,
-    ref: React.Ref<HTMLDivElement>
+    },
+    ref
   ) => {
     const textareaRef = React.useRef<HTMLTextAreaElement>(null);
 
@@ -16938,8 +16459,8 @@ export interface ChatComposerProps extends Omit<React.HTMLAttributes<HTMLDivElem
   leftActions?: React.ReactNode;
   /** Slot for right action buttons (rendered inside textarea container, bottom-right) */
   rightActions?: React.ReactNode;
-  /** Send button label. Accepts text or JSX (e.g. icon + text). Defaults to "Send" */
-  sendLabel?: React.ReactNode;
+  /** Send button label. Defaults to "Send" */
+  sendLabel?: string;
   /** Whether to show the send dropdown chevron. Defaults to false */
   showSendDropdown?: boolean;
   /** Whether the chat is expired (shows template prompt instead of composer) */
@@ -16980,7 +16501,7 @@ import { cn } from "../../../lib/utils";
 import { File, FileSpreadsheet, ArrowDownToLine } from "lucide-react";
 import type { DocMediaProps } from "./types";
 
-const DocMedia = React.forwardRef(
+const DocMedia = React.forwardRef<HTMLDivElement, DocMediaProps>(
   (
     {
       className,
@@ -16993,8 +16514,8 @@ const DocMedia = React.forwardRef(
       caption,
       onDownload,
       ...props
-    }: DocMediaProps,
-    ref: React.Ref<HTMLDivElement>
+    },
+    ref
   ) => {
     if (variant === "preview") {
       return (
@@ -17033,35 +16554,12 @@ const DocMedia = React.forwardRef(
 
     if (variant === "download") {
       return (
-        <div
-          ref={ref}
-          className={cn("relative rounded-t overflow-hidden", className)}
-          {...props}
-        >
+        <div ref={ref} className={cn("relative", className)} {...props}>
           <img
             src={thumbnailUrl}
             alt={caption || filename || "Document"}
-            className="w-full object-cover"
-            style={{ aspectRatio: "442/308" }}
+            className="w-full rounded-t object-cover max-h-[280px]"
           />
-          <div className="absolute inset-0 bg-gradient-to-t from-[#1d222f] via-[#1d222f]/30 to-transparent" />
-          <div className="absolute bottom-0 left-0 right-0 px-4 py-3">
-            <p className="m-0 text-[14px] font-semibold text-white truncate">
-              {filename || "Document"}
-            </p>
-            <div className="flex items-center gap-1.5 mt-1">
-              <File className="size-3.5 text-white/80" />
-              <span className="text-[12px] text-white/80">
-                {[
-                  fileType,
-                  pageCount && \`\${pageCount} pages\`,
-                  fileSize,
-                ]
-                  .filter(Boolean)
-                  .join("  \\u00B7  ")}
-              </span>
-            </div>
-          </div>
         </div>
       );
     }
@@ -17204,7 +16702,7 @@ import type { VideoMediaProps } from "./types";
 
 const DEFAULT_SPEED_OPTIONS = [0.25, 0.5, 0.75, 1, 1.25, 1.5, 1.75, 2];
 
-const VideoMedia = React.forwardRef(
+const VideoMedia = React.forwardRef<HTMLDivElement, VideoMediaProps>(
   (
     {
       className,
@@ -17216,8 +16714,8 @@ const VideoMedia = React.forwardRef(
       onSpeedChange,
       onClick,
       ...props
-    }: VideoMediaProps,
-    ref: React.Ref<HTMLDivElement>
+    },
+    ref
   ) => {
     const [playing, setPlaying] = useState(false);
     const [muted, setMuted] = useState(false);
@@ -17450,10 +16948,7 @@ export type { VideoMediaProps } from "./types";
         "creatable-multi-select",
         "page-header",
         "tag",
-        "file-upload-modal",
-        "form-modal",
-        "text-field",
-        "textarea"
+        "file-upload-modal"
       ],
       isMultiFile: true,
       directory: "ivr-bot",
@@ -17505,7 +17000,7 @@ const DEFAULT_DATA: IvrBotConfigData = {
 };
 
 // \u2500\u2500\u2500 Main IvrBotConfig \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
-export const IvrBotConfig = React.forwardRef(
+export const IvrBotConfig = React.forwardRef<HTMLDivElement, IvrBotConfigProps>(
   (
     {
       botTitle = "IVR bot",
@@ -17552,8 +17047,8 @@ export const IvrBotConfig = React.forwardRef(
       callEndThresholdMin,
       callEndThresholdMax,
       className,
-    }: IvrBotConfigProps,
-    ref: React.Ref<HTMLDivElement>
+    },
+    ref
   ) => {
     const [data, setData] = React.useState<IvrBotConfigData>({
       ...DEFAULT_DATA,
@@ -17756,7 +17251,7 @@ IvrBotConfig.displayName = "IvrBotConfig";
         {
           name: "create-function-modal.tsx",
           content: prefixTailwindClasses(`import * as React from "react";
-import { Trash2, ChevronDown, X, Plus, Pencil } from "lucide-react";
+import { Trash2, ChevronDown, X, Plus } from "lucide-react";
 import { cn } from "../../../lib/utils";
 import {
   Dialog,
@@ -17764,9 +17259,6 @@ import {
   DialogTitle,
 } from "../dialog";
 import { Button } from "../button";
-import { FormModal } from "../form-modal";
-import { TextField } from "../text-field";
-import { Textarea } from "../textarea";
 import type {
   CreateFunctionModalProps,
   CreateFunctionData,
@@ -17774,12 +17266,10 @@ import type {
   FunctionTabType,
   HttpMethod,
   KeyValuePair,
-  VariableGroup,
-  VariableItem,
-  VariableFormData,
 } from "./types";
 
 const HTTP_METHODS: HttpMethod[] = ["GET", "POST", "PUT", "DELETE", "PATCH"];
+const METHODS_WITH_BODY: HttpMethod[] = ["POST", "PUT", "PATCH"];
 const FUNCTION_NAME_MAX = 100;
 const BODY_MAX = 4000;
 const URL_MAX = 500;
@@ -17787,8 +17277,6 @@ const HEADER_KEY_MAX = 512;
 const HEADER_VALUE_MAX = 2048;
 
 const FUNCTION_NAME_REGEX = /^(?!_+$)(?=.*[a-zA-Z])[a-zA-Z][a-zA-Z0-9_]*$/;
-const VARIABLE_NAME_MAX = 30;
-const VARIABLE_NAME_REGEX = /^[a-zA-Z][a-zA-Z0-9_]*$/;
 const URL_REGEX = /^https?:\\/\\//;
 const HEADER_KEY_REGEX = /^[!#$%&'*+\\-.^_\`|~0-9a-zA-Z]+$/;
 // Query parameter validation (aligned with apiIntegrationSchema.queryParams)
@@ -17838,399 +17326,126 @@ function insertVar(value: string, variable: string, from: number, to: number): s
   return value.slice(0, from) + variable + value.slice(to);
 }
 
-function extractVarRefs(texts: string[]): string[] {
-  const pattern = /\\{\\{[^}]+\\}\\}/g;
-  const all = texts.flatMap((t) => t.match(pattern) ?? []);
-  return Array.from(new Set(all));
-}
-
-// \u2500\u2500 Value segment parser \u2014 splits "text {{var}} text" into typed segments \u2500\u2500\u2500\u2500\u2500
-
-type ValueSegment =
-  | { type: "text"; content: string }
-  | { type: "var"; name: string; raw: string };
-
-function parseValueSegments(value: string): ValueSegment[] {
-  const segments: ValueSegment[] = [];
-  const regex = /\\{\\{([^}]+)\\}\\}/g;
-  let lastIndex = 0;
-  let match;
-  while ((match = regex.exec(value)) !== null) {
-    if (match.index > lastIndex) {
-      segments.push({ type: "text", content: value.slice(lastIndex, match.index) });
-    }
-    segments.push({ type: "var", name: match[1], raw: match[0] });
-    lastIndex = regex.lastIndex;
-  }
-  if (lastIndex < value.length) {
-    segments.push({ type: "text", content: value.slice(lastIndex) });
-  }
-  return segments;
-}
-
-/** Mirror-div technique \u2014 returns { top, left } relative to the element's top-left corner. */
-function getCaretPixelPos(
-  el: HTMLTextAreaElement | HTMLInputElement,
-  position: number
-): { top: number; left: number } {
-  const cs = window.getComputedStyle(el);
-  const mirror = document.createElement("div");
-
-  (
-    [
-      "boxSizing", "width", "paddingTop", "paddingRight", "paddingBottom", "paddingLeft",
-      "borderTopWidth", "borderRightWidth", "borderBottomWidth", "borderLeftWidth",
-      "fontFamily", "fontSize", "fontWeight", "fontStyle", "fontVariant",
-      "letterSpacing", "lineHeight", "textTransform", "wordSpacing", "tabSize",
-    ] as (keyof CSSStyleDeclaration)[]
-  ).forEach((prop) => {
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    (mirror.style as any)[prop] = cs[prop];
-  });
-
-  mirror.style.whiteSpace = el.tagName === "TEXTAREA" ? "pre-wrap" : "pre";
-  mirror.style.wordWrap = el.tagName === "TEXTAREA" ? "break-word" : "normal";
-  mirror.style.position = "absolute";
-  mirror.style.visibility = "hidden";
-  mirror.style.overflow = "hidden";
-  mirror.style.top = "0";
-  mirror.style.left = "0";
-  mirror.style.width = el.offsetWidth + "px";
-
-  document.body.appendChild(mirror);
-  mirror.appendChild(document.createTextNode(el.value.substring(0, position)));
-
-  const marker = document.createElement("span");
-  marker.textContent = "\\u200b";
-  mirror.appendChild(marker);
-
-  const markerRect = marker.getBoundingClientRect();
-  const mirrorRect = mirror.getBoundingClientRect();
-  document.body.removeChild(mirror);
-
-  const scrollTop = el instanceof HTMLTextAreaElement ? el.scrollTop : 0;
-  return {
-    top: markerRect.top - mirrorRect.top - scrollTop,
-    left: markerRect.left - mirrorRect.left,
-  };
-}
-
-// Uses same visual classes as DropdownMenuContent + DropdownMenuItem.
-// Position is cursor-anchored via getCaretPixelPos.
-// No search bar \u2014 typing after {{ already filters via filterQuery.
-function VarPopup({
-  variables,
-  variableGroups,
-  filterQuery = "",
-  onSelect,
-  onAddVariable,
-  onEditVariable,
-  style,
-}: {
-  variables: string[];
-  variableGroups?: VariableGroup[];
-  filterQuery?: string;
-  onSelect: (v: string) => void;
-  onAddVariable?: () => void;
-  onEditVariable?: (variable: string) => void;
-  style?: React.CSSProperties;
-}) {
-  const hasGroups = variableGroups && variableGroups.length > 0;
-
-  if (!hasGroups && variables.length === 0) return null;
-
-  // Flat mode \u2014 variables are already pre-filtered by VariableInput
-  if (!hasGroups) {
-    return (
-      <div
-        role="listbox"
-        style={style}
-        className="absolute z-[9999] min-w-[14rem] max-w-sm rounded-md border border-semantic-border-layout bg-semantic-bg-primary py-1 text-semantic-text-primary shadow-md"
-      >
-        {/* Add new variable */}
-        {onAddVariable && (
-          <button
-            type="button"
-            onMouseDown={(e) => { e.preventDefault(); onAddVariable(); }}
-            className="flex w-full items-center gap-2 px-3 py-2 text-sm font-medium text-semantic-text-primary hover:bg-semantic-bg-ui transition-colors"
-          >
-            <Plus className="size-3.5 shrink-0" />
-            Add new variable
-          </button>
-        )}
-
-        {/* Variable list */}
-        <div className="max-h-48 overflow-y-auto p-1">
-          {variables.map((v) => (
-            <button
-              key={v}
-              type="button"
-              role="option"
-              onMouseDown={(e) => { e.preventDefault(); onSelect(v); }}
-              className="relative flex w-full cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors hover:bg-semantic-bg-ui"
-            >
-              {v}
-            </button>
-          ))}
-          {variables.length === 0 && (
-            <p className="m-0 px-2 py-1.5 text-sm text-semantic-text-muted">No variables found</p>
-          )}
-        </div>
-      </div>
-    );
-  }
-
-  // Grouped mode \u2014 filter by the {{ trigger query
-  const lowerQuery = filterQuery.toLowerCase();
-  const filteredGroups = variableGroups.map((g) => ({
-    ...g,
-    items: g.items.filter((item) =>
-      item.name.toLowerCase().includes(lowerQuery)
-    ),
-  })).filter((g) => g.items.length > 0);
-
-  return (
-    <div
-      role="listbox"
-      style={style}
-      className="absolute z-[9999] min-w-[14rem] max-w-sm rounded-md border border-semantic-border-layout bg-semantic-bg-primary py-1 text-semantic-text-primary shadow-md"
-    >
-      {/* Add new variable */}
-      {onAddVariable && (
-        <>
-          <button
-            type="button"
-            onMouseDown={(e) => { e.preventDefault(); onAddVariable(); }}
-            className="flex w-full items-center gap-2 px-3 py-2 text-sm font-medium text-semantic-text-primary hover:bg-semantic-bg-ui transition-colors"
-          >
-            <Plus className="size-3.5 shrink-0" />
-            Add new variable
-          </button>
-          <div className="border-t border-semantic-border-layout" />
-        </>
-      )}
-
-      {/* Grouped variable list */}
-      <div className="max-h-48 overflow-y-auto p-1">
-        {filteredGroups.map((group) => (
-          <div key={group.label}>
-            <p className="m-0 px-2 pt-2 pb-1 text-sm font-medium text-semantic-text-muted">
-              {group.label}
-            </p>
-            {group.items.map((item) => {
-              const insertValue = item.value ?? \`{{\${item.name}}}\`;
-              return (
-                <div key={item.name} className="flex items-center rounded-sm transition-colors hover:bg-semantic-bg-ui">
-                  <button
-                    type="button"
-                    role="option"
-                    onMouseDown={(e) => { e.preventDefault(); onSelect(insertValue); }}
-                    className="relative flex flex-1 min-w-0 cursor-pointer select-none items-center px-2 py-1.5 text-sm outline-none"
-                  >
-                    {\`{{\${item.name}}}\`}
-                  </button>
-                  {item.editable && onEditVariable && (
-                    <button
-                      type="button"
-                      onMouseDown={(e) => { e.preventDefault(); onEditVariable(item.name); }}
-                      className="shrink-0 p-1.5 rounded text-semantic-text-muted hover:text-semantic-text-primary transition-colors"
-                      aria-label={\`Edit \${item.name}\`}
-                    >
-                      <Pencil className="size-3.5" />
-                    </button>
-                  )}
-                </div>
-              );
-            })}
-          </div>
-        ))}
-        {filteredGroups.length === 0 && (
-          <p className="m-0 px-2 py-1.5 text-sm text-semantic-text-muted">No variables found</p>
-        )}
-      </div>
-    </div>
-  );
+function extractVarRefs(texts: string[]): string[] {
+  const pattern = /\\{\\{[^}]+\\}\\}/g;
+  const all = texts.flatMap((t) => t.match(pattern) ?? []);
+  return Array.from(new Set(all));
 }
 
-// \u2500\u2500 VariableFormModal \u2014 create/edit a variable \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+/** Mirror-div technique \u2014 returns { top, left } relative to the element's top-left corner. */
+function getCaretPixelPos(
+  el: HTMLTextAreaElement | HTMLInputElement,
+  position: number
+): { top: number; left: number } {
+  const cs = window.getComputedStyle(el);
+  const mirror = document.createElement("div");
 
-function VariableFormModal({
-  open,
-  onOpenChange,
-  mode,
-  initialData,
-  onSave,
-}: {
-  open: boolean;
-  onOpenChange: (open: boolean) => void;
-  mode: "create" | "edit";
-  initialData?: VariableItem;
-  onSave: (data: VariableFormData) => void;
-}) {
-  const [name, setName] = React.useState("");
-  const [description, setDescription] = React.useState("");
-  const [required, setRequired] = React.useState(false);
-  const [nameError, setNameError] = React.useState("");
+  (
+    [
+      "boxSizing", "width", "paddingTop", "paddingRight", "paddingBottom", "paddingLeft",
+      "borderTopWidth", "borderRightWidth", "borderBottomWidth", "borderLeftWidth",
+      "fontFamily", "fontSize", "fontWeight", "fontStyle", "fontVariant",
+      "letterSpacing", "lineHeight", "textTransform", "wordSpacing", "tabSize",
+    ] as (keyof CSSStyleDeclaration)[]
+  ).forEach((prop) => {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    (mirror.style as any)[prop] = cs[prop];
+  });
 
-  // Reset form when modal opens
-  React.useEffect(() => {
-    if (open) {
-      setName(initialData?.name ?? "");
-      setDescription(initialData?.description ?? "");
-      setRequired(initialData?.required ?? false);
-      setNameError("");
-    }
-  }, [open, initialData]);
+  mirror.style.whiteSpace = el.tagName === "TEXTAREA" ? "pre-wrap" : "pre";
+  mirror.style.wordWrap = el.tagName === "TEXTAREA" ? "break-word" : "normal";
+  mirror.style.position = "absolute";
+  mirror.style.visibility = "hidden";
+  mirror.style.overflow = "hidden";
+  mirror.style.top = "0";
+  mirror.style.left = "0";
+  mirror.style.width = el.offsetWidth + "px";
 
-  const validateName = (v: string) => {
-    if (!v.trim()) return "";
-    if (!VARIABLE_NAME_REGEX.test(v)) {
-      return "Variable name should start with alphabet; Cannot have special characters except underscore (_)";
-    }
-    return "";
-  };
+  document.body.appendChild(mirror);
+  mirror.appendChild(document.createTextNode(el.value.substring(0, position)));
 
-  const handleNameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const v = e.target.value;
-    setName(v);
-    setNameError(validateName(v));
-  };
+  const marker = document.createElement("span");
+  marker.textContent = "\\u200b";
+  mirror.appendChild(marker);
 
-  const handleSave = () => {
-    const error = validateName(name);
-    if (error || !name.trim()) {
-      setNameError(error || "Variable name is required");
-      return;
-    }
-    onSave({ name: name.trim(), description: description.trim() || undefined, required });
+  const markerRect = marker.getBoundingClientRect();
+  const mirrorRect = mirror.getBoundingClientRect();
+  document.body.removeChild(mirror);
+
+  const scrollTop = el instanceof HTMLTextAreaElement ? el.scrollTop : 0;
+  return {
+    top: markerRect.top - mirrorRect.top - scrollTop,
+    left: markerRect.left - mirrorRect.left,
   };
+}
 
+// Uses same visual classes as DropdownMenuContent + DropdownMenuItem.
+// Position is cursor-anchored via getCaretPixelPos.
+function VarPopup({
+  variables,
+  onSelect,
+  style,
+}: {
+  variables: string[];
+  onSelect: (v: string) => void;
+  style?: React.CSSProperties;
+}) {
+  if (variables.length === 0) return null;
   return (
-    <FormModal
-      open={open}
-      onOpenChange={onOpenChange}
-      title={mode === "create" ? "Create new variable" : "Edit variable"}
-      saveButtonText={mode === "create" ? "Save" : "Save Changes"}
-      disableSave={!name.trim() || !!nameError}
-      onSave={handleSave}
-      size="default"
+    <div
+      role="listbox"
+      style={style}
+      className="absolute z-[9999] min-w-[8rem] max-w-xs overflow-hidden rounded-md border border-semantic-border-layout bg-semantic-bg-primary p-1 text-semantic-text-primary shadow-md"
     >
-      <div className="flex flex-col gap-4">
-        <div className="flex flex-col gap-1.5">
-          <label className="text-sm font-medium text-semantic-text-muted">
-            Variable name{" "}
-            <span className="text-semantic-error-primary">*</span>
-          </label>
-          <div className="relative">
-            <input
-              type="text"
-              value={name}
-              onChange={handleNameChange}
-              placeholder="e.g., customer_name"
-              maxLength={VARIABLE_NAME_MAX}
-              className={cn(inputCls, "pr-16")}
-            />
-            <span className="absolute right-3 top-1/2 -translate-y-1/2 text-sm text-semantic-text-muted pointer-events-none">
-              {name.length}/{VARIABLE_NAME_MAX}
-            </span>
-          </div>
-          <span className={cn("text-sm", nameError ? "text-semantic-error-primary" : "text-semantic-text-muted")}>
-            {nameError || "Variable name should start with alphabet; Cannot have special characters except underscore (_)"}
-          </span>
-        </div>
-        <TextField
-          label="Description (optional)"
-          placeholder="What this variable represents"
-          value={description}
-          onChange={(e) => setDescription(e.target.value)}
-        />
-        <div className="flex flex-col gap-1.5">
-          <span className="text-sm font-medium text-semantic-text-muted">Required</span>
-          <div className="flex items-center gap-6">
-            <label className="flex items-center gap-2 cursor-pointer">
-              <input
-                type="radio"
-                name="variable-required"
-                checked={required}
-                onChange={() => setRequired(true)}
-                className="size-4 accent-semantic-primary"
-              />
-              <span className="text-base text-semantic-text-primary">Yes</span>
-            </label>
-            <label className="flex items-center gap-2 cursor-pointer">
-              <input
-                type="radio"
-                name="variable-required"
-                checked={!required}
-                onChange={() => setRequired(false)}
-                className="size-4 accent-semantic-primary"
-              />
-              <span className="text-base text-semantic-text-primary">No</span>
-            </label>
-          </div>
-        </div>
-      </div>
-    </FormModal>
+      {variables.map((v) => (
+        <button
+          key={v}
+          type="button"
+          role="option"
+          aria-selected={false}
+          onMouseDown={(e) => {
+            e.preventDefault(); // keep input focused so blur doesn't close popup first
+            onSelect(v);
+          }}
+          className="relative flex w-full cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors hover:bg-semantic-bg-ui focus:bg-semantic-bg-ui"
+        >
+          {v}
+        </button>
+      ))}
+    </div>
   );
 }
 
-// \u2500\u2500 VariableInput \u2014 input with {{ autocomplete + badge display \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+// \u2500\u2500 VariableInput \u2014 input with {{ autocomplete \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
 
 function VariableInput({
   value,
   onChange,
   sessionVariables,
-  variableGroups,
-  onAddVariable,
-  onEditVariable,
   placeholder,
   maxLength,
   className,
   inputRef: externalInputRef,
-  disabled,
   ...inputProps
 }: {
   value: string;
   onChange: (v: string) => void;
   sessionVariables: string[];
-  variableGroups?: VariableGroup[];
-  onAddVariable?: () => void;
-  onEditVariable?: (variable: string) => void;
   placeholder?: string;
   maxLength?: number;
   className?: string;
   inputRef?: React.RefObject<HTMLInputElement>;
-  disabled?: boolean;
   [k: string]: unknown;
 }) {
   const internalRef = React.useRef<HTMLInputElement>(null);
   const inputRef = externalInputRef ?? internalRef;
-  const displayRef = React.useRef<HTMLDivElement>(null);
   const [trigger, setTrigger] = React.useState<TriggerState | null>(null);
   const [popupStyle, setPopupStyle] = React.useState<React.CSSProperties | undefined>();
-  const [isEditing, setIsEditing] = React.useState(false);
-  const [isExpanded, setIsExpanded] = React.useState(false);
-  const [isOverflowing, setIsOverflowing] = React.useState(false);
 
   const filtered = trigger
     ? sessionVariables.filter((v) => v.toLowerCase().includes(trigger.query))
     : [];
 
-  // Parse value into text + variable segments
-  const segments = React.useMemo(() => parseValueSegments(value), [value]);
-  const hasVariables = segments.some((s) => s.type === "var");
-  const showDisplay = !isEditing && value.length > 0 && hasVariables;
-
-  // Check overflow in display mode
-  React.useEffect(() => {
-    if (showDisplay && displayRef.current && !isExpanded) {
-      const el = displayRef.current;
-      setIsOverflowing(el.scrollWidth > el.clientWidth);
-    } else {
-      setIsOverflowing(false);
-    }
-  }, [showDisplay, value, isExpanded]);
-
   const updatePopupPos = (el: HTMLInputElement, cursor: number) => {
     const caret = getCaretPixelPos(el, cursor);
     const lineHeight = parseFloat(window.getComputedStyle(el).lineHeight) || 20;
@@ -18259,15 +17474,13 @@ function VariableInput({
 
   return (
     <div className="relative w-full">
-      {/* Input \u2014 always in DOM, hidden when display mode is active */}
       <input
         ref={inputRef}
         type="text"
         value={value}
         placeholder={placeholder}
         maxLength={maxLength}
-        disabled={disabled}
-        className={cn(className, showDisplay && "opacity-0 pointer-events-none")}
+        className={className}
         onChange={(e) => {
           onChange(e.target.value);
           const cursor = e.target.selectionStart ?? e.target.value.length;
@@ -18279,88 +17492,10 @@ function VariableInput({
         onKeyDown={(e) => {
           if (e.key === "Escape") clearTrigger();
         }}
-        onFocus={() => setIsEditing(true)}
-        onBlur={() => {
-          clearTrigger();
-          setIsEditing(false);
-          setIsExpanded(false);
-        }}
+        onBlur={() => clearTrigger()}
         {...inputProps}
       />
-
-      {/* Display mode \u2014 variable badges + text + overflow */}
-      {showDisplay && (
-        <div
-          className={cn(
-            "absolute cursor-text",
-            !isExpanded && "inset-0 flex items-center",
-            isExpanded && "inset-x-0 top-0 z-10",
-            disabled && "opacity-50 cursor-not-allowed"
-          )}
-          onClick={() => {
-            if (!disabled) inputRef.current?.focus();
-          }}
-        >
-          <div
-            ref={displayRef}
-            className={cn(
-              "flex items-center gap-1 px-2",
-              !isExpanded && "flex-1 min-w-0 overflow-hidden",
-              isExpanded && "flex-wrap bg-semantic-bg-primary border border-semantic-border-input rounded py-1.5 shadow-sm"
-            )}
-          >
-            {segments.map((seg, i) =>
-              seg.type === "text" ? (
-                <span key={i} className="text-sm text-semantic-text-primary whitespace-pre shrink-0">{seg.content}</span>
-              ) : (
-                <span
-                  key={i}
-                  className="inline-flex items-center gap-1 shrink-0 rounded px-1.5 py-0.5 text-sm bg-semantic-info-surface text-semantic-text-primary"
-                >
-                  {seg.name}
-                  {onEditVariable && (
-                    <button
-                      type="button"
-                      onMouseDown={(e) => {
-                        e.preventDefault();
-                        e.stopPropagation();
-                        onEditVariable(seg.name);
-                      }}
-                      className="p-0.5 text-semantic-text-muted hover:text-semantic-text-primary transition-colors"
-                    >
-                      <Pencil className="size-3" />
-                    </button>
-                  )}
-                </span>
-              )
-            )}
-          </div>
-          {isOverflowing && !isExpanded && (
-            <button
-              type="button"
-              onMouseDown={(e) => {
-                e.preventDefault();
-                e.stopPropagation();
-                setIsExpanded(true);
-              }}
-              className="shrink-0 px-1 text-sm font-medium text-semantic-text-muted hover:text-semantic-text-primary"
-            >
-              ...
-            </button>
-          )}
-        </div>
-      )}
-
-      {/* VarPopup */}
-      <VarPopup
-        variables={filtered}
-        variableGroups={trigger ? variableGroups : undefined}
-        filterQuery={trigger?.query ?? ""}
-        onSelect={handleSelect}
-        onAddVariable={onAddVariable}
-        onEditVariable={onEditVariable}
-        style={popupStyle}
-      />
+      <VarPopup variables={filtered} onSelect={handleSelect} style={popupStyle} />
     </div>
   );
 }
@@ -18370,7 +17505,7 @@ const inputCls = cn(
   "w-full h-[42px] px-4 text-base rounded border",
   "border-semantic-border-input bg-semantic-bg-primary",
   "text-semantic-text-primary placeholder:text-semantic-text-muted",
-  "outline-none",
+  "outline-none hover:border-semantic-border-input-focus",
   "focus:border-semantic-border-input-focus focus:shadow-[0_0_0_1px_rgba(43,188,202,0.15)]",
   "disabled:opacity-50 disabled:cursor-not-allowed"
 );
@@ -18379,7 +17514,7 @@ const textareaCls = cn(
   "w-full px-4 py-2.5 text-base rounded border resize-none",
   "border-semantic-border-input bg-semantic-bg-primary",
   "text-semantic-text-primary placeholder:text-semantic-text-muted",
-  "outline-none",
+  "outline-none hover:border-semantic-border-input-focus",
   "focus:border-semantic-border-input-focus focus:shadow-[0_0_0_1px_rgba(43,188,202,0.15)]",
   "disabled:opacity-50 disabled:cursor-not-allowed"
 );
@@ -18397,9 +17532,6 @@ function KeyValueTable({
   keyRegex,
   keyRegexError,
   sessionVariables = [],
-  variableGroups,
-  onAddVariable,
-  onEditVariable,
   disabled = false,
 }: {
   rows: KeyValuePair[];
@@ -18411,9 +17543,6 @@ function KeyValueTable({
   keyRegex?: RegExp;
   keyRegexError?: string;
   sessionVariables?: string[];
-  variableGroups?: VariableGroup[];
-  onAddVariable?: () => void;
-  onEditVariable?: (variable: string) => void;
   disabled?: boolean;
 }) {
   const update = (id: string, patch: Partial<KeyValuePair>) => {
@@ -18445,14 +17574,14 @@ function KeyValueTable({
 
   return (
     <div className="flex flex-col gap-1.5">
-      <span className="text-sm text-semantic-text-muted">{label}</span>
-      <div className="border border-semantic-border-layout rounded">
+      <span className="text-xs text-semantic-text-muted">{label}</span>
+      <div className="border border-semantic-border-layout rounded overflow-hidden">
         {/* Column headers \u2014 desktop only; border-r on Key cell defines column boundary */}
-        <div className="hidden sm:flex border-b border-semantic-border-layout rounded-t">
-          <div className="flex-1 min-w-0 px-3 py-2 text-sm font-semibold text-semantic-text-muted border-r border-semantic-border-layout">
+        <div className="hidden sm:flex bg-semantic-bg-ui border-b border-semantic-border-layout">
+          <div className="flex-1 min-w-0 px-3 py-2 text-xs font-semibold text-semantic-text-muted border-r border-semantic-border-layout">
             Key
           </div>
-          <div className="flex-[2] min-w-0 px-3 py-2 text-sm font-semibold text-semantic-text-muted">
+          <div className="flex-[2] min-w-0 px-3 py-2 text-xs font-semibold text-semantic-text-muted">
             Value
           </div>
           <div className="w-10 shrink-0" aria-hidden="true" />
@@ -18468,7 +17597,7 @@ function KeyValueTable({
             >
               {/* Key column \u2014 border-r on column (not input) so it aligns with header */}
               <div className="flex-1 flex flex-col min-w-0 sm:border-r sm:border-semantic-border-layout">
-                <span className="sm:hidden px-3 pt-2.5 pb-0.5 text-sm font-semibold text-semantic-text-muted uppercase tracking-wide">
+                <span className="sm:hidden px-3 pt-2.5 pb-0.5 text-[10px] font-semibold text-semantic-text-muted uppercase tracking-wide">
                   Key
                 </span>
                 <input
@@ -18479,36 +17608,45 @@ function KeyValueTable({
                   maxLength={keyMaxLength}
                   disabled={disabled}
                   className={cn(
-                    "w-full px-3 py-2.5 text-base text-semantic-text-primary placeholder:text-semantic-text-muted bg-semantic-bg-primary outline-none",
+                    "w-full px-3 py-2.5 text-base text-semantic-text-primary placeholder:text-semantic-text-muted bg-semantic-bg-primary outline-none focus:bg-semantic-bg-hover",
                     "disabled:opacity-50 disabled:cursor-not-allowed",
-                    errors.key && "text-semantic-error-primary"
+                    errors.key && "border-semantic-error-primary"
                   )}
                   aria-invalid={Boolean(errors.key)}
+                  aria-describedby={errors.key ? \`err-key-\${row.id}\` : undefined}
                 />
+                {errors.key && (
+                  <p id={\`err-key-\${row.id}\`} className="m-0 px-3 pt-0.5 text-xs text-semantic-error-primary">
+                    {errors.key}
+                  </p>
+                )}
               </div>
 
               {/* Value column \u2014 uses VariableInput for {{ autocomplete */}
               <div className="flex-[2] flex flex-col min-w-0">
-                <span className="sm:hidden px-3 pt-2.5 pb-0.5 text-sm font-semibold text-semantic-text-muted uppercase tracking-wide">
+                <span className="sm:hidden px-3 pt-2.5 pb-0.5 text-[10px] font-semibold text-semantic-text-muted uppercase tracking-wide">
                   Value
                 </span>
                 <VariableInput
                   value={row.value}
                   onChange={(v) => update(row.id, { value: v })}
                   sessionVariables={sessionVariables}
-                  variableGroups={variableGroups}
-                  onAddVariable={onAddVariable}
-                  onEditVariable={onEditVariable}
                   placeholder="Type {{ to add variables"
                   maxLength={valueMaxLength}
                   disabled={disabled}
                   className={cn(
-                    "w-full px-3 py-2.5 text-base text-semantic-text-primary placeholder:text-semantic-text-muted bg-semantic-bg-primary outline-none",
+                    "w-full px-3 py-2.5 text-base text-semantic-text-primary placeholder:text-semantic-text-muted bg-semantic-bg-primary outline-none focus:bg-semantic-bg-hover",
                     "disabled:opacity-50 disabled:cursor-not-allowed",
-                    errors.value && "text-semantic-error-primary"
+                    errors.value && "border-semantic-error-primary"
                   )}
                   aria-invalid={Boolean(errors.value)}
+                  aria-describedby={errors.value ? \`err-value-\${row.id}\` : undefined}
                 />
+                {errors.value && (
+                  <p id={\`err-value-\${row.id}\`} className="m-0 px-3 pt-0.5 text-xs text-semantic-error-primary">
+                    {errors.value}
+                  </p>
+                )}
               </div>
 
               {/* Action column \u2014 delete aligned with row (same as KeyValueRow / knowledge-base-card) */}
@@ -18535,7 +17673,7 @@ function KeyValueTable({
           onClick={add}
           disabled={disabled}
           className={cn(
-            "w-full flex items-center gap-2 px-3 py-2.5 text-sm text-semantic-text-muted hover:bg-semantic-bg-ui transition-colors",
+            "w-full flex items-center gap-2 px-3 py-2.5 text-sm text-semantic-text-muted hover:bg-semantic-bg-hover transition-colors",
             disabled && "opacity-50 cursor-not-allowed"
           )}
         >
@@ -18543,35 +17681,15 @@ function KeyValueTable({
           <span>Add row</span>
         </button>
       </div>
-
-      {/* Collected row errors \u2014 shown below the table */}
-      {(() => {
-        const allErrors = rows
-          .map((row) => {
-            const errs = getErrors(row);
-            const msgs: string[] = [];
-            if (errs.key) msgs.push(errs.key);
-            if (errs.value) msgs.push(errs.value);
-            return msgs;
-          })
-          .flat();
-        if (allErrors.length === 0) return null;
-        // Deduplicate
-        const unique = Array.from(new Set(allErrors));
-        return (
-          <div className="flex flex-col gap-0.5">
-            {unique.map((msg) => (
-              <p key={msg} className="m-0 text-sm text-semantic-error-primary">{msg}</p>
-            ))}
-          </div>
-        );
-      })()}
     </div>
   );
 }
 
 // \u2500\u2500 Modal \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
-export const CreateFunctionModal = React.forwardRef(
+export const CreateFunctionModal = React.forwardRef<
+  HTMLDivElement,
+  CreateFunctionModalProps
+>(
   (
     {
       open,
@@ -18585,13 +17703,10 @@ export const CreateFunctionModal = React.forwardRef(
       initialStep = 1,
       initialTab = "header",
       sessionVariables = DEFAULT_SESSION_VARIABLES,
-      variableGroups,
-      onAddVariable,
-      onEditVariable,
       disabled = false,
       className,
-    }: CreateFunctionModalProps,
-    ref: React.Ref<HTMLDivElement>
+    },
+    ref
   ) => {
     const [step, setStep] = React.useState<1 | 2>(initialStep);
 
@@ -18612,35 +17727,6 @@ export const CreateFunctionModal = React.forwardRef(
     const [urlError, setUrlError] = React.useState("");
     const [bodyError, setBodyError] = React.useState("");
 
-    // Variable modal state
-    const [varModalOpen, setVarModalOpen] = React.useState(false);
-    const [varModalMode, setVarModalMode] = React.useState<"create" | "edit">("create");
-    const [varModalInitialData, setVarModalInitialData] = React.useState<VariableItem | undefined>();
-
-    const handleAddVariableClick = () => {
-      setVarModalMode("create");
-      setVarModalInitialData(undefined);
-      setVarModalOpen(true);
-    };
-
-    const handleEditVariableClick = (variableName: string) => {
-      const variable = variableGroups
-        ?.flatMap((g) => g.items)
-        .find((item) => item.name === variableName);
-      setVarModalMode("edit");
-      setVarModalInitialData(variable ?? { name: variableName, editable: true });
-      setVarModalOpen(true);
-    };
-
-    const handleVariableSave = (data: VariableFormData) => {
-      if (varModalMode === "create") {
-        onAddVariable?.(data);
-      } else {
-        onEditVariable?.(varModalInitialData?.name ?? "", data);
-      }
-      setVarModalOpen(false);
-    };
-
     // Variable trigger state for URL and body
     const urlInputRef = React.useRef<HTMLInputElement>(null);
     const bodyTextareaRef = React.useRef<HTMLTextAreaElement>(null);
@@ -18735,7 +17821,14 @@ export const CreateFunctionModal = React.forwardRef(
       onOpenChange(false);
     }, [reset, onOpenChange]);
 
-    // Body tab is always visible regardless of HTTP method
+    const supportsBody = METHODS_WITH_BODY.includes(method);
+
+    // When switching to a method without body, reset to header tab if body was active
+    React.useEffect(() => {
+      if (!supportsBody && activeTab === "body") {
+        setActiveTab("header");
+      }
+    }, [supportsBody, activeTab]);
 
     const validateName = (value: string) => {
       if (value.trim() && !FUNCTION_NAME_REGEX.test(value.trim())) {
@@ -18870,10 +17963,11 @@ export const CreateFunctionModal = React.forwardRef(
       body: "Body",
     };
 
-    const visibleTabs: FunctionTabType[] = ["header", "queryParams", "body"];
+    const visibleTabs: FunctionTabType[] = supportsBody
+      ? ["header", "queryParams", "body"]
+      : ["header", "queryParams"];
 
     return (
-      <>
       <Dialog open={open} onOpenChange={onOpenChange}>
         <DialogContent
           ref={ref}
@@ -18881,7 +17975,7 @@ export const CreateFunctionModal = React.forwardRef(
           hideCloseButton
           className={cn(
             "flex flex-col gap-0 p-0 w-[calc(100vw-2rem)] sm:w-full",
-            "max-h-[calc(100vh-2rem)] overflow-hidden",
+            "max-h-[calc(100svh-2rem)] overflow-hidden",
             className
           )}
         >
@@ -18901,7 +17995,7 @@ export const CreateFunctionModal = React.forwardRef(
           </div>
 
           {/* \u2500\u2500 Scrollable body \u2500\u2500 */}
-          <div className="flex-1 overflow-y-auto min-h-0 overscroll-contain px-4 py-5 sm:px-6">
+          <div className="flex-1 overflow-y-auto min-h-0 px-4 py-5 sm:px-6">
             {/* \u2500 Step 1 \u2500 */}
             {step === 1 && (
               <div className="flex flex-col gap-5">
@@ -18928,33 +18022,44 @@ export const CreateFunctionModal = React.forwardRef(
                       placeholder="Enter name of the function"
                       className={cn(inputCls, "pr-16")}
                     />
-                    <span className="absolute right-3 top-1/2 -translate-y-1/2 text-sm text-semantic-text-muted pointer-events-none">
+                    <span className="absolute right-3 top-1/2 -translate-y-1/2 text-xs italic text-semantic-text-muted pointer-events-none">
                       {name.length}/{FUNCTION_NAME_MAX}
                     </span>
                   </div>
                   {nameError && (
-                    <p className="m-0 text-sm text-semantic-error-primary">{nameError}</p>
+                    <p className="m-0 text-xs text-semantic-error-primary">{nameError}</p>
                   )}
                 </div>
 
-                <Textarea
-                  id="fn-prompt"
-                  label="Prompt"
-                  required
-                  value={prompt}
-                  maxLength={promptMaxLength}
-                  showCount
-                  disabled={disabled}
-                  onChange={(e) => setPrompt(e.target.value)}
-                  placeholder="Enter the description of the function"
-                  rows={5}
-                  labelClassName="font-semibold text-semantic-text-primary"
-                  error={
-                    prompt.length > 0 && prompt.trim().length < promptMinLength
-                      ? \`Minimum \${promptMinLength} characters required\`
-                      : undefined
-                  }
-                />
+                <div className="flex flex-col gap-1.5">
+                  <label
+                    htmlFor="fn-prompt"
+                    className="text-sm font-semibold text-semantic-text-primary"
+                  >
+                    Prompt{" "}
+                    <span className="text-semantic-error-primary">*</span>
+                  </label>
+                  <div className="relative">
+                    <textarea
+                      id="fn-prompt"
+                      value={prompt}
+                      maxLength={promptMaxLength}
+                      disabled={disabled}
+                      onChange={(e) => setPrompt(e.target.value)}
+                      placeholder="Enter the description of the function"
+                      rows={5}
+                      className={cn(textareaCls, "pb-7")}
+                    />
+                    <span className="absolute bottom-2 right-3 text-xs italic text-semantic-text-muted pointer-events-none">
+                      {prompt.length}/{promptMaxLength}
+                    </span>
+                  </div>
+                  {prompt.length > 0 && prompt.trim().length < promptMinLength && (
+                    <p className="m-0 text-xs text-semantic-error-primary">
+                      Minimum {promptMinLength} characters required
+                    </p>
+                  )}
+                </div>
               </div>
             )}
 
@@ -18963,12 +18068,13 @@ export const CreateFunctionModal = React.forwardRef(
               <div className="flex flex-col gap-5">
                 {/* API URL \u2014 always a single combined row */}
                 <div className="flex flex-col gap-1.5">
-                  <span className="text-sm text-semantic-text-muted tracking-[0.048px]">
+                  <span className="text-xs text-semantic-text-muted tracking-[0.048px]">
                     API URL
                   </span>
                   <div
                     className={cn(
                       "flex h-[42px] rounded border border-semantic-border-input overflow-visible bg-semantic-bg-primary",
+                      "hover:border-semantic-border-input-focus",
                       "focus-within:border-semantic-border-input-focus focus-within:shadow-[0_0_0_1px_rgba(43,188,202,0.15)]",
                       "transition-shadow"
                     )}
@@ -19029,19 +18135,11 @@ export const CreateFunctionModal = React.forwardRef(
                           disabled && "opacity-50 cursor-not-allowed"
                         )}
                       />
-                      <VarPopup
-                        variables={filteredUrlVars}
-                        variableGroups={urlTrigger ? variableGroups : undefined}
-                        filterQuery={urlTrigger?.query ?? ""}
-                        onSelect={handleUrlVarSelect}
-                        onAddVariable={onAddVariable ? handleAddVariableClick : undefined}
-                        onEditVariable={onEditVariable ? handleEditVariableClick : undefined}
-                        style={urlPopupStyle}
-                      />
+                      <VarPopup variables={filteredUrlVars} onSelect={handleUrlVarSelect} style={urlPopupStyle} />
                     </div>
                   </div>
                   {urlError && (
-                    <p className="m-0 text-sm text-semantic-error-primary">{urlError}</p>
+                    <p className="m-0 text-xs text-semantic-error-primary">{urlError}</p>
                   )}
                 </div>
 
@@ -19081,9 +18179,6 @@ export const CreateFunctionModal = React.forwardRef(
                       keyRegex={HEADER_KEY_REGEX}
                       keyRegexError="Invalid header key. Use only alphanumeric and !#$%&'*+-.^_\`|~ characters."
                       sessionVariables={sessionVariables}
-                      variableGroups={variableGroups}
-                      onAddVariable={handleAddVariableClick}
-                      onEditVariable={handleEditVariableClick}
                       disabled={disabled}
                     />
                   )}
@@ -19103,15 +18198,12 @@ export const CreateFunctionModal = React.forwardRef(
                         };
                       }}
                       sessionVariables={sessionVariables}
-                      variableGroups={variableGroups}
-                      onAddVariable={handleAddVariableClick}
-                      onEditVariable={handleEditVariableClick}
                       disabled={disabled}
                     />
                   )}
                   {activeTab === "body" && (
                     <div className="flex flex-col gap-1.5">
-                      <span className="text-sm text-semantic-text-muted">
+                      <span className="text-xs text-semantic-text-muted">
                         Body
                       </span>
                       <div className={cn("relative")}>
@@ -19141,21 +18233,13 @@ export const CreateFunctionModal = React.forwardRef(
                           rows={6}
                           className={cn(textareaCls, "pb-7")}
                         />
-                        <span className="absolute bottom-2 right-3 text-sm text-semantic-text-muted pointer-events-none">
+                        <span className="absolute bottom-2 right-3 text-xs italic text-semantic-text-muted pointer-events-none">
                           {body.length}/{BODY_MAX}
                         </span>
-                        <VarPopup
-                          variables={filteredBodyVars}
-                          variableGroups={bodyTrigger ? variableGroups : undefined}
-                          filterQuery={bodyTrigger?.query ?? ""}
-                          onSelect={handleBodyVarSelect}
-                          onAddVariable={onAddVariable ? handleAddVariableClick : undefined}
-                          onEditVariable={onEditVariable ? handleEditVariableClick : undefined}
-                          style={bodyPopupStyle}
-                        />
+                        <VarPopup variables={filteredBodyVars} onSelect={handleBodyVarSelect} style={bodyPopupStyle} />
                       </div>
                       {bodyError && (
-                        <p className="m-0 text-sm text-semantic-error-primary">{bodyError}</p>
+                        <p className="m-0 text-xs text-semantic-error-primary">{bodyError}</p>
                       )}
                     </div>
                   )}
@@ -19164,7 +18248,7 @@ export const CreateFunctionModal = React.forwardRef(
                 {/* Test Your API */}
                 <div className="flex flex-col gap-4">
                   <div className="flex flex-col gap-1.5">
-                    <span className="text-sm font-semibold text-semantic-text-muted tracking-[0.048px]">
+                    <span className="text-xs font-semibold text-semantic-text-muted tracking-[0.048px]">
                       Test Your API
                     </span>
                     <div className="border-t border-semantic-border-layout" />
@@ -19173,12 +18257,12 @@ export const CreateFunctionModal = React.forwardRef(
                   {/* Variable test values \u2014 shown when URL/body/params contain {{variables}} */}
                   {testableVars.length > 0 && (
                     <div className="flex flex-col gap-2">
-                      <span className="text-sm text-semantic-text-muted">
+                      <span className="text-xs text-semantic-text-muted">
                         Variable values for testing
                       </span>
                       {testableVars.map((variable) => (
                         <div key={variable} className="flex items-center gap-3">
-                          <span className="text-sm text-semantic-text-muted font-mono shrink-0 min-w-[120px]">
+                          <span className="text-xs text-semantic-text-muted font-mono shrink-0 min-w-[120px]">
                             {variable}
                           </span>
                           <input
@@ -19208,7 +18292,7 @@ export const CreateFunctionModal = React.forwardRef(
                   </button>
 
                   <div className="flex flex-col gap-1.5">
-                    <span className="text-sm text-semantic-text-muted">
+                    <span className="text-xs text-semantic-text-muted">
                       Response from API
                     </span>
                     <textarea
@@ -19266,15 +18350,6 @@ export const CreateFunctionModal = React.forwardRef(
           </div>
         </DialogContent>
       </Dialog>
-
-      <VariableFormModal
-        open={varModalOpen}
-        onOpenChange={setVarModalOpen}
-        mode={varModalMode}
-        initialData={varModalInitialData}
-        onSave={handleVariableSave}
-      />
-      </>
     );
   }
 );
@@ -19486,7 +18561,7 @@ const DEFAULT_LANGUAGE_OPTIONS: LanguageOption[] = [
 
 // \u2500\u2500\u2500 Component \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
 
-const BotIdentityCard = React.forwardRef(
+const BotIdentityCard = React.forwardRef<HTMLDivElement, BotIdentityCardProps>(
   (
     {
       data,
@@ -19500,8 +18575,8 @@ const BotIdentityCard = React.forwardRef(
       playingVoice,
       disabled,
       className,
-    }: BotIdentityCardProps,
-    ref: React.Ref<HTMLDivElement>
+    },
+    ref
   ) => {
     return (
       <div
@@ -19803,6 +18878,7 @@ function VarPopup({
           key={v}
           type="button"
           role="option"
+          aria-selected={false}
           onMouseDown={(e) => {
             e.preventDefault(); // keep textarea focused so blur doesn't close popup first
             onSelect(v);
@@ -19846,7 +18922,7 @@ function SectionCard({
 
 // \u2500\u2500\u2500 Component \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
 
-const BotBehaviorCard = React.forwardRef(
+const BotBehaviorCard = React.forwardRef<HTMLDivElement, BotBehaviorCardProps>(
   (
     {
       data,
@@ -19856,8 +18932,8 @@ const BotBehaviorCard = React.forwardRef(
       maxLength = 5000,
       disabled,
       className,
-    }: BotBehaviorCardProps,
-    ref: React.Ref<HTMLDivElement>
+    },
+    ref
   ) => {
     const prompt = data.systemPrompt ?? "";
     const MAX = maxLength;
@@ -20041,7 +19117,7 @@ import {
   TooltipTrigger,
 } from "../tooltip";
 import { BOT_KNOWLEDGE_STATUS } from "./types";
-import type { KnowledgeBaseFile } from "./types";
+import type { KnowledgeBaseFile, KnowledgeFileStatus } from "./types";
 
 // \u2500\u2500\u2500 Types \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
 
@@ -20075,7 +19151,7 @@ export interface KnowledgeBaseCardProps {
 // \u2500\u2500\u2500 Status config \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
 
 type BadgeVariant = "default" | "active" | "destructive";
-const STATUS_CONFIG: Record<BOT_KNOWLEDGE_STATUS, { label: string; variant: BadgeVariant }> = {
+const STATUS_CONFIG: Record<KnowledgeFileStatus, { label: string; variant: BadgeVariant }> = {
   [BOT_KNOWLEDGE_STATUS.PENDING]:    { label: "Pending",    variant: "default"      },
   [BOT_KNOWLEDGE_STATUS.READY]:      { label: "Ready",      variant: "active"       },
   [BOT_KNOWLEDGE_STATUS.PROCESSING]: { label: "Processing", variant: "active"       },
@@ -20084,7 +19160,7 @@ const STATUS_CONFIG: Record<BOT_KNOWLEDGE_STATUS, { label: string; variant: Badg
 
 // \u2500\u2500\u2500 Component \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
 
-const KnowledgeBaseCard = React.forwardRef(
+const KnowledgeBaseCard = React.forwardRef<HTMLDivElement, KnowledgeBaseCardProps>(
   (
     {
       files,
@@ -20096,8 +19172,8 @@ const KnowledgeBaseCard = React.forwardRef(
       downloadDisabled,
       deleteDisabled,
       className,
-    }: KnowledgeBaseCardProps,
-    ref: React.Ref<HTMLDivElement>
+    },
+    ref
   ) => {
     return (
       <div
@@ -20249,8 +19325,8 @@ export interface FunctionsCardProps {
 
 // \u2500\u2500\u2500 Component \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
 
-const FunctionsCard = React.forwardRef(
-  ({ functions, onAddFunction, onEditFunction, onDeleteFunction, infoTooltip, disabled, editDisabled, deleteDisabled, className }: FunctionsCardProps, ref: React.Ref<HTMLDivElement>) => {
+const FunctionsCard = React.forwardRef<HTMLDivElement, FunctionsCardProps>(
+  ({ functions, onAddFunction, onEditFunction, onDeleteFunction, infoTooltip, disabled, editDisabled, deleteDisabled, className }, ref) => {
     return (
       <div
         ref={ref}
@@ -20436,8 +19512,8 @@ function Field({
 
 // \u2500\u2500\u2500 Component \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
 
-const FrustrationHandoverCard = React.forwardRef(
-  ({ data, onChange, departmentOptions = DEFAULT_DEPARTMENT_OPTIONS, disabled, className }: FrustrationHandoverCardProps, ref: React.Ref<HTMLDivElement>) => {
+const FrustrationHandoverCard = React.forwardRef<HTMLDivElement, FrustrationHandoverCardProps>(
+  ({ data, onChange, departmentOptions = DEFAULT_DEPARTMENT_OPTIONS, disabled, className }, ref) => {
     return (
       <div
         ref={ref}
@@ -20610,7 +19686,7 @@ function NumberSpinner({
 
 // \u2500\u2500\u2500 Component \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
 
-const AdvancedSettingsCard = React.forwardRef(
+const AdvancedSettingsCard = React.forwardRef<HTMLDivElement, AdvancedSettingsCardProps>(
   (
     {
       data,
@@ -20621,8 +19697,8 @@ const AdvancedSettingsCard = React.forwardRef(
       callEndThresholdMax = 10,
       disabled,
       className,
-    }: AdvancedSettingsCardProps,
-    ref: React.Ref<HTMLDivElement>
+    },
+    ref
   ) => {
     return (
       <div
@@ -20788,7 +19864,10 @@ function PromptField({
 
 // \u2500\u2500\u2500 Component \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
 
-const FallbackPromptsCard = React.forwardRef(
+const FallbackPromptsCard = React.forwardRef<
+  HTMLDivElement,
+  FallbackPromptsCardProps
+>(
   (
     {
       data,
@@ -20799,8 +19878,8 @@ const FallbackPromptsCard = React.forwardRef(
       disabled,
       defaultOpen = false,
       className,
-    }: FallbackPromptsCardProps,
-    ref: React.Ref<HTMLDivElement>
+    },
+    ref
   ) => {
     return (
       <div
@@ -20871,9 +19950,7 @@ export const BOT_KNOWLEDGE_STATUS = {
   FAILED: "failed",
 } as const;
 
-export type BOT_KNOWLEDGE_STATUS = typeof BOT_KNOWLEDGE_STATUS[keyof typeof BOT_KNOWLEDGE_STATUS];
-
-export type KnowledgeFileStatus = BOT_KNOWLEDGE_STATUS;
+export type KnowledgeFileStatus = typeof BOT_KNOWLEDGE_STATUS[keyof typeof BOT_KNOWLEDGE_STATUS];
 
 export interface KeyValuePair {
   id: string;
@@ -20881,35 +19958,6 @@ export interface KeyValuePair {
   value: string;
 }
 
-/** A single variable shown in the {{ autocomplete popup */
-export interface VariableItem {
-  /** Display name (e.g., "Order_id") */
-  name: string;
-  /** Value inserted into the input. Defaults to \`{{name}}\` if omitted */
-  value?: string;
-  /** When true, an edit icon is shown next to this variable */
-  editable?: boolean;
-  /** Description of what this variable represents */
-  description?: string;
-  /** Whether this variable is required */
-  required?: boolean;
-}
-
-/** Data shape for creating or editing a variable */
-export interface VariableFormData {
-  name: string;
-  description?: string;
-  required?: boolean;
-}
-
-/** A labelled group of variables in the autocomplete popup */
-export interface VariableGroup {
-  /** Group header text (e.g., "Function variables", "Session variables") */
-  label: string;
-  /** Variables in this group */
-  items: VariableItem[];
-}
-
 export interface FunctionItem {
   id: string;
   name: string;
@@ -20960,12 +20008,6 @@ export interface CreateFunctionModalProps {
   initialTab?: FunctionTabType;
   /** Session variables available for {{ autocomplete in URL, body, header values, and query param values */
   sessionVariables?: string[];
-  /** Grouped variables shown in the {{ autocomplete popup (overrides flat list display when provided) */
-  variableGroups?: VariableGroup[];
-  /** Called when user saves a new variable from the autocomplete popup */
-  onAddVariable?: (data: VariableFormData) => void;
-  /** Called when user edits a variable from the autocomplete popup */
-  onEditVariable?: (originalName: string, data: VariableFormData) => void;
   /** When true, all form fields are disabled (view mode) but Next is enabled so user can browse steps */
   disabled?: boolean;
   className?: string;
@@ -21126,9 +20168,6 @@ export type {
   HttpMethod,
   FunctionTabType,
   SelectOption,
-  VariableItem,
-  VariableGroup,
-  VariableFormData,
 } from "./types";
 `, prefix)
         }
@@ -21198,7 +20237,7 @@ function formatCurrency(amount: number, symbol: string = "\u20B9"): string {
  * />
  * \`\`\`
  */
-export const WalletTopup = React.forwardRef(
+export const WalletTopup = React.forwardRef<HTMLDivElement, WalletTopupProps>(
   (
     {
       title = "Instant wallet top-up",
@@ -21245,8 +20284,8 @@ export const WalletTopup = React.forwardRef(
       open,
       onOpenChange,
       className,
-    }: WalletTopupProps,
-    ref: React.Ref<HTMLDivElement>
+    },
+    ref
   ) => {
     const isOpenControlled = open !== undefined;
 
@@ -23248,99 +22287,22 @@ async function sync(options) {
   }
   let selectedToAdd = toAdd;
   let selectedToUpdate = toUpdate;
-  const CUSTOM_GROUPS = {
-    "attachment-preview": "Chat",
-    "audio-media": "Chat",
-    "carousel-media": "Chat",
-    "chat-bubble": "Chat",
-    "chat-composer": "Chat",
-    "contact-list-item": "Chat",
-    "date-divider": "Chat",
-    "doc-media": "Chat",
-    "image-media": "Chat",
-    "reply-quote": "Chat",
-    "system-message": "Chat",
-    "unread-separator": "Chat",
-    "video-media": "Chat",
-    "event-selector": "Webhook",
-    "key-value-input": "Webhook",
-    "api-feature-card": "Webhook",
-    "endpoint-details": "Webhook",
-    "alert-configuration": "Webhook",
-    "auto-pay-setup": "Plan & Payment",
-    "bank-details": "Plan & Payment",
-    "date-range-modal": "Plan & Payment",
-    "payment-option-card": "Plan & Payment",
-    "plan-upgrade-modal": "Plan & Payment",
-    "plan-upgrade-summary-modal": "Plan & Payment",
-    "payment-summary": "Plan & Payment",
-    "let-us-drive-card": "Plan & Payment",
-    "power-up-card": "Plan & Payment",
-    "pricing-card": "Plan & Payment",
-    "pricing-page": "Plan & Payment",
-    "pricing-toggle": "Plan & Payment",
-    "talk-to-us-modal": "Plan & Payment",
-    "wallet-topup": "Plan & Payment",
-    "file-upload-modal": "Plan & Payment",
-    "plan-detail-modal": "Plan & Payment",
-    "bots": "AI Bot",
-    "ivr-bot": "AI Bot"
-  };
   if (!options.yes && toAdd.length > 0) {
-    const uiToAdd = toAdd.filter((c) => !CUSTOM_GROUPS[c]);
-    const customToAdd = toAdd.filter((c) => !!CUSTOM_GROUPS[c]);
-    const picked = [];
-    if (uiToAdd.length > 0) {
-      console.log(chalk5.cyan.bold("  \u2500\u2500 Components \u2500\u2500\n"));
-      const { selected } = await prompts3({
-        type: "multiselect",
-        name: "selected",
-        message: "Select new components to add",
-        choices: uiToAdd.map((c) => ({
-          title: c,
-          value: c,
-          selected: false
-        }))
-      });
-      if (!selected) {
-        console.log(chalk5.yellow("\n  Sync cancelled.\n"));
-        process.exit(0);
-      }
-      picked.push(...selected);
-    }
-    if (customToAdd.length > 0) {
-      const grouped = /* @__PURE__ */ new Map();
-      for (const c of customToAdd) {
-        const group = CUSTOM_GROUPS[c] || "Other";
-        if (!grouped.has(group)) grouped.set(group, []);
-        grouped.get(group).push(c);
-      }
-      const sortedGroups = [...grouped.keys()].sort();
-      console.log(chalk5.cyan.bold("\n  \u2500\u2500 Custom \u2500\u2500\n"));
-      const { selected } = await prompts3({
-        type: "multiselect",
-        name: "selected",
-        message: "Select custom component folders to add",
-        choices: sortedGroups.map((group) => {
-          const components = grouped.get(group);
-          const count = components.length;
-          return {
-            title: group,
-            value: group,
-            selected: false,
-            description: `${count} component${count === 1 ? "" : "s"}`
-          };
-        })
-      });
-      if (!selected) {
-        console.log(chalk5.yellow("\n  Sync cancelled.\n"));
-        process.exit(0);
-      }
-      for (const group of selected) {
-        picked.push(...grouped.get(group));
-      }
+    const { selected } = await prompts3({
+      type: "multiselect",
+      name: "selected",
+      message: "Select new components to add",
+      choices: toAdd.map((c) => {
+        const comp = registry[c];
+        const fileCount = comp.isMultiFile ? ` (${comp.files.length} files)` : "";
+        return { title: `${c}${fileCount}`, value: c, selected: true };
+      })
+    });
+    if (!selected) {
+      console.log(chalk5.yellow("\n  Sync cancelled.\n"));
+      process.exit(0);
     }
-    selectedToAdd = picked;
+    selectedToAdd = selected;
   }
   if (!options.yes && toUpdate.length > 0) {
     const { selected } = await prompts3({