@l3mpire/ui 2.5.3 → 2.6.0

package/dist/index.mjs

@@ -701,7 +701,7 @@ var TooltipContent = React4.forwardRef(({ className, type, hasArrow = true, side
       hasArrow && /* @__PURE__ */ jsx4(
         TooltipPrimitive.Arrow,
         {
-          className: type === "invert" ? "fill-tooltip-invert-bg" : "fill-tooltip-default-bg"
+          className: type === "default" ? "fill-tooltip-default-bg" : "fill-tooltip-invert-bg"
         }
       )
     ]
@@ -1818,40 +1818,57 @@ var DropdownMenuItem = React15.forwardRef(
     action,
     isActive,
     children,
+    onClick,
     ...props
-  }, ref) => /* @__PURE__ */ jsxs14(
-    "div",
-    {
-      ref,
-      role: "option",
-      "aria-selected": isActive,
-      className: cn(
-        itemStyle,
-        isActive && "bg-dropdown-item-hover",
-        className
-      ),
-      ...props,
-      children: [
-        children,
-        avatar,
-        flag,
-        icon && /* @__PURE__ */ jsx15(
-          Icon11,
-          {
-            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__ */ jsxs14(
+      "div",
+      {
+        ref,
+        role: "option",
+        "aria-selected": isActive,
+        className: cn(
+          itemStyle,
+          isActive && "bg-dropdown-item-hover",
+          className
         ),
-        /* @__PURE__ */ jsxs14("div", { className: "flex flex-1 items-center gap-sm min-w-0", children: [
-          /* @__PURE__ */ jsx15("span", { className: cn("truncate shrink-0", textSm, "text-dropdown-item-text"), children: label }),
-          description && /* @__PURE__ */ jsx15("span", { className: cn("truncate", textXs, "text-dropdown-item-secondary"), children: description })
-        ] }),
-        badge,
-        action
-      ]
-    }
-  )
+        onClick: handleClick,
+        ...props,
+        children: [
+          children,
+          avatar,
+          flag,
+          icon && /* @__PURE__ */ jsx15(
+            Icon11,
+            {
+              icon,
+              size: "sm",
+              className: "shrink-0 text-dropdown-item-icon"
+            }
+          ),
+          /* @__PURE__ */ jsxs14("div", { className: "flex flex-1 items-center gap-sm min-w-0", children: [
+            /* @__PURE__ */ jsx15("span", { className: cn("truncate shrink-0", textSm, "text-dropdown-item-text"), children: label }),
+            description && /* @__PURE__ */ jsx15("span", { className: cn("truncate", textXs, "text-dropdown-item-secondary"), children: description })
+          ] }),
+          badge,
+          action
+        ]
+      }
+    );
+  }
 );
 DropdownMenuItem.displayName = "DropdownMenuItem";
 var DropdownMenuRadixItem = React15.forwardRef(
@@ -1919,7 +1936,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"
@@ -2070,12 +2087,14 @@ SidebarItem.displayName = "SidebarItem";
 // src/components/ui/select.tsx
 import * as React18 from "react";
 import * as PopoverPrimitive from "@radix-ui/react-popover";
+import * as TooltipPrimitive2 from "@radix-ui/react-tooltip";
 import { cva as cva11 } from "class-variance-authority";
 import {
   Icon as Icon13,
   faChevronDownSolid as faChevronDownSolid3,
   faChevronUpSolid,
-  faCircleExclamationOutline
+  faCircleExclamationOutline,
+  faXmarkSolid as faXmarkSolid4
 } from "@l3mpire/icons";
 import { jsx as jsx18, jsxs as jsxs16 } from "react/jsx-runtime";
 var selectVariants = cva11(
@@ -2090,13 +2109,15 @@ var selectVariants = cva11(
   {
     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",
@@ -2133,6 +2154,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__ */ jsxs16("div", { className: "flex flex-1 items-center gap-xs min-w-0 overflow-hidden relative", children: [
+    /* @__PURE__ */ jsx18(
+      "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__ */ jsxs16("span", { className: chipClass, style: { height: chipHeightPx }, children: [
+          /* @__PURE__ */ jsx18("span", { className: "truncate max-w-[100px]", children: tag }),
+          onTagRemove && /* @__PURE__ */ jsx18("span", { className: "inline-flex shrink-0 w-3 h-3" })
+        ] }, tag))
+      }
+    ),
+    /* @__PURE__ */ jsxs16("div", { ref: containerRef, className: "flex flex-1 items-center gap-xs overflow-hidden", children: [
+      tags.slice(0, visibleCount).map((tag) => /* @__PURE__ */ jsxs16(
+        "span",
+        {
+          className: chipClass,
+          style: { height: chipHeightPx },
+          children: [
+            /* @__PURE__ */ jsx18("span", { className: "truncate max-w-[100px]", children: tag }),
+            onTagRemove && /* @__PURE__ */ jsx18(
+              "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__ */ jsx18(Icon13, { icon: faXmarkSolid4, size: "xs" })
+              }
+            )
+          ]
+        },
+        tag
+      )),
+      overflowCount > 0 && /* @__PURE__ */ jsx18(TooltipPrimitive2.Provider, { children: /* @__PURE__ */ jsxs16(TooltipPrimitive2.Root, { children: [
+        /* @__PURE__ */ jsx18(TooltipPrimitive2.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs16(
+          "span",
+          {
+            className: cn(chipClass, "cursor-default"),
+            style: { height: chipHeightPx },
+            children: [
+              "+",
+              overflowCount
+            ]
+          }
+        ) }),
+        /* @__PURE__ */ jsx18(TooltipPrimitive2.Portal, { children: /* @__PURE__ */ jsxs16(
+          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__ */ jsx18("span", { children: t }, t)),
+              /* @__PURE__ */ jsx18(TooltipPrimitive2.Arrow, { className: "fill-tooltip-default-bg" })
+            ]
+          }
+        ) })
+      ] }) })
+    ] })
+  ] });
+}
 var Select = React18.forwardRef(
   ({
     className,
@@ -2142,6 +2283,8 @@ var Select = React18.forwardRef(
     placeholder = "Select...",
     value,
     multiCount,
+    tags,
+    onTagRemove,
     icon,
     avatar,
     flag,
@@ -2163,10 +2306,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__ */ jsxs16(
       PopoverPrimitive.Root,
       {
@@ -2184,10 +2330,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,
@@ -2195,7 +2344,14 @@ var Select = React18.forwardRef(
                   avatar,
                   flag,
                   icon && /* @__PURE__ */ jsx18(Icon13, { icon, size: "sm", className: cn("shrink-0", icColor) }),
-                  /* @__PURE__ */ jsx18(
+                  tags && tags.length > 0 ? /* @__PURE__ */ jsx18(
+                    SelectChips,
+                    {
+                      tags,
+                      onTagRemove,
+                      chipHeightPx: chipHeight[resolvedSize]
+                    }
+                  ) : /* @__PURE__ */ jsx18(
                     "span",
                     {
                       className: cn(
@@ -2205,7 +2361,7 @@ var Select = React18.forwardRef(
                       children: hasValue ? value : placeholder
                     }
                   ),
-                  multiCount != null && multiCount > 0 && /* @__PURE__ */ jsxs16("span", { className: "shrink-0 text-xs leading-normal text-select-text-multi", children: [
+                  !hasTags && multiCount != null && multiCount > 0 && /* @__PURE__ */ jsxs16("span", { className: "shrink-0 text-xs leading-normal text-select-text-multi", children: [
                     "+",
                     multiCount,
                     " others"
@@ -2318,7 +2474,7 @@ TabContent.displayName = "TabContent";
 // src/components/ui/tag.tsx
 import * as React20 from "react";
 import { cva as cva12 } from "class-variance-authority";
-import { Icon as Icon14, faXmarkSolid as faXmarkSolid4 } from "@l3mpire/icons";
+import { Icon as Icon14, faXmarkSolid as faXmarkSolid5 } from "@l3mpire/icons";
 import { jsx as jsx20, jsxs as jsxs18 } from "react/jsx-runtime";
 var tagVariants = cva12(
   [
@@ -2384,7 +2540,7 @@ var Tag = React20.forwardRef(
                 size === "md" && "p-sm rounded-md"
               ),
               "aria-label": "Remove",
-              children: /* @__PURE__ */ jsx20(Icon14, { icon: faXmarkSolid4, size: iconSize })
+              children: /* @__PURE__ */ jsx20(Icon14, { icon: faXmarkSolid5, size: iconSize })
             }
           )
         ]
@@ -2678,12 +2834,427 @@ var TextInput = React22.forwardRef(
 );
 TextInput.displayName = "TextInput";
 
-// src/components/ui/typography.tsx
+// src/components/ui/chip-input.tsx
 import * as React23 from "react";
 import { cva as cva14 } from "class-variance-authority";
+import {
+  Icon as Icon17,
+  faCircleExclamationOutline as faCircleExclamationOutline4,
+  faXmarkSolid as faXmarkSolid6
+} from "@l3mpire/icons";
+import { jsx as jsx23, jsxs as jsxs21 } from "react/jsx-runtime";
+var chipInputVariants = cva14(
+  [
+    "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__ */ jsxs21("div", { className: "flex flex-col gap-xs", children: [
+      label && /* @__PURE__ */ jsx23(InputLabel, { type: labelType, disabled, children: label }),
+      /* @__PURE__ */ jsxs21(
+        "div",
+        {
+          ref,
+          role: "textbox",
+          "aria-disabled": disabled || void 0,
+          className: cn(
+            chipInputVariants({ size }),
+            wrapperStates2[state],
+            "cursor-text",
+            className
+          ),
+          onClick: handleWrapperClick,
+          ...props,
+          children: [
+            iconLeft && /* @__PURE__ */ jsx23(
+              Icon17,
+              {
+                icon: iconLeft,
+                size: "sm",
+                className: cn(
+                  "shrink-0",
+                  disabled ? "text-text-input-text-disabled" : "text-text-input-icon"
+                )
+              }
+            ),
+            values.map((val) => /* @__PURE__ */ jsxs21("span", { className: cn(chipStyle), children: [
+              /* @__PURE__ */ jsx23("span", { className: "truncate max-w-[150px]", children: val }),
+              !disabled && /* @__PURE__ */ jsx23(
+                "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__ */ jsx23(Icon17, { icon: faXmarkSolid6, size: "xs" })
+                }
+              )
+            ] }, val)),
+            /* @__PURE__ */ jsx23(
+              "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__ */ jsxs21("div", { className: "flex items-center gap-xs", children: [
+        /* @__PURE__ */ jsx23(Icon17, { icon: faCircleExclamationOutline4, size: "xs", className: errorGuidance4.icon }),
+        /* @__PURE__ */ jsx23("span", { id: errorId, className: errorGuidance4.text, children: errorMessage })
+      ] })
+    ] });
+  }
+);
+ChipInput.displayName = "ChipInput";
+
+// src/components/ui/number-input.tsx
+import * as React24 from "react";
+import { cva as cva15 } from "class-variance-authority";
+import {
+  Icon as Icon18,
+  faMinusOutline,
+  faPlusOutline,
+  faCircleExclamationOutline as faCircleExclamationOutline5
+} from "@l3mpire/icons";
+import { jsx as jsx24, jsxs as jsxs22 } from "react/jsx-runtime";
+var stepperButtonVariants = cva15(
+  [
+    "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 = cva15(
+  [
+    "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__ */ jsxs22("div", { className: cn("flex flex-col gap-xs", className), children: [
+      label && /* @__PURE__ */ jsx24(InputLabel, { type: labelType, disabled, children: label }),
+      /* @__PURE__ */ jsxs22(
+        "div",
+        {
+          className: cn(
+            "inline-flex w-fit rounded-md shadow-sm",
+            wrapperStates3[state]
+          ),
+          children: [
+            /* @__PURE__ */ jsx24(
+              "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__ */ jsx24(
+                  Icon18,
+                  {
+                    icon: faMinusOutline,
+                    size: "sm",
+                    className: cn(
+                      disabled || atMin ? "text-text-input-text-disabled" : "text-text-input-text-default"
+                    )
+                  }
+                )
+              }
+            ),
+            /* @__PURE__ */ jsx24(
+              "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__ */ jsx24(
+              "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__ */ jsx24(
+                  Icon18,
+                  {
+                    icon: faPlusOutline,
+                    size: "sm",
+                    className: cn(
+                      disabled || atMax ? "text-text-input-text-disabled" : "text-text-input-text-default"
+                    )
+                  }
+                )
+              }
+            )
+          ]
+        }
+      ),
+      error && errorMessage && /* @__PURE__ */ jsxs22("div", { className: "flex items-center gap-xs", children: [
+        /* @__PURE__ */ jsx24(Icon18, { icon: faCircleExclamationOutline5, size: "xs", className: errorGuidance5.icon }),
+        /* @__PURE__ */ jsx24("span", { id: errorId, className: errorGuidance5.text, children: errorMessage })
+      ] })
+    ] });
+  }
+);
+NumberInput.displayName = "NumberInput";
+
+// src/components/ui/typography.tsx
+import * as React25 from "react";
+import { cva as cva16 } from "class-variance-authority";
 import { Slot as Slot3 } from "@radix-ui/react-slot";
-import { jsx as jsx23 } from "react/jsx-runtime";
-var typographyVariants = cva14("", {
+import { jsx as jsx25 } from "react/jsx-runtime";
+var typographyVariants = cva16("", {
   variants: {
     variant: {
       h1: "text-xl leading-lg",
@@ -2714,10 +3285,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 ? Slot3 : as ?? defaultElementMap[variant ?? "md"] ?? "p";
-    return /* @__PURE__ */ jsx23(
+    return /* @__PURE__ */ jsx25(
       Comp,
       {
         ref,
@@ -2730,10 +3301,10 @@ var Typography = React23.forwardRef(
 Typography.displayName = "Typography";
 
 // src/components/ui/user-menu.tsx
-import * as React24 from "react";
-import { jsx as jsx24, jsxs as jsxs21 } from "react/jsx-runtime";
-var UserMenu = React24.forwardRef(
-  ({ className, children, ...props }, ref) => /* @__PURE__ */ jsx24(
+import * as React26 from "react";
+import { jsx as jsx26, jsxs as jsxs23 } from "react/jsx-runtime";
+var UserMenu = React26.forwardRef(
+  ({ className, children, ...props }, ref) => /* @__PURE__ */ jsx26(
     "div",
     {
       ref,
@@ -2752,8 +3323,8 @@ var UserMenu = React24.forwardRef(
   )
 );
 UserMenu.displayName = "UserMenu";
-var UserMenuInfoRow = React24.forwardRef(
-  ({ className, avatar, name, subtitle, action, ...props }, ref) => /* @__PURE__ */ jsxs21(
+var UserMenuInfoRow = React26.forwardRef(
+  ({ className, avatar, name, subtitle, action, ...props }, ref) => /* @__PURE__ */ jsxs23(
     "div",
     {
       ref,
@@ -2761,9 +3332,9 @@ var UserMenuInfoRow = React24.forwardRef(
       ...props,
       children: [
         avatar,
-        /* @__PURE__ */ jsxs21("div", { className: "flex flex-1 flex-col min-w-0", children: [
-          /* @__PURE__ */ jsx24("span", { className: "text-sm font-medium leading-sm text-user-menu-name truncate", children: name }),
-          subtitle && /* @__PURE__ */ jsx24("span", { className: "text-xs font-regular leading-xs text-user-menu-subtitle truncate", children: subtitle })
+        /* @__PURE__ */ jsxs23("div", { className: "flex flex-1 flex-col min-w-0", children: [
+          /* @__PURE__ */ jsx26("span", { className: "text-sm font-medium leading-sm text-user-menu-name truncate", children: name }),
+          subtitle && /* @__PURE__ */ jsx26("span", { className: "text-xs font-regular leading-xs text-user-menu-subtitle truncate", children: subtitle })
         ] }),
         action
       ]
@@ -2771,8 +3342,8 @@ var UserMenuInfoRow = React24.forwardRef(
   )
 );
 UserMenuInfoRow.displayName = "UserMenuInfoRow";
-var UserMenuSection = React24.forwardRef(
-  ({ className, children, ...props }, ref) => /* @__PURE__ */ jsx24(
+var UserMenuSection = React26.forwardRef(
+  ({ className, children, ...props }, ref) => /* @__PURE__ */ jsx26(
     "div",
     {
       ref,
@@ -2785,12 +3356,12 @@ var UserMenuSection = React24.forwardRef(
 UserMenuSection.displayName = "UserMenuSection";
 
 // src/components/ui/modal.tsx
-import * as React25 from "react";
+import * as React27 from "react";
 import * as DialogPrimitive from "@radix-ui/react-dialog";
-import { cva as cva15 } from "class-variance-authority";
-import { Icon as Icon17, faXmarkSolid as faXmarkSolid5, faCircleInfoSolid as faCircleInfoSolid4 } from "@l3mpire/icons";
-import { jsx as jsx25, jsxs as jsxs22 } from "react/jsx-runtime";
-var modalVariants = cva15(
+import { cva as cva17 } from "class-variance-authority";
+import { Icon as Icon19, faXmarkSolid as faXmarkSolid7, faCircleInfoSolid as faCircleInfoSolid4 } from "@l3mpire/icons";
+import { jsx as jsx27, jsxs as jsxs24 } from "react/jsx-runtime";
+var modalVariants = cva17(
   [
     "fixed top-[50%] left-[50%] -translate-x-1/2 -translate-y-1/2 z-50",
     "flex flex-col",
@@ -2813,7 +3384,7 @@ var modalVariants = cva15(
 var Modal = DialogPrimitive.Root;
 var ModalTrigger = DialogPrimitive.Trigger;
 var ModalClose = DialogPrimitive.Close;
-var ModalOverlay = React25.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx25(
+var ModalOverlay = React27.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx27(
   DialogPrimitive.Overlay,
   {
     ref,
@@ -2826,9 +3397,9 @@ var ModalOverlay = React25.forwardRef(({ className, ...props }, ref) => /* @__PU
   }
 ));
 ModalOverlay.displayName = "ModalOverlay";
-var ModalContent = React25.forwardRef(({ className, size, children, ...props }, ref) => /* @__PURE__ */ jsxs22(DialogPrimitive.Portal, { children: [
-  /* @__PURE__ */ jsx25(ModalOverlay, {}),
-  /* @__PURE__ */ jsx25(
+var ModalContent = React27.forwardRef(({ className, size, children, ...props }, ref) => /* @__PURE__ */ jsxs24(DialogPrimitive.Portal, { children: [
+  /* @__PURE__ */ jsx27(ModalOverlay, {}),
+  /* @__PURE__ */ jsx27(
     DialogPrimitive.Content,
     {
       ref,
@@ -2839,8 +3410,8 @@ var ModalContent = React25.forwardRef(({ className, size, children, ...props },
   )
 ] }));
 ModalContent.displayName = "ModalContent";
-var ModalHeader = React25.forwardRef(
-  ({ className, showBorder = true, onClose, children, ...props }, ref) => /* @__PURE__ */ jsxs22(
+var ModalHeader = React27.forwardRef(
+  ({ className, showBorder = true, onClose, children, ...props }, ref) => /* @__PURE__ */ jsxs24(
     "div",
     {
       ref,
@@ -2851,15 +3422,15 @@ var ModalHeader = React25.forwardRef(
       ),
       ...props,
       children: [
-        /* @__PURE__ */ jsx25("div", { className: "flex flex-1 flex-col gap-2xs", children }),
-        onClose && /* @__PURE__ */ jsx25(DialogPrimitive.Close, { asChild: true, children: /* @__PURE__ */ jsx25(
+        /* @__PURE__ */ jsx27("div", { className: "flex flex-1 flex-col gap-2xs", children }),
+        onClose && /* @__PURE__ */ jsx27(DialogPrimitive.Close, { asChild: true, children: /* @__PURE__ */ jsx27(
           "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__ */ jsx25(Icon17, { icon: faXmarkSolid5, size: "sm" })
+            children: /* @__PURE__ */ jsx27(Icon19, { icon: faXmarkSolid7, size: "sm" })
           }
         ) })
       ]
@@ -2867,7 +3438,7 @@ var ModalHeader = React25.forwardRef(
   )
 );
 ModalHeader.displayName = "ModalHeader";
-var ModalTitle = React25.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx25(
+var ModalTitle = React27.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx27(
   DialogPrimitive.Title,
   {
     ref,
@@ -2876,7 +3447,7 @@ var ModalTitle = React25.forwardRef(({ className, ...props }, ref) => /* @__PURE
   }
 ));
 ModalTitle.displayName = "ModalTitle";
-var ModalDescription = React25.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx25(
+var ModalDescription = React27.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx27(
   DialogPrimitive.Description,
   {
     ref,
@@ -2885,7 +3456,7 @@ var ModalDescription = React25.forwardRef(({ className, ...props }, ref) => /* @
   }
 ));
 ModalDescription.displayName = "ModalDescription";
-var ModalBody = React25.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx25(
+var ModalBody = React27.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx27(
   "div",
   {
     ref,
@@ -2894,8 +3465,8 @@ var ModalBody = React25.forwardRef(({ className, ...props }, ref) => /* @__PURE_
   }
 ));
 ModalBody.displayName = "ModalBody";
-var ModalFooter = React25.forwardRef(
-  ({ className, showBorder = true, infoMessage, children, ...props }, ref) => /* @__PURE__ */ jsxs22(
+var ModalFooter = React27.forwardRef(
+  ({ className, showBorder = true, infoMessage, children, ...props }, ref) => /* @__PURE__ */ jsxs24(
     "div",
     {
       ref,
@@ -2906,9 +3477,9 @@ var ModalFooter = React25.forwardRef(
       ),
       ...props,
       children: [
-        infoMessage && /* @__PURE__ */ jsxs22("div", { className: "flex flex-1 items-center gap-base", children: [
-          /* @__PURE__ */ jsx25(Icon17, { icon: faCircleInfoSolid4, size: "sm", className: "shrink-0 text-modal-footer-icon" }),
-          /* @__PURE__ */ jsx25("span", { className: "text-sm font-regular leading-sm text-modal-footer-text", children: infoMessage })
+        infoMessage && /* @__PURE__ */ jsxs24("div", { className: "flex flex-1 items-center gap-base", children: [
+          /* @__PURE__ */ jsx27(Icon19, { icon: faCircleInfoSolid4, size: "sm", className: "shrink-0 text-modal-footer-icon" }),
+          /* @__PURE__ */ jsx27("span", { className: "text-sm font-regular leading-sm text-modal-footer-text", children: infoMessage })
         ] }),
         children
       ]
@@ -2918,9 +3489,9 @@ var ModalFooter = React25.forwardRef(
 ModalFooter.displayName = "ModalFooter";
 
 // src/components/ui/dialog.tsx
-import * as React26 from "react";
-import { jsx as jsx26, jsxs as jsxs23 } from "react/jsx-runtime";
-var Dialog = React26.forwardRef(
+import * as React28 from "react";
+import { jsx as jsx28, jsxs as jsxs25 } from "react/jsx-runtime";
+var Dialog = React28.forwardRef(
   ({
     open,
     onOpenChange,
@@ -2937,16 +3508,16 @@ var Dialog = React26.forwardRef(
     className
   }, ref) => {
     const handleCancel = onCancel ?? (() => onOpenChange?.(false));
-    return /* @__PURE__ */ jsx26(Modal, { open, onOpenChange, children: /* @__PURE__ */ jsxs23(ModalContent, { size: "sm", ref, className, children: [
-      /* @__PURE__ */ jsxs23(ModalHeader, { showBorder: false, onClose: handleCancel, children: [
-        /* @__PURE__ */ jsx26(ModalTitle, { children: title }),
-        description && /* @__PURE__ */ jsx26(ModalDescription, { children: description })
+    return /* @__PURE__ */ jsx28(Modal, { open, onOpenChange, children: /* @__PURE__ */ jsxs25(ModalContent, { size: "sm", ref, className, children: [
+      /* @__PURE__ */ jsxs25(ModalHeader, { showBorder: false, onClose: handleCancel, children: [
+        /* @__PURE__ */ jsx28(ModalTitle, { children: title }),
+        description && /* @__PURE__ */ jsx28(ModalDescription, { children: description })
       ] }),
-      /* @__PURE__ */ jsxs23(ModalFooter, { children: [
-        /* @__PURE__ */ jsx26(ModalClose, { asChild: true, children: /* @__PURE__ */ jsx26(Button, { appearance: "ghost", intent: "brand", size: "md", onClick: handleCancel, children: cancelLabel }) }),
-        /* @__PURE__ */ jsxs23("div", { className: "flex items-center gap-md", children: [
-          secondaryLabel && /* @__PURE__ */ jsx26(Button, { appearance: "outlined", intent: "brand", size: "md", onClick: onSecondaryAction, children: secondaryLabel }),
-          /* @__PURE__ */ jsx26(
+      /* @__PURE__ */ jsxs25(ModalFooter, { children: [
+        /* @__PURE__ */ jsx28(ModalClose, { asChild: true, children: /* @__PURE__ */ jsx28(Button, { appearance: "ghost", intent: "brand", size: "md", onClick: handleCancel, children: cancelLabel }) }),
+        /* @__PURE__ */ jsxs25("div", { className: "flex items-center gap-md", children: [
+          secondaryLabel && /* @__PURE__ */ jsx28(Button, { appearance: "outlined", intent: "brand", size: "md", onClick: onSecondaryAction, children: secondaryLabel }),
+          /* @__PURE__ */ jsx28(
             Button,
             {
               appearance: "solid",
@@ -2965,11 +3536,11 @@ var Dialog = React26.forwardRef(
 Dialog.displayName = "Dialog";
 
 // src/components/ui/empty-state.tsx
-import * as React27 from "react";
-import { cva as cva16 } from "class-variance-authority";
-import { Icon as Icon18 } from "@l3mpire/icons";
-import { jsx as jsx27, jsxs as jsxs24 } from "react/jsx-runtime";
-var emptyStateVariants = cva16(
+import * as React29 from "react";
+import { cva as cva18 } from "class-variance-authority";
+import { Icon as Icon20 } from "@l3mpire/icons";
+import { jsx as jsx29, jsxs as jsxs26 } from "react/jsx-runtime";
+var emptyStateVariants = cva18(
   "flex flex-col items-center text-center",
   {
     variants: {
@@ -2983,7 +3554,7 @@ var emptyStateVariants = cva16(
     }
   }
 );
-var iconContainerVariants2 = cva16(
+var iconContainerVariants2 = cva18(
   [
     "flex items-center justify-center shrink-0",
     "bg-table-bg border border-table-border",
@@ -3001,7 +3572,7 @@ var iconContainerVariants2 = cva16(
     }
   }
 );
-var EmptyState = React27.forwardRef(
+var EmptyState = React29.forwardRef(
   ({
     className,
     size = "md",
@@ -3013,23 +3584,23 @@ var EmptyState = React27.forwardRef(
     ...props
   }, ref) => {
     const isMd = size === "md";
-    return /* @__PURE__ */ jsxs24(
+    return /* @__PURE__ */ jsxs26(
       "div",
       {
         ref,
         className: cn(emptyStateVariants({ size }), className),
         ...props,
         children: [
-          icon && /* @__PURE__ */ jsx27("div", { className: iconContainerVariants2({ size }), children: /* @__PURE__ */ jsx27(
-            Icon18,
+          icon && /* @__PURE__ */ jsx29("div", { className: iconContainerVariants2({ size }), children: /* @__PURE__ */ jsx29(
+            Icon20,
             {
               icon,
               size: isMd ? "md" : "sm",
               className: "text-table-cell-text-secondary"
             }
           ) }),
-          /* @__PURE__ */ jsxs24("div", { className: "flex flex-col gap-xs w-full", children: [
-            /* @__PURE__ */ jsx27(
+          /* @__PURE__ */ jsxs26("div", { className: "flex flex-col gap-xs w-full", children: [
+            /* @__PURE__ */ jsx29(
               "p",
               {
                 className: cn(
@@ -3039,7 +3610,7 @@ var EmptyState = React27.forwardRef(
                 children: title
               }
             ),
-            description && /* @__PURE__ */ jsx27(
+            description && /* @__PURE__ */ jsx29(
               "p",
               {
                 className: cn(
@@ -3050,7 +3621,7 @@ var EmptyState = React27.forwardRef(
               }
             )
           ] }),
-          (primaryAction || secondaryAction) && /* @__PURE__ */ jsxs24(
+          (primaryAction || secondaryAction) && /* @__PURE__ */ jsxs26(
             "div",
             {
               className: cn(
@@ -3058,7 +3629,7 @@ var EmptyState = React27.forwardRef(
                 isMd ? "gap-lg" : "gap-base"
               ),
               children: [
-                secondaryAction && /* @__PURE__ */ jsx27(
+                secondaryAction && /* @__PURE__ */ jsx29(
                   Button,
                   {
                     appearance: "outlined",
@@ -3068,7 +3639,7 @@ var EmptyState = React27.forwardRef(
                     children: secondaryAction.label
                   }
                 ),
-                primaryAction && /* @__PURE__ */ jsx27(
+                primaryAction && /* @__PURE__ */ jsx29(
                   Button,
                   {
                     appearance: "solid",
@@ -3089,8 +3660,8 @@ var EmptyState = React27.forwardRef(
 EmptyState.displayName = "EmptyState";
 
 // src/components/ui/table-cells.tsx
-import * as React28 from "react";
-import { jsx as jsx28, jsxs as jsxs25 } from "react/jsx-runtime";
+import * as React30 from "react";
+import { jsx as jsx30, jsxs as jsxs27 } from "react/jsx-runtime";
 function getInitials(name) {
   return name.split(" ").map((part) => part[0]).filter(Boolean).slice(0, 2).join("").toUpperCase();
 }
@@ -3099,11 +3670,11 @@ var AvatarCell = ({
   subtitle,
   src,
   className
-}) => /* @__PURE__ */ jsxs25("div", { className: cn("flex items-center gap-md", className), children: [
-  /* @__PURE__ */ jsx28(Avatar, { initials: getInitials(name), src, alt: name, size: "lg", shape: "rounded" }),
-  /* @__PURE__ */ jsxs25("div", { className: "flex flex-col", children: [
-    /* @__PURE__ */ jsx28("span", { className: "text-sm font-medium text-table-cell-text-primary leading-sm", children: name }),
-    subtitle && /* @__PURE__ */ jsx28("span", { className: "text-xs font-regular text-table-cell-text-secondary leading-xs", children: subtitle })
+}) => /* @__PURE__ */ jsxs27("div", { className: cn("flex items-center gap-md", className), children: [
+  /* @__PURE__ */ jsx30(Avatar, { initials: getInitials(name), src, alt: name, size: "lg", shape: "rounded" }),
+  /* @__PURE__ */ jsxs27("div", { className: "flex flex-col", children: [
+    /* @__PURE__ */ jsx30("span", { className: "text-sm font-medium text-table-cell-text-primary leading-sm", children: name }),
+    subtitle && /* @__PURE__ */ jsx30("span", { className: "text-xs font-regular text-table-cell-text-secondary leading-xs", children: subtitle })
   ] })
 ] });
 AvatarCell.displayName = "AvatarCell";
@@ -3113,7 +3684,7 @@ var StatusCell = ({
   type = "primary",
   size = "sm",
   className
-}) => /* @__PURE__ */ jsx28("div", { className: cn("flex items-center", className), children: /* @__PURE__ */ jsx28(Badge, { variant, type, size, children: label }) });
+}) => /* @__PURE__ */ jsx30("div", { className: cn("flex items-center", className), children: /* @__PURE__ */ jsx30(Badge, { variant, type, size, children: label }) });
 StatusCell.displayName = "StatusCell";
 var secondaryIntentColors = {
   success: "text-badge-light-success-text",
@@ -3131,7 +3702,7 @@ var NumberCell = ({
   className
 }) => {
   const formatted = typeof value === "number" && formatOptions ? new Intl.NumberFormat(locale, formatOptions).format(value) : String(value);
-  return /* @__PURE__ */ jsxs25(
+  return /* @__PURE__ */ jsxs27(
     "div",
     {
       className: cn(
@@ -3140,8 +3711,8 @@ var NumberCell = ({
         className
       ),
       children: [
-        /* @__PURE__ */ jsx28("span", { className: "text-sm font-medium text-table-cell-text-primary", children: formatted }),
-        secondaryStat && /* @__PURE__ */ jsx28(
+        /* @__PURE__ */ jsx30("span", { className: "text-sm font-medium text-table-cell-text-primary", children: formatted }),
+        secondaryStat && /* @__PURE__ */ jsx30(
           "span",
           {
             className: cn(
@@ -3169,7 +3740,7 @@ var DateCell = ({
 }) => {
   const d = typeof date === "string" ? new Date(date) : date;
   const formatted = d.toLocaleDateString(locale, format);
-  return /* @__PURE__ */ jsx28(
+  return /* @__PURE__ */ jsx30(
     "span",
     {
       className: cn(
@@ -3181,7 +3752,7 @@ var DateCell = ({
   );
 };
 DateCell.displayName = "DateCell";
-var EmailCell = ({ email, className }) => /* @__PURE__ */ jsx28(
+var EmailCell = ({ email, className }) => /* @__PURE__ */ jsx30(
   Link,
   {
     intent: "neutral",
@@ -3197,13 +3768,13 @@ var LinkCell = ({
   label,
   target = "_blank",
   className
-}) => /* @__PURE__ */ jsx28(Link, { intent: "brand", size: "sm", href, target, className, children: label ?? href });
+}) => /* @__PURE__ */ jsx30(Link, { intent: "brand", size: "sm", href, target, className, children: label ?? href });
 LinkCell.displayName = "LinkCell";
 var TextCell = ({
   value,
   secondary = false,
   className
-}) => /* @__PURE__ */ jsx28(
+}) => /* @__PURE__ */ jsx30(
   "span",
   {
     className: cn(
@@ -3219,20 +3790,20 @@ var ButtonCell = ({
   className,
   children,
   ...props
-}) => /* @__PURE__ */ jsx28("div", { className: cn("flex items-center", className), children: /* @__PURE__ */ jsx28(Button, { size: "sm", appearance: "ghost", intent: "brand", ...props, children }) });
+}) => /* @__PURE__ */ jsx30("div", { className: cn("flex items-center", className), children: /* @__PURE__ */ jsx30(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();
@@ -3252,7 +3823,7 @@ var EditableCell = ({
     }
   };
   if (isEditing) {
-    return /* @__PURE__ */ jsx28(
+    return /* @__PURE__ */ jsx30(
       "input",
       {
         ref: inputRef,
@@ -3268,7 +3839,7 @@ var EditableCell = ({
       }
     );
   }
-  return /* @__PURE__ */ jsx28(
+  return /* @__PURE__ */ jsx30(
     "span",
     {
       role: "button",
@@ -3290,7 +3861,7 @@ var EditableCell = ({
   );
 };
 EditableCell.displayName = "EditableCell";
-var RowActions = ({ children, className }) => /* @__PURE__ */ jsx28(
+var RowActions = ({ children, className }) => /* @__PURE__ */ jsx30(
   "div",
   {
     className: cn(
@@ -3304,7 +3875,7 @@ var RowActions = ({ children, className }) => /* @__PURE__ */ jsx28(
 RowActions.displayName = "RowActions";
 
 // src/components/ui/data-table.tsx
-import * as React30 from "react";
+import * as React32 from "react";
 import {
   flexRender,
   getCoreRowModel,
@@ -3330,7 +3901,7 @@ import {
 } from "@dnd-kit/sortable";
 import { CSS } from "@dnd-kit/utilities";
 import {
-  Icon as Icon19,
+  Icon as Icon21,
   faChevronLeftOutline,
   faChevronRightOutline,
   faSortSolid,
@@ -3343,9 +3914,9 @@ import {
 import * as PopoverPrimitive2 from "@radix-ui/react-popover";
 
 // src/components/ui/table.tsx
-import * as React29 from "react";
-import { jsx as jsx29 } from "react/jsx-runtime";
-var Table = React29.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx29("div", { className: "relative w-full overflow-auto", children: /* @__PURE__ */ jsx29(
+import * as React31 from "react";
+import { jsx as jsx31 } from "react/jsx-runtime";
+var Table = React31.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx31("div", { className: "relative w-full overflow-auto", children: /* @__PURE__ */ jsx31(
   "table",
   {
     ref,
@@ -3354,7 +3925,7 @@ var Table = React29.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */
   }
 ) }));
 Table.displayName = "Table";
-var TableHeader = React29.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx29(
+var TableHeader = React31.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx31(
   "thead",
   {
     ref,
@@ -3363,9 +3934,9 @@ var TableHeader = React29.forwardRef(({ className, ...props }, ref) => /* @__PUR
   }
 ));
 TableHeader.displayName = "TableHeader";
-var TableBody = React29.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx29("tbody", { ref, className: cn("[&_tr:last-child_td]:border-b-0", className), ...props }));
+var TableBody = React31.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx31("tbody", { ref, className: cn("[&_tr:last-child_td]:border-b-0", className), ...props }));
 TableBody.displayName = "TableBody";
-var TableFooter = React29.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx29(
+var TableFooter = React31.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx31(
   "tfoot",
   {
     ref,
@@ -3377,7 +3948,7 @@ var TableFooter = React29.forwardRef(({ className, ...props }, ref) => /* @__PUR
   }
 ));
 TableFooter.displayName = "TableFooter";
-var TableRow = React29.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx29(
+var TableRow = React31.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx31(
   "tr",
   {
     ref,
@@ -3391,7 +3962,7 @@ var TableRow = React29.forwardRef(({ className, ...props }, ref) => /* @__PURE__
   }
 ));
 TableRow.displayName = "TableRow";
-var TableHead = React29.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx29(
+var TableHead = React31.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx31(
   "th",
   {
     ref,
@@ -3407,7 +3978,7 @@ var TableHead = React29.forwardRef(({ className, ...props }, ref) => /* @__PURE_
   }
 ));
 TableHead.displayName = "TableHead";
-var TableCell = React29.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx29(
+var TableCell = React31.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx31(
   "td",
   {
     ref,
@@ -3422,7 +3993,7 @@ var TableCell = React29.forwardRef(({ className, ...props }, ref) => /* @__PURE_
   }
 ));
 TableCell.displayName = "TableCell";
-var TableCaption = React29.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx29(
+var TableCaption = React31.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx31(
   "caption",
   {
     ref,
@@ -3433,7 +4004,7 @@ var TableCaption = React29.forwardRef(({ className, ...props }, ref) => /* @__PU
 TableCaption.displayName = "TableCaption";
 
 // src/components/ui/data-table.tsx
-import { jsx as jsx30, jsxs as jsxs26 } from "react/jsx-runtime";
+import { jsx as jsx32, jsxs as jsxs28 } from "react/jsx-runtime";
 var filterOperatorsByType = {
   string: [
     { value: "contains", label: "Contains" },
@@ -3483,12 +4054,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);
@@ -3498,9 +4069,9 @@ function ColumnFilterPopover({
       setInputValue("");
     }
   }, [open, filterValue, operators]);
-  return /* @__PURE__ */ jsxs26(PopoverPrimitive2.Root, { open, onOpenChange: setOpen, children: [
-    /* @__PURE__ */ jsx30(PopoverPrimitive2.Trigger, { asChild: true, children }),
-    /* @__PURE__ */ jsx30(PopoverPrimitive2.Portal, { children: /* @__PURE__ */ jsx30(
+  return /* @__PURE__ */ jsxs28(PopoverPrimitive2.Root, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsx32(PopoverPrimitive2.Trigger, { asChild: true, children }),
+    /* @__PURE__ */ jsx32(PopoverPrimitive2.Portal, { children: /* @__PURE__ */ jsx32(
       PopoverPrimitive2.Content,
       {
         align: "start",
@@ -3510,9 +4081,9 @@ function ColumnFilterPopover({
           "animate-in fade-in-0 zoom-in-95"
         ),
         onClick: (e) => e.stopPropagation(),
-        children: /* @__PURE__ */ jsxs26("div", { className: "flex flex-col gap-sm", children: [
-          /* @__PURE__ */ jsx30("span", { className: "text-xs font-medium text-table-head-text", children: "Filter" }),
-          /* @__PURE__ */ jsx30(
+        children: /* @__PURE__ */ jsxs28("div", { className: "flex flex-col gap-sm", children: [
+          /* @__PURE__ */ jsx32("span", { className: "text-xs font-medium text-table-head-text", children: "Filter" }),
+          /* @__PURE__ */ jsx32(
             "select",
             {
               className: cn(
@@ -3522,10 +4093,10 @@ function ColumnFilterPopover({
               ),
               value: operator,
               onChange: (e) => setOperator(e.target.value),
-              children: operators.map((op) => /* @__PURE__ */ jsx30("option", { value: op.value, children: op.label }, op.value))
+              children: operators.map((op) => /* @__PURE__ */ jsx32("option", { value: op.value, children: op.label }, op.value))
             }
           ),
-          !noValueOperators.has(operator) && /* @__PURE__ */ jsx30(
+          !noValueOperators.has(operator) && /* @__PURE__ */ jsx32(
             "input",
             {
               type: filterType === "number" ? "number" : filterType === "date" ? "date" : "text",
@@ -3545,8 +4116,8 @@ function ColumnFilterPopover({
               }
             }
           ),
-          /* @__PURE__ */ jsxs26("div", { className: "flex items-center justify-end gap-xs pt-xs", children: [
-            /* @__PURE__ */ jsx30(
+          /* @__PURE__ */ jsxs28("div", { className: "flex items-center justify-end gap-xs pt-xs", children: [
+            /* @__PURE__ */ jsx32(
               Button,
               {
                 appearance: "ghost",
@@ -3559,7 +4130,7 @@ function ColumnFilterPopover({
                 children: "Clear"
               }
             ),
-            /* @__PURE__ */ jsx30(
+            /* @__PURE__ */ jsx32(
               Button,
               {
                 appearance: "solid",
@@ -3592,7 +4163,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,
@@ -3614,7 +4185,7 @@ function DraggableHeaderCell({
     opacity: isDragging ? 0.5 : 1,
     zIndex: isDragging ? 1 : void 0
   };
-  return /* @__PURE__ */ jsxs26(
+  return /* @__PURE__ */ jsxs28(
     TableHead,
     {
       ref: setNodeRef,
@@ -3628,16 +4199,16 @@ function DraggableHeaderCell({
       onMouseEnter: () => setIsHovered(true),
       onMouseLeave: () => setIsHovered(false),
       children: [
-        /* @__PURE__ */ jsxs26("div", { className: "flex items-center gap-xs", children: [
-          leadingIcon && (canDrag ? /* @__PURE__ */ jsx30(
+        /* @__PURE__ */ jsxs28("div", { className: "flex items-center gap-xs", children: [
+          leadingIcon && (canDrag ? /* @__PURE__ */ jsx32(
             "div",
             {
               ...attributes,
               ...listeners,
               className: "shrink-0 flex items-center cursor-grab",
               onClick: (e) => e.stopPropagation(),
-              children: /* @__PURE__ */ jsx30(
-                Icon19,
+              children: /* @__PURE__ */ jsx32(
+                Icon21,
                 {
                   icon: isHovered ? faGripDotsVerticalSolid2 : leadingIcon,
                   size: "xs",
@@ -3645,23 +4216,23 @@ function DraggableHeaderCell({
                 }
               )
             }
-          ) : /* @__PURE__ */ jsx30(
-            Icon19,
+          ) : /* @__PURE__ */ jsx32(
+            Icon21,
             {
               icon: leadingIcon,
               size: "xs",
               className: "shrink-0 text-table-head-icon"
             }
           )),
-          !leadingIcon && canDrag && isHovered && /* @__PURE__ */ jsx30(
+          !leadingIcon && canDrag && isHovered && /* @__PURE__ */ jsx32(
             "div",
             {
               ...attributes,
               ...listeners,
               className: "shrink-0 flex items-center cursor-grab",
               onClick: (e) => e.stopPropagation(),
-              children: /* @__PURE__ */ jsx30(
-                Icon19,
+              children: /* @__PURE__ */ jsx32(
+                Icon21,
                 {
                   icon: faGripDotsVerticalSolid2,
                   size: "xs",
@@ -3670,33 +4241,33 @@ function DraggableHeaderCell({
               )
             }
           ),
-          /* @__PURE__ */ jsx30("span", { className: "flex-1 truncate", children: header.isPlaceholder ? null : flexRender(
+          /* @__PURE__ */ jsx32("span", { className: "flex-1 truncate", children: header.isPlaceholder ? null : flexRender(
             header.column.columnDef.header,
             header.getContext()
           ) }),
-          canSort && (isSorted || isHovered) && /* @__PURE__ */ jsx30(
-            Icon19,
+          canSort && (isSorted || isHovered) && /* @__PURE__ */ jsx32(
+            Icon21,
             {
               icon: isSorted === "asc" ? faSortUpSolid : isSorted === "desc" ? faSortDownSolid : faSortSolid,
               size: "xs",
               className: "shrink-0 text-table-head-icon"
             }
           ),
-          enableFiltering && (isFiltered || isHovered) && /* @__PURE__ */ jsx30(
+          enableFiltering && (isFiltered || isHovered) && /* @__PURE__ */ jsx32(
             ColumnFilterPopover,
             {
               filterType,
               filterValue: header.column.getFilterValue(),
               onApply: (val) => header.column.setFilterValue(val),
               onClear: () => header.column.setFilterValue(void 0),
-              children: /* @__PURE__ */ jsx30(
+              children: /* @__PURE__ */ jsx32(
                 "button",
                 {
                   type: "button",
                   onClick: (e) => e.stopPropagation(),
                   className: "shrink-0 p-0 border-0 bg-transparent cursor-pointer",
-                  children: /* @__PURE__ */ jsx30(
-                    Icon19,
+                  children: /* @__PURE__ */ jsx32(
+                    Icon21,
                     {
                       icon: isFiltered ? faFilterSolid : faFilterOutline,
                       size: "xs",
@@ -3708,7 +4279,7 @@ function DraggableHeaderCell({
             }
           )
         ] }),
-        enableColumnResizing && header.column.getCanResize() && /* @__PURE__ */ jsx30(
+        enableColumnResizing && header.column.getCanResize() && /* @__PURE__ */ jsx32(
           "div",
           {
             onMouseDown: header.getResizeHandler(),
@@ -3826,17 +4397,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);
@@ -3930,7 +4501,7 @@ function DataTableInner({
     }),
     useSensor(KeyboardSensor)
   );
-  const handleDragEnd = React30.useCallback(
+  const handleDragEnd = React32.useCallback(
     (event) => {
       const { active, over } = event;
       if (!over || active.id === over.id) return;
@@ -3944,12 +4515,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 = {};
@@ -3960,23 +4531,23 @@ function DataTableInner({
     return vars;
   }, [enableColumnResizing, table.getState().columnSizing]);
   const totalSize = enableColumnResizing ? table.getTotalSize() : void 0;
-  const tableContent = /* @__PURE__ */ jsxs26("div", { className: cn("w-full", className), style: columnSizeVars, children: [
-    /* @__PURE__ */ jsxs26(
+  const tableContent = /* @__PURE__ */ jsxs28("div", { className: cn("w-full", className), style: columnSizeVars, children: [
+    /* @__PURE__ */ jsxs28(
       Table,
       {
         style: totalSize ? { width: totalSize, tableLayout: "fixed" } : void 0,
         className: totalSize ? "w-auto" : void 0,
         children: [
-          /* @__PURE__ */ jsx30(
+          /* @__PURE__ */ jsx32(
             TableHeader,
             {
               className: cn(bordered && "border-t border-table-border"),
-              children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx30(TableRow, { children: enableColumnDrag ? /* @__PURE__ */ jsx30(
+              children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx32(TableRow, { children: enableColumnDrag ? /* @__PURE__ */ jsx32(
                 SortableContext,
                 {
                   items: columnIds,
                   strategy: horizontalListSortingStrategy,
-                  children: headerGroup.headers.map((header) => /* @__PURE__ */ jsx30(
+                  children: headerGroup.headers.map((header) => /* @__PURE__ */ jsx32(
                     DraggableHeaderCell,
                     {
                       header,
@@ -3988,7 +4559,7 @@ function DataTableInner({
                     header.id
                   ))
                 }
-              ) : headerGroup.headers.map((header) => /* @__PURE__ */ jsx30(
+              ) : headerGroup.headers.map((header) => /* @__PURE__ */ jsx32(
                 DraggableHeaderCell,
                 {
                   header,
@@ -4001,11 +4572,11 @@ function DataTableInner({
               )) }, headerGroup.id))
             }
           ),
-          /* @__PURE__ */ jsx30(TableBody, { children: table.getRowModel().rows?.length ? table.getRowModel().rows.map((row) => /* @__PURE__ */ jsx30(
+          /* @__PURE__ */ jsx32(TableBody, { children: table.getRowModel().rows?.length ? table.getRowModel().rows.map((row) => /* @__PURE__ */ jsx32(
             TableRow,
             {
               "data-state": row.getIsSelected() ? "selected" : void 0,
-              children: row.getVisibleCells().map((cell) => /* @__PURE__ */ jsx30(
+              children: row.getVisibleCells().map((cell) => /* @__PURE__ */ jsx32(
                 TableCell,
                 {
                   style: enableColumnResizing ? { width: `var(--col-${cell.column.id}-size)` } : void 0,
@@ -4019,12 +4590,12 @@ function DataTableInner({
               ))
             },
             row.id
-          )) : /* @__PURE__ */ jsx30(TableRow, { className: "hover:bg-transparent", children: /* @__PURE__ */ jsx30(
+          )) : /* @__PURE__ */ jsx32(TableRow, { className: "hover:bg-transparent", children: /* @__PURE__ */ jsx32(
             TableCell,
             {
               colSpan: columns.length,
               className: "h-48 text-center border-b-0",
-              children: emptyState ?? /* @__PURE__ */ jsx30("span", { className: "text-sm text-table-cell-text-secondary", children: emptyMessage })
+              children: emptyState ?? /* @__PURE__ */ jsx32("span", { className: "text-sm text-table-cell-text-secondary", children: emptyMessage })
             }
           ) }) })
         ]
@@ -4033,7 +4604,7 @@ function DataTableInner({
     children?.(table)
   ] });
   if (enableColumnDrag) {
-    return /* @__PURE__ */ jsx30(
+    return /* @__PURE__ */ jsx32(
       DndContext,
       {
         sensors,
@@ -4054,7 +4625,7 @@ function DataTablePagination({
   const totalCount = table.getFilteredRowModel().rows.length;
   const pageIndex = table.getState().pagination.pageIndex;
   const pageCount = table.getPageCount();
-  return /* @__PURE__ */ jsxs26(
+  return /* @__PURE__ */ jsxs28(
     "div",
     {
       className: cn(
@@ -4062,16 +4633,16 @@ function DataTablePagination({
         className
       ),
       children: [
-        /* @__PURE__ */ jsx30("div", { className: "text-xs text-table-cell-text-secondary", children: selectedCount > 0 && /* @__PURE__ */ jsxs26("span", { children: [
+        /* @__PURE__ */ jsx32("div", { className: "text-xs text-table-cell-text-secondary", children: selectedCount > 0 && /* @__PURE__ */ jsxs28("span", { children: [
           selectedCount,
           " of ",
           totalCount,
           " row(s) selected"
         ] }) }),
-        /* @__PURE__ */ jsxs26("div", { className: "flex items-center gap-lg", children: [
-          /* @__PURE__ */ jsxs26("div", { className: "flex items-center gap-sm", children: [
-            /* @__PURE__ */ jsx30("span", { className: "text-xs text-table-cell-text-secondary whitespace-nowrap", children: "Rows per page" }),
-            /* @__PURE__ */ jsx30(
+        /* @__PURE__ */ jsxs28("div", { className: "flex items-center gap-lg", children: [
+          /* @__PURE__ */ jsxs28("div", { className: "flex items-center gap-sm", children: [
+            /* @__PURE__ */ jsx32("span", { className: "text-xs text-table-cell-text-secondary whitespace-nowrap", children: "Rows per page" }),
+            /* @__PURE__ */ jsx32(
               "select",
               {
                 className: cn(
@@ -4081,18 +4652,18 @@ function DataTablePagination({
                 ),
                 value: table.getState().pagination.pageSize,
                 onChange: (e) => table.setPageSize(Number(e.target.value)),
-                children: pageSizeOptions.map((size) => /* @__PURE__ */ jsx30("option", { value: size, children: size }, size))
+                children: pageSizeOptions.map((size) => /* @__PURE__ */ jsx32("option", { value: size, children: size }, size))
               }
             )
           ] }),
-          /* @__PURE__ */ jsxs26("span", { className: "text-xs text-table-cell-text-secondary whitespace-nowrap", children: [
+          /* @__PURE__ */ jsxs28("span", { className: "text-xs text-table-cell-text-secondary whitespace-nowrap", children: [
             "Page ",
             pageIndex + 1,
             " of ",
             pageCount
           ] }),
-          /* @__PURE__ */ jsxs26("div", { className: "flex items-center gap-xs", children: [
-            /* @__PURE__ */ jsx30(
+          /* @__PURE__ */ jsxs28("div", { className: "flex items-center gap-xs", children: [
+            /* @__PURE__ */ jsx32(
               Button,
               {
                 appearance: "outlined",
@@ -4104,7 +4675,7 @@ function DataTablePagination({
                 "aria-label": "Previous page"
               }
             ),
-            /* @__PURE__ */ jsx30(
+            /* @__PURE__ */ jsx32(
               Button,
               {
                 appearance: "outlined",
@@ -4126,15 +4697,15 @@ var DataTable = Object.assign(DataTableInner, { displayName: "DataTable" });
 Object.assign(DataTablePagination, { displayName: "DataTablePagination" });
 
 // src/components/ui/side-panel.tsx
-import * as React31 from "react";
+import * as React33 from "react";
 import * as DialogPrimitive2 from "@radix-ui/react-dialog";
-import { jsx as jsx31, jsxs as jsxs27 } from "react/jsx-runtime";
+import { jsx as jsx33, jsxs as jsxs29 } from "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__ */ jsxs27(DialogPrimitive2.Portal, { children: [
-  overlay && /* @__PURE__ */ jsx31(ModalOverlay, {}),
-  /* @__PURE__ */ jsx31(
+var SidePanelContent = React33.forwardRef(({ className, overlay = true, children, ...props }, ref) => /* @__PURE__ */ jsxs29(DialogPrimitive2.Portal, { children: [
+  overlay && /* @__PURE__ */ jsx33(ModalOverlay, {}),
+  /* @__PURE__ */ jsx33(
     DialogPrimitive2.Content,
     {
       ref,
@@ -4162,6 +4733,7 @@ export {
   Button,
   ButtonCell,
   Checkbox,
+  ChipInput,
   DataTable,
   DataTablePagination,
   DateCell,
@@ -4193,6 +4765,7 @@ export {
   ModalTitle,
   ModalTrigger,
   NumberCell,
+  NumberInput,
   ProductLogo,
   RowActions,
   SearchBar,
@@ -4239,6 +4812,7 @@ export {
   avatarVariants,
   badgeVariants,
   buttonVariants,
+  chipInputVariants,
   cn,
   emptyStateVariants,
   flexRender,