@cytario/design 6.0.1 → 7.1.0

package/dist/index.js

@@ -5,102 +5,298 @@ import { RouterProvider } from "react-aria-components";
 
 // src/components/Button/Button.tsx
 import {
-  Button as AriaButton
+  Button as AriaButton,
+  Link as AriaLink
 } from "react-aria-components";
-import { twMerge } from "tailwind-merge";
+import { twMerge as twMerge3 } from "tailwind-merge";
 
 // src/components/_shared/styles.ts
 var sizeStyles = {
-  xs: "px-2 py-1 text-xs",
+  xs: "px-2 py-1.5 text-xs",
   sm: "px-3 py-1.5 text-sm",
   md: "px-4 py-2 text-base",
   lg: "px-6 py-3 text-lg"
 };
 var variantStyles = {
-  primary: [
-    "bg-primary text-primary-foreground",
-    "hover:bg-primary-hover",
-    "pressed:bg-primary-pressed"
-  ].join(" "),
-  secondary: [
-    "bg-secondary text-secondary-foreground",
-    "hover:bg-secondary-hover",
-    "pressed:bg-secondary-pressed"
-  ].join(" "),
-  destructive: [
-    "bg-destructive text-destructive-foreground",
-    "hover:bg-destructive-hover",
-    "pressed:bg-destructive-pressed"
-  ].join(" "),
-  success: [
-    "bg-success text-success-foreground",
-    "hover:bg-success-hover",
-    "pressed:bg-success-pressed"
-  ].join(" "),
-  warning: [
-    "bg-warning text-warning-foreground",
-    "hover:bg-warning-hover",
-    "pressed:bg-warning-pressed"
-  ].join(" "),
-  info: [
-    "bg-info text-info-foreground",
-    "hover:bg-info-hover",
-    "pressed:bg-info-pressed"
-  ].join(" "),
-  neutral: [
-    "bg-muted text-foreground",
-    "hover:bg-accent",
-    "pressed:bg-accent-pressed"
-  ].join(" "),
-  outline: [
-    "bg-transparent text-foreground",
-    "border border-border",
-    "hover:bg-muted",
-    "pressed:bg-accent-pressed"
-  ].join(" "),
-  ghost: [
-    "bg-transparent text-foreground",
-    "hover:bg-muted",
-    "pressed:bg-accent-pressed"
-  ].join(" ")
+  primary: `
+    bg-primary text-primary-foreground
+    hover:bg-primary-hover
+    pressed:bg-primary-pressed
+  `,
+  secondary: `
+    bg-secondary text-secondary-foreground
+    hover:bg-secondary-hover
+    pressed:bg-secondary-pressed
+  `,
+  destructive: `
+    bg-destructive text-destructive-foreground
+    hover:bg-destructive-hover
+    pressed:bg-destructive-pressed
+  `,
+  success: `
+    bg-success text-success-foreground
+    hover:bg-success-hover
+    pressed:bg-success-pressed
+  `,
+  warning: `
+    bg-warning text-warning-foreground
+    hover:bg-warning-hover
+    pressed:bg-warning-pressed
+  `,
+  info: `
+    bg-info text-info-foreground
+    hover:bg-info-hover
+    pressed:bg-info-pressed
+  `,
+  neutral: `
+    bg-muted text-foreground
+    hover:bg-accent
+    pressed:bg-accent-pressed
+  `,
+  outline: `
+    bg-transparent text-foreground
+    border border-border
+    hover:bg-muted
+    pressed:bg-accent-pressed
+  `,
+  ghost: `
+    bg-transparent text-foreground
+    hover:bg-muted
+    pressed:bg-accent-pressed
+  `
+};
+var selectedStyles = {
+  primary: "selected:bg-primary-pressed",
+  secondary: "selected:bg-secondary-pressed",
+  destructive: "selected:bg-destructive-pressed",
+  success: "selected:bg-success-pressed",
+  warning: "selected:bg-warning-pressed",
+  info: "selected:bg-info-pressed",
+  neutral: "selected:bg-accent-pressed",
+  outline: "selected:bg-accent-pressed",
+  ghost: "selected:bg-accent-pressed"
+};
+
+// src/components/Icon/Icon.tsx
+import { twMerge } from "tailwind-merge";
+
+// src/components/Icon/icon-registry.ts
+import {
+  AlertCircle,
+  AlertTriangle,
+  AlignCenter,
+  AlignLeft,
+  AlignRight,
+  Archive,
+  ArrowDown,
+  ArrowRight,
+  ArrowUp,
+  Ban,
+  Bookmark,
+  BookmarkCheck,
+  Braces,
+  Check,
+  CheckCircle,
+  CheckCircle2,
+  ChevronDown,
+  ChevronRight,
+  ChevronUp,
+  Circle,
+  CircleDot,
+  Clock,
+  Cloud,
+  Columns2,
+  Columns3,
+  Copy,
+  Download,
+  Edit,
+  EllipsisVertical,
+  ExternalLink,
+  Eye,
+  EyeOff,
+  File,
+  FileSearch,
+  FileSpreadsheet,
+  FilterX,
+  Folder,
+  FolderPlus,
+  FolderTree,
+  Fullscreen,
+  Grid2x2,
+  Grid3x3,
+  Heart,
+  Image,
+  ImageOff,
+  Inbox,
+  Info,
+  Lasso,
+  Layers,
+  Layers2,
+  LayoutGrid,
+  List,
+  ListFilter,
+  LogOut,
+  Mail,
+  MapPin,
+  Maximize,
+  Microscope,
+  Minus,
+  MoreVertical,
+  PanelLeftClose,
+  PanelLeftOpen,
+  PanelRightClose,
+  PanelRightOpen,
+  Pencil,
+  Plug,
+  Plus,
+  RotateCcw,
+  Search,
+  SearchX,
+  Send,
+  Settings,
+  Shield,
+  ShieldCheck,
+  Spline,
+  Square,
+  Star,
+  Table,
+  Tag,
+  Trash2,
+  Unplug,
+  User,
+  UserMinus,
+  UserPlus,
+  Users,
+  UsersRound,
+  X,
+  XCircle,
+  ZoomIn,
+  ZoomOut
+} from "lucide-react";
+var iconRegistry = {
+  AlertCircle,
+  AlertTriangle,
+  AlignCenter,
+  AlignLeft,
+  AlignRight,
+  Archive,
+  ArrowDown,
+  ArrowRight,
+  ArrowUp,
+  Ban,
+  Bookmark,
+  BookmarkCheck,
+  Braces,
+  Check,
+  CheckCircle,
+  CheckCircle2,
+  ChevronDown,
+  ChevronRight,
+  ChevronUp,
+  Circle,
+  CircleDot,
+  Clock,
+  Cloud,
+  Columns2,
+  Columns3,
+  Copy,
+  Download,
+  Edit,
+  EllipsisVertical,
+  ExternalLink,
+  Eye,
+  EyeOff,
+  File,
+  FileSearch,
+  FileSpreadsheet,
+  FilterX,
+  Folder,
+  FolderPlus,
+  FolderTree,
+  Fullscreen,
+  Grid2x2,
+  Grid3x3,
+  Heart,
+  Image,
+  ImageOff,
+  Inbox,
+  Info,
+  Lasso,
+  Layers,
+  Layers2,
+  LayoutGrid,
+  List,
+  ListFilter,
+  LogOut,
+  Mail,
+  MapPin,
+  Maximize,
+  Microscope,
+  Minus,
+  MoreVertical,
+  PanelLeftClose,
+  PanelLeftOpen,
+  PanelRightClose,
+  PanelRightOpen,
+  Pencil,
+  Plug,
+  Plus,
+  RotateCcw,
+  Search,
+  SearchX,
+  Send,
+  Settings,
+  Shield,
+  ShieldCheck,
+  Spline,
+  Square,
+  Star,
+  Table,
+  Tag,
+  Trash2,
+  Unplug,
+  User,
+  UserMinus,
+  UserPlus,
+  Users,
+  UsersRound,
+  X,
+  XCircle,
+  ZoomIn,
+  ZoomOut
 };
 
 // src/components/Icon/Icon.tsx
 import { jsx } from "react/jsx-runtime";
 var sizeMap = {
+  xs: 14,
   sm: 16,
   md: 20,
   lg: 24,
   xl: 32
 };
 function Icon({
-  icon: LucideComponent,
+  icon,
   size = "md",
-  strokeWidth,
-  "aria-label": ariaLabel,
+  strokeWidth = 2,
   className
 }) {
-  const isDecorative = !ariaLabel;
+  const Component = typeof icon === "string" ? iconRegistry[icon] : icon;
   return /* @__PURE__ */ jsx(
-    LucideComponent,
+    Component,
     {
       size: sizeMap[size],
       strokeWidth,
-      role: isDecorative ? void 0 : "img",
-      "aria-label": ariaLabel,
-      "aria-hidden": isDecorative ? "true" : void 0,
-      className
+      "aria-hidden": "true",
+      focusable: false,
+      className: twMerge("shrink-0", className)
     }
   );
 }
 
 // src/components/Spinner/Spinner.tsx
+import { twMerge as twMerge2 } from "tailwind-merge";
 import { jsx as jsx2, jsxs } from "react/jsx-runtime";
