analytica-frontend-lib 1.0.21 → 1.0.23

package/dist/index.mjs

@@ -200,9 +200,144 @@ var Text = ({
   );
 };
 
+// src/components/TextArea/TextArea.tsx
+import {
+  forwardRef as forwardRef2,
+  useState,
+  useId
+} from "react";
+import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
+var SIZE_CLASSES2 = {
+  small: {
+    container: "w-72",
+    // 288px width
+    textarea: "h-24 text-sm",
+    // 96px height, 14px font
+    textSize: "sm"
+  },
+  medium: {
+    container: "w-72",
+    // 288px width
+    textarea: "h-24 text-base",
+    // 96px height, 16px font
+    textSize: "md"
+  },
+  large: {
+    container: "w-72",
+    // 288px width
+    textarea: "h-24 text-lg",
+    // 96px height, 18px font
+    textSize: "lg"
+  },
+  extraLarge: {
+    container: "w-72",
+    // 288px width
+    textarea: "h-24 text-xl",
+    // 96px height, 20px font
+    textSize: "xl"
+  }
+};
+var BASE_TEXTAREA_CLASSES = "w-full box-border p-3 bg-background border border-solid rounded-[4px] resize-none focus:outline-none font-roboto font-normal leading-[150%] placeholder:text-text-600 transition-all duration-200";
+var STATE_CLASSES = {
+  default: {
+    base: "border-border-300 bg-background text-text-600",
+    hover: "hover:border-border-400",
+    focus: "focus:border-border-500"
+  },
+  hovered: {
+    base: "border-border-400 bg-background text-text-600",
+    hover: "",
+    focus: "focus:border-border-500"
+  },
+  focused: {
+    base: "border-2 border-primary-950 bg-background text-text-900",
+    hover: "",
+    focus: ""
+  },
+  invalid: {
+    base: "border-2 border-red-700 bg-white text-gray-800",
+    hover: "hover:border-red-700",
+    focus: "focus:border-red-700"
+  },
+  disabled: {
+    base: "border-border-300 bg-background text-text-600 cursor-not-allowed opacity-40",
+    hover: "",
+    focus: ""
+  }
+};
+var TextArea = forwardRef2(
+  ({
+    label,
+    size = "medium",
+    state = "default",
+    errorMessage,
+    helperMessage,
+    className = "",
+    labelClassName = "",
+    disabled,
+    id,
+    onChange,
+    placeholder,
+    ...props
+  }, ref) => {
+    const generatedId = useId();
+    const inputId = id ?? `textarea-${generatedId}`;
+    const [isFocused, setIsFocused] = useState(false);
+    const handleChange = (event) => {
+      onChange?.(event);
+    };
+    const handleFocus = (event) => {
+      setIsFocused(true);
+      props.onFocus?.(event);
+    };
+    const handleBlur = (event) => {
+      setIsFocused(false);
+      props.onBlur?.(event);
+    };
+    let currentState = disabled ? "disabled" : state;
+    if (isFocused && currentState !== "invalid" && currentState !== "disabled") {
+      currentState = "focused";
+    }
+    const sizeClasses = SIZE_CLASSES2[size];
+    const stateClasses = STATE_CLASSES[currentState];
+    const textareaClasses = `${BASE_TEXTAREA_CLASSES} ${sizeClasses.textarea} ${stateClasses.base} ${stateClasses.hover} ${stateClasses.focus} ${className}`;
+    return /* @__PURE__ */ jsxs3("div", { className: `flex flex-col ${sizeClasses.container}`, children: [
+      label && /* @__PURE__ */ jsx5(
+        Text,
+        {
+          as: "label",
+          htmlFor: inputId,
+          size: sizeClasses.textSize,
+          weight: "medium",
+          color: "text-text-950",
+          className: `mb-1.5 ${labelClassName}`,
+          children: label
+        }
+      ),
+      /* @__PURE__ */ jsx5(
+        "textarea",
+        {
+          ref,
+          id: inputId,
+          disabled,
+          onChange: handleChange,
+          onFocus: handleFocus,
+          onBlur: handleBlur,
+          className: textareaClasses,
+          placeholder,
+          ...props
+        }
+      ),
+      errorMessage && /* @__PURE__ */ jsx5(Text, { size: "sm", weight: "normal", className: "mt-1.5 text-error-600", children: errorMessage }),
+      helperMessage && !errorMessage && /* @__PURE__ */ jsx5(Text, { size: "sm", weight: "normal", className: "mt-1.5 text-text-500", children: helperMessage })
+    ] });
+  }
+);
+TextArea.displayName = "TextArea";
+
 // src/components/Badge/Badge.tsx
 import { Bell } from "phosphor-react";
