analytica-frontend-lib 1.0.23 → 1.0.25

package/dist/index.mjs

@@ -1,157 +1,5 @@
-// src/components/Button/Button.tsx
-import { jsx, jsxs } from "react/jsx-runtime";
-var VARIANT_ACTION_CLASSES = {
-  solid: {
-    primary: "bg-primary-950 text-text border border-primary-950 hover:bg-primary-800 hover:border-primary-800 focus-visible:outline-none focus-visible:bg-primary-950 focus-visible:ring-2 focus-visible:ring-offset-0 focus-visible:ring-indicator-info active:bg-primary-700 active:border-primary-700 disabled:bg-primary-500 disabled:border-primary-500 disabled:opacity-40 disabled:cursor-not-allowed",
-    positive: "bg-success-500 text-text border border-success-500 hover:bg-success-600 hover:border-success-600 focus-visible:outline-none focus-visible:bg-success-500 focus-visible:ring-2 focus-visible:ring-offset-0 focus-visible:ring-indicator-info active:bg-success-700 active:border-success-700 disabled:bg-success-500 disabled:border-success-500 disabled:opacity-40 disabled:cursor-not-allowed",
-    negative: "bg-error-500 text-text border border-error-500 hover:bg-error-600 hover:border-error-600 focus-visible:outline-none focus-visible:bg-error-500 focus-visible:ring-2 focus-visible:ring-offset-0 focus-visible:ring-indicator-info active:bg-error-700 active:border-error-700 disabled:bg-error-500 disabled:border-error-500 disabled:opacity-40 disabled:cursor-not-allowed"
-  },
-  outline: {
-    primary: "bg-transparent text-primary-950 border border-primary-950 hover:bg-background-50 hover:text-primary-400 hover:border-primary-400 focus-visible:border-0 focus-visible:outline-none focus-visible:text-primary-600 focus-visible:ring-2 focus-visible:ring-offset-0 focus-visible:ring-indicator-info active:text-primary-700 active:border-primary-700 disabled:opacity-40 disabled:cursor-not-allowed",
-    positive: "bg-transparent text-success-500 border border-success-300 hover:bg-background-50 hover:text-success-400 hover:border-success-400 focus-visible:border-0 focus-visible:outline-none focus-visible:text-success-600 focus-visible:ring-2 focus-visible:ring-offset-0 focus-visible:ring-indicator-info active:text-success-700 active:border-success-700 disabled:opacity-40 disabled:cursor-not-allowed",
-    negative: "bg-transparent text-error-500 border border-error-300 hover:bg-background-50 hover:text-error-400 hover:border-error-400 focus-visible:border-0 focus-visible:outline-none focus-visible:text-error-600 focus-visible:ring-2 focus-visible:ring-offset-0 focus-visible:ring-indicator-info active:text-error-700 active:border-error-700 disabled:opacity-40 disabled:cursor-not-allowed"
-  },
-  link: {
-    primary: "bg-transparent text-primary-950 hover:text-primary-400 focus-visible:outline-none focus-visible:text-primary-600 focus-visible:ring-2 focus-visible:ring-offset-0 focus-visible:ring-indicator-info active:text-primary-700 disabled:opacity-40 disabled:cursor-not-allowed",
-    positive: "bg-transparent text-success-500 hover:text-success-400 focus-visible:outline-none focus-visible:text-success-600 focus-visible:ring-2 focus-visible:ring-offset-0 focus-visible:ring-indicator-info active:text-success-700 disabled:opacity-40 disabled:cursor-not-allowed",
-    negative: "bg-transparent text-error-500 hover:text-error-400 focus-visible:outline-none focus-visible:text-error-600 focus-visible:ring-2 focus-visible:ring-offset-0 focus-visible:ring-indicator-info active:text-error-700 disabled:opacity-40 disabled:cursor-not-allowed"
-  }
-};
-var SIZE_CLASSES = {
-  "extra-small": "text-xs px-3.5 py-2",
-  small: "text-sm px-4 py-2.5",
-  medium: "text-md px-5 py-2.5",
-  large: "text-lg px-6 py-3",
-  "extra-large": "text-lg px-7 py-3.5"
-};
-var Button = ({
-  children,
-  iconLeft,
-  iconRight,
-  size = "medium",
-  variant = "solid",
-  action = "primary",
-  className = "",
-  disabled,
-  type = "button",
-  ...props
-}) => {
-  const sizeClasses = SIZE_CLASSES[size];
-  const variantClasses = VARIANT_ACTION_CLASSES[variant][action];
-  const baseClasses = "inline-flex items-center justify-center rounded-full cursor-pointer font-medium";
-  return /* @__PURE__ */ jsxs(
-    "button",
-    {
-      className: `${baseClasses} ${variantClasses} ${sizeClasses} ${className}`,
-      disabled,
-      type,
-      ...props,
-      children: [
-        iconLeft && /* @__PURE__ */ jsx("span", { className: "mr-2 flex items-center", children: iconLeft }),
-        children,
-        iconRight && /* @__PURE__ */ jsx("span", { className: "ml-2 flex items-center", children: iconRight })
-      ]
-    }
-  );
-};
-
-// src/components/IconRoundedButton/IconRoundedButton.tsx
-import { jsx as jsx2 } from "react/jsx-runtime";
-var IconRoundedButton = ({
-  icon,
-  className = "",
-  disabled,
-  ...props
-}) => {
-  const baseClasses = [
-    "inline-flex",
-    "items-center",
-    "justify-center",
-    "w-8",
-    "h-8",
-    "rounded-full",
-    "cursor-pointer",
-    "border",
-    "border-background-200",
-    "bg-background",
-    "text-text-950",
-    "hover:shadow-hard-shadow-1",
-    "focus-visible:outline-none",
-    "focus-visible:shadow-hard-shadow-1",
-    "focus-visible:ring-2",
-    "focus-visible:ring-indicator-info",
-    "focus-visible:ring-offset-0",
-    "disabled:opacity-50",
-    "disabled:cursor-not-allowed"
-  ].join(" ");
-  return /* @__PURE__ */ jsx2(
-    "button",
-    {
-      type: "button",
-      className: `${baseClasses} ${className}`,
-      disabled,
-      ...props,
-      children: /* @__PURE__ */ jsx2("span", { className: "flex items-center justify-center w-5 h-5", children: icon })
-    }
-  );
-};
-
-// src/components/SelectionButton/SelectionButton.tsx
-import { forwardRef } from "react";
-import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
-var SelectionButton = forwardRef(
-  ({ icon, label, selected = false, className = "", disabled, ...props }, ref) => {
-    const baseClasses = [
-      "inline-flex",
-      "items-center",
-      "justify-start",
-      "gap-2",
-      "p-4",
-      "rounded-xl",
-      "cursor-pointer",
-      "border",
-      "border-border-50",
-      "bg-background",
-      "text-sm",
-      "text-text-700",
-      "font-bold",
-      "shadow-soft-shadow-1",
-      "hover:bg-background-100",
-      "focus-visible:outline-none",
-      "focus-visible:ring-2",
-      "focus-visible:ring-indicator-info",
-      "focus-visible:ring-offset-0",
-      "focus-visible:shadow-none",
-      "active:ring-2",
-      "active:ring-primary-950",
-      "active:ring-offset-0",
-      "active:shadow-none",
-      "disabled:opacity-50",
-      "disabled:cursor-not-allowed"
-    ];
-    const stateClasses = selected ? ["ring-primary-950", "ring-2", "ring-offset-0", "shadow-none"] : [];
-    const allClasses = [...baseClasses, ...stateClasses].join(" ");
-    return /* @__PURE__ */ jsxs2(
-      "button",
-      {
-        ref,
-        type: "button",
-        className: `${allClasses} ${className}`,
-        disabled,
-        "aria-pressed": selected,
-        ...props,
-        children: [
-          /* @__PURE__ */ jsx3("span", { className: "flex items-center justify-center w-6 h-6", children: icon }),
-          /* @__PURE__ */ jsx3("span", { children: label })
-        ]
-      }
-    );
-  }
-);
-SelectionButton.displayName = "SelectionButton";
-
 // src/components/Text/Text.tsx
