@espressif/dashboard-ui-components 1.2.1 → 1.3.0

package/dist/{chunk-KEMHD3KP.js → chunk-O5BFYRPY.js}

@@ -1,19 +1,19 @@
-import { Card, CardHeader, CardTitle, CardDescription, CardContent, Label, Badge, Popover, PopoverTrigger, PopoverContent, resolveVariantStyles, VariantGradientUnderlay, PRESET_GRADIENT_BACKDROP, PRESET_GRADIENT_FRAME, VARIANT_GRADIENT_BACKDROP_BASE, SILVER_GRADIENT_BACKDROP, VARIANT_GRADIENT_HOVER_OVERLAY_CLASS, arbitraryGradientBackgroundImage, SilverShineOverlay, SilverMetallicBorderOverlay, buttonGroupVariants, useIsInView } from './chunk-JPMN2UMF.js';
-import { Button, inputLabelClassName, Input, Tooltip2, TooltipProvider, buttonVariants as buttonVariants$1, CopyButton, Link, Tooltip, TooltipTrigger, TooltipContent, HighlightItem, Slot as Slot$1, Highlight, ScrollArea, DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuCheckboxItem } from './chunk-34PXJOCS.js';
-import { getStrictContext, buttonVariants, Separator, CollapsibleContent, Collapsible, CollapsibleTrigger, Skeleton, Avatar, AvatarFallback, useControlledState } from './chunk-F5P6S7K2.js';
+import { Card, CardHeader, CardTitle, CardDescription, CardContent, Label, Badge, Popover, PopoverTrigger, PopoverContent, resolveVariantStyles, VariantGradientUnderlay, PRESET_GRADIENT_BACKDROP, PRESET_GRADIENT_FRAME, VARIANT_GRADIENT_BACKDROP_BASE, SILVER_GRADIENT_BACKDROP, VARIANT_GRADIENT_HOVER_OVERLAY_CLASS, arbitraryGradientBackgroundImage, SilverShineOverlay, SilverMetallicBorderOverlay, buttonGroupVariants, useIsInView } from './chunk-KCMVLNM5.js';
+import { Button, inputLabelClassName, Input, Tooltip2, TooltipProvider, buttonVariants as buttonVariants$1, CopyButton, Link, Tooltip, TooltipTrigger, TooltipContent, HighlightItem, Slot as Slot$1, Highlight, ScrollArea, DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuCheckboxItem, Sheet, SheetContent, SheetHeader, SheetTitle } from './chunk-UHRNPXO5.js';
+import { getStrictContext, buttonVariants, Separator, CollapsibleContent, Collapsible, CollapsibleTrigger, useIsMobile, useControlledState, Button as Button$1, Skeleton, Avatar, AvatarFallback } from './chunk-7BO76CNB.js';
 import { cn, resolveColor, isPresetColor } from './chunk-VU4CZ76T.js';
 import { __commonJS, __toESM } from './chunk-TRTQSARU.js';
-import { ChevronDown, ChevronUp, Check, Upload, X, LoaderCircle, Triangle, Info, MinusIcon, ArrowLeft, ArrowRight, Search, ClockIcon, Crown, ShieldCheck, Tag as Tag$1, ChevronRight, CircleAlert, Eye, EyeOff, Circle, FileCheck, CheckCheck, TriangleAlert, CircleX, ChevronsUpDown, ChevronLeftIcon, ChevronRightIcon, ChevronDownIcon, CalendarIcon, CalendarRangeIcon, CheckIcon, ChevronLeft, Columns2, ChevronsRight, ChevronsLeft, XIcon, MoveLeft, CircleIcon, Bolt, Plus, Trash2, Clock, XCircle, CheckCircle2 } from 'lucide-react';
-import * as React8 from 'react';
-import React8__default, { forwardRef, useMemo, isValidElement, useRef, useState, useCallback, useLayoutEffect, useEffect, useId, Fragment as Fragment$1, Children, cloneElement, createElement } from 'react';
+import { ChevronDown, ChevronUp, Check, Upload, X, RefreshCw, LoaderCircle, Triangle, Info, MinusIcon, ArrowLeft, ArrowRight, Search, ClockIcon, Crown, ShieldCheck, Tag as Tag$1, ChevronRight, CircleAlert, Eye, EyeOff, Circle, FileCheck, CheckCheck, TriangleAlert, CircleX, Menu, ChevronsUpDown, ChevronLeftIcon, ChevronRightIcon, ChevronDownIcon, CalendarIcon, CalendarRangeIcon, CheckIcon, ChevronLeft, Columns2, ChevronsRight, ChevronsLeft, XIcon, MoveLeft, CircleIcon, Bolt, Plus, Trash2, Clock, XCircle, CheckCircle2 } from 'lucide-react';
+import * as React10 from 'react';
+import React10__default, { forwardRef, useMemo, isValidElement, useRef, useState, useCallback, useLayoutEffect, useEffect, useId, Fragment as Fragment$1, Children, cloneElement, createElement } from 'react';
 import { Switch as Switch$1, ToggleGroup as ToggleGroup$1, Dialog as Dialog$1, Accordion as Accordion$1 } from 'radix-ui';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { AnimatePresence, motion, useAnimate, useReducedMotion } from 'framer-motion';
-import * as SelectPrimitive from '@radix-ui/react-select';
+import { createPortal } from 'react-dom';
 import { motion as motion$1, AnimatePresence as AnimatePresence$1, useMotionValue, useSpring } from 'motion/react';
+import * as SelectPrimitive from '@radix-ui/react-select';
 import { Slot, createSlot } from '@radix-ui/react-slot';
 import { useFormContext, FormProvider, Controller } from 'react-hook-form';
-import 'react-dom';
 import { cva } from 'class-variance-authority';
 import { RadioGroup as RadioGroup$1 } from '@base-ui-components/react/radio-group';
 import { Radio as Radio$1 } from '@base-ui-components/react/radio';