-import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
 var VARIANT_ACTION_CLASSES2 = {
   solid: {
     error: "bg-error text-error-700 focus-visible:outline-none",
@@ -230,7 +365,7 @@ var VARIANT_ACTION_CLASSES2 = {
   },
   notification: "text-primary"
 };
-var SIZE_CLASSES2 = {
+var SIZE_CLASSES3 = {
   small: "text-2xs px-2 py-1",
   medium: "text-xs px-2 py-1",
   large: "text-sm px-2 py-1"
@@ -251,21 +386,21 @@ var Badge = ({
   notificationActive = false,
   ...props
 }) => {
-  const sizeClasses = SIZE_CLASSES2[size];
+  const sizeClasses = SIZE_CLASSES3[size];
   const sizeClassesIcon = SIZE_CLASSES_ICON[size];
   const variantActionMap = VARIANT_ACTION_CLASSES2[variant] || {};
   const variantClasses = typeof variantActionMap === "string" ? variantActionMap : variantActionMap[action] ?? variantActionMap.muted ?? "";
   const baseClasses = "inline-flex items-center justify-center rounded-xs font-medium gap-1 relative";
   const baseClassesIcon = "flex items-center";
   if (variant === "notification") {
-    return /* @__PURE__ */ jsxs3(
+    return /* @__PURE__ */ jsxs4(
       "div",
       {
         className: `${baseClasses} ${variantClasses} ${sizeClasses} ${className}`,
         ...props,
         children: [
-          /* @__PURE__ */ jsx5(Bell, { size: 24, className: "text-primary-950" }),
-          notificationActive && /* @__PURE__ */ jsx5(
+          /* @__PURE__ */ jsx6(Bell, { size: 24, className: "text-primary-950" }),
+          notificationActive && /* @__PURE__ */ jsx6(
             "span",
             {
               "data-testid": "notification-dot",
@@ -276,15 +411,15 @@ var Badge = ({
       }
     );
   }
-  return /* @__PURE__ */ jsxs3(
+  return /* @__PURE__ */ jsxs4(
     "div",
     {
       className: `${baseClasses} ${variantClasses} ${sizeClasses} ${className}`,
       ...props,
       children: [
-        iconLeft && /* @__PURE__ */ jsx5("span", { className: `${baseClassesIcon} ${sizeClassesIcon}`, children: iconLeft }),
+        iconLeft && /* @__PURE__ */ jsx6("span", { className: `${baseClassesIcon} ${sizeClassesIcon}`, children: iconLeft }),
         children,
-        iconRight && /* @__PURE__ */ jsx5("span", { className: `${baseClassesIcon} ${sizeClassesIcon}`, children: iconRight })
+        iconRight && /* @__PURE__ */ jsx6("span", { className: `${baseClassesIcon} ${sizeClassesIcon}`, children: iconRight })
       ]
     }
   );
@@ -292,13 +427,13 @@ var Badge = ({
 
 // src/components/CheckBox/CheckBox.tsx
 import {
-  forwardRef as forwardRef2,
-  useState,
-  useId
+  forwardRef as forwardRef3,
+  useState as useState2,
+  useId as useId2
 } from "react";
 import { Check, Minus } from "phosphor-react";
-import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
-var SIZE_CLASSES3 = {
+import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
+var SIZE_CLASSES4 = {
   small: {
     checkbox: "w-4 h-4",
     // 16px x 16px
@@ -335,7 +470,7 @@ var SIZE_CLASSES3 = {
   }
 };
 var BASE_CHECKBOX_CLASSES = "rounded border cursor-pointer transition-all duration-200 flex items-center justify-center focus:outline-none";
-var STATE_CLASSES = {
+var STATE_CLASSES2 = {
   default: {
     unchecked: "border-border-400 bg-background hover:border-border-500",
     checked: "border-primary-950 bg-primary-950 text-text hover:border-primary-800 hover:bg-primary-800"
@@ -357,7 +492,7 @@ var STATE_CLASSES = {
     checked: "border-primary-600 bg-primary-600 text-text cursor-not-allowed opacity-40"
   }
 };
-var CheckBox = forwardRef2(
+var CheckBox = forwardRef3(
   ({
     label,
     size = "medium",
@@ -373,9 +508,9 @@ var CheckBox = forwardRef2(
     onChange,
     ...props
   }, ref) => {
-    const generatedId = useId();
+    const generatedId = useId2();
     const inputId = id ?? `checkbox-${generatedId}`;
-    const [internalChecked, setInternalChecked] = useState(false);
+    const [internalChecked, setInternalChecked] = useState2(false);
     const isControlled = checkedProp !== void 0;
     const checked = isControlled ? checkedProp : internalChecked;
     const handleChange = (event) => {
@@ -385,14 +520,14 @@ var CheckBox = forwardRef2(
       onChange?.(event);
     };
     const currentState = disabled ? "disabled" : state;
-    const sizeClasses = SIZE_CLASSES3[size];
+    const sizeClasses = SIZE_CLASSES4[size];
     const checkVariant = checked || indeterminate ? "checked" : "unchecked";
-    const stylingClasses = STATE_CLASSES[currentState][checkVariant];
+    const stylingClasses = STATE_CLASSES2[currentState][checkVariant];
     const borderWidthClass = state === "focused" || state === "hovered" && size === "large" ? "border-[3px]" : sizeClasses.borderWidth;
     const checkboxClasses = `${BASE_CHECKBOX_CLASSES} ${sizeClasses.checkbox} ${borderWidthClass} ${stylingClasses} ${className}`;
     const renderIcon = () => {
       if (indeterminate) {
-        return /* @__PURE__ */ jsx6(
+        return /* @__PURE__ */ jsx7(
           Minus,
           {
             size: sizeClasses.iconSize,
@@ -402,7 +537,7 @@ var CheckBox = forwardRef2(
         );
       }
       if (checked) {
-        return /* @__PURE__ */ jsx6(
+        return /* @__PURE__ */ jsx7(
           Check,
           {
             size: sizeClasses.iconSize,
@@ -413,13 +548,13 @@ var CheckBox = forwardRef2(
       }
       return null;
     };
-    return /* @__PURE__ */ jsxs4("div", { className: "flex flex-col", children: [
-      /* @__PURE__ */ jsxs4(
+    return /* @__PURE__ */ jsxs5("div", { className: "flex flex-col", children: [
+      /* @__PURE__ */ jsxs5(
         "div",
         {
           className: `flex flex-row items-center ${sizeClasses.spacing} ${disabled ? "opacity-40" : ""}`,
           children: [
-            /* @__PURE__ */ jsx6(
+            /* @__PURE__ */ jsx7(
               "input",
               {
                 ref,
@@ -432,12 +567,12 @@ var CheckBox = forwardRef2(
                 ...props
               }
             ),
-            /* @__PURE__ */ jsx6("label", { htmlFor: inputId, className: checkboxClasses, children: renderIcon() }),
-            label && /* @__PURE__ */ jsx6(
+            /* @__PURE__ */ jsx7("label", { htmlFor: inputId, className: checkboxClasses, children: renderIcon() }),
+            label && /* @__PURE__ */ jsx7(
               "div",
               {
                 className: `flex flex-row items-center ${sizeClasses.labelHeight}`,
-                children: /* @__PURE__ */ jsx6(
+                children: /* @__PURE__ */ jsx7(
                   Text,
                   {
                     as: "label",
@@ -453,7 +588,7 @@ var CheckBox = forwardRef2(
           ]
         }
       ),
-      errorMessage && /* @__PURE__ */ jsx6(
+      errorMessage && /* @__PURE__ */ jsx7(
         Text,
         {
           size: "sm",
@@ -463,7 +598,7 @@ var CheckBox = forwardRef2(
           children: errorMessage
         }
       ),
-      helperText && !errorMessage && /* @__PURE__ */ jsx6(
+      helperText && !errorMessage && /* @__PURE__ */ jsx7(
         Text,
         {
           size: "sm",
@@ -479,24 +614,24 @@ var CheckBox = forwardRef2(
 CheckBox.displayName = "CheckBox";
 
 // src/components/Table/Table.tsx
-import { forwardRef as forwardRef3 } from "react";
-import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
-var Table = forwardRef3(
-  ({ className, children, ...props }, ref) => /* @__PURE__ */ jsx7("div", { className: "border border-border-200 rounded-xl relative w-full overflow-hidden", children: /* @__PURE__ */ jsxs5(
+import { forwardRef as forwardRef4 } from "react";
+import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
+var Table = forwardRef4(
+  ({ className, children, ...props }, ref) => /* @__PURE__ */ jsx8("div", { className: "border border-border-200 rounded-xl relative w-full overflow-hidden", children: /* @__PURE__ */ jsxs6(
     "table",
     {
       ref,
       className: `w-full caption-bottom text-sm ${className ?? ""}`,
       ...props,
       children: [
-        /* @__PURE__ */ jsx7("caption", { className: "sr-only", children: "My Table" }),
+        /* @__PURE__ */ jsx8("caption", { className: "sr-only", children: "My Table" }),
         children
       ]
     }
   ) })
 );
 Table.displayName = "Table";
-var TableHeader = forwardRef3(({ className, ...props }, ref) => /* @__PURE__ */ jsx7(
+var TableHeader = forwardRef4(({ className, ...props }, ref) => /* @__PURE__ */ jsx8(
   "thead",
   {
     ref,
@@ -505,7 +640,7 @@ var TableHeader = forwardRef3(({ className, ...props }, ref) => /* @__PURE__ */
   }
 ));
 TableHeader.displayName = "TableHeader";
-var TableBody = forwardRef3(({ className, ...props }, ref) => /* @__PURE__ */ jsx7(
+var TableBody = forwardRef4(({ className, ...props }, ref) => /* @__PURE__ */ jsx8(
   "tbody",
   {
     ref,
@@ -514,7 +649,7 @@ var TableBody = forwardRef3(({ className, ...props }, ref) => /* @__PURE__ */ js
   }
 ));
 TableBody.displayName = "TableBody";
-var TableFooter = forwardRef3(({ className, ...props }, ref) => /* @__PURE__ */ jsx7(
+var TableFooter = forwardRef4(({ className, ...props }, ref) => /* @__PURE__ */ jsx8(
   "tfoot",
   {
     ref,
@@ -529,9 +664,9 @@ var VARIANT_STATES_ROW = {
   invalid: "border-b-2 border-indicator-error",
   disabled: "border-b border-border-100 bg-background-50 opacity-50 cursor-not-allowed"
 };
-var TableRow = forwardRef3(
+var TableRow = forwardRef4(
   ({ state = "default", className, ...props }, ref) => {
-    return /* @__PURE__ */ jsx7(
+    return /* @__PURE__ */ jsx8(
       "tr",
       {
         ref,
@@ -548,7 +683,7 @@ var TableRow = forwardRef3(
   }
 );
 TableRow.displayName = "TableRow";
-var TableHead = forwardRef3(({ className, ...props }, ref) => /* @__PURE__ */ jsx7(
+var TableHead = forwardRef4(({ className, ...props }, ref) => /* @__PURE__ */ jsx8(
   "th",
   {
     ref,
@@ -557,7 +692,7 @@ var TableHead = forwardRef3(({ className, ...props }, ref) => /* @__PURE__ */ js
   }
 ));
 TableHead.displayName = "TableHead";
-var TableCell = forwardRef3(({ className, ...props }, ref) => /* @__PURE__ */ jsx7(
+var TableCell = forwardRef4(({ className, ...props }, ref) => /* @__PURE__ */ jsx8(
   "td",
   {
     ref,
@@ -566,7 +701,7 @@ var TableCell = forwardRef3(({ className, ...props }, ref) => /* @__PURE__ */ js
   }
 ));
 TableCell.displayName = "TableCell";
-var TableCaption = forwardRef3(({ className, ...props }, ref) => /* @__PURE__ */ jsx7(
+var TableCaption = forwardRef4(({ className, ...props }, ref) => /* @__PURE__ */ jsx8(
   "caption",
   {
     ref,
@@ -579,20 +714,20 @@ TableCaption.displayName = "TableCaption";
 // src/components/DropdownMenu/DropdownMenu.tsx
 import {
   createContext,
-  useState as useState2,
+  useState as useState3,
   useCallback,
   useContext,
-  forwardRef as forwardRef4,
+  forwardRef as forwardRef5,
   useEffect,
   useRef,
   useMemo
 } from "react";
-import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
 var DropdownMenuContext = createContext(
   void 0
 );
 var DropdownMenu = ({ children, open, onOpenChange }) => {
-  const [internalOpen, setInternalOpen] = useState2(false);
+  const [internalOpen, setInternalOpen] = useState3(false);
   const isControlled = open !== void 0;
   const currentOpen = isControlled ? open : internalOpen;
   const setOpen = useCallback(
@@ -650,14 +785,14 @@ var DropdownMenu = ({ children, open, onOpenChange }) => {
     () => ({ open: currentOpen, setOpen }),
     [currentOpen, setOpen]
   );
-  return /* @__PURE__ */ jsx8(DropdownMenuContext.Provider, { value, children: /* @__PURE__ */ jsx8("div", { className: "relative", ref: menuRef, children }) });
+  return /* @__PURE__ */ jsx9(DropdownMenuContext.Provider, { value, children: /* @__PURE__ */ jsx9("div", { className: "relative", ref: menuRef, children }) });
 };
-var DropdownMenuTrigger = forwardRef4(({ className, children, onClick, ...props }, ref) => {
+var DropdownMenuTrigger = forwardRef5(({ className, children, onClick, ...props }, ref) => {
   const context = useContext(DropdownMenuContext);
   if (!context)
     throw new Error("DropdownMenuTrigger must be used within a DropdownMenu");
   const { open, setOpen } = context;
-  return /* @__PURE__ */ jsx8(
+  return /* @__PURE__ */ jsx9(
     "button",
     {
       ref,
@@ -689,7 +824,7 @@ var ALIGN_CLASSES = {
   center: "left-1/2 -translate-x-1/2",
   end: "right-0"
 };
-var MenuLabel = forwardRef4(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx8(
+var MenuLabel = forwardRef5(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx9(
   "fieldset",
   {
     ref,
@@ -699,7 +834,7 @@ var MenuLabel = forwardRef4(({ className, inset, ...props }, ref) => /* @__PURE_
   }
 ));
 MenuLabel.displayName = "MenuLabel";
-var MenuContent = forwardRef4(
+var MenuContent = forwardRef5(
   ({
     className,
     align = "start",
@@ -709,7 +844,7 @@ var MenuContent = forwardRef4(
     ...props
   }, ref) => {
     const { open } = useContext(DropdownMenuContext);
-    const [isVisible, setIsVisible] = useState2(open);
+    const [isVisible, setIsVisible] = useState3(open);
     useEffect(() => {
       if (open) {
         setIsVisible(true);
@@ -724,7 +859,7 @@ var MenuContent = forwardRef4(
       const horizontal = ALIGN_CLASSES[align];
       return `absolute ${vertical} ${horizontal}`;
     };
-    return /* @__PURE__ */ jsx8(
+    return /* @__PURE__ */ jsx9(
       "div",
       {
         ref,
@@ -748,7 +883,7 @@ var MenuContent = forwardRef4(
   }
 );
 MenuContent.displayName = "MenuContent";
-var MenuItem = forwardRef4(
+var MenuItem = forwardRef5(
   ({
     className,
     inset,
@@ -769,7 +904,7 @@ var MenuItem = forwardRef4(
       }
       onClick?.(e);
     };
-    return /* @__PURE__ */ jsxs6(
+    return /* @__PURE__ */ jsxs7(
       "div",
       {
         ref,
@@ -799,7 +934,7 @@ var MenuItem = forwardRef4(
   }
 );
 MenuItem.displayName = "MenuItem";
-var MenuSeparator = forwardRef4(({ className, ...props }, ref) => /* @__PURE__ */ jsx8(
+var MenuSeparator = forwardRef5(({ className, ...props }, ref) => /* @__PURE__ */ jsx9(
   "div",
   {
     ref,
@@ -810,9 +945,9 @@ var MenuSeparator = forwardRef4(({ className, ...props }, ref) => /* @__PURE__ *
 MenuSeparator.displayName = "MenuSeparator";
 
 // src/components/NavButton/NavButton.tsx
-import { forwardRef as forwardRef5 } from "react";
-import { jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
-var NavButton = forwardRef5(
+import { forwardRef as forwardRef6 } from "react";
+import { jsx as jsx10, jsxs as jsxs8 } from "react/jsx-runtime";
+var NavButton = forwardRef6(
   ({ icon, label, selected = false, className = "", disabled, ...props }, ref) => {
     const baseClasses = [
       "flex",
@@ -839,7 +974,7 @@ var NavButton = forwardRef5(
     ];
     const stateClasses = selected ? ["bg-primary-50", "text-primary-950"] : [];
     const allClasses = [...baseClasses, ...stateClasses].join(" ");
-    return /* @__PURE__ */ jsxs7(
+    return /* @__PURE__ */ jsxs8(
       "button",
       {
         ref,
@@ -849,8 +984,8 @@ var NavButton = forwardRef5(
         "aria-pressed": selected,
         ...props,
         children: [
-          /* @__PURE__ */ jsx9("span", { className: "flex items-center justify-center w-5 h-5", children: icon }),
-          /* @__PURE__ */ jsx9("span", { className: "whitespace-nowrap", children: label })
+          /* @__PURE__ */ jsx10("span", { className: "flex items-center justify-center w-5 h-5", children: icon }),
+          /* @__PURE__ */ jsx10("span", { className: "whitespace-nowrap", children: label })
         ]
       }
     );
@@ -859,9 +994,9 @@ var NavButton = forwardRef5(
 NavButton.displayName = "NavButton";
 
 // src/components/IconButton/IconButton.tsx
-import { forwardRef as forwardRef6 } from "react";
-import { jsx as jsx10 } from "react/jsx-runtime";
-var IconButton = forwardRef6(
+import { forwardRef as forwardRef7 } from "react";
+import { jsx as jsx11 } from "react/jsx-runtime";
+var IconButton = forwardRef7(
   ({ icon, size = "md", active = false, className = "", disabled, ...props }, ref) => {
     const baseClasses = [
       "inline-flex",
@@ -893,7 +1028,7 @@ var IconButton = forwardRef6(
       ...activeClasses
     ].join(" ");
     const ariaLabel = props["aria-label"] ?? "Bot\xE3o de a\xE7\xE3o";
-    return /* @__PURE__ */ jsx10(
+    return /* @__PURE__ */ jsx11(
       "button",
       {
         ref,
@@ -903,7 +1038,7 @@ var IconButton = forwardRef6(
         "aria-pressed": active,
         "aria-label": ariaLabel,
         ...props,
-        children: /* @__PURE__ */ jsx10("span", { className: "flex items-center justify-center", children: icon })
+        children: /* @__PURE__ */ jsx11("span", { className: "flex items-center justify-center", children: icon })
       }
     );
   }
@@ -912,7 +1047,7 @@ IconButton.displayName = "IconButton";
 
 // src/components/Toast/Toast.tsx
 import { CheckCircle, WarningCircle, Info, X } from "phosphor-react";
-import { jsx as jsx11, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx12, jsxs as jsxs9 } from "react/jsx-runtime";
 var VARIANT_ACTION_CLASSES3 = {
   solid: {
     warning: "bg-warning text-warning-800 border-none focus-visible:outline-none",
@@ -952,7 +1087,7 @@ var Toast = ({
   };
   const IconAction = iconMap[action] || iconMap["success"];
   const baseClasses = "max-w-[390px] w-full flex flex-row items-start justify-between shadow-lg rounded-lg border p-4 gap-6 group";
-  return /* @__PURE__ */ jsxs8(
+  return /* @__PURE__ */ jsxs9(
     "div",
     {
       role: "alert",
@@ -961,20 +1096,20 @@ var Toast = ({
       className: `${baseClasses} ${positionClasses[position]} ${variantClasses} ${className}`,
       ...props,
       children: [
-        /* @__PURE__ */ jsxs8("div", { className: "flex flex-row items-start gap-3", children: [
-          /* @__PURE__ */ jsx11("span", { className: "mt-1", "data-testid": `toast-icon-${action}`, children: /* @__PURE__ */ jsx11(IconAction, {}) }),
-          /* @__PURE__ */ jsxs8("div", { className: "flex flex-col items-start justify-start", children: [
-            /* @__PURE__ */ jsx11("p", { className: "font-semibold text-md", children: title }),
-            description && /* @__PURE__ */ jsx11("p", { className: "text-md text-text-900", children: description })
+        /* @__PURE__ */ jsxs9("div", { className: "flex flex-row items-start gap-3", children: [
+          /* @__PURE__ */ jsx12("span", { className: "mt-1", "data-testid": `toast-icon-${action}`, children: /* @__PURE__ */ jsx12(IconAction, {}) }),
+          /* @__PURE__ */ jsxs9("div", { className: "flex flex-col items-start justify-start", children: [
+            /* @__PURE__ */ jsx12("p", { className: "font-semibold text-md", children: title }),
+            description && /* @__PURE__ */ jsx12("p", { className: "text-md text-text-900", children: description })
           ] })
         ] }),
-        /* @__PURE__ */ jsx11(
+        /* @__PURE__ */ jsx12(
           "button",
           {
             onClick: onClose,
             "aria-label": "Dismiss notification",
             className: "text-background-500 cursor-pointer opacity-0 group-hover:opacity-100 transition-opacity",
-            children: /* @__PURE__ */ jsx11(X, {})
+            children: /* @__PURE__ */ jsx12(X, {})
           }
         )
       ]
@@ -1000,11 +1135,11 @@ var useToastStore = create((set) => ({
 }));
 
 // src/components/Toast/utils/Toaster.tsx
-import { Fragment, jsx as jsx12 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx13 } from "react/jsx-runtime";
 var Toaster = () => {
   const toasts = useToastStore((state) => state.toasts);
   const removeToast = useToastStore((state) => state.removeToast);
-  return /* @__PURE__ */ jsx12(Fragment, { children: toasts.map((toast) => /* @__PURE__ */ jsx12(
+  return /* @__PURE__ */ jsx13(Fragment, { children: toasts.map((toast) => /* @__PURE__ */ jsx13(
     Toast,
     {
       title: toast.title,
@@ -1045,6 +1180,7 @@ export {
   TableHeader,
   TableRow,
   Text,
+  TextArea,
   Toast,
   Toaster,
   useToast,