-import { jsx as jsx4 } from "react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 var Text = ({
   children,
   size = "md",
@@ -190,7 +38,7 @@ var Text = ({
   weightClasses = weightClassMap[weight] ?? weightClassMap.normal;
   const baseClasses = "font-primary";
   const Component = as ?? "p";
-  return /* @__PURE__ */ jsx4(
+  return /* @__PURE__ */ jsx(
     Component,
     {
       className: `${baseClasses} ${sizeClasses} ${weightClasses} ${color} ${className}`,
@@ -200,144 +48,66 @@ 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"
+// src/components/Button/Button.tsx
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+var VARIANT_ACTION_CLASSES = {
+  solid: {
+    primary: "bg-primary-950 text-text border border-primary-950 hover:bg-primary-800 hover:border-primary-800 focus-visible:outline-none focus-visible:bg-primary-950 focus-visible:ring-2 focus-visible:ring-offset-0 focus-visible:ring-indicator-info active:bg-primary-700 active:border-primary-700 disabled:bg-primary-500 disabled:border-primary-500 disabled:opacity-40 disabled:cursor-not-allowed",
+    positive: "bg-success-500 text-text border border-success-500 hover:bg-success-600 hover:border-success-600 focus-visible:outline-none focus-visible:bg-success-500 focus-visible:ring-2 focus-visible:ring-offset-0 focus-visible:ring-indicator-info active:bg-success-700 active:border-success-700 disabled:bg-success-500 disabled:border-success-500 disabled:opacity-40 disabled:cursor-not-allowed",
+    negative: "bg-error-500 text-text border border-error-500 hover:bg-error-600 hover:border-error-600 focus-visible:outline-none focus-visible:bg-error-500 focus-visible:ring-2 focus-visible:ring-offset-0 focus-visible:ring-indicator-info active:bg-error-700 active:border-error-700 disabled:bg-error-500 disabled:border-error-500 disabled:opacity-40 disabled:cursor-not-allowed"
   },
-  large: {
-    container: "w-72",
-    // 288px width
-    textarea: "h-24 text-lg",
-    // 96px height, 18px font
-    textSize: "lg"
+  outline: {
+    primary: "bg-transparent text-primary-950 border border-primary-950 hover:bg-background-50 hover:text-primary-400 hover:border-primary-400 focus-visible:border-0 focus-visible:outline-none focus-visible:text-primary-600 focus-visible:ring-2 focus-visible:ring-offset-0 focus-visible:ring-indicator-info active:text-primary-700 active:border-primary-700 disabled:opacity-40 disabled:cursor-not-allowed",
+    positive: "bg-transparent text-success-500 border border-success-300 hover:bg-background-50 hover:text-success-400 hover:border-success-400 focus-visible:border-0 focus-visible:outline-none focus-visible:text-success-600 focus-visible:ring-2 focus-visible:ring-offset-0 focus-visible:ring-indicator-info active:text-success-700 active:border-success-700 disabled:opacity-40 disabled:cursor-not-allowed",
+    negative: "bg-transparent text-error-500 border border-error-300 hover:bg-background-50 hover:text-error-400 hover:border-error-400 focus-visible:border-0 focus-visible:outline-none focus-visible:text-error-600 focus-visible:ring-2 focus-visible:ring-offset-0 focus-visible:ring-indicator-info active:text-error-700 active:border-error-700 disabled:opacity-40 disabled:cursor-not-allowed"
   },
-  extraLarge: {
-    container: "w-72",
-    // 288px width
-    textarea: "h-24 text-xl",
-    // 96px height, 20px font
-    textSize: "xl"
+  link: {
+    primary: "bg-transparent text-primary-950 hover:text-primary-400 focus-visible:outline-none focus-visible:text-primary-600 focus-visible:ring-2 focus-visible:ring-offset-0 focus-visible:ring-indicator-info active:text-primary-700 disabled:opacity-40 disabled:cursor-not-allowed",
+    positive: "bg-transparent text-success-500 hover:text-success-400 focus-visible:outline-none focus-visible:text-success-600 focus-visible:ring-2 focus-visible:ring-offset-0 focus-visible:ring-indicator-info active:text-success-700 disabled:opacity-40 disabled:cursor-not-allowed",
+    negative: "bg-transparent text-error-500 hover:text-error-400 focus-visible:outline-none focus-visible:text-error-600 focus-visible:ring-2 focus-visible:ring-offset-0 focus-visible:ring-indicator-info active:text-error-700 disabled:opacity-40 disabled:cursor-not-allowed"
   }
 };
-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 SIZE_CLASSES = {
+  "extra-small": "text-xs px-3.5 py-2",
+  small: "text-sm px-4 py-2.5",
+  medium: "text-md px-5 py-2.5",
+  large: "text-lg px-6 py-3",
+  "extra-large": "text-lg px-7 py-3.5"
 };
-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";
+var Button = ({
+  children,
+  iconLeft,
+  iconRight,
+  size = "medium",
+  variant = "solid",
+  action = "primary",
+  className = "",
+  disabled,
+  type = "button",
+  ...props
+}) => {
+  const sizeClasses = SIZE_CLASSES[size];
+  const variantClasses = VARIANT_ACTION_CLASSES[variant][action];
+  const baseClasses = "inline-flex items-center justify-center rounded-full cursor-pointer font-medium";
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      className: `${baseClasses} ${variantClasses} ${sizeClasses} ${className}`,
+      disabled,
+      type,
+      ...props,
+      children: [
+        iconLeft && /* @__PURE__ */ jsx2("span", { className: "mr-2 flex items-center", children: iconLeft }),
+        children,
+        iconRight && /* @__PURE__ */ jsx2("span", { className: "ml-2 flex items-center", children: iconRight })
+      ]
     }
-    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 jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
 var VARIANT_ACTION_CLASSES2 = {
   solid: {
     error: "bg-error text-error-700 focus-visible:outline-none",
@@ -365,7 +135,7 @@ var VARIANT_ACTION_CLASSES2 = {
   },
   notification: "text-primary"
 };
-var SIZE_CLASSES3 = {
+var SIZE_CLASSES2 = {
   small: "text-2xs px-2 py-1",
   medium: "text-xs px-2 py-1",
   large: "text-sm px-2 py-1"
@@ -386,54 +156,427 @@ var Badge = ({
   notificationActive = false,
   ...props
 }) => {
-  const sizeClasses = SIZE_CLASSES3[size];
+  const sizeClasses = SIZE_CLASSES2[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__ */ jsxs2(
+      "div",
+      {
+        className: `${baseClasses} ${variantClasses} ${sizeClasses} ${className}`,
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx3(Bell, { size: 24, className: "text-primary-950" }),
+          notificationActive && /* @__PURE__ */ jsx3(
+            "span",
+            {
+              "data-testid": "notification-dot",
+              className: "absolute top-[5px] right-[10px] block h-2 w-2 rounded-full bg-indicator-error ring-2 ring-white"
+            }
+          )
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs2(
+    "div",
+    {
+      className: `${baseClasses} ${variantClasses} ${sizeClasses} ${className}`,
+      ...props,
+      children: [
+        iconLeft && /* @__PURE__ */ jsx3("span", { className: `${baseClassesIcon} ${sizeClassesIcon}`, children: iconLeft }),
+        children,
+        iconRight && /* @__PURE__ */ jsx3("span", { className: `${baseClassesIcon} ${sizeClassesIcon}`, children: iconRight })
+      ]
+    }
+  );
+};
+
+// src/components/Alert/Alert.tsx
+import { CheckCircle, Info, WarningCircle, XCircle } from "phosphor-react";
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+var VARIANT_ACTION_CLASSES3 = {
+  solid: {
+    default: "bg-background-50 border-transparent",
+    info: "bg-info border-transparent",
+    success: "bg-success border-transparent",
+    warning: "bg-warning border-transparent",
+    error: "bg-error border-transparent"
+  },
+  outline: {
+    default: "bg-background border border-border-100",
+    info: "bg-background border border-border-100",
+    success: "bg-background border border-border-100",
+    warning: "bg-background border border-border-100",
+    error: "bg-background border border-border-100"
+  }
+};
+var COLOR_CLASSES = {
+  default: "text-text-950",
+  info: "text-info-800",
+  success: "text-success-800",
+  warning: "text-warning-800",
+  error: "text-error-800"
+};
+var ICONS = {
+  default: /* @__PURE__ */ jsx4(CheckCircle, { size: 18 }),
+  info: /* @__PURE__ */ jsx4(Info, { size: 18 }),
+  success: /* @__PURE__ */ jsx4(CheckCircle, { size: 18 }),
+  warning: /* @__PURE__ */ jsx4(WarningCircle, { size: 18 }),
+  error: /* @__PURE__ */ jsx4(XCircle, { size: 18 })
+};
+var Alert = ({
+  variant = "solid",
+  title,
+  description,
+  action = "default",
+  className,
+  ...props
+}) => {
+  const baseClasses = "alert-wrapper flex items-start gap-2 w-[384px] py-3 px-4 font-inherit rounded-md";
+  const variantClasses = VARIANT_ACTION_CLASSES3[variant][action];
+  const variantColor = COLOR_CLASSES[action];
+  const variantIcon = ICONS[action];
+  const hasHeading = Boolean(title);
+  return /* @__PURE__ */ jsxs3(
+    "div",
+    {
+      className: `${baseClasses} ${variantClasses} ${className ?? ""}`,
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx4("span", { className: `mt-0.5 ${variantColor}`, children: variantIcon }),
+        /* @__PURE__ */ jsxs3("div", { children: [
+          hasHeading && /* @__PURE__ */ jsx4(
+            Text,
+            {
+              size: "md",
+              weight: "medium",
+              color: variantColor,
+              className: "mb-0.5",
+              children: title
+            }
+          ),
+          /* @__PURE__ */ jsx4(
+            Text,
+            {
+              size: hasHeading ? "sm" : "md",
+              weight: "normal",
+              color: !hasHeading ? variantColor : "text-text-700",
+              children: description
+            }
+          )
+        ] })
+      ]
+    }
+  );
+};
+
+// src/components/IconButton/IconButton.tsx
+import { forwardRef } from "react";
+import { jsx as jsx5 } from "react/jsx-runtime";
+var IconButton = forwardRef(
+  ({ icon, size = "md", active = false, className = "", disabled, ...props }, ref) => {
+    const baseClasses = [
+      "inline-flex",
+      "items-center",
+      "justify-center",
+      "rounded-lg",
+      "font-medium",
+      "bg-transparent",
+      "text-text-950",
+      "cursor-pointer",
+      "hover:bg-primary-600",
+      "hover:text-text",
+      "focus-visible:outline-none",
+      "focus-visible:ring-2",
+      "focus-visible:ring-offset-0",
+      "focus-visible:ring-indicator-info",
+      "disabled:opacity-50",
+      "disabled:cursor-not-allowed",
+      "disabled:pointer-events-none"
+    ];
+    const sizeClasses = {
+      sm: ["w-6", "h-6", "text-sm"],
+      md: ["w-10", "h-10", "text-base"]
+    };
+    const activeClasses = active ? ["!bg-primary-50", "!text-primary-950", "hover:!bg-primary-100"] : [];
+    const allClasses = [
+      ...baseClasses,
+      ...sizeClasses[size],
+      ...activeClasses
+    ].join(" ");
+    const ariaLabel = props["aria-label"] ?? "Bot\xE3o de a\xE7\xE3o";
+    return /* @__PURE__ */ jsx5(
+      "button",
+      {
+        ref,
+        type: "button",
+        className: `${allClasses} ${className}`,
+        disabled,
+        "aria-pressed": active,
+        "aria-label": ariaLabel,
+        ...props,
+        children: /* @__PURE__ */ jsx5("span", { className: "flex items-center justify-center", children: icon })
+      }
+    );
+  }
+);
+IconButton.displayName = "IconButton";
+
+// src/components/IconRoundedButton/IconRoundedButton.tsx
+import { jsx as jsx6 } from "react/jsx-runtime";
+var IconRoundedButton = ({
+  icon,
+  className = "",
+  disabled,
+  ...props
+}) => {
+  const baseClasses = [
+    "inline-flex",
+    "items-center",
+    "justify-center",
+    "w-8",
+    "h-8",
+    "rounded-full",
+    "cursor-pointer",
+    "border",
+    "border-background-200",
+    "bg-background",
+    "text-text-950",
+    "hover:shadow-hard-shadow-1",
+    "focus-visible:outline-none",
+    "focus-visible:shadow-hard-shadow-1",
+    "focus-visible:ring-2",
+    "focus-visible:ring-indicator-info",
+    "focus-visible:ring-offset-0",
+    "disabled:opacity-50",
+    "disabled:cursor-not-allowed"
+  ].join(" ");
+  return /* @__PURE__ */ jsx6(
+    "button",
+    {
+      type: "button",
+      className: `${baseClasses} ${className}`,
+      disabled,
+      ...props,
+      children: /* @__PURE__ */ jsx6("span", { className: "flex items-center justify-center w-5 h-5", children: icon })
+    }
+  );
+};
+
+// src/components/NavButton/NavButton.tsx
+import { forwardRef as forwardRef2 } from "react";
+import { jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
+var NavButton = forwardRef2(
+  ({ icon, label, selected = false, className = "", disabled, ...props }, ref) => {
+    const baseClasses = [
+      "flex",
+      "flex-col",
+      "items-center",
+      "justify-center",
+      "gap-0.5",
+      "px-12",
+      "py-1",
+      "rounded-sm",
+      "cursor-pointer",
+      "text-text-950",
+      "text-xs",
+      "font-medium",
+      "hover:text-text",
+      "hover:bg-primary-600",
+      "focus-visible:outline-none",
+      "focus-visible:ring-2",
+      "focus-visible:ring-offset-0",
+      "focus-visible:ring-indicator-info",
+      "disabled:opacity-50",
+      "disabled:cursor-not-allowed",
+      "disabled:pointer-events-none"
+    ];
+    const stateClasses = selected ? ["bg-primary-50", "text-primary-950"] : [];
+    const allClasses = [...baseClasses, ...stateClasses].join(" ");
     return /* @__PURE__ */ jsxs4(
-      "div",
+      "button",
       {
-        className: `${baseClasses} ${variantClasses} ${sizeClasses} ${className}`,
+        ref,
+        type: "button",
+        className: `${allClasses} ${className}`,
+        disabled,
+        "aria-pressed": selected,
         ...props,
         children: [
-          /* @__PURE__ */ jsx6(Bell, { size: 24, className: "text-primary-950" }),
-          notificationActive && /* @__PURE__ */ jsx6(
-            "span",
-            {
-              "data-testid": "notification-dot",
-              className: "absolute top-[5px] right-[10px] block h-2 w-2 rounded-full bg-indicator-error ring-2 ring-white"
-            }
-          )
+          /* @__PURE__ */ jsx7("span", { className: "flex items-center justify-center w-5 h-5", children: icon }),
+          /* @__PURE__ */ jsx7("span", { className: "whitespace-nowrap", children: label })
         ]
       }
     );
   }
-  return /* @__PURE__ */ jsxs4(
-    "div",
+);
+NavButton.displayName = "NavButton";
+
+// src/components/SelectionButton/SelectionButton.tsx
+import { forwardRef as forwardRef3 } from "react";
+import { jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
+var SelectionButton = forwardRef3(
+  ({ icon, label, selected = false, className = "", disabled, ...props }, ref) => {
+    const baseClasses = [
+      "inline-flex",
+      "items-center",
+      "justify-start",
+      "gap-2",
+      "p-4",
+      "rounded-xl",
+      "cursor-pointer",
+      "border",
+      "border-border-50",
+      "bg-background",
+      "text-sm",
+      "text-text-700",
+      "font-bold",
+      "shadow-soft-shadow-1",
+      "hover:bg-background-100",
+      "focus-visible:outline-none",
+      "focus-visible:ring-2",
+      "focus-visible:ring-indicator-info",
+      "focus-visible:ring-offset-0",
+      "focus-visible:shadow-none",
+      "active:ring-2",
+      "active:ring-primary-950",
+      "active:ring-offset-0",
+      "active:shadow-none",
+      "disabled:opacity-50",
+      "disabled:cursor-not-allowed"
+    ];
+    const stateClasses = selected ? ["ring-primary-950", "ring-2", "ring-offset-0", "shadow-none"] : [];
+    const allClasses = [...baseClasses, ...stateClasses].join(" ");
+    return /* @__PURE__ */ jsxs5(
+      "button",
+      {
+        ref,
+        type: "button",
+        className: `${allClasses} ${className}`,
+        disabled,
+        "aria-pressed": selected,
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx8("span", { className: "flex items-center justify-center w-6 h-6", children: icon }),
+          /* @__PURE__ */ jsx8("span", { children: label })
+        ]
+      }
+    );
+  }
+);
+SelectionButton.displayName = "SelectionButton";
+
+// src/components/Table/Table.tsx
+import { forwardRef as forwardRef4 } from "react";
+import { jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
+var Table = forwardRef4(
+  ({ className, children, ...props }, ref) => /* @__PURE__ */ jsx9("div", { className: "border border-border-200 rounded-xl relative w-full overflow-hidden", children: /* @__PURE__ */ jsxs6(
+    "table",
     {
-      className: `${baseClasses} ${variantClasses} ${sizeClasses} ${className}`,
+      ref,
+      className: `w-full caption-bottom text-sm ${className ?? ""}`,
       ...props,
       children: [
-        iconLeft && /* @__PURE__ */ jsx6("span", { className: `${baseClassesIcon} ${sizeClassesIcon}`, children: iconLeft }),
-        children,
-        iconRight && /* @__PURE__ */ jsx6("span", { className: `${baseClassesIcon} ${sizeClassesIcon}`, children: iconRight })
+        /* @__PURE__ */ jsx9("caption", { className: "sr-only", children: "My Table" }),
+        children
       ]
     }
-  );
+  ) })
+);
+Table.displayName = "Table";
+var TableHeader = forwardRef4(({ className, ...props }, ref) => /* @__PURE__ */ jsx9(
+  "thead",
+  {
+    ref,
+    className: `[&_tr:first-child]:border-0 ${className}`,
+    ...props
+  }
+));
+TableHeader.displayName = "TableHeader";
+var TableBody = forwardRef4(({ className, ...props }, ref) => /* @__PURE__ */ jsx9(
+  "tbody",
+  {
+    ref,
+    className: `[&_tr:last-child]:border-0 border-t border-border-200 ${className}`,
+    ...props
+  }
+));
+TableBody.displayName = "TableBody";
+var TableFooter = forwardRef4(({ className, ...props }, ref) => /* @__PURE__ */ jsx9(
+  "tfoot",
+  {
+    ref,
+    className: `border-t bg-background-50 border-border-200 font-medium [&>tr]:last:border-b-0 px-6 py-3.5 ${className}`,
+    ...props
+  }
+));
+TableFooter.displayName = "TableFooter";
+var VARIANT_STATES_ROW = {
+  default: "border-b border-border-200",
+  selected: "border-b-2 border-indicator-primary",
+  invalid: "border-b-2 border-indicator-error",
+  disabled: "border-b border-border-100 bg-background-50 opacity-50 cursor-not-allowed"
 };
+var TableRow = forwardRef4(
+  ({ state = "default", className, ...props }, ref) => {
+    return /* @__PURE__ */ jsx9(
+      "tr",
+      {
+        ref,
+        className: `
+        transition-colors
+        ${state !== "disabled" ? "hover:bg-muted/50" : ""}
+        ${VARIANT_STATES_ROW[state]}
+        ${className}
+      `,
+        "aria-disabled": state === "disabled",
+        ...props
+      }
+    );
+  }
+);
+TableRow.displayName = "TableRow";
+var TableHead = forwardRef4(({ className, ...props }, ref) => /* @__PURE__ */ jsx9(
+  "th",
+  {
+    ref,
+    className: `h-10 px-6 py-3.5 bg-bg-secondary bg-muted/50 text-left align-middle font-bold text-text-800 [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px] ${className}`,
+    ...props
+  }
+));
+TableHead.displayName = "TableHead";
+var TableCell = forwardRef4(({ className, ...props }, ref) => /* @__PURE__ */ jsx9(
+  "td",
+  {
+    ref,
+    className: `p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px] text-md text-text-800 px-6 py-3.5 ${className}`,
+    ...props
+  }
+));
+TableCell.displayName = "TableCell";
+var TableCaption = forwardRef4(({ className, ...props }, ref) => /* @__PURE__ */ jsx9(
+  "caption",
+  {
+    ref,
+    className: `border-t border-border-200 text-sm text-text-800 px-6 py-3.5 ${className}`,
+    ...props
+  }
+));
+TableCaption.displayName = "TableCaption";
 
 // src/components/CheckBox/CheckBox.tsx
 import {
-  forwardRef as forwardRef3,
-  useState as useState2,
-  useId as useId2
+  forwardRef as forwardRef5,
+  useState,
+  useId
 } from "react";
 import { Check, Minus } from "phosphor-react";
-import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
-var SIZE_CLASSES4 = {
+import { jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
+var SIZE_CLASSES3 = {
   small: {
     checkbox: "w-4 h-4",
     // 16px x 16px
@@ -470,7 +613,7 @@ var SIZE_CLASSES4 = {
   }
 };
 var BASE_CHECKBOX_CLASSES = "rounded border cursor-pointer transition-all duration-200 flex items-center justify-center focus:outline-none";
-var STATE_CLASSES2 = {
+var STATE_CLASSES = {
   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"
@@ -492,7 +635,7 @@ var STATE_CLASSES2 = {
     checked: "border-primary-600 bg-primary-600 text-text cursor-not-allowed opacity-40"
   }
 };
-var CheckBox = forwardRef3(
+var CheckBox = forwardRef5(
   ({
     label,
     size = "medium",
@@ -508,9 +651,9 @@ var CheckBox = forwardRef3(
     onChange,
     ...props
   }, ref) => {
-    const generatedId = useId2();
+    const generatedId = useId();
     const inputId = id ?? `checkbox-${generatedId}`;
-    const [internalChecked, setInternalChecked] = useState2(false);
+    const [internalChecked, setInternalChecked] = useState(false);
     const isControlled = checkedProp !== void 0;
     const checked = isControlled ? checkedProp : internalChecked;
     const handleChange = (event) => {
@@ -520,14 +663,14 @@ var CheckBox = forwardRef3(
       onChange?.(event);
     };
     const currentState = disabled ? "disabled" : state;
-    const sizeClasses = SIZE_CLASSES4[size];
+    const sizeClasses = SIZE_CLASSES3[size];
     const checkVariant = checked || indeterminate ? "checked" : "unchecked";
-    const stylingClasses = STATE_CLASSES2[currentState][checkVariant];
+    const stylingClasses = STATE_CLASSES[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__ */ jsx7(
+        return /* @__PURE__ */ jsx10(
           Minus,
           {
             size: sizeClasses.iconSize,
@@ -537,7 +680,7 @@ var CheckBox = forwardRef3(
         );
       }
       if (checked) {
-        return /* @__PURE__ */ jsx7(
+        return /* @__PURE__ */ jsx10(
           Check,
           {
             size: sizeClasses.iconSize,
@@ -548,13 +691,13 @@ var CheckBox = forwardRef3(
       }
       return null;
     };
-    return /* @__PURE__ */ jsxs5("div", { className: "flex flex-col", children: [
-      /* @__PURE__ */ jsxs5(
+    return /* @__PURE__ */ jsxs7("div", { className: "flex flex-col", children: [
+      /* @__PURE__ */ jsxs7(
         "div",
         {
           className: `flex flex-row items-center ${sizeClasses.spacing} ${disabled ? "opacity-40" : ""}`,
           children: [
-            /* @__PURE__ */ jsx7(
+            /* @__PURE__ */ jsx10(
               "input",
               {
                 ref,
@@ -567,12 +710,12 @@ var CheckBox = forwardRef3(
                 ...props
               }
             ),
-            /* @__PURE__ */ jsx7("label", { htmlFor: inputId, className: checkboxClasses, children: renderIcon() }),
-            label && /* @__PURE__ */ jsx7(
+            /* @__PURE__ */ jsx10("label", { htmlFor: inputId, className: checkboxClasses, children: renderIcon() }),
+            label && /* @__PURE__ */ jsx10(
               "div",
               {
                 className: `flex flex-row items-center ${sizeClasses.labelHeight}`,
-                children: /* @__PURE__ */ jsx7(
+                children: /* @__PURE__ */ jsx10(
                   Text,
                   {
                     as: "label",
@@ -588,128 +731,165 @@ var CheckBox = forwardRef3(
           ]
         }
       ),
-      errorMessage && /* @__PURE__ */ jsx7(
+      errorMessage && /* @__PURE__ */ jsx10(
+        Text,
+        {
+          size: "sm",
+          weight: "normal",
+          className: "mt-1.5",
+          color: "text-error-600",
+          children: errorMessage
+        }
+      ),
+      helperText && !errorMessage && /* @__PURE__ */ jsx10(
+        Text,
+        {
+          size: "sm",
+          weight: "normal",
+          className: "mt-1.5",
+          color: "text-text-500",
+          children: helperText
+        }
+      )
+    ] });
+  }
+);
+CheckBox.displayName = "CheckBox";
+
+// src/components/TextArea/TextArea.tsx
+import {
+  forwardRef as forwardRef6,
+  useState as useState2,
+  useId as useId2
+} from "react";
+import { jsx as jsx11, jsxs as jsxs8 } from "react/jsx-runtime";
+var SIZE_CLASSES4 = {
+  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_CLASSES2 = {
+  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 = forwardRef6(
+  ({
+    label,
+    size = "medium",
+    state = "default",
+    errorMessage,
+    helperMessage,
+    className = "",
+    labelClassName = "",
+    disabled,
+    id,
+    onChange,
+    placeholder,
+    ...props
+  }, ref) => {
+    const generatedId = useId2();
+    const inputId = id ?? `textarea-${generatedId}`;
+    const [isFocused, setIsFocused] = useState2(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_CLASSES4[size];
+    const stateClasses = STATE_CLASSES2[currentState];
+    const textareaClasses = `${BASE_TEXTAREA_CLASSES} ${sizeClasses.textarea} ${stateClasses.base} ${stateClasses.hover} ${stateClasses.focus} ${className}`;
+    return /* @__PURE__ */ jsxs8("div", { className: `flex flex-col ${sizeClasses.container}`, children: [
+      label && /* @__PURE__ */ jsx11(
         Text,
         {
-          size: "sm",
-          weight: "normal",
-          className: "mt-1.5",
-          color: "text-error-600",
-          children: errorMessage
+          as: "label",
+          htmlFor: inputId,
+          size: sizeClasses.textSize,
+          weight: "medium",
+          color: "text-text-950",
+          className: `mb-1.5 ${labelClassName}`,
+          children: label
         }
       ),
-      helperText && !errorMessage && /* @__PURE__ */ jsx7(
-        Text,
+      /* @__PURE__ */ jsx11(
+        "textarea",
         {
-          size: "sm",
-          weight: "normal",
-          className: "mt-1.5",
-          color: "text-text-500",
-          children: helperText
+          ref,
+          id: inputId,
+          disabled,
+          onChange: handleChange,
+          onFocus: handleFocus,
+          onBlur: handleBlur,
+          className: textareaClasses,
+          placeholder,
+          ...props
         }
-      )
+      ),
+      errorMessage && /* @__PURE__ */ jsx11(Text, { size: "sm", weight: "normal", className: "mt-1.5 text-error-600", children: errorMessage }),
+      helperMessage && !errorMessage && /* @__PURE__ */ jsx11(Text, { size: "sm", weight: "normal", className: "mt-1.5 text-text-500", children: helperMessage })
     ] });
   }
 );
-CheckBox.displayName = "CheckBox";
-
-// src/components/Table/Table.tsx
-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__ */ jsx8("caption", { className: "sr-only", children: "My Table" }),
-        children
-      ]
-    }
-  ) })
-);
-Table.displayName = "Table";
-var TableHeader = forwardRef4(({ className, ...props }, ref) => /* @__PURE__ */ jsx8(
-  "thead",
-  {
-    ref,
-    className: `[&_tr:first-child]:border-0 ${className}`,
-    ...props
-  }
-));
-TableHeader.displayName = "TableHeader";
-var TableBody = forwardRef4(({ className, ...props }, ref) => /* @__PURE__ */ jsx8(
-  "tbody",
-  {
-    ref,
-    className: `[&_tr:last-child]:border-0 border-t border-border-200 ${className}`,
-    ...props
-  }
-));
-TableBody.displayName = "TableBody";
-var TableFooter = forwardRef4(({ className, ...props }, ref) => /* @__PURE__ */ jsx8(
-  "tfoot",
-  {
-    ref,
-    className: `border-t bg-background-50 border-border-200 font-medium [&>tr]:last:border-b-0 px-6 py-3.5 ${className}`,
-    ...props
-  }
-));
-TableFooter.displayName = "TableFooter";
-var VARIANT_STATES_ROW = {
-  default: "border-b border-border-200",
-  selected: "border-b-2 border-indicator-primary",
-  invalid: "border-b-2 border-indicator-error",
-  disabled: "border-b border-border-100 bg-background-50 opacity-50 cursor-not-allowed"
-};
-var TableRow = forwardRef4(
-  ({ state = "default", className, ...props }, ref) => {
-    return /* @__PURE__ */ jsx8(
-      "tr",
-      {
-        ref,
-        className: `
-        transition-colors
-        ${state !== "disabled" ? "hover:bg-muted/50" : ""}
-        ${VARIANT_STATES_ROW[state]}
-        ${className}
-      `,
-        "aria-disabled": state === "disabled",
-        ...props
-      }
-    );
-  }
-);
-TableRow.displayName = "TableRow";
-var TableHead = forwardRef4(({ className, ...props }, ref) => /* @__PURE__ */ jsx8(
-  "th",
-  {
-    ref,
-    className: `h-10 px-6 py-3.5 bg-bg-secondary bg-muted/50 text-left align-middle font-bold text-text-800 [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px] ${className}`,
-    ...props
-  }
-));
-TableHead.displayName = "TableHead";
-var TableCell = forwardRef4(({ className, ...props }, ref) => /* @__PURE__ */ jsx8(
-  "td",
-  {
-    ref,
-    className: `p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px] text-md text-text-800 px-6 py-3.5 ${className}`,
-    ...props
-  }
-));
-TableCell.displayName = "TableCell";
-var TableCaption = forwardRef4(({ className, ...props }, ref) => /* @__PURE__ */ jsx8(
-  "caption",
-  {
-    ref,
-    className: `border-t border-border-200 text-sm text-text-800 px-6 py-3.5 ${className}`,
-    ...props
-  }
-));
-TableCaption.displayName = "TableCaption";
+TextArea.displayName = "TextArea";
 
 // src/components/DropdownMenu/DropdownMenu.tsx
 import {
@@ -717,12 +897,12 @@ import {
   useState as useState3,
   useCallback,
   useContext,
-  forwardRef as forwardRef5,
+  forwardRef as forwardRef7,
   useEffect,
   useRef,
   useMemo
 } from "react";
-import { jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx12, jsxs as jsxs9 } from "react/jsx-runtime";
 var DropdownMenuContext = createContext(
   void 0
 );
@@ -785,14 +965,14 @@ var DropdownMenu = ({ children, open, onOpenChange }) => {
     () => ({ open: currentOpen, setOpen }),
     [currentOpen, setOpen]
   );
-  return /* @__PURE__ */ jsx9(DropdownMenuContext.Provider, { value, children: /* @__PURE__ */ jsx9("div", { className: "relative", ref: menuRef, children }) });
+  return /* @__PURE__ */ jsx12(DropdownMenuContext.Provider, { value, children: /* @__PURE__ */ jsx12("div", { className: "relative", ref: menuRef, children }) });
 };
-var DropdownMenuTrigger = forwardRef5(({ className, children, onClick, ...props }, ref) => {
+var DropdownMenuTrigger = forwardRef7(({ 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__ */ jsx9(
+  return /* @__PURE__ */ jsx12(
     "button",
     {
       ref,
@@ -824,7 +1004,7 @@ var ALIGN_CLASSES = {
   center: "left-1/2 -translate-x-1/2",
   end: "right-0"
 };
-var MenuLabel = forwardRef5(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx9(
+var MenuLabel = forwardRef7(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx12(
   "fieldset",
   {
     ref,
@@ -834,7 +1014,7 @@ var MenuLabel = forwardRef5(({ className, inset, ...props }, ref) => /* @__PURE_
   }
 ));
 MenuLabel.displayName = "MenuLabel";
-var MenuContent = forwardRef5(
+var MenuContent = forwardRef7(
   ({
     className,
     align = "start",
@@ -859,7 +1039,7 @@ var MenuContent = forwardRef5(
       const horizontal = ALIGN_CLASSES[align];
       return `absolute ${vertical} ${horizontal}`;
     };
-    return /* @__PURE__ */ jsx9(
+    return /* @__PURE__ */ jsx12(
       "div",
       {
         ref,
@@ -883,7 +1063,7 @@ var MenuContent = forwardRef5(
   }
 );
 MenuContent.displayName = "MenuContent";
-var MenuItem = forwardRef5(
+var MenuItem = forwardRef7(
   ({
     className,
     inset,
@@ -904,7 +1084,7 @@ var MenuItem = forwardRef5(
       }
       onClick?.(e);
     };
-    return /* @__PURE__ */ jsxs7(
+    return /* @__PURE__ */ jsxs9(
       "div",
       {
         ref,
@@ -934,7 +1114,7 @@ var MenuItem = forwardRef5(
   }
 );
 MenuItem.displayName = "MenuItem";
-var MenuSeparator = forwardRef5(({ className, ...props }, ref) => /* @__PURE__ */ jsx9(
+var MenuSeparator = forwardRef7(({ className, ...props }, ref) => /* @__PURE__ */ jsx12(
   "div",
   {
     ref,
@@ -944,111 +1124,10 @@ var MenuSeparator = forwardRef5(({ className, ...props }, ref) => /* @__PURE__ *
 ));
 MenuSeparator.displayName = "MenuSeparator";
 
-// src/components/NavButton/NavButton.tsx
-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",
-      "flex-col",
-      "items-center",
-      "justify-center",
-      "gap-0.5",
-      "px-12",
-      "py-1",
-      "rounded-sm",
-      "cursor-pointer",
-      "text-text-950",
-      "text-xs",
-      "font-medium",
-      "hover:text-text",
-      "hover:bg-primary-600",
-      "focus-visible:outline-none",
-      "focus-visible:ring-2",
-      "focus-visible:ring-offset-0",
-      "focus-visible:ring-indicator-info",
-      "disabled:opacity-50",
-      "disabled:cursor-not-allowed",
-      "disabled:pointer-events-none"
-    ];
-    const stateClasses = selected ? ["bg-primary-50", "text-primary-950"] : [];
-    const allClasses = [...baseClasses, ...stateClasses].join(" ");
-    return /* @__PURE__ */ jsxs8(
-      "button",
-      {
-        ref,
-        type: "button",
-        className: `${allClasses} ${className}`,
-        disabled,
-        "aria-pressed": selected,
-        ...props,
-        children: [
-          /* @__PURE__ */ jsx10("span", { className: "flex items-center justify-center w-5 h-5", children: icon }),
-          /* @__PURE__ */ jsx10("span", { className: "whitespace-nowrap", children: label })
-        ]
-      }
-    );
-  }
-);
-NavButton.displayName = "NavButton";
-
-// src/components/IconButton/IconButton.tsx
-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",
-      "items-center",
-      "justify-center",
-      "rounded-lg",
-      "font-medium",
-      "bg-transparent",
-      "text-text-950",
-      "cursor-pointer",
-      "hover:bg-primary-600",
-      "hover:text-text",
-      "focus-visible:outline-none",
-      "focus-visible:ring-2",
-      "focus-visible:ring-offset-0",
-      "focus-visible:ring-indicator-info",
-      "disabled:opacity-50",
-      "disabled:cursor-not-allowed",
-      "disabled:pointer-events-none"
-    ];
-    const sizeClasses = {
-      sm: ["w-6", "h-6", "text-sm"],
-      md: ["w-10", "h-10", "text-base"]
-    };
-    const activeClasses = active ? ["!bg-primary-50", "!text-primary-950", "hover:!bg-primary-100"] : [];
-    const allClasses = [
-      ...baseClasses,
-      ...sizeClasses[size],
-      ...activeClasses
-    ].join(" ");
-    const ariaLabel = props["aria-label"] ?? "Bot\xE3o de a\xE7\xE3o";
-    return /* @__PURE__ */ jsx11(
-      "button",
-      {
-        ref,
-        type: "button",
-        className: `${allClasses} ${className}`,
-        disabled,
-        "aria-pressed": active,
-        "aria-label": ariaLabel,
-        ...props,
-        children: /* @__PURE__ */ jsx11("span", { className: "flex items-center justify-center", children: icon })
-      }
-    );
-  }
-);
-IconButton.displayName = "IconButton";
-
 // src/components/Toast/Toast.tsx
-import { CheckCircle, WarningCircle, Info, X } from "phosphor-react";
-import { jsx as jsx12, jsxs as jsxs9 } from "react/jsx-runtime";
-var VARIANT_ACTION_CLASSES3 = {
+import { CheckCircle as CheckCircle2, WarningCircle as WarningCircle2, Info as Info2, X } from "phosphor-react";
+import { jsx as jsx13, jsxs as jsxs10 } from "react/jsx-runtime";
+var VARIANT_ACTION_CLASSES4 = {
   solid: {
     warning: "bg-warning text-warning-800 border-none focus-visible:outline-none",
     success: "bg-success text-success-800 border-none focus-visible:outline-none",
@@ -1061,9 +1140,9 @@ var VARIANT_ACTION_CLASSES3 = {
   }
 };
 var iconMap = {
-  success: CheckCircle,
-  info: Info,
-  warning: WarningCircle
+  success: CheckCircle2,
+  info: Info2,
+  warning: WarningCircle2
 };
 var Toast = ({
   variant = "outlined",
@@ -1075,7 +1154,7 @@ var Toast = ({
   position = "default",
   ...props
 }) => {
-  const variantClasses = VARIANT_ACTION_CLASSES3[variant][action];
+  const variantClasses = VARIANT_ACTION_CLASSES4[variant][action];
   const positionClasses = {
     "top-left": "fixed top-4 left-4",
     "top-center": "fixed top-4 left-1/2 transform -translate-x-1/2",
@@ -1087,7 +1166,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__ */ jsxs9(
+  return /* @__PURE__ */ jsxs10(
     "div",
     {
       role: "alert",
@@ -1096,20 +1175,20 @@ var Toast = ({
       className: `${baseClasses} ${positionClasses[position]} ${variantClasses} ${className}`,
       ...props,
       children: [
-        /* @__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__ */ jsxs10("div", { className: "flex flex-row items-start gap-3", children: [
+          /* @__PURE__ */ jsx13("span", { className: "mt-1", "data-testid": `toast-icon-${action}`, children: /* @__PURE__ */ jsx13(IconAction, {}) }),
+          /* @__PURE__ */ jsxs10("div", { className: "flex flex-col items-start justify-start", children: [
+            /* @__PURE__ */ jsx13("p", { className: "font-semibold text-md", children: title }),
+            description && /* @__PURE__ */ jsx13("p", { className: "text-md text-text-900", children: description })
           ] })
         ] }),
-        /* @__PURE__ */ jsx12(
+        /* @__PURE__ */ jsx13(
           "button",
           {
             onClick: onClose,
             "aria-label": "Dismiss notification",
             className: "text-background-500 cursor-pointer opacity-0 group-hover:opacity-100 transition-opacity",
-            children: /* @__PURE__ */ jsx12(X, {})
+            children: /* @__PURE__ */ jsx13(X, {})
           }
         )
       ]
@@ -1135,11 +1214,11 @@ var useToastStore = create((set) => ({
 }));
 
 // src/components/Toast/utils/Toaster.tsx
-import { Fragment, jsx as jsx13 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx14 } from "react/jsx-runtime";
 var Toaster = () => {
   const toasts = useToastStore((state) => state.toasts);
   const removeToast = useToastStore((state) => state.removeToast);
-  return /* @__PURE__ */ jsx13(Fragment, { children: toasts.map((toast) => /* @__PURE__ */ jsx13(
+  return /* @__PURE__ */ jsx14(Fragment, { children: toasts.map((toast) => /* @__PURE__ */ jsx14(
     Toast,
     {
       title: toast.title,
@@ -1152,37 +1231,25 @@ var Toaster = () => {
     toast.id
   )) });
 };
-var useToast = () => {
-  const addToast = useToastStore((state) => state.addToast);
-  const removeToast = useToastStore((state) => state.removeToast);
-  return { addToast, removeToast };
-};
 export {
+  Alert,
   Badge,
   Button,
   CheckBox,
   DropdownMenu,
+  MenuContent as DropdownMenuContent,
+  MenuItem as DropdownMenuItem,
+  MenuLabel as DropdownMenuLabel,
+  MenuSeparator as DropdownMenuSeparator,
   DropdownMenuTrigger,
   IconButton,
   IconRoundedButton,
-  MenuContent,
-  MenuItem,
-  MenuLabel,
-  MenuSeparator,
   NavButton,
   SelectionButton,
   Table,
-  TableBody,
-  TableCaption,
-  TableCell,
-  TableFooter,
-  TableHead,
-  TableHeader,
-  TableRow,
   Text,
   TextArea,
   Toast,
   Toaster,
-  useToast,
   useToastStore
 };