@@ -16302,10 +16302,10 @@ function Accordion(props) {
 }
 function AccordionItem(props) {
   const { value: value2 } = useAccordion();
-  const [isOpen, setIsOpen] = React8.useState(
+  const [isOpen, setIsOpen] = React10.useState(
     value2?.includes(props?.value) ?? false
   );
-  React8.useEffect(() => {
+  React10.useEffect(() => {
     setIsOpen(value2?.includes(props?.value) ?? false);
   }, [value2, props?.value]);
   return /* @__PURE__ */ jsx(AccordionItemProvider, { value: { value: props.value, isOpen, setIsOpen }, children: /* @__PURE__ */ jsx(
@@ -16439,7 +16439,7 @@ function Accordion3({
     }
   );
 }
-var SimpleCard = React8.forwardRef(
+var SimpleCard = React10.forwardRef(
   ({ noShadow, noBorder, transparent, title, description, children, className }, ref) => {
     return /* @__PURE__ */ jsxs(
       Card,
@@ -16673,12 +16673,12 @@ function CollapsibleCard({
   className,
   defaultOpen = false
 }) {
-  const childArray = React8.Children.toArray(children);
+  const childArray = React10.Children.toArray(children);
   const contentChild = childArray.find(
-    (child) => React8.isValidElement(child) && child.type === CollapsibleContent
+    (child) => React10.isValidElement(child) && child.type === CollapsibleContent
   );
   const titleChild = childArray.find(
-    (child) => React8.isValidElement(child) && child.type !== CollapsibleContent
+    (child) => React10.isValidElement(child) && child.type !== CollapsibleContent
   );
   return /* @__PURE__ */ jsx(Card, { className: cn("bg-transparent shadow-none rounded-md", className), children: /* @__PURE__ */ jsxs(Collapsible, { defaultOpen, className: "group", children: [
     /* @__PURE__ */ jsx(CardHeader, { className: "p-3 border-b border-transparent group-data-[state=open]:border-border", children: /* @__PURE__ */ jsx(CollapsibleTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
@@ -16695,7 +16695,7 @@ function CollapsibleCard({
         ]
       }
     ) }) }),
-    contentChild && React8.cloneElement(contentChild, {
+    contentChild && React10.cloneElement(contentChild, {
       className: cn(
         "px-4 pb-6 pt-4",
         contentChild.props.className
@@ -17281,7 +17281,7 @@ var useLottie = function useLottie2(props, style) {
       });
     };
   }, [onComplete, onLoopComplete, onEnterFrame, onSegmentStart, onConfigReady, onDataReady, onDataFailed, onLoadedImages, onDOMLoaded, onDestroy]);
-  var View = /* @__PURE__ */ React8__default.createElement("div", _objectSpread2({
+  var View = /* @__PURE__ */ React10__default.createElement("div", _objectSpread2({
     style,
     ref: animationContainer
   }, rest));
@@ -47793,6 +47793,859 @@ function ListDetails({
     }
   );
 }
+var ITEM_GAP = 4;
+function useNavBarOverflow(items) {
+  const containerRef = useRef(null);
+  const measureRef = useRef(null);
+  const moreButtonMeasureRef = useRef(null);
+  const [state, setState] = useState({
+    visibleIds: items.map((i) => i.id),
+    overflowIds: []
+  });
+  const [measuring, setMeasuring] = useState(true);
+  const recalculate = useCallback(() => {
+    const container = containerRef.current;
+    const measureList = measureRef.current;
+    const moreButton = moreButtonMeasureRef.current;
+    if (!container || !measureList) return;
+    const containerWidth = container.clientWidth;
+    const moreButtonWidth = moreButton ? moreButton.getBoundingClientRect().width : 80;
+    const itemWidths = /* @__PURE__ */ new Map();
+    const measureItems = measureList.querySelectorAll(
+      "[data-nav-item-id]"
+    );
+    for (const li of measureItems) {
+      const id = li.getAttribute("data-nav-item-id");
+      if (id) {
+        itemWidths.set(id, li.getBoundingClientRect().width);
+      }
+    }
+    let totalWidth = 0;
+    for (let i = 0; i < items.length; i++) {
+      totalWidth += (itemWidths.get(items[i].id) ?? 0) + (i > 0 ? ITEM_GAP : 0);
+    }
+    if (totalWidth <= containerWidth) {
+      setState({
+        visibleIds: items.map((i) => i.id),
+        overflowIds: []
+      });
+      setMeasuring(false);
+      return;
+    }
+    const availableWidth = containerWidth - moreButtonWidth - ITEM_GAP;
+    let accumulatedWidth = 0;
+    let cutoffIndex = 0;
+    for (let i = 0; i < items.length; i++) {
+      const w = (itemWidths.get(items[i].id) ?? 0) + (i > 0 ? ITEM_GAP : 0);
+      if (accumulatedWidth + w > availableWidth) {
+        break;
+      }
+      accumulatedWidth += w;
+      cutoffIndex = i + 1;
+    }
+    setState({
+      visibleIds: items.slice(0, cutoffIndex).map((i) => i.id),
+      overflowIds: items.slice(cutoffIndex).map((i) => i.id)
+    });
+    setMeasuring(false);
+  }, [items]);
+  useLayoutEffect(() => {
+    recalculate();
+  }, [recalculate]);
+  useEffect(() => {
+    const container = containerRef.current;
+    if (!container || typeof ResizeObserver === "undefined") return;
+    const ro = new ResizeObserver(() => {
+      recalculate();
+    });
+    ro.observe(container);
+    return () => ro.disconnect();
+  }, [recalculate]);
+  return {
+    containerRef,
+    measureRef,
+    moreButtonMeasureRef,
+    visibleIds: state.visibleIds,
+    overflowIds: state.overflowIds,
+    showMore: state.overflowIds.length > 0,
+    measuring
+  };
+}
+function useNavBarScroll({
+  enabled,
+  threshold,
+  scrollContainerRef
+}) {
+  const [isScrolled, setIsScrolled] = useState(false);
+  const rafRef = useRef(null);
+  const getScrollTop = useCallback(() => {
+    if (scrollContainerRef?.current) {
+      return scrollContainerRef.current.scrollTop;
+    }
+    return window.scrollY;
+  }, [scrollContainerRef]);
+  const handleScroll = useCallback(() => {
+    if (rafRef.current !== null) return;
+    rafRef.current = requestAnimationFrame(() => {
+      setIsScrolled(getScrollTop() > threshold);
+      rafRef.current = null;
+    });
+  }, [threshold, getScrollTop]);
+  useEffect(() => {
+    if (!enabled) {
+      setIsScrolled(false);
+      return;
+    }
+    setIsScrolled(getScrollTop() > threshold);
+    const target = scrollContainerRef?.current ?? window;
+    target.addEventListener("scroll", handleScroll, { passive: true });
+    return () => {
+      target.removeEventListener("scroll", handleScroll);
+      if (rafRef.current !== null) {
+        cancelAnimationFrame(rafRef.current);
+        rafRef.current = null;
+      }
+    };
+  }, [enabled, handleScroll, threshold, getScrollTop, scrollContainerRef]);
+  return { isScrolled };
+}
+function NavBarDetailsPanel({
+  item,
+  openDetailsId,
+  onClose,
+  navBottomOffset,
+  navWidth,
+  navLeft
+}) {
+  if (typeof document === "undefined") return null;
+  return createPortal(
+    /* @__PURE__ */ jsx(AnimatePresence$1, { children: openDetailsId && item?.details && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        motion$1.div,
+        {
+          className: "fixed inset-0 z-40 bg-black/20",
+          style: { top: navBottomOffset },
+          initial: { opacity: 0 },
+          animate: { opacity: 1 },
+          exit: { opacity: 0 },
+          transition: { duration: 0.15 },
+          onClick: onClose,
+          "aria-hidden": "true"
+        },
+        `navbar-backdrop-${openDetailsId}`
+      ),
+      /* @__PURE__ */ jsx(
+        motion$1.div,
+        {
+          className: "fixed z-50 border-b border-header-border bg-background shadow-lg overflow-hidden",
+          style: {
+            top: navBottomOffset,
+            left: navLeft,
+            width: navWidth
+          },
+          initial: { opacity: 0, height: 0 },
+          animate: { opacity: 1, height: "auto" },
+          exit: { opacity: 0, height: 0 },
+          transition: { duration: 0.2, ease: [0.25, 0.1, 0.25, 1] },
+          children: /* @__PURE__ */ jsx("div", { className: "mx-auto w-full px-4 lg:px-6 py-6", children: item.details })
+        },
+        `navbar-panel-${openDetailsId}`
+      )
+    ] }) }),
+    document.body
+  );
+}
+function NavBarMobileMenu({
+  items,
+  activeId,
+  onItemClick,
+  open,
+  onOpenChange,
+  linkComponent,
+  title,
+  colorClasses
+}) {
+  const [expandedId, setExpandedId] = React10.useState(null);
+  React10.useEffect(() => {
+    if (!open) setExpandedId(null);
+  }, [open]);
+  const handleItemClick = (item) => {
+    if (item.details) {
+      setExpandedId(expandedId === item.id ? null : item.id);
+      return;
+    }
+    onItemClick(item);
+    onOpenChange(false);
+  };
+  return /* @__PURE__ */ jsx(Sheet, { open, onOpenChange, children: /* @__PURE__ */ jsxs(SheetContent, { side: "left", className: "w-[18rem] p-0", showCloseButton: true, children: [
+    title && /* @__PURE__ */ jsx(SheetHeader, { className: "px-4 pt-4 pb-2", children: /* @__PURE__ */ jsx(SheetTitle, { children: title }) }),
+    /* @__PURE__ */ jsx("nav", { className: "flex flex-col py-2", "aria-label": "Mobile navigation", children: items.map((item) => {
+      const isActive = activeId === item.id;
+      const isExpanded = expandedId === item.id;
+      return /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx(
+          MobileMenuItemTrigger,
+          {
+            item,
+            isActive,
+            isExpanded,
+            onClick: () => handleItemClick(item),
+            linkComponent,
+            colorClasses
+          }
+        ),
+        item.details && isExpanded && /* @__PURE__ */ jsx("div", { className: "px-4 py-3 border-b border-border/50 bg-muted/30 overflow-x-auto text-sm", children: item.details })
+      ] }, item.id);
+    }) })
+  ] }) });
+}
+function MobileMenuItemTrigger({
+  item,
+  isActive,
+  isExpanded,
+  onClick,
+  linkComponent,
+  colorClasses
+}) {
+  const classes = cn(
+    "flex items-center gap-2 min-w-0 w-full px-4 h-11 text-sm font-medium",
+    "text-foreground transition-colors",
+    colorClasses ? colorClasses.hoverBgClass : "hover:bg-foreground/5",
+    isActive && colorClasses && `${colorClasses.textClass} ${colorClasses.bgClass}`,
+    item.disabled && "opacity-50 pointer-events-none"
+  );
+  const activeStyle = isActive && colorClasses?.textStyle ? { ...colorClasses.textStyle, ...colorClasses.bgStyle } : void 0;
+  const content3 = /* @__PURE__ */ jsxs(Fragment, { children: [
+    item.icon && /* @__PURE__ */ jsx("span", { className: "shrink-0", children: item.icon }),
+    /* @__PURE__ */ jsx("span", { className: "truncate flex-1 text-left", children: item.label }),
+    item.details && /* @__PURE__ */ jsx(
+      ChevronDown,
+      {
+        className: cn(
+          "size-4 shrink-0 text-foreground/40 transition-transform duration-200",
+          isExpanded && "rotate-180"
+        ),
+        "aria-hidden": "true"
+      }
+    )
+  ] });
+  if (item.details) {
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        className: classes,
+        style: activeStyle,
+        onClick,
+        "aria-expanded": isExpanded,
+        disabled: item.disabled,
+        children: content3
+      }
+    );
+  }
+  if (item.href && linkComponent) {
+    const LinkComp = linkComponent;
+    return /* @__PURE__ */ jsx(LinkComp, { to: item.href, className: classes, style: activeStyle, onClick, children: content3 });
+  }
+  if (item.href) {
+    return /* @__PURE__ */ jsx("a", { href: item.href, className: classes, style: activeStyle, onClick, children: content3 });
+  }
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      className: classes,
+      style: activeStyle,
+      onClick,
+      disabled: item.disabled,
+      children: content3
+    }
+  );
+}
+var PRESET_TEXT = {
+  primary: "text-primary",
+  secondary: "text-secondary",
+  error: "text-error",
+  info: "text-info",
+  success: "text-success",
+  warning: "text-warning",
+  disabled: "text-disabled",
+  gray: "text-gray",
+  mist: "text-mist"
+};
+var PRESET_HOVER_TEXT = {
+  primary: "hover:text-primary",
+  secondary: "hover:text-secondary",
+  error: "hover:text-error",
+  info: "hover:text-info",
+  success: "hover:text-success",
+  warning: "hover:text-warning",
+  disabled: "hover:text-disabled",
+  gray: "hover:text-gray",
+  mist: "hover:text-mist"
+};
+var PRESET_BG = {
+  primary: "bg-primary/10",
+  secondary: "bg-secondary/10",
+  error: "bg-error/10",
+  info: "bg-info/10",
+  success: "bg-success/10",
+  warning: "bg-warning/10",
+  disabled: "bg-disabled/10",
+  gray: "bg-gray/10",
+  mist: "bg-mist/10"
+};
+var PRESET_HOVER_BG = {
+  primary: "hover:bg-primary/5",
+  secondary: "hover:bg-secondary/5",
+  error: "hover:bg-error/5",
+  info: "hover:bg-info/5",
+  success: "hover:bg-success/5",
+  warning: "hover:bg-warning/5",
+  disabled: "hover:bg-disabled/5",
+  gray: "hover:bg-gray/5",
+  mist: "hover:bg-mist/5"
+};
+function resolveNavColor(color) {
+  if (isPresetColor(color)) {
+    return {
+      textClass: PRESET_TEXT[color],
+      hoverTextClass: PRESET_HOVER_TEXT[color],
+      bgClass: PRESET_BG[color],
+      hoverBgClass: PRESET_HOVER_BG[color]
+    };
+  }
+  return {
+    textClass: "",
+    hoverTextClass: "",
+    bgClass: "",
+    hoverBgClass: "",
+    textStyle: { color },
+    bgStyle: { backgroundColor: `color-mix(in srgb, ${color} 10%, transparent)` }
+  };
+}
+function NavBar({
+  logo,
+  items,
+  rightContent,
+  activeId: activeIdProp,
+  defaultActiveId,
+  onActiveChange,
+  openDetailsId: openDetailsIdProp,
+  onDetailsPanelChange,
+  position: position2 = "sticky",
+  height: height2,
+  morphOnScroll = false,
+  morphScrollThreshold = 50,
+  morphScrollContainer,
+  moreLabel = "More",
+  linkComponent,
+  color = "primary",
+  mobileMenuTitle,
+  mobileMenuTrigger,
+  className,
+  itemsClassName
+}) {
+  const isMobile = useIsMobile();
+  const resolvedColor = resolveNavColor(color);
+  const navRef = React10.useRef(null);
+  const [activeId, setActiveId] = useControlledState({
+    value: activeIdProp,
+    defaultValue: defaultActiveId,
+    onChange: onActiveChange
+  });
+  const [openDetailsId, setOpenDetailsId] = useControlledState({
+    value: openDetailsIdProp ?? void 0,
+    defaultValue: null,
+    onChange: onDetailsPanelChange
+  });
+  const [mobileMenuOpen, setMobileMenuOpen] = React10.useState(false);
+  const [navRect, setNavRect] = React10.useState({ bottom: 0, width: 0, left: 0 });
+  const {
+    containerRef,
+    measureRef,
+    moreButtonMeasureRef,
+    visibleIds,
+    overflowIds,
+    showMore,
+    measuring
+  } = useNavBarOverflow(items);
+  const { isScrolled } = useNavBarScroll({
+    enabled: morphOnScroll && !isMobile,
+    threshold: morphScrollThreshold,
+    scrollContainerRef: morphScrollContainer
+  });
+  React10.useEffect(() => {
+    if (!openDetailsId || !navRef.current) return;
+    const updateRect = () => {
+      if (navRef.current) {
+        const rect = navRef.current.getBoundingClientRect();
+        setNavRect({ bottom: rect.bottom, width: rect.width, left: rect.left });
+      }
+    };
+    updateRect();
+    window.addEventListener("scroll", updateRect, { passive: true });
+    window.addEventListener("resize", updateRect, { passive: true });
+    return () => {
+      window.removeEventListener("scroll", updateRect);
+      window.removeEventListener("resize", updateRect);
+    };
+  }, [openDetailsId]);
+  React10.useEffect(() => {
+    if (!openDetailsId) return;
+    const handleKeyDown = (e) => {
+      if (e.key === "Escape") {
+        setOpenDetailsId(null);
+      }
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [openDetailsId, setOpenDetailsId]);
+  React10.useEffect(() => {
+    if (!openDetailsId) return;
+    const handleMouseDown = (e) => {
+      if (navRef.current && !navRef.current.contains(e.target)) {
+        setOpenDetailsId(null);
+      }
+    };
+    document.addEventListener("mousedown", handleMouseDown);
+    return () => document.removeEventListener("mousedown", handleMouseDown);
+  }, [openDetailsId, setOpenDetailsId]);
+  const handleItemClick = React10.useCallback(
+    (item) => {
+      item.onClick?.();
+      setActiveId(item.id);
+      if (item.details) {
+        setOpenDetailsId(openDetailsId === item.id ? null : item.id);
+      } else {
+        setOpenDetailsId(null);
+      }
+    },
+    [openDetailsId, setActiveId, setOpenDetailsId]
+  );
+  React10.useEffect(() => {
+    if (isMobile) setOpenDetailsId(null);
+  }, [isMobile, setOpenDetailsId]);
+  const resolvedHeight = height2 ?? "var(--espd-navbar-height)";
+  const activeDetailsItem = openDetailsId ? items.find((i) => i.id === openDetailsId) : void 0;
+  const [overflowDetailsItem, setOverflowDetailsItem] = React10.useState(null);
+  const overflowDetailsRef = React10.useRef(null);
+  const moreButtonRef = React10.useRef(null);
+  const [overflowPanelPos, setOverflowPanelPos] = React10.useState({ top: 0, right: 0 });
+  React10.useEffect(() => {
+    if (!overflowDetailsItem || !moreButtonRef.current) return;
+    const rect = moreButtonRef.current.getBoundingClientRect();
+    setOverflowPanelPos({
+      top: rect.bottom + 8,
+      right: window.innerWidth - rect.right
+    });
+  }, [overflowDetailsItem]);
+  React10.useEffect(() => {
+    if (!overflowDetailsItem) return;
+    const handleMouseDown = (e) => {
+      if (overflowDetailsRef.current && !overflowDetailsRef.current.contains(e.target) && moreButtonRef.current && !moreButtonRef.current.contains(e.target)) {
+        setOverflowDetailsItem(null);
+      }
+    };
+    const handleKeyDown = (e) => {
+      if (e.key === "Escape") setOverflowDetailsItem(null);
+    };
+    document.addEventListener("mousedown", handleMouseDown);
+    document.addEventListener("keydown", handleKeyDown);
+    return () => {
+      document.removeEventListener("mousedown", handleMouseDown);
+      document.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [overflowDetailsItem]);
+  const hasActiveOverflowItem = overflowIds.some((id) => id === activeId);
+  const navClasses = cn(
+    "relative z-50 w-full",
+    "backdrop-blur-md supports-[backdrop-filter]:bg-background/80",
+    position2 === "sticky" && "sticky",
+    position2 === "fixed" && "fixed left-0",
+    // When morph is enabled: always set mx-auto + overflow-hidden so framer
+    // motion can smoothly animate maxWidth and borderRadius without jumps.
+    morphOnScroll && "mx-auto overflow-hidden",
+    // Border: b-only when not morphed, full border when morphed
+    isScrolled && morphOnScroll ? "border border-header-border" : "border-b border-header-border",
+    className
+  );
+  const morphAnimateProps = morphOnScroll ? {
+    initial: false,
+    animate: {
+      maxWidth: isScrolled ? 896 : 3e3,
+      // 56rem = 896px; 3000 = effectively full
+      borderRadius: isScrolled ? 9999 : 0,
+      top: isScrolled ? 12 : 0,
+      // float down from viewport edge when morphed
+      boxShadow: isScrolled ? "0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1)" : "0 0 0 0 rgba(0,0,0,0)"
+    },
+    transition: {
+      type: "spring",
+      stiffness: 300,
+      damping: 30
+    }
+  } : { style: { top: 0 } };
+  if (isMobile) {
+    return /* @__PURE__ */ jsxs(
+      "nav",
+      {
+        ref: navRef,
+        className: cn(
+          "relative z-50 w-full border-b border-header-border",
+          "backdrop-blur-md supports-[backdrop-filter]:bg-background/80",
+          position2 === "sticky" && "sticky top-0",
+          position2 === "fixed" && "fixed top-0 left-0",
+          className
+        ),
+        "aria-label": "Main navigation",
+        children: [
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: "flex items-center gap-3 px-4",
+              style: { height: resolvedHeight },
+              children: [
+                mobileMenuTrigger ? /* @__PURE__ */ jsx("div", { onClick: () => setMobileMenuOpen(true), children: mobileMenuTrigger }) : /* @__PURE__ */ jsxs(
+                  Button$1,
+                  {
+                    variant: "ghost",
+                    size: "icon",
+                    className: "size-10 shrink-0",
+                    onClick: () => setMobileMenuOpen(true),
+                    children: [
+                      /* @__PURE__ */ jsx(Menu, { className: "!size-5" }),
+                      /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Open menu" })
+                    ]
+                  }
+                ),
+                logo && /* @__PURE__ */ jsx("div", { className: "flex-1 min-w-0", children: logo }),
+                rightContent && /* @__PURE__ */ jsx("div", { className: "shrink-0 flex items-center gap-2", children: rightContent })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            NavBarMobileMenu,
+            {
+              items,
+              activeId,
+              onItemClick: handleItemClick,
+              open: mobileMenuOpen,
+              onOpenChange: setMobileMenuOpen,
+              linkComponent,
+              title: mobileMenuTitle,
+              colorClasses: {
+                textClass: resolvedColor.textClass,
+                bgClass: resolvedColor.bgClass,
+                hoverBgClass: resolvedColor.hoverBgClass,
+                textStyle: resolvedColor.textStyle,
+                bgStyle: resolvedColor.bgStyle
+              }
+            }
+          )
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(
+    motion$1.nav,
+    {
+      ref: navRef,
+      className: navClasses,
+      ...morphAnimateProps,
+      "aria-label": "Main navigation",
+      children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "flex items-center gap-4 mx-auto w-full py-2 transition-[padding] duration-300",
+              isScrolled && morphOnScroll ? "px-4 md:px-6 lg:px-8" : "px-4 lg:px-6"
+            ),
+            style: { minHeight: resolvedHeight },
+            children: [
+              logo && /* @__PURE__ */ jsx("div", { className: "shrink-0", children: logo }),
+              /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  ref: containerRef,
+                  className: cn(
+                    "flex-1 flex items-center min-w-0",
+                    logo ? "justify-center" : "justify-start",
+                    itemsClassName
+                  ),
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      "ul",
+                      {
+                        ref: measureRef,
+                        className: "flex items-center gap-1 list-none m-0 p-0 absolute invisible h-0 overflow-hidden whitespace-nowrap pointer-events-none",
+                        "aria-hidden": "true",
+                        children: items.map((item) => /* @__PURE__ */ jsx("li", { "data-nav-item-id": item.id, className: "shrink-0", children: /* @__PURE__ */ jsx(
+                          NavBarItemTrigger,
+                          {
+                            item,
+                            isActive: false,
+                            isDetailsOpen: false,
+                            onClick: () => {
+                            },
+                            tabIndex: -1
+                          }
+                        ) }, item.id))
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      "div",
+                      {
+                        ref: moreButtonMeasureRef,
+                        className: "absolute invisible h-0 overflow-hidden pointer-events-none",
+                        "aria-hidden": "true",
+                        children: /* @__PURE__ */ jsx(MoreButton, { label: moreLabel, hasActiveOverflowItem: false })
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      "ul",
+                      {
+                        className: cn(
+                          "flex items-center gap-1 list-none m-0 p-0",
+                          measuring && "opacity-0"
+                        ),
+                        role: "menubar",
+                        "aria-label": "Main navigation",
+                        children: items.filter((item) => visibleIds.includes(item.id)).map((item) => /* @__PURE__ */ jsx("li", { role: "none", className: "shrink-0", children: /* @__PURE__ */ jsx(
+                          NavBarItemTrigger,
+                          {
+                            item,
+                            isActive: activeId === item.id,
+                            isDetailsOpen: openDetailsId === item.id,
+                            onClick: () => handleItemClick(item),
+                            linkComponent,
+                            resolvedColor,
+                            isPill: isScrolled && morphOnScroll
+                          }
+                        ) }, item.id))
+                      }
+                    ),
+                    showMore && /* @__PURE__ */ jsx("div", { ref: moreButtonRef, className: cn("shrink-0 ml-1", measuring && "opacity-0"), children: /* @__PURE__ */ jsxs(DropdownMenu, { onOpenChange: (open) => {
+                      if (open) setOverflowDetailsItem(null);
+                    }, children: [
+                      /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+                        MoreButton,
+                        {
+                          label: moreLabel,
+                          hasActiveOverflowItem,
+                          resolvedColor
+                        }
+                      ) }),
+                      /* @__PURE__ */ jsx(DropdownMenuContent, { align: "end", sideOffset: 8, children: items.filter((item) => overflowIds.includes(item.id)).map((item) => /* @__PURE__ */ jsxs(
+                        DropdownMenuItem,
+                        {
+                          onClick: () => {
+                            item.onClick?.();
+                            setActiveId(item.id);
+                            setOpenDetailsId(null);
+                            if (item.details) {
+                              setOverflowDetailsItem(
+                                overflowDetailsItem?.id === item.id ? null : item
+                              );
+                            }
+                          },
+                          className: cn(
+                            activeId === item.id && `${resolvedColor.textClass} ${resolvedColor.bgClass}`
+                          ),
+                          style: activeId === item.id && resolvedColor.textStyle ? { ...resolvedColor.textStyle, ...resolvedColor.bgStyle } : void 0,
+                          disabled: item.disabled,
+                          children: [
+                            item.icon,
+                            item.label
+                          ]
+                        },
+                        item.id
+                      )) })
+                    ] }) }),
+                    overflowDetailsItem?.details && createPortal(
+                      /* @__PURE__ */ jsxs(
+                        "div",
+                        {
+                          ref: overflowDetailsRef,
+                          className: cn(
+                            "fixed z-50",
+                            "w-max max-w-[min(24rem,calc(100vw-2rem))]",
+                            "rounded-lg border border-border bg-background p-4 shadow-lg",
+                            "animate-in fade-in-0 zoom-in-95"
+                          ),
+                          style: {
+                            top: overflowPanelPos.top,
+                            right: overflowPanelPos.right
+                          },
+                          children: [
+                            /* @__PURE__ */ jsx(
+                              "button",
+                              {
+                                type: "button",
+                                onClick: () => setOverflowDetailsItem(null),
+                                className: cn(
+                                  "absolute top-2 right-2 p-1 rounded-md",
+                                  "text-foreground/40 hover:text-foreground hover:bg-foreground/5",
+                                  "transition-colors cursor-pointer"
+                                ),
+                                "aria-label": "Close panel",
+                                children: /* @__PURE__ */ jsx(X, { className: "size-4" })
+                              }
+                            ),
+                            overflowDetailsItem.details
+                          ]
+                        }
+                      ),
+                      document.body
+                    )
+                  ]
+                }
+              ),
+              rightContent && /* @__PURE__ */ jsx("div", { className: "shrink-0 flex items-center gap-2", children: rightContent })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          NavBarDetailsPanel,
+          {
+            item: activeDetailsItem,
+            openDetailsId: openDetailsId ?? null,
+            onClose: () => setOpenDetailsId(null),
+            navBottomOffset: navRect.bottom,
+            navWidth: navRect.width,
+            navLeft: navRect.left
+          }
+        )
+      ]
+    }
+  );
+}
+var MoreButton = React10.forwardRef(function MoreButton2({ label, hasActiveOverflowItem, resolvedColor, ...props }, ref) {
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      ref,
+      type: "button",
+      className: cn(
+        "inline-flex items-center gap-1 px-3 h-8 rounded-md",
+        "text-sm font-medium whitespace-nowrap cursor-pointer",
+        "transition-colors duration-150",
+        "text-foreground/80 hover:text-foreground",
+        resolvedColor ? resolvedColor.hoverBgClass : "hover:bg-foreground/5",
+        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+        hasActiveOverflowItem && resolvedColor && `${resolvedColor.textClass} ${resolvedColor.bgClass}`
+      ),
+      style: hasActiveOverflowItem && resolvedColor?.textStyle ? { ...resolvedColor.textStyle, ...resolvedColor.bgStyle } : void 0,
+      "aria-label": "More navigation items",
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("span", { children: label }),
+        /* @__PURE__ */ jsx(ChevronDown, { className: "size-3.5" })
+      ]
+    }
+  );
+});
+function NavBarItemTrigger({
+  item,
+  isActive,
+  isDetailsOpen,
+  onClick,
+  linkComponent,
+  tabIndex,
+  resolvedColor,
+  isPill
+}) {
+  const classes = cn(
+    "inline-flex items-center gap-1 px-3 h-8",
+    isPill ? "rounded-full" : "rounded-md",
+    "text-sm font-medium whitespace-nowrap cursor-pointer",
+    "transition-colors duration-150",
+    "text-foreground/80 hover:text-foreground",
+    resolvedColor ? resolvedColor.hoverBgClass : "hover:bg-foreground/5",
+    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+    isActive && resolvedColor && `${resolvedColor.textClass} ${resolvedColor.bgClass}`,
+    isDetailsOpen && resolvedColor && `${resolvedColor.textClass} ${resolvedColor.bgClass}`,
+    item.disabled && "opacity-50 pointer-events-none"
+  );
+  const colorStyle = resolvedColor?.textStyle && (isActive || isDetailsOpen) ? {
+    ...resolvedColor.textStyle,
+    ...resolvedColor.bgStyle
+  } : void 0;
+  const content3 = /* @__PURE__ */ jsxs(Fragment, { children: [
+    item.icon && /* @__PURE__ */ jsx("span", { className: "shrink-0", children: item.icon }),
+    /* @__PURE__ */ jsx("span", { children: item.label }),
+    item.details && /* @__PURE__ */ jsx(
+      ChevronDown,
+      {
+        className: cn(
+          "size-3.5 transition-transform duration-200",
+          isDetailsOpen && "rotate-180"
+        ),
+        "aria-hidden": "true"
+      }
+    )
+  ] });
+  if (item.details) {
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        className: classes,
+        style: colorStyle,
+        onClick,
+        role: "menuitem",
+        "aria-expanded": isDetailsOpen,
+        "aria-haspopup": "true",
+        disabled: item.disabled,
+        tabIndex,
+        children: content3
+      }
+    );
+  }
+  if (item.href) {
+    if (linkComponent) {
+      const LinkComp = linkComponent;
+      return /* @__PURE__ */ jsx(
+        LinkComp,
+        {
+          to: item.href,
+          className: classes,
+          style: colorStyle,
+          onClick,
+          role: "menuitem",
+          tabIndex,
+          children: content3
+        }
+      );
+    }
+    return /* @__PURE__ */ jsx(
+      "a",
+      {
+        href: item.href,
+        className: classes,
+        style: colorStyle,
+        onClick,
+        role: "menuitem",
+        tabIndex,
+        children: content3
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      className: classes,
+      style: colorStyle,
+      onClick,
+      role: "menuitem",
+      disabled: item.disabled,
+      tabIndex,
+      children: content3
+    }
+  );
+}
 var Select = SelectPrimitive.Root;
 var SelectGroup = SelectPrimitive.Group;
 var SelectValue = SelectPrimitive.Value;
@@ -47801,7 +48654,7 @@ var triggerSizeClasses = {
   default: "h-10 px-3.5 py-2 text-base md:text-sm [&_[data-slot=select-icon]]:size-4",
   lg: "h-12 px-5 text-lg [&_[data-slot=select-icon]]:size-5"
 };
-var SelectTrigger = React8.forwardRef(({ className, children, size = "default", ...props }, ref) => /* @__PURE__ */ jsxs(
+var SelectTrigger = React10.forwardRef(({ className, children, size = "default", ...props }, ref) => /* @__PURE__ */ jsxs(
   SelectPrimitive.Trigger,
   {
     ref,
@@ -47824,7 +48677,7 @@ var SelectTrigger = React8.forwardRef(({ className, children, size = "default",
   }
 ));
 SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
-var SelectScrollUpButton = React8.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var SelectScrollUpButton = React10.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   SelectPrimitive.ScrollUpButton,
   {
     ref,
@@ -47837,7 +48690,7 @@ var SelectScrollUpButton = React8.forwardRef(({ className, ...props }, ref) => /
   }
 ));
 SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
-var SelectScrollDownButton = React8.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var SelectScrollDownButton = React10.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   SelectPrimitive.ScrollDownButton,
   {
     ref,
@@ -47850,7 +48703,7 @@ var SelectScrollDownButton = React8.forwardRef(({ className, ...props }, ref) =>
   }
 ));
 SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName;
-var SelectContent = React8.forwardRef(({ className, children, position: position2 = "popper", ...props }, ref) => /* @__PURE__ */ jsx(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsxs(
+var SelectContent = React10.forwardRef(({ className, children, position: position2 = "popper", ...props }, ref) => /* @__PURE__ */ jsx(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsxs(
   SelectPrimitive.Content,
   {
     ref,
@@ -47878,7 +48731,7 @@ var SelectContent = React8.forwardRef(({ className, children, position: position
   }
 ) }));
 SelectContent.displayName = SelectPrimitive.Content.displayName;
-var SelectLabel = React8.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var SelectLabel = React10.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   SelectPrimitive.Label,
   {
     ref,
@@ -47887,7 +48740,7 @@ var SelectLabel = React8.forwardRef(({ className, ...props }, ref) => /* @__PURE
   }
 ));
 SelectLabel.displayName = SelectPrimitive.Label.displayName;
-var SelectItem = React8.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
+var SelectItem = React10.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
   SelectPrimitive.Item,
   {
     ref,
@@ -47903,7 +48756,7 @@ var SelectItem = React8.forwardRef(({ className, children, ...props }, ref) => /
   }
 ));
 SelectItem.displayName = SelectPrimitive.Item.displayName;
-var SelectSeparator = React8.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var SelectSeparator = React10.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   SelectPrimitive.Separator,
   {
     ref,
@@ -47920,13 +48773,13 @@ function Tabs({
   children,
   ...props
 }) {
-  const [activeValue, setActiveValue] = React8.useState(
+  const [activeValue, setActiveValue] = React10.useState(
     defaultValue
   );
-  const triggersRef = React8.useRef(/* @__PURE__ */ new Map());
-  const initialSet = React8.useRef(false);
+  const triggersRef = React10.useRef(/* @__PURE__ */ new Map());
+  const initialSet = React10.useRef(false);
   const isControlled = value2 !== void 0;
-  React8.useEffect(() => {
+  React10.useEffect(() => {
     if (!isControlled && activeValue === void 0 && triggersRef.current.size > 0 && !initialSet.current) {
       const firstTab = triggersRef.current.keys().next().value;
       if (firstTab !== void 0) {
@@ -47935,7 +48788,7 @@ function Tabs({
       }
     }
   }, [activeValue, isControlled]);
-  const registerTrigger = React8.useCallback(
+  const registerTrigger = React10.useCallback(
     (val2, node) => {
       if (node) {
         triggersRef.current.set(val2, node);
@@ -47949,7 +48802,7 @@ function Tabs({
     },
     [activeValue, isControlled]
   );
-  const handleValueChange = React8.useCallback(
+  const handleValueChange = React10.useCallback(
     (val2) => {
       if (!isControlled) setActiveValue(val2);
       else onValueChange?.(val2);
@@ -47998,9 +48851,9 @@ function TabsTrigger({
   ...props
 }) {
   const { activeValue, handleValueChange, registerTrigger } = useTabs();
-  const localRef = React8.useRef(null);
-  React8.useImperativeHandle(ref, () => localRef.current);
-  React8.useEffect(() => {
+  const localRef = React10.useRef(null);
+  React10.useImperativeHandle(ref, () => localRef.current);
+  React10.useEffect(() => {
     registerTrigger(value2, localRef.current);
     return () => registerTrigger(value2, null);
   }, [value2, registerTrigger]);
@@ -48029,15 +48882,15 @@ function TabsContents({
   ...props
 }) {
   const { activeValue } = useTabs();
-  const childrenArray = React8.Children.toArray(children);
+  const childrenArray = React10.Children.toArray(children);
   const activeIndex = childrenArray.findIndex(
-    (child) => React8.isValidElement(child) && typeof child.props === "object" && child.props !== null && "value" in child.props && child.props.value === activeValue
+    (child) => React10.isValidElement(child) && typeof child.props === "object" && child.props !== null && "value" in child.props && child.props.value === activeValue
   );
-  const containerRef = React8.useRef(null);
-  const itemRefs = React8.useRef([]);
-  const [height2, setHeight] = React8.useState(0);
-  const roRef = React8.useRef(null);
-  const measure = React8.useCallback((index2) => {
+  const containerRef = React10.useRef(null);
+  const itemRefs = React10.useRef([]);
+  const [height2, setHeight] = React10.useState(0);
+  const roRef = React10.useRef(null);
+  const measure = React10.useCallback((index2) => {
     const pane = itemRefs.current[index2];
     const container = containerRef.current;
     if (!pane || !container) return 0;
@@ -48051,7 +48904,7 @@ function TabsContents({
     total = Math.ceil(total * dpr) / dpr;
     return total;
   }, []);
-  React8.useEffect(() => {
+  React10.useEffect(() => {
     if (roRef.current) {
       roRef.current.disconnect();
       roRef.current = null;
@@ -48072,7 +48925,7 @@ function TabsContents({
       roRef.current = null;
     };
   }, [activeIndex, childrenArray.length, measure]);
-  React8.useLayoutEffect(() => {
+  React10.useLayoutEffect(() => {
     if (height2 === 0 && activeIndex >= 0) {
       const next = measure(activeIndex);
       if (next !== 0) setHeight(next);
@@ -48133,7 +48986,7 @@ function TabsContent({
     }
   );
 }
-var TabsListVariantContext = React8.createContext(void 0);
+var TabsListVariantContext = React10.createContext(void 0);
 function LineTabsListContent({ className, ...props }) {
   return /* @__PURE__ */ jsx(
     TabsHighlight,
@@ -48214,7 +49067,7 @@ function TabsList2({ className, variant, ...props }) {
 }
 var tabsTriggerBaseClass = "data-[state=active]:text-primary tracking-wide focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring inline-flex flex-1 items-center justify-center gap-1.5 rounded-md w-full px-2 text-sm font-medium whitespace-nowrap transition-colors duration-500 ease-in-out focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4";
 function TabsTrigger2({ className, ...props }) {
-  const listVariant = React8.useContext(TabsListVariantContext);
+  const listVariant = React10.useContext(TabsListVariantContext);
   const isLine = listVariant === "line";
   return /* @__PURE__ */ jsx(TabsHighlightItem, { value: props.value, className: "flex-1", children: /* @__PURE__ */ jsx(
     TabsTrigger,
@@ -48247,7 +49100,7 @@ function extractTextLabel(children) {
   if (Array.isArray(children)) {
     return children.map(extractTextLabel).join("");
   }
-  if (React8.isValidElement(children) && children.props && typeof children.props === "object" && children.props !== null && "children" in children.props) {
+  if (React10.isValidElement(children) && children.props && typeof children.props === "object" && children.props !== null && "children" in children.props) {
     return extractTextLabel(
       children.props.children
     );
@@ -48255,13 +49108,13 @@ function extractTextLabel(children) {
   return "";
 }
 function isTabElement(node) {
-  return React8.isValidElement(node) && node.type === ScrollableSectionsTab;
+  return React10.isValidElement(node) && node.type === ScrollableSectionsTab;
 }
 function partitionChildren(children) {
   let tabsEl = null;
   const contentEls = [];
-  React8.Children.forEach(children, (child) => {
-    if (!React8.isValidElement(child)) return;
+  React10.Children.forEach(children, (child) => {
+    if (!React10.isValidElement(child)) return;
     if (child.type === ScrollableSectionsTabs) {
       tabsEl = child;
     } else if (child.type === ScrollableSectionsContent) {
@@ -48272,9 +49125,9 @@ function partitionChildren(children) {
   });
   return { tabsEl, contentEls };
 }
-var ScrollableSectionsContext = React8.createContext(null);
+var ScrollableSectionsContext = React10.createContext(null);
 function useScrollableSections() {
-  const ctx = React8.useContext(ScrollableSectionsContext);
+  const ctx = React10.useContext(ScrollableSectionsContext);
   if (!ctx) {
     throw new Error(
       "ScrollableSections subcomponents must be used within ScrollableSections."
@@ -48321,19 +49174,19 @@ function ScrollableSectionsRoot({
   ...rest
 }) {
   const { tabsEl, contentEls } = partitionChildren(children);
-  const [tabsItems, setTabsItems] = React8.useState([]);
-  const [sectionsVersion, bumpSections] = React8.useReducer(
+  const [tabsItems, setTabsItems] = React10.useState([]);
+  const [sectionsVersion, bumpSections] = React10.useReducer(
     (n) => n + 1,
     0
   );
-  const sectionsRef = React8.useRef(/* @__PURE__ */ new Map());
-  const containerRef = React8.useRef(null);
-  const mobileNavRef = React8.useRef(null);
-  const ignoreSpyUntil = React8.useRef(0);
-  const prefersReducedMotionRef = React8.useRef(false);
-  const didDefaultScrollRef = React8.useRef(false);
-  const [activeId, setActiveId] = React8.useState(() => defaultValue ?? "");
-  React8.useEffect(() => {
+  const sectionsRef = React10.useRef(/* @__PURE__ */ new Map());
+  const containerRef = React10.useRef(null);
+  const mobileNavRef = React10.useRef(null);
+  const ignoreSpyUntil = React10.useRef(0);
+  const prefersReducedMotionRef = React10.useRef(false);
+  const didDefaultScrollRef = React10.useRef(false);
+  const [activeId, setActiveId] = React10.useState(() => defaultValue ?? "");
+  React10.useEffect(() => {
     const mq = window.matchMedia("(prefers-reduced-motion: reduce)");
     prefersReducedMotionRef.current = mq.matches;
     const onChange = () => {
@@ -48343,7 +49196,7 @@ function ScrollableSectionsRoot({
     return () => mq.removeEventListener("change", onChange);
   }, []);
   const safeActiveId = activeId && tabsItems.some((t) => t.id === activeId) ? activeId : tabsItems[0]?.id ?? "";
-  const selectSection = React8.useCallback(
+  const selectSection = React10.useCallback(
     (id) => {
       const el = sectionsRef.current.get(id);
       if (!el) return;
@@ -48357,7 +49210,7 @@ function ScrollableSectionsRoot({
     },
     []
   );
-  const registerSection = React8.useCallback(
+  const registerSection = React10.useCallback(
     (id, el) => {
       if (el) sectionsRef.current.set(id, el);
       else sectionsRef.current.delete(id);
@@ -48365,7 +49218,7 @@ function ScrollableSectionsRoot({
     },
     []
   );
-  const setTabsItemsStable = React8.useCallback(
+  const setTabsItemsStable = React10.useCallback(
     (items) => {
       setTabsItems(items);
       setActiveId((prev) => {
@@ -48379,7 +49232,7 @@ function ScrollableSectionsRoot({
     },
     [defaultValue]
   );
-  React8.useLayoutEffect(() => {
+  React10.useLayoutEffect(() => {
     if (!defaultValue || didDefaultScrollRef.current) return;
     const el = sectionsRef.current.get(defaultValue);
     if (!el) return;
@@ -48389,7 +49242,7 @@ function ScrollableSectionsRoot({
       setActiveId(defaultValue);
     });
   }, [defaultValue, sectionsVersion]);
-  React8.useEffect(() => {
+  React10.useEffect(() => {
     const orderedIds = tabsItems.map((t) => t.id);
     if (orderedIds.length === 0) return;
     const updateActive = () => {
@@ -48422,7 +49275,7 @@ function ScrollableSectionsRoot({
       window.removeEventListener("resize", updateActive);
     };
   }, [tabsItems, scrollRootRef, sectionsVersion]);
-  const contextValue = React8.useMemo(
+  const contextValue = React10.useMemo(
     () => ({
       activeId: safeActiveId,
       selectSection,
@@ -48491,11 +49344,11 @@ function ScrollableSectionsTabs({
   ...rest
 }) {
   const { activeId, selectSection, setTabsItems } = useScrollableSections();
-  const tabNodes = React8.useMemo(
-    () => React8.Children.toArray(children).filter(isTabElement),
+  const tabNodes = React10.useMemo(
+    () => React10.Children.toArray(children).filter(isTabElement),
     [children]
   );
-  const items = React8.useMemo(
+  const items = React10.useMemo(
     () => tabNodes.map((node) => {
       const { id, label, children: tabChildren } = node.props;
       const text2 = label?.trim() || extractTextLabel(tabChildren).trim() || id;
@@ -48503,7 +49356,7 @@ function ScrollableSectionsTabs({
     }),
     [tabNodes]
   );
-  React8.useLayoutEffect(() => {
+  React10.useLayoutEffect(() => {
     setTabsItems(items);
   }, [items, setTabsItems]);
   if (tabNodes.length === 0) {
@@ -48570,7 +49423,7 @@ function ScrollableSectionsContent({
   ...rest
 }) {
   const { registerSection } = useScrollableSections();
-  const ref = React8.useCallback(
+  const ref = React10.useCallback(
     (node) => {
       registerSection(id, node);
     },
@@ -48601,15 +49454,15 @@ var ScrollableSections = Object.assign(ScrollableSectionsRoot, {
   Content: ScrollableSectionsContent
 });
 var Form = FormProvider;
-var FormFieldContext = React8.createContext(null);
+var FormFieldContext = React10.createContext(null);
 var FormField = ({
   ...props
 }) => {
   return /* @__PURE__ */ jsx(FormFieldContext.Provider, { value: { name: props.name }, children: /* @__PURE__ */ jsx(Controller, { ...props }) });
 };
 var useFormField = () => {
-  const fieldContext = React8.useContext(FormFieldContext);
-  const itemContext = React8.useContext(FormItemContext);
+  const fieldContext = React10.useContext(FormFieldContext);
+  const itemContext = React10.useContext(FormItemContext);
   const { getFieldState, formState } = useFormContext();
   if (!fieldContext) {
     throw new Error("useFormField should be used within <FormField>");
@@ -48628,13 +49481,13 @@ var useFormField = () => {
     ...fieldState
   };
 };
-var FormItemContext = React8.createContext(null);
-var FormItem = React8.forwardRef(({ className, ...props }, ref) => {
-  const id = React8.useId();
+var FormItemContext = React10.createContext(null);
+var FormItem = React10.forwardRef(({ className, ...props }, ref) => {
+  const id = React10.useId();
   return /* @__PURE__ */ jsx(FormItemContext.Provider, { value: { id }, children: /* @__PURE__ */ jsx("div", { ref, className: cn("space-y-2", className), ...props }) });
 });
 FormItem.displayName = "FormItem";
-var FormLabel = React8.forwardRef(({ className, ...props }, ref) => {
+var FormLabel = React10.forwardRef(({ className, ...props }, ref) => {
   const { error, formItemId } = useFormField();
   return /* @__PURE__ */ jsx(
     Label,
@@ -48647,7 +49500,7 @@ var FormLabel = React8.forwardRef(({ className, ...props }, ref) => {
   );
 });
 FormLabel.displayName = "FormLabel";
-var FormControl = React8.forwardRef(({ ...props }, ref) => {
+var FormControl = React10.forwardRef(({ ...props }, ref) => {
   const { error, formItemId, formDescriptionId, formMessageId } = useFormField();
   return /* @__PURE__ */ jsx(
     Slot,
@@ -48661,7 +49514,7 @@ var FormControl = React8.forwardRef(({ ...props }, ref) => {
   );
 });
 FormControl.displayName = "FormControl";
-var FormDescription = React8.forwardRef(({ className, ...props }, ref) => {
+var FormDescription = React10.forwardRef(({ className, ...props }, ref) => {
   const { formDescriptionId } = useFormField();
   return /* @__PURE__ */ jsx(
     "p",
@@ -48674,7 +49527,7 @@ var FormDescription = React8.forwardRef(({ className, ...props }, ref) => {
   );
 });
 FormDescription.displayName = "FormDescription";
-var FormMessage = React8.forwardRef(({ className, children, ...props }, ref) => {
+var FormMessage = React10.forwardRef(({ className, children, ...props }, ref) => {
   const { error, formMessageId } = useFormField();
   const body = error ? String(error?.message ?? "") : children;
   if (!body) {
@@ -48924,10 +49777,10 @@ var typographyDefaultElement = {
 };
 
 // src/components/typography/typography.tsx
-var Typography = React8.forwardRef(
+var Typography = React10.forwardRef(
   function Typography2({ variant = "body1", as, className, children, ...rest }, ref) {
     const Component = as ?? typographyDefaultElement[variant];
-    return React8.createElement(
+    return React10.createElement(
       Component,
       {
         ref,
@@ -49000,7 +49853,7 @@ function mergeFiles(existing, incoming, multiple) {
   }
   return next;
 }
-var FileUpload = React8.forwardRef(
+var FileUpload = React10.forwardRef(
   function FileUpload2({
     className,
     title = "Drag & drop files here",
@@ -49015,24 +49868,24 @@ var FileUpload = React8.forwardRef(
     id,
     ...inputPropsRest
   }, ref) {
-    const autoId = React8.useId();
+    const autoId = React10.useId();
     const inputId = id ?? autoId;
     const descriptionId = `${inputId}-description`;
     const { ref: refFromRegister, ...inputAttrs } = inputPropsRest;
     const isControlled = filesProp !== void 0;
-    const innerRef = React8.useRef(null);
-    const filesRef = React8.useRef([]);
-    const dragDepthRef = React8.useRef(0);
-    const [internalFiles, setInternalFiles] = React8.useState([]);
-    const [isDragging, setIsDragging] = React8.useState(false);
+    const innerRef = React10.useRef(null);
+    const filesRef = React10.useRef([]);
+    const dragDepthRef = React10.useRef(0);
+    const [internalFiles, setInternalFiles] = React10.useState([]);
+    const [isDragging, setIsDragging] = React10.useState(false);
     const listFiles = isControlled ? filesProp ?? [] : internalFiles;
     filesRef.current = listFiles;
-    React8.useLayoutEffect(() => {
+    React10.useLayoutEffect(() => {
       const input = innerRef.current;
       if (!input) return;
       syncInputFiles(input, listFiles);
     }, [listFiles]);
-    const setRefs = React8.useCallback(
+    const setRefs = React10.useCallback(
       (node) => {
         innerRef.current = node;
         assignRef(ref, node);
@@ -49040,7 +49893,7 @@ var FileUpload = React8.forwardRef(
       },
       [ref, refFromRegister]
     );
-    const applyFiles = React8.useCallback(
+    const applyFiles = React10.useCallback(
       (incoming) => {
         const input = innerRef.current;
         if (!input) return;
@@ -49059,7 +49912,7 @@ var FileUpload = React8.forwardRef(
       },
       [multiple, onChange, onFilesChange, isControlled]
     );
-    const handleInputChange = React8.useCallback(
+    const handleInputChange = React10.useCallback(
       (event) => {
         const input = event.target;
         const picked = filesFromList(input.files);
@@ -49079,7 +49932,7 @@ var FileUpload = React8.forwardRef(
       },
       [multiple, onChange, onFilesChange, isControlled]
     );
-    const removeAt = React8.useCallback(
+    const removeAt = React10.useCallback(
       (index2) => {
         const input = innerRef.current;
         if (!input) return;
@@ -49097,7 +49950,7 @@ var FileUpload = React8.forwardRef(
       },
       [onChange, onFilesChange, isControlled]
     );
-    const onDragEnter = React8.useCallback(
+    const onDragEnter = React10.useCallback(
       (e) => {
         e.preventDefault();
         e.stopPropagation();
@@ -49107,7 +49960,7 @@ var FileUpload = React8.forwardRef(
       },
       [disabled]
     );
-    const onDragLeave = React8.useCallback(
+    const onDragLeave = React10.useCallback(
       (e) => {
         e.preventDefault();
         e.stopPropagation();
@@ -49120,11 +49973,11 @@ var FileUpload = React8.forwardRef(
       },
       [disabled]
     );
-    const onDragOver = React8.useCallback((e) => {
+    const onDragOver = React10.useCallback((e) => {
       e.preventDefault();
       e.stopPropagation();
     }, []);
-    const onDrop = React8.useCallback(
+    const onDrop = React10.useCallback(
       (e) => {
         e.preventDefault();
         e.stopPropagation();
@@ -49137,11 +49990,11 @@ var FileUpload = React8.forwardRef(
       },
       [applyFiles, disabled]
     );
-    const openFileDialog = React8.useCallback(() => {
+    const openFileDialog = React10.useCallback(() => {
       if (disabled) return;
       innerRef.current?.click();
     }, [disabled]);
-    const onDropZoneKeyDown = React8.useCallback(
+    const onDropZoneKeyDown = React10.useCallback(
       (e) => {
         if (disabled) return;
         if (e.key === "Enter" || e.key === " ") {
@@ -49278,6 +50131,339 @@ var FileUpload = React8.forwardRef(
   }
 );
 FileUpload.displayName = "FileUpload";
+function syncInputFiles2(input, files) {
+  const dt = new DataTransfer();
+  for (const f of files) {
+    dt.items.add(f);
+  }
+  input.files = dt.files;
+}
+function assignRef2(r, node) {
+  if (r == null) return;
+  if (typeof r === "function") {
+    r(node);
+  } else {
+    r.current = node;
+  }
+}
+function fileKey2(file) {
+  return `${file.name}-${file.size}-${file.lastModified}`;
+}
+function filesFromList2(list) {
+  if (list == null || list.length === 0) return [];
+  return Array.from(list);
+}
+function mergeFiles2(existing, incoming, multiple) {
+  if (!multiple) {
+    return incoming.length > 0 ? [incoming[0]] : [];
+  }
+  const seen = new Set(existing.map(fileKey2));
+  const next = [...existing];
+  for (const f of incoming) {
+    const k = fileKey2(f);
+    if (!seen.has(k)) {
+      seen.add(k);
+      next.push(f);
+    }
+  }
+  return next;
+}
+var sizeClasses = {
+  sm: "h-8 text-xs",
+  default: "h-10 text-base md:text-sm",
+  lg: "h-12 text-lg"
+};
+var iconSizeClasses = {
+  sm: "size-3.5",
+  default: "size-4",
+  lg: "size-5"
+};
+var clearButtonSizeClasses = {
+  sm: "size-5",
+  default: "size-6",
+  lg: "size-7"
+};
+var PRESET_BROWSE_TOKENS = {
+  primary: { wrapperBg: "bg-primary/10", wrapperBorder: "border-s-primary/20", buttonText: "text-primary" },
+  secondary: { wrapperBg: "bg-secondary/10", wrapperBorder: "border-s-secondary/20", buttonText: "text-secondary" },
+  error: { wrapperBg: "bg-error/10", wrapperBorder: "border-s-error/20", buttonText: "text-error" },
+  info: { wrapperBg: "bg-info/10", wrapperBorder: "border-s-info/20", buttonText: "text-info" },
+  success: { wrapperBg: "bg-success/10", wrapperBorder: "border-s-success/20", buttonText: "text-success" },
+  warning: { wrapperBg: "bg-warning/10", wrapperBorder: "border-s-warning/20", buttonText: "text-warning" },
+  disabled: { wrapperBg: "bg-disabled/10", wrapperBorder: "border-s-disabled/20", buttonText: "text-disabled" },
+  gray: { wrapperBg: "bg-gray/10", wrapperBorder: "border-s-gray/20", buttonText: "text-gray" },
+  mist: { wrapperBg: "bg-mist", wrapperBorder: "border-s-mist-border", buttonText: "text-mist-foreground" }
+};
+function resolveBrowseTokens(color) {
+  if (color in PRESET_BROWSE_TOKENS) {
+    return PRESET_BROWSE_TOKENS[color];
+  }
+  return {
+    wrapperBg: "bg-[color-mix(in_srgb,var(--fi-accent)_10%,transparent)]",
+    wrapperBorder: "border-s-[color-mix(in_srgb,var(--fi-accent)_20%,transparent)]",
+    buttonText: "text-[var(--fi-accent)]",
+    style: { "--fi-accent": color }
+  };
+}
+var FileInput = React10.forwardRef(
+  function FileInput2({
+    label,
+    required,
+    size,
+    rounded,
+    color = "primary",
+    startHelperContent,
+    endHelperContent,
+    hintContent,
+    error,
+    errorContent,
+    startIcon,
+    disabled = false,
+    readOnly = false,
+    id,
+    className,
+    name: name2,
+    accept,
+    multiple = false,
+    files: filesProp,
+    onFilesChange,
+    onChange,
+    browseLabel = "Browse",
+    changeLabel = "Change",
+    clearLabel = "Clear file",
+    placeholder = "No file chosen",
+    andMoreLabel = (n) => `and ${n} more`,
+    ...restProps
+  }, ref) {
+    const autoId = React10.useId();
+    const inputId = id ?? autoId;
+    const effectiveSize = size ?? "default";
+    const hasError = error || !!errorContent;
+    const browseTokens = resolveBrowseTokens(color);
+    const { ref: refFromRegister, ...inputAttrs } = restProps;
+    const isControlled = filesProp !== void 0;
+    const innerRef = React10.useRef(null);
+    const filesRef = React10.useRef([]);
+    const [internalFiles, setInternalFiles] = React10.useState([]);
+    const listFiles = isControlled ? filesProp ?? [] : internalFiles;
+    filesRef.current = listFiles;
+    const hasFiles = listFiles.length > 0;
+    React10.useLayoutEffect(() => {
+      const input = innerRef.current;
+      if (!input) return;
+      syncInputFiles2(input, listFiles);
+    }, [listFiles]);
+    const setRefs = React10.useCallback(
+      (node) => {
+        innerRef.current = node;
+        assignRef2(ref, node);
+        assignRef2(refFromRegister, node);
+      },
+      [ref, refFromRegister]
+    );
+    const fireSyntheticChange = React10.useCallback(
+      (input) => {
+        const synthetic = {
+          target: input,
+          currentTarget: input
+        };
+        onChange?.(synthetic);
+      },
+      [onChange]
+    );
+    const handleInputChange = React10.useCallback(
+      (event) => {
+        const input = event.target;
+        const picked = filesFromList2(input.files);
+        input.value = "";
+        const prev = multiple ? filesRef.current : [];
+        const next = mergeFiles2(prev, picked, multiple);
+        syncInputFiles2(input, next);
+        if (!isControlled) {
+          setInternalFiles(next);
+        }
+        onFilesChange?.(next);
+        onChange?.({
+          ...event,
+          target: input,
+          currentTarget: input
+        });
+      },
+      [multiple, onChange, onFilesChange, isControlled]
+    );
+    const clearFiles = React10.useCallback(() => {
+      const input = innerRef.current;
+      if (!input) return;
+      syncInputFiles2(input, []);
+      if (!isControlled) {
+        setInternalFiles([]);
+      }
+      onFilesChange?.([]);
+      fireSyntheticChange(input);
+    }, [isControlled, onFilesChange, fireSyntheticChange]);
+    const openFileDialog = React10.useCallback(() => {
+      if (disabled || readOnly) return;
+      innerRef.current?.click();
+    }, [disabled, readOnly]);
+    const onDisplayKeyDown = React10.useCallback(
+      (e) => {
+        if (disabled || readOnly) return;
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          openFileDialog();
+        }
+      },
+      [disabled, readOnly, openFileDialog]
+    );
+    const helperStartId = `${inputId}-helper-start`;
+    const helperEndId = `${inputId}-helper-end`;
+    const describedBy = [
+      errorContent && `${inputId}-error`,
+      startHelperContent && !errorContent && helperStartId,
+      endHelperContent && !errorContent && helperEndId
+    ].filter(Boolean).join(" ") || void 0;
+    let displayContent;
+    if (!hasFiles) {
+      displayContent = /* @__PURE__ */ jsx("span", { className: "truncate text-muted-foreground", children: placeholder });
+    } else if (listFiles.length === 1) {
+      displayContent = /* @__PURE__ */ jsx("span", { className: "truncate text-foreground", children: listFiles[0].name });
+    } else {
+      const remaining = listFiles.length - 1;
+      displayContent = /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 items-center gap-1 text-foreground", children: [
+        /* @__PURE__ */ jsx("span", { className: "truncate", children: listFiles[0].name }),
+        /* @__PURE__ */ jsx("span", { className: "shrink-0 text-muted-foreground", children: andMoreLabel(remaining) })
+      ] });
+    }
+    const containerClasses = cn(
+      "flex w-full items-center overflow-hidden ps-3 border border-input bg-background ring-offset-background transition-[box-shadow,border-color] duration-200 ease-in-out",
+      "focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2",
+      sizeClasses[effectiveSize],
+      rounded ? "rounded-full" : "rounded-md",
+      hasError && "border-destructive focus-within:ring-destructive",
+      startIcon && "ps-9",
+      disabled && "cursor-not-allowed opacity-50",
+      readOnly && "cursor-default bg-muted"
+    );
+    const actionButtonClasses = cn(
+      "inline-flex shrink-0 cursor-pointer items-center justify-center gap-1.5 rounded-md px-2 text-[length:inherit] font-medium transition-colors",
+      browseTokens.buttonText,
+      "hover:bg-accent",
+      "focus-visible:outline-none focus-visible:ring-0",
+      disabled && "pointer-events-none opacity-50"
+    );
+    return /* @__PURE__ */ jsxs("div", { className: cn("@container flex-1 space-y-2", className), style: browseTokens.style, children: [
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          ...inputAttrs,
+          ref: setRefs,
+          id: inputId,
+          type: "file",
+          name: name2,
+          accept,
+          multiple,
+          disabled,
+          tabIndex: -1,
+          className: "sr-only",
+          "aria-invalid": hasError || void 0,
+          "aria-describedby": describedBy,
+          onChange: handleInputChange
+        }
+      ),
+      label && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+        /* @__PURE__ */ jsxs("label", { htmlFor: inputId, className: inputLabelClassName, children: [
+          label,
+          required && /* @__PURE__ */ jsx("span", { className: "text-destructive", children: "*" })
+        ] }),
+        hintContent && /* @__PURE__ */ jsx("span", { className: "text-sm text-muted-foreground", children: hintContent })
+      ] }),
+      !label && hintContent && /* @__PURE__ */ jsx("span", { className: "text-sm text-muted-foreground", children: hintContent }),
+      /* @__PURE__ */ jsxs("div", { className: "group relative", children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            role: "button",
+            tabIndex: disabled ? -1 : 0,
+            "aria-label": hasFiles ? listFiles.map((f) => f.name).join(", ") : placeholder,
+            onClick: openFileDialog,
+            onKeyDown: onDisplayKeyDown,
+            className: containerClasses,
+            children: [
+              /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate", children: displayContent }),
+              hasFiles && !disabled && !readOnly && /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  "aria-label": clearLabel,
+                  onClick: (e) => {
+                    e.stopPropagation();
+                    clearFiles();
+                  },
+                  className: cn(
+                    "inline-flex shrink-0 cursor-pointer items-center justify-center text-error transition-colors",
+                    "hover:text-error/80",
+                    "focus-visible:outline-none focus-visible:ring-0",
+                    clearButtonSizeClasses[effectiveSize]
+                  ),
+                  children: /* @__PURE__ */ jsx(X, { className: iconSizeClasses[effectiveSize] })
+                }
+              ),
+              !readOnly && /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: cn(
+                    "inline-flex shrink-0 self-stretch items-center border-s",
+                    browseTokens.wrapperBorder,
+                    browseTokens.wrapperBg,
+                    rounded ? "rounded-e-full" : "rounded-e-[calc(var(--radius)-1px)]"
+                  ),
+                  children: /* @__PURE__ */ jsxs(
+                    "button",
+                    {
+                      type: "button",
+                      disabled,
+                      onClick: (e) => {
+                        e.stopPropagation();
+                        openFileDialog();
+                      },
+                      className: actionButtonClasses,
+                      children: [
+                        hasFiles ? /* @__PURE__ */ jsx(
+                          RefreshCw,
+                          {
+                            className: cn(iconSizeClasses[effectiveSize], "shrink-0")
+                          }
+                        ) : /* @__PURE__ */ jsx(
+                          Upload,
+                          {
+                            className: cn(iconSizeClasses[effectiveSize], "shrink-0")
+                          }
+                        ),
+                        /* @__PURE__ */ jsx("span", { className: "hidden @[14rem]:inline", children: hasFiles ? changeLabel : browseLabel })
+                      ]
+                    }
+                  )
+                }
+              )
+            ]
+          }
+        ),
+        startIcon && /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute inset-y-0 start-0 flex items-center justify-center ps-3 text-muted-foreground/80", children: startIcon })
+      ] }),
+      errorContent && /* @__PURE__ */ jsx("div", { id: `${inputId}-error`, className: "text-sm text-destructive", children: errorContent }),
+      startHelperContent && !errorContent && /* @__PURE__ */ jsx("div", { id: helperStartId, className: "text-sm text-muted-foreground", children: startHelperContent }),
+      endHelperContent && !errorContent && /* @__PURE__ */ jsx(
+        "div",
+        {
+          id: helperEndId,
+          className: "text-sm text-end text-muted-foreground",
+          children: endHelperContent
+        }
+      )
+    ] });
+  }
+);
+FileInput.displayName = "FileInput";
 function setRef(ref, value2) {
   if (typeof ref === "function") {
     return ref(value2);
@@ -49310,25 +50496,25 @@ function composeRefs(...refs) {
   };
 }
 function useComposedRefs(...refs) {
-  return React8.useCallback(composeRefs(...refs), refs);
+  return React10.useCallback(composeRefs(...refs), refs);
 }
 function createContextScope(scopeName, createContextScopeDeps = []) {
   let defaultContexts = [];
   function createContext32(rootComponentName, defaultContext) {
-    const BaseContext = React8.createContext(defaultContext);
+    const BaseContext = React10.createContext(defaultContext);
     BaseContext.displayName = rootComponentName + "Context";
     const index2 = defaultContexts.length;
     defaultContexts = [...defaultContexts, defaultContext];
     const Provider = (props) => {
       const { scope, children, ...context } = props;
       const Context = scope?.[scopeName]?.[index2] || BaseContext;
-      const value2 = React8.useMemo(() => context, Object.values(context));
+      const value2 = React10.useMemo(() => context, Object.values(context));
       return /* @__PURE__ */ jsx(Context.Provider, { value: value2, children });
     };
     Provider.displayName = rootComponentName + "Provider";
     function useContext22(consumerName, scope) {
       const Context = scope?.[scopeName]?.[index2] || BaseContext;
-      const context = React8.useContext(Context);
+      const context = React10.useContext(Context);
       if (context) return context;
       if (defaultContext !== void 0) return defaultContext;
       throw new Error(`\`${consumerName}\` must be used within \`${rootComponentName}\``);
@@ -49337,11 +50523,11 @@ function createContextScope(scopeName, createContextScopeDeps = []) {
   }
   const createScope = () => {
     const scopeContexts = defaultContexts.map((defaultContext) => {
-      return React8.createContext(defaultContext);
+      return React10.createContext(defaultContext);
     });
     return function useScope(scope) {
       const contexts = scope?.[scopeName] || scopeContexts;
-      return React8.useMemo(
+      return React10.useMemo(
         () => ({ [`__scope${scopeName}`]: { ...scope, [scopeName]: contexts } }),
         [scope, contexts]
       );
@@ -49364,7 +50550,7 @@ function composeContextScopes(...scopes) {
         const currentScope = scopeProps[`__scope${scopeName}`];
         return { ...nextScopes2, ...currentScope };
       }, {});
-      return React8.useMemo(() => ({ [`__scope${baseScope.scopeName}`]: nextScopes }), [nextScopes]);
+      return React10.useMemo(() => ({ [`__scope${baseScope.scopeName}`]: nextScopes }), [nextScopes]);
     };
   };
   createScope.scopeName = baseScope.scopeName;
@@ -49378,9 +50564,9 @@ function composeEventHandlers(originalEventHandler, ourEventHandler, { checkForD
     }
   };
 }
-var useLayoutEffect22 = globalThis?.document ? React8.useLayoutEffect : () => {
+var useLayoutEffect22 = globalThis?.document ? React10.useLayoutEffect : () => {
 };
-var useInsertionEffect = React8[" useInsertionEffect ".trim().toString()] || useLayoutEffect22;
+var useInsertionEffect = React10[" useInsertionEffect ".trim().toString()] || useLayoutEffect22;
 function useControllableState({
   prop,
   defaultProp,
@@ -49395,8 +50581,8 @@ function useControllableState({
   const isControlled = prop !== void 0;
   const value2 = isControlled ? prop : uncontrolledProp;
   {
-    const isControlledRef = React8.useRef(prop !== void 0);
-    React8.useEffect(() => {
+    const isControlledRef = React10.useRef(prop !== void 0);
+    React10.useEffect(() => {
       const wasControlled = isControlledRef.current;
       if (wasControlled !== isControlled) {
         const from = wasControlled ? "controlled" : "uncontrolled";
@@ -49408,7 +50594,7 @@ function useControllableState({
       isControlledRef.current = isControlled;
     }, [isControlled, caller]);
   }
-  const setValue = React8.useCallback(
+  const setValue = React10.useCallback(
     (nextValue) => {
       if (isControlled) {
         const value22 = isFunction(nextValue) ? nextValue(prop) : nextValue;
@@ -49427,13 +50613,13 @@ function useUncontrolledState({
   defaultProp,
   onChange
 }) {
-  const [value2, setValue] = React8.useState(defaultProp);
-  const prevValueRef = React8.useRef(value2);
-  const onChangeRef = React8.useRef(onChange);
+  const [value2, setValue] = React10.useState(defaultProp);
+  const prevValueRef = React10.useRef(value2);
+  const onChangeRef = React10.useRef(onChange);
   useInsertionEffect(() => {
     onChangeRef.current = onChange;
   }, [onChange]);
-  React8.useEffect(() => {
+  React10.useEffect(() => {
     if (prevValueRef.current !== value2) {
       onChangeRef.current?.(value2);
       prevValueRef.current = value2;
@@ -49445,8 +50631,8 @@ function isFunction(value2) {
   return typeof value2 === "function";
 }
 function usePrevious(value2) {
-  const ref = React8.useRef({ value: value2, previous: value2 });
-  return React8.useMemo(() => {
+  const ref = React10.useRef({ value: value2, previous: value2 });
+  return React10.useMemo(() => {
     if (ref.current.value !== value2) {
       ref.current.previous = ref.current.value;
       ref.current.value = value2;
@@ -49455,7 +50641,7 @@ function usePrevious(value2) {
   }, [value2]);
 }
 function useSize(element) {
-  const [size, setSize] = React8.useState(void 0);
+  const [size, setSize] = React10.useState(void 0);
   useLayoutEffect22(() => {
     if (element) {
       setSize({ width: element.offsetWidth, height: element.offsetHeight });
@@ -49489,7 +50675,7 @@ function useSize(element) {
   return size;
 }
 function useStateMachine(initialState, machine) {
-  return React8.useReducer((state, event) => {
+  return React10.useReducer((state, event) => {
     const nextState = machine[state][event];
     return nextState ?? state;
   }, initialState);
@@ -49497,17 +50683,17 @@ function useStateMachine(initialState, machine) {
 var Presence = (props) => {
   const { present, children } = props;
   const presence = usePresence(present);
-  const child = typeof children === "function" ? children({ present: presence.isPresent }) : React8.Children.only(children);
+  const child = typeof children === "function" ? children({ present: presence.isPresent }) : React10.Children.only(children);
   const ref = useStableComposedRefs(presence.ref, getElementRef(child));
   const forceMount = typeof children === "function";
-  return forceMount || presence.isPresent ? React8.cloneElement(child, { ref }) : null;
+  return forceMount || presence.isPresent ? React10.cloneElement(child, { ref }) : null;
 };
 Presence.displayName = "Presence";
 function usePresence(present) {
-  const [node, setNode] = React8.useState();
-  const stylesRef = React8.useRef(null);
-  const prevPresentRef = React8.useRef(present);
-  const prevAnimationNameRef = React8.useRef("none");
+  const [node, setNode] = React10.useState();
+  const stylesRef = React10.useRef(null);
+  const prevPresentRef = React10.useRef(present);
+  const prevAnimationNameRef = React10.useRef("none");
   const initialState = present ? "mounted" : "unmounted";
   const [state, send] = useStateMachine(initialState, {
     mounted: {
@@ -49522,7 +50708,7 @@ function usePresence(present) {
       MOUNT: "mounted"
     }
   });
-  React8.useEffect(() => {
+  React10.useEffect(() => {
     const currentAnimationName = getAnimationName(stylesRef.current);
     prevAnimationNameRef.current = state === "mounted" ? currentAnimationName : "none";
   }, [state]);
@@ -49588,7 +50774,7 @@ function usePresence(present) {
   }, [node, send]);
   return {
     isPresent: ["mounted", "unmountSuspended"].includes(state),
-    ref: React8.useCallback((node2) => {
+    ref: React10.useCallback((node2) => {
       stylesRef.current = node2 ? getComputedStyle(node2) : null;
       setNode(node2);
     }, [])
@@ -49602,9 +50788,9 @@ function setRef2(ref, value2) {
   }
 }
 function useStableComposedRefs(...refs) {
-  const refsRef = React8.useRef(refs);
+  const refsRef = React10.useRef(refs);
   refsRef.current = refs;
-  return React8.useCallback((node) => {
+  return React10.useCallback((node) => {
     const currentRefs = refsRef.current;
     let hasCleanup = false;
     const cleanups = currentRefs.map((ref) => {
@@ -49665,7 +50851,7 @@ var NODES = [
 ];
 var Primitive = NODES.reduce((primitive, node) => {
   const Slot3 = createSlot(`Primitive.${node}`);
-  const Node2 = React8.forwardRef((props, forwardedRef) => {
+  const Node2 = React10.forwardRef((props, forwardedRef) => {
     const { asChild, ...primitiveProps } = props;
     const Comp = asChild ? Slot3 : node;
     if (typeof window !== "undefined") {
@@ -49700,9 +50886,9 @@ function CheckboxProvider(props) {
     onChange: onCheckedChange,
     caller: CHECKBOX_NAME
   });
-  const [control, setControl] = React8.useState(null);
-  const [bubbleInput, setBubbleInput] = React8.useState(null);
-  const hasConsumerStoppedPropagationRef = React8.useRef(false);
+  const [control, setControl] = React10.useState(null);
+  const [bubbleInput, setBubbleInput] = React10.useState(null);
+  const hasConsumerStoppedPropagationRef = React10.useRef(false);
   const isFormControl = control ? !!form || !!control.closest("form") : (
     // We set this to true by default so that events bubble to forms without JS (SSR)
     true
@@ -49733,7 +50919,7 @@ function CheckboxProvider(props) {
   );
 }
 var TRIGGER_NAME = "CheckboxTrigger";
-var CheckboxTrigger = React8.forwardRef(
+var CheckboxTrigger = React10.forwardRef(
   ({ __scopeCheckbox, onKeyDown, onClick, ...checkboxProps }, forwardedRef) => {
     const {
       control,
@@ -49748,8 +50934,8 @@ var CheckboxTrigger = React8.forwardRef(
       bubbleInput
     } = useCheckboxContext(TRIGGER_NAME, __scopeCheckbox);
     const composedRefs = useComposedRefs(forwardedRef, setControl);
-    const initialCheckedStateRef = React8.useRef(checked);
-    React8.useEffect(() => {
+    const initialCheckedStateRef = React10.useRef(checked);
+    React10.useEffect(() => {
       const form = control?.form;
       if (form) {
         const reset = () => setChecked(initialCheckedStateRef.current);
@@ -49785,7 +50971,7 @@ var CheckboxTrigger = React8.forwardRef(
   }
 );
 CheckboxTrigger.displayName = TRIGGER_NAME;
-var Checkbox = React8.forwardRef(
+var Checkbox = React10.forwardRef(
   (props, forwardedRef) => {
     const {
       __scopeCheckbox,
@@ -49833,7 +51019,7 @@ var Checkbox = React8.forwardRef(
 );
 Checkbox.displayName = CHECKBOX_NAME;
 var INDICATOR_NAME = "CheckboxIndicator";
-var CheckboxIndicator = React8.forwardRef(
+var CheckboxIndicator = React10.forwardRef(
   (props, forwardedRef) => {
     const { __scopeCheckbox, forceMount, ...indicatorProps } = props;
     const context = useCheckboxContext(INDICATOR_NAME, __scopeCheckbox);
@@ -49857,7 +51043,7 @@ var CheckboxIndicator = React8.forwardRef(
 );
 CheckboxIndicator.displayName = INDICATOR_NAME;
 var BUBBLE_INPUT_NAME = "CheckboxBubbleInput";
-var CheckboxBubbleInput = React8.forwardRef(
+var CheckboxBubbleInput = React10.forwardRef(
   ({ __scopeCheckbox, ...props }, forwardedRef) => {
     const {
       control,
@@ -49875,7 +51061,7 @@ var CheckboxBubbleInput = React8.forwardRef(
     const composedRefs = useComposedRefs(forwardedRef, setBubbleInput);
     const prevChecked = usePrevious(checked);
     const controlSize = useSize(control);
-    React8.useEffect(() => {
+    React10.useEffect(() => {
       const input = bubbleInput;
       if (!input) return;
       const inputProto = window.HTMLInputElement.prototype;
@@ -49892,7 +51078,7 @@ var CheckboxBubbleInput = React8.forwardRef(
         input.dispatchEvent(event);
       }
     }, [bubbleInput, prevChecked, checked, hasConsumerStoppedPropagationRef]);
-    const defaultCheckedRef = React8.useRef(isIndeterminate(checked) ? false : checked);
+    const defaultCheckedRef = React10.useRef(isIndeterminate(checked) ? false : checked);
     return /* @__PURE__ */ jsx(
       Primitive.input,
       {
@@ -49938,13 +51124,13 @@ function getAnimateState(checked) {
   return checked ? "checked" : "unchecked";
 }
 function Checkbox2({ className, onCheckedChange, ...props }) {
-  const [checkedState, setCheckedState] = React8.useState(
+  const [checkedState, setCheckedState] = React10.useState(
     props?.checked ?? props?.defaultChecked ?? false
   );
-  React8.useEffect(() => {
+  React10.useEffect(() => {
     if (props?.checked !== void 0) setCheckedState(props.checked);
   }, [props?.checked]);
-  const handleCheckedChange = React8.useCallback(
+  const handleCheckedChange = React10.useCallback(
     (checked) => {
       setCheckedState(checked);
       onCheckedChange?.(checked);
@@ -50038,7 +51224,7 @@ function Checkbox2({ className, onCheckedChange, ...props }) {
 }
 var [SwitchProvider, useSwitch] = getStrictContext("SwitchContext");
 function Switch(props) {
-  const [isPressed, setIsPressed] = React8.useState(false);
+  const [isPressed, setIsPressed] = React10.useState(false);
   const {
     checked,
     defaultChecked,
@@ -50104,7 +51290,7 @@ function SwitchIcon({
   ...props
 }) {
   const { isChecked } = useSwitch();
-  const isAnimated = React8.useMemo(() => {
+  const isAnimated = React10.useMemo(() => {
     if (position2 === "right") return !isChecked;
     if (position2 === "left") return isChecked;
     if (position2 === "thumb") return true;
@@ -50235,10 +51421,10 @@ function ToggleGroupHighlightItem({
       }
     );
   }
-  if (type === "multiple" && React8.isValidElement(children)) {
+  if (type === "multiple" && React10.isValidElement(children)) {
     const isActive = props.value && value2 && value2.includes(props.value);
     const element = children;
-    return React8.cloneElement(
+    return React10.cloneElement(
       children,
       {
         style: {
@@ -50377,7 +51563,7 @@ function ToggleGroup2({
   style,
   ...props
 }) {
-  const colorTokens = React8.useMemo(
+  const colorTokens = React10.useMemo(
     () => resolveToggleGroupColorTokens(color),
     [color]
   );
@@ -50490,8 +51676,8 @@ function Radio({
   ...props
 }) {
   const { value: value2 } = useRadioGroup();
-  const [isChecked, setIsChecked] = React8.useState(value2 === valueProps);
-  React8.useEffect(() => {
+  const [isChecked, setIsChecked] = React10.useState(value2 === valueProps);
+  React10.useEffect(() => {
     setIsChecked(value2 === valueProps);
   }, [value2, valueProps]);
   return /* @__PURE__ */ jsx(RadioProvider, { value: { isChecked, setIsChecked }, children: /* @__PURE__ */ jsx(
@@ -51520,7 +52706,7 @@ function VerticalStepper({
     step.id
   )) }) });
 }
-var Spinner = React8.forwardRef(function Spinner2({
+var Spinner = React10.forwardRef(function Spinner2({
   color,
   size,
   className,
@@ -51629,9 +52815,9 @@ function resolveSurface(color) {
 }
 function renderSizedIcon(icon, iconClassName) {
   if (icon == null) return null;
-  if (React8.isValidElement(icon)) {
+  if (React10.isValidElement(icon)) {
     const el = icon;
-    return React8.cloneElement(el, {
+    return React10.cloneElement(el, {
       className: cn(el.props.className, "shrink-0", iconClassName)
     });
   }
@@ -51665,7 +52851,7 @@ function getTrend(value2, previousValue) {
   })}%`;
   return { direction, label };
 }
-var StatCard = React8.forwardRef(
+var StatCard = React10.forwardRef(
   ({
     color,
     size = "default",
@@ -51796,15 +52982,15 @@ StatCard.displayName = "StatCard";
 // src/components/chart/chart.types.ts
 var THEMES = { light: "", dark: ".dark" };
 var INITIAL_DIMENSION = { width: 320, height: 200 };
-var ChartContext = React8.createContext(null);
+var ChartContext = React10.createContext(null);
 function useChart() {
-  const context = React8.useContext(ChartContext);
+  const context = React10.useContext(ChartContext);
   if (!context) {
     throw new Error("useChart must be used within a <ChartContainer />");
   }
   return context;
 }
-var ChartContainer = React8.forwardRef(function ChartContainer2({
+var ChartContainer = React10.forwardRef(function ChartContainer2({
   id,
   className,
   children,
@@ -51812,7 +52998,7 @@ var ChartContainer = React8.forwardRef(function ChartContainer2({
   initialDimension = INITIAL_DIMENSION,
   ...props
 }, ref) {
-  const uniqueId = React8.useId();
+  const uniqueId = React10.useId();
   const chartId = `chart-${id ?? uniqueId.replace(/:/g, "")}`;
   return /* @__PURE__ */ jsx(ChartContext.Provider, { value: { config }, children: /* @__PURE__ */ jsxs(
     "div",
@@ -51881,7 +53067,7 @@ function ChartTooltipContent({
   labelKey
 }) {
   const { config } = useChart();
-  const tooltipLabel = React8.useMemo(() => {
+  const tooltipLabel = React10.useMemo(() => {
     if (hideLabel || !payload?.length) {
       return null;
     }
@@ -52184,7 +53370,7 @@ function getBarRadius(index2, total, stacked, rounded, layout) {
   if (isFirst) return [0, 0, 0, 0];
   return [0, 0, 0, 0];
 }
-var BarChart = React8.forwardRef(
+var BarChart = React10.forwardRef(
   function BarChart2({
     data: data2,
     config: explicitConfig,
@@ -52208,16 +53394,16 @@ var BarChart = React8.forwardRef(
     className,
     margin
   }, ref) {
-    const resolvedCategoryKey = React8.useMemo(
+    const resolvedCategoryKey = React10.useMemo(
       () => categoryKey ?? inferCategoryKey(data2[0]),
       [categoryKey, data2]
     );
-    const config = React8.useMemo(
+    const config = React10.useMemo(
       () => buildAutoSeriesConfig(data2, resolvedCategoryKey, explicitConfig),
       [data2, resolvedCategoryKey, explicitConfig]
     );
-    const barKeys = React8.useMemo(() => Object.keys(config), [config]);
-    const chartData = React8.useMemo(
+    const barKeys = React10.useMemo(() => Object.keys(config), [config]);
+    const chartData = React10.useMemo(
       () => coerceSeriesValuesToNumbers(data2, barKeys),
       [data2, barKeys]
     );
@@ -52288,7 +53474,7 @@ var BarChart = React8.forwardRef(
 );
 var DEFAULT_MARGIN = { top: 0, right: 0, bottom: 0, left: 0 };
 var DEFAULT_X_AXIS_PADDING = { left: 0, right: 0 };
-var AreaChart = React8.forwardRef(
+var AreaChart = React10.forwardRef(
   function AreaChart2({
     data: data2,
     config: explicitConfig,
@@ -52308,20 +53494,20 @@ var AreaChart = React8.forwardRef(
   }, ref) {
     const resolvedMargin = { ...DEFAULT_MARGIN, ...margin };
     const resolvedXAxisPadding = { ...DEFAULT_X_AXIS_PADDING, ...xAxisPadding };
-    const resolvedCategoryKey = React8.useMemo(
+    const resolvedCategoryKey = React10.useMemo(
       () => categoryKey ?? inferCategoryKey(data2[0]),
       [categoryKey, data2]
     );
-    const config = React8.useMemo(
+    const config = React10.useMemo(
       () => buildAutoSeriesConfig(data2, resolvedCategoryKey, explicitConfig),
       [data2, resolvedCategoryKey, explicitConfig]
     );
-    const seriesKeys = React8.useMemo(() => Object.keys(config), [config]);
-    const chartData = React8.useMemo(
+    const seriesKeys = React10.useMemo(() => Object.keys(config), [config]);
+    const chartData = React10.useMemo(
       () => coerceSeriesValuesToNumbers(data2, seriesKeys),
       [data2, seriesKeys]
     );
-    const reactId = React8.useId();
+    const reactId = React10.useId();
     const gradientPrefix = `area-fill-${reactId.replace(/:/g, "")}`;
     const gradientStops = stacked ? { peak: 0.42, highlight: 0.32, mid: 0.18, soft: 0.06 } : { peak: 0.28, highlight: 0.22, mid: 0.1, soft: 0.03 };
     return /* @__PURE__ */ jsx(ChartContainer, { ref, config, className: cn("w-full", className), children: /* @__PURE__ */ jsxs(
@@ -52449,7 +53635,7 @@ function resolveStrokeWidth(width2) {
   if (typeof width2 === "number") return width2;
   return STROKE_WIDTH_MAP[width2];
 }
-var LineChart = React8.forwardRef(
+var LineChart = React10.forwardRef(
   function LineChart2({
     data: data2,
     config: explicitConfig,
@@ -52472,17 +53658,17 @@ var LineChart = React8.forwardRef(
     className,
     margin
   }, ref) {
-    const resolvedCategoryKey = React8.useMemo(
+    const resolvedCategoryKey = React10.useMemo(
       () => categoryKey ?? inferCategoryKey(data2[0]),
       [categoryKey, data2]
     );
-    const config = React8.useMemo(
+    const config = React10.useMemo(
       () => buildAutoSeriesConfig(data2, resolvedCategoryKey, explicitConfig),
       [data2, resolvedCategoryKey, explicitConfig]
     );
-    const seriesKeys = React8.useMemo(() => Object.keys(config), [config]);
+    const seriesKeys = React10.useMemo(() => Object.keys(config), [config]);
     const resolvedStrokeWidth = resolveStrokeWidth(strokeWidth);
-    const processedData = React8.useMemo(() => {
+    const processedData = React10.useMemo(() => {
       const base = coerceSeriesValuesToNumbers(data2, seriesKeys);
       if (!stacked) return base;
       return base.map((row) => {
@@ -52498,11 +53684,11 @@ var LineChart = React8.forwardRef(
         return out;
       });
     }, [data2, seriesKeys, stacked]);
-    const glowOrderKeys = React8.useMemo(
+    const glowOrderKeys = React10.useMemo(
       () => stacked ? [...seriesKeys].reverse() : seriesKeys,
       [seriesKeys, stacked]
     );
-    const reactId = React8.useId();
+    const reactId = React10.useId();
     const idPrefix2 = `line-${reactId.replace(/:/g, "")}`;
     const glowGradientId = (key2) => `${idPrefix2}-glow-${key2}`;
     return /* @__PURE__ */ jsx(
@@ -52657,7 +53843,7 @@ function getBarRadius2(index2, total, stacked, rounded) {
 function buildDefaultSeries(config) {
   return Object.keys(config).map((dataKey) => ({ dataKey, type: "bar" }));
 }
-var ComposedChart = React8.forwardRef(
+var ComposedChart = React10.forwardRef(
   function ComposedChart2({
     data: data2,
     config: explicitConfig,
@@ -52686,27 +53872,27 @@ var ComposedChart = React8.forwardRef(
     className,
     margin
   }, ref) {
-    const resolvedCategoryKey = React8.useMemo(
+    const resolvedCategoryKey = React10.useMemo(
       () => categoryKey ?? inferCategoryKey(data2[0]),
       [categoryKey, data2]
     );
-    const config = React8.useMemo(
+    const config = React10.useMemo(
       () => buildAutoSeriesConfig(data2, resolvedCategoryKey, explicitConfig),
       [data2, resolvedCategoryKey, explicitConfig]
     );
-    const series = React8.useMemo(
+    const series = React10.useMemo(
       () => explicitSeries ?? buildDefaultSeries(config),
       [explicitSeries, config]
     );
-    const seriesKeys = React8.useMemo(
+    const seriesKeys = React10.useMemo(
       () => series.map((item) => item.dataKey),
       [series]
     );
-    const chartData = React8.useMemo(
+    const chartData = React10.useMemo(
       () => coerceSeriesValuesToNumbers(data2, seriesKeys),
       [data2, seriesKeys]
     );
-    const barSeries = React8.useMemo(
+    const barSeries = React10.useMemo(
       () => series.filter((item) => item.type === "bar"),
       [series]
     );
@@ -52925,7 +54111,7 @@ function DonutLegend({
     ] }, key2);
   }) });
 }
-var DonutChart = React8.forwardRef(
+var DonutChart = React10.forwardRef(
   function DonutChart2({
     data: data2,
     config: explicitConfig,
@@ -52943,18 +54129,18 @@ var DonutChart = React8.forwardRef(
     className,
     margin
   }, ref) {
-    const rawId = React8.useId();
+    const rawId = React10.useId();
     const gradientScope = rawId.replace(/:/g, "");
-    const config = React8.useMemo(
+    const config = React10.useMemo(
       () => deriveConfig(data2, explicitConfig),
       [data2, explicitConfig]
     );
-    const twoRing = React8.useMemo(() => hasChildren(data2), [data2]);
-    const outerRing = React8.useMemo(
+    const twoRing = React10.useMemo(() => hasChildren(data2), [data2]);
+    const outerRing = React10.useMemo(
       () => twoRing ? buildOuterRing(data2) : null,
       [data2, twoRing]
     );
-    React8.useEffect(() => {
+    React10.useEffect(() => {
       validateChildren(data2);
     }, [data2]);
     const inner = parseRadius(innerRadius);
@@ -52963,8 +54149,8 @@ var DonutChart = React8.forwardRef(
     const gapHalf = ringGap / 2;
     const innerRingOuterRadius = twoRing ? formatRadius(mid - gapHalf, inner.isPct) : outerRadius;
     const outerRingInnerRadius = formatRadius(mid + gapHalf, outer.isPct);
-    const legendOrder = React8.useMemo(() => flattenKeys(data2), [data2]);
-    const uniqueKeys = React8.useMemo(
+    const legendOrder = React10.useMemo(() => flattenKeys(data2), [data2]);
+    const uniqueKeys = React10.useMemo(
       () => Array.from(new Set(flattenKeys(data2))),
       [data2]
     );
@@ -53221,7 +54407,7 @@ function TreemapLegend({
     ] }, key2);
   }) });
 }
-var TreemapChart = React8.forwardRef(
+var TreemapChart = React10.forwardRef(
   function TreemapChart2({
     data: data2,
     config: explicitConfig,
@@ -53241,28 +54427,28 @@ var TreemapChart = React8.forwardRef(
     isUpdateAnimationActive
   }, ref) {
     const resolvedUpdateAnimationActive = isUpdateAnimationActive ?? isAnimationActive;
-    const rawId = React8.useId();
+    const rawId = React10.useId();
     const gradientScope = rawId.replace(/:/g, "");
-    const resolvedLabelStyle = React8.useMemo(
+    const resolvedLabelStyle = React10.useMemo(
       () => ({ ...DEFAULT_LABEL_STYLE, ...labelStyle }),
       [labelStyle]
     );
-    const sortedData = React8.useMemo(() => {
+    const sortedData = React10.useMemo(() => {
       const sorted = [...data2].sort((a, b) => b.value - a.value);
       if (typeof maxDataPoints === "number" && maxDataPoints > 0) {
         return sorted.slice(0, maxDataPoints);
       }
       return sorted;
     }, [data2, maxDataPoints]);
-    const config = React8.useMemo(
+    const config = React10.useMemo(
       () => deriveConfig2(sortedData, explicitConfig),
       [sortedData, explicitConfig]
     );
-    const uniqueKeys = React8.useMemo(
+    const uniqueKeys = React10.useMemo(
       () => Array.from(new Set(sortedData.map((d) => d.key))),
       [sortedData]
     );
-    const colorByKey = React8.useMemo(() => {
+    const colorByKey = React10.useMemo(() => {
       const map = /* @__PURE__ */ new Map();
       if (typeof color === "string" && color.length > 0) {
         const base = resolveBaseColor(color);
@@ -53278,7 +54464,7 @@ var TreemapChart = React8.forwardRef(
       }
       return map;
     }, [config, uniqueKeys, color, sortedData]);
-    const textColorByKey = React8.useMemo(() => {
+    const textColorByKey = React10.useMemo(() => {
       const map = /* @__PURE__ */ new Map();
       if (typeof color === "string" && color.length > 0) {
         sortedData.forEach((d, i) => {
@@ -53290,7 +54476,7 @@ var TreemapChart = React8.forwardRef(
       return map;
     }, [color, sortedData]);
     const autoTextColor = labelStyle?.color === void 0;
-    const treemapData = React8.useMemo(
+    const treemapData = React10.useMemo(
       () => sortedData.map((d) => ({
         ...d,
         name: d.key,
@@ -53387,7 +54573,12 @@ var slotSizeClasses = {
   default: "h-10 w-10 text-base md:text-sm",
   lg: "h-12 w-12 text-lg"
 };
-var InputOTPSeparator = React8.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var slotExpandedSizeClasses = {
+  sm: "h-8 text-xs",
+  default: "h-10 text-base md:text-sm",
+  lg: "h-12 text-lg"
+};
+var InputOTPSeparator = React10.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   "div",
   {
     ref,
@@ -53402,11 +54593,12 @@ InputOTPSeparator.displayName = "InputOTPSeparator";
 var SlotBox = ({
   index: index2,
   size,
+  expand,
   rounded,
   hasError,
   cornerClass
 }) => {
-  const context = React8.useContext(OTPInputContext);
+  const context = React10.useContext(OTPInputContext);
   const slot = context.slots[index2];
   if (!slot) return null;
   const { char, hasFakeCaret, isActive } = slot;
@@ -53425,7 +54617,7 @@ var SlotBox = ({
         // The wrapping row overrides the leading/trailing radii on interior
         // slots so groups read as one connected pill/box.
         cornerClass,
-        slotSizeClasses[size]
+        expand ? cn("min-w-0 flex-1", slotExpandedSizeClasses[size]) : slotSizeClasses[size]
       ),
       children: [
         char,
@@ -53471,12 +54663,13 @@ function clampLength(raw) {
   }
   return rounded;
 }
-var InputOTP = React8.forwardRef(
+var InputOTP = React10.forwardRef(
   ({
     length: length2,
     allowAlphaNumeric,
     regex,
     separators,
+    expand,
     value: value2,
     defaultValue,
     onChange,
@@ -53499,17 +54692,17 @@ var InputOTP = React8.forwardRef(
     containerClassName,
     ...restProps
   }, ref) => {
-    const autoId = React8.useId();
+    const autoId = React10.useId();
     const inputId = id || autoId;
-    const effectiveLength = React8.useMemo(() => clampLength(length2), [length2]);
+    const effectiveLength = React10.useMemo(() => clampLength(length2), [length2]);
     const effectiveSize = size || "default";
     const hasError = !!error || !!errorContent;
     const isControlled = value2 !== void 0;
-    const [uncontrolledValue, setUncontrolledValue] = React8.useState(
+    const [uncontrolledValue, setUncontrolledValue] = React10.useState(
       typeof defaultValue === "string" ? defaultValue : ""
     );
     const effectiveValue = isControlled ? value2 : uncontrolledValue;
-    const handleChange = React8.useCallback(
+    const handleChange = React10.useCallback(
       (next) => {
         if (!isControlled) setUncontrolledValue(next);
         onChange?.(next);
@@ -53517,7 +54710,7 @@ var InputOTP = React8.forwardRef(
       [isControlled, onChange]
     );
     const pattern = regex && regex.length > 0 ? regex : allowAlphaNumeric ? REGEXP_ONLY_DIGITS_AND_CHARS : REGEXP_ONLY_DIGITS;
-    const groups = React8.useMemo(
+    const groups = React10.useMemo(
       () => buildGroups(effectiveLength, separators),
       [effectiveLength, separators]
     );
@@ -53556,30 +54749,39 @@ var InputOTP = React8.forwardRef(
           "aria-describedby": describedBy,
           containerClassName: cn(
             "flex items-center gap-2 has-[:disabled]:opacity-50 has-[:disabled]:cursor-not-allowed",
+            expand && "w-full",
             containerClassName
           ),
           ...restProps,
-          children: groups.map((group, groupIndex) => /* @__PURE__ */ jsxs(React8.Fragment, { children: [
+          children: groups.map((group, groupIndex) => /* @__PURE__ */ jsxs(React10.Fragment, { children: [
             groupIndex > 0 && /* @__PURE__ */ jsx(InputOTPSeparator, {}),
-            /* @__PURE__ */ jsx("div", { className: cn("flex items-center", className), children: group.map((slotIndex, positionInGroup) => {
-              const isFirst = positionInGroup === 0;
-              const isLast = positionInGroup === group.length - 1;
-              const cornerClass = cn(
-                !isFirst && "-ms-px rounded-s-none",
-                !isLast && "rounded-e-none"
-              );
-              return /* @__PURE__ */ jsx(
-                SlotBox,
-                {
-                  index: slotIndex,
-                  size: effectiveSize,
-                  rounded: !!rounded,
-                  hasError,
-                  cornerClass
-                },
-                slotIndex
-              );
-            }) })
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: cn("flex items-center", className),
+                style: expand ? { flex: `${group.length} 1 0%` } : void 0,
+                children: group.map((slotIndex, positionInGroup) => {
+                  const isFirst = positionInGroup === 0;
+                  const isLast = positionInGroup === group.length - 1;
+                  const cornerClass = cn(
+                    !isFirst && "-ms-px rounded-s-none",
+                    !isLast && "rounded-e-none"
+                  );
+                  return /* @__PURE__ */ jsx(
+                    SlotBox,
+                    {
+                      index: slotIndex,
+                      size: effectiveSize,
+                      expand: !!expand,
+                      rounded: !!rounded,
+                      hasError,
+                      cornerClass
+                    },
+                    slotIndex
+                  );
+                })
+              }
+            )
           ] }, `g-${groupIndex}`))
         }
       ),
@@ -53597,15 +54799,15 @@ var InputOTP = React8.forwardRef(
   }
 );
 InputOTP.displayName = "InputOTP";
-var CarouselContext = React8.createContext(null);
+var CarouselContext = React10.createContext(null);
 function useCarousel() {
-  const context = React8.useContext(CarouselContext);
+  const context = React10.useContext(CarouselContext);
   if (!context) {
     throw new Error("useCarousel must be used within a <Carousel />");
   }
   return context;
 }
-var Carousel = React8.forwardRef(
+var Carousel = React10.forwardRef(
   ({
     orientation = "horizontal",
     opts,
@@ -53622,20 +54824,20 @@ var Carousel = React8.forwardRef(
       },
       plugins
     );
-    const [canScrollPrev, setCanScrollPrev] = React8.useState(false);
-    const [canScrollNext, setCanScrollNext] = React8.useState(false);
-    const onSelect = React8.useCallback((api2) => {
+    const [canScrollPrev, setCanScrollPrev] = React10.useState(false);
+    const [canScrollNext, setCanScrollNext] = React10.useState(false);
+    const onSelect = React10.useCallback((api2) => {
       if (!api2) return;
       setCanScrollPrev(api2.canScrollPrev());
       setCanScrollNext(api2.canScrollNext());
     }, []);
-    const scrollPrev = React8.useCallback(() => {
+    const scrollPrev = React10.useCallback(() => {
       api?.scrollPrev();
     }, [api]);
-    const scrollNext = React8.useCallback(() => {
+    const scrollNext = React10.useCallback(() => {
       api?.scrollNext();
     }, [api]);
-    const handleKeyDown = React8.useCallback(
+    const handleKeyDown = React10.useCallback(
       (event) => {
         const isHorizontal = orientation === "horizontal";
         const prevKey = isHorizontal ? "ArrowLeft" : "ArrowUp";
@@ -53650,11 +54852,11 @@ var Carousel = React8.forwardRef(
       },
       [scrollPrev, scrollNext, orientation]
     );
-    React8.useEffect(() => {
+    React10.useEffect(() => {
       if (!api || !setApi) return;
       setApi(api);
     }, [api, setApi]);
-    React8.useEffect(() => {
+    React10.useEffect(() => {
       if (!api) return;
       onSelect(api);
       api.on("reInit", onSelect);
@@ -53694,7 +54896,7 @@ var Carousel = React8.forwardRef(
   }
 );
 Carousel.displayName = "Carousel";
-var CarouselContent = React8.forwardRef(({ className, ...props }, ref) => {
+var CarouselContent = React10.forwardRef(({ className, ...props }, ref) => {
   const { carouselRef, orientation } = useCarousel();
   return (
     // Vertical carousels need an explicit viewport height so overflow clips at
@@ -53725,7 +54927,7 @@ var CarouselContent = React8.forwardRef(({ className, ...props }, ref) => {
   );
 });
 CarouselContent.displayName = "CarouselContent";
-var CarouselItem = React8.forwardRef(({ className, ...props }, ref) => {
+var CarouselItem = React10.forwardRef(({ className, ...props }, ref) => {
   const { orientation } = useCarousel();
   return /* @__PURE__ */ jsx(
     "div",
@@ -53743,7 +54945,7 @@ var CarouselItem = React8.forwardRef(({ className, ...props }, ref) => {
   );
 });
 CarouselItem.displayName = "CarouselItem";
-var CarouselPrevious = React8.forwardRef(({ className, ...props }, ref) => {
+var CarouselPrevious = React10.forwardRef(({ className, ...props }, ref) => {
   const { orientation, scrollPrev, canScrollPrev } = useCarousel();
   return /* @__PURE__ */ jsxs(
     "button",
@@ -53767,7 +54969,7 @@ var CarouselPrevious = React8.forwardRef(({ className, ...props }, ref) => {
   );
 });
 CarouselPrevious.displayName = "CarouselPrevious";
-var CarouselNext = React8.forwardRef(({ className, ...props }, ref) => {
+var CarouselNext = React10.forwardRef(({ className, ...props }, ref) => {
   const { orientation, scrollNext, canScrollNext } = useCarousel();
   return /* @__PURE__ */ jsxs(
     "button",
@@ -53871,10 +55073,10 @@ function Carousel2({
     MAX_DOTS_DEFAULT
   );
   const clampedDelay = clamp2(delay2, DELAY_MIN, DELAY_MAX, DELAY_DEFAULT);
-  const autoplayPlugin = React8.useRef(
+  const autoplayPlugin = React10.useRef(
     autoplay ? Autoplay({ delay: clampedDelay, stopOnInteraction: true }) : null
   );
-  React8.useEffect(() => {
+  React10.useEffect(() => {
     const plugin = autoplayPlugin.current;
     if (!plugin || !autoplay) return;
     autoplayPlugin.current = Autoplay({
@@ -53882,18 +55084,17 @@ function Carousel2({
       stopOnInteraction: true
     });
   }, [autoplay, clampedDelay]);
-  const plugins = React8.useMemo(
+  const plugins = React10.useMemo(
     () => autoplay && autoplayPlugin.current ? [autoplayPlugin.current] : [],
-    // eslint-disable-next-line react-hooks/exhaustive-deps
     [autoplay, clampedDelay]
   );
-  const [api, setApi] = React8.useState();
-  const [selectedIndex, setSelectedIndex] = React8.useState(0);
-  const [scrollSnaps, setScrollSnaps] = React8.useState([]);
-  const [canScrollPrev, setCanScrollPrev] = React8.useState(false);
-  const [canScrollNext, setCanScrollNext] = React8.useState(false);
-  const prevIndexRef = React8.useRef(0);
-  React8.useEffect(() => {
+  const [api, setApi] = React10.useState();
+  const [selectedIndex, setSelectedIndex] = React10.useState(0);
+  const [scrollSnaps, setScrollSnaps] = React10.useState([]);
+  const [canScrollPrev, setCanScrollPrev] = React10.useState(false);
+  const [canScrollNext, setCanScrollNext] = React10.useState(false);
+  const prevIndexRef = React10.useRef(0);
+  React10.useEffect(() => {
     if (!api) return;
     setScrollSnaps(api.scrollSnapList());
     setSelectedIndex(api.selectedScrollSnap());
@@ -53930,12 +55131,12 @@ function Carousel2({
       api.off("reInit", handleReInit);
     };
   }, [api, loop, onNext, onPrevious]);
-  const scrollTo = React8.useCallback(
+  const scrollTo = React10.useCallback(
     (index2) => api?.scrollTo(index2),
     [api]
   );
-  const scrollPrev = React8.useCallback(() => api?.scrollPrev(), [api]);
-  const scrollNext = React8.useCallback(() => api?.scrollNext(), [api]);
+  const scrollPrev = React10.useCallback(() => api?.scrollPrev(), [api]);
+  const scrollNext = React10.useCallback(() => api?.scrollNext(), [api]);
   const navigationState = {
     canScrollPrev,
     canScrollNext,
@@ -53994,12 +55195,12 @@ function Carousel2({
   );
 }
 var labelClasses = "flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50";
-var sizeClasses = {
+var sizeClasses2 = {
   sm: "min-h-[60px] px-2 py-1.5 text-xs",
   default: "min-h-[80px] px-3 py-2 text-base md:text-sm",
   lg: "min-h-[100px] px-4 py-3 text-lg"
 };
-var Textarea = React8.forwardRef(
+var Textarea = React10.forwardRef(
   ({
     className,
     label,
@@ -54016,15 +55217,15 @@ var Textarea = React8.forwardRef(
     placeholder,
     ...restProps
   }, ref) => {
-    const autoId = React8.useId();
+    const autoId = React10.useId();
     const textareaId = id || autoId;
-    const [charCount, setCharCount] = React8.useState(() => {
+    const [charCount, setCharCount] = React10.useState(() => {
       if (charLimit === void 0) return 0;
       if (typeof value2 === "string") return value2.length;
       if (typeof defaultValue === "string") return defaultValue.length;
       return 0;
     });
-    React8.useEffect(() => {
+    React10.useEffect(() => {
       if (charLimit !== void 0 && typeof value2 === "string") {
         setCharCount(value2.length);
       }
@@ -54040,7 +55241,7 @@ var Textarea = React8.forwardRef(
     };
     const textareaClasses = cn(
       "flex w-full rounded-md border border-input bg-background ring-offset-background transition-[box-shadow,border-color] duration-200 ease-in-out placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 resize-y",
-      sizeClasses[effectiveSize],
+      sizeClasses2[effectiveSize],
       hasError && "border-destructive focus-visible:ring-destructive",
       className
     );
@@ -54102,7 +55303,7 @@ var Textarea = React8.forwardRef(
   }
 );
 Textarea.displayName = "Textarea";
-var Command = React8.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var Command = React10.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   Command$1,
   {
     ref,
@@ -54114,7 +55315,7 @@ var Command = React8.forwardRef(({ className, ...props }, ref) => /* @__PURE__ *
   }
 ));
 Command.displayName = Command$1.displayName;
-var CommandInput = React8.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxs("div", { className: "flex items-center border-b px-3", "cmdk-input-wrapper": "", children: [
+var CommandInput = React10.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxs("div", { className: "flex items-center border-b px-3", "cmdk-input-wrapper": "", children: [
   /* @__PURE__ */ jsx(Search, { className: "mr-2 h-4 w-4 shrink-0 opacity-50" }),
   /* @__PURE__ */ jsx(
     Command$1.Input,
@@ -54129,7 +55330,7 @@ var CommandInput = React8.forwardRef(({ className, ...props }, ref) => /* @__PUR
   )
 ] }));
 CommandInput.displayName = Command$1.Input.displayName;
-var CommandList = React8.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var CommandList = React10.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   Command$1.List,
   {
     ref,
@@ -54138,7 +55339,7 @@ var CommandList = React8.forwardRef(({ className, ...props }, ref) => /* @__PURE
   }
 ));
 CommandList.displayName = Command$1.List.displayName;
-var CommandEmpty = React8.forwardRef((props, ref) => /* @__PURE__ */ jsx(
+var CommandEmpty = React10.forwardRef((props, ref) => /* @__PURE__ */ jsx(
   Command$1.Empty,
   {
     ref,
@@ -54147,7 +55348,7 @@ var CommandEmpty = React8.forwardRef((props, ref) => /* @__PURE__ */ jsx(
   }
 ));
 CommandEmpty.displayName = Command$1.Empty.displayName;
-var CommandGroup = React8.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var CommandGroup = React10.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   Command$1.Group,
   {
     ref,
@@ -54159,7 +55360,7 @@ var CommandGroup = React8.forwardRef(({ className, ...props }, ref) => /* @__PUR
   }
 ));
 CommandGroup.displayName = Command$1.Group.displayName;
-var CommandSeparator = React8.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var CommandSeparator = React10.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   Command$1.Separator,
   {
     ref,
@@ -54168,7 +55369,7 @@ var CommandSeparator = React8.forwardRef(({ className, ...props }, ref) => /* @_
   }
 ));
 CommandSeparator.displayName = Command$1.Separator.displayName;
-var CommandItem = React8.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var CommandItem = React10.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   Command$1.Item,
   {
     ref,
@@ -54197,8 +55398,8 @@ function AsyncCombobox({
   hasMore = false,
   onLoadMore
 }) {
-  const [open, setOpen] = React8.useState(false);
-  const [inputValue, setInputValue] = React8.useState("");
+  const [open, setOpen] = React10.useState(false);
+  const [inputValue, setInputValue] = React10.useState("");
   const selectedOption = options.find((o) => o.value === value2);
   const displayValue = selectedOption?.label ?? (value2 || "");
   const handleSelect = (selected) => {
@@ -54206,7 +55407,7 @@ function AsyncCombobox({
     onValueChange?.(next);
     if (!clearable) setOpen(false);
   };
-  const handleSearchChange = React8.useCallback(
+  const handleSearchChange = React10.useCallback(
     (q) => {
       setInputValue(q);
       onSearchChange?.(q);
@@ -54321,17 +55522,17 @@ function AsyncMultiSelect({
   portal = true,
   renderOption
 }) {
-  const [open, setOpen] = React8.useState(false);
-  const [inputValue, setInputValue] = React8.useState("");
-  const listRef = React8.useRef(null);
-  const sentinelRef = React8.useRef(null);
+  const [open, setOpen] = React10.useState(false);
+  const [inputValue, setInputValue] = React10.useState("");
+  const listRef = React10.useRef(null);
+  const sentinelRef = React10.useRef(null);
   const selected = normalizeValue(value2, multiple);
-  const selectedOptions = React8.useMemo(() => {
+  const selectedOptions = React10.useMemo(() => {
     const map = /* @__PURE__ */ new Map();
     for (const opt of options) map.set(opt.value, opt);
     return selected.map((v) => map.get(v) ?? { value: v, label: v });
   }, [options, selected]);
-  React8.useEffect(() => {
+  React10.useEffect(() => {
     const sentinel = sentinelRef.current;
     if (!open || !hasMore || !onLoadMore || !sentinel) return;
     const observer = new IntersectionObserver(
@@ -54358,7 +55559,7 @@ function AsyncMultiSelect({
     const next = selected.filter((v) => v !== optionValue);
     onValueChange?.(multiple ? next.length > 0 ? next : void 0 : void 0);
   };
-  const handleSearchChange = React8.useCallback(
+  const handleSearchChange = React10.useCallback(
     (q) => {
       setInputValue(q);
       onSearchChange?.(q);
@@ -54659,8 +55860,8 @@ function CalendarDayButton({
   modifiers,
   ...props
 }) {
-  const ref = React8.useRef(null);
-  React8.useEffect(() => {
+  const ref = React10.useRef(null);
+  React10.useEffect(() => {
     if (modifiers.focused) ref.current?.focus();
   }, [modifiers.focused]);
   return /* @__PURE__ */ jsx(
@@ -54961,17 +56162,17 @@ function DateRangePicker({
   side = "bottom",
   className
 }) {
-  const [open, setOpen] = React8.useState(false);
-  const [showCalendar, setShowCalendar] = React8.useState(false);
-  const [draftRange, setDraftRange] = React8.useState(
+  const [open, setOpen] = React10.useState(false);
+  const [showCalendar, setShowCalendar] = React10.useState(false);
+  const [draftRange, setDraftRange] = React10.useState(
     EMPTY_DRAFT_RANGE
   );
-  const [calendarMonth, setCalendarMonth] = React8.useState(/* @__PURE__ */ new Date());
-  const [flyoutSide, setFlyoutSide] = React8.useState("right");
-  const calendarRef = React8.useRef(null);
-  const [startInputValue, setStartInputValue] = React8.useState("");
-  const [endInputValue, setEndInputValue] = React8.useState("");
-  React8.useLayoutEffect(() => {
+  const [calendarMonth, setCalendarMonth] = React10.useState(/* @__PURE__ */ new Date());
+  const [flyoutSide, setFlyoutSide] = React10.useState("right");
+  const calendarRef = React10.useRef(null);
+  const [startInputValue, setStartInputValue] = React10.useState("");
+  const [endInputValue, setEndInputValue] = React10.useState("");
+  React10.useLayoutEffect(() => {
     if (!showCalendar || !calendarRef.current) return;
     const rect = calendarRef.current.getBoundingClientRect();
     if (rect.right > window.innerWidth) {
@@ -54980,14 +56181,14 @@ function DateRangePicker({
   }, [showCalendar]);
   const activePresets = presets ?? [...PRESET_IDS];
   const resolveLabel = (id) => presetLabels?.[id] ?? (id === "custom" ? "Custom" : PRESET_LABELS[id]);
-  const updateDraftRange = React8.useCallback(
+  const updateDraftRange = React10.useCallback(
     (nextRange) => {
       setDraftRange(nextRange);
       onDraftChange?.(nextRange);
     },
     [onDraftChange]
   );
-  const syncInputsFromDraft = React8.useCallback(
+  const syncInputsFromDraft = React10.useCallback(
     (range) => {
       setStartInputValue(range.startDate ? format(range.startDate, dateFormat) : "");
       if (lockEndToToday) {
@@ -55014,7 +56215,7 @@ function DateRangePicker({
     onChange?.({ presetId: id, ...range });
     setOpen(false);
   };
-  const handleRangeChange = React8.useCallback(
+  const handleRangeChange = React10.useCallback(
     (range) => {
       const nextDraft = toDraftRange(range);
       if (lockEndToToday && nextDraft.startDate) {
@@ -55268,7 +56469,7 @@ function DateRangePicker({
 }
 DateRangePicker.displayName = "DateRangePicker";
 var timeInputChromeClass = "appearance-none bg-background [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none";
-var TimePicker = React8.forwardRef(
+var TimePicker = React10.forwardRef(
   ({ hideIcon = false, className, ...props }, ref) => {
     return /* @__PURE__ */ jsx(
       Input,
@@ -55325,7 +56526,7 @@ function SimplifiedDate({ ts, dateFormat, className, relative = false }) {
   }
   return /* @__PURE__ */ jsx("span", { className: cn(className), children: detailedDate });
 }
-var Table = React8.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { className: "relative w-full overflow-auto", children: /* @__PURE__ */ jsx(
+var Table = React10.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { className: "relative w-full overflow-auto", children: /* @__PURE__ */ jsx(
   "table",
   {
     ref,
@@ -55334,9 +56535,9 @@ var Table = React8.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */
   }
 ) }));
 Table.displayName = "Table";
-var TableHeader = React8.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("thead", { ref, className: cn("[&_tr]:border-b", className), ...props }));
+var TableHeader = React10.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("thead", { ref, className: cn("[&_tr]:border-b", className), ...props }));
 TableHeader.displayName = "TableHeader";
-var TableBody = React8.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var TableBody = React10.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   "tbody",
   {
     ref,
@@ -55345,7 +56546,7 @@ var TableBody = React8.forwardRef(({ className, ...props }, ref) => /* @__PURE__
   }
 ));
 TableBody.displayName = "TableBody";
-var TableFooter = React8.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var TableFooter = React10.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   "tfoot",
   {
     ref,
@@ -55357,7 +56558,7 @@ var TableFooter = React8.forwardRef(({ className, ...props }, ref) => /* @__PURE
   }
 ));
 TableFooter.displayName = "TableFooter";
-var TableRow = React8.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var TableRow = React10.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   "tr",
   {
     ref,
@@ -55369,7 +56570,7 @@ var TableRow = React8.forwardRef(({ className, ...props }, ref) => /* @__PURE__
   }
 ));
 TableRow.displayName = "TableRow";
-var TableHead = React8.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var TableHead = React10.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   "th",
   {
     ref,
@@ -55381,7 +56582,7 @@ var TableHead = React8.forwardRef(({ className, ...props }, ref) => /* @__PURE__
   }
 ));
 TableHead.displayName = "TableHead";
-var TableCell = React8.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var TableCell = React10.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   "td",
   {
     ref,
@@ -55393,7 +56594,7 @@ var TableCell = React8.forwardRef(({ className, ...props }, ref) => /* @__PURE__
   }
 ));
 TableCell.displayName = "TableCell";
-var TableCaption = React8.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var TableCaption = React10.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   "caption",
   {
     ref,
@@ -56402,7 +57603,7 @@ var userTypeBadgeMetallicClasses = cn(
   "after:bg-[linear-gradient(315deg,rgba(255,255,255,0.24)_0%,rgba(255,255,255,0.04)_36%,rgba(0,0,0,0.16)_72%,rgba(255,255,255,0.12)_100%)]",
   "after:opacity-0 after:transition-opacity after:duration-[1800ms] after:ease-in-out hover:after:opacity-100"
 );
-var UserTypeBadge = React8.forwardRef(
+var UserTypeBadge = React10.forwardRef(
   ({ userType, size = "default", className, ...props }, ref) => {
     const { color, icon: Icon2, label } = userTypeBadgeRegistry[userType];
     return /* @__PURE__ */ jsx("div", { ref, className: "inline-block", ...props, children: /* @__PURE__ */ jsxs(
@@ -56434,20 +57635,33 @@ var statusBadgeSizeVariants = cva(
   {
     variants: {
       size: {
-        sm: "gap-1 pl-0.5 pr-1.5 py-0.5 text-xs",
-        default: "gap-1.5 pl-0.5 pr-1.75 py-0.5 text-xs",
-        lg: "gap-1.5 pl-1 pr-2.25 py-1 text-sm"
+        sm: "gap-1 py-0.5 text-xs",
+        default: "gap-1.5 py-0.5 text-xs",
+        lg: "gap-1.5 py-1 text-sm"
+      },
+      hasIcon: {
+        true: "",
+        false: ""
       }
     },
+    compoundVariants: [
+      { size: "sm", hasIcon: true, class: "pl-0.5 pr-1.5" },
+      { size: "sm", hasIcon: false, class: "px-1.5" },
+      { size: "default", hasIcon: true, class: "pl-0.5 pr-1.75" },
+      { size: "default", hasIcon: false, class: "px-1.75" },
+      { size: "lg", hasIcon: true, class: "pl-1 pr-2.25" },
+      { size: "lg", hasIcon: false, class: "px-2.25" }
+    ],
     defaultVariants: {
-      size: "default"
+      size: "default",
+      hasIcon: false
     }
   }
 );
-var StatusBadge = React8.forwardRef(
+var StatusBadge = React10.forwardRef(
   ({
     label,
-    Icon: Icon2,
+    icon: Icon2,
     color,
     variant = "soft",
     size = "default",
@@ -56456,12 +57670,16 @@ var StatusBadge = React8.forwardRef(
     ...props
   }, ref) => {
     const iconPx = ICON_PX[size];
+    const showIcon = isLoading || !!Icon2;
     return /* @__PURE__ */ jsx("div", { ref, className: "inline-block", ...props, children: /* @__PURE__ */ jsxs(
       Badge,
       {
         color,
         variant,
-        className: cn(statusBadgeSizeVariants({ size }), className),
+        className: cn(
+          statusBadgeSizeVariants({ size, hasIcon: showIcon }),
+          className
+        ),
         children: [
           isLoading ? /* @__PURE__ */ jsx(Spinner, { size: iconPx, "aria-hidden": true }) : Icon2 ? /* @__PURE__ */ jsx(Icon2, { size: iconPx, "aria-hidden": true }) : null,
           label
@@ -56553,7 +57771,7 @@ var deleteButtonVariantClasses = {
   gradient: "bg-error/10 text-error hover:bg-error/15 hover:text-error",
   solid: "bg-error/20 text-error-foreground hover:bg-error/30 hover:text-error-foreground"
 };
-var Tag = React8.forwardRef(
+var Tag = React10.forwardRef(
   ({
     name: name2,
     value: value2,
@@ -56632,7 +57850,7 @@ function parseNameValueTag(tag) {
   if (i <= 0 || i >= tag.length - 1) return null;
   return { name: tag.slice(0, i), value: tag.slice(i + 1) };
 }
-var TagInput = React8.forwardRef(
+var TagInput = React10.forwardRef(
   ({
     tags,
     onTagsChange,
@@ -56659,13 +57877,13 @@ var TagInput = React8.forwardRef(
     onBlur,
     ...restInputProps
   }, ref) => {
-    const autoId = React8.useId();
+    const autoId = React10.useId();
     const inputId = id ?? autoId;
-    const rootRef = React8.useRef(null);
-    const [draft, setDraft] = React8.useState("");
+    const rootRef = React10.useRef(null);
+    const [draft, setDraft] = React10.useState("");
     const effectiveSize = size ?? "default";
     const hasError = error || !!errorContent;
-    const tryCommitDraft = React8.useCallback(() => {
+    const tryCommitDraft = React10.useCallback(() => {
       if (disabled || readOnly) return;
       const trimmed = draft.trim();
       if (!trimmed) return;
@@ -57496,9 +58714,9 @@ var SIZE_STYLES2 = {
 function iconSized4(icon, iconPx) {
   if (icon == null) return null;
   const dim = { width: iconPx, height: iconPx };
-  if (React8.isValidElement(icon)) {
+  if (React10.isValidElement(icon)) {
     const el = icon;
-    return React8.cloneElement(el, {
+    return React10.cloneElement(el, {
       className: cn(el.props.className, "shrink-0"),
       style: { ...el.props.style, ...dim }
     });
@@ -57577,7 +58795,7 @@ function useSimpleClickableCardSurface(options) {
   const s = SIZE_STYLES2[size];
   const styles = resolveVariantStyles(variant, color);
   const isArbitraryGradient = variant === "gradient" && !isPresetColor(color);
-  const surfaceStyleWithoutGradientBg = React8.useMemo(() => {
+  const surfaceStyleWithoutGradientBg = React10.useMemo(() => {
     if (!isArbitraryGradient || typeof color !== "string")
       return styles.containerStyle;
     const cs = styles.containerStyle;
@@ -57588,7 +58806,7 @@ function useSimpleClickableCardSurface(options) {
   const presetGradientPair = variant === "gradient" && isPresetColor(color) ? PRESET_GRADIENT_BACKDROP[color] : void 0;
   const surfaceContainerClass = variant === "gradient" && isPresetColor(color) ? PRESET_GRADIENT_FRAME[color] : styles.container;
   const presetRingClasses = isPresetColor(color) ? PRESET_RING_CLASSES_FOCUS_VISIBLE[color] : "";
-  const ringAccentStyle = React8.useMemo(() => {
+  const ringAccentStyle = React10.useMemo(() => {
     if (isPresetColor(color)) return void 0;
     if (typeof color !== "string") return void 0;
     return {
@@ -57873,7 +59091,7 @@ function shellPresetRing(color) {
   const c = color ?? "gray";
   return isPresetColor(c) ? PRESET_RING_CLASSES[c] : "";
 }
-var IconTextActionCard = React8.forwardRef(
+var IconTextActionCard = React10.forwardRef(
   ({
     icon,
     title,
@@ -58161,7 +59379,7 @@ var dismissButtonSizeClasses = {
   default: "size-7 [&_svg]:size-4",
   lg: "size-8 [&_svg]:size-4"
 };
-var Alert = React8.forwardRef(
+var Alert = React10.forwardRef(
   ({
     icon,
     title,
@@ -58180,8 +59398,8 @@ var Alert = React8.forwardRef(
     dismissLabel = "Close alert",
     className
   }, ref) => {
-    const [dismissed, setDismissed] = React8.useState(false);
-    const handleDismiss = React8.useCallback(() => {
+    const [dismissed, setDismissed] = React10.useState(false);
+    const handleDismiss = React10.useCallback(() => {
       setDismissed(true);
       onDismiss?.();
     }, [onDismiss]);
@@ -58543,10 +59761,10 @@ function CodeBlock({
       inViewMargin
     }
   );
-  const [visibleCode, setVisibleCode] = React8.useState("");
-  const [highlightedCode, setHighlightedCode] = React8.useState("");
-  const [isDone, setIsDone] = React8.useState(false);
-  React8.useEffect(() => {
+  const [visibleCode, setVisibleCode] = React10.useState("");
+  const [highlightedCode, setHighlightedCode] = React10.useState("");
+  const [isDone, setIsDone] = React10.useState(false);
+  React10.useEffect(() => {
     if (!visibleCode.length || !isInView) return;
     const loadHighlightedCode = async () => {
       const normalizedLang = normalizeLang(lang);
@@ -58570,7 +59788,7 @@ function CodeBlock({
     };
     loadHighlightedCode();
   }, [lang, themes, writing, isInView, duration, delay2, visibleCode, theme]);
-  React8.useEffect(() => {
+  React10.useEffect(() => {
     if (!writing) {
       setVisibleCode(code);
       onDone?.();
@@ -58617,7 +59835,7 @@ function CodeBlock({
       clearInterval(intervalId);
     };
   }, [code, duration, delay2, isInView, writing, onDone, onWrite, localRef]);
-  React8.useEffect(() => {
+  React10.useEffect(() => {
     if (!writing || !isInView) return;
     const el = scrollContainerRef?.current ?? localRef.current?.parentElement ?? localRef.current;
     if (!el) return;
@@ -58654,7 +59872,7 @@ function Code({
 }) {
   const showCopyButton = copyButton !== false && (copyButton === true || copyButton === void 0 && Boolean(lang));
   const showHeader = fileName !== void 0 || showCopyButton;
-  const scrollRef = React8.useRef(null);
+  const scrollRef = React10.useRef(null);
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -58703,9 +59921,9 @@ function Code({
     }
   );
 }
-var MonospaceContent = React8.forwardRef(
+var MonospaceContent = React10.forwardRef(
   function MonospaceContent2({ title, value: value2, color = "info", mask: mask2 = false, allowUnmask = true, className }, ref) {
-    const [revealed, setRevealed] = React8.useState(false);
+    const [revealed, setRevealed] = React10.useState(false);
     const canUnmask = mask2 && allowUnmask;
     const masked = mask2 && !(canUnmask && revealed);
     const unmaskToggle = canUnmask ? /* @__PURE__ */ jsxs(
@@ -60074,7 +61292,7 @@ function SimplePaginatedList({
     ] }) : null
   ] });
 }
-var ToastDefaultVariantContext = React8.createContext(void 0);
+var ToastDefaultVariantContext = React10.createContext(void 0);
 var typeIconMap2 = {
   error: /* @__PURE__ */ jsx(CircleX, { className: "h-4 w-4" }),
   info: /* @__PURE__ */ jsx(Info, { className: "h-4 w-4" }),
@@ -60093,7 +61311,7 @@ function defaultIconFromColor2(color) {
   return type != null ? typeIconMap2[type] : void 0;
 }
 function isToastProps(input) {
-  return input != null && typeof input === "object" && !React8.isValidElement(input) && ("title" in input || "children" in input || "type" in input || "color" in input || "icon" in input || "hideIcon" in input || "action" in input || "variant" in input);
+  return input != null && typeof input === "object" && !React10.isValidElement(input) && ("title" in input || "children" in input || "type" in input || "color" in input || "icon" in input || "hideIcon" in input || "action" in input || "variant" in input);
 }
 function normalizeToastInput(input, type) {
   if (isToastProps(input)) {
@@ -60117,7 +61335,7 @@ function resolveToastOptions(props, options) {
     closeButton: options?.closeButton
   };
 }
-var Toast = React8.forwardRef(
+var Toast = React10.forwardRef(
   ({
     icon,
     title,
@@ -60129,7 +61347,7 @@ var Toast = React8.forwardRef(
     action,
     className
   }, ref) => {
-    const defaultVariantFromToaster = React8.useContext(
+    const defaultVariantFromToaster = React10.useContext(
       ToastDefaultVariantContext
     );
     const resolvedVariant = variant ?? defaultVariantFromToaster ?? "soft";
@@ -60176,7 +61394,7 @@ var Toast = React8.forwardRef(
   }
 );
 Toast.displayName = "Toast";
-var Toaster = React8.forwardRef(
+var Toaster = React10.forwardRef(
   ({
     position: position2 = "top-right",
     closeButton = true,
@@ -60305,9 +61523,9 @@ function createMarkdownComponents({
 }
 var REMARK_PLUGINS = [remarkGfm];
 var REHYPE_PLUGINS = [rehypeSlug];
-var MarkdownContent = React8.forwardRef(
+var MarkdownContent = React10.forwardRef(
   function MarkdownContent2({ content: content3, linkComponent, colorTheme, className }, ref) {
-    const components = React8.useMemo(
+    const components = React10.useMemo(
       () => createMarkdownComponents({ linkComponent, colorTheme }),
       [linkComponent, colorTheme]
     );
@@ -60403,7 +61621,7 @@ function FullscreenDialog({
   closeOnEscape = true,
   noGutters = false
 }) {
-  const sizeClasses2 = iconSizeMap[iconSize];
+  const sizeClasses3 = iconSizeMap[iconSize];
   return /* @__PURE__ */ jsx(Dialog2, { open, onOpenChange, children: /* @__PURE__ */ jsx(
     DialogContent2,
     {
@@ -60431,9 +61649,9 @@ function FullscreenDialog({
               {
                 className: cn(
                   "shrink-0 rounded-full mx-auto mb-4",
-                  sizeClasses2.avatar
+                  sizeClasses3.avatar
                 ),
-                children: /* @__PURE__ */ jsx(AvatarFallback, { className: "rounded-full bg-accent/80", children: /* @__PURE__ */ jsx("span", { className: sizeClasses2.icon, children: icon }) })
+                children: /* @__PURE__ */ jsx(AvatarFallback, { className: "rounded-full bg-accent/80", children: /* @__PURE__ */ jsx("span", { className: sizeClasses3.icon, children: icon }) })
               }
             ),
             heading != null && /* @__PURE__ */ jsx("h1", { className: "text-2xl mb-4 font-normal text-center text-muted-foreground shrink-0", children: heading }),
@@ -65869,7 +67087,7 @@ function strokeResolvedStyle(color, opacity) {
   return { stroke: mix };
 }
 var labelTypographyClass = "whitespace-nowrap text-center leading-none font-semibold tracking-tight tabular-nums";
-var CircularProgress = React8.forwardRef(
+var CircularProgress = React10.forwardRef(
   function CircularProgress2({
     value: value2,
     showPercentage = false,
@@ -65997,13 +67215,13 @@ function CountingNumber({
   const decimals = typeof decimalPlaces === "number" ? decimalPlaces : numberStr.includes(".") ? numberStr.split(".")[1]?.length ?? 0 : 0;
   const motionVal = useMotionValue(initiallyStable ? number : fromNumber);
   const springVal = useSpring(motionVal, transition);
-  React8.useEffect(() => {
+  React10.useEffect(() => {
     const timeoutId = setTimeout(() => {
       if (isInView) motionVal.set(number);
     }, delay2);
     return () => clearTimeout(timeoutId);
   }, [isInView, number, motionVal, delay2]);
-  React8.useEffect(() => {
+  React10.useEffect(() => {
     const unsubscribe = springVal.on("change", (latest) => {
       if (localRef.current) {
         let formatted = decimals > 0 ? latest.toFixed(decimals) : Math.round(latest).toString();
@@ -66147,9 +67365,9 @@ function ProgressBar({
   className,
   ...props
 }) {
-  const [fakeValue, setFakeValue] = React8.useState(FAKE_PROGRESS_MIN);
-  const intervalRef = React8.useRef(null);
-  React8.useEffect(() => {
+  const [fakeValue, setFakeValue] = React10.useState(FAKE_PROGRESS_MIN);
+  const intervalRef = React10.useRef(null);
+  React10.useEffect(() => {
     if (!showFakeProgress) return;
     if (intervalRef.current) clearInterval(intervalRef.current);
     setFakeValue(FAKE_PROGRESS_MIN);
@@ -66281,7 +67499,7 @@ function trailingChevronRow(options) {
     }
   );
 }
-var SimpleClickableCard = React8.forwardRef(
+var SimpleClickableCard = React10.forwardRef(
   ({
     icon,
     leadingIcon,
@@ -66437,7 +67655,7 @@ function infoTriggerIconFgClass(variant, cardColor, infoButtonColor) {
   }
   return INFO_ICON_FG_CLASS[infoButtonColor];
 }
-var SimpleInfoCard = React8.forwardRef(
+var SimpleInfoCard = React10.forwardRef(
   ({
     icon,
     title,
@@ -66577,7 +67795,7 @@ var maxWidthClasses = {
   lg: "max-w-5xl",
   xl: "max-w-7xl"
 };
-var ContentContainer = React8.forwardRef(
+var ContentContainer = React10.forwardRef(
   function ContentContainer2({ maxWidth, children, className, noGutters = false }, ref) {
     return /* @__PURE__ */ jsx(
       "div",
@@ -66621,7 +67839,7 @@ function PageContainer({
   const showStickyHeader = showBackLink || hasContainerHeading;
   const backLabel = goBackLinkData?.label ?? "Back";
   const backHref = goBackLinkData?.href;
-  const LinkComponent = goBackLinkData?.LinkComponent;
+  const LinkComponent = goBackLinkData?.linkComponent;
   return /* @__PURE__ */ jsx(
     "div",
     {
@@ -66646,7 +67864,7 @@ function PageContainer({
               {
                 className: cn(
                   "flex flex-col gap-2",
-                  "sticky top-0 z-11 bg-background",
+                  "sticky top-0 z-11 bg-background/75 backdrop-blur-xs",
                   elevateHeading && "shadow-md shadow-accent/30"
                 ),
                 children: [
@@ -66751,4 +67969,4 @@ lottie-react/build/index.es.js:
   (*! goToAndStop must be relative to the start of the current segment *)
 */
 
-export { Accordion3 as Accordion, AdvancedSearchBox, Alert, AnimatedCard, AnimatedRainmakerLogo, AreaChart, AsyncCombobox, AsyncMultiSelect, BarChart, BasicDetailsCard, CHART_CATEGORY_COLORS, CHART_SERIES_COLORS, Calendar, CalendarDayButton, Carousel2 as Carousel, ChartContainer, ChartLegend, ChartLegendContent, ChartStyle, ChartTooltip, ChartTooltipContent, Checkbox2 as Checkbox, CircularProgress, Code, CollapsibleCard, ComposedChart, ConfirmationDialog, ContentContainer, CopiableText, DEFAULT_CHART_SERIES_COLORS, DEFAULT_PAGE_SIZE_OPTIONS, DataTable, DatePicker, DateRangePicker, DeviceIcon, Dialog2 as Dialog, DialogClose2 as DialogClose, DialogContent2 as DialogContent, DialogDescription2 as DialogDescription, DialogFooter2 as DialogFooter, DialogHeader2 as DialogHeader, DialogTitle2 as DialogTitle, DialogTrigger2 as DialogTrigger, DonutChart, DynamicList, FileUpload, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, FullSizeError, FullscreenDialog, IconAvatar, IconTextActionCard, Illustration, InlineError, InputOTP, InputOTPSeparator, KeyValueManager, LineChart, ListDetails, LottieAnimationContainer, MarkdownContent, MonospaceContent, OverflowBadgeList, PRESET_IDS, PRESET_LABELS, PageContainer, PageContainerSkeleton, Pagination, PopCollectionItem, PreviewCard2 as PreviewCard, PreviewCardBackdrop2 as PreviewCardBackdrop, PreviewCardPanel, PreviewCardTrigger2 as PreviewCardTrigger, ProgressBar, RadioGroup3 as RadioGroup, RequirementList, ScrollableSections, SearchBox, SectionCard, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, SelectableCardList, SimpleCard, SimpleClickableCard, SimpleInfoCard, SimpleList, SimplePaginatedList, SimplifiedDate, Spinner, StatCard, StatusBadge, StatusCardList, Switch2 as Switch, TYPOGRAPHY_VARIANTS, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, TableSkeleton, Tabs2 as Tabs, TabsContent2 as TabsContent, TabsContents2 as TabsContents, TabsList2 as TabsList, TabsTrigger2 as TabsTrigger, Tag, TagInput, Textarea, TimePicker, Toast, Toaster, TogglableItemsList, ToggleGroup2 as ToggleGroup, ToggleGroupItem2 as ToggleGroupItem, TransferList, TreemapChart, Typography, UserTypeBadge, VerificationInProgress, VerticalStepper, animatedCardAnimations, animatedCardTypeKeys, buildSeriesChartConfig, computeDateRange, getChartSeriesColor, illustrationRegistry, illustrationsById, no_data_card_default, parseSvgViewBoxAspectRatio, statusBadgeSizeVariants, toast, typographyDefaultElement, typographyVariantClasses, useFormField, userTypeBadgeRegistry, userTypeBadgeSizeVariants, userTypeBadgeUserTypes };
+export { Accordion3 as Accordion, AdvancedSearchBox, Alert, AnimatedCard, AnimatedRainmakerLogo, AreaChart, AsyncCombobox, AsyncMultiSelect, BarChart, BasicDetailsCard, CHART_CATEGORY_COLORS, CHART_SERIES_COLORS, Calendar, CalendarDayButton, Carousel2 as Carousel, ChartContainer, ChartLegend, ChartLegendContent, ChartStyle, ChartTooltip, ChartTooltipContent, Checkbox2 as Checkbox, CircularProgress, Code, CollapsibleCard, ComposedChart, ConfirmationDialog, ContentContainer, CopiableText, DEFAULT_CHART_SERIES_COLORS, DEFAULT_PAGE_SIZE_OPTIONS, DataTable, DatePicker, DateRangePicker, DeviceIcon, Dialog2 as Dialog, DialogClose2 as DialogClose, DialogContent2 as DialogContent, DialogDescription2 as DialogDescription, DialogFooter2 as DialogFooter, DialogHeader2 as DialogHeader, DialogTitle2 as DialogTitle, DialogTrigger2 as DialogTrigger, DonutChart, DynamicList, FileInput, FileUpload, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, FullSizeError, FullscreenDialog, IconAvatar, IconTextActionCard, Illustration, InlineError, InputOTP, InputOTPSeparator, KeyValueManager, LineChart, ListDetails, LottieAnimationContainer, MarkdownContent, MonospaceContent, NavBar, OverflowBadgeList, PRESET_IDS, PRESET_LABELS, PageContainer, PageContainerSkeleton, Pagination, PopCollectionItem, PreviewCard2 as PreviewCard, PreviewCardBackdrop2 as PreviewCardBackdrop, PreviewCardPanel, PreviewCardTrigger2 as PreviewCardTrigger, ProgressBar, RadioGroup3 as RadioGroup, RequirementList, ScrollableSections, SearchBox, SectionCard, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, SelectableCardList, SimpleCard, SimpleClickableCard, SimpleInfoCard, SimpleList, SimplePaginatedList, SimplifiedDate, Spinner, StatCard, StatusBadge, StatusCardList, Switch2 as Switch, TYPOGRAPHY_VARIANTS, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, TableSkeleton, Tabs2 as Tabs, TabsContent2 as TabsContent, TabsContents2 as TabsContents, TabsList2 as TabsList, TabsTrigger2 as TabsTrigger, Tag, TagInput, Textarea, TimePicker, Toast, Toaster, TogglableItemsList, ToggleGroup2 as ToggleGroup, ToggleGroupItem2 as ToggleGroupItem, TransferList, TreemapChart, Typography, UserTypeBadge, VerificationInProgress, VerticalStepper, animatedCardAnimations, animatedCardTypeKeys, buildSeriesChartConfig, computeDateRange, getChartSeriesColor, illustrationRegistry, illustrationsById, no_data_card_default, parseSvgViewBoxAspectRatio, statusBadgeSizeVariants, toast, typographyDefaultElement, typographyVariantClasses, useFormField, userTypeBadgeRegistry, userTypeBadgeSizeVariants, userTypeBadgeUserTypes };