-var sizeMap2 = {
-  sm: "h-4 w-4",
-  md: "h-5 w-5",
-  lg: "h-6 w-6"
-};
 function Spinner({
   size = "md",
   "aria-label": ariaLabel,
@@ -113,9 +309,11 @@ function Spinner({
       role: isDecorative ? void 0 : "status",
       "aria-label": ariaLabel,
       "aria-hidden": isDecorative ? "true" : void 0,
-      className: [sizeMap2[size], "animate-spin", className].filter(Boolean).join(" "),
+      className: twMerge2("animate-spin", className),
       viewBox: "0 0 24 24",
       fill: "none",
+      width: sizeMap[size],
+      height: sizeMap[size],
       children: [
         /* @__PURE__ */ jsx2(
           "circle",
@@ -141,37 +339,19 @@ function Spinner({
   );
 }
 
-// src/components/Form/InputGroup/InputGroupContext.ts
-import { createContext, useContext } from "react";
-var InputGroupContext = createContext({
-  inGroup: false,
-  position: "standalone"
-});
-function useInputGroup() {
-  return useContext(InputGroupContext);
-}
-
 // src/components/Button/Button.tsx
 import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
-var iconSizeMap = {
-  xs: "sm",
-  sm: "sm",
-  md: "sm",
-  lg: "md"
-};
-function groupRadiusClass(position) {
-  switch (position) {
-    case "start":
-      return "rounded-l-md rounded-r-none";
-    case "middle":
-      return "rounded-none";
-    case "end":
-      return "rounded-r-md rounded-l-none";
-    default:
-      return "rounded-md";
-  }
-}
-function Button({
+var buttonBaseClass = `
+  inline-flex items-center justify-center gap-2 shrink-0 cursor-pointer
+  rounded-full
+  font-medium
+  leading-tight
+  outline-none transition-colors no-underline
+  focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2
+  disabled:opacity-50 disabled:pointer-events-none
+`;
+function ButtonBase({
+  as: Component,
   variant = "primary",
   size = "md",
   isLoading = false,
@@ -182,38 +362,25 @@ function Button({
   children,
   ...props
 }) {
-  const { inGroup, position } = useInputGroup();
-  const groupGhost = inGroup && variant === "ghost" ? "bg-background text-muted-foreground border border-border hover:bg-accent hover:text-foreground hover:border-border pressed:bg-accent pressed:text-foreground" : "";
-  const radiusClass = inGroup ? groupRadiusClass(position) : "rounded-md";
-  const marginClass = inGroup && position !== "start" && position !== "standalone" ? "-ml-px" : "";
-  const focusRing = inGroup ? "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-0 focus-visible:z-10" : "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2";
-  return /* @__PURE__ */ jsxs2(
-    AriaButton,
-    {
-      ...props,
-      isDisabled: isDisabled || isLoading,
-      className: twMerge(
-        "inline-flex items-center justify-center gap-2 shrink-0 cursor-pointer",
-        radiusClass,
-        "font-medium",
-        "leading-tight",
-        "outline-none transition-colors",
-        focusRing,
-        "disabled:opacity-50 disabled:pointer-events-none",
-        isLoading ? "pointer-events-none" : "",
-        groupGhost || variantStyles[variant],
-        sizeStyles[size],
-        marginClass,
-        className
-      ),
-      children: [
-        isLoading && /* @__PURE__ */ jsx3(Spinner, { size: iconSizeMap[size] }),
-        !isLoading && iconLeft && /* @__PURE__ */ jsx3(Icon, { icon: iconLeft, size: iconSizeMap[size] }),
-        children,
-        !isLoading && iconRight && /* @__PURE__ */ jsx3(Icon, { icon: iconRight, size: iconSizeMap[size] })
-      ]
-    }
+  const cx = twMerge3(
+    buttonBaseClass,
+    isLoading ? "pointer-events-none" : "",
+    variantStyles[variant],
+    sizeStyles[size],
+    className
   );
+  return /* @__PURE__ */ jsxs2(Component, { ...props, isDisabled: isDisabled || isLoading, className: cx, children: [
+    isLoading && /* @__PURE__ */ jsx3(Spinner, { size }),
+    !isLoading && iconLeft && /* @__PURE__ */ jsx3(Icon, { icon: iconLeft, size }),
+    children,
+    !isLoading && iconRight && /* @__PURE__ */ jsx3(Icon, { icon: iconRight, size })
+  ] });
+}
+function Button(props) {
+  return /* @__PURE__ */ jsx3(ButtonBase, { as: AriaButton, ...props });
+}
+function ButtonLink(props) {
+  return /* @__PURE__ */ jsx3(ButtonBase, { as: AriaLink, ...props });
 }
 
 // src/components/Tooltip/Tooltip.tsx
@@ -544,80 +711,63 @@ var TruncatedText = ({ children, ellipsis = "right", copyValue }) => {
 
 // src/components/IconButton/IconButton.tsx
 import {
-  Button as AriaButton2
+  Button as AriaButton2,
+  Link as AriaLink2,
+  ToggleButton as AriaToggleButton
 } from "react-aria-components";
+import { twMerge as twMerge4 } from "tailwind-merge";
 import { jsx as jsx6 } from "react/jsx-runtime";
 var squareSizeStyles = {
   xs: "h-7 w-7",
+  // 28px
   sm: "h-8 w-8",
+  // 32px
   md: "h-10 w-10",
+  // 40px
   lg: "h-12 w-12"
+  // 48px
 };
-var squareWidthOnly = {
-  xs: "w-7",
-  sm: "w-8",
-  md: "w-10",
-  lg: "w-12"
-};
-var iconSizeMap2 = {
-  xs: "sm",
-  sm: "sm",
-  md: "sm",
-  lg: "md"
-};
-function groupRadiusClass2(position) {
-  switch (position) {
-    case "start":
-      return "rounded-l-md rounded-r-none";
-    case "middle":
-      return "rounded-none";
-    case "end":
-      return "rounded-r-md rounded-l-none";
-    default:
-      return "rounded-md";
-  }
-}
-function IconButton({
+function IconButtonBase({
+  as: Component,
   icon,
-  "aria-label": ariaLabel,
+  label,
   variant = "ghost",
   size = "md",
-  showTooltip = true,
   isLoading = false,
   isDisabled,
   className,
+  ref,
   ...props
 }) {
-  const { inGroup, position } = useInputGroup();
-  const groupGhost = inGroup && variant === "ghost" ? "bg-background text-muted-foreground border border-border hover:bg-accent hover:text-foreground hover:border-border pressed:bg-accent pressed:text-foreground" : "";
-  const radiusClass = inGroup ? groupRadiusClass2(position) : "rounded-md";
-  const marginClass = inGroup && position !== "start" && position !== "standalone" ? "-ml-px" : "";
-  const focusRing = inGroup ? "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-0 focus-visible:z-10" : "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2";
-  const button = /* @__PURE__ */ jsx6(
-    AriaButton2,
+  const cx = twMerge4(
+    buttonBaseClass,
+    isLoading ? "pointer-events-none" : "",
+    variantStyles[variant],
+    // No-op unless the wrapper is a ToggleButton (react-aria sets data-selected).
+    selectedStyles[variant],
+    squareSizeStyles[size],
+    className
+  );
+  return /* @__PURE__ */ jsx6(Tooltip, { content: label, children: /* @__PURE__ */ jsx6(
+    Component,
     {
       ...props,
-      "aria-label": ariaLabel,
+      ref,
+      "aria-label": label,
       isDisabled: isDisabled || isLoading,
-      className: [
-        "inline-flex items-center justify-center shrink-0 cursor-pointer",
-        radiusClass,
-        "outline-none transition-colors",
-        focusRing,
-        "disabled:opacity-50 disabled:pointer-events-none",
-        isLoading ? "pointer-events-none" : "",
-        groupGhost || variantStyles[variant],
-        inGroup ? squareWidthOnly[size] : squareSizeStyles[size],
-        marginClass,
-        className
-      ].filter(Boolean).join(" "),
-      children: isLoading ? /* @__PURE__ */ jsx6(Spinner, { size: iconSizeMap2[size] }) : /* @__PURE__ */ jsx6(Icon, { icon, size: iconSizeMap2[size] })
+      className: cx,
+      children: isLoading ? /* @__PURE__ */ jsx6(Spinner, { size }) : /* @__PURE__ */ jsx6(Icon, { icon, size })
     }
-  );
-  if (showTooltip) {
-    return /* @__PURE__ */ jsx6(Tooltip, { content: ariaLabel, children: button });
-  }
-  return button;
+  ) });
+}
+function IconButton(props) {
+  return /* @__PURE__ */ jsx6(IconButtonBase, { as: AriaButton2, ...props });
+}
+function IconButtonLink(props) {
+  return /* @__PURE__ */ jsx6(IconButtonBase, { as: AriaLink2, ...props });
+}
+function IconButtonToggle(props) {
+  return /* @__PURE__ */ jsx6(IconButtonBase, { as: AriaToggleButton, ...props });
 }
 
 // src/components/Form/Input/Input.tsx
@@ -626,7 +776,7 @@ import {
   Input as AriaInput,
   Text
 } from "react-aria-components";
-import { twMerge as twMerge2 } from "tailwind-merge";
+import { twMerge as twMerge5 } from "tailwind-merge";
 
 // src/components/Form/Label/Label.tsx
 import {
@@ -666,18 +816,6 @@ var alignClasses = {
   center: "text-center",
   right: "text-right"
 };
-function groupRadiusClasses(position) {
-  switch (position) {
-    case "start":
-      return "rounded-l-(--border-radius-md) rounded-r-none";
-    case "middle":
-      return "rounded-none";
-    case "end":
-      return "rounded-r-(--border-radius-md) rounded-l-none";
-    default:
-      return "rounded-md";
-  }
-}
 function Input({
   as: FieldProp = TextField,
   label,
@@ -695,10 +833,8 @@ function Input({
 }) {
   const Field = FieldProp;
   const isInvalid = !!errorMessage;
-  const { inGroup, position } = useInputGroup();
   const borderColor = isInvalid ? "border-destructive-border" : "border-border hover:border-border";
-  const radiusClass = inGroup ? groupRadiusClasses(position) : "rounded-md";
-  const marginClass = inGroup && position !== "start" && position !== "standalone" ? "-ml-px" : "";
+  const radiusClass = "rounded-md";
   return /* @__PURE__ */ jsxs6(
     Field,
     {
@@ -707,18 +843,13 @@ function Input({
       isDisabled,
       isRequired,
       isInvalid,
-      className: twMerge2(
-        "flex w-full flex-col gap-1",
-        inGroup ? "min-w-0 flex-1" : "",
-        marginClass,
-        className
-      ),
+      className: twMerge5("flex w-full flex-col gap-1", className),
       children: [
         label && /* @__PURE__ */ jsx8(Label, { isRequired, children: label }),
         prefix ? /* @__PURE__ */ jsxs6(
           "div",
           {
-            className: twMerge2(
+            className: twMerge5(
               "flex items-center overflow-hidden",
               radiusClass,
               "border",
@@ -726,14 +857,13 @@ function Input({
               "outline-none transition-colors",
               borderColor,
               "focus-within:ring-2 focus-within:ring-ring focus-within:border-ring",
-              inGroup && "focus-within:z-10",
               isDisabled && "opacity-50 pointer-events-none"
             ),
             children: [
               /* @__PURE__ */ jsx8(
                 "span",
                 {
-                  className: twMerge2(
+                  className: twMerge5(
                     "self-stretch flex items-center shrink-0 select-none",
                     "bg-card",
                     "border-r border-r-border",
@@ -747,7 +877,7 @@ function Input({
                 AriaInput,
                 {
                   placeholder,
-                  className: twMerge2(
+                  className: twMerge5(
                     "w-full bg-transparent",
                     sizeStyles[size],
                     alignClasses[align],
@@ -763,7 +893,7 @@ function Input({
           AriaInput,
           {
             placeholder,
-            className: twMerge2(
+            className: twMerge5(
               "w-full",
               sizeStyles[size],
               alignClasses[align],
@@ -775,19 +905,11 @@ function Input({
               "outline-none transition-colors",
               borderColor,
               "focus:ring-2 focus:ring-ring focus:border-ring",
-              inGroup && "focus:z-10",
               "disabled:opacity-50 disabled:pointer-events-none"
             )
           }
         ),
-        description && /* @__PURE__ */ jsx8(
-          Text,
-          {
-            slot: "description",
-            className: "text-sm text-muted-foreground",
-            children: description
-          }
-        ),
+        description && /* @__PURE__ */ jsx8(Text, { slot: "description", className: "text-sm text-muted-foreground", children: description }),
         isInvalid && /* @__PURE__ */ jsx8(
           Text,
           {
@@ -802,8 +924,106 @@ function Input({
   );
 }
 
+// src/components/Form/InputPassword/InputPassword.tsx
+import { forwardRef, useId, useState as useState5 } from "react";
+import { Eye as Eye2, EyeOff as EyeOff2 } from "lucide-react";
+import { twMerge as twMerge6 } from "tailwind-merge";
+import { jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
+var InputPassword = forwardRef(
+  function InputPassword2({
+    label,
+    description,
+    errorMessage,
+    size = "md",
+    isRequired,
+    isDisabled,
+    isToggleDisabled,
+    showPasswordLabel = "Show password",
+    hidePasswordLabel = "Hide password",
+    id,
+    className,
+    "aria-invalid": ariaInvalidProp,
+    "aria-describedby": ariaDescribedByProp,
+    ...inputProps
+  }, ref) {
+    const [visible, setVisible] = useState5(false);
+    const generatedId = useId();
+    const inputId = id ?? generatedId;
+    const isInvalid = !!errorMessage;
+    const descId = description ? `${inputId}-description` : void 0;
+    const errId = isInvalid ? `${inputId}-error` : void 0;
+    const describedBy = [descId, errId, ariaDescribedByProp].filter(Boolean).join(" ") || void 0;
+    const toggleDisabled = isToggleDisabled ?? isDisabled;
+    return /* @__PURE__ */ jsxs7("div", { className: twMerge6("flex w-full flex-col gap-1", className), children: [
+      label && /* @__PURE__ */ jsxs7(
+        "label",
+        {
+          htmlFor: inputId,
+          className: "text-sm font-medium text-foreground",
+          children: [
+            label,
+            isRequired && /* @__PURE__ */ jsx9("span", { "aria-hidden": "true", className: "ml-0.5 text-destructive", children: "*" })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxs7(
+        "div",
+        {
+          className: twMerge6(
+            "flex items-center overflow-hidden rounded-md border bg-background",
+            "outline-none transition-colors",
+            isInvalid ? "border-destructive-border" : "border-border",
+            "focus-within:ring-2 focus-within:ring-ring focus-within:border-ring",
+            isDisabled && "opacity-50 pointer-events-none"
+          ),
+          children: [
+            /* @__PURE__ */ jsx9(
+              "input",
+              {
+                ...inputProps,
+                ref,
+                id: inputId,
+                type: visible ? "text" : "password",
+                required: isRequired,
+                disabled: isDisabled,
+                "aria-invalid": isInvalid || ariaInvalidProp,
+                "aria-describedby": describedBy,
+                className: twMerge6(
+                  "w-full bg-transparent text-foreground",
+                  "placeholder:text-muted-foreground",
+                  "outline-none border-none",
+                  sizeStyles[size]
+                )
+              }
+            ),
+            /* @__PURE__ */ jsx9(
+              "button",
+              {
+                type: "button",
+                "aria-label": visible ? hidePasswordLabel : showPasswordLabel,
+                disabled: toggleDisabled,
+                tabIndex: toggleDisabled ? -1 : void 0,
+                onClick: () => setVisible((v) => !v),
+                className: twMerge6(
+                  "flex items-center justify-center shrink-0 self-stretch px-3 cursor-pointer",
+                  "text-muted-foreground hover:text-foreground transition-colors",
+                  "outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset",
+                  "disabled:cursor-not-allowed disabled:opacity-50"
+                ),
+                children: /* @__PURE__ */ jsx9(Icon, { icon: visible ? EyeOff2 : Eye2, size: "sm" })
+              }
+            )
+          ]
+        }
+      ),
+      description && /* @__PURE__ */ jsx9("p", { id: descId, className: "text-sm text-muted-foreground", children: description }),
+      isInvalid && /* @__PURE__ */ jsx9("p", { id: errId, role: "alert", className: "text-sm text-destructive", children: errorMessage })
+    ] });
+  }
+);
+
 // src/components/Form/Select/Select.tsx
-import { Check, ChevronDown } from "lucide-react";
+import { Check as Check2, ChevronDown as ChevronDown2 } from "lucide-react";
 import {
   Button as Button2,
   ListBox,
@@ -813,8 +1033,8 @@ import {
   SelectValue,
   Text as Text2
 } from "react-aria-components";
-import { twMerge as twMerge3 } from "tailwind-merge";
-import { Fragment, jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
+import { twMerge as twMerge7 } from "tailwind-merge";
+import { Fragment, jsx as jsx10, jsxs as jsxs8 } from "react/jsx-runtime";
 function Select({
   label,
   items,
@@ -829,21 +1049,21 @@ function Select({
   ...props
 }) {
   const hasError = Boolean(errorMessage);
-  return /* @__PURE__ */ jsxs7(
+  return /* @__PURE__ */ jsxs8(
     AriaSelect,
     {
       ...props,
       isDisabled,
       isRequired,
       isInvalid: hasError,
-      className: twMerge3("flex flex-col gap-1", className),
+      className: twMerge7("flex flex-col gap-1", className),
       children: [
-        label && /* @__PURE__ */ jsx9(Label, { isRequired, children: label }),
-        /* @__PURE__ */ jsxs7(
+        label && /* @__PURE__ */ jsx10(Label, { isRequired, children: label }),
+        /* @__PURE__ */ jsxs8(
           Button2,
           {
             "aria-required": isRequired || void 0,
-            className: twMerge3(
+            className: twMerge7(
               `
             inline-flex items-center justify-between
             w-full rounded-md
@@ -857,10 +1077,10 @@ function Select({
               hasError ? "border-destructive-border" : "border-border"
             ),
             children: [
-              /* @__PURE__ */ jsx9(
+              /* @__PURE__ */ jsx10(
                 SelectValue,
                 {
-                  className: twMerge3(
+                  className: twMerge7(
                     renderItem ? "min-w-0" : "truncate",
                     "data-placeholder:text-muted-foreground"
                   ),
@@ -871,11 +1091,11 @@ function Select({
                   }
                 }
               ),
-              /* @__PURE__ */ jsx9(
-                ChevronDown,
+              /* @__PURE__ */ jsx10(
+                ChevronDown2,
                 {
                   "aria-hidden": true,
-                  className: twMerge3(
+                  className: twMerge7(
                     "shrink-0 text-muted-foreground",
                     size === "sm" ? "h-3.5 w-3.5" : "h-4 w-4"
                   )
@@ -884,8 +1104,8 @@ function Select({
             ]
           }
         ),
-        description && /* @__PURE__ */ jsx9(Text2, { slot: "description", className: "text-sm text-muted-foreground", children: description }),
-        hasError && /* @__PURE__ */ jsx9(
+        description && /* @__PURE__ */ jsx10(Text2, { slot: "description", className: "text-sm text-muted-foreground", children: description }),
+        hasError && /* @__PURE__ */ jsx10(
           Text2,
           {
             slot: "errorMessage",
@@ -894,10 +1114,10 @@ function Select({
             children: errorMessage
           }
         ),
-        /* @__PURE__ */ jsx9(
+        /* @__PURE__ */ jsx10(
           Popover,
           {
-            className: twMerge3(
+            className: twMerge7(
               "w-(--trigger-width)",
               "rounded-md",
               "border border-border",
@@ -907,12 +1127,12 @@ function Select({
               "entering:animate-in entering:fade-in",
               "exiting:animate-out exiting:fade-out"
             ),
-            children: /* @__PURE__ */ jsx9(ListBox, { className: "p-1 outline-none", items, children: (item) => /* @__PURE__ */ jsx9(
+            children: /* @__PURE__ */ jsx10(ListBox, { className: "p-1 outline-none", items, children: (item) => /* @__PURE__ */ jsx10(
               ListBoxItem,
               {
                 id: item.id,
                 textValue: item.name,
-                className: twMerge3(
+                className: twMerge7(
                   `
                   flex items-center justify-between gap-2
                   rounded-sm
@@ -924,9 +1144,9 @@ function Select({
                 `,
                   sizeStyles[size]
                 ),
-                children: ({ isSelected }) => /* @__PURE__ */ jsxs7(Fragment, { children: [
-                  /* @__PURE__ */ jsx9("span", { className: renderItem ? "min-w-0 flex-1" : "truncate", children: renderItem ? renderItem(item) : item.name }),
-                  isSelected && /* @__PURE__ */ jsx9(Check, { className: "h-4 w-4 shrink-0 text-primary" })
+                children: ({ isSelected }) => /* @__PURE__ */ jsxs8(Fragment, { children: [
+                  /* @__PURE__ */ jsx10("span", { className: renderItem ? "min-w-0 flex-1" : "truncate", children: renderItem ? renderItem(item) : item.name }),
+                  isSelected && /* @__PURE__ */ jsx10(Check2, { className: "h-4 w-4 shrink-0 text-primary" })
                 ] })
               }
             ) })
@@ -946,13 +1166,13 @@ import {
   TableBody as AriaTableBody,
   TableHeader as AriaTableHeader
 } from "react-aria-components";
-import { jsx as jsx10, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx11, jsxs as jsxs9 } from "react/jsx-runtime";
 var tableSizeClass = {
   compact: "[--table-row-py:theme(spacing.1)]",
   comfortable: "[--table-row-py:theme(spacing.3)]"
 };
-function Table({ size = "comfortable", className, ...props }) {
-  return /* @__PURE__ */ jsx10(
+function Table2({ size = "comfortable", className, ...props }) {
+  return /* @__PURE__ */ jsx11(
     AriaTable,
     {
       ...props,
@@ -965,10 +1185,10 @@ function Table({ size = "comfortable", className, ...props }) {
   );
 }
 function TableHeader(props) {
-  return /* @__PURE__ */ jsx10(AriaTableHeader, { ...props });
+  return /* @__PURE__ */ jsx11(AriaTableHeader, { ...props });
 }
 function Column(props) {
-  return /* @__PURE__ */ jsx10(
+  return /* @__PURE__ */ jsx11(
     AriaColumn,
     {
       ...props,
@@ -978,18 +1198,18 @@ function Column(props) {
         "cursor-default select-none outline-none",
         "focus-visible:outline-2 focus-visible:outline-ring focus-visible:outline-offset-[-2px]"
       ].join(" "),
-      children: ({ allowsSorting, sortDirection }) => /* @__PURE__ */ jsxs8("span", { className: "inline-flex items-center gap-1", children: [
+      children: ({ allowsSorting, sortDirection }) => /* @__PURE__ */ jsxs9("span", { className: "inline-flex items-center gap-1", children: [
         props.children,
-        allowsSorting && /* @__PURE__ */ jsx10("span", { "aria-hidden": "true", className: "text-muted-foreground", children: sortDirection === "ascending" ? "\u25B2" : sortDirection === "descending" ? "\u25BC" : "\u25B4" })
+        allowsSorting && /* @__PURE__ */ jsx11("span", { "aria-hidden": "true", className: "text-muted-foreground", children: sortDirection === "ascending" ? "\u25B2" : sortDirection === "descending" ? "\u25BC" : "\u25B4" })
       ] })
     }
   );
 }
 function TableBody(props) {
-  return /* @__PURE__ */ jsx10(AriaTableBody, { ...props });
+  return /* @__PURE__ */ jsx11(AriaTableBody, { ...props });
 }
 function Row(props) {
-  return /* @__PURE__ */ jsx10(
+  return /* @__PURE__ */ jsx11(
     AriaRow,
     {
       ...props,
@@ -1005,7 +1225,7 @@ function Row(props) {
   );
 }
 function Cell(props) {
-  return /* @__PURE__ */ jsx10(
+  return /* @__PURE__ */ jsx11(
     AriaCell,
     {
       ...props,
@@ -1026,8 +1246,8 @@ import {
   Dialog as AriaDialog,
   Heading
 } from "react-aria-components";
-import { X } from "lucide-react";
-import { Fragment as Fragment2, jsx as jsx11, jsxs as jsxs9 } from "react/jsx-runtime";
+import { X as X2 } from "lucide-react";
+import { Fragment as Fragment2, jsx as jsx12, jsxs as jsxs10 } from "react/jsx-runtime";
 var sizeStyles2 = {
   sm: "max-w-md",
   md: "max-w-lg",
@@ -1043,7 +1263,7 @@ function Dialog({
   children,
   className
 }) {
-  return /* @__PURE__ */ jsx11(
+  return /* @__PURE__ */ jsx12(
     ModalOverlay,
     {
       isOpen,
@@ -1055,7 +1275,7 @@ function Dialog({
         "entering:animate-in entering:fade-in",
         "exiting:animate-out exiting:fade-out"
       ].join(" "),
-      children: /* @__PURE__ */ jsx11(
+      children: /* @__PURE__ */ jsx12(
         Modal,
         {
           className: [
@@ -1066,9 +1286,9 @@ function Dialog({
             "exiting:animate-out exiting:zoom-out-95 exiting:fade-out",
             className
           ].filter(Boolean).join(" "),
-          children: /* @__PURE__ */ jsx11(AriaDialog, { className: "outline-none flex flex-col max-h-[85vh]", children: ({ close }) => /* @__PURE__ */ jsxs9(Fragment2, { children: [
-            /* @__PURE__ */ jsxs9("div", { className: "flex items-center justify-between px-6 py-4 border-b border-border", children: [
-              /* @__PURE__ */ jsx11(
+          children: /* @__PURE__ */ jsx12(AriaDialog, { className: "outline-none flex flex-col max-h-[85vh]", children: ({ close }) => /* @__PURE__ */ jsxs10(Fragment2, { children: [
+            /* @__PURE__ */ jsxs10("div", { className: "flex items-center justify-between px-6 py-4 border-b border-border", children: [
+              /* @__PURE__ */ jsx12(
                 Heading,
                 {
                   slot: "title",
@@ -1076,7 +1296,7 @@ function Dialog({
                   children: title
                 }
               ),
-              /* @__PURE__ */ jsx11(
+              /* @__PURE__ */ jsx12(
                 "button",
                 {
                   type: "button",
@@ -1088,11 +1308,11 @@ function Dialog({
                     "transition-colors"
                   ].join(" "),
                   "aria-label": "Close",
-                  children: /* @__PURE__ */ jsx11(X, { size: 20, "aria-hidden": "true" })
+                  children: /* @__PURE__ */ jsx12(X2, { size: 20, "aria-hidden": "true" })
                 }
               )
             ] }),
-            /* @__PURE__ */ jsx11("div", { className: "px-6 py-4 overflow-y-auto", children })
+            /* @__PURE__ */ jsx12("div", { className: "px-6 py-4 overflow-y-auto", children })
           ] }) })
         }
       )
@@ -1101,21 +1321,21 @@ function Dialog({
 }
 
 // src/components/Dialog/DialogFooter.tsx
-import { jsx as jsx12 } from "react/jsx-runtime";
+import { jsx as jsx13 } from "react/jsx-runtime";
 
 // src/components/Toast/Toast.tsx
 import {
-  createContext as createContext2,
+  createContext,
   useCallback as useCallback2,
-  useContext as useContext2,
+  useContext,
   useEffect as useEffect2,
   useRef as useRef4,
-  useState as useState5
+  useState as useState6
 } from "react";
 import { createPortal as createPortal2 } from "react-dom";
-import { CheckCircle, XCircle, Info, X as X2 } from "lucide-react";
-import { jsx as jsx13, jsxs as jsxs10 } from "react/jsx-runtime";
-var ToastContext = createContext2(null);
+import { CheckCircle as CheckCircle3, XCircle as XCircle2, Info as Info2, X as X3 } from "lucide-react";
+import { jsx as jsx14, jsxs as jsxs11 } from "react/jsx-runtime";
+var ToastContext = createContext(null);
 var toastCounter = 0;
 var defaultDuration = {
   success: 5e3,
@@ -1124,22 +1344,22 @@ var defaultDuration = {
 };
 var variantConfig = {
   success: {
-    icon: CheckCircle,
+    icon: CheckCircle3,
     containerClass: "bg-success-surface border-success-border text-success",
     iconClass: "text-success"
   },
   error: {
-    icon: XCircle,
+    icon: XCircle2,
     containerClass: "bg-destructive-surface border-destructive-border text-destructive",
     iconClass: "text-destructive"
   },
   info: {
-    icon: Info,
+    icon: Info2,
     containerClass: "bg-info-surface border-info-border text-info",
     iconClass: "text-info"
   }
 };
-var PlacementContext = createContext2("bottom-right");
+var PlacementContext = createContext("bottom-right");
 var exitAnimationByPlacement = {
   "top-center": "-translate-y-full opacity-0",
   "top-right": "translate-x-full opacity-0",
@@ -1156,9 +1376,9 @@ function ToastItem({
   toast,
   onRemove
 }) {
-  const [isExiting, setIsExiting] = useState5(false);
+  const [isExiting, setIsExiting] = useState6(false);
   const timerRef = useRef4(null);
-  const placement = useContext2(PlacementContext);
+  const placement = useContext(PlacementContext);
   const config = variantConfig[toast.variant];
   const IconComponent = config.icon;
   const dismiss = useCallback2(() => {
@@ -1172,7 +1392,7 @@ function ToastItem({
       if (timerRef.current) clearTimeout(timerRef.current);
     };
   }, [toast.duration, toast.variant, dismiss]);
-  return /* @__PURE__ */ jsxs10(
+  return /* @__PURE__ */ jsxs11(
     "div",
     {
       role: "status",
@@ -1185,16 +1405,16 @@ function ToastItem({
         config.containerClass
       ].join(" "),
       children: [
-        /* @__PURE__ */ jsx13(IconComponent, { size: 20, className: ["shrink-0 mt-0.5", config.iconClass].join(" "), "aria-hidden": "true" }),
-        /* @__PURE__ */ jsx13("p", { className: "flex-1 text-sm font-medium", children: toast.message }),
-        /* @__PURE__ */ jsx13(
+        /* @__PURE__ */ jsx14(IconComponent, { size: 20, className: ["shrink-0 mt-0.5", config.iconClass].join(" "), "aria-hidden": "true" }),
+        /* @__PURE__ */ jsx14("p", { className: "flex-1 text-sm font-medium", children: toast.message }),
+        /* @__PURE__ */ jsx14(
           "button",
           {
             type: "button",
             onClick: dismiss,
             className: "shrink-0 rounded-sm p-0.5 opacity-70 hover:opacity-100 transition-opacity outline-none focus-visible:ring-2 focus-visible:ring-current",
             "aria-label": "Dismiss",
-            children: /* @__PURE__ */ jsx13(X2, { size: 16, "aria-hidden": "true" })
+            children: /* @__PURE__ */ jsx14(X3, { size: 16, "aria-hidden": "true" })
           }
         )
       ]
@@ -1214,7 +1434,7 @@ function ToastContainer({
 }) {
   if (toasts.length === 0) return null;
   return createPortal2(
-    /* @__PURE__ */ jsx13(PlacementContext.Provider, { value: placement, children: /* @__PURE__ */ jsx13("div", { className: containerPositionStyles[placement], children: toasts.map((toast) => /* @__PURE__ */ jsx13(ToastItem, { toast, onRemove: removeToast }, toast.id)) }) }),
+    /* @__PURE__ */ jsx14(PlacementContext.Provider, { value: placement, children: /* @__PURE__ */ jsx14("div", { className: containerPositionStyles[placement], children: toasts.map((toast) => /* @__PURE__ */ jsx14(ToastItem, { toast, onRemove: removeToast }, toast.id)) }) }),
     document.body
   );
 }
@@ -1233,7 +1453,7 @@ function createToastBridge() {
   };
 }
 function ToastProvider({ children, bridge, placement = "bottom-right" }) {
-  const [toasts, setToasts] = useState5([]);
+  const [toasts, setToasts] = useState6([]);
   const addToast = useCallback2((toast) => {
     const id = `toast-${++toastCounter}`;
     setToasts((prev) => [...prev, { ...toast, id }]);
@@ -1245,13 +1465,13 @@ function ToastProvider({ children, bridge, placement = "bottom-right" }) {
     if (!bridge) return;
     return bridge.subscribe(addToast);
   }, [bridge, addToast]);
-  return /* @__PURE__ */ jsxs10(ToastContext.Provider, { value: { toasts, addToast, removeToast }, children: [
+  return /* @__PURE__ */ jsxs11(ToastContext.Provider, { value: { toasts, addToast, removeToast }, children: [
     children,
-    /* @__PURE__ */ jsx13(ToastContainer, { toasts, removeToast, placement })
+    /* @__PURE__ */ jsx14(ToastContainer, { toasts, removeToast, placement })
   ] });
 }
 function useToast() {
-  const context = useContext2(ToastContext);
+  const context = useContext(ToastContext);
   if (!context) {
     throw new Error("useToast must be used within a ToastProvider");
   }
@@ -1263,7 +1483,7 @@ function useToast() {
 }
 
 // src/components/EmptyState/EmptyState.tsx
-import { jsx as jsx14, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx15, jsxs as jsxs12 } from "react/jsx-runtime";
 function EmptyState({
   icon,
   title,
@@ -1271,7 +1491,7 @@ function EmptyState({
   action,
   className
 }) {
-  return /* @__PURE__ */ jsxs11(
+  return /* @__PURE__ */ jsxs12(
     "div",
     {
       className: [
@@ -1279,10 +1499,10 @@ function EmptyState({
         className
       ].filter(Boolean).join(" "),
       children: [
-        icon && /* @__PURE__ */ jsx14(Icon, { icon, size: "xl", className: "text-muted-foreground" }),
-        /* @__PURE__ */ jsx14("h3", { className: "text-lg font-semibold text-foreground mt-4", children: title }),
-        description && /* @__PURE__ */ jsx14("p", { className: "text-sm text-muted-foreground mt-2 max-w-sm", children: description }),
-        action && /* @__PURE__ */ jsx14("div", { className: "mt-6", children: action })
+        icon && /* @__PURE__ */ jsx15(Icon, { icon, size: "xl", className: "text-muted-foreground" }),
+        /* @__PURE__ */ jsx15("h3", { className: "text-lg font-semibold text-foreground mt-4", children: title }),
+        description && /* @__PURE__ */ jsx15("p", { className: "text-sm text-muted-foreground mt-2 max-w-sm", children: description }),
+        action && /* @__PURE__ */ jsx15("div", { className: "mt-6", children: action })
       ]
     }
   );
@@ -1292,10 +1512,10 @@ function EmptyState({
 import {
   Checkbox as AriaCheckbox
 } from "react-aria-components";
-import { Check as Check2 } from "lucide-react";
-import { Fragment as Fragment3, jsx as jsx15, jsxs as jsxs12 } from "react/jsx-runtime";
+import { Check as Check3 } from "lucide-react";
+import { Fragment as Fragment3, jsx as jsx16, jsxs as jsxs13 } from "react/jsx-runtime";
 function Checkbox({ children, className, ...props }) {
-  return /* @__PURE__ */ jsx15(
+  return /* @__PURE__ */ jsx16(
     AriaCheckbox,
     {
       ...props,
@@ -1304,8 +1524,8 @@ function Checkbox({ children, className, ...props }) {
         "disabled:opacity-50 disabled:cursor-default",
         className
       ].filter(Boolean).join(" "),
-      children: ({ isSelected, isIndeterminate }) => /* @__PURE__ */ jsxs12(Fragment3, { children: [
-        /* @__PURE__ */ jsxs12(
+      children: ({ isSelected, isIndeterminate }) => /* @__PURE__ */ jsxs13(Fragment3, { children: [
+        /* @__PURE__ */ jsxs13(
           "div",
           {
             className: [
@@ -1315,12 +1535,12 @@ function Checkbox({ children, className, ...props }) {
               isSelected || isIndeterminate ? "bg-primary border-primary" : "bg-background border-border group-hover:border-border"
             ].join(" "),
             children: [
-              isSelected && /* @__PURE__ */ jsx15(Check2, { className: "w-4 h-4 text-primary-foreground", strokeWidth: 3 }),
-              isIndeterminate && /* @__PURE__ */ jsx15("div", { className: "w-3 h-0.5 bg-primary-foreground rounded-full" })
+              isSelected && /* @__PURE__ */ jsx16(Check3, { className: "w-4 h-4 text-primary-foreground", strokeWidth: 3 }),
+              isIndeterminate && /* @__PURE__ */ jsx16("div", { className: "w-3 h-0.5 bg-primary-foreground rounded-full" })
             ]
           }
         ),
-        children && /* @__PURE__ */ jsx15("span", { children })
+        children && /* @__PURE__ */ jsx16("span", { children })
       ] })
     }
   );
@@ -1330,7 +1550,7 @@ function Checkbox({ children, className, ...props }) {
 import {
   Switch as AriaSwitch
 } from "react-aria-components";
-import { Fragment as Fragment4, jsx as jsx16, jsxs as jsxs13 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx17, jsxs as jsxs14 } from "react/jsx-runtime";
 var trackColorMap = {
   primary: "bg-primary",
   success: "bg-success",
@@ -1347,7 +1567,7 @@ function Switch({
   ...props
 }) {
   const isPreset = isPresetColor(color);
-  return /* @__PURE__ */ jsx16(
+  return /* @__PURE__ */ jsx17(
     AriaSwitch,
     {
       ...props,
@@ -1356,8 +1576,8 @@ function Switch({
         "disabled:opacity-50 disabled:cursor-default",
         className
       ].filter(Boolean).join(" "),
-      children: ({ isSelected }) => /* @__PURE__ */ jsxs13(Fragment4, { children: [
-        /* @__PURE__ */ jsx16(
+      children: ({ isSelected }) => /* @__PURE__ */ jsxs14(Fragment4, { children: [
+        /* @__PURE__ */ jsx17(
           "div",
           {
             className: [
@@ -1366,7 +1586,7 @@ function Switch({
               isSelected && isPreset ? trackColorMap[color] : !isSelected ? "bg-border" : ""
             ].join(" "),
             style: isSelected && !isPreset ? { backgroundColor: color } : void 0,
-            children: /* @__PURE__ */ jsx16(
+            children: /* @__PURE__ */ jsx17(
               "div",
               {
                 className: [
@@ -1377,7 +1597,7 @@ function Switch({
             )
           }
         ),
-        children && /* @__PURE__ */ jsx16("span", { children })
+        children && /* @__PURE__ */ jsx17("span", { children })
       ] })
     }
   );
@@ -1388,9 +1608,9 @@ import {
   RadioGroup as AriaRadioGroup,
   Radio as AriaRadio
 } from "react-aria-components";
-import { Fragment as Fragment5, jsx as jsx17, jsxs as jsxs14 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx18, jsxs as jsxs15 } from "react/jsx-runtime";
 function RadioGroup({ children, className, ...props }) {
-  return /* @__PURE__ */ jsx17(
+  return /* @__PURE__ */ jsx18(
     AriaRadioGroup,
     {
       ...props,
@@ -1404,7 +1624,7 @@ function RadioGroup({ children, className, ...props }) {
   );
 }
 function Radio({ children, className, ...props }) {
-  return /* @__PURE__ */ jsx17(
+  return /* @__PURE__ */ jsx18(
     AriaRadio,
     {
       ...props,
@@ -1413,8 +1633,8 @@ function Radio({ children, className, ...props }) {
         "disabled:opacity-50 disabled:cursor-default",
         className
       ].filter(Boolean).join(" "),
-      children: ({ isSelected }) => /* @__PURE__ */ jsxs14(Fragment5, { children: [
-        /* @__PURE__ */ jsx17(
+      children: ({ isSelected }) => /* @__PURE__ */ jsxs15(Fragment5, { children: [
+        /* @__PURE__ */ jsx18(
           "div",
           {
             className: [
@@ -1423,16 +1643,16 @@ function Radio({ children, className, ...props }) {
               "group-focus-visible:ring-2 group-focus-visible:ring-ring group-focus-visible:ring-offset-2",
               isSelected ? "border-primary" : "border-border group-hover:border-border"
             ].join(" "),
-            children: isSelected && /* @__PURE__ */ jsx17("div", { className: "w-2.5 h-2.5 rounded-full bg-primary" })
+            children: isSelected && /* @__PURE__ */ jsx18("div", { className: "w-2.5 h-2.5 rounded-full bg-primary" })
           }
         ),
-        children && /* @__PURE__ */ jsx17("span", { children })
+        children && /* @__PURE__ */ jsx18("span", { children })
       ] })
     }
   );
 }
 function RadioButton({ children, className, ...props }) {
-  return /* @__PURE__ */ jsx17(
+  return /* @__PURE__ */ jsx18(
     AriaRadio,
     {
       ...props,
@@ -1441,7 +1661,7 @@ function RadioButton({ children, className, ...props }) {
         "disabled:opacity-50 disabled:cursor-default",
         className
       ].filter(Boolean).join(" "),
-      children: ({ isSelected }) => /* @__PURE__ */ jsx17(
+      children: ({ isSelected }) => /* @__PURE__ */ jsx18(
         "div",
         {
           className: [
@@ -1458,9 +1678,9 @@ function RadioButton({ children, className, ...props }) {
 }
 
 // src/components/Form/Fieldset/Fieldset.tsx
-import { jsx as jsx18, jsxs as jsxs15 } from "react/jsx-runtime";
+import { jsx as jsx19, jsxs as jsxs16 } from "react/jsx-runtime";
 function Fieldset({ legend, children, className }) {
-  return /* @__PURE__ */ jsxs15(
+  return /* @__PURE__ */ jsxs16(
     "fieldset",
     {
       className: [
@@ -1469,7 +1689,7 @@ function Fieldset({ legend, children, className }) {
         className
       ].filter(Boolean).join(" "),
       children: [
-        legend && /* @__PURE__ */ jsx18(
+        legend && /* @__PURE__ */ jsx19(
           "legend",
           {
             className: [
@@ -1487,71 +1707,9 @@ function Fieldset({ legend, children, className }) {
   );
 }
 
-// src/components/Form/InputGroup/InputGroup.tsx
-import React from "react";
-import { jsx as jsx19 } from "react/jsx-runtime";
-function InputGroup({ children, className }) {
-  const childArray = React.Children.toArray(children).filter(
-    React.isValidElement
-  );
-  return /* @__PURE__ */ jsx19(
-    "div",
-    {
-      className: ["flex items-stretch", className].filter(Boolean).join(" "),
-      children: childArray.map((child, index) => {
-        const position = childArray.length === 1 ? "standalone" : index === 0 ? "start" : index === childArray.length - 1 ? "end" : "middle";
-        return /* @__PURE__ */ jsx19(
-          InputGroupContext.Provider,
-          {
-            value: { inGroup: true, position },
-            children: child
-          },
-          index
-        );
-      })
-    }
-  );
-}
-
-// src/components/Form/InputAddon/InputAddon.tsx
-import { jsx as jsx20 } from "react/jsx-runtime";
-function groupRadiusClass3(position) {
-  switch (position) {
-    case "start":
-      return "rounded-l-(--border-radius-md) rounded-r-none";
-    case "middle":
-      return "rounded-none";
-    case "end":
-      return "rounded-r-(--border-radius-md) rounded-l-none";
-    default:
-      return "rounded-md";
-  }
-}
-function InputAddon({ children, className }) {
-  const { inGroup, position } = useInputGroup();
-  const radiusClass = inGroup ? groupRadiusClass3(position) : "rounded-md";
-  const marginClass = inGroup && position !== "start" && position !== "standalone" ? "-ml-px" : "";
-  return /* @__PURE__ */ jsx20(
-    "div",
-    {
-      className: [
-        "flex items-center self-stretch shrink-0 select-none",
-        "px-3 py-2 text-base",
-        "bg-card",
-        "text-muted-foreground",
-        "border border-border",
-        radiusClass,
-        marginClass,
-        className
-      ].filter(Boolean).join(" "),
-      children
-    }
-  );
-}
-
 // src/components/Heading/Heading.tsx
-import { twMerge as twMerge4 } from "tailwind-merge";
-import { jsx as jsx21 } from "react/jsx-runtime";
+import { twMerge as twMerge8 } from "tailwind-merge";
+import { jsx as jsx20 } from "react/jsx-runtime";
 var defaultSizeMap = {
   h1: "2xl",
   h2: "xl",
@@ -1574,17 +1732,17 @@ var weightStyles = {
   bold: "font-bold"
 };
 function Heading2({
-  as: Tag = "h2",
+  as: Tag2 = "h2",
   size,
   weight = "semibold",
   className,
   children
 }) {
-  const resolvedSize = size ?? defaultSizeMap[Tag];
-  return /* @__PURE__ */ jsx21(
-    Tag,
+  const resolvedSize = size ?? defaultSizeMap[Tag2];
+  return /* @__PURE__ */ jsx20(
+    Tag2,
     {
-      className: twMerge4(
+      className: twMerge8(
         weightStyles[weight],
         "text-foreground",
         sizeStyles3[resolvedSize],
@@ -1595,7 +1753,7 @@ function Heading2({
   );
 }
 function H1(props) {
-  return /* @__PURE__ */ jsx21(
+  return /* @__PURE__ */ jsx20(
     Heading2,
     {
       ...props,
@@ -1606,17 +1764,17 @@ function H1(props) {
   );
 }
 function H2(props) {
-  return /* @__PURE__ */ jsx21(Heading2, { ...props, as: "h2", size: props.size ?? "xl" });
+  return /* @__PURE__ */ jsx20(Heading2, { ...props, as: "h2", size: props.size ?? "xl" });
 }
 function H3(props) {
-  return /* @__PURE__ */ jsx21(Heading2, { ...props, as: "h3", size: props.size ?? "lg" });
+  return /* @__PURE__ */ jsx20(Heading2, { ...props, as: "h3", size: props.size ?? "lg" });
 }
 
 // src/components/Link/Link.tsx
 import {
-  Link as AriaLink
+  Link as AriaLink3
 } from "react-aria-components";
-import { jsx as jsx22 } from "react/jsx-runtime";
+import { jsx as jsx21 } from "react/jsx-runtime";
 var variantStyles2 = {
   default: [
     "text-teal-700 underline",
@@ -1632,8 +1790,8 @@ function Link({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx22(
-    AriaLink,
+  return /* @__PURE__ */ jsx21(
+    AriaLink3,
     {
       ...props,
       className: [
@@ -1652,21 +1810,21 @@ import {
   Breadcrumb as AriaBreadcrumb,
   Link as Link2
 } from "react-aria-components";
-import { ChevronRight } from "lucide-react";
-import { Fragment as Fragment6, jsx as jsx23, jsxs as jsxs16 } from "react/jsx-runtime";
+import { ChevronRight as ChevronRight2 } from "lucide-react";
+import { Fragment as Fragment6, jsx as jsx22, jsxs as jsxs17 } from "react/jsx-runtime";
 function Breadcrumbs({ items, className }) {
-  return /* @__PURE__ */ jsx23(
+  return /* @__PURE__ */ jsx22(
     "nav",
     {
       "aria-label": "Breadcrumb",
       className,
-      children: /* @__PURE__ */ jsx23(
+      children: /* @__PURE__ */ jsx22(
         AriaBreadcrumbs,
         {
           className: "flex items-center gap-1 text-sm min-w-0",
           children: items.map((item, index) => {
             const isLast = index === items.length - 1;
-            return /* @__PURE__ */ jsx23(
+            return /* @__PURE__ */ jsx22(
               AriaBreadcrumb,
               {
                 id: item.id,
@@ -1674,8 +1832,8 @@ function Breadcrumbs({ items, className }) {
                   "flex items-center gap-1",
                   isLast ? "min-w-0" : "shrink-0"
                 ].join(" "),
-                children: isLast ? /* @__PURE__ */ jsx23("span", { className: "font-medium text-foreground truncate", children: item.label }) : /* @__PURE__ */ jsxs16(Fragment6, { children: [
-                  /* @__PURE__ */ jsx23(
+                children: isLast ? /* @__PURE__ */ jsx22("span", { className: "font-medium text-foreground truncate", children: item.label }) : /* @__PURE__ */ jsxs17(Fragment6, { children: [
+                  /* @__PURE__ */ jsx22(
                     Link2,
                     {
                       href: item.href,
@@ -1683,8 +1841,8 @@ function Breadcrumbs({ items, className }) {
                       children: item.label
                     }
                   ),
-                  /* @__PURE__ */ jsx23(
-                    ChevronRight,
+                  /* @__PURE__ */ jsx22(
+                    ChevronRight2,
                     {
                       className: "shrink-0 text-neutral-400",
                       size: 16,
@@ -1702,94 +1860,13 @@ function Breadcrumbs({ items, className }) {
   );
 }
 
-// src/components/ButtonLink/ButtonLink.tsx
-import {
-  Link as AriaLink2
-} from "react-aria-components";
-import { twMerge as twMerge5 } from "tailwind-merge";
-import { jsx as jsx24, jsxs as jsxs17 } from "react/jsx-runtime";
-var iconSizeMap3 = {
-  xs: "sm",
-  sm: "sm",
-  md: "sm",
-  lg: "md"
-};
-function ButtonLink({
-  variant = "primary",
-  size = "md",
-  iconLeft,
-  iconRight,
-  className,
-  children,
-  ...props
-}) {
-  return /* @__PURE__ */ jsxs17(
-    AriaLink2,
-    {
-      ...props,
-      className: twMerge5(
-        "inline-flex items-center justify-center gap-2 cursor-pointer",
-        "rounded-md",
-        "font-medium",
-        "leading-tight",
-        "outline-none transition-colors no-underline",
-        "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
-        variantStyles[variant],
-        sizeStyles[size],
-        className
-      ),
-      children: [
-        iconLeft && /* @__PURE__ */ jsx24(Icon, { icon: iconLeft, size: iconSizeMap3[size] }),
-        children,
-        iconRight && /* @__PURE__ */ jsx24(Icon, { icon: iconRight, size: iconSizeMap3[size] })
-      ]
-    }
-  );
-}
-var squareSizeStyles2 = {
-  sm: "h-8 w-8",
-  md: "h-10 w-10",
-  lg: "h-12 w-12"
-};
-function IconButtonLink({
-  icon,
-  "aria-label": ariaLabel,
-  variant = "ghost",
-  size = "md",
-  showTooltip = true,
-  className,
-  ...props
-}) {
-  const link = /* @__PURE__ */ jsx24(
-    AriaLink2,
-    {
-      ...props,
-      "aria-label": ariaLabel,
-      className: twMerge5(
-        "inline-flex items-center justify-center cursor-pointer",
-        "rounded-md",
-        "outline-none transition-colors no-underline",
-        "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
-        variantStyles[variant],
-        squareSizeStyles2[size],
-        className
-      ),
-      children: /* @__PURE__ */ jsx24(Icon, { icon, size: iconSizeMap3[size] })
-    }
-  );
-  if (showTooltip) {
-    return /* @__PURE__ */ jsx24(Tooltip, { content: ariaLabel, children: link });
-  }
-  return link;
-}
-
 // src/components/ToggleButton/ToggleButton.tsx
 import {
-  ToggleButton as AriaToggleButton
+  ToggleButton as AriaToggleButton2
 } from "react-aria-components";
-import { twMerge as twMerge6 } from "tailwind-merge";
-import { jsx as jsx25 } from "react/jsx-runtime";
-var squareSizeStyles3 = {
+import { twMerge as twMerge9 } from "tailwind-merge";
+import { jsx as jsx23 } from "react/jsx-runtime";
+var squareSizeStyles2 = {
   xs: "h-6 w-6 text-xs",
   sm: "h-7 w-7 text-sm",
   md: "h-8 w-8 text-base",
@@ -1833,11 +1910,11 @@ function ToggleButton({
   ...props
 }) {
   const styles = variantStyles3[variant];
-  return /* @__PURE__ */ jsx25(
-    AriaToggleButton,
+  return /* @__PURE__ */ jsx23(
+    AriaToggleButton2,
     {
       ...props,
-      className: ({ isSelected }) => twMerge6(
+      className: ({ isSelected }) => twMerge9(
         "inline-flex items-center justify-center gap-2 cursor-pointer",
         isSquare ? "rounded-none" : "rounded-md",
         "font-medium",
@@ -1845,7 +1922,7 @@ function ToggleButton({
         "outline-none transition-colors",
         "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
         "disabled:opacity-50 disabled:pointer-events-none",
-        isSquare ? squareSizeStyles3[size] : sizeStyles[size],
+        isSquare ? squareSizeStyles2[size] : sizeStyles[size],
         isSelected ? styles.selected : styles.base,
         className
       )
@@ -1853,78 +1930,6 @@ function ToggleButton({
   );
 }
 
-// src/components/ToggleButtonGroup/ToggleButtonGroup.tsx
-import { createContext as createContext3, useContext as useContext3 } from "react";
-import { twMerge as twMerge7 } from "tailwind-merge";
-import {
-  RadioGroup as AriaRadioGroup2,
-  Radio as AriaRadio2
-} from "react-aria-components";
-import { jsx as jsx26 } from "react/jsx-runtime";
-var ToggleButtonGroupContext = createContext3({
-  size: "md"
-});
-var sizeStyles4 = {
-  sm: "px-2.5 py-1 text-xs gap-1",
-  md: "px-3 py-1.5 text-sm gap-1.5",
-  lg: "px-4 py-2 text-base gap-2"
-};
-var iconOnlySizeStyles = {
-  sm: "p-1",
-  md: "p-1.5",
-  lg: "p-2"
-};
-function ToggleButtonGroup({
-  size = "md",
-  className,
-  children,
-  ...props
-}) {
-  return /* @__PURE__ */ jsx26(ToggleButtonGroupContext.Provider, { value: { size }, children: /* @__PURE__ */ jsx26(
-    AriaRadioGroup2,
-    {
-      ...props,
-      orientation: "horizontal",
-      className: twMerge7(
-        "inline-flex items-center rounded-lg border border-border bg-muted p-0.5 gap-0.5",
-        className
-      ),
-      children
-    }
-  ) });
-}
-function ToggleButtonGroupItem({
-  children,
-  isIconOnly,
-  className,
-  ...props
-}) {
-  const { size } = useContext3(ToggleButtonGroupContext);
-  return /* @__PURE__ */ jsx26(
-    AriaRadio2,
-    {
-      ...props,
-      className: ({ isSelected, isHovered, isPressed, isDisabled }) => twMerge7(
-        // Base layout
-        "inline-flex items-center justify-center",
-        "rounded-md",
-        "font-medium",
-        "outline-none transition-colors cursor-pointer",
-        // Focus ring
-        "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1",
-        // Disabled
-        isDisabled && "opacity-50 pointer-events-none",
-        // Size
-        isIconOnly ? iconOnlySizeStyles[size] : sizeStyles4[size],
-        // Selected state
-        isSelected ? "bg-background text-foreground shadow-sm font-semibold" : isPressed ? "bg-card text-foreground" : isHovered ? "bg-card text-foreground" : "bg-transparent text-muted-foreground",
-        className
-      ),
-      children
-    }
-  );
-}
-
 // src/components/Menu/Menu.tsx
 import {
   MenuTrigger,
@@ -1932,14 +1937,19 @@ import {
   MenuItem as AriaMenuItem,
   Popover as Popover2
 } from "react-aria-components";
-import { jsx as jsx27, jsxs as jsxs18 } from "react/jsx-runtime";
-var popoverStyles = [
-  "bg-background rounded-md",
-  "shadow-lg border border-border",
-  "py-1 min-w-48",
-  "entering:animate-in entering:fade-in entering:zoom-in-95",
-  "exiting:animate-out exiting:fade-out exiting:zoom-out-95"
-].join(" ");
+import { twMerge as twMerge10 } from "tailwind-merge";
+
+// src/components/Menu/menuStyles.ts
+var popoverStyles = `
+  bg-background rounded-md shadow-lg
+  border border-border
+  py-1 min-w-48
+  entering:animate-in entering:fade-in entering:zoom-in-95
+  exiting:animate-out exiting:fade-out exiting:zoom-out-95
+`;
+
+// src/components/Menu/Menu.tsx
+import { jsx as jsx24, jsxs as jsxs18 } from "react/jsx-runtime";
 function Menu({
   items,
   content,
@@ -1954,61 +1964,161 @@ function Menu({
   const selectionProps = selectionMode && selectionMode !== "none" ? { selectionMode, selectedKeys, defaultSelectedKeys, onSelectionChange } : {};
   return /* @__PURE__ */ jsxs18(MenuTrigger, { children: [
     children,
-    /* @__PURE__ */ jsx27(
-      Popover2,
+    /* @__PURE__ */ jsx24(Popover2, { className: twMerge10(popoverStyles, className), children: items ? /* @__PURE__ */ jsx24(
+      AriaMenu,
       {
-        className: [popoverStyles, className].filter(Boolean).join(" "),
-        children: items ? /* @__PURE__ */ jsx27(
-          AriaMenu,
+        items,
+        onAction: (key) => {
+          const item = items.find((i) => i.id === key);
+          item?.onAction?.();
+          onAction?.(key);
+        },
+        ...selectionProps,
+        className: "outline-none",
+        children: (item) => /* @__PURE__ */ jsxs18(
+          AriaMenuItem,
+          {
+            id: item.id,
+            href: item.href,
+            target: item.target,
+            isDisabled: item.isDisabled,
+            className: [
+              "flex items-center gap-2 px-3 py-2 text-sm outline-none cursor-default",
+              "transition-colors",
+              "focus:bg-muted",
+              "hover:bg-muted",
+              "disabled:opacity-50 disabled:pointer-events-none",
+              item.isDanger ? "text-destructive" : "text-foreground"
+            ].filter(Boolean).join(" "),
+            children: [
+              item.icon && /* @__PURE__ */ jsx24(Icon, { icon: item.icon, size: "sm" }),
+              /* @__PURE__ */ jsx24("span", { className: "flex-1", children: item.label }),
+              item.endContent && /* @__PURE__ */ jsx24("span", { className: "ml-auto flex items-center", children: item.endContent })
+            ]
+          }
+        )
+      }
+    ) : /* @__PURE__ */ jsx24(
+      AriaMenu,
+      {
+        onAction: (key) => onAction?.(key),
+        ...selectionProps,
+        className: "outline-none",
+        children: content
+      }
+    ) })
+  ] });
+}
+
+// src/components/Menu/useContextMenu.tsx
+import {
+  useCallback as useCallback3,
+  useEffect as useEffect3,
+  useRef as useRef5,
+  useState as useState7
+} from "react";
+import {
+  Menu as AriaMenu2,
+  MenuTrigger as MenuTrigger2,
+  Popover as Popover3,
+  Pressable
+} from "react-aria-components";
+import { twMerge as twMerge11 } from "tailwind-merge";
+import { jsx as jsx25, jsxs as jsxs19 } from "react/jsx-runtime";
+function useContextMenu({
+  content,
+  onAction,
+  className
+}) {
+  const [anchor, setAnchor] = useState7(null);
+  const anchorRef = useRef5(null);
+  const popoverRef = useRef5(null);
+  const isOpen = anchor !== null;
+  const close = useCallback3(() => setAnchor(null), []);
+  const onContextMenu = useCallback3((event) => {
+    event.preventDefault();
+    setAnchor({ x: event.clientX, y: event.clientY });
+  }, []);
+  const onPress = useCallback3((event) => {
+    const rect = event.target.getBoundingClientRect();
+    setAnchor({ x: rect.left, y: rect.bottom });
+  }, []);
+  useEffect3(() => {
+    if (!isOpen) return;
+    const isInside = (target) => popoverRef.current?.contains(target) ?? false;
+    const onPointerDown = (event) => {
+      if (!isInside(event.target)) close();
+    };
+    const onOutsideContextMenu = (event) => {
+      if (isInside(event.target)) return;
+      event.preventDefault();
+      close();
+    };
+    const onKeyDown = (event) => {
+      if (event.key === "Escape") close();
+    };
+    document.addEventListener("pointerdown", onPointerDown, true);
+    document.addEventListener("contextmenu", onOutsideContextMenu, true);
+    document.addEventListener("keydown", onKeyDown, true);
+    return () => {
+      document.removeEventListener("pointerdown", onPointerDown, true);
+      document.removeEventListener("contextmenu", onOutsideContextMenu, true);
+      document.removeEventListener("keydown", onKeyDown, true);
+    };
+  }, [isOpen, close]);
+  const menu = /* @__PURE__ */ jsxs19(
+    MenuTrigger2,
+    {
+      isOpen,
+      onOpenChange: (open) => {
+        if (!open) close();
+      },
+      children: [
+        /* @__PURE__ */ jsx25(Pressable, { children: /* @__PURE__ */ jsx25(
+          "span",
           {
-            items,
-            onAction: (key) => {
-              const item = items.find((i) => i.id === key);
-              item?.onAction?.();
-              onAction?.(key);
-            },
-            ...selectionProps,
-            className: "outline-none",
-            children: (item) => /* @__PURE__ */ jsxs18(
-              AriaMenuItem,
+            ref: anchorRef,
+            "aria-hidden": true,
+            className: "pointer-events-none fixed h-0 w-0",
+            style: { left: anchor?.x ?? 0, top: anchor?.y ?? 0 }
+          }
+        ) }),
+        /* @__PURE__ */ jsx25(
+          Popover3,
+          {
+            isNonModal: true,
+            placement: "bottom start",
+            ref: popoverRef,
+            className: twMerge11(popoverStyles, className),
+            children: /* @__PURE__ */ jsx25(
+              AriaMenu2,
               {
-                id: item.id,
-                href: item.href,
-                target: item.target,
-                isDisabled: item.isDisabled,
-                className: [
-                  "flex items-center gap-2 px-3 py-2 text-sm outline-none cursor-default",
-                  "transition-colors",
-                  "focus:bg-muted",
-                  "hover:bg-muted",
-                  "disabled:opacity-50 disabled:pointer-events-none",
-                  item.isDanger ? "text-destructive" : "text-foreground"
-                ].filter(Boolean).join(" "),
-                children: [
-                  item.icon && /* @__PURE__ */ jsx27(Icon, { icon: item.icon, size: "sm" }),
-                  /* @__PURE__ */ jsx27("span", { className: "flex-1", children: item.label }),
-                  item.endContent && /* @__PURE__ */ jsx27("span", { className: "ml-auto flex items-center", children: item.endContent })
-                ]
+                autoFocus: "first",
+                onAction: (key) => {
+                  onAction?.(String(key));
+                  close();
+                },
+                className: "outline-none",
+                children: content
               }
             )
           }
-        ) : /* @__PURE__ */ jsx27(
-          AriaMenu,
-          {
-            onAction: (key) => onAction?.(key),
-            ...selectionProps,
-            className: "outline-none",
-            children: content
-          }
         )
-      }
-    )
-  ] });
+      ]
+    }
+  );
+  return {
+    targetProps: { onContextMenu },
+    triggerProps: { onPress },
+    menu,
+    isOpen,
+    close
+  };
 }
 
 // src/components/Menu/MenuItem.tsx
 import { MenuItem as AriaMenuItem2 } from "react-aria-components";
-import { jsx as jsx28, jsxs as jsxs19 } from "react/jsx-runtime";
+import { jsx as jsx26, jsxs as jsxs20 } from "react/jsx-runtime";
 function MenuItem({
   id,
   children,
@@ -2022,7 +2132,7 @@ function MenuItem({
   textValue,
   className
 }) {
-  return /* @__PURE__ */ jsxs19(
+  return /* @__PURE__ */ jsxs20(
     AriaMenuItem2,
     {
       id,
@@ -2041,9 +2151,9 @@ function MenuItem({
         className
       ].filter(Boolean).join(" "),
       children: [
-        icon && /* @__PURE__ */ jsx28(Icon, { icon, size: "sm" }),
-        /* @__PURE__ */ jsx28("span", { className: "flex-1", children }),
-        endContent && /* @__PURE__ */ jsx28("span", { className: "ml-auto flex items-center", children: endContent })
+        icon && /* @__PURE__ */ jsx26(Icon, { icon, size: "sm" }),
+        /* @__PURE__ */ jsx26("span", { className: "flex-1", children }),
+        endContent && /* @__PURE__ */ jsx26("span", { className: "ml-auto flex items-center", children: endContent })
       ]
     }
   );
@@ -2051,8 +2161,8 @@ function MenuItem({
 
 // src/components/Menu/MenuCheckboxItem.tsx
 import { MenuItem as AriaMenuItem3 } from "react-aria-components";
-import { Check as Check3 } from "lucide-react";
-import { Fragment as Fragment7, jsx as jsx29, jsxs as jsxs20 } from "react/jsx-runtime";
+import { Check as Check4 } from "lucide-react";
+import { Fragment as Fragment7, jsx as jsx27, jsxs as jsxs21 } from "react/jsx-runtime";
 function MenuCheckboxItem({
   id,
   children,
@@ -2060,7 +2170,7 @@ function MenuCheckboxItem({
   isDisabled,
   className
 }) {
-  return /* @__PURE__ */ jsx29(
+  return /* @__PURE__ */ jsx27(
     AriaMenuItem3,
     {
       id,
@@ -2076,9 +2186,9 @@ function MenuCheckboxItem({
         isSelected ? "font-medium" : "",
         className
       ].filter(Boolean).join(" "),
-      children: ({ isSelected }) => /* @__PURE__ */ jsxs20(Fragment7, { children: [
-        /* @__PURE__ */ jsx29("span", { className: "flex items-center justify-center w-4 h-4 shrink-0", children: isSelected && /* @__PURE__ */ jsx29(Check3, { size: 14, className: "text-primary", "aria-hidden": "true" }) }),
-        /* @__PURE__ */ jsx29("span", { className: "flex-1", children })
+      children: ({ isSelected }) => /* @__PURE__ */ jsxs21(Fragment7, { children: [
+        /* @__PURE__ */ jsx27("span", { className: "flex items-center justify-center w-4 h-4 shrink-0", children: isSelected && /* @__PURE__ */ jsx27(Check4, { size: 14, className: "text-primary", "aria-hidden": "true" }) }),
+        /* @__PURE__ */ jsx27("span", { className: "flex-1", children })
       ] })
     }
   );
@@ -2089,15 +2199,15 @@ import {
   MenuSection as AriaMenuSection,
   Header
 } from "react-aria-components";
-import { jsx as jsx30, jsxs as jsxs21 } from "react/jsx-runtime";
+import { jsx as jsx28, jsxs as jsxs22 } from "react/jsx-runtime";
 function MenuSection({
   header,
   children,
   "aria-label": ariaLabel,
   className
 }) {
-  return /* @__PURE__ */ jsxs21(AriaMenuSection, { className, "aria-label": ariaLabel, children: [
-    header && /* @__PURE__ */ jsx30(
+  return /* @__PURE__ */ jsxs22(AriaMenuSection, { className, "aria-label": ariaLabel, children: [
+    header && /* @__PURE__ */ jsx28(
       Header,
       {
         className: [
@@ -2116,16 +2226,16 @@ function MenuSection({
 
 // src/components/Menu/MenuHeader.tsx
 import { Header as Header2 } from "react-aria-components";
-import { jsx as jsx31 } from "react/jsx-runtime";
+import { jsx as jsx29 } from "react/jsx-runtime";
 function MenuHeader({ children, className }) {
-  return /* @__PURE__ */ jsx31(Header2, { className, children });
+  return /* @__PURE__ */ jsx29(Header2, { className, children });
 }
 
 // src/components/Menu/MenuSeparator.tsx
 import { Separator } from "react-aria-components";
-import { jsx as jsx32 } from "react/jsx-runtime";
+import { jsx as jsx30 } from "react/jsx-runtime";
 function MenuSeparator({ className }) {
-  return /* @__PURE__ */ jsx32(
+  return /* @__PURE__ */ jsx30(
     Separator,
     {
       className: [
@@ -2142,17 +2252,17 @@ import {
   Popover as AriaPopover,
   Button as AriaButton3
 } from "react-aria-components";
-import { twMerge as twMerge8 } from "tailwind-merge";
-import { jsx as jsx33 } from "react/jsx-runtime";
-function Popover3({ children, isOpen, onOpenChange }) {
-  return /* @__PURE__ */ jsx33(DialogTrigger, { isOpen, onOpenChange, children });
+import { twMerge as twMerge12 } from "tailwind-merge";
+import { jsx as jsx31 } from "react/jsx-runtime";
+function Popover4({ children, isOpen, onOpenChange }) {
+  return /* @__PURE__ */ jsx31(DialogTrigger, { isOpen, onOpenChange, children });
 }
 function PopoverTrigger({ children, className }) {
   const cx = `
     inline-flex items-center bg-transparent border-none p-0 outline-none cursor-pointer
     focus-visible:ring-2 focus-visible:ring-ring focus-visible:rounded-sm
   `;
-  return /* @__PURE__ */ jsx33(AriaButton3, { className: twMerge8(cx, className), children });
+  return /* @__PURE__ */ jsx31(AriaButton3, { className: twMerge12(cx, className), children });
 }
 function PopoverContent({
   placement = "bottom",
@@ -2173,33 +2283,33 @@ function PopoverContent({
     entering:placement-left:slide-in-from-right-1
     entering:placement-right:slide-in-from-left-1
   `;
-  return /* @__PURE__ */ jsx33(
+  return /* @__PURE__ */ jsx31(
     AriaPopover,
     {
       ...rest,
       placement,
       offset: offsetPx,
-      className: twMerge8(cx, className),
+      className: twMerge12(cx, className),
       children
     }
   );
 }
 
 // src/components/Tabs/Tabs.tsx
-import { createContext as createContext4, useContext as useContext4 } from "react";
-import { twMerge as twMerge9 } from "tailwind-merge";
+import { createContext as createContext2, useContext as useContext2 } from "react";
+import { twMerge as twMerge13 } from "tailwind-merge";
 import {
   Tabs as AriaTabs,
   TabList as AriaTabList,
   Tab as AriaTab,
   TabPanel as AriaTabPanel
 } from "react-aria-components";
-import { jsx as jsx34 } from "react/jsx-runtime";
-var TabsContext = createContext4({
+import { jsx as jsx32 } from "react/jsx-runtime";
+var TabsContext = createContext2({
   variant: "underline",
   size: "md"
 });
-var sizeStyles5 = {
+var sizeStyles4 = {
   sm: "px-3 py-1.5 text-sm",
   md: "px-4 py-2 text-base",
   lg: "px-6 py-3 text-lg"
@@ -2212,12 +2322,12 @@ function Tabs({
   children,
   ...props
 }) {
-  return /* @__PURE__ */ jsx34(TabsContext.Provider, { value: { variant, size }, children: /* @__PURE__ */ jsx34(
+  return /* @__PURE__ */ jsx32(TabsContext.Provider, { value: { variant, size }, children: /* @__PURE__ */ jsx32(
     AriaTabs,
     {
       ...props,
       orientation,
-      className: twMerge9(
+      className: twMerge13(
         orientation === "vertical" ? "flex" : "",
         className
       ),
@@ -2229,14 +2339,14 @@ function TabList({
   className,
   ...props
 }) {
-  const { variant } = useContext4(TabsContext);
+  const { variant } = useContext2(TabsContext);
   const baseStyles = variant === "unstyled" ? "flex items-center" : variant === "underline" ? "flex items-center border-b border-border" : "inline-flex items-center bg-muted rounded-lg p-1 gap-1";
   const verticalStyles = variant === "unstyled" ? "flex-col" : variant === "underline" ? "flex-col border-b-0 border-r border-border" : "flex-col";
-  return /* @__PURE__ */ jsx34(
+  return /* @__PURE__ */ jsx32(
     AriaTabList,
     {
       ...props,
-      className: ({ orientation }) => twMerge9(
+      className: ({ orientation }) => twMerge13(
         baseStyles,
         orientation === "vertical" ? verticalStyles : "",
         className
@@ -2245,21 +2355,21 @@ function TabList({
   );
 }
 function Tab({ className, ...props }) {
-  const { variant, size } = useContext4(TabsContext);
-  return /* @__PURE__ */ jsx34(
+  const { variant, size } = useContext2(TabsContext);
+  return /* @__PURE__ */ jsx32(
     AriaTab,
     {
       ...props,
       className: ({ isSelected, isDisabled, isHovered, isPressed }) => {
         if (variant === "unstyled") {
-          return twMerge9(
+          return twMerge13(
             "cursor-pointer outline-none",
             "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
             isDisabled ? "opacity-50 pointer-events-none" : "",
             className
           );
         }
-        return twMerge9(
+        return twMerge13(
           // Base
           "cursor-pointer outline-none transition-colors",
           "font-medium",
@@ -2268,7 +2378,7 @@ function Tab({ className, ...props }) {
           // Disabled
           isDisabled ? "opacity-50 pointer-events-none" : "",
           // Size
-          sizeStyles5[size],
+          sizeStyles4[size],
           ...getTabVariantStyles(variant, {
             isSelected,
             isHovered,
@@ -2302,12 +2412,12 @@ function getTabVariantStyles(variant, state) {
   ];
 }
 function TabPanel({ className, ...props }) {
-  const { variant } = useContext4(TabsContext);
-  return /* @__PURE__ */ jsx34(
+  const { variant } = useContext2(TabsContext);
+  return /* @__PURE__ */ jsx32(
     AriaTabPanel,
     {
       ...props,
-      className: twMerge9(
+      className: twMerge13(
         variant === "unstyled" ? "outline-none" : "mt-4 outline-none",
         className
       )
@@ -2324,17 +2434,17 @@ import {
 } from "react-aria-components";
 
 // src/components/SegmentedControl/SegmentedControl.tsx
-import { createContext as createContext5, useContext as useContext5 } from "react";
-import { twMerge as twMerge10 } from "tailwind-merge";
+import { createContext as createContext3, useContext as useContext3 } from "react";
+import { twMerge as twMerge14 } from "tailwind-merge";
 import {
   ToggleButtonGroup as AriaToggleButtonGroup,
-  ToggleButton as AriaToggleButton2
+  ToggleButton as AriaToggleButton3
 } from "react-aria-components";
-import { jsx as jsx35 } from "react/jsx-runtime";
-var SegmentedControlContext = createContext5({
+import { jsx as jsx33 } from "react/jsx-runtime";
+var SegmentedControlContext = createContext3({
   size: "md"
 });
-var sizeStyles6 = {
+var sizeStyles5 = {
   sm: "px-2.5 py-1 text-xs",
   md: "px-3 py-1.5 text-sm",
   lg: "px-4 py-2 text-base"
@@ -2350,7 +2460,7 @@ function SegmentedControl({
   ...props
 }) {
   const isNoneMode = selectionMode === "none";
-  return /* @__PURE__ */ jsx35(SegmentedControlContext.Provider, { value: { size }, children: /* @__PURE__ */ jsx35(
+  return /* @__PURE__ */ jsx33(SegmentedControlContext.Provider, { value: { size }, children: /* @__PURE__ */ jsx33(
     AriaToggleButtonGroup,
     {
       ...props,
@@ -2358,7 +2468,7 @@ function SegmentedControl({
       selectedKeys: isNoneMode ? /* @__PURE__ */ new Set() : selectedKeys,
       defaultSelectedKeys: isNoneMode ? void 0 : defaultSelectedKeys,
       onSelectionChange: isNoneMode ? void 0 : onSelectionChange,
-      className: twMerge10(
+      className: twMerge14(
         "inline-flex items-center rounded-lg border border-border bg-muted p-0.5 gap-0.5",
         className
       ),
@@ -2370,12 +2480,12 @@ function SegmentedControlItem({
   className,
   ...props
 }) {
-  const { size } = useContext5(SegmentedControlContext);
-  return /* @__PURE__ */ jsx35(
-    AriaToggleButton2,
+  const { size } = useContext3(SegmentedControlContext);
+  return /* @__PURE__ */ jsx33(
+    AriaToggleButton3,
     {
       ...props,
-      className: ({ isSelected, isHovered, isPressed, isDisabled }) => twMerge10(
+      className: ({ isSelected, isHovered, isPressed, isDisabled }) => twMerge14(
         // Base layout
         "inline-flex items-center justify-center",
         "rounded-md",
@@ -2386,7 +2496,7 @@ function SegmentedControlItem({
         // Disabled
         isDisabled && "opacity-50 pointer-events-none",
         // Size
-        sizeStyles6[size],
+        sizeStyles5[size],
         // Selected state
         isSelected ? "bg-background text-foreground shadow-sm font-semibold" : isPressed ? "bg-card text-foreground" : isHovered ? "bg-card text-foreground" : "bg-transparent text-muted-foreground",
         className
@@ -2396,8 +2506,8 @@ function SegmentedControlItem({
 }
 
 // src/components/Badge/Badge.tsx
-import { twMerge as twMerge11 } from "tailwind-merge";
-import { jsx as jsx36, jsxs as jsxs22 } from "react/jsx-runtime";
+import { twMerge as twMerge15 } from "tailwind-merge";
+import { jsx as jsx34, jsxs as jsxs23 } from "react/jsx-runtime";
 var variantStyles4 = {
   neutral: "bg-(--color-badge-neutral-bg) text-(--color-badge-neutral-text)",
   purple: "bg-(--color-badge-purple-bg) text-(--color-badge-purple-text)",
@@ -2407,33 +2517,29 @@ var variantStyles4 = {
   green: "bg-(--color-badge-green-bg) text-(--color-badge-green-text)",
   amber: "bg-(--color-badge-amber-bg) text-(--color-badge-amber-text)"
 };
-var sizeStyles7 = {
+var sizeStyles6 = {
   sm: "px-1.5 py-0.5",
   md: "px-2 py-0.5"
 };
-var iconSizeMap4 = {
-  sm: 12,
-  md: 14
-};
 function Badge({
   children,
   variant = "neutral",
   size = "sm",
-  icon: IconComponent,
+  icon,
   className
 }) {
-  return /* @__PURE__ */ jsxs22(
+  return /* @__PURE__ */ jsxs23(
     "span",
     {
-      className: twMerge11(
+      className: twMerge15(
         "inline-flex items-center gap-1 rounded-full",
-        "text-xs font-medium leading-tight",
+        "text-xs font-medium leading-tight tracking-wider tabular-nums",
         variantStyles4[variant],
-        sizeStyles7[size],
+        sizeStyles6[size],
         className
       ),
       children: [
-        IconComponent && /* @__PURE__ */ jsx36(IconComponent, { size: iconSizeMap4[size], "aria-hidden": "true" }),
+        icon && /* @__PURE__ */ jsx34(Icon, { icon, size: "xs" }),
         children
       ]
     }
@@ -2441,9 +2547,9 @@ function Badge({
 }
 
 // src/components/Card/Card.tsx
-import { useCallback as useCallback3 } from "react";
-import { twMerge as twMerge12 } from "tailwind-merge";
-import { Fragment as Fragment8, jsx as jsx37, jsxs as jsxs23 } from "react/jsx-runtime";
+import { useCallback as useCallback4 } from "react";
+import { twMerge as twMerge16 } from "tailwind-merge";
+import { Fragment as Fragment8, jsx as jsx35, jsxs as jsxs24 } from "react/jsx-runtime";
 var paddingStyles = {
   none: "p-0",
   sm: "p-3",
@@ -2461,13 +2567,13 @@ function Card({
   className
 }) {
   const isInteractive = interactive || !!href || !!onPress;
-  const containerClass = twMerge12(
+  const containerClass = twMerge16(
     "bg-background border border-border rounded-lg overflow-hidden shadow-sm",
     isInteractive && "transition-all hover:shadow-md hover:border-ring cursor-pointer",
     (href || onPress) && "block focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 outline-none",
     className
   );
-  const handleKeyDown = useCallback3(
+  const handleKeyDown = useCallback4(
     (e) => {
       if (onPress && (e.key === "Enter" || e.key === " ")) {
         e.preventDefault();
@@ -2476,22 +2582,22 @@ function Card({
     },
     [onPress]
   );
-  const content = /* @__PURE__ */ jsxs23(Fragment8, { children: [
-    header && /* @__PURE__ */ jsx37(
+  const content = /* @__PURE__ */ jsxs24(Fragment8, { children: [
+    header && /* @__PURE__ */ jsx35(
       "div",
       {
-        className: twMerge12(
+        className: twMerge16(
           "border-b border-border",
           paddingStyles[padding]
         ),
         children: header
       }
     ),
-    /* @__PURE__ */ jsx37("div", { className: paddingStyles[padding], children }),
-    footer && /* @__PURE__ */ jsx37(
+    /* @__PURE__ */ jsx35("div", { className: paddingStyles[padding], children }),
+    footer && /* @__PURE__ */ jsx35(
       "div",
       {
-        className: twMerge12(
+        className: twMerge16(
           "border-t border-border",
           paddingStyles[padding]
         ),
@@ -2500,10 +2606,10 @@ function Card({
     )
   ] });
   if (href) {
-    return /* @__PURE__ */ jsx37("a", { href, className: containerClass, children: content });
+    return /* @__PURE__ */ jsx35("a", { href, className: containerClass, children: content });
   }
   if (onPress) {
-    return /* @__PURE__ */ jsx37(
+    return /* @__PURE__ */ jsx35(
       "div",
       {
         role: "button",
@@ -2515,13 +2621,13 @@ function Card({
       }
     );
   }
-  return /* @__PURE__ */ jsx37("div", { className: containerClass, children: content });
+  return /* @__PURE__ */ jsx35("div", { className: containerClass, children: content });
 }
 
 // src/components/DeltaIndicator/DeltaIndicator.tsx
-import { ArrowUp, ArrowDown, Minus } from "lucide-react";
-import { twMerge as twMerge13 } from "tailwind-merge";
-import { jsx as jsx38, jsxs as jsxs24 } from "react/jsx-runtime";
+import { ArrowUp as ArrowUp2, ArrowDown as ArrowDown2, Minus as Minus2 } from "lucide-react";
+import { twMerge as twMerge17 } from "tailwind-merge";
+import { jsx as jsx36, jsxs as jsxs25 } from "react/jsx-runtime";
 function getDirection(current, previous) {
   const diff = current - previous;
   if (diff > 0) return "increase";
@@ -2553,9 +2659,9 @@ var reverseDirectionColors = {
   flat: "text-(--color-delta-flat-text)"
 };
 var directionIcons = {
-  increase: ArrowUp,
-  decrease: ArrowDown,
-  flat: Minus
+  increase: ArrowUp2,
+  decrease: ArrowDown2,
+  flat: Minus2
 };
 var directionBgColors = {
   increase: "bg-(--color-delta-increase-bg)",
@@ -2574,16 +2680,16 @@ function DeltaIndicator({
   className
 }) {
   if (unavailable) {
-    return /* @__PURE__ */ jsxs24(
+    return /* @__PURE__ */ jsxs25(
       "span",
       {
-        className: twMerge13(
+        className: twMerge17(
           "inline-flex items-center gap-1 font-medium",
           "text-muted-foreground",
           className
         ),
         children: [
-          label && /* @__PURE__ */ jsx38("span", { className: "text-sm text-muted-foreground mr-1", children: label }),
+          label && /* @__PURE__ */ jsx36("span", { className: "text-sm text-muted-foreground mr-1", children: label }),
           unavailableText
         ]
       }
@@ -2613,10 +2719,10 @@ function DeltaIndicator({
     }
   }
   const isPill = mode === "pill";
-  return /* @__PURE__ */ jsxs24(
+  return /* @__PURE__ */ jsxs25(
     "span",
     {
-      className: twMerge13(
+      className: twMerge17(
         "inline-flex items-center gap-1 font-medium",
         colorStyles2,
         isPill && [
@@ -2627,8 +2733,8 @@ function DeltaIndicator({
         className
       ),
       children: [
-        label && /* @__PURE__ */ jsx38("span", { className: "text-sm text-muted-foreground mr-1", children: label }),
-        /* @__PURE__ */ jsx38(IconComponent, { size: 14, "aria-hidden": true }),
+        label && /* @__PURE__ */ jsx36("span", { className: "text-sm text-muted-foreground mr-1", children: label }),
+        /* @__PURE__ */ jsx36(IconComponent, { size: 14, "aria-hidden": true }),
         valueText
       ]
     }
@@ -2636,8 +2742,8 @@ function DeltaIndicator({
 }
 
 // src/components/ProgressBar/ProgressBar.tsx
-import { twMerge as twMerge14 } from "tailwind-merge";
-import { jsx as jsx39, jsxs as jsxs25 } from "react/jsx-runtime";
+import { twMerge as twMerge18 } from "tailwind-merge";
+import { jsx as jsx37, jsxs as jsxs26 } from "react/jsx-runtime";
 var fillStyles = {
   brand: "bg-(--color-progress-fill)",
   success: "bg-(--color-progress-fill-success)",
@@ -2645,7 +2751,7 @@ var fillStyles = {
   danger: "bg-(--color-progress-fill-danger)",
   neutral: "bg-muted-foreground"
 };
-var sizeStyles8 = {
+var sizeStyles7 = {
   sm: "h-1.5",
   md: "h-3",
   lg: "h-4"
@@ -2660,12 +2766,12 @@ function ProgressBar({
   className
 }) {
   const clampedValue = Math.min(100, Math.max(0, value));
-  return /* @__PURE__ */ jsxs25("div", { className: twMerge14("w-full", className), children: [
-    (label || description || showValue) && /* @__PURE__ */ jsxs25("div", { className: "flex items-center justify-between mb-2", children: [
-      /* @__PURE__ */ jsx39("span", { className: "text-sm font-medium text-foreground", children: label }),
-      /* @__PURE__ */ jsx39("span", { className: "text-sm text-muted-foreground", children: description ?? (showValue ? `${clampedValue}%` : null) })
+  return /* @__PURE__ */ jsxs26("div", { className: twMerge18("w-full", className), children: [
+    (label || description || showValue) && /* @__PURE__ */ jsxs26("div", { className: "flex items-center justify-between mb-2", children: [
+      /* @__PURE__ */ jsx37("span", { className: "text-sm font-medium text-foreground", children: label }),
+      /* @__PURE__ */ jsx37("span", { className: "text-sm text-muted-foreground", children: description ?? (showValue ? `${clampedValue}%` : null) })
     ] }),
-    /* @__PURE__ */ jsx39(
+    /* @__PURE__ */ jsx37(
       "div",
       {
         role: "progressbar",
@@ -2673,14 +2779,14 @@ function ProgressBar({
         "aria-valuemin": 0,
         "aria-valuemax": 100,
         "aria-label": label ?? "Progress",
-        className: twMerge14(
+        className: twMerge18(
           "w-full rounded-full bg-(--color-progress-track)",
-          sizeStyles8[size]
+          sizeStyles7[size]
         ),
-        children: /* @__PURE__ */ jsx39(
+        children: /* @__PURE__ */ jsx37(
           "div",
           {
-            className: twMerge14(
+            className: twMerge18(
               "h-full rounded-full transition-all duration-300",
               fillStyles[variant]
             ),
@@ -2693,37 +2799,36 @@ function ProgressBar({
 }
 
 // src/components/Banner/Banner.tsx
-import { useState as useState6 } from "react";
+import { useState as useState8 } from "react";
 import {
-  Info as Info2,
-  AlertTriangle,
-  AlertCircle,
-  CheckCircle2,
-  X as X3
+  Info as Info3,
+  AlertTriangle as AlertTriangle2,
+  AlertCircle as AlertCircle2,
+  CheckCircle2 as CheckCircle22
 } from "lucide-react";
-import { twMerge as twMerge15 } from "tailwind-merge";
-import { jsx as jsx40, jsxs as jsxs26 } from "react/jsx-runtime";
+import { twMerge as twMerge19 } from "tailwind-merge";
+import { jsx as jsx38, jsxs as jsxs27 } from "react/jsx-runtime";
 var variantConfig2 = {
   info: {
-    icon: Info2,
+    icon: Info3,
     containerClass: "bg-info-surface border-info-border text-info-surface-foreground",
     iconClass: "text-info",
     role: "status"
   },
   warning: {
-    icon: AlertTriangle,
+    icon: AlertTriangle2,
     containerClass: "bg-warning-surface border-warning-border text-warning-surface-foreground",
     iconClass: "text-warning",
     role: "alert"
   },
   danger: {
-    icon: AlertCircle,
+    icon: AlertCircle2,
     containerClass: "bg-destructive-surface border-destructive-border text-destructive-surface-foreground",
     iconClass: "text-destructive",
     role: "alert"
   },
   success: {
-    icon: CheckCircle2,
+    icon: CheckCircle22,
     containerClass: "bg-success-surface border-success-border text-success-surface-foreground",
     iconClass: "text-success",
     role: "status"
@@ -2738,48 +2843,48 @@ function Banner({
   onDismiss,
   className
 }) {
-  const [dismissed, setDismissed] = useState6(false);
+  const [dismissed, setDismissed] = useState8(false);
   if (dismissed) return null;
   const config = variantConfig2[variant];
-  const IconComponent = icon ?? config.icon;
+  const resolvedIcon = icon ?? config.icon;
   const handleDismiss = () => {
     setDismissed(true);
     onDismiss?.();
   };
-  return /* @__PURE__ */ jsxs26(
+  return /* @__PURE__ */ jsxs27(
     "div",
     {
       role: config.role,
-      className: twMerge15(
+      className: twMerge19(
         "flex items-start gap-3 rounded-lg border px-4 py-3",
         "text-sm",
         config.containerClass,
         className
       ),
       children: [
-        /* @__PURE__ */ jsx40(
-          IconComponent,
+        /* @__PURE__ */ jsx38(
+          Icon,
           {
-            size: 20,
-            className: twMerge15("shrink-0 mt-0.5", config.iconClass),
-            "aria-hidden": "true"
+            icon: resolvedIcon,
+            size: "md",
+            className: twMerge19("mt-0.5", config.iconClass)
           }
         ),
-        /* @__PURE__ */ jsxs26("div", { className: "flex-1", children: [
-          title && /* @__PURE__ */ jsxs26("span", { className: "font-medium", children: [
+        /* @__PURE__ */ jsxs27("div", { className: "flex-1", children: [
+          title && /* @__PURE__ */ jsxs27("span", { className: "font-medium", children: [
             title,
             " \u2014 "
           ] }),
           children
         ] }),
-        dismissible && /* @__PURE__ */ jsx40(
+        dismissible && /* @__PURE__ */ jsx38(
           "button",
           {
             type: "button",
             onClick: handleDismiss,
             className: "shrink-0 rounded-sm p-0.5 opacity-70 hover:opacity-100 transition-opacity outline-none focus-visible:ring-2 focus-visible:ring-current",
             "aria-label": "Dismiss",
-            children: /* @__PURE__ */ jsx40(X3, { size: 16, "aria-hidden": "true" })
+            children: /* @__PURE__ */ jsx38(Icon, { icon: "X", size: "sm" })
           }
         )
       ]
@@ -2788,8 +2893,8 @@ function Banner({
 }
 
 // src/components/MetricCard/MetricCard.tsx
-import { twMerge as twMerge16 } from "tailwind-merge";
-import { Fragment as Fragment9, jsx as jsx41, jsxs as jsxs27 } from "react/jsx-runtime";
+import { twMerge as twMerge20 } from "tailwind-merge";
+import { Fragment as Fragment9, jsx as jsx39, jsxs as jsxs28 } from "react/jsx-runtime";
 var sizeConfig = {
   sm: {
     padding: "p-3",
@@ -2811,58 +2916,58 @@ function MetricCard({
   className
 }) {
   const config = sizeConfig[size];
-  const containerClass = twMerge16(
+  const containerClass = twMerge20(
     "bg-background border border-border rounded-lg shadow-sm",
     config.padding,
     href && "block transition-shadow hover:shadow-md hover:border-ring focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 outline-none",
     className
   );
-  const content = /* @__PURE__ */ jsxs27(Fragment9, { children: [
-    /* @__PURE__ */ jsx41("div", { className: twMerge16(config.labelClass, "text-muted-foreground"), children: label }),
-    /* @__PURE__ */ jsx41(
+  const content = /* @__PURE__ */ jsxs28(Fragment9, { children: [
+    /* @__PURE__ */ jsx39("div", { className: twMerge20(config.labelClass, "text-muted-foreground"), children: label }),
+    /* @__PURE__ */ jsx39(
       "div",
       {
-        className: twMerge16(
+        className: twMerge20(
           config.valueClass,
           "font-semibold text-foreground mt-1 tabular-nums"
         ),
         children: value
       }
     ),
-    secondary && /* @__PURE__ */ jsx41("div", { className: "mt-1 text-sm", children: secondary })
+    secondary && /* @__PURE__ */ jsx39("div", { className: "mt-1 text-sm", children: secondary })
   ] });
   if (href) {
-    return /* @__PURE__ */ jsx41("a", { href, className: containerClass, children: content });
+    return /* @__PURE__ */ jsx39("a", { href, className: containerClass, children: content });
   }
-  return /* @__PURE__ */ jsx41("div", { className: containerClass, children: content });
+  return /* @__PURE__ */ jsx39("div", { className: containerClass, children: content });
 }
 
 // src/components/SectionHeader/SectionHeader.tsx
-import { twMerge as twMerge17 } from "tailwind-merge";
-import { jsx as jsx42, jsxs as jsxs28 } from "react/jsx-runtime";
+import { twMerge as twMerge21 } from "tailwind-merge";
+import { jsx as jsx40, jsxs as jsxs29 } from "react/jsx-runtime";
 function SectionHeader({
   title,
   children,
   className
 }) {
-  return /* @__PURE__ */ jsxs28(
+  return /* @__PURE__ */ jsxs29(
     "div",
     {
-      className: twMerge17(
+      className: twMerge21(
         "flex flex-wrap items-center gap-3 py-4",
         className
       ),
       children: [
-        /* @__PURE__ */ jsx42(H2, { children: title }),
-        children && /* @__PURE__ */ jsx42("div", { className: "ml-auto flex flex-wrap items-center gap-2", children })
+        /* @__PURE__ */ jsx40(H2, { children: title }),
+        children && /* @__PURE__ */ jsx40("div", { className: "ml-auto flex flex-wrap items-center gap-2", children })
       ]
     }
   );
 }
 
 // src/components/Pill/Pill.tsx
-import { twMerge as twMerge18 } from "tailwind-merge";
-import { jsx as jsx43 } from "react/jsx-runtime";
+import { twMerge as twMerge22 } from "tailwind-merge";
+import { jsx as jsx41 } from "react/jsx-runtime";
 var hashColors = {
   purple: "bg-(--color-badge-purple-bg) text-(--color-badge-purple-text) border-(--color-badge-purple-text)/20",
   teal: "bg-(--color-badge-teal-bg) text-(--color-badge-teal-text) border-(--color-badge-teal-text)/20",
@@ -2888,7 +2993,7 @@ function Pill({
   className,
   ...rest
 }) {
-  const cx = twMerge18(
+  const cx = twMerge22(
     `
     inline-flex items-center
     rounded-full
@@ -2900,12 +3005,12 @@ function Pill({
     colorStyles[color],
     className
   );
-  return /* @__PURE__ */ jsx43("span", { className: cx, ...rest, children });
+  return /* @__PURE__ */ jsx41("span", { className: cx, ...rest, children });
 }
 
 // src/components/Pill/PathPill.tsx
-import { twMerge as twMerge19 } from "tailwind-merge";
-import { jsx as jsx44 } from "react/jsx-runtime";
+import { twMerge as twMerge23 } from "tailwind-merge";
+import { jsx as jsx42 } from "react/jsx-runtime";
 function PathPill({
   children,
   visibleCount,
@@ -2917,17 +3022,17 @@ function PathPill({
   const effectiveVisible = visibleCount ?? segments.length;
   const dotCount = Math.max(0, segments.length - effectiveVisible);
   const fullPath = segments.join(" / ");
-  return /* @__PURE__ */ jsx44(
+  return /* @__PURE__ */ jsx42(
     "div",
     {
-      className: twMerge19("relative flex", className),
+      className: twMerge23("relative flex", className),
       "aria-label": `Path: ${fullPath}`,
       children: segments.map((segment, i) => {
         const isCollapsed = i < dotCount;
         const isLast = i === segments.length - 1;
-        const cx = twMerge19(!isLast && "pr-5 -mr-4", isCollapsed && "pr-3");
+        const cx = twMerge23(!isLast && "pr-5 -mr-4", isCollapsed && "pr-3");
         const color = colorFn ? colorFn(segment, i) : pillColorFromName(segment);
-        return /* @__PURE__ */ jsx44(
+        return /* @__PURE__ */ jsx42(
           Pill,
           {
             className: cx,
@@ -2943,9 +3048,9 @@ function PathPill({
 }
 
 // src/components/FormWizard/FormWizard.tsx
-import { createContext as createContext6, useContext as useContext6, useCallback as useCallback4, useMemo } from "react";
-import { jsx as jsx45 } from "react/jsx-runtime";
-var FormWizardContext = createContext6({
+import { createContext as createContext4, useContext as useContext4, useCallback as useCallback5, useMemo } from "react";
+import { jsx as jsx43 } from "react/jsx-runtime";
+var FormWizardContext = createContext4({
   currentStep: 0,
   totalSteps: 1,
   canGoBack: false,
@@ -2954,7 +3059,7 @@ var FormWizardContext = createContext6({
   isLastStep: true
 });
 function useFormWizard() {
-  return useContext6(FormWizardContext);
+  return useContext4(FormWizardContext);
 }
 function FormWizard({
   currentStep,
@@ -2964,7 +3069,7 @@ function FormWizard({
 }) {
   const canGoBack = currentStep > 0;
   const isLastStep = currentStep >= totalSteps - 1;
-  const goBack = useCallback4(() => {
+  const goBack = useCallback5(() => {
     if (currentStep > 0) {
       onStepChange(currentStep - 1);
     }
@@ -2979,13 +3084,13 @@ function FormWizard({
     }),
     [currentStep, totalSteps, canGoBack, goBack, isLastStep]
   );
-  return /* @__PURE__ */ jsx45(FormWizardContext.Provider, { value, children });
+  return /* @__PURE__ */ jsx43(FormWizardContext.Provider, { value, children });
 }
 
 // src/components/FormWizard/FormWizardProgress.tsx
-import { jsx as jsx46, jsxs as jsxs29 } from "react/jsx-runtime";
+import { jsx as jsx44, jsxs as jsxs30 } from "react/jsx-runtime";
 function CheckIcon() {
-  return /* @__PURE__ */ jsx46(
+  return /* @__PURE__ */ jsx44(
     "svg",
     {
       "aria-hidden": "true",
@@ -2996,24 +3101,24 @@ function CheckIcon() {
       strokeWidth: "2",
       strokeLinecap: "round",
       strokeLinejoin: "round",
-      children: /* @__PURE__ */ jsx46("path", { d: "M3 8.5l3.5 3.5 6.5-7" })
+      children: /* @__PURE__ */ jsx44("path", { d: "M3 8.5l3.5 3.5 6.5-7" })
     }
   );
 }
 function FormWizardProgress({ labels }) {
   const { currentStep, totalSteps } = useFormWizard();
-  return /* @__PURE__ */ jsx46("nav", { "aria-label": "Form progress", children: /* @__PURE__ */ jsx46("ol", { className: "flex items-start", role: "list", children: labels.map((label, index) => {
+  return /* @__PURE__ */ jsx44("nav", { "aria-label": "Form progress", children: /* @__PURE__ */ jsx44("ol", { className: "flex items-start", role: "list", children: labels.map((label, index) => {
     const isCompleted = index < currentStep;
     const isCurrent = index === currentStep;
     const isFuture = index > currentStep;
-    return /* @__PURE__ */ jsxs29(
+    return /* @__PURE__ */ jsxs30(
       "li",
       {
         className: "flex flex-1 flex-col items-center",
         "aria-current": isCurrent ? "step" : void 0,
         children: [
-          /* @__PURE__ */ jsxs29("div", { className: "flex w-full items-center", children: [
-            index > 0 ? /* @__PURE__ */ jsx46(
+          /* @__PURE__ */ jsxs30("div", { className: "flex w-full items-center", children: [
+            index > 0 ? /* @__PURE__ */ jsx44(
               "div",
               {
                 "aria-hidden": "true",
@@ -3022,8 +3127,8 @@ function FormWizardProgress({ labels }) {
                   index <= currentStep ? "bg-primary" : "bg-border"
                 ].join(" ")
               }
-            ) : /* @__PURE__ */ jsx46("div", { className: "flex-1", "aria-hidden": "true" }),
-            /* @__PURE__ */ jsx46(
+            ) : /* @__PURE__ */ jsx44("div", { className: "flex-1", "aria-hidden": "true" }),
+            /* @__PURE__ */ jsx44(
               "div",
               {
                 className: [
@@ -3035,10 +3140,10 @@ function FormWizardProgress({ labels }) {
                   isFuture ? "border-2 border-border bg-background text-muted-foreground" : ""
                 ].join(" "),
                 "aria-hidden": "true",
-                children: isCompleted ? /* @__PURE__ */ jsx46(CheckIcon, {}) : index + 1
+                children: isCompleted ? /* @__PURE__ */ jsx44(CheckIcon, {}) : index + 1
               }
             ),
-            index < totalSteps - 1 ? /* @__PURE__ */ jsx46(
+            index < totalSteps - 1 ? /* @__PURE__ */ jsx44(
               "div",
               {
                 "aria-hidden": "true",
@@ -3047,9 +3152,9 @@ function FormWizardProgress({ labels }) {
                   index < currentStep ? "bg-primary" : "bg-border"
                 ].join(" ")
               }
-            ) : /* @__PURE__ */ jsx46("div", { className: "flex-1", "aria-hidden": "true" })
+            ) : /* @__PURE__ */ jsx44("div", { className: "flex-1", "aria-hidden": "true" })
           ] }),
-          /* @__PURE__ */ jsx46(
+          /* @__PURE__ */ jsx44(
             "span",
             {
               className: [
@@ -3067,15 +3172,15 @@ function FormWizardProgress({ labels }) {
 }
 
 // src/components/FormWizard/FormWizardNav.tsx
-import { jsx as jsx47, jsxs as jsxs30 } from "react/jsx-runtime";
+import { jsx as jsx45, jsxs as jsxs31 } from "react/jsx-runtime";
 function FormWizardNav({
   onNext,
   isSubmitting = false,
   submitLabel = "Submit"
 }) {
   const { canGoBack, goBack, isLastStep } = useFormWizard();
-  return /* @__PURE__ */ jsxs30("div", { className: "flex items-center justify-end gap-3", children: [
-    canGoBack && /* @__PURE__ */ jsx47(
+  return /* @__PURE__ */ jsxs31("div", { className: "flex items-center justify-end gap-3", children: [
+    canGoBack && /* @__PURE__ */ jsx45(
       Button,
       {
         variant: "secondary",
@@ -3085,7 +3190,7 @@ function FormWizardNav({
         children: "Back"
       }
     ),
-    /* @__PURE__ */ jsx47(
+    /* @__PURE__ */ jsx45(
       Button,
       {
         variant: "primary",
@@ -3498,10 +3603,9 @@ export {
   Icon,
   IconButton,
   IconButtonLink,
+  IconButtonToggle,
   Input,
-  InputAddon,
-  InputGroup,
-  InputGroupContext,
+  InputPassword,
   Label,
   LineHeightNormal,
   LineHeightRelaxed,
@@ -3516,7 +3620,7 @@ export {
   MetricCard,
   PathPill,
   Pill,
-  Popover3 as Popover,
+  Popover4 as Popover,
   PopoverContent,
   PopoverTrigger,
   ProgressBar,
@@ -3542,14 +3646,12 @@ export {
   Tab,
   TabList,
   TabPanel,
-  Table,
+  Table2 as Table,
   TableBody,
   TableHeader,
   Tabs,
   ToastProvider,
   ToggleButton,
-  ToggleButtonGroup,
-  ToggleButtonGroupItem,
   Tooltip,
   TruncatedText,
   Tab2 as UnstyledTab,
@@ -3557,9 +3659,10 @@ export {
   TabPanel2 as UnstyledTabPanel,
   Tabs2 as UnstyledTabs,
   createToastBridge,
+  iconRegistry,
   pillColorFromName,
+  useContextMenu,
   useFormWizard,
-  useInputGroup,
   useToast
 };
 //# sourceMappingURL=index.js.map