analytica-frontend-lib 1.0.24 → 1.0.26

package/dist/index.js

@@ -1,46 +1,11 @@
-"use strict";
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+'use strict';
 
-// src/index.ts
-var index_exports = {};
-__export(index_exports, {
-  Alert: () => Alert,
-  Badge: () => Badge,
-  Button: () => Button,
-  IconButton: () => IconButton,
-  IconRoundedButton: () => IconRoundedButton,
-  NavButton: () => NavButton,
-  SelectionButton: () => SelectionButton,
-  Table: () => Table,
-  TableBody: () => TableBody,
-  TableCaption: () => TableCaption,
-  TableCell: () => TableCell,
-  TableFooter: () => TableFooter,
-  TableHead: () => TableHead,
-  TableHeader: () => TableHeader,
-  TableRow: () => TableRow,
-  Text: () => Text
-});
-module.exports = __toCommonJS(index_exports);
+var jsxRuntime = require('react/jsx-runtime');
+var phosphorReact = require('phosphor-react');
+var react = require('react');
+var zustand = require('zustand');
 
 // src/components/Text/Text.tsx
-var import_jsx_runtime = require("react/jsx-runtime");
 var Text = ({
   children,
   size = "md",
@@ -79,7 +44,7 @@ var Text = ({
   weightClasses = weightClassMap[weight] ?? weightClassMap.normal;
   const baseClasses = "font-primary";
   const Component = as ?? "p";
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+  return /* @__PURE__ */ jsxRuntime.jsx(
     Component,
     {
       className: `${baseClasses} ${sizeClasses} ${weightClasses} ${color} ${className}`,
@@ -88,9 +53,6 @@ var Text = ({
     }
   );
 };
-
-// src/components/Button/Button.tsx
-var import_jsx_runtime2 = require("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",
@@ -130,7 +92,7 @@ var Button = ({
   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__ */ (0, import_jsx_runtime2.jsxs)(
+  return /* @__PURE__ */ jsxRuntime.jsxs(
     "button",
     {
       className: `${baseClasses} ${variantClasses} ${sizeClasses} ${className}`,
@@ -138,17 +100,13 @@ var Button = ({
       type,
       ...props,
       children: [
-        iconLeft && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "mr-2 flex items-center", children: iconLeft }),
+        iconLeft && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mr-2 flex items-center", children: iconLeft }),
         children,
-        iconRight && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "ml-2 flex items-center", children: iconRight })
+        iconRight && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-2 flex items-center", children: iconRight })
       ]
     }
   );
 };
-
-// src/components/Badge/Badge.tsx
-var import_phosphor_react = require("phosphor-react");
-var import_jsx_runtime3 = require("react/jsx-runtime");
 var VARIANT_ACTION_CLASSES2 = {
   solid: {
     error: "bg-error text-error-700 focus-visible:outline-none",
@@ -165,7 +123,7 @@ var VARIANT_ACTION_CLASSES2 = {
     muted: "bg-background-muted text-background-800 border border-border-300 focus-visible:outline-none"
   },
   exams: {
-    exam1: "bg-exam-1 text-info-200 focus-visible:outline-none",
+    exam1: "bg-exam-1 text-info-700 focus-visible:outline-none",
     exam2: "bg-exam-2 text-typography-1 focus-visible:outline-none",
     exam3: "bg-exam-3 text-typography-2 focus-visible:outline-none",
     exam4: "bg-exam-4 text-success-700 focus-visible:outline-none"
@@ -201,17 +159,17 @@ var Badge = ({
   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 baseClasses = "inline-flex items-center justify-center rounded-xs font-normal gap-1 relative";
   const baseClassesIcon = "flex items-center";
   if (variant === "notification") {
-    return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+    return /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
         className: `${baseClasses} ${variantClasses} ${sizeClasses} ${className}`,
         ...props,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_phosphor_react.Bell, { size: 24, className: "text-primary-950" }),
-          notificationActive && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          /* @__PURE__ */ jsxRuntime.jsx(phosphorReact.Bell, { size: 24, className: "text-primary-950" }),
+          notificationActive && /* @__PURE__ */ jsxRuntime.jsx(
             "span",
             {
               "data-testid": "notification-dot",
@@ -222,23 +180,19 @@ var Badge = ({
       }
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+  return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
       className: `${baseClasses} ${variantClasses} ${sizeClasses} ${className}`,
       ...props,
       children: [
-        iconLeft && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: `${baseClassesIcon} ${sizeClassesIcon}`, children: iconLeft }),
+        iconLeft && /* @__PURE__ */ jsxRuntime.jsx("span", { className: `${baseClassesIcon} ${sizeClassesIcon}`, children: iconLeft }),
         children,
-        iconRight && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: `${baseClassesIcon} ${sizeClassesIcon}`, children: iconRight })
+        iconRight && /* @__PURE__ */ jsxRuntime.jsx("span", { className: `${baseClassesIcon} ${sizeClassesIcon}`, children: iconRight })
       ]
     }
   );
 };
-
-// src/components/Alert/Alert.tsx
-var import_phosphor_react2 = require("phosphor-react");
-var import_jsx_runtime4 = require("react/jsx-runtime");
 var VARIANT_ACTION_CLASSES3 = {
   solid: {
     default: "bg-background-50 border-transparent",
@@ -263,11 +217,11 @@ var COLOR_CLASSES = {
   error: "text-error-800"
 };
 var ICONS = {
-  default: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_phosphor_react2.CheckCircle, { size: 18 }),
-  info: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_phosphor_react2.Info, { size: 18 }),
-  success: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_phosphor_react2.CheckCircle, { size: 18 }),
-  warning: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_phosphor_react2.WarningCircle, { size: 18 }),
-  error: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_phosphor_react2.XCircle, { size: 18 })
+  default: /* @__PURE__ */ jsxRuntime.jsx(phosphorReact.CheckCircle, { size: 18 }),
+  info: /* @__PURE__ */ jsxRuntime.jsx(phosphorReact.Info, { size: 18 }),
+  success: /* @__PURE__ */ jsxRuntime.jsx(phosphorReact.CheckCircle, { size: 18 }),
+  warning: /* @__PURE__ */ jsxRuntime.jsx(phosphorReact.WarningCircle, { size: 18 }),
+  error: /* @__PURE__ */ jsxRuntime.jsx(phosphorReact.XCircle, { size: 18 })
 };
 var Alert = ({
   variant = "solid",
@@ -282,15 +236,15 @@ var Alert = ({
   const variantColor = COLOR_CLASSES[action];
   const variantIcon = ICONS[action];
   const hasHeading = Boolean(title);
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+  return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
       className: `${baseClasses} ${variantClasses} ${className ?? ""}`,
       ...props,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: `mt-0.5 ${variantColor}`, children: variantIcon }),
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { children: [
-          hasHeading && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: `mt-0.5 ${variantColor}`, children: variantIcon }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+          hasHeading && /* @__PURE__ */ jsxRuntime.jsx(
             Text,
             {
               size: "md",
@@ -300,7 +254,7 @@ var Alert = ({
               children: title
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          /* @__PURE__ */ jsxRuntime.jsx(
             Text,
             {
               size: hasHeading ? "sm" : "md",
@@ -314,11 +268,7 @@ var Alert = ({
     }
   );
 };
-
-// src/components/IconButton/IconButton.tsx
-var import_react = require("react");
-var import_jsx_runtime5 = require("react/jsx-runtime");
-var IconButton = (0, import_react.forwardRef)(
+var IconButton = react.forwardRef(
   ({ icon, size = "md", active = false, className = "", disabled, ...props }, ref) => {
     const baseClasses = [
       "inline-flex",
@@ -350,7 +300,7 @@ var IconButton = (0, import_react.forwardRef)(
       ...activeClasses
     ].join(" ");
     const ariaLabel = props["aria-label"] ?? "Bot\xE3o de a\xE7\xE3o";
-    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    return /* @__PURE__ */ jsxRuntime.jsx(
       "button",
       {
         ref,
@@ -360,15 +310,12 @@ var IconButton = (0, import_react.forwardRef)(
         "aria-pressed": active,
         "aria-label": ariaLabel,
         ...props,
-        children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "flex items-center justify-center", children: icon })
+        children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex items-center justify-center", children: icon })
       }
     );
   }
 );
 IconButton.displayName = "IconButton";
-
-// src/components/IconRoundedButton/IconRoundedButton.tsx
-var import_jsx_runtime6 = require("react/jsx-runtime");
 var IconRoundedButton = ({
   icon,
   className = "",
@@ -396,22 +343,18 @@ var IconRoundedButton = ({
     "disabled:opacity-50",
     "disabled:cursor-not-allowed"
   ].join(" ");
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+  return /* @__PURE__ */ jsxRuntime.jsx(
     "button",
     {
       type: "button",
       className: `${baseClasses} ${className}`,
       disabled,
       ...props,
-      children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "flex items-center justify-center w-5 h-5", children: icon })
+      children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex items-center justify-center w-5 h-5", children: icon })
     }
   );
 };
-
-// src/components/NavButton/NavButton.tsx
-var import_react2 = require("react");
-var import_jsx_runtime7 = require("react/jsx-runtime");
-var NavButton = (0, import_react2.forwardRef)(
+var NavButton = react.forwardRef(
   ({ icon, label, selected = false, className = "", disabled, ...props }, ref) => {
     const baseClasses = [
       "flex",
@@ -438,7 +381,7 @@ var NavButton = (0, import_react2.forwardRef)(
     ];
     const stateClasses = selected ? ["bg-primary-50", "text-primary-950"] : [];
     const allClasses = [...baseClasses, ...stateClasses].join(" ");
-    return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+    return /* @__PURE__ */ jsxRuntime.jsxs(
       "button",
       {
         ref,
@@ -448,19 +391,15 @@ var NavButton = (0, import_react2.forwardRef)(
         "aria-pressed": selected,
         ...props,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "flex items-center justify-center w-5 h-5", children: icon }),
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "whitespace-nowrap", children: label })
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex items-center justify-center w-5 h-5", children: icon }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "whitespace-nowrap", children: label })
         ]
       }
     );
   }
 );
 NavButton.displayName = "NavButton";
-
-// src/components/SelectionButton/SelectionButton.tsx
-var import_react3 = require("react");
-var import_jsx_runtime8 = require("react/jsx-runtime");
-var SelectionButton = (0, import_react3.forwardRef)(
+var SelectionButton = react.forwardRef(
   ({ icon, label, selected = false, className = "", disabled, ...props }, ref) => {
     const baseClasses = [
       "inline-flex",
@@ -492,7 +431,7 @@ var SelectionButton = (0, import_react3.forwardRef)(
     ];
     const stateClasses = selected ? ["ring-primary-950", "ring-2", "ring-offset-0", "shadow-none"] : [];
     const allClasses = [...baseClasses, ...stateClasses].join(" ");
-    return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+    return /* @__PURE__ */ jsxRuntime.jsxs(
       "button",
       {
         ref,
@@ -502,34 +441,30 @@ var SelectionButton = (0, import_react3.forwardRef)(
         "aria-pressed": selected,
         ...props,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "flex items-center justify-center w-6 h-6", children: icon }),
-          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { children: label })
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex items-center justify-center w-6 h-6", children: icon }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { children: label })
         ]
       }
     );
   }
 );
 SelectionButton.displayName = "SelectionButton";
-
-// src/components/Table/Table.tsx
-var import_react4 = require("react");
-var import_jsx_runtime9 = require("react/jsx-runtime");
-var Table = (0, import_react4.forwardRef)(
-  ({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "border border-border-200 rounded-xl relative w-full overflow-hidden", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+var Table = react.forwardRef(
+  ({ className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "border border-border-200 rounded-xl relative w-full overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsxs(
     "table",
     {
       ref,
       className: `w-full caption-bottom text-sm ${className ?? ""}`,
       ...props,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("caption", { className: "sr-only", children: "My Table" }),
+        /* @__PURE__ */ jsxRuntime.jsx("caption", { className: "sr-only", children: "My Table" }),
         children
       ]
     }
   ) })
 );
 Table.displayName = "Table";
-var TableHeader = (0, import_react4.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+var TableHeader = react.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   "thead",
   {
     ref,
@@ -538,7 +473,7 @@ var TableHeader = (0, import_react4.forwardRef)(({ className, ...props }, ref) =
   }
 ));
 TableHeader.displayName = "TableHeader";
-var TableBody = (0, import_react4.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+var TableBody = react.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   "tbody",
   {
     ref,
@@ -547,7 +482,7 @@ var TableBody = (0, import_react4.forwardRef)(({ className, ...props }, ref) =>
   }
 ));
 TableBody.displayName = "TableBody";
-var TableFooter = (0, import_react4.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+var TableFooter = react.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   "tfoot",
   {
     ref,
@@ -562,9 +497,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 = (0, import_react4.forwardRef)(
+var TableRow = react.forwardRef(
   ({ state = "default", className, ...props }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    return /* @__PURE__ */ jsxRuntime.jsx(
       "tr",
       {
         ref,
@@ -581,7 +516,7 @@ var TableRow = (0, import_react4.forwardRef)(
   }
 );
 TableRow.displayName = "TableRow";
-var TableHead = (0, import_react4.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+var TableHead = react.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   "th",
   {
     ref,
@@ -590,7 +525,7 @@ var TableHead = (0, import_react4.forwardRef)(({ className, ...props }, ref) =>
   }
 ));
 TableHead.displayName = "TableHead";
-var TableCell = (0, import_react4.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+var TableCell = react.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   "td",
   {
     ref,
@@ -599,7 +534,7 @@ var TableCell = (0, import_react4.forwardRef)(({ className, ...props }, ref) =>
   }
 ));
 TableCell.displayName = "TableCell";
-var TableCaption = (0, import_react4.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+var TableCaption = react.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   "caption",
   {
     ref,
@@ -608,22 +543,648 @@ var TableCaption = (0, import_react4.forwardRef)(({ className, ...props }, ref)
   }
 ));
 TableCaption.displayName = "TableCaption";
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  Alert,
-  Badge,
-  Button,
-  IconButton,
-  IconRoundedButton,
-  NavButton,
-  SelectionButton,
-  Table,
-  TableBody,
-  TableCaption,
-  TableCell,
-  TableFooter,
-  TableHead,
-  TableHeader,
-  TableRow,
-  Text
+var SIZE_CLASSES3 = {
+  small: {
+    checkbox: "w-4 h-4",
+    // 16px x 16px
+    textSize: "sm",
+    spacing: "gap-1.5",
+    // 6px
+    borderWidth: "border-2",
+    iconSize: 14,
+    // pixels for Phosphor icons
+    labelHeight: "h-[21px]"
+  },
+  medium: {
+    checkbox: "w-5 h-5",
+    // 20px x 20px
+    textSize: "md",
+    spacing: "gap-2",
+    // 8px
+    borderWidth: "border-2",
+    iconSize: 16,
+    // pixels for Phosphor icons
+    labelHeight: "h-6"
+  },
+  large: {
+    checkbox: "w-6 h-6",
+    // 24px x 24px
+    textSize: "lg",
+    spacing: "gap-2",
+    // 8px
+    borderWidth: "border-[3px]",
+    // 3px border
+    iconSize: 20,
+    // pixels for Phosphor icons
+    labelHeight: "h-[27px]"
+  }
+};
+var BASE_CHECKBOX_CLASSES = "rounded border cursor-pointer transition-all duration-200 flex items-center justify-center focus:outline-none";
+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"
+  },
+  hovered: {
+    unchecked: "border-border-500 bg-background",
+    checked: "border-primary-800 bg-primary-800 text-text"
+  },
+  focused: {
+    unchecked: "border-indicator-info bg-background ring-2 ring-indicator-info/20",
+    checked: "border-indicator-info bg-primary-950 text-text ring-2 ring-indicator-info/20"
+  },
+  invalid: {
+    unchecked: "border-error-700 bg-background hover:border-error-600",
+    checked: "border-error-700 bg-primary-950 text-text"
+  },
+  disabled: {
+    unchecked: "border-border-400 bg-background cursor-not-allowed opacity-40",
+    checked: "border-primary-600 bg-primary-600 text-text cursor-not-allowed opacity-40"
+  }
+};
+var CheckBox = react.forwardRef(
+  ({
+    label,
+    size = "medium",
+    state = "default",
+    indeterminate = false,
+    errorMessage,
+    helperText,
+    className = "",
+    labelClassName = "",
+    checked: checkedProp,
+    disabled,
+    id,
+    onChange,
+    ...props
+  }, ref) => {
+    const generatedId = react.useId();
+    const inputId = id ?? `checkbox-${generatedId}`;
+    const [internalChecked, setInternalChecked] = react.useState(false);
+    const isControlled = checkedProp !== void 0;
+    const checked = isControlled ? checkedProp : internalChecked;
+    const handleChange = (event) => {
+      if (!isControlled) {
+        setInternalChecked(event.target.checked);
+      }
+      onChange?.(event);
+    };
+    const currentState = disabled ? "disabled" : state;
+    const sizeClasses = SIZE_CLASSES3[size];
+    const checkVariant = checked || indeterminate ? "checked" : "unchecked";
+    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__ */ jsxRuntime.jsx(
+          phosphorReact.Minus,
+          {
+            size: sizeClasses.iconSize,
+            weight: "bold",
+            color: "currentColor"
+          }
+        );
+      }
+      if (checked) {
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          phosphorReact.Check,
+          {
+            size: sizeClasses.iconSize,
+            weight: "bold",
+            color: "currentColor"
+          }
+        );
+      }
+      return null;
+    };
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          className: `flex flex-row items-center ${sizeClasses.spacing} ${disabled ? "opacity-40" : ""}`,
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "input",
+              {
+                ref,
+                type: "checkbox",
+                id: inputId,
+                checked,
+                disabled,
+                onChange: handleChange,
+                className: "sr-only",
+                ...props
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: inputId, className: checkboxClasses, children: renderIcon() }),
+            label && /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                className: `flex flex-row items-center ${sizeClasses.labelHeight}`,
+                children: /* @__PURE__ */ jsxRuntime.jsx(
+                  Text,
+                  {
+                    as: "label",
+                    htmlFor: inputId,
+                    size: sizeClasses.textSize,
+                    weight: "normal",
+                    className: `cursor-pointer select-none leading-[150%] flex items-center font-roboto ${labelClassName}`,
+                    children: label
+                  }
+                )
+              }
+            )
+          ]
+        }
+      ),
+      errorMessage && /* @__PURE__ */ jsxRuntime.jsx(
+        Text,
+        {
+          size: "sm",
+          weight: "normal",
+          className: "mt-1.5",
+          color: "text-error-600",
+          children: errorMessage
+        }
+      ),
+      helperText && !errorMessage && /* @__PURE__ */ jsxRuntime.jsx(
+        Text,
+        {
+          size: "sm",
+          weight: "normal",
+          className: "mt-1.5",
+          color: "text-text-500",
+          children: helperText
+        }
+      )
+    ] });
+  }
+);
+CheckBox.displayName = "CheckBox";
+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 = react.forwardRef(
+  ({
+    label,
+    size = "medium",
+    state = "default",
+    errorMessage,
+    helperMessage,
+    className = "",
+    labelClassName = "",
+    disabled,
+    id,
+    onChange,
+    placeholder,
+    ...props
+  }, ref) => {
+    const generatedId = react.useId();
+    const inputId = id ?? `textarea-${generatedId}`;
+    const [isFocused, setIsFocused] = react.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_CLASSES4[size];
+    const stateClasses = STATE_CLASSES2[currentState];
+    const textareaClasses = `${BASE_TEXTAREA_CLASSES} ${sizeClasses.textarea} ${stateClasses.base} ${stateClasses.hover} ${stateClasses.focus} ${className}`;
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `flex flex-col ${sizeClasses.container}`, children: [
+      label && /* @__PURE__ */ jsxRuntime.jsx(
+        Text,
+        {
+          as: "label",
+          htmlFor: inputId,
+          size: sizeClasses.textSize,
+          weight: "medium",
+          color: "text-text-950",
+          className: `mb-1.5 ${labelClassName}`,
+          children: label
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "textarea",
+        {
+          ref,
+          id: inputId,
+          disabled,
+          onChange: handleChange,
+          onFocus: handleFocus,
+          onBlur: handleBlur,
+          className: textareaClasses,
+          placeholder,
+          ...props
+        }
+      ),
+      errorMessage && /* @__PURE__ */ jsxRuntime.jsx(Text, { size: "sm", weight: "normal", className: "mt-1.5 text-error-600", children: errorMessage }),
+      helperMessage && !errorMessage && /* @__PURE__ */ jsxRuntime.jsx(Text, { size: "sm", weight: "normal", className: "mt-1.5 text-text-500", children: helperMessage })
+    ] });
+  }
+);
+TextArea.displayName = "TextArea";
+var DropdownMenuContext = react.createContext(
+  void 0
+);
+var DropdownMenu = ({ children, open, onOpenChange }) => {
+  const [internalOpen, setInternalOpen] = react.useState(false);
+  const isControlled = open !== void 0;
+  const currentOpen = isControlled ? open : internalOpen;
+  const setOpen = react.useCallback(
+    (newOpen) => {
+      if (onOpenChange) onOpenChange(newOpen);
+      if (!isControlled) setInternalOpen(newOpen);
+    },
+    [isControlled, onOpenChange]
+  );
+  const menuRef = react.useRef(null);
+  const handleArrowDownOrArrowUp = (event) => {
+    const menuContent = menuRef.current?.querySelector('[role="menu"]');
+    if (menuContent) {
+      event.preventDefault();
+      const items = Array.from(
+        menuContent.querySelectorAll(
+          '[role="menuitem"]:not([aria-disabled="true"])'
+        )
+      ).filter((el) => el instanceof HTMLElement);
+      if (items.length === 0) return;
+      const focusedItem = document.activeElement;
+      const currentIndex = items.findIndex((item) => item === focusedItem);
+      let nextIndex;
+      if (event.key === "ArrowDown") {
+        nextIndex = currentIndex === -1 ? 0 : (currentIndex + 1) % items.length;
+      } else {
+        nextIndex = currentIndex === -1 ? items.length - 1 : (currentIndex - 1 + items.length) % items.length;
+      }
+      items[nextIndex]?.focus();
+    }
+  };
+  const handleDownkey = (event) => {
+    if (event.key === "Escape") {
+      setOpen(false);
+    } else if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+      handleArrowDownOrArrowUp(event);
+    }
+  };
+  const handleClickOutside = (event) => {
+    if (menuRef.current && !menuRef.current.contains(event.target)) {
+      setOpen(false);
+    }
+  };
+  react.useEffect(() => {
+    if (currentOpen) {
+      document.addEventListener("mousedown", handleClickOutside);
+      document.addEventListener("keydown", handleDownkey);
+    }
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+      document.removeEventListener("keydown", handleDownkey);
+    };
+  }, [currentOpen]);
+  const value = react.useMemo(
+    () => ({ open: currentOpen, setOpen }),
+    [currentOpen, setOpen]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuContext.Provider, { value, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative", ref: menuRef, children }) });
+};
+var DropdownMenuTrigger = react.forwardRef(({ className, children, onClick, ...props }, ref) => {
+  const context = react.useContext(DropdownMenuContext);
+  if (!context)
+    throw new Error("DropdownMenuTrigger must be used within a DropdownMenu");
+  const { open, setOpen } = context;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "button",
+    {
+      ref,
+      className: `border border-border-200 cursor-pointer bg-background-muted hover:bg-background-200 transition-colors px-4 py-2 rounded-sm ${className}`,
+      onClick: (e) => {
+        e.stopPropagation();
+        setOpen(!open);
+        if (onClick) onClick(e);
+      },
+      "aria-expanded": open,
+      ...props,
+      children
+    }
+  );
 });
+DropdownMenuTrigger.displayName = "DropdownMenuTrigger";
+var ITEM_SIZE_CLASSES = {
+  small: "text-sm",
+  medium: "text-md"
+};
+var SIDE_CLASSES = {
+  top: "bottom-full",
+  right: "top-full",
+  bottom: "top-full",
+  left: "top-full"
+};
+var ALIGN_CLASSES = {
+  start: "left-0",
+  center: "left-1/2 -translate-x-1/2",
+  end: "right-0"
+};
+var MenuLabel = react.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  "fieldset",
+  {
+    ref,
+    role: "group",
+    className: `text-sm w-full ${inset ? "pl-8" : ""} ${className ?? ""}`,
+    ...props
+  }
+));
+MenuLabel.displayName = "MenuLabel";
+var MenuContent = react.forwardRef(
+  ({
+    className,
+    align = "start",
+    side = "bottom",
+    sideOffset = 4,
+    children,
+    ...props
+  }, ref) => {
+    const { open } = react.useContext(DropdownMenuContext);
+    const [isVisible, setIsVisible] = react.useState(open);
+    react.useEffect(() => {
+      if (open) {
+        setIsVisible(true);
+      } else {
+        const timer = setTimeout(() => setIsVisible(false), 200);
+        return () => clearTimeout(timer);
+      }
+    }, [open]);
+    if (!isVisible) return null;
+    const getPositionClasses = () => {
+      const vertical = SIDE_CLASSES[side];
+      const horizontal = ALIGN_CLASSES[align];
+      return `absolute ${vertical} ${horizontal}`;
+    };
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref,
+        role: "menu",
+        className: `
+        bg-background z-50 min-w-[210px] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md border-border-100
+        ${open ? "animate-in fade-in-0 zoom-in-95" : "animate-out fade-out-0 zoom-out-95"}
+        ${getPositionClasses()}
+        ${className}
+      `,
+        style: {
+          marginTop: side === "bottom" ? sideOffset : void 0,
+          marginBottom: side === "top" ? sideOffset : void 0,
+          marginLeft: side === "right" ? sideOffset : void 0,
+          marginRight: side === "left" ? sideOffset : void 0
+        },
+        ...props,
+        children
+      }
+    );
+  }
+);
+MenuContent.displayName = "MenuContent";
+var MenuItem = react.forwardRef(
+  ({
+    className,
+    inset,
+    size = "small",
+    children,
+    iconRight,
+    iconLeft,
+    disabled = false,
+    onClick,
+    ...props
+  }, ref) => {
+    const sizeClasses = ITEM_SIZE_CLASSES[size];
+    const handleClick = (e) => {
+      if (disabled) {
+        e.preventDefault();
+        e.stopPropagation();
+        return;
+      }
+      onClick?.(e);
+    };
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        ref,
+        role: "menuitem",
+        "aria-disabled": disabled,
+        className: `
+          focus-visible:bg-background-50
+          relative flex select-none items-center gap-2 rounded-sm p-3 text-sm outline-none transition-colors [&>svg]:size-4 [&>svg]:shrink-0
+          ${inset && "pl-8"}
+          ${sizeClasses}
+          ${className}
+          ${disabled ? "cursor-not-allowed text-text-400" : "cursor-pointer hover:bg-background-50 text-text-700 focus:bg-accent focus:text-accent-foreground hover:bg-accent hover:text-accent-foreground"}
+        `,
+        onClick: handleClick,
+        onKeyDown: (e) => {
+          if (e.key === "Enter" || e.key === " ") handleClick(e);
+        },
+        tabIndex: disabled ? -1 : 0,
+        ...props,
+        children: [
+          iconLeft,
+          children,
+          iconRight
+        ]
+      }
+    );
+  }
+);
+MenuItem.displayName = "MenuItem";
+var MenuSeparator = react.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  "div",
+  {
+    ref,
+    className: `my-1 h-px bg-border-200 ${className}`,
+    ...props
+  }
+));
+MenuSeparator.displayName = "MenuSeparator";
+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",
+    info: "bg-info text-info-800 border-none focus-visible:outline-none"
+  },
+  outlined: {
+    warning: "bg-warning text-warning-600 border border-warning-300 focus-visible:outline-none",
+    success: "bg-success text-success-800 border border-success-200 focus-visible:outline-none",
+    info: "bg-info text-info-600 border border-info-600 focus-visible:outline-none"
+  }
+};
+var iconMap = {
+  success: phosphorReact.CheckCircle,
+  info: phosphorReact.Info,
+  warning: phosphorReact.WarningCircle
+};
+var Toast = ({
+  variant = "outlined",
+  action = "success",
+  className = "",
+  onClose,
+  title,
+  description,
+  position = "default",
+  ...props
+}) => {
+  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",
+    "top-right": "fixed top-4 right-4",
+    "bottom-left": "fixed bottom-4 left-4",
+    "bottom-center": "fixed bottom-4 left-1/2 transform -translate-x-1/2",
+    "bottom-right": "fixed bottom-4 right-4",
+    default: ""
+  };
+  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__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      role: "alert",
+      "aria-live": "assertive",
+      "aria-atomic": "true",
+      className: `${baseClasses} ${positionClasses[position]} ${variantClasses} ${className}`,
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-row items-start gap-3", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mt-1", "data-testid": `toast-icon-${action}`, children: /* @__PURE__ */ jsxRuntime.jsx(IconAction, {}) }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-start justify-start", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "font-semibold text-md", children: title }),
+            description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-md text-text-900", children: description })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            onClick: onClose,
+            "aria-label": "Dismiss notification",
+            className: "text-background-500 cursor-pointer opacity-0 group-hover:opacity-100 transition-opacity",
+            children: /* @__PURE__ */ jsxRuntime.jsx(phosphorReact.X, {})
+          }
+        )
+      ]
+    }
+  );
+};
+var useToastStore = zustand.create((set) => ({
+  toasts: [],
+  addToast: (toast) => {
+    const id = crypto.randomUUID();
+    set((state) => ({
+      toasts: [...state.toasts, { id, ...toast }]
+    }));
+  },
+  removeToast: (id) => {
+    set((state) => ({
+      toasts: state.toasts.filter((t) => t.id !== id)
+    }));
+  }
+}));
+var Toaster = () => {
+  const toasts = useToastStore((state) => state.toasts);
+  const removeToast = useToastStore((state) => state.removeToast);
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: toasts.map((toast) => /* @__PURE__ */ jsxRuntime.jsx(
+    Toast,
+    {
+      title: toast.title,
+      description: toast.description,
+      variant: toast.variant,
+      action: toast.action,
+      position: toast.position,
+      onClose: () => removeToast(toast.id)
+    },
+    toast.id
+  )) });
+};
+
+exports.Alert = Alert;
+exports.Badge = Badge;
+exports.Button = Button;
+exports.CheckBox = CheckBox;
+exports.DropdownMenu = DropdownMenu;
+exports.DropdownMenuContent = MenuContent;
+exports.DropdownMenuItem = MenuItem;
+exports.DropdownMenuLabel = MenuLabel;
+exports.DropdownMenuSeparator = MenuSeparator;
+exports.DropdownMenuTrigger = DropdownMenuTrigger;
+exports.IconButton = IconButton;
+exports.IconRoundedButton = IconRoundedButton;
+exports.NavButton = NavButton;
+exports.SelectionButton = SelectionButton;
+exports.Table = Table;
+exports.Text = Text;
+exports.TextArea = TextArea;
+exports.Toast = Toast;
+exports.Toaster = Toaster;
+exports.useToastStore = useToastStore;