@l3mpire/ui 2.5.4 → 2.6.0

package/dist/index.js

@@ -38,6 +38,7 @@ __export(index_exports, {
   Button: () => Button,
   ButtonCell: () => ButtonCell,
   Checkbox: () => Checkbox,
+  ChipInput: () => ChipInput,
   DataTable: () => DataTable,
   DataTablePagination: () => DataTablePagination,
   DateCell: () => DateCell,
@@ -69,6 +70,7 @@ __export(index_exports, {
   ModalTitle: () => ModalTitle,
   ModalTrigger: () => ModalTrigger,
   NumberCell: () => NumberCell,
+  NumberInput: () => NumberInput,
   ProductLogo: () => ProductLogo,
   RowActions: () => RowActions,
   SearchBar: () => SearchBar,
@@ -115,6 +117,7 @@ __export(index_exports, {
   avatarVariants: () => avatarVariants,
   badgeVariants: () => badgeVariants,
   buttonVariants: () => buttonVariants,
+  chipInputVariants: () => chipInputVariants,
   cn: () => cn,
   emptyStateVariants: () => emptyStateVariants,
   flexRender: () => import_react_table.flexRender,
@@ -837,7 +840,7 @@ var TooltipContent = React4.forwardRef(({ className, type, hasArrow = true, side
       hasArrow && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
         TooltipPrimitive.Arrow,
         {
-          className: type === "invert" ? "fill-tooltip-invert-bg" : "fill-tooltip-default-bg"
+          className: type === "default" ? "fill-tooltip-default-bg" : "fill-tooltip-invert-bg"
         }
       )
     ]
@@ -1940,40 +1943,57 @@ var DropdownMenuItem = React15.forwardRef(
     action,
     isActive,
     children,
+    onClick,
     ...props
-  }, ref) => /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
-    "div",
-    {
-      ref,
-      role: "option",
-      "aria-selected": isActive,
-      className: cn(
-        itemStyle,
-        isActive && "bg-dropdown-item-hover",
-        className
-      ),
-      ...props,
-      children: [
-        children,
-        avatar,
-        flag,
-        icon && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-          import_icons11.Icon,
-          {
-            icon,
-            size: "sm",
-            className: "shrink-0 text-dropdown-item-icon"
-          }
+  }, ref) => {
+    const handleClick = React15.useCallback(
+      (e) => {
+        const target = e.target;
+        if (!target.closest("button[role='checkbox']")) {
+          const checkbox = e.currentTarget.querySelector(
+            "button[role='checkbox']"
+          );
+          checkbox?.click();
+        }
+        onClick?.(e);
+      },
+      [onClick]
+    );
+    return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+      "div",
+      {
+        ref,
+        role: "option",
+        "aria-selected": isActive,
+        className: cn(
+          itemStyle,
+          isActive && "bg-dropdown-item-hover",
+          className
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "flex flex-1 items-center gap-sm min-w-0", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: cn("truncate shrink-0", textSm, "text-dropdown-item-text"), children: label }),
-          description && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: cn("truncate", textXs, "text-dropdown-item-secondary"), children: description })
-        ] }),
-        badge,
-        action
-      ]
-    }
-  )
+        onClick: handleClick,
+        ...props,
+        children: [
+          children,
+          avatar,
+          flag,
+          icon && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+            import_icons11.Icon,
+            {
+              icon,
+              size: "sm",
+              className: "shrink-0 text-dropdown-item-icon"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "flex flex-1 items-center gap-sm min-w-0", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: cn("truncate shrink-0", textSm, "text-dropdown-item-text"), children: label }),
+            description && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: cn("truncate", textXs, "text-dropdown-item-secondary"), children: description })
+          ] }),
+          badge,
+          action
+        ]
+      }
+    );
+  }
 );
 DropdownMenuItem.displayName = "DropdownMenuItem";
 var DropdownMenuRadixItem = React15.forwardRef(
@@ -2041,7 +2061,7 @@ var clearStyle = [
   "sticky bottom-0 -mx-base -mb-base",
   "flex items-center justify-center",
   "h-10 min-w-[80px] px-md py-[10px]",
-  "bg-gradient-to-t from-[#fbfbfb] from-[10%] to-white",
+  "bg-gradient-to-t from-dropdown-bg from-[10%] to-dropdown-bg",
   "border border-dropdown-border",
   "shadow-sm",
   "cursor-pointer"
@@ -2192,6 +2212,7 @@ SidebarItem.displayName = "SidebarItem";
 // src/components/ui/select.tsx
 var React18 = __toESM(require("react"));
 var PopoverPrimitive = __toESM(require("@radix-ui/react-popover"));
+var TooltipPrimitive2 = __toESM(require("@radix-ui/react-tooltip"));
 var import_class_variance_authority11 = require("class-variance-authority");
 var import_icons13 = require("@l3mpire/icons");
 var import_jsx_runtime18 = require("react/jsx-runtime");
@@ -2207,13 +2228,15 @@ var selectVariants = (0, import_class_variance_authority11.cva)(
   {
     variants: {
       size: {
-        sm: "px-base py-sm gap-base rounded-base min-w-[80px]",
-        md: "px-md py-[10px] gap-base rounded-md"
+        sm: "px-base gap-base rounded-base min-w-[80px]",
+        md: "px-md gap-base rounded-md"
       }
     },
     defaultVariants: { size: "md" }
   }
 );
+var selectHeight = { sm: 32, md: 40 };
+var chipHeight = { sm: 20, md: 24 };
 var triggerStates = {
   default: [
     "bg-gradient-to-t from-select-bg-default from-[10%] to-select-bg-gradient-to",
@@ -2250,6 +2273,126 @@ var errorGuidance = {
   icon: "shrink-0 text-select-error-icon",
   text: "text-xs font-medium leading-xs text-select-error-text"
 };
+function SelectChips({ tags, onTagRemove, chipHeightPx }) {
+  const containerRef = React18.useRef(null);
+  const measureRef = React18.useRef(null);
+  const [visibleCount, setVisibleCount] = React18.useState(tags.length);
+  React18.useLayoutEffect(() => {
+    const container = containerRef.current;
+    const measureRow = measureRef.current;
+    if (!container || !measureRow) return;
+    const measure = () => {
+      const containerWidth = container.getBoundingClientRect().width;
+      const chips = Array.from(
+        measureRow.children
+      );
+      const overflowChipWidth = 32;
+      let usedWidth = 0;
+      let count = 0;
+      for (const chip of chips) {
+        const chipWidth = chip.getBoundingClientRect().width;
+        const gapWidth = count > 0 ? 4 : 0;
+        const projectedWidth = usedWidth + gapWidth + chipWidth;
+        const remaining = tags.length - (count + 1);
+        const needsOverflow = remaining > 0;
+        const totalNeeded = projectedWidth + (needsOverflow ? 4 + overflowChipWidth : 0);
+        if (totalNeeded <= containerWidth) {
+          usedWidth = projectedWidth;
+          count++;
+        } else {
+          break;
+        }
+      }
+      setVisibleCount(Math.max(1, count));
+    };
+    measure();
+    const observer = new ResizeObserver(measure);
+    observer.observe(container);
+    return () => observer.disconnect();
+  }, [tags]);
+  const overflowCount = tags.length - visibleCount;
+  const overflowTags = tags.slice(visibleCount);
+  const chipClass = cn(
+    "inline-flex items-center gap-xs shrink-0",
+    "px-sm rounded-base",
+    "bg-tag-neutral-bg text-tag-neutral-text",
+    "text-xs font-medium leading-xs",
+    "whitespace-nowrap"
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "flex flex-1 items-center gap-xs min-w-0 overflow-hidden relative", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+      "div",
+      {
+        ref: measureRef,
+        "aria-hidden": true,
+        className: "absolute flex items-center gap-xs pointer-events-none",
+        style: { visibility: "hidden", whiteSpace: "nowrap", top: 0, left: 0 },
+        children: tags.map((tag) => /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("span", { className: chipClass, style: { height: chipHeightPx }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "truncate max-w-[100px]", children: tag }),
+          onTagRemove && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "inline-flex shrink-0 w-3 h-3" })
+        ] }, tag))
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { ref: containerRef, className: "flex flex-1 items-center gap-xs overflow-hidden", children: [
+      tags.slice(0, visibleCount).map((tag) => /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+        "span",
+        {
+          className: chipClass,
+          style: { height: chipHeightPx },
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "truncate max-w-[100px]", children: tag }),
+            onTagRemove && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+              "button",
+              {
+                type: "button",
+                "aria-label": `Remove ${tag}`,
+                className: "inline-flex shrink-0 items-center justify-center cursor-pointer rounded-sm hover:opacity-70",
+                onClick: (e) => {
+                  e.stopPropagation();
+                  e.preventDefault();
+                  onTagRemove(tag);
+                },
+                children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_icons13.Icon, { icon: import_icons13.faXmarkSolid, size: "xs" })
+              }
+            )
+          ]
+        },
+        tag
+      )),
+      overflowCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(TooltipPrimitive2.Provider, { children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(TooltipPrimitive2.Root, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(TooltipPrimitive2.Trigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+          "span",
+          {
+            className: cn(chipClass, "cursor-default"),
+            style: { height: chipHeightPx },
+            children: [
+              "+",
+              overflowCount
+            ]
+          }
+        ) }),
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(TooltipPrimitive2.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+          TooltipPrimitive2.Content,
+          {
+            sideOffset: 4,
+            className: cn(
+              "z-50 px-base py-sm rounded-md shadow-lg",
+              "bg-tooltip-default-bg text-tooltip-default-text",
+              "text-xs font-regular leading-xs",
+              "flex flex-col gap-xs",
+              "data-[state=delayed-open]:animate-[tooltip-in_150ms_ease-out]",
+              "data-[state=closed]:animate-[tooltip-out_100ms_ease-in]"
+            ),
+            children: [
+              overflowTags.map((t) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { children: t }, t)),
+              /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(TooltipPrimitive2.Arrow, { className: "fill-tooltip-default-bg" })
+            ]
+          }
+        ) })
+      ] }) })
+    ] })
+  ] });
+}
 var Select = React18.forwardRef(
   ({
     className,
@@ -2259,6 +2402,8 @@ var Select = React18.forwardRef(
     placeholder = "Select...",
     value,
     multiCount,
+    tags,
+    onTagRemove,
     icon,
     avatar,
     flag,
@@ -2280,10 +2425,13 @@ var Select = React18.forwardRef(
       setInternalOpen(open);
       onOpenChange?.(open);
     };
-    const hasValue = value != null && value !== "";
+    const resolvedSize = size ?? "md";
+    const hasTags = tags != null && tags.length > 0;
+    const hasValue = hasTags || value != null && value !== "";
     const isActive = isOpen && !error && !disabled;
     const icColor = iconColor[disabled ? "disabled" : "default"];
     const triggerState = disabled ? triggerStates.disabled : error ? triggerStates.error : triggerStates.default;
+    const heightPx = selectHeight[resolvedSize];
     return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
       PopoverPrimitive.Root,
       {
@@ -2301,10 +2449,13 @@ var Select = React18.forwardRef(
                 disabled,
                 "aria-invalid": error || void 0,
                 "aria-describedby": errorId,
+                style: { height: heightPx },
                 className: cn(
                   selectVariants({ size }),
                   triggerState,
                   isActive && triggerStates.active,
+                  // Reduce vertical padding when tags are present
+                  hasTags ? "py-xs" : resolvedSize === "sm" ? "py-sm" : "py-[10px]",
                   className
                 ),
                 ...props,
@@ -2312,7 +2463,14 @@ var Select = React18.forwardRef(
                   avatar,
                   flag,
                   icon && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_icons13.Icon, { icon, size: "sm", className: cn("shrink-0", icColor) }),
-                  /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+                  tags && tags.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+                    SelectChips,
+                    {
+                      tags,
+                      onTagRemove,
+                      chipHeightPx: chipHeight[resolvedSize]
+                    }
+                  ) : /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
                     "span",
                     {
                       className: cn(
@@ -2322,7 +2480,7 @@ var Select = React18.forwardRef(
                       children: hasValue ? value : placeholder
                     }
                   ),
-                  multiCount != null && multiCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("span", { className: "shrink-0 text-xs leading-normal text-select-text-multi", children: [
+                  !hasTags && multiCount != null && multiCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("span", { className: "shrink-0 text-xs leading-normal text-select-text-multi", children: [
                     "+",
                     multiCount,
                     " others"
@@ -2790,12 +2948,418 @@ var TextInput = React22.forwardRef(
 );
 TextInput.displayName = "TextInput";
 
-// src/components/ui/typography.tsx
+// src/components/ui/chip-input.tsx
 var React23 = __toESM(require("react"));
 var import_class_variance_authority14 = require("class-variance-authority");
-var import_react_slot3 = require("@radix-ui/react-slot");
+var import_icons17 = require("@l3mpire/icons");
 var import_jsx_runtime23 = require("react/jsx-runtime");
-var typographyVariants = (0, import_class_variance_authority14.cva)("", {
+var chipInputVariants = (0, import_class_variance_authority14.cva)(
+  [
+    "flex flex-wrap items-center w-full border transition-colors",
+    "text-sm",
+    "font-regular",
+    "leading-sm",
+    "gap-xs"
+  ],
+  {
+    variants: {
+      size: {
+        sm: "px-base py-sm rounded-base",
+        md: "px-md py-[10px] rounded-md"
+      }
+    },
+    defaultVariants: { size: "md" }
+  }
+);
+var wrapperStates2 = {
+  default: [
+    "bg-text-input-bg-default",
+    "border-text-input-border-default",
+    "text-text-input-text-default",
+    "hover:border-text-input-border-hover",
+    "focus-within:border-text-input-border-hover",
+    "focus-within:shadow-focus-ring"
+  ],
+  error: [
+    "bg-text-input-bg-default",
+    "border-text-input-border-error",
+    "text-text-input-text-default"
+  ],
+  disabled: [
+    "bg-text-input-bg-disabled",
+    "border-text-input-border-disabled",
+    "text-text-input-text-disabled",
+    "cursor-not-allowed"
+  ]
+};
+var chipStyle = [
+  "inline-flex items-center gap-xs shrink-0",
+  "h-6 px-sm rounded-base",
+  "bg-tag-neutral-bg text-tag-neutral-text",
+  "text-xs font-medium leading-xs",
+  "whitespace-nowrap"
+];
+var errorGuidance4 = {
+  icon: "shrink-0 text-text-input-error-icon",
+  text: "text-xs font-medium leading-xs text-text-input-error-text"
+};
+var ChipInput = React23.forwardRef(
+  ({
+    className,
+    size,
+    values,
+    onChange,
+    placeholder = "Type a value and press Enter",
+    label,
+    labelType,
+    error,
+    errorMessage,
+    disabled,
+    iconLeft,
+    max = 0,
+    ...props
+  }, ref) => {
+    const autoId = React23.useId();
+    const inputId = props.id ?? autoId;
+    const errorId = error && errorMessage ? `${inputId}-error` : void 0;
+    const inputRef = React23.useRef(null);
+    const [inputValue, setInputValue] = React23.useState("");
+    const state = disabled ? "disabled" : error ? "error" : "default";
+    const addChip = (val) => {
+      const trimmed = val.trim();
+      if (!trimmed) return;
+      if (values.includes(trimmed)) return;
+      if (max > 0 && values.length >= max) return;
+      onChange([...values, trimmed]);
+      setInputValue("");
+    };
+    const removeChip = (val) => {
+      onChange(values.filter((v) => v !== val));
+    };
+    const handleKeyDown = (e) => {
+      if (e.key === "Enter") {
+        e.preventDefault();
+        addChip(inputValue);
+      } else if (e.key === "Backspace" && inputValue === "" && values.length > 0) {
+        removeChip(values[values.length - 1]);
+      }
+    };
+    const handleWrapperClick = () => {
+      inputRef.current?.focus();
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "flex flex-col gap-xs", children: [
+      label && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(InputLabel, { type: labelType, disabled, children: label }),
+      /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
+        "div",
+        {
+          ref,
+          role: "textbox",
+          "aria-disabled": disabled || void 0,
+          className: cn(
+            chipInputVariants({ size }),
+            wrapperStates2[state],
+            "cursor-text",
+            className
+          ),
+          onClick: handleWrapperClick,
+          ...props,
+          children: [
+            iconLeft && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+              import_icons17.Icon,
+              {
+                icon: iconLeft,
+                size: "sm",
+                className: cn(
+                  "shrink-0",
+                  disabled ? "text-text-input-text-disabled" : "text-text-input-icon"
+                )
+              }
+            ),
+            values.map((val) => /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("span", { className: cn(chipStyle), children: [
+              /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "truncate max-w-[150px]", children: val }),
+              !disabled && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+                "button",
+                {
+                  type: "button",
+                  "aria-label": `Remove ${val}`,
+                  className: "inline-flex shrink-0 items-center justify-center cursor-pointer rounded-sm hover:opacity-70",
+                  onClick: (e) => {
+                    e.stopPropagation();
+                    removeChip(val);
+                  },
+                  children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_icons17.Icon, { icon: import_icons17.faXmarkSolid, size: "xs" })
+                }
+              )
+            ] }, val)),
+            /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+              "input",
+              {
+                ref: inputRef,
+                id: inputId,
+                type: "text",
+                disabled,
+                "aria-invalid": error || void 0,
+                "aria-describedby": errorId,
+                value: inputValue,
+                onChange: (e) => setInputValue(e.target.value),
+                onKeyDown: handleKeyDown,
+                placeholder,
+                className: cn(
+                  "flex-1 min-w-[120px] bg-transparent outline-none",
+                  "[font-size:inherit] font-[inherit] leading-[inherit] [color:inherit]",
+                  disabled ? "placeholder:text-text-input-text-disabled cursor-not-allowed" : "placeholder:text-text-input-text-placeholder"
+                )
+              }
+            )
+          ]
+        }
+      ),
+      error && errorMessage && /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "flex items-center gap-xs", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_icons17.Icon, { icon: import_icons17.faCircleExclamationOutline, size: "xs", className: errorGuidance4.icon }),
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { id: errorId, className: errorGuidance4.text, children: errorMessage })
+      ] })
+    ] });
+  }
+);
+ChipInput.displayName = "ChipInput";
+
+// src/components/ui/number-input.tsx
+var React24 = __toESM(require("react"));
+var import_class_variance_authority15 = require("class-variance-authority");
+var import_icons18 = require("@l3mpire/icons");
+var import_jsx_runtime24 = require("react/jsx-runtime");
+var stepperButtonVariants = (0, import_class_variance_authority15.cva)(
+  [
+    "shrink-0 flex items-center justify-center",
+    "border border-text-input-border-default",
+    "cursor-pointer transition-colors"
+  ],
+  {
+    variants: {
+      size: {
+        sm: "p-sm",
+        md: "p-[10px]"
+      }
+    },
+    defaultVariants: { size: "md" }
+  }
+);
+var stepperButtonStates = {
+  enabled: [
+    "bg-gradient-to-t from-text-input-button-bg from-[10%] to-text-input-button-gradient-to",
+    "hover:from-text-input-button-bg-hover hover:from-[0%] hover:to-text-input-button-gradient-to",
+    "active:from-text-input-button-bg-hover active:from-[0%] active:to-text-input-button-gradient-to"
+  ],
+  disabled: [
+    "bg-text-input-bg-disabled",
+    "border-text-input-border-disabled",
+    "cursor-not-allowed"
+  ]
+};
+var inputVariants = (0, import_class_variance_authority15.cva)(
+  [
+    "min-w-[48px] text-center border-y border-text-input-border-default",
+    "bg-text-input-bg-default",
+    "text-sm font-regular leading-sm",
+    "text-text-input-text-default",
+    "outline-none",
+    "[appearance:textfield]",
+    "[&::-webkit-outer-spin-button]:appearance-none",
+    "[&::-webkit-inner-spin-button]:appearance-none"
+  ],
+  {
+    variants: {
+      size: {
+        sm: "px-base py-sm",
+        md: "px-md py-[10px]"
+      }
+    },
+    defaultVariants: { size: "md" }
+  }
+);
+var wrapperStates3 = {
+  default: [
+    "focus-within:shadow-focus-ring",
+    "focus-within:[&_button]:border-text-input-border-hover",
+    "focus-within:[&_input]:border-text-input-border-hover"
+  ],
+  error: [
+    "[&_button]:border-text-input-border-error",
+    "[&_input]:border-text-input-border-error"
+  ],
+  disabled: []
+};
+var errorGuidance5 = {
+  icon: "shrink-0 text-text-input-error-icon",
+  text: "text-xs font-medium leading-xs text-text-input-error-text"
+};
+var NumberInput = React24.forwardRef(
+  ({
+    className,
+    size,
+    value: controlledValue,
+    defaultValue = 0,
+    onChange,
+    min,
+    max,
+    step = 1,
+    label,
+    labelType,
+    error,
+    errorMessage,
+    disabled,
+    id,
+    ...props
+  }, ref) => {
+    const autoId = React24.useId();
+    const inputId = id ?? autoId;
+    const errorId = error && errorMessage ? `${inputId}-error` : void 0;
+    const isControlled = controlledValue !== void 0;
+    const [internalValue, setInternalValue] = React24.useState(defaultValue);
+    const currentValue = isControlled ? controlledValue : internalValue;
+    const resolvedSize = size ?? "md";
+    const state = disabled ? "disabled" : error ? "error" : "default";
+    const clamp = (val) => {
+      let clamped = val;
+      if (min != null) clamped = Math.max(min, clamped);
+      if (max != null) clamped = Math.min(max, clamped);
+      return clamped;
+    };
+    const setValue = (val) => {
+      const clamped = clamp(val);
+      if (!isControlled) setInternalValue(clamped);
+      onChange?.(clamped);
+    };
+    const handleInputChange = (e) => {
+      const parsed = parseInt(e.target.value, 10);
+      if (!isNaN(parsed)) {
+        setValue(parsed);
+      } else if (e.target.value === "" || e.target.value === "-") {
+        if (!isControlled) setInternalValue(0);
+      }
+    };
+    const handleBlur = () => {
+      setValue(currentValue);
+    };
+    const decrement = () => {
+      if (disabled) return;
+      setValue(currentValue - step);
+    };
+    const increment = () => {
+      if (disabled) return;
+      setValue(currentValue + step);
+    };
+    const atMin = min != null && currentValue <= min;
+    const atMax = max != null && currentValue >= max;
+    const valueStr = String(currentValue);
+    const charCount = valueStr.length;
+    const inputWidth = charCount > 3 ? `${48 + (charCount - 3) * 9}px` : void 0;
+    return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: cn("flex flex-col gap-xs", className), children: [
+      label && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(InputLabel, { type: labelType, disabled, children: label }),
+      /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
+        "div",
+        {
+          className: cn(
+            "inline-flex w-fit rounded-md shadow-sm",
+            wrapperStates3[state]
+          ),
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+              "button",
+              {
+                type: "button",
+                disabled: disabled || atMin,
+                onClick: decrement,
+                "aria-label": "Decrease",
+                className: cn(
+                  stepperButtonVariants({ size: resolvedSize }),
+                  "rounded-l-md -mr-px",
+                  stepperButtonStates[disabled || atMin ? "disabled" : "enabled"]
+                ),
+                children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+                  import_icons18.Icon,
+                  {
+                    icon: import_icons18.faMinusOutline,
+                    size: "sm",
+                    className: cn(
+                      disabled || atMin ? "text-text-input-text-disabled" : "text-text-input-text-default"
+                    )
+                  }
+                )
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+              "input",
+              {
+                ref,
+                id: inputId,
+                type: "number",
+                disabled,
+                "aria-invalid": error || void 0,
+                "aria-describedby": errorId,
+                value: currentValue,
+                onChange: handleInputChange,
+                onBlur: handleBlur,
+                min,
+                max,
+                step,
+                style: inputWidth ? { width: inputWidth } : void 0,
+                className: cn(
+                  inputVariants({ size: resolvedSize }),
+                  "-mx-px",
+                  disabled && [
+                    "bg-text-input-bg-disabled",
+                    "border-text-input-border-disabled",
+                    "text-text-input-text-disabled",
+                    "cursor-not-allowed"
+                  ],
+                  error && "border-text-input-border-error"
+                ),
+                ...props
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+              "button",
+              {
+                type: "button",
+                disabled: disabled || atMax,
+                onClick: increment,
+                "aria-label": "Increase",
+                className: cn(
+                  stepperButtonVariants({ size: resolvedSize }),
+                  "rounded-r-md -ml-px",
+                  stepperButtonStates[disabled || atMax ? "disabled" : "enabled"]
+                ),
+                children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+                  import_icons18.Icon,
+                  {
+                    icon: import_icons18.faPlusOutline,
+                    size: "sm",
+                    className: cn(
+                      disabled || atMax ? "text-text-input-text-disabled" : "text-text-input-text-default"
+                    )
+                  }
+                )
+              }
+            )
+          ]
+        }
+      ),
+      error && errorMessage && /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "flex items-center gap-xs", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_icons18.Icon, { icon: import_icons18.faCircleExclamationOutline, size: "xs", className: errorGuidance5.icon }),
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { id: errorId, className: errorGuidance5.text, children: errorMessage })
+      ] })
+    ] });
+  }
+);
+NumberInput.displayName = "NumberInput";
+
+// src/components/ui/typography.tsx
+var React25 = __toESM(require("react"));
+var import_class_variance_authority16 = require("class-variance-authority");
+var import_react_slot3 = require("@radix-ui/react-slot");
+var import_jsx_runtime25 = require("react/jsx-runtime");
+var typographyVariants = (0, import_class_variance_authority16.cva)("", {
   variants: {
     variant: {
       h1: "text-xl leading-lg",
@@ -2826,10 +3390,10 @@ var defaultElementMap = {
   sm: "p",
   xs: "p"
 };
-var Typography = React23.forwardRef(
+var Typography = React25.forwardRef(
   ({ className, variant = "md", weight, as, asChild = false, ...props }, ref) => {
     const Comp = asChild ? import_react_slot3.Slot : as ?? defaultElementMap[variant ?? "md"] ?? "p";
-    return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
       Comp,
       {
         ref,
@@ -2842,10 +3406,10 @@ var Typography = React23.forwardRef(
 Typography.displayName = "Typography";
 
 // src/components/ui/user-menu.tsx
-var React24 = __toESM(require("react"));
-var import_jsx_runtime24 = require("react/jsx-runtime");
-var UserMenu = React24.forwardRef(
-  ({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+var React26 = __toESM(require("react"));
+var import_jsx_runtime26 = require("react/jsx-runtime");
+var UserMenu = React26.forwardRef(
+  ({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
     "div",
     {
       ref,
@@ -2864,8 +3428,8 @@ var UserMenu = React24.forwardRef(
   )
 );
 UserMenu.displayName = "UserMenu";
-var UserMenuInfoRow = React24.forwardRef(
-  ({ className, avatar, name, subtitle, action, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
+var UserMenuInfoRow = React26.forwardRef(
+  ({ className, avatar, name, subtitle, action, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
     "div",
     {
       ref,
@@ -2873,9 +3437,9 @@ var UserMenuInfoRow = React24.forwardRef(
       ...props,
       children: [
         avatar,
-        /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "flex flex-1 flex-col min-w-0", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "text-sm font-medium leading-sm text-user-menu-name truncate", children: name }),
-          subtitle && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "text-xs font-regular leading-xs text-user-menu-subtitle truncate", children: subtitle })
+        /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "flex flex-1 flex-col min-w-0", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "text-sm font-medium leading-sm text-user-menu-name truncate", children: name }),
+          subtitle && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "text-xs font-regular leading-xs text-user-menu-subtitle truncate", children: subtitle })
         ] }),
         action
       ]
@@ -2883,8 +3447,8 @@ var UserMenuInfoRow = React24.forwardRef(
   )
 );
 UserMenuInfoRow.displayName = "UserMenuInfoRow";
-var UserMenuSection = React24.forwardRef(
-  ({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+var UserMenuSection = React26.forwardRef(
+  ({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
     "div",
     {
       ref,
@@ -2897,12 +3461,12 @@ var UserMenuSection = React24.forwardRef(
 UserMenuSection.displayName = "UserMenuSection";
 
 // src/components/ui/modal.tsx
-var React25 = __toESM(require("react"));
+var React27 = __toESM(require("react"));
 var DialogPrimitive = __toESM(require("@radix-ui/react-dialog"));
-var import_class_variance_authority15 = require("class-variance-authority");
-var import_icons17 = require("@l3mpire/icons");
-var import_jsx_runtime25 = require("react/jsx-runtime");
-var modalVariants = (0, import_class_variance_authority15.cva)(
+var import_class_variance_authority17 = require("class-variance-authority");
+var import_icons19 = require("@l3mpire/icons");
+var import_jsx_runtime27 = require("react/jsx-runtime");
+var modalVariants = (0, import_class_variance_authority17.cva)(
   [
     "fixed top-[50%] left-[50%] -translate-x-1/2 -translate-y-1/2 z-50",
     "flex flex-col",
@@ -2925,7 +3489,7 @@ var modalVariants = (0, import_class_variance_authority15.cva)(
 var Modal = DialogPrimitive.Root;
 var ModalTrigger = DialogPrimitive.Trigger;
 var ModalClose = DialogPrimitive.Close;
-var ModalOverlay = React25.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+var ModalOverlay = React27.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
   DialogPrimitive.Overlay,
   {
     ref,
@@ -2938,9 +3502,9 @@ var ModalOverlay = React25.forwardRef(({ className, ...props }, ref) => /* @__PU
   }
 ));
 ModalOverlay.displayName = "ModalOverlay";
-var ModalContent = React25.forwardRef(({ className, size, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(DialogPrimitive.Portal, { children: [
-  /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(ModalOverlay, {}),
-  /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+var ModalContent = React27.forwardRef(({ className, size, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(DialogPrimitive.Portal, { children: [
+  /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(ModalOverlay, {}),
+  /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
     DialogPrimitive.Content,
     {
       ref,
@@ -2951,8 +3515,8 @@ var ModalContent = React25.forwardRef(({ className, size, children, ...props },
   )
 ] }));
 ModalContent.displayName = "ModalContent";
-var ModalHeader = React25.forwardRef(
-  ({ className, showBorder = true, onClose, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
+var ModalHeader = React27.forwardRef(
+  ({ className, showBorder = true, onClose, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
     "div",
     {
       ref,
@@ -2963,15 +3527,15 @@ var ModalHeader = React25.forwardRef(
       ),
       ...props,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "flex flex-1 flex-col gap-2xs", children }),
-        onClose && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(DialogPrimitive.Close, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "flex flex-1 flex-col gap-2xs", children }),
+        onClose && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(DialogPrimitive.Close, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
           "button",
           {
             type: "button",
             onClick: onClose,
             className: "inline-flex shrink-0 items-center justify-center p-xs rounded-base text-modal-header-close hover:bg-black/5 transition-colors cursor-pointer",
             "aria-label": "Close",
-            children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_icons17.Icon, { icon: import_icons17.faXmarkSolid, size: "sm" })
+            children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_icons19.Icon, { icon: import_icons19.faXmarkSolid, size: "sm" })
           }
         ) })
       ]
@@ -2979,7 +3543,7 @@ var ModalHeader = React25.forwardRef(
   )
 );
 ModalHeader.displayName = "ModalHeader";
-var ModalTitle = React25.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+var ModalTitle = React27.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
   DialogPrimitive.Title,
   {
     ref,
@@ -2988,7 +3552,7 @@ var ModalTitle = React25.forwardRef(({ className, ...props }, ref) => /* @__PURE
   }
 ));
 ModalTitle.displayName = "ModalTitle";
-var ModalDescription = React25.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+var ModalDescription = React27.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
   DialogPrimitive.Description,
   {
     ref,
@@ -2997,7 +3561,7 @@ var ModalDescription = React25.forwardRef(({ className, ...props }, ref) => /* @
   }
 ));
 ModalDescription.displayName = "ModalDescription";
-var ModalBody = React25.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+var ModalBody = React27.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
   "div",
   {
     ref,
@@ -3006,8 +3570,8 @@ var ModalBody = React25.forwardRef(({ className, ...props }, ref) => /* @__PURE_
   }
 ));
 ModalBody.displayName = "ModalBody";
-var ModalFooter = React25.forwardRef(
-  ({ className, showBorder = true, infoMessage, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
+var ModalFooter = React27.forwardRef(
+  ({ className, showBorder = true, infoMessage, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
     "div",
     {
       ref,
@@ -3018,9 +3582,9 @@ var ModalFooter = React25.forwardRef(
       ),
       ...props,
       children: [
-        infoMessage && /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "flex flex-1 items-center gap-base", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_icons17.Icon, { icon: import_icons17.faCircleInfoSolid, size: "sm", className: "shrink-0 text-modal-footer-icon" }),
-          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "text-sm font-regular leading-sm text-modal-footer-text", children: infoMessage })
+        infoMessage && /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "flex flex-1 items-center gap-base", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_icons19.Icon, { icon: import_icons19.faCircleInfoSolid, size: "sm", className: "shrink-0 text-modal-footer-icon" }),
+          /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "text-sm font-regular leading-sm text-modal-footer-text", children: infoMessage })
         ] }),
         children
       ]
@@ -3030,9 +3594,9 @@ var ModalFooter = React25.forwardRef(
 ModalFooter.displayName = "ModalFooter";
 
 // src/components/ui/dialog.tsx
-var React26 = __toESM(require("react"));
-var import_jsx_runtime26 = require("react/jsx-runtime");
-var Dialog = React26.forwardRef(
+var React28 = __toESM(require("react"));
+var import_jsx_runtime28 = require("react/jsx-runtime");
+var Dialog = React28.forwardRef(
   ({
     open,
     onOpenChange,
@@ -3049,16 +3613,16 @@ var Dialog = React26.forwardRef(
     className
   }, ref) => {
     const handleCancel = onCancel ?? (() => onOpenChange?.(false));
-    return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Modal, { open, onOpenChange, children: /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(ModalContent, { size: "sm", ref, className, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(ModalHeader, { showBorder: false, onClose: handleCancel, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(ModalTitle, { children: title }),
-        description && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(ModalDescription, { children: description })
+    return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Modal, { open, onOpenChange, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(ModalContent, { size: "sm", ref, className, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(ModalHeader, { showBorder: false, onClose: handleCancel, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(ModalTitle, { children: title }),
+        description && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(ModalDescription, { children: description })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(ModalFooter, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(ModalClose, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Button, { appearance: "ghost", intent: "brand", size: "md", onClick: handleCancel, children: cancelLabel }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "flex items-center gap-md", children: [
-          secondaryLabel && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Button, { appearance: "outlined", intent: "brand", size: "md", onClick: onSecondaryAction, children: secondaryLabel }),
-          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(ModalFooter, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(ModalClose, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Button, { appearance: "ghost", intent: "brand", size: "md", onClick: handleCancel, children: cancelLabel }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "flex items-center gap-md", children: [
+          secondaryLabel && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Button, { appearance: "outlined", intent: "brand", size: "md", onClick: onSecondaryAction, children: secondaryLabel }),
+          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
             Button,
             {
               appearance: "solid",
@@ -3077,11 +3641,11 @@ var Dialog = React26.forwardRef(
 Dialog.displayName = "Dialog";
 
 // src/components/ui/empty-state.tsx
-var React27 = __toESM(require("react"));
-var import_class_variance_authority16 = require("class-variance-authority");
-var import_icons18 = require("@l3mpire/icons");
-var import_jsx_runtime27 = require("react/jsx-runtime");
-var emptyStateVariants = (0, import_class_variance_authority16.cva)(
+var React29 = __toESM(require("react"));
+var import_class_variance_authority18 = require("class-variance-authority");
+var import_icons20 = require("@l3mpire/icons");
+var import_jsx_runtime29 = require("react/jsx-runtime");
+var emptyStateVariants = (0, import_class_variance_authority18.cva)(
   "flex flex-col items-center text-center",
   {
     variants: {
@@ -3095,7 +3659,7 @@ var emptyStateVariants = (0, import_class_variance_authority16.cva)(
     }
   }
 );
-var iconContainerVariants2 = (0, import_class_variance_authority16.cva)(
+var iconContainerVariants2 = (0, import_class_variance_authority18.cva)(
   [
     "flex items-center justify-center shrink-0",
     "bg-table-bg border border-table-border",
@@ -3113,7 +3677,7 @@ var iconContainerVariants2 = (0, import_class_variance_authority16.cva)(
     }
   }
 );
-var EmptyState = React27.forwardRef(
+var EmptyState = React29.forwardRef(
   ({
     className,
     size = "md",
@@ -3125,23 +3689,23 @@ var EmptyState = React27.forwardRef(
     ...props
   }, ref) => {
     const isMd = size === "md";
-    return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
       "div",
       {
         ref,
         className: cn(emptyStateVariants({ size }), className),
         ...props,
         children: [
-          icon && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: iconContainerVariants2({ size }), children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
-            import_icons18.Icon,
+          icon && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: iconContainerVariants2({ size }), children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+            import_icons20.Icon,
             {
               icon,
               size: isMd ? "md" : "sm",
               className: "text-table-cell-text-secondary"
             }
           ) }),
-          /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "flex flex-col gap-xs w-full", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "flex flex-col gap-xs w-full", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
               "p",
               {
                 className: cn(
@@ -3151,7 +3715,7 @@ var EmptyState = React27.forwardRef(
                 children: title
               }
             ),
-            description && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+            description && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
               "p",
               {
                 className: cn(
@@ -3162,7 +3726,7 @@ var EmptyState = React27.forwardRef(
               }
             )
           ] }),
-          (primaryAction || secondaryAction) && /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
+          (primaryAction || secondaryAction) && /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
             "div",
             {
               className: cn(
@@ -3170,7 +3734,7 @@ var EmptyState = React27.forwardRef(
                 isMd ? "gap-lg" : "gap-base"
               ),
               children: [
-                secondaryAction && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+                secondaryAction && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
                   Button,
                   {
                     appearance: "outlined",
@@ -3180,7 +3744,7 @@ var EmptyState = React27.forwardRef(
                     children: secondaryAction.label
                   }
                 ),
-                primaryAction && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+                primaryAction && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
                   Button,
                   {
                     appearance: "solid",
@@ -3201,8 +3765,8 @@ var EmptyState = React27.forwardRef(
 EmptyState.displayName = "EmptyState";
 
 // src/components/ui/table-cells.tsx
-var React28 = __toESM(require("react"));
-var import_jsx_runtime28 = require("react/jsx-runtime");
+var React30 = __toESM(require("react"));
+var import_jsx_runtime30 = require("react/jsx-runtime");
 function getInitials(name) {
   return name.split(" ").map((part) => part[0]).filter(Boolean).slice(0, 2).join("").toUpperCase();
 }
@@ -3211,11 +3775,11 @@ var AvatarCell = ({
   subtitle,
   src,
   className
-}) => /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: cn("flex items-center gap-md", className), children: [
-  /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Avatar, { initials: getInitials(name), src, alt: name, size: "lg", shape: "rounded" }),
-  /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "flex flex-col", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "text-sm font-medium text-table-cell-text-primary leading-sm", children: name }),
-    subtitle && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "text-xs font-regular text-table-cell-text-secondary leading-xs", children: subtitle })
+}) => /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: cn("flex items-center gap-md", className), children: [
+  /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Avatar, { initials: getInitials(name), src, alt: name, size: "lg", shape: "rounded" }),
+  /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "flex flex-col", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "text-sm font-medium text-table-cell-text-primary leading-sm", children: name }),
+    subtitle && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "text-xs font-regular text-table-cell-text-secondary leading-xs", children: subtitle })
   ] })
 ] });
 AvatarCell.displayName = "AvatarCell";
@@ -3225,7 +3789,7 @@ var StatusCell = ({
   type = "primary",
   size = "sm",
   className
-}) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: cn("flex items-center", className), children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Badge, { variant, type, size, children: label }) });
+}) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: cn("flex items-center", className), children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Badge, { variant, type, size, children: label }) });
 StatusCell.displayName = "StatusCell";
 var secondaryIntentColors = {
   success: "text-badge-light-success-text",
@@ -3243,7 +3807,7 @@ var NumberCell = ({
   className
 }) => {
   const formatted = typeof value === "number" && formatOptions ? new Intl.NumberFormat(locale, formatOptions).format(value) : String(value);
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
     "div",
     {
       className: cn(
@@ -3252,8 +3816,8 @@ var NumberCell = ({
         className
       ),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "text-sm font-medium text-table-cell-text-primary", children: formatted }),
-        secondaryStat && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "text-sm font-medium text-table-cell-text-primary", children: formatted }),
+        secondaryStat && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
           "span",
           {
             className: cn(
@@ -3281,7 +3845,7 @@ var DateCell = ({
 }) => {
   const d = typeof date === "string" ? new Date(date) : date;
   const formatted = d.toLocaleDateString(locale, format);
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
     "span",
     {
       className: cn(
@@ -3293,7 +3857,7 @@ var DateCell = ({
   );
 };
 DateCell.displayName = "DateCell";
-var EmailCell = ({ email, className }) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+var EmailCell = ({ email, className }) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
   Link,
   {
     intent: "neutral",
@@ -3309,13 +3873,13 @@ var LinkCell = ({
   label,
   target = "_blank",
   className
-}) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Link, { intent: "brand", size: "sm", href, target, className, children: label ?? href });
+}) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Link, { intent: "brand", size: "sm", href, target, className, children: label ?? href });
 LinkCell.displayName = "LinkCell";
 var TextCell = ({
   value,
   secondary = false,
   className
-}) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+}) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
   "span",
   {
     className: cn(
@@ -3331,20 +3895,20 @@ var ButtonCell = ({
   className,
   children,
   ...props
-}) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: cn("flex items-center", className), children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Button, { size: "sm", appearance: "ghost", intent: "brand", ...props, children }) });
+}) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: cn("flex items-center", className), children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Button, { size: "sm", appearance: "ghost", intent: "brand", ...props, children }) });
 ButtonCell.displayName = "ButtonCell";
 var EditableCell = ({
   value,
   onSave,
   className
 }) => {
-  const [isEditing, setIsEditing] = React28.useState(false);
-  const [draft, setDraft] = React28.useState(value);
-  const inputRef = React28.useRef(null);
-  React28.useEffect(() => {
+  const [isEditing, setIsEditing] = React30.useState(false);
+  const [draft, setDraft] = React30.useState(value);
+  const inputRef = React30.useRef(null);
+  React30.useEffect(() => {
     setDraft(value);
   }, [value]);
-  React28.useEffect(() => {
+  React30.useEffect(() => {
     if (isEditing) {
       inputRef.current?.focus();
       inputRef.current?.select();
@@ -3364,7 +3928,7 @@ var EditableCell = ({
     }
   };
   if (isEditing) {
-    return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
       "input",
       {
         ref: inputRef,
@@ -3380,7 +3944,7 @@ var EditableCell = ({
       }
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
     "span",
     {
       role: "button",
@@ -3402,7 +3966,7 @@ var EditableCell = ({
   );
 };
 EditableCell.displayName = "EditableCell";
-var RowActions = ({ children, className }) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+var RowActions = ({ children, className }) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
   "div",
   {
     className: cn(
@@ -3416,18 +3980,18 @@ var RowActions = ({ children, className }) => /* @__PURE__ */ (0, import_jsx_run
 RowActions.displayName = "RowActions";
 
 // src/components/ui/data-table.tsx
-var React30 = __toESM(require("react"));
+var React32 = __toESM(require("react"));
 var import_react_table = require("@tanstack/react-table");
 var import_core = require("@dnd-kit/core");
 var import_sortable = require("@dnd-kit/sortable");
 var import_utilities = require("@dnd-kit/utilities");
-var import_icons19 = require("@l3mpire/icons");
+var import_icons21 = require("@l3mpire/icons");
 var PopoverPrimitive2 = __toESM(require("@radix-ui/react-popover"));
 
 // src/components/ui/table.tsx
-var React29 = __toESM(require("react"));
-var import_jsx_runtime29 = require("react/jsx-runtime");
-var Table = React29.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "relative w-full overflow-auto", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+var React31 = __toESM(require("react"));
+var import_jsx_runtime31 = require("react/jsx-runtime");
+var Table = React31.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "relative w-full overflow-auto", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
   "table",
   {
     ref,
@@ -3436,7 +4000,7 @@ var Table = React29.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */
   }
 ) }));
 Table.displayName = "Table";
-var TableHeader = React29.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+var TableHeader = React31.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
   "thead",
   {
     ref,
@@ -3445,9 +4009,9 @@ var TableHeader = React29.forwardRef(({ className, ...props }, ref) => /* @__PUR
   }
 ));
 TableHeader.displayName = "TableHeader";
-var TableBody = React29.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("tbody", { ref, className: cn("[&_tr:last-child_td]:border-b-0", className), ...props }));
+var TableBody = React31.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("tbody", { ref, className: cn("[&_tr:last-child_td]:border-b-0", className), ...props }));
 TableBody.displayName = "TableBody";
-var TableFooter = React29.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+var TableFooter = React31.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
   "tfoot",
   {
     ref,
@@ -3459,7 +4023,7 @@ var TableFooter = React29.forwardRef(({ className, ...props }, ref) => /* @__PUR
   }
 ));
 TableFooter.displayName = "TableFooter";
-var TableRow = React29.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+var TableRow = React31.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
   "tr",
   {
     ref,
@@ -3473,7 +4037,7 @@ var TableRow = React29.forwardRef(({ className, ...props }, ref) => /* @__PURE__
   }
 ));
 TableRow.displayName = "TableRow";
-var TableHead = React29.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+var TableHead = React31.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
   "th",
   {
     ref,
@@ -3489,7 +4053,7 @@ var TableHead = React29.forwardRef(({ className, ...props }, ref) => /* @__PURE_
   }
 ));
 TableHead.displayName = "TableHead";
-var TableCell = React29.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+var TableCell = React31.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
   "td",
   {
     ref,
@@ -3504,7 +4068,7 @@ var TableCell = React29.forwardRef(({ className, ...props }, ref) => /* @__PURE_
   }
 ));
 TableCell.displayName = "TableCell";
-var TableCaption = React29.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+var TableCaption = React31.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
   "caption",
   {
     ref,
@@ -3515,7 +4079,7 @@ var TableCaption = React29.forwardRef(({ className, ...props }, ref) => /* @__PU
 TableCaption.displayName = "TableCaption";
 
 // src/components/ui/data-table.tsx
-var import_jsx_runtime30 = require("react/jsx-runtime");
+var import_jsx_runtime32 = require("react/jsx-runtime");
 var filterOperatorsByType = {
   string: [
     { value: "contains", label: "Contains" },
@@ -3565,12 +4129,12 @@ function ColumnFilterPopover({
   children
 }) {
   const operators = filterOperatorsByType[filterType] ?? filterOperatorsByType.string;
-  const [operator, setOperator] = React30.useState(
+  const [operator, setOperator] = React32.useState(
     operators[0].value
   );
-  const [inputValue, setInputValue] = React30.useState("");
-  const [open, setOpen] = React30.useState(false);
-  React30.useEffect(() => {
+  const [inputValue, setInputValue] = React32.useState("");
+  const [open, setOpen] = React32.useState(false);
+  React32.useEffect(() => {
     if (open && filterValue && typeof filterValue === "object") {
       const fv = filterValue;
       if (fv.operator) setOperator(fv.operator);
@@ -3580,9 +4144,9 @@ function ColumnFilterPopover({
       setInputValue("");
     }
   }, [open, filterValue, operators]);
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(PopoverPrimitive2.Root, { open, onOpenChange: setOpen, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(PopoverPrimitive2.Trigger, { asChild: true, children }),
-    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(PopoverPrimitive2.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(PopoverPrimitive2.Root, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(PopoverPrimitive2.Trigger, { asChild: true, children }),
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(PopoverPrimitive2.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
       PopoverPrimitive2.Content,
       {
         align: "start",
@@ -3592,9 +4156,9 @@ function ColumnFilterPopover({
           "animate-in fade-in-0 zoom-in-95"
         ),
         onClick: (e) => e.stopPropagation(),
-        children: /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "flex flex-col gap-sm", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "text-xs font-medium text-table-head-text", children: "Filter" }),
-          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "flex flex-col gap-sm", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "text-xs font-medium text-table-head-text", children: "Filter" }),
+          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
             "select",
             {
               className: cn(
@@ -3604,10 +4168,10 @@ function ColumnFilterPopover({
               ),
               value: operator,
               onChange: (e) => setOperator(e.target.value),
-              children: operators.map((op) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("option", { value: op.value, children: op.label }, op.value))
+              children: operators.map((op) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("option", { value: op.value, children: op.label }, op.value))
             }
           ),
-          !noValueOperators.has(operator) && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+          !noValueOperators.has(operator) && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
             "input",
             {
               type: filterType === "number" ? "number" : filterType === "date" ? "date" : "text",
@@ -3627,8 +4191,8 @@ function ColumnFilterPopover({
               }
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "flex items-center justify-end gap-xs pt-xs", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "flex items-center justify-end gap-xs pt-xs", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
               Button,
               {
                 appearance: "ghost",
@@ -3641,7 +4205,7 @@ function ColumnFilterPopover({
                 children: "Clear"
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
               Button,
               {
                 appearance: "solid",
@@ -3674,7 +4238,7 @@ function DraggableHeaderCell({
   const leadingIcon = meta?.icon;
   const canDrag = isDragEnabled && meta?.enableDrag !== false;
   const filterType = meta?.filterType ?? "string";
-  const [isHovered, setIsHovered] = React30.useState(false);
+  const [isHovered, setIsHovered] = React32.useState(false);
   const {
     attributes,
     listeners,
@@ -3696,7 +4260,7 @@ function DraggableHeaderCell({
     opacity: isDragging ? 0.5 : 1,
     zIndex: isDragging ? 1 : void 0
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
     TableHead,
     {
       ref: setNodeRef,
@@ -3710,77 +4274,77 @@ function DraggableHeaderCell({
       onMouseEnter: () => setIsHovered(true),
       onMouseLeave: () => setIsHovered(false),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "flex items-center gap-xs", children: [
-          leadingIcon && (canDrag ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "flex items-center gap-xs", children: [
+          leadingIcon && (canDrag ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
             "div",
             {
               ...attributes,
               ...listeners,
               className: "shrink-0 flex items-center cursor-grab",
               onClick: (e) => e.stopPropagation(),
-              children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
-                import_icons19.Icon,
+              children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+                import_icons21.Icon,
                 {
-                  icon: isHovered ? import_icons19.faGripDotsVerticalSolid : leadingIcon,
+                  icon: isHovered ? import_icons21.faGripDotsVerticalSolid : leadingIcon,
                   size: "xs",
                   className: "text-table-head-icon"
                 }
               )
             }
-          ) : /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
-            import_icons19.Icon,
+          ) : /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+            import_icons21.Icon,
             {
               icon: leadingIcon,
               size: "xs",
               className: "shrink-0 text-table-head-icon"
             }
           )),
-          !leadingIcon && canDrag && isHovered && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+          !leadingIcon && canDrag && isHovered && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
             "div",
             {
               ...attributes,
               ...listeners,
               className: "shrink-0 flex items-center cursor-grab",
               onClick: (e) => e.stopPropagation(),
-              children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
-                import_icons19.Icon,
+              children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+                import_icons21.Icon,
                 {
-                  icon: import_icons19.faGripDotsVerticalSolid,
+                  icon: import_icons21.faGripDotsVerticalSolid,
                   size: "xs",
                   className: "text-table-head-icon"
                 }
               )
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "flex-1 truncate", children: header.isPlaceholder ? null : (0, import_react_table.flexRender)(
+          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "flex-1 truncate", children: header.isPlaceholder ? null : (0, import_react_table.flexRender)(
             header.column.columnDef.header,
             header.getContext()
           ) }),
-          canSort && (isSorted || isHovered) && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
-            import_icons19.Icon,
+          canSort && (isSorted || isHovered) && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+            import_icons21.Icon,
             {
-              icon: isSorted === "asc" ? import_icons19.faSortUpSolid : isSorted === "desc" ? import_icons19.faSortDownSolid : import_icons19.faSortSolid,
+              icon: isSorted === "asc" ? import_icons21.faSortUpSolid : isSorted === "desc" ? import_icons21.faSortDownSolid : import_icons21.faSortSolid,
               size: "xs",
               className: "shrink-0 text-table-head-icon"
             }
           ),
-          enableFiltering && (isFiltered || isHovered) && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+          enableFiltering && (isFiltered || isHovered) && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
             ColumnFilterPopover,
             {
               filterType,
               filterValue: header.column.getFilterValue(),
               onApply: (val) => header.column.setFilterValue(val),
               onClear: () => header.column.setFilterValue(void 0),
-              children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+              children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
                 "button",
                 {
                   type: "button",
                   onClick: (e) => e.stopPropagation(),
                   className: "shrink-0 p-0 border-0 bg-transparent cursor-pointer",
-                  children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
-                    import_icons19.Icon,
+                  children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+                    import_icons21.Icon,
                     {
-                      icon: isFiltered ? import_icons19.faFilterSolid : import_icons19.faFilterOutline,
+                      icon: isFiltered ? import_icons21.faFilterSolid : import_icons21.faFilterOutline,
                       size: "xs",
                       className: "text-table-head-icon"
                     }
@@ -3790,7 +4354,7 @@ function DraggableHeaderCell({
             }
           )
         ] }),
-        enableColumnResizing && header.column.getCanResize() && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+        enableColumnResizing && header.column.getCanResize() && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
           "div",
           {
             onMouseDown: header.getResizeHandler(),
@@ -3908,17 +4472,17 @@ function DataTableInner({
   emptyMessage = "No results.",
   bordered = false
 }) {
-  const [internalSorting, setInternalSorting] = React30.useState([]);
-  const [internalColumnFilters, setInternalColumnFilters] = React30.useState([]);
-  const [internalPagination, setInternalPagination] = React30.useState({ pageIndex: 0, pageSize: 10 });
-  const [internalRowSelection, setInternalRowSelection] = React30.useState({});
-  const [internalColumnVisibility, setInternalColumnVisibility] = React30.useState({});
-  const [internalColumnOrder, setInternalColumnOrder] = React30.useState([]);
-  const [internalColumnPinning, setInternalColumnPinning] = React30.useState({});
-  const [internalColumnSizing, setInternalColumnSizing] = React30.useState({});
+  const [internalSorting, setInternalSorting] = React32.useState([]);
+  const [internalColumnFilters, setInternalColumnFilters] = React32.useState([]);
+  const [internalPagination, setInternalPagination] = React32.useState({ pageIndex: 0, pageSize: 10 });
+  const [internalRowSelection, setInternalRowSelection] = React32.useState({});
+  const [internalColumnVisibility, setInternalColumnVisibility] = React32.useState({});
+  const [internalColumnOrder, setInternalColumnOrder] = React32.useState([]);
+  const [internalColumnPinning, setInternalColumnPinning] = React32.useState({});
+  const [internalColumnSizing, setInternalColumnSizing] = React32.useState({});
   const columnOrder = columnOrderProp ?? internalColumnOrder;
   const setColumnOrder = onColumnOrderChange ?? setInternalColumnOrder;
-  React30.useEffect(() => {
+  React32.useEffect(() => {
     if (enableColumnDrag && columnOrder.length === 0) {
       const ids = columns.map((c) => {
         if ("accessorKey" in c && c.accessorKey) return String(c.accessorKey);
@@ -4012,7 +4576,7 @@ function DataTableInner({
     }),
     (0, import_core.useSensor)(import_core.KeyboardSensor)
   );
-  const handleDragEnd = React30.useCallback(
+  const handleDragEnd = React32.useCallback(
     (event) => {
       const { active, over } = event;
       if (!over || active.id === over.id) return;
@@ -4026,12 +4590,12 @@ function DataTableInner({
     },
     [table, setColumnOrder]
   );
-  const columnIds = React30.useMemo(
+  const columnIds = React32.useMemo(
     () => table.getAllLeafColumns().map((c) => c.id),
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [table.getAllLeafColumns().length, columnOrder]
   );
-  const columnSizeVars = React30.useMemo(() => {
+  const columnSizeVars = React32.useMemo(() => {
     if (!enableColumnResizing) return {};
     const headers = table.getFlatHeaders();
     const vars = {};
@@ -4042,23 +4606,23 @@ function DataTableInner({
     return vars;
   }, [enableColumnResizing, table.getState().columnSizing]);
   const totalSize = enableColumnResizing ? table.getTotalSize() : void 0;
-  const tableContent = /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: cn("w-full", className), style: columnSizeVars, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
+  const tableContent = /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: cn("w-full", className), style: columnSizeVars, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
       Table,
       {
         style: totalSize ? { width: totalSize, tableLayout: "fixed" } : void 0,
         className: totalSize ? "w-auto" : void 0,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
             TableHeader,
             {
               className: cn(bordered && "border-t border-table-border"),
-              children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(TableRow, { children: enableColumnDrag ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+              children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(TableRow, { children: enableColumnDrag ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
                 import_sortable.SortableContext,
                 {
                   items: columnIds,
                   strategy: import_sortable.horizontalListSortingStrategy,
-                  children: headerGroup.headers.map((header) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+                  children: headerGroup.headers.map((header) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
                     DraggableHeaderCell,
                     {
                       header,
@@ -4070,7 +4634,7 @@ function DataTableInner({
                     header.id
                   ))
                 }
-              ) : headerGroup.headers.map((header) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+              ) : headerGroup.headers.map((header) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
                 DraggableHeaderCell,
                 {
                   header,
@@ -4083,11 +4647,11 @@ function DataTableInner({
               )) }, headerGroup.id))
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(TableBody, { children: table.getRowModel().rows?.length ? table.getRowModel().rows.map((row) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(TableBody, { children: table.getRowModel().rows?.length ? table.getRowModel().rows.map((row) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
             TableRow,
             {
               "data-state": row.getIsSelected() ? "selected" : void 0,
-              children: row.getVisibleCells().map((cell) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+              children: row.getVisibleCells().map((cell) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
                 TableCell,
                 {
                   style: enableColumnResizing ? { width: `var(--col-${cell.column.id}-size)` } : void 0,
@@ -4101,12 +4665,12 @@ function DataTableInner({
               ))
             },
             row.id
-          )) : /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(TableRow, { className: "hover:bg-transparent", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+          )) : /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(TableRow, { className: "hover:bg-transparent", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
             TableCell,
             {
               colSpan: columns.length,
               className: "h-48 text-center border-b-0",
-              children: emptyState ?? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "text-sm text-table-cell-text-secondary", children: emptyMessage })
+              children: emptyState ?? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "text-sm text-table-cell-text-secondary", children: emptyMessage })
             }
           ) }) })
         ]
@@ -4115,7 +4679,7 @@ function DataTableInner({
     children?.(table)
   ] });
   if (enableColumnDrag) {
-    return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
       import_core.DndContext,
       {
         sensors,
@@ -4136,7 +4700,7 @@ function DataTablePagination({
   const totalCount = table.getFilteredRowModel().rows.length;
   const pageIndex = table.getState().pagination.pageIndex;
   const pageCount = table.getPageCount();
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
     "div",
     {
       className: cn(
@@ -4144,16 +4708,16 @@ function DataTablePagination({
         className
       ),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "text-xs text-table-cell-text-secondary", children: selectedCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("span", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "text-xs text-table-cell-text-secondary", children: selectedCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("span", { children: [
           selectedCount,
           " of ",
           totalCount,
           " row(s) selected"
         ] }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "flex items-center gap-lg", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "flex items-center gap-sm", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "text-xs text-table-cell-text-secondary whitespace-nowrap", children: "Rows per page" }),
-            /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "flex items-center gap-lg", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "flex items-center gap-sm", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "text-xs text-table-cell-text-secondary whitespace-nowrap", children: "Rows per page" }),
+            /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
               "select",
               {
                 className: cn(
@@ -4163,36 +4727,36 @@ function DataTablePagination({
                 ),
                 value: table.getState().pagination.pageSize,
                 onChange: (e) => table.setPageSize(Number(e.target.value)),
-                children: pageSizeOptions.map((size) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("option", { value: size, children: size }, size))
+                children: pageSizeOptions.map((size) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("option", { value: size, children: size }, size))
               }
             )
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("span", { className: "text-xs text-table-cell-text-secondary whitespace-nowrap", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("span", { className: "text-xs text-table-cell-text-secondary whitespace-nowrap", children: [
             "Page ",
             pageIndex + 1,
             " of ",
             pageCount
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "flex items-center gap-xs", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "flex items-center gap-xs", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
               Button,
               {
                 appearance: "outlined",
                 intent: "brand",
                 size: "md",
-                leftIcon: import_icons19.faChevronLeftOutline,
+                leftIcon: import_icons21.faChevronLeftOutline,
                 onClick: () => table.previousPage(),
                 disabled: !table.getCanPreviousPage(),
                 "aria-label": "Previous page"
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
               Button,
               {
                 appearance: "outlined",
                 intent: "brand",
                 size: "md",
-                leftIcon: import_icons19.faChevronRightOutline,
+                leftIcon: import_icons21.faChevronRightOutline,
                 onClick: () => table.nextPage(),
                 disabled: !table.getCanNextPage(),
                 "aria-label": "Next page"
@@ -4208,15 +4772,15 @@ var DataTable = Object.assign(DataTableInner, { displayName: "DataTable" });
 Object.assign(DataTablePagination, { displayName: "DataTablePagination" });
 
 // src/components/ui/side-panel.tsx
-var React31 = __toESM(require("react"));
+var React33 = __toESM(require("react"));
 var DialogPrimitive2 = __toESM(require("@radix-ui/react-dialog"));
-var import_jsx_runtime31 = require("react/jsx-runtime");
+var import_jsx_runtime33 = require("react/jsx-runtime");
 var SidePanel = DialogPrimitive2.Root;
 var SidePanelTrigger = DialogPrimitive2.Trigger;
 var SidePanelClose = DialogPrimitive2.Close;
-var SidePanelContent = React31.forwardRef(({ className, overlay = true, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(DialogPrimitive2.Portal, { children: [
-  overlay && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(ModalOverlay, {}),
-  /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+var SidePanelContent = React33.forwardRef(({ className, overlay = true, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(DialogPrimitive2.Portal, { children: [
+  overlay && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(ModalOverlay, {}),
+  /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
     DialogPrimitive2.Content,
     {
       ref,
@@ -4245,6 +4809,7 @@ SidePanelContent.displayName = "SidePanelContent";
   Button,
   ButtonCell,
   Checkbox,
+  ChipInput,
   DataTable,
   DataTablePagination,
   DateCell,
@@ -4276,6 +4841,7 @@ SidePanelContent.displayName = "SidePanelContent";
   ModalTitle,
   ModalTrigger,
   NumberCell,
+  NumberInput,
   ProductLogo,
   RowActions,
   SearchBar,
@@ -4322,6 +4888,7 @@ SidePanelContent.displayName = "SidePanelContent";
   avatarVariants,
   badgeVariants,
   buttonVariants,
+  chipInputVariants,
   cn,
   emptyStateVariants,
   flexRender,