@douglasneuroinformatics/libui 4.9.1 → 5.0.1

package/dist/components.js

@@ -10,6 +10,7 @@ import {
 import {
   ChartContext,
   useChart,
+  useDestructiveAction,
   useNotificationsStore,
   useTheme,
   useTranslation
@@ -1530,26 +1531,313 @@ var CopyButton = ({
 };
 
 // src/components/DataTable/DataTable.tsx
-import { useEffect, useMemo as useMemo2, useState as useState3 } from "react";
-import {
-  flexRender,
-  getCoreRowModel,
-  getFilteredRowModel,
-  getPaginationRowModel,
-  getSortedRowModel,
-  useReactTable
-} from "@tanstack/react-table";
-import { range as range2 } from "lodash-es";
-import { ArrowUpDownIcon, ChevronLeftIcon, ChevronRightIcon as ChevronRightIcon4, ChevronsLeftIcon, ChevronsRightIcon } from "lucide-react";
+import { useEffect as useEffect3, useRef as useRef2 } from "react";
+
+// src/components/DataTable/context.ts
+import { createContext } from "react";
+var DataTableContext = createContext(null);
+
+// src/components/DataTable/constants.ts
+var ACTIONS_COLUMN_ID = "__actions";
+var MEMOIZED_HANDLE_ID = Symbol();
+var ROW_ACTIONS_METADATA_KEY = Symbol();
+var TABLE_NAME_METADATA_KEY = Symbol();
+
+// src/components/DataTable/DataTableEmptyState.tsx
+import { jsx as jsx70, jsxs as jsxs18 } from "react/jsx-runtime";
+var DataTableEmptyState = ({
+  className,
+  description,
+  icon: Icon,
+  title
+}) => {
+  return /* @__PURE__ */ jsxs18("div", { className: cn("flex flex-col items-center justify-center", className), "data-testid": "data-table-empty-state", children: [
+    Icon && /* @__PURE__ */ jsx70(Icon, { className: "text-muted-foreground mb-2", style: { height: "20px", width: "20px" } }),
+    /* @__PURE__ */ jsx70("h3", { className: "text-foreground text-sm font-semibold", children: title }),
+    description && /* @__PURE__ */ jsx70("p", { className: "text-muted-foreground mt-1 text-xs", children: description })
+  ] });
+};
+
+// src/components/DataTable/hooks.ts
+import { useContext, useEffect, useRef } from "react";
+import { useStore } from "zustand";
+import { useStoreWithEqualityFn } from "zustand/traditional";
+function useContainerRef() {
+  const containerRef = useRef(null);
+  const setContainerWidth = useDataTableStore((state) => state.setContainerWidth);
+  useEffect(() => {
+    let timeout;
+    let delay = 0;
+    const observer = new ResizeObserver(([entry]) => {
+      clearTimeout(timeout);
+      timeout = setTimeout(() => {
+        delay = 100;
+        if (entry?.contentBoxSize[0]?.inlineSize) {
+          const containerWidth = entry.contentBoxSize[0].inlineSize;
+          setContainerWidth(containerWidth);
+        }
+      }, delay);
+    });
+    if (containerRef.current) {
+      observer.observe(containerRef.current);
+    }
+    return () => {
+      observer.disconnect();
+      clearTimeout(timeout);
+    };
+  }, []);
+  return containerRef;
+}
+function useDataTableStore(selector) {
+  const context = useContext(DataTableContext);
+  return useStore(context.store, selector);
+}
+function useDataTableHandle(key, forceRender = false) {
+  const context = useContext(DataTableContext);
+  const { handle } = useStoreWithEqualityFn(
+    context.store,
+    // the function is already updated by the time of equality check, so we cache it here
+    (store) => ({
+      globalKey: store._key,
+      handle: store.$handles[key],
+      handleKey: store.$handles[key][MEMOIZED_HANDLE_ID]
+    }),
+    forceRender ? (a, b) => a.globalKey === b.globalKey : (a, b) => a.handleKey === b.handleKey
+  );
+  return handle();
+}
+
+// src/components/DataTable/utils.tsx
+import { sum } from "lodash-es";
+
+// src/components/DataTable/DataTableRowActionCell.tsx
+import { MoreHorizontalIcon as MoreHorizontalIcon2 } from "lucide-react";
+import { jsx as jsx71, jsxs as jsxs19 } from "react/jsx-runtime";
+var DataTableRowActionCell = ({ row, table }) => {
+  const destructiveAction = useDestructiveAction();
+  const rowActions = table.options.meta?.[ROW_ACTIONS_METADATA_KEY];
+  const tableName = table.options.meta?.[TABLE_NAME_METADATA_KEY];
+  const { t } = useTranslation();
+  if (!rowActions) {
+    console.error("Expected rowActions to be defined in table metadata");
+    return null;
+  }
+  return /* @__PURE__ */ jsx71("div", { className: "flex h-full w-full items-center justify-center", children: /* @__PURE__ */ jsxs19(DropdownMenu, { children: [
+    /* @__PURE__ */ jsx71(DropdownMenu.Trigger, { asChild: true, children: /* @__PURE__ */ jsx71(
+      Button,
+      {
+        className: "-m-1.5",
+        "data-table-name": table.options.meta?.name,
+        "data-testid": "row-actions-trigger",
+        size: "icon",
+        variant: "ghost",
+        children: /* @__PURE__ */ jsx71(MoreHorizontalIcon2, { className: "h-4 w-4" })
+      }
+    ) }),
+    /* @__PURE__ */ jsxs19(DropdownMenu.Content, { align: "end", "data-table-name": tableName, "data-testid": "row-actions-dropdown", children: [
+      /* @__PURE__ */ jsx71(DropdownMenu.Label, { children: t({
+        en: "Actions",
+        fr: "Actions"
+      }) }),
+      rowActions.map(({ destructive, disabled, label, onSelect }, i) => /* @__PURE__ */ jsx71(
+        DropdownMenu.Item,
+        {
+          className: cn(
+            "cursor-pointer data-[disabled]:pointer-events-auto data-[disabled]:cursor-not-allowed",
+            destructive && "text-destructive"
+          ),
+          disabled: typeof disabled === "function" ? disabled(row.original) : disabled,
+          onSelect: () => {
+            if (destructive) {
+              destructiveAction(() => void onSelect(row.original, table));
+            } else {
+              void onSelect(row.original, table);
+            }
+          },
+          children: label
+        },
+        i
+      ))
+    ] })
+  ] }) });
+};
+
+// src/components/DataTable/utils.tsx
+import { jsx as jsx72 } from "react/jsx-runtime";
+function applyUpdater(updater, current) {
+  return typeof updater === "function" ? updater(current) : updater;
+}
+function calculateColumnSizing(table, containerWidth) {
+  const updatedColumnSizing = {};
+  const visibleCenterLeafColumns = table.getCenterLeafColumns().filter((column) => column.getIsVisible());
+  const visibleCenterLeafColumnIds = visibleCenterLeafColumns.map((column) => column.id);
+  const visibleNonCenteredLeafColumns = table.getVisibleLeafColumns().filter((column) => {
+    return !visibleCenterLeafColumnIds.includes(column.id);
+  });
+  visibleNonCenteredLeafColumns.forEach((column) => {
+    const defaultSize = column.columnDef.size;
+    if (!defaultSize) {
+      console.error(`Size must be specified for pinned column with ID '${column.id}', defaulting to 200px`);
+      updatedColumnSizing[column.id] = 200;
+    } else {
+      updatedColumnSizing[column.id] = defaultSize;
+    }
+  });
+  const nonCenteredColumnsSize = sum(Object.values(updatedColumnSizing));
+  const availableCenterSize = containerWidth - nonCenteredColumnsSize;
+  let maxCenterColumns;
+  if (containerWidth < 512) {
+    maxCenterColumns = 1;
+  } else if (containerWidth < 768) {
+    maxCenterColumns = 2;
+  } else if (containerWidth < 1024) {
+    maxCenterColumns = 3;
+  } else if (containerWidth < 1280) {
+    maxCenterColumns = 4;
+  } else {
+    maxCenterColumns = 5;
+  }
+  const centerColumnsToDisplay = Math.min(visibleCenterLeafColumns.length, maxCenterColumns);
+  if (centerColumnsToDisplay) {
+    visibleCenterLeafColumns.forEach((column) => {
+      updatedColumnSizing[column.id] = availableCenterSize / centerColumnsToDisplay;
+    });
+  } else {
+    visibleNonCenteredLeafColumns.forEach((column) => {
+      updatedColumnSizing[column.id] = containerWidth / visibleNonCenteredLeafColumns.length;
+    });
+  }
+  return updatedColumnSizing;
+}
+function defineMemoizedHandle(target) {
+  const handle = target;
+  handle[MEMOIZED_HANDLE_ID] = Symbol();
+  handle.invalidate = function() {
+    this[MEMOIZED_HANDLE_ID] = Symbol();
+  };
+  return handle;
+}
+function flexRender(Comp, props) {
+  return !Comp ? null : isReactComponent(Comp) ? /* @__PURE__ */ jsx72(Comp, { ...props }) : Comp;
+}
+function getColumnsWithActions({ columns, rowActions }) {
+  if (!rowActions) {
+    return columns;
+  }
+  return [
+    ...columns,
+    {
+      cell: DataTableRowActionCell,
+      enableHiding: false,
+      enableResizing: false,
+      id: ACTIONS_COLUMN_ID,
+      size: 64
+    }
+  ];
+}
+function getTanstackTableState({ initialState, rowActions }) {
+  var _a;
+  const { columnFilters = [], columnPinning = {}, sorting = [] } = initialState ?? {};
+  const state = {
+    columnFilters,
+    columnOrder: [],
+    columnPinning,
+    columnSizing: {},
+    columnSizingInfo: {
+      columnSizingStart: [],
+      deltaOffset: null,
+      deltaPercentage: null,
+      isResizingColumn: false,
+      startOffset: null,
+      startSize: null
+    },
+    columnVisibility: {},
+    expanded: {},
+    globalFilter: void 0,
+    grouping: [],
+    pagination: {
+      pageIndex: 0,
+      pageSize: 10
+    },
+    rowPinning: {},
+    rowSelection: {},
+    sorting
+  };
+  if (rowActions) {
+    (_a = state.columnPinning).right ?? (_a.right = []);
+    state.columnPinning.right.push(ACTIONS_COLUMN_ID);
+  }
+  return state;
+}
+function isReactComponent(component) {
+  return typeof component === "function";
+}
+
+// src/components/DataTable/DataTableBody.tsx
+import { jsx as jsx73 } from "react/jsx-runtime";
+var DataTableBody = ({
+  emptyStateProps
+}) => {
+  const rows = useDataTableHandle("rows");
+  const { t } = useTranslation();
+  return /* @__PURE__ */ jsx73("div", { className: "flex flex-col", "data-testid": "data-table-body", children: rows.length === 0 ? /* @__PURE__ */ jsx73(
+    "div",
+    {
+      className: "sticky left-0 flex h-72 items-center justify-center px-6 py-3",
+      style: {
+        width: "calc(var(--table-container-width) * 1px)"
+      },
+      children: /* @__PURE__ */ jsx73(
+        DataTableEmptyState,
+        {
+          title: t({
+            en: "No Results",
+            fr: "Aucun r\xE9sultat"
+          }),
+          ...emptyStateProps
+        }
+      )
+    }
+  ) : rows.map((row) => /* @__PURE__ */ jsx73("div", { className: "flex border-b last:border-b-0", "data-testid": "data-table-row", id: row.id, children: row.getVisibleCells().map((cell) => {
+    const style = {
+      width: `calc(var(--col-${cell.column.id}-size) * 1px)`
+    };
+    if (cell.column.getIsPinned() === "left") {
+      style.left = `${cell.column.getStart("left")}px`;
+      style.position = "sticky";
+      style.zIndex = 20;
+    } else if (cell.column.getIsPinned() === "right") {
+      style.right = `${cell.column.getAfter("right")}px`;
+      style.position = "sticky";
+      style.zIndex = 20;
+    }
+    if (cell.column.getIsLastColumn("center")) {
+      style.borderRight = "none";
+    }
+    const content = flexRender(cell.column.columnDef.cell, cell.getContext());
+    return /* @__PURE__ */ jsx73(
+      "div",
+      {
+        className: "bg-background flex items-center border-r px-4 py-2 last:border-r-0",
+        style,
+        children: content && typeof content === "object" ? content : /* @__PURE__ */ jsx73("span", { className: "block truncate", children: content })
+      },
+      cell.id
+    );
+  }) }, row.id)) });
+};
+
+// src/components/DataTable/DataTableControls.tsx
+import { useEffect as useEffect2, useState as useState3 } from "react";
 
 // src/components/SearchBar/SearchBar.tsx
 import { SearchIcon as SearchIcon2 } from "lucide-react";
 
 // src/components/Input/Input.tsx
 import * as React15 from "react";
-import { jsx as jsx70 } from "react/jsx-runtime";
+import { jsx as jsx74 } from "react/jsx-runtime";
 var Input = React15.forwardRef(function Input2({ className, type, ...props }, ref) {
-  return /* @__PURE__ */ jsx70(
+  return /* @__PURE__ */ jsx74(
     "input",
     {
       autoComplete: "off",
@@ -1566,7 +1854,7 @@ var Input = React15.forwardRef(function Input2({ className, type, ...props }, re
 });
 
 // src/components/SearchBar/SearchBar.tsx
-import { jsx as jsx71, jsxs as jsxs18 } from "react/jsx-runtime";
+import { jsx as jsx75, jsxs as jsxs20 } from "react/jsx-runtime";
 var SearchBar = ({
   className,
   onClick,
@@ -1577,9 +1865,9 @@ var SearchBar = ({
   ...props
 }) => {
   const { t } = useTranslation("libui");
-  return /* @__PURE__ */ jsxs18("form", { className: cn("relative", className), ...props, children: [
-    /* @__PURE__ */ jsx71(SearchIcon2, { className: "absolute left-2 top-2.5 h-4 w-4 text-muted-foreground" }),
-    /* @__PURE__ */ jsx71(
+  return /* @__PURE__ */ jsxs20("form", { className: cn("relative", className), ...props, children: [
+    /* @__PURE__ */ jsx75(SearchIcon2, { className: "absolute left-2 top-2.5 h-4 w-4 text-muted-foreground" }),
+    /* @__PURE__ */ jsx75(
       Input,
       {
         className: "pl-8",
@@ -1596,285 +1884,384 @@ var SearchBar = ({
   ] });
 };
 
-// src/components/DataTable/DestructiveActionDialog.tsx
-import { jsx as jsx72, jsxs as jsxs19 } from "react/jsx-runtime";
-var DestructiveActionDialog = ({ destructiveActionPending, setDestructiveActionPending }) => {
+// src/components/DataTable/DataTableControls.tsx
+import { jsx as jsx76, jsxs as jsxs21 } from "react/jsx-runtime";
+var DataTableControls = ({
+  onSearchChange,
+  togglesComponent: Toggles
+}) => {
+  const table = useDataTableHandle("table");
+  const setGlobalFilter = useDataTableStore((store) => store.setGlobalFilter);
+  const [searchValue, setSearchValue] = useState3("");
   const { t } = useTranslation();
-  return /* @__PURE__ */ jsx72(
-    Dialog,
-    {
-      open: destructiveActionPending !== null,
-      onOpenChange: (open) => {
-        if (!open) {
-          setDestructiveActionPending(null);
+  useEffect2(() => {
+    if (onSearchChange) {
+      onSearchChange(searchValue, table);
+    } else {
+      setGlobalFilter(searchValue || void 0);
+    }
+  }, [onSearchChange, searchValue]);
+  return /* @__PURE__ */ jsxs21("div", { className: "flex flex-col items-center gap-4 pb-4 md:flex-row", children: [
+    /* @__PURE__ */ jsx76(
+      SearchBar,
+      {
+        className: "w-full grow",
+        "data-testid": "data-table-search-bar",
+        placeholder: t({
+          en: "Search...",
+          fr: "Rechercher..."
+        }),
+        value: searchValue,
+        onValueChange: (value) => {
+          setSearchValue(value);
         }
-      },
-      children: /* @__PURE__ */ jsxs19(Dialog.Content, { onOpenAutoFocus: (event) => event.preventDefault(), children: [
-        /* @__PURE__ */ jsxs19(Dialog.Header, { children: [
-          /* @__PURE__ */ jsx72(Dialog.Title, { children: t({
-            en: "Confirm Action",
-            fr: "Confirmer l'action"
-          }) }),
-          /* @__PURE__ */ jsx72(Dialog.Description, { children: t({
-            en: "This action cannot be reversed. Please confirm that you would like to continue.",
-            fr: "Cette action ne peut \xEAtre invers\xE9e. Veuillez confirmer que vous souhaitez poursuivre."
-          }) })
-        ] }),
-        /* @__PURE__ */ jsxs19(Dialog.Footer, { children: [
-          /* @__PURE__ */ jsx72(
-            Button,
-            {
-              className: "min-w-16",
-              type: "button",
-              variant: "danger",
-              onClick: async () => {
-                await destructiveActionPending?.();
-                setDestructiveActionPending(null);
-              },
-              children: t("libui.yes")
-            }
-          ),
-          /* @__PURE__ */ jsx72(
-            Button,
+      }
+    ),
+    Toggles && /* @__PURE__ */ jsx76("div", { className: "flex w-full items-center gap-2 md:w-auto", children: /* @__PURE__ */ jsx76(Toggles, { table }) })
+  ] });
+};
+
+// src/components/DataTable/DataTableHead.tsx
+import { jsx as jsx77, jsxs as jsxs22 } from "react/jsx-runtime";
+var DataTableHead = () => {
+  const headerGroups = useDataTableHandle("headerGroups");
+  const rowCount = useDataTableHandle("rowCount");
+  return /* @__PURE__ */ jsx77("div", { className: "flex flex-col", "data-testid": "data-table-head", style: { display: rowCount ? "flex" : "none" }, children: headerGroups.map((headerGroup) => /* @__PURE__ */ jsx77("div", { className: "flex", children: headerGroup.headers.map((header) => {
+    const style = {
+      // TODO - add more robust solution - should be able to block centering also - also set correct typing
+      justifyContent: header.column.columnDef.meta?.centered ? "center" : "start",
+      width: `calc(var(--header-${header?.id}-size) * 1px)`
+    };
+    if (header.column.getIsPinned() === "left") {
+      style.left = `${header.column.getStart("left")}px`;
+      style.position = "sticky";
+      style.zIndex = 20;
+    } else if (header.column.getIsPinned() === "right") {
+      style.right = `${header.column.getAfter("right")}px`;
+      style.position = "sticky";
+      style.zIndex = 20;
+    }
+    if (header.column.getIsLastColumn("center")) {
+      style.borderRight = "none";
+    }
+    return /* @__PURE__ */ jsxs22(
+      "div",
+      {
+        className: "group/cell bg-background relative flex items-center border-r border-b px-4 py-2 last:border-r-0",
+        style,
+        children: [
+          !header.isPlaceholder && flexRender(header.column.columnDef.header, header.getContext()),
+          header.column.getCanResize() && /* @__PURE__ */ jsx77("div", { className: "absolute top-0 right-0 z-10 h-full w-[1px]", children: /* @__PURE__ */ jsx77(
+            "button",
             {
-              className: "min-w-16",
+              className: "group-hover/cell:bg-border absolute -right-[1px] h-full w-full cursor-col-resize touch-none rounded-md bg-transparent select-none group-hover/cell:-right-[2px] group-hover/cell:w-[3px]",
+              style: { transform: header.column.getIsLastColumn() ? "translateX(-2px)" : void 0 },
               type: "button",
-              variant: "primary",
-              onClick: () => setDestructiveActionPending(null),
-              children: t("libui.no")
+              onDoubleClick: header.column.resetSize,
+              onMouseDown: header.getResizeHandler(),
+              onTouchStart: header.getResizeHandler()
             }
-          )
-        ] })
-      ] })
-    }
-  );
+          ) })
+        ]
+      },
+      header.id
+    );
+  }) }, headerGroup.id)) });
 };
 
-// src/components/DataTable/RowActionsDropdown.tsx
-import { MoreHorizontalIcon as MoreHorizontalIcon2 } from "lucide-react";
-import { jsx as jsx73, jsxs as jsxs20 } from "react/jsx-runtime";
-var RowActionsDropdown = ({
-  row,
-  rowActions,
-  setDestructiveActionPending
-}) => {
-  const { t } = useTranslation();
-  return /* @__PURE__ */ jsx73("div", { className: "flex w-full justify-end", children: /* @__PURE__ */ jsxs20(DropdownMenu, { children: [
-    /* @__PURE__ */ jsx73(DropdownMenu.Trigger, { asChild: true, children: /* @__PURE__ */ jsx73(Button, { className: "-m-1.5", size: "icon", variant: "ghost", children: /* @__PURE__ */ jsx73(MoreHorizontalIcon2, { className: "h-4 w-4" }) }) }),
-    /* @__PURE__ */ jsxs20(DropdownMenu.Content, { align: "end", children: [
-      /* @__PURE__ */ jsx73(DropdownMenu.Label, { children: t({
-        en: "Actions",
-        fr: "Actions"
-      }) }),
-      rowActions.map(({ destructive, label, onSelect }, i) => /* @__PURE__ */ jsx73(
-        DropdownMenu.Item,
-        {
-          className: destructive ? "text-destructive" : void 0,
-          onSelect: () => {
-            if (destructive) {
-              setDestructiveActionPending(() => () => void onSelect(row.original));
-            } else {
-              void onSelect(row.original);
-            }
-          },
-          children: label
-        },
-        i
-      ))
-    ] })
-  ] }) });
+// src/components/DataTable/DataTablePagination.tsx
+import { range as range2 } from "lodash-es";
+import { ChevronLeftIcon, ChevronRightIcon as ChevronRightIcon4, ChevronsLeftIcon, ChevronsRightIcon } from "lucide-react";
+import { jsx as jsx78, jsxs as jsxs23 } from "react/jsx-runtime";
+var DataTablePagination = () => {
+  const { pageCount, pageIndex } = useDataTableHandle("paginationInfo");
+  const setPageIndex = useDataTableStore((store) => store.setPageIndex);
+  const start = Math.max(0, Math.min(pageIndex - 1, pageCount - 3));
+  const end = Math.max(Math.min(start + 3, pageCount), 1);
+  const pageIndexOptions = range2(start, end);
+  const lastPageIndex = pageCount - 1;
+  return /* @__PURE__ */ jsxs23("div", { className: "mx-auto flex w-min gap-0.5 py-4 [&>button]:h-9", children: [
+    /* @__PURE__ */ jsx78(Button, { disabled: pageIndex === 0, size: "icon", type: "button", variant: "ghost", onClick: () => setPageIndex(0), children: /* @__PURE__ */ jsx78(ChevronsLeftIcon, { className: "h-4 w-4" }) }),
+    /* @__PURE__ */ jsx78(
+      Button,
+      {
+        disabled: pageIndex === 0,
+        size: "icon",
+        type: "button",
+        variant: "ghost",
+        onClick: () => setPageIndex(pageIndex - 1),
+        children: /* @__PURE__ */ jsx78(ChevronLeftIcon, { className: "h-4 w-4" })
+      }
+    ),
+    pageIndexOptions.map((index) => /* @__PURE__ */ jsx78(
+      Button,
+      {
+        size: "icon",
+        type: "button",
+        variant: index === pageIndex ? "outline" : "ghost",
+        onClick: () => setPageIndex(index),
+        children: index + 1
+      },
+      index
+    )),
+    /* @__PURE__ */ jsx78(
+      Button,
+      {
+        disabled: pageIndex === lastPageIndex,
+        size: "icon",
+        type: "button",
+        variant: "ghost",
+        onClick: () => setPageIndex(pageIndex + 1),
+        children: /* @__PURE__ */ jsx78(ChevronRightIcon4, { className: "h-4 w-4" })
+      }
+    ),
+    /* @__PURE__ */ jsx78(
+      Button,
+      {
+        disabled: pageIndex === lastPageIndex,
+        size: "icon",
+        type: "button",
+        variant: "ghost",
+        onClick: () => setPageIndex(lastPageIndex),
+        children: /* @__PURE__ */ jsx78(ChevronsRightIcon, { className: "h-4 w-4" })
+      }
+    )
+  ] });
 };
 
-// src/components/DataTable/DataTable.tsx
-import { jsx as jsx74, jsxs as jsxs21 } from "react/jsx-runtime";
-function isStaticColumn(column) {
-  return typeof column.key === "string";
-}
-var DataTable = ({
-  columns,
-  data,
-  headerActions,
-  rowActions,
-  search
+// src/components/DataTable/DataTableContent.tsx
+import { jsx as jsx79, jsxs as jsxs24 } from "react/jsx-runtime";
+var DataTableContent = ({
+  emptyStateProps,
+  onSearchChange,
+  togglesComponent
 }) => {
-  const [columnFilters, setColumnFilters] = useState3([]);
-  const [sorting, setSorting] = useState3([]);
-  const [searchValue, setSearchValue] = useState3("");
-  const [destructiveActionPending, setDestructiveActionPending] = useState3(null);
-  const { t } = useTranslation("libui");
-  const [pagination, setPagination] = useState3({
-    pageIndex: 0,
-    pageSize: 10
-  });
-  const columnDefs = useMemo2(() => {
-    const result = columns.map((col) => {
-      let def;
-      if (isStaticColumn(col)) {
-        def = {
-          accessorKey: col.key,
-          header: col.sortable ? ({ column }) => /* @__PURE__ */ jsxs21(
-            "button",
-            {
-              className: "flex items-center justify-between gap-2",
-              onClick: () => column.toggleSorting(column.getIsSorted() === "asc"),
-              children: [
-                col.label,
-                /* @__PURE__ */ jsx74(ArrowUpDownIcon, { className: "h-4 w-4" })
-              ]
-            }
-          ) : col.label
-        };
-        if (col.format) {
-          def.cell = ({ getValue }) => {
-            const value = getValue();
-            if (typeof col.format === "function") {
-              return col.format(value);
-            } else if (col.format === "email") {
-              return /* @__PURE__ */ jsx74("a", { className: "hover:underline", href: `mailto:${value}`, children: value });
-            }
-            return value;
-          };
-        }
-      } else {
-        def = {
-          accessorFn: col.compute,
-          header: col.label
-        };
-      }
-      return def;
-    });
-    if (rowActions) {
-      result.push({
-        cell: ({ row }) => {
-          return /* @__PURE__ */ jsx74(
-            RowActionsDropdown,
-            {
-              row,
-              rowActions,
-              setDestructiveActionPending
-            }
-          );
-        },
-        id: "__actions"
-      });
-    }
-    return result;
-  }, [columns]);
-  const table = useReactTable({
-    columns: columnDefs,
-    data,
-    getCoreRowModel: getCoreRowModel(),
-    getFilteredRowModel: getFilteredRowModel(),
-    getPaginationRowModel: getPaginationRowModel(),
-    getSortedRowModel: getSortedRowModel(),
-    onColumnFiltersChange: setColumnFilters,
-    onPaginationChange: setPagination,
-    onSortingChange: setSorting,
-    state: {
-      columnFilters,
-      pagination,
-      sorting
-    }
-  });
-  useEffect(() => {
-    if (search) {
-      table.getColumn(search.key)?.setFilterValue(searchValue);
+  const containerRef = useContainerRef();
+  const meta = useDataTableHandle("tableMeta");
+  const style = useDataTableStore((state) => state.style);
+  return /* @__PURE__ */ jsxs24(
+    "div",
+    {
+      className: "bg-background flex w-full flex-col",
+      "data-name": meta[TABLE_NAME_METADATA_KEY],
+      "data-testid": "data-table",
+      children: [
+        /* @__PURE__ */ jsx79(DataTableControls, { togglesComponent, onSearchChange }),
+        /* @__PURE__ */ jsx79("div", { className: "relative w-full overflow-auto rounded-md border", ref: containerRef, children: /* @__PURE__ */ jsxs24("div", { className: "flex min-w-full flex-col text-sm tracking-tight", style, children: [
+          /* @__PURE__ */ jsx79(DataTableHead, {}),
+          /* @__PURE__ */ jsx79(DataTableBody, { emptyStateProps })
+        ] }) }),
+        /* @__PURE__ */ jsx79(DataTablePagination, {})
+      ]
     }
-  }, [table, searchValue]);
-  const headerGroups = table.getHeaderGroups();
-  const { rows } = table.getRowModel();
-  const pageCount = table.getPageCount();
-  const currentPage = pagination.pageIndex;
-  const start = Math.max(0, Math.min(currentPage - 1, pageCount - 3));
-  const end = Math.min(start + 3, pageCount);
-  const pageIndexOptions = range2(start, end);
-  return /* @__PURE__ */ jsxs21("div", { className: "flex flex-col", children: [
-    /* @__PURE__ */ jsx74(
-      DestructiveActionDialog,
-      {
-        destructiveActionPending,
-        setDestructiveActionPending
+  );
+};
+
+// src/components/DataTable/store.ts
+import {
+  createTable,
+  getCoreRowModel,
+  getFilteredRowModel,
+  getPaginationRowModel,
+  getSortedRowModel
+} from "@tanstack/table-core";
+import { createStore } from "zustand";
+function createDataTableStore(params) {
+  return createStore((set2, get2) => {
+    const _state = getTanstackTableState(params);
+    const invalidateHandles = (keys) => {
+      set2((state) => {
+        (keys ?? Object.keys(state.$handles)).forEach((key) => {
+          state.$handles[key].invalidate();
+        });
+        return { _key: Symbol() };
+      });
+    };
+    const setTableState = (key, updaterOrValue) => {
+      const state = table.getState();
+      const value = applyUpdater(updaterOrValue, state[key]);
+      table.setOptions((prev) => ({ ...prev, state: { ...prev.state, [key]: value } }));
+    };
+    const updateColumnSizing = () => {
+      const { _containerWidth } = get2();
+      if (!_containerWidth) {
+        return;
       }
-    ),
-    search && /* @__PURE__ */ jsxs21("div", { className: "flex items-center gap-4 py-4", children: [
-      /* @__PURE__ */ jsx74(
-        SearchBar,
-        {
-          className: "grow",
-          placeholder: search.placeholder,
-          value: searchValue,
-          onValueChange: setSearchValue
+      setTableState("columnSizing", calculateColumnSizing(table, _containerWidth));
+    };
+    const updateStyle = () => {
+      set2((state) => {
+        const headers = table.getFlatHeaders();
+        const style = {
+          width: table.getTotalSize()
+        };
+        if (state._containerWidth === null) {
+          style["--table-container-width"] = state._containerWidth;
+          style.visibility = "hidden";
+        } else {
+          style["--table-container-width"] = state._containerWidth;
+          style.visibility = "visible";
         }
-      ),
-      headerActions && /* @__PURE__ */ jsx74("div", { className: "flex gap-2", children: headerActions.map(({ label, onClick }, i) => /* @__PURE__ */ jsx74(Button, { type: "button", variant: "outline", onClick, children: label }, i)) })
-    ] }),
-    /* @__PURE__ */ jsx74("div", { className: "rounded-md border", children: /* @__PURE__ */ jsxs21(Table, { children: [
-      /* @__PURE__ */ jsx74(Table.Header, { children: headerGroups.map((headerGroup) => /* @__PURE__ */ jsx74(Table.Row, { children: headerGroup.headers.map((header) => {
-        return /* @__PURE__ */ jsx74(Table.Head, { children: header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext()) }, header.id);
-      }) }, headerGroup.id)) }),
-      /* @__PURE__ */ jsx74(Table.Body, { children: rows?.length ? rows.map((row) => /* @__PURE__ */ jsx74(Table.Row, { "data-state": row.getIsSelected() && "selected", children: row.getVisibleCells().map((cell) => /* @__PURE__ */ jsx74(Table.Cell, { children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id)) }, row.id)) : /* @__PURE__ */ jsx74(Table.Row, { children: /* @__PURE__ */ jsx74(Table.Cell, { className: "h-24 text-center", colSpan: rowActions ? columns.length + 1 : columns.length, children: t({
-        en: "No Results",
-        fr: "Aucun r\xE9sultat"
-      }) }) }) })
-    ] }) }),
-    /* @__PURE__ */ jsxs21("div", { className: "flex w-min gap-0.5 py-4 [&>button]:h-9", children: [
-      /* @__PURE__ */ jsx74(
-        Button,
-        {
-          disabled: !table.getCanPreviousPage(),
-          size: "icon",
-          type: "button",
-          variant: "ghost",
-          onClick: () => table.firstPage(),
-          children: /* @__PURE__ */ jsx74(ChevronsLeftIcon, { className: "h-4 w-4" })
+        for (const header of headers) {
+          style[`--header-${header.id}-size`] = header.getSize();
+          style[`--col-${header.column.id}-size`] = header.column.getSize();
         }
-      ),
-      /* @__PURE__ */ jsx74(
-        Button,
-        {
-          disabled: !table.getCanPreviousPage(),
-          size: "icon",
-          type: "button",
-          variant: "ghost",
-          onClick: () => table.previousPage(),
-          children: /* @__PURE__ */ jsx74(ChevronLeftIcon, { className: "h-4 w-4" })
+        return { style };
+      });
+    };
+    const table = createTable({
+      columnResizeMode: "onChange",
+      columns: getColumnsWithActions(params),
+      data: params.data,
+      enableSortingRemoval: false,
+      getCoreRowModel: getCoreRowModel(),
+      getFilteredRowModel: getFilteredRowModel(),
+      getPaginationRowModel: getPaginationRowModel(),
+      getSortedRowModel: getSortedRowModel(),
+      meta: {
+        ...params.meta,
+        [ROW_ACTIONS_METADATA_KEY]: params.rowActions,
+        [TABLE_NAME_METADATA_KEY]: params.tableName
+      },
+      onColumnFiltersChange: (updaterOrValue) => {
+        setTableState("columnFilters", updaterOrValue);
+        invalidateHandles();
+      },
+      onColumnPinningChange: (updaterOrValue) => {
+        setTableState("columnPinning", updaterOrValue);
+        invalidateHandles();
+      },
+      onColumnSizingChange: (updaterOrValue) => {
+        const { _containerWidth: containerWidth } = get2();
+        const { columnSizing: prevColumnSizing } = table.getState();
+        if (!containerWidth) {
+          console.error("Cannot set column sizing: container width is null");
+          return;
         }
-      ),
-      pageIndexOptions.map((index) => /* @__PURE__ */ jsx74(
-        Button,
-        {
-          size: "icon",
-          type: "button",
-          variant: index === pagination.pageIndex ? "outline" : "ghost",
-          onClick: () => table.setPageIndex(index),
-          children: index + 1
-        },
-        index
-      )),
-      /* @__PURE__ */ jsx74(
-        Button,
-        {
-          disabled: !table.getCanNextPage(),
-          size: "icon",
-          type: "button",
-          variant: "ghost",
-          onClick: () => table.nextPage(),
-          children: /* @__PURE__ */ jsx74(ChevronRightIcon4, { className: "h-4 w-4" })
+        const updatedColumnSizing = applyUpdater(updaterOrValue, prevColumnSizing);
+        const computedWidth = table.getVisibleLeafColumns().reduce((previous, current) => {
+          return previous + (updatedColumnSizing[current.id] ?? current.getSize());
+        }, 0);
+        if (Number.isNaN(computedWidth)) {
+          console.error("Failed to compute width for columns");
+          return;
         }
-      ),
-      /* @__PURE__ */ jsx74(
-        Button,
-        {
-          disabled: !table.getCanNextPage(),
-          size: "icon",
-          type: "button",
-          variant: "ghost",
-          onClick: () => table.lastPage(),
-          children: /* @__PURE__ */ jsx74(ChevronsRightIcon, { className: "h-4 w-4" })
+        if (containerWidth > computedWidth) {
+          return;
         }
-      )
-    ] })
-  ] });
+        setTableState("columnSizing", updatedColumnSizing);
+        updateStyle();
+        invalidateHandles();
+      },
+      onColumnSizingInfoChange: (updaterOrValue) => {
+        setTableState("columnSizingInfo", updaterOrValue);
+        updateStyle();
+        invalidateHandles();
+      },
+      onColumnVisibilityChange: (updaterOrValue) => {
+        setTableState("columnVisibility", updaterOrValue);
+        updateColumnSizing();
+        updateStyle();
+        invalidateHandles();
+      },
+      onGlobalFilterChange: (updaterOrValue) => {
+        setTableState("globalFilter", updaterOrValue);
+        invalidateHandles();
+      },
+      onPaginationChange: (updaterOrValue) => {
+        setTableState("pagination", updaterOrValue);
+        invalidateHandles();
+      },
+      onSortingChange: (updaterOrValue) => {
+        setTableState("sorting", updaterOrValue);
+        invalidateHandles();
+      },
+      onStateChange: (updaterOrValue) => {
+        const prevState = table.getState();
+        table.setOptions((prev) => ({
+          ...prev,
+          state: typeof updaterOrValue === "function" ? updaterOrValue(prevState) : updaterOrValue
+        }));
+        invalidateHandles();
+      },
+      renderFallbackValue: null,
+      state: _state
+    });
+    return {
+      $handles: {
+        headerGroups: defineMemoizedHandle(() => table.getHeaderGroups()),
+        paginationInfo: defineMemoizedHandle(() => {
+          const { pagination } = table.getState();
+          return {
+            pageCount: table.getPageCount(),
+            pageIndex: pagination.pageIndex
+          };
+        }),
+        rowCount: defineMemoizedHandle(() => table.getRowCount()),
+        rows: defineMemoizedHandle(() => {
+          const { rows } = table.getRowModel();
+          return rows;
+        }),
+        table: defineMemoizedHandle(() => table),
+        tableMeta: defineMemoizedHandle(() => table.options.meta ?? {})
+      },
+      _containerWidth: null,
+      _key: Symbol(),
+      reset: (params2) => {
+        table.setOptions((options) => ({
+          ...options,
+          columns: getColumnsWithActions(params2),
+          data: params2.data,
+          meta: {
+            ...params2.meta,
+            [ROW_ACTIONS_METADATA_KEY]: params2.rowActions,
+            [TABLE_NAME_METADATA_KEY]: params2.tableName
+          },
+          state: getTanstackTableState(params2)
+        }));
+        invalidateHandles();
+      },
+      setContainerWidth: (containerWidth) => {
+        set2(() => {
+          return { _containerWidth: containerWidth };
+        });
+        updateColumnSizing();
+        updateStyle();
+      },
+      setGlobalFilter: (globalFilter) => {
+        table.setGlobalFilter(globalFilter);
+      },
+      setPageIndex: (index) => {
+        table.setPageIndex(index);
+      },
+      style: {
+        visibility: "hidden"
+      }
+    };
+  });
+}
+
+// src/components/DataTable/DataTable.tsx
+import { jsx as jsx80 } from "react/jsx-runtime";
+var DataTable = ({
+  emptyStateProps,
+  onSearchChange,
+  togglesComponent,
+  ...props
+}) => {
+  const storeRef = useRef2(createDataTableStore(props));
+  useEffect3(() => {
+    const { reset } = storeRef.current.getState();
+    reset(props);
+  }, [props]);
+  return /* @__PURE__ */ jsx80(DataTableContext.Provider, { value: { store: storeRef.current }, children: /* @__PURE__ */ jsx80(
+    DataTableContent,
+    {
+      emptyStateProps,
+      togglesComponent,
+      onSearchChange
+    }
+  ) });
 };
 
 // src/components/DatePicker/DatePicker.tsx
@@ -1886,7 +2273,7 @@ import { AnimatePresence as AnimatePresence3, motion as motion3 } from "motion/r
 import { forwardRef as forwardRef58 } from "react";
 import { range as range3 } from "lodash-es";
 import { AnimatePresence as AnimatePresence2, motion as motion2 } from "motion/react";
-import { jsx as jsx75, jsxs as jsxs22 } from "react/jsx-runtime";
+import { jsx as jsx81, jsxs as jsxs25 } from "react/jsx-runtime";
 var CALENDAR_ANIMATION_DURATION = 0.2;
 var Calendar = forwardRef58(function Calendar2(props, ref) {
   const { t } = useTranslation("libui");
@@ -1902,17 +2289,17 @@ var Calendar = forwardRef58(function Calendar2(props, ref) {
     t("days.friday"),
     t("days.saturday")
   ];
-  return /* @__PURE__ */ jsx75(AnimatePresence2, { initial: false, mode: "wait", children: /* @__PURE__ */ jsx75(
+  return /* @__PURE__ */ jsx81(AnimatePresence2, { initial: false, mode: "wait", children: /* @__PURE__ */ jsx81(
     motion2.div,
     {
       animate: { opacity: 1, x: 0 },
       exit: { opacity: 0, x: -20 },
       initial: { opacity: 0, x: 20 },
       transition: { duration: CALENDAR_ANIMATION_DURATION },
-      children: /* @__PURE__ */ jsxs22("div", { className: "grid h-56 w-56 grid-cols-7 text-sm", ref, children: [
-        daysOfWeek.map((label) => /* @__PURE__ */ jsx75("div", { className: "flex h-8 w-8 items-center justify-center text-muted-foreground", children: label.charAt(0).toUpperCase() }, label)),
-        /* @__PURE__ */ jsx75("div", { style: { gridColumn: `span ${firstDay} / span ${firstDay}` } }),
-        days.map((day) => /* @__PURE__ */ jsx75(
+      children: /* @__PURE__ */ jsxs25("div", { className: "grid h-56 w-56 grid-cols-7 text-sm", ref, children: [
+        daysOfWeek.map((label) => /* @__PURE__ */ jsx81("div", { className: "flex h-8 w-8 items-center justify-center text-muted-foreground", children: label.charAt(0).toUpperCase() }, label)),
+        /* @__PURE__ */ jsx81("div", { style: { gridColumn: `span ${firstDay} / span ${firstDay}` } }),
+        days.map((day) => /* @__PURE__ */ jsx81(
           "button",
           {
             className: "dark:hover:bg-extra-muted flex h-8 w-8 items-center justify-center rounded-md hover:bg-slate-200 dark:hover:bg-slate-700",
@@ -1932,7 +2319,7 @@ var Calendar = forwardRef58(function Calendar2(props, ref) {
 });
 
 // src/components/DatePicker/YearSelector.tsx
-import { useEffect as useEffect2, useRef } from "react";
+import { useEffect as useEffect4, useRef as useRef3 } from "react";
 import { range as range4 } from "lodash-es";
 
 // src/components/ScrollArea/ScrollArea.tsx
@@ -1942,9 +2329,9 @@ import { Corner, Root as Root8, Viewport } from "@radix-ui/react-scroll-area";
 // src/components/ScrollArea/ScrollBar.tsx
 import { forwardRef as forwardRef59 } from "react";
 import { ScrollAreaScrollbar, ScrollAreaThumb } from "@radix-ui/react-scroll-area";
-import { jsx as jsx76 } from "react/jsx-runtime";
+import { jsx as jsx82 } from "react/jsx-runtime";
 var ScrollBar = forwardRef59(function ScrollBar2({ className, orientation = "vertical", ...props }, ref) {
-  return /* @__PURE__ */ jsx76(
+  return /* @__PURE__ */ jsx82(
     ScrollAreaScrollbar,
     {
       className: cn(
@@ -1956,35 +2343,35 @@ var ScrollBar = forwardRef59(function ScrollBar2({ className, orientation = "ver
       orientation,
       ref,
       ...props,
-      children: /* @__PURE__ */ jsx76(ScrollAreaThumb, { className: "relative flex-1 rounded-full bg-border" })
+      children: /* @__PURE__ */ jsx82(ScrollAreaThumb, { className: "relative flex-1 rounded-full bg-border" })
     }
   );
 });
 
 // src/components/ScrollArea/ScrollArea.tsx
-import { jsx as jsx77, jsxs as jsxs23 } from "react/jsx-runtime";
+import { jsx as jsx83, jsxs as jsxs26 } from "react/jsx-runtime";
 var ScrollArea = forwardRef60(
   function ScrollArea2({ children, className, ...props }, ref) {
-    return /* @__PURE__ */ jsxs23(Root8, { className: cn("relative overflow-hidden", className), "data-testid": "scroll-area", ref, ...props, children: [
-      /* @__PURE__ */ jsx77(Viewport, { className: "h-full w-full rounded-[inherit]", children }),
-      /* @__PURE__ */ jsx77(ScrollBar, {}),
-      /* @__PURE__ */ jsx77(Corner, {})
+    return /* @__PURE__ */ jsxs26(Root8, { className: cn("relative overflow-hidden", className), "data-testid": "scroll-area", ref, ...props, children: [
+      /* @__PURE__ */ jsx83(Viewport, { className: "h-full w-full rounded-[inherit]", children }),
+      /* @__PURE__ */ jsx83(ScrollBar, {}),
+      /* @__PURE__ */ jsx83(Corner, {})
     ] });
   }
 );
 
 // src/components/DatePicker/YearSelector.tsx
-import { jsx as jsx78 } from "react/jsx-runtime";
+import { jsx as jsx84 } from "react/jsx-runtime";
 var YearSelector = (props) => {
-  const selectedRef = useRef(null);
+  const selectedRef = useRef3(null);
   const currentYear = (/* @__PURE__ */ new Date()).getFullYear();
   const years = Array.from(range4(currentYear - 100, currentYear + 8)).reverse();
-  useEffect2(() => {
+  useEffect4(() => {
     if (selectedRef.current) {
       selectedRef.current.scrollIntoView({ block: "center" });
     }
   }, []);
-  return /* @__PURE__ */ jsx78(ScrollArea, { className: "h-56 w-56", children: /* @__PURE__ */ jsx78("div", { className: "grid grid-cols-3 gap-x-2 gap-y-1 text-sm text-muted-foreground", children: years.map((year) => /* @__PURE__ */ jsx78("div", { className: "flex h-7 items-center justify-center", children: /* @__PURE__ */ jsx78(
+  return /* @__PURE__ */ jsx84(ScrollArea, { className: "h-56 w-56", children: /* @__PURE__ */ jsx84("div", { className: "grid grid-cols-3 gap-x-2 gap-y-1 text-sm text-muted-foreground", children: years.map((year) => /* @__PURE__ */ jsx84("div", { className: "flex h-7 items-center justify-center", children: /* @__PURE__ */ jsx84(
     "button",
     {
       className: cn(
@@ -2003,7 +2390,7 @@ var YearSelector = (props) => {
 };
 
 // src/components/DatePicker/DatePicker.tsx
-import { jsx as jsx79, jsxs as jsxs24 } from "react/jsx-runtime";
+import { jsx as jsx85, jsxs as jsxs27 } from "react/jsx-runtime";
 var MONTHS = [
   "january",
   "february",
@@ -2042,11 +2429,11 @@ var DatePicker = React16.forwardRef(function DatePicker2({ onSelection, ...props
     dispatch({ type: "set-year", value: date2.getFullYear() });
     setShowYearSelector(false);
   };
-  return /* @__PURE__ */ jsxs24(Card, { className: "w-fit p-3", "data-testid": "datepicker", ref, ...props, children: [
-    /* @__PURE__ */ jsxs24("div", { className: "mb-3 flex items-center justify-between px-1", children: [
-      /* @__PURE__ */ jsxs24("div", { className: "flex items-center", children: [
-        /* @__PURE__ */ jsx79("span", { className: "mx-1 text-sm font-medium tracking-tight", children: `${monthName} ${date.getFullYear()}` }),
-        /* @__PURE__ */ jsx79(
+  return /* @__PURE__ */ jsxs27(Card, { className: "w-fit p-3", "data-testid": "datepicker", ref, ...props, children: [
+    /* @__PURE__ */ jsxs27("div", { className: "mb-3 flex items-center justify-between px-1", children: [
+      /* @__PURE__ */ jsxs27("div", { className: "flex items-center", children: [
+        /* @__PURE__ */ jsx85("span", { className: "mx-1 text-sm font-medium tracking-tight", children: `${monthName} ${date.getFullYear()}` }),
+        /* @__PURE__ */ jsx85(
           ArrowToggle,
           {
             className: "flex items-center justify-center rounded-full p-1 hover:bg-slate-200 dark:hover:bg-slate-700",
@@ -2060,8 +2447,8 @@ var DatePicker = React16.forwardRef(function DatePicker2({ onSelection, ...props
           }
         )
       ] }),
-      /* @__PURE__ */ jsxs24("div", { className: cn("flex", { hidden: showYearSelector }), children: [
-        /* @__PURE__ */ jsx79(
+      /* @__PURE__ */ jsxs27("div", { className: cn("flex", { hidden: showYearSelector }), children: [
+        /* @__PURE__ */ jsx85(
           ArrowToggle,
           {
             className: "flex items-center justify-center rounded-full p-1 hover:bg-slate-200 dark:hover:bg-slate-700",
@@ -2078,7 +2465,7 @@ var DatePicker = React16.forwardRef(function DatePicker2({ onSelection, ...props
             }
           }
         ),
-        /* @__PURE__ */ jsx79(
+        /* @__PURE__ */ jsx85(
           ArrowToggle,
           {
             className: "flex items-center justify-center rounded-full p-1 hover:bg-slate-200 dark:hover:bg-slate-700",
@@ -2097,24 +2484,24 @@ var DatePicker = React16.forwardRef(function DatePicker2({ onSelection, ...props
         )
       ] })
     ] }),
-    /* @__PURE__ */ jsx79("div", { children: /* @__PURE__ */ jsx79(AnimatePresence3, { initial: false, mode: "wait", children: showYearSelector ? /* @__PURE__ */ jsx79(
+    /* @__PURE__ */ jsx85("div", { children: /* @__PURE__ */ jsx85(AnimatePresence3, { initial: false, mode: "wait", children: showYearSelector ? /* @__PURE__ */ jsx85(
       motion3.div,
       {
         animate: { opacity: 1, y: 0 },
         exit: { opacity: 0, y: 10 },
         initial: { opacity: 0, y: 10 },
         transition: { duration: 0.2 },
-        children: /* @__PURE__ */ jsx79(YearSelector, { selected: date, onSelection: handleYearSelection })
+        children: /* @__PURE__ */ jsx85(YearSelector, { selected: date, onSelection: handleYearSelection })
       },
       0
-    ) : /* @__PURE__ */ jsx79(
+    ) : /* @__PURE__ */ jsx85(
       motion3.div,
       {
         animate: { opacity: 1, y: 0 },
         exit: { opacity: 0, y: -10 },
         initial: { opacity: 0, y: -10 },
         transition: { duration: 0.2 },
-        children: /* @__PURE__ */ jsx79(Calendar, { month: date.getMonth(), year: date.getFullYear(), onSelection })
+        children: /* @__PURE__ */ jsx85(Calendar, { month: date.getMonth(), year: date.getFullYear(), onSelection })
       },
       1
     ) }) })
@@ -2128,11 +2515,11 @@ import { Drawer as DrawerPrimitive4 } from "vaul";
 // src/components/Drawer/DrawerContent.tsx
 import { forwardRef as forwardRef62 } from "react";
 import { Drawer as DrawerPrimitive } from "vaul";
-import { jsx as jsx80, jsxs as jsxs25 } from "react/jsx-runtime";
+import { jsx as jsx86, jsxs as jsxs28 } from "react/jsx-runtime";
 var DrawerContent = forwardRef62(function DrawerContent2({ children, className, ...props }, ref) {
-  return /* @__PURE__ */ jsxs25(DrawerPrimitive.Portal, { children: [
-    /* @__PURE__ */ jsx80(DrawerPrimitive.Overlay, { className: cn("fixed inset-0 z-50 bg-black/80", className), ref, ...props }),
-    /* @__PURE__ */ jsxs25(
+  return /* @__PURE__ */ jsxs28(DrawerPrimitive.Portal, { children: [
+    /* @__PURE__ */ jsx86(DrawerPrimitive.Overlay, { className: cn("fixed inset-0 z-50 bg-black/80", className), ref, ...props }),
+    /* @__PURE__ */ jsxs28(
       DrawerPrimitive.Content,
       {
         className: cn(
@@ -2142,7 +2529,7 @@ var DrawerContent = forwardRef62(function DrawerContent2({ children, className,
         ref,
         ...props,
         children: [
-          /* @__PURE__ */ jsx80("div", { className: "mx-auto mt-4 h-2 w-[100px] rounded-full bg-muted" }),
+          /* @__PURE__ */ jsx86("div", { className: "mx-auto mt-4 h-2 w-[100px] rounded-full bg-muted" }),
           children
         ]
       }
@@ -2153,27 +2540,27 @@ var DrawerContent = forwardRef62(function DrawerContent2({ children, className,
 // src/components/Drawer/DrawerDescription.tsx
 import { forwardRef as forwardRef63 } from "react";
 import { Drawer as DrawerPrimitive2 } from "vaul";
-import { jsx as jsx81 } from "react/jsx-runtime";
+import { jsx as jsx87 } from "react/jsx-runtime";
 var DrawerDescription = forwardRef63(function DrawerDescription2({ className, ...props }, ref) {
-  return /* @__PURE__ */ jsx81(DrawerPrimitive2.Description, { className: cn("text-sm text-muted-foreground", className), ref, ...props });
+  return /* @__PURE__ */ jsx87(DrawerPrimitive2.Description, { className: cn("text-sm text-muted-foreground", className), ref, ...props });
 });
 
 // src/components/Drawer/DrawerFooter.tsx
 import "react";
-import { jsx as jsx82 } from "react/jsx-runtime";
-var DrawerFooter = ({ className, ...props }) => /* @__PURE__ */ jsx82("div", { className: cn("mt-auto flex flex-col gap-2 p-4", className), ...props });
+import { jsx as jsx88 } from "react/jsx-runtime";
+var DrawerFooter = ({ className, ...props }) => /* @__PURE__ */ jsx88("div", { className: cn("mt-auto flex flex-col gap-2 p-4", className), ...props });
 
 // src/components/Drawer/DrawerHeader.tsx
 import "react";
-import { jsx as jsx83 } from "react/jsx-runtime";
-var DrawerHeader = ({ className, ...props }) => /* @__PURE__ */ jsx83("div", { className: cn("grid gap-1.5 p-4 text-center sm:text-left", className), ...props });
+import { jsx as jsx89 } from "react/jsx-runtime";
+var DrawerHeader = ({ className, ...props }) => /* @__PURE__ */ jsx89("div", { className: cn("grid gap-1.5 p-4 text-center sm:text-left", className), ...props });
 
 // src/components/Drawer/DrawerTitle.tsx
 import { forwardRef as forwardRef64 } from "react";
 import { Drawer as DrawerPrimitive3 } from "vaul";
-import { jsx as jsx84 } from "react/jsx-runtime";
+import { jsx as jsx90 } from "react/jsx-runtime";
 var DrawerTitle = forwardRef64(function DrawerTitle2({ className, ...props }, ref) {
-  return /* @__PURE__ */ jsx84(
+  return /* @__PURE__ */ jsx90(
     DrawerPrimitive3.Title,
     {
       className: cn("text-lg font-semibold leading-none tracking-tight", className),
@@ -2184,8 +2571,8 @@ var DrawerTitle = forwardRef64(function DrawerTitle2({ className, ...props }, re
 });
 
 // src/components/Drawer/Drawer.tsx
-import { jsx as jsx85 } from "react/jsx-runtime";
-var DrawerRoot = ({ shouldScaleBackground = true, ...props }) => /* @__PURE__ */ jsx85(DrawerPrimitive4.Root, { shouldScaleBackground, ...props });
+import { jsx as jsx91 } from "react/jsx-runtime";
+var DrawerRoot = ({ shouldScaleBackground = true, ...props }) => /* @__PURE__ */ jsx91(DrawerPrimitive4.Root, { shouldScaleBackground, ...props });
 var Drawer = Object.assign(DrawerRoot, {
   Close: DrawerPrimitive4.Close,
   Content: DrawerContent,
@@ -2201,22 +2588,22 @@ import "react";
 import { ErrorBoundary as ReactErrorBoundary } from "react-error-boundary";
 
 // src/components/ErrorFallback/ErrorFallback.tsx
-import { useEffect as useEffect3 } from "react";
-import { jsx as jsx86, jsxs as jsxs26 } from "react/jsx-runtime";
+import { useEffect as useEffect5 } from "react";
+import { jsx as jsx92, jsxs as jsxs29 } from "react/jsx-runtime";
 var ErrorFallback = ({ error }) => {
-  useEffect3(() => {
+  useEffect5(() => {
     console.error(error);
   }, [error]);
-  return /* @__PURE__ */ jsxs26(
+  return /* @__PURE__ */ jsxs29(
     "div",
     {
       className: "flex min-h-screen flex-col items-center justify-center gap-1 p-3 text-center",
       "data-testid": "error-fallback",
       children: [
-        /* @__PURE__ */ jsx86("h1", { className: "text-muted-foreground text-sm font-semibold tracking-wide uppercase", children: "Unexpected Error" }),
-        /* @__PURE__ */ jsx86("h3", { className: "text-3xl font-extrabold tracking-tight sm:text-4xl md:text-5xl", children: "Something Went Wrong" }),
-        /* @__PURE__ */ jsx86("p", { className: "text-muted-foreground mt-2 max-w-prose text-sm sm:text-base", children: "We apologize for the inconvenience. Please contact us for further assistance." }),
-        /* @__PURE__ */ jsx86("div", { className: "mt-6", children: /* @__PURE__ */ jsxs26(
+        /* @__PURE__ */ jsx92("h1", { className: "text-muted-foreground text-sm font-semibold tracking-wide uppercase", children: "Unexpected Error" }),
+        /* @__PURE__ */ jsx92("h3", { className: "text-3xl font-extrabold tracking-tight sm:text-4xl md:text-5xl", children: "Something Went Wrong" }),
+        /* @__PURE__ */ jsx92("p", { className: "text-muted-foreground mt-2 max-w-prose text-sm sm:text-base", children: "We apologize for the inconvenience. Please contact us for further assistance." }),
+        /* @__PURE__ */ jsx92("div", { className: "mt-6", children: /* @__PURE__ */ jsxs29(
           "button",
           {
             className: "text-sky-800 underline-offset-4 hover:text-sky-700 hover:underline dark:text-sky-200 dark:hover:text-sky-300",
@@ -2226,7 +2613,7 @@ var ErrorFallback = ({ error }) => {
             },
             children: [
               "Reload Page",
-              /* @__PURE__ */ jsx86("span", { "aria-hidden": "true", children: " \u2192" })
+              /* @__PURE__ */ jsx92("span", { "aria-hidden": "true", children: " \u2192" })
             ]
           }
         ) })
@@ -2236,16 +2623,16 @@ var ErrorFallback = ({ error }) => {
 };
 
 // src/components/ErrorBoundary/ErrorBoundary.tsx
-import { jsx as jsx87 } from "react/jsx-runtime";
+import { jsx as jsx93 } from "react/jsx-runtime";
 var ErrorBoundary = ({ children }) => {
-  return /* @__PURE__ */ jsx87(ReactErrorBoundary, { FallbackComponent: ErrorFallback, children });
+  return /* @__PURE__ */ jsx93(ReactErrorBoundary, { FallbackComponent: ErrorFallback, children });
 };
 
 // src/components/FileDropzone/FileDropzone.tsx
 import { useCallback } from "react";
 import { UploadIcon } from "lucide-react";
 import { useDropzone } from "react-dropzone";
-import { jsx as jsx88, jsxs as jsxs27 } from "react/jsx-runtime";
+import { jsx as jsx94, jsxs as jsxs30 } from "react/jsx-runtime";
 var FileDropzone = ({
   acceptedFileTypes,
   className,
@@ -2277,7 +2664,7 @@ var FileDropzone = ({
     en: "Drag and drop files or click on box to upload",
     fr: "Glissez-d\xE9posez les fichiers ou cliquez sur la case pour les t\xE9l\xE9charger"
   });
-  return /* @__PURE__ */ jsxs27(
+  return /* @__PURE__ */ jsxs30(
     "div",
     {
       className: cn(
@@ -2287,38 +2674,38 @@ var FileDropzone = ({
       "data-testid": "dropzone",
       ...getRootProps(),
       children: [
-        /* @__PURE__ */ jsxs27("div", { className: "flex flex-col items-center justify-center gap-3", children: [
-          /* @__PURE__ */ jsx88(UploadIcon, { style: { height: 24, strokeWidth: 2, width: 24 } }),
-          /* @__PURE__ */ jsxs27("div", { className: "flex flex-col items-center gap-1 text-center", children: [
-            /* @__PURE__ */ jsx88("h3", { className: "text-lg font-semibold tracking-tight", "data-testid": "dropzone-title", children: file ? file.name : isDragActive ? dragActiveTitle : dragInactiveTitle }),
-            description && /* @__PURE__ */ jsx88("p", { className: "text-sm text-muted-foreground", children: description })
+        /* @__PURE__ */ jsxs30("div", { className: "flex flex-col items-center justify-center gap-3", children: [
+          /* @__PURE__ */ jsx94(UploadIcon, { style: { height: 24, strokeWidth: 2, width: 24 } }),
+          /* @__PURE__ */ jsxs30("div", { className: "flex flex-col items-center gap-1 text-center", children: [
+            /* @__PURE__ */ jsx94("h3", { className: "text-lg font-semibold tracking-tight", "data-testid": "dropzone-title", children: file ? file.name : isDragActive ? dragActiveTitle : dragInactiveTitle }),
+            description && /* @__PURE__ */ jsx94("p", { className: "text-sm text-muted-foreground", children: description })
           ] })
         ] }),
-        /* @__PURE__ */ jsx88("input", { ...getInputProps() })
+        /* @__PURE__ */ jsx94("input", { ...getInputProps() })
       ]
     }
   );
 };
 
 // src/components/Form/Form.tsx
-import { useEffect as useEffect11, useState as useState9 } from "react";
+import { useEffect as useEffect13, useState as useState9 } from "react";
 import { get, set } from "lodash-es";
 import { twMerge } from "tailwind-merge";
 
 // src/components/Heading/Heading.tsx
-import { jsx as jsx89 } from "react/jsx-runtime";
+import { jsx as jsx95 } from "react/jsx-runtime";
 var Heading = ({ children, className, variant }) => {
   switch (variant) {
     case "h1":
-      return /* @__PURE__ */ jsx89("h1", { className: cn("text-3xl font-bold tracking-tight", className), children });
+      return /* @__PURE__ */ jsx95("h1", { className: cn("text-3xl font-bold tracking-tight", className), children });
     case "h2":
-      return /* @__PURE__ */ jsx89("h2", { className: cn("text-2xl font-semibold tracking-tight", className), children });
+      return /* @__PURE__ */ jsx95("h2", { className: cn("text-2xl font-semibold tracking-tight", className), children });
     case "h3":
-      return /* @__PURE__ */ jsx89("h3", { className: cn("text-xl font-semibold tracking-tight", className), children });
+      return /* @__PURE__ */ jsx95("h3", { className: cn("text-xl font-semibold tracking-tight", className), children });
     case "h4":
-      return /* @__PURE__ */ jsx89("h4", { className: cn("text-lg font-semibold tracking-tight", className), children });
+      return /* @__PURE__ */ jsx95("h4", { className: cn("text-lg font-semibold tracking-tight", className), children });
     case "h5":
-      return /* @__PURE__ */ jsx89("h5", { className: cn("text-base font-semibold tracking-tight", className), children });
+      return /* @__PURE__ */ jsx95("h5", { className: cn("text-base font-semibold tracking-tight", className), children });
     default:
       throw new Error(`Unhandled heading variant: ${variant}`);
   }
@@ -2327,9 +2714,9 @@ var Heading = ({ children, className, variant }) => {
 // src/components/Separator/Separator.tsx
 import { forwardRef as forwardRef65 } from "react";
 import * as SeparatorPrimitive from "@radix-ui/react-separator";
-import { jsx as jsx90 } from "react/jsx-runtime";
+import { jsx as jsx96 } from "react/jsx-runtime";
 var Separator3 = forwardRef65(function Separator4({ className, decorative = true, orientation = "horizontal", ...props }, ref) {
-  return /* @__PURE__ */ jsx90(
+  return /* @__PURE__ */ jsx96(
     SeparatorPrimitive.Root,
     {
       className: cn(
@@ -2349,19 +2736,46 @@ var Separator3 = forwardRef65(function Separator4({ className, decorative = true
 // src/components/Form/ErrorMessage.tsx
 import "react";
 import { CircleAlertIcon } from "lucide-react";
-import { jsx as jsx91, jsxs as jsxs28 } from "react/jsx-runtime";
-var ErrorMessage = ({ className, error }) => {
-  return error ? /* @__PURE__ */ jsx91("div", { className: "flex flex-col gap-1.5", children: error.map((message) => /* @__PURE__ */ jsxs28("div", { className: cn("text-destructive flex w-full items-center text-sm font-medium", className), children: [
-    /* @__PURE__ */ jsx91(CircleAlertIcon, { className: "mr-1", style: { strokeWidth: "2px" } }),
-    /* @__PURE__ */ jsx91("span", { "data-testid": "error-message-text", children: message })
-  ] }, message)) ?? null }) : null;
+import { jsx as jsx97, jsxs as jsxs31 } from "react/jsx-runtime";
+var ErrorMessage = ({
+  className,
+  error,
+  hideIconOnWrap
+}) => {
+  if (!error) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx97("div", { className: "flex flex-col gap-1.5", children: error.map((message) => /* @__PURE__ */ jsxs31(
+    "div",
+    {
+      className: cn(
+        "text-destructive flex w-full items-center text-sm font-medium",
+        hideIconOnWrap && "flex-wrap",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxs31("div", { className: "@container/alert mr-1.5 flex min-w-4 shrink-0 flex-grow-[1] items-center justify-start", children: [
+          /* @__PURE__ */ jsx97("div", { className: "h-0 w-0" }),
+          /* @__PURE__ */ jsx97(
+            CircleAlertIcon,
+            {
+              className: "@min-[24px]/alert:hidden",
+              style: { height: "16px", strokeWidth: "2px", width: "16px" }
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx97("span", { className: "flex-grow-[999]", "data-testid": "error-message-text", children: message })
+      ]
+    },
+    message
+  )) });
 };
 
 // src/components/Form/FieldsComponent.tsx
 import "react";
 
 // src/components/Form/DynamicField.tsx
-import { useEffect as useEffect10, useMemo as useMemo3, useState as useState8 } from "react";
+import { useEffect as useEffect12, useMemo as useMemo2, useState as useState8 } from "react";
 import "react";
 import { pick } from "lodash-es";
 
@@ -2371,25 +2785,25 @@ import "react";
 import { match as match7 } from "ts-pattern";
 
 // src/components/Form/NumberRecordField.tsx
-import { useEffect as useEffect5, useRef as useRef3 } from "react";
+import { useEffect as useEffect7, useRef as useRef5 } from "react";
 
 // src/components/Form/NumberField/NumberField.tsx
 import { match as match2 } from "ts-pattern";
 
 // src/components/Form/NumberField/NumberFieldInput.tsx
-import { useEffect as useEffect4, useId as useId2, useRef as useRef2, useState as useState5 } from "react";
+import { useEffect as useEffect6, useId as useId2, useRef as useRef4, useState as useState5 } from "react";
 import { parseNumber } from "@douglasneuroinformatics/libjs";
 
 // src/components/Label/Label.tsx
 import { forwardRef as forwardRef66 } from "react";
 import * as LabelPrimitive from "@radix-ui/react-label";
 import { cva as cva2 } from "class-variance-authority";
-import { jsx as jsx92 } from "react/jsx-runtime";
+import { jsx as jsx98 } from "react/jsx-runtime";
 var labelVariants = cva2(
   "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 aria-disabled:cursor-not-allowed aria-disabled:opacity-70"
 );
 var Label3 = forwardRef66(function Label4({ className, ...props }, ref) {
-  return /* @__PURE__ */ jsx92(LabelPrimitive.Root, { className: cn(labelVariants(), className), ref, ...props });
+  return /* @__PURE__ */ jsx98(LabelPrimitive.Root, { className: cn(labelVariants(), className), ref, ...props });
 });
 
 // src/components/Form/FieldGroup/FieldGroupDescription.tsx
@@ -2402,10 +2816,10 @@ import { Root as PopoverRoot, Trigger as PopoverTrigger } from "@radix-ui/react-
 // src/components/Popover/PopoverContent.tsx
 import * as React22 from "react";
 import { Content as Content6, Portal as Portal6 } from "@radix-ui/react-popover";
-import { jsx as jsx93 } from "react/jsx-runtime";
+import { jsx as jsx99 } from "react/jsx-runtime";
 var PopoverContent = React22.forwardRef(
   function PopoverContent2({ align = "center", asChild, autofocus = true, className, collisionPadding = 0, sideOffset = 4, ...props }, ref) {
-    return /* @__PURE__ */ jsx93(Portal6, { children: /* @__PURE__ */ jsx93(
+    return /* @__PURE__ */ jsx99(Portal6, { children: /* @__PURE__ */ jsx99(
       Content6,
       {
         align,
@@ -2431,21 +2845,21 @@ var Popover = Object.assign(PopoverRoot.bind(null), {
 });
 
 // src/components/Form/FieldGroup/FieldGroupDescription.tsx
-import { jsx as jsx94, jsxs as jsxs29 } from "react/jsx-runtime";
-var FieldGroupDescription = ({ description }) => description ? /* @__PURE__ */ jsxs29(Popover, { children: [
-  /* @__PURE__ */ jsx94(Popover.Trigger, { tabIndex: -1, children: /* @__PURE__ */ jsx94(CircleHelpIcon, { className: "text-muted-foreground" }) }),
-  /* @__PURE__ */ jsx94(Popover.Content, { className: "text-sm text-muted-foreground", children: /* @__PURE__ */ jsx94("p", { children: description }) })
+import { jsx as jsx100, jsxs as jsxs32 } from "react/jsx-runtime";
+var FieldGroupDescription = ({ description }) => description ? /* @__PURE__ */ jsxs32(Popover, { children: [
+  /* @__PURE__ */ jsx100(Popover.Trigger, { tabIndex: -1, children: /* @__PURE__ */ jsx100(CircleHelpIcon, { className: "text-muted-foreground" }) }),
+  /* @__PURE__ */ jsx100(Popover.Content, { className: "text-sm text-muted-foreground", children: /* @__PURE__ */ jsx100("p", { children: description }) })
 ] }) : null;
 
 // src/components/Form/FieldGroup/FieldGroupRoot.tsx
 import "react";
-import { jsx as jsx95 } from "react/jsx-runtime";
-var FieldGroupRoot = ({ children, name }) => /* @__PURE__ */ jsx95("div", { className: "flex flex-col gap-3 @container", "data-field-group": name, children });
+import { jsx as jsx101 } from "react/jsx-runtime";
+var FieldGroupRoot = ({ children, name }) => /* @__PURE__ */ jsx101("div", { className: "flex flex-col gap-3 @container", "data-field-group": name, children });
 
 // src/components/Form/FieldGroup/FieldGroupRow.tsx
 import "react";
-import { jsx as jsx96 } from "react/jsx-runtime";
-var FieldGroupRow = ({ children }) => /* @__PURE__ */ jsx96("div", { className: "relative flex items-center gap-2", children });
+import { jsx as jsx102 } from "react/jsx-runtime";
+var FieldGroupRow = ({ children }) => /* @__PURE__ */ jsx102("div", { className: "relative flex items-center gap-2", children });
 
 // src/components/Form/FieldGroup/FieldGroup.tsx
 var FieldGroup = Object.assign(FieldGroupRoot, {
@@ -2455,7 +2869,7 @@ var FieldGroup = Object.assign(FieldGroupRoot, {
 });
 
 // src/components/Form/NumberField/NumberFieldInput.tsx
-import { jsx as jsx97, jsxs as jsxs30 } from "react/jsx-runtime";
+import { jsx as jsx103, jsxs as jsxs33 } from "react/jsx-runtime";
 var NumberFieldInput = ({
   description,
   disabled,
@@ -2470,7 +2884,7 @@ var NumberFieldInput = ({
 }) => {
   const id = useId2();
   const [inputValue, setInputValue] = useState5(value?.toString() ?? "");
-  const valueRef = useRef2(value);
+  const valueRef = useRef4(value);
   const parseInputValue = (value2) => {
     const isSignOrEmpty = /^[+-]?$/.test(value2);
     if (isSignOrEmpty) {
@@ -2492,7 +2906,7 @@ var NumberFieldInput = ({
     setValue(updatedValue);
     valueRef.current = updatedValue;
   };
-  useEffect4(() => {
+  useEffect6(() => {
     if (valueRef.current === value) {
       return;
     }
@@ -2500,12 +2914,12 @@ var NumberFieldInput = ({
     setInputValue(updatedInputValue);
     valueRef.current = value;
   }, [value]);
-  return /* @__PURE__ */ jsxs30(FieldGroup, { name, children: [
-    /* @__PURE__ */ jsxs30(FieldGroup.Row, { children: [
-      /* @__PURE__ */ jsx97(Label3, { htmlFor: id, children: label }),
-      /* @__PURE__ */ jsx97(FieldGroup.Description, { description })
+  return /* @__PURE__ */ jsxs33(FieldGroup, { name, children: [
+    /* @__PURE__ */ jsxs33(FieldGroup.Row, { children: [
+      /* @__PURE__ */ jsx103(Label3, { htmlFor: id, children: label }),
+      /* @__PURE__ */ jsx103(FieldGroup.Description, { description })
     ] }),
-    /* @__PURE__ */ jsx97(
+    /* @__PURE__ */ jsx103(
       Input,
       {
         disabled: disabled || readOnly,
@@ -2518,7 +2932,7 @@ var NumberFieldInput = ({
         onChange: handleChange
       }
     ),
-    /* @__PURE__ */ jsx97(FieldGroup.Error, { error })
+    /* @__PURE__ */ jsx103(FieldGroup.Error, { error })
   ] });
 };
 
@@ -2530,9 +2944,9 @@ import * as RadioGroupPrimitive2 from "@radix-ui/react-radio-group";
 import { forwardRef as forwardRef68 } from "react";
 import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
 import { CircleIcon as CircleIcon3 } from "lucide-react";
-import { jsx as jsx98 } from "react/jsx-runtime";
+import { jsx as jsx104 } from "react/jsx-runtime";
 var RadioGroupItem = forwardRef68(function RadioGroupItem2({ className, ...props }, ref) {
-  return /* @__PURE__ */ jsx98(
+  return /* @__PURE__ */ jsx104(
     RadioGroupPrimitive.Item,
     {
       className: cn(
@@ -2541,7 +2955,7 @@ var RadioGroupItem = forwardRef68(function RadioGroupItem2({ className, ...props
       ),
       ref,
       ...props,
-      children: /* @__PURE__ */ jsx98(RadioGroupPrimitive.Indicator, { asChild: true, children: /* @__PURE__ */ jsx98(
+      children: /* @__PURE__ */ jsx104(RadioGroupPrimitive.Indicator, { asChild: true, children: /* @__PURE__ */ jsx104(
         CircleIcon3,
         {
           className: "fill-current text-current",
@@ -2553,16 +2967,16 @@ var RadioGroupItem = forwardRef68(function RadioGroupItem2({ className, ...props
 });
 
 // src/components/RadioGroup/RadioGroup.tsx
-import { jsx as jsx99 } from "react/jsx-runtime";
+import { jsx as jsx105 } from "react/jsx-runtime";
 var RadioGroupRoot = React26.forwardRef(function RadioGroup3({ className, ...props }, ref) {
-  return /* @__PURE__ */ jsx99(RadioGroupPrimitive2.Root, { className: cn("grid gap-2", className), "data-testid": "radio-group", ...props, ref });
+  return /* @__PURE__ */ jsx105(RadioGroupPrimitive2.Root, { className: cn("grid gap-2", className), "data-testid": "radio-group", ...props, ref });
 });
 var RadioGroup4 = Object.assign(RadioGroupRoot, {
   Item: RadioGroupItem
 });
 
 // src/components/Form/NumberField/NumberFieldRadio.tsx
-import { jsx as jsx100, jsxs as jsxs31 } from "react/jsx-runtime";
+import { jsx as jsx106, jsxs as jsxs34 } from "react/jsx-runtime";
 var NumberFieldRadio = ({
   description,
   disableAutoPrefix,
@@ -2576,12 +2990,12 @@ var NumberFieldRadio = ({
   value
 }) => {
   const optionsCount = Object.keys(options).length;
-  return /* @__PURE__ */ jsxs31(FieldGroup, { name, children: [
-    /* @__PURE__ */ jsxs31(FieldGroup.Row, { children: [
-      /* @__PURE__ */ jsx100(Label3, { children: label }),
-      /* @__PURE__ */ jsx100(FieldGroup.Description, { description })
+  return /* @__PURE__ */ jsxs34(FieldGroup, { name, children: [
+    /* @__PURE__ */ jsxs34(FieldGroup.Row, { children: [
+      /* @__PURE__ */ jsx106(Label3, { children: label }),
+      /* @__PURE__ */ jsx106(FieldGroup.Description, { description })
     ] }),
-    /* @__PURE__ */ jsx100(
+    /* @__PURE__ */ jsx106(
       RadioGroup4,
       {
         className: cn(
@@ -2593,9 +3007,9 @@ var NumberFieldRadio = ({
         onValueChange: (value2) => setValue(parseInt(value2)),
         children: Object.keys(options).map((val) => parseInt(val)).toSorted((a, b) => a - b).map((val) => {
           const text = (disableAutoPrefix ? "" : `${val} - `) + options[val];
-          return /* @__PURE__ */ jsxs31("div", { className: "flex items-center gap-2", children: [
-            /* @__PURE__ */ jsx100(RadioGroup4.Item, { disabled: disabled || readOnly, id: `${name}-${val}`, value: val.toString() }),
-            /* @__PURE__ */ jsx100(
+          return /* @__PURE__ */ jsxs34("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsx106(RadioGroup4.Item, { disabled: disabled || readOnly, id: `${name}-${val}`, value: val.toString() }),
+            /* @__PURE__ */ jsx106(
               Label3,
               {
                 "aria-disabled": disabled || readOnly,
@@ -2608,7 +3022,7 @@ var NumberFieldRadio = ({
         })
       }
     ),
-    /* @__PURE__ */ jsx100(FieldGroup.Error, { error })
+    /* @__PURE__ */ jsx106(FieldGroup.Error, { error })
   ] });
 };
 
@@ -2623,15 +3037,15 @@ import * as SelectPrimitive3 from "@radix-ui/react-select";
 import { forwardRef as forwardRef70 } from "react";
 import * as SelectPrimitive from "@radix-ui/react-select";
 import { ChevronDownIcon as ChevronDownIcon4 } from "lucide-react";
-import { jsx as jsx101 } from "react/jsx-runtime";
+import { jsx as jsx107 } from "react/jsx-runtime";
 var SelectScrollDownButton = forwardRef70(function SelectScrollDownButton2({ className, ...props }, ref) {
-  return /* @__PURE__ */ jsx101(
+  return /* @__PURE__ */ jsx107(
     SelectPrimitive.ScrollDownButton,
     {
       className: cn("flex cursor-default items-center justify-center py-1", className),
       ref,
       ...props,
-      children: /* @__PURE__ */ jsx101(ChevronDownIcon4, {})
+      children: /* @__PURE__ */ jsx107(ChevronDownIcon4, {})
     }
   );
 });
@@ -2640,23 +3054,23 @@ var SelectScrollDownButton = forwardRef70(function SelectScrollDownButton2({ cla
 import { forwardRef as forwardRef71 } from "react";
 import * as SelectPrimitive2 from "@radix-ui/react-select";
 import { ChevronUpIcon as ChevronUpIcon2 } from "lucide-react";
-import { jsx as jsx102 } from "react/jsx-runtime";
+import { jsx as jsx108 } from "react/jsx-runtime";
 var SelectScrollUpButton = forwardRef71(function SelectScrollUpButton2({ className, ...props }, ref) {
-  return /* @__PURE__ */ jsx102(
+  return /* @__PURE__ */ jsx108(
     SelectPrimitive2.ScrollUpButton,
     {
       className: cn("flex cursor-default items-center justify-center py-1", className),
       ref,
       ...props,
-      children: /* @__PURE__ */ jsx102(ChevronUpIcon2, {})
+      children: /* @__PURE__ */ jsx108(ChevronUpIcon2, {})
     }
   );
 });
 
 // src/components/Select/SelectContent.tsx
-import { jsx as jsx103, jsxs as jsxs32 } from "react/jsx-runtime";
+import { jsx as jsx109, jsxs as jsxs35 } from "react/jsx-runtime";
 var SelectContent = forwardRef72(function SelectContent2({ children, className, position = "popper", ...props }, ref) {
-  return /* @__PURE__ */ jsx103(SelectPrimitive3.Portal, { children: /* @__PURE__ */ jsxs32(
+  return /* @__PURE__ */ jsx109(SelectPrimitive3.Portal, { children: /* @__PURE__ */ jsxs35(
     SelectPrimitive3.Content,
     {
       className: cn(
@@ -2668,8 +3082,8 @@ var SelectContent = forwardRef72(function SelectContent2({ children, className,
       ref,
       ...props,
       children: [
-        /* @__PURE__ */ jsx103(SelectScrollUpButton, {}),
-        /* @__PURE__ */ jsx103(
+        /* @__PURE__ */ jsx109(SelectScrollUpButton, {}),
+        /* @__PURE__ */ jsx109(
           SelectPrimitive3.Viewport,
           {
             className: cn(
@@ -2679,7 +3093,7 @@ var SelectContent = forwardRef72(function SelectContent2({ children, className,
             children
           }
         ),
-        /* @__PURE__ */ jsx103(SelectScrollDownButton, {})
+        /* @__PURE__ */ jsx109(SelectScrollDownButton, {})
       ]
     }
   ) });
@@ -2689,9 +3103,9 @@ var SelectContent = forwardRef72(function SelectContent2({ children, className,
 import { forwardRef as forwardRef73 } from "react";
 import * as SelectPrimitive4 from "@radix-ui/react-select";
 import { CheckIcon as CheckIcon4 } from "lucide-react";
-import { jsx as jsx104, jsxs as jsxs33 } from "react/jsx-runtime";
+import { jsx as jsx110, jsxs as jsxs36 } from "react/jsx-runtime";
 var SelectItem = forwardRef73(function SelectItem2({ children, className, ...props }, ref) {
-  return /* @__PURE__ */ jsxs33(
+  return /* @__PURE__ */ jsxs36(
     SelectPrimitive4.Item,
     {
       className: cn(
@@ -2701,8 +3115,8 @@ var SelectItem = forwardRef73(function SelectItem2({ children, className, ...pro
       ref,
       ...props,
       children: [
-        /* @__PURE__ */ jsx104("span", { className: "absolute right-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx104(SelectPrimitive4.ItemIndicator, { children: /* @__PURE__ */ jsx104(CheckIcon4, { className: "h-4 w-4" }) }) }),
-        /* @__PURE__ */ jsx104(SelectPrimitive4.ItemText, { children })
+        /* @__PURE__ */ jsx110("span", { className: "absolute right-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx110(SelectPrimitive4.ItemIndicator, { children: /* @__PURE__ */ jsx110(CheckIcon4, { className: "h-4 w-4" }) }) }),
+        /* @__PURE__ */ jsx110(SelectPrimitive4.ItemText, { children })
       ]
     }
   );
@@ -2711,25 +3125,25 @@ var SelectItem = forwardRef73(function SelectItem2({ children, className, ...pro
 // src/components/Select/SelectLabel.tsx
 import { forwardRef as forwardRef74 } from "react";
 import * as SelectPrimitive5 from "@radix-ui/react-select";
-import { jsx as jsx105 } from "react/jsx-runtime";
+import { jsx as jsx111 } from "react/jsx-runtime";
 var SelectLabel = forwardRef74(function SelectLabel2({ className, ...props }, ref) {
-  return /* @__PURE__ */ jsx105(SelectPrimitive5.Label, { className: cn("px-2 py-1.5 text-sm font-semibold", className), ref, ...props });
+  return /* @__PURE__ */ jsx111(SelectPrimitive5.Label, { className: cn("px-2 py-1.5 text-sm font-semibold", className), ref, ...props });
 });
 
 // src/components/Select/SelectSeparator.tsx
 import { forwardRef as forwardRef75 } from "react";
 import * as SelectPrimitive6 from "@radix-ui/react-select";
-import { jsx as jsx106 } from "react/jsx-runtime";
+import { jsx as jsx112 } from "react/jsx-runtime";
 var SelectSeparator = forwardRef75(function SelectSeparator2({ className, ...props }, ref) {
-  return /* @__PURE__ */ jsx106(SelectPrimitive6.Separator, { className: cn("-mx-1 my-1 h-px bg-muted", className), ref, ...props });
+  return /* @__PURE__ */ jsx112(SelectPrimitive6.Separator, { className: cn("-mx-1 my-1 h-px bg-muted", className), ref, ...props });
 });
 
 // src/components/Select/SelectTrigger.tsx
 import { forwardRef as forwardRef76 } from "react";
 import * as SelectPrimitive7 from "@radix-ui/react-select";
-import { jsx as jsx107 } from "react/jsx-runtime";
+import { jsx as jsx113 } from "react/jsx-runtime";
 var SelectTrigger = forwardRef76(function SelectTrigger2({ children, className, ...props }, ref) {
-  return /* @__PURE__ */ jsx107(SelectPrimitive7.Trigger, { asChild: true, className, ref, ...props, children: /* @__PURE__ */ jsx107(DropdownButton, { children }) });
+  return /* @__PURE__ */ jsx113(SelectPrimitive7.Trigger, { asChild: true, className, ref, ...props, children: /* @__PURE__ */ jsx113(DropdownButton, { children }) });
 });
 
 // src/components/Select/Select.tsx
@@ -2746,7 +3160,7 @@ var Select = Object.assign(SelectPrimitive8.Root.bind(null), {
 });
 
 // src/components/Form/NumberField/NumberFieldSelect.tsx
-import { jsx as jsx108, jsxs as jsxs34 } from "react/jsx-runtime";
+import { jsx as jsx114, jsxs as jsxs37 } from "react/jsx-runtime";
 var NumberFieldSelect = ({
   description,
   disableAutoPrefix,
@@ -2759,29 +3173,29 @@ var NumberFieldSelect = ({
   setValue,
   value
 }) => {
-  return /* @__PURE__ */ jsxs34(FieldGroup, { name, children: [
-    /* @__PURE__ */ jsxs34(FieldGroup.Row, { children: [
-      /* @__PURE__ */ jsx108(Label3, { children: label }),
-      /* @__PURE__ */ jsx108(FieldGroup.Description, { description })
+  return /* @__PURE__ */ jsxs37(FieldGroup, { name, children: [
+    /* @__PURE__ */ jsxs37(FieldGroup.Row, { children: [
+      /* @__PURE__ */ jsx114(Label3, { children: label }),
+      /* @__PURE__ */ jsx114(FieldGroup.Description, { description })
     ] }),
-    /* @__PURE__ */ jsxs34(Select, { name, value: value?.toString() ?? "", onValueChange: (value2) => setValue(parseFloat(value2)), children: [
-      /* @__PURE__ */ jsx108(Select.Trigger, { "data-testid": `${name}-select-trigger`, disabled: disabled || readOnly, children: /* @__PURE__ */ jsx108(Select.Value, {}) }),
-      /* @__PURE__ */ jsx108(Select.Content, { "data-testid": `${name}-select-content`, children: Object.keys(options).map((option) => {
+    /* @__PURE__ */ jsxs37(Select, { name, value: value?.toString() ?? "", onValueChange: (value2) => setValue(parseFloat(value2)), children: [
+      /* @__PURE__ */ jsx114(Select.Trigger, { "data-testid": `${name}-select-trigger`, disabled: disabled || readOnly, children: /* @__PURE__ */ jsx114(Select.Value, {}) }),
+      /* @__PURE__ */ jsx114(Select.Content, { "data-testid": `${name}-select-content`, children: Object.keys(options).map((option) => {
         const text = (disableAutoPrefix ? "" : `${option} - `) + options[option];
-        return /* @__PURE__ */ jsx108(Select.Item, { "data-testid": `${name}-select-item-${option}`, value: option, children: text }, option);
+        return /* @__PURE__ */ jsx114(Select.Item, { "data-testid": `${name}-select-item-${option}`, value: option, children: text }, option);
       }) })
     ] }),
-    /* @__PURE__ */ jsx108(FieldGroup.Error, { error })
+    /* @__PURE__ */ jsx114(FieldGroup.Error, { error })
   ] });
 };
 
 // src/components/Slider/Slider.tsx
 import { forwardRef as forwardRef77 } from "react";
 import { Range, Root as Root13, Thumb, Track } from "@radix-ui/react-slider";
-import { jsx as jsx109, jsxs as jsxs35 } from "react/jsx-runtime";
+import { jsx as jsx115, jsxs as jsxs38 } from "react/jsx-runtime";
 var Slider = forwardRef77(
   function Slider2({ className, disabled, ...props }, ref) {
-    return /* @__PURE__ */ jsxs35(
+    return /* @__PURE__ */ jsxs38(
       Root13,
       {
         className: cn("relative flex w-full touch-none items-center py-1.5 select-none", className),
@@ -2789,16 +3203,16 @@ var Slider = forwardRef77(
         ref,
         ...props,
         children: [
-          /* @__PURE__ */ jsx109(
+          /* @__PURE__ */ jsx115(
             Track,
             {
               "aria-disabled": disabled,
               className: "bg-primary relative h-1.5 w-full grow overflow-hidden rounded-full opacity-15 aria-disabled:cursor-not-allowed aria-disabled:opacity-10",
               "data-testid": "slider-track",
-              children: /* @__PURE__ */ jsx109(Range, { className: "bg-primary absolute h-full" })
+              children: /* @__PURE__ */ jsx115(Range, { className: "bg-primary absolute h-full" })
             }
           ),
-          /* @__PURE__ */ jsx109(
+          /* @__PURE__ */ jsx115(
             Thumb,
             {
               "aria-disabled": disabled,
@@ -2813,7 +3227,7 @@ var Slider = forwardRef77(
 );
 
 // src/components/Form/NumberField/NumberFieldSlider.tsx
-import { jsx as jsx110, jsxs as jsxs36 } from "react/jsx-runtime";
+import { jsx as jsx116, jsxs as jsxs39 } from "react/jsx-runtime";
 var NumberFieldSlider = ({
   description,
   disabled,
@@ -2826,13 +3240,13 @@ var NumberFieldSlider = ({
   setValue,
   value
 }) => {
-  return /* @__PURE__ */ jsxs36(FieldGroup, { name, children: [
-    /* @__PURE__ */ jsxs36(FieldGroup.Row, { children: [
-      /* @__PURE__ */ jsx110(Label3, { children: label }),
-      /* @__PURE__ */ jsx110(FieldGroup.Description, { description })
+  return /* @__PURE__ */ jsxs39(FieldGroup, { name, children: [
+    /* @__PURE__ */ jsxs39(FieldGroup.Row, { children: [
+      /* @__PURE__ */ jsx116(Label3, { children: label }),
+      /* @__PURE__ */ jsx116(FieldGroup.Description, { description })
     ] }),
-    /* @__PURE__ */ jsxs36(FieldGroup.Row, { children: [
-      /* @__PURE__ */ jsx110(
+    /* @__PURE__ */ jsxs39(FieldGroup.Row, { children: [
+      /* @__PURE__ */ jsx116(
         Slider,
         {
           disabled: disabled || readOnly,
@@ -2843,20 +3257,20 @@ var NumberFieldSlider = ({
           onValueChange: ([value2]) => setValue(value2)
         }
       ),
-      /* @__PURE__ */ jsx110("span", { className: "flex h-full w-8 items-center justify-center text-sm text-muted-foreground", children: value ?? "NA" })
+      /* @__PURE__ */ jsx116("span", { className: "flex h-full w-8 items-center justify-center text-sm text-muted-foreground", children: value ?? "NA" })
     ] }),
-    /* @__PURE__ */ jsx110(FieldGroup.Error, { error })
+    /* @__PURE__ */ jsx116(FieldGroup.Error, { error })
   ] });
 };
 
 // src/components/Form/NumberField/NumberField.tsx
-import { jsx as jsx111 } from "react/jsx-runtime";
+import { jsx as jsx117 } from "react/jsx-runtime";
 var NumberField = (props) => {
-  return match2(props).with({ variant: "input" }, (props2) => /* @__PURE__ */ jsx111(NumberFieldInput, { ...props2 })).with({ variant: "slider" }, (props2) => /* @__PURE__ */ jsx111(NumberFieldSlider, { ...props2 })).with({ variant: "radio" }, (props2) => /* @__PURE__ */ jsx111(NumberFieldRadio, { ...props2 })).with({ variant: "select" }, (props2) => /* @__PURE__ */ jsx111(NumberFieldSelect, { ...props2 })).exhaustive();
+  return match2(props).with({ variant: "input" }, (props2) => /* @__PURE__ */ jsx117(NumberFieldInput, { ...props2 })).with({ variant: "slider" }, (props2) => /* @__PURE__ */ jsx117(NumberFieldSlider, { ...props2 })).with({ variant: "radio" }, (props2) => /* @__PURE__ */ jsx117(NumberFieldRadio, { ...props2 })).with({ variant: "select" }, (props2) => /* @__PURE__ */ jsx117(NumberFieldSelect, { ...props2 })).exhaustive();
 };
 
 // src/components/Form/NumberRecordField.tsx
-import { jsx as jsx112, jsxs as jsxs37 } from "react/jsx-runtime";
+import { jsx as jsx118, jsxs as jsxs40 } from "react/jsx-runtime";
 var NumberRecordField = ({
   disabled,
   error: recordError,
@@ -2868,13 +3282,13 @@ var NumberRecordField = ({
   setValue: setRecordValue,
   value: recordValue
 }) => {
-  const optionsRef = useRef3(options);
-  useEffect5(() => {
+  const optionsRef = useRef5(options);
+  useEffect7(() => {
     if (!recordValue) {
       setRecordValue({});
     }
   }, []);
-  useEffect5(() => {
+  useEffect7(() => {
     if (optionsRef.current !== options) {
       setRecordValue({});
       optionsRef.current = options;
@@ -2883,11 +3297,11 @@ var NumberRecordField = ({
   if (!recordValue) {
     return null;
   }
-  return /* @__PURE__ */ jsxs37("div", { className: "flex flex-col gap-4", children: [
-    /* @__PURE__ */ jsx112(Heading, { className: "font-medium", variant: "h5", children: label }),
-    /* @__PURE__ */ jsx112("div", { className: "flex flex-col gap-6", children: Object.keys(items).map((name) => {
+  return /* @__PURE__ */ jsxs40("div", { className: "flex flex-col gap-4", children: [
+    /* @__PURE__ */ jsx118(Heading, { className: "font-medium", variant: "h5", children: label }),
+    /* @__PURE__ */ jsx118("div", { className: "flex flex-col gap-6", children: Object.keys(items).map((name) => {
       const item = items[name];
-      return /* @__PURE__ */ jsx112(
+      return /* @__PURE__ */ jsx118(
         NumberField,
         {
           error: recordError?.[name],
@@ -2908,14 +3322,14 @@ var NumberRecordField = ({
 };
 
 // src/components/Form/RecordArrayField.tsx
-import { memo, useEffect as useEffect9, useRef as useRef4 } from "react";
+import { memo, useEffect as useEffect11, useRef as useRef6 } from "react";
 import { MinusCircleIcon, PlusCircleIcon } from "lucide-react";
 
 // src/components/Form/BooleanField/BooleanField.tsx
 import { match as match4 } from "ts-pattern";
 
 // src/components/Form/BooleanField/BooleanFieldCheckbox.tsx
-import { jsx as jsx113, jsxs as jsxs38 } from "react/jsx-runtime";
+import { jsx as jsx119, jsxs as jsxs41 } from "react/jsx-runtime";
 var BooleanFieldCheckbox = ({
   description,
   disabled,
@@ -2926,9 +3340,9 @@ var BooleanFieldCheckbox = ({
   setValue,
   value
 }) => {
-  return /* @__PURE__ */ jsxs38(FieldGroup, { name, children: [
-    /* @__PURE__ */ jsxs38(FieldGroup.Row, { children: [
-      /* @__PURE__ */ jsx113(
+  return /* @__PURE__ */ jsxs41(FieldGroup, { name, children: [
+    /* @__PURE__ */ jsxs41(FieldGroup.Row, { children: [
+      /* @__PURE__ */ jsx119(
         Checkbox,
         {
           checked: Boolean(value),
@@ -2942,17 +3356,17 @@ var BooleanFieldCheckbox = ({
           }
         }
       ),
-      /* @__PURE__ */ jsx113(Label3, { htmlFor: name, children: label }),
-      /* @__PURE__ */ jsx113(FieldGroup.Description, { description })
+      /* @__PURE__ */ jsx119(Label3, { htmlFor: name, children: label }),
+      /* @__PURE__ */ jsx119(FieldGroup.Description, { description })
     ] }),
-    /* @__PURE__ */ jsx113(FieldGroup.Error, { error })
+    /* @__PURE__ */ jsx119(FieldGroup.Error, { error })
   ] });
 };
 
 // src/components/Form/BooleanField/BooleanFieldRadio.tsx
 import { useCallback as useCallback2 } from "react";
 import { match as match3 } from "ts-pattern";
-import { jsx as jsx114, jsxs as jsxs39 } from "react/jsx-runtime";
+import { jsx as jsx120, jsxs as jsxs42 } from "react/jsx-runtime";
 var stringifyBoolean = (value) => match3(value).with(void 0, () => "").with(true, () => "true").with(false, () => "false").exhaustive();
 var BooleanFieldRadio = ({
   description,
@@ -2972,12 +3386,12 @@ var BooleanFieldRadio = ({
     },
     [match3, setValue]
   );
-  return /* @__PURE__ */ jsxs39(FieldGroup, { name, children: [
-    /* @__PURE__ */ jsxs39(FieldGroup.Row, { children: [
-      /* @__PURE__ */ jsx114(Label3, { children: label }),
-      /* @__PURE__ */ jsx114(FieldGroup.Description, { description })
+  return /* @__PURE__ */ jsxs42(FieldGroup, { name, children: [
+    /* @__PURE__ */ jsxs42(FieldGroup.Row, { children: [
+      /* @__PURE__ */ jsx120(Label3, { children: label }),
+      /* @__PURE__ */ jsx120(FieldGroup.Description, { description })
     ] }),
-    /* @__PURE__ */ jsxs39(
+    /* @__PURE__ */ jsxs42(
       RadioGroup4,
       {
         disabled: disabled || readOnly,
@@ -2985,37 +3399,37 @@ var BooleanFieldRadio = ({
         value: stringifyBoolean(value),
         onValueChange: handleValueChange,
         children: [
-          /* @__PURE__ */ jsxs39(FieldGroup.Row, { children: [
-            /* @__PURE__ */ jsx114(RadioGroup4.Item, { id: `${name}-true`, value: "true" }),
-            /* @__PURE__ */ jsx114(Label3, { "aria-disabled": disabled || readOnly, className: "text-muted-foreground", htmlFor: `${name}-true`, children: options?.true ?? t("form.radioLabels.true") })
+          /* @__PURE__ */ jsxs42(FieldGroup.Row, { children: [
+            /* @__PURE__ */ jsx120(RadioGroup4.Item, { id: `${name}-true`, value: "true" }),
+            /* @__PURE__ */ jsx120(Label3, { "aria-disabled": disabled || readOnly, className: "text-muted-foreground", htmlFor: `${name}-true`, children: options?.true ?? t("form.radioLabels.true") })
           ] }),
-          /* @__PURE__ */ jsxs39(FieldGroup.Row, { children: [
-            /* @__PURE__ */ jsx114(RadioGroup4.Item, { id: `${name}-false`, value: "false" }),
-            /* @__PURE__ */ jsx114(Label3, { "aria-disabled": disabled || readOnly, className: "text-muted-foreground", htmlFor: `${name}-false`, children: options?.false ?? t("form.radioLabels.false") })
+          /* @__PURE__ */ jsxs42(FieldGroup.Row, { children: [
+            /* @__PURE__ */ jsx120(RadioGroup4.Item, { id: `${name}-false`, value: "false" }),
+            /* @__PURE__ */ jsx120(Label3, { "aria-disabled": disabled || readOnly, className: "text-muted-foreground", htmlFor: `${name}-false`, children: options?.false ?? t("form.radioLabels.false") })
           ] })
         ]
       }
     ),
-    /* @__PURE__ */ jsx114(FieldGroup.Error, { error })
+    /* @__PURE__ */ jsx120(FieldGroup.Error, { error })
   ] });
 };
 
 // src/components/Form/BooleanField/BooleanField.tsx
-import { jsx as jsx115 } from "react/jsx-runtime";
+import { jsx as jsx121 } from "react/jsx-runtime";
 var BooleanField = (props) => {
-  return match4(props).with({ variant: "radio" }, (props2) => /* @__PURE__ */ jsx115(BooleanFieldRadio, { ...props2 })).with({ variant: "checkbox" }, (props2) => /* @__PURE__ */ jsx115(BooleanFieldCheckbox, { ...props2 })).exhaustive();
+  return match4(props).with({ variant: "radio" }, (props2) => /* @__PURE__ */ jsx121(BooleanFieldRadio, { ...props2 })).with({ variant: "checkbox" }, (props2) => /* @__PURE__ */ jsx121(BooleanFieldCheckbox, { ...props2 })).exhaustive();
 };
 
 // src/components/Form/DateField/DateField.tsx
-import { useEffect as useEffect6, useState as useState6 } from "react";
+import { useEffect as useEffect8, useState as useState6 } from "react";
 import { toBasicISOString as toBasicISOString2 } from "@douglasneuroinformatics/libjs";
-import { jsx as jsx116, jsxs as jsxs40 } from "react/jsx-runtime";
+import { jsx as jsx122, jsxs as jsxs43 } from "react/jsx-runtime";
 var isValidDateString = (s) => /^(\d{4})-((0[1-9])|(1[0-2]))-((0[1-9])|([12])[0-9]|3[01])$/.test(s);
 var DateField = ({ disabled, error, label, name, readOnly, setValue, value }) => {
   const [isDatePickerOpen, setIsDatePickerOpen] = useState6(false);
   const [isInputFocused, setIsInputFocused] = useState6(false);
   const [inputValue, setInputValue] = useState6(value ? toBasicISOString2(value) : "");
-  useEffect6(() => {
+  useEffect8(() => {
     const isSelecting = isDatePickerOpen || isInputFocused;
     if (isSelecting) {
       return;
@@ -3025,13 +3439,13 @@ var DateField = ({ disabled, error, label, name, readOnly, setValue, value }) =>
       setInputValue("");
     }
   }, [isDatePickerOpen, isInputFocused]);
-  useEffect6(() => {
+  useEffect8(() => {
     setInputValue(value ? toBasicISOString2(value) : "");
   }, [value]);
-  return /* @__PURE__ */ jsxs40(FieldGroup, { name, children: [
-    /* @__PURE__ */ jsx116(Label3, { htmlFor: name, children: label }),
-    /* @__PURE__ */ jsxs40(Popover, { open: isDatePickerOpen, onOpenChange: setIsDatePickerOpen, children: [
-      /* @__PURE__ */ jsx116(Popover.Trigger, { children: /* @__PURE__ */ jsx116(
+  return /* @__PURE__ */ jsxs43(FieldGroup, { name, children: [
+    /* @__PURE__ */ jsx122(Label3, { htmlFor: name, children: label }),
+    /* @__PURE__ */ jsxs43(Popover, { open: isDatePickerOpen, onOpenChange: setIsDatePickerOpen, children: [
+      /* @__PURE__ */ jsx122(Popover.Trigger, { children: /* @__PURE__ */ jsx122(
         Input,
         {
           autoComplete: "off",
@@ -3046,7 +3460,7 @@ var DateField = ({ disabled, error, label, name, readOnly, setValue, value }) =>
           onFocus: () => setIsInputFocused(true)
         }
       ) }),
-      /* @__PURE__ */ jsx116(Popover.Content, { asChild: true, align: "start", autofocus: false, className: "w-auto", children: /* @__PURE__ */ jsx116(
+      /* @__PURE__ */ jsx122(Popover.Content, { asChild: true, align: "start", autofocus: false, className: "w-auto", children: /* @__PURE__ */ jsx122(
         DatePicker,
         {
           onSelection: (value2) => {
@@ -3056,16 +3470,16 @@ var DateField = ({ disabled, error, label, name, readOnly, setValue, value }) =>
         }
       ) })
     ] }),
-    /* @__PURE__ */ jsx116(FieldGroup.Error, { error })
+    /* @__PURE__ */ jsx122(FieldGroup.Error, { error })
   ] });
 };
 
 // src/components/Form/SetField/SetField.tsx
-import { useEffect as useEffect7 } from "react";
+import { useEffect as useEffect9 } from "react";
 import { match as match5 } from "ts-pattern";
 
 // src/components/Form/SetField/SetFieldListbox.tsx
-import { jsx as jsx117, jsxs as jsxs41 } from "react/jsx-runtime";
+import { jsx as jsx123, jsxs as jsxs44 } from "react/jsx-runtime";
 var SetFieldListbox = ({
   description,
   disabled,
@@ -3077,13 +3491,13 @@ var SetFieldListbox = ({
   readOnly,
   value
 }) => {
-  return /* @__PURE__ */ jsxs41(FieldGroup, { name, children: [
-    /* @__PURE__ */ jsxs41(FieldGroup.Row, { children: [
-      /* @__PURE__ */ jsx117(Label3, { children: label }),
-      /* @__PURE__ */ jsx117(FieldGroup.Description, { description })
+  return /* @__PURE__ */ jsxs44(FieldGroup, { name, children: [
+    /* @__PURE__ */ jsxs44(FieldGroup.Row, { children: [
+      /* @__PURE__ */ jsx123(Label3, { children: label }),
+      /* @__PURE__ */ jsx123(FieldGroup.Description, { description })
     ] }),
-    /* @__PURE__ */ jsx117("div", { className: "grid gap-2", children: Object.keys(options).map((option) => /* @__PURE__ */ jsxs41(FieldGroup.Row, { children: [
-      /* @__PURE__ */ jsx117(
+    /* @__PURE__ */ jsx123("div", { className: "grid gap-2", children: Object.keys(options).map((option) => /* @__PURE__ */ jsxs44(FieldGroup.Row, { children: [
+      /* @__PURE__ */ jsx123(
         Checkbox,
         {
           checked: value?.has(option) ?? false,
@@ -3094,14 +3508,14 @@ var SetFieldListbox = ({
           }
         }
       ),
-      /* @__PURE__ */ jsx117(Label3, { className: "font-normal text-muted-foreground", htmlFor: `${name}-${option}`, children: options[option] })
+      /* @__PURE__ */ jsx123(Label3, { className: "font-normal text-muted-foreground", htmlFor: `${name}-${option}`, children: options[option] })
     ] }, option)) }),
-    /* @__PURE__ */ jsx117(FieldGroup.Error, { error })
+    /* @__PURE__ */ jsx123(FieldGroup.Error, { error })
   ] });
 };
 
 // src/components/Form/SetField/SetFieldSelect.tsx
-import { jsx as jsx118, jsxs as jsxs42 } from "react/jsx-runtime";
+import { jsx as jsx124, jsxs as jsxs45 } from "react/jsx-runtime";
 var SetFieldSelect = ({
   description,
   disabled,
@@ -3113,16 +3527,16 @@ var SetFieldSelect = ({
   readOnly,
   value
 }) => {
-  return value ? /* @__PURE__ */ jsxs42(FieldGroup, { name, children: [
-    /* @__PURE__ */ jsxs42(FieldGroup.Row, { children: [
-      /* @__PURE__ */ jsx118(Label3, { children: label }),
-      /* @__PURE__ */ jsx118(FieldGroup.Description, { description })
+  return value ? /* @__PURE__ */ jsxs45(FieldGroup, { name, children: [
+    /* @__PURE__ */ jsxs45(FieldGroup.Row, { children: [
+      /* @__PURE__ */ jsx124(Label3, { children: label }),
+      /* @__PURE__ */ jsx124(FieldGroup.Description, { description })
     ] }),
-    /* @__PURE__ */ jsxs42(DropdownMenu, { children: [
-      /* @__PURE__ */ jsx118(DropdownMenu.Trigger, { asChild: true, className: "w-full", disabled: disabled || readOnly, children: /* @__PURE__ */ jsx118(DropdownButton, { children: value.size ? /* @__PURE__ */ jsx118("div", { className: "flex items-center gap-2", children: Array.from(value).map((option) => /* @__PURE__ */ jsx118(Badge, { className: "font-normal", variant: "outline", children: options[option] }, option)) }) : null }) }),
-      /* @__PURE__ */ jsx118(DropdownMenu.Content, { widthFull: true, align: "start", children: Object.keys(options).map((option) => {
+    /* @__PURE__ */ jsxs45(DropdownMenu, { children: [
+      /* @__PURE__ */ jsx124(DropdownMenu.Trigger, { asChild: true, className: "w-full", disabled: disabled || readOnly, children: /* @__PURE__ */ jsx124(DropdownButton, { children: value.size ? /* @__PURE__ */ jsx124("div", { className: "flex items-center gap-2", children: Array.from(value).map((option) => /* @__PURE__ */ jsx124(Badge, { className: "font-normal", variant: "outline", children: options[option] }, option)) }) : null }) }),
+      /* @__PURE__ */ jsx124(DropdownMenu.Content, { widthFull: true, align: "start", children: Object.keys(options).map((option) => {
         const checked = value.has(option);
-        return /* @__PURE__ */ jsx118(
+        return /* @__PURE__ */ jsx124(
           DropdownMenu.CheckboxItem,
           {
             checked,
@@ -3136,14 +3550,14 @@ var SetFieldSelect = ({
         );
       }) })
     ] }),
-    /* @__PURE__ */ jsx118(FieldGroup.Error, { error })
+    /* @__PURE__ */ jsx124(FieldGroup.Error, { error })
   ] }) : null;
 };
 
 // src/components/Form/SetField/SetField.tsx
-import { jsx as jsx119 } from "react/jsx-runtime";
+import { jsx as jsx125 } from "react/jsx-runtime";
 var SetField = (props) => {
-  useEffect7(() => {
+  useEffect9(() => {
     if (!props.value) {
       props.setValue(/* @__PURE__ */ new Set([]));
     }
@@ -3159,14 +3573,14 @@ var SetField = (props) => {
       props.setValue(updatedValue);
     }
   };
-  return match5(props).with({ variant: "select" }, (props2) => /* @__PURE__ */ jsx119(SetFieldSelect, { onCheckedChange: handleCheckedChange, ...props2 })).with({ variant: "listbox" }, (props2) => /* @__PURE__ */ jsx119(SetFieldListbox, { onCheckedChange: handleCheckedChange, ...props2 })).exhaustive();
+  return match5(props).with({ variant: "select" }, (props2) => /* @__PURE__ */ jsx125(SetFieldSelect, { onCheckedChange: handleCheckedChange, ...props2 })).with({ variant: "listbox" }, (props2) => /* @__PURE__ */ jsx125(SetFieldListbox, { onCheckedChange: handleCheckedChange, ...props2 })).exhaustive();
 };
 
 // src/components/Form/StringField/StringField.tsx
 import { match as match6 } from "ts-pattern";
 
 // src/components/Form/StringField/StringFieldInput.tsx
-import { jsx as jsx120, jsxs as jsxs43 } from "react/jsx-runtime";
+import { jsx as jsx126, jsxs as jsxs46 } from "react/jsx-runtime";
 var StringFieldInput = ({
   description,
   disabled,
@@ -3178,12 +3592,12 @@ var StringFieldInput = ({
   setValue,
   value
 }) => {
-  return /* @__PURE__ */ jsxs43(FieldGroup, { name, children: [
-    /* @__PURE__ */ jsxs43(FieldGroup.Row, { children: [
-      /* @__PURE__ */ jsx120(Label3, { htmlFor: name, children: label }),
-      /* @__PURE__ */ jsx120(FieldGroup.Description, { description })
+  return /* @__PURE__ */ jsxs46(FieldGroup, { name, children: [
+    /* @__PURE__ */ jsxs46(FieldGroup.Row, { children: [
+      /* @__PURE__ */ jsx126(Label3, { htmlFor: name, children: label }),
+      /* @__PURE__ */ jsx126(FieldGroup.Description, { description })
     ] }),
-    /* @__PURE__ */ jsx120(
+    /* @__PURE__ */ jsx126(
       Input,
       {
         disabled: disabled || readOnly,
@@ -3195,15 +3609,15 @@ var StringFieldInput = ({
         onChange: (event) => setValue(event.target.value)
       }
     ),
-    /* @__PURE__ */ jsx120(FieldGroup.Error, { error })
+    /* @__PURE__ */ jsx126(FieldGroup.Error, { error })
   ] });
 };
 
 // src/components/Form/StringField/StringFieldPassword.tsx
-import { useEffect as useEffect8, useState as useState7 } from "react";
+import { useEffect as useEffect10, useState as useState7 } from "react";
 import { EyeIcon, EyeOffIcon } from "lucide-react";
 import { motion as motion4 } from "motion/react";
-import { jsx as jsx121, jsxs as jsxs44 } from "react/jsx-runtime";
+import { jsx as jsx127, jsxs as jsxs47 } from "react/jsx-runtime";
 var StringFieldPassword = ({
   calculateStrength,
   description,
@@ -3217,18 +3631,18 @@ var StringFieldPassword = ({
 }) => {
   const [strength, setStrength] = useState7(calculateStrength ? 0 : null);
   const [show, setShow] = useState7(false);
-  useEffect8(() => {
+  useEffect10(() => {
     if (calculateStrength) {
       setStrength(value ? calculateStrength(value) : 0);
     }
   }, [value]);
-  return /* @__PURE__ */ jsxs44(FieldGroup, { name, children: [
-    /* @__PURE__ */ jsxs44(FieldGroup.Row, { children: [
-      /* @__PURE__ */ jsx121(Label3, { htmlFor: name, children: label }),
-      /* @__PURE__ */ jsx121(FieldGroup.Description, { description })
+  return /* @__PURE__ */ jsxs47(FieldGroup, { name, children: [
+    /* @__PURE__ */ jsxs47(FieldGroup.Row, { children: [
+      /* @__PURE__ */ jsx127(Label3, { htmlFor: name, children: label }),
+      /* @__PURE__ */ jsx127(FieldGroup.Description, { description })
     ] }),
-    /* @__PURE__ */ jsxs44(FieldGroup.Row, { children: [
-      /* @__PURE__ */ jsx121(
+    /* @__PURE__ */ jsxs47(FieldGroup.Row, { children: [
+      /* @__PURE__ */ jsx127(
         Input,
         {
           disabled: disabled || readOnly,
@@ -3239,7 +3653,7 @@ var StringFieldPassword = ({
           onChange: (event) => setValue(event.target.value)
         }
       ),
-      /* @__PURE__ */ jsxs44(
+      /* @__PURE__ */ jsxs47(
         "button",
         {
           className: "text-muted-foreground absolute right-0 flex h-full w-8 items-center justify-center",
@@ -3248,20 +3662,20 @@ var StringFieldPassword = ({
           type: "button",
           onClick: () => setShow(!show),
           children: [
-            /* @__PURE__ */ jsx121(EyeIcon, { className: cn("absolute transition-all", show ? "scale-0 -rotate-90" : "scale-100 rotate-0") }),
-            /* @__PURE__ */ jsx121(EyeOffIcon, { className: cn("absolute transition-all", !show ? "scale-0 rotate-90" : "scale-100 rotate-0") })
+            /* @__PURE__ */ jsx127(EyeIcon, { className: cn("absolute transition-all", show ? "scale-0 -rotate-90" : "scale-100 rotate-0") }),
+            /* @__PURE__ */ jsx127(EyeOffIcon, { className: cn("absolute transition-all", !show ? "scale-0 rotate-90" : "scale-100 rotate-0") })
           ]
         }
       )
     ] }),
-    strength !== null && /* @__PURE__ */ jsx121(
+    strength !== null && /* @__PURE__ */ jsx127(
       motion4.div,
       {
         animate: { width: `${Math.max(strength * 25, 5)}%` },
         className: "h-1 w-full overflow-hidden rounded-sm",
         initial: { width: "5%" },
         transition: { duration: 0.5 },
-        children: /* @__PURE__ */ jsx121(
+        children: /* @__PURE__ */ jsx127(
           "div",
           {
             className: cn(
@@ -3274,13 +3688,13 @@ var StringFieldPassword = ({
         )
       }
     ),
-    /* @__PURE__ */ jsx121(FieldGroup.Error, { error })
+    /* @__PURE__ */ jsx127(FieldGroup.Error, { error })
   ] });
 };
 
 // src/components/Form/BaseRadioField.tsx
 import { cva as cva3 } from "class-variance-authority";
-import { jsx as jsx122, jsxs as jsxs45 } from "react/jsx-runtime";
+import { jsx as jsx128, jsxs as jsxs48 } from "react/jsx-runtime";
 var baseRadioFieldVariants = cva3("flex", {
   defaultVariants: {
     orientation: "vertical"
@@ -3305,21 +3719,21 @@ var BaseRadioField = ({
   value
 }) => {
   const optionsCount = Object.keys(options).length;
-  return /* @__PURE__ */ jsxs45(FieldGroup, { name, children: [
-    /* @__PURE__ */ jsxs45(FieldGroup.Row, { children: [
-      /* @__PURE__ */ jsx122(Label3, { children: label }),
-      /* @__PURE__ */ jsx122(FieldGroup.Description, { description })
+  return /* @__PURE__ */ jsxs48(FieldGroup, { name, children: [
+    /* @__PURE__ */ jsxs48(FieldGroup.Row, { children: [
+      /* @__PURE__ */ jsx128(Label3, { children: label }),
+      /* @__PURE__ */ jsx128(FieldGroup.Description, { description })
     ] }),
-    /* @__PURE__ */ jsx122(
+    /* @__PURE__ */ jsx128(
       RadioGroup4,
       {
         className: baseRadioFieldVariants({ orientation: optionsCount > 5 ? "vertical" : orientation }),
         name,
         value: value ?? "",
         onValueChange: (value2) => setValue(value2),
-        children: Object.keys(options).map((option) => /* @__PURE__ */ jsxs45("div", { className: "flex items-center gap-2", children: [
-          /* @__PURE__ */ jsx122(RadioGroup4.Item, { disabled: disabled || readOnly, id: `${name}-${option}`, value: option }),
-          /* @__PURE__ */ jsx122(
+        children: Object.keys(options).map((option) => /* @__PURE__ */ jsxs48("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx128(RadioGroup4.Item, { disabled: disabled || readOnly, id: `${name}-${option}`, value: option }),
+          /* @__PURE__ */ jsx128(
             Label3,
             {
               "aria-disabled": disabled || readOnly,
@@ -3331,18 +3745,18 @@ var BaseRadioField = ({
         ] }, option))
       }
     ),
-    /* @__PURE__ */ jsx122(FieldGroup.Error, { error })
+    /* @__PURE__ */ jsx128(FieldGroup.Error, { error })
   ] });
 };
 
 // src/components/Form/StringField/StringFieldRadio.tsx
-import { jsx as jsx123 } from "react/jsx-runtime";
+import { jsx as jsx129 } from "react/jsx-runtime";
 var StringFieldRadio = (props) => {
-  return /* @__PURE__ */ jsx123(BaseRadioField, { ...props });
+  return /* @__PURE__ */ jsx129(BaseRadioField, { ...props });
 };
 
 // src/components/Form/StringField/StringFieldSelect.tsx
-import { jsx as jsx124, jsxs as jsxs46 } from "react/jsx-runtime";
+import { jsx as jsx130, jsxs as jsxs49 } from "react/jsx-runtime";
 var StringFieldSelect = ({
   description,
   disabled,
@@ -3354,24 +3768,24 @@ var StringFieldSelect = ({
   setValue,
   value
 }) => {
-  return /* @__PURE__ */ jsxs46(FieldGroup, { name, children: [
-    /* @__PURE__ */ jsxs46(FieldGroup.Row, { children: [
-      /* @__PURE__ */ jsx124(Label3, { children: label }),
-      /* @__PURE__ */ jsx124(FieldGroup.Description, { description })
+  return /* @__PURE__ */ jsxs49(FieldGroup, { name, children: [
+    /* @__PURE__ */ jsxs49(FieldGroup.Row, { children: [
+      /* @__PURE__ */ jsx130(Label3, { children: label }),
+      /* @__PURE__ */ jsx130(FieldGroup.Description, { description })
     ] }),
-    /* @__PURE__ */ jsxs46(Select, { name, value: value ?? "", onValueChange: (value2) => setValue(value2), children: [
-      /* @__PURE__ */ jsx124(Select.Trigger, { "data-testid": `${name}-select-trigger`, disabled: disabled || readOnly, children: /* @__PURE__ */ jsx124(Select.Value, {}) }),
-      /* @__PURE__ */ jsx124(Select.Content, { "data-testid": `${name}-select-content`, children: Object.keys(options).map((option) => /* @__PURE__ */ jsx124(Select.Item, { "data-testid": `${name}-select-item-${option}`, value: option, children: options[option] }, option)) })
+    /* @__PURE__ */ jsxs49(Select, { name, value: value ?? "", onValueChange: (value2) => setValue(value2), children: [
+      /* @__PURE__ */ jsx130(Select.Trigger, { "data-testid": `${name}-select-trigger`, disabled: disabled || readOnly, children: /* @__PURE__ */ jsx130(Select.Value, {}) }),
+      /* @__PURE__ */ jsx130(Select.Content, { "data-testid": `${name}-select-content`, children: Object.keys(options).map((option) => /* @__PURE__ */ jsx130(Select.Item, { "data-testid": `${name}-select-item-${option}`, value: option, children: options[option] }, option)) })
     ] }),
-    /* @__PURE__ */ jsx124(FieldGroup.Error, { error })
+    /* @__PURE__ */ jsx130(FieldGroup.Error, { error })
   ] });
 };
 
 // src/components/TextArea/TextArea.tsx
 import * as React27 from "react";
-import { jsx as jsx125 } from "react/jsx-runtime";
+import { jsx as jsx131 } from "react/jsx-runtime";
 var TextArea = React27.forwardRef(function TextArea2({ className, ...props }, ref) {
-  return /* @__PURE__ */ jsx125(
+  return /* @__PURE__ */ jsx131(
     "textarea",
     {
       autoComplete: "off",
@@ -3387,7 +3801,7 @@ var TextArea = React27.forwardRef(function TextArea2({ className, ...props }, re
 });
 
 // src/components/Form/StringField/StringFieldTextArea.tsx
-import { jsx as jsx126, jsxs as jsxs47 } from "react/jsx-runtime";
+import { jsx as jsx132, jsxs as jsxs50 } from "react/jsx-runtime";
 var StringFieldTextArea = ({
   description,
   disabled,
@@ -3399,12 +3813,12 @@ var StringFieldTextArea = ({
   setValue,
   value
 }) => {
-  return /* @__PURE__ */ jsxs47(FieldGroup, { name, children: [
-    /* @__PURE__ */ jsxs47(FieldGroup.Row, { children: [
-      /* @__PURE__ */ jsx126(Label3, { htmlFor: name, children: label }),
-      /* @__PURE__ */ jsx126(FieldGroup.Description, { description })
+  return /* @__PURE__ */ jsxs50(FieldGroup, { name, children: [
+    /* @__PURE__ */ jsxs50(FieldGroup.Row, { children: [
+      /* @__PURE__ */ jsx132(Label3, { htmlFor: name, children: label }),
+      /* @__PURE__ */ jsx132(FieldGroup.Description, { description })
     ] }),
-    /* @__PURE__ */ jsx126(
+    /* @__PURE__ */ jsx132(
       TextArea,
       {
         disabled: disabled || readOnly,
@@ -3416,37 +3830,37 @@ var StringFieldTextArea = ({
         onChange: (event) => setValue(event.target.value)
       }
     ),
-    /* @__PURE__ */ jsx126(FieldGroup.Error, { error })
+    /* @__PURE__ */ jsx132(FieldGroup.Error, { error })
   ] });
 };
 
 // src/components/Form/StringField/StringField.tsx
-import { jsx as jsx127 } from "react/jsx-runtime";
+import { jsx as jsx133 } from "react/jsx-runtime";
 var StringField = (props) => {
-  return match6(props).with({ variant: "textarea" }, (props2) => /* @__PURE__ */ jsx127(StringFieldTextArea, { ...props2 })).with({ variant: "password" }, (props2) => /* @__PURE__ */ jsx127(StringFieldPassword, { ...props2 })).with({ variant: "input" }, (props2) => /* @__PURE__ */ jsx127(StringFieldInput, { ...props2 })).with({ variant: "select" }, (props2) => /* @__PURE__ */ jsx127(StringFieldSelect, { ...props2 })).with({ variant: "radio" }, (props2) => /* @__PURE__ */ jsx127(StringFieldRadio, { ...props2 })).exhaustive();
+  return match6(props).with({ variant: "textarea" }, (props2) => /* @__PURE__ */ jsx133(StringFieldTextArea, { ...props2 })).with({ variant: "password" }, (props2) => /* @__PURE__ */ jsx133(StringFieldPassword, { ...props2 })).with({ variant: "input" }, (props2) => /* @__PURE__ */ jsx133(StringFieldInput, { ...props2 })).with({ variant: "select" }, (props2) => /* @__PURE__ */ jsx133(StringFieldSelect, { ...props2 })).with({ variant: "radio" }, (props2) => /* @__PURE__ */ jsx133(StringFieldRadio, { ...props2 })).exhaustive();
 };
 
 // src/components/Form/ScalarField.tsx
-import { jsx as jsx128 } from "react/jsx-runtime";
+import { jsx as jsx134 } from "react/jsx-runtime";
 var ScalarField = ({ field, ...props }) => {
   switch (field.kind) {
     case "boolean":
-      return /* @__PURE__ */ jsx128(BooleanField, { ...field, ...props });
+      return /* @__PURE__ */ jsx134(BooleanField, { ...field, ...props });
     case "date":
-      return /* @__PURE__ */ jsx128(DateField, { ...field, ...props });
+      return /* @__PURE__ */ jsx134(DateField, { ...field, ...props });
     case "number":
-      return /* @__PURE__ */ jsx128(NumberField, { ...field, ...props });
+      return /* @__PURE__ */ jsx134(NumberField, { ...field, ...props });
     case "set":
-      return /* @__PURE__ */ jsx128(SetField, { ...field, ...props });
+      return /* @__PURE__ */ jsx134(SetField, { ...field, ...props });
     case "string":
-      return /* @__PURE__ */ jsx128(StringField, { ...field, ...props });
+      return /* @__PURE__ */ jsx134(StringField, { ...field, ...props });
     default:
       throw new Error(`Unexpected value for kind: ${Reflect.get(field, "kind")}`);
   }
 };
 
 // src/components/Form/RecordArrayField.tsx
-import { jsx as jsx129, jsxs as jsxs48 } from "react/jsx-runtime";
+import { jsx as jsx135, jsxs as jsxs51 } from "react/jsx-runtime";
 var RecordArrayField = memo(function RecordArrayField2({
   disabled,
   error: arrayError,
@@ -3457,15 +3871,15 @@ var RecordArrayField = memo(function RecordArrayField2({
   setValue: setArrayValue,
   value: arrayValue
 }) {
-  const fieldsetRef = useRef4(fieldset);
+  const fieldsetRef = useRef6(fieldset);
   const { t } = useTranslation("libui");
   const createNewRecord = () => Object.fromEntries(Object.keys(fieldset).map((fieldName) => [fieldName, void 0]));
-  useEffect9(() => {
+  useEffect11(() => {
     if (!arrayValue) {
       setArrayValue([createNewRecord()]);
     }
   }, []);
-  useEffect9(() => {
+  useEffect11(() => {
     if (fieldsetRef.current !== fieldset) {
       setArrayValue([createNewRecord()]);
       fieldsetRef.current = fieldset;
@@ -3482,17 +3896,17 @@ var RecordArrayField = memo(function RecordArrayField2({
       setArrayValue(arrayValue.slice(0, arrayValue.length - 1));
     }
   };
-  return /* @__PURE__ */ jsxs48("div", { className: "flex flex-col gap-4", children: [
-    /* @__PURE__ */ jsx129(Heading, { className: "font-medium", variant: "h5", children: label }),
-    /* @__PURE__ */ jsx129("div", { className: "flex flex-col gap-6", children: arrayValue.map((fields, i) => /* @__PURE__ */ jsxs48("div", { className: "flex flex-col gap-4", children: [
-      /* @__PURE__ */ jsx129(Label3, { className: "font-semibold italic", children: label + " " + (i + 1) }),
+  return /* @__PURE__ */ jsxs51("div", { className: "flex flex-col gap-4", children: [
+    /* @__PURE__ */ jsx135(Heading, { className: "font-medium", variant: "h5", children: label }),
+    /* @__PURE__ */ jsx135("div", { className: "flex flex-col gap-6", children: arrayValue.map((fields, i) => /* @__PURE__ */ jsxs51("div", { className: "flex flex-col gap-4", children: [
+      /* @__PURE__ */ jsx135(Label3, { className: "font-semibold italic", children: label + " " + (i + 1) }),
       Object.keys(fields).map((name) => {
         const field = fieldset[name];
         const fieldProps = field?.kind === "dynamic" ? field.render.call(void 0, fields) : field;
         if (!fieldProps) {
           return null;
         }
-        return /* @__PURE__ */ jsx129(
+        return /* @__PURE__ */ jsx135(
           ScalarField,
           {
             error: arrayError?.[i]?.[name],
@@ -3519,21 +3933,21 @@ var RecordArrayField = memo(function RecordArrayField2({
         );
       })
     ] }, i)) }),
-    /* @__PURE__ */ jsxs48("div", { className: "flex gap-3", children: [
-      /* @__PURE__ */ jsxs48(Button, { disabled: disabled || readOnly, type: "button", variant: "outline", onClick: appendField, children: [
+    /* @__PURE__ */ jsxs51("div", { className: "flex gap-3", children: [
+      /* @__PURE__ */ jsxs51(Button, { disabled: disabled || readOnly, type: "button", variant: "outline", onClick: appendField, children: [
         t("form.append"),
-        /* @__PURE__ */ jsx129(PlusCircleIcon, { className: "ml-2" })
+        /* @__PURE__ */ jsx135(PlusCircleIcon, { className: "ml-2" })
       ] }),
-      /* @__PURE__ */ jsxs48(Button, { disabled: disabled || readOnly, type: "button", variant: "outline", onClick: removeField, children: [
+      /* @__PURE__ */ jsxs51(Button, { disabled: disabled || readOnly, type: "button", variant: "outline", onClick: removeField, children: [
         t("form.remove"),
-        /* @__PURE__ */ jsx129(MinusCircleIcon, { className: "ml-2" })
+        /* @__PURE__ */ jsx135(MinusCircleIcon, { className: "ml-2" })
       ] })
     ] })
   ] });
 });
 
 // src/components/Form/StaticField.tsx
-import { jsx as jsx130 } from "react/jsx-runtime";
+import { jsx as jsx136 } from "react/jsx-runtime";
 var StaticField = ({
   errors,
   field,
@@ -3555,7 +3969,7 @@ var StaticField = ({
     },
     [setValues]
   );
-  return match7(field).with({ kind: "record-array" }, (field2) => /* @__PURE__ */ jsx130(
+  return match7(field).with({ kind: "record-array" }, (field2) => /* @__PURE__ */ jsx136(
     RecordArrayField,
     {
       ...field2,
@@ -3566,7 +3980,7 @@ var StaticField = ({
       setValue,
       value: values[name]
     }
-  )).with({ kind: "number-record" }, (field2) => /* @__PURE__ */ jsx130(
+  )).with({ kind: "number-record" }, (field2) => /* @__PURE__ */ jsx136(
     NumberRecordField,
     {
       ...field2,
@@ -3577,7 +3991,7 @@ var StaticField = ({
       setValue,
       value: values[name]
     }
-  )).otherwise((field2) => /* @__PURE__ */ jsx130(
+  )).otherwise((field2) => /* @__PURE__ */ jsx136(
     ScalarField,
     {
       error: errors[name],
@@ -3592,7 +4006,7 @@ var StaticField = ({
 };
 
 // src/components/Form/DynamicField.tsx
-import { jsx as jsx131 } from "react/jsx-runtime";
+import { jsx as jsx137 } from "react/jsx-runtime";
 var DynamicField = ({
   field,
   name,
@@ -3602,15 +4016,15 @@ var DynamicField = ({
   ...props
 }) => {
   const [dependentValues, setDependentValues] = useState8(pick(values, field.deps));
-  const staticField = useMemo3(() => {
+  const staticField = useMemo2(() => {
     return field.render.call(void 0, values);
   }, [dependentValues, field.render]);
-  useEffect10(() => {
+  useEffect12(() => {
     if (!staticField) {
       setValues((prevValues) => ({ ...prevValues, [name]: void 0 }));
     }
   }, [staticField]);
-  useEffect10(() => {
+  useEffect12(() => {
     for (const key of field.deps) {
       if (dependentValues[key] !== values[key]) {
         setDependentValues(pick(values, field.deps));
@@ -3621,7 +4035,7 @@ var DynamicField = ({
   if (!staticField) {
     return null;
   }
-  return /* @__PURE__ */ jsx131(StaticField, { ...props, field: staticField, name, readOnly, setValues, values });
+  return /* @__PURE__ */ jsx137(StaticField, { ...props, field: staticField, name, readOnly, setValues, values });
 };
 
 // src/components/Form/FieldsComponent.tsx
@@ -3653,7 +4067,7 @@ function getInitialValues(values) {
 }
 
 // src/components/Form/Form.tsx
-import { Fragment as Fragment2, jsx as jsx132, jsxs as jsxs49 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx138, jsxs as jsxs52 } from "react/jsx-runtime";
 var Form = ({
   additionalButtons,
   className,
@@ -3703,7 +4117,7 @@ var Form = ({
       onError(error);
     }
   };
-  useEffect11(() => {
+  useEffect13(() => {
     if (!subscribe) {
       return;
     }
@@ -3761,12 +4175,12 @@ var Form = ({
       }).catch(console.error);
     }
   };
-  useEffect11(() => {
+  useEffect13(() => {
     setErrors({});
     setRootErrors([]);
   }, [resolvedLanguage]);
   const isSuspended = Boolean(suspendWhileSubmitting && isSubmitting);
-  return /* @__PURE__ */ jsxs49(
+  return /* @__PURE__ */ jsxs52(
     "form",
     {
       autoComplete: "off",
@@ -3776,15 +4190,15 @@ var Form = ({
       onSubmit: (event) => void handleSubmit(event),
       ...props,
       children: [
-        isSubmitting && /* @__PURE__ */ jsx132("div", { className: "absolute z-10 h-full w-full cursor-wait" }),
+        isSubmitting && /* @__PURE__ */ jsx138("div", { className: "absolute z-10 h-full w-full cursor-wait" }),
         isGrouped ? content.map((fieldGroup, i) => {
-          return /* @__PURE__ */ jsxs49(Fragment2, { children: [
-            /* @__PURE__ */ jsxs49("div", { className: "flex flex-col gap-6 [&:not(:first-child)]:pt-8", children: [
-              /* @__PURE__ */ jsxs49("div", { className: "flex flex-col gap-1", children: [
-                fieldGroup.title && /* @__PURE__ */ jsx132(Heading, { className: "text-base", variant: "h4", children: fieldGroup.title }),
-                fieldGroup.description && /* @__PURE__ */ jsx132("p", { className: "text-muted-foreground text-sm leading-tight italic", children: fieldGroup.description })
+          return /* @__PURE__ */ jsxs52(Fragment2, { children: [
+            /* @__PURE__ */ jsxs52("div", { className: "flex flex-col gap-6 [&:not(:first-child)]:pt-8", children: [
+              /* @__PURE__ */ jsxs52("div", { className: "flex flex-col gap-1", children: [
+                fieldGroup.title && /* @__PURE__ */ jsx138(Heading, { className: "text-base", variant: "h4", children: fieldGroup.title }),
+                fieldGroup.description && /* @__PURE__ */ jsx138("p", { className: "text-muted-foreground text-sm leading-tight italic", children: fieldGroup.description })
               ] }),
-              /* @__PURE__ */ jsx132(
+              /* @__PURE__ */ jsx138(
                 FieldsComponent,
                 {
                   errors,
@@ -3796,9 +4210,9 @@ var Form = ({
                 }
               )
             ] }, i),
-            /* @__PURE__ */ jsx132(Separator3, { className: "mt-8" })
+            /* @__PURE__ */ jsx138(Separator3, { className: "mt-8" })
           ] });
-        }) : /* @__PURE__ */ jsx132(
+        }) : /* @__PURE__ */ jsx138(
           FieldsComponent,
           {
             errors,
@@ -3809,11 +4223,11 @@ var Form = ({
             values
           }
         ),
-        Boolean(rootErrors.length) && /* @__PURE__ */ jsx132(ErrorMessage, { className: "-mt-3", error: rootErrors }),
+        Boolean(rootErrors.length) && /* @__PURE__ */ jsx138("div", { className: "-mt-3", children: /* @__PURE__ */ jsx138(ErrorMessage, { hideIconOnWrap: true, error: rootErrors }) }),
         fieldsFooter,
-        /* @__PURE__ */ jsxs49("div", { className: "flex w-full gap-3", children: [
+        /* @__PURE__ */ jsxs52("div", { className: "flex w-full gap-3", children: [
           additionalButtons?.left,
-          /* @__PURE__ */ jsxs49(
+          /* @__PURE__ */ jsxs52(
             Button,
             {
               "aria-label": "Submit",
@@ -3823,7 +4237,7 @@ var Form = ({
               variant: "primary",
               children: [
                 submitBtnLabel ?? t("form.submit"),
-                /* @__PURE__ */ jsx132(
+                /* @__PURE__ */ jsx138(
                   "svg",
                   {
                     className: cn("hidden h-4 w-4 animate-spin", isSuspended && "block"),
@@ -3836,13 +4250,13 @@ var Form = ({
                     viewBox: "0 0 24 24",
                     width: "24",
                     xmlns: "http://www.w3.org/2000/svg",
-                    children: /* @__PURE__ */ jsx132("path", { d: "M21 12a9 9 0 1 1-6.219-8.56" })
+                    children: /* @__PURE__ */ jsx138("path", { d: "M21 12a9 9 0 1 1-6.219-8.56" })
                   }
                 )
               ]
             }
           ),
-          resetBtn && /* @__PURE__ */ jsx132(
+          resetBtn && /* @__PURE__ */ jsx138(
             Button,
             {
               "aria-label": "Reset",
@@ -3867,9 +4281,9 @@ import { Root as Root14, Trigger as Trigger7 } from "@radix-ui/react-hover-card"
 // src/components/HoverCard/HoverCardContent.tsx
 import { forwardRef as forwardRef79 } from "react";
 import { Content as Content8 } from "@radix-ui/react-hover-card";
-import { jsx as jsx133 } from "react/jsx-runtime";
+import { jsx as jsx139 } from "react/jsx-runtime";
 var HoverCardContent = forwardRef79(function HoverCardContent2({ align = "center", className, sideOffset = 4, ...props }, ref) {
-  return /* @__PURE__ */ jsx133(
+  return /* @__PURE__ */ jsx139(
     Content8,
     {
       align,
@@ -3892,7 +4306,7 @@ var HoverCard = Object.assign(Root14.bind(null), {
 
 // src/components/LanguageToggle/LanguageToggle.tsx
 import { LanguagesIcon } from "lucide-react";
-import { jsx as jsx134, jsxs as jsxs50 } from "react/jsx-runtime";
+import { jsx as jsx140, jsxs as jsxs53 } from "react/jsx-runtime";
 var LanguageToggle = ({
   align = "start",
   contentClassName,
@@ -3902,9 +4316,9 @@ var LanguageToggle = ({
   variant = "outline"
 }) => {
   const { changeLanguage } = useTranslation("libui");
-  return /* @__PURE__ */ jsxs50(DropdownMenu, { children: [
-    /* @__PURE__ */ jsx134(DropdownMenu.Trigger, { asChild: true, children: /* @__PURE__ */ jsx134(Button, { className: triggerClassName, size: "icon", variant, children: /* @__PURE__ */ jsx134(LanguagesIcon, {}) }) }),
-    /* @__PURE__ */ jsx134(DropdownMenu.Content, { align, className: contentClassName, children: Object.keys(options).map((option) => /* @__PURE__ */ jsx134(
+  return /* @__PURE__ */ jsxs53(DropdownMenu, { children: [
+    /* @__PURE__ */ jsx140(DropdownMenu.Trigger, { asChild: true, children: /* @__PURE__ */ jsx140(Button, { className: triggerClassName, size: "icon", variant, children: /* @__PURE__ */ jsx140(LanguagesIcon, {}) }) }),
+    /* @__PURE__ */ jsx140(DropdownMenu.Content, { align, className: contentClassName, children: Object.keys(options).map((option) => /* @__PURE__ */ jsx140(
       DropdownMenu.Item,
       {
         className: itemClassName,
@@ -3931,7 +4345,7 @@ import {
   XAxis,
   YAxis
 } from "recharts";
-import { jsx as jsx135, jsxs as jsxs51 } from "react/jsx-runtime";
+import { jsx as jsx141, jsxs as jsxs54 } from "react/jsx-runtime";
 import { createElement as createElement2 } from "react";
 var strokeColors = {
   dark: "#cbd5e1",
@@ -3960,9 +4374,9 @@ function LineGraphComponent({
 }) {
   const { resolvedLanguage } = useTranslation("libui");
   const [theme] = useTheme();
-  return /* @__PURE__ */ jsx135(ResponsiveContainer2, { height: 400, width: "100%", children: /* @__PURE__ */ jsxs51(LineChart, { data: [...data], margin: { bottom: 5, left: 15, right: 15, top: 5 }, children: [
-    /* @__PURE__ */ jsx135(CartesianGrid, { stroke: "#64748b", strokeDasharray: "5 5" }),
-    /* @__PURE__ */ jsx135(
+  return /* @__PURE__ */ jsx141(ResponsiveContainer2, { height: 400, width: "100%", children: /* @__PURE__ */ jsxs54(LineChart, { data: [...data], margin: { bottom: 5, left: 15, right: 15, top: 5 }, children: [
+    /* @__PURE__ */ jsx141(CartesianGrid, { stroke: "#64748b", strokeDasharray: "5 5" }),
+    /* @__PURE__ */ jsx141(
       XAxis,
       {
         axisLine: { stroke: "#64748b" },
@@ -3977,10 +4391,10 @@ function LineGraphComponent({
         tickMargin: 8,
         tickSize: 8,
         type: "number",
-        children: /* @__PURE__ */ jsx135(Label6, { fill: strokeColors[theme], offset: 0, position: "insideBottom", value: xAxis?.label })
+        children: /* @__PURE__ */ jsx141(Label6, { fill: strokeColors[theme], offset: 0, position: "insideBottom", value: xAxis?.label })
       }
     ),
-    /* @__PURE__ */ jsx135(
+    /* @__PURE__ */ jsx141(
       YAxis,
       {
         axisLine: { stroke: "#64748b" },
@@ -3991,7 +4405,7 @@ function LineGraphComponent({
         width: 40
       }
     ),
-    /* @__PURE__ */ jsx135(
+    /* @__PURE__ */ jsx141(
       Tooltip3,
       {
         contentStyle: tooltipStyles[theme],
@@ -4015,16 +4429,16 @@ function LineGraphComponent({
         stroke: stroke ?? strokeColors[theme],
         type: type ?? "linear"
       },
-      err && /* @__PURE__ */ jsx135(ErrorBar, { dataKey: err, stroke: "#64748b" })
+      err && /* @__PURE__ */ jsx141(ErrorBar, { dataKey: err, stroke: "#64748b" })
     )),
-    /* @__PURE__ */ jsx135(Legend2, { wrapperStyle: { paddingLeft: 40, paddingTop: 10 } })
+    /* @__PURE__ */ jsx141(Legend2, { wrapperStyle: { paddingLeft: 40, paddingTop: 10 } })
   ] }) });
 }
 var LineGraph = React31.memo(LineGraphComponent);
 
 // src/components/ListboxDropdown/ListboxDropdown.tsx
 import "react";
-import { jsx as jsx136, jsxs as jsxs52 } from "react/jsx-runtime";
+import { jsx as jsx142, jsxs as jsxs55 } from "react/jsx-runtime";
 var ListboxDropdown = ({
   contentClassName,
   disabled,
@@ -4035,11 +4449,11 @@ var ListboxDropdown = ({
   triggerClassName,
   widthFull
 }) => {
-  return /* @__PURE__ */ jsxs52(DropdownMenu, { children: [
-    /* @__PURE__ */ jsx136(DropdownMenu.Trigger, { asChild: true, className: cn("w-full", triggerClassName), disabled, children: /* @__PURE__ */ jsx136(DropdownButton, { children: title }) }),
-    /* @__PURE__ */ jsx136(DropdownMenu.Content, { align: "start", className: contentClassName, widthFull, children: options.map((option) => {
+  return /* @__PURE__ */ jsxs55(DropdownMenu, { children: [
+    /* @__PURE__ */ jsx142(DropdownMenu.Trigger, { asChild: true, className: cn("w-full", triggerClassName), disabled, children: /* @__PURE__ */ jsx142(DropdownButton, { children: title }) }),
+    /* @__PURE__ */ jsx142(DropdownMenu.Content, { align: "start", className: contentClassName, widthFull, children: options.map((option) => {
       const checked = Boolean(selected.find((selectedOption) => selectedOption.key === option.key));
-      return /* @__PURE__ */ jsx136(
+      return /* @__PURE__ */ jsx142(
         DropdownMenu.CheckboxItem,
         {
           checked,
@@ -4070,9 +4484,9 @@ import { Group as Group4, Menu, Portal as Portal9, RadioGroup as RadioGroup5, Su
 import { forwardRef as forwardRef80 } from "react";
 import { CheckboxItem as CheckboxItem3, ItemIndicator as ItemIndicator6 } from "@radix-ui/react-menubar";
 import { CheckIcon as CheckIcon5 } from "lucide-react";
-import { jsx as jsx137, jsxs as jsxs53 } from "react/jsx-runtime";
+import { jsx as jsx143, jsxs as jsxs56 } from "react/jsx-runtime";
 var MenuBarCheckboxItem = forwardRef80(function MenuBarCheckboxItem2({ checked, children, className, ...props }, ref) {
-  return /* @__PURE__ */ jsxs53(
+  return /* @__PURE__ */ jsxs56(
     CheckboxItem3,
     {
       checked,
@@ -4083,7 +4497,7 @@ var MenuBarCheckboxItem = forwardRef80(function MenuBarCheckboxItem2({ checked,
       ref,
       ...props,
       children: [
-        /* @__PURE__ */ jsx137("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx137(ItemIndicator6, { children: /* @__PURE__ */ jsx137(CheckIcon5, { className: "h-4 w-4" }) }) }),
+        /* @__PURE__ */ jsx143("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx143(ItemIndicator6, { children: /* @__PURE__ */ jsx143(CheckIcon5, { className: "h-4 w-4" }) }) }),
         children
       ]
     }
@@ -4093,9 +4507,9 @@ var MenuBarCheckboxItem = forwardRef80(function MenuBarCheckboxItem2({ checked,
 // src/components/MenuBar/MenuBarContent.tsx
 import { forwardRef as forwardRef81 } from "react";
 import { Content as Content9, Portal as Portal8 } from "@radix-ui/react-menubar";
-import { jsx as jsx138 } from "react/jsx-runtime";
+import { jsx as jsx144 } from "react/jsx-runtime";
 var MenuBarContent = forwardRef81(function MenuBarContent2({ align = "start", alignOffset = -4, className, sideOffset = 8, ...props }, ref) {
-  return /* @__PURE__ */ jsx138(Portal8, { children: /* @__PURE__ */ jsx138(
+  return /* @__PURE__ */ jsx144(Portal8, { children: /* @__PURE__ */ jsx144(
     Content9,
     {
       align,
@@ -4114,9 +4528,9 @@ var MenuBarContent = forwardRef81(function MenuBarContent2({ align = "start", al
 // src/components/MenuBar/MenuBarItem.tsx
 import { forwardRef as forwardRef82 } from "react";
 import { Item as Item6 } from "@radix-ui/react-menubar";
-import { jsx as jsx139 } from "react/jsx-runtime";
+import { jsx as jsx145 } from "react/jsx-runtime";
 var MenuBarItem = forwardRef82(function MenuBarItem2({ className, inset, ...props }, ref) {
-  return /* @__PURE__ */ jsx139(
+  return /* @__PURE__ */ jsx145(
     Item6,
     {
       className: cn(
@@ -4133,18 +4547,18 @@ var MenuBarItem = forwardRef82(function MenuBarItem2({ className, inset, ...prop
 // src/components/MenuBar/MenuBarLabel.tsx
 import { forwardRef as forwardRef83 } from "react";
 import { Label as Label7 } from "@radix-ui/react-menubar";
-import { jsx as jsx140 } from "react/jsx-runtime";
+import { jsx as jsx146 } from "react/jsx-runtime";
 var MenuBarLabel = forwardRef83(function MenuBarLabel2({ className, inset, ...props }, ref) {
-  return /* @__PURE__ */ jsx140(Label7, { className: cn("px-2 py-1.5 text-sm font-semibold", inset && "pl-8", className), ref, ...props });
+  return /* @__PURE__ */ jsx146(Label7, { className: cn("px-2 py-1.5 text-sm font-semibold", inset && "pl-8", className), ref, ...props });
 });
 
 // src/components/MenuBar/MenuBarRadioItem.tsx
 import { forwardRef as forwardRef84 } from "react";
 import { ItemIndicator as ItemIndicator7, RadioItem as RadioItem3 } from "@radix-ui/react-menubar";
 import { CircleIcon as CircleIcon4 } from "lucide-react";
-import { jsx as jsx141, jsxs as jsxs54 } from "react/jsx-runtime";
+import { jsx as jsx147, jsxs as jsxs57 } from "react/jsx-runtime";
 var MenuBarRadioItem = forwardRef84(function MenuBarRadioItem2({ children, className, ...props }, ref) {
-  return /* @__PURE__ */ jsxs54(
+  return /* @__PURE__ */ jsxs57(
     RadioItem3,
     {
       className: cn(
@@ -4154,7 +4568,7 @@ var MenuBarRadioItem = forwardRef84(function MenuBarRadioItem2({ children, class
       ref,
       ...props,
       children: [
-        /* @__PURE__ */ jsx141("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx141(ItemIndicator7, { children: /* @__PURE__ */ jsx141(CircleIcon4, { className: "fill-current", style: { height: 8, width: 8 } }) }) }),
+        /* @__PURE__ */ jsx147("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx147(ItemIndicator7, { children: /* @__PURE__ */ jsx147(CircleIcon4, { className: "fill-current", style: { height: 8, width: 8 } }) }) }),
         children
       ]
     }
@@ -4164,10 +4578,10 @@ var MenuBarRadioItem = forwardRef84(function MenuBarRadioItem2({ children, class
 // src/components/MenuBar/MenuBarRoot.tsx
 import { forwardRef as forwardRef85 } from "react";
 import { Root as Root15 } from "@radix-ui/react-menubar";
-import { jsx as jsx142 } from "react/jsx-runtime";
+import { jsx as jsx148 } from "react/jsx-runtime";
 var MenuBarRoot = forwardRef85(
   function MenuBarRoot2({ className, ...props }, ref) {
-    return /* @__PURE__ */ jsx142(
+    return /* @__PURE__ */ jsx148(
       Root15,
       {
         className: cn("bg-background flex h-9 items-center space-x-1 rounded-md border p-1 shadow-xs", className),
@@ -4181,24 +4595,24 @@ var MenuBarRoot = forwardRef85(
 // src/components/MenuBar/MenuBarSeparator.tsx
 import { forwardRef as forwardRef86 } from "react";
 import { Separator as Separator6 } from "@radix-ui/react-menubar";
-import { jsx as jsx143 } from "react/jsx-runtime";
+import { jsx as jsx149 } from "react/jsx-runtime";
 var MenuBarSeparator = forwardRef86(function MenuBarSeparator2({ className, ...props }, ref) {
-  return /* @__PURE__ */ jsx143(Separator6, { className: cn("-mx-1 my-1 h-px bg-muted", className), ref, ...props });
+  return /* @__PURE__ */ jsx149(Separator6, { className: cn("-mx-1 my-1 h-px bg-muted", className), ref, ...props });
 });
 
 // src/components/MenuBar/MenuBarShortcut.tsx
 import "react";
-import { jsx as jsx144 } from "react/jsx-runtime";
+import { jsx as jsx150 } from "react/jsx-runtime";
 var MenuBarShortcut = ({ className, ...props }) => {
-  return /* @__PURE__ */ jsx144("span", { className: cn("ml-auto text-xs tracking-widest text-muted-foreground", className), ...props });
+  return /* @__PURE__ */ jsx150("span", { className: cn("ml-auto text-xs tracking-widest text-muted-foreground", className), ...props });
 };
 
 // src/components/MenuBar/MenuBarSubContent.tsx
 import { forwardRef as forwardRef87 } from "react";
 import { SubContent as SubContent3 } from "@radix-ui/react-menubar";
-import { jsx as jsx145 } from "react/jsx-runtime";
+import { jsx as jsx151 } from "react/jsx-runtime";
 var MenuBarSubContent = forwardRef87(function MenuBarSubContent2({ className, ...props }, ref) {
-  return /* @__PURE__ */ jsx145(
+  return /* @__PURE__ */ jsx151(
     SubContent3,
     {
       className: cn(
@@ -4215,9 +4629,9 @@ var MenuBarSubContent = forwardRef87(function MenuBarSubContent2({ className, ..
 import { forwardRef as forwardRef88 } from "react";
 import { SubTrigger as SubTrigger3 } from "@radix-ui/react-menubar";
 import { ChevronRightIcon as ChevronRightIcon5 } from "lucide-react";
-import { jsx as jsx146, jsxs as jsxs55 } from "react/jsx-runtime";
+import { jsx as jsx152, jsxs as jsxs58 } from "react/jsx-runtime";
 var MenuBarSubTrigger = forwardRef88(function MenuBarSubTrigger2({ children, className, inset, ...props }, ref) {
-  return /* @__PURE__ */ jsxs55(
+  return /* @__PURE__ */ jsxs58(
     SubTrigger3,
     {
       className: cn(
@@ -4229,7 +4643,7 @@ var MenuBarSubTrigger = forwardRef88(function MenuBarSubTrigger2({ children, cla
       ...props,
       children: [
         children,
-        /* @__PURE__ */ jsx146(ChevronRightIcon5, { className: "ml-auto h-4 w-4" })
+        /* @__PURE__ */ jsx152(ChevronRightIcon5, { className: "ml-auto h-4 w-4" })
       ]
     }
   );
@@ -4238,9 +4652,9 @@ var MenuBarSubTrigger = forwardRef88(function MenuBarSubTrigger2({ children, cla
 // src/components/MenuBar/MenuBarTrigger.tsx
 import { forwardRef as forwardRef89 } from "react";
 import { Trigger as Trigger8 } from "@radix-ui/react-menubar";
-import { jsx as jsx147 } from "react/jsx-runtime";
+import { jsx as jsx153 } from "react/jsx-runtime";
 var MenuBarTrigger = forwardRef89(function MenuBarTrigger2({ className, ...props }, ref) {
-  return /* @__PURE__ */ jsx147(
+  return /* @__PURE__ */ jsx153(
     Trigger8,
     {
       className: cn(
@@ -4273,8 +4687,8 @@ var MenuBar = Object.assign(MenuBarRoot, {
 });
 
 // src/components/OneTimePasswordInput/OneTimePasswordInput.tsx
-import { useEffect as useEffect12, useRef as useRef5, useState as useState10 } from "react";
-import { jsx as jsx148 } from "react/jsx-runtime";
+import { useEffect as useEffect14, useRef as useRef7, useState as useState10 } from "react";
+import { jsx as jsx154 } from "react/jsx-runtime";
 var CODE_LENGTH = 6;
 var EMPTY_CODE = Object.freeze(Array(CODE_LENGTH).fill(null));
 function getUpdatedDigits(digits, index, value) {
@@ -4286,8 +4700,8 @@ var OneTimePasswordInput = ({ className, onComplete, ...props }) => {
   const notifications = useNotificationsStore();
   const { t } = useTranslation("libui");
   const [digits, setDigits] = useState10([...EMPTY_CODE]);
-  const inputRefs = digits.map(() => useRef5(null));
-  useEffect12(() => {
+  const inputRefs = digits.map(() => useRef7(null));
+  useEffect14(() => {
     const isComplete = digits.every((value) => Number.isInteger(value));
     if (isComplete) {
       void onComplete(parseInt(digits.join("")));
@@ -4334,7 +4748,7 @@ var OneTimePasswordInput = ({ className, onComplete, ...props }) => {
       });
     }
   };
-  return /* @__PURE__ */ jsx148("div", { className: cn("flex gap-2", className), ...props, children: digits.map((_, index) => /* @__PURE__ */ jsx148(
+  return /* @__PURE__ */ jsx154("div", { className: cn("flex gap-2", className), ...props, children: digits.map((_, index) => /* @__PURE__ */ jsx154(
     "input",
     {
       className: "w-1/6 rounded-md border border-slate-300 bg-transparent p-2 text-center shadow-xs hover:border-slate-300 focus:border-sky-800 focus:outline-hidden dark:border-slate-600 dark:hover:border-slate-400 dark:focus:border-sky-500",
@@ -4357,15 +4771,15 @@ var OneTimePasswordInput = ({ className, onComplete, ...props }) => {
 // src/components/Progress/Progress.tsx
 import { forwardRef as forwardRef90 } from "react";
 import * as ProgressPrimitive from "@radix-ui/react-progress";
-import { jsx as jsx149 } from "react/jsx-runtime";
+import { jsx as jsx155 } from "react/jsx-runtime";
 var Progress = forwardRef90(function Progress2({ className, value, ...props }, ref) {
-  return /* @__PURE__ */ jsx149(
+  return /* @__PURE__ */ jsx155(
     ProgressPrimitive.Root,
     {
       className: cn("bg-primary/20 relative h-2 w-full overflow-hidden rounded-full", className),
       ref,
       ...props,
-      children: /* @__PURE__ */ jsx149(
+      children: /* @__PURE__ */ jsx155(
         ProgressPrimitive.Indicator,
         {
           className: "h-full w-full flex-1 bg-primary transition-all",
@@ -4384,8 +4798,8 @@ import { Panel } from "react-resizable-panels";
 import "react";
 import { GripVertical } from "lucide-react";
 import { PanelResizeHandle } from "react-resizable-panels";
-import { jsx as jsx150 } from "react/jsx-runtime";
-var ResizableHandle = ({ className, withHandle, ...props }) => /* @__PURE__ */ jsx150(
+import { jsx as jsx156 } from "react/jsx-runtime";
+var ResizableHandle = ({ className, withHandle, ...props }) => /* @__PURE__ */ jsx156(
   PanelResizeHandle,
   {
     className: cn(
@@ -4393,15 +4807,15 @@ var ResizableHandle = ({ className, withHandle, ...props }) => /* @__PURE__ */ j
       className
     ),
     ...props,
-    children: withHandle && /* @__PURE__ */ jsx150("div", { className: "bg-border z-10 flex h-4 w-3 items-center justify-center rounded-xs border", children: /* @__PURE__ */ jsx150(GripVertical, { className: "h-2.5 w-2.5" }) })
+    children: withHandle && /* @__PURE__ */ jsx156("div", { className: "bg-border z-10 flex h-4 w-3 items-center justify-center rounded-xs border", children: /* @__PURE__ */ jsx156(GripVertical, { className: "h-2.5 w-2.5" }) })
   }
 );
 
 // src/components/Resizable/ResizablePanelGroup.tsx
 import "react";
 import { PanelGroup } from "react-resizable-panels";
-import { jsx as jsx151 } from "react/jsx-runtime";
-var ResizablePanelGroup = ({ className, ...props }) => /* @__PURE__ */ jsx151(
+import { jsx as jsx157 } from "react/jsx-runtime";
+var ResizablePanelGroup = ({ className, ...props }) => /* @__PURE__ */ jsx157(
   PanelGroup,
   {
     className: cn("flex h-full w-full data-[panel-group-direction=vertical]:flex-col", className),
@@ -4410,8 +4824,8 @@ var ResizablePanelGroup = ({ className, ...props }) => /* @__PURE__ */ jsx151(
 );
 
 // src/components/Resizable/Resizable.tsx
-import { Fragment as Fragment3, jsx as jsx152 } from "react/jsx-runtime";
-var ResizableRoot = ({ children }) => /* @__PURE__ */ jsx152(Fragment3, { children });
+import { Fragment as Fragment3, jsx as jsx158 } from "react/jsx-runtime";
+var ResizableRoot = ({ children }) => /* @__PURE__ */ jsx158(Fragment3, { children });
 var Resizable = Object.assign(ResizableRoot, {
   Handle: ResizableHandle,
   Panel,
@@ -4423,13 +4837,13 @@ import { Close as Close2, Portal as Portal11, Root as Root17, Trigger as Trigger
 
 // src/components/Sheet/SheetBody.tsx
 import "react";
-import { jsx as jsx153 } from "react/jsx-runtime";
+import { jsx as jsx159 } from "react/jsx-runtime";
 var SheetBody = ({
   children,
   className,
   ...props
 }) => {
-  return /* @__PURE__ */ jsx153("div", { className: cn("py-4", className), ...props, children });
+  return /* @__PURE__ */ jsx159("div", { className: cn("py-4", className), ...props, children });
 };
 
 // src/components/Sheet/SheetContent.tsx
@@ -4441,9 +4855,9 @@ import { XIcon } from "lucide-react";
 // src/components/Sheet/SheetOverlay.tsx
 import { forwardRef as forwardRef91 } from "react";
 import { Overlay as Overlay2 } from "@radix-ui/react-dialog";
-import { jsx as jsx154 } from "react/jsx-runtime";
+import { jsx as jsx160 } from "react/jsx-runtime";
 var SheetOverlay = forwardRef91(function SheetOverlay2({ className, ...props }, ref) {
-  return /* @__PURE__ */ jsx154(
+  return /* @__PURE__ */ jsx160(
     Overlay2,
     {
       className: cn(
@@ -4457,7 +4871,7 @@ var SheetOverlay = forwardRef91(function SheetOverlay2({ className, ...props },
 });
 
 // src/components/Sheet/SheetContent.tsx
-import { jsx as jsx155, jsxs as jsxs56 } from "react/jsx-runtime";
+import { jsx as jsx161, jsxs as jsxs59 } from "react/jsx-runtime";
 var sheetVariants = cva4(
   "fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
   {
@@ -4475,13 +4889,13 @@ var sheetVariants = cva4(
   }
 );
 var SheetContent = React38.forwardRef(function SheetContent2({ children, className, side = "right", ...props }, ref) {
-  return /* @__PURE__ */ jsxs56(Portal10, { children: [
-    /* @__PURE__ */ jsx155(SheetOverlay, {}),
-    /* @__PURE__ */ jsxs56(Content10, { className: cn(sheetVariants({ side }), className), ref, ...props, children: [
+  return /* @__PURE__ */ jsxs59(Portal10, { children: [
+    /* @__PURE__ */ jsx161(SheetOverlay, {}),
+    /* @__PURE__ */ jsxs59(Content10, { className: cn(sheetVariants({ side }), className), ref, ...props, children: [
       children,
-      /* @__PURE__ */ jsxs56(Close, { className: "ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none", children: [
-        /* @__PURE__ */ jsx155(XIcon, { className: "h-4 w-4" }),
-        /* @__PURE__ */ jsx155("span", { className: "sr-only", children: "Close" })
+      /* @__PURE__ */ jsxs59(Close, { className: "ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none", children: [
+        /* @__PURE__ */ jsx161(XIcon, { className: "h-4 w-4" }),
+        /* @__PURE__ */ jsx161("span", { className: "sr-only", children: "Close" })
       ] })
     ] })
   ] });
@@ -4490,28 +4904,28 @@ var SheetContent = React38.forwardRef(function SheetContent2({ children, classNa
 // src/components/Sheet/SheetDescription.tsx
 import { forwardRef as forwardRef93 } from "react";
 import { Description as Description2 } from "@radix-ui/react-dialog";
-import { jsx as jsx156 } from "react/jsx-runtime";
+import { jsx as jsx162 } from "react/jsx-runtime";
 var SheetDescription = forwardRef93(function SheetDescription2({ className, ...props }, ref) {
-  return /* @__PURE__ */ jsx156(Description2, { className: cn("text-sm text-muted-foreground", className), ref, ...props });
+  return /* @__PURE__ */ jsx162(Description2, { className: cn("text-sm text-muted-foreground", className), ref, ...props });
 });
 
 // src/components/Sheet/SheetFooter.tsx
 import "react";
-import { jsx as jsx157 } from "react/jsx-runtime";
-var SheetFooter = ({ className, ...props }) => /* @__PURE__ */ jsx157("div", { className: cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className), ...props });
+import { jsx as jsx163 } from "react/jsx-runtime";
+var SheetFooter = ({ className, ...props }) => /* @__PURE__ */ jsx163("div", { className: cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className), ...props });
 
 // src/components/Sheet/SheetHeader.tsx
 import "react";
-import { jsx as jsx158 } from "react/jsx-runtime";
-var SheetHeader = ({ className, ...props }) => /* @__PURE__ */ jsx158("div", { className: cn("flex flex-col space-y-2 text-center sm:text-left", className), ...props });
+import { jsx as jsx164 } from "react/jsx-runtime";
+var SheetHeader = ({ className, ...props }) => /* @__PURE__ */ jsx164("div", { className: cn("flex flex-col space-y-2 text-center sm:text-left", className), ...props });
 
 // src/components/Sheet/SheetTitle.tsx
 import { forwardRef as forwardRef94 } from "react";
 import { Title as Title2 } from "@radix-ui/react-dialog";
-import { jsx as jsx159 } from "react/jsx-runtime";
+import { jsx as jsx165 } from "react/jsx-runtime";
 var SheetTitle = forwardRef94(
   function SheetTitle2({ className, ...props }, ref) {
-    return /* @__PURE__ */ jsx159(Title2, { className: cn("text-lg font-semibold text-foreground", className), ref, ...props });
+    return /* @__PURE__ */ jsx165(Title2, { className: cn("text-lg font-semibold text-foreground", className), ref, ...props });
   }
 );
 
@@ -4529,9 +4943,9 @@ var Sheet = Object.assign(Root17.bind(null), {
 });
 
 // src/components/Spinner/Spinner.tsx
-import { jsx as jsx160 } from "react/jsx-runtime";
+import { jsx as jsx166 } from "react/jsx-runtime";
 var Spinner = ({ className, ...props }) => {
-  return /* @__PURE__ */ jsx160("div", { className: cn("flex h-full w-full items-center justify-center", className), ...props, children: /* @__PURE__ */ jsx160(
+  return /* @__PURE__ */ jsx166("div", { className: cn("flex h-full w-full items-center justify-center", className), ...props, children: /* @__PURE__ */ jsx166(
     "span",
     {
       className: "relative animate-spinner overflow-hidden text-slate-900 dark:text-slate-100",
@@ -4549,8 +4963,8 @@ var Spinner = ({ className, ...props }) => {
 
 // src/components/SpinnerIcon/SpinnerIcon.tsx
 import "react";
-import { jsx as jsx161 } from "react/jsx-runtime";
-var SpinnerIcon = ({ className, ...props }) => /* @__PURE__ */ jsx161(
+import { jsx as jsx167 } from "react/jsx-runtime";
+var SpinnerIcon = ({ className, ...props }) => /* @__PURE__ */ jsx167(
   "svg",
   {
     className: cn("animate-spin", className),
@@ -4564,25 +4978,25 @@ var SpinnerIcon = ({ className, ...props }) => /* @__PURE__ */ jsx161(
     width: "24",
     xmlns: "http://www.w3.org/2000/svg",
     ...props,
-    children: /* @__PURE__ */ jsx161("path", { d: "M21 12a9 9 0 1 1-6.219-8.56" })
+    children: /* @__PURE__ */ jsx167("path", { d: "M21 12a9 9 0 1 1-6.219-8.56" })
   }
 );
 
 // src/components/StatisticCard/StatisticCard.tsx
-import { useEffect as useEffect13 } from "react";
+import { useEffect as useEffect15 } from "react";
 import { motion as motion5, useSpring, useTransform } from "motion/react";
-import { jsx as jsx162, jsxs as jsxs57 } from "react/jsx-runtime";
+import { jsx as jsx168, jsxs as jsxs60 } from "react/jsx-runtime";
 var StatisticCard = ({ className, icon, label, value, ...props }) => {
   const spring = useSpring(0, { bounce: 0 });
   const rounded = useTransform(spring, (latest) => Math.floor(latest));
-  useEffect13(() => {
+  useEffect15(() => {
     spring.set(value);
   }, [spring, value]);
-  return /* @__PURE__ */ jsxs57(Card, { className: cn("flex w-full rounded-lg p-4", className), ...props, children: [
-    icon && /* @__PURE__ */ jsx162("div", { className: "mr-2 flex items-center justify-center text-4xl", children: icon }),
-    /* @__PURE__ */ jsxs57("div", { className: "w-full text-center", children: [
-      /* @__PURE__ */ jsx162(motion5.h3, { className: "title-font text-2xl font-semibold text-slate-900 dark:text-slate-100 sm:text-3xl", children: rounded }),
-      /* @__PURE__ */ jsx162("p", { className: "font-medium leading-relaxed", children: label })
+  return /* @__PURE__ */ jsxs60(Card, { className: cn("flex w-full rounded-lg p-4", className), ...props, children: [
+    icon && /* @__PURE__ */ jsx168("div", { className: "mr-2 flex items-center justify-center text-4xl", children: icon }),
+    /* @__PURE__ */ jsxs60("div", { className: "w-full text-center", children: [
+      /* @__PURE__ */ jsx168(motion5.h3, { className: "title-font text-2xl font-semibold text-slate-900 dark:text-slate-100 sm:text-3xl", children: rounded }),
+      /* @__PURE__ */ jsx168("p", { className: "font-medium leading-relaxed", children: label })
     ] })
   ] });
 };
@@ -4590,9 +5004,9 @@ var StatisticCard = ({ className, icon, label, value, ...props }) => {
 // src/components/Switch/Switch.tsx
 import { forwardRef as forwardRef95 } from "react";
 import * as SwitchPrimitives from "@radix-ui/react-switch";
-import { jsx as jsx163 } from "react/jsx-runtime";
+import { jsx as jsx169 } from "react/jsx-runtime";
 var Switch = forwardRef95(function Switch2({ className, ...props }, ref) {
-  return /* @__PURE__ */ jsx163(
+  return /* @__PURE__ */ jsx169(
     SwitchPrimitives.Root,
     {
       className: cn(
@@ -4601,7 +5015,7 @@ var Switch = forwardRef95(function Switch2({ className, ...props }, ref) {
       ),
       ...props,
       ref,
-      children: /* @__PURE__ */ jsx163(
+      children: /* @__PURE__ */ jsx169(
         SwitchPrimitives.Thumb,
         {
           className: cn(
@@ -4616,9 +5030,9 @@ var Switch = forwardRef95(function Switch2({ className, ...props }, ref) {
 // src/components/Tabs/TabsContent.tsx
 import { forwardRef as forwardRef96 } from "react";
 import * as TabsPrimitive from "@radix-ui/react-tabs";
-import { jsx as jsx164 } from "react/jsx-runtime";
+import { jsx as jsx170 } from "react/jsx-runtime";
 var TabsContent = forwardRef96(function TabsContent2({ className, ...props }, ref) {
-  return /* @__PURE__ */ jsx164(
+  return /* @__PURE__ */ jsx170(
     TabsPrimitive.Content,
     {
       className: cn(
@@ -4634,9 +5048,9 @@ var TabsContent = forwardRef96(function TabsContent2({ className, ...props }, re
 // src/components/Tabs/TabsList.tsx
 import { forwardRef as forwardRef97 } from "react";
 import * as TabsPrimitive2 from "@radix-ui/react-tabs";
-import { jsx as jsx165 } from "react/jsx-runtime";
+import { jsx as jsx171 } from "react/jsx-runtime";
 var TabsList = forwardRef97(function TabsList2({ className, ...props }, ref) {
-  return /* @__PURE__ */ jsx165(
+  return /* @__PURE__ */ jsx171(
     TabsPrimitive2.List,
     {
       className: cn(
@@ -4652,19 +5066,19 @@ var TabsList = forwardRef97(function TabsList2({ className, ...props }, ref) {
 // src/components/Tabs/TabsRoot.tsx
 import { forwardRef as forwardRef98 } from "react";
 import { Root as Root19 } from "@radix-ui/react-tabs";
-import { jsx as jsx166 } from "react/jsx-runtime";
+import { jsx as jsx172 } from "react/jsx-runtime";
 var TabsRoot = forwardRef98(
   function TabsRoot2(props, ref) {
-    return /* @__PURE__ */ jsx166(Root19, { ref, ...props });
+    return /* @__PURE__ */ jsx172(Root19, { ref, ...props });
   }
 );
 
 // src/components/Tabs/TabsTrigger.tsx
 import { forwardRef as forwardRef99 } from "react";
 import * as TabsPrimitive3 from "@radix-ui/react-tabs";
-import { jsx as jsx167 } from "react/jsx-runtime";
+import { jsx as jsx173 } from "react/jsx-runtime";
 var TabsTrigger = forwardRef99(function TabsTrigger2({ className, ...props }, ref) {
-  return /* @__PURE__ */ jsx167(
+  return /* @__PURE__ */ jsx173(
     TabsPrimitive3.Trigger,
     {
       className: cn(
@@ -4686,13 +5100,13 @@ var Tabs = Object.assign(TabsRoot, {
 
 // src/components/ThemeToggle/ThemeToggle.tsx
 import { MoonIcon, SunIcon } from "lucide-react";
-import { jsx as jsx168, jsxs as jsxs58 } from "react/jsx-runtime";
+import { jsx as jsx174, jsxs as jsxs61 } from "react/jsx-runtime";
 var ThemeToggle = ({ onClick, variant = "outline", ...props }) => {
   const [theme, setTheme] = useTheme();
   const toggleTheme = () => {
     setTheme(theme === "dark" ? "light" : "dark");
   };
-  return /* @__PURE__ */ jsxs58(
+  return /* @__PURE__ */ jsxs61(
     Button,
     {
       size: "icon",
@@ -4703,8 +5117,8 @@ var ThemeToggle = ({ onClick, variant = "outline", ...props }) => {
       },
       ...props,
       children: [
-        /* @__PURE__ */ jsx168(SunIcon, { className: "rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" }),
-        /* @__PURE__ */ jsx168(MoonIcon, { className: "absolute rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" })
+        /* @__PURE__ */ jsx174(SunIcon, { className: "rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" }),
+        /* @__PURE__ */ jsx174(MoonIcon, { className: "absolute rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" })
       ]
     }
   );
@@ -4713,10 +5127,10 @@ var ThemeToggle = ({ onClick, variant = "outline", ...props }) => {
 // src/components/Tooltip/TooltipContent.tsx
 import * as React42 from "react";
 import { Content as Content12 } from "@radix-ui/react-tooltip";
-import { jsx as jsx169 } from "react/jsx-runtime";
+import { jsx as jsx175 } from "react/jsx-runtime";
 var TooltipContent = React42.forwardRef(
   function TooltipContent2({ className, collisionPadding = 0, sideOffset = 4, ...props }, ref) {
-    return /* @__PURE__ */ jsx169(
+    return /* @__PURE__ */ jsx175(
       Content12,
       {
         className: cn(
@@ -4735,7 +5149,7 @@ var TooltipContent = React42.forwardRef(
 // src/components/Tooltip/TooltipRoot.tsx
 import "react";
 import { Provider, Root as Root20 } from "@radix-ui/react-tooltip";
-import { jsx as jsx170 } from "react/jsx-runtime";
+import { jsx as jsx176 } from "react/jsx-runtime";
 var TooltipRoot = ({
   children,
   delayDuration = 0,
@@ -4743,15 +5157,15 @@ var TooltipRoot = ({
   open,
   skipDelayDuration = 300
 }) => {
-  return /* @__PURE__ */ jsx170(Provider, { delayDuration, skipDelayDuration, children: /* @__PURE__ */ jsx170(Root20, { open, onOpenChange, children }) });
+  return /* @__PURE__ */ jsx176(Provider, { delayDuration, skipDelayDuration, children: /* @__PURE__ */ jsx176(Root20, { open, onOpenChange, children }) });
 };
 
 // src/components/Tooltip/TooltipTrigger.tsx
 import { forwardRef as forwardRef101 } from "react";
 import { Trigger as Trigger11 } from "@radix-ui/react-tooltip";
-import { jsx as jsx171 } from "react/jsx-runtime";
+import { jsx as jsx177 } from "react/jsx-runtime";
 var TooltipTrigger = forwardRef101(function TooltipTrigger2({ variant = "outline", ...props }, ref) {
-  return /* @__PURE__ */ jsx171(Trigger11, { asChild: true, ref, children: /* @__PURE__ */ jsx171(Button, { variant, ...props }) });
+  return /* @__PURE__ */ jsx177(Trigger11, { asChild: true, ref, children: /* @__PURE__ */ jsx177(Button, { variant, ...props }) });
 });
 
 // src/components/Tooltip/Tooltip.tsx