@northslopetech/altitude-ui 2.0.17 → 2.3.0

package/dist/index.mjs

@@ -1654,7 +1654,7 @@ var Logout = ({
 // src/components/ui/select.tsx
 import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
 var selectTriggerVariants = cva4(
-  "flex items-center justify-between border bg-light text-dark focus:outline-none disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1 transition-colors rounded-md px-3",
+  "flex items-center justify-between border bg-light text-dark focus:outline-none disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1 transition-colors rounded-md px-3 border-secondary focus-visible:border-2 focus-visible:border-strong aria-invalid:border-error aria-invalid:focus-visible:border-error",
   {
     variants: {
       width: {
@@ -1699,7 +1699,7 @@ var SelectTrigger = React3.forwardRef(({ className, children, style, width, ...p
       ref,
       className: cn(
         selectTriggerVariants({ width }),
-        "border-secondary focus-visible:border-2 focus-visible:border-strong data-[state=open]:[&_svg]:rotate-180 data-[placeholder]:text-secondary h-10 py-2",
+        "data-[state=open]:[&_svg]:rotate-180 data-[placeholder]:text-secondary h-10 py-2",
         className
       ),
       style: tokenStyles,
@@ -1810,135 +1810,276 @@ var SelectSeparator = React3.forwardRef(({ className, ...props }, ref) => /* @__
 ));
 SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
 
-// src/components/ui/form-field.tsx
-import * as React4 from "react";
-import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
-var FormField = React4.forwardRef(
-  ({
-    label,
-    helperText,
-    error = false,
-    required = false,
-    children,
-    className,
-    id,
-    compact = false,
-    ...props
-  }, ref) => {
-    const generatedId = React4.useId();
-    const fieldId = id || generatedId;
-    const helperTextId = `${fieldId}-helper`;
-    const labelId = `${fieldId}-label`;
-    if (compact) {
-      return /* @__PURE__ */ jsxs4("div", { ref, className: cn("w-full space-y-2", className), ...props, children: [
-        /* @__PURE__ */ jsxs4("div", { className: "relative", children: [
-          React4.cloneElement(
-            children,
-            {
-              id: fieldId,
-              "aria-labelledby": label ? labelId : void 0,
-              "aria-describedby": helperText ? helperTextId : void 0,
-              "aria-required": required,
-              "aria-invalid": error,
-              className: cn(
-                "pt-7 pb-2 h-14 items-end",
-                error ? "border-2 border-error-500 focus:border-error-500" : "",
-                children.props.className
-              )
-            }
-          ),
-          label && /* @__PURE__ */ jsx4(
-            "label",
-            {
-              id: labelId,
-              htmlFor: fieldId,
-              className: "absolute left-3 top-2 text-xs text-semantic-text-info [font:var(--typography-label-xs-bold)] pointer-events-none",
-              children: label
-            }
-          )
-        ] }),
-        helperText && /* @__PURE__ */ jsx4(
-          Typography,
-          {
-            variant: "body-xs",
-            id: helperTextId,
-            className: cn(
-              error ? "text-semantic-text-error" : "text-semantic-text-secondary"
-            ),
-            children: helperText
-          }
-        )
-      ] });
-    }
-    return /* @__PURE__ */ jsxs4("div", { ref, className: cn("w-full space-y-3", className), ...props, children: [
-      (label || required) && /* @__PURE__ */ jsxs4("div", { className: "flex items-center justify-between", children: [
-        label && /* @__PURE__ */ jsx4(
-          "label",
-          {
-            id: labelId,
-            htmlFor: fieldId,
-            className: "text-semantic-text-primary [font:var(--typography-label-sm-regular)]",
-            children: label
-          }
-        ),
-        required && /* @__PURE__ */ jsx4("span", { className: "text-semantic-text-secondary [font:var(--typography-label-xs-regular)]", children: "*required" })
-      ] }),
-      React4.cloneElement(
-        children,
-        {
-          id: fieldId,
-          "aria-labelledby": label ? labelId : void 0,
-          "aria-describedby": helperText ? helperTextId : void 0,
-          "aria-required": required,
-          "aria-invalid": error,
-          className: cn(
-            error ? "border-2 border-error-500 focus:border-error-500" : "",
-            children.props.className
-          )
-        }
+// src/components/ui/field.tsx
+import { useMemo } from "react";
+import { cva as cva5 } from "class-variance-authority";
+
+// src/components/ui/label.tsx
+import * as LabelPrimitive from "@radix-ui/react-label";
+import { jsx as jsx4 } from "react/jsx-runtime";
+function Label2({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx4(
+    LabelPrimitive.Root,
+    {
+      "data-slot": "label",
+      className: cn(
+        "flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
+        className
       ),
-      helperText && /* @__PURE__ */ jsx4(
-        Typography,
-        {
-          variant: "body-xs",
-          id: helperTextId,
-          className: cn(
-            error ? "text-semantic-text-error" : "text-semantic-text-secondary"
-          ),
-          children: helperText
-        }
-      )
-    ] });
-  }
-);
-FormField.displayName = "FormField";
+      ...props
+    }
+  );
+}
 
-// src/components/ui/date-picker.tsx
-import * as React6 from "react";
-import * as PopoverPrimitive from "@radix-ui/react-popover";
+// src/components/ui/separator.tsx
+import * as SeparatorPrimitive from "@radix-ui/react-separator";
+import { jsx as jsx5 } from "react/jsx-runtime";
+function Separator2({
+  className,
+  orientation = "horizontal",
+  decorative = true,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx5(
+    SeparatorPrimitive.Root,
+    {
+      "data-slot": "separator",
+      decorative,
+      orientation,
+      className: cn(
+        "bg-subtle shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px",
+        className
+      ),
+      ...props
+    }
+  );
+}
 
-// src/components/ui/input.tsx
-import * as React5 from "react";
-import { cva as cva5 } from "class-variance-authority";
-import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
-var inputVariants = cva5(
-  "flex w-full border bg-light text-dark focus:outline-none disabled:cursor-not-allowed disabled:opacity-50 disabled:border-secondary transition-colors rounded-md px-3 min-w-80 border-secondary focus-visible:border-2 focus-visible:border-strong placeholder:text-secondary read-only:bg-gray read-only:cursor-default read-only:border-transparent read-only:text-secondary read-only:focus-visible:border-transparent",
+// src/components/ui/field.tsx
+import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
+function FieldSet({ className, ...props }) {
+  return /* @__PURE__ */ jsx6(
+    "fieldset",
+    {
+      "data-slot": "field-set",
+      className: cn(
+        "flex flex-col gap-6",
+        "has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function FieldLegend({
+  className,
+  variant = "legend",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx6(
+    "legend",
+    {
+      "data-slot": "field-legend",
+      "data-variant": variant,
+      className: cn(
+        "mb-3 font-medium",
+        "data-[variant=legend]:text-base",
+        "data-[variant=label]:text-sm",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function FieldGroup({ className, ...props }) {
+  return /* @__PURE__ */ jsx6(
+    "div",
+    {
+      "data-slot": "field-group",
+      className: cn(
+        "group/field-group @container/field-group flex w-full flex-col gap-7 data-[slot=checkbox-group]:gap-3 [&>[data-slot=field-group]]:gap-4",
+        className
+      ),
+      ...props
+    }
+  );
+}
+var fieldVariants = cva5(
+  "group/field data-[invalid=true]:text-error flex w-full gap-3",
   {
     variants: {
-      variant: {
-        input: "h-10 py-2",
-        textarea: "h-full resize-none pt-4 pb-2"
+      orientation: {
+        vertical: ["flex-col [&>*]:w-full [&>.sr-only]:w-auto"],
+        horizontal: [
+          "flex-row items-center",
+          "[&>[data-slot=field-label]]:flex-auto",
+          "has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px has-[>[data-slot=field-content]]:items-start"
+        ],
+        responsive: [
+          "@md/field-group:flex-row @md/field-group:items-center @md/field-group:[&>*]:w-auto flex-col [&>*]:w-full [&>.sr-only]:w-auto",
+          "@md/field-group:[&>[data-slot=field-label]]:flex-auto",
+          "@md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px"
+        ]
       }
     },
     defaultVariants: {
-      variant: "input"
+      orientation: "vertical"
     }
   }
 );
-var Input = React5.forwardRef(
+function Field({
+  className,
+  orientation = "vertical",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx6(
+    "div",
+    {
+      role: "group",
+      "data-slot": "field",
+      "data-orientation": orientation,
+      className: cn(fieldVariants({ orientation }), className),
+      ...props
+    }
+  );
+}
+function FieldContent({ className, ...props }) {
+  return /* @__PURE__ */ jsx6(
+    "div",
+    {
+      "data-slot": "field-content",
+      className: cn(
+        "group/field-content flex flex-1 flex-col gap-1.5 leading-snug",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function FieldLabel({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx6(
+    Label2,
+    {
+      "data-slot": "field-label",
+      className: cn(
+        "group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50",
+        "has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col has-[>[data-slot=field]]:rounded-md has-[>[data-slot=field]]:border [&>[data-slot=field]]:p-4",
+        "has-data-[state=checked]:bg-gray has-data-[state=checked]:border-dark",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function FieldTitle({ className, ...props }) {
+  return /* @__PURE__ */ jsx6(
+    "div",
+    {
+      "data-slot": "field-label",
+      className: cn(
+        "flex w-fit items-center gap-2 text-sm font-medium leading-snug group-data-[disabled=true]/field:opacity-50",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function FieldDescription({ className, ...props }) {
+  return /* @__PURE__ */ jsx6(
+    "p",
+    {
+      "data-slot": "field-description",
+      className: cn(
+        "text-secondary text-sm font-normal leading-normal group-has-[[data-orientation=horizontal]]/field:text-balance",
+        "nth-last-2:-mt-1 last:mt-0 [[data-variant=legend]+&]:-mt-1.5",
+        "[&>a:hover]:text-dark [&>a]:underline [&>a]:underline-offset-4",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function FieldSeparator({
+  children,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs4(
+    "div",
+    {
+      "data-slot": "field-separator",
+      "data-content": !!children,
+      className: cn(
+        "relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx6(Separator2, { className: "absolute inset-0 top-1/2" }),
+        children && /* @__PURE__ */ jsx6(
+          "span",
+          {
+            className: "bg-light text-secondary relative mx-auto block w-fit px-2",
+            "data-slot": "field-separator-content",
+            children
+          }
+        )
+      ]
+    }
+  );
+}
+function FieldError({
+  className,
+  children,
+  errors,
+  ...props
+}) {
+  const content = useMemo(() => {
+    if (children) {
+      return children;
+    }
+    if (!errors) {
+      return null;
+    }
+    if (errors?.length === 1 && errors[0]?.message) {
+      return errors[0].message;
+    }
+    return /* @__PURE__ */ jsx6("ul", { className: "ml-4 flex list-disc flex-col gap-1", children: errors.map(
+      (error, index) => error?.message && /* @__PURE__ */ jsx6("li", { children: error.message }, index)
+    ) });
+  }, [children, errors]);
+  if (!content) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx6(
+    "div",
+    {
+      role: "alert",
+      "data-slot": "field-error",
+      className: cn("text-error text-sm font-normal", className),
+      ...props,
+      children: content
+    }
+  );
+}
+
+// src/components/ui/date-picker.tsx
+import * as React5 from "react";
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+
+// src/components/ui/input.tsx
+import * as React4 from "react";
+import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
+var inputBaseStyles = "flex h-10 py-2 w-full border bg-light text-dark focus:outline-none disabled:cursor-not-allowed disabled:opacity-50 transition-colors rounded-md px-3 min-w-80 placeholder:text-secondary read-only:bg-gray read-only:cursor-default read-only:border-transparent read-only:text-secondary read-only:focus-visible:border-transparent border-secondary focus-visible:border-2 focus-visible:border-strong disabled:border-secondary aria-invalid:border-error aria-invalid:focus-visible:border-error";
+var Input = React4.forwardRef(
   ({
     className,
-    variant = "input",
     style,
     value,
     onChange,
@@ -1947,7 +2088,7 @@ var Input = React5.forwardRef(
     readOnly,
     ...props
   }, ref) => {
-    const [internalValue, setInternalValue] = React5.useState(value || "");
+    const [internalValue, setInternalValue] = React4.useState(value || "");
     const isControlled = value !== void 0;
     const currentValue = isControlled ? value : internalValue;
     const showClear = showClearProp !== false && currentValue && currentValue.toString().length > 0 && !readOnly;
@@ -1960,15 +2101,7 @@ var Input = React5.forwardRef(
       if (!isControlled) {
         setInternalValue(e.target.value);
       }
-      if (variant === "input" && onChange) {
-        onChange(e);
-      }
-    };
-    const handleTextareaChange = (e) => {
-      if (!isControlled) {
-        setInternalValue(e.target.value);
-      }
-      if (variant === "textarea" && onChange) {
+      if (onChange) {
         onChange(e);
       }
     };
@@ -1977,60 +2110,20 @@ var Input = React5.forwardRef(
         setInternalValue("");
       }
       if (onChange) {
-        if (variant === "input") {
-          const inputEvent = {
-            target: { value: "" },
-            currentTarget: { value: "" }
-          };
-          onChange(inputEvent);
-        } else {
-          const textareaEvent = {
-            target: { value: "" },
-            currentTarget: { value: "" }
-          };
-          onChange(
-            textareaEvent
-          );
-        }
+        const inputEvent = {
+          target: { value: "" },
+          currentTarget: { value: "" }
+        };
+        onChange(inputEvent);
       }
       onClear?.();
     };
-    if (variant === "textarea") {
-      return /* @__PURE__ */ jsxs5("div", { className: "relative", children: [
-        /* @__PURE__ */ jsx5(
-          "textarea",
-          {
-            className: cn(
-              inputVariants({ variant }),
-              (showClear || showLock) && "pr-10",
-              className
-            ),
-            style: tokenStyles,
-            ref,
-            value: currentValue,
-            onChange: handleTextareaChange,
-            readOnly,
-            ...props
-          }
-        ),
-        showClear && /* @__PURE__ */ jsx5(
-          "button",
-          {
-            type: "button",
-            onClick: handleClear,
-            className: "absolute right-3 top-3 h-4 w-4 text-secondary hover:text-dark transition-colors",
-            children: /* @__PURE__ */ jsx5(X, { className: "h-4 w-4" })
-          }
-        ),
-        showLock && /* @__PURE__ */ jsx5(Lock, { className: "absolute right-3 top-3 h-4 w-4 text-secondary" })
-      ] });
-    }
     return /* @__PURE__ */ jsxs5("div", { className: "relative", children: [
-      /* @__PURE__ */ jsx5(
+      /* @__PURE__ */ jsx7(
         "input",
         {
           className: cn(
-            inputVariants({ variant }),
+            inputBaseStyles,
             (showClear || showLock) && "pr-10",
             className
           ),
@@ -2042,24 +2135,23 @@ var Input = React5.forwardRef(
           ...props
         }
       ),
-      showClear && /* @__PURE__ */ jsx5(
+      showClear && /* @__PURE__ */ jsx7(
         "button",
         {
           type: "button",
           onClick: handleClear,
           className: "absolute right-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-secondary hover:text-dark transition-colors",
-          children: /* @__PURE__ */ jsx5(X, { className: "h-4 w-4" })
+          children: /* @__PURE__ */ jsx7(X, { className: "h-4 w-4" })
         }
       ),
-      showLock && /* @__PURE__ */ jsx5(Lock, { className: "absolute right-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-secondary" })
+      showLock && /* @__PURE__ */ jsx7(Lock, { className: "absolute right-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-secondary" })
     ] });
   }
 );
 Input.displayName = "Input";
-var TypedInput = Input;
 
 // src/components/ui/date-picker.tsx
-import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
 var getDayNames = () => {
   const days = [];
   for (let i = 0; i < 7; i++) {
@@ -2095,7 +2187,7 @@ var formatDateInput = (date) => {
     day: "2-digit"
   });
 };
-var DatePicker = React6.forwardRef(
+var DatePicker = React5.forwardRef(
   ({
     value,
     onValueChange,
@@ -2114,19 +2206,19 @@ var DatePicker = React6.forwardRef(
       if (isNaN(parsed.getTime())) return void 0;
       return parsed;
     };
-    const [selectedDate, setSelectedDate] = React6.useState(
+    const [selectedDate, setSelectedDate] = React5.useState(
       value || parseDate(defaultValue)
     );
-    const [currentMonth, setCurrentMonth] = React6.useState(() => {
+    const [currentMonth, setCurrentMonth] = React5.useState(() => {
       const date = value || parseDate(defaultValue) || /* @__PURE__ */ new Date();
       return new Date(date.getFullYear(), date.getMonth());
     });
-    const [open, setOpen] = React6.useState(false);
-    const [inputValue, setInputValue] = React6.useState(() => {
+    const [open, setOpen] = React5.useState(false);
+    const [inputValue, setInputValue] = React5.useState(() => {
       const initialDate = value || parseDate(defaultValue);
       return initialDate ? formatDateInput(initialDate) : "";
     });
-    React6.useEffect(() => {
+    React5.useEffect(() => {
       setSelectedDate(value);
       if (value) {
         setCurrentMonth(new Date(value.getFullYear(), value.getMonth()));
@@ -2137,7 +2229,7 @@ var DatePicker = React6.forwardRef(
         setInputValue("");
       }
     }, [value]);
-    React6.useEffect(() => {
+    React5.useEffect(() => {
       if (value) return;
       const parsedDefault = parseDate(defaultValue);
       if (!parsedDefault) return;
@@ -2267,8 +2359,8 @@ var DatePicker = React6.forwardRef(
         onOpenChange: disabled ? void 0 : setOpen,
         children: [
           /* @__PURE__ */ jsxs6("div", { className: "relative", children: [
-            /* @__PURE__ */ jsx6(
-              TypedInput,
+            /* @__PURE__ */ jsx8(
+              Input,
               {
                 ref,
                 value: inputValue,
@@ -2280,7 +2372,7 @@ var DatePicker = React6.forwardRef(
                 ...props
               }
             ),
-            /* @__PURE__ */ jsx6(PopoverPrimitive.Trigger, { asChild: true, children: /* @__PURE__ */ jsx6("button", { className: "absolute right-3 top-1/2 transform -translate-y-1/2 hover:bg-gray rounded p-0.5 transition-colors", children: /* @__PURE__ */ jsx6(
+            /* @__PURE__ */ jsx8(PopoverPrimitive.Trigger, { asChild: true, children: /* @__PURE__ */ jsx8("button", { className: "absolute right-3 top-1/2 transform -translate-y-1/2 hover:bg-gray rounded p-0.5 transition-colors", children: /* @__PURE__ */ jsx8(
               Calendar,
               {
                 className: cn(
@@ -2290,7 +2382,7 @@ var DatePicker = React6.forwardRef(
               }
             ) }) })
           ] }),
-          /* @__PURE__ */ jsx6(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsx6(
+          /* @__PURE__ */ jsx8(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsx8(
             PopoverPrimitive.Content,
             {
               className: "z-50 w-80 rounded-lg border border-secondary bg-light text-dark shadow-lg animate-in fade-in-0 zoom-in-95 duration-200",
@@ -2301,12 +2393,12 @@ var DatePicker = React6.forwardRef(
               sticky: "always",
               children: /* @__PURE__ */ jsxs6("div", { className: "p-4", children: [
                 /* @__PURE__ */ jsxs6("div", { className: "flex items-center justify-between mb-4 gap-1", children: [
-                  /* @__PURE__ */ jsx6(
+                  /* @__PURE__ */ jsx8(
                     "button",
                     {
                       onClick: () => handleMonthChange("prev"),
                       className: "p-1 hover:bg-gray rounded transition-colors flex-shrink-0",
-                      children: /* @__PURE__ */ jsx6(ChevronLeft, { className: "h-4 w-4" })
+                      children: /* @__PURE__ */ jsx8(ChevronLeft, { className: "h-4 w-4" })
                     }
                   ),
                   /* @__PURE__ */ jsxs6("div", { className: "flex gap-1 flex-1 min-w-0", children: [
@@ -2316,8 +2408,8 @@ var DatePicker = React6.forwardRef(
                         value: currentMonth.getMonth().toString(),
                         onValueChange: handleMonthSelect,
                         children: [
-                          /* @__PURE__ */ jsx6(SelectTrigger, { className: "min-w-fit h-8 text-sm", children: /* @__PURE__ */ jsx6(SelectValue, {}) }),
-                          /* @__PURE__ */ jsx6(SelectContent, { children: months.map((month, index) => /* @__PURE__ */ jsx6(SelectItem, { value: index.toString(), children: month }, month)) })
+                          /* @__PURE__ */ jsx8(SelectTrigger, { className: "min-w-fit h-8 text-sm", children: /* @__PURE__ */ jsx8(SelectValue, {}) }),
+                          /* @__PURE__ */ jsx8(SelectContent, { children: months.map((month, index) => /* @__PURE__ */ jsx8(SelectItem, { value: index.toString(), children: month }, month)) })
                         ]
                       }
                     ),
@@ -2327,23 +2419,23 @@ var DatePicker = React6.forwardRef(
                         value: currentMonth.getFullYear().toString(),
                         onValueChange: handleYearSelect,
                         children: [
-                          /* @__PURE__ */ jsx6(SelectTrigger, { className: "min-w-fit h-8 text-sm", children: /* @__PURE__ */ jsx6(SelectValue, {}) }),
-                          /* @__PURE__ */ jsx6(SelectContent, { children: years.map((year) => /* @__PURE__ */ jsx6(SelectItem, { value: year.toString(), children: year }, year)) })
+                          /* @__PURE__ */ jsx8(SelectTrigger, { className: "min-w-fit h-8 text-sm", children: /* @__PURE__ */ jsx8(SelectValue, {}) }),
+                          /* @__PURE__ */ jsx8(SelectContent, { children: years.map((year) => /* @__PURE__ */ jsx8(SelectItem, { value: year.toString(), children: year }, year)) })
                         ]
                       }
                     )
                   ] }),
-                  /* @__PURE__ */ jsx6(
+                  /* @__PURE__ */ jsx8(
                     "button",
                     {
                       onClick: () => handleMonthChange("next"),
                       className: "p-1 hover:bg-gray rounded transition-colors flex-shrink-0",
-                      children: /* @__PURE__ */ jsx6(ChevronRight, { className: "h-4 w-4" })
+                      children: /* @__PURE__ */ jsx8(ChevronRight, { className: "h-4 w-4" })
                     }
                   )
                 ] }),
                 /* @__PURE__ */ jsxs6("div", { className: "space-y-1", children: [
-                  /* @__PURE__ */ jsx6("div", { className: "grid grid-cols-7 gap-1 mb-2", children: dayNames.map((day) => /* @__PURE__ */ jsx6(
+                  /* @__PURE__ */ jsx8("div", { className: "grid grid-cols-7 gap-1 mb-2", children: dayNames.map((day) => /* @__PURE__ */ jsx8(
                     Typography,
                     {
                       variant: "label-xs-bold",
@@ -2353,11 +2445,11 @@ var DatePicker = React6.forwardRef(
                     },
                     day
                   )) }),
-                  /* @__PURE__ */ jsx6("div", { className: "grid grid-cols-7 gap-1", children: days.map((date, index) => /* @__PURE__ */ jsx6(
+                  /* @__PURE__ */ jsx8("div", { className: "grid grid-cols-7 gap-1", children: days.map((date, index) => /* @__PURE__ */ jsx8(
                     "div",
                     {
                       className: "h-8 w-8 flex items-center justify-center",
-                      children: date && /* @__PURE__ */ jsx6(
+                      children: date && /* @__PURE__ */ jsx8(
                         "button",
                         {
                           onClick: () => handleDateSelect(date),
@@ -2371,7 +2463,7 @@ var DatePicker = React6.forwardRef(
                             isToday(date) && !isDateSelected(date) && !isDateDisabled(date) && "text-blue-600 after:content-[''] after:absolute after:bottom-1 after:left-1/2 after:-translate-x-1/2 after:w-1 after:h-1 after:bg-blue-600 after:rounded-full",
                             isDateDisabled(date) && "text-secondary/40 cursor-not-allowed opacity-50"
                           ),
-                          children: /* @__PURE__ */ jsx6(Typography, { variant: "label-sm", as: "span", children: date.getDate() })
+                          children: /* @__PURE__ */ jsx8(Typography, { variant: "label-sm", as: "span", children: date.getDate() })
                         }
                       )
                     },
@@ -2389,9 +2481,9 @@ var DatePicker = React6.forwardRef(
 DatePicker.displayName = "DatePicker";
 
 // src/components/ui/upload.tsx
-import * as React7 from "react";
+import * as React6 from "react";
 import { cva as cva6 } from "class-variance-authority";
-import { jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
 var DEFAULT_MAX_FILE_SIZE = 10 * 1024 * 1024;
 var uploadVariants = cva6(
   "relative flex flex-col items-center justify-center rounded-lg transition-all duration-200 ease-in-out overflow-hidden",
@@ -2415,7 +2507,7 @@ var uploadVariants = cva6(
     }
   }
 );
-var Upload = React7.forwardRef(
+var Upload = React6.forwardRef(
   ({
     className,
     onFileSelect,
@@ -2428,8 +2520,8 @@ var Upload = React7.forwardRef(
     selectedFiles = [],
     ...props
   }, ref) => {
-    const fileInputRef = React7.useRef(null);
-    const [isDragOver, setIsDragOver] = React7.useState(false);
+    const fileInputRef = React6.useRef(null);
+    const [isDragOver, setIsDragOver] = React6.useState(false);
     const getFileTypeDisplay = () => {
       const typeMap = {
         "application/pdf": "PDF",
@@ -2500,10 +2592,10 @@ var Upload = React7.forwardRef(
               style: { gap: "32px" },
               children: [
                 /* @__PURE__ */ jsxs7("div", { className: "space-y-4", children: [
-                  /* @__PURE__ */ jsx7(Typography, { variant: "heading-sm", children: "Upload fail" }),
-                  /* @__PURE__ */ jsx7(Typography, { variant: "body-md", className: "text-error", children: errorMessage })
+                  /* @__PURE__ */ jsx9(Typography, { variant: "heading-sm", children: "Upload fail" }),
+                  /* @__PURE__ */ jsx9(Typography, { variant: "body-md", className: "text-error", children: errorMessage })
                 ] }),
-                /* @__PURE__ */ jsx7(
+                /* @__PURE__ */ jsx9(
                   Button,
                   {
                     variant: "destructive",
@@ -2523,9 +2615,9 @@ var Upload = React7.forwardRef(
               className: "flex flex-col items-center text-center max-w-[289px]",
               style: { gap: "32px" },
               children: [
-                /* @__PURE__ */ jsx7(Typography, { variant: "heading-sm", className: "text-dark", children: "Uploading files" }),
+                /* @__PURE__ */ jsx9(Typography, { variant: "heading-sm", className: "text-dark", children: "Uploading files" }),
                 /* @__PURE__ */ jsxs7("div", { className: "w-full max-w-[720px] space-y-2", children: [
-                  /* @__PURE__ */ jsx7("div", { className: "w-full bg-gray rounded-full h-2", children: /* @__PURE__ */ jsx7(
+                  /* @__PURE__ */ jsx9("div", { className: "w-full bg-gray rounded-full h-2", children: /* @__PURE__ */ jsx9(
                     "div",
                     {
                       className: "bg-canvas-primary h-2 rounded-full transition-all duration-300 ease-in-out",
@@ -2548,14 +2640,14 @@ var Upload = React7.forwardRef(
             }
           );
         case "success":
-          return /* @__PURE__ */ jsx7(
+          return /* @__PURE__ */ jsx9(
             "div",
             {
               className: "flex flex-col items-center text-center max-w-[289px]",
               style: { gap: "32px" },
               children: /* @__PURE__ */ jsxs7("div", { className: "space-y-4", children: [
-                /* @__PURE__ */ jsx7(Typography, { variant: "heading-sm", className: "text-success", children: "Upload successful!" }),
-                selectedFiles.length > 0 && /* @__PURE__ */ jsx7("div", { className: "text-center", children: selectedFiles.map((file, index) => /* @__PURE__ */ jsx7(Typography, { variant: "body-sm", children: file.name }, index)) })
+                /* @__PURE__ */ jsx9(Typography, { variant: "heading-sm", className: "text-success", children: "Upload successful!" }),
+                selectedFiles.length > 0 && /* @__PURE__ */ jsx9("div", { className: "text-center", children: selectedFiles.map((file, index) => /* @__PURE__ */ jsx9(Typography, { variant: "body-sm", children: file.name }, index)) })
               ] })
             }
           );
@@ -2567,10 +2659,10 @@ var Upload = React7.forwardRef(
               style: { gap: "32px" },
               children: [
                 /* @__PURE__ */ jsxs7("div", { className: "space-y-4", children: [
-                  /* @__PURE__ */ jsx7(Typography, { variant: "heading-sm", className: "text-dark", children: "Drag & drop files here" }),
-                  /* @__PURE__ */ jsx7(Typography, { variant: "body-md", className: "text-secondary", children: "or click to browse from your computer" })
+                  /* @__PURE__ */ jsx9(Typography, { variant: "heading-sm", className: "text-dark", children: "Drag & drop files here" }),
+                  /* @__PURE__ */ jsx9(Typography, { variant: "body-md", className: "text-secondary", children: "or click to browse from your computer" })
                 ] }),
-                /* @__PURE__ */ jsx7(
+                /* @__PURE__ */ jsx9(
                   Button,
                   {
                     variant: "default",
@@ -2587,7 +2679,7 @@ var Upload = React7.forwardRef(
                 /* @__PURE__ */ jsxs7(Typography, { variant: "body-sm", className: "text-secondary", children: [
                   "Supported file: ",
                   getFileTypeDisplay(),
-                  /* @__PURE__ */ jsx7("br", {}),
+                  /* @__PURE__ */ jsx9("br", {}),
                   "Max: ",
                   Math.round(maxFileSize / 1024 / 1024),
                   " MB each"
@@ -2621,7 +2713,7 @@ var Upload = React7.forwardRef(
         "aria-disabled": disabled,
         ...props,
         children: [
-          /* @__PURE__ */ jsx7(
+          /* @__PURE__ */ jsx9(
             "input",
             {
               ref: fileInputRef,
@@ -2641,28 +2733,53 @@ var Upload = React7.forwardRef(
 Upload.displayName = "Upload";
 
 // src/components/ui/checkbox.tsx
-import * as React8 from "react";
+import * as React7 from "react";
 import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
 import { cva as cva7 } from "class-variance-authority";
-import { jsx as jsx8 } from "react/jsx-runtime";
+import { jsx as jsx10 } from "react/jsx-runtime";
 var checkboxVariants = cva7(
-  "peer size-4 shrink-0 rounded-[4px] border border-strong bg-light hover:bg-info-subtle transition-colors focus-visible:outline-none focus-visible:border-2 focus-visible:border-interactive disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:border-primary data-[state=checked]:text-light [&_svg]:pointer-events-none [&_svg]:size-3 [&_svg]:shrink-0"
+  "peer size-4 shrink-0 rounded-[4px] border bg-light hover:bg-info-subtle transition-colors focus-visible:outline-none focus-visible:border-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:border-primary data-[state=checked]:text-light [&_svg]:pointer-events-none [&_svg]:size-3 [&_svg]:shrink-0 border-strong focus-visible:border-interactive aria-invalid:border-error aria-invalid:focus-visible:border-error"
 );
-var Checkbox = React8.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx8(
+var Checkbox = React7.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx10(
   CheckboxPrimitive.Root,
   {
     ref,
     className: cn(checkboxVariants(), className),
     ...props,
-    children: /* @__PURE__ */ jsx8(CheckboxPrimitive.Indicator, { className: "flex items-center justify-center text-current", children: /* @__PURE__ */ jsx8(CheckIcon, { variant: "light", className: "size-3" }) })
+    children: /* @__PURE__ */ jsx10(CheckboxPrimitive.Indicator, { className: "flex items-center justify-center text-current", children: /* @__PURE__ */ jsx10(CheckIcon, { variant: "light", className: "size-3" }) })
   }
 ));
 Checkbox.displayName = CheckboxPrimitive.Root.displayName;
 
+// src/components/ui/textarea.tsx
+import * as React8 from "react";
+import { jsx as jsx11 } from "react/jsx-runtime";
+var Textarea = React8.forwardRef(
+  ({ className, style, ...props }, ref) => {
+    const tokenStyles = {
+      font: "var(--typography-label-md-regular)",
+      ...style
+    };
+    return /* @__PURE__ */ jsx11(
+      "textarea",
+      {
+        className: cn(
+          "flex min-h-[80px] w-full rounded-md border bg-light text-dark px-3 pt-3 pb-2 placeholder:text-secondary focus:outline-none disabled:cursor-not-allowed disabled:opacity-50 transition-colors resize-y border-secondary focus-visible:border-2 focus-visible:border-strong disabled:border-secondary aria-invalid:border-error aria-invalid:focus-visible:border-error",
+          className
+        ),
+        style: tokenStyles,
+        ref,
+        ...props
+      }
+    );
+  }
+);
+Textarea.displayName = "Textarea";
+
 // src/components/ui/badge.tsx
 import * as React9 from "react";
 import { cva as cva8 } from "class-variance-authority";
-import { jsx as jsx9 } from "react/jsx-runtime";
+import { jsx as jsx12 } from "react/jsx-runtime";
 var badgeVariants = cva8(
   "inline-flex items-center justify-center gap-1 whitespace-nowrap transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2",
   {
@@ -2695,7 +2812,7 @@ var Badge = React9.forwardRef(
       ...typographyStyles,
       ...style
     };
-    return /* @__PURE__ */ jsx9(
+    return /* @__PURE__ */ jsx12(
       "span",
       {
         className: cn(
@@ -2715,7 +2832,7 @@ Badge.displayName = "Badge";
 // src/components/ui/tabs.tsx
 import * as React10 from "react";
 import { cva as cva9 } from "class-variance-authority";
-import { jsx as jsx10 } from "react/jsx-runtime";
+import { jsx as jsx13 } from "react/jsx-runtime";
 var tabsVariants = cva9(
   "inline-flex items-center justify-start whitespace-nowrap transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-interactive focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 h-10",
   {
@@ -2756,13 +2873,13 @@ var Tabs = React10.forwardRef((props, ref) => {
     }),
     [value, onValueChange, variant]
   );
-  return /* @__PURE__ */ jsx10(TabsContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx10("div", { ref, className: cn("w-full", className), ...restProps, children }) });
+  return /* @__PURE__ */ jsx13(TabsContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx13("div", { ref, className: cn("w-full", className), ...restProps, children }) });
 });
 Tabs.displayName = "Tabs";
 var TabsList = React10.forwardRef(
   (props, ref) => {
     const { className, children, ...restProps } = props;
-    return /* @__PURE__ */ jsx10(
+    return /* @__PURE__ */ jsx13(
       "div",
       {
         ref,
@@ -2801,7 +2918,7 @@ var TabsTrigger = React10.forwardRef(
       if (disabled) return;
       setActiveTab(value);
     }, [disabled, setActiveTab, value]);
-    return /* @__PURE__ */ jsx10(
+    return /* @__PURE__ */ jsx13(
       "button",
       {
         ref,
@@ -2815,7 +2932,7 @@ var TabsTrigger = React10.forwardRef(
         disabled,
         onClick: handleClick,
         ...restProps,
-        children: /* @__PURE__ */ jsx10("span", { className: "pl-3 pr-6 py-2", children })
+        children: /* @__PURE__ */ jsx13("span", { className: "pl-3 pr-6 py-2", children })
       }
     );
   }
@@ -2832,7 +2949,7 @@ var TabsContent = React10.forwardRef(
     if (!isActive) {
       return null;
     }
-    return /* @__PURE__ */ jsx10(
+    return /* @__PURE__ */ jsx13(
       "div",
       {
         ref,
@@ -2852,7 +2969,7 @@ TabsContent.displayName = "TabsContent";
 // src/components/ui/dropdown-menu.tsx
 import * as React11 from "react";
 import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
-import { jsx as jsx11, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx14, jsxs as jsxs8 } from "react/jsx-runtime";
 var DropdownMenu = DropdownMenuPrimitive.Root;
 var DropdownMenuTrigger = React11.forwardRef(({ className, icon, children, ...props }, ref) => /* @__PURE__ */ jsxs8(
   DropdownMenuPrimitive.Trigger,
@@ -2864,7 +2981,7 @@ var DropdownMenuTrigger = React11.forwardRef(({ className, icon, children, ...pr
     ),
     ...props,
     children: [
-      icon || /* @__PURE__ */ jsx11(MoreMenu, { className: "size-4" }),
+      icon || /* @__PURE__ */ jsx14(MoreMenu, { className: "size-4" }),
       children
     ]
   }
@@ -2887,12 +3004,12 @@ var DropdownMenuSubTrigger = React11.forwardRef(({ className, inset, children, .
     ...props,
     children: [
       children,
-      /* @__PURE__ */ jsx11(ChevronRight, { className: "ml-auto" })
+      /* @__PURE__ */ jsx14(ChevronRight, { className: "ml-auto" })
     ]
   }
 ));
 DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayName;
-var DropdownMenuSubContent = React11.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx11(
+var DropdownMenuSubContent = React11.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx14(
   DropdownMenuPrimitive.SubContent,
   {
     ref,
@@ -2904,7 +3021,7 @@ var DropdownMenuSubContent = React11.forwardRef(({ className, ...props }, ref) =
   }
 ));
 DropdownMenuSubContent.displayName = DropdownMenuPrimitive.SubContent.displayName;
-var DropdownMenuContent = React11.forwardRef(({ className, sideOffset = 4, align = "end", ...props }, ref) => /* @__PURE__ */ jsx11(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx11(
+var DropdownMenuContent = React11.forwardRef(({ className, sideOffset = 4, align = "end", ...props }, ref) => /* @__PURE__ */ jsx14(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx14(
   DropdownMenuPrimitive.Content,
   {
     ref,
@@ -2918,7 +3035,7 @@ var DropdownMenuContent = React11.forwardRef(({ className, sideOffset = 4, align
   }
 ) }));
 DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
-var DropdownMenuItem = React11.forwardRef(({ className, inset, style, ...props }, ref) => /* @__PURE__ */ jsx11(
+var DropdownMenuItem = React11.forwardRef(({ className, inset, style, ...props }, ref) => /* @__PURE__ */ jsx14(
   DropdownMenuPrimitive.Item,
   {
     ref,
@@ -2950,7 +3067,7 @@ var DropdownMenuCheckboxItem = React11.forwardRef(({ className, children, style,
     },
     ...props,
     children: [
-      /* @__PURE__ */ jsx11(
+      /* @__PURE__ */ jsx14(
         Checkbox,
         {
           checked: checked === true,
@@ -2958,7 +3075,7 @@ var DropdownMenuCheckboxItem = React11.forwardRef(({ className, children, style,
           "aria-hidden": "true"
         }
       ),
-      /* @__PURE__ */ jsx11("span", { className: "flex-1", children })
+      /* @__PURE__ */ jsx14("span", { className: "flex-1", children })
     ]
   }
 ));
@@ -2977,13 +3094,13 @@ var DropdownMenuRadioItem = React11.forwardRef(({ className, children, style, ..
     },
     ...props,
     children: [
-      /* @__PURE__ */ jsx11("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx11(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx11("span", { className: "h-2 w-2 rounded-full bg-current" }) }) }),
+      /* @__PURE__ */ jsx14("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx14(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx14("span", { className: "h-2 w-2 rounded-full bg-current" }) }) }),
       children
     ]
   }
 ));
 DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
-var DropdownMenuLabel = React11.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx11(
+var DropdownMenuLabel = React11.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx14(
   DropdownMenuPrimitive.Label,
   {
     ref,
@@ -2996,7 +3113,7 @@ var DropdownMenuLabel = React11.forwardRef(({ className, inset, ...props }, ref)
   }
 ));
 DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
-var DropdownMenuSeparator = React11.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx11(
+var DropdownMenuSeparator = React11.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx14(
   DropdownMenuPrimitive.Separator,
   {
     ref,
@@ -3009,7 +3126,7 @@ var DropdownMenuShortcut = ({
   className,
   ...props
 }) => {
-  return /* @__PURE__ */ jsx11(
+  return /* @__PURE__ */ jsx14(
     "span",
     {
       className: cn("ml-auto text-xs tracking-widest opacity-60", className),
@@ -3020,21 +3137,21 @@ var DropdownMenuShortcut = ({
 DropdownMenuShortcut.displayName = "DropdownMenuShortcut";
 
 // src/components/ui/charts/chart-legend.tsx
-import { jsx as jsx12, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx15, jsxs as jsxs9 } from "react/jsx-runtime";
 function ChartLegend({
   items,
   x = 0,
   y = 550,
   className = ""
 }) {
-  return /* @__PURE__ */ jsx12("foreignObject", { x, y, width: "100%", height: "40", children: /* @__PURE__ */ jsx12(
+  return /* @__PURE__ */ jsx15("foreignObject", { x, y, width: "100%", height: "40", children: /* @__PURE__ */ jsx15(
     "div",
     {
       className: `flex justify-center items-center gap-6 ${className}`,
       style: { height: "100%" },
       children: items.map(({ key, color, label }) => /* @__PURE__ */ jsxs9("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ jsx12("div", { className: "w-3 h-3", style: { backgroundColor: color } }),
-        /* @__PURE__ */ jsx12(Typography, { variant: "body-xs", children: label || key })
+        /* @__PURE__ */ jsx15("div", { className: "w-3 h-3", style: { backgroundColor: color } }),
+        /* @__PURE__ */ jsx15(Typography, { variant: "body-xs", children: label || key })
       ] }, key))
     }
   ) });
@@ -3152,12 +3269,12 @@ var formatLargeNumber = (value) => {
 };
 
 // src/components/ui/charts/chart-labels.tsx
-import { jsx as jsx13 } from "react/jsx-runtime";
+import { jsx as jsx16 } from "react/jsx-runtime";
 var createCustomXAxisLabel = (text, yOffset = 40) => {
   const CustomXAxisLabel = ({ viewBox }) => {
     if (!viewBox) return null;
     const { x, y, width } = viewBox;
-    return /* @__PURE__ */ jsx13("g", { children: /* @__PURE__ */ jsx13("foreignObject", { x, y: y + yOffset, width, height: 20, children: /* @__PURE__ */ jsx13("div", { className: "flex justify-center w-full", children: /* @__PURE__ */ jsx13(Typography, { variant: "label-xs-bold", className: "text-secondary", children: text }) }) }) });
+    return /* @__PURE__ */ jsx16("g", { children: /* @__PURE__ */ jsx16("foreignObject", { x, y: y + yOffset, width, height: 20, children: /* @__PURE__ */ jsx16("div", { className: "flex justify-center w-full", children: /* @__PURE__ */ jsx16(Typography, { variant: "label-xs-bold", className: "text-secondary", children: text }) }) }) });
   };
   CustomXAxisLabel.displayName = "CustomXAxisLabel";
   return CustomXAxisLabel;
@@ -3167,7 +3284,7 @@ var createCustomYAxisLabel = (text, leftMargin) => {
     if (!viewBox) return null;
     const { x, y, height } = viewBox;
     const offset = leftMargin ? leftMargin + 10 : 110;
-    return /* @__PURE__ */ jsx13("g", { children: /* @__PURE__ */ jsx13("foreignObject", { x: x - offset, y, width: 100, height, children: /* @__PURE__ */ jsx13("div", { className: "flex items-center justify-center h-full transform -rotate-90 whitespace-nowrap", children: /* @__PURE__ */ jsx13(Typography, { variant: "label-xs-bold", className: "text-secondary", children: text }) }) }) });
+    return /* @__PURE__ */ jsx16("g", { children: /* @__PURE__ */ jsx16("foreignObject", { x: x - offset, y, width: 100, height, children: /* @__PURE__ */ jsx16("div", { className: "flex items-center justify-center h-full transform -rotate-90 whitespace-nowrap", children: /* @__PURE__ */ jsx16(Typography, { variant: "label-xs-bold", className: "text-secondary", children: text }) }) }) });
   };
   CustomYAxisLabel.displayName = "CustomYAxisLabel";
   return CustomYAxisLabel;
@@ -3176,14 +3293,14 @@ var createCustomYAxisRightLabel = (text) => {
   const CustomYAxisRightLabel = ({ viewBox }) => {
     if (!viewBox) return null;
     const { x, y, width, height } = viewBox;
-    return /* @__PURE__ */ jsx13("g", { children: /* @__PURE__ */ jsx13("foreignObject", { x: x + width - 70, y, width: 120, height, children: /* @__PURE__ */ jsx13("div", { className: "flex items-center justify-center h-full transform rotate-90 whitespace-nowrap", children: /* @__PURE__ */ jsx13(Typography, { variant: "label-xs-bold", className: "text-secondary", children: text }) }) }) });
+    return /* @__PURE__ */ jsx16("g", { children: /* @__PURE__ */ jsx16("foreignObject", { x: x + width - 70, y, width: 120, height, children: /* @__PURE__ */ jsx16("div", { className: "flex items-center justify-center h-full transform rotate-90 whitespace-nowrap", children: /* @__PURE__ */ jsx16(Typography, { variant: "label-xs-bold", className: "text-secondary", children: text }) }) }) });
   };
   CustomYAxisRightLabel.displayName = "CustomYAxisRightLabel";
   return CustomYAxisRightLabel;
 };
 var customXAxisTick = (props) => {
   const { x, y, payload } = props;
-  return /* @__PURE__ */ jsx13("g", { transform: `translate(${x},${y})`, children: /* @__PURE__ */ jsx13(
+  return /* @__PURE__ */ jsx16("g", { transform: `translate(${x},${y})`, children: /* @__PURE__ */ jsx16(
     "foreignObject",
     {
       x: -20,
@@ -3191,12 +3308,12 @@ var customXAxisTick = (props) => {
       width: 40,
       height: 20,
       style: { overflow: "visible" },
-      children: /* @__PURE__ */ jsx13(
+      children: /* @__PURE__ */ jsx16(
         "div",
         {
           className: "flex items-start justify-center h-full",
           style: { overflow: "visible" },
-          children: /* @__PURE__ */ jsx13(
+          children: /* @__PURE__ */ jsx16(
             Typography,
             {
               variant: "body-xs",
@@ -3211,7 +3328,7 @@ var customXAxisTick = (props) => {
 };
 var customXAxisTickRotated = (props) => {
   const { x, y, payload } = props;
-  return /* @__PURE__ */ jsx13("g", { transform: `translate(${x},${y})`, children: /* @__PURE__ */ jsx13(
+  return /* @__PURE__ */ jsx16("g", { transform: `translate(${x},${y})`, children: /* @__PURE__ */ jsx16(
     "text",
     {
       x: 0,
@@ -3230,25 +3347,25 @@ var customYAxisTick = (props) => {
   const { x, y, payload } = props;
   const text = String(payload.value);
   const estimatedWidth = Math.max(text.length * 8, 80);
-  return /* @__PURE__ */ jsx13(
+  return /* @__PURE__ */ jsx16(
     "foreignObject",
     {
       x: x - estimatedWidth + 5,
       y: y - 6,
       width: estimatedWidth,
       height: 15,
-      children: /* @__PURE__ */ jsx13("div", { className: "flex justify-end w-full", children: /* @__PURE__ */ jsx13(Typography, { variant: "body-xs", className: "text-secondary", children: payload.value }) })
+      children: /* @__PURE__ */ jsx16("div", { className: "flex justify-end w-full", children: /* @__PURE__ */ jsx16(Typography, { variant: "body-xs", className: "text-secondary", children: payload.value }) })
     }
   );
 };
 
 // src/components/ui/charts/chart-tooltip.tsx
-import { Fragment, jsx as jsx14, jsxs as jsxs10 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx17, jsxs as jsxs10 } from "react/jsx-runtime";
 function TooltipContainer({
   children,
   className = ""
 }) {
-  return /* @__PURE__ */ jsx14(
+  return /* @__PURE__ */ jsx17(
     "div",
     {
       className: `bg-light border border-subtle rounded p-2.5 text-dark ${className}`,
@@ -3263,9 +3380,9 @@ function TooltipItem({
   className = ""
 }) {
   return /* @__PURE__ */ jsxs10(Fragment, { children: [
-    /* @__PURE__ */ jsx14("br", {}),
+    /* @__PURE__ */ jsx17("br", {}),
     /* @__PURE__ */ jsxs10(Typography, { variant: "label-sm", className, children: [
-      /* @__PURE__ */ jsx14(
+      /* @__PURE__ */ jsx17(
         "span",
         {
           className: "inline-block w-3 h-3 mr-1.5",
@@ -3284,8 +3401,8 @@ function GenericTooltip({
   className = ""
 }) {
   return /* @__PURE__ */ jsxs10(TooltipContainer, { className, children: [
-    title && /* @__PURE__ */ jsx14(Typography, { variant: "label-sm-bold", children: title }),
-    items.map((item, index) => /* @__PURE__ */ jsx14(
+    title && /* @__PURE__ */ jsx17(Typography, { variant: "label-sm-bold", children: title }),
+    items.map((item, index) => /* @__PURE__ */ jsx17(
       TooltipItem,
       {
         color: item.color,
@@ -3307,7 +3424,7 @@ import {
   Tooltip,
   ResponsiveContainer
 } from "recharts";
-import { jsx as jsx15, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx18, jsxs as jsxs11 } from "react/jsx-runtime";
 var BarChart = forwardRef12(
   ({
     data,
@@ -3340,8 +3457,8 @@ var BarChart = forwardRef12(
         ref,
         className: `bg-light border border-subtle mx-6 ${className}`,
         children: [
-          /* @__PURE__ */ jsx15("div", { className: "flex items-center justify-between px-3 py-2 border-b border-subtle", children: /* @__PURE__ */ jsx15(Typography, { variant: "label-sm-bold", children: title }) }),
-          /* @__PURE__ */ jsx15("div", { className: "pt-2 px-2", children: hasData ? /* @__PURE__ */ jsx15(
+          /* @__PURE__ */ jsx18("div", { className: "flex items-center justify-between px-3 py-2 border-b border-subtle", children: /* @__PURE__ */ jsx18(Typography, { variant: "label-sm-bold", children: title }) }),
+          /* @__PURE__ */ jsx18("div", { className: "pt-2 px-2", children: hasData ? /* @__PURE__ */ jsx18(
             ResponsiveContainer,
             {
               width: "100%",
@@ -3358,7 +3475,7 @@ var BarChart = forwardRef12(
                   onClick: handleClick,
                   layout,
                   children: [
-                    /* @__PURE__ */ jsx15(
+                    /* @__PURE__ */ jsx18(
                       XAxis,
                       {
                         dataKey: xAxisKey,
@@ -3372,7 +3489,7 @@ var BarChart = forwardRef12(
                         label: xAxisLabel ? createCustomXAxisLabel(xAxisLabel, 80) : void 0
                       }
                     ),
-                    /* @__PURE__ */ jsx15(
+                    /* @__PURE__ */ jsx18(
                       YAxis,
                       {
                         axisLine: false,
@@ -3383,7 +3500,7 @@ var BarChart = forwardRef12(
                         type: yAxisType
                       }
                     ),
-                    /* @__PURE__ */ jsx15(
+                    /* @__PURE__ */ jsx18(
                       Tooltip,
                       {
                         content: ({
@@ -3392,7 +3509,7 @@ var BarChart = forwardRef12(
                           label
                         }) => {
                           if (active && payload && payload.length) {
-                            return /* @__PURE__ */ jsx15(
+                            return /* @__PURE__ */ jsx18(
                               GenericTooltip,
                               {
                                 title: label?.toString(),
@@ -3408,7 +3525,7 @@ var BarChart = forwardRef12(
                         }
                       }
                     ),
-                    /* @__PURE__ */ jsx15(
+                    /* @__PURE__ */ jsx18(
                       Bar,
                       {
                         dataKey: barDataKey || yAxisKey,
@@ -3416,12 +3533,12 @@ var BarChart = forwardRef12(
                         name: barDataKey || yAxisKey
                       }
                     ),
-                    showLegend && defaultLegendItems.length > 0 && /* @__PURE__ */ jsx15(ChartLegend, { items: defaultLegendItems })
+                    showLegend && defaultLegendItems.length > 0 && /* @__PURE__ */ jsx18(ChartLegend, { items: defaultLegendItems })
                   ]
                 }
               )
             }
-          ) : /* @__PURE__ */ jsx15("div", { className: "flex items-center justify-center h-[500px]", children: /* @__PURE__ */ jsx15(Typography, { variant: "body-md", className: "text-secondary", children: "No data is available" }) }) })
+          ) : /* @__PURE__ */ jsx18("div", { className: "flex items-center justify-center h-[500px]", children: /* @__PURE__ */ jsx18(Typography, { variant: "body-md", className: "text-secondary", children: "No data is available" }) }) })
         ]
       }
     );
@@ -3439,7 +3556,7 @@ import {
   Tooltip as Tooltip2,
   ResponsiveContainer as ResponsiveContainer2
 } from "recharts";
-import { jsx as jsx16, jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsx as jsx19, jsxs as jsxs12 } from "react/jsx-runtime";
 var LineChart = forwardRef13(
   ({
     data,
@@ -3474,8 +3591,8 @@ var LineChart = forwardRef13(
         ref,
         className: `bg-light border border-subtle mx-6 ${className}`,
         children: [
-          /* @__PURE__ */ jsx16("div", { className: "flex items-center justify-between px-3 py-2 border-b border-subtle", children: /* @__PURE__ */ jsx16(Typography, { variant: "label-sm-bold", children: title }) }),
-          /* @__PURE__ */ jsx16("div", { className: "pt-2 px-2", children: hasData ? /* @__PURE__ */ jsx16(
+          /* @__PURE__ */ jsx19("div", { className: "flex items-center justify-between px-3 py-2 border-b border-subtle", children: /* @__PURE__ */ jsx19(Typography, { variant: "label-sm-bold", children: title }) }),
+          /* @__PURE__ */ jsx19("div", { className: "pt-2 px-2", children: hasData ? /* @__PURE__ */ jsx19(
             ResponsiveContainer2,
             {
               width: "100%",
@@ -3491,7 +3608,7 @@ var LineChart = forwardRef13(
                   },
                   onClick: handleClick,
                   children: [
-                    /* @__PURE__ */ jsx16(
+                    /* @__PURE__ */ jsx19(
                       XAxis2,
                       {
                         dataKey: xAxisKey,
@@ -3503,7 +3620,7 @@ var LineChart = forwardRef13(
                         label: xAxisLabel ? createCustomXAxisLabel(xAxisLabel) : void 0
                       }
                     ),
-                    /* @__PURE__ */ jsx16(
+                    /* @__PURE__ */ jsx19(
                       YAxis2,
                       {
                         axisLine: false,
@@ -3512,7 +3629,7 @@ var LineChart = forwardRef13(
                         label: yAxisLabel ? createCustomYAxisLabel(yAxisLabel, 40) : void 0
                       }
                     ),
-                    /* @__PURE__ */ jsx16(
+                    /* @__PURE__ */ jsx19(
                       Tooltip2,
                       {
                         content: ({
@@ -3521,7 +3638,7 @@ var LineChart = forwardRef13(
                           label
                         }) => {
                           if (active && payload && payload.length) {
-                            return /* @__PURE__ */ jsx16(
+                            return /* @__PURE__ */ jsx19(
                               GenericTooltip,
                               {
                                 title: label?.toString(),
@@ -3537,7 +3654,7 @@ var LineChart = forwardRef13(
                         }
                       }
                     ),
-                    series.map((s, index) => /* @__PURE__ */ jsx16(
+                    series.map((s, index) => /* @__PURE__ */ jsx19(
                       Line,
                       {
                         type: "monotone",
@@ -3549,12 +3666,12 @@ var LineChart = forwardRef13(
                       },
                       s.dataKey
                     )),
-                    showLegend && defaultLegendItems.length > 0 && /* @__PURE__ */ jsx16(ChartLegend, { items: defaultLegendItems })
+                    showLegend && defaultLegendItems.length > 0 && /* @__PURE__ */ jsx19(ChartLegend, { items: defaultLegendItems })
                   ]
                 }
               )
             }
-          ) : /* @__PURE__ */ jsx16("div", { className: "flex items-center justify-center h-[500px]", children: /* @__PURE__ */ jsx16(Typography, { variant: "body-md", className: "text-secondary", children: "No data is available" }) }) })
+          ) : /* @__PURE__ */ jsx19("div", { className: "flex items-center justify-center h-[500px]", children: /* @__PURE__ */ jsx19(Typography, { variant: "body-md", className: "text-secondary", children: "No data is available" }) }) })
         ]
       }
     );
@@ -3565,7 +3682,7 @@ LineChart.displayName = "LineChart";
 // src/components/ui/charts/pie-chart.tsx
 import { forwardRef as forwardRef14 } from "react";
 import { PieChart as RechartsPieChart, Pie, Cell, Tooltip as Tooltip3 } from "recharts";
-import { jsx as jsx17, jsxs as jsxs13 } from "react/jsx-runtime";
+import { jsx as jsx20, jsxs as jsxs13 } from "react/jsx-runtime";
 var PieChart = forwardRef14(
   ({
     data,
@@ -3599,14 +3716,14 @@ var PieChart = forwardRef14(
         ref,
         className: `bg-light border border-subtle mx-6 ${className}`,
         children: [
-          /* @__PURE__ */ jsx17("div", { className: "flex items-center justify-between px-3 py-2 border-b border-subtle", children: /* @__PURE__ */ jsx17(Typography, { variant: "label-sm-bold", children: title }) }),
-          /* @__PURE__ */ jsx17("div", { className: "pt-2 px-2", children: hasData ? /* @__PURE__ */ jsx17("div", { className: "flex justify-center", children: /* @__PURE__ */ jsxs13(
+          /* @__PURE__ */ jsx20("div", { className: "flex items-center justify-between px-3 py-2 border-b border-subtle", children: /* @__PURE__ */ jsx20(Typography, { variant: "label-sm-bold", children: title }) }),
+          /* @__PURE__ */ jsx20("div", { className: "pt-2 px-2", children: hasData ? /* @__PURE__ */ jsx20("div", { className: "flex justify-center", children: /* @__PURE__ */ jsxs13(
             RechartsPieChart,
             {
               width: 600,
               height: CHART_CONSTANTS.LARGE_HEIGHT,
               children: [
-                /* @__PURE__ */ jsx17(
+                /* @__PURE__ */ jsx20(
                   Pie,
                   {
                     data,
@@ -3618,7 +3735,7 @@ var PieChart = forwardRef14(
                     label: showLabels,
                     labelLine: false,
                     onClick: handleClick,
-                    children: data.map((entry, index) => /* @__PURE__ */ jsx17(
+                    children: data.map((entry, index) => /* @__PURE__ */ jsx20(
                       Cell,
                       {
                         fill: entry.color || getSeriesColor(index)
@@ -3627,7 +3744,7 @@ var PieChart = forwardRef14(
                     ))
                   }
                 ),
-                /* @__PURE__ */ jsx17(
+                /* @__PURE__ */ jsx20(
                   Tooltip3,
                   {
                     content: ({
@@ -3636,7 +3753,7 @@ var PieChart = forwardRef14(
                     }) => {
                       if (active && payload && payload.length && payload[0]) {
                         const data2 = payload[0].payload;
-                        return /* @__PURE__ */ jsx17(
+                        return /* @__PURE__ */ jsx20(
                           GenericTooltip,
                           {
                             title: data2.name,
@@ -3654,10 +3771,10 @@ var PieChart = forwardRef14(
                     }
                   }
                 ),
-                showLegend && defaultLegendItems.length > 0 && /* @__PURE__ */ jsx17(ChartLegend, { items: defaultLegendItems, y: 400 })
+                showLegend && defaultLegendItems.length > 0 && /* @__PURE__ */ jsx20(ChartLegend, { items: defaultLegendItems, y: 400 })
               ]
             }
-          ) }) : /* @__PURE__ */ jsx17("div", { className: "flex items-center justify-center h-[500px]", children: /* @__PURE__ */ jsx17(Typography, { variant: "body-md", className: "text-secondary", children: "No data is available" }) }) })
+          ) }) : /* @__PURE__ */ jsx20("div", { className: "flex items-center justify-center h-[500px]", children: /* @__PURE__ */ jsx20(Typography, { variant: "body-md", className: "text-secondary", children: "No data is available" }) }) })
         ]
       }
     );
@@ -3670,7 +3787,7 @@ import { useCallback as useCallback2 } from "react";
 import {
   flexRender
 } from "@tanstack/react-table";
-import { Fragment as Fragment2, jsx as jsx18, jsxs as jsxs14 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx21, jsxs as jsxs14 } from "react/jsx-runtime";
 function Table({
   table,
   className,
@@ -3701,14 +3818,14 @@ function Table({
     [table]
   );
   return /* @__PURE__ */ jsxs14("div", { children: [
-    /* @__PURE__ */ jsx18("div", { className: cn("overflow-x-auto", className), children: /* @__PURE__ */ jsxs14("table", { className: "min-w-full divide-y divide-border", children: [
-      /* @__PURE__ */ jsx18("thead", { className: "bg-dark text-light", children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx18("tr", { children: headerGroup.headers.map((header) => /* @__PURE__ */ jsx18("th", { className: "px-6 py-3 text-left", children: /* @__PURE__ */ jsxs14(
+    /* @__PURE__ */ jsx21("div", { className: cn("overflow-x-auto", className), children: /* @__PURE__ */ jsxs14("table", { className: "min-w-full divide-y divide-border", children: [
+      /* @__PURE__ */ jsx21("thead", { className: "bg-dark text-light", children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx21("tr", { children: headerGroup.headers.map((header) => /* @__PURE__ */ jsx21("th", { className: "px-6 py-3 text-left", children: /* @__PURE__ */ jsxs14(
         "div",
         {
           className: `flex items-center space-x-1 ${header.column.getCanSort() ? "cursor-pointer select-none" : ""}`,
           onClick: header.column.getToggleSortingHandler(),
           children: [
-            /* @__PURE__ */ jsx18(
+            /* @__PURE__ */ jsx21(
               Typography,
               {
                 variant: "label-xs",
@@ -3720,13 +3837,13 @@ function Table({
               }
             ),
             header.column.getCanSort() && /* @__PURE__ */ jsxs14("span", { className: "ml-1", children: [
-              header.column.getIsSorted() === "asc" && /* @__PURE__ */ jsx18(ChevronUp, { className: "w-4 h-4 text-light" }),
-              header.column.getIsSorted() === "desc" && /* @__PURE__ */ jsx18(ChevronDown, { className: "w-4 h-4 text-light" })
+              header.column.getIsSorted() === "asc" && /* @__PURE__ */ jsx21(ChevronUp, { className: "w-4 h-4 text-light" }),
+              header.column.getIsSorted() === "desc" && /* @__PURE__ */ jsx21(ChevronDown, { className: "w-4 h-4 text-light" })
             ] })
           ]
         }
       ) }, header.id)) }, headerGroup.id)) }),
-      /* @__PURE__ */ jsx18("tbody", { className: "bg-light divide-y divide-border", children: table.getRowModel().rows.map((row) => /* @__PURE__ */ jsx18("tr", { children: row.getVisibleCells().map((cell) => /* @__PURE__ */ jsx18("td", { className: "px-6 py-4 whitespace-nowrap", children: /* @__PURE__ */ jsx18(Typography, { variant: "body-sm", children: flexRender(
+      /* @__PURE__ */ jsx21("tbody", { className: "bg-light divide-y divide-border", children: table.getRowModel().rows.map((row) => /* @__PURE__ */ jsx21("tr", { children: row.getVisibleCells().map((cell) => /* @__PURE__ */ jsx21("td", { className: "px-6 py-4 whitespace-nowrap", children: /* @__PURE__ */ jsx21(Typography, { variant: "body-sm", children: flexRender(
         cell.column.columnDef.cell,
         cell.getContext()
       ) }) }, cell.id)) }, row.id)) })
@@ -3739,9 +3856,9 @@ function Table({
           paginationClassName
         ),
         children: [
-          /* @__PURE__ */ jsx18("div", { className: "flex items-center", children: /* @__PURE__ */ jsx18(Typography, { variant: "body-sm", className: "text-secondary", children: showingText }) }),
+          /* @__PURE__ */ jsx21("div", { className: "flex items-center", children: /* @__PURE__ */ jsx21(Typography, { variant: "body-sm", className: "text-secondary", children: showingText }) }),
           /* @__PURE__ */ jsxs14("div", { className: "flex items-center space-x-1", children: [
-            /* @__PURE__ */ jsx18(
+            /* @__PURE__ */ jsx21(
               Button,
               {
                 variant: "ghost",
@@ -3749,7 +3866,7 @@ function Table({
                 onClick: handlePreviousPage,
                 disabled: !table.getCanPreviousPage(),
                 className: "p-2",
-                children: /* @__PURE__ */ jsx18(ChevronLeft, { className: "w-4 h-4" })
+                children: /* @__PURE__ */ jsx21(ChevronLeft, { className: "w-4 h-4" })
               }
             ),
             Array.from(
@@ -3766,7 +3883,7 @@ function Table({
                   pageNumber = currentPage - 2 + i;
                 }
                 const isActive = pageNumber === currentPage;
-                return /* @__PURE__ */ jsx18(
+                return /* @__PURE__ */ jsx21(
                   Button,
                   {
                     variant: isActive ? "default" : "ghost",
@@ -3780,10 +3897,10 @@ function Table({
               }
             ),
             table.getPageCount() > 5 && currentPage < totalPages - 3 && /* @__PURE__ */ jsxs14(Fragment2, { children: [
-              /* @__PURE__ */ jsx18("span", { className: "px-1 text-secondary", children: "..." }),
-              /* @__PURE__ */ jsx18(Typography, { variant: "body-sm", className: "text-secondary", children: totalPages })
+              /* @__PURE__ */ jsx21("span", { className: "px-1 text-secondary", children: "..." }),
+              /* @__PURE__ */ jsx21(Typography, { variant: "body-sm", className: "text-secondary", children: totalPages })
             ] }),
-            /* @__PURE__ */ jsx18(
+            /* @__PURE__ */ jsx21(
               Button,
               {
                 variant: "ghost",
@@ -3791,12 +3908,12 @@ function Table({
                 onClick: handleNextPage,
                 disabled: !table.getCanNextPage(),
                 className: "p-2",
-                children: /* @__PURE__ */ jsx18(ChevronRight, { className: "w-4 h-4" })
+                children: /* @__PURE__ */ jsx21(ChevronRight, { className: "w-4 h-4" })
               }
             )
           ] }),
           /* @__PURE__ */ jsxs14("div", { className: "flex items-center gap-3 w-48", children: [
-            /* @__PURE__ */ jsx18(
+            /* @__PURE__ */ jsx21(
               Typography,
               {
                 variant: "body-sm",
@@ -3810,8 +3927,8 @@ function Table({
                 value: table.getState().pagination.pageSize.toString(),
                 onValueChange: handlePageSizeChange,
                 children: [
-                  /* @__PURE__ */ jsx18(SelectTrigger, { className: "min-w-0 h-8", children: /* @__PURE__ */ jsx18(SelectValue, {}) }),
-                  /* @__PURE__ */ jsx18(SelectContent, { children: [10, 20, 50, 100].map((size) => /* @__PURE__ */ jsx18(SelectItem, { value: size.toString(), children: size }, size)) })
+                  /* @__PURE__ */ jsx21(SelectTrigger, { className: "min-w-0 h-8", children: /* @__PURE__ */ jsx21(SelectValue, {}) }),
+                  /* @__PURE__ */ jsx21(SelectContent, { children: [10, 20, 50, 100].map((size) => /* @__PURE__ */ jsx21(SelectItem, { value: size.toString(), children: size }, size)) })
                 ]
               }
             )
@@ -3877,9 +3994,18 @@ export {
   Exclamation,
   EyeClosed,
   EyeOpen,
+  Field,
+  FieldContent,
+  FieldDescription,
+  FieldError,
+  FieldGroup,
+  FieldLabel,
+  FieldLegend,
+  FieldSeparator,
+  FieldSet,
+  FieldTitle,
   Filter,
   FilterDescending,
-  FormField,
   GenericTooltip,
   GraphBar,
   GraphDonut,
@@ -3888,7 +4014,8 @@ export {
   HamburgerMenu,
   Home,
   Information,
-  TypedInput as Input,
+  Input,
+  Label2 as Label,
   LineChart,
   Location,
   Lock,
@@ -3910,6 +4037,7 @@ export {
   SelectSeparator,
   SelectTrigger,
   SelectValue,
+  Separator2 as Separator,
   Share,
   Star,
   Statement,
@@ -3919,6 +4047,7 @@ export {
   TabsContent,
   TabsList,
   TabsTrigger,
+  Textarea,
   TooltipContainer,
   TooltipItem,
   Trash,
@@ -3945,7 +4074,6 @@ export {
   getHeatmapColor,
   getPerformanceColor,
   getSeriesColor,
-  inputVariants,
   selectTriggerVariants,
   tabsVariants,
   typographyVariants,